/* Тайминг случая · стили. Только токены дизайн-системы alexlisovoy.ru (tokens.css) и их смешение. */
:root{--sat:max(env(safe-area-inset-top),var(--sim-t,0px));--sab:max(env(safe-area-inset-bottom),var(--sim-b,0px));--sal:max(env(safe-area-inset-left),var(--sim-l,0px));--sar:max(env(safe-area-inset-right),var(--sim-r,0px));--toast-b:16px}
/* темы: светлая — основной пол сайта, тёмная — «тёмные острова» сайта */
[data-theme=light]{color-scheme:light;--bg:var(--bg-warm);--bg2:var(--bg-cream);--card:var(--surface);--line:var(--border);--line2:var(--border);--ink:var(--text-dark);--mute:var(--text-muted);
--warn:var(--warning);--warn-ink:var(--accent-dark);--over:var(--danger);--over-ink:var(--danger);--over-bg:color-mix(in srgb,var(--danger) 9%,var(--bg-warm));--ok:var(--success);--ok-ink:color-mix(in srgb,var(--success) 70%,var(--text-dark));
--r-sv:var(--text-dark);--r-pt:var(--text-muted);--r-sr:var(--text-muted-dark);--r-on-sv:var(--bg-warm);--r-on-pt:var(--surface);--r-on-sr:var(--text-dark);
--solid-bg:var(--text-dark);--solid-fg:var(--text-light);--sel-bg:var(--accent-soft);--sel-fg:var(--accent-dark);--glass:rgba(245,241,236,.88);--scrim:rgba(31,27,23,.45)}
[data-theme=dark]{color-scheme:dark;--bg:var(--bg-dark-deep);--bg2:var(--bg-dark);--card:var(--bg-dark);--line:rgba(245,241,236,.12);--line2:rgba(245,241,236,.3);--ink:var(--text-light);--mute:var(--text-muted-dark);
--warn:var(--warning);--warn-ink:var(--accent);--over:var(--dont-red);--over-ink:color-mix(in srgb,var(--dont-red) 60%,var(--text-light));--over-bg:color-mix(in srgb,var(--danger) 42%,var(--bg-dark-deep));--ok:var(--success);--ok-ink:var(--success);
--r-sv:var(--text-light);--r-pt:var(--text-muted-dark);--r-sr:var(--text-muted);--r-on-sv:var(--bg-dark-deep);--r-on-pt:var(--bg-dark-deep);--r-on-sr:var(--bg-dark-deep);
--solid-bg:var(--text-light);--solid-fg:var(--bg-dark-deep);--sel-bg:var(--accent-line);--sel-fg:var(--accent);--glass:rgba(31,27,23,.86);--scrim:rgba(0,0,0,.55)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{min-height:100%;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--font-body);-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-med) var(--ease)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;text-align:inherit}
button:disabled{opacity:.38;cursor:default}
button{-webkit-touch-callout:none}
button>*{pointer-events:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent-line);transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease)}
@media (hover: hover){a:hover{color:var(--accent-dark);text-decoration-color:var(--accent)}}
b{font-weight:500}
em{font-style:italic;color:var(--accent);font-weight:500}
.num{font-variant-numeric:tabular-nums lining-nums}
.mont{font-family:var(--font-number);font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
.tn i{display:inline-block;width:.49em;text-align:center;font-style:normal}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* роли различаются цветом, одинаково в полосах и метках; охра, красный и зелёный остаются за состояниями */
[data-theme=light]{--role-sv:#6F97BC;--role-pt:#6FA39B;--role-sr:#9C8BBF}
[data-theme=dark]{--role-sv:#8FB2D3;--role-pt:#86BBB2;--role-sr:#B3A5D4}
.dbar-seg[data-role],.sbar i[data-role]{border-radius:2px}
[data-role=sv].rsw,[data-role=sv].dbar-seg,.sbar i[data-role=sv]{background:var(--role-sv)}
[data-role=pt].rsw,[data-role=pt].dbar-seg,.sbar i[data-role=pt]{background:var(--role-pt)}
[data-role=sr].rsw,[data-role=sr].dbar-seg,.sbar i[data-role=sr]{background:var(--role-sr)}
.role{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:400;white-space:nowrap}
.rsw{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.st-no{font:800 15px/1 var(--font-number);color:var(--accent);letter-spacing:-.02em;min-width:24px;flex:none;font-variant-numeric:tabular-nums}
.st-no.plain{color:var(--ink);font-size:18px;text-align:center}
.c-ok{color:var(--ok-ink)}.c-warn{color:var(--warn-ink)}.c-over{color:var(--over-ink)}.c-mute{color:var(--mute)}
.lbl{font-size:15px;color:var(--mute)}.lbl.sm{font-size:14px}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);font:500 15px/1.3 var(--font-body);letter-spacing:.04em}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--accent);flex:none}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-xs);background:var(--sel-bg);color:var(--sel-fg);font:500 13px/1 var(--font-body);letter-spacing:.3px;white-space:nowrap}
.badge.sm{height:20px;font-size:12px;padding:0 6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.scr{display:none}
body[data-screen=setup] #scr-setup,body[data-screen=timer] #scr-timer,body[data-screen=summary] #scr-summary{display:block}
body.rules-open{overflow:hidden}

/* кнопки — как на сайте */
.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 24px;background:var(--accent);color:var(--surface);border:1px solid var(--accent);border-radius:var(--radius-sm);font:500 18px/1.2 var(--font-body);letter-spacing:.3px;text-align:center;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
@media (hover: hover){.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}}
.btn-danger{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;background:var(--danger);color:var(--surface);border-radius:var(--radius-sm);font:500 18px var(--font-body);letter-spacing:.3px}
.btn-line{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:0 16px;border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--ink);font:500 16px/1.2 var(--font-body);letter-spacing:.3px;text-align:center;transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
@media (hover: hover){.btn-line:hover{border-color:var(--accent);color:var(--accent)}}
.btn-line.danger{color:var(--over-ink)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--ink);font:500 16px var(--font-body);white-space:nowrap;transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
@media (hover: hover){.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}}
.btn-ghost svg.i{color:var(--accent)}
.btn-solid{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 20px;background:var(--solid-bg);color:var(--solid-fg);border-radius:var(--radius-sm);font:500 18px var(--font-body);letter-spacing:.3px}
.btn-text{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--mute);font:500 15px var(--font-body);transition:color var(--dur) var(--ease)}
@media (hover: hover){.btn-text:hover{color:var(--accent)}}.btn-text svg.i{width:17px;height:17px}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:var(--radius-sm);flex:none;font:500 16px var(--font-body);transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
@media (hover: hover){.icon-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}}
.icon-btn.plain{border-color:transparent}
.step{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:var(--radius-sm);color:var(--ink);flex:none;transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),background var(--dur-fast)}
@media (hover: hover){.step:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}}
.step:active:not(:disabled){background:var(--sel-bg)}
.step.lg{width:56px;height:56px}
/* выбор — как варианты ответа в анкете: охристая рамка и мягкая заливка */
.seg{display:inline-flex;gap:4px}
.seg button{min-height:40px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--bg2);color:var(--mute);font:500 15px var(--font-body);white-space:nowrap;text-align:center;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
@media (hover: hover){.seg button:hover{border-color:var(--accent)}}
.seg button[aria-pressed=true]{border-color:var(--accent);background:var(--sel-bg);color:var(--sel-fg)}
.seg.full{display:flex;width:100%}.seg.full button{flex:1;padding:0 6px}

