/* Design tokens: «Нативный» — iOS / Apple Health look, one olive accent (phase 1 port, 14.10). Light + dark.
   Every real text pair is >= 4.5:1; series colours (--fat, --carbs) are for bars and dots only, never text; --over text only on --cell. */
:root {
  --bg: #F2F2F7;                  /* screen */
  --cell: #FFFFFF;                /* grouped-list cell, card */
  --text: #000000;
  --sec: #5E5E63;                /* secondary text */
  --sep: rgba(60, 60, 67, .29);  /* 0.5px separators, hairlines */
  --fill: rgba(120, 120, 128, .12);  /* control fill: segment container, gray button, chips */
  --fill2: rgba(120, 120, 128, .2);
  --accent: #5F7034;             /* olive tint; --on-accent on it 5.5 */
  --on-accent: #FFFFFF;
  --over: #D93025;               /* overshoot: text only on --cell (4.8); on --bg it is 4.3 */
  --accent-on-fill: #54632E;     /* accent 12% darker for text on --fill: plain accent there is 4.3, this is 5.2 */
  --protein: var(--accent);
  --fat: #2E7D74;                /* series: bars/dots only */
  --carbs: #B07818;
  --chev: #C4C4C7;
  --gray: #A1A1A6;                /* neutral chart fill (Норма и расход) */
  --tabbar: #F9F9F9;
  --seg: #FFFFFF;                /* selected segment */
  --seg-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
  --bubble-in: #E9E9EB;
  --chat-bg: #FFFFFF;
  --grab: rgba(60, 60, 67, .3);
  --r1: #8F8F95; --r2: #3D78D0; --r3: #7A4E9C; --r4: #B8861B; /* rarity: common, rare, epic, legendary (fills and frames; text stays --text) */
  --tint-soft: color-mix(in srgb, var(--accent) 14%, var(--cell));
  --knob: #FFFFFF;               /* switch knob, white in both themes */
  --radius: 12px;                /* cell, button, sheet */
  --radius-sm: 10px;             /* small button */
  /* iOS type scale as font shorthands: font:var(--body) */
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --large: 700 34px/41px var(--font);
  --title2: 700 22px/28px var(--font);
  --headline: 600 17px/22px var(--font);
  --body: 400 17px/22px var(--font);
  --subhead: 400 15px/20px var(--font);
  --footnote: 400 13px/18px var(--font);
  --caption: 400 12px/16px var(--font);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --tap: 44px;
  --col: 430px;                  /* wide screens: the app stays a phone-wide column in the middle */
  /* motion: used only inside prefers-reduced-motion:no-preference; same in both themes */
  --dur-1: 150ms;                /* press, small feedback */
  --dur-2: 250ms;                /* appear, state change, sheet exit */
  --dur-3: 350ms;                /* sheet, overlay */
  --dur-4: 450ms;                /* charts, celebration */
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);  /* iOS sheet: fast start, long settle, no overshoot */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  /* damped spring (zeta .72, omega 9.2), 18 samples; peak 1.038 = 3.8% overshoot */
  --spring: linear(0, 0.112, 0.34, 0.575, 0.768, 0.902, 0.983, 1.024, 1.038, 1.036, 1.029, 1.019, 1.011, 1.005, 1.002, 1, 0.999, 1);
  /* old names stay as aliases (privacy.html, old selectors) */
  --card: var(--cell); --ink: var(--text); --ink-muted: var(--sec); --olive: var(--accent); --on-olive: var(--on-accent);
  --line: var(--sep); --terra: var(--over); --terra-text: var(--over); --carb: var(--carbs);
  --olive-soft: var(--fill2); --wash: var(--fill); --sand: var(--fill); --soft-bar: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --cell: #1C1C1E;
    --text: #FFFFFF;
    --sec: rgba(235, 235, 245, .68);
    --sep: rgba(84, 84, 88, .6);
    --fill: rgba(118, 118, 128, .24);
    --fill2: rgba(118, 118, 128, .36);
    --accent: #A8B97F;
    --on-accent: #000000;         /* black on the light olive, 9.9 */
    --over: #FF6B5E;
    --accent-on-fill: var(--accent); /* 8.0 on fill, no deepening needed */
    --protein: var(--accent);
    --fat: #5FBDB0;
    --carbs: #E4B25B;
    --chev: rgba(235, 235, 245, .3);
    --gray: #6E6E73;
    --tabbar: #1C1C1E;
    --seg: #636366;
    --seg-shadow: none;
    --bubble-in: #2C2C2E;
    --chat-bg: #000000;
    --grab: rgba(235, 235, 245, .3);
    --r1: #9A9AA0; --r2: #6A9FEA; --r3: #B58AD6; --r4: #E2B65B;
  }
}

@supports not (transition-timing-function:linear(0,1)){:root{--spring:var(--ease-out)}}

html{color-scheme:light dark}
::selection{background:var(--accent);color:var(--on-accent)}
input,textarea{caret-color:var(--accent)}
button,a,input,textarea{touch-action:manipulation}
h1,h2{text-wrap:balance}
.scroll,.msgs{scrollbar-width:none}
.scroll::-webkit-scrollbar,.msgs::-webkit-scrollbar{display:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums!important} /* !important: every font: shorthand resets it */
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:var(--body);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}

#app{position:fixed;left:0;right:0;top:0;height:var(--app-h,100dvh);max-width:var(--col);margin:0 auto;display:flex;flex-direction:column;transform:translateY(var(--app-y,0px))}
@media (min-width:440px){#app{border-inline:.5px solid var(--sep)}}
#app.kb #tabs{display:none}
#view{flex:1;min-height:0;display:flex;flex-direction:column}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--sat) + 14px) 16px 24px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.page-title{font:var(--large);letter-spacing:.011em;margin:0}
/* iOS large title -> inline title (app.js inlineTitle): laid over the screen top, so the layout under it never moves */
.inline-title{position:absolute;top:0;left:0;right:0;z-index:1;height:calc(var(--sat) + 44px);padding:var(--sat) 56px 0;display:flex;align-items:center;justify-content:center;background:var(--bg);border-bottom:.5px solid var(--sep);font:var(--headline);opacity:0;pointer-events:none}
.inline-title span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collapsed>.inline-title{opacity:1}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:14px}
.top-note{font:var(--subhead);color:var(--sec);white-space:nowrap}
.back-title{display:flex;align-items:center;gap:4px;margin-left:-10px;min-width:0}
.back-title .page-title{font:var(--title2);letter-spacing:0}
.scroll>.back-title{margin-bottom:8px}

/* pixel art */
.ferret{display:block;width:144px;height:72px;image-rendering:pixelated;image-rendering:crisp-edges}
.ferret.sm{width:72px;height:36px}
.avatar{width:32px;height:32px;image-rendering:pixelated;flex:none}
.ic{display:inline-block;width:24px;height:24px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}

/* tab bar */
#tabs{display:flex;align-items:flex-start;flex:none;background:var(--tabbar);border-top:.5px solid var(--sep);padding:0 max(4px,env(safe-area-inset-right)) var(--sab) max(4px,env(safe-area-inset-left))}
.tab{flex:1;min-width:0;min-height:49px;padding-top:6px;display:flex;flex-direction:column;align-items:center;gap:2px;font:500 11px/13px var(--font);color:var(--sec);text-decoration:none}
.tab .ic{width:26px;height:26px}
.tab[aria-current=page]{color:var(--accent)}
.tab.plus{position:relative;flex:none;width:48px;height:36px;min-height:36px;padding:0;justify-content:center;margin:6px calc((20% - 48px) / 2) 0;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent)}
.tab.plus .ic{width:24px;height:24px}
.tab.plus::after{content:"";position:absolute;inset:-4px -8px}
.tab.plus:active{opacity:.85}

/* buttons / fields */
.btn{min-height:50px;padding:0 22px;border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font:var(--headline);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.quiet{background:var(--fill);color:var(--accent-on-fill)}
.btn.sm{position:relative;min-height:36px;padding:0 16px;border-radius:var(--radius-sm);font:var(--subhead);font-weight:600}
.btn.sm::after{content:"";position:absolute;inset:-4px 0} /* 44px tap area */
.btn .ic{width:20px;height:20px}
.btn.danger{background:var(--over);color:var(--on-accent)}
.btn:disabled{opacity:.55}
.icon-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;color:var(--accent);flex:none}
.icon-btn.sm{width:36px;height:36px;color:var(--sec)}
.icon-btn.sm .ic{width:20px;height:20px}
.field{width:100%;min-height:50px;padding:0 16px;font:var(--body);background:var(--cell);border:0;border-radius:var(--radius)}
textarea.field{padding:12px 16px}
select.field{-webkit-appearance:none;appearance:none;padding-right:40px;background:linear-gradient(45deg,transparent 50%,var(--sec) 50%) calc(100% - 22px) 50%/6px 6px no-repeat,linear-gradient(135deg,var(--sec) 50%,transparent 50%) calc(100% - 16px) 50%/6px 6px no-repeat,var(--cell)}
.err{color:var(--over);font:var(--subhead);font-weight:500;margin-top:10px;padding:10px 14px;background:var(--cell);border-radius:var(--radius)} /* red text only on a cell */

/* login */
.login{overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;padding:calc(env(safe-area-inset-top) + 24px) 28px calc(env(safe-area-inset-bottom) + 24px)}
.login::before,.login::after{content:"";flex:1 0 0}
.login h1{font:var(--large);letter-spacing:.011em;margin:20px 0 8px;max-width:11em}
.login p{color:var(--sec);margin-bottom:22px;line-height:23px}
.login label{display:block;font:var(--subhead);font-weight:600;color:var(--sec);margin-bottom:6px}
.login form{width:100%;max-width:420px}
.login .field{display:block;width:100%;max-width:100%}
.login .btn{width:100%;margin-top:14px}
.login .err{color:var(--over);margin:10px 0 0}

