:root{
  --bg:#f4f7fb;--text:#172033;--muted:#667085;--card:#ffffff;--border:#d9e1ee;
  --panel:#f7f9fc;--input:#ffffff;--input-text:#172033;--tab:#eef2f7;--tab-active:#dce7ff;
  --button:#edf2f8;--button-text:#263247;--server:#f8fafc;--shadow:0 12px 30px rgba(20,40,80,.08);
  --selected:#344054;--status-bg:#dcfce7;--status-text:#16834a;--danger:#e5484d;
}
:root[data-theme="dark"]{
  --bg:#0b1020;--text:#eef2ff;--muted:#9ca8c4;--card:#121a2d;--border:#26314a;
  --panel:#0d1424;--input:#0a1020;--input-text:#fff;--tab:#0d1424;--tab-active:#273453;
  --button:#202b43;--button-text:#dbe5ff;--server:#0d1424;--shadow:0 12px 30px #0003;
  --selected:#cbd5e1;--status-bg:#123b2b;--status-text:#64e0a2;--danger:#e5484d;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);transition:background .2s,color .2s}
.wrap{max-width:980px;margin:auto;padding:18px}.narrow{max-width:560px;margin:7vh auto}
.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.brand{font-size:22px;font-weight:800}.small{font-size:12px}.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.top-actions{display:flex;gap:8px;align-items:center}.top-actions form{margin:0}
h1{margin:0 0 8px;font-size:24px}h2{font-size:18px}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);padding:4px;border-radius:12px;margin-bottom:18px}
.tab{border:0;background:transparent;color:var(--muted);padding:12px;border-radius:9px;font-weight:700;cursor:pointer}
.tab.active{background:var(--tab-active);color:var(--text)}
.form-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
label{display:block;font-weight:700;font-size:13px;margin:10px 0}
input,select{width:100%;margin-top:7px;padding:13px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--input-text);font-size:15px;outline:none}
.selected-box{padding:13px;border:1px solid var(--border);border-radius:10px;white-space:nowrap;color:var(--selected)}
.selected-box span{font-weight:800;color:var(--text)}
button{cursor:pointer;border:0;border-radius:10px;padding:11px 15px;font-weight:800}
.primary{background:#4f7cff;color:#fff}.danger{background:var(--danger);color:#fff}
.ghost{background:var(--button);color:var(--button-text)}
.danger-outline{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.full{width:100%;margin-top:12px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0}
.checkline{display:flex;gap:8px;align-items:center;margin:0}.checkline input{width:auto;margin:0}
.servers{display:grid;gap:8px;max-height:58vh;overflow:auto;margin-bottom:14px}
.server{display:flex;align-items:center;gap:11px;background:var(--server);border:1px solid var(--border);padding:12px;border-radius:12px;margin:0;cursor:pointer}
.server>input{width:18px;height:18px;margin:0;flex:none}.server-main{min-width:0;flex:1}
.server-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-meta{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.status{font-size:11px;border-radius:999px;padding:5px 8px;text-transform:capitalize}
.status.ok{background:var(--status-bg);color:var(--status-text)}.status.other{background:#fff4d6;color:#9a6700}
.empty{text-align:center;color:var(--muted);padding:28px}
.alert{background:#fff1f2;border:1px solid #fecdd3;color:#be123c;padding:12px;border-radius:10px;margin:10px 0}
.note,.info{color:var(--muted);font-size:12px}.info p{line-height:1.6}.warning{color:#be123c}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:18px;z-index:10}
.modal.hidden{display:none}.modal-card{width:min(520px,100%);background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}
.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--card);border:1px solid var(--border);padding:12px 16px;border-radius:10px;transition:.2s;z-index:20;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.password-box{margin:16px 0}.password-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.password-row input{flex:1;min-width:0}.small-btn{white-space:nowrap}
@media(max-width:650px){
  .wrap{padding:12px}.top{align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}
  .form-grid{grid-template-columns:1fr}.selected-box{width:100%}.server-meta{font-size:10px}
  .password-row{flex-wrap:wrap}.password-row input{flex-basis:100%}
}