:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #0d1a2c;
  --panel-soft: #12233a;
  --line: #213654;
  --text: #edf5ff;
  --muted: #94a8c1;
  --accent: #49b5ff;
  --accent-2: #7c5cff;
  --shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 10% 0, #132b4e 0, transparent 35%), var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, "Microsoft YaHei", sans-serif;
}
button, select { font: inherit; }
button { color: inherit; }
.btn {
  border: 0;
  border-radius: 10px;
  padding: 9px 13px;
  background: linear-gradient(135deg, #53c4ff, #8b74ff);
  color: #04101e;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.btn.secondary { border: 1px solid #345071; background: #1a2e49; color: var(--text); }
.btn:hover { filter: brightness(1.12); }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(21, 42, 69, .96), rgba(9, 24, 42, .96));
  box-shadow: var(--shadow);
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.empty-icon { font-size: 38px; }
.auth-gate {
  width: min(520px, calc(100% - 28px));
  margin: max(12vh, 48px) auto;
  padding: 32px 24px;
  text-align: center;
}
.auth-gate[hidden] { display: none; }
.auth-gate h2 { margin: 10px 0 5px; }
.auth-gate p { margin: 0; color: var(--muted); }
.auth-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 20px; }
.auth-gate-actions a { text-decoration: none; }
[hidden] { display: none !important; }