/* Grok：管理后台与前台共用星夜高对比气质。 */
:root[data-ui-theme="grok"] {
  --bg: #f2f1ec;
  --surface: #fbfaf6;
  --surface-soft: #ebeae3;
  --text: #121211;
  --muted: #6a6963;
  --line: #dddcd4;
  --line-strong: #cfcbbd;
  --accent: #1b1b18;
  --accent-strong: #0a0a09;
  --blue: #3d5a80;
  --red: #c45c4a;
  --amber: #b89217;
  --shadow: 0 18px 48px rgba(18, 18, 16, 0.08);
  --radius: 12px;
  --theme-accent-fill: #171714;
  --theme-accent-on-fill: #f7f4ea;
}

:root[data-ui-theme="grok"] body {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(201, 162, 39, 0.1), transparent 62%),
    var(--bg);
}

:root[data-ui-theme="grok"] ::selection {
  background: rgba(201, 162, 39, 0.28);
  color: #121211;
}

:root[data-ui-theme="grok"] button:focus-visible,
:root[data-ui-theme="grok"] a:focus-visible,
:root[data-ui-theme="grok"] input:focus-visible,
:root[data-ui-theme="grok"] select:focus-visible,
:root[data-ui-theme="grok"] textarea:focus-visible {
  outline: 3px solid rgba(201, 162, 39, 0.34);
  outline-offset: 2px;
}

:root[data-ui-theme="grok"] .sidebar {
  background: #f7f6f1;
  border-right-color: rgba(18, 18, 16, 0.08);
}

:root[data-ui-theme="grok"] .brand-mark {
  background: linear-gradient(160deg, #2c2c28 0%, #11110f 74%);
  border: 1px solid rgba(228, 197, 106, 0.28);
  box-shadow: 0 10px 26px rgba(12, 12, 10, 0.22);
}

:root[data-ui-theme="grok"] .brand-mark-sun {
  background: #e4c56a;
  box-shadow: 0 0 0 4px rgba(228, 197, 106, 0.14);
}

:root[data-ui-theme="grok"] .brand-mark-gate {
  border-color: rgba(247, 244, 234, 0.92);
  border-radius: 14px 14px 2px 2px;
}

:root[data-ui-theme="grok"] .brand-mark-gate::before,
:root[data-ui-theme="grok"] .brand-mark-gate::after {
  background: rgba(247, 244, 234, 0.92);
}

:root[data-ui-theme="grok"] .eyebrow {
  color: #b89217;
  letter-spacing: 0.1em;
}

:root[data-ui-theme="grok"] .nav-item.active,
:root[data-ui-theme="grok"] .nav-item:not(:disabled):hover {
  background: color-mix(in srgb, #c9a227 16%, var(--surface));
  color: var(--accent-strong);
}

:root[data-ui-theme="grok"] .nav-icon {
  background: #ecebe4;
}

:root[data-ui-theme="grok"] .nav-item.active .nav-icon {
  background: var(--accent);
  color: var(--theme-accent-on-fill);
  box-shadow: 0 5px 14px rgba(18, 18, 16, 0.18);
}

:root[data-ui-theme="grok"] .panel,
:root[data-ui-theme="grok"] .metric-card,
:root[data-ui-theme="grok"] .admin-gate-card {
  border-color: rgba(18, 18, 16, 0.1);
  box-shadow: 0 12px 34px rgba(18, 18, 16, 0.05);
}

:root[data-ui-theme="grok"] .primary-link {
  border-color: var(--theme-accent-fill);
  background: var(--theme-accent-fill);
  color: var(--theme-accent-on-fill);
}

:root[data-ui-theme="grok"] .row-state.ok,
:root[data-ui-theme="grok"] .module-row span.module-state.ok {
  background: #efe6c6;
  color: #6d5610;
}

:root[data-ui-theme="grok"] .state-dot.ok {
  background: #c9a227;
}

:root[data-ui-theme="grok"] .settings-toggle input {
  accent-color: #c9a227;
}

:root[data-ui-theme="grok"] .filter-chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--theme-accent-on-fill);
}