:root{
  --bg:#070b16; --card:#0e1730; --line:rgba(255,255,255,.10);
  --text:#ecf2ff; --muted:#9db0d6;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --btn:rgba(255,255,255,.06);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text)}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:26px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
h1{font-size:18px;margin:0 0 8px 0}
h2{font-size:14px;margin:0 0 10px 0;color:#cfe0ff}
.small{font-size:12px;color:var(--muted)}
input,select,button{border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text);
  border-radius:12px; padding:10px 12px; outline:none}
button{background:var(--btn); cursor:pointer; font-weight:700}
button:hover{background:rgba(255,255,255,.10)}
button:disabled{opacity:.45; cursor:not-allowed}
.btn-ok{border-color:rgba(34,197,94,.45)}
.btn-warn{border-color:rgba(245,158,11,.45)}
.btn-bad{border-color:rgba(239,68,68,.45)}
.pill{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--muted)}
.pill.ok{border-color:rgba(34,197,94,.45); color:#b9ffd1}
.pill.warn{border-color:rgba(245,158,11,.45); color:#ffe0b8}
.pill.bad{border-color:rgba(239,68,68,.45); color:#ffbcbc}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; white-space:pre-wrap}
.hr{height:1px;background:var(--line); margin:14px 0}
.notice{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--muted);font-size:13px}
progress{width:100%; height:14px}
.list{display:flex; flex-direction:column; gap:10px}
.case{padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.case:hover{background:rgba(255,255,255,.06)}
.right{margin-left:auto}

/* spinner */
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}