/* Чайная полка — вид «Настой + полка» (макет утверждён 17.10.2026) поверх общего стиля «Мягкие карточки» (style.css).
   Шрифты: Unbounded — заголовки и цифры, Golos Text — текст. Оба лежат рядом, со своего сервера.
   Цвет чая приходит в элемент переменными --tea / --tea-l / --tea-d (функция teaStyle в app.js). */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400 700;font-display:swap;src:url(./unbounded-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:400 700;font-display:swap;src:url(./unbounded-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- палитры: светлая и тёмная (из макета) ---------- */
:root{--bg:#f4f2ee;--card:#fff;--field:#f8f6f2;--soft:#efebe4;--tx:#1d1b18;--mu:#6b665d;--ln:#ebe6dd;--lnf:#ddd5c8;
 --ac:#b5651d;--ach:#8f4d14;--acx:#fff;--acs:#fbeccc;--acink:#7a4b0c;--rim:#fff;--shadow:rgba(120,80,30,.18);--hov:#f1ede6;--ring:rgba(181,101,29,.22);
 --bad:#b4462c;--badbg:#fbe7e1;--warn:#9a5b0c;--warnbg:#fdf0d6;--ok:#3c7a3a;--okbg:#e5f0df;
 --sh:0 1px 2px rgba(120,80,30,.05),0 6px 20px rgba(120,80,30,.06);--sh2:0 1px 2px rgba(120,80,30,.06),0 10px 28px rgba(120,80,30,.1);
 --tea:#c98a1f;--tea-l:#f3cf7a;--tea-d:#7c5513;--disp:"Unbounded","Golos Text",system-ui,sans-serif;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e0f12;--card:#17191e;--field:#1b1e23;--soft:#22252c;--tx:#f2efe9;--mu:#a3a6ae;--ln:#24272e;--lnf:#30343c;
 --ac:#e0a35a;--ach:#f0b874;--acx:#17191e;--acs:#3a2a10;--acink:#f3cf7a;--rim:#2b2e35;--shadow:rgba(0,0,0,.5);--hov:#1f2228;--ring:rgba(224,163,90,.3);
 --bad:#f08a6a;--badbg:#3a1c14;--warn:#f0b45a;--warnbg:#33270f;--ok:#8fcf7a;--okbg:#1b2a16;--sh:0 1px 2px rgba(0,0,0,.3);--sh2:0 8px 24px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme=dark]{--bg:#0e0f12;--card:#17191e;--field:#1b1e23;--soft:#22252c;--tx:#f2efe9;--mu:#a3a6ae;--ln:#24272e;--lnf:#30343c;
 --ac:#e0a35a;--ach:#f0b874;--acx:#17191e;--acs:#3a2a10;--acink:#f3cf7a;--rim:#2b2e35;--shadow:rgba(0,0,0,.5);--hov:#1f2228;--ring:rgba(224,163,90,.3);
 --bad:#f08a6a;--badbg:#3a1c14;--warn:#f0b45a;--warnbg:#33270f;--ok:#8fcf7a;--okbg:#1b2a16;--sh:0 1px 2px rgba(0,0,0,.3);--sh2:0 8px 24px rgba(0,0,0,.4);color-scheme:dark}

body{background:var(--bg);color:var(--tx)}
/* мигание экрана в конце пролива (flash в app.js) */
.flashx{position:fixed;inset:0;z-index:9999;pointer-events:none;background:var(--ac);opacity:0;animation:flashx .42s ease-in-out 2}
.flashx.one{animation-iteration-count:1}
@keyframes flashx{50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){.flashx{animation:flashx 1.2s ease-in-out 1}}
.qr{display:flex;justify-content:center}.qr svg{width:min(240px,70vw);height:auto;background:#fff;border-radius:12px;padding:6px}
a{color:var(--ac)}a:hover{color:var(--ach)}
h1{font-family:var(--disp);font-size:24px;font-weight:600;line-height:1.2}
h2{font-family:var(--disp);font-weight:600}
.muted{color:var(--mu)}
.warnt{color:var(--warn)!important}

/* ---------- шапка ---------- */
header{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:0;padding:10px 24px;gap:10px 18px}
.logo{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--tx);text-decoration:none;margin:0;gap:10px}
.logo:hover{color:var(--tx)}
.logo i{width:30px;height:30px;border-radius:50%;background:var(--tea-now,#c98a1f);box-shadow:inset 0 0 0 5px var(--rim),0 2px 8px var(--shadow);transition:background-color .3s}
header nav{background:var(--soft);border-radius:999px;padding:4px;gap:2px}
header nav a,details.more>summary{font-size:14px;padding:7px 14px;border-radius:999px;color:var(--mu);gap:7px}
header nav>a svg,details.more>summary svg{display:none}
header nav a:hover,details.more>summary:hover{background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--tx)}
header nav a.on,details.more.on>summary{background:var(--card);color:var(--tx);font-weight:600;box-shadow:var(--sh)}
details.more{position:relative}
details.more>summary{list-style:none;display:inline-flex;align-items:center;cursor:pointer;transition:background-color .15s,color .15s}
details.more>summary::-webkit-details-marker{display:none}
details.more .menu{position:absolute;top:calc(100% + 8px);left:0;z-index:8;background:var(--card);border-radius:18px;box-shadow:var(--sh2);padding:6px;display:grid;min-width:230px}
details.more .menu a{justify-content:flex-start;border-radius:12px}
details.more .menu a.on{box-shadow:none;background:var(--soft)}
.who{display:flex;align-items:center;margin-left:auto;padding-left:6px}
.who button{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);background:var(--soft);color:var(--mu);font:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-left:-6px;position:relative;transition:transform .15s}
.who button:hover{transform:translateY(-1px);z-index:2}
.who button.on{border-color:var(--tea-now,var(--ac));background:var(--card);color:var(--tx);z-index:1}
.th{margin-left:4px;border:0;border-radius:999px;background:var(--soft);padding:3px}
.th button{border-radius:999px;width:30px;height:30px;padding:0}
.th button svg{width:15px;height:15px}
.th button[aria-pressed=true]{background:var(--card);color:var(--tx)}

/* ---------- страница ---------- */
main{max-width:940px;padding:8px 24px 48px;gap:16px}
main.wide{max-width:1280px;gap:16px}
.card{border:0;border-radius:22px;padding:18px 20px;box-shadow:var(--sh)}
.card:hover{box-shadow:var(--sh)}
.ttl{font-family:var(--disp);font-weight:600;font-size:16px;gap:10px}
.ttl h1{font-size:24px}
.ttl .ic{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--tea-now,var(--ac)) 20%,var(--card));color:color-mix(in srgb,var(--tea-now,var(--ac)) 70%,var(--tx))}
.sub{margin-top:4px}
.hint{font-size:12px;color:var(--mu)}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--card);border:0;border-radius:18px;padding:10px 16px;box-shadow:var(--sh);min-width:110px}
.stat b{display:block;font-family:var(--disp);font-size:20px;font-weight:600;line-height:1.25}
.stat span{font-size:12px;color:var(--mu)}

