/* Общая палитра сайта и личного кабинета + панель «Тема и цвет» (theme.js).
   theme.js всегда ставит <html data-theme="dark|light" data-accent="…">. */
:root, [data-theme="dark"] {
  --bg:           #070b14;
  --bg-alt:       #0b1120;
  --card:         rgba(255,255,255,.045);
  --card-hover:   rgba(255,255,255,.075);
  --surface:      #111a2e;
  --line:         rgba(255,255,255,.09);
  --line-2:       rgba(255,255,255,.18);
  --text:         #e6ebf5;
  --text-2:       #a3aec6;
  --muted:        #8591b3;
  --faint:        #4a5470;   /* только рамки и декор: для текста контраста мало */
  --glow-a:       color-mix(in srgb, var(--accent) 28%, transparent);
  --glow-b:       color-mix(in srgb, var(--accent-2) 20%, transparent);
  --glow-c:       rgba(79,208,255,.1);
  --title-mid:    color-mix(in srgb, var(--accent) 40%, #fff);
  --shadow:       rgba(0,0,0,.35);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg:         #f6f8ff;
  --bg-alt:     #edf1ff;
  --card:       rgba(255,255,255,.72);
  --card-hover: rgba(255,255,255,.92);
  --surface:    #fff;
  --line:       rgba(0,0,0,.08);
  --line-2:     rgba(0,0,0,.14);
  --text:       #1a1e36;
  --text-2:     #3d4566;
  --muted:      #576080;
  --faint:      #99a0bc;
  --glow-a:     color-mix(in srgb, var(--accent) 12%, transparent);
  --glow-b:     color-mix(in srgb, var(--accent-2) 8%, transparent);
  --glow-c:     rgba(79,208,255,.05);
  --title-mid:  var(--accent);
  --shadow:     rgba(30,40,90,.12);
  color-scheme: light;
}
:root {
  --accent:      #5b7cff;
  --accent-2:    #7c3dff;
  --accent-ink:  #fff;
  --grad:        linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --ok:          #22c55e;
  --warn:        #f59e0b;
  --danger:      #ef4444;
  --r:           1rem;
  --r-lg:        1.5rem;
  --ease-s:      cubic-bezier(.22,.68,0,1.2);
  --ease-o:      cubic-bezier(0,0,.2,1);
}
[data-accent="blue"]   { --accent:#4f6bff; --accent-2:#7b3dff; }
[data-accent="violet"] { --accent:#8b3dff; --accent-2:#c026d3; }
[data-accent="green"]  { --accent:#10b981; --accent-2:#059669; }
[data-accent="orange"] { --accent:#f97316; --accent-2:#ea580c; }
[data-accent="pink"]   { --accent:#ec4899; --accent-2:#be185d; }
[data-accent="mono"]   { --accent:#b8c0d8; --accent-2:#8090b0; }

/* Панель «Тема и цвет» */
.theme-panel {
  position: absolute; z-index: 300; width: 252px; padding: 14px; border-radius: 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 50px var(--shadow); animation: theme-pop .2s ease-out;
}
@keyframes theme-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.theme-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 0 8px; }
.theme-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.theme-row:last-child { margin-bottom: 0; }
.theme-opt {
  flex: 1; padding: 8px 6px; border: 1px solid var(--line-2); border-radius: 10px;
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.theme-opt:hover { border-color: var(--accent); }
.theme-opt[aria-pressed="true"] { background: var(--grad); color: var(--accent-ink); border-color: transparent; }
.theme-dot {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 1px rgba(128, 128, 128, .35); transition: transform .15s var(--ease-s);
}
.theme-dot:hover { transform: scale(1.12); }
.theme-dot[aria-pressed="true"] { border-color: var(--text); transform: scale(1.08); }