/* ════════════════════════════════════════════════════════════
   Уроки 8В — четыре темы: Табло, Неон, Тетрадь, Доска.
   Всё цветовое — через переменные, тема меняет только их и декор.
   ════════════════════════════════════════════════════════════ */

:root{
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --tabh:calc(74px + env(safe-area-inset-bottom, 0px));
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
}

/* ── ТАБЛО: вокзальное табло, янтарные цифры, перекидные таблички ── */
html[data-theme="tablo"]{
  --bg:#0A0A0B; --bg2:#111113;
  --card:#141416; --card2:#1B1B1E; --tile:#0F0F11;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.14);
  --ink:#F3ECD8; --muted:#8B8577; --dim:#4A4740;
  --accent:#FFB800; --accent2:#FF5A36; --ok:#5BE38B;
  --fd:"Oswald","Arial Narrow",sans-serif;
  --fb:"IBM Plex Sans",system-ui,sans-serif;
  --fn:"JetBrains Mono",ui-monospace,monospace;
  --r:6px; --r2:4px;
  --subj-case:uppercase; --subj-track:.01em; --subj-size:clamp(34px,11vw,52px);
  color-scheme:dark;
}
/* ── НЕОН: ночной город, сетка-горизонт, свечение ── */
html[data-theme="neon"]{
  --bg:#06030E; --bg2:#0C0620;
  --card:rgba(18,10,40,.72); --card2:rgba(28,14,60,.8); --tile:rgba(255,255,255,.04);
  --line:rgba(150,120,255,.18); --line2:rgba(150,120,255,.32);
  --ink:#EEF4FF; --muted:#9A93C4; --dim:#4D4775;
  --accent:#20F0FF; --accent2:#FF3DD4; --ok:#5CFFA8;
  --fd:"Exo 2",system-ui,sans-serif;
  --fb:"Exo 2",system-ui,sans-serif;
  --fn:"JetBrains Mono",ui-monospace,monospace;
  --r:16px; --r2:11px;
  --subj-case:none; --subj-track:-.01em; --subj-size:clamp(32px,10vw,46px);
  color-scheme:dark;
}
/* ── ТЕТРАДЬ: лист в клетку, синие чернила, красные поля ── */
html[data-theme="paper"]{
  --bg:#F6F3EA; --bg2:#EFEADB;
  --card:#FFFEFA; --card2:#FFFFFF; --tile:#F3EFE3;
  --line:rgba(30,40,80,.12); --line2:rgba(30,40,80,.22);
  --ink:#1A2246; --muted:#6A7192; --dim:#B9BCCB;
  --accent:#2350E0; --accent2:#E5383B; --ok:#1F9D55;
  --fd:"Caveat",cursive;
  --fb:"Nunito",system-ui,sans-serif;
  --fn:"Caveat",cursive;
  --r:10px; --r2:8px;
  --subj-case:none; --subj-track:0; --subj-size:clamp(42px,13vw,60px);
  color-scheme:light;
}
/* ── ДОСКА: школьная доска, мел ── */
html[data-theme="chalk"]{
  --bg:#1C3A2C; --bg2:#173126;
  --card:rgba(255,255,255,.05); --card2:rgba(255,255,255,.08); --tile:rgba(0,0,0,.16);
  --line:rgba(255,255,255,.18); --line2:rgba(255,255,255,.32);
  --ink:#F4F2E6; --muted:rgba(244,242,230,.62); --dim:rgba(244,242,230,.28);
  --accent:#FFE36E; --accent2:#FF9DB4; --ok:#9DF2B6;
  --fd:"Amatic SC",cursive;
  --fb:"Neucha",cursive;
  --fn:"Amatic SC",cursive;
  --r:4px; --r2:3px;
  --subj-case:none; --subj-track:.02em; --subj-size:clamp(46px,15vw,66px);
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overscroll-behavior-y:none;
}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ════════ фон и декор ════════ */
#fx,#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#fx{z-index:-1}
#confetti{z-index:200}
.deco{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.deco i{position:absolute;display:block}

html[data-theme="tablo"] .deco{
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(255,184,0,.10),transparent 60%),
    var(--bg);
}
html[data-theme="tablo"] .deco::after{ /* строки табло */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);
}
html[data-theme="tablo"] .deco .d1{inset:auto -20% -30% -20%;height:60%;
  background:radial-gradient(closest-side,rgba(255,90,54,.08),transparent)}