/* поля и кнопки */
input,select,textarea{border:1px solid var(--ln);border-radius:12px;background:var(--field)}
a.b,button.b{border:0;border-radius:999px;background:var(--soft);color:var(--tx);padding:10px 18px}
.b:hover:not(:disabled){box-shadow:0 4px 12px var(--shadow)}
button.p{background:var(--ac);color:var(--acx)}button.p:hover:not(:disabled){background:var(--ach)}
button.b.go{background:var(--tea);color:#fff;font-size:16px;font-weight:700;padding:14px 26px}
button.b.go:hover:not(:disabled){filter:brightness(1.08)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{font:inherit;font-size:14px;font-weight:600;padding:8px 15px;border-radius:999px;border:0;background:var(--soft);color:var(--tx);cursor:pointer;transition:background-color .15s,color .15s}
.pill:hover{background:color-mix(in srgb,var(--soft) 70%,var(--tx) 8%)}
.pill[aria-pressed=true]{background:var(--tx);color:var(--bg)}
.pill.sm{font-size:13px;padding:5px 12px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.bdg{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--tx);white-space:nowrap}
.bdg.green{background:var(--okbg);color:var(--ok)}.bdg.red{background:var(--badbg);color:var(--bad)}
.bdg.orange{background:var(--warnbg);color:var(--warn)}.bdg.blue{background:var(--acs);color:var(--acink)}
.bdg.star{background:var(--warnbg);color:var(--warn)}
.bdg.tint{background:color-mix(in srgb,var(--tea) 20%,var(--card));color:color-mix(in srgb,var(--tea) 62%,var(--tx))}
.alert{font-size:13px;border-radius:14px;padding:9px 13px;background:var(--warnbg);color:var(--warn)}
.alert.info{background:var(--acs);color:var(--acink)}.alert.ok{background:var(--okbg);color:var(--ok)}.alert.bad{background:var(--badbg);color:var(--bad)}
.why{font-size:13px;color:var(--mu)}
.tea h2{font-size:19px;margin:0;line-height:1.25}
.tea .lead{font-size:12px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.04em}

/* переключатели: вкладки и посуда — одна «таблетка» с сегментами */
.tabs,.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--soft);border:0;width:fit-content;max-width:100%}
.tabs button,.seg button{font:inherit;font-size:14px;font-weight:600;border:0;background:none;color:var(--mu);padding:7px 14px;border-radius:999px;cursor:pointer;margin:0}
.tabs button[aria-selected=true],.seg button[aria-selected=true]{background:var(--card);color:var(--tx);box-shadow:var(--sh)}
.brew{display:grid;gap:8px;font-size:14px}
.facts{display:flex;gap:6px 14px;flex-wrap:wrap}

