/* 夜晚模式：叠在配色主题之上，只改明暗与表面 */

html[data-mode="night"] {
  --ink: #e8ecf4;
  --ink-2: #b8c0d0;
  --muted: #8b95a8;
  --line: #2e3648;
  --paper: #12161f;
  --surface: #1a2030;
  --brand-soft: rgba(90, 120, 200, .18);
  --accent-soft: rgba(193, 122, 58, .18);
  --ok-soft: rgba(47, 122, 91, .2);
  --danger-soft: rgba(193, 75, 75, .2);
  --warn-soft: rgba(193, 122, 58, .2);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .35);
  --focus: 0 0 0 3px rgba(120, 150, 220, .28);
  color-scheme: dark;
}

html[data-mode="night"] body {
  background:
    radial-gradient(800px 380px at 10% -10%, rgba(58, 79, 140, .22), transparent 55%),
    radial-gradient(600px 320px at 100% 0%, rgba(193, 122, 58, .1), transparent 50%),
    linear-gradient(165deg, #0f131a 0%, #12161f 50%, #151a24 100%);
  color: var(--ink);
}

html[data-mode="night"] .sidebar {
  background: linear-gradient(180deg, #0e121a 0%, #0c1018 100%);
  border-right: 1px solid #252c3c;
  color: rgba(232, 236, 244, .92);
}

html[data-mode="night"] .side-brand {
  border-bottom-color: rgba(232, 236, 244, .08);
}

html[data-mode="night"] .nav-group-hd:hover,
html[data-mode="night"] .nav-group-bd a:hover {
  background: rgba(255, 255, 255, .06);
}

html[data-mode="night"] .nav-group-bd a.is-active {
  background: rgba(58, 79, 140, .45);
  color: #fff;
}

html[data-mode="night"] .topbar {
  background: rgba(26, 32, 48, .92);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}

html[data-mode="night"] .fold-btn,
html[data-mode="night"] .theme-switch,
html[data-mode="night"] .mode-switch,
html[data-mode="night"] .top-actions > a.link,
html[data-mode="night"] .user-chip,
html[data-mode="night"] .btn {
  background: #222a3c;
  border-color: #343e54;
  color: var(--ink);
}

html[data-mode="night"] .fold-btn:hover,
html[data-mode="night"] .theme-switch:hover,
html[data-mode="night"] .mode-switch:hover,
html[data-mode="night"] .btn:hover,
html[data-mode="night"] .top-actions > a.link:hover {
  background: #2a3348;
}

html[data-mode="night"] .btn.brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

html[data-mode="night"] .btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html[data-mode="night"] .panel,
html[data-mode="night"] .stat,
html[data-mode="night"] .login-card,
html[data-mode="night"] .site-card,
html[data-mode="night"] .article-card,
html[data-mode="night"] .quick-tile,
html[data-mode="night"] .modal {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

html[data-mode="night"] .panel-head {
  background: linear-gradient(180deg, #1e2536, var(--surface));
  border-bottom-color: var(--line);
}

html[data-mode="night"] .quick-tile {
  background: #1e2536;
}

html[data-mode="night"] .quick-tile:hover,
html[data-mode="night"] .site-card:hover,
html[data-mode="night"] .article-card:hover {
  background: #222a3c;
  border-color: #3d4860;
}

html[data-mode="night"] .article-card .thumb,
html[data-mode="night"] .article-card .rank,
html[data-mode="night"] .site-card .rank,
html[data-mode="night"] .quick-tile .qt-ico {
  background: var(--brand-soft);
  color: #9eb0e0;
}

html[data-mode="night"] table.data th {
  background: #1e2536;
  color: var(--muted);
}

html[data-mode="night"] table.data th,
html[data-mode="night"] table.data td {
  border-bottom-color: var(--line);
}

html[data-mode="night"] table.data tbody tr:hover td {
  background: #222a3c;
}

html[data-mode="night"] .field input,
html[data-mode="night"] .field textarea,
html[data-mode="night"] .field select,
html[data-mode="night"] .tools input,
html[data-mode="night"] .tools select,
html[data-mode="night"] .zq-select select,
html[data-mode="night"] .article-form .af-row > input,
html[data-mode="night"] .article-form .af-row > select {
  background: #12161f;
  border-color: var(--line);
  color: var(--ink);
}

html[data-mode="night"] .tag {
  background: #2a3348;
  color: var(--ink-2);
}

html[data-mode="night"] .tag.ok { background: var(--ok-soft); color: #6dcea0; }
html[data-mode="night"] .tag.warn,
html[data-mode="night"] .tag.wait { background: var(--warn-soft); color: #e0b07a; }
html[data-mode="night"] .tag.stop { background: var(--danger-soft); color: #e09090; }

html[data-mode="night"] .toast {
  background: #0e121a;
  color: #e8ecf4;
}

html[data-mode="night"] .modal-alert-msg {
  color: var(--ink, #e8ecf4);
}

html[data-mode="night"] .login-side {
  background: var(--paper);
}

html[data-mode="night"] .login-card {
  background: var(--surface);
}

html[data-mode="night"] .modal-mask {
  background: rgba(8, 10, 16, .65);
}

html[data-mode="night"] .modal-h button {
  background: #222a3c;
  color: var(--muted);
}

html[data-mode="night"] .ke-container {
  border-color: var(--line) !important;
}

html[data-mode="night"] .mode-switch.is-night {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}