/* Главная «Разбор ниши» с Рикко: дашборд по реальным роликам ниши. Язык «Рикко» (кремовый лист, пастельные карточки, красные капсулы, ночные блоки).
   Токены, шапка, подвал, кнопки и поля приходят из static/css/ricco/*.css (общая дизайн-система сайта).
   Здесь только раскладка дашборда; всё внутри .dash, чтобы не задевать другие страницы.
   Состояния: .dash[data-state=landing | results | empty].
   Принцип: один блок отвечает на один вопрос. Сверху итог за минуту (3 цифры), потом что снять, что дальше, план; подробные цифры свёрнуты в «Все цифры ниши». */

.dash{--panel-r:var(--r-xl);--tile-r:var(--r-lg);--inner-r:18px;--gap:16px;--pad:clamp(22px,3.4vw,44px);padding-bottom:var(--s-7)}
.dash[data-state=landing]{padding-bottom:0}
@media (min-width:900px){.dash{--gap:20px}}
.dash :is(h1,h2,h3){text-wrap:balance}
.dash .num{color:var(--action);font-weight:800}
.dash b{font-weight:600}
.dash [hidden]{display:none!important}
.dash .simulator-entry{margin-top:20px;font-size:var(--t-sm);color:var(--ink-2)}
.dash .simulator-entry a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--action);font-weight:600}
.dash .simulator-entry .ui-icon{width:18px;height:18px;flex:none}

/* ===== Кнопки дашборда (повторяют .button сайта) ===== */
.dash .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:var(--r-pill);border:1px solid transparent;font:600 .9375rem/1.1 var(--font-text);letter-spacing:var(--track-label);text-decoration:none;white-space:nowrap;cursor:pointer;
 transition:background-color var(--d-2),border-color var(--d-2),color var(--d-2),box-shadow var(--d-2),transform var(--d-1);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dash .btn .ui-icon{width:18px;height:18px}
.dash .btn:active{transform:scale(.97)}
@media (max-width:560px){.dash .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:14px}}
.dash .btn-primary{background:var(--button);color:var(--on-button);box-shadow:var(--glow)}
.dash .btn-primary:hover{background:var(--button-hover);box-shadow:0 14px 30px -12px rgb(213 44 54 / .75)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.dash .btn-primary:hover{transform:translateY(-2px)}}
.dash .btn-quiet{background:transparent;color:var(--ink);border-color:color-mix(in oklab,var(--ink) 28%,transparent)}
.dash .btn-quiet:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dash .btn-text{min-height:44px;padding:0 12px;background:none;color:var(--ink)}
.dash .btn-text:hover{background:color-mix(in oklab,var(--ink) 8%,transparent)}

/* ===== Первый экран: слева вопрос и строка поиска, справа Рикко ===== */
.dash .hero{display:grid;gap:var(--s-5) var(--s-7);padding-block:clamp(20px,3.4vw,48px) clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.dash .hero{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}}
.hero-main{min-width:0}
.hero-kicker{display:inline-flex;align-items:center;gap:8px}
.dash .hero h1{margin-top:18px;font-size:var(--t-hero);font-weight:800;line-height:1.02;letter-spacing:var(--track-display);max-width:16ch}
.dash .hero .lead{margin-top:20px;max-width:44ch;color:var(--ink-2);font-size:var(--t-lead)}
.verdict{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 18px 8px 14px;border-radius:var(--r-pill);font:600 var(--t-sm)/1.2 var(--font-text);color:var(--ink);background:var(--paper-sunken)}
.verdict::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--c-rest)}
.verdict[data-v=good]{background:var(--mint)}
.verdict[data-v=good]::before{background:var(--ok)}
.verdict[data-v=some]{background:var(--butter)}
.verdict[data-v=some]::before{background:linear-gradient(90deg,var(--warn) 50%,var(--c-rest) 50%)}
.verdict[data-v=low]{background:var(--sky)}
.verdict[data-v=thin]{background:var(--paper-sunken)}

/* Главный вход: большая строка поиска. Она и есть первое действие на сайте. */
.pick{position:relative;z-index:8;margin-top:30px;max-width:640px}
.pick>label{display:block;margin-bottom:10px;font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-3)}
.combo{position:relative;display:flex;align-items:center;gap:8px;padding:8px;padding-left:56px;min-height:68px;background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-pill);box-shadow:4px 4px 0 var(--ink);transition:box-shadow var(--d-2),transform var(--d-2)}
.combo:focus-within{z-index:2;box-shadow:6px 6px 0 var(--accent);transform:translate(-1px,-1px)}
.combo>.ui-icon{position:absolute;left:24px;top:50%;width:22px;height:22px;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.dash .combo input{flex:1;min-width:0;min-height:52px;padding:0;border:0;border-radius:0;background:transparent;font-size:1.1875rem;box-shadow:none;outline:none}
.dash .combo input:focus-visible{box-shadow:none;outline:none}
.dash .combo input[aria-invalid=true]{background:transparent}
.combo:has(input[aria-invalid=true]){border-color:var(--bad)}
.go{flex:none;display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:var(--r-pill);background:var(--button);color:var(--on-button);font:600 .9375rem/1.1 var(--font-text);letter-spacing:var(--track-label);box-shadow:var(--glow);transition:background-color var(--d-2),box-shadow var(--d-2),transform var(--d-1)}
.go:hover{background:var(--button-hover)}
.go:active{transform:scale(.97)}
.go-short{display:none}
@media (max-width:480px){.go-long{display:none}.go-short{display:inline}.go{padding:0 18px}.combo{padding-left:46px;min-height:64px;box-shadow:3px 3px 0 var(--ink)}.combo>.ui-icon{left:16px}.dash .combo input{font-size:1rem}}
.pick[aria-busy=true] .go{opacity:.7;cursor:progress}
.list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 12px);margin:0;padding:8px;list-style:none;background:var(--card);border:var(--hairline);border-radius:var(--r-lg);box-shadow:var(--float);max-height:min(380px,52vh);overflow:auto}
.list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 16px;border-radius:var(--r-md);cursor:pointer;font-weight:500}
.list li small{flex:none;font-size:var(--t-xs);font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.list li small b{color:var(--action)}
.list li[aria-selected=true],.list li:hover{background:var(--paper-sunken)}
.msg{min-height:20px;margin-top:8px;font-size:.875rem;font-weight:500;color:var(--bad)}
.msg:empty{min-height:0;margin:0}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.quick>span{font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:2px;white-space:nowrap}
@media (max-width:640px){.quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 6px;scroll-padding-inline:var(--gutter)}.quick::-webkit-scrollbar{display:none}.dash .quick .chip{flex:none}}
.dash .quick .chip{min-height:44px;padding:0 18px}
.dash .quick a.chip{text-decoration:none}
.dash .quick .chip-all{--bd:transparent;color:var(--action);font-weight:600}
.dash .quick .chip-all:hover{--bg:transparent;--fg:var(--action-press);text-decoration:underline;text-underline-offset:5px}
.facts{margin-top:26px;font:500 var(--t-xs)/1.7 var(--font-text);color:var(--ink-3)}
.facts b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.noscript{margin-top:16px;padding:12px 14px;border-radius:var(--inner-r);background:var(--butter);font-size:var(--t-sm)}

