:root{--bg:#0b1220;--panel:#0f1a2e;--panel2:#0c1628;--text:#e8eefc;--muted:#9bb0d1;--border:#1d2a44;--ok:#39d98a;--warn:#ffcc66;--bad:#ff5c7a;--accent:#6ea8fe;--shadow:0 10px 30px rgba(0,0,0,.35);}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(11,18,32,.88);border-bottom:1px solid var(--border);backdrop-filter:blur(8px);}
.brand{font-weight:700;letter-spacing:.2px}
.topbar-right{display:flex;gap:10px;align-items:center}
.user{color:var(--muted);font-size:13px}
.container{max-width:1100px;margin:0 auto;padding:18px}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.card h2{margin:0 0 10px 0;font-size:18px}
.card h3{margin:16px 0 8px 0;font-size:14px;color:var(--muted);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:#101f39;color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer}
.btn:hover{border-color:#2b3d63}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:#1a3a7b;border-color:#2b57ad}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.badge.ok{color:var(--ok);border-color:rgba(57,217,138,.35)}
.badge.bad{color:var(--bad);border-color:rgba(255,92,122,.35)}
.badge.warn{color:var(--warn);border-color:rgba(255,204,102,.35)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.drop{border:1px dashed #2a3b61;border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.drop.drag{border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,168,254,.15)}
.drop small{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(29,42,68,.6)}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.progress{height:10px;border-radius:999px;background:#0a1529;border:1px solid var(--border);overflow:hidden}
.progress>div{height:100%;width:0%;background:var(--accent);transition:width .25s ease}
.progress.ok>div{background:var(--ok)}
.progress.bad>div{background:var(--bad)}
.log{background:#071022;border:1px solid var(--border);border-radius:14px;padding:10px;font-size:12px;color:var(--muted);max-height:240px;overflow:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid rgba(29,42,68,.6);vertical-align:top}
.table th{color:var(--muted);text-align:left;font-weight:600}
.footer{padding:16px;color:var(--muted);text-align:center;font-size:12px}
.codebox{background:#071022;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.codebox pre{margin:0;padding:12px;overflow:auto;font-size:12px;line-height:1.45}
.line{display:flex}
.ln{width:54px;color:#556a90;text-align:right;padding-right:12px;user-select:none}
.ltxt{white-space:pre;flex:1}