:root {
  --presto:#FF3000; --blue:#2E46D8; --blue2:#2343EA; --gold:#FD9F18;
  --orange:#FF9200; --orange2:#F05A24; --ink:#1c2430; --line:#e3e8ee; --bg:#eef1f4;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Segoe UI', Tahoma, Arial, sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }

/* ---------- login ---------- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:#fff; border:1px solid var(--line); border-radius:14px; padding:34px 36px;
  width:360px; box-shadow:0 8px 30px rgba(0,0,0,.08); border-top:5px solid var(--presto); }
.login-brand { color:var(--presto); font-size:18px; margin-bottom:6px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-left:4px; }
.d1{background:var(--presto)} .d2{background:var(--gold)} .d3{background:var(--blue)}
.login-box h1 { font-size:16px; color:#5d6b78; font-weight:600; margin-bottom:18px; }
.login-box label { display:block; font-size:12.5px; color:#66717d; margin:10px 0 4px; }
.login-box input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.login-box button { width:100%; margin-top:18px; }
.login-foot { text-align:center; color:#98a2ad; font-size:12px; margin-top:16px; }
.alert { background:#fdecea; color:#c0392b; border:1px solid #f5b7b1; border-radius:8px;
  padding:8px 12px; font-size:13px; margin-bottom:8px; }

/* ---------- layout ---------- */
header.topbar { background:#fff; border-bottom:3px solid var(--presto); padding:12px 22px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.topbar .brand { color:var(--presto); font-size:17px; font-weight:700; }
.topbar .brand small { color:#66717d; font-weight:400; margin-right:10px; font-size:12.5px; }
.topbar a { color:#66717d; text-decoration:none; font-size:13px; }
.wrap { max-width:1080px; margin:20px auto; padding:0 16px; }

.tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tabs button { background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:20px;
  padding:8px 18px; cursor:pointer; font-family:inherit; font-size:13.5px; }
.tabs button.active { background:var(--presto); border-color:var(--presto); color:#fff; font-weight:700; }

.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:16px; }
.card h2 { font-size:15px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.card h2::before { content:''; width:10px; height:10px; border-radius:50%; background:var(--presto); display:inline-block; }
.card.blue h2::before { background:var(--blue); }
.card.gold h2::before { background:var(--gold); }

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:760px){ .grid2,.grid3 { grid-template-columns:1fr; } }

label.f { display:block; font-size:12.5px; color:#66717d; margin:8px 0 4px; }
input, select { width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:8px;
  font-size:13.5px; font-family:inherit; background:#fff; }
input[type=checkbox] { width:auto; }

button, .btn { background:var(--presto); color:#fff; border:none; border-radius:8px; padding:9px 20px;
  font-family:inherit; font-size:13.5px; cursor:pointer; font-weight:600; }
button:hover { filter:brightness(.94); }
button.sec { background:var(--blue); }
button.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); font-weight:400; }
button.warn { background:var(--orange2); }
button:disabled { opacity:.5; cursor:default; }

table.list { width:100%; border-collapse:collapse; }
table.list th { background:var(--ink); color:#fff; padding:8px 10px; font-size:12.5px; text-align:right; }
table.list td { padding:7px 10px; border-bottom:1px solid var(--line); font-size:13px; }
table.list tr:nth-child(even) td { background:#f7f9fb; }

.badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11.5px; font-weight:700; }
.badge.ok { background:#e6f6ec; color:#1e7e45; }
.badge.fail { background:#fdecea; color:#c0392b; }
.badge.skip { background:#fef5e7; color:#b9770e; }
.badge.neutral { background:#eef1f4; color:#5d6b78; }

.msg { padding:9px 13px; border-radius:8px; font-size:13px; margin:10px 0; display:none; }
.msg.ok { background:#e6f6ec; color:#1e7e45; display:block; }
.msg.err { background:#fdecea; color:#c0392b; display:block; }

.note { font-size:12px; color:#98a2ad; margin-top:6px; line-height:1.7; }
.rowflex { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.rowflex > div { flex:1; min-width:140px; }
.nextrun { font-size:12px; color:var(--blue); margin-top:4px; }
.bootstrap-banner { background:#fff8e1; border:1px solid #ffe082; color:#8d6e00; border-radius:10px;
  padding:12px 16px; margin-bottom:14px; font-size:13.5px; }
code.pw { background:#fff; border:1px dashed #d0a900; padding:2px 10px; border-radius:6px;
  font-size:14px; direction:ltr; display:inline-block; }
.vpn-status table.list td { border-bottom:1px solid var(--line); }