/* chats list */
.search{display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;background:var(--fill);border-radius:var(--radius-sm);color:var(--sec)}
.search .ic{width:20px;height:20px}
.search-field{flex:1;min-width:0;height:100%;border:0;background:none;font:var(--body);color:var(--text);padding:0;outline:none}
.search-field::placeholder{color:var(--sec)}
.section-head{font:var(--footnote);color:var(--sec);text-transform:uppercase;margin:20px 16px 6px}
.row-group{background:var(--cell);border-radius:var(--radius);overflow:hidden}
.row{display:flex;align-items:center;position:relative}
.row+.row::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:.5px solid var(--sep)}
.row-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-align:left;padding:8px 0 8px 16px;min-height:56px;color:inherit;text-decoration:none}
.row-ic{flex:none;width:28px;height:28px;display:grid;place-items:center;color:var(--accent)}
.row-ic .ic{width:24px;height:24px}
.row-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.row-title{font:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{display:flex;align-items:center;gap:8px;color:var(--sec);font:var(--footnote);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.badge{background:var(--fill);color:var(--accent-on-fill);font:var(--caption);font-weight:600;border-radius:999px;padding:1px 10px}
.row-menu{flex:none;width:44px;align-self:stretch;display:grid;place-items:center;color:var(--sec)}
.row-menu .ic{width:22px;height:22px}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px;flex:1}
.confirm span{flex:1 1 100%;font:var(--headline)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 4px}
.empty h2{font:var(--title2);margin-top:14px}
.empty p{color:var(--sec);max-width:20em}
.round-btn{position:relative;width:36px;height:36px;border-radius:50%;background:var(--fill);color:var(--accent);display:grid;place-items:center;flex:none}
.round-btn::after{content:"";position:absolute;inset:-4px}
.round-btn .ic{width:22px;height:22px}

/* chat */
.screen.chat{background:var(--chat-bg)}
.chat-head{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;padding:calc(var(--sat) + 2px) 0 4px;background:var(--chat-bg);border-bottom:.5px solid var(--sep)} /* iMessage: avatar, name, sub centred on the whole width; buttons pinned to the sides */
.chat-head .back,.head-btns{position:absolute;top:calc(var(--sat) + 3px)}
.chat-head .back{left:max(6px,env(safe-area-inset-left))}
.head-btns{display:flex;right:max(6px,env(safe-area-inset-right))}
.chat-head .ch-ttl{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:calc(100% - 208px)}
.ava{width:36px;height:36px;border-radius:50%;background:var(--fill);display:grid;place-items:center;flex:none}
.ava .avatar{width:28px;height:28px}
.chat-head .ava{width:46px;height:46px}
.chat-head .avatar{width:42px;height:42px}
.chat-head h1{margin-top:2px;font:500 12px/14px var(--font)}
.chat-head .sub{max-width:100%;min-height:16px;font:var(--caption);color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .sub.mode{color:var(--accent);font-weight:600}
.msgs{position:relative;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.msg.user{justify-content:flex-end}
.bubble{max-width:85%;line-height:23px;padding:6px 12px;border-radius:18px;overflow-wrap:break-word;word-break:normal;min-width:0}
.coach{align-items:flex-start}
.col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:85%} /* bubble on top, cards and the rating row under it */
.col>.bubble{max-width:100%}
.bubble a{color:inherit;text-decoration:underline;overflow-wrap:anywhere;word-break:break-all}
.user .bubble{background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.coach .bubble{background:var(--bubble-in);border-bottom-left-radius:4px}
.bubble ul{margin:4px 0;padding-left:20px}
.bubble .ln{display:block}
.bubble img.ph{display:block;max-width:100%;width:220px;border-radius:12px;margin:0 0 6px;background:var(--fill);min-height:80px;object-fit:cover}
.note{font:var(--footnote);color:var(--sec);margin-top:6px}
.bubble.err-b{background:var(--fill)}
.bubble .btn{margin-top:10px;min-height:var(--tap)}
.sent-failed{font:var(--footnote);margin-top:4px;color:var(--over);text-decoration:underline;display:block;min-height:var(--tap);text-align:right;width:100%}
.thinking .ferret{margin-bottom:6px}
.stage{display:block;min-width:12em}
.dots{display:flex;gap:4px;margin:6px 0 4px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--sec)}
.composer{flex:none;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left))}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px}
.thumb{position:relative;flex:none;width:64px;height:64px}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.thumb button{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center}
.thumb button .ic{width:14px;height:14px}
.thumb button::after{content:"";position:absolute;inset:-8px}
.cbar{display:flex;align-items:flex-end;gap:2px}
.cbar .photo{padding:6px;background:var(--fill);background-clip:content-box;color:var(--sec)} /* 32px disc inside a 44px tap area */
.cbar .photo .ic{width:18px;height:18px}
.cfield{flex:1;min-width:0;display:flex;align-items:flex-end;margin-bottom:4px;border:.5px solid var(--sep);border-radius:18px}
.cfield:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.cfield textarea{flex:1;min-width:0;resize:none;max-height:132px;min-height:36px;padding:7px 0 7px 14px;font:var(--body);background:none;border:0;outline:none}
.cfield textarea::placeholder{color:var(--sec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfield .icon-btn{flex:none;margin:-4px -2px -4px 0;padding:8px;background:none;background-clip:content-box;color:var(--sec)} /* 28px disc / 22px icon inside a 44px tap area that sticks out of the 36px field */
.cfield .icon-btn .ic{width:22px;height:22px}
.cfield .send{background:var(--accent);background-clip:content-box;color:var(--on-accent)}
.cfield .send .ic{width:18px;height:18px}
.cbar .send:disabled{display:none}
.cbar:has(.send:not(:disabled)) .mic:not(.active){display:none} /* send takes the mic's place once there is something to send */
.send.stop .ic{display:none}
.send.stop::before{content:"";width:14px;height:14px;border-radius:3px;background:currentColor}
.steps{list-style:none;margin:0;padding:0;font:var(--subhead);color:var(--sec)}
.steps+*{margin-top:8px}
.step{display:flex;align-items:center;gap:8px;padding:2px 0}
.step .st{flex:none;width:14px;height:14px;display:grid;place-items:center;font-size:13px;line-height:1}
.step.done .st::before,.step.error .st::before{content:"";width:14px;height:14px;background:var(--accent);-webkit-mask:url(assets/check.svg) center/contain no-repeat;mask:url(assets/check.svg) center/contain no-repeat}
.step.error .st::before{background:var(--over);-webkit-mask-image:url(assets/x.svg);mask-image:url(assets/x.svg)}
.step.running .st{border:2px solid var(--fill2);border-top-color:var(--accent);border-radius:50%;box-sizing:border-box}
.compressing{font:var(--footnote);color:var(--sec);padding:0 4px 6px}

/* settings */
.opt-list{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;background:var(--cell);border-radius:var(--radius);text-align:left;width:100%}
.opt[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--accent)}
.more .opt{background:var(--fill)}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--sec);flex:none;display:grid;place-items:center}
.opt[aria-checked=true] .dot{border-color:var(--accent)}
.opt[aria-checked=true] .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.opt .nm{font:var(--headline);display:block}
.opt .nt{font:var(--subhead);color:var(--sec)}
.hint{font:var(--subhead);color:var(--sec);margin-top:10px}
.sub-h{font:var(--footnote);text-transform:uppercase;color:var(--sec);margin:16px 16px 8px}
.status{display:flex;align-items:center;gap:14px}
.status .ferret{width:108px;height:54px;flex:none}

/* sheet */
/* -ghost: the closed sheet playing its exit (js/motion.js ghostOut), same look, dead to input */
.sheet-back,.sheet-back-ghost{position:fixed;left:0;right:0;top:0;max-width:var(--col);margin:0 auto;height:var(--app-h,100dvh);transform:translateY(var(--app-y,0px));display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet-back::before,.sheet-back-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.4);opacity:var(--scrim-o,1)} /* own layer: fades and follows a drag without fading the sheet */
.sheet-back-ghost{pointer-events:none}
.sheet,.sheet-ghost{width:100%;max-width:520px;max-height:92%;overflow-y:auto;background:var(--bg);border-top:.5px solid var(--sep);border-radius:var(--radius) var(--radius) 0 0;padding:6px 16px calc(20px + var(--sab));outline:none}
.sheet-grab{position:relative;height:13px;margin:-6px -16px 0} /* full-width drag strip over the top padding; the pill is ::before */
.sheet-grab::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--grab)}
.sheet-grab,.sheet-head{touch-action:none;-webkit-user-select:none;user-select:none} /* drag-to-close zone; the sheet body keeps its scroll */
.sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:44px;margin-bottom:8px} /* iOS nav: «Закрыть» left, title centre */
.sheet-head h2{grid-column:2;min-width:0;font:var(--headline);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-close{grid-area:1/1;justify-self:start;min-height:var(--tap);padding:0;font:var(--body);color:var(--accent)}
.sheet-head.end .sheet-close{grid-area:1/3;justify-self:end}
.fld{margin-bottom:12px}
.fld label{display:block;font:var(--footnote);text-transform:uppercase;margin:0 16px 4px;color:var(--sec)}
.fgroup{background:var(--cell);border-radius:var(--radius);overflow:hidden;margin-bottom:20px} /* iOS form: grouped rows, label left, field right */
.frow{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px}
.frow+.frow::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:.5px solid var(--sep)}
.frow:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.frow label{flex:none;font:var(--body)}
.fin{flex:1;min-width:0;height:44px;padding:0;border:0;border-radius:0;background:none;font:var(--body);color:var(--text);text-align:right;text-align-last:right;outline:none;-webkit-appearance:none;appearance:none}
.fin::-webkit-date-and-time-value{text-align:right} /* iOS */
.fin::-webkit-datetime-edit{margin-left:auto} /* desktop WebKit */
select.fin{padding-right:20px;background:linear-gradient(45deg,transparent 50%,var(--sec) 50%) calc(100% - 6px) 50%/6px 6px no-repeat,linear-gradient(135deg,var(--sec) 50%,transparent 50%) 100% 50%/6px 6px no-repeat}
.sheet-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.sheet-actions .btn{flex:1 1 40%}
.sheet-actions.stack{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.sheet-actions.stack .btn{flex:none}
.btn.del{background:var(--cell);color:var(--over)} /* red text only on a cell */
.confirm-q{flex:1 1 100%;font:var(--headline)}
.sheet-items{display:flex;flex-direction:column;background:var(--cell);border-radius:var(--radius);overflow:hidden}
.sheet-item{min-height:50px;padding:10px 16px;text-align:left;color:inherit;border-bottom:.5px solid var(--sep)}
.sheet-item:last-child{border-bottom:0}
.sheet-item.danger{color:var(--over)}

/* feedback + consent */
.fbs{display:flex;gap:4px;margin:-4px 0 -6px -10px}
.fb{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;color:var(--sec)}
.fb .ic{width:20px;height:20px}
.fb[aria-pressed=true]{color:var(--accent);background:var(--fill)}
.login .consent-l{display:flex;gap:12px;align-items:flex-start;font:var(--body);line-height:23px;color:var(--text);margin:6px 0 4px;min-height:var(--tap)}
.consent-l input{width:24px;height:24px;flex:none;accent-color:var(--accent)}
.login a{color:var(--accent);font-weight:600}
/* chat: quick replies + meal card */
.chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:6px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.composer.kb .chips{display:none}
.chip-btn{position:relative;flex:none;white-space:nowrap;min-height:32px;padding:0 10px;border-radius:999px;background:var(--fill);color:var(--accent-on-fill);font:500 14px/20px var(--font)}
.chip-btn::after{content:"";position:absolute;inset:-6px 0} /* 44px tap area, vertical only */
.mcard,.dcard{width:296px;max-width:100%;background:var(--cell);border:.5px solid var(--sep);border-radius:14px}
.ts{align-self:center;margin-top:4px;font:var(--caption);color:var(--sec)} /* «Сегодня 13:05» */
.ts b{font-weight:600}
.mcard-r{display:grid;grid-template-columns:1fr auto;grid-template-areas:"m f" "n f" "k k";column-gap:10px;padding:9px 14px} /* kcal line on its own row, so it and «Поправить» never wrap on 375px phones */
.mcard-r+.mcard-r{border-top:.5px solid var(--sep)}
.mcard-m{grid-area:m;font:var(--caption);color:var(--sec)}
.mcard-r .n{grid-area:n;min-width:0;font:var(--headline)}
.mcard-r .k{grid-area:k;font:var(--subhead);color:var(--sec);white-space:nowrap}
.mcard-r .k b{color:var(--text);font-weight:600}
.mcard-fix{grid-area:f;align-self:center;min-height:var(--tap);margin:-2px -4px -2px 0;padding:0 4px;font:var(--subhead);color:var(--accent);white-space:nowrap}
.mcard-f{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-top:.5px solid var(--sep);font:var(--subhead);font-weight:600;color:var(--accent)}
.mcard-f .ic{width:18px;height:18px}
.dcard{padding:12px 14px}
.dcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.dcard-h{font:var(--subhead);font-weight:600}
.dcard-n{font:var(--footnote);color:var(--sec)}
.dcard svg{display:block;width:100%;height:auto}
.dchart rect{fill:var(--accent);fill-opacity:.4}
.dchart rect.hi{fill-opacity:1}
.dchart text{fill:var(--sec);font-size:11px}
.dchart line{stroke:var(--sec);stroke-width:1.5;stroke-dasharray:4 3}
.spark{color:var(--accent)}
.sbar{border-radius:7px;overflow:hidden}
.sbar .p{fill:var(--protein)}.sbar .f{fill:var(--fat)}.sbar .c{fill:var(--carbs)}
.mode-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--fill);border-radius:var(--radius-sm);margin:0 4px 8px;font:var(--footnote);font-weight:600}
.icon-btn.active{background:var(--fill2);color:var(--accent)}
@media (prefers-reduced-motion:no-preference){@keyframes mic-pulse{50%{transform:scale(1.14)}} .icon-btn.mic.active{animation:mic-pulse calc(var(--dur-4) * 3) var(--ease-out) infinite}} /* listening; no pulse under reduced motion */
.mode-badge .ic{width:18px;height:18px}

