:root{
  font-family:Inter,system-ui,sans-serif;
  color:#172033;
  background:#f3f6fb;
  --surface:#fff;
  --surface-2:#edf3fb;
  --border:#d8e2ef;
  --accent:#2f6fed;
  --accent-2:#7256ee;
  --muted:#67768d;
  --success:#218a5d;
  --danger:#c94747;
}
*{box-sizing:border-box}
body{margin:0;background:
radial-gradient(circle at 84% 6%,rgba(47,111,237,.1),transparent 25%),#f3f6fb}
.topbar{display:flex;align-items:center;gap:1rem;background:#0d1629;color:white;padding:1rem clamp(1rem,4vw,3rem);position:sticky;top:0;z-index:10}
.topbar div{display:flex;flex-direction:column}.topbar small{color:#9fb0ca}.back{color:white;text-decoration:none}
main{max-width:1280px;margin:auto;padding:clamp(1rem,3vw,2rem)}
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem;align-items:center;background:linear-gradient(135deg,#101d36,#26396d);color:white;padding:clamp(1.4rem,4vw,2.4rem);border-radius:22px;box-shadow:0 18px 48px rgba(24,42,76,.14)}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.03;margin:.4rem 0 1rem}.hero p{color:#bdc9dc;line-height:1.65}
.eyebrow{font-size:.68rem;letter-spacing:.11em;font-weight:800;color:#79a6ff}
.indicators{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.indicator{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1rem}.indicator strong{display:block;font-size:1.45rem}
.tabs{display:flex;gap:.5rem;overflow:auto;margin:1rem 0}.tab{white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:#27364c;border-radius:11px;padding:.75rem 1rem;font-weight:800;cursor:pointer}.tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;border-color:transparent}
.view{display:none}.view.active{display:block}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.15rem;box-shadow:0 12px 34px rgba(26,46,80,.07)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.panel h2{margin:.2rem 0}.lead{color:var(--muted)}
.primary,.secondary,button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:.75rem 1rem;background:var(--accent);color:white;text-decoration:none;font-weight:800;cursor:pointer}.secondary{background:var(--surface-2);color:#27364c}
.toolbar{display:flex;gap:.6rem;margin-bottom:1rem}.toolbar input{flex:1}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.84rem;font-weight:700}
input,select,textarea{width:100%;border:1px solid #bac7d9;border-radius:9px;padding:.75rem;font:inherit;background:white}
.check{flex-direction:row;align-items:center}.check input{width:auto}
.cards{display:grid;gap:.7rem;margin-top:1rem}.card{border:1px solid var(--border);border-radius:13px;padding:1rem;background:#fbfdff}.card h3{margin:.1rem 0 .5rem}.card p{white-space:pre-wrap;line-height:1.5}.meta{display:flex;gap:.45rem;flex-wrap:wrap;color:var(--muted);font-size:.76rem}.tag{background:var(--surface-2);padding:.22rem .5rem;border-radius:999px}
.status-chip{padding:.35rem .65rem;border-radius:999px;background:rgba(33,138,93,.11);color:var(--success);font-size:.72rem;font-weight:800}
.process-status{margin-top:1rem;background:var(--surface-2);border-radius:12px;padding:1rem}.process-bar{height:8px;border-radius:999px;background:#d6dfed;overflow:hidden;margin-top:.7rem}.process-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.query-options{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.8rem 0}
.toast{position:fixed;right:1rem;bottom:1rem;background:#111c31;color:white;padding:.8rem 1rem;border-radius:10px;opacity:0;transform:translateY(22px);transition:.2s;z-index:20}.toast.show{opacity:1;transform:none}
.error{border-color:#f0bcbc;background:#fff7f7;color:var(--danger)}
@media(max-width:800px){.hero,.grid{grid-template-columns:1fr}.indicators{grid-template-columns:1fr 1fr}.panel-head{flex-direction:column}.toolbar{flex-wrap:wrap}.toolbar input{flex-basis:100%}}
@media(max-width:520px){.indicators{grid-template-columns:1fr}.query-options{align-items:stretch;flex-direction:column}.toolbar{flex-direction:column}}