/* ───── настройка ───── */
#scr-setup{max-width:960px;margin:0 auto;padding:calc(var(--sat) + 8px) calc(var(--sar) + 16px) calc(var(--sab) + 210px) calc(var(--sal) + 16px)}
.su-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.su-title{font:500 30px/1.08 var(--font-serif);letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.su-head-act{display:flex;align-items:center;gap:8px}
/* «Другие разделы сайта» — общий компонент сайта (/site-switch.css и .js): здесь цвета под тему таймера,
   размер кнопки на случай, если стили компонента не загрузились, и место на экране итога */
#topnavSwitch{--tsw-fg:var(--ink);--tsw-bd:var(--line2)}
#topnavSwitch .topnav-switch__btn{width:44px;height:44px;display:grid;place-items:center}
#topnavSwitch .topnav-switch__btn svg{width:18px;height:18px}
@media (hover: none){#topnavSwitch:not([data-open="true"]) .topnav-switch__btn:hover{border-color:var(--tsw-bd);color:var(--tsw-fg)}}
#topnavSwitch .topnav-switch__pop{max-height:calc(100vh - 120px)}
@media (max-width:480px){#topnavSwitch .topnav-switch__pop{top:calc(var(--sat) + 72px);max-height:calc(100vh - var(--sat) - 88px)}}
.sm-head{position:relative;padding-right:56px}
.sm-head #topnavSwitch{position:absolute;top:0;right:0}
.su-body{display:grid;gap:14px;margin-top:10px}
.su-side{display:contents}
.su-total{order:1;padding:16px}
.su-n{order:2;padding:12px 12px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.su-stages{order:3}.su-tools{order:4;display:grid;gap:8px}
/* низ настройки: «Поделиться таймером», блок о таймере, пунктир, подпись автора со ссылкой.
   Вне .su-body: иначе липкая правая колонка на десктопе доезжает до низа и ложится поверх него */
.su-foot{display:grid;gap:16px;margin-top:20px}
.su-sign{display:grid;gap:4px;padding-top:16px;border-top:1px dashed var(--line);font-size:15px;line-height:1.45;color:var(--mute)}
.su-sign a{justify-self:start}
.su-about{display:grid;gap:8px;padding-top:16px;border-top:1px dashed var(--line);font-size:15px;line-height:1.55;color:var(--mute)}
.su-about-t{font:500 22px/1.2 var(--font-serif);color:var(--ink)}
.su-about p{max-width:68ch;text-wrap:pretty}
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.su-total-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 14px}
.su-total-val{display:flex;align-items:baseline;gap:8px;padding:2px 10px;border-radius:var(--radius-sm)}
.su-total-val span{font:800 60px/1 var(--font-number);letter-spacing:-.02em;color:var(--accent)}
.su-total-val small{font:400 20px var(--font-body);color:var(--mute)}
.su-total-row .num-in{width:140px;height:64px;font:800 44px var(--font-number)}
.chips{display:flex;gap:6px}
.chip{flex:1;min-height:44px;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--bg2);font:700 15px var(--font-number);color:var(--ink);text-align:center;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
@media (hover: hover){.chip:hover{border-color:var(--accent)}}
.chip[aria-pressed=true]{border-color:var(--accent);background:var(--sel-bg);color:var(--sel-fg)}
.su-n-t{font-size:17px;font-weight:500;line-height:1.25}
.stepper{display:flex;align-items:center;gap:2px;flex:none}
.su-n-v{min-width:40px;text-align:center;font:700 22px var(--font-number)}
.su-sec{margin:6px 0 10px}
.st-list{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.st{padding:12px 8px 12px 12px;border-top:1px dashed var(--line);transition:opacity var(--dur) var(--ease)}
.st:first-child{border-top:0}
.st-main{display:flex;align-items:center;gap:8px}
.st-main .st-no{align-self:flex-start;margin-top:3px}
.st-txt{flex:1;min-width:0}
.st-name{font-size:17px;font-weight:500;line-height:1.2}
.st-role{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:5px}
.st-skip{color:var(--mute);font-style:italic}
.st-pct{color:var(--mute);padding-left:10px;border-left:1px solid var(--line)}
.st-val{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:52px;height:44px;align-items:center;border-radius:var(--radius-sm);font-size:14px;color:var(--mute)}
.st-val b{font:700 18px var(--font-number);color:var(--ink)}
.num-in{width:58px;height:44px;border:1px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:700 18px var(--font-number);text-align:center;outline:none}
.st.zero .st-name,.st.zero .st-no,.st.zero .st-val b{opacity:.42}
.st-mode{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin:10px 0 0 32px}
.st-calc{font-size:15px;color:var(--mute)}
.su-dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.dbar{position:relative;height:16px;margin:22px 0 12px}
.dbar i{position:absolute;top:0;bottom:0;display:block}
.dbar-zone{right:0;border-radius:2px;background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 6px)}
.dbar-seg{transition:left var(--dur-med) var(--ease-out),width var(--dur-med) var(--ease-out)}
.dbar-rest{border:1px dashed var(--mute);border-radius:2px;transition:left var(--dur-med) var(--ease-out),width var(--dur-med) var(--ease-out)}
.dbar-over{top:-3px!important;bottom:-3px!important;border:1.5px solid var(--over);border-radius:2px;background:repeating-linear-gradient(135deg,var(--over) 0 3px,transparent 3px 7px)}
.dbar-lim{top:-7px!important;bottom:-7px!important;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.dbar-lim span{position:absolute;bottom:100%;right:-2px;padding-bottom:2px;font:400 12px/1 var(--font-body);color:var(--mute);white-space:nowrap}
.dbar-lim span::after{content:' мин'}
.ds-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin-bottom:10px}
.ds-status{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:500}
.ds-status.ok{color:var(--ok-ink)}.ds-status.over{color:var(--over-ink)}
.ds-status svg.i{width:22px;height:22px;stroke-width:2.2;color:var(--ok)}
.ds-sum{font-size:14px;color:var(--mute);white-space:nowrap}
.ds-status.pop svg{animation:pop .5s var(--ease-out)}
.ds-status.shake{animation:shake .45s ease-in-out}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.a2hs{order:0;display:flex;align-items:center;gap:8px;padding:6px 4px 6px 14px;background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--radius-sm);font-size:15px;line-height:1.4;color:var(--mute)}
@media (min-width:900px) and (min-height:600px){
#scr-setup{padding:32px 32px 48px}
.su-head{min-height:64px}.su-title{font-size:40px}
.su-body{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px;margin-top:20px}
.su-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px;grid-column:2;grid-row:1/span 2}
.su-stages{grid-column:1;grid-row:1}.su-tools{grid-column:1;grid-row:2;grid-template-columns:repeat(4,1fr)}
.su-foot{margin-top:32px}.su-foot>.btn-line{width:auto;justify-self:start}.su-about-t{font-size:24px}
.su-dock{order:3;position:static;padding:16px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}
.su-sec{margin-top:0}
.st{padding:14px 14px 14px 18px}
}

/* ───── таймер ───── */
#scr-timer{position:fixed;inset:0;overscroll-behavior:none;touch-action:manipulation}
.tm{--prog:var(--ink);--dig:var(--ink);position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--sat) + 8px) calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);background:var(--bg);transition:background-color var(--dur-slow) var(--ease-out);overflow:hidden;-webkit-user-select:none;user-select:none}
.tm[data-state=warn],.tm[data-state=final]{--prog:var(--warn);--dig:var(--warn)}
.tm[data-state=over]{--prog:var(--over);--dig:var(--over-ink);background:var(--over-bg)}
/* время участника вышло: цифры и кольцо цветом превышения, фон остаётся (красный фон — только перерасход всего этапа) */
.tm[data-state=pover]{--prog:var(--over);--dig:var(--over-ink)}
.tm-fill,.tm-flash,.tm-frame{position:absolute;inset:0;pointer-events:none}
.tm-fill{display:none}.tm[data-viz=fill] .tm-fill{display:block}
.tm-fill i{position:absolute;inset:0;display:block;transform-origin:50% 100%;background:color-mix(in srgb,var(--prog) 18%,var(--bg));transition:transform .25s linear,background-color var(--dur-slow)}
.tm[data-state=over] .tm-fill i{opacity:0}
.tm-flash{background:var(--over);opacity:0}
.tm-flash.go{animation:flash3 1.8s ease-in-out}
@keyframes flash3{0%,33%,66%,100%{opacity:0}16%,50%,83%{opacity:.6}}
.tm-frame{border:0 solid var(--warn);opacity:0}
.tm-frame.go{animation:frame 1.2s ease-out}
@keyframes frame{0%{opacity:0;border-width:0}15%{opacity:1;border-width:8px}100%{opacity:0;border-width:8px}}
.tm-top,.tm-center,.tm-sum,.tm-ctl,.tm-banner{position:relative}
.tm-top{flex:none}
.tm-meta{display:flex;align-items:center;gap:10px;min-height:36px;font-size:16px;color:var(--mute)}
.tm-count{white-space:nowrap}
.tm-icons{display:flex;align-items:center;gap:6px;color:var(--mute)}.tm-icons svg.i{width:16px;height:16px}.tm-icons span{display:flex}
.tm-role{margin-left:auto;display:flex;font-weight:500}
.tm-role .role{font-weight:500}
.tm-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-6px;padding-right:6px;color:var(--ink);font-size:16px;font-weight:500}
.tm-bar{display:block;width:100%;padding:12px 0 14px}
.sbar{position:relative;display:flex;gap:3px;height:8px}
.sbar i{flex:var(--w) 1 0;min-width:3px;opacity:.55}
.sbar i.done{opacity:.22}
.sbar i.cur{opacity:1}
.sbar b{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--accent);border-radius:1px;transition:left .3s linear}
.tm-namerow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tm-name{font:500 36px/1.05 var(--font-serif);letter-spacing:-.01em;text-wrap:balance}
.tm-fsb{display:none}
/* кнопка звука: bell — звук включён, bell-off приглушённым цветом — выключен.
   Над циферблатом: на низком экране он бывает выше своего блока и заходит на строку названия */
