/* Light theme overrides */
[data-theme="light"] nav {
  background: rgba(245,246,250,.95) !important;
  border-bottom-color: var(--border);
}

[data-theme="light"] {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface2: #eef0f6;
  --border: #e0e3ed;
  --text: #0d0d12;
  --muted: #52525b;
  --primary-glow: rgba(29,78,216,.12);
  background: var(--bg); /* фон на html-элементе → уходит в canvas */
}

/* Logo — all pages */
[data-theme="light"] .logo {
  background: linear-gradient(135deg,#1d4ed8,#0ea5e9) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Nav — all pages */
[data-theme="light"] nav {
  background: rgba(245,246,250,.95) !important;
  border-bottom-color: var(--border) !important;
}

/* Drop zone */
[data-theme="light"] .drop-zone {
  border-color: #c0c8e0;
  background: #eef0f8;
}
[data-theme="light"] .drop-zone:hover,
[data-theme="light"] .drop-zone.drag-over {
  background: #e6eaf6 !important;
}
[data-theme="light"] .drop-zone.success {
  background: rgba(16,185,129,.06) !important;
}
[data-theme="light"] .drop-icon-wrap {
  background: #e0e4ef !important;
  border-color: #c0c8e0 !important;
  color: var(--muted);
}
[data-theme="light"] .drop-zone:hover .drop-icon-wrap {
  background: #d8e0f0 !important;
  border-color: #1d4ed8 !important;
}

/* Logo */
[data-theme="light"] .logo {
  background: linear-gradient(135deg, var(--primary) 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Generate button */
[data-theme="light"] .btn-generate {
  background: #0d0d12;
  color: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
[data-theme="light"] .btn-generate:hover {
  background: #1a1a24;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

/* Modal close button */
[data-theme="light"] .modal-close {
  background: rgba(0,0,0,.08);
  color: var(--text);
}
[data-theme="light"] .modal-close:hover {
  background: rgba(0,0,0,.15);
}

/* Shadows — lighter on light bg */
[data-theme="light"] .clip-card:hover {
  box-shadow: 0 0 0 1px rgba(29,78,216,.2), 0 8px 24px rgba(0,0,0,.1);
}
[data-theme="light"] .sb-panel {
  box-shadow: 12px 0 40px rgba(0,0,0,.1);
}
[data-theme="light"] .csel-drop {
  box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 0 0 1px rgba(2,132,199,.1);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary-light);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* View Transition — circle reveal from toggle button */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: vc-reveal .3s ease-out both;
  }
  @keyframes vc-reveal {
    from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); }
    to   { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); }
  }
}