/* onboarding */
.ob{max-width:560px;width:100%;margin:0 auto}
.ob-top{display:flex;justify-content:space-between;align-items:center;min-height:var(--tap);margin-bottom:8px}
.ob-dots{display:flex;gap:8px}
.ob-dot{width:10px;height:10px;border-radius:50%;background:var(--fill2)}
.ob-dot.on{background:var(--accent)}
.ob-skip{min-height:var(--tap);padding:0 8px;color:var(--accent);font:var(--body)}
.ob h1{font:var(--large);letter-spacing:.011em;margin:14px 0 16px;outline:none}
.ob .opt-list{margin-bottom:16px}
.ob-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ob-kcal{font:700 48px/54px var(--font);letter-spacing:-.01em}
.ob-kcal span{font:600 20px/24px var(--font);color:var(--sec)}

/* press: iOS cell highlight, an overlay under the cell's content; shows at once, fades out in the motion block */
:is(.row,.meal,button.trk-row,.lrow,.sheet-item,.add-meal,.letter-row,.opt){position:relative;isolation:isolate}
:is(.row,.meal,button.trk-row,.lrow,.sheet-item,.add-meal,.letter-row,.opt)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill);opacity:0}
:is(.meal,button.trk-row,.lrow,.sheet-item,.add-meal,.letter-row,.opt):active::after,.row:has(>.row-main:active)::after{opacity:1}

@media (prefers-reduced-motion:no-preference){
  :is(.row,.meal,button.trk-row,.lrow,.sheet-item,.add-meal,.letter-row,.opt)::after{transition:opacity var(--dur-1) var(--ease-out)}
  :is(.meal,button.trk-row,.lrow,.sheet-item,.add-meal,.letter-row,.opt):active::after,.row:has(>.row-main:active)::after{transition:none}
  /* press: tiles and buttons give a little, then spring back */
  :is(.btn,.chip-btn,.story-circle,.tile,.pick,.mode-tile,.story-btn,.fchip,.btn-add,.round-btn,.avatar-btn,.tab.plus){transition:transform var(--dur-2) var(--spring)}
  :is(.btn,.chip-btn,.story-circle,.tile,.pick,.mode-tile,.story-btn,.fchip,.btn-add,.round-btn,.avatar-btn):active:not(:disabled){transform:scale(.97);transition:transform var(--dur-1) var(--ease-out)}
  .tab.plus:active{transform:scale(.9);transition:transform var(--dur-1) var(--ease-out)}
  .tab.pop .ic{animation:tab-pop var(--dur-3) var(--ease-out)} /* app.js renderTabs: only when the lit tab changes */
  @keyframes tab-pop{40%{transform:translateY(-3px) scale(1.06);animation-timing-function:var(--spring)}}
  /* sheet: slides up over a fading scrim; the -ghost copy slides down from wherever it was */
  .sheet{animation:sheet-in var(--dur-3) var(--ease-sheet)}
  @keyframes sheet-in{from{transform:translateY(100%)}}
  .sheet-back::before{animation:in var(--dur-3) var(--ease-out);transition:opacity var(--dur-2) var(--ease-sheet)}
  .sheet-back.drag::before{transition:none}
  .sheet-ghost{animation:sheet-out var(--dur-2) var(--ease-in) forwards}
  @keyframes sheet-out{to{transform:translateY(100%)}}
  .sheet-back-ghost::before{animation:out var(--dur-2) var(--ease-in) forwards}
  @keyframes out{to{opacity:0}}
  /* story: scale (not transform) keeps the overlay's translateY(--app-y) */
  .story-overlay{animation:story-in var(--dur-3) var(--ease-out)}
  @keyframes story-in{from{opacity:0;scale:.98}}
  .story-ghost{animation:story-out var(--dur-2) var(--ease-in) forwards}
  @keyframes story-out{to{opacity:0;scale:.98}}
  #toast{transition:opacity var(--dur-2) var(--ease-in)}
  #toast.show{animation:toast-in var(--dur-2) var(--ease-out)}
  @keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
  /* joy (motion.js cheer): an accent ring flashes out of a day circle or the challenge check; hosts are positioned below */
  .ring{position:absolute;inset:0;border:2px solid var(--accent);border-radius:50%;pointer-events:none}
  .card-h h2>.ring{inset:auto;left:-5px;top:calc(50% - 14px);width:28px;height:28px} /* centred on the 18px check */
  .more summary .ic{transition:transform var(--dur-2) var(--ease-out)}
  .toggle input{transition:background-color var(--dur-2) var(--ease-out)}
  .toggle input::after{transition:transform var(--dur-2) var(--ease-out)}
  .screen{animation:in var(--dur-2) var(--ease-out)}
  @keyframes in{from{opacity:0}to{opacity:1}}
  /* screen change (motion.js swap, html[data-nav] while it plays): only #view moves; the tab bar and the rest of the root
     switch in place, the toast stays on top. Push: the new screen slides in from the right over the old one, which drifts
     30% left and dims; pop mirrors it; another tab cross-fades. The opaque #view keeps the two screens from showing through. */
  .screen.swapped{animation:none}
  html[data-nav] #view{view-transition-name:screen;background:var(--bg)}
  html[data-nav] #toast{view-transition-name:toast}
  ::view-transition-group(*),::view-transition-new(root),::view-transition-new(toast){animation:none}
  ::view-transition-old(root),::view-transition-old(toast){animation:none;opacity:0}
  ::view-transition-image-pair(screen){overflow:clip} /* the desktop column: nothing slides in from outside it */
  html:is([data-nav=push],[data-nav=pop])::view-transition-old(screen),html:is([data-nav=push],[data-nav=pop])::view-transition-new(screen){mix-blend-mode:normal;animation-duration:var(--dur-3);animation-timing-function:var(--ease-sheet);animation-fill-mode:both}
  html[data-nav=push]::view-transition-new(screen){animation-name:edge-in}
  html[data-nav=push]::view-transition-old(screen){animation-name:back-out}
  html[data-nav=pop]::view-transition-old(screen){animation-name:edge-out;z-index:1}
  html[data-nav=pop]::view-transition-new(screen){animation-name:back-in}
  @keyframes edge-in{from{transform:translateX(100%)}}
  @keyframes edge-out{to{transform:translateX(100%)}}
  @keyframes back-out{to{transform:translateX(-30%);opacity:.6}}
  @keyframes back-in{from{transform:translateX(-30%);opacity:.6}}
  html[data-nav=tab]::view-transition-old(screen){animation:out var(--dur-2) var(--ease-out) both}
  html[data-nav=tab]::view-transition-new(screen){animation:in var(--dur-2) var(--ease-out) both}
  .thinking .ferret{animation:bob 1.6s steps(2) infinite}
  @keyframes bob{50%{transform:translateY(-3px)}}
  .step.running .st{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* chat: new bubbles rise from their tail corner (motion.js enter); the typing dots ripple left to right */
  .msg.user{transform-origin:100% 100%}
  .msg.coach{transform-origin:0 100%}
  .dots i{animation:dot 1.2s ease-in-out infinite both}
  .dots i:nth-child(2){animation-delay:.15s}
  .dots i:nth-child(3){animation-delay:.3s}
  @keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
  /* the typing indicator leaving (app.js render): laid over the list end, fades; its dots rest dim, not flash to full */
  .msg-ghost{position:absolute;display:flex;animation:out var(--dur-2) var(--ease-in) forwards}
  .msg-ghost .dots i{opacity:.35}
  /* progress charts after a load (progress.js .fresh): bars rise from the axis, the weight line draws left to right with its
     dots popping as it reaches them, the month fills in a diagonal wave; --p (0..1) is the place in the sweep, all ends by --dur-4 */
  .fresh .kchart .b{transform-box:fill-box;transform-origin:50% 100%;animation:rise var(--dur-3) var(--ease-out) calc((var(--dur-4) - var(--dur-3)) * var(--p)) backwards}
  @keyframes rise{from{transform:scaleY(0)}}
  .fresh .wchart .tr{animation:draw var(--dur-4) var(--ease-out)}
  @keyframes draw{from{clip-path:inset(-3px 100% -3px -3px)}to{clip-path:inset(-3px)}} /* -3px: the clip box is the fill, the stroke sticks out */
  .fresh .wchart :is(.pt,.last){transform-box:fill-box;transform-origin:center}
  .fresh :is(.wchart .pt,.wchart .last,.dc){animation:pop var(--dur-2) var(--ease-out) calc((var(--dur-4) - var(--dur-2)) * var(--p)) backwards}
  @keyframes pop{from{opacity:0;transform:scale(.6)}}
  .inline-title{transition:opacity var(--dur-2) var(--ease-out)}
}

/* profile helpers still used by login */
.tg-login{display:flex;justify-content:flex-start;width:100%;max-width:420px;min-height:40px;margin:8px 0 16px} /* reserve the widget button: its iframe loads late and would shift the form */
.pw-login{width:100%;max-width:420px}
.pw-login summary{cursor:pointer;color:var(--sec);min-height:44px;display:flex;align-items:center;justify-content:flex-start}
.pw-login summary:hover{text-decoration:underline}
.pw-login[open] summary{margin-bottom:8px}

/* admin dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:6px}
.kpi{background:var(--cell);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi b{font:var(--title2)}
.kpi span{font:var(--footnote);color:var(--sec)}
.achart{width:100%;height:auto}
.achart text{font-size:11px;fill:var(--sec)}
.b-dau{fill:var(--accent);background:var(--accent)}
.b-msg{fill:var(--fat);background:var(--fat)}
.legend{display:flex;align-items:center;gap:6px;font:var(--footnote);color:var(--sec);margin-top:8px}
.legend i{width:10px;height:10px;border-radius:3px;margin-left:8px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.scroll-x{overflow-x:auto;padding:8px}
.atable{border-collapse:collapse;font:var(--subhead);white-space:nowrap;width:100%}
.atable th{text-align:left;color:var(--sec);font-weight:600}
.atable th,.atable td{padding:8px 10px;border-bottom:.5px solid var(--sep)}
.ev{display:flex;gap:8px;flex-wrap:wrap;font:var(--subhead);padding:6px 0;border-bottom:.5px solid var(--sep)}
.ev time{color:var(--sec)}
.ce-row{padding:6px 0;border-bottom:.5px solid var(--sep)}
.ce-h{font:var(--subhead)}
.ce-sub{display:flex;gap:10px;flex-wrap:wrap;font:var(--footnote);color:var(--sec)}


/* cards, headings shared by the v3 screens */
.panel{background:var(--cell);border-radius:var(--radius);padding:16px;margin-bottom:12px}
button.panel{display:block;width:100%;text-align:left}
.panel.wash{background:var(--fill)}
h2.sec{font:var(--title2);margin:28px 0 8px}
.sec-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:4px 2px 10px}
.sec-row h2{font:var(--title2)}
.sec-note{font:var(--footnote);color:var(--sec)}
.sec-row .sec-note{font:var(--body);color:var(--sec)}
.sec-note .ic{width:16px;height:16px;margin-left:4px;vertical-align:-3px;color:var(--accent)}
.panel.feed{background:none;border-radius:0;padding:0;margin:28px 0 12px}
.feed-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:2px}
.feed-h h2{font:var(--headline);display:flex;align-items:center;gap:8px}
.feed-h h2 .ic{width:22px;height:22px;color:var(--accent)}
.feed-h>span{font:var(--subhead);color:var(--sec)}
.panel.feed .feed-h h2{font:var(--title2)}
.panel.feed .feed-h>span{font:var(--body)}
.seg{position:relative;isolation:isolate;display:flex;background:var(--fill);border-radius:9px;padding:2px;margin-bottom:16px}
/* selected-segment pill: its own element (motion.js pill) so it can slide; --i index, --n segments of equal width */
.sel-pill{position:absolute;z-index:-1;border-radius:7px;background:var(--seg);box-shadow:var(--seg-shadow)}
.seg .sel-pill{top:2px;bottom:2px;left:calc(2px + var(--i) * (100% - 4px) / var(--n));width:calc((100% - 4px) / var(--n))}
.tab-btn{position:relative;flex:1;min-height:28px;border-radius:7px;font:500 15px/16px var(--font);color:var(--text)}
.tab-btn::after{content:"";position:absolute;inset:-8px 0} /* 44px tap area */
.tab-btn+.tab-btn::before{content:"";position:absolute;left:-.5px;top:7px;bottom:7px;width:1px;background:var(--sep)}
.tab-btn[aria-selected=true]::before,.tab-btn[aria-selected=true]+.tab-btn::before{opacity:0}
.tab-btn[aria-selected=true]{font-weight:600}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 16px}
.state h2{font:var(--title2);margin-top:8px}
.state p{color:var(--sec)}