.tm-nact{display:flex;align-items:center;gap:4px;flex:none;position:relative;z-index:1}
.tm-snd.off{color:var(--mute)}
.tm-center{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tm-part{font-size:20px;font-weight:500;line-height:28px;height:28px}
.tm-dial{position:relative;display:grid;place-items:center;flex:none}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:3}
.ring-track{stroke:var(--line)}
.ring-prog{stroke:var(--prog);transition:stroke-dasharray .25s linear,stroke-dashoffset .25s linear,stroke var(--dur-slow)}
.tm-digits{font:500 120px/1 var(--font-body);color:var(--dig);letter-spacing:-.015em;white-space:nowrap;transition:color var(--dur-slow),opacity var(--dur-med)}
.tm-line{display:none;width:100%;height:4px;border-radius:2px;background:var(--line);overflow:hidden;flex:none}
.tm-line i{display:block;height:100%;background:var(--prog);transform-origin:0 50%;transition:transform .25s linear,background-color var(--dur-slow)}
.tm[data-state=warn] .tm-line i{animation:breathe 2s ease-in-out infinite}
.tm-sub{min-height:28px;font-size:18px;line-height:1.3;color:var(--mute);text-align:center}
.tm-sub b{color:var(--ink)}
.tm-sub.big{font:500 italic 34px/1 var(--font-serif);color:var(--ink);min-height:34px}
.tm-sub.over{color:var(--over-ink);font-weight:500;font-size:20px}
.tm-sub.warn{color:var(--warn-ink)}
.tm-sum{flex:none;display:grid;gap:3px;padding:10px 0 12px;border-top:1px solid var(--line);font-size:15px;color:var(--mute)}
.tm-sum>div{display:flex;justify-content:space-between;gap:12px}
.tm-sum b{color:var(--ink)}
.tm-sum .c-ok,.tm-sum .c-warn,.tm-sum .c-over{font-weight:500}
.tm-next{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tm-ctl{flex:none;display:grid;gap:10px}
.tm-main{display:flex;gap:8px}
.btn-next{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 16px;background:var(--solid-bg);color:var(--solid-fg);border-radius:var(--radius-sm);font:500 20px var(--font-body);letter-spacing:.3px;transition:opacity var(--dur) var(--ease)}
.btn-next:disabled{opacity:.5}
.btn-endst{flex:none;min-height:64px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--radius-sm);font:500 16px/1.15 var(--font-body);text-align:center;max-width:120px}
.tm-row{display:grid;grid-template-columns:1fr 1fr 1fr 64px;gap:8px}
.tbtn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:0 6px;border:1px solid var(--line2);border-radius:var(--radius-sm);font:500 17px var(--font-body);letter-spacing:.3px;text-align:center;white-space:nowrap;transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
@media (hover: hover){.tbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}}
.tbtn-add{flex-direction:column;gap:1px;line-height:1.1}
.tbtn-add small{font:400 12px/1.1 var(--font-body);letter-spacing:0;color:var(--mute)}
.su-hint{margin-top:10px;font-size:14px;line-height:1.45;color:var(--mute)}
.tbtn.on{border-color:var(--accent);background:var(--sel-bg);color:var(--sel-fg)}
.btn-start{display:flex;align-items:center;justify-content:center;gap:10px;min-height:72px;background:var(--accent);color:var(--surface);border-radius:var(--radius-sm);font:500 24px var(--font-body);letter-spacing:.3px;transition:background var(--dur) var(--ease-out)}
@media (hover: hover){.btn-start:hover{background:var(--accent-dark)}}
.btn-start svg.i{width:22px;height:22px;fill:currentColor;stroke:none}
.btn-line.wide{min-height:52px}
.btn-line.wide svg.i{color:var(--accent)}
.tm-banner{position:absolute;left:calc(var(--sal) + 16px);right:calc(var(--sar) + 16px);top:calc(var(--sat) + 8px);z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:4px 4px 4px 16px;background:var(--danger);color:var(--surface);border-radius:var(--radius-md);font-size:18px;font-weight:500}
.tm-banner[hidden]{display:none}
.tm[data-state=warn] .ring-prog,.tm[data-state=warn] .tm-fill i{animation:breathe 2s ease-in-out infinite}
.tm[data-state=final] .tm-digits{animation:breathe 1s ease-in-out infinite}
.tm[data-status=pause] .tm-digits{animation:blink 2.6s ease-in-out infinite}
.tm[data-status=pause] .ring-prog,.tm[data-status=pause] .tm-fill i{animation:none;opacity:.5}
.tm[data-state=over]:not([data-status=pause]) .btn-next,.tm[data-state=pover]:not([data-status=pause]) .btn-next{animation:glow 2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes blink{0%,100%{opacity:.5}50%{opacity:.22}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--over) 45%,transparent)}}
@media (orientation:landscape) and (max-height:500px){
.tm{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px;padding:calc(var(--sat) + 10px) calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px)}
.tm-top{grid-column:1;grid-row:1}.tm-center{grid-column:1;grid-row:2}.tm-sum{grid-column:1;grid-row:3;padding-bottom:0}
.tm-ctl{grid-column:2;grid-row:1/span 3;align-content:end}
.tm-bar{padding:4px 0 6px}.tm-name{font-size:24px}.tm-meta{min-height:28px;font-size:15px}
.tm-center{gap:4px}.tm .ring{display:none}.tm[data-viz=ring] .tm-line{display:block}.tm-sub{min-height:24px;font-size:16px}.tm-sub.big{font-size:26px;min-height:26px}.tm-part{font-size:18px;height:24px;line-height:24px}
.tm-main{flex-direction:column}.btn-endst{max-width:none;min-height:48px}
.tm-row{grid-template-columns:1fr 1fr}
.btn-line.wide{min-height:48px}
}
@media (min-width:900px) and (min-height:560px){
.tm{padding:28px 40px 32px;align-items:center}
.tm-top,.tm-sum,.tm-ctl,.tm-center{width:100%;max-width:1040px}
.tm-name{font-size:44px}
.tm-fsb{display:grid}
.tm-sum{font-size:17px;grid-template-columns:1fr 1fr;column-gap:40px}
.tm-ctl{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
.tm-ctl>.btn-start{grid-column:1/-1}
.tm-ctl .btn-line.wide{min-height:72px}
.tm-row{grid-template-columns:repeat(3,1fr) 64px}
.tm-row .tbtn,.btn-next{min-height:64px}
.tm-sub.big{font-size:44px;min-height:44px}
}
body.fs .tm-ctl,body.fs .tm-fsb,body.fs .tm-snd,body.fs .tm-back{opacity:0;pointer-events:none;transition:opacity .4s}
body.fs.ui-on .tm-ctl,body.fs.ui-on .tm-fsb,body.fs.ui-on .tm-snd{opacity:1;pointer-events:auto}
body.fs .tm-sum{font-size:19px}

/* ───── итог ───── */
.sm-wrap{max-width:720px;margin:0 auto;padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px);display:grid;gap:16px}
.sm-head{display:grid;gap:10px}
.sm-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px}
.sm-num{font:800 28px/1.1 var(--font-number);letter-spacing:-.02em;margin-top:4px}
.sm-tw{padding:4px 14px}
.sm-t{width:100%;border-collapse:collapse;font-size:16px}
.sm-t th,.sm-t td{padding:11px 0;border-top:1px dashed var(--line);text-align:right;font-weight:400}
.sm-t thead th{border-top:0;font-size:14px;color:var(--mute);padding:10px 0 8px}
.sm-t th:first-child{text-align:left}
.sm-t tbody th{display:flex;align-items:center;gap:8px;padding-right:8px}
.sm-t td{width:56px;font:700 14px var(--font-number)}.sm-t td:last-child{width:64px}
.sm-t tfoot th,.sm-t tfoot td{border-top:1px solid var(--ink);font-weight:500}
.sm-t tfoot td{font-weight:800}
.sm-acts{display:grid;gap:10px}
.sm-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ───── правила ───── */
#scr-rules{display:none;position:fixed;inset:0;z-index:30;background:var(--bg);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.rules-open #scr-rules{display:block}
#scr-rules[data-mode=slides]{overflow:hidden}
body.rules-open #scr-rules[data-mode=slides]{display:flex;flex-direction:column}
.ru-top{position:sticky;top:0;z-index:3;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:var(--sat)}
.ru-mini{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px);background:var(--bg-dark-deep);color:var(--text-light);font-size:16px;transition:background-color var(--dur-slow)}
.ru-mini-dot{width:10px;height:10px;border-radius:var(--radius-pill);background:var(--text-muted-dark);flex:none}
.ru-mini-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ru-mini b{font:500 22px var(--font-body)}
.ru-mini-go{display:flex;align-items:center;gap:2px;color:var(--text-muted-dark);font-size:15px;white-space:nowrap}
.ru-mini-go svg.i{width:16px;height:16px}
.ru-mini[data-state=warn] b,.ru-mini[data-state=final] b{color:var(--accent)}
.ru-mini[data-state=warn] .ru-mini-dot,.ru-mini[data-state=final] .ru-mini-dot{background:var(--accent);animation:breathe 2s infinite}
.ru-mini[data-state=over]{background:color-mix(in srgb,var(--danger) 42%,var(--bg-dark-deep))}
.ru-mini[data-state=over] b{color:color-mix(in srgb,var(--dont-red) 60%,var(--text-light))}.ru-mini[data-state=over] .ru-mini-dot{background:var(--dont-red)}
.ru-mini[data-state=pover] b{color:color-mix(in srgb,var(--dont-red) 60%,var(--text-light))}.ru-mini[data-state=pover] .ru-mini-dot{background:var(--dont-red)}
.ru-mini[data-state=pause] b{color:var(--text-muted-dark);font-size:18px}
.ru-mini.go{animation:miniflash 1.8s ease-in-out}
@keyframes miniflash{0%,33%,66%,100%{filter:none}16%,50%,83%{filter:brightness(1.8)}}
.ru-bar{display:flex;align-items:center;gap:8px;padding:8px calc(var(--sar) + 16px) 8px calc(var(--sal) + 16px);max-width:820px;margin:0 auto}
.ru-mode{margin-right:auto}
.ru-size{display:flex;gap:4px}
.ru-fsb{display:none}
.ru-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 calc(var(--sar) + 16px) 10px calc(var(--sal) + 16px);max-width:820px;margin:0 auto}
.ru-chips::-webkit-scrollbar{display:none}
.ru-chip{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--radius-xs);background:var(--bg2);font:500 14px var(--font-body);letter-spacing:.3px;color:var(--mute);white-space:nowrap;transition:all var(--dur) var(--ease)}
.ru-chip[aria-current=true]{border-color:var(--accent);background:var(--sel-bg);color:var(--sel-fg)}
.ru-prog{height:2px}
.ru-prog i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.ru-art{max-width:var(--container-text);margin:0 auto;padding:28px calc(var(--sar) + 20px) calc(var(--sab) + 96px) calc(var(--sal) + 20px);font-size:var(--ru-fs);line-height:1.65}
.ru-hdr{margin-bottom:12px;display:grid;gap:12px}
.ru-h1{font:500 calc(var(--ru-fs)*1.85)/1.08 var(--font-serif);letter-spacing:-.01em;text-wrap:pretty}
.ru-sub{font:500 italic calc(var(--ru-fs)*1.2)/1.25 var(--font-serif);color:var(--ink);text-wrap:pretty}
.ru-ed{font-size:15px;line-height:1.5;color:var(--mute)}
.ru-share{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:4px;border-top:1px solid var(--line)}
.ru-sec{padding-top:26px}
.ru-sec h2,.ru-slide h2{font:500 calc(var(--ru-fs)*1.4)/1.15 var(--font-serif);margin-bottom:10px;text-wrap:pretty}
.ru-sec p,.ru-slide p{margin-bottom:.75em;text-wrap:pretty}
.ru-sec p b,.ru-slide p b{font-weight:500}
.ru-sec h3{font:500 1em/1.35 var(--font-body);margin:1.1em 0 .3em}
.ru-sec ul,.ru-slide ul{list-style:none;margin:0 0 .75em}
.ru-sec li,.ru-slide li{position:relative;padding-left:1.15em;margin-bottom:.35em;text-wrap:pretty}
.ru-sec li::before,.ru-slide li::before{content:'';position:absolute;left:0;top:.78em;width:.6em;height:1.5px;background:var(--accent)}
.ru-sec ul.b li,.ru-slide ul.b li{font-weight:500}
.ru-foot{position:fixed;left:0;right:0;bottom:0;z-index:3;padding:10px calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.ru-foot .btn-line{max-width:560px;margin:0 auto}
.ru-load{padding:40px 20px;color:var(--mute);text-align:center}
.ru-slide{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:var(--container-narrow);margin:0 auto;padding:24px calc(var(--sar) + 20px) 24px calc(var(--sal) + 20px);font-size:var(--ru-fs);line-height:1.5}
.ru-slide .eyebrow{margin-bottom:16px}
.ru-slide h2{font-size:calc(var(--ru-fs)*1.5);margin-bottom:16px}
.ru-nav{flex:none;display:grid;gap:10px;padding:10px calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);border-top:1px solid var(--line);width:100%;max-width:var(--container-narrow);margin:0 auto}
.ru-nav-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.ru-nav .btn-solid{background:var(--accent);color:var(--surface)}
.ru-cnt{font:700 15px var(--font-number);color:var(--mute);min-width:64px;text-align:center}
.ru-print{display:none}
@media (min-width:900px){.ru-fsb{display:grid}.ru-slide{padding-top:48px}}
body.fs .ru-slide{font-size:calc(var(--ru-fs)*1.4);max-width:1100px;padding-top:6vh}
body.fs .ru-top,body.fs .ru-nav{opacity:0;transition:opacity .4s}
body.fs.ui-on .ru-top,body.fs.ui-on .ru-nav{opacity:1}

