*,*::before,*::after{box-sizing:border-box}
:root{--bg:#0f172a;--card:#1e293b;--surface:#162032;--text:#e2e8f0;--muted:#64748b;--accent:#38bdf8;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444;--border:#334155;--radius:10px}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh}
.container{max-width:1100px;margin:0 auto;padding:20px}
h1{font-size:1.5rem;margin:0 0 4px}
.subtitle{color:var(--muted);font-size:0.9rem;margin-bottom:20px}
.tabs{display:flex;gap:0;margin-bottom:0;border-bottom:2px solid var(--border)}
.tab{padding:10px 20px;cursor:pointer;border:none;background:transparent;color:var(--muted);font-size:0.95rem;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.panel{display:none;background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:20px}
.panel.active{display:block}
.btn{padding:10px 22px;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.95rem;transition:all .15s}
.btn-primary{background:var(--accent);color:#0f172a}
.btn-primary:hover{filter:brightness(1.1)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-sm{padding:6px 14px;font-size:0.85rem}
.btn-ok{background:var(--ok);color:#0f172a}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted)}
.btn-outline:hover{color:var(--text);border-color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.card h3{margin:0 0 6px;font-size:0.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.card .value{font-size:1.3rem;font-weight:700}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:0.88rem}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;background:#0b1220;font-size:0.82rem;white-space:nowrap}
tr:hover td{background:var(--surface)}
.section{margin-top:20px}
.section h2{font-size:1.1rem;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
textarea,select,input[type=url]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:inherit;font-size:0.9rem}
textarea{min-height:120px;resize:vertical;font-family:'SF Mono','Cascadia Code','Fira Code',monospace}
input[type=url]:focus,textarea:focus{outline:none;border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-weight:600;font-size:0.78rem}
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mt-4{margin-top:16px}
.mb-4{margin-bottom:16px}
.gap-2{gap:8px}
.status-ok{color:var(--ok)}
.status-warn{color:var(--warn)}
.status-err{color:var(--err)}
.btn-flash-ok{background:var(--ok);color:#0f172a;border:1px solid var(--ok)}
.btn-flash-warn{background:var(--warn);color:#0f172a;border:1px solid var(--warn)}
.hidden{display:none}
.footer{margin-top:28px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:0.82rem}
pre{background:#0b1220;padding:14px;border-radius:8px;overflow-x:auto;font-size:0.82rem;line-height:1.4;max-height:400px}
.freshness{font-size:0.82rem;color:var(--muted);margin-bottom:12px}
.json-actions{display:flex;gap:8px;margin-top:10px}
.upload-area{border:2px dashed var(--border);border-radius:var(--radius);padding:30px;text-align:center;cursor:pointer;transition:border-color .15s}
.upload-area:hover{border-color:var(--accent)}
.upload-area.dragover{border-color:var(--accent);background:var(--surface)}
.url-input{display:flex;gap:8px;margin-top:12px}
.url-input input{flex:1}