html[data-theme="neon"] .deco{background:linear-gradient(#06030E 0%,#120635 58%,#2A0B4D 72%,#06030E 100%)}
html[data-theme="neon"] .deco .d1{ /* солнце над горизонтом */
  width:120vw;height:120vw;left:-10vw;top:22vh;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,61,212,.28),rgba(32,240,255,.08) 60%,transparent);
  filter:blur(10px);animation:breathe 7s ease-in-out infinite;
}
html[data-theme="neon"] .deco .floor{ /* сетка уходит к горизонту */
  left:-50%;right:-50%;bottom:-6vh;height:46vh;transform-origin:50% 0;
  transform:perspective(320px) rotateX(62deg);
  background:
    linear-gradient(rgba(32,240,255,.55) 1.5px,transparent 1.5px) 0 0/100% 44px,
    linear-gradient(90deg,rgba(255,61,212,.45) 1.5px,transparent 1.5px) 0 0/44px 100%;
  -webkit-mask:linear-gradient(transparent,#000 30%,#000);mask:linear-gradient(transparent,#000 30%,#000);
  animation:floor 1.6s linear infinite;
}
@keyframes floor{to{background-position:0 44px,0 0}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}

html[data-theme="paper"] .deco{
  background:
    linear-gradient(90deg,transparent 0 calc(var(--gut) + 16px),rgba(229,56,59,.45) calc(var(--gut) + 16px) calc(var(--gut) + 17.5px),transparent calc(var(--gut) + 17.5px)),
    linear-gradient(rgba(35,80,224,.10) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(35,80,224,.10) 1px,transparent 1px) 0 0/22px 22px,
    var(--bg);
}
html[data-theme="chalk"] .deco{
  background:
    radial-gradient(70% 50% at 30% 20%,rgba(255,255,255,.06),transparent 70%),
    radial-gradient(60% 40% at 80% 70%,rgba(255,255,255,.04),transparent 70%),
    radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45)),
    var(--bg);
}
html[data-theme="chalk"] .deco .d1{ /* разводы от тряпки */
  inset:8% -10% auto -10%;height:30%;transform:rotate(-6deg);
  background:repeating-linear-gradient(100deg,transparent 0 40px,rgba(255,255,255,.025) 40px 90px);
  filter:blur(6px);
}

/* ════════ шапка ════════ */
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut-r) 12px var(--gut);
  background:linear-gradient(var(--bg) 55%,transparent);
}
html[data-theme="paper"] .top,html[data-theme="neon"] .top,html[data-theme="chalk"] .top{background:linear-gradient(color-mix(in srgb,var(--bg) 92%,transparent) 55%,transparent)}
.badge{
  flex:none;font-family:var(--fd);font-weight:700;font-size:15px;line-height:1;
  padding:8px 10px;border-radius:var(--r2);background:var(--accent);color:var(--acc-ink,#120E00);
  letter-spacing:.04em;
}
html[data-theme="paper"] .badge{font-size:22px;padding:4px 10px;transform:rotate(-3deg)}
html[data-theme="chalk"] .badge{font-size:22px;padding:4px 10px;background:none;color:var(--accent);border:2px solid var(--accent)}
.top-mid{min-width:0;flex:1}
.top-date{font-family:var(--fd);font-weight:600;font-size:16px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:var(--subj-case)}
html[data-theme="paper"] .top-date,html[data-theme="chalk"] .top-date{font-size:22px}
.top-sub{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{
  position:relative;flex:none;width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--muted);transition:color .25s,border-color .25s,transform .2s var(--spring);
}
.icon-btn svg{width:20px;height:20px}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 2px var(--bg);transition:transform .3s var(--spring)}
.icon-btn.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.icon-btn.on .dot{transform:scale(0)}
.icon-btn.ring svg{animation:ring 1s var(--out)}
@keyframes ring{10%,30%{transform:rotate(18deg)}20%,40%{transform:rotate(-16deg)}50%{transform:rotate(8deg)}60%{transform:rotate(0)}}

main{padding:0 var(--gut-r) calc(var(--tabh) + 26px) var(--gut);max-width:640px;margin:0 auto}
html[data-theme="paper"] main{padding-left:calc(var(--gut) + 26px)}

/* ════════ переходы между вкладками ════════ */
.view.in-r{animation:inR .55s var(--out) both}
.view.in-l{animation:inL .55s var(--out) both}
.view.in-u{animation:inU .6s var(--out) both}
@keyframes inR{from{opacity:0;transform:translateX(42px)}}
@keyframes inL{from{opacity:0;transform:translateX(-42px)}}
@keyframes inU{from{opacity:0;transform:translateY(24px) scale(.98)}}

/* ════════ баннер ════════ */
.banner{
  position:relative;overflow:hidden;border-radius:var(--r);margin:4px 0 14px;
  min-height:96px;display:flex;align-items:flex-end;padding:16px 18px;isolation:isolate;
  color:#fff;animation:bnIn .8s var(--spring) both;
}
@keyframes bnIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.banner .bn-img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  animation:kenburns 18s ease-in-out infinite alternate}
.banner.has-img .bn-img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(0,0,0,.7))}
@keyframes kenburns{to{transform:scale(1.12) translate(-2%,-2%)}}
.banner .bn-shine{position:absolute;inset:-20% auto -20% -40%;width:35%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);
  animation:shine 4.5s var(--out) infinite 1s}