/* ───── шторки, тосты ───── */
.sheet-bg{position:fixed;inset:0;z-index:50;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;animation:fade var(--dur) var(--ease-out)}
.sheet{width:100%;max-width:560px;max-height:calc(100% - var(--sat) - 16px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);color:var(--ink);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:6px calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);animation:up var(--dur-med) var(--ease-out)}
.sheet-grab{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:4px auto 6px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.sheet-t{font:500 26px/1.15 var(--font-serif)}
.sheet-head .icon-btn{margin-right:-10px}
.sheet-note{font-size:15px;color:var(--mute);margin-bottom:12px}
@keyframes fade{from{opacity:0}}@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (min-width:700px) and (min-height:600px){.sheet-bg{align-items:center}.sheet{border-radius:var(--radius-lg);max-height:86vh;padding-bottom:20px}.sheet-grab{display:none}.sheet-head{padding-top:10px}}
.cf-text{font-size:18px;line-height:1.5;margin:4px 0 18px;text-wrap:pretty}
.cf-btns{display:grid;gap:8px}
.cf-btns .btn-line{min-height:56px;font-size:17px}
.menu{display:grid}
.menu button{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 4px;border-top:1px dashed var(--line);font-size:18px}
.menu button:first-child{border-top:0}
.menu button svg.i{color:var(--accent)}
.menu .danger,.menu .danger svg.i{color:var(--over-ink)}
.adj{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.adj .tbtn:last-child{grid-column:1/-1;color:var(--over-ink)}
.sl{display:grid}
.sl-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:6px 4px;border-top:1px dashed var(--line)}
.sl-row:first-child{border-top:0}
.sl-name{flex:1;min-width:0;display:flex;flex-direction:column;font-size:17px;font-weight:500;line-height:1.2}
.sl-name small{display:flex;font-size:14px;font-weight:400;margin-top:4px}
.sl-t{font-size:15px;color:var(--mute);text-align:right;white-space:nowrap}
.sl-row.done .sl-name,.sl-row.done .st-no{opacity:.55}
.sl-row.cur{background:var(--sel-bg);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:6px 10px;margin:0 -6px}
.sl-row.cur+.sl-row{border-top-color:transparent}
.sl-row.cur .sl-t{color:var(--ink)}
.set-g{padding:14px 0;border-top:1px solid var(--line);display:grid;gap:12px}
.set-g:first-child{border-top:0;padding-top:4px}
.set-gl{font:500 14px var(--font-body);color:var(--accent);letter-spacing:.04em}
.set-f{display:grid;gap:8px}
.set-l{font-size:17px;font-weight:500}
.set-h{font-size:14px;color:var(--mute);line-height:1.45}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;width:100%}
.set-txt{display:grid;gap:2px}
.sw{position:relative;flex:none;width:50px;height:30px;border-radius:15px;background:var(--line2);transition:background var(--dur) var(--ease)}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-faint),0 1px 3px rgba(42,37,32,.2);transition:transform var(--dur) var(--ease-out)}
[data-theme=light] .sw{background:color-mix(in srgb,var(--text-muted) 45%,var(--border))}
[aria-checked=true] .sw{background:var(--accent)!important}[aria-checked=true] .sw::after{transform:translateX(20px)}
.range{width:100%;height:44px;accent-color:var(--accent)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;font-size:17px}
kbd{display:inline-block;min-width:36px;padding:3px 8px;border:1px solid var(--line2);border-radius:var(--radius-sm);font:500 15px var(--font-body);text-align:center}
.toast-wrap{position:fixed;left:0;right:0;bottom:var(--toast-b);z-index:60;display:flex;justify-content:center;padding:0 calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:520px;min-height:52px;padding:4px 4px 4px 16px;background:var(--bg-dark);color:var(--text-light);border:1px solid rgba(245,241,236,.12);border-radius:var(--radius-md);font-size:17px;box-shadow:var(--shadow-card);animation:up var(--dur) var(--ease-out)}
.toast button{min-height:44px;padding:0 14px;color:var(--accent);font-weight:500;white-space:nowrap}
body.rules-open .toast-wrap{--toast-b:16px}

