/* ======================================================================
   ЖИДКОЕ СТЕКЛО (в духе iOS 26). Подключается после styles.css и переопределяет поверхности.
   Фон — мягкие пятна цветов логотипа; поверхности — полупрозрачное стекло с бликом по краю.
   Текстовое стекло плотностью 72%: на самом насыщенном пятне акценты дают не меньше 4.98:1 (contrast.py).
   Крупные панели (меню, неделя, главная карточка) прозрачнее и с размытием: текст на них чёрный, от 12:1.
   ====================================================================== */
:root {
  --bg: #EEF0FF;
  --glass: rgba(255, 255, 255, .72);
  --glass-panel: rgba(255, 255, 255, .55);
  --glass-fill: rgba(255, 255, 255, .6);
  --glass-border: rgba(255, 255, 255, .8);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3);
  --glass-shadow: 0 10px 30px rgba(52, 40, 140, .12), 0 1px 3px rgba(52, 40, 140, .08);
  --glass-blur: blur(24px) saturate(180%);
  --tint: rgba(75, 59, 214, .12);
  --blob1: #7AA2FF; --blob2: #C07BFF; --blob3: #FF9EC0; --blob4: #6FE3E8;
  --surface: var(--glass);
  --surface-2: rgba(255, 255, 255, .5);
  --line: rgba(60, 60, 90, .12);
}
:root[data-theme="dark"] {
  --bg: #07070C;
  --glass: rgba(28, 28, 38, .62);
  --glass-panel: rgba(28, 28, 38, .5);
  --glass-fill: rgba(255, 255, 255, .08);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .14);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --tint: rgba(139, 124, 255, .22);
  /* на ярких пятнах тёмного фона стандартные #8B7CFF и #FF453A давали 4.2 и 4.0:1 — подняты до 5.15 и 4.87 (contrast.py) */
  --brand: #9D90FF; --focus: #9D90FF; --danger: #FF6961;
  --blob1: #1E3A8A; --blob2: #4C1D95; --blob3: #831843; --blob4: #134E4A;
  --surface: var(--glass);
  --surface-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .1);
}

body { background: var(--bg); }
body::before, .intro::before {
  content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, var(--blob1) 0, transparent 70%),
    radial-gradient(36% 30% at 92% 22%, var(--blob2) 0, transparent 70%),
    radial-gradient(44% 36% at 76% 90%, var(--blob3) 0, transparent 70%),
    radial-gradient(40% 34% at 4% 76%, var(--blob4) 0, transparent 70%);
  filter: blur(8px);
}
.intro { background: var(--bg); isolation: isolate; }