/* ===== Рикко на сцене: мятный овал, реплика в овальном пузыре, подпись от руки ===== */
.stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:10px;min-width:0;margin:0}
.stage-art{position:relative;width:min(100%,520px);aspect-ratio:1;display:grid;place-items:center}
.stage-blob{position:absolute;inset:6% 2% 4%;border-radius:50%;background:var(--mint);transition:background-color var(--d-4) var(--ease-out)}
.stage[data-pose=happy] .stage-blob{background:var(--rose)}
.stage[data-pose=think] .stage-blob{background:var(--lilac)}
.stage[data-pose=idea] .stage-blob{background:var(--butter)}
.stage[data-pose=read] .stage-blob{background:var(--sky)}
.stage[data-pose=laptop] .stage-blob{background:var(--lilac)}
.stage-ricco{position:relative;z-index:1;width:88%}
.stage-ricco .ricco-actor,.stage-ricco .mascot{width:100%;height:auto}
.say{position:absolute;z-index:2;top:0;right:0;max-width:min(78%,260px);padding:12px 20px;background:var(--card);border:1.5px solid var(--ink);border-radius:26px;font:700 clamp(.9375rem,.85rem + .4vw,1.125rem)/1.2 var(--font-text);letter-spacing:-.01em;transform:rotate(-3deg);text-wrap:balance;transition:opacity var(--d-2)}
.say::after{content:'';position:absolute;left:22px;bottom:-9px;width:16px;height:16px;background:var(--card);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.say.is-new{animation:say-in var(--d-3) var(--ease-out)}
@keyframes say-in{from{opacity:0;transform:rotate(-3deg) translateY(8px) scale(.96)}}
.stage-note{font:600 .8125rem/1.3 var(--font-text);color:var(--ink-3)}
.stage-ricco.is-swapping{animation:ricco-in var(--d-4) var(--ease-out)}
@keyframes ricco-in{from{opacity:0;transform:translateY(14px)}}
@media (max-width:899px){
 .stage{order:2}
 .dash[data-state=landing] .hero{padding-bottom:var(--s-4)}
 .stage-art{width:min(100%,300px)}
 .say{right:0;top:-3%;max-width:min(66%,230px)}
}
/* После выбора ниши Рикко остаётся рядом с итогом, но компактно: реплика над ним, в потоке, чтобы не закрывать голову */
.dash:not([data-state=landing]) .say{position:relative;top:auto;right:auto;order:-1;justify-self:end;margin-bottom:-14px;max-width:min(100%,260px)}
.dash:not([data-state=landing]) .stage-art{width:min(100%,300px)}
.dash:not([data-state=landing]) .stage-note{display:none}
@media (max-width:899px){
 .dash:not([data-state=landing]) .stage{grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center;justify-items:start;column-gap:12px;margin-top:0}
 .dash:not([data-state=landing]) .stage-art{width:100%;grid-column:1;grid-row:1}
 .dash:not([data-state=landing]) .say{grid-column:2;grid-row:1;order:0;margin:0;justify-self:start;max-width:none;transform:rotate(-1.5deg)}
 .dash:not([data-state=landing]) .say::after{left:-8px;bottom:auto;top:calc(50% - 8px);border:0;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg)}
}