/* ---------- проливы: «таблетки» (общие для большого и обычного таймера) ---------- */
.timer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.timer .big{font-family:var(--disp);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;min-width:70px}
.timer .steps,.chain{display:flex;gap:6px;flex-wrap:wrap}
.timer .steps{flex-basis:100%}
.timer .steps i,.stp{font:600 14px/1.2 var(--disp);font-style:normal;min-width:44px;text-align:center;padding:7px 10px;border-radius:999px;border:2px dashed var(--mu);color:var(--tx);background:transparent;font-variant-numeric:tabular-nums}
.stp{cursor:pointer}
.timer .steps i.done,.stp.done{background:var(--tea);border:2px solid var(--tea);color:#fff}
.timer .steps i.cur,.stp.cur{border:2px solid var(--tea);box-shadow:0 0 0 3px color-mix(in srgb,var(--tea) 22%,transparent)}
.timer .steps i.ext,.stp.ext{border-style:dotted;color:var(--mu);opacity:.45}
.stp.add{font-family:"Golos Text",system-ui,sans-serif;font-size:13px;font-weight:700;color:var(--mu);padding:7px 12px}
.timer.huge .big{font-size:96px;line-height:1}
.timer.huge .b{font-size:20px;padding:14px 22px}
.timer.huge{justify-content:center;gap:18px}

/* ---------- главная: строка сверху (кто, время, кофеин, цели, настройки) ---------- */
main.now{gap:14px;padding-top:4px;padding-bottom:20px}
.now-strip{display:flex;gap:10px;align-items:center;min-width:0}
.now-line{font-family:var(--disp);font-size:12.5px;color:var(--mu);white-space:nowrap;flex:none}
.now-line b{color:var(--tx);font-weight:600}
.goals{display:flex;gap:5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.goals::-webkit-scrollbar{display:none}
.goals .pill{flex:none;white-space:nowrap}
.ibtn,.ib{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);color:var(--tx);cursor:pointer;padding:0;transition:background-color .15s,box-shadow .15s}
.ibtn:hover,.ib:hover:not(:disabled){box-shadow:0 3px 10px var(--shadow)}
.ib.sm{width:28px;height:28px}.ib.sm svg{width:15px;height:15px}
.ib:disabled{opacity:.35;cursor:default}
.ibtn[aria-expanded=true]{background:var(--tx);color:var(--bg)}
.pill.tog{background:transparent;box-shadow:inset 0 0 0 1.5px var(--lnf);color:var(--mu);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.pill.tog input{width:auto;margin:0;accent-color:var(--ac)}
.pill.tog:has(input:checked){color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--tea-now,var(--ac))}

/* ---------- главная: большая карточка — чашка | о чае | заваривание ---------- */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(330px,390px);gap:14px 28px;align-items:center;border-radius:28px;padding:20px 26px}
.hero.empty{display:grid;grid-template-columns:1fr;gap:12px}
.cup{flex:none;width:224px;aspect-ratio:1;position:relative;display:grid;place-items:center;margin:0 auto;border:0;padding:0;background:none;cursor:pointer;color:inherit;font:inherit;border-radius:50%;-webkit-tap-highlight-color:transparent}
.cup:focus-visible{outline:3px solid var(--tea);outline-offset:4px}
.cup svg{position:absolute;inset:0;width:100%;height:100%;stroke-width:initial;pointer-events:none}
.cup .trk{fill:none;stroke:var(--soft);stroke-width:7}
.cup .prg{fill:none;stroke:var(--tea);stroke-width:7;stroke-linecap:round;transition:stroke-dasharray .3s linear,opacity .2s}
.cup .rim{width:78%;aspect-ratio:1;border-radius:50%;background:var(--rim);display:grid;place-items:center;box-shadow:0 16px 36px var(--shadow);transition:transform .25s}
.cup:hover .rim{transform:scale(1.015)}
.cup:active .rim{transform:scale(.985)}
.cup .liq{--lq:var(--tea);--lq-l:var(--tea-l);--lq-d:var(--tea-d);position:relative;overflow:hidden;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--lq-l) 0%,var(--lq) 55%,var(--lq-d) 100%);display:grid;place-items:center;text-align:center;color:#fff;transition:background .8s}
/* «вода» поверх настоя: пока идёт пролив, бледнеет и открывает цвет */
.cup .water{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fffaf0 0%,#f3e7cf 70%,#e2d2b0 100%);opacity:0;transition:opacity .3s linear;pointer-events:none}
.cup .liq::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 45% 22% at 36% 26%,rgba(255,255,255,.32),transparent 70%);pointer-events:none}
.cup-c{position:relative;z-index:1}
.cup-t{display:block;font-family:var(--disp);font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.cup-t.word{font-size:20px;padding:0 6px}
.cup-s{display:block;font-size:12.5px;opacity:.94;margin-top:6px;text-shadow:0 1px 4px rgba(0,0,0,.35);padding:0 10px}
.cup.pale .cup-t,.cup.pale .cup-s{color:#4a3518;text-shadow:0 1px 6px rgba(255,255,255,.5)}
/* пар над чашкой, пока настаивается */
.steam{position:absolute;left:50%;top:-6px;width:80px;height:44px;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .6s}
.steam i{position:absolute;bottom:0;width:10px;height:36px;border-radius:50%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mu) 45%,transparent));filter:blur(4px)}
.steam i:nth-child(1){left:18px}.steam i:nth-child(2){left:36px;height:42px}.steam i:nth-child(3){left:54px}
.hero.run .steam{opacity:.75}
.hero.run .steam i{animation:steam 2.6s ease-in-out infinite}
.hero.run .steam i:nth-child(2){animation-delay:.8s}.hero.run .steam i:nth-child(3){animation-delay:1.6s}
@keyframes steam{0%{transform:translateY(8px) scaleX(.8);opacity:0}35%{opacity:.9}100%{transform:translateY(-26px) scaleX(1.5);opacity:0}}
/* «Сливайте!» — чашка мягко пульсирует */
.hero.ready .rim{animation:ready 1.4s ease-in-out infinite}
@keyframes ready{0%,100%{box-shadow:0 16px 36px var(--shadow),0 0 0 0 color-mix(in srgb,var(--tea) 45%,transparent)}50%{box-shadow:0 16px 36px var(--shadow),0 0 0 14px color-mix(in srgb,var(--tea) 0%,transparent)}}

