/* Кабінет Navchu.Online — схема «Папір» (вибір власника 11.11.2026), зібрано з mockups/home-v1.html і screens-v1.html.
   Шкала: 14 підпис · 16 текст · 20 підзаголовок · 28 назва картки · 32 заголовок · 56 велике число.
   Жирність: 500 текст · 700 підписи й кнопки · 800 заголовки й числа. Відступи кратні 4; бічне поле 24.
   Червоний — лише акцент: точка стану, лічильник, одна головна кнопка, стан «через 10 хв». */
:root{
  --ink:#1a1a1a; --red:#d50100; --red-deep:#aa0000; --red-tint:#fdf0ef; --ok:#16803c; --ok-bg:#e9f5ee; --ok-ink:#115f2c;
  --muted:#595959; --text2:#3d372f; --text3:#2e2a24; --hs:#5b5248;
  --bg:#f4efe6; --outer:#e6dccb; --paper:#fff; --warm:#f4f5f7; --line:#e4e6eb; --edge:#e7dfd0; --field:#7d7466;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --t-cap:14px; --t-body:16px; --t-sub:20px; --t-h2:28px; --t-h1:32px; --t-num:56px;
  --card-sh:0 14px 26px rgba(90,65,25,.14); --card-lip:#ddd3c1;
  --soft:rgba(26,26,26,.06); --soft-bd:rgba(26,26,26,.2);
  --tabs-bg:#fff; --tab-fg:#3d372f; --tab-on-bg:#d50100; --tab-on-fg:#fff;
  --col:430px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--outer)}
