
:root{--bg:#0b1220;--card:#111827;--muted:#1f2937;--text:#e5e7eb;--accent:#0ea5e9;--good:#10b981;--bad:#ef4444;--warn:#f59e0b}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:var(--text);background:linear-gradient(180deg,#0b1220,#0c1426);}
.container{max-width:1080px;margin:0 auto;padding:24px}
.card{background:var(--card);border:1px solid #1f2937;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.card h2,.card h3{margin:0 0 8px 0}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #1f2937;background:rgba(255,255,255,.02)}
.brand{display:flex;gap:10px;align-items:center}
.brand img{width:24px;height:24px}
.brand span{font-weight:700;letter-spacing:.3px}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(14,165,233,.15);border:1px solid rgba(14,165,233,.35);color:#99e6ff}
.section{padding:18px}
.row{display:flex;flex-wrap:wrap;gap:16px}
.col{flex:1 1 320px;min-width:280px}
input,select,button,textarea{width:100%;padding:12px 12px;border-radius:10px;border:1px solid #263244;background:#0f172a;color:var(--text);outline:none}
button{cursor:pointer;background:linear-gradient(180deg,#0ea5e9,#0284c7);border:none;font-weight:600}
button.secondary{background:#0f172a;border:1px solid #263244}
button.ghost{background:transparent;border:1px dashed #334155}
button.small{padding:8px 10px;border-radius:8px}
button.good{background:linear-gradient(180deg,#10b981,#059669)}
button.bad{background:linear-gradient(180deg,#ef4444,#dc2626)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;border-bottom:1px solid #1f2937}
th{text-align:left;color:#93c5fd;background:#0b1b35;position:sticky;top:0}
.kv{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#9ca3af}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card.stat{padding:14px}
.stat .label{font-size:12px;color:#9ca3af}
.stat .value{font-size:22px;font-weight:700}
hr{border:0;border-top:1px solid #1f2937;margin:14px 0}
a.link{color:#7dd3fc;text-decoration:none;border-bottom:1px dotted #7dd3fc}
.notice{font-size:12px;color:#a3a3a3}
footer{opacity:.6;text-align:center;margin:24px 0;font-size:12px}
.hidden{display:none}
.flex{display:flex;gap:8px;align-items:center}
.right{margin-left:auto}
code{background:#0b1b35;padding:2px 6px;border-radius:6px}
.toast{position:fixed;right:16px;bottom:16px;background:#0b1b35;border:1px solid #1f2937;color:#e5e7eb;padding:10px 12px;border-radius:10px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{width:min(560px,92vw);background:var(--card);border:1px solid #1f2937;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #1f2937}
.modal .modal-body{padding:16px}
.modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:14px 16px;border-top:1px solid #1f2937}