@keyframes shine{0%{left:-40%}35%,100%{left:130%}}
.bn-text{min-width:0;width:100%}
.bn-title{font-family:var(--fd);font-weight:700;font-size:24px;line-height:1.1;overflow:hidden;white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.25)}
html[data-theme="paper"] .bn-title,html[data-theme="chalk"] .bn-title{font-size:32px}
.bn-title span{display:inline-block}
.bn-title.marq span{padding-right:48px;animation:marq var(--marq,10s) linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.bn-sub{font-size:13.5px;font-weight:600;opacity:.9;margin-top:4px}
.banner.s-fire{background:linear-gradient(120deg,#FF8A00,#FF2D55 60%,#B5179E);background-size:200% 200%;animation:bnIn .8s var(--spring) both,grad 8s ease infinite}
.banner.s-ice{background:linear-gradient(120deg,#00E0FF,#3A6BFF 60%,#6A00F4);background-size:200% 200%;animation:bnIn .8s var(--spring) both,grad 8s ease infinite}
.banner.s-acid{background:linear-gradient(120deg,#C6FF00,#00F5A0 55%,#00B4D8);background-size:200% 200%;color:#082015;animation:bnIn .8s var(--spring) both,grad 8s ease infinite}
.banner.s-sunset{background:linear-gradient(120deg,#FFD166,#FF6B9A 55%,#7B2FF7);background-size:200% 200%;animation:bnIn .8s var(--spring) both,grad 8s ease infinite}
.banner.s-night{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 40% 75%,#fff,transparent),linear-gradient(140deg,#0B1030,#1B2A6B 60%,#3B1D6E)}
.banner.s-theme{background:linear-gradient(120deg,var(--accent),var(--accent2));color:var(--acc-ink,#120E00);background-size:200% 200%;animation:bnIn .8s var(--spring) both,grad 8s ease infinite}
@keyframes grad{50%{background-position:100% 50%}}

/* ════════ главный блок ════════ */
.hero{
  position:relative;border-radius:var(--r);padding:18px 18px 16px;
  background:var(--card);border:1px solid var(--line);overflow:hidden;
}
.hero.pop{animation:heroPop .7s var(--spring)}
@keyframes heroPop{0%{transform:scale(.97)}60%{transform:scale(1.01)}100%{transform:none}}
html[data-theme="tablo"] .hero{background:linear-gradient(180deg,#17171A,#111113);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -28px rgba(0,0,0,.9)}
html[data-theme="tablo"] .hero::before{ /* «болты» табло */
  content:"";position:absolute;inset:8px;pointer-events:none;
  background:radial-gradient(circle,#2A2A2E 2px,transparent 2.6px) 0 0/100% 100% no-repeat,
             radial-gradient(circle at 0 0,#2A2A2E 2px,transparent 2.6px);
  background:
    radial-gradient(circle at 4px 4px,#2B2B30 2.2px,transparent 2.8px),
    radial-gradient(circle at calc(100% - 4px) 4px,#2B2B30 2.2px,transparent 2.8px),
    radial-gradient(circle at 4px calc(100% - 4px),#2B2B30 2.2px,transparent 2.8px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),#2B2B30 2.2px,transparent 2.8px);
}
html[data-theme="neon"] .hero{border-color:transparent;
  background:linear-gradient(#120A2B,#170B38) padding-box,
             linear-gradient(130deg,var(--accent),var(--accent2) 60%,var(--accent)) border-box;
  border:1.5px solid transparent;box-shadow:0 0 40px -10px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 0 30px -12px color-mix(in srgb,var(--accent2) 60%,transparent);
  background-size:100% 100%,300% 300%;animation:neonBorder 6s linear infinite}
@keyframes neonBorder{to{background-position:0 0,300% 0}}
html[data-theme="paper"] .hero{
  background:var(--card);border:0;transform:rotate(-.6deg);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 30px -18px rgba(26,34,70,.45);
}
html[data-theme="paper"] .hero::before{ /* скотч */
  content:"";position:absolute;top:-9px;left:50%;width:92px;height:24px;margin-left:-46px;transform:rotate(3deg);
  background:rgba(255,226,120,.6);box-shadow:0 1px 2px rgba(0,0,0,.08);
}
html[data-theme="chalk"] .hero{background:transparent;border:2px dashed var(--line2);border-radius:6px}

.hero-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.state{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:var(--fn)}
html[data-theme="paper"] .state,html[data-theme="chalk"] .state{font-size:20px;letter-spacing:.04em;text-transform:none;font-weight:700}
.state i{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.state.live{color:var(--accent)}
.state.live i{background:var(--accent);animation:live 1.6s ease-in-out infinite}
.state.rest{color:var(--ok)}
.state.rest i{background:var(--ok)}
@keyframes live{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.hero-time{font-family:var(--fn);font-weight:700;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
html[data-theme="paper"] .hero-time,html[data-theme="chalk"] .hero-time{font-size:20px}

.subj{
  margin:12px 0 16px;font-family:var(--fd);font-weight:700;font-size:var(--subj-size);line-height:1;
  text-transform:var(--subj-case);letter-spacing:var(--subj-track);text-wrap:balance;min-height:1em;
  overflow-wrap:anywhere;
}
html[data-theme="tablo"] .subj{color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
html[data-theme="neon"] .subj{background:linear-gradient(90deg,#fff,var(--accent) 45%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 45%,transparent))}
html[data-theme="paper"] .subj{color:var(--accent);transform:rotate(-1deg)}
html[data-theme="chalk"] .subj{text-shadow:0 0 1px rgba(255,255,255,.6),1px 1px 0 rgba(255,255,255,.08)}
.subj .sc{opacity:.55}

.hero-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:stretch}
.room-box,.count-box{border-radius:var(--r2);background:var(--tile);padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
html[data-theme="paper"] .room-box,html[data-theme="paper"] .count-box{background:transparent;border:2px solid var(--line2);border-radius:14px 10px 16px 9px}
html[data-theme="chalk"] .room-box,html[data-theme="chalk"] .count-box{background:transparent;border:2px solid var(--line)}
.lbl{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[data-theme="paper"] .lbl,html[data-theme="chalk"] .lbl{font-size:16px;letter-spacing:.02em;text-transform:none;font-family:var(--fd);font-weight:700}
.room{font-family:var(--fn);font-weight:800;font-size:34px;line-height:1;color:var(--ink);white-space:nowrap}
html[data-theme="paper"] .room,html[data-theme="chalk"] .room{font-size:44px}
.count{font-family:var(--fn);font-weight:800;font-size:34px;line-height:1;display:flex;font-variant-numeric:tabular-nums;color:var(--ink)}
html[data-theme="paper"] .count,html[data-theme="chalk"] .count{font-size:44px}

/* перекидные цифры */
.fc{position:relative;display:inline-block;width:.64em;height:1.05em;overflow:hidden;text-align:center}
.fc.sep{width:.36em}
.fc b{position:absolute;inset:0;display:block;font-weight:inherit}
.fc .out{animation:fcOut .38s var(--out) forwards}
.fc .nx{animation:fcIn .38s var(--out) both}
@keyframes fcOut{to{transform:translateY(-100%);opacity:0}}
@keyframes fcIn{from{transform:translateY(100%);opacity:0}}
html[data-theme="tablo"] .fc:not(.sep){
  margin-right:2px;border-radius:3px;background:linear-gradient(#1F1F23 0 49%,#0B0B0D 49% 51%,#19191C 51%);
  color:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);perspective:200px;overflow:visible;
}
html[data-theme="tablo"] .count .fc:not(.sep){width:.72em}
html[data-theme="tablo"] .fc .out{animation:flapOut .32s ease-in forwards;transform-origin:50% 50%}
html[data-theme="tablo"] .fc .nx{animation:flapIn .32s ease-out .1s both;transform-origin:50% 50%}
@keyframes flapOut{to{transform:rotateX(90deg);opacity:.3}}
@keyframes flapIn{from{transform:rotateX(-90deg);opacity:.3}}
html[data-theme="neon"] .count{color:var(--accent);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 65%,transparent))}
html[data-theme="paper"] .count{color:var(--accent2)}
html[data-theme="chalk"] .count{color:var(--accent)}

/* полоска дня */
.dayline{position:relative;height:34px;margin-top:16px}
.dl-track{position:absolute;inset:12px 0;border-radius:6px;background:var(--tile)}
html[data-theme="paper"] .dl-track,html[data-theme="chalk"] .dl-track{background:transparent;border-top:2px dashed var(--line2);inset:16px 0 auto;height:0}
.dl-seg{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--dim);transform-origin:left;animation:segIn .7s var(--out) both;animation-delay:var(--d,0s)}
html[data-theme="paper"] .dl-seg,html[data-theme="chalk"] .dl-seg{top:-6px;height:10px;bottom:auto}
.dl-seg.done{background:color-mix(in srgb,var(--accent) 45%,var(--dim))}
.dl-seg.now{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
.dl-seg .fill{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1s linear}
@keyframes segIn{from{transform:scaleX(0);opacity:0}}
.dl-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;left:0;transition:left 1s linear}
.dl-now i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 18%,transparent);animation:nowPulse 2s ease-in-out infinite}
@keyframes nowPulse{50%{box-shadow:0 0 0 9px transparent}}
.dl-ends{display:flex;justify-content:space-between;font-family:var(--fn);font-size:12px;font-weight:700;color:var(--muted);margin-top:2px}
html[data-theme="paper"] .dl-ends,html[data-theme="chalk"] .dl-ends{font-size:18px}

.hw-peek{
  width:100%;display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 12px;text-align:left;
  border-radius:var(--r2);background:color-mix(in srgb,var(--ok) 13%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);
  animation:inU .5s var(--out) both;
}
.hw-peek-tag{flex:none;font-family:var(--fn);font-size:11px;font-weight:800;padding:4px 7px;border-radius:5px;background:var(--ok);color:#06210F}
#hwPeekText{font-weight:600;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.next{
  display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 16px;border-radius:var(--r);
  border:1px dashed var(--line2);animation:inU .55s var(--out) .08s both;
}
.next-lbl{font-family:var(--fn);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
html[data-theme="paper"] .next-lbl,html[data-theme="chalk"] .next-lbl{font-size:18px;letter-spacing:0;text-transform:none;font-family:var(--fd)}
.next-subj{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.next-meta{margin-left:auto;font-family:var(--fn);font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
html[data-theme="paper"] .next-meta,html[data-theme="chalk"] .next-meta{font-size:19px}

/* ════════ списки уроков (таймлайн) ════════ */
.sec-head{display:flex;align-items:baseline;gap:12px;margin:28px 2px 14px}
.sec-head h2{font-family:var(--fd);font-weight:700;font-size:26px;line-height:1;text-transform:var(--subj-case);flex:none}
html[data-theme="paper"] .sec-head h2,html[data-theme="chalk"] .sec-head h2{font-size:36px}
.sec-head span{margin-left:auto;text-align:right;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.3}

.tl{position:relative;display:flex;flex-direction:column;gap:8px}
.tl::before{content:"";position:absolute;left:27px;top:18px;bottom:18px;width:2px;background:var(--line)}
html[data-theme="paper"] .tl::before,html[data-theme="chalk"] .tl::before{background:none;border-left:2px dashed var(--line2);width:0}
.li{
  position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:12px 12px 12px 0;border-radius:var(--r);
  transition:background .3s,opacity .4s,transform .3s var(--spring);
}
.li:active{transform:scale(.985)}
.tl.enter .li{animation:liIn .6s var(--out) both;animation-delay:var(--d,0s)}
.tl.enter-r .li{animation:liInR .5s var(--out) both;animation-delay:var(--d,0s)}
.tl.enter-l .li{animation:liInL .5s var(--out) both;animation-delay:var(--d,0s)}
@keyframes liIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes liInR{from{opacity:0;transform:translateX(40px)}}
@keyframes liInL{from{opacity:0;transform:translateX(-40px)}}
.li-n{
  position:relative;z-index:1;justify-self:center;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--fn);font-weight:800;font-size:15px;background:var(--card2);border:2px solid var(--line2);color:var(--muted);
  transition:all .4s var(--spring);
}
html[data-theme="paper"] .li-n,html[data-theme="chalk"] .li-n{font-size:22px;background:var(--bg)}
.li-main{min-width:0}
.li-name{display:block;font-weight:700;font-size:15.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="paper"] .li-name{font-weight:800}
html[data-theme="chalk"] .li-name{font-size:18px}
.li-sub{display:block;font-family:var(--fn);font-size:12px;font-weight:600;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="paper"] .li-sub,html[data-theme="chalk"] .li-sub{font-size:17px}
.li-hw{display:block;font-size:12.5px;font-weight:700;color:var(--ok);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-room{
  font-family:var(--fn);font-weight:800;font-size:14px;padding:7px 10px;border-radius:var(--r2);white-space:nowrap;
  background:var(--card2);border:1px solid var(--line);
}
html[data-theme="paper"] .li-room,html[data-theme="chalk"] .li-room{font-size:20px;padding:2px 10px;background:transparent}
html[data-theme="neon"] .li{background:rgba(14,8,34,.82);border:1px solid var(--line)}
html[data-theme="neon"] .tl::before{display:none}
.li.now{background:color-mix(in srgb,var(--accent) 11%,transparent)}
html[data-theme="neon"] .li.now{background:color-mix(in srgb,var(--accent) 14%,#0E0822);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.li.now .li-n{background:var(--accent);border-color:var(--accent);color:var(--acc-ink,#120E00);transform:scale(1.1);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 20%,transparent)}
.li.now .li-room{background:var(--accent);color:var(--acc-ink,#120E00);border-color:var(--accent)}
.li.now .li-name{color:var(--accent)}
.li.done{opacity:.45}
.li.done .li-n{border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok)}
.li.soon .li-n{border-color:var(--accent);color:var(--accent);animation:soon 1.8s ease-in-out infinite}
@keyframes soon{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 16%,transparent)}}
.li-badge{font-family:var(--fn);font-size:10.5px;font-weight:800;padding:3px 6px;border-radius:5px;background:var(--accent2);color:#fff;margin-left:6px;vertical-align:2px}
.empty{padding:36px 16px;text-align:center;color:var(--muted);border:1.5px dashed var(--line2);border-radius:var(--r);font-weight:600}
html[data-theme="paper"] .empty,html[data-theme="chalk"] .empty{font-family:var(--fd);font-size:24px}

/* ДЗ */
.hw-list .li{cursor:pointer}
.hw-list .li-room.has{background:color-mix(in srgb,var(--ok) 18%,transparent);border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}
.hw-list .li.filled .li-n{border-color:var(--ok);color:var(--ok)}
.hw-list .li .li-hw.empty-hw{color:var(--dim);font-weight:600}

/* ════════ вкладки дней / чипсы ════════ */
.days{position:relative;display:grid;grid-template-columns:repeat(5,1fr);padding:4px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);margin-bottom:16px}
.days button{position:relative;z-index:1;padding:11px 0;font-weight:800;font-size:14px;color:var(--muted);transition:color .3s}
html[data-theme="paper"] .days button,html[data-theme="chalk"] .days button{font-family:var(--fd);font-size:22px;padding:6px 0}
.days button[aria-selected="true"]{color:var(--acc-ink,#120E00)}
.days button.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.days-ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:calc(var(--r) - 3px);background:var(--accent);transition:transform .5s var(--spring),width .5s var(--spring)}
.swipe-hint{text-align:center;color:var(--dim);font-size:12px;margin-top:14px}

.chips-x{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut-r) * -1) 14px calc(var(--gut) * -1);padding:4px var(--gut-r) 8px var(--gut);scroll-snap-type:x proximity}
html[data-theme="paper"] .chips-x{margin-left:calc((var(--gut) + 26px) * -1);padding-left:calc(var(--gut) + 26px)}
.chips-x::-webkit-scrollbar{display:none}
.chips-x button{
  flex:none;min-width:70px;padding:9px 12px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  font-weight:800;font-size:14px;line-height:1.2;color:var(--muted);scroll-snap-align:start;transition:all .3s var(--spring);
}
.chips-x button small{display:block;font-size:11px;font-weight:700;opacity:.75;margin-top:2px;font-family:var(--fn)}
html[data-theme="paper"] .chips-x button,html[data-theme="chalk"] .chips-x button{font-family:var(--fd);font-size:20px}
.chips-x button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--acc-ink,#120E00);transform:translateY(-2px)}
.chips-x button .pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-left:5px;vertical-align:middle}

/* ════════ настройки ════════ */
.panel{
  position:relative;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
  padding:18px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;
}
html[data-theme="paper"] .panel{border:0;box-shadow:0 10px 26px -18px rgba(26,34,70,.4)}
html[data-theme="chalk"] .panel{background:transparent;border:2px dashed var(--line)}
.view.in-u .panel,.view.in-r .panel,.view.in-l .panel{animation:inU .55s var(--out) both}
.view .panel:nth-of-type(2){animation-delay:.04s}.view .panel:nth-of-type(3){animation-delay:.08s}
.view .panel:nth-of-type(4){animation-delay:.12s}.view .panel:nth-of-type(5){animation-delay:.16s}
.view .panel:nth-of-type(6){animation-delay:.2s}.view .panel:nth-of-type(7){animation-delay:.24s}
.panel h3{font-family:var(--fd);font-weight:700;font-size:20px;line-height:1.1;text-transform:var(--subj-case)}
html[data-theme="paper"] .panel h3,html[data-theme="chalk"] .panel h3{font-size:30px}
.muted{color:var(--muted);font-size:14px}
.hint{color:var(--muted);font-size:12.5px;margin-top:-2px}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:8px}
.steps li{counter-increment:s;position:relative;padding-left:30px;font-size:14px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--fn);font-size:12px;font-weight:800;background:var(--accent);color:var(--acc-ink,#120E00)}
.steps b{color:var(--accent)}

.seg{display:flex;gap:4px;padding:4px;border-radius:var(--r);background:var(--tile);border:1px solid var(--line)}
.seg button{flex:1;min-width:0;padding:10px 4px;border-radius:calc(var(--r) - 3px);font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap;transition:background .3s,color .3s,transform .25s var(--spring)}
html[data-theme="paper"] .seg button,html[data-theme="chalk"] .seg button{font-family:var(--fd);font-size:19px;padding:6px 2px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--acc-ink,#120E00);transform:scale(1.02)}

.tog{display:flex;align-items:center;gap:12px;padding:6px 0;font-weight:600;font-size:14.5px;cursor:pointer}
.tog input{position:absolute;opacity:0;pointer-events:none}
.tog i{margin-left:auto;flex:none;width:50px;height:30px;border-radius:16px;background:var(--dim);position:relative;transition:background .3s}
.tog i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .45s var(--spring)}
.tog input:checked + i{background:var(--accent)}
.tog input:checked + i::after{transform:translateX(20px)}

.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 18px;border-radius:var(--r);font-weight:800;font-size:14.5px;
  transition:transform .2s var(--spring),opacity .2s,background .3s;
}
html[data-theme="paper"] .btn,html[data-theme="chalk"] .btn{font-family:var(--fd);font-size:22px}
.btn:active{transform:scale(.95)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-acc{background:var(--accent);color:var(--acc-ink,#120E00);flex:1}
html[data-theme="neon"] .btn-acc{box-shadow:0 0 24px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-ghost{border:1.5px solid var(--line2);color:var(--ink)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

input:not([type]),input[type="text"],textarea{
  width:100%;min-width:0;border-radius:var(--r2);border:1.5px solid var(--line2);background:var(--tile);
  padding:12px 13px;font-size:16px;font-weight:600;-webkit-appearance:none;appearance:none;transition:border-color .25s,box-shadow .25s;
}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
textarea{resize:none;line-height:1.45}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:9px 13px;border-radius:999px;border:1.5px solid var(--line2);font-weight:700;font-size:13.5px;transition:all .3s var(--spring)}
html[data-theme="paper"] .chips button,html[data-theme="chalk"] .chips button{font-family:var(--fd);font-size:19px;padding:4px 13px}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--acc-ink,#120E00);transform:scale(1.04)}
.chips-sm button{padding:6px 10px;font-size:12.5px}
.chips-sm button:active{transform:scale(.92)}

.tpl-edit,.bn-edit{display:flex;flex-direction:column;gap:7px}
.tpl-edit .lbl,.bn-edit .lbl{margin-top:6px}

/* превью уведомления как на айфоне */
.notif-prev{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r);
  background:linear-gradient(135deg,#3A4A7A,#7A3A6A);position:relative;overflow:hidden}
.notif-prev::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 20% 0,rgba(255,255,255,.25),transparent)}
.np{position:relative;display:grid;grid-template-columns:1fr auto;gap:1px 8px;padding:10px 12px;border-radius:16px;
  background:rgba(245,245,250,.82);color:#111;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.4);animation:npIn .6s var(--spring) both}
.np + .np{animation-delay:.12s}
@keyframes npIn{from{opacity:0;transform:translateY(-12px) scale(.96)}}
.np.flash{animation:npFlash .45s var(--spring)}
@keyframes npFlash{40%{transform:scale(1.03)}}
.np-app{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#666;letter-spacing:.02em}
.np-app i{width:16px;height:16px;border-radius:4px;background:#0A0A0B url("icons/icon-192.png") center/cover}
.np-t{font-size:14px;font-weight:700;line-height:1.25}
.np-b{grid-column:1;font-size:14px;line-height:1.3}
.np time{position:absolute;right:12px;top:10px;font-size:11px;color:#777}

.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches button{width:40px;height:40px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line2);transition:transform .35s var(--spring),box-shadow .3s}
.swatches button[aria-pressed="true"]{transform:scale(1.15);box-shadow:0 0 0 2.5px var(--ink)}
.swatches button:active{transform:scale(.9)}
#bnStyles [data-s="fire"]{background:linear-gradient(135deg,#FF8A00,#FF2D55)}
#bnStyles [data-s="ice"]{background:linear-gradient(135deg,#00E0FF,#3A6BFF)}
#bnStyles [data-s="acid"]{background:linear-gradient(135deg,#C6FF00,#00B4D8)}
#bnStyles [data-s="sunset"]{background:linear-gradient(135deg,#FFD166,#7B2FF7)}
#bnStyles [data-s="night"]{background:linear-gradient(135deg,#0B1030,#3B1D6E)}
#bnStyles [data-s="theme"]{background:linear-gradient(135deg,var(--accent),var(--accent2))}

.themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.themes button{display:flex;flex-direction:column;gap:7px;padding:6px;border-radius:var(--r);border:2px solid var(--line);text-align:left;transition:transform .35s var(--spring),border-color .3s}
.themes button[aria-pressed="true"]{border-color:var(--accent);transform:translateY(-3px)}
.themes button:active{transform:scale(.96)}
.themes em{font-style:normal;font-weight:800;font-size:13.5px;padding:0 4px 3px}
html[data-theme="paper"] .themes em,html[data-theme="chalk"] .themes em{font-family:var(--fd);font-size:20px}
.tp{display:flex;flex-direction:column;justify-content:space-between;height:78px;padding:10px;border-radius:calc(var(--r) - 3px);overflow:hidden}
.tp b{font-size:17px;line-height:1}.tp i{font-style:normal;font-size:22px;font-weight:800;line-height:1}
.tp-tablo{background:#0E0E10;color:#FFB800;font-family:"Oswald",sans-serif;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}
.tp-tablo i{font-family:"JetBrains Mono",monospace}
.tp-neon{background:linear-gradient(#0C0620 55%,#2A0B4D);color:#20F0FF;font-family:"Exo 2",sans-serif;text-shadow:0 0 10px #20F0FF}
.tp-neon i{color:#FF3DD4;text-shadow:0 0 10px #FF3DD4}
.tp-paper{background:#FFFEFA;color:#2350E0;font-family:"Caveat",cursive;background-image:linear-gradient(rgba(35,80,224,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(35,80,224,.12) 1px,transparent 1px);background-size:12px 12px}
.tp-paper b{font-size:24px}.tp-paper i{color:#E5383B;font-size:28px}
.tp-chalk{background:radial-gradient(circle at 30% 30%,#28503D,#1C3A2C);color:#F4F2E6;font-family:"Amatic SC",cursive}
.tp-chalk b{font-size:26px}.tp-chalk i{color:#FFE36E;font-size:30px}

.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;line-height:1.6;white-space:pre-line}

/* ════════ таббар ════════ */
.tabbar{
  position:fixed;z-index:50;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);padding:6px;border-radius:calc(var(--r) + 8px);
  background:color-mix(in srgb,var(--bg2) 92%,transparent);border:1px solid var(--line2);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
}
@supports (backdrop-filter:blur(10px)){
  .tabbar{background:color-mix(in srgb,var(--bg2) 72%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
}
html[data-theme="paper"] .tabbar{background:rgba(255,254,250,.9)}
.tab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;font-size:10.5px;font-weight:800;color:var(--muted);transition:color .3s}
html[data-theme="paper"] .tab,html[data-theme="chalk"] .tab{font-family:var(--fd);font-size:16px;gap:0}
.tab svg{width:22px;height:22px;transition:transform .45s var(--spring)}
.tab.on{color:var(--acc-ink,#120E00)}
.tab.on svg{transform:translateY(-1px) scale(1.12)}
.tab:active svg{transform:scale(.85)}
.tab-blob{position:absolute;top:6px;bottom:6px;left:6px;border-radius:calc(var(--r) + 3px);background:var(--accent);transition:transform .55s var(--spring),width .55s var(--spring)}
html[data-theme="neon"] .tab-blob{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,transparent)}

/* ════════ лист снизу (редактор ДЗ) ════════ */
.sheet-wrap{position:fixed;inset:0;z-index:120}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s}
.sheet-wrap.open .sheet-bg{opacity:1}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;
  padding:10px var(--gut-r) calc(18px + env(safe-area-inset-bottom,0px)) var(--gut);
  border-radius:22px 22px 0 0;background:var(--bg2);border:1px solid var(--line2);border-bottom:0;
  display:flex;flex-direction:column;gap:14px;transform:translateY(105%);transition:transform .5s var(--spring);
}
html[data-theme="paper"] .sheet{background:#FFFEFA}
.sheet-wrap.open .sheet{transform:translateY(0)}
.sheet.drag{transition:none}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--line2);margin:0 auto 2px}
.sheet-head{display:flex;align-items:center;gap:12px}
.sheet-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--fn);font-weight:800;font-size:17px;background:var(--accent);color:var(--acc-ink,#120E00);flex:none}
.sheet-head h3{font-family:var(--fd);font-weight:700;font-size:22px;line-height:1.1}
html[data-theme="paper"] .sheet-head h3,html[data-theme="chalk"] .sheet-head h3{font-size:30px}
.sheet-head p{color:var(--muted);font-size:13px;font-weight:600}

/* ════════ тост, рябь ════════ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabh) + 22px);z-index:150;max-width:calc(100% - 32px);
  transform:translate(-50%,30px) scale(.9);opacity:0;visibility:hidden;pointer-events:none;
  padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;background:var(--ink);color:var(--bg);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transition:transform .45s var(--spring),opacity .3s,visibility .3s;
}
.toast.on{transform:translate(-50%,0) scale(1);opacity:1;visibility:visible}
.toast.bad{background:var(--accent2);color:#fff}
.rip{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s var(--out) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* смена темы — круг расходится от нажатой карточки */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:themeIn .75s cubic-bezier(.65,0,.35,1)}
@keyframes themeIn{from{clip-path:circle(0 at var(--vx,50%) var(--vy,50%))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,50%))}}

/* ════════ уровень анимаций ════════ */
html[data-motion="normal"] .deco .floor,html[data-motion="normal"] .deco .d1,
html[data-motion="normal"] .banner .bn-img{animation:none}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation:none!important;transition-duration:.01ms!important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:360px){
  .room,.count{font-size:28px}
  .hero-grid{gap:8px}
}