:root{ --bg:#0b0e12; --card:#12161c; --muted:#8aa0b2; --text:#e8f1f8; --acc:#6ee7ff; --ok:#7cf5a3; --bad:#ff8e8e; --border:#1f2833; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); }
a{ color:var(--acc); text-decoration:none; }
.app-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#0b0e12,#0b0e12dd); position:sticky; top:0; z-index:10; }
.logo{ font-weight:700; letter-spacing:.2px; }
.container{ max-width:1180px; margin:24px auto; padding:0 16px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px; box-shadow:0 1px 0 rgba(255,255,255,0.03) inset; }
h2{ margin:6px 0 12px; font-size:18px; }
h3{ margin:14px 0 8px; font-size:16px; color:var(--muted); }
.grid{ display:grid; grid-template-columns:repeat(5,minmax(160px,1fr)); gap:10px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
input, select{ background:#0e1218; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; outline:none; }
.actions{ display:flex; gap:10px; margin-top:12px; }
button{ padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg,#1e2630,#18202a); color:var(--text); cursor:pointer; font-weight:600; }
button:hover{ filter:brightness(1.05); }
button.ghost{ background:transparent; }
.results{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.metric{ background:#0f141b; border:1px solid var(--border); padding:10px 12px; border-radius:12px; }
.metric b{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.metric span{ font-size:16px; }
.table-wrap{ overflow:auto; max-height:340px; border:1px solid var(--border); border-radius:12px; }
table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
thead th{ position:sticky; top:0; background:#0e131a; border-bottom:1px solid var(--border); padding:8px; text-align:left; }
tbody td{ padding:8px; border-bottom:1px dashed #1a222c; color:#cfe5f7; }
tbody tr:hover{ background:#0e141b; }
.ok{ color:var(--ok); }
.bad{ color:var(--bad); }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr);} .grid-2{ grid-template-columns:1fr; } .results{ grid-template-columns:repeat(2,1fr);} }