:root{--blue:#164F91;--blue2:#2169B5;--light:#E8F1FA;--bg:#F3F6FA;--ink:#263238;--muted:#5B6573;--hl:#FFD54F;--ok:#2E7D32;--bad:#C62828;--line:#D5E2F0}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 24px;background:var(--blue);color:#fff}
.brand{display:flex;gap:12px;align-items:center}
.brand b{display:block;font-size:20px}.brand span{font-size:13px;opacity:.8}
.logo{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#2E8BEA,#0E3A6E);display:grid;place-items:center;font-weight:800;border-bottom:5px solid var(--hl)}
.conn{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{padding:5px 12px;border-radius:99px;font-size:13px;background:rgba(255,255,255,.15)}
.pill.on{background:#E8F5E9;color:var(--ok);font-weight:600}
.pill.busy{background:#FFF8E1;color:#8D6E00;font-weight:600}
main{max-width:1000px;margin:20px auto;padding:0 16px;display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.card h2{margin:0 0 10px;font-size:17px;color:var(--blue)}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.head h2{margin:0}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.steps ol{margin:0;padding-left:20px;line-height:1.7}
button{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
button:hover:not(:disabled){border-color:var(--blue2)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--blue2);border-color:var(--blue2);color:#fff;font-weight:600}
header button.primary{background:var(--hl);border-color:var(--hl);color:#10203A}
button.danger{color:var(--bad)}
input:not([type=checkbox]){font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;min-width:180px}
input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--blue2);cursor:pointer}
.badge:empty{display:none}
.row{cursor:pointer}
.list{display:grid;gap:6px;max-height:420px;overflow:auto}
.row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;background:var(--bg)}
.row:hover{background:var(--light)}
.row .t{font-weight:600}
.row .m{font-size:13px;color:var(--muted)}
.badge{font-size:12px;padding:3px 9px;border-radius:99px;background:#fff;border:1px solid var(--line);white-space:nowrap}
.badge.have{background:#E8F5E9;border-color:#C8E6C9;color:var(--ok)}
.badge.old{background:#FFF8E1;border-color:#FFE082;color:#8D6E00}
.muted{color:var(--muted);font-size:14px}
.warn{max-width:1000px;margin:16px auto 0;padding:12px 16px;border-radius:10px;background:#FFF3E0;border:1px solid #FFCC80}
.bar{height:12px;border-radius:99px;background:var(--light);overflow:hidden;margin:8px 0}
.bar div{height:100%;width:0;background:linear-gradient(90deg,var(--blue2),#4FC3F7);transition:width .2s}
.log pre{max-height:220px;overflow:auto;font-size:12px;background:#0B1A2E;color:#CFE3F7;padding:10px;border-radius:8px;margin:10px 0 0}
.log summary{cursor:pointer;color:var(--blue);font-weight:600}
footer{text-align:center;color:var(--muted);font-size:13px;padding:20px}
@media (max-width:600px){header{padding:12px 16px}.row{grid-template-columns:24px 1fr}.row .badge{grid-column:2}}