:root {
  color-scheme: dark;
  --bg:#0b0f17; --bg2:#121826; --bg3:#182033; --line:#243049; --tx:#e6ebf5; --tx2:#9aa7bf;
  --acc:#4c8dff; --ok:#2fd27f; --home:#f2b441; --off:#566078;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--tx); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

.hub-login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.hub-login-card { width:100%; max-width:340px; background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; text-align:center; }
.hub-login-card label { text-align:left; font-size:13px; color:var(--tx2); }
.hub-login-card input { padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--tx); }

.hub-top { padding:28px 20px 10px; text-align:center; }
.hub-brand { font-size:22px; }
.hub-brand b { color:var(--acc); }
.hub-sub { color:var(--tx2); margin-top:4px; font-size:14px; }

.hub-grid { max-width:980px; margin:20px auto; padding:0 16px 40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }

.hub-card { background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.hub-card-top { display:flex; justify-content:space-between; align-items:center; }
.hub-ic { font-size:26px; }
.hub-card h2 { margin:4px 0 0; font-size:17px; }
.hub-card p { margin:0; color:var(--tx2); font-size:13px; flex:1; }

.hub-badge { font-size:11px; padding:3px 9px; border-radius:20px; border:1px solid var(--line); white-space:nowrap; }
.hub-badge-ok { color:var(--ok); border-color:var(--ok); }
.hub-badge-home { color:var(--home); border-color:var(--home); }
.hub-badge-off { color:var(--off); border-color:var(--off); }

.hub-link { color:var(--acc); text-decoration:none; font-size:13px; margin-top:4px; }
.hub-link:hover { text-decoration:underline; }
.hub-note { color:var(--tx2); font-size:12px; margin-top:4px; }

.hub-faq { max-width:720px; margin:10px auto 0; padding:0 16px; }
.hub-faq h2 { font-size:18px; text-align:center; margin-bottom:12px; }
.hub-faq details { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:8px; }
.hub-faq summary { cursor:pointer; font-weight:600; }
.hub-faq p { margin:8px 0 0; color:var(--tx2); font-size:13px; }

.hub-foot { text-align:center; color:var(--tx2); font-size:12px; padding:0 20px 30px; }