/* ===== Пример разбора на реальных данных ===== */
.demo-sec{padding-block:var(--s-5) 0}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(20px,2.5vw,32px)}
.sec-head .eyebrow{color:var(--action)}
.sec-head h2{font-size:var(--t-h2);line-height:1.02;max-width:16ch}
.sec-head .lead{max-width:34em}
.demo{margin:0;min-width:0}
.demo-card{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(20px,4vw,52px);align-items:center;padding:clamp(18px,2.8vw,32px);background:var(--mint);border-radius:var(--r-xl);text-decoration:none;color:inherit;transition:transform var(--d-3) var(--ease-apple),box-shadow var(--d-3)}
@media (hover:hover){.demo-card:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}}
.demo-card:focus-visible{outline:3px solid var(--action);outline-offset:4px}
.demo-stats{display:grid;align-content:center;gap:10px;min-width:0}
.demo-stats .kpi-l{margin-top:0}
.demo-niche{font:800 clamp(1.25rem,1rem + 1vw,1.875rem)/1.12 var(--font-display);letter-spacing:var(--track-display)}
.demo-big{display:flex;align-items:baseline;gap:.2em;font:800 clamp(3.75rem,2.4rem + 4.6vw,6.5rem)/.95 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.demo-big small{font-size:.3em;color:var(--ink);letter-spacing:0;font-weight:700}
.demo-stats .kpi-s{font-size:var(--t-sm);max-width:36ch}
.demo-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:700 .9375rem/1.2 var(--font-text);color:var(--ink)}
.demo-go .ui-icon{width:18px;height:18px;transition:transform var(--d-2) var(--ease-apple)}
.demo-card:hover .demo-go .ui-icon{transform:translateX(4px)}
.demo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.demo-tabs button{min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid color-mix(in oklab,var(--ink) 25%,transparent);font:500 .9rem/1 var(--font-text);color:var(--ink-2);transition:color var(--d-1),background-color var(--d-1),border-color var(--d-1)}
.demo-tabs button:hover{color:var(--ink);border-color:var(--ink)}
.demo-tabs button[aria-pressed=true]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.demo-note{margin-top:10px;font-size:var(--t-xs);color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){.demo-card.swap{animation:fade var(--d-3) var(--ease-apple)}}
@keyframes fade{from{opacity:.25}}
@media (max-width:520px){.demo-card{grid-template-columns:128px minmax(0,1fr);gap:16px;padding:16px;border-radius:28px}.demo-big{font-size:3.25rem}.demo-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}.demo-tabs::-webkit-scrollbar{display:none}.demo-tabs button{flex:none}}

/* Вертикальный кадр 9:16: обложка ролика или карточка с названием */
.vframe{position:relative;display:block;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--paper-deep);color:var(--ink);isolation:isolate}
.vframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vframe .vf-title{position:absolute;inset:0;display:flex;align-items:center;padding:14px;font:500 .875rem/1.35 var(--font-text);color:var(--ink-2);overflow:hidden;background:linear-gradient(160deg,var(--accent-wash),var(--paper-deep))}
.vframe .vf-title span{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.vframe .vf-views{position:absolute;left:8px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);background:rgb(32 32 30 / .78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f8f6f0;font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.vframe .vf-views .ui-icon{width:13px;height:13px}
.vframe .vf-play{position:absolute;right:8px;top:8px;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgb(32 32 30 / .7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f8f6f0}
.vframe .vf-play .ui-icon{width:14px;height:14px;fill:currentColor;stroke:none}

/* Как это работает: три пастельные карточки */
.how{padding-bottom:clamp(32px,4vw,56px)}
.how-path{display:grid;gap:var(--gap);margin:0;padding:0;list-style:none}
@media (min-width:800px){.how-path{grid-template-columns:repeat(3,minmax(0,1fr))}}
.how-path li{display:grid;align-content:start;gap:10px;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg)}
.how-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--card);margin-bottom:8px}
.how-ic .ui-icon{width:22px;height:22px}
.how-path b{font:800 clamp(1.25rem,1.05rem + .8vw,1.65rem)/1.15 var(--font-display);letter-spacing:-.03em}
.how-path span:not(.how-ic){font-size:var(--t-body);color:var(--ink-2);max-width:34ch}

/* Призыв: ночной блок с Рикко за ноутбуком */
.closing{padding-bottom:0}
.closing-in{display:grid;align-items:center;gap:var(--s-5) var(--s-7);padding:clamp(24px,3vw,40px)}
@media (min-width:860px){.closing-in{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}}
.closing-copy{display:grid;justify-items:start;gap:20px}
.closing-in h2{font-size:var(--t-h2);line-height:1.02;max-width:15ch}
.closing-in p{max-width:34em;font-size:var(--t-lead);line-height:1.5;color:var(--ink-2)}
.closing-in .btn-primary{min-height:56px;padding:0 34px}
.closing-art{justify-self:center;width:min(100%,280px)}
.closing-art .ricco-actor,.closing-art .mascot{width:100%;height:auto}

/* ===== Состояние «разбор»: первый экран превращается в шапку дашборда ===== */
.dash:not([data-state=landing]) :is(.demo-sec,.how,.closing,.facts,.quick){display:none}
.dash[data-state=results] .hero,.dash[data-state=empty] .hero{padding-block:clamp(16px,2.6vw,36px) clamp(16px,2.4vw,28px);align-items:end}
@media (min-width:900px){.dash:not([data-state=landing]) .hero{grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr)}}
.dash #h1:focus,.dash h2[tabindex]:focus{outline:none}
.dash[data-state=results] .hero h1,.dash[data-state=empty] .hero h1{margin-top:12px;font-size:var(--t-h1);max-width:none;line-height:1}
.dash[data-state=results] .hero .lead,.dash[data-state=empty] .hero .lead{margin-top:14px;font-size:var(--t-sm);line-height:1.55;color:var(--ink-3);max-width:70ch}
.dash:not([data-state=landing]) .pick{margin-top:20px;max-width:560px}
.dash:not([data-state=landing]) .combo{box-shadow:none;padding:4px 4px 4px 48px;min-height:56px;border-width:1px;border-color:var(--rule-strong)}
.dash:not([data-state=landing]) .combo:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px var(--focus-ring);transform:none}
.dash:not([data-state=landing]) .combo>.ui-icon{left:18px;width:20px;height:20px}
.dash:not([data-state=landing]) .combo input{min-height:44px;font-size:1.0625rem}
.dash:not([data-state=landing]) .go{min-height:44px;padding:0 20px}
.dash:not([data-state=landing]) .go-long{display:none}.dash:not([data-state=landing]) .go-short{display:inline}
.dash:not([data-state=landing]) .msg:empty{min-height:0;margin:0}