/* home */
.home-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.home-date-greeting{min-width:0}
.home-date-greeting h1{font:var(--large);letter-spacing:.011em;overflow-wrap:anywhere}
.home-date-greeting .date{display:block;font:var(--subhead);color:var(--sec)}
.avatar-btn{position:relative;width:36px;height:36px;margin-top:3px;border-radius:50%;background:var(--fill);flex:none;display:grid;place-items:center}
.avatar-btn::after{content:"";position:absolute;inset:-4px}
.avatar-btn .avatar{width:28px;height:28px}
.week{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:12px;text-align:center} /* Mon..Sun strip under the title */
.wd{display:flex;flex-direction:column;align-items:center;padding:0 0 2px;min-width:0}
.wd .w{font:500 13px/16px var(--font);color:var(--sec)}
.wd .n{display:grid;place-items:center;width:34px;height:34px;margin-top:4px;border-radius:50%;font:500 17px/22px var(--font);position:relative}
.wd[aria-current=date] .n{color:var(--accent);font-weight:600} /* today while a past day is open */
.wd[aria-pressed=true] .n{color:var(--on-accent);font-weight:600}
.week .sel-pill{top:20px;height:34px;left:calc(var(--i) * 100% / var(--n));width:calc(100% / var(--n));background:none;box-shadow:none} /* the day circle, under .wd .n */
.week .sel-pill::before{content:"";display:block;width:34px;height:34px;margin:auto;border-radius:50%;background:var(--accent)}
.wd:disabled{cursor:default}
.wd:disabled .n{color:var(--sec)}
.wd i{width:5px;height:5px;margin-top:4px;border-radius:50%}
.wd i.ok{background:var(--accent)}.wd i.over{background:var(--over)}
/* «Для тебя сегодня»: two cells per row; the story-circle / stories-row names stay as hooks */
.stories-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.story-circle{display:flex;align-items:center;gap:8px;min-width:0;min-height:64px;padding:12px;background:var(--cell);border-radius:var(--radius);color:var(--accent);text-align:left;cursor:pointer}
.story-circle .ic{width:20px;height:20px}
.story-circle b{display:block;font:600 15px/20px var(--font);color:var(--text)}
.story-circle b+span{display:block;font:var(--footnote);color:var(--sec)}
.story-circle:last-child:nth-child(odd){grid-column:1/-1} /* an odd last cell takes the whole row */
.hero .lab{font:var(--subhead);font-weight:600;color:var(--sec)}
.hero .big{display:flex;justify-content:space-between;align-items:flex-end;align-items:last baseline}
.hero .num{position:relative;font:700 48px/54px var(--font);letter-spacing:-.01em}
.hero .num small{margin-left:4px;font:600 20px/24px var(--font);color:var(--sec);letter-spacing:0}
.hero .num.over{color:var(--over)}
.hero .num .count{position:absolute;left:0;top:0;white-space:nowrap} /* motion.js countUp */
.hero .r{text-align:right;font:var(--subhead);color:var(--sec)}
.bar{height:4px;border-radius:2px;background:var(--fill);overflow:hidden} /* progress track; the <i> is the value */
.bar i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.bar i.p{background:var(--protein)}.bar i.f{background:var(--fat)}.bar i.c{background:var(--carbs)}
.bar.day{height:8px;border-radius:4px;margin-top:12px}
.bar.over i{background:var(--over)}
.hero .mac{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.hero .n{font:600 13px/16px var(--font);color:var(--sec)}
.hero .v{margin-top:2px;font:var(--subhead);font-weight:600}
.hero .v.over{color:var(--over)}
.hero .mac .bar{margin-top:6px}
.hero .mac-b,.hero .hero-main{display:block;width:100%;text-align:left;border-radius:var(--radius-sm)} /* tiles open «what gave it» */
.hero .mac-b:active,.hero .hero-main:active{opacity:.6}
.mac-sum{font:700 22px/28px var(--font);margin:0 0 8px}
.mac-hint{margin:8px 0 12px}
.sheet-items:has(.mrow){margin-top:12px}
.sheet-item.mrow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;width:100%}
.mrow .mr-t{display:flex;flex-direction:column;min-width:0}
.mrow .n{overflow:hidden;text-overflow:ellipsis}
.mrow .sb,.mrow .mr-v small{font:var(--footnote);color:var(--sec)}
.mrow .mr-v{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.mrow .mr-bar{grid-column:1/-1;display:block;height:4px;border-radius:2px;background:var(--fill);overflow:hidden;margin-top:6px}
.mrow .mr-bar i{display:block;height:100%;background:var(--accent)}
.mrow .mr-bar i.p{background:var(--protein)}.mrow .mr-bar i.f{background:var(--fat)}.mrow .mr-bar i.c{background:var(--carbs)}
.track{height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.fill{height:100%;border-radius:3px;background:var(--accent)}
.fill.p{background:var(--protein)}.fill.f{background:var(--fat)}.fill.c{background:var(--carbs)}
.challenge .card-h .icon-btn{margin:-8px -10px -8px 0}
.ch-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ch-top b{font:var(--title2);min-width:0}
.ch-top span{font:var(--subhead);color:var(--sec);white-space:nowrap}
.ch-dots{display:flex;gap:6px;margin-top:12px}
.ch-dots i{flex:1;height:8px;border-radius:4px;background:var(--fill2)}
.ch-dots i.on{background:var(--accent)}
.meal{position:relative;display:grid;grid-template-columns:1fr auto 20px;grid-template-areas:"n k c" "t k c";align-items:center;column-gap:12px;width:100%;min-height:60px;padding:8px 16px;text-align:left}
.meal+.meal::before{content:"";position:absolute;top:0;right:0;left:16px;border-top:.5px solid var(--sep)}
.meal .chev{grid-area:c;width:20px;height:20px;margin-right:-4px;color:var(--chev)}
.meal .t{grid-area:t;font:var(--subhead);color:var(--sec)}
.meal .n{grid-area:n;min-width:0;text-wrap:balance}
.meal .k{grid-area:k;color:var(--sec);white-space:nowrap}
.feed-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;margin-top:8px;text-align:center;background:var(--cell);border-radius:var(--radius)}
.feed-empty p{color:var(--sec);margin:0}
.feed-empty .ferret.sm{width:72px;height:36px}
.step-btn{position:relative;flex:1;height:32px;font-size:22px;font-weight:600;color:var(--accent-on-fill);line-height:1}
.step-btn::after{content:"";position:absolute;inset:-6px 0}
.step-btn:disabled{opacity:.4}
.panel.trk{margin:28px 0 12px;padding:0}
.trk-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0 16px;text-align:left;color:inherit}
.trk-row+.trk-row::before{content:"";position:absolute;top:0;right:0;left:52px;border-top:.5px solid var(--sep)}
.trk-row>.ic{width:22px;height:22px;color:var(--accent)}
.trk-row .tx{flex:1;min-width:0}
.trk-row .nm{font:var(--body)}
.trk-row .sb{font:var(--subhead);color:var(--sec)}
.trk-row .wn{display:inline-block} /* motion.js roll: a transform needs a box */
.trk-row .val{font:var(--headline)}
.trk-row .chev{width:20px;height:20px;margin-right:-4px;color:var(--chev)}
.stepper{display:flex;width:94px;height:32px;margin-left:auto;border-radius:8px;background:var(--fill);position:relative;flex:none}
.stepper::after{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;margin-left:-.5px;background:var(--sep)}
.moods{position:relative;display:flex;margin:-6px 16px 6px 52px;isolation:isolate} /* 1-5 segment under the text column: five 44px-wide tap targets do not fit beside the label */
.moods::before{content:"";position:absolute;inset:6px 0;border-radius:9px;background:var(--fill);z-index:-1}
.mood-btn{flex:1;min-width:0;height:var(--tap);position:relative;isolation:isolate;font:var(--subhead);font-weight:500}
.mood-btn[aria-pressed=true]{font-weight:600}
.moods .sel-pill{top:8px;bottom:8px;left:calc(var(--i) * 100% / var(--n) + 2px);width:calc(100% / var(--n) - 4px)}

/* ⊕ sheet */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 14px}
.tile{display:flex;flex-direction:column;align-items:flex-start;padding:16px;background:var(--cell);border-radius:var(--radius);min-height:101px;text-align:left;color:var(--text);cursor:pointer;min-width:0}
.tile .ic{width:24px;height:24px;color:var(--accent);margin-bottom:10px}
.tile b{font:var(--headline)}
.tile small,.mode-tile small{font:var(--footnote);color:var(--sec)}
.tile.primary{background:var(--accent);color:var(--on-accent)}
.tile.primary .ic,.tile.primary small{color:inherit}
.sheet:has(.tiles) .sheet-close,.sheet-ghost:has(.tiles) .sheet-close{display:none}
.tile:disabled{opacity:.5}
.recent p{font:var(--subhead);color:var(--sec);margin:0 0 8px}
.recent-chips{display:flex;gap:12px 8px;flex-wrap:wrap}
.recent .chip-btn{display:inline-flex;align-items:center;max-width:100%;white-space:pre}
.recent .nm{max-width:6.5em;overflow:hidden;text-overflow:ellipsis}
.sheet-item.row2{display:flex;justify-content:space-between;gap:12px;align-items:center}
.sheet-item .k{color:var(--sec);white-space:nowrap}
#toast{position:fixed;bottom:calc(var(--sab) + 92px);left:20px;right:20px;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:var(--radius);max-width:340px;margin:0 auto;opacity:0;pointer-events:none;z-index:2000;text-align:center;font:var(--subhead)}
#toast.show{opacity:1;pointer-events:auto}

