/* ───────────────────────── Fedor: «настроения» оформления ─────────────────────────
   Подключается после app.css. Без атрибута data-mood на <html> ничего не меняется (прежний вид).
   magic — «Ночной лес»: тёмно-синий и золото кота, мерцающие огоньки, стекло.
   calm  — «Светлое спокойное»: тёплая бумага, чернильно-синий, золото только в акцентах. */

/* ═════════ общее для обоих настроений: «как у Apple» ═════════ */
:root[data-mood] { --radius: 22px; --radius-s: 15px; }
[data-mood] body { letter-spacing: -.005em; }
[data-mood] .appbar h1 { font-size: 2.15rem; line-height: 1.1; letter-spacing: -.035em; font-weight: 800; }
[data-mood] .appbar-sub { font-size: .95rem; font-weight: 500; }
[data-mood] .card { border-radius: var(--radius); margin-bottom: 18px; }
[data-mood] .section-label { font-size: .76rem; margin: 26px 8px 9px; letter-spacing: .09em; }
[data-mood] .btn { border-radius: 16px; font-weight: 650; }
[data-mood] .btn-primary { font-weight: 700; }
[data-mood] .btn-chip { border-radius: 999px; }
[data-mood] .rem { padding: 14px 16px; }
[data-mood] .rem-swipe .rem-fg { padding: 14px 16px; }
[data-mood] .rem-time b { font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
[data-mood] .rem-title { font-weight: 620; }
[data-mood] dialog.sheet { border-radius: 28px 28px 0 0; }
@media (min-width: 700px) { [data-mood] dialog.sheet { border-radius: 28px; } }
[data-mood] .field input, [data-mood] .field select, [data-mood] .field textarea, [data-mood] .input { border-radius: 15px; }
[data-mood] .login-card { border-radius: 30px; }
[data-mood] .brand-big { gap: 14px; font-size: 1.9rem; }
[data-mood] .brand-big .brand-name { font-weight: 800; letter-spacing: -.03em; }
[data-mood] .login-card .muted { margin: 4px 0 24px; }

/* ═════════ magic — «Ночной лес» (всегда тёмный: это ночь) ═════════ */
:root[data-mood="magic"] {
  --bg: #080f2b;
  --surface: rgba(21, 32, 78, .62);
  --surface-2: rgba(40, 56, 118, .5);
  --border: rgba(232, 176, 74, .16);
  --text: #f6efdd;
  --muted: #a7acc9;
  --accent: #f0b84e;
  --accent-strong: #ffd37a;
  --accent-soft: rgba(240, 184, 78, .16);
  --on-accent: #1a1430;
  --ok: #6fe0a6;
  --ok-bg: rgba(31, 110, 74, .35);
  --warn: #ffc067;
  --warn-bg: rgba(120, 78, 18, .38);
  --warn-border: rgba(240, 184, 78, .38);
  --danger: #ff9a8f;
  --danger-bg: rgba(130, 36, 40, .38);
  --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 34px rgba(2, 5, 24, .45);
  --shadow-fab: 0 10px 30px rgba(240, 184, 78, .42), 0 0 0 1px rgba(255, 223, 150, .5) inset;
  color-scheme: dark;
}
[data-mood="magic"] body {
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(60, 84, 190, .38), transparent 70%),
    radial-gradient(700px 480px at -10% 105%, rgba(18, 94, 92, .34), transparent 70%),
    linear-gradient(180deg, #0a1233 0%, #070d26 100%);
  background-attachment: fixed;
}
/* огоньки: два слоя точек с разным ритмом мерцания */
[data-mood="magic"] body::before, [data-mood="magic"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
[data-mood="magic"] body::before {
  background-image:
    radial-gradient(circle, rgba(255, 214, 120, 1) 0 2px, rgba(255, 214, 120, .25) 3px, transparent 6px),
    radial-gradient(circle, rgba(255, 214, 120, .7) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 236, 190, .8) 0 1.2px, transparent 2.4px);
  background-size: 190px 230px, 260px 170px, 340px 310px;
  background-position: 18px 40px, 120px 90px, 60px 160px;
  animation: fireflyA 5.5s ease-in-out infinite alternate;
}
[data-mood="magic"] body::after {
  background-image:
    radial-gradient(circle, rgba(255, 200, 100, 1) 0 2.2px, rgba(255, 200, 100, .25) 3.5px, transparent 7px),
    radial-gradient(circle, rgba(255, 228, 170, .7) 0 1px, transparent 2px);
  background-size: 300px 260px, 210px 280px;
  background-position: 150px 20px, 40px 130px;
  animation: fireflyB 7.5s ease-in-out infinite alternate;
}
@keyframes fireflyA { from { opacity: .15; transform: translateY(0); } to { opacity: .75; transform: translateY(-9px); } }
@keyframes fireflyB { from { opacity: .7; transform: translateY(-6px); } to { opacity: .12; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { [data-mood="magic"] body::before, [data-mood="magic"] body::after { animation: none; opacity: .4; } }

.scrolled[data-mood="magic"] .appbar-bar { background: rgba(8, 15, 43, .86); border-bottom-color: rgba(240, 184, 78, .16); }
[data-mood="magic"] .appbar h1 { color: #fff6df; text-shadow: 0 0 28px rgba(240, 184, 78, .25); }
[data-mood="magic"] .card, [data-mood="magic"] .mem, [data-mood="magic"] .login-card {
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
[data-mood="magic"] .card { border-color: rgba(240, 184, 78, .17); }
[data-mood="magic"] .card-alert { background: linear-gradient(135deg, rgba(120, 78, 18, .5), rgba(60, 40, 12, .45)); }
[data-mood="magic"] .rem-time b { color: #ffd98a; }
[data-mood="magic"] .rem-time b.late { color: #ffb36b; }
[data-mood="magic"] .section-label { color: #c7a766; }
@media (min-width: 900px) {
  [data-mood="magic"] .nav { background: rgba(8, 14, 40, .72); border-right: 1px solid rgba(240, 184, 78, .14); }
}
[data-mood="magic"] .nav-act { background: linear-gradient(145deg, #ffd980, #e9a93a); }
[data-mood="magic"] .btn-primary { background: linear-gradient(145deg, #ffd980, #eaaa3c); border-color: transparent; color: #1b1530; box-shadow: 0 6px 20px rgba(240, 184, 78, .25); }
[data-mood="magic"] .btn-primary:hover { background: linear-gradient(145deg, #ffe5a0, #f2b64a); }
[data-mood="magic"] .btn:not(.btn-primary) { border-color: rgba(240, 184, 78, .2); background: rgba(40, 56, 118, .35); }
[data-mood="magic"] .btn.btn-ghost { background: transparent; border-color: transparent; }
[data-mood="magic"] .btn.btn-icon { background: rgba(40, 56, 118, .4); }
[data-mood="magic"] .field input, [data-mood="magic"] .field select, [data-mood="magic"] .field textarea, [data-mood="magic"] .input {
  background: rgba(8, 15, 43, .55); border-color: rgba(240, 184, 78, .2);
}
[data-mood="magic"] .field input:focus, [data-mood="magic"] .input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(240, 184, 78, .18); }
[data-mood="magic"] dialog.sheet { background: #101a45; border-top: 1px solid rgba(240, 184, 78, .25); }
[data-mood="magic"] dialog.sheet::backdrop { background: rgba(3, 6, 22, .62); }
[data-mood="magic"] .login-card { background: rgba(14, 24, 66, .66); border-color: rgba(240, 184, 78, .26); box-shadow: 0 24px 70px rgba(2, 5, 24, .6), 0 0 80px rgba(240, 184, 78, .08); }
[data-mood="magic"] .brand-big .mark {
  width: 124px; height: 124px;
  box-shadow: 0 0 0 3px #0d1642, 0 0 0 5px #f0b84e, 0 0 46px rgba(240, 184, 78, .55), 0 0 110px rgba(240, 184, 78, .22);
  animation: catGlow 4.5s ease-in-out infinite alternate;
}
@keyframes catGlow { from { box-shadow: 0 0 0 3px #0d1642, 0 0 0 5px #f0b84e, 0 0 34px rgba(240, 184, 78, .4), 0 0 90px rgba(240, 184, 78, .14); }
                     to   { box-shadow: 0 0 0 3px #0d1642, 0 0 0 5px #ffd37a, 0 0 56px rgba(240, 184, 78, .7), 0 0 130px rgba(240, 184, 78, .28); } }
@media (prefers-reduced-motion: reduce) { [data-mood="magic"] .brand-big .mark { animation: none; } }
[data-mood="magic"] .brand-big .brand-name { color: #fff3d2; text-shadow: 0 0 30px rgba(240, 184, 78, .4); }

/* ═════════ calm — «Светлое спокойное» ═════════ */
:root[data-mood="calm"] {
  --bg: #f5f2ea;
  --surface: #ffffff;
  --surface-2: #f0ece1;
  --border: #e8e3d6;
  --text: #19213f;
  --muted: #646981;
  --accent: #2c4390;
  --accent-strong: #213478;
  --accent-soft: #e9edf9;
  --on-accent: #ffffff;
  --gold: #b7821a;
  --gold-soft: #f7ecd2;
  --ok: #167a4d;
  --ok-bg: #e3f4ea;
  --warn: #a45a07;
  --warn-bg: #fbf0d9;
  --warn-border: #ecd39a;
  --danger: #c8372d;
  --danger-bg: #fbeae8;
  --shadow: 0 1px 2px rgba(25, 33, 63, .04), 0 8px 24px rgba(25, 33, 63, .04);
  --shadow-fab: 0 10px 24px rgba(44, 67, 144, .32);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-mood="calm"]:not([data-theme="light"]) {
    --bg: #111428; --surface: #1a1e38; --surface-2: #23284a; --border: #2c3158; --text: #f1eee4; --muted: #a0a5c4;
    --accent: #9fb2f2; --accent-strong: #bccaf8; --accent-soft: #262d57; --on-accent: #101428; --gold: #e5b95a; --gold-soft: #3a3016;
    --ok: #66d49d; --ok-bg: #123122; --warn: #ffb866; --warn-bg: #2d2511; --warn-border: #5c4a1e; --danger: #ff8d82; --danger-bg: #3a1c20;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); --shadow-fab: 0 10px 26px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-mood="calm"][data-theme="dark"] {
  --bg: #111428; --surface: #1a1e38; --surface-2: #23284a; --border: #2c3158; --text: #f1eee4; --muted: #a0a5c4;
  --accent: #9fb2f2; --accent-strong: #bccaf8; --accent-soft: #262d57; --on-accent: #101428; --gold: #e5b95a; --gold-soft: #3a3016;
  --ok: #66d49d; --ok-bg: #123122; --warn: #ffb866; --warn-bg: #2d2511; --warn-border: #5c4a1e; --danger: #ff8d82; --danger-bg: #3a1c20;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); --shadow-fab: 0 10px 26px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
.scrolled[data-mood="calm"] .appbar-bar { background: color-mix(in srgb, var(--bg) 82%, transparent); }
[data-mood="calm"] .appbar h1 { font-weight: 780; }
[data-mood="calm"] .card { box-shadow: var(--shadow); }
[data-mood="calm"] .rem-time b { color: var(--text); }
[data-mood="calm"] .rem-time b.late { color: var(--warn); }
[data-mood="calm"] .rem-time::after { content: ""; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--gold); margin: 5px auto 0; opacity: .85; }
[data-mood="calm"] .section-label { color: var(--gold); }
[data-mood="calm"] .btn-primary { background: var(--accent); }
[data-mood="calm"] .card-alert { background: var(--gold-soft); border-color: var(--warn-border); }
[data-mood="calm"] .login-card { box-shadow: 0 30px 80px rgba(25, 33, 63, .10), 0 2px 6px rgba(25, 33, 63, .05); }
[data-mood="calm"] .brand-big .mark { width: 112px; height: 112px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px var(--gold), 0 14px 34px rgba(25, 33, 63, .18); }
[data-mood="calm"] .brand-name { color: var(--text); }

/* ═════════ выбор настроения: «Ночной лес» всегда тёмный, переключатель темы тогда не нужен ═════════ */
[data-mood="magic"] .theme-group { opacity: .4; pointer-events: none; }
[data-mood="magic"] .hint-magic { display: block; margin-top: 6px; color: var(--accent); }
[data-mood="magic"] .mood-opt { background: rgba(40, 56, 118, .4); }
[data-mood="magic"] .mood-opt[aria-pressed="true"] { border-color: var(--accent); background: rgba(240, 184, 78, .14); }

/* ═════════════════════ второй проход: кнопки, панель-капсула, звёзды, движение ═════════════════════
   Фирменный знак — восьмилучевая звезда с плаща кота (icons/star.svg): метка разделов, огонёк «+», «печатает» в чате. */
:root[data-mood] {
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --star: url(/static/icons/star.svg?v=1);
  --ease: cubic-bezier(.2, .9, .25, 1);
}
:root[data-mood="magic"] { --star-color: #f0b84e; --spark: #fff1c4; }
:root[data-mood="calm"] { --star-color: var(--gold); --spark: var(--gold); }

/* заголовки — «книжным» шрифтом (на iPhone это New York, на Android — системный с засечками) */
[data-mood] .appbar h1, [data-mood] .item-h1, [data-mood] .sheet-head h2, [data-mood] .brand-big .brand-name {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.02em;
}
[data-mood] .appbar h1 { font-size: 2.3rem; }

/* звёзды */
[data-mood] .section-label::before, [data-mood] .dot, [data-mood] .nav-act::after {
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat;
}
[data-mood] .section-label { display: flex; align-items: center; gap: 7px; }
[data-mood] .section-label::before { content: ""; width: 10px; height: 10px; background: var(--star-color); flex: none; }
[data-mood] .dot { width: 13px; height: 13px; border-radius: 0; background: var(--star-color); }
[data-mood] .nav-act::after { content: ""; position: absolute; top: -8px; right: -6px; width: 19px; height: 19px; background: var(--spark); animation: twinkle 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ── кнопки: заметные, «осязаемые», с нажатием ── */
[data-mood] .btn, [data-mood] .nav-act, [data-mood] .seg, [data-mood] .mood-opt {
  transition: transform .2s var(--ease), background .15s, border-color .15s, filter .15s, box-shadow .2s;
}
[data-mood] .btn:active, [data-mood] .nav-act:active, [data-mood] .mood-opt:active { transform: scale(.96); filter: brightness(.94); }
[data-mood] .btn-small { min-height: 42px; }
[data-mood] .btn-chip { min-height: 38px; }
[data-mood] .msg-actions .btn { min-height: 34px; padding: 3px 11px; font-size: .82rem; border-radius: 12px; }

[data-mood="magic"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(150, 92, 10, .38), 0 8px 22px rgba(240, 184, 78, .3); }
[data-mood="magic"] .btn:not(.btn-primary) { color: #ffe3a3; background: rgba(240, 184, 78, .12); border-color: rgba(240, 184, 78, .42); }
[data-mood="magic"] .btn:not(.btn-primary):hover { background: rgba(240, 184, 78, .2); }
[data-mood="magic"] .btn.btn-ghost { color: #ffd37a; background: transparent; border-color: transparent; }
[data-mood="magic"] .btn.btn-ghost:hover { background: rgba(240, 184, 78, .12); }

[data-mood="calm"] .btn-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 7px 18px color-mix(in srgb, var(--accent) 32%, transparent); }
[data-mood="calm"] .btn:not(.btn-primary) { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
[data-mood="calm"] .btn:not(.btn-primary):hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }
[data-mood="calm"] .btn.btn-ghost { color: var(--accent); background: transparent; border-color: transparent; }
[data-mood="calm"] .btn.btn-ghost:hover { background: var(--accent-soft); }

/* предупреждающие и «готово» — цветом, а не только значком */
[data-mood] .btn.btn-danger { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
[data-mood] .rem-actions .btn-icon:not(.btn-danger) { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 38%, transparent); }
[data-mood] .rem-actions .btn-icon { width: 46px; min-height: 46px; border-radius: 15px; }
[data-mood] .rem-actions .btn-icon .i { stroke-width: 2.1; }
[data-mood] .segmented { padding: 4px; }
[data-mood="magic"] .seg[aria-pressed="true"] { background: rgba(240, 184, 78, .18); color: #ffd98a; box-shadow: inset 0 0 0 1px rgba(240, 184, 78, .4); }

/* ── нижняя панель (устроена в app.css): у оформлений — только своё стекло ── */
:root[data-mood="magic"] {
  --glass: rgba(12, 20, 58, .74); --glass-edge: rgba(240, 184, 78, .26); --nav-sel: rgba(255, 255, 255, .09);
  --glass-shadow: 0 16px 44px rgba(2, 5, 24, .6), inset 0 1px 0 rgba(255, 224, 150, .16);
}
:root[data-mood="calm"] {
  --glass: color-mix(in srgb, var(--surface) 76%, transparent); --glass-edge: rgba(25, 33, 63, .08); --nav-sel: rgba(25, 33, 63, .07);
  --glass-shadow: 0 14px 38px rgba(25, 33, 63, .16), inset 0 1px 0 rgba(255, 255, 255, .7);
}
:root[data-mood="calm"][data-theme="dark"] { --glass-edge: rgba(255, 255, 255, .12); --nav-sel: rgba(255, 255, 255, .1); --glass-shadow: 0 12px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) {
  :root[data-mood="calm"]:not([data-theme="light"]) { --glass-edge: rgba(255, 255, 255, .12); --nav-sel: rgba(255, 255, 255, .1); --glass-shadow: 0 12px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
}


/* ── движение ── */
@view-transition { navigation: auto; }
/* имя перехода — у капсулы и у кнопки, а не у всей панели: иначе панель становится «границей» для размытия и стекло перестаёт размывать страницу */
.nav-bar { view-transition-name: nav; }
.nav-act { view-transition-name: nav-act; }
::view-transition-group(nav), ::view-transition-new(nav), ::view-transition-group(nav-act), ::view-transition-new(nav-act) { animation: none; }
::view-transition-old(nav), ::view-transition-old(nav-act) { display: none; }
.nav-pill { view-transition-name: tab-pill; }
::view-transition-group(tab-pill) { animation-duration: .32s; animation-timing-function: cubic-bezier(.3, 1.25, .5, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
[data-mood] dialog.sheet[open] { animation: sheetUp .45s var(--ease); }
[data-mood] dialog.sheet[open]::backdrop { animation: fadeIn .3s ease; }
@keyframes sheetUp { from { transform: translateY(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* «готово»: строка вспыхивает золотом и уходит, на месте кнопки вспыхивает звезда */
[data-mood] .rem, [data-mood] .rem-fired, [data-mood] .fired-row { position: relative; }
[data-mood] .rem.burst, [data-mood] .rem-fired.burst, [data-mood] .fired-row.burst { animation: burst .42s var(--ease) forwards; }
[data-mood] .rem.burst::after, [data-mood] .rem-fired.burst::after, [data-mood] .fired-row.burst::after {
  content: ""; position: absolute; right: 56px; top: 50%; width: 38px; height: 38px; margin-top: -19px; background: var(--spark);
  -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; animation: pop .42s var(--ease) forwards; pointer-events: none;
}
@media (pointer: coarse) { [data-mood] .rem.burst::after { right: 17px; } }   /* звезда — на месте кружка «готово» */
@keyframes burst { 0% { opacity: 1; } 40% { opacity: 1; background: color-mix(in srgb, var(--star-color) 22%, transparent); } 100% { opacity: 0; transform: translateX(16px); } }
@keyframes pop { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.7) rotate(45deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [data-mood] .nav-act::after, [data-mood] dialog.sheet[open], [data-mood] dialog.sheet[open]::backdrop, [data-mood] .dot { animation: none; }
  [data-mood] .rem.burst, [data-mood] .rem-fired.burst, [data-mood] .rem.burst::after, [data-mood] .rem-fired.burst::after { animation-duration: .01s; }
}