.hero-i{min-width:0;display:flex;flex-direction:column;gap:7px;align-self:center}
.hero-nr{display:block;line-height:1.1}
.hero-n{display:inline;margin:0 12px 0 0;font-family:var(--disp);font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.hero-n.long{font-size:clamp(19px,1.8vw,24px)}
.pickb{vertical-align:.3em;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;padding:6px 10px 6px 13px;background:color-mix(in srgb,var(--tea) 16%,var(--card));color:color-mix(in srgb,var(--tea) 62%,var(--tx));cursor:pointer;transition:background-color .15s,box-shadow .15s}
.pickb:hover{box-shadow:0 3px 10px var(--shadow)}
.pickb svg{width:15px;height:15px;transition:transform .2s}
.pickb[aria-expanded=true] svg{transform:rotate(180deg)}
.hero-d{font-size:14.5px;color:var(--mu);line-height:1.35}
.why{font-size:13px;color:var(--mu);line-height:1.35}
.cau{display:flex;gap:7px;align-items:flex-start;text-align:left;font:inherit;font-size:12.5px;line-height:1.4;border:0;border-radius:12px;padding:6px 11px;background:var(--warnbg);color:var(--warn);cursor:pointer;width:fit-content;max-width:100%}
.cau svg{width:15px;height:15px;margin-top:1px}
.cau span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cau[aria-expanded=true] span{-webkit-line-clamp:unset}
.badges .bdg.back{text-decoration:none;color:var(--mu);background:transparent;box-shadow:inset 0 0 0 1.5px var(--lnf)}
.badges .bdg.back:hover{color:var(--tx)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:3px}
.tile{background:var(--soft);border-radius:14px;padding:7px 11px;min-width:0}
.tile span{display:block;font-size:11.5px;color:var(--mu)}
.tile b{display:block;font-family:var(--disp);font-size:clamp(14px,1.2vw,17px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{display:block;font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hero-b{min-width:0;display:flex;flex-direction:column;gap:9px;align-self:center}
.hero-b .seg{align-self:flex-start}
.hero-b .seg button{font-size:13px;padding:5px 12px}
.acts{display:flex;gap:8px;align-items:center}
.acts .b{flex:none;padding:10px 14px;font-size:14px}
.acts .b.ib{width:42px;height:42px;padding:0;justify-content:center}
button.b.go{flex:1 1 auto;justify-content:center;background:var(--tea);color:#fff;font-size:16px;font-weight:700;padding:13px 20px;box-shadow:0 6px 18px color-mix(in srgb,var(--tea) 35%,transparent)}
button.b.go:hover:not(:disabled){filter:brightness(1.08)}
.chainbox{display:grid;gap:5px}
.chain{display:flex;gap:5px;flex-wrap:wrap}
.chain .stp{min-width:38px;padding:5px 8px;font-size:13px}
.stp.rin{font-family:"Golos Text",system-ui,sans-serif;font-weight:700;font-size:12px;border-style:dashed;color:var(--mu)}
.stp.rin.done{background:var(--soft);border:2px solid var(--soft);color:var(--mu)}
.cafl .hint{display:flex;gap:6px;align-items:center;font-size:12.5px;line-height:1.35}
.cafl svg{width:15px;height:15px;opacity:.75}
.btxt:empty{display:none}
.more-t{font:inherit;font-size:12px;line-height:1.4;color:var(--mu);text-align:left;border:0;background:none;padding:0;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more-t[aria-expanded=true]{-webkit-line-clamp:unset}
.hero-txt{background:var(--soft);border-radius:14px;padding:10px 12px;font-size:13.5px}
.hero.skip .badges .bdg.tint{background:var(--warnbg);color:var(--warn)}

/* ---------- главная: три колонки внизу ---------- */
.now-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;align-items:stretch}
@media(min-width:1000px){.now-cols{grid-template-columns:1.35fr 1fr 1fr}}
.colst{display:flex;flex-direction:column;gap:14px;min-width:0}
.col{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.colst>.col:last-child{flex:1}
.colh{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:28px}
.colh>span{font-family:var(--disp);font-size:14.5px;font-weight:600}
.colh>span small{font-family:"Golos Text",system-ui,sans-serif;font-weight:600;color:var(--mu);font-size:12px;margin-left:4px}
.colh a,.colh small{font-size:12.5px;color:var(--mu)}
.colh a{color:var(--ac);text-decoration:none}
.pager{display:flex;align-items:center;gap:6px}
.pager small{min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.jars{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start}
.jarl{display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:inherit;border-radius:12px;padding:4px 5px;transition:background-color .15s}
.jarl:hover{background:var(--hov);color:inherit}
.jt{display:flex;flex-direction:column;gap:1px;min-width:0}
.jarl .jt b{font-size:12px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.jt small{font-size:11px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jt small.low{color:var(--bad)}
.jar{flex:none;width:22px;height:34px;border-radius:8px 8px 6px 6px;border:2px solid var(--soft);background:var(--soft);position:relative;overflow:hidden;display:block}
.jar>span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--tea-l),var(--tea));display:block}
.jarl.cur{background:color-mix(in srgb,var(--tea-now,var(--ac)) 12%,transparent)}
.jarl.cur .jar{border-color:var(--tea)}
.jar.sm{width:20px;height:30px;border-radius:7px 7px 5px 5px}
.jar.xs{width:15px;height:22px;border-radius:5px 5px 4px 4px;border-width:1.5px}
.alt{display:flex;gap:12px;align-items:center;padding:5px 6px;margin:0 -6px;border-radius:14px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.alt:hover{background:var(--hov)}
.alt .jt b{font-size:13.5px;line-height:1.25}
.alt .jt small{font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.dot{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--tea-l),var(--tea) 60%);box-shadow:0 0 0 3px var(--soft)}
.dot.sm{width:12px;height:12px;background:var(--tea);box-shadow:none}
.ask{background:color-mix(in srgb,var(--tea) 20%,var(--card));color:color-mix(in srgb,var(--tea) 55%,var(--tx));border-radius:22px;padding:12px 16px;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.ask small{font-weight:400;font-size:12px}
.ask .row{gap:6px}
.ask .pill{background:var(--card);color:var(--tx);font-size:12.5px;padding:5px 11px}
.ask{transition:opacity .25s,transform .25s}
.ask.bye{opacity:0;transform:scale(.97)}
/* «Как спали?» — утром вместо «как подействовал?»: заголовок и «вчера вечером: …» в одну строку, чтобы главная не стала выше */
.ask.sleep{--tea:var(--ac)}
.ask-h{display:flex;align-items:center;gap:8px;min-width:0}
.ask-h b{flex:none;display:inline-flex;align-items:center;gap:6px}
.ask-h b svg{width:15px;height:15px}
.ask-h small{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.ask-x{flex:none;display:grid;place-items:center;width:24px;height:24px;margin:-4px -6px -4px 0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.55;padding:0}
.ask-x:hover{opacity:1;background:var(--card)}
.ask-x svg{width:14px;height:14px}
.ask .pill:disabled{opacity:.6;cursor:default}
@media(max-width:600px){.ask-h{flex-wrap:wrap;row-gap:2px}.ask-x{margin-left:auto}.ask-h small{order:3;flex-basis:100%;white-space:normal}}
/* цвет оценки сна: 1 — плохо, 2 — нормально, 3 — хорошо */
.sq{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--soft)}
.sq.q1{background:var(--bad)}.sq.q2{background:var(--warn)}.sq.q3{background:var(--ok)}
.lowl{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--mu);border-top:1px solid var(--ln);padding-top:7px;line-height:1.45}
.lowl>svg{width:14px;height:14px;color:var(--warn);margin-top:2px}
.lowl .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lowl span span{white-space:nowrap}
.lowl .dot.sm{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:1px}
.lowl a{font-weight:700;text-decoration:none;white-space:nowrap;flex:none}
.lowl .grow:empty{display:none}
.lowl .grow:empty+a{margin-right:auto}
.lnk{font:inherit;font-size:12.5px;font-weight:700;border:0;background:none;color:var(--ac);cursor:pointer;padding:2px 0;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.lnk svg{width:14px;height:14px}
.lnk:hover{color:var(--ach);text-decoration:underline}
.bars{display:flex;align-items:flex-end;gap:2px;height:64px;flex:1;min-height:44px;max-height:96px}
.bars i{flex:1;height:100%;position:relative}
.bars s,.bars u{position:absolute;left:0;right:0;bottom:0;border-radius:3px 3px 0 0;text-decoration:none}
.bars s{background:var(--soft)}
.bars i.p s{background:var(--tea)}
.bars u{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--tea) 45%,transparent) 0 3px,transparent 3px 6px);border-top:2px solid color-mix(in srgb,var(--tea) 70%,transparent)}
.bars i.bed::after{content:"";position:absolute;left:50%;top:-4px;bottom:0;border-left:1.5px dashed var(--mu);opacity:.6}
.barl{position:relative;height:16px;font-size:11px;color:var(--mu)}
.barl span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}

/* ---------- всплывающие рамки ---------- */
.pop:focus{outline:none}
.pop{position:absolute;z-index:30;background:var(--card);border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.08),0 18px 48px var(--shadow);padding:14px;display:grid;gap:10px;width:min(360px,calc(100vw - 24px));animation:popin .16s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.pop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:24px 24px 0 0;max-height:78vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));animation:sheetin .2s ease-out}
.pop.sheet::before{content:"";justify-self:center;width:42px;height:4px;border-radius:2px;background:var(--lnf);margin:-6px 0 2px}
@keyframes sheetin{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
.pop-h{font-family:var(--disp);font-size:14.5px;font-weight:600}
.pop .chk{font-size:14px}
.pop .seg button{font-size:13px;padding:6px 12px}
.pk-pop{width:min(380px,calc(100vw - 24px));padding:10px;gap:6px}
.pk{display:grid;gap:6px}
.pk-s{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--ln);border-radius:14px;padding:0 12px;color:var(--mu)}
.pk-s:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--ring)}
.pk-s input{border:0;background:none;padding:10px 0;box-shadow:none!important}
.pk-l{max-height:min(380px,52vh);overflow:auto;display:grid;gap:1px;padding:2px;overscroll-behavior:contain}
.pop.sheet .pk-l{max-height:52vh}
.pk-g{font-size:11.5px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;padding:9px 8px 3px}
.pk-g small{font-weight:600;opacity:.8;margin-left:3px}
.pk-r{display:flex;align-items:center;gap:10px;width:100%;font:inherit;color:inherit;text-align:left;border:0;background:none;border-radius:12px;padding:6px 8px;cursor:pointer;text-decoration:none;transition:background-color .12s}
.pk-r:hover,.pk-r:focus-visible{background:var(--hov);outline:none;color:inherit}
.pk-r.on{background:color-mix(in srgb,var(--tea) 14%,transparent)}
.pk-r .jt{flex:1}
.pk-r .jt b{font-size:13.5px;line-height:1.25}
.pk-r.no .jt b{color:var(--mu)}
.pk-x{flex:none;font-size:11px;font-weight:700;color:var(--warn);background:var(--warnbg);border-radius:999px;padding:2px 8px}
.pk-0{padding:10px 8px;margin:0}
.pk-f{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--ln);padding:8px 6px 2px;font-size:12.5px}
.pk-f .chk{font-size:12.5px;color:var(--mu)}
.pk-f a{text-decoration:none;font-weight:700}
.skip-pop{width:min(340px,calc(100vw - 24px))}
.skl{display:grid;gap:1px;max-height:300px;overflow:auto}
.skl .jt small{white-space:normal}
.log-pop{width:min(320px,calc(100vw - 24px))}
.logf{display:grid;gap:10px}
.logf .lab{font-size:13px;color:var(--mu);min-width:70px}
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--soft);border-radius:999px;padding:2px}
.stepper button{width:30px;height:30px;border:0;border-radius:50%;background:var(--card);color:var(--tx);font:700 16px/1 system-ui;cursor:pointer}
.stepper b{min-width:30px;text-align:center;font-family:var(--disp);font-variant-numeric:tabular-nums}
.flt-pop{width:min(420px,calc(100vw - 24px))}
.fg{display:grid;gap:5px}
.fg>label{font-size:12px;font-weight:600}
.fg .pills{gap:5px}
.pop-f{justify-content:space-between;border-top:1px solid var(--ln);padding-top:8px}
.pill.on{background:var(--tx);color:var(--bg)}