/* stories and letters: a full-screen modal on the system background */
.story-ghost{pointer-events:none}
.story-overlay,.story-ghost{position:fixed;left:0;right:0;top:0;max-width:var(--col);margin:0 auto;height:var(--app-h,100dvh);transform:translateY(var(--app-y,0px));z-index:1000;background:var(--bg);color:var(--text);display:flex;flex-direction:column;overflow:hidden}
.story-in{flex:1;min-height:0;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:calc(var(--sat) + 10px) 16px calc(var(--sab) + 16px)}
.story-bars{display:flex;gap:4px;flex:none;margin-bottom:12px}
.story-bars i{flex:1;height:3px;border-radius:2px;background:var(--fill2)}
.story-bars i.on{background:var(--accent)}
.story-head{display:flex;align-items:center;gap:10px;flex:none;margin-bottom:10px;min-height:44px}
.story-head .ferret{width:48px;height:24px;flex:none}
.story-ttl{flex:1;min-width:0;display:flex;flex-direction:column}
.story-ttl b{font:var(--headline)}
.story-ttl span{font:var(--footnote);color:var(--sec)}
.story-close{width:44px;height:44px;margin-right:-8px;display:grid;place-items:center;color:var(--accent);flex:none}
.story-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.story-body h2{font:var(--title2);text-wrap:wrap}
.story-idea h2{margin-bottom:16px}
.story-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.story-chips span{background:var(--cell);padding:6px 14px;border-radius:999px;font:var(--subhead);font-weight:600}
.story-why{background:var(--cell);border-radius:var(--radius);padding:16px;margin-bottom:18px}
.story-why b{display:block;font:var(--headline);margin-bottom:4px}
.story-why p{font:var(--body);line-height:23px}
.story-btns{display:flex;gap:10px;flex-wrap:wrap}
.story-btn{min-height:50px;padding:0 22px;border-radius:var(--radius);background:var(--fill);color:var(--accent-on-fill);font:var(--headline);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.story-btn.white{background:var(--accent);color:var(--on-accent);flex:1}
.story-btn .ic{width:20px;height:20px}
.story-hint{text-align:center;font:var(--footnote);color:var(--sec);margin-top:16px}
.story-msg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:10vh}
.story-msg p{color:var(--sec)}
.story-gaps h2,.story-letter h2{margin:10px 0 20px}
.gap-card{background:var(--cell);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.gap-card .gap-top{display:flex;justify-content:space-between;gap:10px;font:var(--headline);margin-bottom:10px}
.gap-lbl{display:flex;align-items:center;gap:8px}
.gap-lbl .ic{width:20px;height:20px;color:var(--accent)}
.gap-card .gap-top span:last-child{font:var(--subhead);color:var(--sec)}
.gap-track{height:8px;border-radius:4px;background:var(--fill)}
:is(.gap-track,.cpt):has(>.growing){overflow:hidden} /* clip only while a fill slides: at rest the fill's own radius stays the only edge */
.gap-track i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.story-white{background:var(--cell);border-radius:var(--radius);padding:16px;margin-top:8px}
.story-white b{display:block;font:var(--headline);margin-bottom:4px}
.story-white p{font:var(--body);line-height:23px;margin-bottom:12px}
.story-white .btn{min-height:44px;font:var(--subhead);font-weight:600}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.stat3>div{background:var(--cell);border-radius:var(--radius);padding:14px 12px;min-width:0}
.stat3 b{display:block;font:var(--title2);white-space:nowrap}
.stat3 span{font:var(--footnote);color:var(--sec)}
.story-share{display:flex;align-items:center;gap:10px;margin:14px 4px 0;color:var(--accent);font:var(--subhead);font-weight:600;min-height:44px}
.story-share .ic{width:22px;height:22px}

/* menu */
.ideas-row{display:flex;gap:12px;overflow-x:auto;margin:0 -16px 14px;padding:0 16px;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
.ideas-row::-webkit-scrollbar{display:none}
.idea-card{flex:none;width:220px;scroll-snap-align:start;background:var(--cell);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column}
.idea-card h3{font:var(--headline);min-height:44px}
.idea-meta{font:var(--footnote);color:var(--sec);margin:4px 0 2px}
.idea-why{font:var(--caption);color:var(--sec);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;min-height:32px}
.idea-btns{display:flex;gap:8px;margin-top:auto}
.idea-btns .btn{flex:1 1 0;min-width:0;padding:0 10px}
.row-btns{margin-top:12px;flex-wrap:wrap;align-items:center}
.row-btns .btn{padding:0 18px;flex:0 0 auto;white-space:nowrap}
.row-btns .btn.quiet{padding:0 8px;background:none;color:var(--accent)} /* secondary action as text, so both fit one row */
.gaps-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.gaps-h h2{font:var(--headline)}
.gaps-h .ic{width:20px;height:20px;color:var(--chev)}
.gap+.gap{margin-top:12px}
.gap .gap-top{display:flex;justify-content:space-between;gap:10px;font:var(--subhead);margin-bottom:5px}
.gap .gap-top span:last-child{color:var(--sec);font:var(--footnote)}
.gap.p .fill{background:var(--protein)}.gap.v .fill{background:var(--fat)}.gap.d .fill{background:var(--carbs)}
.tm-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.tm-row div{flex:1;min-width:0}
.tm-row span{display:block;font:var(--caption);color:var(--sec)}
.tm-row b{font:var(--subhead);font-weight:600}
.tm-row em{font-style:normal;font-weight:700;flex:none}
.picks,.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--cell);border-radius:var(--radius);padding:16px;text-align:left;min-height:100px;min-width:0}
.pick .ic{width:26px;height:26px;color:var(--accent);margin-bottom:12px}
.pick b,.mode-tile b{font:var(--headline)}
.pick span{font:var(--footnote);color:var(--sec)}
.mode-tile{display:flex;flex-direction:column;background:var(--cell);border-radius:var(--radius);padding:16px;cursor:pointer;min-width:0}
.mode-tile .ic{width:24px;height:24px;color:var(--accent);margin-bottom:8px}
.meal-card{display:flex;align-items:center;gap:14px}
.meal-card div{min-width:0}
.meal-card span,.meal-card em{display:block;font:var(--footnote);color:var(--sec);font-style:normal}
.meal-card b{display:block;font:var(--headline);margin:1px 0}
.checkbox-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0}
.checkbox-item input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--sec);background:var(--cell);flex:none;display:grid;place-items:center;margin:0}
.checkbox-item input:checked{background:var(--accent);border-color:var(--accent)}
.checkbox-item input:checked::after{content:"";width:11px;height:6px;border-left:2.5px solid var(--on-accent);border-bottom:2.5px solid var(--on-accent);transform:rotate(-45deg) translate(1px,-1px)}
.checkbox-item .nm{flex:1;min-width:0}
.checkbox-item .q{color:var(--sec);font:var(--subhead);white-space:nowrap}

/* progress */
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:20px;margin-bottom:10px;font:var(--subhead);color:var(--sec)}
.pgcard .card-h{margin-bottom:0} /* what follows sets its own gap, as in the mockup */
.pgcard .card-h+.sub{margin-top:6px}
.pgcard .split{margin-top:12px}
.card-h h2{display:flex;align-items:center;gap:6px;font:var(--subhead);font-weight:600;color:var(--accent);position:relative}
.card-h h2 .ic{width:18px;height:18px}
.card-h>span{font:var(--subhead);color:var(--sec)}
.pgcard .v{margin-top:8px;font:var(--large);letter-spacing:.011em}
.pgcard .v small{margin-left:3px;font:600 20px/24px var(--font);color:var(--sec);letter-spacing:0}
.pgcard .v.m22{font:var(--title2);letter-spacing:0}
.pgcard .v.m22 small{margin-left:6px;font:var(--subhead)}
.pgcard .sub{margin-top:2px;font:var(--subhead);color:var(--sec)}
.pgcard .body{margin-top:10px;font:var(--body);line-height:23px}
.cap-r{margin-top:14px}
.cap-r .bl{display:flex;justify-content:space-between;font:var(--footnote);color:var(--sec)}
.cap-r .bl b{font-weight:600;color:var(--text)}
.cpt{display:block;margin-top:5px;border-radius:5px} /* the clip for .cp while it slides in */
.cp{display:block;height:10px;border-radius:5px}
.cp.gray{background:var(--gray)}.cp.acc{background:var(--accent)}
.mr{margin-top:14px}
.mr .mt{display:flex;align-items:baseline;gap:8px}
.mr .nn{flex:1;font:600 15px/20px var(--font)}
.mr .g{font:var(--footnote);color:var(--sec)}
.mr .pc{min-width:46px;text-align:right;font:var(--subhead);font-weight:600}
.mr .bar{height:6px;border-radius:3px;margin-top:6px}
.concl{margin-top:14px;padding-top:12px;border-top:.5px solid var(--sep);font:500 13px/18px var(--font)}
.wchart{width:100%;height:auto;display:block}
.wchart .pt{fill:var(--accent);opacity:.38}
.wchart .hit{fill:transparent;cursor:pointer}
.wchart text{fill:var(--sec);font-size:12px;font-weight:500}
.wchart .grid{stroke:var(--sep);stroke-width:.5}
.wchart .goal{stroke:var(--sec);stroke-width:1;stroke-dasharray:5 4}
.wchart .sel,.wchart .last{fill:var(--accent);stroke:var(--cell);stroke-width:2}
.wtip{font:var(--footnote);color:var(--text);min-height:1.4em;margin-top:4px}
.wchart .tr{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kchart{display:block;width:100%;height:auto;margin-top:12px}
.kchart text{fill:var(--sec);font-size:11px;font-weight:500}
.kchart text.hi{fill:var(--text);font-weight:600}
.kchart .grid{stroke:var(--sep);stroke-width:.5}
.kchart .nl{stroke:var(--text);stroke-opacity:.6;stroke-dasharray:5 4}
.kchart .b{fill:var(--accent)}.kchart .b.over{fill:var(--over)}.kchart .b.now{fill-opacity:.4}
.split{display:flex;height:14px;border-radius:7px;overflow:hidden}
.split .p{background:var(--protein)}.split .f{background:var(--fat)}.split .c{background:var(--carbs)}
.legend2{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font:var(--footnote);color:var(--sec)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);row-gap:8px;margin-top:12px;text-align:center} /* regularity: the month, Mon..Sun */
.cal b{font:600 11px/13px var(--font);color:var(--sec)}
.dc{justify-self:center;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:500 15px/20px var(--font)}
.dc.ok{background:var(--accent);color:var(--on-accent)}
.dc.over{background:var(--over);color:var(--on-accent)}
.dc.nil{background:var(--fill2)}
.dc.now{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);font-weight:700}
.dc.fut{color:var(--sec);font-weight:400}
.keys{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px;font:var(--footnote);color:var(--sec)}
.keys span{display:flex;align-items:center;gap:6px}
.keys i{width:12px;height:12px;border-radius:50%}
.keys .ok{background:var(--accent)}.keys .over{background:var(--over)}.keys .nil{background:var(--fill2)}
.top-row2{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font:var(--subhead)}
.top-row2 span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-row2 span:last-child{color:var(--sec);font:var(--footnote);white-space:nowrap;align-self:center}
.panel.letter-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;color:var(--accent)} /* beats button.panel{display:block} */
.letter-row .ic{width:22px;height:22px}
.letter-row b{flex:1;min-width:0;font:var(--body);color:var(--text)}
.letter-row .chev{width:20px;height:20px;margin-right:-4px;color:var(--chev)}