/* ===== Липкая навигация по разделам ===== */
.subnav{position:sticky;top:var(--header-h);z-index:calc(var(--z-header) - 1);background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border-block:1px solid var(--rule);margin-bottom:var(--gap)}
@media (prefers-reduced-transparency:reduce){.subnav{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
.subnav-in{display:flex;align-items:center;gap:8px 28px;min-height:52px}
.subnav-title{flex:none;display:inline-flex;align-items:center;max-width:22ch;min-height:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 1.0625rem/1 var(--font-display);letter-spacing:var(--track-display);color:var(--ink);cursor:pointer;transition:color var(--d-1)}
.subnav-title:hover{color:var(--action)}
span.subnav-title{cursor:default}
span.subnav-title:hover{color:var(--ink)}
.subnav-links{display:flex;align-items:center;gap:0;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links li{flex:none;scroll-snap-align:center}
.subnav-links a{position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0 14px;font:500 .9375rem/1 var(--font-text);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color var(--d-1)}
.subnav-links a::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent);transform:scaleX(0);transition:transform var(--d-2) var(--ease-apple)}
.subnav-links a:hover{color:var(--ink)}
.subnav-links a[aria-current=location]{color:var(--ink);font-weight:600}
.subnav-links a[aria-current=location]::after{transform:scaleX(1)}
@media (min-width:1000px){.subnav-links{margin-left:auto}}
@media (max-width:640px){.subnav-in{overflow-x:auto;scrollbar-width:none;gap:4px 12px;margin-inline:auto}.subnav-in::-webkit-scrollbar{display:none}.subnav-title{max-width:12ch}.subnav-links{overflow:visible;flex:none}}
[data-fade]{--fade:28px}
[data-fade=end]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--fade)),transparent)}
[data-fade=start]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to left,#000 calc(100% - var(--fade)),transparent)}
[data-fade=both]{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}

/* ===== Дашборд ===== */
.board{display:grid;gap:var(--gap)}
.panel{min-width:0;padding:var(--pad);background:var(--card);border:1px solid var(--rule);border-radius:var(--panel-r);box-shadow:var(--lift-1)}
.panel-head{display:grid;gap:12px;margin-bottom:clamp(20px,2.6vw,32px)}
.panel-head h2,.dash .plan h2{font-size:clamp(1.6rem,1rem + 2.2vw,2.75rem);font-weight:800;line-height:1.04;outline:none;max-width:18ch}
.panel-head .eyebrow{color:var(--action)}
.takeaway{color:var(--ink-2);max-width:62ch;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5}
.takeaway b{color:var(--ink)}
.row{display:grid;gap:var(--gap);min-width:0}