/* ---------- полка: плитки-категории ---------- */
.sh-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sh-top>div:first-child{margin-right:auto}
.sh-q{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:999px;padding:0 14px;color:var(--mu);box-shadow:var(--sh);min-width:min(320px,100%)}
.sh-q:focus-within{box-shadow:0 0 0 3px var(--ring)}
.sh-q input{border:0;background:none;padding:10px 0;box-shadow:none!important}
.sh-top .b .cnt{color:var(--ac)}
.sh-bar{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap}
.sh-bar .seg button{font-size:13px;padding:6px 12px}
.sh-bar .seg small{font-weight:600;color:var(--mu);margin-left:2px}
.chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.sh-view{margin-left:auto}
.chips:empty{display:none}
.cats{display:grid;grid-template-columns:repeat(var(--ncol,3),minmax(0,1fr));gap:14px;align-items:start}
.cats-c{display:grid;gap:14px;align-content:start;min-width:0}
.cat{padding:12px 12px 8px;gap:6px;border-radius:22px;position:relative}
.cat-h{display:flex;align-items:center;gap:8px;padding:0 4px 2px}
.cat-h b{font-family:var(--disp);font-size:15px;font-weight:600}
.cat-h small{color:var(--mu);font-weight:600;font-size:12.5px;margin-right:auto}
.cat-dots{display:inline-flex}
.cat-dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--card);margin-left:-5px}
.cat-dots i:first-child{margin-left:0}
.cat-tabs .cat-dots i{border-color:var(--soft);width:10px;height:10px}
.cat-l{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;max-height:272px;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
.tr{display:flex;align-items:center;gap:4px;border-radius:12px;transition:background-color .12s;min-width:0}
.tr:hover{background:var(--hov)}
.tr-m{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:inherit;color:inherit;text-align:left;border:0;background:none;padding:6px 6px;cursor:pointer;border-radius:12px}
.tr-m .jt b{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr.no .jt b{color:var(--mu)}
.ib.brew{width:30px;height:30px;background:transparent;color:var(--tea);opacity:0;transition:opacity .15s,background-color .15s}
.ib.brew svg{width:14px;height:14px;fill:currentColor}
.tr:hover .ib.brew,.ib.brew:focus-visible{opacity:1;background:color-mix(in srgb,var(--tea) 16%,var(--card))}
@media(hover:none){.ib.brew{opacity:1}}
.cat-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cat-tabs .pill{display:inline-flex;align-items:center;gap:6px}
.cat-tabs .pill small{opacity:.7}
.cat.open{padding:16px}
.tcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.tc{background:var(--field);border-radius:18px;padding:12px 14px;display:grid;gap:6px;align-content:start;box-shadow:inset 0 0 0 1px var(--ln)}
.tc-h{display:flex;gap:10px;align-items:center}
.tc-h .jt b{font-size:14px;line-height:1.25}
.tc-t{font-size:13px}
.b.sm{padding:6px 12px;font-size:13px}
.b.sm svg{width:14px;height:14px}
.cat-miss{padding:2px 4px}
.cat-miss a{font-weight:700;text-decoration:none}
/* карточка чая (большое окно) */
#modal.wide .box{max-width:640px}
.sheet{display:grid;gap:10px}
.sheet-h{display:flex;gap:12px;align-items:center}
.sheet-h h2{margin:0;font-size:20px;line-height:1.2}
.sheet-h .grow{flex:1;min-width:0}
.sheet .b.go{flex:none}

/* ---------- списки, журнал, остальное ---------- */
details.item{background:var(--card);border:0;border-radius:20px;box-shadow:var(--sh);transition:box-shadow .15s}
details.item:hover{box-shadow:var(--sh2)}
details.item>summary{cursor:pointer;padding:13px 18px;list-style:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
details.item>summary::-webkit-details-marker{display:none}
details.item>summary:before{content:"›";color:var(--mu);transition:transform .15s;display:inline-block}
details.item[open]>summary:before{transform:rotate(90deg)}
details.item>.in{padding:0 18px 18px;display:grid;gap:10px}
details.item.tea-i>summary{flex-wrap:nowrap;gap:12px}
details.item.tea-i .jt b{font-size:15px}
details.item.tea-i .jt .muted{font-size:13px}
details.plain>summary{cursor:pointer;color:var(--mu);font-size:14px}
.stars{display:inline-flex;gap:2px}
.stars button{border:0;background:none;font-size:22px;line-height:1;color:var(--lnf);cursor:pointer;padding:0 1px}
.stars button.on{color:#e8a317}
.chat{display:grid;gap:8px;max-height:460px;overflow:auto;padding:2px}
.msgb{padding:10px 14px;border-radius:18px;max-width:85%;white-space:pre-wrap;font-size:14px}
.msgb.user{background:var(--acs);justify-self:end}
.msgb.assistant{background:var(--soft)}
.prev{background:var(--soft);border:0;border-radius:14px}
.drop{border:1.5px dashed var(--lnf);border-radius:18px;padding:16px;text-align:center;color:var(--mu);cursor:pointer;background:var(--field)}
.drop.has{border-style:solid;border-color:var(--ac);color:var(--tx)}
.drop img{max-height:140px;max-width:100%;border-radius:10px;display:block;margin:0 auto 6px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;z-index:20;box-shadow:var(--sh2)}
#modal .box{max-width:620px;max-height:90vh;overflow:auto;border-radius:24px;padding:22px}
table td,table th{border-bottom-color:var(--ln)}
th{letter-spacing:.03em}
.ptable td{padding:5px 4px}.ptable input,.ptable select{padding:6px 8px}
.nocaf-all{margin-bottom:8px}.now-line .nocaf{color:var(--tx);cursor:help}
/* журнал: чай с точкой цвета настоя, место («в чайной») — мелко серым, «на полку →» под названием */
.jn{display:inline-flex;align-items:flex-start;gap:7px}
.jn .dot.sm{width:9px;height:9px;margin-top:6px;background:var(--tea)}
.jn small{font-size:12px;color:var(--mu);white-space:nowrap}
.jsh{padding-left:16px}.jsh .lnk{font-size:12px;padding:1px 0}
.jw{gap:10px 18px}.jw .seg button{font-size:13px;padding:5px 12px}
#jf .split .seg button{font-size:13px;padding:5px 12px}
#jmh{margin-top:-4px}
#jt{min-width:0} /* иначе широкая таблица раздвигает всю страницу на телефоне */
/* на телефоне строка журнала — карточка: когда · кто · ✕ / чай / оценка · заметка */
@media(max-width:620px){
  .jtab thead{display:none}
  .jtab,.jtab tbody{display:block}
  .jtab tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"w p d" "t t t" "r n n";gap:3px 10px;padding:10px 0;border-bottom:1px solid var(--ln);align-items:center}
  .jtab tr:last-child{border-bottom:0}
  .jtab td{display:block;border:0;padding:0;min-width:0}
  .jtab td:nth-child(1){grid-area:w;font-size:12.5px}
  .jtab td:nth-child(2){grid-area:p;font-size:12.5px;color:var(--mu)}
  .jtab td:nth-child(3){grid-area:t}
  .jtab td:nth-child(4){grid-area:r;font-size:13px}
  .jtab td:nth-child(5){grid-area:n;font-size:13px;color:var(--mu)}
  .jtab td:nth-child(6){grid-area:d}
  .jtab td:nth-child(6) .b{padding:3px 6px}
  .jtab td[colspan]{grid-area:auto;grid-column:1/-1}
}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--ln);border-top-color:var(--ac);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- низкий экран ноутбука (меньше ~760 px по высоте): всё плотнее, чтобы главная влезла без прокрутки ---------- */
@media(min-width:1000px) and (max-height:770px){
  header{padding-top:7px;padding-bottom:7px}
  main.now{gap:10px;padding-bottom:10px}
  .hero{padding:14px 24px;gap:10px 26px}
  .cup{width:196px}
  .cup-t{font-size:34px}
  .hero-i,.hero-b{gap:6px}
  .col{padding:11px 14px;gap:6px}
  .jarl{padding:2px 5px}
  .jar{width:20px;height:30px}
  .bars{max-height:72px}
  /* вопрос «Как подействовал?» / «Как спали?»: четыре кнопки — в одну строку (на 1366 px колонка ≈335 px внутри,
     кнопки ≈322 px), а под ним — один запасной вариант вместо двух: иначе колонка выше полки и главная листается */
  .ask{padding:8px 12px;gap:5px}
  .ask .row{gap:5px}
  .ask .pill{font-size:12px;padding:4px 7px}
  .ask+#cAlts .alt~.alt{display:none}
}
/* ---------- планшет и телефон ---------- */
@media(max-width:1180px){
  .hero{grid-template-columns:auto minmax(0,1fr);gap:16px 26px}
  .hero-b{grid-column:2}
  .cup{grid-row:span 2;align-self:center}
}
@media(max-width:1100px){
  header{padding:10px 16px}
  header nav{order:3;flex-basis:100%;border-radius:22px;justify-content:center}
}
@media(max-width:760px){
  .now-strip{flex-wrap:wrap}
  .now-line{flex-basis:100%;white-space:normal}
  .goals{order:2;flex:1 1 0}
  #cfg{order:3}
  .hero{grid-template-columns:minmax(0,1fr);padding:18px 16px;gap:14px;border-radius:24px}
  .hero-b{grid-column:auto}
  .cup{grid-row:auto;width:min(220px,70vw)}
  /* на телефоне: чашка → название → кнопка и проливы → описание и плитки (кнопка сразу под пальцем) */
  .hero-i{display:contents}
  .hero-i>.badges{order:1}.hero-nr{order:2}.hero-b{order:3}.hero-d{order:4}.why{order:5}.cau{order:6}.tiles{order:7}
  .hero{gap:10px}
  .cup-t{font-size:36px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .now-cols{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  main,main.wide{padding:6px 16px 40px}
  header nav a,details.more>summary{padding:6px 11px;font-size:13px}
  .who button{width:30px;height:30px;font-size:13px}
  .stat{min-width:0;flex:1}
  .card{padding:16px}
  .acts{flex-wrap:wrap}
  .sh-q{flex:1 1 100%;order:3}
  .cat-l{max-height:none}
}
@media(max-width:380px){.jars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.cup .prg,.cup .water,.cup .liq{transition:none}.hero.run .steam i,.hero.ready .rim,.pop{animation:none}}
.timer button.p{background:var(--tea);color:#fff}
.timer button.p:hover:not(:disabled){background:var(--tea);filter:brightness(1.08)}
@media(max-width:620px){header{position:static}}

/* iPhone увеличивает страницу, если шрифт поля меньше 16 px — на сенсорных экранах поля крупнее */
@media(pointer:coarse){input,select,textarea{font-size:16px}}
/* Тёмная тема: у пуэров цвет настоя почти чёрный — кольцо, проливы и столбики светлее (сам настой в чашке не трогаем) */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .cup .prg{stroke:color-mix(in srgb,var(--tea) 55%,#fff)}
 :root:not([data-theme=light]) .stp.cur,:root:not([data-theme=light]) .timer .steps i.cur{border-color:color-mix(in srgb,var(--tea) 55%,#fff)}
 :root:not([data-theme=light]) .stp.done,:root:not([data-theme=light]) .timer .steps i.done{background:color-mix(in srgb,var(--tea) 80%,#fff);border-color:color-mix(in srgb,var(--tea) 80%,#fff)}
 :root:not([data-theme=light]) .bars i.p s{background:color-mix(in srgb,var(--tea) 60%,#fff)}
 :root:not([data-theme=light]) .ib.brew{color:color-mix(in srgb,var(--tea) 45%,#fff)}
 :root:not([data-theme=light]) .who button.on{border-color:color-mix(in srgb,var(--tea-now,var(--ac)) 55%,#fff)}
 :root:not([data-theme=light]) .pill.tog:has(input:checked){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tea-now,var(--ac)) 55%,#fff)}
 :root:not([data-theme=light]) .pickb,:root:not([data-theme=light]) .bdg.tint{color:color-mix(in srgb,var(--tea) 40%,#fff)}}
:root[data-theme=dark] .cup .prg{stroke:color-mix(in srgb,var(--tea) 55%,#fff)}
:root[data-theme=dark] .stp.cur,:root[data-theme=dark] .timer .steps i.cur{border-color:color-mix(in srgb,var(--tea) 55%,#fff)}
:root[data-theme=dark] .stp.done,:root[data-theme=dark] .timer .steps i.done{background:color-mix(in srgb,var(--tea) 80%,#fff);border-color:color-mix(in srgb,var(--tea) 80%,#fff)}
:root[data-theme=dark] .bars i.p s{background:color-mix(in srgb,var(--tea) 60%,#fff)}
:root[data-theme=dark] .ib.brew{color:color-mix(in srgb,var(--tea) 45%,#fff)}
:root[data-theme=dark] .who button.on{border-color:color-mix(in srgb,var(--tea-now,var(--ac)) 55%,#fff)}
:root[data-theme=dark] .pill.tog:has(input:checked){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tea-now,var(--ac)) 55%,#fff)}
:root[data-theme=dark] .pickb,:root[data-theme=dark] .bdg.tint{color:color-mix(in srgb,var(--tea) 40%,#fff)}

/* ---------- приветствие гостя ---------- */
.hello{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.hl{display:grid;gap:4px;align-content:start;background:var(--soft);border-radius:16px;padding:12px 14px;text-decoration:none;color:inherit;transition:box-shadow .15s}
.hl:hover{box-shadow:var(--sh2);color:inherit}
.hl b{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:15px;font-weight:600}
.hl small{font-size:12.5px;color:var(--mu);line-height:1.4}

/* ---------- вкладки группы над разделом (Поездка · Гости · Смеси и т. п.) ---------- */
.sub{max-width:940px;width:100%;margin:0 auto;padding:10px 24px 0;box-sizing:border-box}
.sub[hidden]{display:none}
.sub .tabs a{font-size:14px;font-weight:600;color:var(--mu);padding:7px 14px;border-radius:999px;text-decoration:none;white-space:nowrap}
.sub .tabs a:hover{color:var(--tx)}
.sub .tabs a[aria-selected=true]{background:var(--card);color:var(--tx);box-shadow:var(--sh)}
.sub+main{padding-top:4px}
@media(max-width:620px){.sub{padding:6px 16px 0}.sub .tabs a{font-size:13px;padding:6px 11px}}

/* ---------- доступы (у руководителя в «Семье») ---------- */
.acc-l{display:grid;gap:8px}
.acc-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--soft);border-radius:16px;padding:10px 14px}
.acc-n{flex:1 1 220px;min-width:0}
.acc-n small{color:var(--mu);font-size:12px}
.acc-n .hint{margin-top:2px}
.acc-ask{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--warn)}
.acc-ask svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.acc-r .seg{background:var(--card)}
.acc-r .seg button{font-size:13px;padding:5px 12px}
.acc-r .seg button[aria-selected=true]{background:var(--soft)}
.acc-r .pill.tog:has(input:disabled){opacity:.5}

/* ---------- «Какие чаи есть у вас?» ---------- */
.mm{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:4px 0}
.mm fieldset{border:0;margin:0;padding:10px 12px;background:var(--soft);border-radius:14px;display:grid;gap:4px;align-content:start}
.mm legend{font-weight:600;font-size:13px;color:var(--mu);padding:0;float:left;width:100%;margin-bottom:2px}
.mm .chk{font-size:14px;gap:7px}
.ainote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ainote svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Переключатель языка RU | EN (открытая страница) - рядом с переключателем темы */
.lg{display:flex;gap:2px;margin-left:4px;padding:3px;border-radius:999px;background:var(--soft)}
.lg button{border:0;background:none;color:var(--mu);cursor:pointer;border-radius:999px;height:30px;min-width:34px;padding:0 8px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;transition:background-color .15s,color .15s}
.lg button:hover{color:var(--tx)}
.lg button[aria-pressed=true]{background:var(--card);color:var(--tx)}
@media(max-width:620px){.lg{margin-left:0}.lg button{min-width:30px;padding:0 6px}}