:root { --bg:#0f1115; --card:#171a21; --muted:#9aa4b2; --text:#e6e8eb; --accent:#ff6b35; --border:#232735; --ok:#22c55e; --warn:#f59e0b; }
* { box-sizing:border-box; }
body { margin:0; font-family: ui-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); background:#0d0f14; position:sticky; top:0; }
.topbar h1 { margin:0; font-size:20px; }
.topbar h1 span { font-weight:400; color:var(--muted); font-size:14px; margin-left:8px; }
.badge { color:var(--muted); text-decoration:none; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px; }
.container { max-width:1100px; margin:24px auto; padding:0 16px; display:grid; gap:16px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.dropzone { text-align:center; padding:28px 16px; border-style:dashed; }
.dz-title { font-weight:600; margin:0 0 6px; }
.dz-sub { color:var(--muted); margin:0 0 14px; font-size:13px; }
.dropzone.dragover { border-color:var(--accent); background:#1c1f2b; }
.btn { background:#232735; color:var(--text); border:1px solid var(--border); padding:10px 14px; border-radius:10px; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#111; font-weight:700; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.file-name { margin:10px 0 0; color:var(--accent); min-height:1.2em; font-size:13px; word-break:break-all; }
.actions { margin-top:14px; display:flex; gap:12px; justify-content:center; align-items:center; }
.status { font-size:13px; color:var(--muted); }
.status.ok { color:var(--ok); }
.status.err { color:#ef4444; }
.results { display:grid; gap:16px; }
.results.hidden { display:none; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px){ .grid2{ grid-template-columns:1fr; } }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; white-space:pre-wrap; color:#cbd5e1; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); font-weight:600; background:#13161e; position:sticky; top:0; }
td:first-child, th:first-child { text-align:center; }
.rounds { display:flex; flex-wrap:wrap; gap:8px; }
.round-badge { border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; background:#13161e; }
.round-badge.ct { border-color:#22c55e; }
.round-badge.t { border-color:#ef4444; }
.raw { max-height:400px; overflow:auto; background:#0d0f14; padding:12px; border-radius:10px; border:1px solid var(--border); }
.hint { color:var(--muted); font-size:12px; }
.footer { text-align:center; padding:18px; color:var(--muted); border-top:1px solid var(--border); margin-top:12px; }
.hidden { display:none !important; }