/* 1. Итог за минуту: три плитки, одна цифра в каждой */
.kpis{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{display:grid;align-content:space-between;gap:14px;min-width:0;min-height:210px;padding:clamp(22px,2.4vw,34px);border-radius:var(--tile-r);background:var(--card);border:1px solid var(--rule)}
.kpi[data-tint=mint]{background:var(--mint);border-color:transparent}
.kpi[data-tint=rose]{background:var(--rose);border-color:transparent}
.kpi[data-tint=lilac]{background:var(--lilac);border-color:transparent}
.kpi[data-tint=butter]{background:var(--butter);border-color:transparent}
.kpi-l{font:700 var(--t-sm)/1.3 var(--font-text);color:var(--ink-2);overflow-wrap:anywhere}
.kpi-v{font:800 var(--t-number)/.95 var(--font-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi-v small{font-size:.34em;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.kpi-v .num{color:var(--action)}
.bn{white-space:nowrap}.bn small{font-size:.4em;letter-spacing:0;color:var(--ink)}
.kpi-s{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;max-width:30ch}
.kpi-s b{color:var(--ink)}
.kpi-v.word{font-size:clamp(1.6rem,1.2rem + 1vw,2.25rem);line-height:1.1}
.kpi-top{display:grid;gap:10px}
.kpi-rec{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}
.kpi-rec .vframe{border-radius:14px}
.kpi-rec .kpi-v{font-size:clamp(2.25rem,1.4rem + 2.8vw,3.75rem)}
.units{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.units i{width:14px;height:14px;border-radius:5px;background:color-mix(in oklab,var(--ink) 14%,transparent)}
.units i.on{background:var(--c-hit)}
@media (max-width:959px){.kpi{min-height:0;gap:10px}.kpi-v{font-size:clamp(2.75rem,2rem + 4vw,3.5rem)}}
.kpi.skel{min-height:200px}
.kpi.skel i{display:block;height:12px;width:60%;border-radius:6px;background:var(--paper-sunken)}
.kpi.skel i+i{height:34px;width:45%}

/* Место среди ниш (внутри «Все цифры») */
.rank{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:18px 28px;background:var(--paper-sunken);border-radius:var(--tile-r)}
.rank[hidden]{display:none}
.rank-h{margin:0;font:600 var(--t-label)/1.4 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rank ul{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none}
.rank li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'n s' 'l l';align-items:baseline;column-gap:6px;font-variant-numeric:tabular-nums}
.rank li b{grid-area:n;font:800 1.5rem/1.1 var(--font-display);letter-spacing:var(--track-display);color:var(--action)}
.rank li span{grid-area:s;font-size:var(--t-xs);color:var(--ink-3)}
.rank li small{grid-area:l;font-size:var(--t-xs);color:var(--ink-2)}
.rank-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;color:var(--ink);font:600 .9375rem/1.2 var(--font-text);text-decoration:none}
.rank-all:hover{color:var(--action)}
.rank-all .ui-icon{width:16px;height:16px}
.rank:not(:has(ul)){padding:4px 4px;background:none;border-radius:0}
@media (max-width:559px){.rank{padding:14px 18px}.rank-all{margin-left:0}}

/* «Ваш аккаунт» */
.me{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.me>span{font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.me-note{min-height:1.4em;margin-bottom:16px;font-size:.9375rem;color:var(--ink-2)}
.me-note:empty{margin-bottom:4px}

/* Сегменты и вкладки: капсула, выбранный залит чёрным */
.seg{display:flex;gap:4px;padding:4px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none;max-width:100%;background:var(--paper)}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;display:grid;justify-items:start;gap:1px;min-height:48px;padding:6px 20px;border-radius:var(--r-pill);font:600 .9rem/1.2 var(--font-text);color:var(--ink-2);text-align:left;transition:background-color var(--d-2),color var(--d-1)}
.seg button small{font-size:.75rem;font-weight:400;letter-spacing:0;color:var(--ink-3)}
@media(hover:hover) and (pointer:fine){.seg button:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]){color:var(--ink)}}
.seg button[aria-selected=true],.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.seg button[aria-selected=true] small,.seg button[aria-pressed=true] small{color:color-mix(in oklab,var(--paper) 72%,transparent)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.seg-sm{display:inline-flex}
.seg-sm button{min-height:40px;padding:0 16px;align-items:center;display:inline-flex}
@media (pointer:coarse){.seg-sm button{min-height:44px}}
@media (max-width:520px){.me .seg-sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:28px}.me .seg-sm button{justify-content:center;min-height:44px}}

/* График: подписчики и просмотры лучшего ролика (гантели на шкале «каждое деление в 10 раз больше») */
.dumb{--nw:200px;--vw:84px;--g:12px;position:relative}
.d-body{position:relative;display:grid;gap:2px}
.d-row{position:relative;display:grid;grid-template-columns:var(--nw) minmax(0,1fr) var(--vw);align-items:center;gap:var(--g);min-height:52px;padding:4px 14px;margin:0 -14px;width:calc(100% + 28px);border-radius:var(--r-md);text-align:left;transition:background-color var(--d-1)}
.d-row:hover{background:var(--paper-sunken)}
.d-row[aria-pressed=true]{background:var(--accent-wash)}
.d-name{display:grid;min-width:0;line-height:1.25}
.d-name b{font-weight:600;font-size:var(--t-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-name small{font-size:.75rem;color:var(--ink-3)}
.d-track{position:relative;height:28px;background-image:linear-gradient(to right,var(--c-grid) 1px,transparent 1px);background-size:calc(100% / var(--dec)) 100%;border-right:1px solid var(--c-grid)}
.d-line{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--c-rest);opacity:.55}
.d-row.hit .d-line{background:var(--c-hit);opacity:.9}
.d-sub,.d-view{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%}
.d-sub{background:var(--card);border:2px solid var(--ink-2)}
.d-row:hover .d-sub,.d-row[aria-pressed=true] .d-sub{background:var(--paper-sunken)}
.d-view{background:var(--c-rest);box-shadow:0 0 0 2px var(--card)}
.d-row.hit .d-view{background:var(--c-hit)}
.d-typ{position:absolute;top:50%;width:4px;height:14px;margin:-7px 0 0 -2px;border-radius:2px;background:var(--ink-2)}
.d-val{font:800 var(--t-sm)/1.2 var(--font-display);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.d-axis{position:relative;display:grid;grid-template-columns:var(--nw) minmax(0,1fr) var(--vw);gap:var(--g);margin-top:6px;font-size:.75rem;color:var(--ink-3)}
.d-ticks{position:relative;height:18px}
.d-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.d-ticks span:first-child{transform:none}.d-ticks span:last-child{transform:translateX(-100%)}
/* На узком экране шесть подписей шкалы («100 тыс.1 млн10 млн») слипаются: оставляем каждую вторую, считая с конца */
@media (max-width:420px){.d-ticks span:nth-last-child(even){display:none}}
.d-band{position:absolute;top:-4px;bottom:-4px;z-index:0;pointer-events:none;
 left:calc(var(--nw) + var(--g) + (100% - var(--nw) - var(--vw) - 2 * var(--g)) * var(--b0));
 width:calc((100% - var(--nw) - var(--vw) - 2 * var(--g)) * (var(--b1) - var(--b0)));
 background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ink) 9%,transparent) 0 2px,transparent 2px 7px);border-inline:1px dashed var(--rule-strong);border-radius:8px}
.d-band span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 .75rem/1 var(--font-text);color:var(--ink-2)}
.dumb.has-band{padding-top:22px}
.d-row>*{position:relative;z-index:1}
.d-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:18px;font-size:var(--t-xs);color:var(--ink-2)}
.d-legend span{display:inline-flex;align-items:center;gap:6px}
.d-legend i{display:inline-block;width:11px;height:11px;border-radius:50%}
.d-legend .k-sub{background:var(--card);border:2px solid var(--ink-2)}
.d-legend .k-view{background:var(--c-hit)}
.d-legend .k-line{width:18px;height:4px;border-radius:2px;background:var(--c-hit)}
.d-legend .k-typ{width:4px;height:12px;border-radius:2px;background:var(--ink-2)}
.d-note{margin-top:14px;padding:14px 18px;border-radius:var(--inner-r);background:var(--paper-sunken);font-size:var(--t-xs);color:var(--ink-2)}
.d-legend .k-scale{color:var(--ink-3)}
.d-more{margin-top:8px}
@media (max-width:640px){
 .dumb{--nw:0px;--vw:0px;--g:0px}
 .d-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "track track";row-gap:2px;padding:8px 14px}
 .d-name{grid-area:name}.d-val{grid-area:val}.d-track{grid-area:track}
 .d-axis{grid-template-columns:minmax(0,1fr)}
 .d-axis>span{display:none}
}

