/* ══════════════════════════════════════════
       ARA SAYFASI
    ══════════════════════════════════════════ */
    .search-layout { display: grid; grid-template-columns: 340px 1fr; gap: 22px; min-height: calc(100vh - 36px); background: transparent; }

    /* Sidebar */
    .sidebar {
      position: relative;
      background:
        radial-gradient(circle at 15% 0%, rgba(14, 165, 233, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 52%, #f5faff 100%);
      border: 1px solid rgba(178, 206, 235, 0.9);
      border-radius: 26px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      overflow-y: auto;
      box-shadow: 0 28px 70px rgba(10, 31, 58, 0.13), 0 1px 0 rgba(255,255,255,0.95) inset;
    }
    .sidebar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 22px;
      right: 22px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #19d49b, #0ea5e9 52%, rgba(14,165,233,0));
    }
    .upload-zone {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(14, 165, 233, 0.68);
      border-radius: 24px;
      padding: 34px 18px;
      min-height: 228px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 13px;
      background:
        radial-gradient(circle at 50% 12%, rgba(14,165,233,0.16), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
      box-shadow: 0 18px 42px rgba(14,165,233,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .upload-zone::before {
      content: '';
      position: absolute;
      inset: 12px;
      border: 1px dashed rgba(14, 165, 233, 0.35);
      border-radius: 18px;
      pointer-events: none;
    }
    .upload-zone::after {
      content: '';
      position: absolute;
      width: 160px;
      height: 160px;
      right: -70px;
      top: -82px;
      background: radial-gradient(circle, rgba(25,212,155,0.22), transparent 68%);
      pointer-events: none;
    }
    .upload-zone > * { position: relative; z-index: 1; }
    .upload-zone:hover, .upload-zone.drag { transform: translateY(-2px); border-color: #0ea5e9; box-shadow: 0 24px 56px rgba(14,165,233,0.18), inset 0 1px 0 rgba(255,255,255,0.95); }
    .upload-zone.loaded { border-style: solid; border-color: rgba(25,212,155,0.82); background: radial-gradient(circle at 50% 12%, rgba(25,212,155,0.18), transparent 34%), linear-gradient(180deg, #f7fffc 0%, #eef9ff 100%); }
    .upload-icon { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, #dff1ff 0%, #eef8ff 48%, #e4fff3 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 32px rgba(14,165,233,0.18), inset 0 1px 0 rgba(255,255,255,0.95); }
    .upload-icon svg { width: 27px; height: 27px; stroke: var(--blue); fill: none; stroke-width: 1.8; filter: drop-shadow(0 5px 10px rgba(14,165,233,0.18)); }
    .upload-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #142238; }
    .upload-sub { font-size: 15px; color: #60728d; }
    .upload-fname { font-family: var(--font-data); font-size: 14px; color: var(--blue); margin-top: 2px; word-break: break-all; }
    .section-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
    .filter-group { display: flex; flex-direction: column; gap: 8px; }
    .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .filter-row label { font-size: 12px; color: var(--text2); }
    .filter-val { font-size: 12px; color: var(--blue); min-width: 32px; text-align: right; }
    input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 3px; border-radius: 2px; background: var(--bg3); outline: none; }
    input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); cursor: pointer; }
    select { background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text); padding: 5px 8px; font-size: 12px; width: 100%; outline: none; }
    .search-btn { width: 100%; padding: 9px; border-radius: var(--radius); background: var(--blue); color: #fff; border: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; }
    .search-btn:hover { background: var(--blue2); }
    .search-btn:disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; transform: none; }
    .divider { height: 0.5px; background: var(--border); }

    /* Main panel */
    .main { padding: 2px 0 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
    .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text3); padding: 80px 20px; text-align: center; }
    .empty-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--bg2); display: flex; align-items: center; justify-content: center; }
    .empty-icon svg { width: 28px; height: 28px; stroke: var(--text3); fill: none; stroke-width: 1.5; }
    .empty-title { font-size: 15px; color: var(--text2); font-weight: 500; }
    .empty-sub { font-size: 13px; max-width: 280px; line-height: 1.6; }
    .results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    .results-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
    .results-meta { font-size: 12px; color: var(--text3); }
    .view-toggle { display: flex; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
    .vbtn { padding: 5px 10px; background: transparent; border: none; color: var(--text3); cursor: pointer; font-size: 12px; }
    .vbtn.active { background: var(--bg3); color: var(--text); }
    .query-summary { display: block; }
    .query-compact-card {
      font-family: var(--font-data);
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(18, 212, 156, 0.22), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(14, 165, 233, 0.26), transparent 32%),
        linear-gradient(135deg, #07172d 0%, #0b1f3c 48%, #071527 100%);
      border: 1px solid rgba(125, 211, 252, 0.34);
      border-radius: 24px;
      box-shadow: 0 28px 70px rgba(4, 18, 40, 0.24), 0 12px 24px rgba(14, 165, 233, 0.10), inset 0 1px 0 rgba(255,255,255,0.12);
      display: grid;
      grid-template-columns: 238px minmax(0, 1fr);
      gap: 24px;
      align-items: center;
      padding: 18px;
    }
    .query-compact-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, rgba(255,255,255,0.18), transparent 28%, transparent 72%, rgba(34, 211, 238, 0.12));
      pointer-events: none;
    }
    .query-compact-card > * { position: relative; z-index: 1; }
    .query-preview-card {
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      border: 1px solid rgba(255,255,255,0.72);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      aspect-ratio: 1 / 1;
      box-shadow: 0 18px 34px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(14,165,233,0.10);
    }
    .query-match-pill { font-family: var(--font-data); font-size: 11px; font-weight: 800; color: #05263b; background: linear-gradient(135deg, #a7f3d0, #7dd3fc); border: 1px solid rgba(255,255,255,0.72); border-radius: 999px; padding: 6px 12px; white-space: nowrap; box-shadow: 0 10px 22px rgba(14,165,233,0.18); }
    .query-preview-media { width: 100%; height: 100%; background: #ffffff; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .query-preview-media img { width: 100%; height: 100%; object-fit: contain; display: block; filter: contrast(1.55) brightness(1.12); }
    .query-preview-fallback { color: #7a808d; font-size: 12px; }
    .query-info-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
      backdrop-filter: blur(10px);
    }
    .query-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .query-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .query-info-title { font-family: var(--font-ui); font-size: 11px; font-weight: 800; color: #7dd3fc; letter-spacing: 0.12em; text-transform: uppercase; }
    .query-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .query-file-name { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #ffffff; letter-spacing: -0.03em; text-shadow: 0 10px 28px rgba(0,0,0,0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .query-file-ext { font-family: var(--font-data); font-size: 10px; font-weight: 800; letter-spacing: 0.10em; color: #dffcff; background: rgba(14, 165, 233, 0.18); border: 1px solid rgba(125, 211, 252, 0.38); border-radius: 999px; padding: 6px 10px; flex-shrink: 0; }
    .qstat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
    .qstat {
      font-family: var(--font-data);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      min-height: 72px;
      padding: 10px 8px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .qstat-label { font-size: 10px; color: #9fb8d8; text-transform: uppercase; letter-spacing: 0.09em; }
    .qstat-val { font-size: 20px; font-weight: 800; color: #ffffff; line-height: 1.1; }
    .results-divider { display: flex; align-items: center; gap: 14px; margin: 12px 0 2px; color: #31445f; }
    .results-divider-label { font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
    .results-divider-line { height: 2px; flex: 1; border-radius: 999px; background: linear-gradient(90deg, rgba(14,165,233,0.45), rgba(16,185,129,0.20) 42%, rgba(185,203,224,0) 100%); }
    .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); gap: 18px; }
    .results-list { display: flex; flex-direction: column; gap: 10px; }
    .result-card {
      --match-accent: #0ea5e9;
      --match-soft: rgba(14,165,233,0.14);
      --match-border: rgba(14,165,233,0.30);
      position: relative;
      background: #ffffff;
      border: 1px solid rgba(196, 211, 230, 0.92);
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      box-shadow: 0 18px 42px rgba(15, 35, 61, 0.10), 0 1px 0 rgba(255,255,255,0.9) inset;
    }
    .result-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--match-accent), rgba(255,255,255,0));
      z-index: 2;
    }
    .result-card:hover { transform: translateY(-4px); border-color: var(--match-border); box-shadow: 0 30px 64px rgba(15, 35, 61, 0.17), 0 12px 26px var(--match-soft); }
    .result-card.selected { border-color: var(--blue); box-shadow: 0 24px 54px rgba(14,165,233,0.18); }
    .result-card.score-elite { --match-accent: #10b981; --match-soft: rgba(16,185,129,0.20); --match-border: rgba(16,185,129,0.46); }
    .result-card.score-high { --match-accent: #22c55e; --match-soft: rgba(34,197,94,0.17); --match-border: rgba(34,197,94,0.38); }
    .result-card.score-gold { --match-accent: #f59e0b; --match-soft: rgba(245,158,11,0.18); --match-border: rgba(245,158,11,0.42); }
    .result-card.score-low { --match-accent: #f97316; --match-soft: rgba(249,115,22,0.15); --match-border: rgba(249,115,22,0.32); }
    .card-preview { background: #ffffff; height: 270px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid #e8eef6; overflow: hidden; }
    .card-preview::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 82% 12%, var(--match-soft), transparent 36%);
      pointer-events: none;
      z-index: 1;
    }
    .card-preview::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(15, 35, 61, 0.06); border-radius: 18px; pointer-events: none; z-index: 2; }
    .card-preview img,
    .card-preview svg,
    .card-preview canvas,
    .card-preview > div:not(.card-badge) { position: relative; z-index: 1; }
    .card-badge { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: var(--font-data); font-size: 14px; font-weight: 900; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.82); box-shadow: 0 14px 26px rgba(15,23,42,0.15); backdrop-filter: blur(8px); }
    .badge-high { background: linear-gradient(135deg, rgba(220,252,231,0.96), rgba(167,243,208,0.94)); color: #059669; }
    .badge-med { background: linear-gradient(135deg, rgba(255,247,237,0.98), rgba(254,215,170,0.94)); color: #f59e0b; }
    .badge-low { background: linear-gradient(135deg, rgba(255,241,242,0.98), rgba(254,202,202,0.92)); color: #dc2626; }
    .card-body { padding: 10px 12px; }
    .card-name { font-family: var(--font-data); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
    .card-path { font-family: var(--font-data); font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
    .card-stats { display: flex; gap: 10px; flex-wrap: wrap; }
    .cstat { font-family: var(--font-data); font-size: 10px; color: var(--text3); }
    .cstat span { color: var(--text2); font-weight: 500; }
    .sim-bar-wrap { margin-top: 8px; }
    .sim-bar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-bottom: 4px; }
    .sim-bar { height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
    .sim-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
    .layer-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
    .layer-chip { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--bg3); color: var(--text3); border: 1px solid var(--border); }
    /* "Neden benzer?" rozetleri */
    .reason-section-title { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; margin: 8px 0 4px; }
    .reason-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .reason-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; line-height: 1.2; padding: 3px 7px; border-radius: 10px; font-weight: 500; }
    .reason-chip .reason-ico { font-size: 11px; opacity: 0.85; }
    .reason-chip .reason-lbl { white-space: nowrap; }
    .reason-chip .reason-val { opacity: 0.75; font-weight: 600; }
    .reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    .reason-list li { display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 8px; font-size: 11.5px; padding: 4px 8px; background: var(--bg3); border-radius: 6px; }
    .reason-dot { width: 8px; height: 8px; border-radius: 50%; }
    .reason-row-label { color: var(--text2); }
    .reason-row-value { color: var(--text3); font-weight: 500; font-size: 10.5px; }
    .reason-row-tone { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
    .reason-empty { font-size: 11px; color: var(--text3); font-style: italic; }
    .reason-toggle-btn { background: transparent; border: 1px dashed var(--border2); color: var(--text3); border-radius: 4px; padding: 2px 6px; font-size: 10px; cursor: pointer; margin-top: 4px; }
    .reason-toggle-btn:hover { color: var(--text2); border-color: var(--text3); }
    .result-list-card {
      --match-accent: #0ea5e9;
      --match-soft: rgba(14,165,233,0.12);
      --match-border: rgba(14,165,233,0.28);
      background: linear-gradient(180deg, #ffffff, #f9fbff);
      border: 1px solid rgba(204, 216, 232, 0.92);
      border-radius: 16px;
      padding: 12px 16px;
      cursor: pointer;
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 12px 26px rgba(15,35,61,0.07);
      border-left: 4px solid var(--match-accent);
    }
    .result-list-card.score-elite { --match-accent: #10b981; --match-soft: rgba(16,185,129,0.18); --match-border: rgba(16,185,129,0.42); }
    .result-list-card.score-high { --match-accent: #22c55e; --match-soft: rgba(34,197,94,0.15); --match-border: rgba(34,197,94,0.36); }
    .result-list-card.score-gold { --match-accent: #f59e0b; --match-soft: rgba(245,158,11,0.16); --match-border: rgba(245,158,11,0.40); }
    .result-list-card.score-low { --match-accent: #f97316; --match-soft: rgba(249,115,22,0.13); --match-border: rgba(249,115,22,0.32); }
    .result-list-card:hover { transform: translateY(-2px); border-color: var(--match-border); box-shadow: 0 18px 34px rgba(15,35,61,0.11), 0 10px 20px var(--match-soft); }
    .result-list-card.selected { border-color: var(--blue); }
    .list-rank { font-size: 12px; font-weight: 600; color: var(--text3); min-width: 22px; }
    .list-info { flex: 1; min-width: 0; }
    .list-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .list-path { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .list-stats { display: flex; gap: 16px; flex-shrink: 0; }
    .lstat { text-align: right; }
    .lstat-val { font-size: 13px; font-weight: 500; }
    .lstat-lbl { font-size: 10px; color: var(--text3); }
    .sim-pill { font-family: var(--font-data); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }
    .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px; color: var(--text3); }
    .spinner { width: 32px; height: 32px; border: 2px solid var(--border2); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @media (max-width: 1260px) { .qstat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 920px) {
      .query-compact-card { grid-template-columns: 1fr; }
      .query-preview-card { max-width: 240px; width: 100%; justify-self: center; }
      .qstat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


    /* ═══════════════ Figma-style Search / Compare redesign ═══════════════ */
    #page-search.active {
      background: #edf3f9 !important;
      padding: 0 !important;
      align-items: stretch !important;
      flex-direction: column !important;
    }
    #page-search .page-header { display: none !important; }
    .search-figma-shell {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 20px 24px 28px;
      color: #0f172a;
    }
    .search-start-head { margin-bottom: 14px; }
    .search-start-head h1,
    .search-results-head h1 {
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #0f172a;
      margin: 0 0 4px;
    }
    .search-start-head p,
    .search-results-sub {
      font-size: 13px;
      line-height: 1.4;
      color: #667790;
      font-weight: 500;
    }
    .search-start-grid { display: none; }
    .search-start-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

    .s-bottom-row {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: 14px;
      align-items: start;
    }
    .s-info-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    @media (max-width: 860px) { .s-bottom-row { grid-template-columns: 1fr; } }
    #page-search .search-upload-hero {
      min-height: 200px;
      padding: 28px 20px;
      border: 2px dashed #c8d5e5;
      border-radius: 14px;
      background: rgba(255,255,255,0.32);
      box-shadow: none;
      gap: 10px;
    }
    #page-search .search-upload-hero::before,
    #page-search .search-upload-hero::after { display: none; }
    #page-search .search-upload-hero:hover,
    #page-search .search-upload-hero.drag {
      transform: none;
      border-color: #2f66eb;
      background: rgba(255,255,255,0.54);
      box-shadow: 0 22px 50px rgba(47,102,235,0.10);
    }
    #page-search .search-upload-hero.loaded {
      border: 2px dashed #16a34a;
      background: #edfdf3;
      color: #15803d;
    }
    #page-search .search-upload-hero .upload-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: #e9f2ff;
      border: 2px solid #b9d6ff;
      box-shadow: none;
      color: #2f66eb;
    }
    #page-search .search-upload-hero.loaded .upload-icon {
      background: #e8fff0;
      border-color: #b7f4cb;
      color: #16a34a;
    }
    #page-search .search-upload-hero .upload-icon svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      filter: none;
      stroke-width: 1.9;
    }
    #page-search .search-upload-hero .upload-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #162033;
      margin-top: 6px;
    }
    #page-search .search-upload-hero .upload-sub {
      font-size: 13px;
      font-weight: 500;
      color: #91a0b4;
    }
    #page-search .search-upload-hero.loaded .upload-title,
    #page-search .search-upload-hero.loaded .upload-sub,
    #page-search .search-upload-hero.loaded .upload-fname { color: #16a34a; }
    .search-format-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:12px; }
    .search-format-chip {
      min-width: 44px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #eef3f9;
      color: #45556b;
      font-size: 12px;
      font-weight: 700;
    }
    .search-max-note {
      margin-top: 6px;
      color: #c8d2df;
      font-size: 12px;
      font-weight: 600;
    }
    .search-remove-file {
      display: none;
      border: 0;
      background: transparent;
      color: #ef4444;
      font-size: 19px;
      font-weight: 800;
      cursor: pointer;
      margin-top: 12px;
    }
    .search-upload-hero.loaded .search-format-row,
    .search-upload-hero.loaded .search-max-note { display: none; }
    .search-upload-hero.loaded .search-remove-file { display: inline-flex; align-items:center; gap:8px; }
    .search-card {
      background: #ffffff;
      border: 1px solid #dbe5f0;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(15, 35, 61, 0.05);
    }
    .search-settings-card { padding: 14px 18px 18px; }
    .search-card-title {
      display:flex;
      align-items:center;
      gap:8px;
      font-size:14px;
      font-weight:800;
      color:#101827;
      margin-bottom:14px;
    }
    .search-card-title svg { width:16px; height:16px; stroke:#2f66eb; fill:none; stroke-width:2; }
    .search-field-label {
      font-size: 12px;
      color:#273449;
      font-weight:700;
      margin-bottom:8px;
    }
    .search-category-native { position:absolute !important; opacity:0 !important; pointer-events:none !important; width:1px !important; height:1px !important; }
    .search-category-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
    .search-category-chip {
      border:1px solid #d6e1ee;
      background:#f9fbfe;
      color:#4a5b72;
      border-radius:8px;
      padding:5px 10px;
      font-size:12px;
      font-weight:600;
      cursor:pointer;
      transition: all 0.16s ease;
    }
    .search-category-chip:hover { border-color:#abc4e7; background:#f2f7ff; }
    .search-category-chip.active {
      background:#2f66eb;
      border-color:#2f66eb;
      color:#ffffff;
      box-shadow:0 4px 10px rgba(47,102,235,0.22);
    }
    .search-threshold-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:10px;
    }
    .search-threshold-pill {
      padding:4px 12px;
      border-radius:8px;
      background:#f0f5ff;
      color:#2f66eb;
      font-size:15px;
      font-weight:800;
    }
    #page-search .search-settings-card input[type=range] {
      width:100%;
      height:6px;
      border-radius:999px;
      background: linear-gradient(90deg, #2f66eb 0%, #2f66eb 55%, #d5dde8 55%, #d5dde8 100%);
      box-shadow:none;
    }
    #page-search .search-settings-card input[type=range]::-webkit-slider-thumb {
      width:16px;
      height:16px;
      border:0;
      background:#2f66eb;
      box-shadow:none;
    }
    .search-range-scale {
      display:flex;
      justify-content:space-between;
      margin-top:8px;
      color:#9aa9bf;
      font-size:12px;
      font-weight:700;
    }
    .search-options-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; }
    .search-option { display:flex; align-items:flex-start; gap:8px; color:#263449; font-size:13px; font-weight:700; }
    .search-option small { display:block; color:#97a5b9; font-size:11px; font-weight:600; margin-top:1px; }
    .search-option input { width:16px; height:16px; accent-color:#2f66eb; flex-shrink:0; }
    #page-search .search-btn.search-main-btn {
      height: 40px;
      min-height: 40px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      gap:8px;
      background:#2f66eb;
      box-shadow:none;
    }
    #page-search .search-btn.search-main-btn:disabled {
      background:#9aa9bd;
      color:#ffffff;
      opacity:1;
    }
    .search-btn-note {
      color:#9aa9bf;
      font-size:12px;
      text-align:center;
      font-weight:600;
      margin-top:4px;
    }
    .search-side-stack { display:flex; flex-direction:column; gap:12px; }
    .search-side-card { overflow:hidden; }
    .search-side-card h3 {
      display:flex;
      align-items:center;
      gap:8px;
      padding:12px 16px;
      border-bottom:1px solid #e7edf4;
      font-size:13px;
      font-weight:800;
      margin:0;
      color:#101827;
    }
    .search-side-card h3 svg { width:16px; height:16px; stroke:#91a4bd; fill:none; stroke-width:1.9; }
    .recent-list { display:flex; flex-direction:column; }
    .recent-item {
      display:grid;
      grid-template-columns:32px 1fr;
      gap:10px;
      padding:10px 16px;
      border-bottom:1px solid #eef2f6;
    }
    .recent-item:last-child { border-bottom:0; }
    .recent-icon {
      width:32px;
      height:32px;
      border-radius:8px;
      background:#f0f4f9;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#7690ad;
    }
    .recent-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .recent-name { font-size:13px; font-weight:700; color:#101827; }
    .recent-sub { font-size:11px; font-weight:600; color:#91a0b4; margin-top:2px; }
    .recent-meta { display:flex; align-items:center; gap:6px; margin-top:4px; color:#c4cedb; font-size:11px; font-weight:700; }
    .recent-format { padding:2px 6px; border-radius:5px; background:#f0f3f7; color:#45556b; font-weight:700; }
    .how-card {
      padding:16px 18px;
      background:linear-gradient(180deg,#eaf4ff,#dbeafe);
      border-color:#a8d0ff;
    }
    .how-card h3 {
      display:flex;
      align-items:center;
      gap:8px;
      color:#1e4fc7;
      font-size:15px;
      font-weight:900;
      margin:0 0 8px;
    }
    .how-card p { color:#3480ff; font-size:13px; line-height:1.45; font-weight:600; margin:0; }
    .format-support-card { padding:18px; }
    .format-support-card h3 { font-size:16px; font-weight:900; color:#101827; margin:0 0 14px; }
    .format-support-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .format-support-item { border:1px solid #e2e8f0; border-radius:10px; padding:11px 12px; background:#fbfcfe; }
    .format-support-item b { display:block; font-size:14px; color:#253246; margin-bottom:3px; line-height:1.25; }
    .format-support-item span { color:#91a0b4; font-size:12.5px; line-height:1.35; font-weight:700; }

    .search-results-shell { padding:16px 20px 32px; }
    .search-results-top {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .search-results-title-row { display:flex; align-items:center; gap:10px; }
    .search-back-btn {
      width:36px;
      height:36px;
      border-radius:10px;
      border:1px solid #dce6f2;
      background:#f5f9fd;
      color:#6b7d95;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .search-back-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .search-results-actions { display:flex; align-items:center; gap:8px; color:#667790; font-size:13px; font-weight:700; }
    .search-sort-select {
      height:32px;
      min-width:160px;
      padding:0 10px;
      border:1px solid #dbe5f0;
      border-radius:8px;
      background:#fff;
      color:#334155;
      font-size:13px;
      font-weight:600;
    }
    .search-action-btn {
      height:32px;
      border:1px solid #dbe5f0;
      border-radius:8px;
      background:#f8fbff;
      color:#334155;
      font-size:13px;
      font-weight:700;
      padding:0 12px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
      white-space:nowrap;
    }
    .search-sort-select { white-space:nowrap; }
    .search-action-btn.primary { background:#2f66eb; border-color:#2f66eb; color:#fff; box-shadow:0 4px 10px rgba(47,102,235,0.22); }
    .search-results-grid { display:grid; grid-template-columns: 240px minmax(0,1fr); gap:16px; align-items:start; }
    .search-results-left { display:flex; flex-direction:column; gap:12px; position:sticky; top:16px; }
    .query-side-card { padding:14px; }
    .query-side-title { color:#94a3b8; text-transform:uppercase; letter-spacing:0.08em; font-size:11px; font-weight:700; margin-bottom:10px; }
    .query-side-preview { height:110px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; padding:10px; overflow:hidden; }
    .query-side-preview img { width:100%; height:100%; object-fit:contain; }
    .query-side-name { font-size:13px; font-weight:700; color:#111827; margin-top:10px; }
    .query-side-sub { font-size:12px; color:#667790; font-weight:600; margin-top:4px; }
    .query-side-tags { display:flex; gap:6px; margin-top:10px; }
    .soft-tag { padding:3px 8px; border-radius:999px; background:#f1f5f9; color:#42607d; font-size:11px; font-weight:700; }
    .summary-card { padding:14px; }
    .summary-title { color:#94a3b8; text-transform:uppercase; letter-spacing:0.08em; font-size:11px; font-weight:700; margin-bottom:10px; }
    .summary-row { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#334155; font-weight:600; padding:4px 0; }
    .summary-dot { width:8px; height:8px; border-radius:999px; display:inline-block; margin-right:6px; }
    .summary-row strong { font-size:13px; }
    .search-results-list { display:flex; flex-direction:column; gap:10px; min-width:0; }
    .figma-result-card {
      --tone:#2f66eb;
      --tone-soft:#eff5ff;
      --tone-border:#bfdbfe;
      background:#ffffff;
      border:1px solid #dbe5f0;
      border-radius:12px;
      box-shadow:0 2px 8px rgba(15,35,61,0.07);
      overflow:hidden;
    }
    .figma-result-card.score-elite,
    .figma-result-card.score-high { --tone:#16a34a; --tone-soft:#f0fdf4; --tone-border:#bbf7d0; }
    .figma-result-card.score-gold { --tone:#ea580c; --tone-soft:#fff7ed; --tone-border:#fed7aa; }
    .figma-result-card.score-low { --tone:#e11d48; --tone-soft:#fff1f2; --tone-border:#fecdd3; }
    .figma-result-card.selected { border-color:#2f66eb; box-shadow:0 4px 16px rgba(47,102,235,0.18); }
    .figma-best-strip { display:flex; align-items:center; gap:8px; background:#ecfdf3; color:#16a34a; border-bottom:1px solid #bbf7d0; padding:6px 16px; font-size:12px; font-weight:700; }
    .figma-result-inner { display:grid; grid-template-columns:20px 120px minmax(0,1fr) 72px; gap:14px; padding:14px 16px; align-items:start; }
    .figma-check { width:16px; height:16px; border:1px solid #cbd5e1; border-radius:4px; margin-top:4px; flex-shrink:0; }
    .figma-result-preview {
      width:120px;
      height:120px;
      border:1px solid #e2e8f0;
      border-radius:10px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      padding:8px;
    }
    .figma-result-preview img,
    .figma-result-preview svg { width:100%; height:100%; object-fit:contain; display:block; filter:contrast(1.7) brightness(1.14); }
    .figma-result-main { min-width:0; }
    .figma-result-title-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
    .figma-result-title { font-size:14px; font-weight:700; color:#101827; }
    .figma-match-type { border:1px solid var(--tone-border); background:var(--tone-soft); color:var(--tone); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }
    .figma-result-sub { font-size:12px; color:#334155; font-weight:600; margin-bottom:4px; }
    .figma-result-meta { font-size:11px; color:#93a3b8; font-weight:600; }
    .figma-reasons-box { margin-top:8px; padding:8px 10px; background:#f8fafc; border-radius:8px; }
    .figma-reasons-title { display:flex; align-items:center; gap:6px; color:#334155; font-size:11px; font-weight:700; margin-bottom:6px; }
    .figma-reasons-box .reason-chips { gap:6px; }
    .figma-reasons-box .reason-chip { background:#eef2f7 !important; border:0 !important; color:#48586f !important; font-size:11px; padding:3px 8px; border-radius:999px; }
    .figma-score-box {
      justify-self:end;
      width:72px;
      min-height:72px;
      border:2px solid var(--tone-border);
      border-radius:12px;
      background:var(--tone-soft);
      color:var(--tone);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      font-weight:900;
    }
    .figma-score-box b { font-size:20px; line-height:1; }
    .figma-score-box span { font-size:10px; margin-top:4px; }
    .figma-result-actions { grid-column: 2 / 5; display:flex; align-items:center; gap:8px; border-top:1px solid #edf2f7; padding-top:10px; flex-wrap:wrap; }
    .figma-btn { min-height:32px; padding:0 12px; border-radius:8px; border:1px solid #dbe5f0; background:#fff; color:#64748b; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
    .figma-btn.primary { background:#2f66eb; color:#fff; border-color:#2f66eb; }
    .figma-btn.success { color:#16a34a; border-color:#bbf7d0; background:#fff; }
    .figma-btn.icon-only { margin-left:auto; width:32px; padding:0; justify-content:center; }
    .figma-btn.btn-3d { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border-color:#6366f1; letter-spacing:0.01em; }
    @media (max-width: 1400px) {
      .search-start-grid,
      .search-results-grid { grid-template-columns:1fr; }
      .search-results-left { position:static; grid-template-columns:1fr 1fr; display:grid; }
    }
    @media (max-width: 980px) {
      .search-figma-shell { padding:28px 18px 40px; }
      .figma-result-inner { grid-template-columns:1fr; }
      .figma-result-actions { grid-column:auto; }
      .figma-result-preview { width:100%; height:270px; }
      .figma-score-box { justify-self:start; }
      .search-results-top { align-items:flex-start; flex-direction:column; }
      .s-hero { flex-direction:column; gap:16px; }
      .s-hero-stats { width:100%; }
    }

    /* ── Hero banner ── */
    .s-hero {
      background: linear-gradient(135deg, #0f1d3a 0%, #162840 55%, #1a3458 100%);
      border-radius: 16px;
      padding: 28px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      margin-bottom: 20px;
    }
    .s-ai-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 10px;
      font-weight: 700;
      color: rgba(255,255,255,.65);
      letter-spacing: .07em;
      margin-bottom: 10px;
    }
    .s-hero-title {
      font-size: 24px !important;
      font-weight: 800 !important;
      color: #fff !important;
      margin: 0 0 8px !important;
      letter-spacing: -.02em;
    }
    .s-hero-sub {
      color: rgba(255,255,255,.55) !important;
      font-size: 14px !important;
      max-width: 440px;
      margin: 0 !important;
      line-height: 1.5;
    }
    .s-hero-stats { display: flex; gap: 10px; flex-shrink: 0; }
    .s-hstat {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      padding: 14px 18px;
      text-align: center;
      min-width: 84px;
    }
    .s-hstat-icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: rgba(255,255,255,.1);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 8px;
    }
    .s-hstat-num { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; }
    .s-hstat-label { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 600; }

    /* ── Search type tabs ── */
    .s-type-tabs {
      display: flex;
      gap: 4px;
      background: #f1f5f9;
      border-radius: 10px;
      padding: 4px;
    }
    .s-ttab {
      flex: 1;
      padding: 9px 16px;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      background: transparent;
      cursor: pointer;
      transition: .15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }
    .s-ttab.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
    .s-ttab:hover:not(.active) { color: #334155; background: rgba(255,255,255,.5); }

    /* ── Code search panel ── */
    .code-type-pills { display: flex; gap: 8px; margin-bottom: 14px; }
    .code-type-pill {
      padding: 8px 18px;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      background: #fff;
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      cursor: pointer;
      transition: all .15s;
    }
    .code-type-pill:hover { border-color: #2f66eb; color: #2f66eb; }
    .code-type-pill.active { border-color: #2f66eb; background: #eff4ff; color: #2f66eb; font-weight: 600; }
    .code-search-input-row { display: flex; gap: 8px; }
    .code-search-input {
      flex: 1;
      padding: 12px 16px;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      color: #0f172a;
      outline: none;
      transition: .15s;
      background: #fff;
    }
    .code-search-input:focus { border-color: #2f66eb; box-shadow: 0 0 0 3px rgba(47,102,235,.1); }
    .code-search-btn {
      padding: 12px 20px;
      background: #2f66eb;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      transition: .15s;
    }
    .code-search-btn:hover { background: #1d4ed8; }
    .code-results-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 10px;
      margin-top: 8px;
    }
    .code-result-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 14px;
      cursor: pointer;
      transition: .15s;
    }
    .code-result-card:hover { border-color: #2f66eb; box-shadow: 0 4px 12px rgba(47,102,235,.1); transform: translateY(-1px); }
    .crc-name { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
    .crc-meta { font-size: 11px; color: #94a3b8; }
    .crc-fmt { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; background: #f1f5f9; color: #475569; margin-top: 8px; }

/* ── Quick-decision dropdown ── */
.qd-drop {
  position: absolute;
  z-index: 300;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}
.qd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--qd-color, #374151);
  transition: background 0.15s;
  text-align: left;
  width: 100%;
}
.qd-opt:hover { background: rgba(0,0,0,0.05); }
.qd-opt-icon { font-size: 13px; }

/* ══════════════════════════════════════════
   SRCH2 — Yeni Arama Sayfası Tasarımı
══════════════════════════════════════════ */

/* Tab renk değişkenleri — shell sınıfına göre değişir */
.search-figma-shell {
  --tc: #2563eb;
  --tc-bg: #eff6ff;
  --tc-border: #bfdbfe;
  --tc-soft: rgba(37,99,235,0.10);
}
.search-figma-shell.srch2-green  { --tc: #16a34a; --tc-bg: #f0fdf4; --tc-border: #bbf7d0; --tc-soft: rgba(22,163,74,0.10); }
.search-figma-shell.srch2-orange { --tc: #ea580c; --tc-bg: #fff7ed; --tc-border: #fed7aa; --tc-soft: rgba(234,88,12,0.10); }
.search-figma-shell.srch2-purple { --tc: #7c3aed; --tc-bg: #faf5ff; --tc-border: #ddd6fe; --tc-soft: rgba(124,58,237,0.10); }

/* Panellerdeki aksiyon elemanları tab rengiyle boyansın */
#page-search .code-search-btn                  { background: var(--tc) !important; }
#page-search .code-search-input:focus          { border-color: var(--tc) !important; box-shadow: 0 0 0 3px var(--tc-soft) !important; }
#page-search .code-type-pill.active            { border-color: var(--tc) !important; background: var(--tc-soft) !important; color: var(--tc) !important; }
#page-search .code-type-pill:hover             { border-color: var(--tc) !important; color: var(--tc) !important; }
#page-search .search-btn.search-main-btn       { background: var(--tc) !important; }
#page-search .srch2-topk-pill.active           { background: #fff !important; border-color: var(--tc) !important; color: var(--tc) !important; font-weight: 800; box-shadow: none !important; }
#page-search .search-category-chip.active      { background: var(--tc) !important; border-color: var(--tc) !important; }
#page-search .search-threshold-pill            { color: var(--tc) !important; }
#page-search .search-settings-card input[type=range],
#page-search .srch2-settings-grid  input[type=range],
#searchAttrPanel input[type=range] {
  background: linear-gradient(90deg, var(--tc) 0%, var(--tc) var(--pct,55%), #d5dde8 var(--pct,55%), #d5dde8 100%) !important;
}
#page-search .search-settings-card input[type=range]::-webkit-slider-thumb,
#page-search .srch2-settings-grid  input[type=range]::-webkit-slider-thumb,
#searchAttrPanel input[type=range]::-webkit-slider-thumb { background: var(--tc) !important; }

/* Stats row */
.srch2-stats-row {
  display: none;
}
.srch2-stat-card {
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 14px;
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(15,35,61,0.06);
  border-left-width: 4px;
}
.srch2-sc--blue   { border-left-color: #2563eb; }
.srch2-sc--green  { border-left-color: #16a34a; }
.srch2-sc--orange { border-left-color: #ea580c; }
.srch2-sc--purple { border-left-color: #7c3aed; }

.srch2-sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.srch2-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.srch2-stat-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.srch2-icon-blue   { background: #eff6ff; color: #2563eb; }
.srch2-icon-green  { background: #f0fdf4; color: #16a34a; }
.srch2-icon-purple { background: #faf5ff; color: #7c3aed; }
.srch2-icon-orange { background: #fff7ed; color: #ea580c; }

.srch2-sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.srch2-badge-up   { background: #dcfce7; color: #16a34a; }
.srch2-badge-down { background: #fee2e2; color: #dc2626; }

.srch2-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 2px;
}
.srch2-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 10px;
}
.srch2-sc-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}
.srch2-sf-val { font-weight: 700; }
.srch2-sfv-blue   { color: #2563eb; }
.srch2-sfv-green  { color: #16a34a; }
.srch2-sfv-red    { color: #dc2626; }
.srch2-sfv-purple { color: #7c3aed; }
.srch2-sf-sub { color: #94a3b8; font-weight: 500; }

/* Tab row — underline style */
.srch2-tabs {
  display: flex;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-top: 3px solid var(--tc, #2563eb);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.srch2-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: .15s;
  text-align: left;
  border-radius: 0;
}
.srch2-tab + .srch2-tab { border-left: 1px solid #f1f5f9; }
.srch2-tab:hover:not(.active) { background: #f8fafd; }
.srch2-tab.active { box-shadow: inset 0 -3px 0 var(--tab-active-line, #2563eb); }
.srch2-tab-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.srch2-tab-icon svg { width: 17px; height: 17px; stroke: #64748b; fill: none; stroke-width: 1.8; }
.srch2-tab.active .srch2-tab-icon { background: #dbeafe; }
.srch2-tab.active .srch2-tab-icon svg { stroke: #2563eb; }
.srch2-tab-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srch2-tab-title { font-size: 13px; font-weight: 700; color: #334155; white-space: nowrap; }
.srch2-tab-sub   { font-size: 11px; font-weight: 500; color: #94a3b8; white-space: nowrap; }

/* Per-tab active colors — matches stat card above */
#stabUpload.active                         { --tab-active-line: #2563eb; background: #f0f7ff; }
#stabUpload.active .srch2-tab-icon         { background: #dbeafe; }
#stabUpload.active .srch2-tab-icon svg     { stroke: #2563eb; }
#stabUpload.active .srch2-tab-title        { color: #2563eb; }

#stabCode.active                           { --tab-active-line: #16a34a; background: #f0fdf4; }
#stabCode.active .srch2-tab-icon           { background: #dcfce7; }
#stabCode.active .srch2-tab-icon svg       { stroke: #16a34a; }
#stabCode.active .srch2-tab-title          { color: #16a34a; }

#stabAttr.active                           { --tab-active-line: #ea580c; background: #fff7ed; }
#stabAttr.active .srch2-tab-icon           { background: #ffedd5; }
#stabAttr.active .srch2-tab-icon svg       { stroke: #ea580c; }
#stabAttr.active .srch2-tab-title          { color: #ea580c; }

#stabPhoto.active                          { --tab-active-line: #7c3aed; background: #faf5ff; }
#stabPhoto.active .srch2-tab-icon          { background: #ede9fe; }
#stabPhoto.active .srch2-tab-icon svg      { stroke: #7c3aed; }
#stabPhoto.active .srch2-tab-title         { color: #7c3aed; }

/* Upload panel wrapper */
#srch2-upload-panel { display: flex; flex-direction: column; gap: 14px; }

/* Settings card wrapper (contains classify row + settings grid) */
.srch2-settings-card {
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(15,35,61,0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.srch2-settings-divider { height: 1px; background: #f1f5f9; margin: 0 -4px; }
.srch2-settings-grid--inner { border: none; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }

/* 3-column classification row */
.srch2-classify-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Settings grid */
.srch2-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(15,35,61,0.05);
}
.srch2-settings-col { display: flex; flex-direction: column; gap: 8px; }
.srch2-settings-label { font-size: 11px; font-weight: 700; color: #273449; text-transform: uppercase; letter-spacing: 0.06em; }
.srch2-settings-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Top-k pills */
.srch2-topk-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.srch2-topk-pill {
  padding: 5px 14px;
  border: 1.5px solid #dbe5f0;
  border-radius: 999px;
  background: #f8fbff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
}
.srch2-topk-pill:hover:not(.active) { border-color: #93b4e0; background: #f0f5ff; }
.srch2-topk-pill.active {
  background: #fff;
  border-color: #2f66eb;
  color: #2f66eb;
  font-weight: 800;
  box-shadow: none;
}

/* ── Custom tree-select ─────────────────────────────────────────────────────── */
.cst-wrap { position: relative; }
.cst-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
  transition: border-color .15s;
}
.cst-trigger:hover { border-color: #93b4e0; }
.cst-cur { font-size: 13px; font-weight: 500; color: #334155; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-arr { width: 14px; height: 14px; flex-shrink: 0; stroke: #94a3b8; transition: transform .2s; }
.cst-drop.open + .cst-trigger .cst-arr,
.cst-wrap:has(.cst-drop.open) .cst-arr { transform: rotate(180deg); }
.cst-drop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,35,61,0.13);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.cst-drop.open { display: block; }
.cst-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background .1s;
}
.cst-item:hover { background: #f1f5f9; }
.cst-item.active { background: var(--tc-bg, #eff6ff); color: var(--tc, #2563eb); font-weight: 700; }
.cst-all { color: #64748b; font-style: italic; }
.cst-all.active { color: var(--tc, #2563eb); font-style: normal; font-weight: 700; }
.cst-i-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cst-group-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  transition: background .1s;
}
.cst-group-hdr:hover { background: #f8fafc; }
.cst-g-chev { width: 12px; height: 12px; flex-shrink: 0; stroke: #94a3b8; transition: transform .18s; }
.cst-g-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cst-g-name { flex: 1; }
.cst-g-cnt { font-size: 11px; font-weight: 600; color: #94a3b8; background: #f1f5f9; border-radius: 999px; padding: 1px 7px; }
.cst-group-items { display: none; padding-left: 10px; }
.cst-group-items.open { display: block; }

/* Category native select */
.srch2-cat-select {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  color: #334155;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  appearance: auto;
}
.srch2-cat-select:focus { border-color: var(--tc, #2563eb); box-shadow: 0 0 0 3px var(--tc-soft, rgba(37,99,235,0.10)); }

/* Hide format chips inside upload zone */
#page-search .search-upload-hero .search-format-row { display: none; }

/* Thin slider in settings grid */
#page-search .srch2-settings-grid input[type=range],
#searchAttrPanel .srch2-settings-grid input[type=range] {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: none !important;
  height: 5px !important;
  border-radius: 999px !important;
  outline: none !important;
  width: 100% !important;
  cursor: pointer !important;
}
#page-search .srch2-settings-grid input[type=range]::-webkit-slider-thumb,
#searchAttrPanel .srch2-settings-grid input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
  cursor: pointer !important;
}

/* Slider scale row */
.srch2-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: -2px;
}

/* Mode toggle label */
.srch2-mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.srch2-mode-row input[type=checkbox] { cursor: pointer; accent-color: var(--tc, #2563eb); width: 15px; height: 15px; }
.srch2-mode-label { font-size: 13px; font-weight: 500; color: #475569; cursor: pointer; }

/* Info note */
.srch2-info-note {
  padding: 10px 14px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #0369a1;
}

/* Attr fields card */
.srch2-attr-fields-card {
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 12px;
  padding: 20px 20px 14px;
  box-shadow: 0 2px 8px rgba(15,35,61,0.05);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.srch2-attr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 20px;
}
.srch2-attr-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.srch2-attr-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1.5px solid #dbe5f0;
  border-radius: 9px;
  background: #f8fbff;
  color: #334155;
  outline: none;
  transition: border-color .15s;
}
.srch2-attr-input:focus { border-color: var(--tc, #ea580c); box-shadow: 0 0 0 3px var(--tc-soft, rgba(234,88,12,0.10)); }
.srch2-attr-input-row { display: flex; gap: 6px; align-items: center; }
.srch2-attr-input-row .srch2-attr-input { flex: 1; }
.srch2-attr-input-sep { font-size: 12px; color: #94a3b8; flex-shrink: 0; }
.srch2-attr-reset {
  align-self: flex-start;
  font-size: 12px;
  color: #dc2626;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
}

/* Photo search panel */
.srch2-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
}
.srch2-photo-card {
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15,35,61,0.05);
  padding: 18px;
}
.srch2-photo-upload {
  min-height: 260px;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.srch2-photo-upload.drag,
.srch2-photo-upload.loaded {
  border-color: #8b5cf6;
  background: #faf5ff;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.10);
}
.srch2-photo-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.srch2-photo-icon svg { width: 29px; height: 29px; }
.srch2-photo-title { font-size: 17px; font-weight: 800; color: #1e293b; }
.srch2-photo-sub { font-size: 13px; color: #64748b; }
.srch2-photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.srch2-photo-action {
  border: 1px solid #d8b4fe;
  background: #fff;
  color: #7c3aed;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.srch2-photo-action.primary {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}
.srch2-photo-preview {
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}
.srch2-photo-preview img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.srch2-photo-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Responsive */
@media (max-width: 1100px) {
  .srch2-tabs { flex-wrap: wrap; }
  .srch2-tab  { flex: 1 1 40%; }
}
@media (max-width: 960px) {
  .srch2-stats-row    { grid-template-columns: repeat(2, 1fr); }
  .srch2-settings-grid { grid-template-columns: 1fr; }
  .srch2-attr-grid    { grid-template-columns: repeat(2, 1fr); }
  .srch2-classify-row { grid-template-columns: 1fr; }
  .srch2-photo-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .srch2-attr-grid    { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .srch2-tab { padding: 12px 12px; gap: 8px; }
}

/* ── Searchable dropdown ── */
.srch-dd { position: relative; }
.srch-dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid #dbe5f0;
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s;
  text-align: left;
}
.srch-dd-btn:hover { border-color: #93b4e0; }
.srch-dd.open .srch-dd-btn { border-color: var(--tc, #2563eb); box-shadow: 0 0 0 3px var(--tc-soft, rgba(37,99,235,0.10)); }
.srch-dd-val { font-size: 11px; font-weight: 500; color: #334155; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-dd-btn > svg { flex-shrink: 0; stroke: #94a3b8; transition: transform .2s; }
.srch-dd.open .srch-dd-btn > svg { transform: rotate(180deg); }
.srch-dd-drop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 500;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,35,61,0.13);
  overflow: hidden;
}
.srch-dd.open .srch-dd-drop { display: block; }
.srch-dd-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.srch-dd-search-wrap > svg { flex-shrink: 0; stroke: #94a3b8; }
.srch-dd-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12px;
  color: #334155;
  background: transparent;
  font-family: inherit;
}
.srch-dd-list { max-height: 220px; overflow-y: auto; padding: 4px; }
.srch-dd-item {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background .1s;
}
.srch-dd-item:hover { background: #f1f5f9; }
.srch-dd-clear { color: #94a3b8; font-style: italic; }