/**
 * AGENTKID — light snow theme
 * Cool white / frost surfaces; readable charcoal text. Matches snow-mode AGENTKID.
 */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --elev: #fafbfc;
  --tint: #eef1f4;
  --line: #d7dce3;
  --line-strong: #c2c8d1;
  --text: #1a1f26;
  --mute: #5c6570;
  --soft: #3a4350;
  --accent: #4a5563;
  --accent-dim: rgba(74, 85, 99, 0.12);
  --accentDim: rgba(74, 85, 99, 0.12);
  --accentBorder: rgba(74, 85, 99, 0.35);
  --ok: #2f8f6b;
  --danger: #c45b4a;
  --warn: #b07a2e;
  --openai: #3b6ea5;
  --zai: #2a8f4e;
  --claude: #8a6b3e;
  --harbor: #4a6578;
  --user: #4a5563;
  --userBg: rgba(74, 85, 99, 0.1);
  --hdr: 56px;
}

body {
  color: var(--text);
  background:
    radial-gradient(900px 420px at 10% -12%, rgba(200, 210, 220, 0.45), transparent 55%),
    radial-gradient(700px 380px at 96% 0%, rgba(180, 195, 210, 0.28), transparent 50%),
    linear-gradient(180deg, #fafbfc 0%, var(--bg) 45%, #eef1f4 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topnav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
}

.brand {
  color: var(--text);
}

.nav a,
.nav .dd-btn {
  color: var(--mute);
}

.nav a:hover,
.nav .dd-btn:hover {
  color: var(--text);
  background: var(--tint);
}

.nav a.active {
  color: #fff !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

.nav-dd .dd-menu {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 28px rgba(26, 31, 38, 0.1) !important;
}

.nav-dd .dd-menu a:hover {
  background: var(--accentDim) !important;
  color: var(--accent) !important;
}

.live {
  background: var(--elev) !important;
  border-color: var(--line) !important;
  color: var(--mute) !important;
}

.card,
.panel,
.gate,
.dl-card,
.tile,
.rail,
.composer,
.switch-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(26, 31, 38, 0.04);
}

.btn {
  background: var(--elev) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.btn.primary,
.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

input,
textarea,
select {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

.empty p,
.hint,
.meta,
.label,
.section h3,
.lead {
  color: var(--mute) !important;
}

.nav-toggle {
  border-color: var(--accentBorder) !important;
  background: var(--elev) !important;
}
.nav-toggle span {
  background: var(--accent) !important;
}

@media (max-width: 1100px) {
  .topnav.nav-open .nav {
    background: var(--panel);
    border-color: var(--line);
  }
}