:root,
:root[data-theme] {
  --ink: #f4f7fb;
  --muted: #b7c0cc;
  --paper: #12141a;
  --panel: rgba(18, 20, 26, .86);
  --navy: #0c0e13;
  --navy-2: #1a1d27;
  --gold: #1ae7ff;
  --gold-soft: #d8fbff;
  --line: rgba(26, 231, 255, .22);
  --green: #3ef0c2;
  --shadow: 0 22px 70px rgba(0, 0, 0, .42);
  --shadow-hover: 0 18px 50px rgba(255, 46, 207, .22);
  --theme-bg-a: rgba(26, 231, 255, .2);
  --theme-bg-b: rgba(255, 46, 207, .18);
  --theme-accent: #1ae7ff;
  --theme-accent-2: #ff2ecf;
  --theme-warm: #c536c8;
  --zd-blue: #2a43ff;
  --zd-cyan: #1ae7ff;
  --zd-magenta: #ff2ecf;
  --zd-purple: #c536c8;
}

html,
body,
:root[data-theme="cool-light"] body {
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(26, 231, 255, .22), transparent 28%),
    radial-gradient(circle at 82% 6%, rgba(255, 46, 207, .18), transparent 32%),
    radial-gradient(circle at 70% 92%, rgba(42, 67, 255, .16), transparent 34%),
    linear-gradient(180deg, #2a2d34 0%, #14161c 42%, #0b0d11 100%) !important;
}

body::before,
:root[data-theme="cool-light"] body::before {
  background-image:
    linear-gradient(rgba(26, 231, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 46, 207, .04) 1px, transparent 1px) !important;
}

.sidebar,
:root[data-theme="cool-light"] .sidebar {
  background:
    radial-gradient(circle at 20% 0%, rgba(26, 231, 255, .28), transparent 32%),
    radial-gradient(circle at 80% 100%, rgba(255, 46, 207, .18), transparent 36%),
    linear-gradient(180deg, #101218, #07080c) !important;
  border-right: 1px solid rgba(26, 231, 255, .18) !important;
}

.sidebar nav { margin-top: 10px; flex: 1; min-height: 0; overflow: auto; }

.brand { align-items: center; }
.brand-mark-img {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  object-fit: cover;
  border-radius: 16px;
  background: #050505;
  box-shadow: 0 0 24px rgba(26, 231, 255, .35), 0 0 28px rgba(255, 46, 207, .22);
}
.brand-copy strong { letter-spacing: .08em; color: #f7f8fb; }
.brand-copy span { color: #d5dbe3 !important; }

.qiufeng-badge {
  padding: 9px 14px;
  border: 1px solid rgba(255, 46, 207, .45);
  border-radius: 999px;
  color: #ffd6f6;
  background: rgba(197, 54, 200, .18);
  font-size: 12px;
}

.nav-item { color: #c5ced8 !important; }
.nav-item span { color: var(--zd-cyan) !important; }
.nav-item:hover,
.nav-item.active {
  color: #fff !important;
  border-color: rgba(255, 46, 207, .45) !important;
  background: linear-gradient(90deg, rgba(42, 67, 255, .35), rgba(255, 46, 207, .16)) !important;
  box-shadow: inset 3px 0 0 var(--zd-cyan), 0 0 22px rgba(26, 231, 255, .12) !important;
}

.api-dot {
  background: var(--zd-cyan) !important;
  box-shadow: 0 0 14px rgba(26, 231, 255, .8) !important;
}
.eyebrow, .home-kicker { color: var(--zd-cyan) !important; }

.button.primary,
.studio-send,
.video-composer .studio-send,
.assistant-composer button,
.moments-generate,
.home-actions .home-action.primary,
.home-cta .home-action.primary {
  border: 0 !important;
  color: #fff !important;
  background: var(--zd-purple) !important;
  box-shadow: 0 12px 28px rgba(197, 54, 200, .35) !important;
}
.button.gold, .studio-optimize {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--zd-blue), var(--zd-magenta)) !important;
}
.header-subnav button.active,
.graphic-ad-count-row button.active {
  background: rgba(26, 231, 255, .12) !important;
  border-color: var(--zd-cyan) !important;
  color: #d9fbff !important;
}

.home-hero,
.graphic-ads-hero {
  border-color: rgba(26, 231, 255, .28) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 46, 207, .28), transparent 34%),
    radial-gradient(circle at 8% 90%, rgba(26, 231, 255, .22), transparent 36%),
    linear-gradient(135deg, rgba(42, 67, 255, .28), rgba(18, 20, 26, .92) 55%) !important;
}
.graphic-ads-hero h2, .home-hero h2 { color: #fff !important; }
.graphic-ad-result-card { border-color: rgba(255, 46, 207, .28) !important; }

.theme-picker { display: none; }

@media (max-width: 760px) {
  .qiufeng-badge { display: none; }
  .brand-mark-img { width: 56px; height: 56px; flex-basis: 56px; }
}