/* шапка настройки на телефоне: заголовок, «Правила», «Настройки» и «Другие разделы сайта» в одну строку.
   Ширина «Тайминг случая» ≈ 6,1 × кегль; кегль плавно уменьшается, пока шапка не помещается (не меньше 18 px) */
@media (max-width:479px){.su-head{gap:8px}.su-head-act{gap:6px}.su-head .btn-ghost{padding:0 10px;gap:6px}.su-head .su-title{font-size:clamp(18px,calc(16.3vw - 40px),30px)}}
/* компактные iPhone, 375 pt */
@media (max-width:389px){.su-title{font-size:26px}.su-head-act{gap:6px}.su-head .btn-ghost{padding:0 10px;gap:6px}.su-total-val span{font-size:52px}
.btn-next{font-size:18px;white-space:nowrap;padding:0 12px;gap:8px;min-width:0}.btn-endst{max-width:92px;font-size:15px;padding:0 8px}.tbtn{font-size:16px}.tm-row{grid-template-columns:1fr 1fr 1fr 56px}.tm-sum{font-size:14px}}
@media (max-width:429px){.st-pct{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
body.shot *{transition:none!important}
body.boxed{position:relative;transform:translateZ(0);overflow:hidden;min-height:0}
html.lock,html.lock body{overflow:hidden;overscroll-behavior:none;height:100%}
@media print{
body{background:#fff;color:#000}
#app>*:not(#scr-rules),#sheets,#toasts{display:none!important}
#scr-rules{position:static;display:block!important;overflow:visible;background:#fff}
#scr-rules>*:not(.ru-print){display:none!important}
.ru-print{display:block;font:400 12pt/1.5 var(--font-body);color:#000}
.ru-print h1{font:500 24pt/1.1 var(--font-serif);margin-bottom:4pt}
.ru-print .ru-sub{font:italic 14pt/1.3 var(--font-serif);margin-bottom:4pt}.ru-print h3{font:500 12pt var(--font-body);margin:8pt 0 2pt}.ru-print ul{margin:0 0 6pt 14pt}
.ru-print h2{font:500 15pt/1.2 var(--font-serif);margin:14pt 0 4pt;break-after:avoid}
.ru-print p{margin-bottom:6pt}.ru-print .ru-ed{color:#555}
}