/* 2. Что снять первым: сценарий и один настоящий пример */
.spot{display:grid;align-content:start;gap:16px;background:var(--lilac);border-color:transparent}
.spot-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.spot-head h2{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-weight:800}
.spot-nav{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.spot-nav button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-strong);background:var(--card);color:var(--ink);transition:background-color var(--d-1),color var(--d-1),transform var(--d-1)}
.spot-nav button:hover{background:var(--ink);color:var(--paper)}
.spot-nav button:active{transform:scale(.92)}
.spot-nav .ui-icon{width:16px;height:16px}
.spot-body{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:980px){.spot{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,4vw,56px);align-items:start}.spot>.spot-head{grid-column:1/-1}.spot>.spot-body{grid-column:1}.spot>.spot-take{grid-column:2;grid-row:2 / span 2;align-self:start}.spot>.btn{grid-column:1;grid-row:3}.spot-body{grid-template-columns:150px minmax(0,1fr)}}
.spot-who{display:grid;gap:2px}
.spot-who b{font-weight:700;line-height:1.3}
.spot-rank{font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--action)}
.spot-who small{font-size:var(--t-xs);color:var(--ink-2)}
.spot-nums{display:grid;gap:4px;margin-top:12px}
.spot-nums div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;padding-bottom:4px;border-bottom:1px solid color-mix(in oklab,var(--ink) 16%,transparent);font-size:.875rem;color:var(--ink-2)}
.spot-nums div b{font:800 .9375rem/1.2 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:480px){.spot-head h2{font-size:1.125rem}.spot-nav span{display:none}}
.spot-nums div.v b{color:var(--action)}
.spot-ratio{margin-top:8px;font-size:.875rem;font-weight:600;color:var(--action)}
.spot-title{font-size:.875rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spot-take{padding:16px 18px;border-radius:var(--inner-r);background:var(--card);font-size:.9375rem;line-height:1.5}
.spot-take b{display:block;margin-bottom:6px;font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.spot .btn{justify-self:start}
@media (max-width:400px){.spot-body{grid-template-columns:104px minmax(0,1fr);gap:12px}}

.dash #s3 .seg{margin-bottom:14px}
.what{margin-bottom:16px;font-size:.9375rem;color:var(--ink-2)}
.tp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:16px}
.tp-head h3{font-size:clamp(1.1rem,.95rem + .6vw,1.4rem);font-weight:800;line-height:1.25}
.tp-head p{font-size:var(--t-xs);color:var(--ink-3)}
.story{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:fr}
.fr{position:relative;display:flex;flex-direction:column;gap:10px;min-height:260px;min-width:0;padding:16px 16px 18px;border-radius:22px;background:var(--paper-sunken);counter-increment:fr}
.fr .bars{display:flex;gap:3px}
.fr .bars i{flex:1;height:3px;border-radius:2px;background:color-mix(in oklab,var(--ink) 16%,transparent)}
.fr .bars i.on{background:var(--ink)}
.fr .tag{align-self:flex-start;padding:3px 10px;border-radius:var(--r-pill);font:600 .6875rem/1.2 var(--font-text);letter-spacing:.04em;background:var(--paper-deep);color:var(--ink-2)}
.fr .tag::before{content:counter(fr) '. '}
.fr p{font-size:.9375rem;line-height:1.42;color:var(--ink);overflow-wrap:anywhere}
.fr.hook{background:var(--butter)}
.fr.hook p{font-weight:700;font-size:1rem}
.fr.hook .tag{background:var(--button);color:var(--on-button)}
.fr.cta{background:var(--rose)}
.fr.cta .tag{background:var(--button);color:var(--on-button)}
.exline{margin-top:16px;font-size:.9375rem;color:var(--ink-2)}
.exline a{color:var(--action);font-weight:600;padding:12px 4px;margin:-12px -4px}
.fine{margin-top:14px;font-size:var(--t-xs);color:var(--ink-3)}
.thin{padding:18px;border-radius:var(--inner-r);background:var(--paper-sunken);color:var(--ink-2);font-size:var(--t-sm)}
@media (max-width:899px){
 .story{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
 .story::-webkit-scrollbar{display:none}
 .fr{flex:0 0 min(60vw,220px);scroll-snap-align:start}
}

/* 3. Что дальше: ночной блок. Три факта ниши, из которых видно, что делать нужно регулярно, и кнопка к нам */
.gap{display:grid;gap:clamp(22px,3vw,40px);padding:clamp(26px,4.4vw,64px);border-radius:var(--panel-r)}
.gap-head{display:grid;gap:var(--s-5) var(--s-6);align-items:center}
@media (min-width:860px){.gap-head{grid-template-columns:minmax(0,1.5fr) minmax(180px,.5fr)}}
.gap-head .eyebrow{color:var(--action)}
.gap h2{font-size:var(--t-h2);line-height:1.02;font-weight:800;max-width:14ch;margin-top:10px;outline:none}
.gap .takeaway{margin-top:14px}
.gap-art{justify-self:center;width:min(100%,260px)}
.gap-art .ricco-actor,.gap-art .mascot{width:100%;height:auto}
@media (max-width:859px){.gap-art{display:none}}
.gap-cards{display:grid;gap:var(--gap);align-items:start}
.gap-cards[data-n="0"]{display:none}
@media (min-width:980px){.gap-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gap-card{display:grid;align-content:start;gap:12px;min-width:0;padding:clamp(20px,2.4vw,30px);background:var(--card);border-radius:var(--tile-r)}
.gap-card h3{font:700 var(--t-sm)/1.3 var(--font-text);letter-spacing:0;color:var(--ink-2)}
.gap-big{font:800 clamp(2.25rem,1.4rem + 3vw,3.75rem)/.98 var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gap-big .num{color:var(--action)}
.gap-big small{font-size:.38em;font-weight:700;letter-spacing:-.01em}
.gap-card p:not(.gap-big){font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.gap-card p b{color:var(--ink)}
.gap-card .fine{color:var(--ink-3);margin-top:2px}
.gap-cta{max-width:52ch;padding-top:clamp(4px,1vw,12px);font-size:var(--t-lead);line-height:1.45;color:var(--ink)}

/* Сценарий → симулятор и «Повторить» при сбое загрузки */
.tp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.msg .msg-retry{min-height:44px;padding-inline:4px;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 4. План и сообщение в Telegram: розовая карточка с Рикко */
.dash .plan{position:relative;display:grid;gap:var(--s-5) clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4.4vw,60px);background:var(--rose);border-color:transparent}
@media (min-width:900px){.dash .plan{grid-template-columns:minmax(140px,.32fr) minmax(0,1fr)}}
.plan-art{justify-self:center;width:min(100%,260px)}
.plan-art .ricco-actor,.plan-art .mascot{width:100%;height:auto}
@media (max-width:899px){.plan-art{display:none}}
.plan-body{display:grid;gap:16px;min-width:0}
.plan-body .eyebrow{color:var(--action)}
.plan-text{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:52ch}
.plan-text b{color:var(--ink)}
.plan-text .num{color:var(--action)}
.msg-preview{display:grid;gap:10px}
.msg-label{font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.msg-preview blockquote{margin:0;padding:18px 22px;background:var(--card);color:var(--ink);border-radius:26px 26px 26px 6px;white-space:pre-line;font-size:.9375rem;line-height:1.55;max-width:60ch}
.dash .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dash .plan .btn-primary{min-height:56px;padding:0 32px}
.dash .plan .btn-quiet:hover{background:var(--ink)}
.copy-status{font-size:.875rem;color:var(--ink-2)}
.copy-status:empty{display:none}
.copy-fallback{display:grid;gap:10px;min-width:0}
.copy-fallback[hidden]{display:none}
.copy-fallback label{font-weight:600}
.copy-fallback textarea{width:100%;min-height:160px;resize:vertical;padding:14px;border:1px solid var(--ink-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:1rem;line-height:1.5}
.copy-fallback textarea:focus-visible{outline:3px solid var(--action);outline-offset:3px}
.copy-fallback .btn{justify-self:start}
@media (max-width:560px){.dash .plan .btn-primary{width:100%}}

/* 5. Все цифры ниши: свёрнуто, чтобы не рассеивать внимание */
.more{background:var(--card);border:1px solid var(--rule);border-radius:var(--panel-r);overflow:clip}
.more>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:14px clamp(22px,3vw,40px);list-style:none;cursor:pointer;transition:background-color var(--d-2)}
.more>summary::-webkit-details-marker{display:none}
.more>summary:hover{background:var(--paper-sunken)}
.more-t{display:grid;gap:2px}
.more-t b{font:800 clamp(1.15rem,1rem + .7vw,1.5rem)/1.2 var(--font-display);letter-spacing:-.025em}
.more-t small{font-size:var(--t-sm);color:var(--ink-3)}
.more-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);transition:transform var(--d-3) var(--ease-apple),background-color var(--d-2),color var(--d-2)}
.more-ic{position:relative}
.more-ic::before,.more-ic::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:currentColor}
.more-ic::after{transform:rotate(90deg)}
.more>summary:hover .more-ic{background:var(--ink);color:var(--paper)}
.more[open]>summary .more-ic{transform:rotate(45deg)}
.more-body{display:grid;gap:var(--gap);padding:0 clamp(14px,2vw,24px) clamp(14px,2vw,24px)}
.more-body .panel{background:var(--paper);border-color:transparent}
.more-body .rank{margin-top:4px}
.more-body .panel-head h2{font-size:clamp(1.4rem,1.1rem + 1vw,2rem)}
.more-body .panel{padding:clamp(18px,2.6vw,32px)}
.more-body .panel-head{margin-bottom:clamp(14px,2vw,24px)}
.more-body .foot-notes{padding:0 12px}
.more .more{border-radius:0}

/* Сноски */
.foot-notes{display:grid;gap:6px;max-width:86ch;margin-top:var(--s-3);font-size:var(--t-xs);color:var(--ink-3)}

/* Ниши нет в подборке */
.empty-state{padding-bottom:var(--s-7)}
.empty-panel{display:grid;gap:var(--s-5) var(--s-6);align-items:center;max-width:860px;background:var(--lilac);border-color:transparent}
@media (min-width:760px){.empty-panel{grid-template-columns:minmax(0,1.3fr) minmax(160px,.7fr)}}
.empty-copy{display:grid;gap:14px;justify-items:start}
.empty-state h2{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);font-weight:800;outline:none}
.empty-state p{color:var(--ink-2)}
.empty-art{justify-self:center;width:min(100%,240px)}
.empty-art .ricco-actor,.empty-art .mascot{width:100%;height:auto}
@media (max-width:759px){.empty-art{order:-1;width:min(60%,180px);justify-self:start}}
.empty-near{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.empty-near>span{width:100%;font-size:.875rem;color:var(--ink-3)}

/* Нижняя кнопка на телефоне: появляется после того, как человек увидел разбор */
.dock{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;padding:8px;background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border:var(--hairline);border-radius:var(--r-pill);box-shadow:var(--float);transition:transform var(--d-3) var(--ease-apple),opacity var(--d-3) var(--ease-apple)}
@media (prefers-reduced-transparency:reduce){.dock{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}}
.dock .btn{width:100%;min-height:52px}
.dock.away{transform:translateY(140%);opacity:0;pointer-events:none}
@media (min-width:900px){.dock{display:none!important}}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}

/* Как часто ролик заходит */
.hist{display:grid;gap:14px;margin-top:18px}
#s2-note:empty{display:none}
.hist-row{display:grid;grid-template-columns:minmax(200px,290px) minmax(0,1fr) 52px;align-items:center;gap:12px;font-size:var(--t-sm)}
.hist-row span{color:var(--ink-2)}
.hist-row i{position:relative;display:block;height:16px;border-radius:8px;background:var(--paper-sunken);overflow:hidden}
.hist-row i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:8px;background:var(--c-rest)}
.hist-row.hit i::after{background:var(--c-hit)}
.hist-row.hit span{color:var(--ink);font-weight:600}
.hist-row b{text-align:right;font:800 .9375rem/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.freq-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-top:28px}
.fs{padding:22px 24px;border-radius:var(--tile-r);background:var(--card);border:var(--hairline)}
.fs-l{font:600 var(--t-label)/1.4 var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fs-v{margin-top:10px;font:800 clamp(1.5rem,1.1rem + 1.4vw,2.25rem)/1.05 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fs-s{margin-top:10px;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}
.steady{display:grid;gap:8px;margin-top:28px}
.steady-h{font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.steady-row{display:grid;gap:2px;justify-items:start;width:100%;padding:14px 20px;text-align:left;border-radius:var(--r-md);background:var(--card);border:var(--hairline);cursor:pointer;font:inherit;color:inherit;transition:background-color var(--d-1),border-color var(--d-1)}
.steady-row:hover{background:var(--paper-sunken);border-color:var(--rule-strong)}
.steady-row span{font-size:var(--t-xs);color:var(--ink-2)}
@media (max-width:759px){
 .freq-stats{grid-template-columns:minmax(0,1fr)}
 .hist-row{grid-template-columns:minmax(0,1fr) 52px;gap:4px 12px}
 .hist-row i{grid-column:1/-1;grid-row:2}
}
.lift-row{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) 170px;align-items:center;gap:12px;font-size:var(--t-sm)}
.lift-row span{color:var(--ink-2)}
.lift-row i{position:relative;display:block;height:16px;border-radius:8px;background:var(--paper-sunken)}
.lift-row i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:8px;background:var(--c-rest)}
.lift-row.up i::after{background:var(--c-hit)}
.lift-row i::before{content:'';position:absolute;z-index:1;top:-4px;bottom:-4px;left:var(--base);width:2px;border-radius:1px;background:var(--ink)}
.lift-row b{font:800 .9375rem/1.2 var(--font-display);font-variant-numeric:tabular-nums}
.lift-row small{display:block;font:400 var(--t-xs)/1.4 var(--font-text);color:var(--ink-3)}
@media (max-width:759px){
 .lift-row{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 12px}
 .lift-row span{white-space:nowrap;padding-top:1px}
 .lift-row i{grid-column:1/-1;grid-row:2}
 .lift-row b{text-align:right}
}

/* Какой длины ролики снимают в нише: одна полоса в 100%, сегменты по группам длины */
.mix{margin-top:32px}
.mix[hidden]{display:none}
.mix-h{margin:0 0 12px;font:600 var(--t-label)/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mix-bar{display:flex;gap:2px;height:18px;border-radius:9px;overflow:hidden}
.mix-bar i{flex:var(--w) 1 0;min-width:2px;background:var(--m,var(--ink-3))}
.mix i.m0,.mix li.m0{--m:var(--c-hit)}
.mix i.m1,.mix li.m1{--m:#b3afa2}
.mix i.m2,.mix li.m2{--m:#8f8b7e}
.mix i.m3,.mix li.m3{--m:#6a675d}
.mix i.m4,.mix li.m4{--m:#45433d}
.mix-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none;font-size:var(--t-xs);color:var(--ink-2)}
.mix-key li{display:inline-flex;align-items:center;gap:6px}
.mix-key li i{width:10px;height:10px;border-radius:3px;background:var(--m)}
.mix-key b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.mix .fine{margin-top:8px}
.freq-stats.find{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.freq-stats:empty{display:none}

/* Пустое состояние: Рикко сидит в самой карточке, на сцене его не дублируем */
.dash[data-state=empty] .stage{display:none}
.dash[data-state=empty] .hero{grid-template-columns:minmax(0,1fr)}

/* В разборе ссылка на симулятор уходит вниз, к плану: наверху она отвлекает от цифр */
.dash:not([data-state=landing]) .simulator-entry{display:none}
.plan-sim{font-size:var(--t-sm);color:var(--ink-2)}
.plan-sim a{color:var(--action);font-weight:600}

/* Загрузка по ссылке на разбор: лендинг не мигает перед результатом (home-boot.js ставит data-boot, passport.js снимает) */
html[data-boot] .dash .hero-main>:not(.pick){visibility:hidden}
html[data-boot] .dash :is(.demo-sec,.how,.closing,.stage,.fx-belt){display:none}
@media (hover:none){.combo:focus-within{transform:none}}
/* Строка «Пример: …» сразу под выбранным каналом */
.d-picked{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px;padding:6px 8px 6px 14px;border-radius:var(--r-md);background:var(--butter);font-size:var(--t-sm)}
.d-picked .btn{min-height:44px}
/* Демо-карточка: точки в одну строку, высота не прыгает при смене примера */
.demo-dots{flex-wrap:nowrap;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;justify-content:stretch}
.demo-dots i{width:auto;max-width:34px;min-width:0}
/* Выбор размера аккаунта на телефоне: отдельные кнопки, а не подпись в рамке */
@media (max-width:759px){
 .me .seg-sm{border:0;padding:0;gap:8px;background:none;overflow:visible}
 .me .seg-sm button{border:1px solid var(--rule-strong);background:var(--card);border-radius:var(--r-pill)}
 .me .seg-sm button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
}