/* стеклянные поверхности */
.item, .card, .good, .person, .kid, .reward, .doc, .wish, .lesson, .empty, .art, .lessons-card, .week, .hero-card,
.addbar .input, .intro li, .pad button:not(.ghost) {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-edge);
}
.profile .person { background: transparent; border: 0; box-shadow: none; }
.item, .good, .person, .kid, .reward, .doc, .wish, .lesson, .empty, .art { border-radius: var(--r-md); }
/* размытие того, что под стеклом (кроме упрощённого режима) */
html:not(.lite) :is(.item, .card, .good, .person, .kid, .reward, .doc, .wish, .lesson, .empty, .art, .lessons-card,
  .week, .hero-card, .seg, .tabbar, .toast, .addbar .input, .intro li, .pad button) {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.week, .hero-card, .tabbar, .seg { background: var(--glass-panel); }

/* главный экран: крупное «Сегодня» и карточка с кольцом прогресса */
.today-head { padding: var(--s2) 2px 0; }
.today-head .eyebrow { color: var(--ink-2); }
.today-head .display { font-size: 42px; margin-top: 2px; }
.hero-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r-lg); margin-top: var(--s3); }
.ring-wrap { position: relative; width: 84px; height: 84px; flex: none; }
.ring-wrap svg { width: 84px; height: 84px; }
.ring-bg { fill: none; stroke: var(--tint); stroke-width: 9; }
.ring-fg { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; font: 800 17px var(--font-display); letter-spacing: -.02em; }
.hero-text { flex: 1; min-width: 0; }
.hero-text .big { font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.hero-text .muted { color: var(--ink-2); margin-top: 2px; }
.hero-card .stats { margin-top: var(--s3); gap: 6px; }
.hero-card .stat { background: var(--tint); color: var(--ink); padding: 4px 10px; font-size: var(--fs-xs); }
.hero-card .stat.warn { background: var(--danger-soft); color: var(--danger); }

/* неделя: выбранный день — «линза» бренда */
.week { border-radius: var(--r-lg); }
.day:hover { background: var(--glass-fill); }
.day[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(75, 59, 214, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
:root[data-theme="dark"] .day[aria-pressed="true"] { color: #0b0b12; }

/* кнопки, поля, чипы, переключатель разделов */
.btn.primary { box-shadow: 0 8px 20px rgba(75, 59, 214, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.brand { box-shadow: 0 8px 22px rgba(91, 75, 245, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.ghost { background: var(--glass-fill); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge); }
.input { background: var(--glass-fill); border: 1px solid var(--glass-border); }
.input:focus { background: var(--surface); border-color: var(--focus); }
.chip { background: var(--glass-fill); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(75, 59, 214, .3); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { color: #0b0b12; }
.seg { border: 1px solid var(--glass-border); box-shadow: var(--glass-edge); padding: 4px; border-radius: 16px; }
.seg button { border-radius: 12px; }
.seg button[aria-selected="true"] { background: var(--surface); box-shadow: 0 2px 8px rgba(52, 40, 140, .14), var(--glass-edge); }
:root[data-theme="dark"] .seg button[aria-selected="true"] { background: rgba(255, 255, 255, .16); }

/* нижнее меню — плавающая стеклянная капсула */
.app { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.tabbar {
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; padding: 6px; gap: 2px;
  border-radius: 32px; border: 1px solid var(--glass-border);
  box-shadow: 0 16px 40px rgba(52, 40, 140, .18), var(--glass-edge);
}
.tab { border-radius: 26px; padding: 7px 0 6px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tab[aria-current="page"] { background: var(--tint); color: var(--brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .tab[aria-current="page"] { color: #C4BAFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

.toast { background: color-mix(in srgb, var(--ink) 80%, transparent); border: 1px solid rgba(255, 255, 255, .15); bottom: calc(96px + env(safe-area-inset-bottom)); }
.lightbox { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(0, 0, 0, .7); }

/* упрощённое стекло: слабые телефоны, «уменьшить прозрачность» в настройках, старые браузеры */
html.lite { --glass: rgba(255, 255, 255, .9); --glass-panel: rgba(255, 255, 255, .86); }
html.lite[data-theme="dark"] { --glass: rgba(28, 28, 38, .94); --glass-panel: rgba(28, 28, 38, .9); }
html.lite body::before { filter: none; }
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255, 255, 255, .95); --glass-panel: rgba(255, 255, 255, .95); }
  :root[data-theme="dark"] { --glass: rgba(28, 28, 38, .97); --glass-panel: rgba(28, 28, 38, .97); }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .9); --glass-panel: rgba(255, 255, 255, .88); }
  :root[data-theme="dark"] { --glass: rgba(28, 28, 38, .94); --glass-panel: rgba(28, 28, 38, .92); }
}


/* ======================================================================
   ЖИВЫЕ АНИМАЦИИ. Всё отключается при «уменьшить движение» (правило в styles.css)
   и частично в упрощённом режиме для слабых телефонов.
   ====================================================================== */
:root { --spring: cubic-bezier(.3, 1.35, .5, 1); }

/* фон медленно «дышит»: пятна плывут и меняют размер */
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
  66%  { transform: translate3d(-2%, 3%, 0) scale(.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
html:not(.lite) body::before { animation: drift 28s ease-in-out infinite; will-change: transform; }

/* экран появляется мягко, список — лесенкой */
.fade { animation: screenIn .38s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.list > * { animation: rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.no-enter .fade, .no-enter .list > * { animation: none; }
.hero-card, .week, .lessons-card { animation: rise .5s var(--ease) both; }
.week { animation-delay: 60ms; }
.lessons-card { animation-delay: 110ms; }

/* нажатие на карточку — лёгкое «продавливание» стекла */
.item, .lessons-card, .doc, .good, .person, .kid, .reward, .wish { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.lessons-card:active, .item:active, .doc:active { transform: scale(.985); }

/* галочка «впрыгивает», сделанное дело уезжает вправо и схлопывается */
.check[aria-checked="true"] { animation: pop .38s var(--spring); }
.check[aria-checked="true"] svg { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .32s .06s var(--ease) forwards; opacity: 1; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.item.leaving { animation: leave .42s var(--ease) forwards; pointer-events: none; overflow: hidden; }
@keyframes leave {
  0%   { opacity: 1; transform: none; max-height: 220px; }
  55%  { opacity: 0; transform: translateX(48px) scale(.98); max-height: 220px; }
  100% { opacity: 0; transform: translateX(48px) scale(.98); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -8px; border-width: 0; }
}

/* «линза» нижнего меню скользит к выбранному разделу с пружинкой */
.tabbar { position: fixed; }
.tabbar .lens {
  position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 26px; pointer-events: none;
  background: var(--tint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px rgba(75, 59, 214, .18);
  transition: transform .5s var(--spring), width .35s var(--ease), opacity .2s;
}
:root[data-theme="dark"] .tabbar .lens { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 14px rgba(0, 0, 0, .4); }
.tab { position: relative; z-index: 1; }
.tab[aria-current="page"] { background: transparent; box-shadow: none; }
.tab[aria-current="page"] svg { animation: tabBounce .45s var(--spring); }
@keyframes tabBounce { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* выбранный день и чипы — пружинка */
.day[aria-pressed="true"], .chip[aria-pressed="true"], .seg button[aria-selected="true"] { animation: pop .34s var(--spring); }

/* всплывающее сообщение выезжает снизу */
.toast:not([hidden]) { animation: toastIn .42s var(--spring); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 18px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* мягкая смена темы */
html.theme-anim, html.theme-anim * { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease) !important; }

/* конфетти, когда все дела на сегодня закрыты */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.confetti i { position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 3px; animation: fall var(--d) cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 108vh) rotate(var(--r)); opacity: .85; } }

/* загрузка: стеклянные заготовки с бликом вместо крутилки */
.skeleton { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); }
.skeleton i { display: block; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-border); position: relative; overflow: hidden; }
.skeleton i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: shimmer 1.3s ease-in-out infinite; }
:root[data-theme="dark"] .skeleton i::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }
@keyframes shimmer { to { transform: translateX(100%); } }

/* меню не показываем, пока приложение загружается */
.tabbar[hidden] { display: none; }