/* Design tokens from PRD FR-5.5 */
:root {
  --bg:#FFFFFF; --surface:#F5F7FA; --text:#0F172A; --muted:#5B6472;
  --primary:#2563EB; --primary-contrast:#FFFFFF; --border:#E2E8F0;
  --radius:12px; --shadow:0 1px 3px rgba(15,23,42,.08);
}
html.dark {
  --bg:#0E1116; --surface:#161B22; --text:#E6EDF3; --muted:#9AA7B4;
  --primary:#4C8DFF; --primary-contrast:#0E1116; --border:#262D36;
  --shadow:none;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }

.site-header { display:flex; align-items:center; gap:1rem; padding:.8rem 1.2rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:5; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.15rem; color:var(--text); }
.header-nav { margin-left:auto; display:flex; gap:1rem; align-items:center; }
.icon-btn { background:none; border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:.4rem; cursor:pointer; }

.site-footer { display:flex; gap:1.2rem; justify-content:center; padding:2rem 1rem; border-top:1px solid var(--border); margin-top:3rem; color:var(--muted); }

.hero { max-width:900px; margin:12vh auto 4rem; padding:0 1rem; text-align:center; }
.logo-xl { font-size:3.4rem; letter-spacing:-.03em; margin:0 0 .4rem; }
.tagline { color:var(--muted); margin-bottom:2rem; }

.search-form { display:flex; gap:.5rem; }
.search-form input { flex:1; padding:.8rem 1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:1rem; }
.search-form.big input { font-size:1.1rem; padding:1rem 1.2rem; }
.search-form.compact { width:min(560px,100%); }
.btn-primary { background:var(--primary); color:var(--primary-contrast); border:none; padding:.8rem 1.4rem; border-radius:var(--radius); font-weight:600; cursor:pointer; }
.btn-primary:hover { filter:brightness(1.1); }

.quick-links { display:flex; gap:.6rem; justify-content:center; list-style:none; padding:0; margin-top:1.4rem; flex-wrap:wrap; }
.quick-links a { background:var(--surface); border:1px solid var(--border); padding:.3rem .8rem; border-radius:999px; font-size:.9rem; }

.tabs { display:flex; gap:1.4rem; border-bottom:1px solid var(--border); overflow-x:auto; max-width:1100px; margin:0 max(24px, 8vw); padding:.8rem 1rem 0; }
.tabs a { color:var(--muted); padding-bottom:.5rem; }
.tabs a.active { color:var(--primary); border-bottom:2px solid var(--primary); font-weight:600; }
.filters { padding:.6rem 1rem; color:var(--muted); font-size:.9rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; max-width:1100px; margin:0 max(24px, 8vw); }
.filters a.active { color:var(--primary); font-weight:600; }

.results { list-style:none; max-width:1100px; margin:1rem max(24px, 8vw); padding:0 1rem; }
.result { padding:1rem 0; border-bottom:1px solid var(--border); display:flex; gap:1.2rem; align-items:flex-start; }
.result-text { flex:1 1 auto; min-width:0; }
.result-thumb { width:130px; height:90px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.result h3 { margin:.1rem 0 .2rem; font-size:1.15rem; }
.result .url { color:var(--muted); font-size:.85rem; margin:0 0 .3rem; word-break:break-all; }
.result .snippet { margin:0; color:var(--text); }
.badge { background:var(--surface); border:1px solid var(--border); border-radius:6px; font-size:.7rem; padding:.1rem .4rem; color:var(--muted); margin-right:.3rem; }
.badge.onion { border-color:#7C3AED; color:#7C3AED; }

.correction, .rewrite { max-width:960px; margin:0 max(24px,8vw); padding:0 1rem; color:var(--muted); font-size:.95rem; }
.took { color:var(--muted); font-size:.8rem; margin-left:max(24px,8vw); padding:0 1rem; }
.pagination { display:flex; gap:1rem; justify-content:center; margin:1.5rem 0; }
.empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.alert { background:#FEE2E2; color:#7F1D1D; border:1px solid #FCA5A5; padding:1rem; border-radius:var(--radius); max-width:960px; margin:1rem max(24px,8vw); }
html.dark .alert { background:#3B1F1F; color:#FCA5A5; border-color:#7F1D1D; }
.related { max-width:960px; margin:1rem max(24px,8vw); padding:0 1rem; color:var(--muted); }
.doc { max-width:960px; margin:2rem auto; padding:0 1rem; }
.chip { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:.4rem 1rem; margin-right:.4rem; cursor:pointer; }
.suggest { position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); list-style:none; padding:.3rem 0; margin:0; z-index:10; max-height:260px; overflow:auto; }
.suggest:empty { display:none; }
.suggest li { padding:.4rem 1rem; cursor:pointer; }
.suggest li:hover { background:var(--border); }

@media (max-width:640px){ .logo-xl{font-size:2.6rem;} .search-form.compact{width:100%;} .header-nav a{font-size:.85rem;} .result-thumb{width:88px;height:66px;} .results{margin:1rem 0;} .correction,.rewrite,.alert,.related,.took{margin-left:0;} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important;} }

.chip.active { background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); }
.result h3 a { color:var(--primary); }
.result h3 a:hover { text-decoration:underline; }
.result .url { font-size:.82rem; }
.site-header { backdrop-filter:blur(6px); }
main { min-height:60vh; }