:root{
  --ink:#241a3a; --muted:#6d6290; --white:#fff;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --font-d:Rubik,Nunito,system-ui,sans-serif; --font-logo:Unbounded,Rubik,sans-serif;
  /* тема по умолчанию = средняя школа (5–7 класс), см. body[data-theme] ниже */
  --sky1:#8fd3ff; --sky2:#b9a8ff; --sky3:#ffd6f0;
  --accent:#7b5cff; --accent-d:#5a3dd6; --accent2:#ff3d8b; --accent2-d:#d81f6c;
  --hill1:#d9ccff; --hill2:#c8f0c0; --hill3:#9fe39a; --tree:#5fcf7a; --roof:#ff6fa8;
  --owl:#a98bff; --owl-dark:#8a68f0; --owl-belly:#f2ecff;
  --me:#7b5cff; --me-ink:#fff; --bot:#ffffff;
}
/* ===== интерфейс по классу: neutral — вход и знакомство; jr 3–4; mid 5–7 (:root); sr 8–10 ===== */
body[data-theme="neutral"]{ --sky1:#eceaf4; --sky2:#e3e8f2; --sky3:#f4f6fa; --accent:#5865f2; --accent-d:#3d48c9;
  --accent2:#2bb3a3; --accent2-d:#1d8a7e; --hill1:#dfe3ee; --hill2:#d6e6dc; --hill3:#c3dccb; --tree:#9cc9a8; --roof:#8e95c9;
  --me:#5865f2; }
body[data-theme="jr"]{ --sky1:#ffe27a; --sky2:#ffc4a8; --sky3:#b8f0ff; --accent:#ff7a00; --accent-d:#d35f00;
  --accent2:#ff3d8b; --accent2-d:#d81f6c; --hill1:#ffd9ec; --hill2:#c8f5a8; --hill3:#8fe07a; --tree:#4fcf5a; --roof:#ff5a5a;
  --owl:#ffae6b; --owl-dark:#f08f45; --owl-belly:#fff1e3; --me:#ff7a00; }
body[data-theme="sr"]{ --ink:#1c2333; --muted:#5b6478; --sky1:#dfe7f2; --sky2:#cfd9ea; --sky3:#eef2f8;
  --accent:#2f6fed; --accent-d:#1f52b8; --accent2:#0fa38a; --accent2-d:#0b7a67;
  --hill1:#cfd8e6; --hill2:#bcd3c9; --hill3:#9fc2b2; --tree:#6fa88f; --roof:#5e7cb8;
  --owl:#8e86c9; --owl-dark:#6f67ad; --owl-belly:#eceaf7; --me:#2f6fed; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:Nunito,system-ui,sans-serif;color:var(--ink);font-weight:700;overflow-x:hidden;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%);background-attachment:fixed;transition:background 1s}
button,input,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* ================= МИР ================= */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.layer{position:absolute;left:-3%;width:106%;transition:transform .6s var(--ease)}
.sky-l{inset:0;left:0;width:100%}
.sun{position:absolute;top:7vh;right:9vw;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff6b0,#ffd23f 60%,#ffb02e);
  box-shadow:0 0 60px #ffd23faa}
.sun i{position:absolute;inset:-34px;border-radius:50%;background:repeating-conic-gradient(#ffe47a55 0 10deg,transparent 10deg 30deg);animation:spin 40s linear infinite;z-index:-1}
@keyframes spin{to{transform:rotate(1turn)}}
.cloud{position:absolute;height:46px;border-radius:50px;background:#fff;filter:drop-shadow(0 8px 0 #ffffff55)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:60px;height:60px;top:-30px;left:20px}.cloud::after{width:44px;height:44px;top:-20px;left:66px}
.c1{width:140px;top:12vh;animation:drift 70s linear infinite -10s}.c2{width:180px;top:26vh;animation:drift 95s linear infinite -60s;opacity:.8}
.c3{width:110px;top:5vh;animation:drift 80s linear infinite -40s}.c4{width:150px;top:36vh;animation:drift 120s linear infinite -90s;opacity:.6}
@keyframes drift{from{transform:translateX(-260px)}to{transform:translateX(110vw)}}
.bird{position:absolute;width:30px}.bird svg{stroke:#241a3a99;stroke-width:2.2;fill:none;stroke-linecap:round}
.b1{top:18vh;animation:fly 26s linear infinite}.b2{top:22vh;animation:fly 26s linear infinite -3s;width:22px}
.bird svg{animation:flap .5s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(.4)}}
@keyframes fly{from{transform:translate(-60px,0)}50%{transform:translate(50vw,-40px)}to{transform:translate(105vw,10px)}}
.hills{bottom:0;height:34vh}
.hills.far{height:40vh}.hills.far path{fill:var(--hill1)}
.hills.mid{height:30vh}.hills.mid path{fill:var(--hill2)}
.hills.near{height:20vh}.hills.near path{fill:var(--hill3)}
.school{bottom:19vh;left:70%;width:150px}
.school svg{width:100%;filter:drop-shadow(0 8px 10px #0001)}
.trees{bottom:12vh;height:120px}
.tree{position:absolute;bottom:0;width:60px;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
.t1{left:8%;width:70px}.t2{left:22%;width:50px;animation-delay:-2s}.t3{left:58%;width:56px;animation-delay:-1s}.t4{left:88%;width:76px;animation-delay:-3s}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.path{position:absolute;bottom:3vh;left:0;width:100%;height:70px}
.walker{position:absolute;bottom:0;width:42px;height:56px;animation:walk linear forwards}
.walker svg{width:100%;height:100%;animation:bounce .36s ease-in-out infinite alternate}
.walker.left svg{transform:scaleX(-1)}
.walker.left{animation-name:walkL}
.wl1{animation:leg .36s ease-in-out infinite alternate;transform-origin:21.5px 44px}
.wl2{animation:leg .36s ease-in-out infinite alternate-reverse;transform-origin:27.5px 44px}
.w-arm{animation:armswing .36s ease-in-out infinite alternate;transform-origin:23px 28px}
@keyframes leg{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes armswing{from{transform:rotate(20deg)}to{transform:rotate(-20deg)}}
@keyframes bounce{to{translate:0 -3px}}
@keyframes walk{from{left:-60px}to{left:calc(100% + 60px)}}
@keyframes walkL{from{left:calc(100% + 60px)}to{left:-60px}}
.flowers{position:absolute;bottom:0;left:0;width:100%;height:12vh}
.flower{position:absolute;transform-origin:50% 100%;animation:sway 3s ease-in-out infinite alternate}

/* солнце с лицом, радуга, бабочки */
.sun-face{position:absolute;left:50%;top:54%;width:62%;transform:translate(-50%,-50%)}
.rainbow{bottom:17vh;left:56%;width:330px;height:165px;opacity:.38}
.butterfly{position:absolute;width:30px}
.butterfly svg{width:100%;overflow:visible}
.bw{transform-origin:15px 12px;animation:bflap .22s ease-in-out infinite alternate}
.bw.l{transform-origin:14px 12px}.bw.r{transform-origin:16px 12px}
@keyframes bflap{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
.bf1{top:34vh;left:12vw;animation:bfly1 26s ease-in-out infinite}
.bf2{top:28vh;left:70vw;width:22px;animation:bfly2 32s ease-in-out infinite}
@keyframes bfly1{0%,100%{transform:translate(0,0)}20%{transform:translate(16vw,-6vh)}45%{transform:translate(30vw,3vh)}70%{transform:translate(12vw,8vh)}}
@keyframes bfly2{0%,100%{transform:translate(0,0)}25%{transform:translate(-18vw,5vh)}55%{transform:translate(-32vw,-4vh)}80%{transform:translate(-10vw,-8vh)}}

/* футбол у школы */
.footy{position:absolute;bottom:4.5vh;left:6vw;width:240px;height:80px}
.fp{position:absolute;bottom:0;width:40px;height:54px}
.fp svg{width:100%;height:100%}
.fp .wl1,.fp .wl2{animation:none}
.fp .w-arm{animation:none}
.p1{left:0}.p1 svg{animation:kick1 3.6s ease-in-out infinite;transform-origin:50% 100%}
.p2{right:0}.p2 svg{transform:scaleX(-1);animation:kick2 3.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes kick1{0%,3%{transform:rotate(-10deg)}8%,92%{transform:rotate(0)}96%,100%{transform:rotate(-10deg)}}
@keyframes kick2{46%,49%{transform:scaleX(-1) rotate(-10deg)}54%,42%{transform:scaleX(-1) rotate(0)}0%,100%{transform:scaleX(-1)}}
.ball-x{position:absolute;bottom:2px;left:34px;width:20px;height:20px;animation:ballx 3.6s cubic-bezier(.45,0,.55,1) infinite}
.ball-y{width:100%;height:100%;animation:bally 1.8s cubic-bezier(.3,0,.7,1) infinite alternate}
.ball-y svg{width:100%;height:100%;animation:spin 1.2s linear infinite}
@keyframes ballx{0%,2%{transform:translateX(0)}48%,52%{transform:translateX(150px)}98%,100%{transform:translateX(0)}}
@keyframes bally{0%{transform:translateY(0)}18%{transform:translateY(-30px)}36%{transform:translateY(-2px)}60%{transform:translateY(-16px)}78%{transform:translateY(0)}100%{transform:translateY(-6px)}}

/* ================= ИНТРО ================= */
.intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 60%,#4b2a8a,#1a1036 70%);color:#fff;overflow:hidden;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.intro.out{opacity:0;transform:scale(1.15);pointer-events:none}
.intro-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:twinkle 2s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.15;transform:scale(.6)}to{opacity:1;transform:scale(1.3)}}
.intro-owl{width:170px;height:170px;animation:owlIn 1.6s var(--spring) .2s backwards}
.intro-owl svg{width:100%;height:100%;overflow:visible}
@keyframes owlIn{from{transform:translate(-60vw,-40vh) rotate(-30deg) scale(.4);opacity:0}}
.intro-word{font-family:var(--font-logo);font-weight:900;font-size:clamp(40px,9vw,110px);letter-spacing:.02em;margin:0;display:flex}
.intro-word span{display:inline-block;animation:letter .8s var(--spring) backwards;text-shadow:0 6px 0 #0004}
@keyframes letter{from{transform:translateY(80px) scale(.3) rotate(-20deg);opacity:0}}
.intro-tag{font-size:clamp(14px,2.2vw,20px);letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:tagIn 1s var(--ease) 2.1s forwards;color:#ffd6f0;text-align:center}
@keyframes tagIn{from{letter-spacing:.8em}to{opacity:1;letter-spacing:.3em}}
.intro-skip{position:absolute;bottom:28px;right:28px;background:#ffffff1a;border:2px solid #ffffff44;color:#fff;border-radius:99px;padding:8px 18px;cursor:pointer}

/* ================= ОБЩЕЕ ================= */
.screen{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:20px 20px 40px;min-height:100vh}
.card{background:#ffffffee;border-radius:32px;box-shadow:0 20px 60px #3a1d7a33,0 0 0 4px #ffffff88;backdrop-filter:blur(10px)}
.btn3d{position:relative;border:0;border-radius:20px;padding:14px 22px;font-weight:900;cursor:pointer;color:#fff;letter-spacing:.01em;
  background:var(--accent);box-shadow:0 6px 0 var(--accent-d);transition:transform .12s,box-shadow .12s;overflow:hidden}
.btn3d:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--accent-d)}
.btn3d:active{transform:translateY(5px);box-shadow:0 1px 0 var(--accent-d)}
.btn3d.big{font-size:20px;padding:16px}
.icon-btn{width:46px;height:46px;border-radius:16px;border:0;background:#fff;box-shadow:0 4px 0 #0000001f;font-size:20px;cursor:pointer;transition:transform .12s;position:relative;overflow:hidden;flex:none;display:grid;place-items:center;color:var(--ink)}
.icon-btn:hover{transform:translateY(-2px) rotate(-4deg)}.icon-btn:active{transform:translateY(3px);box-shadow:none}
.ic{width:24px;height:24px;flex:none;vertical-align:-5px}
.stat .ic{width:22px;height:22px;margin-right:4px}
.art-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 0 #0002)}
input,textarea{border:3px solid #ece4ff;background:#faf7ff;border-radius:18px;padding:14px 16px;outline:none;width:100%;font-weight:700;transition:border .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}
.ripple{position:absolute;border-radius:50%;background:#fff8;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* живая сова */
.owl-live{width:110px;height:110px;flex:none;position:relative}
.owl-live.big{width:170px;height:170px}
.owl-live svg{width:100%;height:100%;overflow:visible}
.o-body{transform-origin:70px 130px;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.03) translateY(-2px)}}
.o-wing.l{transform-origin:36px 74px}.o-wing.r{transform-origin:104px 74px}
.o-wing.l.bw{transform-origin:34px 96px}.o-wing.r.bw{transform-origin:106px 96px}  /* руки Клубники — от плеч костюма */
.o-lid{transform-origin:70px 46px;transform:scaleY(0);animation:blink 4.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}97%{transform:scaleY(1)}}
.o-pupils{transition:transform .25s var(--ease)}
.o-happy,.o-think{opacity:0;transition:opacity .2s}
.o-tassel{transform-origin:102px 18px;animation:tassel 2.4s ease-in-out infinite alternate}
@keyframes tassel{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
[data-state="thinking"] .o-think{opacity:1}
[data-state="thinking"] .o-think circle{animation:bubble 1s ease-in-out infinite alternate}
[data-state="thinking"] .o-pupils{transform:translate(4px,-5px)!important}
[data-state="thinking"] .o-body{animation:tilt 1.6s ease-in-out infinite alternate}
@keyframes tilt{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes bubble{to{transform:translateY(-3px)}}
[data-state="talking"] .o-beak{transform-origin:70px 78px;animation:talk .18s ease-in-out infinite alternate}
@keyframes talk{to{transform:scaleY(1.35) translateY(1px)}}
[data-state="talking"] .o-wing.l{animation:gest 1.2s ease-in-out infinite alternate}
@keyframes gest{to{transform:rotate(18deg)}}
[data-state="happy"] .o-eyes{opacity:0}[data-state="happy"] .o-happy{opacity:1}
[data-state="happy"] .o-body{animation:hop .5s var(--spring) 2}
[data-state="happy"] .o-wing.l{animation:flapL .15s ease-in-out infinite alternate}
[data-state="happy"] .o-wing.r{animation:flapR .15s ease-in-out infinite alternate}
@keyframes hop{50%{transform:translateY(-22px)}}
@keyframes flapL{to{transform:rotate(40deg)}}@keyframes flapR{to{transform:rotate(-40deg)}}

/* ================= ВХОД ================= */
#auth{display:flex;align-items:center;justify-content:center}
.auth-wrap{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;width:100%;max-width:920px}
.auth-hero{display:flex;flex-direction:column;align-items:center;gap:16px;animation:rise .9s var(--ease) both}
.auth-hero .owl-live.big{width:220px;height:220px}
.speech{position:relative;background:#fff;border-radius:28px;padding:20px 24px;font-size:22px;line-height:1.35;box-shadow:0 10px 0 #0000001a;max-width:380px;text-align:center}
.speech::before{content:"";position:absolute;top:-14px;left:50%;margin-left:-14px;border:14px solid transparent;border-top:0;border-bottom-color:#fff}
.speech b{color:var(--accent)}.speech u{text-decoration-color:var(--accent2);text-decoration-thickness:4px}
.auth-card{padding:26px;animation:rise .9s var(--ease) .15s both}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#f1ebff;border-radius:20px;padding:5px;margin-bottom:16px}
.tab{position:relative;z-index:1;border:0;background:none;padding:12px;border-radius:16px;font-weight:900;cursor:pointer;color:var(--muted);transition:color .3s}
.tab.active{color:var(--accent)}
.tab-pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:#fff;border-radius:16px;box-shadow:0 4px 12px #0001;transition:transform .45s var(--spring)}
.tabs.reg .tab-pill{transform:translateX(100%)}
#authForm,#onboardForm{display:flex;flex-direction:column;gap:12px}
.reg-only{display:none;flex-direction:column;gap:12px}
#authForm.register .reg-only{display:flex;animation:rise .5s var(--ease)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink-soft,#5b4f80);cursor:pointer}
.agree input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--accent,#ff3d8b);cursor:pointer}
.agree a{color:inherit;font-weight:700}
/* --- нейтральный вход/знакомство: мир приглушён, без мультяшной суеты --- */
body[data-theme="neutral"] :is(#walkers,.butterfly,.rainbow,.sun-face,.bird){display:none}
body[data-theme="neutral"] .sun{filter:saturate(.35) brightness(1.08)}
/* --- 3–4 класс: крупно, ярко, всё «нажимательное» больше --- */
body[data-band="jr"]{font-size:17px}
body[data-band="jr"] .msg{font-size:18px;line-height:1.5}
body[data-band="jr"] .btn3d{border-radius:24px;padding:16px 26px}
body[data-band="jr"] .hot button{font-size:16px;padding:10px 16px}
body[data-band="jr"] .card{border-radius:36px}
/* --- 8–10 класс: спокойный «взрослый» интерфейс: без мультяшного мира, плоские кнопки, строже формы --- */
body[data-band="sr"] :is(#walkers,.butterfly,.rainbow,.sun-face,.bird,.footy){display:none}
body[data-band="sr"] .sun{background:radial-gradient(circle at 45% 40%,#ffffff,#f1f4fa 70%);box-shadow:0 0 50px #ffffffaa}
body[data-band="sr"] .sun i{display:none}
body[data-band="sr"]{font-weight:600}
body[data-band="sr"] .card{border-radius:20px;box-shadow:0 10px 30px #1c233322,0 0 0 1px #1c233312}
body[data-band="sr"] .btn3d{border-radius:12px;box-shadow:0 3px 0 var(--accent-d)}
body[data-band="sr"] .btn3d:hover{box-shadow:0 4px 0 var(--accent-d)}
body[data-band="sr"] .greet-text{border-radius:16px;box-shadow:0 4px 14px #1c23331a}
body[data-band="sr"] .greet h2{font-weight:800}
body[data-band="sr"] .msg{border-radius:14px}
body[data-band="sr"] :is(.photo,.mic,.recap,.send){border-radius:12px}
.lbl{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.heroes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:6px}
.hero{border:0;background:none;padding:0;cursor:pointer;border-radius:50%;aspect-ratio:1;transition:transform .35s var(--spring),filter .3s;filter:grayscale(.6) opacity(.6)}
.hero svg{width:100%;height:100%;display:block}
.hero:hover{transform:scale(1.08);filter:none}
.hero.sel{filter:none;transform:scale(1.12) rotate(-6deg);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--accent)}
.err{color:#e5294d;min-height:1.2em;text-align:center}
.err.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes wiggle{30%{transform:scale(1.25) rotate(8deg)}}

/* ================= ГЛАВНАЯ ================= */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;animation:rise .7s var(--ease) both}
.me{display:flex;align-items:center;gap:12px;background:#ffffffcc;padding:6px 18px 6px 6px;border-radius:99px;box-shadow:0 4px 0 #0000001a;min-width:0;cursor:pointer}
.me small{display:block;color:var(--muted);font-size:12px;line-height:1}.me b{font-size:19px;font-family:var(--font-d)}
.hero-ava{width:48px;height:48px;border-radius:50%;flex:none}.hero-ava svg{width:100%;height:100%}
.stats{display:flex;gap:8px;align-items:center}
.stat{background:#fff;padding:10px 14px;border-radius:16px;box-shadow:0 4px 0 #0000001f;font-size:18px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.stat b{font-family:var(--font-d)}
.pulse{animation:wiggle .6s var(--spring)}
.greet{display:flex;align-items:center;gap:18px;margin:16px 0 24px;animation:rise .8s var(--ease) .1s both}
.greet-text{position:relative;background:#fff;border-radius:28px;padding:18px 26px;box-shadow:0 8px 0 #0000001a}
.greet-text::before{content:"";position:absolute;left:-14px;top:50%;margin-top:-14px;border:14px solid transparent;border-left:0;border-right-color:#fff}
.greet h2{font-family:var(--font-d);font-weight:900;font-size:clamp(24px,4vw,40px);margin:0;color:var(--ink);line-height:1.1}
.greet h2 em{font-style:normal;color:var(--accent)}
.greet p{margin:6px 0 0;font-size:17px;color:var(--muted)}
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;perspective:900px}
.subj{position:relative;border:0;border-radius:30px;padding:22px;padding-top:118px;cursor:pointer;text-align:left;color:#fff;min-height:200px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transform-style:preserve-3d;
  box-shadow:0 10px 0 var(--sd),0 20px 40px #0002;transition:transform .25s var(--ease),box-shadow .25s;animation:cardIn .8s var(--spring) backwards}
@keyframes cardIn{from{transform:translateY(60px) rotate(-6deg) scale(.8);opacity:0}}
.subj::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),#ffffff55,transparent 60%);opacity:0;transition:opacity .3s}
.subj:hover::before{opacity:1}
.subj::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);transform:skewX(-20deg)}
.subj:hover::after{animation:shine .9s ease}
@keyframes shine{to{left:130%}}
.subj .s-art{position:absolute;top:10px;right:10px;width:104px;height:104px;transition:transform .5s var(--spring)}
.subj:hover .s-art{transform:scale(1.12) rotate(-8deg) translateY(-4px)}
.subj b{font-family:var(--font-d);font-weight:900;font-size:26px;line-height:1.1;text-shadow:0 2px 0 #0002}
.subj small{opacity:.9;font-size:14px;margin-top:6px}
.subj .s-next{display:block;margin-top:8px;background:#ffffff2e;border-radius:12px;padding:6px 10px;font-size:13px;opacity:1;backdrop-filter:blur(4px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.s-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pill{font-style:normal;font-size:13px;font-weight:900;border-radius:99px;padding:4px 10px;background:#ffffffd9;color:var(--ink)}
.pill.good{background:#d8f8ec;color:#0b9677}.pill.learning{background:#fff3c4;color:#b07a00}.pill.hard{background:#ffdbe8;color:#d0436a}
.subj .go{position:absolute;left:22px;top:22px;background:#ffffff33;border-radius:99px;padding:6px 12px;font-size:13px;backdrop-filter:blur(4px)}
.subj.soon{cursor:default;min-height:150px}
.subj.soon .stripes{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#ffffff1f 0 14px,transparent 14px 28px)}
.subj.soon .s-art{opacity:.85;width:84px;height:84px}
.subj.soon .go{background:#0002}
.h-sec{font-family:var(--font-d);font-weight:900;color:var(--ink);text-shadow:0 2px 0 #ffffff55;margin:34px 4px 12px;font-size:22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.h-note{font-size:13px;font-weight:800;color:#ffffffd9;text-shadow:none;background:#00000022;border-radius:99px;padding:4px 12px}
.recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.recent.col{grid-template-columns:1fr;padding-bottom:0}
#recent{padding-bottom:28vh}

/* продолжить с места */
.cont{display:flex;align-items:center;gap:16px;width:100%;border:0;cursor:pointer;text-align:left;margin:4px 0 6px;
  background:#ffffffee;border-radius:26px;padding:12px;box-shadow:0 10px 0 #3a1d7a26,0 0 0 4px #ffffff88;
  transition:transform .2s var(--spring);animation:rise .7s var(--ease) both}
.cont:hover{transform:translateY(-3px)}
.cont-art{width:84px;height:84px;flex:none;border-radius:20px;display:grid;place-items:center;padding:8px;box-shadow:inset 0 -6px 0 #0002}
.cont-art .art-svg{filter:none}
.cont-txt{flex:1;min-width:0}
.cont-txt small{display:block;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:900}
.cont-txt b{display:block;font-family:var(--font-d);font-size:20px;line-height:1.2;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cont-txt em{display:block;font-style:normal;margin-top:5px;color:var(--accent-d);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cont-play{width:58px;height:58px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 5px 0 var(--accent-d)}
.cont-play .ic{width:28px;height:28px}
.cont:hover .cont-play{animation:wiggle .6s var(--spring)}

/* расписание: чипсы предметов по дням */
.sched{padding:18px;animation:rise .7s var(--ease) both}
.sched-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sched-head .ic{width:30px;height:30px;color:var(--accent)}
.sched-head b{font-family:var(--font-d);font-size:18px;display:block}
.sched-head small{color:var(--muted);display:block;font-size:13px}
.sched-saved{margin-left:auto;font-size:13px;font-weight:900;color:#0b9677;opacity:0;transition:opacity .4s}
.sched-saved.on{opacity:1}
.sched-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.sday{background:#faf7ff;border:2.5px solid #ece4ff;border-radius:16px;padding:8px;min-height:92px}
.sday>span{display:block;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 7px 4px;white-space:nowrap}
.sday.today{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,#fff)}
.sday.today>span{color:var(--accent-d)}
.sday-list{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.schip{display:flex;align-items:center;gap:4px;font-style:normal;font-size:13px;font-weight:800;color:#fff;
  background:var(--c,#8b5cf6);border-radius:10px;padding:5px 7px 5px 9px;box-shadow:0 2.5px 0 #00000026;min-width:0}
.schip:first-letter{text-transform:uppercase}
.schip button{margin-left:auto;border:0;background:#ffffff38;color:#fff;border-radius:7px;width:17px;height:17px;line-height:1;
  font-size:11px;font-weight:900;cursor:pointer;padding:0;flex:none;opacity:.8}
.schip button:hover{opacity:1}
.addchip{border:2px dashed #d9cdf4;background:none;border-radius:10px;padding:4px;cursor:pointer;color:#b3a4d9;
  display:grid;place-items:center;transition:color .2s,border-color .2s}
.addchip .ic{width:16px;height:16px}
.addchip:hover{color:var(--accent);border-color:var(--accent)}
.schip-in{padding:5px 8px;border-radius:10px;font-size:13px;border-width:2px;width:100%}

/* экран предмета */
.subj-body{display:flex;flex-direction:column;gap:14px;margin-top:14px;padding-bottom:26vh}
/* мелкие рисунки предмета на плитке и в шапке (циркули, колбы…): тонкие белые линии, медленно покачиваются */
.doodles{position:absolute;inset:0;pointer-events:none;z-index:0}
.doodles svg{position:absolute;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.28;
  animation:doodleBob 6s ease-in-out var(--dd) infinite alternate}
.subj>*:not(.doodles),.subj-hero>*:not(.doodles){position:relative;z-index:1}
.subj>.s-art,.subj>.go{position:absolute}
@keyframes doodleBob{to{translate:0 -6px;opacity:.38}}
body[data-band="sr"] .doodles svg{animation:none;opacity:.2}
@media (prefers-reduced-motion:reduce){.doodles svg{animation:none}}
.subj-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;border-radius:30px;padding:20px 24px;color:#fff;
  box-shadow:0 10px 0 var(--sd),0 20px 40px #0002;animation:rise .6s var(--ease) both}
.subj-hero .s-art.big{width:110px;height:110px;flex:none}
.subj-hero-t b{font-family:var(--font-d);font-size:30px;display:block;text-shadow:0 2px 0 #0002}
.subj-hero-t small{opacity:.9}
.subj-hero-t .lvl{margin:8px 0 0;background:#ffffff2e;border-radius:12px;padding:7px 12px;font-size:14px;backdrop-filter:blur(4px)}
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-row .cta:only-child{grid-column:1/-1}
.cta{display:flex;align-items:center;gap:12px;border:0;cursor:pointer;text-align:left;background:#ffffffee;border-radius:22px;padding:14px 18px;
  box-shadow:0 6px 0 #0000001f;transition:transform .15s;animation:rise .6s var(--ease) .08s both;min-width:0}
.cta:hover{transform:translateY(-2px)}.cta:active{transform:translateY(3px);box-shadow:0 2px 0 #0000001f}
.cta .ic{width:34px;height:34px;flex:none;color:var(--accent)}
.cta.main{background:var(--accent);color:#fff;box-shadow:0 6px 0 var(--accent-d)}
.cta.main .ic{color:#fff}
.cta span{min-width:0}
.cta small{display:block;font-size:12px;opacity:.75;text-transform:uppercase;letter-spacing:.06em;font-weight:900}
.cta b{font-family:var(--font-d);font-size:17px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnext.big{background:#ffffffee;box-shadow:0 6px 0 #0000001f;animation:rise .6s var(--ease) .12s both}

/* онбординг первого входа */
.onboard{display:flex;gap:18px;align-items:center;background:#ffffffee;border-radius:26px;padding:18px 22px;margin:4px 0 6px;
  box-shadow:0 10px 0 #3a1d7a26,0 0 0 4px #ffffff88;animation:rise .7s var(--ease) both}
.onboard .owl-live{width:92px;height:92px}
.ob-txt b{font-family:var(--font-d);font-size:20px}
.ob-steps{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.ob-steps span{display:flex;gap:10px;align-items:center;font-size:15px}
.ob-steps i{font-style:normal;width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:14px;box-shadow:0 3px 0 var(--accent-d)}

/* карта тем: дорожка */
.roadmap{display:block;width:100%;height:auto;font-family:Nunito,system-ui,sans-serif}
.rm-label{font-size:14.5px;font-weight:800;fill:var(--ink)}
.rm-hint{font-size:11.5px;font-weight:900;fill:var(--muted);text-transform:uppercase;letter-spacing:.06em;opacity:0;transition:opacity .2s}
.rm-node:hover .rm-hint{opacity:1}
.rm-node{transition:transform .2s}
.rm-node:hover circle{filter:brightness(1.07)}
.rm-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;padding-left:4px}
.rm-legend i{font-style:normal;font-size:13px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:6px}
.rm-legend i::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c)}
.plog-sub{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:8px}

/* домашки */
.hw{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:#faf7ff;margin:6px 0}
.hw-tick{width:30px;height:30px;flex:none;border-radius:50%;border:3px solid #d9cdf4;background:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s,border-color .2s}
.hw-tick .ic{width:17px;height:17px;color:#fff}
.hw.done .hw-tick{background:#13c39a;border-color:#13c39a}
.hw-t{flex:1;min-width:0}
.hw-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw.done .hw-t b{text-decoration:line-through;color:var(--muted)}
.hw-t small{color:var(--accent-d);font-weight:800}
.hw-del{border:0;background:none;color:#c9bfe8;font-weight:900;cursor:pointer;font-size:15px;padding:4px}
.hw-del:hover{color:var(--accent-d)}
.hw-add{display:flex;gap:8px;margin-top:10px}
.hw-add input{padding:11px 13px;border-radius:14px;font-size:15px;border-width:2.5px}
.hw-add .hw-due{width:120px;flex:none}
.hw-add .btn3d{flex:none;padding:10px 16px;font-size:15px}

/* профиль */
.prof-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.prof-ava{width:88px;height:88px;flex:none;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 8px var(--accent)}
.prof-ava svg{width:100%;height:100%}
.prof-who{flex:1;min-width:140px}
.prof-who b{font-family:var(--font-d);font-size:26px;display:block}
.prof-who small{color:var(--muted)}
.prof-ints{margin:8px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.prof-ints i{font-style:normal;font-size:13px;font-weight:800;background:color-mix(in srgb,var(--accent2) 14%,#fff);color:var(--accent2-d);border-radius:99px;padding:4px 11px}
.prof-stats{display:flex;gap:10px}
.pstat{background:#faf7ff;border-radius:18px;padding:12px 16px;text-align:center;min-width:86px}
.pstat .ic{width:24px;height:24px}
.pstat b{display:block;font-family:var(--font-d);font-size:22px;line-height:1.1}
.pstat small{color:var(--muted);font-size:12px}
.pstat.good .ic{color:#0b9677}
.psub-go{margin-left:auto;padding:10px 18px;font-size:15px;flex:none}

/* памятка в чате */
.memo-btn{margin-left:auto}
.memo{position:fixed;left:0;top:0;bottom:0;width:min(360px,88vw);z-index:60;background:#fffffff7;backdrop-filter:blur(10px);
  box-shadow:10px 0 50px #3a1d7a33;border-radius:0 30px 30px 0;display:flex;flex-direction:column;animation:memoIn .35s var(--ease)}
@keyframes memoIn{from{transform:translateX(-100%)}}
.memo-head{display:flex;align-items:center;gap:10px;padding:18px 18px 12px}
.memo-head .ic{width:26px;height:26px;color:var(--accent)}
.memo-head b{font-family:var(--font-d);font-size:20px;flex:1}
.memo-body{flex:1;overflow-y:auto;padding:4px 18px 20px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.memo-body::-webkit-scrollbar{display:none}
.memo-item{background:#faf7ff;border-left:5px solid #d9cdf4;border-radius:14px;padding:11px 14px}
.memo-item.good{border-left-color:#13c39a}.memo-item.learning{border-left-color:#ffb02e}.memo-item.hard{border-left-color:#ff3d8b}
.memo-item b{font-family:var(--font-d);font-size:15.5px;display:block}
.memo-item p{margin:5px 0 0;font-size:14.5px;line-height:1.45;color:#473a6b}

/* кнопка-выжимка в композере */
.recap{width:56px;height:56px;flex:none;border:0;border-radius:18px;cursor:pointer;background:#f1ebff;color:var(--accent2-d);
  box-shadow:0 5px 0 #d9cdf4;display:grid;place-items:center;transition:transform .15s}
.recap svg{width:26px;height:26px}
.recap:hover{transform:translateY(-2px) rotate(-14deg)}.recap:active{transform:translateY(4px);box-shadow:none}
.rc{display:flex;gap:12px;align-items:center;background:#ffffffe6;border-radius:20px;padding:14px 16px;cursor:pointer;border:0;text-align:left;
  box-shadow:0 5px 0 #0000001a;transition:transform .2s var(--spring);animation:rise .6s var(--ease) backwards;min-width:0}
.rc:hover{transform:translateY(-3px) rotate(-.5deg)}
.rc .rc-em{width:38px;height:38px;flex:none}.rc .rc-em .art-svg{filter:none}
.rc b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc span{color:var(--muted);font-size:13px}
.empty{background:#ffffffb3;border-radius:20px;padding:18px;color:var(--muted)}

/* ================= ЧАТ ================= */
#chat{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:16px}
.chat-head{display:flex;align-items:center;gap:12px;background:#ffffffe6;border-radius:24px;padding:10px;box-shadow:0 6px 0 #0000001a;view-transition-name:chat-head}
.chat-subj{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.chat-em{font-size:30px;width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:16px;background:var(--subj,#eee);box-shadow:0 4px 0 var(--subj-d,#0002);padding:6px}
.chat-em .art-svg{filter:none}
.xp-star{display:inline-flex;align-items:center;gap:3px}
.chat-subj>div{min-width:0}
.chat-subj b{font-family:var(--font-d);font-size:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-subj small{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp{display:flex;align-items:center;gap:10px;font-size:16px;white-space:nowrap}
.xp-bar{width:120px;height:16px;border-radius:99px;background:#efe9ff;overflow:hidden;box-shadow:inset 0 2px 0 #0000000f}
.xp-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffd23f,#ff9f1c);transition:width .8s var(--spring);box-shadow:inset 0 -4px 0 #0000001a}
.chat-body{flex:1;display:flex;gap:16px;min-height:0;margin-top:14px}
.tutor{width:200px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:30px;gap:8px}
.tutor .owl-live.big{width:190px;height:190px}
.tutor-status{background:#fff;padding:8px 14px;border-radius:99px;font-size:14px;color:var(--muted);box-shadow:0 4px 0 #0000001a;white-space:nowrap}
.msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:16px 6px 20px;scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 10px),transparent)}
.msgs::-webkit-scrollbar{display:none}
.row{display:flex;gap:10px;align-items:flex-end;animation:msgIn .5s var(--spring) backwards}
.row.mine{flex-direction:row-reverse;transform-origin:100% 100%}.row.bot{transform-origin:0 100%}
@keyframes msgIn{from{transform:translateY(24px) scale(.85);opacity:0}}
.face{width:42px;height:42px;flex:none;border-radius:50%}.face svg{width:100%;height:100%;overflow:visible}
.row.bot .face{display:none}
.msg{max-width:min(640px,86%);padding:14px 18px;border-radius:26px;line-height:1.5;font-size:18px;font-weight:700}
.row.bot .msg{background:var(--bot);border-bottom-left-radius:8px;box-shadow:0 6px 0 #0000001a}
.row.mine .msg{background:var(--me);color:var(--me-ink);border-bottom-right-radius:8px;box-shadow:0 6px 0 var(--accent-d)}
.msg p{margin:0 0 8px}.msg p:last-child{margin:0}
.msg ul{margin:6px 0;padding-left:22px}.msg li{margin:3px 0}
.row.bot .msg b{color:var(--accent-d);background:color-mix(in srgb,var(--accent) 13%,transparent);padding:0 5px;border-radius:6px}
.msg i{color:var(--accent2-d)}.row.mine .msg i{color:#fff}
.msg code{background:#f1ebff;border-radius:8px;padding:2px 7px}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:2px 0 4px}
.chip{position:relative;overflow:hidden;border:3px solid color-mix(in srgb,var(--accent) 30%,#fff);background:#fff;color:var(--accent-d);border-radius:18px;
  padding:11px 18px;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 30%,#fff);
  animation:chipIn .5s var(--spring) backwards;transition:transform .12s,box-shadow .12s,background .2s,color .2s}
@keyframes chipIn{from{transform:translateY(20px) scale(.6);opacity:0}}
.chip:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 5px 0 var(--accent-d);transform:translateY(-2px)}
.chip:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-d)}
.typing{display:inline-flex;gap:6px;padding:6px 2px}
.typing i{width:10px;height:10px;border-radius:50%;background:var(--accent2);animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-8px);opacity:.5}}
.composer{display:flex;gap:10px;background:#fff;padding:8px;border-radius:26px;box-shadow:0 6px 0 #0000001a,0 20px 40px #3a1d7a22;margin-top:8px}
.composer textarea{resize:none;border:0;background:transparent;max-height:140px;font-size:17px}
.composer textarea:focus{box-shadow:none}
.send{width:56px;height:56px;flex:none;border:0;border-radius:18px;cursor:pointer;background:var(--accent);box-shadow:0 5px 0 var(--accent-d);
  display:grid;place-items:center;transition:transform .15s;position:relative;overflow:hidden}
.send svg{width:26px;height:26px;fill:#fff}
.send:hover{transform:translateY(-2px) rotate(-8deg)}.send:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-d)}
.send:disabled{opacity:.5}
.photo{width:56px;height:56px;flex:none;border:0;border-radius:18px;cursor:pointer;background:var(--accent2);box-shadow:0 5px 0 var(--accent2-d);
  display:grid;place-items:center;transition:transform .15s}
.photo svg{width:28px;height:28px;fill:#fff}
.photo:hover{transform:translateY(-2px) rotate(8deg)}.photo:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent2-d)}
/* голос: микрофон рядом с камерой, при записи пульсирует красным */
.mic{width:56px;height:56px;flex:none;border:0;border-radius:18px;cursor:pointer;background:#13c39a;box-shadow:0 5px 0 #0b9677;
  display:grid;place-items:center;transition:transform .15s}
.mic svg{width:28px;height:28px;fill:#fff}
.mic:hover{transform:translateY(-2px)}.mic:active{transform:translateY(4px);box-shadow:0 1px 0 #0b9677}
.mic.rec{background:#ff3d5a;box-shadow:0 5px 0 #c4123f;animation:micPulse 1s ease-in-out infinite}
.mic.busy{opacity:.6;cursor:wait;animation:micPulse 1.6s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 5px 0 #c4123f,0 0 0 0 #ff3d5a88}50%{box-shadow:0 5px 0 #c4123f,0 0 0 12px #ff3d5a00}}
#voiceBtn{opacity:.55}#voiceBtn.on{opacity:1;background:var(--accent2);color:#fff}
#voiceBtn.on .ic{fill:#fff}
.preview{position:relative;align-self:flex-start;margin:8px 0 0 8px;animation:pop .3s}
.preview img{display:block;max-height:110px;max-width:180px;border-radius:18px;box-shadow:0 5px 0 #0000001a;border:4px solid #fff}
.preview button{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-weight:900;cursor:pointer}
.msg .shot{display:block;max-width:min(320px,100%);border-radius:18px;margin:2px 0 8px;cursor:zoom-in}
.msg .shot:last-child{margin-bottom:0}

/* выбор класса при регистрации */
.grades{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.gchip{border:3px solid #ece4ff;background:#faf7ff;border-radius:14px;padding:10px 0;font-weight:900;font-size:17px;cursor:pointer;
  transition:transform .2s var(--spring),background .2s,border-color .2s;position:relative;overflow:hidden}
.gchip:hover{transform:translateY(-2px);border-color:var(--accent)}
.gchip.sel{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.1) rotate(-4deg);box-shadow:0 4px 0 var(--accent-d)}

/* схемы, которые рисует Софа */
.schema{margin:10px 0 4px;background:#faf7ff;border:3px solid #ece4ff;border-radius:18px;padding:10px;overflow:hidden}
.schema svg{display:block;width:100%;height:auto;max-height:420px;font-family:Nunito,system-ui,sans-serif;font-weight:800}
.drawing{display:inline-flex;gap:2px;color:var(--muted)}
.drawing i{font-style:normal;animation:dot 1s infinite}.drawing i:nth-child(2){animation-delay:.15s}.drawing i:nth-child(3){animation-delay:.3s}
.codeblk{background:#f1ebff;border-radius:14px;padding:10px 14px;overflow-x:auto;font-size:15px;margin:8px 0}
.codeblk code{background:none;padding:0}

/* таблицы от Софы */
.tbl{border-collapse:separate;border-spacing:0;margin:10px 0 4px;width:100%;font-size:15.5px;border-radius:16px;overflow:hidden;
  border:3px solid #ece4ff;background:#faf7ff}
.tbl th{background:var(--accent);color:#fff;font-family:var(--font-d);font-size:14px;padding:9px 12px;text-align:left}
.tbl td{padding:9px 12px;border-top:2px solid #ece4ff}
.tbl tr:nth-child(even) td{background:#fff}
.tbl td b{color:var(--accent-d);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:0 5px;border-radius:6px}

/* ================= МОЙ ПУТЬ ================= */
.path-body{display:flex;flex-direction:column;gap:16px;padding-bottom:26vh;margin-top:14px}
.pcard{padding:20px;animation:rise .6s var(--ease) backwards}
.pcard:nth-child(2){animation-delay:.08s}.pcard:nth-child(3){animation-delay:.16s}.pcard:nth-child(4){animation-delay:.24s}
.path-title{margin:0}
.phero{display:flex;align-items:center;gap:16px}
.phero .owl-live{width:84px;height:84px}
.phero b{font-family:var(--font-d);font-size:20px}
.phero p{margin:6px 0 0;color:var(--muted)}
.psub{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.psub b{font-family:var(--font-d);font-size:20px;display:block}
.psub small{color:var(--muted)}
.topic{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;margin:6px 0;background:#faf7ff;animation:rise .5s var(--ease) backwards}
.topic.good{background:color-mix(in srgb,#13c39a 12%,#fff)}
.topic.learning{background:color-mix(in srgb,#ffd23f 18%,#fff)}
.topic.hard{background:color-mix(in srgb,#ff3d8b 10%,#fff)}
.topic .tic{font-size:24px}
.topic>div{flex:1;min-width:0}
.topic b{display:block}
.topic small{color:var(--muted);display:block}
.tlabel{font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.topic.good .tlabel{color:#0b9677}.topic.learning .tlabel{color:#c98a00}.topic.hard .tlabel{color:var(--accent-d)}
.pnext{margin-top:12px;padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent2) 12%,#fff);font-weight:800}
.plog-h{font-family:var(--font-d);font-size:18px;display:block;margin-bottom:10px}
.plog{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:2px dashed #ece4ff}
.plog span{color:var(--muted);font-size:14px;white-space:nowrap}
.plog em{font-style:normal}
.empty-s{color:var(--muted);padding:8px 0}

/* человечек-помощник, конфетти, звёзды */
.helper{position:fixed;z-index:80;width:40px;height:60px;pointer-events:none}
.helper svg{width:100%;height:100%}
.confetti{position:fixed;z-index:90;pointer-events:none;border-radius:3px;animation:fall 1.5s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.star-fly{position:fixed;z-index:95;pointer-events:none;transition:left .9s cubic-bezier(.6,-.3,.4,1),top .9s cubic-bezier(.6,-.3,.4,1),transform .9s}
.star-fly .ic{width:30px;height:30px}
.plog-art{width:24px;height:24px;flex:none;align-self:center}.plog-art .art-svg{filter:none}

/* переходы между экранами (как в мессенджере) */
::view-transition-old(root){animation:vtOut .45s var(--ease) both}
::view-transition-new(root){animation:vtIn .7s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:scale(.97);filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;transform:scale(1.03);filter:blur(6px)}}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--ease)}

@media (max-width:860px){
  .auth-wrap{grid-template-columns:1fr;gap:18px}
  .auth-hero .owl-live.big{width:140px;height:140px}
  .speech{font-size:18px}
  .tutor{display:none}
  .row.bot .face{display:block}
  .xp-bar{width:70px}
}
@media (max-width:600px){
  .screen{padding:14px 16px 30px}
  #auth{align-items:flex-start;padding-top:34px}
  .sun{width:70px;height:70px;right:20px}
  .school{width:100px;left:62%}
  .subjects{grid-template-columns:1fr 1fr;gap:12px}
  .subj{min-height:170px;padding:16px;border-radius:24px}.subj .s-art{width:62px;height:62px;top:10px;right:10px}.subj b{font-size:17px}.subj small{font-size:12px}.subj .go{display:none}
  .subj.soon{min-height:130px}.subj.soon .s-art{width:52px;height:52px}
  .s-pills{gap:4px}.pill{font-size:11px;padding:3px 8px}
  .cont{gap:10px}.cont-art{width:60px;height:60px;border-radius:16px}.cont-txt b{font-size:16px;white-space:normal}.cont-play{width:46px;height:46px}
  .sched-grid{grid-template-columns:1fr 1fr}
  .sched-grid .sday:last-child{grid-column:1/-1}
  .cta-row{grid-template-columns:1fr}
  .subj-hero .s-art.big{width:76px;height:76px}.subj-hero-t b{font-size:22px}
  .tbl{font-size:13.5px}.tbl th,.tbl td{padding:7px 8px}
  .sched-grid{grid-template-columns:1fr 1fr}
  .sday{min-height:72px}
  .onboard{flex-direction:column;text-align:left}
  .prof-stats{width:100%;justify-content:space-between}
  .pstat{flex:1;min-width:0;padding:10px 8px}
  .psub-go{padding:8px 12px;font-size:13px}
  .hw-add{flex-wrap:wrap}.hw-add .hw-due{width:100px}
  .rm-label{font-size:17px}
  .recap{width:48px;height:48px}.photo{width:48px;height:48px}.mic{width:48px;height:48px}.send{width:48px;height:48px}
  .rainbow{width:220px;height:110px}
  .footy{left:2vw;transform:scale(.8);transform-origin:0 100%}
  .greet .owl-live{width:80px;height:80px}
  .msg{font-size:16px;padding:12px 15px}
  .chat-subj small{display:none}.chat-subj b{font-size:16px}.chat-em{width:42px;height:42px;font-size:24px}
  .topbar{flex-wrap:wrap}
  .me{flex:1;min-width:0}
  .stats{gap:5px;margin-left:auto}
  .stat{padding:7px 10px;font-size:15px}.stat .ic{width:18px;height:18px}
  .icon-btn{width:38px;height:38px}.icon-btn .ic{width:20px;height:20px}
  .me b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .subj{padding-top:76px}
  .xp-bar{display:none}
}

@keyframes pop{from{transform:scale(.6);opacity:0}}

/* ================= v6: деревня, цветы на земле ================= */
.houses{bottom:21vh;height:80px}
.house{position:absolute;bottom:0;width:62px;filter:drop-shadow(0 6px 6px #0001)}
.h1{left:4%;width:58px}.h2{left:17%;width:66px;bottom:-6px}.h3{left:31%;width:70px;bottom:4px}
.h4{left:45%;width:54px;bottom:-4px}.h5{left:84%;width:64px;bottom:2px}.h6{left:94%;width:52px;bottom:-8px}
.flowers.back{bottom:3vh;height:40px}
.flowers{z-index:0}.path{z-index:1}#flowers{z-index:2;height:24px;bottom:0}
.flower{bottom:0}
.flower .tuft{position:absolute;left:50%;bottom:-3px;width:160%;height:7px;transform:translateX(-50%);border-radius:50%;
  background:color-mix(in srgb,var(--hill3) 70%,#2c8a3a);opacity:.85}
@media (max-width:600px){.houses{bottom:20vh}.house{width:40px!important}.h3,.h4{display:none}}

/* ================= значки с подписью и всплывашка-объяснение ================= */
button.stat{border:0;cursor:pointer;font:inherit;color:inherit;flex-direction:row;transition:transform .15s}
button.stat:hover{transform:translateY(-2px)}
.stat small{font-size:12px;color:var(--muted);font-weight:800;margin-left:4px}
.pop{position:fixed;z-index:900;background:#fff;border-radius:22px;padding:16px 18px;box-shadow:0 20px 50px #3a1d7a44,0 0 0 3px #fff;
  font-size:15px;line-height:1.45;opacity:0;transform:translateY(6px) scale(.97);transition:opacity .2s,transform .25s var(--spring)}
.pop.in{opacity:1;transform:none}
.pop-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pop-h b{font-family:var(--font-d);font-size:17px;line-height:1.2}
.pop-h .ic{width:26px;height:26px;flex:none;color:var(--accent)}
.pop p{margin:4px 0 0;color:#473a6b}
.pop-st{font-weight:900}.pop-st span{font-weight:700;color:var(--muted)}
.pop-st.good{color:#0b9677}.pop-st.learning{color:#c47f00}.pop-st.hard{color:#d81f6c}.pop-st.next{color:var(--accent2-d)}
.pop-rule{background:#faf7ff;border-left:5px solid var(--accent2);border-radius:12px;padding:9px 12px;margin-top:10px;color:var(--ink)}
.pop-go{width:100%;margin-top:12px;padding:12px 16px;font-size:15px}
.pop-alt{display:block;width:100%;margin-top:8px;padding:9px;border:0;background:none;font:inherit;font-size:14px;font-weight:800;color:var(--accent-d);cursor:pointer;border-radius:12px}
.pop-alt:hover{background:#faf7ff}

/* ================= плашка «любой вопрос» ================= */
.free-card{display:flex;align-items:center;gap:16px;width:100%;margin-top:18px;border:0;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(145deg,#ffc928,#ff8a3d);border-radius:28px;padding:16px 20px;box-shadow:0 8px 0 #d07000,0 20px 40px #3a1d7a22;
  transition:transform .2s var(--spring)}
.free-card:hover{transform:translateY(-3px) rotate(-.4deg)}
.free-art{width:76px;height:76px;flex:none}.free-art .art-svg{width:100%;height:100%}
.free-txt{flex:1;min-width:0}.free-txt b{display:block;font-family:var(--font-d);font-size:21px;text-shadow:0 2px 0 #0002}
.free-txt small{display:block;font-size:14.5px;opacity:.95;margin-top:3px}
.free-card .cont-play{background:#fff;color:#ff8a3d}

/* ================= карточка занятия ================= */
.rc{align-items:center}
.rc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rc-t small{color:var(--muted);font-size:12.5px;font-weight:800}
.rc-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-d);font-size:16.5px}
.rc-t em{font-style:normal;font-size:13.5px;color:#5b4f80;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-tag{font-style:normal;flex:none;font-size:12px;font-weight:900;background:#fff4d6;color:#b07a00;border-radius:99px;padding:4px 10px}
.rc-tag.done{background:#dcfaef;color:#0b9677}

/* ================= карта тем учебника ================= */
.cm-progress{display:flex;align-items:center;gap:12px;margin:2px 0 10px}
.cm-bar{flex:1;height:16px;border-radius:99px;background:#efe9ff;overflow:hidden;box-shadow:inset 0 2px 0 #0000000f}
.cm-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#13c39a,#7be0b9)}
.cm-progress span{font-size:14px;color:var(--muted);white-space:nowrap}.cm-progress b{color:var(--ink);font-size:17px}
.cm-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cm-legend i{font-style:normal;font-size:13px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:6px}
.cm-legend i::before{content:"";width:13px;height:13px;border-radius:50%;background:#e6e0f5}
.cm-legend .good::before{background:#13c39a}.cm-legend .learning::before{background:#ffb02e}.cm-legend .hard::before{background:#ff3d8b}
.cm-legend .next::before{background:#fff;box-shadow:inset 0 0 0 3px var(--accent2)}
.cm{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cm-unit{background:#faf7ff;border-radius:22px;padding:12px;border:3px solid #f0eafc;opacity:.78;transition:opacity .2s}
.cm-unit.on{opacity:1;background:#fff;border-color:color-mix(in srgb,var(--accent2) 25%,#fff);box-shadow:0 5px 0 #0000000d}
.cm-uh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cm-uh b{flex:1;font-family:var(--font-d);font-size:14.5px;line-height:1.2}
.cm-uh small{font-size:12px;color:var(--muted);font-weight:900}
.cm-num{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--accent2);color:#fff;font-family:var(--font-d);font-size:14px}
.cm-topics{display:flex;flex-direction:column;gap:5px;position:relative}
.cm-node{display:flex;align-items:center;gap:9px;border:0;background:transparent;text-align:left;cursor:pointer;padding:6px 8px;border-radius:12px;
  font-size:14px;font-weight:800;color:var(--ink);transition:background .15s,transform .15s}
.cm-node:hover{background:color-mix(in srgb,var(--accent2) 10%,#fff);transform:translateX(3px)}
.cm-node.todo{color:#8a80a8}
.cm-dot{width:22px;height:22px;flex:none;border-radius:50%;background:#e6e0f5;display:grid;place-items:center;box-shadow:0 2px 0 #0000001a}
.cm-dot .ic{width:14px;height:14px;color:#fff}
.good .cm-dot,.cm-dot.good{background:#13c39a}.learning .cm-dot,.cm-dot.learning{background:#ffb02e}.hard .cm-dot,.cm-dot.hard{background:#ff3d8b}
.next .cm-dot,.cm-dot.next{background:#fff;box-shadow:inset 0 0 0 4px var(--accent2);animation:pulse 1.6s ease-in-out infinite}
.cm-node.next{background:color-mix(in srgb,var(--accent2) 12%,#fff);color:var(--accent2-d)}
@keyframes pulse{50%{transform:scale(1.18)}}

/* ================= профиль ================= */
.lvl-badge{display:inline-block;margin-top:3px;font-size:12.5px;font-weight:900;color:#fff;background:var(--accent2);border-radius:99px;padding:3px 10px}
.psub-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 10px}
.pcount{border-radius:16px;padding:10px;text-align:center;background:#faf7ff}
.pcount b{display:block;font-family:var(--font-d);font-size:24px;line-height:1.1}.pcount small{color:var(--muted);font-size:13px}
.pcount.good b{color:#0b9677}.pcount.learning b{color:#c47f00}.pcount.hard b{color:#d81f6c}
.psub-next{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--accent2) 10%,#fff);border-radius:16px;padding:10px 14px}
.psub-next .ic{width:26px;height:26px;flex:none;color:var(--accent2)}
.psub-next small{display:block;font-size:12px;color:var(--muted)}.psub-next b{font-size:15px}
.psub-say{margin-top:10px;font-size:14px;color:var(--muted)}
.psub-say summary{cursor:pointer;font-weight:800}
.psub-say p{margin:8px 0 0;color:#473a6b;line-height:1.45}
.diary{display:flex;flex-direction:column;gap:14px}
.dday{display:grid;grid-template-columns:96px 1fr;gap:12px}
.dday-d{font-family:var(--font-d);font-size:14px;color:var(--accent2-d);padding-top:12px}
.dday-items{display:flex;flex-direction:column;gap:8px;border-left:4px solid #ece4ff;padding-left:12px}
.dentry{display:flex;gap:10px;align-items:flex-start;background:#faf7ff;border-radius:16px;padding:10px 12px}
.dentry-art{width:34px;height:34px;flex:none}.dentry-art .art-svg{filter:none}
.dentry small{font-size:12px;color:var(--muted)}.dentry b{display:block;font-family:var(--font-d);font-size:15.5px}
.dentry p{margin:2px 0 0;font-size:13.5px;color:#5b4f80;line-height:1.4}
@media (max-width:600px){.dday{grid-template-columns:1fr;gap:4px}.dday-d{padding-top:0}.cm{grid-template-columns:1fr}}

/* ================= чат: шпаргалка, план урока, справка ================= */
.txt-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;border:3px solid color-mix(in srgb,var(--accent2) 30%,#fff);background:#fff;
  color:var(--accent2-d);border-radius:16px;padding:8px 14px;font-weight:900;font-size:15px;cursor:pointer;box-shadow:0 4px 0 #0000001a;flex:none;
  transition:transform .12s,background .2s,color .2s}
.txt-btn .ic{width:20px;height:20px}
.txt-btn:hover{transform:translateY(-2px)}
.txt-btn.on{background:var(--accent2);color:#fff;border-color:var(--accent2)}
/* «Завершить тему» — ребёнок сам закрывает тему (29.10); стоит перед шпаргалкой и забирает её margin-left:auto */
.fin-btn{background:#13c39a;border-color:#13c39a;color:#fff}.fin-btn+.txt-btn{margin-left:0}
.fin-btn[hidden]{display:none}.fin-btn[hidden]+.txt-btn{margin-left:auto}
.help-btn{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--accent)}
.memo[hidden],.memo-shade[hidden],.tour[hidden],.pop[hidden]{display:none!important}
.chat-body .memo{position:static;width:300px;flex:none;border-radius:26px;box-shadow:0 6px 0 #0000001a;z-index:auto;animation:memoSide .35s var(--ease)}
@keyframes memoSide{from{transform:translateX(30px);opacity:0}}
.memo-item small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.memo-shade{display:none}
.tutor{width:230px;justify-content:space-between;padding-bottom:16px}
.tutor .owl-live.big{width:150px;height:150px}
.plan-card{width:100%;background:#fff;border-radius:24px;padding:14px;box-shadow:0 6px 0 #0000001a;overflow-y:auto;min-height:0}
.pc-h{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pc-topic{font-family:var(--font-d);font-size:18px;line-height:1.2;margin:2px 0 10px;color:var(--accent-d)}
.pc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pc-steps li{display:flex;gap:9px;align-items:flex-start;padding:5px 6px;border-radius:12px;color:#a49bc0}
.pc-steps li b{display:block;font-size:14.5px;line-height:1.2}.pc-steps li small{display:block;font-size:11.5px;font-weight:700}
.pc-dot{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:#f0ebfb;color:#a49bc0}
.pc-dot .ic{width:14px;height:14px}
.pc-steps li.done{color:#0b9677}.pc-steps li.done .pc-dot{background:#13c39a;color:#fff}
.pc-steps li.now{background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--ink)}
.pc-steps li.now .pc-dot{background:var(--accent);color:#fff;animation:pulse 1.6s ease-in-out infinite}
.pc-steps li.now small{color:var(--accent-d)}
.pc-tasks{display:flex;gap:4px;margin-top:4px}
.pc-tasks i{width:14px;height:14px;border-radius:5px;background:#ece4ff}.pc-tasks i.on{background:#ffb02e;box-shadow:0 2px 0 #c47f00}
.pc-left{margin-top:10px;font-size:13.5px;font-weight:900;color:var(--accent2-d);background:#faf7ff;border-radius:12px;padding:8px 10px}
/* этапы плана кликабельны: ребёнок сам пропускает или возвращается (29.10) */
.pc-steps li[data-stage]:not(.now){cursor:pointer}.pc-steps li[data-stage]:not(.now):hover{background:#faf7ff;color:var(--ink)}
.plan-bar{display:none}
@media (max-width:860px){
  .chat-body .memo{position:fixed;left:auto;right:0;top:0;bottom:0;width:min(340px,88vw);z-index:60;border-radius:30px 0 0 30px;box-shadow:-10px 0 50px #3a1d7a33}
  .memo-shade{display:block;position:fixed;inset:0;z-index:59;background:#1d123566}
  .plan-bar{display:flex;align-items:center;gap:12px;margin-top:10px;border:0;cursor:pointer;text-align:left;background:#fff;border-radius:18px;
    padding:8px 14px;box-shadow:0 4px 0 #0000001a;width:100%}
  .pb-steps{display:flex;gap:4px;flex:none}
  .pb-steps i{width:12px;height:12px;border-radius:50%;background:#ece4ff}.pb-steps i.done{background:#13c39a}.pb-steps i.now{background:var(--accent)}
  .pb-t{min-width:0}.pb-t b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pb-t small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #chat.plan-open .tutor{display:flex;position:fixed;z-index:58;top:130px;left:12px;right:12px;width:auto;padding:0}
  #chat.plan-open .tutor .owl-live,#chat.plan-open .tutor-status{display:none}
  .txt-btn span{display:none}.txt-btn{padding:8px 10px}
}

/* тур: всё затемнено, подсвечена одна вещь */
.tour{position:fixed;inset:0;z-index:1000}
.tour-hole{position:fixed;border-radius:18px;box-shadow:0 0 0 5px #fff,0 0 0 9999px #1d1235b8;transition:all .35s var(--ease);pointer-events:none}
.tour-tip{position:fixed;z-index:1002;background:#fff;border-radius:22px;padding:16px 18px;font-size:16px;line-height:1.45;
  box-shadow:0 20px 60px #0006;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s var(--spring)}
.tour-tip.in{opacity:1;transform:none}
.tour-tip::before{content:"";position:absolute;left:var(--ax,50%);width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:4px}
.tour-tip[data-side="below"]::before{top:-8px}.tour-tip[data-side="above"]::before{bottom:-8px}
.tour-tip p{margin:0 0 12px}
.tour-btns{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tour-skip{border:0;background:none;color:var(--muted);font-weight:800;cursor:pointer}
.tour-next{padding:10px 18px;font-size:15px}
.game-card{display:flex;align-items:center;gap:16px;width:100%;margin-top:18px;border:0;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(145deg,#8b5cf6,#2f8cff);border-radius:28px;padding:16px 20px;box-shadow:0 8px 0 #5a3dd6,0 20px 40px #3a1d7a22;transition:transform .2s var(--spring)}
.game-card:hover{transform:translateY(-3px) rotate(.4deg)}
.game-badge{flex:none;background:#ffd23f;color:#241a3a;font-family:var(--font-d);font-size:14px;padding:10px 12px;border-radius:16px;transform:rotate(-6deg);box-shadow:0 4px 0 #c49a00}
.game-card .cont-play{background:#fff;color:#5b5cff}
.dentry p:empty{display:none}

/* ================= задания на день ================= */
.quests{padding:16px 18px;margin-top:18px}
.q-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.q-head b{font-family:var(--font-d);font-size:19px}.q-head small{color:var(--muted);font-weight:900}
.q{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:15.5px;border-top:2px dashed #ece4ff}
.q span:nth-child(2){flex:1}.q i{font-style:normal;font-size:13px;font-weight:900;color:var(--muted)}
.q-tick{width:26px;height:26px;flex:none;border-radius:9px;background:#f0ebfb;display:grid;place-items:center}
.q-tick .ic{width:16px;height:16px;color:#fff}
.q.done .q-tick{background:#13c39a}.q.done span:nth-child(2){color:#0b9677;text-decoration:line-through;text-decoration-thickness:2px}
.chest{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;border:0;border-radius:18px;padding:8px 14px;background:#fff4d6;
  font-weight:900;font-size:15px;color:#9a6a00;cursor:default}
.chest svg{width:52px;height:44px;flex:none}
.chest.ready{background:linear-gradient(145deg,#ffd23f,#ff9f1c);color:#5a3500;cursor:pointer;box-shadow:0 5px 0 #c47f00;animation:wiggle 1.2s ease-in-out infinite}
.chest.open{background:#dcfaef;color:#0b9677;animation:none}
.chest.open .chest-lid{transform:translateY(-6px) rotate(-12deg);transform-origin:10px 22px}
@keyframes wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-2deg)}20%{transform:rotate(2deg)}30%{transform:rotate(0)}}

/* ================= интерактив в чате ================= */
.wg{margin:10px 0 4px;background:#faf7ff;border:3px solid #ece4ff;border-radius:18px;padding:12px}
.wg.off{opacity:.6}
.wg-h{font-family:var(--font-d);font-size:15px;color:var(--accent2-d);margin-bottom:8px}
.bw-ans{min-height:52px;display:flex;flex-wrap:wrap;gap:8px;padding:8px;border-radius:14px;background:#fff;border:3px dashed #d9cdf4;margin-bottom:10px}
.bw-ph{color:#b3a9cf;font-size:14px;align-self:center}
.bw-pool{display:flex;flex-wrap:wrap;gap:8px}
.bw-w{border:0;background:#fff;border-radius:12px;padding:8px 13px;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 4px 0 #d9cdf4;
  color:var(--ink);animation:chipIn .35s var(--spring) backwards}
.bw-ans .bw-w{background:var(--accent2);color:#fff;box-shadow:0 4px 0 var(--accent2-d)}
.bw-go{margin-top:12px;padding:10px 18px;font-size:15px}.bw-go:disabled{opacity:.5}
.wg.off button{pointer-events:none}
.bz-time{height:10px;border-radius:99px;background:#ece4ff;overflow:hidden;margin-bottom:10px}
.bz-time i{display:block;height:100%;background:linear-gradient(90deg,#ff3d8b,#ffb02e);transition:width 1s linear}
.bz-opts{display:flex;flex-wrap:wrap;gap:8px}
.bz-ok{background:#13c39a!important;color:#fff!important;border-color:#13c39a!important}
.bz-bad{background:#ff3d8b!important;color:#fff!important;border-color:#ff3d8b!important}
.bz-start{padding:10px 22px}
.boss{display:flex;gap:12px;align-items:center;background:linear-gradient(145deg,#2b1d4f,#4b2a8f);border-radius:18px;padding:10px 14px;margin-bottom:10px;color:#fff}
.boss-art{width:64px;height:64px;flex:none;animation:bossBob 1.4s ease-in-out infinite alternate}
.boss.down .boss-art{animation:none;transform:rotate(90deg);opacity:.5}
@keyframes bossBob{to{transform:translateY(-4px) rotate(3deg)}}
.boss-t{flex:1;min-width:0}.boss-t b{font-family:var(--font-d);font-size:16px;color:#fff;background:none!important;padding:0!important}
.boss-hp{position:relative;height:16px;border-radius:99px;background:#ffffff26;overflow:hidden;margin:5px 0}
.boss-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff3d6e,#ff8a3d);transition:width .6s var(--spring)}
.boss-hp span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:900}
.boss-hearts{display:flex;gap:4px}.boss-hearts svg{width:18px;height:17px}

/* ================= учимся на ошибках ================= */
.mists{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:12px}
.mist{background:#fff6f8;border:3px solid #ffd6e2;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:6px;transition:background .3s,border-color .3s}
.mist.shown{background:#f2fdf8;border-color:#bdf0db}
.mist small{font-size:12px;color:var(--muted)}
.mist-topic{font-style:normal;font-size:12px;font-weight:900;color:var(--accent2-d);text-transform:uppercase;letter-spacing:.05em}
.mist-wrong{font-size:16px;color:#c4123f;text-decoration:line-through wavy #ff3d8b55}
.mist:not(.shown) .mist-wrong{text-decoration:none;color:var(--ink)}
.mist-right{display:flex;gap:6px;align-items:center;font-size:16px;color:#0b9677}.mist-right .ic{width:18px;height:18px;flex:none}
.mist-fix p{margin:4px 0 0;font-size:13.5px;color:#5b4f80}
.mist-show{align-self:flex-start;border:0;background:#fff;border-radius:12px;padding:7px 12px;font-weight:900;font-size:13.5px;color:#c4123f;cursor:pointer;box-shadow:0 3px 0 #ffd6e2}
.mist-train{padding:11px 18px;font-size:15px}
.psub-say .ic{width:14px;height:14px;color:#13c39a;vertical-align:-2px}

/* ================= моя неделя ================= */
.wk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wk-word{font-weight:900;color:var(--accent-d);font-size:15px}
.wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:4px 0 14px}
.wk-d{display:flex;flex-direction:column;align-items:center;gap:4px}
.wk-d span{width:38px;height:38px;border-radius:50%;background:#f0ebfb;display:grid;place-items:center}
.wk-d.on span{background:#13c39a;box-shadow:0 3px 0 #0b9677}.wk-d span .ic{width:20px;height:20px;color:#fff}
.wk-d small{font-size:12px;color:var(--muted);font-weight:900}
.wk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wk-stats div{background:#faf7ff;border-radius:16px;padding:10px 6px;text-align:center}
.wk-stats b{display:block;font-family:var(--font-d);font-size:22px}.wk-stats small{font-size:12px;color:var(--muted)}
.wk-done{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.wk-done>small{font-size:12.5px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.wk-item{display:flex;gap:8px;align-items:center;font-size:14px}.wk-item .art-svg{width:26px;height:26px;flex:none;filter:none}
@media (max-width:600px){.wk-stats{grid-template-columns:1fr 1fr}.wk-d span{width:32px;height:32px}}

/* ================= v7: мир — горы, холмы с жителями, звери, пруд ================= */
.mountains{bottom:16vh;height:34vh;opacity:.9}
.m-back{fill:color-mix(in srgb,var(--sky2) 55%,#6f6aa8)}
.m-front{fill:color-mix(in srgb,var(--hill1) 45%,#8a86c4)}
.m-snow{fill:#fff;opacity:.95}
.onhill{bottom:0;pointer-events:none}
.onhill[data-hill="far"]{height:40vh}.onhill[data-hill="mid"]{height:30vh}.onhill[data-hill="near"]{height:20vh}
.onhill>*{position:absolute;bottom:0}
.onhill .school{width:150px}.onhill .school svg{width:100%;filter:drop-shadow(0 8px 10px #0001)}
.onhill .house{filter:drop-shadow(0 4px 4px #0001)}
.onhill .tree{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite alternate}
.pet-sit{width:34px;height:34px}
.ps-tail{transform-origin:24px 36px;animation:tailWag .5s ease-in-out infinite alternate}
.dog-sit .ps-tail{transform-origin:8px 34px;animation-duration:.22s}
.dog-sit .ps-ear{transform-origin:22px 7px;animation:earFlop 2.4s ease-in-out infinite}
@keyframes tailWag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes earFlop{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-18deg)}}
.pond{width:220px;height:60px}.pond>svg:first-child{width:100%;height:100%}
.ripple-a{animation:rip 3s ease-in-out infinite}.ripple-b{animation:rip 3.6s ease-in-out infinite -1.4s}
@keyframes rip{0%,100%{transform:translateX(0);opacity:.2}50%{transform:translateX(10px);opacity:.9}}
.duck{position:absolute;width:30px;height:24px;left:80px;top:6px;animation:duckSwim 14s ease-in-out infinite}
@keyframes duckSwim{0%{transform:translate(0,0)}25%{transform:translate(50px,3px)}50%{transform:translate(70px,0) scaleX(-1)}75%{transform:translate(10px,4px) scaleX(-1)}100%{transform:translate(0,0)}}
.walker{animation-fill-mode:both}
.walker.pet{width:46px;height:32px}
.walker.pet-cat{width:40px;height:28px}
.walker.pet svg{animation:petBob .28s ease-in-out infinite alternate}
.walker.pet .pl1{animation:petLeg .28s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
.walker.pet .pl2{animation:petLeg .28s ease-in-out infinite alternate-reverse;transform-box:fill-box;transform-origin:50% 0}
.walker.pet .pt-tail{transform-box:fill-box;transform-origin:100% 100%;animation:tailWag .3s ease-in-out infinite alternate}
.walker.pet-cat .pt-tail{animation-duration:.9s}
@keyframes petLeg{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
@keyframes petBob{to{translate:0 -2px}}
@media (max-width:600px){.onhill .house{width:40px!important}.onhill .school{width:96px}.pond{width:150px;height:41px}.duck{width:22px;left:52px}.mountains{height:26vh}}

/* мир радуется: прыжки и покачивания */
.cheer .walker>svg{animation:hop .4s ease-out 3!important}
.cheer .pet-sit{animation:hop .4s ease-out 3}
.cheer .flower{animation:flowerJoy .35s ease-in-out 4 alternate}
.cheer .sun{animation:sunJoy 1.4s var(--spring)}
.cheer .duck{animation-duration:3s}
@keyframes hop{0%,100%{translate:0 0}45%{translate:0 -16px}}
@keyframes flowerJoy{from{transform:rotate(-12deg) scale(1.1)}to{transform:rotate(12deg) scale(1.15)}}
@keyframes sunJoy{50%{transform:scale(1.18) rotate(20deg)}}

/* горячие кнопки над полем ввода */
.hot{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;transition:opacity .2s}
.hot.wait{opacity:.4;pointer-events:none}
.hot button{border:0;background:#ffffffd9;color:var(--accent2-d);border-radius:14px;padding:7px 13px;font-weight:900;font-size:14px;cursor:pointer;
  box-shadow:0 3px 0 #0000001a;transition:transform .15s var(--spring),background .2s,color .2s;animation:chipIn .45s var(--spring) backwards}
.hot button:nth-child(2){animation-delay:.05s}.hot button:nth-child(3){animation-delay:.1s}.hot button:nth-child(4){animation-delay:.15s}
.hot button:hover{background:var(--accent2);color:#fff;transform:translateY(-2px) scale(1.04)}
.hot button:active{transform:translateY(2px) scale(.96)}
.hot button:first-child{color:#c4123f}.hot button:first-child:hover{background:#ff3d6e;color:#fff}
.owl-live.spin{animation:owlSpin .8s var(--spring)}
@keyframes owlSpin{50%{transform:rotate(-12deg) scale(1.1) translateY(-10px)}}

/* без многоточий: текст переносится целиком */
.subj .s-next,.cont-txt b,.cont-txt em,.cta b,.hw-t b,.rc b,.rc-t b,.chat-subj small,.me b,.pb-t b,.pb-t small,.cm-progress span,.tutor-status{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.rc-t em{display:block;-webkit-line-clamp:unset;overflow:visible}
.chat-subj small{line-height:1.25}
.chip{white-space:normal;text-align:left}

/* анимации появления и отклика */
.cm-unit,.rc,.q,.mist,.dentry,.wk-d,.pcount,.free-card,.game-card,.quests{animation:riseS .55s var(--ease) backwards}
.cm-unit:nth-child(2),.mist:nth-child(2),.q:nth-of-type(2),.wk-d:nth-child(2){animation-delay:.05s}
.cm-unit:nth-child(3),.mist:nth-child(3),.q:nth-of-type(3),.wk-d:nth-child(3){animation-delay:.1s}
.cm-unit:nth-child(4),.mist:nth-child(4),.wk-d:nth-child(4){animation-delay:.15s}
.cm-unit:nth-child(5),.wk-d:nth-child(5){animation-delay:.2s}.cm-unit:nth-child(6),.wk-d:nth-child(6){animation-delay:.25s}
.cm-unit:nth-child(n+7),.wk-d:nth-child(7){animation-delay:.3s}
.game-card{animation-delay:.08s}.free-card{animation-delay:.16s}
.cm-unit,.mist,.rc,.pcount{transition:transform .25s var(--spring),box-shadow .25s}
.cm-unit:hover,.mist:hover,.pcount:hover{transform:translateY(-3px)}
.rc:hover{transform:translateY(-2px) scale(1.01)}
.btn3d:active,.cm-node:active,.mist-show:active,.bw-w:active{transform:translateY(2px) scale(.96)}
.bw-w{transition:transform .15s var(--spring)}.bw-w:hover{transform:translateY(-3px) rotate(-2deg)}
.mist-fix:not([hidden]){animation:pop .35s var(--spring)}
.pc-steps li{transition:background .4s,color .4s}
.pc-tasks i{transition:background .4s,transform .4s var(--spring)}.pc-tasks i.on{transform:scale(1.15)}
.boss-hp i{transition:width .8s var(--spring)}
@keyframes riseS{from{opacity:0;transform:translateY(16px)}}
@media (max-width:600px){.hot{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.hot::-webkit-scrollbar{display:none}.hot button{padding:6px 9px;font-size:12.5px;flex:1 1 auto;white-space:nowrap}}

/* ================= v8: звери разных пород, ходьба по диагонали ================= */
.walker.pet{width:62px;height:39px;--step:.34s}
.walker.pet>svg{animation:none}
.pet-svg{width:100%;height:100%;overflow:visible}
.pet-svg g{transform-box:view-box}
.pet-svg .f1,.pet-svg .b2{animation:legA var(--step) ease-in-out infinite alternate}
.pet-svg .f2,.pet-svg .b1{animation:legA var(--step) ease-in-out infinite alternate-reverse}
.pet-svg .bd{animation:bodyBob calc(var(--step) / 1) ease-in-out infinite alternate}
.pet-svg .hd{animation:headBob calc(var(--step) * 2) ease-in-out infinite}
.pet-svg .tl{animation:tailW calc(var(--step) * .8) ease-in-out infinite alternate}
.pet-svg .ear{animation:earSwing calc(var(--step) * 2) ease-in-out infinite}
@keyframes legA{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes bodyBob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
@keyframes headBob{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(3deg)}}
@keyframes tailW{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}
@keyframes earSwing{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
.cheer .walker.pet>svg{animation:hop .4s ease-out 3!important}

/* аватарки — строго в круге */
.hero-ava svg,.prof-ava svg,.row.mine .face svg,.heroes .hero svg{clip-path:circle(50% at 50% 50%)}
.prof-ava{overflow:hidden}

/* ================= сова: лампочка-идея ================= */
.o-think{opacity:0;transform:scale(.2) translate(20px,20px);transform-origin:118px 30px;transition:opacity .25s,transform .55s var(--spring)}
[data-state="thinking"] .o-think{opacity:1;transform:none}
[data-state="thinking"] .o-think circle{animation:none}
[data-state="thinking"] .o-dot{animation:bubble .9s ease-in-out infinite alternate}
.o-glow{transform-origin:124px 16px;transform-box:view-box}
[data-state="thinking"] .o-glow{animation:bulbGlow 1.1s ease-in-out infinite alternate}
.o-rays{transform-origin:124px 16px;transform-box:view-box;opacity:0}
[data-state="thinking"] .o-rays{animation:rays 1.1s ease-in-out infinite alternate .3s}
.o-bulb{transform-origin:124px 34px;transform-box:view-box}
[data-state="thinking"] .o-bulb{animation:bulbSwing 2.2s ease-in-out infinite alternate}
@keyframes bulbGlow{from{opacity:.25;transform:scale(.85)}to{opacity:.7;transform:scale(1.15)}}
@keyframes rays{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1.05)}}
@keyframes bulbSwing{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.o-brow{transition:transform .3s var(--spring);transform-box:view-box;transform-origin:70px 42px}
[data-state="thinking"] .o-brow{transform:translateY(-4px)}
[data-state="happy"] .o-brow{transform:translateY(-3px) scaleX(1.05)}
.o-wing{transform-box:view-box}
/* ровная площадка под домом: цвет дальнего холма, края скошены в склон */

/* ================= v7: QR-фото, меню предмета, дракон-босс, виджеты-игры ================= */

/* --- QR: фото с телефона --- */
.qr-shade{position:fixed;inset:0;z-index:950;background:#1d1235b8;display:grid;place-items:center;animation:qrFade .25s}
.qr-shade[hidden]{display:none!important}
@keyframes qrFade{from{opacity:0}}
.qr-card{position:relative;background:#fff;border-radius:28px;padding:26px 26px 20px;max-width:380px;margin:16px;text-align:center;
  box-shadow:0 30px 70px #0006;animation:pop .35s var(--spring)}
.qr-close{position:absolute;top:12px;right:12px}
.qr-h{font-family:var(--font-d);font-size:21px;display:block}
.qr-sub{color:var(--muted);font-size:14.5px;margin:8px 0 14px}
.qr-box{display:grid;place-items:center;background:#faf7ff;border:3px solid #ece4ff;border-radius:20px;padding:14px;min-height:220px}
.qr-box svg{width:200px;height:200px}
.qr-wait{color:var(--muted);font-weight:800}
.qr-live{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0;color:var(--muted);font-weight:800;font-size:14px}
.qr-live i{width:10px;height:10px;border-radius:50%;background:#13c39a;animation:qrPulse 1.2s ease-in-out infinite}
@keyframes qrPulse{50%{transform:scale(1.6);opacity:.5}}
.qr-file{width:100%;font-size:14px;padding:11px}

/* --- меню «чем займёмся» на экране предмета --- */
.act-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 16px}
.act{position:relative;overflow:hidden;border:0;cursor:pointer;text-align:left;color:#fff;border-radius:22px;padding:16px 16px 14px;
  background:var(--ag);box-shadow:0 6px 0 var(--agd),0 14px 30px #3a1d7a22;transition:transform .2s var(--spring),box-shadow .2s;
  display:flex;flex-direction:column;gap:3px;animation:cardIn .5s var(--spring) backwards}
.act:nth-child(2){animation-delay:.06s}.act:nth-child(3){animation-delay:.12s}.act:nth-child(4){animation-delay:.18s}
.act:hover{transform:translateY(-4px) rotate(-.5deg)}
.act:active{transform:translateY(3px);box-shadow:0 2px 0 var(--agd)}
.act .ic{width:30px;height:30px;margin-bottom:4px}
.act b{font-family:var(--font-d);font-size:17px;text-shadow:0 2px 0 #0002}
.act small{font-size:12.5px;opacity:.92;font-weight:800}
@media (max-width:860px){.act-grid{grid-template-columns:1fr 1fr}}

/* --- онбординг-тайлы на главной --- */
.ob-tiles{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ob-tile{flex:1;min-width:130px;background:color-mix(in srgb,var(--c) 10%,#fff);border:3px solid color-mix(in srgb,var(--c) 30%,#fff);
  border-radius:18px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ob-tile .ic{width:24px;height:24px;color:var(--c)}
.ob-tile b{font-family:var(--font-d);font-size:15px}
.ob-tile small{font-size:12.5px;color:var(--muted);font-weight:800}

/* --- дракон-босс: машет крыльями, вылетает, получает удары, дышит огнём, падает --- */
.boss{position:relative;overflow:hidden}
.boss-art{width:98px;height:80px;overflow:visible}
.dr-wing,.dr-tail,.dr-head,.dr-fire{transform-box:fill-box}
.dr-wing.wl{transform-origin:92% 88%;animation:drFlapL 1s ease-in-out infinite alternate}
.dr-wing.wr{transform-origin:8% 88%;animation:drFlapR 1s ease-in-out infinite alternate}
@keyframes drFlapL{from{transform:rotate(-14deg)}to{transform:rotate(9deg)}}
@keyframes drFlapR{from{transform:rotate(14deg)}to{transform:rotate(-9deg)}}
.dr-tail{transform-origin:5% 60%;animation:drTail 2.2s ease-in-out infinite alternate}
@keyframes drTail{from{transform:rotate(-5deg)}to{transform:rotate(8deg)}}
.dr-head{transform-origin:55% 95%;animation:drHead 3.4s ease-in-out infinite alternate}
@keyframes drHead{from{transform:rotate(-2deg)}45%,55%{transform:rotate(0)}to{transform:rotate(3deg)}}
.dr-fire{opacity:0;transform-origin:100% 50%}
.boss.ouch .dr-fire{animation:drFire .9s ease-out}
@keyframes drFire{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.3)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
.boss.ouch .boss-hearts{animation:shake .45s}
.boss.ouch .dr-head{animation:drRoar .9s ease-out}
@keyframes drRoar{25%{transform:rotate(-10deg) translateY(-3px)}60%{transform:rotate(-6deg)}}
.boss.arrive .boss-art{animation:bossArrive 1.1s var(--spring) backwards}
@keyframes bossArrive{0%{transform:translate(340px,-130px) scale(.1) rotate(35deg);opacity:0}
  60%{transform:translate(-6px,5px) scale(1.14) rotate(-5deg);opacity:1}100%{transform:none}}
.boss.hit .boss-art{animation:bossHit .7s}
@keyframes bossHit{0%{filter:none}15%{filter:brightness(2) saturate(3) hue-rotate(-50deg);transform:translateX(-8px) rotate(-6deg) scale(.96)}
  35%{transform:translateX(7px) rotate(5deg)}55%{transform:translateX(-5px) rotate(-3deg);filter:none}
  75%{transform:translateX(3px)}100%{transform:none}}
.boss.down .boss-art{animation:bossDown 1.1s var(--ease) forwards}
@keyframes bossDown{0%{transform:none;filter:none;opacity:1}35%{transform:translateY(-16px) rotate(25deg);filter:grayscale(.3)}
  100%{transform:translateY(12px) rotate(100deg);filter:grayscale(1);opacity:.45}}
.boss.down .dr-wing,.boss.down .dr-tail,.boss.down .dr-head{animation:none}

/* --- виджеты: появление, опции, верно/неверно --- */
.wg{animation:wgIn .45s var(--spring) backwards}
@keyframes wgIn{from{transform:translateY(26px) scale(.92);opacity:0}}
.wg-opts{display:flex;flex-wrap:wrap;gap:8px}
.wg-idk{display:block;margin:10px 0 0;padding:7px 16px;border-radius:999px;border:2px dashed #b9b3d6;background:#fff;color:#5b5480;font:inherit;font-weight:700;font-size:.92em;cursor:pointer;transition:background .2s,border-color .2s}
.wg-idk:hover{background:#f4f1ff;border-color:#8b5cf6;color:#4a3fa0}.wg-idk:disabled{opacity:.5;cursor:default}
.wg-opts .chip,.bz-opts .chip,.st-pool .bw-w,.mn-c,.pr-c,.wd-t{animation:chipIn .4s var(--spring) backwards;animation-delay:calc(var(--i,0)*.05s)}
.wg .chip.wg-ok{background:#13c39a!important;color:#fff!important;border-color:#13c39a!important;animation:okPop .55s var(--spring)}
.wg .chip.wg-bad{background:#ff3d8b!important;color:#fff!important;border-color:#ff3d8b!important;animation:shake .4s}
@keyframes okPop{40%{transform:scale(1.2) rotate(-3deg)}}

/* сортировка по корзинам */
.st-pool{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;min-height:40px}
.bw-w.sel{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-d);transform:translateY(-3px) scale(1.07)}
.st-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.st-cat{border:3px dashed #d9cdf4;background:#fff;border-radius:16px;padding:10px;text-align:left;cursor:pointer;transition:all .2s;font:inherit}
.st-cat.ready{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 7%,#fff);animation:catNudge .9s ease-in-out infinite alternate}
@keyframes catNudge{to{transform:translateY(-4px)}}
.st-cat b{display:block;font-family:var(--font-d);font-size:14px;margin-bottom:6px;color:var(--accent2-d)}
.st-cat span{display:flex;flex-wrap:wrap;gap:5px;min-height:10px}
.st-cat i{font-style:normal;background:#efe9ff;border-radius:10px;padding:4px 9px;font-size:13.5px;font-weight:800;animation:okPop .4s var(--spring)}
.st-cat i.good{background:#dcfaef;color:#0b9677}
.st-cat i.bad{background:#ffe0ec;color:#d81f6c;animation:shake .45s}
.st-go{margin-top:12px;padding:10px 18px;font-size:15px}.st-go:disabled{opacity:.5}

/* сапёр */
.mn-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:8px}
.mn-grid.quake{animation:quake .5s}
@keyframes quake{20%{transform:translate(-6px,2px) rotate(-1deg)}40%{transform:translate(6px,-2px) rotate(1deg)}
  60%{transform:translate(-4px,1px)}80%{transform:translate(3px,-1px)}}
.mn-c{border:0;background:linear-gradient(180deg,#efe9ff,#e2d8fb);border-radius:14px;padding:12px 6px;font-weight:900;font-size:14.5px;
  cursor:pointer;box-shadow:0 4px 0 #c9bbf0;transition:transform .15s;color:var(--ink)}
.mn-c:hover:not([disabled]){transform:translateY(-3px)}
.mn-c.safe{background:#dcfaef;color:#0b9677;box-shadow:0 4px 0 #8fdcc2;animation:mnOpen .45s var(--spring)}
.mn-c.boom{background:linear-gradient(180deg,#ff3d6e,#d81f3f);color:#fff;box-shadow:0 4px 0 #a90f32;animation:mnBoom .6s}
@keyframes mnOpen{0%{transform:rotateX(90deg)}60%{transform:rotateX(-18deg) scale(1.06)}100%{transform:none}}
@keyframes mnBoom{0%{transform:scale(.6);filter:brightness(2.4)}30%{transform:scale(1.28) rotate(4deg)}
  55%{transform:scale(.94) rotate(-3deg)}100%{transform:none;filter:none}}

/* угадай слово */
.wd-tiles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.wd-t{width:34px;height:40px;border-radius:10px;background:#efe9ff;border-bottom:4px solid #c9bbf0;display:grid;place-items:center;
  font-family:var(--font-d);font-size:20px;color:var(--ink)}
.wd-t.open{background:#fff;border-bottom-color:var(--accent2);animation:mnOpen .5s var(--spring)}
.wd-t.lost{background:#ffe0ec;color:#d81f6c;border-bottom-color:#e8779f}
.wd-t.win{animation:wdWave .7s var(--spring) backwards;animation-delay:calc(var(--i,0)*.07s);background:#dcfaef;border-bottom-color:#13c39a;color:#0b9677}
@keyframes wdWave{35%{transform:translateY(-14px) rotate(-6deg)}70%{transform:translateY(2px)}}
.wd-lives{display:flex;gap:4px;margin-bottom:8px}
.wd-lives svg{width:19px;height:18px;animation:okPop .4s var(--spring)}
.wd-kb{display:flex;flex-wrap:wrap;gap:5px}
.wd-kb button{width:32px;height:36px;border:0;border-radius:9px;background:#fff;box-shadow:0 3px 0 #d9cdf4;font-weight:900;font-size:14px;
  cursor:pointer;color:var(--ink);transition:transform .12s}
.wd-kb button:hover:not([disabled]){transform:translateY(-2px);background:var(--accent2);color:#fff}
.wd-kb button.hit{background:#13c39a;color:#fff;box-shadow:0 3px 0 #0b9677}
.wd-kb button.miss{background:#f3eef9;color:#b3a9cf;box-shadow:none;transform:translateY(2px)}

/* найди пару */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.pr-c{border:3px solid #ece4ff;background:#fff;border-radius:14px;padding:12px 8px;font-weight:900;font-size:14.5px;cursor:pointer;color:var(--ink);
  box-shadow:0 4px 0 #e2d8fb;transition:transform .15s}
.pr-c:hover:not([disabled]){transform:translateY(-3px)}
.pr-c.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);transform:translateY(-3px) scale(1.04)}
.pr-c.match{border-color:#13c39a;background:#dcfaef;color:#0b9677;animation:okPop .55s var(--spring)}
.pr-c.bad{border-color:#ff3d8b;background:#ffe0ec;color:#d81f6c;animation:shake .4s}

/* ================= v8: поиск, клампы, без reduced-motion ================= */
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:34px 4px 12px}
.sec-row .h-sec{margin:0}
.sec-row.in-card{margin:0 0 10px}
.sec-row.in-card .plog-h{margin-bottom:0}
.search{display:flex;align-items:center;gap:8px;background:#ffffffd9;border-radius:16px;padding:8px 14px;box-shadow:0 4px 0 #0000000f;
  transition:box-shadow .2s}
.search:focus-within{box-shadow:0 4px 0 var(--accent-d),0 0 0 3px color-mix(in srgb,var(--accent) 30%,#fff)}
.search .ic{width:18px;height:18px;color:var(--muted);flex:none}
.search input{border:0;outline:0;background:none;font:inherit;font-weight:800;color:var(--ink);width:200px;max-width:50vw}
.search input::placeholder{color:#b3a9cf}
/* «дальше по плану» — всегда одна строка */
.cont-txt em,.s-next,.psub-next b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ================= v9: экскурсия Софы (сторителлинг-тур) ================= */
.tour-bar{display:block;height:7px;border-radius:99px;background:#efe9ff;overflow:hidden;margin-bottom:12px}
.tour-bar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#8b5cf6);transition:width .4s var(--ease)}
.tour-row{display:flex;gap:12px;align-items:flex-start}
.tour-owl{width:58px;height:58px;flex:none;margin-top:-4px}
.tour-owl svg{width:100%;height:100%}
.tour-say{flex:1;min-width:0}
.tour-say b{display:block;font-family:var(--font-d);font-size:13px;color:var(--accent2-d);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.tour-say p{margin:0 0 12px;font-weight:700}
.tour-n{font-size:12.5px;font-weight:900;color:var(--muted)}
/* знакомство: все 8 классов в одну строку */
#onboard .grades{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
#onboard .grades .gchip{min-width:0;padding-left:0;padding-right:0}
/* 8–10: ещё спокойнее — без облаков и цветов, заголовки без «мультяшного» шрифта */
body[data-band="sr"]{--font-d:Nunito,system-ui,sans-serif}
body[data-band="sr"] :is(.cloud,#flowers,#flowersBack){display:none}
/* телефон: в шапке чата не хватало места названию предмета после кнопки озвучки,
   в композере подсказка переносилась — ужимаем кнопки и прячем лишнее */
@media (max-width:480px){
  .chat-head{gap:6px;padding:8px}
  .chat-head .chat-em{display:none}
  .chat-head .icon-btn{width:40px;height:40px}
  .chat-head .txt-btn{padding-left:8px;padding-right:8px}
  .xp{gap:4px}.xp-bar{display:none}
  .composer{gap:6px;padding:6px}
  .composer :is(.recap,.photo,.mic,.send){width:42px;height:42px;border-radius:14px}
  .composer :is(.recap,.photo,.mic,.send) svg{width:22px;height:22px}
  #input{min-width:0;padding:11px 6px;font-size:16px}
}
#onboard .heroes{margin-top:6px}
.ob-out{border:0;background:none;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;text-decoration:underline;align-self:center;margin-top:4px}

/* выбор учебника */
.book-card{max-width:420px;width:calc(100% - 32px)}
.book-owl{width:76px;height:76px;margin:-6px auto 4px}
.book-owl svg{width:100%;height:100%}
.fb-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.fb-opt{border:3px solid #ece4ff;background:#faf7ff;border-radius:16px;padding:12px 4px;font-weight:900;font-size:15px;cursor:pointer;color:inherit}
.fb-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,#fff)}
.fb-card textarea{resize:none;font-size:15px}
.fb-err{color:#e5484d;font-weight:800;min-height:1.3em;margin:6px 0}
.fb-send{width:100%}
.fb-later{background:none;border:0;color:var(--muted);font-weight:800;margin-top:10px;cursor:pointer}
.book-list{display:grid;gap:10px;text-align:left;max-height:55vh;overflow:auto;padding:2px}
.book-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:3px solid #ece4ff;border-radius:18px;
  background:#faf7ff;cursor:pointer;font:inherit;color:var(--ink);text-align:left;transition:transform .15s,border-color .15s}
.book-opt:hover{transform:translateY(-2px);border-color:var(--accent2)}
.book-opt.on{border-color:var(--accent)}
.book-opt img,.book-ph{width:46px;height:62px;flex:none;border-radius:6px;object-fit:cover;box-shadow:0 3px 8px #3a1d7a33;background:#fff}
.book-ph{display:grid;place-items:center;color:var(--accent2)}
.book-ph .ic,.book-ph svg{width:26px;height:26px}
.book-opt b{display:block;font-family:var(--font-d);font-size:16px;line-height:1.2}
.book-opt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.book-chg{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;opacity:.9}

/* Клубника выбегает и толкает сову (berryEntrance в app.js) */
.berry-run{position:fixed;z-index:60;pointer-events:none;transition:left .9s cubic-bezier(.3,.7,.4,1);animation:berryBob .22s ease-in-out infinite alternate}
.berry-run svg{width:100%;height:100%;display:block}
.berry-run.push{animation:none;transform:translateX(-14px) rotate(-8deg);transition:left .45s ease,transform .15s}
@keyframes berryBob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg)}}
.owl-live.owl-flyoff{animation:owlFly 1.25s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
.owl-live.owl-flyoff .o-wing.l{animation:flapL .12s ease-in-out infinite alternate}
.owl-live.owl-flyoff .o-wing.r{animation:flapR .12s ease-in-out infinite alternate}
@keyframes owlFly{0%{transform:none;opacity:1}18%{transform:translate(-26px,6px) rotate(-22deg)}
  45%{transform:translate(-70px,-60px) rotate(-10deg) scale(.9);opacity:1}100%{transform:translate(-180px,-70vh) rotate(-25deg) scale(.4);opacity:0}}