html.locked,html.locked body{overflow:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--outer);color:var(--ink);font-family:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--t-body);font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums}
button,input,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default}
a{color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px #fff}
[hidden]{display:none!important}
svg,img{display:block}
h1,h2,h3,p{margin:0}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* колонка: на телефоні — на весь екран, на широкому — 430 px по центру на теплому тлі */
#app{position:relative;max-width:var(--col);min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--bg)}
#view{container-type:inline-size;min-height:100vh;min-height:100dvh}
@media (min-width:431px){#app{box-shadow:0 0 0 1px rgba(80,55,20,.08),0 20px 60px rgba(80,55,20,.12)}}

/* заглушка-скелет під час першого завантаження */
.skel{padding:max(18px,env(safe-area-inset-top)) var(--s6) 0;display:flex;flex-direction:column;gap:var(--s4)}
.sk{display:block;border-radius:16px;background:linear-gradient(90deg,rgba(26,26,26,.06) 0,rgba(26,26,26,.1) 40%,rgba(26,26,26,.06) 80%);background-size:300% 100%;animation:sk 1.4s linear infinite}
.sk-row{display:flex;gap:var(--s3);align-items:center}
.sk-c{width:48px;height:48px;border-radius:50%}
.sk-b{flex:1;height:48px}
.sk-l{width:60%;height:32px;margin-top:var(--s6)}
.sk-h{width:80%;height:40px}
.sk-card{height:216px;border-radius:28px;margin-top:var(--s4)}
@keyframes sk{from{background-position:100% 0}to{background-position:-200% 0}}

/* зерно на теплому тлі */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.grain>*{position:relative;z-index:1}

/* маскоти: своя пропорція, ніколи не розтягуються */
.mas{display:block;flex:none;width:auto;max-width:none;object-fit:contain;align-self:flex-start}

/* ───── спільні елементи ───── */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo .wm{display:block;flex:none;height:56px;width:auto;max-width:none}
.trust{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s4);min-height:24px;font-size:var(--t-cap);color:var(--muted);opacity:.85}
.trust img,.trust svg{flex:none;width:20px;height:20px;opacity:.7}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s3);width:100%;min-height:56px;border-radius:16px;font-size:var(--t-body);font-weight:700;line-height:1.25;text-align:center;padding:var(--s2) var(--s4);text-decoration:none;border:1.5px solid transparent;transition:transform .12s,background .15s,opacity .15s}
.btn:active{transform:scale(.985)}
.btn.red{background:var(--red);color:#fff;border-color:var(--red)}.btn.red:active{background:var(--red-deep)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.col{flex-direction:column;gap:0}
.btn small{display:block;font-size:var(--t-cap);font-weight:500;line-height:1.3}
.btn.sm{min-height:48px;width:auto;padding:var(--s2) var(--s6);border-radius:14px}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.btn[aria-busy="true"]::after{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
.btn:disabled:not([aria-busy="true"]){opacity:.5}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.txt{background:none;min-height:48px;padding:0 var(--s4);font-weight:700;font-size:var(--t-body);text-decoration:underline;text-underline-offset:4px;border-radius:12px}
.card{position:relative;background:#fff;border-radius:24px;box-shadow:var(--card-sh),inset 0 0 0 1.5px var(--edge);overflow:hidden}
.card.hot{padding-left:8px}
.card.hot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--red)}
.chip{display:inline-flex;align-items:center;gap:var(--s2);flex:none;font-size:var(--t-cap);font-weight:700;line-height:1.2;padding:var(--s1) var(--s3);min-height:28px;border-radius:14px;background:var(--bg);color:var(--ink);white-space:nowrap}
.chip.red{background:var(--red);color:#fff}
.chip.tint{background:var(--red-tint);color:var(--red-deep)}
.chip.ok{background:var(--ok-bg);color:var(--ok-ink)}
.label{display:block;font-size:var(--t-cap);font-weight:700;color:var(--text2);margin-bottom:var(--s2)}
.input{width:100%;min-height:56px;border:1.5px solid var(--field);border-radius:16px;padding:0 var(--s4);font-size:var(--t-sub);font-weight:700;background:#fff;color:var(--ink);letter-spacing:.01em}
.input::placeholder{color:#6f675b;font-weight:500}
textarea.input{padding:var(--s3) var(--s4);min-height:96px;font-size:var(--t-body);font-weight:500;line-height:1.5;resize:none;letter-spacing:0}
input.input.sm{font-size:var(--t-body);font-weight:500;letter-spacing:0}
.err{display:flex;align-items:flex-start;gap:var(--s2);color:var(--red-deep);font-size:var(--t-body);font-weight:700;margin-top:var(--s3);line-height:1.4}
.err:empty{display:none}
.err .ic{width:20px;height:20px;margin-top:2px}
.hint{font-size:var(--t-cap);color:var(--muted);line-height:1.5}
.note{margin-top:var(--s4);padding:var(--s4);border-radius:16px;background:rgba(26,26,26,.05);color:var(--text3);line-height:1.5}
.pick{display:flex;flex-wrap:wrap;gap:var(--s3)}
.pick.g3,.pick.g4{display:grid;gap:var(--s3)}
.pick.g3{grid-template-columns:repeat(3,1fr)}
.pick.g4{grid-template-columns:repeat(4,1fr)}
.pick.g3 .fl,.pick.g4 .fl{width:100%;padding:0 var(--s2)}
.fl{flex:none;min-height:48px;padding:0 var(--s4);border-radius:24px;border:1.5px solid var(--ink);font-weight:700;font-size:var(--t-body);background:transparent;color:var(--ink)}
.fl[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ───── вхід і вітальні екрани ───── */
.login{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:max(var(--s6),env(safe-area-inset-top)) var(--s6) max(var(--s6),env(safe-area-inset-bottom))}
.login .grow{flex:1;min-height:var(--s3)}
.brandrow{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.login .mas{margin:var(--s6) 0 var(--s4)}
.login .mas.s{height:136px}
.login .mas.m{height:168px}
.login .mas.w{height:176px}
.login .mas.t{height:152px}
.login .mas.pop{animation:pop .6s cubic-bezier(.3,1.5,.5,1)}
.login h1{font-size:var(--t-h1);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.login .lead{margin-top:var(--s3);color:var(--text2);line-height:1.5}
.login .txt{margin-left:calc(var(--s4) * -1)}
.login .txt.c{margin-left:0}
.login .sum{margin-top:var(--s4);font-size:var(--t-cap);color:var(--text2);line-height:1.5}
.login .note.calm{margin-top:var(--s4)}
.formcard{margin-top:var(--s6);padding:var(--s6)}
.formcard .stack{margin-top:var(--s6)}
.formcard .why{margin-top:var(--s4)}
.cells{display:flex;gap:4px;margin-top:var(--s6)}
.cell{flex:1;min-width:0;height:64px;text-align:center;font-size:var(--t-h1);font-weight:800;border:1.5px solid var(--field);border-radius:16px;background:#fff;padding:0;caret-color:var(--red)}
.cell:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--ink)}
.cell:disabled{background:rgba(26,26,26,.04);opacity:.7}
.cells.bad .cell{border-color:var(--red);border-width:2px;background:var(--red-tint)}
.cells.bad{animation:shake .4s}
.resend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);margin-top:var(--s4);min-height:48px;color:var(--text2)}
.resend b{font-weight:700}
.ok-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.ok-wrap .ring{position:relative;display:block;align-self:flex-start}
.ok-wrap .ring .mas{height:208px;margin:0;animation:pop .6s cubic-bezier(.3,1.5,.5,1)}
.ok-wrap .ring::after{content:"";position:absolute;left:50%;top:55%;width:168px;height:168px;margin:-84px 0 0 -84px;border-radius:50%;border:3px solid var(--red);opacity:0;animation:burst .9s .15s ease-out}
.ok-wrap h1{margin-top:var(--s2)}
.wait-dots{display:inline-flex;gap:6px;margin-top:var(--s4)}
.wait-dots i{width:10px;height:10px;border-radius:50%;background:var(--red);animation:blink 1.2s ease-in-out infinite}
.wait-dots i:nth-child(2){animation-delay:.2s}.wait-dots i:nth-child(3){animation-delay:.4s}
.exit{flex:none;display:inline-flex;align-items:center;gap:var(--s2);min-height:48px;min-width:48px;padding:0 var(--s2);border-radius:12px;font-size:var(--t-cap);font-weight:700;color:var(--muted)}
.exit .ic{width:20px;height:20px}
.av{display:block;flex:none;width:120px;height:120px;margin:var(--s6) 0 var(--s4);border-radius:50%;background:#fff;overflow:hidden;box-shadow:var(--card-sh),inset 0 0 0 1.5px var(--edge)}
.av img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.steps{list-style:none;margin:var(--s6) 0 0;padding:var(--s2) var(--s6)}
.steps li{display:flex;align-items:center;gap:var(--s4);min-height:72px;padding:var(--s3) 0;border-bottom:1px solid var(--edge)}
.steps li:last-child{border-bottom:0}
.steps .no{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-weight:800}
.steps li.cur .no{background:var(--red);color:#fff}
.steps b{display:block;font-weight:700;line-height:1.3}
.steps small{display:block;font-size:var(--t-cap);color:var(--muted);line-height:1.4}
@media (max-height:760px){
  .login .mas.w{height:136px}
  .login .mas.t{height:120px}
  .login .mas.m{height:136px}
  .login .mas{margin:var(--s3) 0}
  .av{width:96px;height:96px;margin:var(--s3) 0}
  .login .lead{margin-top:var(--s2)}
}

/* ───── головний екран (заняття, перерва) ───── */
.hero{position:relative;padding:max(18px,env(safe-area-inset-top)) 0 18px}
.hm .hero{padding-bottom:0}
.bar{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s6)}
.rb{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1px solid var(--soft-bd);color:var(--ink);font-weight:800;font-size:var(--t-body)}
.rb:active{transform:scale(.94)}
.rb .cnt{position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--red);color:#fff;font-size:var(--t-cap);font-weight:700;display:grid;place-items:center;border:2px solid var(--bg);line-height:1}
.mascot-w{position:relative;flex:none;margin-left:auto}
.bubble+.mascot-w{margin-left:0}
.mascot{position:relative;flex:none;width:52px;height:52px;border-radius:50%;background:#fff;overflow:hidden;border:2px solid #fff;display:grid;place-items:end center;padding:0}
.mascot img{width:100%;height:100%;object-fit:cover}
.mascot-w .dot{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid #fff;z-index:2}
.bubble{position:relative;flex:1;min-width:0;background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(60,40,10,.14);border-radius:16px;padding:var(--s2) var(--s4);font-size:var(--t-cap);line-height:1.4;font-weight:700;text-align:left;min-height:48px;display:flex;align-items:center}
.bubble::after{content:"";position:absolute;right:-5px;top:50%;width:12px;height:12px;background:#fff;transform:translateY(-50%) rotate(45deg);border-radius:2px}
.bubble b{font-weight:800}

.now{padding:var(--s6) var(--s6) 0;min-height:152px}
.hm .now{padding-top:var(--s4)}
.now .lead{margin-top:var(--s3);color:var(--hs)}
.pill{display:inline-flex;align-items:center;gap:var(--s2);min-height:32px;padding:0 var(--s3);border-radius:16px;background:rgba(26,26,26,.07);border:1px solid rgba(26,26,26,.18);font-size:var(--t-cap);font-weight:700;color:var(--ink)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.hm .pill i{background:var(--field)}
.is-soon .pill{background:var(--red);color:#fff;border-color:var(--red)}
.is-soon .pill i{background:#fff;animation:blink 1.4s ease-in-out infinite}
.when{margin-top:var(--s3);font-size:var(--t-h1);line-height:1.15;font-weight:800;letter-spacing:-.015em}
.payline{margin-top:var(--s4)}
.payline p{color:var(--hs)}
.payline p b{color:var(--ink);font-weight:700}
.segs{display:flex;gap:var(--s1);margin-top:var(--s3);height:8px}
.segs i{flex:1;border-radius:4px;background:rgba(26,26,26,.14)}
.segs i.on{background:var(--ink)}
.flip{animation:flip .28s ease-out}

/* колода карток предметів */
.deck{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s6) var(--s8) var(--s3);scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.deck:focus-visible{outline-offset:-3px}
.hm .deck{padding-top:var(--s4);padding-bottom:var(--s1)}
.slot{flex:none;width:calc(100cqw - 64px);scroll-snap-align:center;scroll-snap-stop:always}
.sbj{position:relative;display:block;width:100%;height:216px;border-radius:28px;background:#fff;color:var(--ink);text-align:left;text-decoration:none;padding:var(--s6) var(--s6) var(--s6) var(--s8);overflow:hidden;
  box-shadow:0 6px 0 var(--card-lip),var(--card-sh),inset 0 0 0 1px rgba(26,26,26,.08);transition:transform .12s,box-shadow .12s}
.hm .sbj{height:168px}
/* як кнопка в макеті: назва й підпис по центру над капсулою Zoom */
.home .sbj:not(.add){display:flex;flex-direction:column;justify-content:center;padding-bottom:72px}
.sbj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--red);z-index:1}
.sbj::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--edge);pointer-events:none}
a.sbj:active{transform:translateY(4px);box-shadow:0 2px 0 var(--card-lip),0 6px 14px rgba(0,0,0,.2),inset 0 0 0 1px rgba(26,26,26,.08)}
.sbj .rings{position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(26,26,26,.07);box-shadow:0 0 0 27px rgba(26,26,26,.07)}
.sbj .ghost{position:absolute;right:14px;bottom:-30px;font-size:150px;line-height:1;font-weight:800;color:rgba(26,26,26,.07);letter-spacing:-.04em;pointer-events:none}
.c-subj{position:relative;display:block;font-size:var(--t-h2);line-height:1.15;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.c-sub{position:relative;display:block;margin-top:var(--s2);font-size:var(--t-cap);line-height:1.4;color:var(--muted)}
.c-zoom{position:absolute;left:var(--s8);bottom:var(--s6);display:inline-flex;align-items:center;gap:var(--s3);height:48px;padding:0 20px 0 var(--s4);border-radius:24px;background:var(--red);border:1.5px solid var(--red);color:#fff;font-weight:700;font-size:var(--t-body);max-width:calc(100% - 56px)}
.c-zoom .ic{width:24px;height:24px;color:#fff}
.c-zoom .t-soon{display:none}
.c-zoom.off{right:var(--s6);height:auto;min-height:48px;padding:var(--s2) var(--s3);background:transparent;border:1.5px dashed rgba(26,26,26,.3);color:var(--muted);font-size:var(--t-cap);line-height:1.3;gap:var(--s2)}
.c-zoom.off .ic{color:var(--muted)}
.sbj.soon{box-shadow:0 6px 0 var(--card-lip),var(--card-sh),0 0 0 3px var(--red);animation:ring 1.9s ease-out infinite}
.sbj.soon .c-zoom{right:var(--s6);justify-content:center;padding:var(--s2) var(--s3);gap:var(--s2);font-size:var(--t-cap);line-height:1.25;height:auto;min-height:48px;text-align:left}
.sbj.soon .t-soon{display:inline}.sbj.soon .t-norm{display:none}
@container (max-width:380px){.sbj.soon .c-zoom .ic{width:22px;height:22px}}
.sbj .c-done{position:absolute;left:var(--s8);bottom:var(--s6);display:inline-flex;align-items:center;gap:var(--s2);font-weight:700}
.sbj .c-done .ic{color:var(--ok)}
.sbj.add{background:transparent;box-shadow:none;border:2px dashed rgba(26,26,26,.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s4);text-align:center}
.sbj.add::before,.sbj.add::after{display:none}
.sbj.add:active{transform:scale(.98)}
.sbj.add .plus{width:72px;height:72px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.sbj.add .plus .ic{width:34px;height:34px;stroke-width:2.6}
.sbj.add .lbl{font-size:var(--t-sub);font-weight:700}
.dots{display:flex;justify-content:center;gap:var(--s2);padding:var(--s2) 0 0}
.dots i{width:8px;height:8px;border-radius:4px;background:rgba(26,26,26,.22);transition:width .2s,background .2s}
.dots i.on{width:22px;background:var(--ink)}

/* круглі дії */
.acts{display:flex;gap:var(--s3);padding:var(--s4) var(--s6) 0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.acts::-webkit-scrollbar{display:none}
.acts.one{padding-top:20px}
.act{flex:none;width:26cqw;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:var(--s2);color:var(--ink);font-size:var(--t-cap);font-weight:700;line-height:1.3;text-align:center;border-radius:16px;padding-bottom:var(--s1)}
.act .c{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1.5px solid var(--soft-bd);transition:transform .12s}
.act:active .c{transform:scale(.92)}
.act.sos .c{background:#fff;border-color:#d9cdb8;color:var(--red-deep)}
.is-soon .act.sos{order:-1}
.is-soon .act.sos .c{background:var(--red);border-color:var(--red);color:#fff;animation:ring2 1.9s ease-out infinite .3s}
.act .ic{width:28px;height:28px}
.act span:last-child{display:block;max-width:100px}
.wide{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:16px;background:var(--red);color:#fff;font-size:var(--t-body);font-weight:700;border:1.5px solid var(--red)}
.wide:active{background:var(--red-deep)}
.hcta{position:sticky;bottom:calc(max(var(--s4),env(safe-area-inset-bottom)) + 80px);z-index:4;padding:var(--s4) var(--s6) 0}

/* біла панель «Заняття» */
.panel{position:relative;background:var(--paper);border-radius:32px 32px 0 0;margin-top:var(--s2);padding:var(--s6) var(--s6) 136px;min-height:420px;box-shadow:0 -10px 28px rgba(80,55,20,.12)}
.hm .panel{margin-top:var(--s4)}
.p-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.p-head h2{font-size:var(--t-sub);font-weight:800;letter-spacing:-.01em}
.p-head span{font-size:var(--t-cap);color:var(--muted);text-align:right}
.p-grp{margin:var(--s6) 0 var(--s1);font-size:var(--t-cap);font-weight:700;color:var(--muted)}
.panel .note{margin-top:var(--s2)}
.row{display:flex;align-items:center;gap:var(--s4);width:100%;min-height:72px;padding:var(--s3) 0;text-align:left;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.ri{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--warm);color:var(--ink)}
.ri .ic{width:22px;height:22px}
.rt{flex:1;min-width:0;display:flex;flex-direction:column}
.rt b{font-weight:700;line-height:1.3}
.rt small{font-size:var(--t-cap);color:var(--muted);line-height:1.4}
.panel .chip{background:var(--warm)}
.row.next .ri{background:var(--red);color:#fff}
.row.next .chip{background:var(--red-tint);color:var(--red-deep)}
.row.done .ri{background:var(--ok-bg);color:var(--ok)}
.row.done .chip{background:transparent;color:var(--muted);padding-right:0}
.row.news{cursor:pointer;border-radius:0}
.row.news .ri{background:var(--ink);color:#fff}
.row.news.unread .chip{background:var(--red);color:#fff}
.row.news:active{background:var(--warm)}

/* ───── сторінки вкладок: новини, оплата, ще ───── */
.top{padding:max(var(--s6),env(safe-area-inset-top)) var(--s6) var(--s4)}
.top .row1{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.top h1{font-size:var(--t-h1);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.top p{margin-top:var(--s2);color:var(--text2)}
.top .mas{height:104px;align-self:flex-end;margin:0}
.body{padding:var(--s2) var(--s6) 136px}
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s1) var(--s6) var(--s4);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}

.nw{margin-top:var(--s4)}
.nw:first-child{margin-top:0}
.nw-h{display:block;width:100%;text-align:left;padding:var(--s6) var(--s6) var(--s4)}
.nw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.nw-top b{font-size:var(--t-sub);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.nw-sub{margin-top:var(--s1);font-size:var(--t-cap);color:var(--muted);line-height:1.4}
.nw-prev{margin-top:var(--s3);color:var(--text3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-prev:empty{display:none}
.nw-from{margin-top:var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:24px;font-size:var(--t-cap);font-weight:700;color:var(--text2)}
.nw-from .ic{transition:transform .2s}
.nw.open .nw-from .ic{transform:rotate(180deg)}
.nw-body{padding:var(--s2) var(--s6) var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.nw-text{line-height:1.5;white-space:pre-line;color:#2a2a2a}

.pay{margin-top:var(--s4);padding:var(--s6)}
.pay:first-child{margin-top:0}
.pay.hot{padding-left:calc(var(--s6) + 8px)}
.pay-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.pay-top b{display:block;font-size:var(--t-sub);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.pay-top small{display:block;margin-top:var(--s1);font-size:var(--t-cap);color:var(--muted)}
.big{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4)}
.big strong{font-size:var(--t-num);line-height:1;font-weight:800;letter-spacing:-.04em}
.big span{font-weight:700;color:var(--text2);line-height:1.3}
.pay .segs{margin-top:var(--s4)}
.kv{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--s3);margin-top:var(--s4)}
.kv.one{grid-template-columns:1fr}
.kv div{background:var(--bg);border-radius:16px;padding:var(--s3) var(--s4)}
.kv span{display:block;font-size:var(--t-cap);color:var(--muted);font-weight:700}
.kv b{display:block;margin-top:var(--s1);font-size:var(--t-sub);font-weight:800;line-height:1.2}
.kv small{display:block;font-size:var(--t-cap);color:var(--text2);line-height:1.4}
.kv.p{grid-template-columns:1fr}
.kv.p div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.kv.p b{margin-top:0;font-size:var(--t-body)}
.kv.p span,.kv.p b{white-space:nowrap}
.pay .btn{margin-top:var(--s6)}

.grp{margin-top:var(--s4);padding:var(--s6)}
.grp:first-child{margin-top:0}
.grp h2{font-size:var(--t-sub);font-weight:800;letter-spacing:-.01em;line-height:1.25;margin-bottom:var(--s2)}
.grp>p{color:var(--muted);margin-bottom:var(--s2)}
.grp .btn{margin-top:var(--s4)}
.grp .label{margin-top:var(--s4)}
.grp .pick{margin-top:var(--s2)}
.dv{display:flex;align-items:center;gap:var(--s4);min-height:72px;padding:var(--s3) 0;border-bottom:1px solid var(--edge)}
.dv:last-child{border-bottom:0}
.dv .ri,.link .ri{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg)}
.dv .rt{flex:1;min-width:0}
.dv .rt b,.link b{display:block;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.dv .rt small,.link small{display:block;font-size:var(--t-cap);color:var(--muted);line-height:1.4}
.consent{margin-top:var(--s3);font-size:var(--t-cap);color:var(--text2);line-height:1.5}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;cursor:pointer;font-size:var(--t-sub);font-weight:800;letter-spacing:-.01em;border-radius:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{transition:transform .2s}
.acc[open] summary .ic{transform:rotate(180deg)}
.acc ul{margin:var(--s2) 0 0;padding-left:var(--s6);line-height:1.5}
.acc li+li{margin-top:var(--s2)}
.link{display:flex;align-items:center;gap:var(--s4);min-height:72px;padding:var(--s3) 0;text-decoration:none;border-bottom:1px solid var(--edge)}
.link:last-child{border-bottom:0}
.link .ri.kit{background:transparent}
.link .ri.kit .mas{height:44px;width:auto;align-self:center}

/* плаваюча панель вкладок — завжди над вмістом, у межах колонки */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:max(var(--s4),env(safe-area-inset-bottom));z-index:10;display:flex;gap:var(--s1);padding:6px;border-radius:34px;background:var(--tabs-bg);box-shadow:0 12px 30px rgba(80,55,20,.22),0 0 0 1px #e3ddd2;max-width:calc(100vw - 16px)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-width:76px;height:60px;padding:0 var(--s1);border-radius:28px;color:var(--tab-fg);font-size:var(--t-cap);font-weight:700;line-height:1.2}
@media (max-width:370px){.tab{min-width:72px}}
.tab[aria-current="page"]{background:var(--tab-on-bg);color:var(--tab-on-fg)}
.tab .dot{position:absolute;top:8px;right:18px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--tabs-bg)}
.tab[aria-current="page"] .dot{background:#fff;border-color:var(--tab-on-bg)}

/* нижня панель */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:100%;max-width:var(--col);max-height:92%;max-height:92dvh;overflow:auto;background:#fff;color:var(--ink);border-radius:28px 28px 0 0;padding:var(--s3) var(--s6) max(var(--s6),env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--s4);animation:up .26s cubic-bezier(.2,.8,.2,1)}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:#cfd2d8;align-self:center;margin-bottom:var(--s1);flex:none}
.sheet h2{font-size:var(--t-sub);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.sheet p{color:#3f3f3f;line-height:1.5}
.sheet .sub{font-weight:700;color:var(--ink)}
.sheet .err{margin-top:0}
.sheet.split{overflow:hidden}
.sbody{display:flex;flex-direction:column;gap:var(--s4);overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:0 1 auto;padding:8px;margin:-8px;scrollbar-width:none}
.sbody::-webkit-scrollbar{display:none}
.sfoot{flex:none;display:flex;flex-direction:column;gap:var(--s3)}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3)}
.done img{height:112px;width:auto;flex:none;object-fit:contain;animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
.done h2{color:var(--ok)}
.done .late{padding:var(--s3) var(--s4);border-radius:16px;background:var(--red-tint);color:#5a0000;font-weight:700;text-align:left}
.srow{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--edge)}
.srow:last-of-type{border-bottom:0}
.srow b{display:block}.srow small{font-size:var(--t-cap);color:var(--muted)}
.srow .chip{margin-left:auto}
.fb{background:var(--bg);border-radius:16px;padding:var(--s4);line-height:1.5;color:#2a2a2a;white-space:pre-line}

.toast{position:fixed;left:50%;transform:translateX(-50%);top:max(80px,calc(env(safe-area-inset-top) + 64px));width:calc(min(100vw,var(--col)) - 48px);z-index:30;background:#fff;color:var(--ink);border-radius:16px;padding:var(--s3) var(--s4);font-size:var(--t-cap);font-weight:700;line-height:1.4;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:fade .2s}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.55) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes burst{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes flip{from{opacity:.15;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%{box-shadow:0 6px 0 var(--card-lip),var(--card-sh),0 0 0 3px var(--red),0 0 0 3px rgba(213,1,0,.6)}100%{box-shadow:0 6px 0 var(--card-lip),var(--card-sh),0 0 0 3px var(--red),0 0 0 16px transparent}}
@keyframes ring2{0%{box-shadow:0 0 0 0 rgba(213,1,0,.45)}100%{box-shadow:0 0 0 14px rgba(213,1,0,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}