/*
 * Темы оформления. Включаются атрибутом <html data-theme="…">, без атрибута — «Классика» из styles.css.
 * Каждая тема переопределяет цветовые токены и добавляет свои эффекты.
 */

/* ---------- выбор темы в настройках ---------- */
.themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
.theme-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.theme-tile.on { border-color: var(--accent); }
.theme-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid rgb(0 0 0 / 0.08);
}
.tp-bar { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 10px; border-radius: 4px; }
.tp-card {
  position: absolute;
  left: 24px;
  right: 8px;
  top: 8px;
  bottom: 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}
.tp-card i { display: block; height: 6px; border-radius: 3px; width: 80%; }
.theme-name { font-weight: 700; font-size: 14px; }
.theme-note { font-size: 12px; color: var(--muted); }


/* =====================================================================
   1. АВРОРА — тёмное стекло на фоне переливающегося северного сияния
   ===================================================================== */
:root[data-theme="aurora"] {
  --bg: #0b0b1a;
  --surface: rgb(255 255 255 / 0.07);
  --surface-2: rgb(255 255 255 / 0.11);
  --text: #f4f2ff;
  --muted: #b3b0d4;
  --line: rgb(255 255 255 / 0.12);
  --accent: #a78bfa;
  --accent-text: #160f33;
  --danger: #fb7185;
  --today: rgb(167 139 250 / 0.18);
  --link: #c4b5fd;
  --day-label: linear-gradient(180deg, #7c3aed, #db2777);
  --radius: 22px;
  color-scheme: dark;
}
/* Фон рисует html, а body прозрачный — иначе он закрывает слой сияния (z-index: -1) */
[data-theme="aurora"] { background: var(--bg); }
[data-theme="aurora"] body { background: transparent; }
[data-theme="aurora"] body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  background:
    radial-gradient(45vmax 35vmax at 15% 25%, rgb(124 58 237 / 0.8), transparent 65%),
    radial-gradient(40vmax 30vmax at 85% 20%, rgb(236 72 153 / 0.6), transparent 65%),
    radial-gradient(50vmax 35vmax at 70% 85%, rgb(34 211 238 / 0.5), transparent 65%),
    radial-gradient(35vmax 30vmax at 20% 90%, rgb(16 185 129 / 0.45), transparent 65%);
  filter: blur(40px);
  animation: aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(8deg) scale(1.05); }
  100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(-6deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="aurora"] body::before { animation: none; }
}
[data-theme="aurora"] :is(.day-card, .card, .auth-card, .event, .banner, .seg, .tabs, .theme-tile) {
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
[data-theme="aurora"] .day-label { background: var(--day-label); }
[data-theme="aurora"] .day-card.is-today { border-color: rgb(167 139 250 / 0.6); box-shadow: 0 0 0 1px rgb(167 139 250 / 0.4), 0 10px 40px rgb(124 58 237 / 0.35); }
[data-theme="aurora"] .day-card.is-today .day-label { background: linear-gradient(180deg, #22d3ee, #a78bfa); }
[data-theme="aurora"] .day-table th { background: rgb(255 255 255 / 0.05); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
[data-theme="aurora"] .grid { background: var(--line); border-color: var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-theme="aurora"] .cell { background: rgb(14 12 36 / 0.55); }
[data-theme="aurora"] .cell.other { background: rgb(14 12 36 / 0.3); }
[data-theme="aurora"] .topbar { background: rgb(11 11 26 / 0.45); }
[data-theme="aurora"] .btn.primary, [data-theme="aurora"] .fab, [data-theme="aurora"] .chips button.on, [data-theme="aurora"] .cell.today .num {
  background: linear-gradient(135deg, #a78bfa, #ec4899);
  border-color: transparent;
  color: #fff;
}
[data-theme="aurora"] .fab { box-shadow: 0 10px 40px rgb(236 72 153 / 0.45); }
[data-theme="aurora"] dialog.sheet { background: rgb(20 17 45 / 0.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--line); }
[data-theme="aurora"] .sheet-head { background: rgb(255 255 255 / 0.04); }
[data-theme="aurora"] :is(.field input, .field select, .field textarea, .invite-form input, .btn, .chips button, .more-btn) { background: rgb(255 255 255 / 0.06); border-color: var(--line); }
[data-theme="aurora"] .toast { background: rgb(255 255 255 / 0.9); color: #160f33; }


/* =====================================================================
   2. ПАСТЕЛЬ — тёплый кремовый фон, мягкие «бенто»-карточки, крупная типографика
   ===================================================================== */
:root[data-theme="pastel"] {
  --bg: #f4efe6;
  --surface: #fffdf8;
  --surface-2: #f3ebdf;
  --text: #2b2622;
  --muted: #8a7f73;
  --line: #ebe1d2;
  --accent: #ff7a59;
  --accent-text: #ffffff;
  --danger: #d9480f;
  --today: #ffe8dc;
  --link: #2b2622;
  --day-label: #ffd6a5;
  --radius: 26px;
  color-scheme: light;
}
[data-theme="pastel"] body { font-family: Manrope, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); }
[data-theme="pastel"] :is(.nav h2, .auth h1, .sheet-head h3, #side h3, .card h4, .ask h3) { font-family: Unbounded, Manrope, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
[data-theme="pastel"] .nav h2 { font-size: 22px; }
[data-theme="pastel"] :is(.day-card, .card, .auth-card, .event, .grid) {
  border: 0;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.8) inset, 0 12px 30px -12px rgb(110 80 40 / 0.18);
}
[data-theme="pastel"] .day-card { border-radius: var(--radius); }
[data-theme="pastel"] .day-label { width: 52px; color: #3a2f25; }
[data-theme="pastel"] .day-label span { font-family: Unbounded, sans-serif; font-weight: 500; font-size: 14px; }
/* Каждый день недели — свой пастельный цвет */
[data-theme="pastel"] .day-card:nth-child(7n + 1) .day-label { background: #ffd6a5; }
[data-theme="pastel"] .day-card:nth-child(7n + 2) .day-label { background: #caffbf; }
[data-theme="pastel"] .day-card:nth-child(7n + 3) .day-label { background: #9bf6ff; }
[data-theme="pastel"] .day-card:nth-child(7n + 4) .day-label { background: #bdb2ff; }
[data-theme="pastel"] .day-card:nth-child(7n + 5) .day-label { background: #ffc6ff; }
[data-theme="pastel"] .day-card:nth-child(7n + 6) .day-label { background: #fdffb6; }
[data-theme="pastel"] .day-card:nth-child(7n + 7) .day-label { background: #ffadad; }
[data-theme="pastel"] .day-card.is-today { box-shadow: 0 0 0 3px var(--accent), 0 16px 34px -12px rgb(255 122 89 / 0.45); }
[data-theme="pastel"] .day-table th { background: transparent; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
[data-theme="pastel"] .day-table tr:not(.add-row) .link { font-weight: 700; text-decoration: underline; text-decoration-color: var(--c, var(--accent)); text-decoration-thickness: 3px; text-underline-offset: 4px; }
[data-theme="pastel"] .event { border-left-width: 6px; }
[data-theme="pastel"] .btn, [data-theme="pastel"] .chips button, [data-theme="pastel"] .seg-btn, [data-theme="pastel"] .tab { border-radius: 999px; font-weight: 600; }
[data-theme="pastel"] .btn.primary, [data-theme="pastel"] .fab { box-shadow: 0 10px 24px -8px rgb(255 122 89 / 0.7); }
[data-theme="pastel"] .seg, [data-theme="pastel"] .tabs { border-radius: 999px; }
[data-theme="pastel"] .grid { border-radius: var(--radius); background: var(--line); }
[data-theme="pastel"] .cell.today .num { background: var(--accent); }
[data-theme="pastel"] .banner { background: #fff1c9; }
[data-theme="pastel"] dialog.sheet { border-radius: 28px; }
@media (max-width: 600px) {
  [data-theme="pastel"] dialog.sheet { border-radius: 28px 28px 0 0; }
  [data-theme="pastel"] .day-label { width: 40px; }
}


/* =====================================================================
   3. НЕО-БРУТАЛИЗМ — толстые чёрные рамки, жёсткие тени, кислотные цвета
   ===================================================================== */
:root[data-theme="brutal"] {
  --bg: #fff4d6;
  --surface: #ffffff;
  --surface-2: #fff9e8;
  --text: #111111;
  --muted: #4b4b4b;
  --line: #111111;
  --accent: #ff5ea8;
  --accent-text: #111111;
  --danger: #e5283a;
  --today: #ffd23f;
  --link: #111111;
  --day-label: #7aa2ff;
  --radius: 10px;
  --ink: #111111;
  --hard: 4px 4px 0 var(--ink);
  color-scheme: light;
}
[data-theme="brutal"] body {
  font-family: Manrope, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  background-color: var(--bg);
  background-image: radial-gradient(rgb(17 17 17 / 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
}
[data-theme="brutal"] :is(.nav h2, .auth h1, .sheet-head h3, #side h3, .card h4, .ask h3, .day-label span, .theme-name) {
  font-family: Unbounded, Manrope, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
[data-theme="brutal"] :is(.day-card, .card, .auth-card, .event, .grid, .banner, dialog.sheet, .theme-tile) {
  border: 2.5px solid var(--ink);
  box-shadow: var(--hard);
}
[data-theme="brutal"] .day-card { border-radius: var(--radius); }
[data-theme="brutal"] .day-label span { font-size: 11px; letter-spacing: 0; }
[data-theme="brutal"] .nav h2 { font-size: 17px; margin: 0 6px; }
@media (max-width: 600px) {
  [data-theme="brutal"] .nav h2 { font-size: 14px; min-width: 0; }
}
[data-theme="brutal"] .day-label { border-right: 2.5px solid var(--ink); color: var(--ink); }
[data-theme="brutal"] .day-card:nth-child(4n + 1) .day-label { background: #7aa2ff; }
[data-theme="brutal"] .day-card:nth-child(4n + 2) .day-label { background: #3dd9b4; }
[data-theme="brutal"] .day-card:nth-child(4n + 3) .day-label { background: #ffd23f; }
[data-theme="brutal"] .day-card:nth-child(4n + 4) .day-label { background: #ff9f5a; }
[data-theme="brutal"] .day-card.is-today { box-shadow: 7px 7px 0 var(--accent); }
[data-theme="brutal"] .day-card.is-today .day-label { background: var(--accent); }
[data-theme="brutal"] .day-table th { background: var(--surface-2); border-bottom: 2.5px solid var(--ink); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; }
[data-theme="brutal"] .day-table td { border-bottom: 1.5px solid var(--ink); }
[data-theme="brutal"] .day-table th + th, [data-theme="brutal"] .day-table td + td { border-left: 1.5px solid var(--ink); }
[data-theme="brutal"] .day-table tr:not(.add-row) .link { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
[data-theme="brutal"] .day-table .time, [data-theme="brutal"] .event .time { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ink); }
[data-theme="brutal"] :is(.btn, .icon-btn, .seg, .tabs, .chips button, .more-btn, .fab, .field input, .field select, .field textarea, .invite-form input) {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 8px;
  font-weight: 700;
}
[data-theme="brutal"] :is(.btn, .icon-btn, .chips button, .fab, .seg-btn, .tab):active { transform: translate(3px, 3px); box-shadow: none; }
[data-theme="brutal"] .btn.primary { background: var(--accent); color: var(--ink); }
[data-theme="brutal"] .btn.ghost { background: var(--surface); color: var(--ink); }
[data-theme="brutal"] .btn.danger { background: #ffd6da; color: var(--ink); }
[data-theme="brutal"] .seg-btn.active, [data-theme="brutal"] .tab.active { background: #ffd23f; box-shadow: none; }
[data-theme="brutal"] .chips button.on { background: #3dd9b4; color: var(--ink); }
[data-theme="brutal"] .fab { background: #ffd23f; color: var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
[data-theme="brutal"] .grid { background: var(--ink); gap: 2px; }
[data-theme="brutal"] .cell.today .num { background: var(--accent); color: var(--ink); border: 2px solid var(--ink); }
[data-theme="brutal"] .cell.selected { outline: 3px solid var(--ink); }
[data-theme="brutal"] .chip { color: var(--ink); border: 1.5px solid var(--ink); }
[data-theme="brutal"] .banner { background: #3dd9b4; }
[data-theme="brutal"] .topbar { background: rgb(255 244 214 / 0.92); border-bottom: 2.5px solid var(--ink); }
[data-theme="brutal"] .sheet-head { border-bottom: 2.5px solid var(--ink); background: #ffd23f; }
[data-theme="brutal"] .title-input { border-bottom: 2.5px solid var(--ink); }
[data-theme="brutal"] .toast { background: var(--ink); color: #ffd23f; border-radius: 8px; box-shadow: 4px 4px 0 var(--accent); }
[data-theme="brutal"] .theme-tile.on { background: #ffd23f; }