:root { color-scheme: dark; --bg:#0b1020; --panel:#121a2f; --panel2:#17213a; --text:#edf2ff; --muted:#9fb0d0; --accent:#f0c66a; --line:#2b385a; --danger:#ff8a8a; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top left,#1b2850,var(--bg) 45%); color:var(--text); }
.hero { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1rem,4vw,3rem); border-bottom:1px solid var(--line); }
.hero h1 { margin:.15rem 0; font-size:clamp(2rem,5vw,4rem); letter-spacing:-.05em; }
.hero p { max-width:840px; color:var(--muted); font-size:1.1rem; }
.eyebrow { color:var(--accent)!important; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem!important; font-weight:700; }
button { background:var(--accent); color:#1b1400; border:0; border-radius:12px; padding:.8rem 1rem; font-weight:800; cursor:pointer; box-shadow:0 8px 28px #0004; }
button.secondary { background:#dbe6ff; color:#0d1831; }
button.link { background:transparent; color:var(--accent); box-shadow:none; padding:0; text-align:left; }
button:disabled { opacity:.6; cursor:wait; }
.layout { display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:1.25rem; padding:1.25rem clamp(1rem,4vw,3rem) 3rem; }
.panel, .content, .card, .article, .related { background:linear-gradient(180deg,var(--panel),#0f172b); border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 50px #0005; }
.filters { padding:1.25rem; position:sticky; top:1rem; align-self:start; }
label { display:block; color:var(--muted); font-size:.9rem; margin:.85rem 0; }
input, textarea { width:100%; margin-top:.35rem; background:#081022; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:.75rem; font:inherit; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.actions { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.hint, .meta { color:var(--muted); font-size:.92rem; }
.content { min-height:70vh; padding:1rem; }
.tabs { display:flex; gap:.5rem; border-bottom:1px solid var(--line); padding-bottom:.8rem; margin-bottom:1rem; }
.tabs button { background:var(--panel2); color:var(--text); box-shadow:none; }
.tabs button.active { background:var(--accent); color:#1b1400; }
.tab { display:none; }
.tab.active { display:block; }
.card { padding:1rem; margin:.85rem 0; cursor:pointer; transition:.15s transform, .15s border-color; }
.card:hover { transform:translateY(-2px); border-color:var(--accent); }
.card h3 { margin:.1rem 0 .3rem; }
mark { background:#ffe08a; color:#111; padding:0 .15em; border-radius:.2em; }
.article { padding:1.4rem; }
.article h2 { font-size:2rem; margin-top:0; }
.body { line-height:1.7; color:#f4f7ff; }
.body p { margin:1rem 0; }
.related { padding:1rem; margin-top:1rem; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--line); padding:.7rem; text-align:left; }
th { color:var(--accent); }
.loading { color:var(--accent); }
.error { color:var(--danger); white-space:pre-wrap; }
@media (max-width: 850px) { .layout { grid-template-columns:1fr; } .filters { position:static; } .hero { flex-direction:column; } }

.cover-thumb { width:72px; max-height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--line); box-shadow:0 8px 22px #0006; background:#081022; }
.no-cover { color:var(--muted); }