/* profile, memory, Нора */
.who{min-width:0}
.who h2{font:var(--title2);overflow-wrap:anywhere}
.who .level{font:var(--subhead);color:var(--sec)}
.den-link{display:inline-block;font:var(--subhead);font-weight:600;color:var(--accent);text-decoration:none;margin-top:2px}
.list{padding:0}
.lrow{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 16px;text-align:left}
.lrow+.lrow::before{content:"";position:absolute;top:0;right:0;left:52px;border-top:.5px solid var(--sep)}
.lrow .ic{width:22px;height:22px;color:var(--accent)}
.lrow .lbl{flex:1 0 auto;white-space:nowrap}
.lrow .val{color:var(--sec);flex:0 1 auto;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .chev{width:20px;height:20px;margin-right:-4px;color:var(--chev)}
.lbl-s{margin:0 0 10px}
.chips2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;gap:8px;align-items:center;background:var(--fill);padding:6px 10px 6px 14px;border-radius:999px;font:var(--subhead);color:var(--text)}
.chip-del{width:20px;height:20px;color:var(--sec);flex:none;padding:0;position:relative;display:grid;place-items:center}
.chip-del .ic{width:14px;height:14px}
.chip-del::after{content:"";position:absolute;inset:-10px}
.btn-add{background:var(--fill);color:var(--accent-on-fill);border-radius:999px;padding:0 16px;min-height:38px;font:var(--subhead);font-weight:600}
.plus-card{display:flex;align-items:center;gap:14px}
.plus-card .ic{width:24px;height:24px;color:var(--accent)}
.plus-card b{display:block;font:var(--headline)}
.plus-card span{font:var(--footnote);color:var(--sec)}
.more summary{cursor:pointer;font:var(--headline);min-height:44px;display:flex;align-items:center;justify-content:space-between;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary .ic{width:20px;height:20px;color:var(--chev);transform:rotate(90deg)}
.more[open] summary .ic{transform:rotate(-90deg)}
.more h3{font:var(--footnote);text-transform:uppercase;color:var(--sec);margin:12px 0 6px}
.logout{margin-top:8px}
.lead{font:var(--subhead);color:var(--sec);margin:0 0 14px}
.filters{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 14px;padding:0 16px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;height:38px;padding:0 18px;border-radius:999px;background:var(--fill);font:var(--subhead);font-weight:500;white-space:nowrap}
.fchip[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.mem-card{padding:14px 16px}
.mem-top{display:flex;align-items:center;gap:2px;margin:-4px -8px 0 0}
.mem-cat{flex:1;font:var(--footnote);color:var(--sec)}
.mem-t{font:var(--body);line-height:23px;margin:0 0 6px;overflow-wrap:anywhere}
.mem-d{font:var(--footnote);color:var(--sec)}
.mem-card .confirm{padding:6px 0 0}
.den-hero{background:var(--cell);border-radius:var(--radius);padding:18px 16px 16px;text-align:center;margin-bottom:22px}
.swatches{display:flex;justify-content:center;gap:12px;margin-bottom:14px}
.swatches i{width:34px;height:34px;border-radius:var(--radius-sm)}
.swatches .a{background:var(--over)}.swatches .b{background:var(--accent)}.swatches .c{background:var(--fat)}.swatches .d{background:var(--carbs)}
.den-hero .ferret.big{width:216px;height:108px;margin:0 auto 12px}
.den-hero p{font:var(--subhead);font-weight:600}
.den-hero+.sec{margin:0 2px 12px}
.achievements-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.achievement{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 6px 12px;background:var(--cell);border-radius:var(--radius);min-width:0}
.achievement i{width:48px;height:48px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--accent);margin-bottom:8px}
.achievement i .ic{width:26px;height:26px}
.achievement b{font:var(--subhead);font-weight:600}
.achievement span{font:var(--caption);color:var(--sec);margin-top:2px}
.achievement.off i{color:var(--sec)}

/* reminders sheet */
.toggles{background:var(--cell);border-radius:var(--radius);padding:0 16px}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;border-bottom:.5px solid var(--sep)}
.toggle:last-child{border-bottom:0}
.toggle input{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:16px;background:var(--fill2);position:relative;flex:none;margin:0}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);box-shadow:var(--seg-shadow)}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(20px)}
.times{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.panel.next{display:grid;grid-template-columns:36px 1fr;gap:0 12px;align-items:start}
.next h2{font:var(--headline)}
.next p{margin-top:2px;font:var(--subhead);color:var(--sec)}
.next .act{grid-column:2;display:flex;align-items:center;gap:18px;margin-top:12px}
.next .btn.quiet{padding:0;background:none;color:var(--accent)} /* text-only secondary action */
.meal-grp{margin:20px 16px 6px;font:var(--footnote);color:var(--sec);text-transform:uppercase}
.add-meal{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 16px;text-align:left;font:var(--body);color:var(--accent)}
.add-meal .ic{width:22px;height:22px}

/* «Путь»: tournaments, Топ, results, profile, ferret, lessons (ports design/mockups-v5/path-game.html #v1 to the app tokens) */
svg.s{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
svg.s.f{fill:currentColor;stroke:none}
.cool{color:var(--r2)}
.warm{color:var(--carbs)}
.center{text-align:center}
.lk-r{margin-left:auto;color:var(--accent);font:var(--body);white-space:nowrap}
.pt-who{display:flex;align-items:center;gap:4px;margin:-10px 0 12px;font:var(--subhead);color:var(--sec)}
.pt-who .ic{width:14px;height:14px;color:var(--accent)}
.pt-btns{display:flex;align-items:center;gap:8px}
.pchip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:12px;background:var(--fill);color:var(--text);font:600 13px/16px var(--font);white-space:nowrap}
.pchip.t{background:var(--tint-soft);color:var(--accent-on-fill)}
.pchip .ic{width:15px;height:15px}
.soon{display:inline-block;padding:1px 9px;border-radius:9px;background:color-mix(in srgb,var(--r4) 16%,var(--cell));box-shadow:inset 0 0 0 1px var(--r4);font:600 12px/18px var(--font);color:var(--text)}
.soonline{display:flex;justify-content:flex-end;margin:-4px 4px 8px}
.sec-h{font:var(--footnote);color:var(--sec);text-transform:uppercase;margin:20px 16px 6px}
.gf{font:var(--footnote);color:var(--sec);margin:8px 16px 0}
.spr{padding:14px 16px 16px}
.spr-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.spr-top .lb{display:flex;align-items:center;gap:8px;font:600 15px/20px var(--font)}
.spr-top .lb small{display:block;font-weight:400;color:var(--sec)}
.emb{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint-soft);color:var(--accent);flex:none}
.emb .s{width:24px;height:24px}
.days14{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin-top:14px}
.days14 i{height:8px;border-radius:4px;background:var(--fill)}
.days14 i.on{background:var(--accent)}
.days14 i.zero{background:var(--fill2)}
.days14 i.fz{background:color-mix(in srgb,var(--r2) 45%,var(--cell))}
.days14 i.now{background:var(--cell);box-shadow:inset 0 0 0 2px var(--accent)}
.days14 i.out{opacity:.4;background:none;box-shadow:inset 0 0 0 1px var(--sep)}
.spr .cap{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font:var(--footnote);color:var(--sec)}
.frozen{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--r2) 10%,var(--cell));font:var(--footnote);color:var(--text)}
.frozen .s{width:16px;height:16px;color:var(--r2)}
header.pg .frozen{margin-top:12px}
.tsel{display:flex;gap:8px;margin:0 -16px 12px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.tsel::-webkit-scrollbar{display:none}
.tsel .pchip{flex:none;height:32px;padding:0 12px;border-radius:16px;font:500 15px/20px var(--font);position:relative;background:var(--cell);box-shadow:inset 0 0 0 1px var(--sep)}
.tsel .pchip::after{content:"";position:absolute;inset:-6px 0}
.tsel .pchip .s{width:17px;height:17px;color:var(--accent)}
.tsel .pchip.solid{background:var(--accent);color:var(--on-accent);box-shadow:none}
.tsel .pchip.solid .s{color:var(--on-accent)}
.metop{display:flex;align-items:center;gap:12px;padding:14px 16px;color:inherit;text-decoration:none}
.metop .t{flex:1;min-width:0}
.metop .k{font:600 15px/20px var(--font);color:var(--sec)}
.metop b{display:block;font:var(--large);font-size:30px;letter-spacing:.011em}
.metop small{display:block;font:var(--subhead);color:var(--sec)}
.pct{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--accent);color:var(--on-accent);text-align:center;font:600 13px/16px var(--font)}
.pct b{display:block;font:700 24px/28px var(--font)}
.tour-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--tint-soft);color:var(--accent);flex:none}
.tour-ic.big{width:64px;height:64px;border-radius:18px}
.tour-ic.big .s{width:34px;height:34px}
.tour-ic.gold{background:color-mix(in srgb,var(--r4) 16%,var(--cell));color:var(--r4)}
.prom{display:flex;gap:12px;align-items:center;padding:12px 16px;width:100%;text-align:left}
.prom .t{flex:1;min-width:0}
.prom .t b{display:block;font:600 15px/20px var(--font)}
.prom .t small{display:block;font:var(--footnote);color:var(--sec)}
.track{height:6px;border-radius:3px;background:var(--fill);overflow:hidden;margin-top:8px}
.track i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.track.gold i{background:var(--r4)}
.seg.full{margin:20px 0 0}
.lgx .row{min-height:58px}
.pt-row{gap:10px;min-height:58px;padding:8px 0 8px 14px}
.pt-row .rk{min-width:28px;font:var(--headline);color:var(--sec);text-align:center;flex:none}
.pt-row .rk.top{color:var(--r4)}
.pt-row .av,.av{width:34px;height:34px;border-radius:50%;background:var(--fill);display:grid;place-items:center;flex:none;overflow:hidden}
.pt-row .av img,.av img{width:26px;height:13px;filter:grayscale(1);image-rendering:pixelated}
.av img[height="26"]{height:26px}
.pt-row .sc{flex:none;font:var(--headline);margin-right:6px}
.pt-row .row-sub .s{width:12px;height:12px;color:var(--accent)}
.pt-row.me .row-title,.pt-row.me .rk{color:var(--accent)}
.mb{display:grid;place-items:center;width:26px;height:29px;flex:none;color:var(--on-accent);font:700 11px/1 var(--font);clip-path:path("M13 0 L26 5 V16 C26 22 20 27 13 29 C6 27 0 22 0 16 V5 Z");background:var(--accent)}
.mb .s{width:14px;height:14px}
.mb.b2{background:var(--fat)}.mb.b3{background:var(--carbs)}.mb.b4{background:color-mix(in srgb,var(--accent) 88%,#000)}
.paw{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--chev);flex:none}
.paw .s{width:20px;height:20px;stroke-width:1.6}
.paw.sent{color:var(--accent)}
.paw.sent .s{fill:currentColor;stroke:none}
.row.more{justify-content:center;min-height:40px;color:var(--sec);font:var(--subhead)}
.hint.pad{padding:14px 16px}
.pinned{position:sticky;bottom:0;z-index:2;margin:8px -16px 0;padding:6px 16px 8px;background:var(--bg)}
.pinlab{display:flex;align-items:center;gap:6px;margin:0 16px 6px;font:var(--footnote);color:var(--sec)}
.pinlab .s{width:14px;height:14px}
.pinme{padding:0;margin:0;box-shadow:0 10px 28px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06);overflow:hidden}
.pinme .pt-row{background:var(--tint-soft);min-height:56px}
.pinme .pchip{margin-right:12px}
.panel.pinme.in{margin-top:10px}
.panel.priv{display:flex;gap:10px;align-items:flex-start;margin-top:12px}
.priv .s{width:20px;height:20px;flex:none;color:var(--accent);margin-top:1px}
.priv p{font:var(--subhead);color:var(--sec)}
.priv p b{color:var(--text);font-weight:600}
.priv .lk{display:block;margin-top:6px;color:var(--accent);font:var(--subhead);font-weight:600;padding:0;text-align:left}
.panel.info{display:flex;gap:10px;align-items:flex-start;font:var(--subhead)}
.panel.info .ic{width:20px;height:20px;flex:none;color:var(--accent)}
.panel.info.col{flex-direction:column;align-items:stretch}
.panel.info.lock.wide{max-width:none} /* the survey lock card spans the column like its neighbours */
.panel.info.col p{color:var(--sec)}
.panel.info.col .btn{margin-top:6px}
.gather{text-align:center;padding:20px 16px 18px}
.gather img{margin:0 auto;opacity:.4;filter:grayscale(1);image-rendering:pixelated}
.gather h3{margin-top:10px;font:600 20px/25px var(--font)}
.gather p{margin-top:4px;font:var(--subhead);color:var(--sec)}
.gather .dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.gather .dots i{animation:none}
.dots i{width:22px;height:8px;border-radius:4px;background:var(--fill2)}
.dots i.on{background:var(--accent)}
.vs .top{display:flex;justify-content:space-between;font:600 15px/20px var(--font)}
.vs .top span{font-weight:400;color:var(--sec)}
.bar-r{display:grid;grid-template-columns:minmax(0,130px) 1fr 52px;gap:10px;align-items:center;margin-top:12px;font:var(--subhead)}
.bar-r .bar{height:10px;border-radius:5px}
.bar-r b{text-align:right;font-weight:600}
.bar-r.g .bar i{background:var(--chev)}
/* picker */
header.pg{padding:4px 4px 14px}
header.pg h2{font:var(--title2)}
header.pg p{margin-top:4px;font:var(--subhead);color:var(--sec)}
.pt-sub{margin:0 0 10px}
.tl .row{flex-wrap:wrap}
.tl .row.sel{background:var(--tint-soft)}
.pt-tour{gap:12px;align-items:flex-start;padding:12px 16px;width:100%}
.pt-tour.dis{opacity:.6}
.pt-tour .t{flex:1;min-width:0}
.pt-tour .t b{font:600 17px/22px var(--font)}
.pt-tour .t p{margin-top:2px;font:var(--subhead);color:var(--sec);text-wrap:pretty}
.badge-m{display:inline-block;margin-left:6px;padding:0 7px;border-radius:9px;font:600 12px/18px var(--font);background:var(--accent);color:var(--on-accent);vertical-align:1px}
.badge-m.side{background:var(--fill2);color:var(--text)}
.badge-m.idea{background:color-mix(in srgb,var(--r4) 16%,var(--cell));color:var(--text);box-shadow:inset 0 0 0 1px var(--r4)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font:var(--footnote);color:var(--sec)}
.meta span{display:inline-flex;align-items:center;gap:4px}
.meta .s{width:14px;height:14px}
.pt-tour .chev{margin:12px 0 0 auto;width:16px;height:16px;align-self:center}
.rad{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--chev);flex:none;margin-top:8px;display:grid;place-items:center}
.rad.on{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.rad .ic{width:15px;height:15px}
.rad:not(.on) .ic{visibility:hidden}
.tl.off{opacity:.55}
.goalrow{flex:1 0 100%;display:flex;align-items:center;gap:10px;padding:0 16px 14px 68px;flex-wrap:wrap}
.goalrow label{font:var(--subhead)}
.goalrow .field{width:92px;min-height:40px;padding:0 12px}
.goalrow small{font:var(--footnote);color:var(--sec)}
.pick>.toggles{margin-top:24px}
.foot{margin-top:16px}
.foot .btn{width:100%}
.pk-note{margin-top:8px}
/* join / promise / friends sheets */
.consent{margin-top:12px;background:var(--cell)}
.consent b{font:var(--headline)}
.consent p{margin-top:2px;color:var(--sec)}
.vis{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vis span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;font:500 13px/16px var(--font);background:var(--tint-soft);color:var(--accent-on-fill)}
.vis span.no{background:var(--fill);color:var(--sec);text-decoration:line-through}
.phero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 16px 0}
.phero.tight{padding-bottom:6px}
.phero h2{margin-top:10px;font:700 26px/32px var(--font);text-wrap:balance}
.phero p{margin-top:6px;font:var(--subhead);color:var(--sec);text-wrap:pretty}
.phero .hint{margin-top:10px}
.opts{display:grid;gap:10px;margin-top:14px}
.popt{align-items:flex-start}
.popt .t{flex:1;min-width:0;display:block;text-align:left}
.popt .t b{display:block;font:var(--headline)}
.popt .t small{display:block;margin-top:2px;font:var(--subhead);color:var(--sec)}
.popt .t .pchip{margin-top:8px;display:inline-flex}
.fr-code{margin:12px 0}
.fr-code .code{display:block;text-align:center;font:700 34px/41px var(--font);letter-spacing:.14em}
.fr-code .sheet-actions{justify-content:center}
.fr-list{margin-bottom:12px}
.row-menu .ic{width:18px;height:18px}
/* inside a tournament */
.rv{padding:14px 16px}
.rv .top{display:flex;justify-content:space-between;align-items:flex-start}
.rv .lab{font:600 15px/20px var(--font);color:var(--sec)}
.rv .num{font:700 44px/50px var(--font);letter-spacing:-.01em}
.rv .num small{font:600 20px/24px var(--font);color:var(--sec);margin-left:4px;letter-spacing:0}
.rv svg{display:block;width:100%;height:auto;margin-top:10px}
svg text.txt{font:500 10.5px/1 var(--font);fill:var(--sec)}
svg text.txt.b{font-weight:600;fill:var(--text)}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font:var(--footnote);color:var(--sec)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg i{width:10px;height:10px;border-radius:3px;background:var(--fill2)}
.leg i.full{background:var(--accent)}
.leg i.part{background:color-mix(in srgb,var(--accent) 45%,var(--cell))}
.leg i.win{background:var(--tint-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.row-title.wrap{white-space:normal}
.row-sub.wrap{white-space:normal}
.row-main>.v{flex:none;margin-right:16px;white-space:nowrap}
.v.strong{font-weight:600}
.row.soft{background:color-mix(in srgb,var(--r2) 8%,var(--cell))}
.row-ic .s{width:24px;height:24px}
.row-ic .warm,.row-ic .cool{display:block}
.row.done .v{color:var(--accent)}
/* rules */
.tg{display:flex;gap:10px;padding:12px 14px;margin-bottom:12px;border-radius:22px;background:var(--cell);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.tg .ap{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:var(--r2);color:#fff;flex:none}
.tg .ap .ic{width:22px;height:22px}
.tg .tx{flex:1;min-width:0}
.tg .hd{display:flex;justify-content:space-between;font:600 15px/20px var(--font)}
.tg .hd span{font-weight:400;font-size:13px;color:var(--sec)}
.tg p{font:var(--subhead);text-wrap:pretty}
.tg small{display:block;font:var(--footnote);color:var(--sec)}
.today .lab{font:600 15px/20px var(--font);color:var(--sec)}
.today .big{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.today .num{font:700 44px/50px var(--font);letter-spacing:-.01em}
.today .num small{font:600 20px/24px var(--font);color:var(--sec);margin-left:6px;letter-spacing:0}
.today .bar.big8{height:8px;border-radius:4px;margin-top:12px}
.today .cap{display:flex;justify-content:space-between;margin-top:6px;font:var(--footnote);color:var(--sec)}
.panel.scalebox{padding:8px 12px 4px}
svg.scale{display:block;width:100%;height:auto}
svg.scale text{font:500 10.5px/1 var(--font)}
.ex .sc{flex:none;min-width:44px;margin-right:16px;text-align:center;padding:2px 8px;border-radius:9px;font:700 15px/20px var(--font);background:var(--fill)}
.ex .sc.full{background:var(--accent);color:var(--on-accent)}
.ex .sc.part{background:var(--tint-soft);color:var(--accent-on-fill)}
.frz{display:flex;gap:4px}
.frz .s{width:20px;height:20px;color:var(--chev)}
.frz .on .s{color:var(--r2)}
/* results, reward */
.screen.rwd{position:relative;overflow:hidden;background:linear-gradient(var(--tint-soft),var(--bg) 46%)} /* results + reward: full-screen modal with confetti */
.rwd>.scroll{position:relative;z-index:2}
.cele{text-align:center}
.cele .left{text-align:left}
.rwd .lev>div,.rwd .stats>div{background:var(--cell)}
.snav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:32px;font:var(--headline)}
.quiet-link{justify-self:end;color:var(--accent);font:var(--body);min-height:var(--tap);padding:0 4px;margin:-6px -4px -6px 0}
.cf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.cf i{position:absolute;width:7px;height:13px;border-radius:2px}
.medal{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:132px;height:132px;margin:18px auto 0;border-radius:50%;background:var(--cell);box-shadow:0 8px 24px rgba(0,0,0,.14);color:var(--accent)}
.medal b{font:700 52px/56px var(--font)}
.medal span{font:600 15px/18px var(--font);color:var(--sec)}
.medal img{position:absolute;right:-84px;bottom:6px}
.cele .phero{padding:16px 8px 0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.stats>div{padding:12px 14px;background:var(--bg);border-radius:12px;text-align:left}
.stats .n{font:600 13px/16px var(--font);color:var(--sec)}
.stats .v{margin-top:4px;font:700 22px/28px var(--font)}
.stats .v small{font:var(--footnote);color:var(--sec)}
.cele .row-group{margin-top:12px;text-align:left}
.cele .acts{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.bdgs{display:inline-flex;flex:none}
.bdgs .bdg+.bdg{margin-left:-4px}
.bdrow{flex-wrap:wrap}.bdrow .row-txt{flex:1 1 150px;min-width:0}
.lev{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:4px;margin-top:16px}
.lev>div{padding:12px;border-radius:14px;background:var(--bg);text-align:center}
.lev .n{font:600 13px/16px var(--font);color:var(--sec)}
.lev .v{margin-top:2px;font:700 28px/34px var(--font)}
.lev small{display:block;font:var(--footnote);color:var(--sec)}
.lev .v small.in{display:inline}
.lev .x{background:none;padding:0;font:600 22px/28px var(--font);color:var(--sec)}
.lev .k{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:9px;background:var(--tint-soft);color:var(--accent-on-fill);font:600 13px/18px var(--font)}
.xp{margin-top:10px;padding:12px 16px;border-radius:14px;background:var(--accent);color:var(--on-accent);text-align:center}
.xp b{display:block;font:700 32px/38px var(--font)}
.xp small{font:var(--footnote);opacity:.9}
.panel.case{display:flex;gap:16px;align-items:center;padding-bottom:20px}
.case .t{flex:1;min-width:0}
.case .t b{display:block;font:var(--headline)}
.case .t p{margin-top:2px;font:var(--footnote);color:var(--sec)}
.odds{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:8px}
.odds i{display:block;height:100%}
.oddl{display:flex;justify-content:space-between;margin-top:4px;font:400 11px/14px var(--font);color:var(--sec)}
.pity{display:flex;gap:4px;margin-top:6px}
.pity i{width:22px;height:6px;border-radius:3px;background:var(--fill2)}
.pity i.on{background:var(--r1)}
.loot{position:relative;display:grid;place-items:center;flex:none;width:96px;height:96px;border-radius:18px;background:color-mix(in srgb,var(--rc) 14%,var(--cell));box-shadow:inset 0 0 0 2px var(--rc);color:var(--rc)}
.loot svg:not(.s){width:60px;height:50px}
.loot .s{width:40px;height:40px}
.loot .ic{width:40px;height:40px}
.loot .rar{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:1px 10px;border-radius:10px;background:var(--rc);color:#fff;font:600 12px/18px var(--font);white-space:nowrap}
.loot.sm{width:56px;height:56px;border-radius:14px}
.loot.sm svg:not(.s){width:36px;height:30px}
.loot.sm .s,.loot.sm .ic{width:26px;height:26px}
.loot.empty{--rc:var(--chev);background:none;box-shadow:none;outline:2px dashed var(--chev);outline-offset:-2px}
.loot.empty .s{color:var(--chev)}
/* profile, ferret */
.fstage{position:relative;height:200px;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--carbs) 12%,var(--fill));display:flex;align-items:flex-end;justify-content:center}
.fstage.small{height:170px}
.fstage .wall{position:absolute;inset:0 0 56px;background:var(--cell);border-radius:0 0 50% 50%/0 0 24px 24px}
.fstage .lvl{position:absolute;left:12px;top:12px}
.fstage .px{position:relative;margin-bottom:12px;image-rendering:pixelated}
.px.bw{filter:grayscale(1) contrast(1.15)}
.px.sil{filter:brightness(0);opacity:.14}
.who{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 16px 10px}
.who h2{font:var(--title2)}
.who p{margin-top:6px;font:var(--subhead);color:var(--sec)}
.who .av.big{width:84px;height:84px;margin-bottom:8px;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent);background:var(--cell)}
.who .av.big img{width:68px;height:68px;filter:none}
.ttl{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 14px;border-radius:15px;background:var(--accent);color:var(--on-accent);font:600 14px/20px var(--font)}
.ttl .s{width:14px;height:14px}
.nextt{display:block;color:inherit;text-decoration:none}
.nextt .top{display:flex;justify-content:space-between;gap:8px;font:var(--subhead);color:var(--sec)}
.nextt .top b{color:var(--text);font-weight:700}
.nextt .bar{height:8px;border-radius:4px;margin-top:8px}
.chatnote{display:flex;align-items:center;gap:8px;margin:0 4px 12px;font:var(--footnote);color:var(--sec)}
.chatnote .avatar{width:24px;height:24px}
.sec-set{font:var(--title2);margin:24px 4px 0;scroll-margin-top:12px}
.h2{display:flex;justify-content:space-between;align-items:baseline;margin:20px 4px 8px}
.h2 h2{font:var(--title2)}
.h2 span{font:var(--subhead);color:var(--sec)}
.panel.shelf,.panel.prz,.panel.rar4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;text-align:center;font:var(--caption)}
.shelf>div,.prz>div,.rar4>div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.shelf small{color:var(--sec)}
.shelf .off{opacity:.7}
.shelf .hint,.prz .hint{grid-column:1/-1;margin:0;text-align:left}
.bdg{display:grid;place-items:center;width:40px;height:44px;background:var(--accent);color:var(--on-accent);clip-path:path('M20 0 L40 7 V25 C40 34 31 41 20 44 C9 41 0 34 0 25 V7 Z')}
.bdg.b2{background:var(--fat)}.bdg.b3{background:var(--carbs)}.bdg.b4{background:color-mix(in srgb,var(--accent) 88%,#000)}
.bdg.empty{background:var(--fill2);color:var(--sec)}
.bdg .s{width:20px;height:20px}
.bdg b{font:700 15px/18px var(--font)}
.bdg b small{font-size:10px}
.shelf .bdg{width:58px;height:64px;clip-path:path('M29 0 L58 10 V36 C58 50 45 59 29 64 C13 59 0 50 0 36 V10 Z')}
.shelf .bdg .s{width:26px;height:26px}
.shelf .bdg b{font-size:17px;line-height:20px}
.shelf>div>span{overflow-wrap:anywhere}
.toggles .toggle{min-height:56px}
.toggle .tg-ic{display:grid;place-items:center;width:28px;flex:none;margin-right:2px}
.toggle .tg-t{flex:1}
.toggle .v{color:var(--sec);font:var(--body)}
.toggle .tg-ic .s,.toggle .tg-ic .ic{width:24px;height:24px}
.toggle .tg-t small{display:block;font:var(--footnote);color:var(--sec)}
.toggle{padding:6px 0}
.optout{padding:6px 0}
.panel.grow6{padding:22px 0 0;overflow:hidden}
.strip{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:2px;padding:0 8px 14px;text-align:center;font:600 11px/14px var(--font)}
.strip>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.strip .lk{position:absolute;top:-16px;width:14px;height:14px;color:var(--sec)}
.strip .cur{color:var(--accent)}
.strip .cur img{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}
.stl{border-radius:0}
.stl .row-main{gap:12px;min-height:56px}
.stl img{flex:none}
.stl .row.cur{background:var(--tint-soft)}
.stl .row.cur .row-title{color:var(--accent)}
.stl .ic,.stl .s{width:20px;height:20px;margin-right:16px;color:var(--sec)}
.stl .done .ic,.stl .cur .s{color:var(--accent)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 10px;border-radius:14px;outline:2px dashed var(--chev);outline-offset:-2px;font:500 13px/16px var(--font);text-align:center;min-height:44px}
.slot svg:not(.s){width:44px;height:36px;opacity:.22;filter:grayscale(1)}
.slot .ic,.slot .s{width:30px;height:30px;color:var(--sec);opacity:.5}
.slot small{font-weight:400;color:var(--sec)}
.slot.on{outline:2px solid var(--accent)}
.slot.on svg:not(.s),.slot.on .ic,.slot.on .s{opacity:1;filter:none}
.ostats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 0}
.ostats>div{padding:10px 8px;border-radius:12px;background:var(--cell);text-align:center}
.ostats .n{font:600 12px/15px var(--font);color:var(--sec)}
.ostats .v{margin-top:2px;font:700 20px/25px var(--font)}
.obtn{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:20px}
.obtn .btn{padding:0 12px}
.obtn .btn .s{width:20px;height:20px}
.obtn .btn.off{background:var(--fill);color:var(--sec)}
.closed{display:grid;place-items:center;width:120px;height:120px;margin:20px auto 0;border-radius:50%;background:var(--cell);color:var(--sec);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.closed .s{width:48px;height:48px;stroke-width:1.6}
.empty .ic{width:36px;height:36px;color:var(--accent)}
/* lessons */
.lp{padding:14px 16px 16px}
.lp-a{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lp-a b{display:block;font:var(--headline)}
.lp-a span{font:var(--subhead);color:var(--sec)}
.lp-a img{image-rendering:pixelated;filter:grayscale(1)}
.lp .bar{height:6px;border-radius:3px;margin-top:12px}
.lp .btn{width:100%;margin-top:14px}
.ls .st{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--chev);font:600 14px/1 var(--font);color:var(--sec);flex:none}
.ls .st.done{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.ls .st.next{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
.ls .st .ic{width:16px;height:16px}
.ls .row-main .chev{margin-right:12px;width:14px;height:14px;opacity:.7}
.lesson-meta{margin:0 4px 8px;font:var(--footnote);color:var(--sec)}
.panel.lesson p{font:var(--body);margin-top:12px}
.panel.lesson p:first-child{margin-top:0}
/* team */
.panel.teamst b{font:var(--headline)}
.panel.teamst p{margin-top:4px;font:var(--subhead);color:var(--sec)}
.panel.teamst.pending{box-shadow:inset 0 0 0 1.5px var(--r4)}
@media (prefers-reduced-motion:no-preference){
  .cf i{animation:cf-in var(--dur-4) var(--ease-out) both}
  @keyframes cf-in{from{opacity:0;translate:0 -18px}}
}

.row-main>.chev{width:14px;height:14px;margin-right:14px;opacity:.7;flex:none}
.cele .acts .btn{font-size:16px;padding:0 10px}
.shelf>div>span{line-height:16px}
a.btn{text-decoration:none}
.chatnote{background:var(--cell);padding:10px 12px;border-radius:12px;margin:0 0 12px}
.pt-manage{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin:12px 0 0}
.pt-manage .lk{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;color:var(--accent);font:var(--body);cursor:pointer;text-decoration:underline}
.pt-manage .lk:active{opacity:.6}

/* ---------- уведомления: колокольчик и #/inbox (docs/notifications.md I1–I2, I7) ---------- */
.hd-btns{display:flex;align-items:flex-start;gap:8px}
.hd-btns .bell{margin-top:3px}
.bell-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--over);color:#fff;font:700 12px/18px var(--font);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.bell-n[hidden]{display:none}
.seg-dot{position:absolute;right:10px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.nt{display:flex;gap:12px;padding:12px 16px 12px 20px;position:relative}
.nt+.nt::before{content:"";position:absolute;top:0;right:0;left:20px;border-top:.5px solid var(--sep)}
.nt-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;background:var(--tint-soft);color:var(--accent)}
.nt-ic.g{background:color-mix(in srgb,var(--carbs) 14%,var(--cell));color:var(--carbs)}
.nt-ic.a{background:color-mix(in srgb,var(--fat) 14%,var(--cell));color:var(--fat)}
.nt-ic.w{background:color-mix(in srgb,var(--r2) 14%,var(--cell));color:var(--r2)}
.nt-ic .ic{width:22px;height:22px}
.nt-ic img{width:32px;height:32px}
.nt .tx{flex:1;min-width:0}
.nt .tp{display:flex;justify-content:space-between;gap:8px;align-items:center}
.nt .tp b{font:var(--headline)}
.nt .tm{font:var(--footnote);color:var(--sec);white-space:nowrap}
.nt p{margin-top:2px;font:var(--subhead);color:var(--sec);text-wrap:pretty}
.nt .ac{display:flex;gap:8px;margin-top:10px}
.nt.read,.nt.done{opacity:.6}
.nt.unread::after{content:"";position:absolute;left:6px;top:26px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.nt p.nt-done{display:flex;align-items:center;gap:6px;color:var(--accent-on-fill)}
.nt-done .ic{width:18px;height:18px}
.nt-foot{margin:14px 16px 0;font:var(--footnote)}
.upd{margin-bottom:12px}
.upd .vr{display:flex;justify-content:space-between;align-items:center}
.upd .vr b{display:flex;align-items:center;gap:8px;font:var(--title2)}
.upd .vr span{font:var(--footnote);color:var(--sec)}
.upd .vr b .new{font:600 12px/18px var(--font);color:var(--on-accent);background:var(--accent);border-radius:9px;padding:0 8px}
.upd ul{list-style:none;margin:6px 0 0;padding:0}
.upd li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:.5px solid var(--sep)}
.upd li:first-child{border-top:0}
.upd li .t{flex:1;min-width:0;font:var(--subhead);color:var(--sec);text-wrap:pretty}
.upd li .t b{display:block;font:var(--headline);color:var(--text)}
.upd.old{opacity:.75}
a.nt{color:inherit;text-decoration:none;align-items:center}
.nt .chev{align-self:center;color:var(--chev);width:20px;height:20px}