:root{
  --bg:#08090c;
  --bg2:#0a0b0f;
  --surface1:#111217;
  --surface2:#18191f;
  --surface3:#1f2128;
  --text:rgba(255,255,255,.92);
  --text2:rgba(255,255,255,.68);
  --text3:rgba(255,255,255,.48);
  --text4:rgba(255,255,255,.18);
  --line:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.10);
  /* Unified card surfaces — one visual language, no borders */
  --card:rgba(255,255,255,.025);
  --card-hover:rgba(255,255,255,.05);
  --card-solid:#111217;
  --accent:#5eead4;
  --accent2:#67e8f9;
  --accent-weak:rgba(94,234,212,.07);
  --accent-soft:rgba(94,234,212,.20);
  --pink:#f9a8d4;
  --peach:#fbbf8d;
  --blue:#7dd3fc;
  --good:#7dd66d;
  --bad:#f87171;
  --warn:#fbbf24;
  /* One radius scale */
  --r-card:14px;
  --r-inner:10px;
  --r-sm:8px;
  --r-pill:999px;
  --font-sans:'Anthropic Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
  --font-ui:var(--font-sans);
  --font-display:var(--font-sans);
  --fs-body:0.75rem;
  --fs-meta:0.625rem;
  --fs-head:0.8125rem;
  --font-num:'JetBrains Mono','SF Mono','SF Pro Display','Inter',monospace;
}
/* ── Light mode ── */
html.light-mode{
  --bg:#f5f5f7;
  --surface1:#ffffff;
  --surface2:#e8e8ed;
  --surface3:#dcdce0;
  --text:rgba(0,0,0,.90);
  --text2:rgba(0,0,0,.62);
  --text3:rgba(0,0,0,.42);
  --text4:rgba(0,0,0,.12);
  --line:rgba(60,60,67,.15);
  --line-strong:rgba(60,60,67,.25);
  --card:#ffffff;
  --card-hover:#f2f2f5;
  --card-solid:#ffffff;
  --accent:#0d9488;
  --accent2:#0891b2;
  --accent-weak:rgba(13,148,136,.08);
  --accent-soft:rgba(13,148,136,.18);
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;min-height:100vh;
  color:var(--text);font-family:var(--font-sans);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button{font:inherit;cursor:pointer}.hidden{display:none!important}

/* ── Blur mode: hide sensitive content from passers-by ── */
.app.blur-mode .row.task b,
.app.blur-mode .row.task p,
.app.blur-mode .timeItem b,
.app.blur-mode .tlEvent b,
.app.blur-mode .focusCard b{filter:blur(5px);user-select:none;pointer-events:none;transition:filter .25s ease}

.app{
  position:relative;width:min(1800px,100%);min-height:100vh;margin:0 auto;
  --appX:12px;--appGapY:14px;
  background:var(--bg);padding:0 var(--appX) 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:stretch;
}

/* ── Tabs ── */
.tabs{
  grid-column:1/-1;
  display:flex;gap:3px;margin:0;position:sticky;top:0;z-index:30;
  padding:calc(4px + env(safe-area-inset-top)) 10px 4px;background:linear-gradient(180deg,var(--bg) 82%, rgba(0,0,0,0));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.tab{
  border:0;border-radius:var(--r-sm);padding:4px 7px;color:var(--text3);cursor:pointer;
  background:transparent;font-family:var(--font-num);font-size:0.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  transition:color .18s ease,background .18s ease;flex:1;text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.tab.active{color:var(--text);background:var(--card-hover)}
.tab:hover:not(.active){color:var(--text2);background:var(--card)}
.navControls{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:4px}
.navControls .refresh{width:30px;height:30px;border-radius:var(--r-sm);color:var(--text2);background:var(--surface2)}
.navControls .refresh .ic{width:15px;height:15px}
.navControls .refresh:hover{background:var(--surface3);color:var(--text)}
#refreshButton{position:relative}
#refreshButton.hasUpdate:after{content:"";position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg)}
.tabPage{display:contents}

/* ── Icons (Heroicons micro, inlined) ── */
.ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.14em}
/* section headers: small muted glyph before the title; never wrap — clip the text instead */
.panelHead h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* title keeps priority over the right-side meta chip: chip ellipsizes first */
.panelHead > h2,.panelHeadTitle{flex:0 0 auto;min-width:0;max-width:100%}
.panelHead > .chip{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 100 auto}
#todoistTitle{cursor:pointer;user-select:none;border-radius:var(--r-sm);transition:opacity .14s ease}
#todoistTitle:hover{opacity:.75}
#todoistTitle.completedHidden{opacity:.55}
.panelHead h2 .ic{width:15px;height:15px;margin-right:7px;color:var(--text3);vertical-align:-.18em}
/* refresh button */
.refresh{display:grid;place-items:center}
.refresh .ic{width:16px;height:16px}
/* file-action labels in Знания */
.knowRow em.act{display:inline-flex;align-items:center;gap:4px}
.knowRow em.act .ic{width:11px;height:11px}

/* ── Panels / Sections ── */
.panel,.metric{border:0;border-radius:var(--r-card);background:transparent}
.panel{padding:4px 4px;margin-bottom:14px;min-height:250px;max-height:500px;overflow-y:auto}
.panel.priority{background:var(--accent-weak);padding:12px 12px 14px;border-radius:var(--r-card)}
.alertsBlock{background:rgba(248,113,113,.05);padding:10px 12px;border-radius:var(--r-inner);margin-top:10px;border-left:3px solid var(--bad)}
.statGroupLabel{font:600 0.625rem/1 var(--font-num);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin:16px 2px 8px}
.panel.mini{margin-bottom:0;background:var(--card);border-radius:var(--r-card);padding:14px}
.panel.mini .row b{font-size:var(--fs-body)}
.panel.mini .row p{font-size:var(--fs-meta)}
/* every top-level section is its own card in the flat tile grid — no dividers, no "sections" */
.tabPage > section{background:var(--card);border-radius:var(--r-card);padding:14px;margin-bottom:0}
.panelHead{position:relative;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;padding:0 2px}
.panelHint{margin:-6px 0 10px;padding:0 2px;font-size:var(--fs-meta);line-height:1.4;color:var(--text3)}
.panelHeadTitle{display:flex;align-items:center;gap:7px;min-width:0}
.panelHeadTitle h2{min-width:0}
h2{font-family:var(--font-num);font-size:var(--fs-head);line-height:1.2;letter-spacing:.08em;text-transform:uppercase;margin:0;font-weight:700;color:var(--text)}
.chip{
  border:0;border-radius:var(--r-sm);padding:4px 9px;background:var(--surface2);white-space:nowrap;
  color:var(--text2);font-family:var(--font-num);font-size:0.6875rem;line-height:1.3;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.chip.hot{color:var(--bad);background:rgba(248,113,113,.10)}
/* Small round count badge, sits right next to a panel title (e.g. "Задачи 4") */
.countBadge{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-num);font-size:0.6875rem;font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.countBadge:empty{display:none}
.label,.calSectionLabel{font:600 0.625rem/1.2 var(--font-num);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.calSectionLabel{display:block;margin-bottom:6px}

/* ── Action panel: split layout (Ход конём) ── */

/* ── Focus Cards (vertical list, left accent bar) ── */
.focusCard{
  border:0;border-radius:var(--r-inner);padding:11px 12px 11px 16px;
  background:var(--card);transition:background .18s ease;
  animation:fadeIn .3s ease both;position:relative;overflow:hidden;
}
.focusCard:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:.9;
}
.focusCard.tone2:before{background:linear-gradient(180deg,var(--peach),var(--pink))}
.focusCard.tone3:before{background:linear-gradient(180deg,var(--blue),var(--peach))}
.focusCard:nth-child(1){animation-delay:.03s}.focusCard:nth-child(2){animation-delay:.08s}.focusCard:nth-child(3){animation-delay:.13s}
.focusCard:hover{background:var(--card-hover)}
.focusCard b{display:block;font-size:0.875rem;line-height:1.3;letter-spacing:-.01em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focusCard p{margin:4px 0 0;color:var(--text3);font-size:0.625rem;line-height:1.2;text-transform:uppercase;letter-spacing:.05em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Digest Grid ── */
.digestGrid2x2{display:contents}
.digestGrid2x2 > .panel{min-width:0;margin-bottom:0;overflow-x:hidden;overflow-y:auto;background:var(--card);border-radius:var(--r-card);padding:14px}
.digestGrid2x2 .panelHead{margin-bottom:10px}
.digestTasks .panelHead{position:sticky;top:0;z-index:12;background:var(--card);padding-top:1px}
.digestTasks,.digestCalendarPanel,.digestNewsPanel{grid-column:auto;grid-row:auto}

/* ── News list ── */
.newsList{display:flex;flex-direction:column;gap:6px}
.newsLead{
  border:0;border-radius:var(--r-sm);padding:8px 10px;
  background:var(--accent-weak);display:flex;align-items:center;gap:8px;
  font-size:0.8125rem;line-height:1.3;margin-bottom:2px;
}
.newsLead .ic{flex-shrink:0;width:13px;height:13px;color:var(--accent)}
.newsLead b{color:var(--text);font-weight:600;font-size:var(--fs-body)}
.newsTakeaway{margin:4px 2px 6px;font-size:var(--fs-meta);line-height:1.4;color:var(--text3)}
.newsStack{display:flex;flex-direction:column;gap:4px}
.newsItem{
  border:0;border-radius:var(--r-sm);padding:7px 10px;
  background:var(--card);display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;font-size:var(--fs-body);line-height:1.3;position:relative;
  animation:fadeIn .25s ease both;
}
.newsCat{
  font:600 0.625rem/1 var(--font-num);color:var(--accent2);
  text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;
  background:var(--accent-weak);padding:2px 6px;border-radius:var(--r-sm);
}
.newsLink,.newsGen{
  border:0;background:var(--card-hover);border-radius:var(--r-sm);
  padding:4px 8px;cursor:pointer;font-size:0.6875rem;line-height:1;
  color:var(--text2);font-weight:600;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:background .15s ease,transform .12s ease;flex-shrink:0;
}
.newsLink:hover,.newsGen:hover{background:var(--surface2);color:var(--text);transform:scale(1.06)}
.newsGen.syncing{opacity:.6;pointer-events:none}
.newsGen.sent{background:rgba(125,214,109,.12);color:var(--good)}
.newsText{flex:1 1 100%;min-width:0;font-size:0.8125rem;color:var(--text2)}
.newsText+.newsLink,.newsText+.newsGen{margin-left:auto}
.newsTextLink{text-decoration:none;transition:color .14s ease}
.newsTextLink:hover{color:var(--text)}

/* ── Content area ── */

/* ── Big Action ── */

/* ── Loading state ── */
.skeletonCard,.skeletonRow{position:relative;overflow:hidden;pointer-events:none}
.skeletonCard:after,.skeletonRow:after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:shimmer 1.2s ease-in-out infinite;
}
.skLine{display:block;height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);margin:5px 0}
.skLine.wide{width:82%}.skLine.short{width:44%}.skLine.tiny{width:28%;height:7px}
.skDot{width:24px;height:18px;border-radius:6px;background:rgba(255,255,255,.07)}

/* ── Status Hero ── */
.statusHero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;align-items:stretch}
.statusCard .statTiles{margin-top:10px}
.metric{min-height:72px;padding:12px 8px;background:var(--card);border-radius:var(--r-inner);display:grid;grid-template-rows:auto 1fr;align-content:start;gap:6px;min-width:0;overflow:hidden;transition:background .18s ease}
.metric:hover{background:var(--card-hover)}
.metric b{font-family:var(--font-num);font-size:1.5625rem;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric small{display:block;color:var(--text3);font-size:0.625rem;line-height:1.2;text-transform:uppercase;letter-spacing:.05em;font-weight:600;overflow-wrap:break-word;word-break:break-word}

/* ── Rows / Lists ── */
.stack{display:flex;flex-direction:column;gap:2px}.stack.tight{gap:1px}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;
  border:0;background:transparent;border-radius:var(--r-sm);padding:9px 10px;min-height:36px;
  transition:background .14s ease,opacity .28s ease;
}
.row:hover{background:var(--card)}
.row.task{grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:flex-start;padding:4px 6px;min-height:0}
.row.bad{background:rgba(248,113,113,.05)}
.row.bad.alertLink{cursor:pointer}
.row.bad.alertLink:hover,.row.bad.alertLink:focus-visible{background:rgba(248,113,113,.12)}
.panel.alertHighlight{animation:alertFlash 1.6s ease}
.row b{display:block;font-size:var(--fs-body);line-height:1.3;font-weight:500;white-space:normal;overflow-wrap:break-word}
.row p{margin:3px 0 0;white-space:normal;overflow-wrap:break-word;font-size:var(--fs-meta);color:var(--text3);line-height:1.3}
.taskBody{min-width:0;display:flex;flex-direction:column;gap:1px}
.taskTitle{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.22;
  font-size:var(--fs-body);
}
.taskMeta{margin:0;display:flex;align-items:center;gap:4px;min-width:0;color:var(--text3);font-size:var(--fs-meta);line-height:1.25;white-space:nowrap;overflow:hidden}
.tmChip{display:inline-flex;align-items:center;gap:3px;flex:none;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tmChip svg{flex:none;width:11px;height:11px;opacity:.75}
.tmProj{flex:0 1 auto;display:inline-block;max-width:140px}
.tmProj svg{vertical-align:-1px;margin-right:3px}
.tmLabel{padding:1px 6px;border-radius:var(--r-pill);background:var(--card-hover);color:var(--text3);font-size:0.625rem}
.tmIc{font-size:0.6875rem}
.tmDue{font-family:var(--font-num);font-weight:600}
.tmDue.overdue{padding:1px 6px;border-radius:var(--r-pill);background:rgba(248,113,113,.14);color:#f87171}
.row.task.overdue .doneBox{border-color:#f87171}
/* прогресс дня под шапкой TODO */
.todoProgress{height:3px;margin:-4px 0 8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.todoProgress[hidden]{display:none}
.todoProgress i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.todoEmpty{display:flex;align-items:center;justify-content:space-between;gap:8px}
.todoEmpty b{font-weight:500;color:var(--text2)}
.todoEmpty span{display:flex;gap:4px}
.todoEmpty button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--r-pill);background:var(--card-hover);color:var(--text2);font:inherit;font-size:0.875rem;cursor:pointer}
.todoEmpty button:hover{background:var(--accent-weak);color:var(--accent)}
.todoEmpty button svg{width:13px;height:13px}
.todoMore{margin-top:6px;align-self:flex-start}
.row .goalHint{margin:1px 0 0;color:var(--text4);font-size:0.625rem;font-style:italic;line-height:1.2}
.task b{font-size:var(--fs-body)}.task p{font-size:var(--fs-meta);color:var(--text3)}
.toggleTask{cursor:pointer}
.toggleTask:active,.toggleTask.tapping{background:var(--card-hover);transform:scale(.98);transition:transform .08s ease,background .08s ease}
.toggleTask:hover{background:var(--card)}
.reopenTask{cursor:pointer}
.reopenTask:active{transform:scale(.98);transition:transform .08s ease}
.reopenTask:hover{opacity:.85!important}
.row.syncing{opacity:.45;pointer-events:none}
.row.done{opacity:.45;transition:opacity .3s ease}
/* in-place "done + undo" state */
.row.task.undoable{grid-template-columns:20px minmax(0,1fr) auto;opacity:.72}
.inlineUndo{align-self:center;border:0;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);padding:6px 11px;font-family:var(--font-num);font-size:0.6875rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.02em;transition:filter .14s ease}
.inlineUndo:hover{filter:brightness(1.15)}
.inlineUndo:active{transform:scale(.96)}
.row.done .doneBox{background:var(--accent);color:var(--bg);border-color:transparent}
.row.done b{text-decoration:line-through;text-decoration-color:var(--text3)}
.doneBox{display:grid;place-items:center;width:16px;height:16px;border-radius:var(--r-pill);border:1.5px solid var(--text4);background:transparent;color:transparent;font-size:0.625rem;font-weight:700;line-height:1;transition:all .28s cubic-bezier(.34,.88,.68,1.27);margin-top:2px}
.row.task.priority-p1 .doneBox{border-color:rgba(248,113,113,.6)}
.row.task.priority-p2 .doneBox{border-color:rgba(251,191,36,.6)}
.row.task.priority-p3 .doneBox{border-color:rgba(94,234,212,.4)}
.tag{
  border-radius:var(--r-sm);padding:3px 8px;font-family:var(--font-num);font-size:0.625rem;font-weight:600;border:0;
  color:var(--text3);background:var(--card);white-space:nowrap;letter-spacing:.03em;
}
.tag.ok{color:var(--accent);background:var(--accent-weak)}
.tag.hot{color:var(--bad);background:rgba(248,113,113,.10)}
.tag.warn{color:var(--warn);background:rgba(251,191,36,.10)}
.tag.mute{color:var(--text3);background:var(--card)}

/* ── Timeline ── */
.timeline{display:flex;flex-direction:column;gap:2px}
.timeItem{display:flex;flex-direction:column;border:0;border-radius:var(--r-sm);background:transparent;padding:9px 4px;gap:4px;transition:background .14s ease}
.timeItem:hover{background:var(--card)}
.timeItem time{font-family:var(--font-num);font-weight:600;color:var(--accent);font-size:0.6875rem;line-height:1.3;font-variant-numeric:tabular-nums}
.timeItem b{display:block;font-size:0.875rem;line-height:1.3;white-space:normal;word-wrap:break-word;font-weight:500}
.timeItem p{display:none}
.calSection{margin-bottom:6px}.calSection:last-child{margin-bottom:0}
.calSection + .calSection{border-top:1px solid var(--line);padding-top:6px}

/* ── Queue / Two Cols ── */
.twoCols{display:contents}
.empty{border:0;border-radius:var(--r-inner);padding:14px;color:var(--text3);font-size:0.75rem;text-align:center;background:var(--card)}
.empty.completedEmpty{padding:8px;background:transparent;opacity:.6}

/* ── Undo ── */
.undoBox{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:0 0 10px;border:0;border-radius:var(--r-inner);background:var(--accent-weak);padding:10px 12px;animation:slideUp .25s ease both}
.undoBox b{display:block;font-size:0.75rem}.undoBox p{margin:2px 0 0;color:var(--text3);font-size:0.625rem}
.undoBox button{border:0;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);padding:6px 10px;font-size:0.6875rem;font-weight:700;cursor:pointer}
.undoBox button[data-syncing="1"]{opacity:.55}

/* ── Goals Chart ── */

/* ── Pain Map ── */

/* ── Stat Tiles ── (monochrome, one visual language) */
.statHero{padding:4px 6px}
.statHero .panelHead{margin-bottom:16px}
.statTiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.statTile{
  position:relative;overflow:hidden;min-height:56px;border:0;
  border-radius:var(--r-inner);padding:9px 12px;background:var(--card);transition:background .18s ease;
}
.statTile:hover{background:var(--card-hover)}
.statTile b{font-family:var(--font-num);display:block;font-size:1.125rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text2)}
.statTile span{display:block;margin-top:6px;color:var(--text3);font-family:var(--font-num);font-size:0.625rem;line-height:1.18;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.donutRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.donutRow .donut{flex:1 1 100px}
.donut{
  --p:50;--ring:var(--accent2);border-radius:var(--r-inner);border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--card);padding:10px;min-height:100px;transition:background .18s ease;
}
.donut:hover{background:var(--card-hover)}
.donut.cyan{--ring:var(--accent)}
.donut.pink{--ring:var(--pink)}
.donut.peach{--ring:var(--peach)}
/* Ring with the number centered inside it */
.donutRing{position:relative;width:76px;aspect-ratio:1;display:grid;place-items:center;flex:0 0 auto}
.donutRing:before{
  content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  background:conic-gradient(var(--ring) calc(var(--p)*1%),rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 0);
}
.donutRing b{position:relative;z-index:1;font-family:var(--font-num);font-size:1.125rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
.donut span{font-family:var(--font-num);font-size:0.625rem;color:var(--text3);line-height:1.1;text-transform:uppercase;letter-spacing:.08em;font-weight:600;text-align:center}

/* ── Skills ── */
.skillPills{display:flex;flex-direction:column;gap:0;margin-bottom:14px;max-height:260px;overflow-y:auto}
.skillPill{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:100%;background:transparent;padding:8px 2px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .14s ease}
.skillPill:hover{background:var(--card-hover)}
.skillPill:last-child{border-bottom:0}
.skillPill b{font-size:0.8125rem;line-height:1.25;white-space:normal;color:var(--text)}
.skillPill>small{font-size:0.75rem;line-height:1.4;color:var(--text2);white-space:normal}
.skillPill small.skillMeta{font-family:var(--font-num);font-size:0.625rem;color:var(--text3)}
.usageChart{display:grid;grid-template-columns:1fr;gap:0;max-height:400px;overflow-y:auto}
.usageRow{display:grid;grid-template-columns:20px minmax(0,1fr) 30px;gap:10px;align-items:center;background:transparent;padding:9px 2px;border-bottom:1px solid var(--line)}
.usageRow:last-child{border-bottom:0}
.rank{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-pill);background:var(--card);border:0;color:var(--text3);font-family:var(--font-num);font-size:0.5625rem;font-weight:700}
.usageMain{position:relative;min-width:0;padding-bottom:8px}
.usageMain b,.usageMain small{display:block;overflow:hidden;text-overflow:ellipsis}
.usageMain b{font-size:var(--fs-body);line-height:1.2;white-space:nowrap;font-weight:500}.usageMain small{font-family:var(--font-num);font-size:var(--fs-meta);color:var(--text3);margin-top:3px;white-space:nowrap}
.usageMain i{position:absolute;left:0;bottom:0;height:2px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.85}
.usageRow strong{font-family:var(--font-num);font-size:0.75rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--text2)}
.more{width:100%;margin-top:10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text3);font-family:var(--font-num);font-size:0.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:9px;cursor:pointer;transition:background .14s ease,color .14s ease}
.more:hover{background:var(--card);color:var(--text2)}

/* ── Rhythm ── */
.miniStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.miniStats article{border:0;border-radius:var(--r-inner);background:var(--card);padding:11px 10px;transition:background .18s ease}
.miniStats article:hover{background:var(--card-hover)}
.miniStats b{font-family:var(--font-num);display:block;font-size:1.1875rem;letter-spacing:-.02em}
.miniStats span{display:block;color:var(--text3);font-size:0.625rem;line-height:1.2;margin-top:5px}

/* ── Knowledge ── */
.knowGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.knowCard{border:0;border-radius:var(--r-inner);background:var(--card);padding:13px;min-height:88px;transition:background .18s ease}
.knowCard:hover{background:var(--card-hover)}
.knowCard b{display:block;font-size:0.75rem;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--text3);font-weight:600}
.knowCard span{display:block;color:var(--text);font-family:var(--font-num);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums;line-height:1}
.knowCard small{display:block;color:var(--text3);font-size:0.625rem;margin-top:9px;line-height:1.25;overflow-wrap:break-word}
.knowList{display:flex;flex-direction:column;gap:0}
.knowRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line)}
.knowRow:last-child{border-bottom:none}
.knowRowMain{min-width:0;display:flex;flex-direction:column;gap:3px}
.knowRow b{font-size:var(--fs-body);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.knowRow em{font-style:normal;display:block;font-size:var(--fs-meta);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knowRow em.act{font-family:var(--font-num);font-size:0.625rem;letter-spacing:.05em;text-transform:uppercase}
.knowRow em.act-new{color:var(--good)}
.knowRow em.act-edit{color:var(--accent)}
.knowRow em.act-del{color:var(--bad)}
.knowRow small{font-family:var(--font-num);font-size:var(--fs-meta);color:var(--text2);white-space:nowrap}

/* ── Data viz ── */
/* Radar (Цели 2026) */

/* Treemap (Папки) */
.folderDonut{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}
.folderDonutRing{position:relative;width:96px;aspect-ratio:1;flex:0 0 auto;border-radius:var(--r-pill)}
.folderDonutRing:before{
  content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  background:var(--donut-bg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 0);
}

/* Hour-of-day histogram (Когда работает агент) */
.scatter{margin-bottom:14px}
.hourChart{display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:3px;height:110px;padding:8px 6px 0;border-radius:var(--r-inner);background:var(--card);margin-bottom:6px}
.hourBar{position:relative;height:100%;display:flex;align-items:flex-end}
.hourBar span{width:100%;min-height:2px;border-radius:2px 2px 1px 1px;background:var(--accent-weak)}
.hourBar.now span{background:linear-gradient(180deg,var(--accent2),var(--accent))}
.scatterAxis{position:relative;height:14px}
.scatterAxis i{position:absolute;transform:translateX(-50%);font-family:var(--font-num);font-size:0.5625rem;color:var(--text4);font-style:normal;font-variant-numeric:tabular-nums}
.scatterAxis i:first-child{transform:translateX(0)}.scatterAxis i:last-child{transform:translateX(-100%)}

.orb{
  width:28px;height:28px;border-radius:var(--r-pill);flex:0 0 auto;
  object-fit:cover;background:#fff;display:block;
}
.refresh{
  width:32px;height:32px;border:0;border-radius:var(--r-sm);color:var(--text2);
  background:var(--surface2);font-size:1rem;line-height:0;flex:0 0 auto;
  transition:background .14s ease,color .14s ease;display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.refresh:hover{background:var(--surface3);color:var(--text)}
.refresh:active{transform:rotate(90deg);transition:transform .3s ease}
.refresh:disabled{opacity:.35}
.refresh .ic{display:block;width:18px;height:18px}

/* ── Visibility helpers: narrow = TG miniapp, wide = iPad/Mac fullscreen ── */
.wideOnly{display:none!important}

/* ── Quick add (tasks & events) ── */

/* Prominent add button, sits inline in a panel's headTools */
.headAddBtn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;border:0;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent);
  font-size:1rem;font-weight:800;line-height:1;cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .1s ease;
}
.headAddBtn:hover{background:var(--accent);color:var(--bg)}
.headAddBtn:active{transform:scale(.92)}
.headToggleBtn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;border:0;border-radius:var(--r-sm);
  background:var(--card);color:var(--text3);font-size:0.875rem;cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .1s ease;
}
.headToggleBtn:hover{background:var(--card-hover);color:var(--text)}
.headToggleBtn.active{background:var(--accent-soft);color:var(--accent)}
.headToggleBtn:active{transform:scale(.92)}
.voiceRecBtn{position:relative}
.voiceRecBtn.recording{background:var(--bad);color:#08090c}
.voiceRecBtn.recording:before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(248,113,113,.5);
  animation:voiceRecPulse 1.1s ease-out infinite;
}
@keyframes voiceRecPulse{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.35)}}
#voiceSheetBody{margin-bottom:16px}
.voiceSheetTimer{font-family:var(--font-num);font-size:2rem;text-align:center;letter-spacing:-.02em;margin:6px 0 2px}
.voiceSheetHint{text-align:center;color:var(--text3);font-size:0.75rem;margin:0 0 14px}
.voiceSheetMic{
  width:64px;height:64px;border-radius:50%;border:0;margin:0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:1.625rem;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.voiceSheetMic.recording{background:var(--bad);color:#08090c}
.voiceSheetTranscript{width:100%;min-height:90px;resize:vertical}
.prioPick button{cursor:pointer;opacity:.5;transition:opacity .14s ease,outline-color .14s ease;outline:2px solid transparent;outline-offset:1px}
.prioPick button.selected{opacity:1;outline-color:currentColor}

/* ── Task row kebab (actions) ── */
.rowKebab{
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--text4);
  width:24px;min-height:22px;margin:-4px -6px -4px -8px;font-size:1rem;font-weight:700;line-height:1;padding:0;align-self:stretch;
  transition:background .14s ease,color .14s ease,opacity .14s ease;flex:0 0 auto;
}
/* ⋮ только по ховеру на мыши; на таче виден всегда */
@media (hover:hover){.row.task .rowKebab{opacity:0}.row.task:hover .rowKebab,.row.task:focus-within .rowKebab,.row.task .rowKebab:focus-visible{opacity:1}}
.rowKebab:hover{background:var(--card-hover);color:var(--text2)}
.row.task.undoable{grid-template-columns:20px minmax(0,1fr) auto}

/* ── Todoist subtasks ── */
.row.task.hasSubs{grid-template-columns:20px minmax(0,1fr) auto}
.taskNode{display:flex;flex-direction:column;gap:1px}
.subtasks{display:grid;grid-template-rows:1fr;margin-left:15px;padding-left:6px;border-left:1px solid var(--line-strong);transition:grid-template-rows .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s}
.subtasks.collapsed{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s .26s}
.subInner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.taskNode.isSub > .row.task .doneBox{width:16px;height:16px;margin-top:1px}
.subToggle{
  display:inline-flex;align-items:center;gap:3px;flex:none;height:16px;padding:0 5px 0 3px;
  border:0;border-radius:var(--r-pill);background:var(--card-hover);color:var(--text3);
  font-family:var(--font-num);font-size:var(--fs-meta);font-weight:600;font-variant-numeric:tabular-nums;
  transition:background .14s ease,color .14s ease;
}
.subToggle:hover{background:var(--card-hover);color:var(--text2)}
.subToggle svg{width:11px;height:11px;transition:transform .18s ease}
.subToggle.collapsed svg{transform:rotate(-90deg)}
.subToggle .subRing{width:10px;height:10px;transform:rotate(-90deg)!important}
.subRing circle{fill:none;stroke-width:2.2}
.subRing .track{stroke:var(--line-strong)}
.subRing .bar{stroke:var(--accent);stroke-dasharray:100;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.subToggle.complete span{color:var(--accent)}
.subRing .bar[data-pct="0"]{opacity:0}

/* ── TODO interactions: swipe, drag & drop, completion fx, enter/remove ── */
.taskSwipe{position:relative;border-radius:var(--r-sm)}
.taskSwipe .row.task{position:relative;z-index:1;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.taskSwipe.swiping .row.task,.taskSwipe.open .row.task{background:var(--card-solid)}
.swipeBg{position:absolute;inset:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:space-between;opacity:0;pointer-events:none;overflow:hidden}
.taskSwipe.swipeRight .swipeBg,.taskSwipe.swipeLeft .swipeBg,.taskSwipe.open .swipeBg{opacity:1}
.taskSwipe.open .swipeBg{pointer-events:auto}
.swipeDone{display:inline-flex;align-items:center;gap:6px;padding-left:14px;color:var(--accent);font:700 0.6875rem/1 var(--font-num);text-transform:uppercase;letter-spacing:.06em;opacity:0;transition:opacity .15s ease}
.swipeDone svg{width:16px;height:16px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.taskSwipe.swipeRight .swipeBg{background:var(--accent-soft)}
.taskSwipe.swipeRight .swipeDone{opacity:1}
.taskSwipe.swipeRight.armed .swipeBg{background:var(--accent)}
.taskSwipe.swipeRight.armed .swipeDone{color:var(--bg)}
.taskSwipe.swipeRight.armed .swipeDone svg{transform:scale(1.25)}
.swipeLater{display:flex;height:100%;margin-left:auto;opacity:0;transition:opacity .15s ease}
.taskSwipe.swipeLeft .swipeLater,.taskSwipe.open .swipeLater{opacity:1}
.swipeLater button{border:0;padding:0 12px;background:rgba(251,191,36,.16);color:var(--warn);font:700 0.6875rem/1 var(--font-num);white-space:nowrap}
.swipeLater button+button{border-left:1px solid rgba(0,0,0,.18)}
.taskSwipe.swipeLeft.armed .swipeLater button,.taskSwipe.open .swipeLater button{background:var(--warn);color:var(--bg)}
.swipeLater button:active{filter:brightness(.9)}

.taskNode.dragSource > .taskSwipe{opacity:.28}
.taskNode.dragSource > .subtasks{opacity:.28}
.dragGhost{position:fixed;z-index:9999;pointer-events:none;margin:0;background:var(--card-solid);border-radius:var(--r-sm);box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px var(--line-strong);transform:scale(1.03) rotate(.8deg);opacity:.96}
body.todoDragging,body.todoDragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
.row.task.dropInto{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.row.task.dropBefore{box-shadow:inset 0 2px 0 var(--accent)}
.row.task.dropAfter{box-shadow:inset 0 -2px 0 var(--accent)}

.row.task.checking .doneBox{background:var(--accent);color:var(--bg);border-color:transparent;animation:donePop .42s cubic-bezier(.34,1.56,.64,1)}
.row.task.checking b{text-decoration:line-through;text-decoration-color:var(--text3)}
@keyframes donePop{0%{transform:scale(1)}40%{transform:scale(1.38)}100%{transform:scale(1)}}
.row.task.untappable{cursor:pointer}
.row.task.untappable .doneBox:hover{filter:brightness(1.15)}
.row.task.unchecking .doneBox,.row.task.done.unchecking .doneBox{background:transparent;color:transparent;border-color:var(--text4);animation:undoPop .3s ease}
.row.task.unchecking b{text-decoration:none!important}
.row.task.unchecking{opacity:1!important}
@keyframes undoPop{0%{transform:scale(1)}45%{transform:scale(.72)}100%{transform:scale(1)}}
.row.task.justAdded{animation:justAdded 1.6s ease}
@keyframes justAdded{0%,30%{background:var(--accent-soft)}100%{background:transparent}}
.taskNode.removing{overflow:hidden;opacity:0;pointer-events:none;transition:height .28s cubic-bezier(.4,0,.2,1),opacity .22s ease,transform .24s ease}
.taskNode.removing.toRight{transform:translateX(26px)}
.taskNode.removing.toLeft{transform:translateX(-26px)}

.fxLayer{position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden}
.fxRing{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--accent);animation:fxRing .55s ease-out forwards}
@keyframes fxRing{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
.fxSpark{position:fixed;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--accent);animation:fxSpark .6s cubic-bezier(.2,.8,.2,1) forwards}
.fxSpark:nth-child(3n){background:var(--warn)}
@keyframes fxSpark{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.fxConfetti{position:fixed;width:7px;height:11px;margin:-5px 0 0 -3px;border-radius:2px;animation:fxConfetti 1.4s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fxConfetti{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 260px)) rotate(var(--rot));opacity:0}}
@media (prefers-reduced-motion: reduce){
  .subtasks,.subRing .bar,.taskNode.removing{transition:none}
  .row.task.checking .doneBox,.row.task.unchecking .doneBox,.row.task.justAdded{animation:none}
}

/* ── Calendar head tools / day toggle ── */
.headTools{display:flex;align-items:center;gap:8px;min-width:0}
.dayToggle{display:flex;gap:2px;background:var(--card);border-radius:var(--r-sm);padding:2px}
.dayToggle button{
  border:0;border-radius:6px;background:transparent;color:var(--text3);
  font-family:var(--font-num);font-size:0.625rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 10px;transition:background .14s ease,color .14s ease;
}
.dayToggle button.active{background:var(--surface3);color:var(--text)}

/* ── Day timeline (wide) ── */
.dayTimeline{position:relative}
.tlAllDay{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tlChip{
  border:0;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent);
  font-size:0.6875rem;font-weight:600;padding:5px 11px;transition:background .14s ease;
}
.tlChip:hover{background:var(--accent-soft)}
.tlEmpty{margin-bottom:8px}
.tlGrid{position:relative;margin-left:52px;border-left:1px solid var(--line);padding-bottom:28px}
.tlHour{position:absolute;left:0;right:0;border-top:1px solid var(--line);pointer-events:none}
.tlHour span{
  position:absolute;left:-52px;top:-7px;width:44px;text-align:right;
  font-family:var(--font-num);font-size:0.625rem;color:var(--text4);font-variant-numeric:tabular-nums;
}
.tlEvent{
  position:absolute;overflow:hidden;border-radius:var(--r-sm);cursor:pointer;
  background:rgba(94,234,212,.10);border-left:3px solid var(--accent);
  padding:5px 8px;min-width:0;transition:background .14s ease,filter .14s ease;
  display:flex;flex-direction:column;gap:1px;z-index:2;
}
.tlEvent:hover{background:rgba(94,234,212,.18)}
.tlEvent time{flex:0 0 auto;font-family:var(--font-num);font-size:var(--fs-meta);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.tlEvent b{flex:0 0 auto;font-size:var(--fs-body);line-height:1.25;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tlEvent small{font-size:var(--fs-meta);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlEvent.past{filter:saturate(.25) brightness(.75);border-left-color:var(--text4)}
.tlEvent.past time{color:var(--text3)}
/* Google Calendar colorId, mirrored from the source event */
.tlEvent.hasColor{background:color-mix(in srgb, var(--evc) 30%, transparent);border-left-color:var(--evc)}
.tlEvent.hasColor:hover{background:color-mix(in srgb, var(--evc) 42%, transparent)}
.tlEvent.hasColor time{color:var(--evc)}
.tlEvent.hasColor.past{border-left-color:var(--text4)}
.tlNow{position:absolute;left:-6px;right:0;z-index:3;pointer-events:none}
.tlNow i{display:block;height:2px;background:var(--bad);border-radius:var(--r-pill);box-shadow:0 0 8px rgba(248,113,113,.5)}
.tlNow:before{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--bad)}
.tlNow span{position:absolute;right:2px;top:-16px;font-family:var(--font-num);font-size:0.625rem;color:var(--bad);font-variant-numeric:tabular-nums}

/* Sticky "now" chip: stays pinned to the top of the scrollable calendar
   once the real now-line (.tlNow above) is scrolled out of view. */
.tlNowPin{
  position:sticky;top:0;z-index:4;width:fit-content;margin:0 0 6px;
  display:flex;align-items:center;gap:6px;
  background:var(--bad);color:#fff;border-radius:var(--r-pill);
  padding:4px 10px 4px 8px;font-family:var(--font-num);font-size:0.6875rem;font-weight:700;
  font-variant-numeric:tabular-nums;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.tlNowPin i{display:block;width:6px;height:6px;border-radius:50%;background:#fff}

/* Two-day calendar (today + tomorrow side by side, wide layout).
   Grid keeps the hour gutter and both day tracks aligned to the same
   vertical scale even when one day has all-day chips and the other doesn't. */
.tlTwoDay{
  display:grid;column-gap:10px;row-gap:6px;
  grid-template-columns:44px 1fr 1fr;
  grid-template-areas:"blank head1 head2" "hours grid1 grid2";
}
.tlHourCol{position:relative;grid-area:hours}
.tlHourLine{position:absolute;left:0;right:0;height:0}
.tlHourLine span{
  position:absolute;right:0;top:-7px;
  font-family:var(--font-num);font-size:0.625rem;color:var(--text4);font-variant-numeric:tabular-nums;
}
.tlDayColHead{min-width:0;padding-left:10px;border-left:1px solid var(--line);position:sticky;top:0;z-index:6;background:var(--card-solid);padding-top:2px;padding-bottom:4px}
.tlChipLong{background:var(--surface3);color:var(--text2)}
.tlChipLong:hover{background:var(--line-strong)}
.tlDayColLabel{font-family:var(--font-num);font-size:0.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin:0 0 6px}
.tlDayCol{position:relative;min-width:0;padding-left:10px;border-left:1px solid var(--line)}
/* Direct editing in the grid: drag = move, bottom edge = resize, empty space = quick create */
.dayTimeline.calDragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
.tlResize{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize}
.tlEvent.dragging{z-index:7;cursor:grabbing;opacity:.9;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:none}
.tlGhost{background:var(--accent-soft);border-left-color:var(--accent);pointer-events:none;z-index:7;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.tlGhost b{color:var(--text2);font-weight:500}
.digestCalendarPanel{position:relative}
.calUndo{position:absolute;left:12px;right:12px;bottom:12px;z-index:20;margin:0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.calQuick{
  position:fixed;z-index:150;width:260px;display:flex;flex-direction:column;gap:8px;
  background:var(--surface1);border:1px solid var(--line-strong);border-radius:var(--r-inner);
  padding:12px;box-shadow:0 14px 36px rgba(0,0,0,.4);animation:fadeIn .14s ease both;
}
.calQuick small{font-family:var(--font-num);font-size:0.6875rem;color:var(--text3);font-variant-numeric:tabular-nums}
.calQuick input{border:0;border-bottom:2px solid var(--accent);background:transparent;color:var(--text);font:inherit;font-size:1rem;padding:4px 0;outline:none}
.calQuick div{display:flex;gap:6px;justify-content:flex-end}
.calQuick button{border:0;border-radius:var(--r-sm);padding:7px 12px;font-size:0.75rem;font-weight:700;cursor:pointer;background:transparent;color:var(--text3)}
.calQuick button[type="submit"]{background:var(--accent-soft);color:var(--accent)}

/* Event editor (one modal for new + existing) */
.evEditor{--evc:var(--accent)}
.evEditor .evTitle{background:transparent;border-bottom:2px solid var(--evc);border-radius:0;padding:6px 2px;font-family:var(--font-display);font-size:1.125rem;font-weight:600}
.evEditor .evTitle:focus{background:transparent;box-shadow:none}
.evWhen{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.evSwatches{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.evSwatch{position:relative;cursor:pointer}
.evSwatch input{position:absolute;opacity:0;pointer-events:none}
.evSwatch i{display:block;width:20px;height:20px;border-radius:50%;background:var(--sw);transition:transform .12s ease}
.evSwatch:hover i{transform:scale(1.15)}
.evSwatch input:checked + i{box-shadow:0 0 0 2px var(--surface1),0 0 0 4px var(--sw)}
.evSwatchDef i{--sw:var(--accent);background:transparent;border:2px solid var(--accent);box-sizing:border-box}
.evSwatch input:focus-visible + i{outline:2px solid var(--text);outline-offset:3px}
.evCheck{flex-direction:row !important;align-items:center;gap:8px !important;font-size:0.8125rem !important;color:var(--text2) !important}
.evCheck input{width:auto}
.evMeet{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-inner);background:#1a73e8;color:#fff;padding:10px;font-size:0.8125rem;font-weight:700;text-decoration:none}
.evMeet:hover{filter:brightness(1.1)}
.evWho{display:flex;flex-direction:column;gap:5px;font-size:0.75rem;color:var(--text2)}
.evWho small{color:var(--text3);font-size:0.6875rem}
.evRsvp{display:flex;align-items:center;gap:7px}
.evRsvp i{width:7px;height:7px;border-radius:50%;background:var(--text4)}
.evRsvp.accepted i{background:var(--ok, #34d399)}
.evRsvp.declined i{background:var(--bad)}
.evRsvp.tentative i{background:#f6bf26}
.evRsvp.declined{text-decoration:line-through;color:var(--text3)}
.evNote{margin:0;font-size:0.75rem;color:var(--text3);line-height:1.4}
.evFoot{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.evFoot a,.evFoot button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:var(--r-sm);background:var(--card);color:var(--text2);padding:8px 11px;font-size:0.75rem;text-decoration:none;cursor:pointer}
.evFoot a:hover,.evFoot button:hover{background:var(--card-hover)}
.evFoot .ic{width:14px;height:14px}
.evFoot .danger{margin-left:auto;color:var(--bad);background:rgba(248,113,113,.07)}
.evHint{color:var(--text4);font-size:0.625rem;text-align:center}
.timeItem.past{opacity:.45}
/* отмененные / отказался - как в Google Calendar: зачеркнуто и бледно */
.timeItem.cancelled,.tlEvent.cancelled,.tlChip.cancelled{opacity:.5}
.timeItem.cancelled b,.tlEvent.cancelled b,.tlChip.cancelled{text-decoration:line-through}
.tlEvent.cancelled{background:transparent;border-style:dashed}
.timeItem[data-event-id]{cursor:pointer}

/* ── Sheet (bottom sheet on phone, centered dialog on wide) ── */
.sheetRoot{
  position:fixed;inset:0;z-index:200;background:rgba(4,5,8,.62);
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .18s ease both;
}
.sheet{
  width:min(480px,100%);max-height:82vh;overflow:auto;
  background:var(--surface1);border-radius:18px 18px 0 0;
  padding:18px 18px max(18px,env(safe-area-inset-bottom));
  animation:slideUp .22s ease both;
}
.sheetHead{display:block;margin-bottom:14px}
.sheetHead b{display:block;font-family:var(--font-display);font-size:1rem;line-height:1.3;font-weight:600}
.sheetHead small{display:block;margin-top:4px;color:var(--text3);font-size:0.75rem}
.sheetActions{display:flex;flex-direction:column;gap:8px}
.sheetActions button,.sheetLink{
  border:0;border-radius:var(--r-inner);background:var(--card);color:var(--text);
  padding:12px 14px;font-size:0.875rem;font-weight:500;text-align:left;width:100%;
  display:flex;align-items:center;gap:9px;text-decoration:none;box-sizing:border-box;
  transition:background .14s ease;
}
.sheetActions button:hover,.sheetLink:hover{background:var(--card-hover)}
.sheetActions button .ic,.sheetLink .ic{width:15px;height:15px;color:var(--text3)}
.sheetActions .danger{color:var(--bad);background:rgba(248,113,113,.07)}
.sheetActions .danger:hover{background:rgba(248,113,113,.14)}
.sheetActions .danger .ic{color:var(--bad)}
.sheetActions .muted{color:var(--text3);background:transparent;justify-content:center}
.sheetRow2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheetRow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.sheetRow4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sheetRow2 button,.sheetRow3 button,.sheetRow4 button{justify-content:center;text-align:center}
.sheetActions .prio{font-family:var(--font-num);font-weight:700;letter-spacing:.04em}
.sheetActions .prio.hot{color:var(--bad)}
.sheetActions .prio.warn{color:var(--warn)}
.sheetActions .prio.ok{color:var(--accent)}
.sheetError{margin:10px 0 0;color:var(--bad);font-size:0.75rem;line-height:1.4}
.sheetForm{display:flex;flex-direction:column;gap:12px}
.sheetForm label{display:flex;flex-direction:column;gap:6px;font-size:0.6875rem;color:var(--text3);line-height:1.35}
.sheetForm input,.sheetForm textarea,.sheetForm select{
  border:0;border-radius:var(--r-sm);background:var(--card);color:var(--text);
  padding:11px 12px;font:inherit;font-size:0.875rem;outline:none;min-width:0;width:100%;box-sizing:border-box;
  color-scheme:dark;
}
.sheetForm textarea{resize:vertical;min-height:64px;line-height:1.4}
.sheetForm input:focus,.sheetForm textarea:focus,.sheetForm select:focus{background:var(--surface2);box-shadow:0 0 0 1px var(--accent-soft)}
.sheetForm [type="submit"]{
  border:0;border-radius:var(--r-inner);background:var(--accent-soft);color:var(--accent);
  padding:12px;font-size:0.875rem;font-weight:700;transition:filter .14s ease;
}
.sheetForm [type="submit"]:hover{filter:brightness(1.15)}
.sheetForm .muted{border:0;border-radius:var(--r-inner);background:transparent;color:var(--text3);padding:12px;font-size:0.875rem}

/* ── Nav weather popup ── */
.weatherNow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-inner);background:var(--card)}
.weatherNowIc{font-size:2rem;line-height:1}
.weatherNow b{display:block;font-family:var(--font-num);font-size:1.625rem;line-height:1.1;font-weight:700}
.weatherNow small{display:block;margin-top:2px;color:var(--text3);font-size:0.75rem}
.weatherMeta{display:flex;gap:14px;margin-top:10px;font-size:0.75rem;color:var(--text2)}
.weatherRainHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:16px}
.weatherRainHead b{font-family:var(--font-num);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3)}
.weatherRainHead span{font-size:0.75rem;color:var(--text2)}
.rainChart{display:flex;align-items:flex-end;gap:4px;margin-top:10px;padding:10px 6px 0;background:var(--card);border-radius:var(--r-inner);min-height:56px}
.rainBar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.rainBarFill{width:100%;max-width:6px;border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--accent),rgba(94,234,212,.25))}
.rainBar span{font-family:var(--font-num);font-size:0.5rem;color:var(--text4);white-space:nowrap}

/* ── What's new popup ── */
.dashboardIdentity{position:relative}
.changelogList{display:flex;flex-direction:column;gap:12px}
.changelogItem{padding:12px;border-radius:var(--r-inner);background:var(--card)}
.changelogItem b{display:block;font-family:var(--font-num);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:5px}
.changelogItem p{margin:0;font-size:0.8125rem;line-height:1.45;color:var(--text2)}

/* ── Update available: faint shimmer along the top edge (pull to refresh) ── */

/* ── Access gate (browser without Telegram) ── */
.accessGate{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;
}
.accessGate .orb.big{width:64px;height:64px}
.accessGate h1{font-family:var(--font-display);font-size:1.375rem;margin:0;font-weight:700;letter-spacing:-.02em}
.accessGate p{margin:0;color:var(--text2);font-size:0.875rem;line-height:1.5;max-width:340px}
.accessGate form{display:flex;flex-direction:column;gap:8px;width:min(340px,100%)}
.accessGate input{
  flex:1;border:0;border-radius:var(--r-inner);background:var(--card);color:var(--text);
  padding:12px 14px;font:inherit;font-size:0.875rem;outline:none;min-width:0;
}
.accessGate input:focus{background:var(--surface2);box-shadow:0 0 0 1px var(--accent-soft)}
.accessGate button{
  border:0;border-radius:var(--r-inner);background:var(--accent-soft);color:var(--accent);
  padding:12px 18px;font-size:0.875rem;font-weight:700;
}
.accessGate small{color:var(--text4);font-size:0.6875rem;line-height:1.5;max-width:340px}
.accessFooter{
  position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:12px;padding:0 18px;color:var(--text4);
  font-family:var(--font-num);font-size:0.6875rem;
}
.accessFooter button{
  background:var(--surface2);color:var(--text2);padding:8px 12px;font-size:0.75rem;
}
.accessGate code{font-family:var(--font-num);font-size:0.625rem;background:var(--card);padding:2px 5px;border-radius:4px}
/* экран входа - на всю ширину сетки .app; поля PIN и ссылка «email» не берут общие стили input/button */
.accessGate{grid-column:1/-1;width:100%;box-sizing:border-box}
.accessGate .pinBox{flex:none;padding:0}
.accessGate .ghostBtn{background:none;color:var(--text3);padding:4px 8px;font-size:13px;font-weight:400}
.accessGate .ghostBtn:hover{color:var(--text2)}

/* ════ WIDE: iPad / MacBook fullscreen command center ════ */
@media(min-width:900px){
  .wideOnly{display:revert!important}
  .narrowOnly{display:none!important}
  .app{--appX:12px;width:min(2400px,100%);padding:0 var(--appX) 24px;gap:13px 13px}

  /* Nav: tabs centered, avatar left, weather + controls right (absolute, vertically centered) */
  .tabs{padding:calc(6px + env(safe-area-inset-top)) 8px 5px;gap:3px;justify-content:center;min-height:35px;
    background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
  .tab{flex:0 1 auto;padding:5px 11px;font-size:0.6562rem;letter-spacing:.08em;border-radius:var(--r-inner)}
  .dashboardIdentity,.tabsWeather,.navControls{position:absolute;top:calc(50% + env(safe-area-inset-top)/2);transform:translateY(-50%);margin:0}
  .dashboardIdentity{display:flex!important;left:max(12px,env(safe-area-inset-left))}
  .navControls{right:max(12px,env(safe-area-inset-right))}
  .navControls .refresh{width:29px;height:29px;border-radius:var(--r-inner)}
  .navControls .refresh .ic{width:14px;height:14px}
  .tabsWeather{display:flex!important;left:calc(max(12px,env(safe-area-inset-left)) + 29px + 10px);align-items:center;gap:6px;padding:0 8px;font-size:0.8125rem;color:var(--text2);line-height:1.2;white-space:nowrap;font-family:var(--font-num);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:var(--r-sm);transition:background .14s ease}
  .tabsWeather:hover{background:var(--card)}
  .tabsWeather .weatherIc{font-size:0.9375rem;line-height:1}
  .tabsWeather b{font-weight:600;color:var(--text);font-size:0.8125rem}
  .tabsWeather small{color:var(--text3);font-size:0.75rem}
  .tabsWeather .navRain{display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 5px;border-radius:var(--r-pill);background:color-mix(in srgb,#60a5fa 18%,transparent);color:#93c5fd;font-size:0.875rem;line-height:1}
  .tabsWeather .navRain small{color:inherit;font-size:0.6875rem;font-weight:600}

  /* Единая плиточная сетка карточек на всю страницу */
  .tabPage > section{padding:13px 14px}
  .digestGrid2x2 > .panel{padding:13px 14px;overflow-x:hidden;overflow-y:auto;min-width:0}
  .digestCalendarPanel{display:flex;flex-direction:column}
  .dayTimeline{flex:1;height:auto;min-height:0;overflow:auto;padding-right:4px}
  .focusCard b{white-space:normal}
  .statusHero .metric{background:var(--card-hover)}
  .digestTasks #todoistTasks{column-count:2;column-gap:12px}
  .digestTasks #todoistTasks > *{break-inside:avoid;margin-bottom:4px}
  .digestTasks #todoistTasks > .empty{column-span:all}
  .digestTasks > .todoMore{clear:both}
  .paneSpan2{grid-column:span 2}
  .paneSpanFull{grid-column:1/-1}

  /* Sheet становится центральным диалогом */
  .sheetRoot{align-items:center}
  .sheet{border-radius:18px;max-height:78vh;box-shadow:0 24px 80px rgba(0,0,0,.5)}
}
@media(min-width:960px){
  .digestGrid2x2 > .panel{padding:14px 16px}
}
/* колонки: --cols считает applyGridCols() по реальной ширине сетки и настройке «Колонок максимум» */
@media(min-width:900px){.app{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}

/* ── Storytell (банк историй) ── */
#storytellCard{display:flex;flex-direction:column}
#storytellCard .storytellSwipe{flex:1;margin-top:0}
.storytellSwipe{display:flex;align-items:center;gap:8px;margin-top:8px}
.storytellNav{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;padding:0;
  background:var(--card);color:var(--text2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s ease,color .15s ease,opacity .15s ease;
}
.storytellNav .ic{width:15px;height:15px}
.storytellNav:hover:not(:disabled){background:var(--card-hover);color:var(--text)}
.storytellNav:disabled{opacity:.3;cursor:default}
.storytellStage{
  flex:1;min-width:0;min-height:180px;border-radius:var(--r-card);background:var(--card);
  padding:14px 14px 20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
  cursor:pointer;transition:background .18s ease;animation:fadeIn .25s ease both;
}
.storytellStage:hover{background:var(--card-hover)}
.storytellTitle{display:block;font-size:var(--fs-body);line-height:1.45;font-weight:600;color:var(--text)}
.storytellHook{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--text2);overflow-y:auto}
.storytellWeak{margin:8px 0 0;font-size:var(--fs-meta);line-height:1.5;color:var(--text3,var(--text2));opacity:.8}
.storytellEmpty{margin:auto;color:var(--text3);font-size:0.75rem}
.storySheetHead{margin-bottom:16px}
.storyHeadTop{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.storyChip{background:var(--accent-soft);color:var(--accent)}
.storyScoreBadge{font-family:var(--font-num);font-size:0.6875rem;font-weight:700;color:var(--warn);letter-spacing:.02em}
.storySheetTitle{display:block;font-family:var(--font-display);font-size:1.125rem;line-height:1.35;font-weight:700;color:var(--text)}
.storytellSheetBody{display:flex;flex-direction:column;gap:14px}
.storytellSheetBody p{margin:0;font-size:0.8125rem;line-height:1.55;color:var(--text2)}
.storySection{display:flex;flex-direction:column;gap:6px}
.storySectionLabel{
  display:block;font-family:var(--font-num);font-size:0.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text3);
}
.storySectionMain{
  background:var(--card);border-radius:var(--r-inner);padding:12px 13px;gap:5px;
}
.storySectionMain p{color:var(--text);font-size:0.8438rem;line-height:1.6}
.storySectionHook{
  border-left:2px solid var(--accent);padding-left:12px;
}
.storySectionHook p{font-style:italic;color:var(--text2)}

/* ── CRM ── */
.crmStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.crmStat{border:0;border-radius:var(--r-inner);background:var(--card);padding:16px;text-align:center}
.crmStat b{font-family:var(--font-num);font-size:2.125rem;display:block;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.crmStat span{display:block;margin-top:8px;color:var(--text3);font-size:0.6875rem;line-height:1.18;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.crmKanbanGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-height:360px}
.crmCol{background:var(--card);border-radius:var(--r-card);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s ease}
.crmCol.dragOver{box-shadow:0 0 0 2px var(--accent)}
.crmColHead{padding:14px 16px;font-family:var(--font-num);font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.crmColHead .chip{margin-left:auto}
.crmCards{flex:1;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:120px;transition:background .15s ease}
.crmCard{border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface2);padding:14px;transition:border-color .14s ease,opacity .14s ease,box-shadow .14s ease;cursor:grab;user-select:none}
.crmCard:hover{border-color:rgba(255,255,255,.12);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.crmCard:active{cursor:grabbing}
.crmCard.dragging{opacity:.35;border-color:var(--accent-soft);box-shadow:none}
.crmCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.crmCardName{font-size:0.875rem;font-weight:700;line-height:1.35;color:var(--text)}
.crmCardActions{display:flex;gap:2px;flex-shrink:0}
.crmCardActions button{background:none;border:0;color:var(--text4);font-size:0.875rem;padding:2px 4px;border-radius:var(--r-sm);cursor:pointer;transition:color .1s,background .1s;line-height:1}
.crmCardActions button:hover{color:var(--text2);background:rgba(255,255,255,.06)}
.crmCardActions button.crmBtnTg:hover{color:var(--accent)}
.crmCardActions button.crmBtnArchive:hover{color:var(--bad)}
.crmCardRole{font-size:0.75rem;color:var(--text2);margin-top:3px;line-height:1.35}
.crmCardMeta{font-size:0.6875rem;color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:6px}
.crmCardMeta .crmDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text4)}
.crmCardMeta .crmDot.active{background:var(--good);box-shadow:0 0 6px rgba(125,214,109,.5)}
.crmCardMeta .crmDot.dim{background:var(--text4)}
.crmCardTags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.crmCardTags .tag{font-size:0.625rem;padding:3px 8px;border-radius:var(--r-pill)}
.crmEmpty{padding:24px;text-align:center;color:var(--text4);font-family:var(--font-num);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em}

/* CRM sub-tabs */
.crmSubTabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.crmSubTab{background:none;border:0;color:var(--text3);font-size:0.75rem;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);transition:all .12s;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.crmSubTab:hover{color:var(--text2);background:var(--card)}
.crmSubTab.active{color:var(--accent);background:var(--accent-weak)}
.crmSubTab .chip{margin-left:6px;font-family:var(--font-num);font-size:0.625rem;background:var(--surface2);padding:2px 7px;border-radius:var(--r-pill);color:var(--text3)}
.crmSubTab.active .chip{background:rgba(94,234,212,.08);color:var(--accent)}

/* CRM toolbar */
.crmToolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;flex-wrap:wrap}
.crmArchToggle{display:flex;align-items:center;gap:6px;font-size:0.6875rem;color:var(--text3);cursor:pointer;user-select:none}
.crmArchToggle input[type="checkbox"]{accent-color:var(--accent);width:14px;height:14px;margin:0;cursor:pointer}

/* CRM view toggle */
.crmViewToggle{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.crmViewBtn{background:none;border:0;color:var(--text3);font-size:0.6875rem;font-weight:600;padding:4px 10px;cursor:pointer;transition:all .12s;letter-spacing:.02em;text-transform:uppercase;font-family:var(--font-num)}
.crmViewBtn:hover{color:var(--text2);background:var(--surface2)}
.crmViewBtn.active{color:var(--accent);background:var(--accent-weak)}

/* Lost column */
.crmCol[data-status="lost"] .crmCard{opacity:.45;border-color:var(--line)}
.crmCol[data-status="lost"] .crmCard:hover{opacity:.65;border-color:var(--line-strong)}

/* Edit sheet form */
.editField{margin-bottom:14px}
.editField label{display:block;font-size:0.6875rem;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.editField input,.editField select,.editField textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface1);color:var(--text);font-size:0.8125rem;font-family:var(--font-ui);outline:none;transition:border-color .12s;box-sizing:border-box}
.editField input:focus,.editField select:focus,.editField textarea:focus{border-color:var(--accent)}
.editField textarea{resize:vertical;min-height:56px;font-size:0.75rem}
.editField select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,.48)'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.editField .checkGroup{display:flex;gap:6px;flex-wrap:wrap}
.editField .checkGroup label{display:flex;align-items:center;gap:5px;font-size:0.75rem;color:var(--text2);text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer;padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);transition:all .1s;background:var(--surface1)}
.editField .checkGroup label:has(input:checked){border-color:var(--accent-soft);background:var(--accent-weak);color:var(--accent)}
.editField .checkGroup input{display:none}
.editActions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}
.editActions button{padding:9px 20px;border:0;border-radius:var(--r-sm);font-size:0.75rem;font-weight:600;cursor:pointer;transition:all .1s}
.btnSave{background:var(--accent);color:var(--bg)}
.btnSave:hover{opacity:.85}
.btnDelete{background:rgba(248,113,113,.12);color:var(--bad)}
.btnDelete:hover{background:rgba(248,113,113,.2)}
.btnCancel{background:var(--surface2);color:var(--text2);border:1px solid var(--line-strong)}
.btnCancel:hover{background:var(--surface3)}

@media(min-width:1280px){
  .digestTasks #todoistTasks{column-gap:18px}
}

@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes loadPulse{0%,100%{transform:scale(.88);box-shadow:0 0 0 0 rgba(94,234,212,.36)}50%{transform:scale(1);box-shadow:0 0 0 8px rgba(94,234,212,0)}}
/* ── Nav avatar ── */
.dashboardIdentity{display:flex;align-items:center;margin-right:auto;border-radius:50%;transition:box-shadow .15s}
.dashboardIdentity:hover{box-shadow:0 0 0 2px var(--accent-soft)}
.dashboardIdentity > a{display:block;line-height:0}
.dashboardAvatar{width:29px;height:29px;border-radius:8px;object-fit:cover;background:var(--surface2);box-shadow:0 0 0 2px var(--surface3)}

@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes alertFlash{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 2px var(--bad)}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.row:focus-visible,.tab:focus-visible,.more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:900px){
  .crmKanbanGrid{grid-template-columns:repeat(2,1fr)}
  .crmSubTabs{gap:3px}
  .crmSubTab{font-size:0.6875rem;padding:6px 10px}
  .crmSubTab .chip{display:none}
}
@media(max-width:620px){
  .app{--appX:2px;width:100%;padding:0 var(--appX) 20px;gap:10px}
  .tabPage > section{padding:11px 12px}
  .tabs{padding:6px 10px 5px}.tab{font-size:0.6562rem;padding:5px 5px;letter-spacing:.08em}
  .panel{padding:4px 4px}h2{font-size:var(--fs-head)}
  .focusCard{padding:12px 10px 10px}
  .usageChart{grid-template-columns:1fr}
  .donut{min-height:150px;padding:14px 8px}
  .miniStats{grid-template-columns:1fr 1fr}
  .statTiles{grid-template-columns:repeat(3,1fr)}
  .crmKanbanGrid{grid-template-columns:1fr!important}
  .crmStats{grid-template-columns:repeat(2,1fr)}
  .crmColHead{padding:10px 12px;font-size:0.75rem}
  .crmCard{padding:10px 12px}
  .crmCardName{font-size:0.8125rem}
  .crmCardActions button{font-size:0.8125rem;padding:1px 3px}
  .crmCardRole{font-size:0.6875rem}
  .crmCardMeta{font-size:0.625rem;margin-top:4px}
  .crmCardTags{margin-top:6px;gap:4px}
  .crmCardTags .tag{font-size:0.5625rem;padding:2px 6px}
}
@media(max-width:480px){
  :root{--fs-head:0.75rem}
  .app{--appX:0px;padding:0 0 20px}
  .tabs{padding:5px 8px 4px;gap:2px}
  .tab{font-size:0.5625rem;padding:4px 3px;letter-spacing:.06em;flex:1}
  .crmStats{grid-template-columns:1fr 1fr;gap:6px}
  .crmStat{padding:10px}
  .crmStat b{font-size:1.5rem}
  .crmStat span{font-size:0.625rem;margin-top:4px}
  .crmSubTabs{gap:2px}
  .crmSubTab{font-size:0.625rem;padding:5px 8px}
  .editField input,.editField select,.editField textarea{font-size:0.75rem;padding:8px 10px}
  .editField .checkGroup label{font-size:0.6875rem;padding:4px 8px}
  .editActions button{padding:7px 14px;font-size:0.6875rem}
  .digestGrid2x2 > .panel{padding:10px}
  .panel{margin-bottom:10px}
  .focusCard{padding:8px 8px 8px 12px}
  .focusCard b{font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row{padding:6px 8px;min-height:32px}
  .chip{font-size:0.5625rem;padding:3px 6px}
  .metric{padding:10px 8px;min-height:60px}
  .metric b{font-size:1.25rem}
  .metric small{font-size:0.5625rem}
  .navControls .refresh{width:28px;height:28px}
  .statusHero{grid-template-columns:repeat(3,1fr);gap:6px}
  .statTiles{grid-template-columns:repeat(2,1fr)}
  .donutRow .donut{flex-basis:calc(50% - 4px)}
  .skillPills{gap:4px}
  .newsItem{padding:5px 8px}
}

/* ── Pull-to-refresh (iOS/iPadOS standalone has no native one) ── */
html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 10px);z-index:61;display:flex;align-items:center;gap:9px;
  padding:6px 15px 6px 6px;border-radius:var(--r-pill);color:var(--text);
  background:color-mix(in srgb,var(--surface2) 62%,transparent);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.30);
  font:600 var(--fs-meta)/1 var(--font-num);letter-spacing:.04em;
  transform:translate(-50%,calc(var(--ptr-y,0px) - 64px)) scale(calc(.9 + var(--ptr-p,0) * .1));opacity:var(--ptr-o,0);pointer-events:none;white-space:nowrap}
/* progress ring around the arrow fills as you pull */
.ptrRing{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:conic-gradient(from 0deg,#2dd4bf,#818cf8,#fb7185 calc(var(--ptr-p,0) * 100%),rgba(255,255,255,.10) 0)}
.ptrRing::before{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--card-solid)}
.ptr .ic{position:relative;width:14px;height:14px;transform:rotate(var(--ptr-rot,0deg));transition:transform .15s ease}
.ptr.ready{box-shadow:inset 0 0 0 1px rgba(94,234,212,.35),0 0 28px rgba(94,234,212,.30),0 10px 30px rgba(0,0,0,.30)}
.ptr.ready .ic{color:var(--accent)}
.ptr.releasing{transition:transform .28s cubic-bezier(.2,.9,.3,1.2),opacity .22s ease}
.ptr.loading .ptrRing{animation:ptrSpin 1s linear infinite;background:conic-gradient(#2dd4bf,#818cf8,#fb7185,transparent 75%)}
.ptr.loading .ic{transform:none}
html.light-mode .ptr{box-shadow:inset 0 0 0 1px rgba(15,23,42,.06),0 10px 30px rgba(15,23,42,.14)}

/* Aurora along the top edge: breathes softly when an update is waiting, flares up while pulling */
.ptrAurora{position:fixed;top:0;left:-10%;right:-10%;height:calc(env(safe-area-inset-top) + 70px + var(--ptr-y,0px) * 1.2);z-index:60;pointer-events:none;
  opacity:calc(var(--ptr-p,0) * .9);transition:opacity .4s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent);mask-image:linear-gradient(180deg,#000 10%,transparent)}
.ptrAurora i{position:absolute;top:-40%;width:45%;height:130%;border-radius:50%;filter:blur(26px);opacity:.75;mix-blend-mode:screen}
.ptrAurora i:nth-child(1){left:2%;background:radial-gradient(closest-side,#2dd4bf,transparent);animation:ptrAur1 9s ease-in-out infinite alternate}
.ptrAurora i:nth-child(2){left:30%;background:radial-gradient(closest-side,#818cf8,transparent);animation:ptrAur2 11s ease-in-out infinite alternate}
.ptrAurora i:nth-child(3){left:58%;background:radial-gradient(closest-side,#fb7185,transparent);opacity:.55;animation:ptrAur1 13s ease-in-out infinite alternate-reverse}
html.hasUpdate .ptrAurora{opacity:max(.55,calc(var(--ptr-p,0) * .95));animation:ptrBreathe 5s ease-in-out infinite}
html.hasUpdate.ptrPulling .ptrAurora{animation:none}
html.light-mode .ptrAurora i{mix-blend-mode:normal;opacity:.4}
@keyframes ptrAur1{0%{transform:translateX(-8%) scaleY(.85)}100%{transform:translateX(14%) scaleY(1.1)}}
@keyframes ptrAur2{0%{transform:translateX(10%) scaleY(1.05)}100%{transform:translateX(-12%) scaleY(.8)}}
@keyframes ptrBreathe{0%,100%{opacity:.35}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.ptrAurora,.ptrAurora i{animation:none!important}}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* ── Pane settings (cog in nav): compact one-line rows ── */
.paneOff{display:none!important}
.sheet.sheetWide{width:min(560px,100%)}
.paneSheet{padding:14px 14px max(14px,env(safe-area-inset-bottom))}
.paneHead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px}
.paneHead b{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.paneClose{width:28px;height:28px;border:0;border-radius:50%;background:var(--surface2);color:var(--text3);font-size:0.75rem;cursor:pointer}
.paneClose:hover{background:var(--surface3);color:var(--text)}
.paneGlobal{display:grid;gap:6px;margin-bottom:12px;padding:10px 12px;border-radius:var(--r-inner);background:var(--card)}
.paneGlobalRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.paneGlobalRow > span,.paneCols span{font:700 0.625rem/1 var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.paneCols{display:flex;justify-content:space-between;padding:0 10px 6px}
.paneSeg{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--surface2);flex:0 0 auto}
.paneSeg button{border:0;border-radius:var(--r-pill);background:none;color:var(--text3);font:600 0.6875rem/1 var(--font-num);padding:6px 9px;min-width:26px;cursor:pointer;transition:background .15s ease,color .15s ease}
.paneSeg button:hover{color:var(--text)}
.paneSeg button.on{background:var(--surface3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.paneGlobal .paneSeg button.on{background:var(--accent);color:var(--bg);box-shadow:none}
.sheet.paneSheet{width:min(calc(var(--cols,1) * 210px + 28px),94vw)}
.paneGrid{position:relative;display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:8px;margin-bottom:10px}
.paneTile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;padding:10px;border-radius:var(--r-inner);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .2s ease,box-shadow .15s ease,background .15s ease;outline:none}
.paneTile:hover{background:var(--card-hover)}
.paneTile:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.paneTile.span2{grid-column:span min(2,var(--cols,1))}
.paneTile.spanFull{grid-column:1/-1}
.panePinned{margin-bottom:8px}
.paneTile.pinned{cursor:default;background:radial-gradient(90% 160% at 0% 50%,var(--accent-soft),transparent 60%),var(--card)}
.paneTile.pinned b em{background:none;color:var(--text3);letter-spacing:0;font-size:.6875rem;font-weight:500;padding:0 0 0 6px}
.paneTile.fz{background:linear-gradient(160deg,rgba(129,140,248,.14),rgba(45,212,191,.05) 55%,transparent),var(--card)}
.paneTile.fz::before{content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:var(--r-inner) var(--r-inner) 0 0;background:linear-gradient(90deg,#2dd4bf,#818cf8,#fb7185);opacity:.8}
/* ONE THING effects box in the settings sheet */
.otFxEvery{display:inline-flex;align-items:center;gap:6px}
.otFxTry{width:26px;height:26px;border:0;border-radius:50%;background:var(--surface2);color:var(--accent);font-size:0.625rem;cursor:pointer}
.otFxTry:hover{background:var(--surface3)}
.otFxChips{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}
.otFxChip{border:1px solid var(--line-strong);border-radius:var(--r-pill);background:none;color:var(--text3);font:600 0.6875rem/1 var(--font-num);letter-spacing:.03em;padding:7px 11px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.otFxChip.on{color:var(--text);border-color:transparent;background:linear-gradient(115deg,rgba(45,212,191,.28),rgba(129,140,248,.28),rgba(251,113,133,.24))}
.otFxChip:not(.on){text-decoration:line-through;text-decoration-color:var(--text4)}
/* drag: fixed-position "lifted" tile under the finger + dashed slot where it lands */
.sheet.paneSheet{animation-fill-mode:backwards}
.paneTile{-webkit-touch-callout:none;touch-action:manipulation}
.paneTile.armed{transition:transform .22s ease,box-shadow .22s ease;transform:scale(.97)}
.paneTile.lifted{position:fixed;z-index:300;margin:0;pointer-events:none;cursor:grabbing;transition:none;transform:scale(1.04) rotate(-.6deg);background:var(--surface3);box-shadow:inset 0 0 0 1px var(--accent-soft),0 22px 50px rgba(0,0,0,.5),0 0 0 4px rgba(94,234,212,.08)}
.paneTile.lifted.dropping{transition:left .18s ease,top .18s ease,transform .18s ease,box-shadow .18s ease;transform:none;box-shadow:inset 0 0 0 1px var(--line)}
.paneSlot{border-radius:var(--r-inner);border:1.5px dashed var(--accent-soft);background:var(--accent-weak);transition:transform .2s ease}
.paneSlot.span2{grid-column:span min(2,var(--cols,1))}
.paneSlot.spanFull{grid-column:1/-1}
.paneGrid.isDragging{cursor:grabbing}
.paneGrid.isDragging .paneTile:not(.lifted){opacity:.8}
.paneGrip{padding:6px 4px;margin:-6px 0 -6px -4px}
html.light-mode .paneTile.lifted{box-shadow:inset 0 0 0 1px var(--accent-soft),0 18px 40px rgba(15,23,42,.18)}
.paneTileTop{display:flex;align-items:center;gap:6px;min-width:0}
.paneGrip{flex:0 0 auto;color:var(--text4);font-size:0.875rem;line-height:1;cursor:grab;touch-action:none;padding:2px 0}
.paneTile:hover .paneGrip{color:var(--text3)}
.paneTile b{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-family:var(--font-num);font-size:0.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paneTile b em{font-style:normal;font-size:0.5625rem;letter-spacing:.08em;padding:3px 5px;border-radius:var(--r-pill);color:#0b0c10;background:linear-gradient(115deg,#2dd4bf,#818cf8,#fb7185)}
.paneTileOpts{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.paneTileOpts select{border:0;border-radius:var(--r-pill);background:var(--surface2);color:var(--text2);font:600 0.6875rem/1 var(--font-num);padding:7px 8px;outline:none;cursor:pointer;color-scheme:dark}
.light-mode .paneTileOpts select{color-scheme:light}
.paneTray{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 2px 12px}
.paneTray > span{font:700 0.625rem/1 var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-right:4px}
.paneChip{border:1px dashed var(--line-strong);border-radius:var(--r-pill);background:none;color:var(--text3);font:600 0.6875rem/1 var(--font-num);letter-spacing:.04em;padding:6px 10px;cursor:pointer}
.paneChip:hover{color:var(--text);border-color:var(--accent-soft)}
@media (prefers-reduced-motion:reduce){.paneTile{transition:none}}
.paneSwitch{position:relative;display:inline-block;width:28px;height:16px;flex:0 0 auto;cursor:pointer}
.paneSwitch input{position:absolute;opacity:0;width:0;height:0}
.paneSwitch span{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--surface3);transition:background .15s ease}
.paneSwitch span:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text);transition:transform .15s ease}
.paneSwitch input:checked + span{background:var(--accent)}
.paneSwitch input:checked + span:after{transform:translateX(12px);background:var(--bg)}
.paneSwitch input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.paneFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 0;border-top:1px solid var(--line)}
.paneFoot small{font-size:0.6875rem;color:var(--text3);text-align:right}
.paneReset{border:0;background:none;color:var(--text3);font:600 0.75rem/1 inherit;padding:6px 0;cursor:pointer}
.paneReset:hover{color:var(--danger,#fb7185)}

/* FOCUSERA cards: own tinted surface + gradient edge, so A/B blocks read as one family */
.panel.fzPane.fzFlash{animation:fzFlash 1.1s ease}
@keyframes fzFlash{0%{box-shadow:0 0 0 0 rgba(129,140,248,.0)}25%{box-shadow:0 0 0 2px rgba(129,140,248,.55),0 0 28px rgba(129,140,248,.35)}100%{box-shadow:0 0 0 0 rgba(129,140,248,0)}}
@media (prefers-reduced-motion:reduce){.panel.fzPane.fzFlash{animation:none}}

/* ── Polish: thin scrollbars, card hover, staggered fade-in (cards = [data-pane]) ── */
[data-pane],.dayTimeline,.sheet{scrollbar-width:thin;scrollbar-color:var(--text4) transparent}
[data-pane]{transition:background .15s ease;animation:fadeIn .35s ease backwards;animation-delay:calc(var(--i,0) * 30ms)}
@media(hover:hover){[data-pane]:hover{background:var(--card-hover)}}
@media(prefers-reduced-motion:reduce){[data-pane]{animation:none}}
/* ── FOCUSERA blocks ── */
.oneThingRows{display:grid;gap:8px}
.oneThingRow{display:grid;gap:4px;text-align:left;width:100%;padding:12px 14px;border:0;border-radius:var(--r-inner);background:var(--accent-weak);color:var(--text);font:inherit;cursor:pointer;transition:background .18s ease}
.oneThingRow:hover{background:var(--accent-soft)}
.oneThingRow small{font:600 0.625rem/1 var(--font-num);color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.oneThingRow b{font-size:1rem;line-height:1.3;font-weight:600;overflow-wrap:break-word}
.oneThingRow.unset{background:var(--card)}
.oneThingRow.unset b{color:var(--text3);font-weight:500}
.oneThingOptions{display:grid;gap:6px;margin:0 0 12px}
.oneThingOption{text-align:left;padding:10px 12px;border:0;border-radius:var(--r-inner);background:var(--card);color:var(--text);font:inherit;font-size:var(--fs-body);line-height:1.35;cursor:pointer}
.oneThingOption:hover{background:var(--accent-weak)}
.loopCounts{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:10px}
@media (max-width:480px){.loopCounts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fzRipe .panelHead h2{color:var(--warn)}
.fzProgress{height:6px;border-radius:var(--r-pill);background:var(--card);overflow:hidden;margin:2px 2px 12px}
.fzProgress span{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .4s ease}
.row.fzModule{grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:flex-start}
.fzMark{font:700 0.75rem/1.3 var(--font-num);color:var(--text3);text-align:center}
.fzModule.fz-done .fzMark{color:var(--good)}
.fzModule.fz-partial .fzMark{color:var(--warn)}
.fzModule.fz-next .fzMark,.fzModule.fz-next b{color:var(--accent)}
.fzModule.fz-todo b{color:var(--text3)}
/* ONE THING: pinned full-width reminder strip, first card after the nav (not in pane settings) */
.tabPage > section.oneThingPanel{grid-column:1/-1;order:0;min-height:0;max-height:none;overflow:visible;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 18px;padding:10px 14px;border-left:3px solid var(--accent)}
.oneThingPanel .panelHead{flex-direction:column;align-items:flex-start;gap:4px;margin:0}
.oneThingPanel .panelHint{display:none}
@media(max-width:620px){
  .tabPage > section.oneThingPanel{grid-template-columns:1fr;gap:8px;padding:10px}
  .oneThingPanel .panelHead{flex-direction:row;align-items:center}
}
/* ONE THING: one item in focus - hero reminder */
.tabPage > section.oneThingPanel{position:relative;overflow:hidden;padding:14px 20px 14px 22px;border-left:0;background:radial-gradient(90% 160% at 0% 50%,var(--accent-soft),transparent 60%),var(--card)}
.tabPage > section.oneThingPanel::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.oneThingPanel .panelHead h2{color:var(--accent)}
.oneThingPanel .oneThingRow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:4px;padding:2px 0;background:none;align-items:center}
.oneThingPanel .oneThingRow:hover{background:none}
.oneThingText{grid-column:1;font-size:1.0625rem;line-height:1.3;font-weight:500;color:var(--text2);overflow-wrap:break-word}
.oneThingText b{font-size:1.4375rem;font-weight:800;letter-spacing:-.015em;color:var(--text);margin-right:10px}
.oneThingRow.unset .oneThingText b{font-size:1.125rem;font-weight:600;color:var(--text3)}
.oneThingPanel .oneThingRow i{grid-column:1;font-style:normal;font-size:0.8125rem;line-height:1.35;color:var(--text3)}
.oneThingPanel .oneThingRow i::before{content:"↳ ";color:var(--accent)}
.oneThingEdit{grid-column:2;grid-row:1/span 2;font:600 0.625rem/1 var(--font-num);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);padding:7px 10px;border:1px solid var(--accent-soft);border-radius:var(--r-pill);opacity:0;transition:opacity .18s ease}
.oneThingRow:hover .oneThingEdit,.oneThingRow:focus-visible .oneThingEdit,.oneThingRow.unset .oneThingEdit{opacity:1}
@media (hover:none){.oneThingEdit{opacity:.75}}
@media (max-width:620px){
  .tabPage > section.oneThingPanel{padding:12px 14px 12px 16px;background:radial-gradient(140% 120% at 0% 0%,var(--accent-soft),transparent 65%),var(--card)}
  .oneThingText{font-size:0.9375rem}
  .oneThingText b{display:block;font-size:1.25rem;margin:0 0 2px}
  .oneThingEdit{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
}
/* ONE THING as in the wireframe: no tile, one centered line between the nav and the grid */
.tabPage > section.oneThingPanel{position:relative;display:flex;justify-content:center;align-items:center;min-height:0;padding:14px 56px 10px;margin:0;background:none;border:0;box-shadow:none;text-align:center}
.tabPage > section.oneThingPanel::before,.oneThingPanel .panelHead,.oneThingPanel .panelHint,.oneThingPanel .oneThingRow i{display:none}
.oneThingPanel .oneThingRow{display:block;max-width:1100px;padding:0;background:none}
.oneThingPanel .oneThingText{display:block;text-align:center;font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.3;color:var(--text2);text-wrap:balance}
.oneThingPanel .oneThingText b{font-size:inherit;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-right:6px}
.oneThingPanel .oneThingText b::before{content:"⚡ ";color:var(--accent)}
.oneThingPanel .oneThingEdit{position:absolute;top:50%;right:8px;transform:translateY(-50%);margin:0}
/* ONE THING: крупнее, без «сменить» (клик по строке), цветная подложка */
.tabPage > section.oneThingPanel{padding:22px 16px 18px;overflow:visible}
.oneThingPanel .oneThingEdit{display:none}
.oneThingPanel .oneThingRow{position:relative;isolation:isolate;padding:18px 40px;border-radius:22px;background:linear-gradient(115deg,rgba(45,212,191,.30),rgba(129,140,248,.30) 50%,rgba(251,113,133,.28));background-size:200% 200%;animation:oneThingFlow 14s ease-in-out infinite;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .18s ease}
.oneThingPanel .oneThingRow::after{content:"";position:absolute;inset:8px 10%;z-index:-1;border-radius:inherit;background:linear-gradient(115deg,#2dd4bf,#818cf8,#fb7185);filter:blur(34px);opacity:.28}
.oneThingPanel .oneThingRow:hover{background:linear-gradient(115deg,rgba(45,212,191,.30),rgba(129,140,248,.30) 50%,rgba(251,113,133,.28));background-size:200% 200%;transform:translateY(-1px)}
.oneThingPanel .oneThingText{font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.25;color:var(--text)}
.oneThingPanel .oneThingText b{font-weight:800}
html.light-mode .oneThingPanel .oneThingRow{box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
html.light-mode .oneThingPanel .oneThingRow::after{opacity:.22}
@keyframes oneThingFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.oneThingPanel .oneThingRow{animation:none}}
@media (max-width:760px){.oneThingPanel .oneThingRow{padding:14px 18px;border-radius:18px}.oneThingPanel .oneThingText{font-size:1.3125rem}}
/* ONE THING v3: full-width colour band ~100px, ambient aurora + every 10s a «focus» moment (.fx, set from JS):
   letters ripple through fonts, viewfinder corners close in, sheen sweeps, blur→sharp, zoom, glow flash */
.tabPage > section.oneThingPanel{padding:6px 0 2px}
.oneThingPanel > #oneThing{flex:1 1 auto;width:100%;min-width:0}
.oneThingPanel .oneThingRow{display:grid;place-items:center;width:100%;max-width:none;min-height:100px;padding:12px 44px;overflow:hidden;animation:oneThingFlow 14s ease-in-out infinite}
.oneThingPanel .oneThingRow::after{z-index:-2}
.oneThingPanel .oneThingText{position:relative;z-index:1;font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.2}
.otW{display:inline-block;white-space:nowrap}
.otC{display:inline-block}
/* ambient: slow drifting colour blobs behind the text */
.otAurora{position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;background:radial-gradient(28% 60% at 20% 50%,rgba(45,212,191,.35),transparent 70%),radial-gradient(24% 55% at 55% 40%,rgba(129,140,248,.35),transparent 70%),radial-gradient(26% 60% at 85% 60%,rgba(251,113,133,.30),transparent 70%);filter:blur(18px);animation:otAurora 18s ease-in-out infinite alternate}
@keyframes otAurora{0%{transform:translateX(-6%) scale(1)}50%{transform:translateX(4%) scale(1.08)}100%{transform:translateX(8%) scale(.96)}}
/* sheen band (::before) */
.oneThingPanel .oneThingRow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%)}
/* viewfinder corners */
.otCorners{position:absolute;inset:-6px;z-index:2;pointer-events:none;opacity:0;--c:rgba(255,255,255,.85);--l:18px;--w:2px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w),linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w),linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w),linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w),linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l);
  background-repeat:no-repeat;border-radius:inherit}
html.light-mode .otCorners{--c:rgba(15,23,42,.6)}
/* the focus moment */
.oneThingRow.fx{animation:oneThingFlow 14s ease-in-out infinite,oneThingZoom 1.6s ease-in-out}
.oneThingRow.fx::before{animation:otSheen 1.4s ease-in-out .35s}
.oneThingRow.fx::after{animation:oneThingGlow 1.6s ease-in-out}
.oneThingRow.fx .otCorners{animation:otCorners 1.5s cubic-bezier(.2,.8,.2,1)}
.oneThingRow.fx .oneThingText{animation:oneThingSharp 1.6s ease-in-out}
.oneThingRow.fx .otC{animation:otFont 1s steps(1,end) calc(var(--i) * 22ms + .15s)}
.oneThingRow.fx b .otC{animation-name:otFont,otPop}
/* shockwave: a glowing ellipse expands from the centre of the band */
.otRing{position:absolute;left:50%;top:50%;z-index:0;width:0;height:0;border:2px solid rgba(165,243,252,.8);border-radius:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 22px 2px rgba(129,140,248,.55),inset 0 0 22px rgba(165,243,252,.45)}
html.light-mode .otRing{border-color:rgba(79,70,229,.6)}
.oneThingRow.fx .otRing{animation:otRing 1.3s cubic-bezier(.15,.7,.3,1) .1s}
@keyframes otRing{0%{width:0;height:0;opacity:1}100%{width:140%;height:420%;opacity:0}}
@keyframes oneThingZoom{0%,100%{transform:scale(1)}35%{transform:scale(1.02)}}
@keyframes oneThingSharp{0%,100%{filter:none;opacity:1}15%{filter:blur(3px);opacity:.75}40%{filter:none;opacity:1}}
@keyframes oneThingGlow{0%,100%{opacity:.28}35%{opacity:.75}}
@keyframes otSheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes otCorners{0%{opacity:0;inset:-14px}30%{opacity:1;inset:6px}70%{opacity:1;inset:6px}100%{opacity:0;inset:2px}}
@keyframes otFont{0%{font-family:'Playfair Display',serif;font-style:italic}25%{font-family:'JetBrains Mono',monospace;font-style:normal}50%{font-family:'Unbounded',sans-serif}75%{font-family:'Playfair Display',serif;font-style:italic}100%{font-family:inherit;font-style:normal}}
@keyframes otPop{0%,100%{transform:none;color:inherit}30%{transform:translateY(-3px);color:#a5f3fc}60%{color:#c4b5fd}}
/* effects switched off in settings (html.otNo-*) */
html.otNo-aurora .otAurora,html.otNo-corners .otCorners,html.otNo-ring .otRing,html.otNo-sheen .oneThingPanel .oneThingRow::before{display:none}
html.otNo-font .oneThingRow.fx .otC{animation:none}
html.otNo-focus .oneThingRow.fx{animation:oneThingFlow 14s ease-in-out infinite}
html.otNo-focus .oneThingRow.fx .oneThingText,html.otNo-focus .oneThingRow.fx::after{animation:none}
/* focus moment: other cards dim and soften, then come back */
[data-pane]{transition:background .15s ease,opacity .6s ease,filter .6s ease}
html.otDim [data-pane]:not(.paneOff):not(.oneThingPanel){opacity:.35;filter:blur(1.5px) saturate(.6);transition:background .15s ease,opacity .25s ease,filter .25s ease}
@media (prefers-reduced-motion:reduce){html.otDim [data-pane]{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.otAurora,.oneThingRow.fx,.oneThingRow.fx *,.oneThingRow.fx::before,.oneThingRow.fx::after{animation:none!important}}
@media (max-width:760px){.tabPage > section.oneThingPanel{padding:4px 0 0}.oneThingPanel .oneThingRow{min-height:84px;padding:10px 18px}.oneThingPanel .oneThingText{font-size:1.1875rem}}

/* ONE THING в меню: когда плашка уходит под шапку, она же становится капсулой в строке меню по центру
   (как плашка FOCUS TIMER). html.otDock + --otDL/--otDT/--otDW/--otDH/--otPH ставит logoDockUpdate();
   панель держит свою высоту (--otPH), поэтому контент под ней не прыгает */
html.otDock .tabPage > section.oneThingPanel{height:var(--otPH,auto)}
html.otDock:is(.view-st,.view-set) .oneThingPanel > #oneThing{display:none}
html.otDock .oneThingPanel > #oneThing{position:fixed;z-index:30;left:var(--otDL);top:var(--otDT);width:var(--otDW);height:var(--otDH);border-radius:var(--r-inner);overflow:hidden;background:var(--bg)}
html.otDock .oneThingPanel .oneThingRow{display:flex;align-items:center;justify-content:center;min-height:0;height:100%;padding:0 14px!important;border-radius:inherit;box-shadow:none}
html.otDock .oneThingPanel .oneThingRow:hover{transform:none}
html.otDock .oneThingPanel .oneThingText{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.8125rem;line-height:1}
html.otDock .oneThingPanel .oneThingText b{margin:0;font-weight:700}
html.otDock .oneThingPanel .oneThingText b::before{content:none}
html.otDock .oneThingPanel .oneThingText > span,html.otDock .oneThingRow i,html.otDock .otCorners,html.otDock .otRing{display:none}
/* в капсуле лого не нужно - оно уже есть слева в меню */
html.otDock .otLogo{display:none}
/* прилет в меню: вспышка свечения по капсуле (класс .otLand ставит JS после морфа) */
html.otDock #oneThing.otLand{animation:otLand .9s ease-out}
@keyframes otLand{0%{box-shadow:0 0 0 0 rgba(165,243,252,.55),0 0 18px 2px rgba(129,140,248,.5)}100%{box-shadow:0 0 0 10px rgba(165,243,252,0),0 0 0 0 rgba(129,140,248,0)}}

/* навбар ужимается, только когда капсуле ONE THING не хватает места (iPad с боковой колонкой, узкое окно):
   navT1 - вкладки одними иконками, navT2 - и погода одной иконкой (подсказки в title) */
.tabs.navT1 .tabGroup .tab{min-width:var(--navH,30px);padding:0 8px;justify-content:center}
.tabs.navT1 .tabGroup .tab > span,.tabs.navT1 .tabGroup .tabExt .tabExtIc{display:none}
.tabs.navT1 .tabGroup .tab .ic{width:16px;height:16px}
.tabs.navT2 .tabsWeather{width:var(--navH,30px);padding:0;justify-content:center}
.tabs.navT2 .tabsWeather .wxS b{display:none}

/* ── FOCUS card (FOCUSERA) ── */
.focusHeadR{display:flex;align-items:center;gap:6px}
.focusList{display:grid}
.focusRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:34px;padding:3px 2px 3px 9px;border-top:1px solid var(--line);transition:opacity .2s ease,transform .2s ease}
.focusRow:first-child{border-top:0}
.focusRow.busy{opacity:.55}
.focusRow.gone{opacity:0;transform:translateX(16px)}
.focusTxt{display:flex;align-items:baseline;gap:7px;min-width:0}
.focusTxt b{min-width:0;font-size:0.8125rem;font-weight:500;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.focusTxt small{flex:none;font:600 0.6562rem/1 var(--font-num);color:var(--text3);white-space:nowrap}
.focusTxt small:empty{display:none}
.focusActs{display:flex;gap:2px;opacity:.55;transition:opacity .15s ease}
.focusRow:hover .focusActs,.focusRow:focus-within .focusActs{opacity:1}
.focusActs button{min-width:26px;height:24px;padding:0 7px;border:0;border-radius:var(--r-pill);background:var(--card-hover);color:var(--text2);font:inherit;font-size:0.6875rem;white-space:nowrap;cursor:pointer}
.focusActs button:hover{background:var(--accent-weak);color:var(--accent)}
.focusActs button.danger:hover{background:rgba(248,113,113,.12);color:var(--warn)}
.focusActs button .ic{width:13px;height:13px;vertical-align:-2px}
@media (pointer:coarse){.focusActs{opacity:1}.focusActs button{min-width:32px;height:30px}}
.focusEmpty{margin:6px 0 0 9px;font-size:0.6875rem;color:var(--text3)}
.focusEmpty{display:flex;align-items:center;gap:5px}
.focusEmpty svg{width:12px;height:12px;color:var(--good)}
/* ONE THING hero */
.focusOne:empty{display:none}
.focusOne{margin:0 0 12px}
.focusOneCard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-radius:var(--r-inner);background:var(--accent-weak)}
.focusOneGo{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px 0 10px;border:0;border-radius:var(--r-pill);background:var(--accent);color:#fff;font:700 0.75rem/1 var(--font-num);cursor:pointer;transition:transform .15s ease,filter .15s ease}
.focusOneGo:hover{filter:brightness(1.08)}
.focusOneGo:active{transform:scale(.96)}
.focusOneGo .ftIc{width:12px;height:12px}
.focusOneSet{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--r-inner);background:none;color:var(--text2);font:inherit;text-align:left;cursor:pointer}
.focusOneSet:hover{border-color:var(--accent);color:var(--accent)}
.focusOneSet svg{flex:none;width:16px;height:16px;color:var(--accent)}
.focusOneSet span{display:grid;gap:2px}
.focusOneSet b{font-size:0.8125rem;font-weight:600}
.focusOneSet small{font-size:0.6875rem;color:var(--text3)}
/* неделя: полоска Пн-Вс */
/* Сегодня: 3 плитки */

/* FOCUSERA A/B switch (nav, next to ДАЙДЖЕСТ) */
html:not(.fz-b) #focusCard,
html.fz-b #loopsCard,html.fz-b #parkingCard,html.fz-b #tailsCard,html.fz-b #modulesCard{display:none!important}

/* ── Focus timer: header chip + right sidebar (docked on wide screens = pushes the dashboard, overlay on narrow) ── */
.ftBtn{--ft1:#5eead4;--ft2:#67e8f9;position:relative;gap:6px;transition:background .2s ease,color .2s ease,width .25s ease,padding .25s ease}
.ftBtn .ftMini,.ftBtn .ftChipTime{display:none}
.ftBtn:not(.ftOn){background:color-mix(in srgb,var(--accent) 20%,var(--surface2));color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.ftBtn:not(.ftOn):hover{background:color-mix(in srgb,var(--accent) 30%,var(--surface2))}
.ftBtn .ftIdleIc{width:17px!important;height:17px!important}
.ftBtn.ftOn{width:auto!important;min-width:104px;padding:0 13px 0 8px;justify-content:flex-start;border-radius:var(--r-pill);color:var(--text);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ft1) 34%,var(--surface2)) calc(var(--ftP,0) * 100%),color-mix(in srgb,var(--ft1) 12%,var(--surface2)) 0);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ft1) 70%,transparent),0 0 12px -2px color-mix(in srgb,var(--ft1) 45%,transparent)}
.ftBtn.ftOn .ftIdleIc{display:none}
.ftBtn.ftOn .ftMini{display:block;width:19px;height:19px;flex:none}
.ftBtn.ftOn .ftChipTime{display:inline;font:800 0.875rem/1 var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tabs.ftRunNav:after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--ftP,0) * 100%);background:linear-gradient(90deg,var(--ft1),var(--ft2));box-shadow:0 0 8px var(--ft1);transition:width .3s linear;pointer-events:none}
.ftBtn.ftPaused .ftChipTime{animation:ftBlink 1.4s steps(2,jump-none) infinite}
.ftBtn.ft-over{animation:ftNudge 1.6s ease-in-out infinite}
:where(.tabs.ftRunNav){--ft1:#5eead4;--ft2:#67e8f9}
.ft-break{--ft1:#c4b5fd;--ft2:#f9a8d4}
.ft-sw{--ft1:#fbbf24;--ft2:#fb923c}
.ft-over{--ft1:#fb7185;--ft2:#fbbf24}
.ft-low{--ft1:#fbbf24;--ft2:#fde68a}
.ft-end{--ft1:#fb7185;--ft2:#fdba74}
.ft-idle{--ft1:#5eead4;--ft2:#818cf8}
.ftS1{stop-color:var(--ft1)}.ftS2{stop-color:var(--ft2)}
.ftTrack{fill:none;stroke:var(--line-strong);stroke-width:12}
.ftArc{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.ftMini .ftTrack,.ftMini .ftArc{stroke-width:18}
@keyframes ftBlink{50%{opacity:.35}}
@keyframes ftNudge{0%,100%{box-shadow:0 0 0 0 rgba(251,113,133,0)}50%{box-shadow:0 0 0 4px rgba(251,113,133,.28)}}

.ftPop{position:fixed;z-index:150;top:0;right:0;bottom:0;width:var(--ftW);overflow:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 8px) 9px calc(env(safe-area-inset-bottom) + 12px);
  background:var(--card-solid);border-left:1px solid var(--line-strong);animation:ftIn .22s cubic-bezier(.2,.9,.3,1);
  --ft1:#5eead4;--ft2:#818cf8;font-family:var(--font-ui);color:var(--text)}
.ftPop[hidden]{display:none}
body.ftDocked{padding-right:var(--ftW);transition:padding-right .22s ease}
@media (max-width:699px){.ftPop{box-shadow:-20px 0 50px rgba(0,0,0,.45)}html.light-mode .ftPop{box-shadow:-16px 0 40px rgba(15,23,42,.16)}}
@keyframes ftIn{from{opacity:0;transform:translateX(24px)}}
.ftPop[data-tone="focus"]{--ft1:#5eead4;--ft2:#67e8f9}
.ftPop[data-tone="break"]{--ft1:#c4b5fd;--ft2:#f9a8d4}
.ftPop[data-tone="sw"]{--ft1:#fbbf24;--ft2:#fb923c}
.ftPop[data-tone="over"]{--ft1:#fb7185;--ft2:#fbbf24}
.ftPop[data-tone="low"]{--ft1:#fbbf24;--ft2:#fde68a}
.ftPop[data-tone="end"]{--ft1:#fb7185;--ft2:#fdba74}
.ftPop button{font-family:inherit;cursor:pointer}
.ftHead{display:flex;align-items:center;gap:2px}
.ftHead > b{flex:1;padding-left:2px;font:700 0.5938rem/1 var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.ftToday{font:600 0.625rem/1 var(--font-num);color:var(--text3);padding:0 3px}
.ftToday i{font-style:normal;color:var(--accent);font-size:0.4375rem;letter-spacing:1px;vertical-align:2px}
.ftIcon{width:24px;height:24px;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--text3);font-size:1rem;line-height:1}
.ftIcon.on,.ftIcon:hover{color:var(--text);background:var(--surface2)}
.ftIcon .ic{width:13px;height:13px}

.ftStage{position:relative;display:grid;place-items:center;margin:6px auto 6px;width:126px;height:126px}
.ftStage .ftBigRing{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--ft1) 30%,transparent))}
.ftStage .ftTrack{stroke-width:7}.ftStage .ftArc{stroke-width:7}
.ftFace{position:relative;text-align:center}
.ftBig{font:700 1.6875rem/1 var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ftPop[data-tone="over"] .ftBig{color:#fb7185}
.ftSub{margin-top:4px;font:600 0.5rem/1 var(--font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--ft1)}
.ftFocusLbl,.ftFaceInput{display:block;margin:6px auto 0;max-width:94px;border:0;border-radius:6px;background:none;color:var(--text);font:600 0.6562rem/1.25 var(--font-ui);text-align:center;padding:2px 4px}
.ftFocusLbl{cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ftFocusLbl:hover{background:var(--surface2)}
.ftFocusLbl.empty{color:var(--text3);font-weight:500}
.ftFocusLbl.auto{color:var(--text2)}
.ftFaceInput{width:94px;background:var(--surface1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);outline:none}
.ftOT{display:block;margin:0 auto 6px;height:22px;padding:0 9px!important;font:700 0.5938rem/1 var(--font-num)!important;letter-spacing:.06em;cursor:pointer}
.ftStage.ftPaused .ftBig{animation:ftBlink 1.4s steps(2,jump-none) infinite}

.ftBar{display:flex;gap:3px;height:4px}
.ftBar i{display:block;min-width:3px;border-radius:2px;background:color-mix(in srgb,#5eead4 55%,transparent)}
.ftBar i.ft-break{background:color-mix(in srgb,#c4b5fd 55%,transparent)}
.ftRunBar{margin:0 4px 8px;height:4px}
.ftRunBar i{opacity:.35}.ftRunBar i.done{opacity:.9}
.ftRunBar i.cur{opacity:1;box-shadow:0 0 10px var(--ft1)}

.ftCtrls{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:2px 0 10px}
.ftB{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-pill);background:var(--surface2);color:var(--text2);font:700 0.75rem/1 var(--font-num);padding:7px 10px;min-width:34px;transition:background .15s ease,color .15s ease,transform .1s ease}
.ftB:hover{background:var(--surface3);color:var(--text)}
.ftB:active{transform:scale(.95)}
.ftIc{width:12px;height:12px;flex:0 0 auto}
.ftB.ftPrimary{order:-1;flex:1 1 100%;color:#06110f;background:linear-gradient(115deg,var(--ft1),var(--ft2))}
.ftB.ftGhost{background:none;color:var(--text3);padding:4px 5px;font-size:0.625rem;min-width:0}
.ftB.ftGhost .ftIc{width:10px;height:10px}
.ftB.ftGhost:hover{color:var(--text)}
.ftCtlSub{flex-basis:100%;display:flex;justify-content:center;gap:2px}

.ftLabelRow{display:flex;gap:4px}
.ftLabel,.ftCustom input,.ftCustomMin input{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface1);color:var(--text);font:500 0.7188rem/1.2 var(--font-ui);padding:6px 7px;outline:none}
.ftLabel{flex:1}
.ftLabel:focus,.ftCustom input:focus,.ftCustomMin input:focus{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.ftOT{flex:0 0 26px;border:0;border-radius:8px;font-size:0.75rem;padding:0;color:var(--text);background:linear-gradient(115deg,rgba(45,212,191,.25),rgba(129,140,248,.25))}

.ftBody{display:grid;gap:10px;margin-top:10px}
.ftSec{display:grid;gap:4px}
.ftSecT{font:700 0.5312rem/1 var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:2px}
.ftPresets{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.ftPreset{border:1px solid var(--line);border-radius:7px;background:none;color:var(--text);font:700 0.75rem/1 var(--font-num);padding:7px 0;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.ftPreset:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:var(--accent-weak)}
.ftPreset:active{transform:scale(.94)}
.ftPreset.sel{border-color:var(--accent);background:var(--accent-weak)}
.ftCustomMin{display:flex;align-items:center;gap:3px}
.ftCustomMin .ftB{flex:0 0 30px;padding:6px 0;min-width:0;font-size:0.875rem}
.ftCustomMin input{flex:1;width:0;text-align:center;font:700 0.75rem/1 var(--font-num);padding:5px}
.ftRow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 4px;text-align:left;border:0;border-radius:7px;background:none;color:var(--text);padding:5px 5px;transition:background .15s ease}
.ftRow small{font:600 0.625rem/1 var(--font-num);color:var(--text3);white-space:nowrap}
.ftRow b{font-size:0.7188rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftRow .ftBar{grid-column:1/-1}
.ftRow:not(.ftCustom):hover{background:var(--surface2)}
.ftRow.sel{background:var(--accent-weak)}
.ftCustom{grid-template-columns:1fr auto}
.ftCustom input{padding:5px 6px;font:600 0.6875rem/1 var(--font-num)}
.ftGoMini{width:24px;height:24px;border:0;border-radius:50%;display:grid;place-items:center;color:#06110f;background:linear-gradient(115deg,#5eead4,#818cf8)}
.ftSwRow{border-top:1px solid var(--line);border-radius:0;padding-top:9px}
.ftLaps{list-style:none;margin:0;padding:0;max-height:140px;overflow:auto;font:600 0.6562rem/1 var(--font-num)}
.ftLaps li{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid var(--line);color:var(--text2)}
.ftLaps li.cur{color:var(--text)}
.ftLaps b{font-variant-numeric:tabular-nums}

.ftPrefs{display:grid;gap:9px;margin-top:8px;padding:8px;border-radius:10px;background:var(--surface1);border:1px solid var(--line)}
.ftPrefRow{display:grid;gap:6px}
.ftPrefRow > span{font:700 0.5938rem/1 var(--font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.ftChips{display:flex;flex-wrap:wrap;gap:4px}
.ftChip{border:1px solid var(--line-strong);border-radius:var(--r-pill);background:none;color:var(--text2);font:600 0.625rem/1 var(--font-num);padding:4px 7px}
.ftChip.on{border-color:transparent;color:var(--text);background:linear-gradient(115deg,rgba(45,212,191,.3),rgba(129,140,248,.3))}
.ftVol{width:100%;accent-color:var(--accent)}
.ftToggles{display:grid;gap:7px}
.ftTog{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--text2);font:500 0.6562rem/1.2 var(--font-ui);padding:0;text-align:left}
.ftTog i{flex:0 0 auto;width:28px;height:16px;border-radius:9px;background:var(--surface3);position:relative;transition:background .2s ease}
.ftTog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text3);transition:transform .2s ease,background .2s ease}
.ftTog.on{color:var(--text)}
.ftTog.on i{background:var(--accent-soft)}
.ftTog.on i::after{transform:translateX(12px);background:var(--accent)}
:root{--ftW:11.25rem}
/* Touch (iPad/phone): wider panel, finger-sized targets */
@media (pointer:coarse){
  :root{--ftW:15.75rem}
  .ftPop{padding-left:12px;padding-right:12px}
  .ftIcon{width:36px;height:36px}.ftIcon .ic{width:17px;height:17px}
  .ftStage{width:170px;height:170px;margin:10px auto}.ftBig{font-size:2.25rem}.ftSub{font-size:0.625rem}
  .ftCtrls{gap:6px}.ftB{min-height:44px;min-width:44px;font-size:0.875rem;padding:0 12px}.ftIc{width:15px;height:15px}
  .ftFocusLbl,.ftFaceInput{max-width:128px;width:auto;font-size:0.8125rem}.ftFaceInput{width:128px;min-height:30px}.ftOT{height:32px;font-size:0.6875rem!important}
  .ftPresets{gap:6px}.ftPreset{min-height:44px;font-size:0.9375rem}
  .ftRow{min-height:44px;padding:8px 10px}.ftRow b{font-size:0.875rem}.ftRow small{font-size:0.75rem}
  .ftChip{padding:9px 12px;font-size:0.8125rem}.ftTog{font-size:0.875rem}.ftPrefRow > span{font-size:0.6875rem}
  .ftToday{font-size:0.75rem}
}
@media (prefers-reduced-motion:reduce){.ftPop,.ftBtn.ft-over,.ftBtn.ftPaused .ftChipTime,.ftFocusLbl,.ftFaceInput{display:block;margin:6px auto 0;max-width:94px;border:0;border-radius:6px;background:none;color:var(--text);font:600 0.6562rem/1.25 var(--font-ui);text-align:center;padding:2px 4px}
.ftFocusLbl{cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ftFocusLbl:hover{background:var(--surface2)}
.ftFocusLbl.empty{color:var(--text3);font-weight:500}
.ftFocusLbl.auto{color:var(--text2)}
.ftFaceInput{width:94px;background:var(--surface1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);outline:none}
.ftOT{display:block;margin:0 auto 6px;height:22px;padding:0 9px!important;font:700 0.5938rem/1 var(--font-num)!important;letter-spacing:.06em;cursor:pointer}
.ftStage.ftPaused .ftBig{animation:none}}

/* ONE THING: background slowly drifts in hue (±, never far from teal/indigo/rose) + flows */
@property --otH{syntax:'<angle>';inherits:false;initial-value:0deg}
.oneThingPanel .oneThingRow,.oneThingPanel .oneThingRow:hover{
  background:linear-gradient(115deg,hsl(calc(172deg + var(--otH)) 66% 50% / .32),hsl(calc(234deg + var(--otH)) 84% 72% / .32) 50%,hsl(calc(351deg + var(--otH)) 92% 71% / .30));
  background-size:220% 220%}
.oneThingPanel .oneThingRow,html.otNo-focus .oneThingRow.fx{animation:oneThingFlow 12s ease-in-out infinite,otHue 16s ease-in-out infinite alternate}
.oneThingRow.fx{animation:oneThingFlow 12s ease-in-out infinite,otHue 16s ease-in-out infinite alternate,oneThingZoom 1.6s ease-in-out}
@keyframes otHue{0%{--otH:-28deg}100%{--otH:32deg}}
@media (prefers-reduced-motion:reduce){.oneThingPanel .oneThingRow{animation:none!important}}

/* ── Views: ДАЙДЖЕСТ | FOCUSERA | CRM (CRM = link to local crm_server on :7360) ── */
.tabGroup{display:flex;gap:3px;justify-content:center}
a.tab{text-decoration:none}
/* FOCUSERA MODE: only ONE THING + one calm column, everything else is gone */
html.view-fz .tabPage > *:not(#oneThingCard,#fzModeCard){display:none!important}
html:not(.view-fz) #fzModeCard{display:none!important}
html.view-fz .app{align-content:start}
/* AGENTS: агенты, кроны, синк, данные, ошибки - отдельная вкладка; на DASH этих разделов нет */
html.view-ag .tabPage:is([data-tab-page="digest"],[data-tab-page="focusera"],[data-tab-page="ideas"]){display:none!important}
html:not(.view-ag) .tabPage:is([data-tab-page="status"],[data-tab-page="knowledge"]){display:none!important}
html.view-ag .app{align-content:start}
/* есть что чинить - точка на вкладке AGENTS, пока ты на другой */
#agTab{position:relative}
html:not(.view-ag) body:has(#alertsPanel:not(.hidden)) #agTab::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--bad)}
@media (max-width:480px){.tabGroup{flex:1;gap:2px}}
.paneWhatsNew{border:0;border-radius:var(--r-pill);background:var(--surface2);color:var(--text);font:600 0.6875rem/1 var(--font-num);padding:7px 11px;cursor:pointer}
.paneWhatsNew:hover{background:var(--surface3)}
html.light-mode .tabsWeather .navRain{color:#2563eb;background:rgba(37,99,235,.1)}

/* Nav: one visual system - every item 30px tall, same radius, same surface */
@media(min-width:900px){
  .tabs{--navH:30px}
  .dashboardIdentity{border-radius:var(--r-inner)}
  .dashboardAvatar{width:var(--navH);height:var(--navH);border-radius:var(--r-inner);box-shadow:none}
  .tabsWeather{left:calc(max(12px,env(safe-area-inset-left)) + var(--navH) + 6px);height:var(--navH);padding:0 10px;gap:6px;border-radius:var(--r-inner);background:var(--surface2)}
  .tabsWeather:hover{background:var(--surface3)}
  .tabsWeather .weatherIc{font-size:0.875rem}
  .tabsWeather b{font:700 0.75rem/1 var(--font-num)}
  .tabsWeather .navRain{gap:4px;margin-left:2px;padding:0 0 0 8px;border-radius:0;background:none;border-left:1px solid var(--line-strong);height:14px;color:#93c5fd;font-size:0.8125rem}
  .tabsWeather .navRain small{font:700 0.6875rem/1 var(--font-num)}
  .tabGroup{height:var(--navH);padding:3px;gap:2px;border-radius:var(--r-inner);background:var(--surface2)}
  .tabGroup .tab{height:100%;padding:0 12px;border-radius:7px}
  .tabGroup .tab.active{background:var(--surface3);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .tabGroup .tab:hover:not(.active){background:none;color:var(--text)}
  .navControls{gap:6px}
  .navControls .refresh{width:var(--navH);height:var(--navH);border-radius:var(--r-inner)}
  .ftBtn:not(.ftOn){box-shadow:none}
  .ftBtn.ftOn{height:var(--navH)}
}
html.light-mode .tabsWeather .navRain{background:none;color:#2563eb}
@media(max-width:899px){
  .tabGroup{padding:3px;gap:2px;border-radius:var(--r-inner);background:var(--surface2);align-items:stretch}
  .tabGroup .tab{border-radius:7px}
  .tabGroup .tab.active{background:var(--surface3);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .tabGroup .tab:hover:not(.active){background:none}
  .navControls .refresh{border-radius:var(--r-inner)}
  .ftBtn:not(.ftOn){box-shadow:none}
}

/* Nav edges line up with the cards below (nav already sits inside .app's side padding) */
@media(min-width:900px){
  .tabs{padding-left:0;padding-right:0}
  .dashboardIdentity{left:max(0px,env(safe-area-inset-left))}
  .navControls{right:max(0px,env(safe-area-inset-right))}
  .tabsWeather{left:calc(max(0px,env(safe-area-inset-left)) + var(--navH) + 6px)}
}
/* Icon buttons: one size everywhere - same as the nav (30px, radius 10) */
.headAddBtn,.headToggleBtn,.storytellNav,.paneClose,.otFxTry,.navControls .refresh{width:30px;height:30px;border-radius:var(--r-inner)}
/* TODO: кнопки шапки компактнее */
#taskLenToggleBtn,#voiceTaskBtn,#addTaskBtn,#addStoryBtn,#storyFullBtn,#storytellCard .stPager .storytellNav{width:24px;height:24px;border-radius:var(--r-sm);font-size:0.8125rem}
#taskLenToggleBtn svg,#voiceTaskBtn svg,#storytellCard .stPager .storytellNav svg{width:13px;height:13px}

/* ONE THING backgrounds (settings → ONE THING · фон); default = «перелив» above */
@keyframes otHueFull{to{--otH:360deg}}
@keyframes otSpin{to{transform:rotate(1turn)}}
@keyframes otLava{0%{background-position:0% 30%,100% 70%,50% 100%}33%{background-position:40% 0%,60% 100%,10% 40%}66%{background-position:90% 60%,10% 20%,70% 0%}100%{background-position:0% 30%,100% 70%,50% 100%}}
@keyframes otTwinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes otStarDrift{to{background-position:240px 0,-180px 0,120px 0}}
html[class*="otbg-"] .oneThingPanel .oneThingRow .otAurora{animation:none}
/* Сияние: full hue wheel, vivid aurora blobs */
html.otbg-aurora .oneThingPanel .oneThingRow,html.otbg-aurora .oneThingPanel .oneThingRow:hover{background:linear-gradient(115deg,hsl(calc(160deg + var(--otH)) 80% 45% / .38),hsl(calc(260deg + var(--otH)) 85% 60% / .36) 55%,hsl(calc(320deg + var(--otH)) 90% 62% / .34));background-size:220% 220%}
html.otbg-aurora .oneThingPanel .oneThingRow,html.otbg-aurora .oneThingRow.fx{animation:oneThingFlow 10s ease-in-out infinite,otHueFull 40s linear infinite}
html.otbg-aurora .oneThingRow .otAurora{animation:otAurora 9s ease-in-out infinite alternate!important;filter:blur(14px) saturate(1.6)}
/* Радуга: hue wheel spins quickly */
html.otbg-rainbow .oneThingPanel .oneThingRow,html.otbg-rainbow .oneThingPanel .oneThingRow:hover{background:linear-gradient(100deg,hsl(var(--otH) 80% 55% / .42),hsl(calc(var(--otH) + 60deg) 80% 55% / .42),hsl(calc(var(--otH) + 120deg) 80% 55% / .42),hsl(calc(var(--otH) + 180deg) 80% 55% / .42),hsl(calc(var(--otH) + 240deg) 80% 55% / .42),hsl(calc(var(--otH) + 300deg) 80% 55% / .42));background-size:150% 100%}
html.otbg-rainbow .oneThingPanel .oneThingRow,html.otbg-rainbow .oneThingRow.fx{animation:oneThingFlow 6s ease-in-out infinite,otHueFull 9s linear infinite}
html.otbg-rainbow .oneThingRow .otAurora{opacity:.5}
/* Вихрь: slow rotating conic swirl behind the text */
html.otbg-vortex .oneThingPanel .oneThingRow,html.otbg-vortex .oneThingPanel .oneThingRow:hover{background:color-mix(in srgb,#312e81 45%,var(--bg))}
html.otbg-vortex .oneThingRow .otAurora{inset:auto;left:50%;top:50%;width:160%;aspect-ratio:1;margin:-80% 0 0 -80%;filter:blur(22px);opacity:.42;background:conic-gradient(from 0deg,#2dd4bf,#818cf8,#f472b6,#fb923c,#2dd4bf);animation:otSpin 14s linear infinite!important}
/* Лава: warm blobs wander around like a lava lamp */
html.otbg-lava .oneThingPanel .oneThingRow,html.otbg-lava .oneThingPanel .oneThingRow:hover{background:radial-gradient(40% 90% at 50% 50%,rgba(251,146,60,.55),transparent 70%),radial-gradient(35% 80% at 50% 50%,rgba(244,63,94,.5),transparent 70%),radial-gradient(45% 100% at 50% 50%,rgba(168,85,247,.45),transparent 70%),color-mix(in srgb,#7c2d12 30%,var(--surface1));background-size:70% 220%,60% 200%,80% 240%,100% 100%;background-repeat:no-repeat}
html.otbg-lava .oneThingPanel .oneThingRow,html.otbg-lava .oneThingRow.fx{animation:otLava 16s ease-in-out infinite}
html.otbg-lava .oneThingRow .otAurora{display:none}
/* Закат: slow warm flow */
html.otbg-sunset .oneThingPanel .oneThingRow,html.otbg-sunset .oneThingPanel .oneThingRow:hover{background:linear-gradient(115deg,hsl(calc(28deg + var(--otH)/3) 95% 58% / .42),hsl(calc(345deg + var(--otH)/3) 85% 60% / .40) 50%,hsl(calc(270deg + var(--otH)/3) 70% 55% / .40));background-size:220% 220%}
html.otbg-sunset .oneThingRow .otAurora{opacity:.35}
/* Звёзды: deep night sky, twinkling drifting stars */
html.otbg-stars .oneThingPanel .oneThingRow,html.otbg-stars .oneThingPanel .oneThingRow:hover{background:radial-gradient(120% 140% at 50% 120%,rgba(99,102,241,.45),transparent 60%),linear-gradient(180deg,#0b1026,#151a3d);background-size:100% 100%}
html.otbg-stars .oneThingPanel .oneThingRow,html.otbg-stars .oneThingRow.fx{animation:none}
html.otbg-stars .oneThingRow .otAurora{inset:0;filter:none;background:radial-gradient(circle at 20px 30px,#fff 0 1.4px,transparent 2.2px),radial-gradient(circle at 90px 70px,#c7d2fe 0 1px,transparent 1.8px),radial-gradient(circle at 60px 15px,#fde68a 0 1.2px,transparent 2px);background-size:240px 100px,180px 90px,120px 110px;animation:otStarDrift 60s linear infinite,otTwinkle 3s ease-in-out infinite!important}
html.otbg-stars .oneThingPanel .oneThingText{color:#eef2ff}
@media (prefers-reduced-motion:reduce){html[class*="otbg-"] .oneThingRow .otAurora{animation:none!important}}
.otBgChip:not(.on){text-decoration:none}

/* ── FOCUS TIMER v2: same language as the nav/cards - sections, 30px controls, flat accent, thin ring ── */
.ftPop{padding-left:10px;padding-right:10px;background:var(--bg);display:flex;flex-direction:column;gap:12px}
.ftHead{gap:4px;min-height:30px}
.ftHead > b{font-size:0.5938rem;letter-spacing:.16em;color:var(--text3)}
.ftIcon{width:30px;height:30px;border-radius:var(--r-inner);color:var(--text3);font-size:1.0625rem}
.ftIcon:hover,.ftIcon.on{background:var(--surface2);color:var(--text)}
.ftIcon .ic{width:14px;height:14px}
.ftHero{display:grid;gap:10px;padding:12px 10px 10px;border-radius:var(--r-card);background:var(--card)}
.ftStage{margin:0 auto;width:136px;height:136px}
.ftStage .ftBigRing{filter:none}
.ftStage .ftTrack{stroke-width:4;stroke:color-mix(in srgb,var(--text) 9%,transparent)}
.ftStage .ftArc{stroke-width:5}
.ftSub{margin:0 0 6px;font:700 0.5rem/1 var(--font-num);letter-spacing:.16em}
.ftBig{font-size:1.875rem;font-weight:700;letter-spacing:-.01em}
.ftFocusLbl,.ftFaceInput{margin-top:7px;max-width:104px;font-size:0.6562rem}
.ftFaceInput{width:104px}
.ftOT{margin:-4px auto 0}
.ftRunBar{margin:0 2px}
.ftCtrls{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.ftB{height:30px;min-width:30px;padding:0 9px;border-radius:var(--r-inner);background:var(--surface2);color:var(--text2);font:700 0.7188rem/1 var(--font-num)}
.ftB.ftPrimary{order:0;flex:1 1 64px;color:#06110f;background:var(--ft1);box-shadow:none}
.ftB.ftPrimary:hover{background:color-mix(in srgb,var(--ft1) 85%,#fff);color:#06110f}
.ftBody{display:grid;gap:14px;margin:0}
.ftSec{gap:6px}
.ftSecT{margin:0 2px;font-size:0.5312rem;letter-spacing:.16em}
.ftPresets{gap:4px}
.ftPreset{height:28px;padding:0;border:0;border-radius:8px;background:var(--surface2);color:var(--text2);font-size:0.7188rem}
.ftPreset:hover{background:var(--surface3);color:var(--text);border:0}
.ftPreset.sel{background:color-mix(in srgb,var(--accent) 22%,var(--surface2));color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.ftRow{min-height:32px;padding:0 9px;border-radius:var(--r-inner);background:var(--card)}
.ftRow:not(.ftCustom):hover{background:var(--card-hover)}
.ftRow.sel{background:color-mix(in srgb,var(--accent) 16%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.ftRow b{font-size:0.7188rem}
.ftRow small{font-size:0.5938rem}
.ftToday{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:10px 2px 0;border-top:1px solid var(--line);font:700 0.5312rem/1 var(--font-num);letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.ftToday b{font-size:0.6875rem;letter-spacing:.02em;color:var(--text2);text-transform:none}
.ftPrefs{margin:0;padding:10px;border:0;border-radius:var(--r-card);background:var(--card)}
.ftChip{height:26px;padding:0 9px;border:0;border-radius:8px;background:var(--surface2);color:var(--text2)}
.ftChip.on{background:color-mix(in srgb,var(--accent) 22%,var(--surface2));color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
@media (pointer:coarse){
  .ftStage{width:180px;height:180px}.ftBig{font-size:2.5rem}
  .ftB{height:44px;min-width:44px}.ftPreset{height:42px}.ftRow{min-height:44px}.ftIcon{width:36px;height:36px}
  .ftFocusLbl,.ftFaceInput{max-width:140px;font-size:0.8125rem}.ftFaceInput{width:140px}
}
/* Zoom-inspired: live digits take the state colour, a quiet "дальше" queue row, sound as a footer row */
.ftHead > b{margin-right:auto}
.ftPop.ftLive .ftBig{color:var(--ft1)}
.ftPop.ftLive .ftStage.ftPaused .ftBig{color:var(--text3)}
.ftNext{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 4px 0 10px;border-radius:var(--r-inner);background:var(--card)}
.ftNext > i{width:7px;height:7px;border-radius:50%;background:#5eead4;flex:none}
.ftNext.ft-break > i{background:#c4b5fd}
.ftNext b{font-size:0.7188rem}
.ftNext span{font:700 0.75rem/1 var(--font-num);color:var(--text2);font-variant-numeric:tabular-nums}
.ftNext small{margin-left:auto;font:600 0.5938rem/1 var(--font-num);color:var(--text3)}
.ftNextGo{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--text2);cursor:pointer}
.ftNext small + .ftNextGo{margin-left:0}
.ftNextGo:hover{background:var(--surface2);color:var(--ft1,var(--accent))}
.ftNextGo .ftIc{width:12px;height:12px}
.ftSndRow{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:30px;margin-top:auto;padding:0 2px;border:0;background:none;color:var(--text3);font-family:inherit;font-size:0.6875rem;font-weight:600;line-height:1;cursor:pointer}
.ftSndRow span{color:var(--accent)}
.ftSndRow b{font-size:0.6875rem;color:var(--text2)}
.ftSndRow em{font-style:normal;color:var(--text3)}
.ftSndRow:hover b{color:var(--text)}
.ftSndRow + .ftPrefs{margin-top:-8px}
.ftSndRow ~ .ftToday{margin-top:0}
@media (pointer:coarse){.ftNext{min-height:44px}.ftNextGo{width:36px;height:36px}.ftSndRow{min-height:44px;font-size:0.8125rem}.ftSndRow b{font-size:0.8125rem}}
.ftBody{display:flex;flex-direction:column;flex:1 1 auto}
.ftCtrls{flex-wrap:nowrap}
.ftCtrls .ftB{flex:none}
.ftCtrls .ftB.ftPrimary{flex:1 1 auto;min-width:0}
.ftPop.ftLive .ftCtrls:has(.ftB:nth-child(4)) .ftPrimary span{display:none}
.ftNext{min-width:0}
.ftNext b,.ftNext span{white-space:nowrap}
.ftSndRow + .ftPrefs .ftPrefRow:first-child > span{display:none}
.ftTest{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;margin-top:8px;border:0;border-radius:var(--r-inner);background:var(--surface2);color:var(--text);font-family:inherit;font-size:0.7188rem;font-weight:600;line-height:1;cursor:pointer}
.ftTest:hover{background:var(--surface3)}
.ftTest .ftIc{width:11px;height:11px;color:var(--accent)}
.ftTestMsg{margin-top:6px;font-size:0.6562rem;line-height:1.35;color:var(--text3)}
@media (pointer:coarse){.ftTest{height:44px;font-size:0.8125rem}}
.ftSndRow{cursor:default}
.ftSndRow .ftTog{color:var(--text2);font-size:0.6875rem;font-weight:600}
.ftSndPick{display:flex;align-items:center;gap:4px;height:30px;padding:0 6px;border:0;border-radius:8px;background:none;color:var(--text2);font-family:inherit;font-size:0.6875rem;font-weight:700;cursor:pointer}
.ftSndPick:hover{background:var(--surface2);color:var(--text)}
.ftSndPick em{font-style:normal;color:var(--text3)}

/* ── FOCUS TIMER v3: palette (--ftA/--ftB), one nav indicator, tick dial sidebar ── */
:root{--ftA:#ff8a4c;--ftB:#ff5e8a}
.ftBtn,.ft-idle,:where(.tabs.ftRunNav),.ftPop,.ftPop[data-tone="focus"],.ftPop[data-tone="idle"]{--ft1:var(--ftA);--ft2:var(--ftB)}
.ftPop{--accent:var(--ftA);--accent-soft:color-mix(in srgb,var(--ftA) 28%,transparent)}
/* nav: a single pill - state dot + time, the pill itself fills with progress; no extra line under the nav */
.tabs.ftRunNav:after{content:none}
.ftBtn .ftDot{display:none}
.ftBtn.ftOn{min-width:0;gap:7px;padding:0 11px 0 10px;border-radius:var(--r-inner);overflow:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ft1) 30%,var(--surface2)) calc(var(--ftP,0) * 100%),var(--surface2) 0);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ft1) 55%,transparent)}
.ftBtn.ftOn .ftDot{display:block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--ft1);box-shadow:0 0 0 3px color-mix(in srgb,var(--ft1) 25%,transparent);animation:ftDotPulse 2s ease-in-out infinite}
.ftBtn.ftOn.ftPaused .ftDot{animation:none;opacity:.45;box-shadow:none}
.ftBtn.ftOn .ftChipTime{font:700 0.8125rem/1 var(--font-num);letter-spacing:.01em;color:var(--text)}
.ftBtn.ftOn.ftPaused .ftChipTime{color:var(--text2)}
@keyframes ftDotPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ft1) 0%,transparent)}}
/* sidebar hero: tinted glow card + tick dial */
.ftHero{position:relative;overflow:hidden;padding:14px 8px 10px;isolation:isolate;
  background:radial-gradient(120% 70% at 50% 30%,color-mix(in srgb,var(--ft1) 16%,transparent),transparent 70%),var(--card)}
.ftHero::before{content:"";position:absolute;z-index:-1;left:50%;top:84px;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--ft1) 30%,transparent),transparent 68%);filter:blur(10px);opacity:.55}
.ftPop.ftLive .ftHero::before{animation:ftBreath 5s ease-in-out infinite}
.ftPop.ftLive:has(.ftStage.ftPaused) .ftHero::before{animation:none;opacity:.2}
@keyframes ftBreath{50%{transform:scale(1.18);opacity:.9}}
.ftStage{width:144px;height:144px;margin:0 auto}
.ftDial{position:absolute;inset:0;width:100%;height:100%;filter:none}
.ftTicks line{stroke:color-mix(in srgb,var(--text) 13%,transparent);stroke-width:1.6;stroke-linecap:round;transition:stroke .4s ease}
.ftTicks line.mj{stroke-width:2.2}
.ftTicks line.on{stroke:color-mix(in srgb,var(--ft1) 72%,transparent)}
.ftTicks line.hd{stroke:var(--ft2);stroke-width:3;filter:drop-shadow(0 0 3px var(--ft2))}
.ftStage.ftPaused .ftTicks line.on{stroke:color-mix(in srgb,var(--ft1) 35%,transparent)}
.ftBig{font-size:2.0625rem;letter-spacing:-.02em}
.ftSub{color:var(--ft1);margin-bottom:7px}
.ftPop.ftLive .ftBig{color:var(--text);text-shadow:0 0 18px color-mix(in srgb,var(--ft1) 55%,transparent)}
.ftFocusLbl,.ftFaceInput{max-width:108px}
.ftB.ftPrimary{color:#160b06;background:linear-gradient(135deg,var(--ft1),var(--ft2))}
.ftB.ftPrimary:hover{background:linear-gradient(135deg,var(--ft1),var(--ft2));filter:brightness(1.08);color:#160b06}
.ftBar i{background:color-mix(in srgb,var(--ftA) 55%,transparent)}
.ftNext > i{background:var(--ftA)}
.ftSw{width:19px;height:19px;flex:none;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 0 2px var(--card),0 0 0 3px transparent;cursor:pointer}
.ftSw.on{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--a)}
.ftChips:has(.ftSw){gap:7px;padding:3px;flex-wrap:nowrap}
@media (pointer:coarse){.ftStage{width:204px;height:204px}.ftBig{font-size:2.75rem}.ftHero::before{top:110px;width:160px;height:160px;margin:-80px 0 0 -80px}.ftSw{width:30px;height:30px}.ftBtn.ftOn{height:var(--navH)}}
@media (prefers-reduced-motion:reduce){.ftPop.ftLive .ftHero::before,.ftBtn.ftOn .ftDot{animation:none}}
/* day stats: fills the free space of the sidebar */
.ftStats{display:grid;gap:10px;margin-top:auto;padding:12px 10px 10px;border-radius:var(--r-card);background:var(--card)}
.ftStatsTop{display:flex;align-items:baseline;gap:7px}
.ftStatsTop span{font:700 0.5312rem/1 var(--font-num);letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.ftStatsTop b{margin-left:auto;font:700 1.0625rem/1 var(--font-num);color:var(--text)}
.ftStatsTop small{display:block;flex-basis:100%;order:3;margin-top:-4px;text-align:right;font:600 0.5938rem/1 var(--font-num);color:var(--text3)}
.ftStatsTop{flex-wrap:wrap}
.ftWeek{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;height:58px}
.ftWd{display:grid;grid-template-rows:1fr auto;gap:4px;justify-items:center}
.ftWd i{align-self:end;width:100%;max-width:14px;border-radius:3px;background:color-mix(in srgb,var(--text) 16%,transparent);min-height:2px}
.ftWd.td i{background:linear-gradient(180deg,var(--ftB),var(--ftA));box-shadow:0 0 10px -2px color-mix(in srgb,var(--ftA) 60%,transparent)}
.ftWd span{font:700 0.4688rem/1 var(--font-num);color:var(--text3);text-transform:uppercase}
.ftWd.td span{color:var(--ftA)}
.ftSessions{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:6px}
.ftSessions li{display:flex;align-items:baseline;gap:6px;font-size:0.6562rem;min-width:0}
.ftSessions time{font:600 0.5938rem/1 var(--font-num);color:var(--text3);flex:none}
.ftSessions span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.ftSessions b{font:700 0.625rem/1 var(--font-num);color:var(--text);flex:none}
.ftStats + .ftSndRow{margin-top:0}
@media (pointer:coarse){.ftWeek{height:80px}.ftSessions li{font-size:0.8125rem}}
/* v3.1: centred pause, tighter/smaller digits, phase label above the dial, bigger focus phrase */
.ftCtrls:has(.ftCtrlL){display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px}
.ftCtrlL,.ftCtrlR{display:flex;gap:4px;min-width:0}
.ftCtrlR{justify-content:flex-end}
.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{flex:none;width:46px;padding:0}
.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary span{display:none}
.ftCtrlL .ftB{padding:0 7px;font-size:0.6875rem;letter-spacing:-.01em}
.ftHero > .ftSub{margin:0 0 2px;text-align:center}
.ftBig{font-size:1.75rem;letter-spacing:-.06em;font-weight:700}
.ftFocusLbl,.ftFaceInput{margin-top:6px;max-width:112px;font-size:0.8125rem;line-height:1.2;font-weight:700}
.ftFaceInput{width:112px}
@media (pointer:coarse){.ftBig{font-size:2.375rem}.ftFocusLbl,.ftFaceInput{max-width:150px;font-size:1rem}.ftFaceInput{width:150px}.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:64px}}
.ftCtrls:has(.ftCtrlL){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:40px}
.ftCtrlL .ftB{padding:0 5px;font-size:0.6562rem}
.ftCtrlR .ftB{min-width:28px;width:28px;padding:0}
@media (pointer:coarse){.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:60px}.ftCtrlR .ftB{width:44px;min-width:44px}.ftCtrlL .ftB{font-size:0.8125rem;padding:0 8px}}

/* ── FOCUS TIMER: светофор фокуса (зелёный → жёлто-оранжевый 25% → красный 10%) + варианты фокуса ── */
.ftBtn.ft-focus,.ftPop[data-tone="focus"]{--ftA:#22c55e;--ftB:#4ade80;--ft1:var(--ftA);--ft2:var(--ftB)}
.ftBtn.ft-low,.ftPop[data-tone="low"]{--ftA:#f59e0b;--ftB:#fb923c;--ft1:var(--ftA);--ft2:var(--ftB)}
.ftBtn.ft-end,.ftPop[data-tone="end"]{--ftA:#ef4444;--ftB:#f87171;--ft1:var(--ftA);--ft2:var(--ftB)}
.ftPop[data-tone="focus"],.ftPop[data-tone="low"],.ftPop[data-tone="end"]{--accent:var(--ftA);--accent-soft:color-mix(in srgb,var(--ftA) 28%,transparent)}
.ftSugs{display:grid;gap:3px;margin:-2px auto 0;width:100%;max-width:220px}
.ftSug{display:flex;align-items:center;gap:7px;min-width:0;height:26px;padding:0 9px;border:0;border-radius:8px;background:var(--surface1);color:var(--text2);font:500 0.7188rem/1 var(--font-ui);text-align:left;cursor:pointer}
.ftSug:hover{background:var(--surface2);color:var(--text)}
.ftSug span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftSug i{flex:0 0 auto;font-style:normal;font-size:0.6875rem}
.ftSug i.pr{width:7px;height:7px;border-radius:50%;background:var(--text3)}
.ftSug i.pr.p1{background:#ef4444}.ftSug i.pr.p2{background:#f59e0b}.ftSug i.pr.p3{background:#3b82f6}
.ftSug.one{color:var(--text);font-weight:700;background:color-mix(in srgb,var(--accent) 16%,var(--surface1))}
@media (pointer:coarse){.ftSug{height:36px;font-size:0.8438rem}}
.ftIcon.ftClose .ftIc{width:17px;height:17px}

/* ── FOCUS TIMER: индикатор вместо меню (≥30% ширины), клик → сайдбар, индикатор прячется на 15 с ── */
.tabs.ftTake .tabGroup{display:none}
.ftNavBar{--ft1:var(--ftA);--ft2:var(--ftB);display:flex;align-items:center;gap:9px;width:max(30vw,260px);max-width:100%;min-width:0;height:var(--navH,34px);padding:0 14px 0 12px;border:0;border-radius:var(--r-inner);cursor:pointer;color:var(--text);font-family:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ft1) 30%,var(--surface2)) calc(var(--ftP,0) * 100%),var(--surface2) 0);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ft1) 55%,transparent);transition:background .3s ease,box-shadow .3s ease}
.ftNavBar[hidden]{display:none}
.ftNavBar:hover{box-shadow:inset 0 0 0 1px var(--ft1)}
.ftNavBar.ft-focus{--ft1:#22c55e;--ft2:#4ade80}
.ftNavBar.ft-low{--ft1:#f59e0b;--ft2:#fb923c}
.ftNavBar.ft-end,.ftNavBar.ft-over{--ft1:#ef4444;--ft2:#f87171}
.ftNavBar.ft-break{--ft1:#c4b5fd;--ft2:#f9a8d4}
.ftNavBar.ft-sw{--ft1:#fbbf24;--ft2:#fb923c}
.ftNavBar .ftDot{display:block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--ft1);box-shadow:0 0 0 3px color-mix(in srgb,var(--ft1) 25%,transparent);animation:ftDotPulse 2s ease-in-out infinite}
.ftNavBar.ftPaused .ftDot{animation:none;opacity:.45;box-shadow:none}
.ftNbSub{flex:none;font:700 0.5938rem/1 var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--ft1)}
.ftNbLbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font:600 0.7812rem/1 var(--font-ui);color:var(--text2)}
.ftNbTime{flex:none;margin-left:auto;font:800 0.9375rem/1 var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ftNavBar.ftPaused .ftNbTime{color:var(--text2);animation:ftBlink 1.4s steps(2,jump-none) infinite}
.ftNavBar.ft-over{animation:ftNudge 1.6s ease-in-out infinite}
@media (max-width:899px){.ftNavBar{flex:1;width:auto}}
@media (max-width:480px){.ftNbSub{display:none}}
@media (prefers-reduced-motion:reduce){.ftNavBar .ftDot,.ftNavBar.ftPaused .ftNbTime,.ftNavBar.ft-over{animation:none}}

/* ── FOCUS TIMER: очередь — [+] добавить таймер, × убрать ── */
.ftQHead{display:flex;align-items:center;justify-content:space-between}
.ftQAdd{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:7px;background:var(--surface2);color:var(--text2);font:600 0.9375rem/1 var(--font-ui);letter-spacing:0;cursor:pointer}
.ftQAdd:hover,.ftQAdd.on{background:color-mix(in srgb,var(--ftA) 22%,var(--surface2));color:var(--text)}

.ftQPick{display:grid;gap:5px;padding:8px;border-radius:var(--r-inner);background:var(--card)}
.ftQLine{display:flex;flex-wrap:wrap;gap:3px}
.ftQLine b{flex-basis:100%;display:flex;align-items:center;gap:6px;margin:0 0 2px 2px;font-size:0.6562rem;color:var(--text2)}
.ftQLine b i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ftA)}
.ftQLine.ft-break b i{background:#c4b5fd}
.ftQLine .ftPreset{flex:1 1 0;min-width:24px;height:26px;padding:0;font-size:0.6875rem}
.ftQPick,.ftNext,.ftQHead{min-width:0}
.ftNext:has(.ftQDel){gap:5px;padding-left:9px}
.ftNext:has(.ftQDel) .ftNextGo{width:22px;height:22px;flex:none}
.ftNext .ftNextGo + .ftQDel{margin-left:0}
.ftQDel{color:var(--text3)}.ftQDel .ftIc{width:10px;height:10px}
@media (pointer:coarse){.ftQAdd{width:34px;height:34px;font-size:1.1875rem}.ftQLine .ftPreset{height:36px;font-size:0.8125rem}}

/* ── FOCUS TIMER: шапка внутри карточки таймера, циферблат шире, всё выше ── */
.ftPop{padding-top:6px}
.ftHero{padding:6px 3px 10px}
.ftHero > .ftHead{min-height:24px;margin:0 0 -6px;padding-left:6px}
.ftHero > .ftHead .ftIcon{width:24px;height:24px}
.ftHero > .ftHead > b{font-size:0.5312rem}
.ftStage{width:156px;height:156px}
.ftHero::before{top:100px}
.ftCtrls{margin:0 5px}
@media (pointer:coarse){.ftStage{width:220px;height:220px}.ftHero::before{top:130px}.ftHero > .ftHead .ftIcon{width:34px;height:34px}}

/* ── FOCUS TIMER: очередь — время → фраза, клик редактирует, перетаскивание ── */
.ftQList{display:grid;gap:4px}
.ftQRow{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s ease}
.ftQRow.drag{position:relative;z-index:2;cursor:grabbing;transition:none;box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 0 0 1px color-mix(in srgb,var(--ftA) 50%,transparent)}
.ftQList.dragging .ftQRow:not(.drag) button{pointer-events:none}
.ftQTime,.ftQLbl{border:0;background:none;padding:3px 4px;margin:0 -2px;border-radius:6px;color:inherit;cursor:pointer;font-family:inherit}
.ftQTime{flex:none;font:700 0.75rem/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--text)}
.ftQLbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:0.6875rem;font-weight:600;color:var(--text2)}
.ftQLbl.empty{color:var(--text3);font-weight:500;font-style:italic}
.ftQTime:hover,.ftQLbl:hover{background:var(--surface2);color:var(--text)}
.ftQIn{min-width:0;height:22px;border:0;border-radius:6px;padding:0 5px;background:var(--surface1);color:var(--text);font:600 0.6875rem/1 var(--font-ui);outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ftA) 60%,transparent)}
.ftQMinIn{flex:none;width:40px;font-family:var(--font-num);font-weight:700}
.ftQLblIn{flex:1}
.ftQRow .ftQTime + .ftQLbl,.ftQRow .ftQTime + .ftQLblIn{margin-left:0}
@media (pointer:coarse){.ftQTime{font-size:0.875rem}.ftQLbl,.ftQIn{font-size:0.8125rem}.ftQIn{height:32px}}
.ftQQuick{display:flex;gap:3px}
.ftQQuick .ftPreset{flex:1 1 0;min-width:0;height:26px;padding:0;font-size:0.6875rem}
@media (pointer:coarse){.ftQQuick .ftPreset{height:36px;font-size:0.8125rem}}
.ftQPlus{font-size:0.875rem!important;font-weight:600}
.ftQCustomIn{flex:1 1 0;min-width:0;height:26px;border:0;border-radius:8px;padding:0 2px;text-align:center;background:var(--surface1);color:var(--text);font:700 0.6875rem/1 var(--font-num);outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ftA) 60%,transparent);-moz-appearance:textfield}
.ftQCustomIn::-webkit-inner-spin-button,.ftQCustomIn::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ftQCustomIn::placeholder{color:var(--text3);font-size:0.5625rem}
@media (pointer:coarse){.ftQCustomIn{height:36px;font-size:0.8125rem}}
/* пауза шире — как кнопка, «+N» компактно слева */
.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:72px}
.ftCtrlL .ftB{min-width:0;padding:0 7px;font-variant-numeric:tabular-nums}
@media (pointer:coarse){.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:112px}}
/* шапка таймера чуть ниже и не под статус-баром iPad/iPhone */
.ftPop{padding-top:calc(10px + env(safe-area-inset-top))}
.ftHero{padding-top:10px}
/* таймер — акцентный блок: цветная рамка, насыщенная заливка цветом состояния, мягкая тень */
.ftHero{border-radius:var(--r-card);
  background:radial-gradient(130% 80% at 50% 35%,color-mix(in srgb,var(--ft1) 26%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--ft1) 12%,var(--card)),var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ft1) 45%,transparent),0 10px 28px -12px color-mix(in srgb,var(--ft1) 55%,transparent);
  transition:box-shadow .4s ease,background .4s ease}
html.light-mode .ftHero{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ft1) 50%,transparent),0 10px 24px -14px color-mix(in srgb,var(--ft1) 70%,transparent)}
/* iPad: частые тапы (+1, −/+ и т.п.) не должны вызывать double-tap зум страницы */
.ftPop,.ftPop button,.ftBtn,#ftNavBar{touch-action:manipulation}
.ftPop button{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* статистика внизу, свёрнута в полосу expand/collapse */
.ftSndRow ~ .ftStats{margin-top:0}
.ftStatsShut{padding:0;gap:0}
.ftStatsBar{display:flex;align-items:center;gap:7px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:var(--r-card);background:none;color:var(--text3);font-family:inherit;cursor:pointer}
.ftStats:not(.ftStatsShut) .ftStatsBar{min-height:22px;padding:0;margin-bottom:-2px}
.ftStatsBar span{font:700 0.5312rem/1 var(--font-num);letter-spacing:.16em;text-transform:uppercase}
.ftStatsBar b{margin-left:auto;font:700 0.6875rem/1 var(--font-num);color:var(--text2)}
.ftStatsBar em{font-style:normal;font-size:0.6875rem;color:var(--text3)}
.ftStatsShut .ftStatsBar:hover{background:var(--surface2)}
.ftStatsBar:hover b{color:var(--text)}
@media (pointer:coarse){.ftStatsBar{min-height:44px}.ftStatsBar b{font-size:0.8125rem}}
.ftStats:not(.ftStatsShut) .ftStatsBar b{visibility:hidden}
/* циферблат: время прибито к центру, фраза под ним шире и не сдвигает время при 2 строках */
.ftStage .ftFace{position:absolute;inset:0}
.ftStage .ftBig{position:absolute;left:0;right:0;top:calc(50% - 24px);text-align:center}
.ftStage .ftFocusLbl,.ftStage .ftFaceInput{position:absolute;left:50%;top:calc(50% + 10px);margin:0;transform:translateX(-50%);width:max-content;max-width:124px;font-size:0.7812rem}
.ftStage .ftFaceInput{width:124px}
@media (pointer:coarse){.ftStage .ftBig{top:calc(50% - 34px)}.ftStage .ftFocusLbl,.ftStage .ftFaceInput{top:calc(50% + 12px);max-width:176px;font-size:1rem}.ftStage .ftFaceInput{width:176px}}
/* северное сияние сверху — всегда спокойно дышит; есть новая версия → мерцает (сигнал «потяни вниз, чтобы обновить») */
html:not(.hasUpdate) .ptrAurora{opacity:max(.5,calc(var(--ptr-p,0) * .9));animation:ptrGlowIdle 8s ease-in-out infinite}
html.hasUpdate .ptrAurora{opacity:max(.6,calc(var(--ptr-p,0) * .95));animation:ptrShimmer 2.4s linear infinite}
html.ptrPulling .ptrAurora{animation:none}
html.hasUpdate .ptrAurora i{animation-duration:3s,3.6s;filter:blur(22px) saturate(1.15)}
html.hasUpdate .ptrAurora i:nth-child(2){animation-duration:2.6s}
html.hasUpdate .ptrAurora i:nth-child(3){animation-duration:3.4s;opacity:.75}
@keyframes ptrGlowIdle{0%,100%{opacity:.5}50%{opacity:.68}}
@keyframes ptrShimmer{0%{opacity:.45}8%{opacity:.68}14%{opacity:.48}22%{opacity:.74}34%{opacity:.42}46%{opacity:.66}52%{opacity:.5}63%{opacity:.74}75%{opacity:.45}86%{opacity:.68}100%{opacity:.45}}
/* логотип на плашке ONE THING; в меню появляется, когда плашка прокручена (html.logoDocked) */
.oneThingPanel .oneThingRow{padding-left:104px;padding-right:104px}
.otLogo{position:absolute;left:20px;top:50%;width:64px;height:64px;margin-top:-32px;border-radius:18px;object-fit:cover;pointer-events:none;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.28),0 8px 22px -6px rgba(0,0,0,.55),0 0 26px -4px color-mix(in srgb,#fb7185 55%,transparent);
  transform:rotate(-4deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.oneThingRow:hover .otLogo{transform:rotate(0) scale(1.05)}
html.light-mode .otLogo{box-shadow:0 0 0 1.5px rgba(255,255,255,.8),0 8px 20px -8px rgba(15,23,42,.35)}
@media (max-width:760px){.oneThingPanel .oneThingRow{padding-left:74px;padding-right:22px}.otLogo{left:14px;width:46px;height:46px;margin-top:-23px;border-radius:13px}}
/* логотип слева появляется после прокрутки плашки */
html:not(.logoDocked) .dashboardIdentity > a{display:none}
html.logoDocked .dashboardIdentity > a{animation:logoDockIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes logoDockIn{from{opacity:0;transform:translateY(-6px) scale(.85)}}
html:not(.logoDocked) .dashboardIdentity:hover{box-shadow:none}
/* ── ВАЖНОЕ: сайдбар сообщений (каркас .ftPop: fixed справа, фон, анимация) ── */
/* DUDE! — компактный поповер под кнопкой, не сайдбар */
.msgBtn{position:relative;padding:0;overflow:visible}
.msgBtn[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--surface3);color:var(--text);font:700 0.5625rem/0.9375rem var(--font-num);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.msgBtn.hot[data-n]:not([data-n=""])::after{background:#ef4444;color:#fff}
.msgBtn.on{background:var(--surface3)}
.msgBtn.quiet:not(.locked)::after{content:'';position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--text3);box-shadow:0 0 0 2px var(--bg)}
:root{--msgW:var(--ftW)}
.msgPop{width:var(--msgW);gap:8px}
@media (max-width:699px){.msgPop{width:min(92vw,360px)}}
body.msgDocked{padding-right:var(--msgW);transition:padding-right .22s ease}
.msgHead{display:flex;align-items:center;gap:8px;padding:0 0 0 2px}
.msgAva{width:24px;height:24px;border-radius:50%;object-fit:cover}
.msgHead > b{font:800 0.8125rem/1 var(--font-num);letter-spacing:.06em}
.msgPrev{padding:3px 6px;border-radius:var(--r-pill);background:color-mix(in srgb,#f59e0b 16%,transparent);color:#f59e0b;font:700 0.5312rem/1 var(--font-num);letter-spacing:.08em;text-transform:uppercase}
.msgX{margin-left:auto;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--text3);cursor:pointer;display:grid;place-items:center}
.msgX:hover{background:var(--surface2);color:var(--text)}
.msgPop,.msgPop button{touch-action:manipulation}
/* меню без обводок: ни линии под меню, ни рамок у активной вкладки / пилюли таймера */
.tabs{border-bottom:0}
.tabGroup .tab.active,.tab.active{box-shadow:none}
.ftBtn.ftOn,.ftNavBar,.ftNavBar:hover{box-shadow:none}

/* FOCUSERA MODE card */
.panel.fzModeCard{background:none;box-shadow:none;border:0;grid-column:1/-1;justify-self:center;width:100%;max-width:680px;min-height:0;max-height:none;overflow:visible;margin:22px 0 40px;padding:0;display:grid;gap:30px;animation:fzmIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fzmIn{from{opacity:0;transform:translateY(10px)}}
html.view-fz .tabsWeather{opacity:.35}
.fzmNow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fzmEv{flex:1;min-width:220px;display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center}
.fzmEv i{width:8px;height:8px;border-radius:50%;background:var(--text3);grid-row:1/3}
.fzmEv.live i{background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);animation:fzmLive 2s ease-in-out infinite}
@keyframes fzmLive{50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
.fzmEv b{font-size:1.0625rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzmEv span{font:500 0.6875rem/1.2 var(--font-num);color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.fzmGo{border:0;border-radius:var(--r-pill);background:var(--accent);color:#04201c;font:700 0.875rem/1 var(--font-num);padding:14px 22px;cursor:pointer;touch-action:manipulation;transition:transform .15s,filter .15s}
.fzmGo:hover{filter:brightness(1.08);transform:translateY(-1px)}
.fzmLbl{font:600 0.625rem/1 var(--font-num);color:var(--text3);text-transform:uppercase;letter-spacing:.14em;margin:0 0 12px}
.fzmWeek{list-style:none;margin:0;padding:0;counter-reset:w;display:grid;gap:10px}
.fzmWeek li{counter-increment:w;display:grid;grid-template-columns:26px minmax(0,1fr);font-size:1.125rem;line-height:1.35;color:var(--text)}
.fzmWeek li::before{content:counter(w);font:600 0.8125rem/1.9 var(--font-num);color:var(--accent)}
.fzmWeek li.none,.fzmRow.none b{color:var(--text3);font-weight:400}
.fzmWeek li.none::before{content:''}
.fzmKeep{display:grid;gap:2px}
.fzmRow{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.fzmRow:last-child{border-bottom:0}
.fzmRow b{flex:1;min-width:0;font-size:0.9375rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fzmRow span{font:500 0.6875rem/1 var(--font-num);color:var(--text3);white-space:nowrap}
.fzmFoot{margin:-14px 0 0;font-size:0.75rem;color:var(--text3)}
.fzmFoot:empty{display:none}
.fzmFoot button{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.panel.fzModeCard{margin:14px 0 30px;padding:0 6px;gap:24px}.fzmGo{width:100%;padding:16px}.fzmWeek li{font-size:1rem}}
@media (pointer:coarse){.fzmRow b{font-size:1rem}}
html.light-mode .fzmGo{color:#fff}
.panel.fzModeCard{box-sizing:border-box;min-width:0;grid-template-columns:minmax(0,1fr)}
.fzmBlock,.fzmKeep,.fzmNow{min-width:0}
.fzmKeep,.fzmWeek{grid-template-columns:minmax(0,1fr)}

/* типографика FOCUSERA MODE и DUDE! — те же роли, что в дашборде: h2 = заголовок, b = строка (--fs-body), мета = --fs-meta */
.fzModeCard .panelHead{margin-bottom:10px}
.fzmEv b{font-size:var(--fs-body);font-weight:600;line-height:1.3}
.fzmEv span{font:500 var(--fs-meta)/1.3 var(--font-ui);color:var(--text3);text-transform:none;letter-spacing:0}
.fzmGo{font:700 var(--fs-head)/1 var(--font-num);letter-spacing:.06em;text-transform:uppercase;padding:12px 18px}
.fzmWeek{gap:6px}
.fzmWeek li{grid-template-columns:18px minmax(0,1fr);font-size:var(--fs-body);font-weight:500;line-height:1.45;color:var(--text)}
.fzmWeek li::before{font:700 var(--fs-meta)/1.75 var(--font-num)}
.fzmRow{padding:7px 0}
.fzmRow b{font-size:var(--fs-body);font-weight:500;line-height:1.3}
.fzmRow span{font:500 var(--fs-meta)/1.3 var(--font-ui);color:var(--text3)}
.fzmFoot{font-size:var(--fs-meta)}
@media (max-width:760px){.fzmWeek li{font-size:var(--fs-body)}}
@media (pointer:coarse){.fzmRow b{font-size:var(--fs-body)}}
.msgHead h2{font-size:var(--fs-head)}
.msgBody{font-size:var(--fs-body)}
.msgSide time{font-size:var(--fs-meta)}

/* CRM — окно поверх дашборда */
.crmModal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:crmFade .18s ease}
.crmModal[hidden]{display:none}
@keyframes crmFade{from{opacity:0}}
.crmBox{width:min(1280px,100%);height:100%;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--card-solid);border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:crmIn .2s cubic-bezier(.2,.9,.3,1)}
@keyframes crmIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.crmBar{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--line)}
.crmBar h2{flex:none}
.crmState{flex:1}
.crmBtn{min-width:30px;height:30px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--text3);display:inline-grid;place-items:center;font:600 var(--fs-head)/1 var(--font-ui);text-decoration:none;cursor:pointer}
.crmBtn:hover{background:var(--surface2);color:var(--text)}
.crmBtn.wide{margin-top:12px;padding:0 16px;background:var(--surface2);color:var(--text);font-size:var(--fs-body)}
.crmBody{flex:1;min-height:0;display:grid}
.crmBody iframe{width:100%;height:100%;border:0;background:#fff}
.crmMsg{place-self:center;max-width:360px;padding:24px;text-align:center;font-size:var(--fs-body);color:var(--text3)}
.crmMsg b{display:block;margin-bottom:6px;font-size:var(--fs-head);color:var(--text)}
.crmMsg p{margin:0;line-height:1.45}
html.crmOpen{overflow:hidden}
@media (max-width:699px){.crmModal{padding:0}.crmBox{border-radius:0;border:0}}
/* CRM: почти на весь экран (кнопка в шапке / двойной клик по шапке, запоминается) */
.crmModal.full{padding:calc(env(safe-area-inset-top) + 4px) 4px calc(env(safe-area-inset-bottom) + 4px)}
.crmModal.full .crmBox{width:100%;border-radius:12px}
.crmFullIc{width:15px;height:15px}
.crmModal.full .crmFullIc .i-max,.crmModal:not(.full) .crmFullIc .i-min{display:none}
.crmBar{user-select:none}
/* DUDE! v2: секции ГОРИТ/ОТВЕТИТЬ/ЗНАТЬ, одна метка времени, монохромные иконки источника, 3 вида */
.msgPop{display:flex;flex-direction:column}
.msgList{display:flex;flex-direction:column;gap:14px;flex:1 1 auto}
.msgSecBox{--sec:var(--text3);display:flex;flex-direction:column}
.msgSecBox[data-sec="hot"]{--sec:#f87171}.msgSecBox[data-sec="reply"]{--sec:#fbbf24}
.msgSec{display:flex;align-items:baseline;gap:6px;margin:0 0 2px;padding:0 4px 5px;border-bottom:1px solid var(--line);font:700 var(--fs-meta)/1 var(--font-num);letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
.msgSec em{font-style:normal;color:var(--text3)}
.msgSec small{margin-left:auto;font:600 0.5625rem/1 var(--font-num);letter-spacing:.06em;color:var(--text3);opacity:.8}
.msgIc{width:14px;height:14px;display:block;flex:none}
.msgRow{display:grid;grid-template-columns:16px minmax(0,1fr) 22px;gap:8px;align-items:start;padding:8px 4px;border-radius:8px}
.msgRow + .msgRow{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.msgRow:hover{background:color-mix(in srgb,var(--surface2) 55%,transparent)}
.msgSrc{color:var(--text3);padding-top:2px}
.msgMain{min-width:0;display:flex;flex-direction:column;gap:2px}
.msgTop{display:flex;align-items:baseline;gap:4px;min-width:0}
.msgTop b{font:600 var(--fs-body)/1.125rem var(--font-ui);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgRow time{margin-left:auto;font:700 var(--fs-meta)/1.125rem var(--font-num);color:var(--sec);white-space:nowrap;flex:none}
.msgSecBox[data-sec="info"] time{color:var(--text3)}
.msgQ{flex:none;display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:color-mix(in srgb,#fbbf24 18%,transparent);color:#fbbf24;font:800 0.5625rem/1 var(--font-num);font-style:normal;align-self:center}
.msgBody{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 var(--fs-body)/1.0625rem var(--font-ui);color:var(--text3);text-decoration:none;overflow-wrap:anywhere}
a.msgBody:hover{color:var(--text2)}
.msgCheck{width:22px;height:22px;border:0;border-radius:6px;background:none;color:var(--text3);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.msgRow:hover .msgCheck,.msgCheck:focus-visible{opacity:1}
.msgCheck:hover{background:var(--surface2);color:#4ade80}
.msgRow.done{opacity:.45}.msgRow.done .msgBody{text-decoration:line-through}.msgRow.done .msgCheck{opacity:1}
/* компакт: одна строка */
/* фокус: главное дело крупно */
.msgEmpty{padding:22px 8px;text-align:center;color:var(--text3);font:500 var(--fs-body)/1.4 var(--font-ui);display:flex;gap:6px;justify-content:center;align-items:center}
.msgShowDone{align-self:center;height:24px;padding:0 10px;border:0;border-radius:var(--r-pill);background:none;color:var(--text3);font:600 var(--fs-meta)/1 var(--font-ui);cursor:pointer}
.msgShowDone:hover{background:var(--surface2);color:var(--text2)}
/* переключатель вида — прибит к низу панели */
@media (pointer:coarse){.msgCheck{opacity:1;width:32px;height:32px}.msgRow{grid-template-columns:16px minmax(0,1fr) 32px}.msgBody,.msgTop b{font-size:0.875rem;line-height:1.25rem}}
/* Harmony: крупнее, мимика меняется медленным перетеканием */
.oneThingPanel .oneThingRow{padding-left:124px}
.otLogo{left:22px;width:84px;height:84px;margin-top:-42px;border-radius:22px}
.otLogo.otNext{opacity:0;box-shadow:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity 1.6s ease-in-out}
.otLogo.otNext.in{opacity:1}
@media (max-width:760px){.oneThingPanel .oneThingRow{padding-left:84px}.otLogo{left:14px;width:58px;height:58px;margin-top:-29px;border-radius:16px}}
/* Настройки: вкладки Общие / Карточки / ONE THING, строки «название + пояснение · контрол» */
.setTabs{display:flex;gap:2px;padding:3px;margin:0 0 14px;border-radius:12px;background:var(--surface2)}
.setTab{flex:1;height:32px;border:0;border-radius:9px;background:none;color:var(--text3);font:700 0.6562rem/1 var(--font-num);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.setTab:hover{color:var(--text)}
.setTab.on{background:var(--card-solid);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.setPage{min-height:min(420px,60vh)}
.setPage[hidden]{display:none}
.setH{margin:0 4px 6px;font:700 0.625rem/1 var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.paneGlobal.setGroup{display:block;padding:2px 14px;margin-bottom:16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.setGroup > .otFxChips{padding:12px 0}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:8px 0}
.setRow + .setRow{border-top:1px solid var(--line)}
.setLbl{min-width:0;display:flex;flex-direction:column;gap:3px}
.setLbl b{font:600 0.8125rem/1.2 var(--font-ui);color:var(--text)}
.setLbl small{font:400 0.6875rem/1.35 var(--font-ui);color:var(--text3)}
.setCtl{flex:none;display:flex;align-items:center}
/* зависимая настройка: родительский переключатель выключен - строка гаснет и не нажимается */
.setDep.off .setCtl{opacity:.35;pointer-events:none}.setDep.off .setLbl{opacity:.55}
.setRow + .setDep > .setRow,.setDep + .setRow,#dudeKeysRow + .setRow{border-top:1px solid var(--line)}
.setSw{position:relative;width:40px;height:24px;border:0;border-radius:12px;background:var(--surface3);cursor:pointer;transition:background .2s}
.setSw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text3);transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.setSw.on{background:var(--accent)}
.setSw.on i{transform:translateX(16px);background:var(--bg)}
.setLink{border:0;border-radius:var(--r-pill);background:var(--surface2);color:var(--text);font:600 0.6875rem/1 var(--font-num);padding:8px 12px;cursor:pointer}
.setLink:hover{background:var(--surface3)}
.setLink:disabled{opacity:.4;cursor:default}
.setLink.primary{background:var(--accent);color:var(--bg)}
.dudeKeys{font-size:1.125rem;letter-spacing:2px;margin-right:8px}
.dudeKeysLocked{display:inline-flex;align-items:center;gap:6px;color:var(--text3);font-size:var(--fs-meta)}
.dudeKeysEdit{display:flex;flex-direction:column;gap:8px;padding:4px 0 12px}
.dudeKeysChk{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 12px;color:var(--text3)}
.dudeKeysChk .tgiCell{font-size:24px}
.dudeKeysEdit small{color:var(--text3);font-size:var(--fs-meta)}
.dudeKeysPool{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.dudeKeysPool button{aspect-ratio:1;border:0;border-radius:var(--r-inner);background:var(--card);font-size:1.25rem;cursor:pointer}
.dudeKeysPool button.on{box-shadow:inset 0 0 0 2px var(--accent)}
.dudeKeysBtns{display:flex;justify-content:flex-end;gap:6px}
@media (max-width:560px){.setRow{flex-wrap:wrap;gap:8px}.setCtl{max-width:100%;overflow-x:auto}}
/* DUDE!: больше текста сообщения */
.msgBody{-webkit-line-clamp:5;color:var(--text2)}
/* DUDE!: автоскрытие внизу панели */
.msgFoot{position:sticky;bottom:0;margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 4px 2px;background:var(--bg);border-top:1px solid var(--line);font:600 var(--fs-meta)/1.2 var(--font-ui);color:var(--text3)}
.msgFoot .setSw{flex:none;transform:scale(.85);transform-origin:left center}
/* DUDE!: ✓ и «напомнить позже» столбиком; свайп на touch */
.msgActs{display:flex;flex-direction:column;gap:2px}
.msgRow:hover .msgActs .msgCheck{opacity:1}
.msgSnz:hover{color:#fbbf24}
.msgSecBox{overflow:hidden}
.msgRow{position:relative;touch-action:pan-y}
@media (pointer:coarse){.msgRow{grid-template-columns:16px minmax(0,1fr) 32px}}
.ptr.inPanel{left:calc(100% - var(--msgW) / 2);z-index:160}
.msgBody{overflow-wrap:break-word;hyphens:auto}

/* DUDE! mobile: this is a full-screen action queue, never a clipped desktop
   side panel. Keep its controls in normal flow so short queues do not create
   an empty gulf above a faux-sticky footer. */
@media (max-width:699px){
  body.msgDocked{padding-right:0}
  .msgPop{
    width:100vw; box-sizing:border-box; gap:14px;
    padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 20px);
    border-left:0; box-shadow:none;
  }
  .msgHead{padding:0 2px;gap:10px}
  .msgAva{width:30px;height:30px}
  .msgHead h2{font-size:1rem;letter-spacing:.04em}
  .msgX{width:40px;height:40px;border-radius:10px;background:var(--surface2)}
  .msgList{flex:none;gap:20px}
  .msgSec{margin:0 0 5px;padding:0 2px 8px;font-size:0.6875rem;letter-spacing:.06em}
  .msgSec small{font-size:0.625rem;letter-spacing:.03em}
  .msgRow{grid-template-columns:18px minmax(0,1fr) 68px;gap:8px;padding:11px 2px;min-height:52px}
  .msgSrc{padding-top:4px}
  .msgTop b{font-size:0.8125rem;line-height:1.125rem}
  .msgRow time{font-size:0.625rem;line-height:1.125rem}
  .msgBody{-webkit-line-clamp:3;font-size:0.78125rem;line-height:1.0625rem;color:var(--text2);hyphens:none}
  .msgActs{flex-direction:row;align-items:flex-start;gap:0;margin-top:-1px}
  .msgCheck{width:34px;height:34px;opacity:1;border-radius:9px;color:var(--text2)}
  .msgCheck:first-child{background:var(--surface2)}
  .msgSnz{color:#fbbf24}
  .msgShowDone{align-self:flex-start;margin:-4px 0 0;padding:0 2px;height:30px;color:var(--text2)}
  .msgFoot{position:static;margin:0;padding:13px 2px 0;border-top:1px solid var(--line);gap:10px;background:transparent;align-items:center}
  .msgFoot .setSw{transform:none}
  .msgFoot span{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:0.75rem;line-height:1.2;color:var(--text2)}
  .msgFoot b{font-size:0.8125rem;font-weight:650;color:var(--text)}
  .msgFoot small{font-size:0.6875rem;line-height:1.25;color:var(--text3)}
}

/* DUDE! after-hours hotline: a compact comic-book layer on top of the calm
   dashboard system. The humour lives in the labels and motion, not in reduced
   clarity or tiny controls. */
.msgPop{background:radial-gradient(circle at 108% -3%,rgba(251,191,36,.13),transparent 190px),radial-gradient(circle at -12% 33%,rgba(248,113,113,.08),transparent 210px),var(--card-solid)}
.msgHead{position:relative;padding:6px 3px 9px}
.msgHead::after{content:'';position:absolute;left:2px;right:2px;bottom:0;height:1px;background:linear-gradient(90deg,#f87171 0 33%,#fbbf24 33% 66%,rgba(255,255,255,.1) 66%)}
.msgAva{box-shadow:3px 3px 0 rgba(251,191,36,.62);transform:rotate(-4deg)}
.msgBrand{display:flex;flex-direction:column;gap:3px;min-width:0}
.msgHead .msgBrand h2{font-family:'Outfit',var(--font-num);font-size:1.125rem;letter-spacing:.08em;line-height:.9;text-shadow:1px 1px 0 rgba(248,113,113,.5)}
.msgBrand span{font:700 0.5625rem/1 var(--font-num);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.msgPrev{transform:rotate(2deg);box-shadow:2px 2px 0 rgba(245,158,11,.24)}
.msgSec{border-bottom:0;padding-bottom:7px}
.msgSec::after{content:'';display:block;height:3px;margin-top:7px;border-radius:99px;background:linear-gradient(90deg,var(--sec) 0 24px,var(--line) 24px)}
.msgSec em{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:7px;background:color-mix(in srgb,var(--sec) 16%,transparent);color:var(--sec);font-size:0.625rem}
.msgSec small{align-self:center;opacity:1}
.msgRow{margin:5px 0;border:1px solid var(--line);background:linear-gradient(100deg,color-mix(in srgb,var(--sec) 6%,transparent),transparent 55%)}
.msgRow:hover{border-color:color-mix(in srgb,var(--sec) 28%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--sec) 13%,transparent),transparent 62%)}
.msgRow{transform:none}
.msgCheck:first-child{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.msgCheck:first-child:hover{background:rgba(74,222,128,.15);transform:rotate(-7deg) scale(1.07)}
.msgSnz:hover{background:rgba(251,191,36,.13);transform:rotate(8deg) scale(1.07)}
.msgFoot{background:linear-gradient(90deg,rgba(251,191,36,.09),transparent 58%);border-radius:12px;padding:10px 9px}
/* iOS-свайп: неподвижная подложка под строкой, строка едет поверх */
#msgPop .msgRow.swiping,#msgPop .msgRow.swiping:hover{z-index:1;background:linear-gradient(100deg,color-mix(in srgb,var(--sec) 10%,var(--card-solid)),var(--card-solid) 55%);-webkit-user-select:none;user-select:none;cursor:grabbing}
.msgSwBg{--p:0;position:absolute;z-index:0;display:flex;justify-content:space-between;align-items:center;margin:0;border-radius:12px;overflow:hidden;pointer-events:none;background:var(--card-hover);transition:background .18s ease,opacity .3s ease}
.msgSwBg.out{opacity:0}
.msgSwBg .snz{left:0}.msgSwBg .dn{right:0}
.msgSwBg span{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:7px;padding:0 18px;white-space:nowrap;font:700 0.75rem/1 var(--font-num);letter-spacing:.02em;opacity:0;transition:opacity .12s ease}
.msgSwBg .msgIc{width:18px;height:18px;transform:scale(calc(.6 + var(--p) * .4));transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.msgSwBg.R .snz,.msgSwBg.L .dn{opacity:calc(.35 + var(--p) * .65)}
.msgSwBg.R{background:color-mix(in srgb,#fbbf24 calc(var(--p) * 22%),var(--card-hover));color:#fbbf24}
.msgSwBg.L{background:color-mix(in srgb,#4ade80 calc(var(--p) * 22%),var(--card-hover));color:#4ade80}
.msgSwBg.hit.R{background:#f5b316;color:#1a1300}
.msgSwBg.hit.L{background:#22c55e;color:#04210f}
.msgSwBg.hit .msgIc{transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){.msgSwBg,.msgSwBg .msgIc{transition:none}}
.msgFoot .setSw{filter:drop-shadow(2px 2px 0 rgba(245,158,11,.22))}
@media (max-width:699px){.msgHead{padding:4px 2px 12px}.msgAva{width:32px;height:32px}.msgHead .msgBrand h2{font-size:1.25rem}.msgRow{border-radius:12px;padding-left:7px;padding-right:5px}.msgSec::after{margin-top:8px}.msgFoot{padding:11px 10px}.msgSnz{width:34px;height:34px;border-radius:9px;background:rgba(251,191,36,.09)}.msgSec small,.msgRow time{color:var(--text2)}.msgX{font:400 1.75rem/.8 var(--font-ui)}}
@media (prefers-reduced-motion:no-preference){.msgAva{animation:dudeWiggle 5.5s ease-in-out infinite}.msgRow{transition:background .16s ease,border-color .16s ease,transform .16s ease}}
@keyframes dudeWiggle{0%,100%{transform:rotate(-4deg)}48%{transform:rotate(2deg)}56%{transform:rotate(1deg)}}

/* единая шкала: все шрифты и ширина боковых панелей в rem, крутится одной цифрой */
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (min-width:1200px) and (pointer:fine){html{font-size:18.5px}}
@media (max-width:699px){html{font-size:15px}}
/* DUDE!: без разделов - плоский список, цвет срочности на самой строке */
.msgRow{--sec:var(--text3)}.msgRow[data-sec="hot"]{--sec:#f87171}.msgRow[data-sec="reply"]{--sec:#fbbf24}
.msgList{gap:0}
@media (max-width:699px){.msgList{gap:0}}
.msgFoot span{display:flex;flex-direction:column;gap:2px;min-width:0}
/* боковые колонки (таймер, DUDE!): доля ширины экрана из настроек, не уже прежнего минимума */
@media (min-width:700px){:root{--ftW:max(11.25rem,calc(var(--sideP,15) * 1vw))}}
@media (min-width:700px) and (pointer:coarse){:root{--ftW:max(15.75rem,calc(var(--sideP,15) * 1vw))}}
/* ручка ширины боковой колонки: узкая зона на её левой границе, подсвечивается при наведении (как в CRM) */
.sideGrip{display:none;position:fixed;z-index:160;top:0;bottom:0;right:calc(var(--ftW) - 3px);width:7px;cursor:col-resize;touch-action:none}
.sideGrip::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--accent);opacity:0;transition:opacity .15s ease}
.sideGrip:hover::after,body.sideResizing .sideGrip::after{opacity:.7}
@media (min-width:700px) and (pointer:fine){body.ftDocked .sideGrip,body.msgDocked .sideGrip{display:block}}
body.sideResizing{cursor:col-resize;user-select:none;transition:none!important}
body.sideResizing .ftPop,body.sideResizing .msgPop{transition:none!important}
/* DUDE!: тап по строке открывает оригинал; добор до 10 - приглушённо; статус связи; бейдж превью в заголовке */
.msgRow[data-url]{cursor:pointer}
.msgRow.old{opacity:.5}.msgRow.old:hover{opacity:.8}
.msgFold{display:flex;align-items:center;gap:6px;width:100%;margin-top:6px;padding:8px;border:0;border-top:1px solid var(--line-strong);background:none;color:var(--text3);font:600 var(--fs-meta)/1.3 var(--font-ui);cursor:pointer;text-align:left}.msgFold:hover{color:var(--text2)}.msgFold span{margin-left:auto}.msgFold .msgIc{width:14px;height:14px}
.msgStat{margin:0 2px 8px;padding:6px 8px;border-radius:8px;background:color-mix(in srgb,#f87171 12%,transparent);color:#f87171;font:600 var(--fs-meta)/1.3 var(--font-ui)}
.msgHead .msgBrand h2{display:flex;align-items:center;gap:6px}
.msgHead .msgBrand h2 .msgPrev{text-shadow:none;letter-spacing:.08em}
/* DUDE! в стиле карточек дашборда (как Storytell): плоская шапка, сообщения - плитки var(--card) */
.msgPop{background:var(--card-solid)}
.msgHead{padding:2px 2px 10px;gap:8px;margin-bottom:4px}
.msgHead::after{display:none}
.msgAva,.msgPrev{transform:none;box-shadow:none;animation:none!important}
.msgAva{width:22px;height:22px}
.msgBrand{flex-direction:row;align-items:baseline;gap:8px}
.msgHead .msgBrand h2{font:700 var(--fs-head)/1.2 var(--font-num);letter-spacing:.08em;text-shadow:none;color:var(--text)}
.msgBrand span{display:none}
.msgCount{margin-left:auto}
.msgHead .msgX{margin-left:0;width:30px;height:30px;border-radius:var(--r-inner);background:var(--card);color:var(--text2)}
.msgHead .msgX:hover{background:var(--card-hover);color:var(--text)}
.msgList{gap:8px}
.msgRow,.msgRow:hover{margin:0;border:0;border-radius:var(--r-card);background:var(--card);padding:12px 10px 12px 12px;gap:10px}
.msgRow + .msgRow{border-top:0}
.msgRow:hover{background:var(--card-hover)}
.msgRow[data-sec="hot"]{box-shadow:none}
.msgRow[data-sec="reply"]{box-shadow:none}
.msgMain{gap:4px}
.msgTop b{font:600 var(--fs-body)/1.45 var(--font-ui)}
.msgRow time{font:600 var(--fs-meta)/1.45 var(--font-num);color:var(--text3)}
.msgRow[data-sec="hot"] time{color:#f87171}
.msgBody{font:400 var(--fs-body)/1.6 var(--font-ui);color:var(--text2)}
.msgSrc{padding-top:3px}
.msgCheck:first-child{box-shadow:none}
.msgCheck:first-child:hover,.msgSnz:hover{transform:none}
.msgStat{margin:0 0 8px;border-radius:var(--r-inner)}
.msgFoot{background:var(--card-solid);border-radius:0;border-top:1px solid var(--line);padding:10px 2px 2px}
.msgFoot .setSw{filter:none}
@media (max-width:699px){
  .msgList{gap:8px}
  .msgRow{border-radius:var(--r-card);padding:12px 8px 12px 12px}
  .msgHead{padding:2px 2px 10px}.msgAva{width:26px;height:26px}
  .msgHead .msgBrand h2{font-size:0.875rem}
  .msgHead .msgX{width:36px;height:36px;font:400 1.5rem/.8 var(--font-ui)}
  .msgFoot{padding:12px 2px 0;background:transparent}
}
/* DUDE!: иконка и кнопки - в строке имени, текст на всю ширину плитки */
.msgRow,.msgRow:hover{display:block;padding:10px 10px 12px 12px}
.msgTop{align-items:center;gap:6px}
.msgTop .msgSrc{padding-top:0;flex:none}
.msgActs,.msgRow:hover .msgActs{flex-direction:row;gap:2px;margin:-4px -4px -4px 2px;flex:none}
.msgActs .msgCheck{width:26px;height:26px}
.msgRow time{margin-left:auto}
.msgBody{margin-top:2px}
@media (max-width:699px){.msgRow,.msgRow:hover{padding:10px 8px 12px 12px}.msgActs{margin:-6px -2px -6px 4px}.msgActs .msgCheck{width:34px;height:34px}}
@media (pointer:fine) and (min-width:700px){
  .msgActs,.msgRow:hover .msgActs{position:absolute;top:6px;right:6px;margin:0;padding:2px;border-radius:8px;background:var(--card-hover);opacity:0;pointer-events:none;transition:opacity .12s}
  .msgRow:hover .msgActs,.msgActs:focus-within{opacity:1;pointer-events:auto}
  .msgActs .msgCheck{opacity:1}
}
.setRange{display:flex;align-items:center;gap:8px;min-width:150px}
.setRange input{flex:1;accent-color:var(--accent)}
.setRange output{min-width:2.6em;text-align:right;font:600 var(--fs-meta)/1 var(--font-num);color:var(--text2)}
/* ── WINS (что сделал и чем горжусь), в стиле Storytell ── */
#winsCard{display:flex;flex-direction:column}
#winsMeta[hidden]{display:none}
.winsPeriod{cursor:pointer}
.winsPeriod:hover{background:var(--card-hover);color:var(--text)}
.winsBody{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
.winsHero{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:2px 2px 0}
.winsScore{display:flex;align-items:baseline;gap:8px}
.winsNum{font:700 2.5rem/1 var(--font-num);font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.winsLbl{font-size:var(--fs-body);font-weight:600;color:var(--text2)}
.winsBadges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.winsUp,.winsStreak{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:var(--r-pill);font:600 var(--fs-meta)/1.2 var(--font-ui);white-space:nowrap}
.winsUp{background:var(--accent-weak);color:var(--accent)}
.winsStreak{background:rgba(251,191,141,.12);color:var(--peach)}
.winsStreak.wait{background:var(--card);color:var(--text3)}
.winsUp .ic,.winsStreak .ic{width:13px;height:13px}
.winsWeek{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:4px 2px 2px}
.winsDay{display:flex;flex-direction:column;align-items:center;gap:4px}
.winsBar{position:relative;width:100%;max-width:28px;height:34px;border-radius:var(--r-sm);background:var(--card);overflow:hidden}
.winsBar i{position:absolute;left:0;right:0;bottom:0;border-radius:var(--r-sm);background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:.35;transition:height .3s ease}
.winsDay.sel .winsBar i{opacity:.9}
.winsDay.future .winsBar{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.winsDay b{font:600 0.625rem/1 var(--font-ui);color:var(--text3)}
.winsDay.now b{color:var(--accent)}
.winsPhrase{margin:2px 2px 0;font-size:var(--fs-body);line-height:1.45;font-weight:600;color:var(--text)}
.winTile{display:flex;align-items:flex-start;gap:10px;padding:11px 14px 11px 12px;border-radius:var(--r-card);background:var(--card);text-decoration:none;transition:background .18s ease}
.winTile:hover{background:var(--card-hover)}
.winIc{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent)}
.winTile[data-kind="meeting"] .winIc{color:var(--blue)}
.winTile[data-kind="focus"] .winIc{color:var(--peach)}
.winText{display:flex;flex-direction:column;gap:3px;min-width:0}
.winTitle{font-size:var(--fs-body);line-height:1.4;font-weight:600;color:var(--text)}
.winWhy{font-size:var(--fs-meta);line-height:1.3;font-weight:600;color:var(--accent)}
.winsMore{align-self:flex-start;border:0;background:none;padding:4px 2px;color:var(--text3);font:600 var(--fs-meta)/1.3 var(--font-ui);cursor:pointer;text-align:left}
.winsMore:hover:not(:disabled),.winsMore.on{color:var(--text2)}
span.winsMore{cursor:default}
.winsLight{display:flex;flex-direction:column;gap:4px;padding:2px 4px}
.winsLight a{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-meta);line-height:1.45;color:var(--text2);text-decoration:none}
.winsLight a .ic{flex:none;width:13px;height:13px;margin-top:2px;color:var(--good);opacity:.8}
.winsLight a:hover{color:var(--text)}
.tgiLock{--ok:#22c55e;--ok2:#4ade80;container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0 8px}
.tgiLock.shake{animation:tgiShake .35s ease}
@keyframes tgiShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.tgiBadge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--text2);transition:background .2s ease,color .2s ease}
.tgiBadge .ic{width:20px;height:20px}
.tgiLock.justLocked .tgiBadge{animation:tgiPop .35s ease}
.tgiLock.cooldown .tgiBadge{background:rgba(239,68,68,.12);color:#ef4444}
.tgiBadge{position:relative}
.tgiLock.unlocking .tgiBadge{background:var(--ok);color:#04210f;animation:tgiPop .5s cubic-bezier(.2,.9,.3,1.4)}
.tgiLock.unlocking .tgiBadge .ic{animation:tgiTurn .5s cubic-bezier(.2,.9,.3,1.3)}
.tgiLock.unlocking .tgiBadge::after{content:'';position:absolute;inset:0;border-radius:50%;animation:tgiRing .8s ease-out both}
.tgiLock.unlocking .tgiTitle{color:var(--ok2)}
.tgiLock.unlocking .tgiTitle,.tgiLock.unlocking .tgiHint{animation:tgiUp .35s ease both}
@keyframes tgiPop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes tgiTurn{from{transform:rotate(-25deg) scale(.7);opacity:.4}to{transform:none;opacity:1}}
@keyframes tgiRing{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}to{box-shadow:0 0 0 22px transparent}}
@keyframes tgiUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tgiIn{from{opacity:0;transform:scale(.82) translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.tgiLock.enter .tgiBadge{animation:tgiPop .45s cubic-bezier(.2,.9,.3,1.3)}
.tgiLock.enter .tgiTitle,.tgiLock.enter .tgiHint,.tgiLock.enter .tgiDots{animation:tgiUp .35s ease both}
.tgiLock.enter .tgiHint{animation-delay:40ms}.tgiLock.enter .tgiDots{animation-delay:80ms}
.tgiLock.enter .tgiCell{animation:tgiIn .4s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i) * 30ms + 100ms)}
.tgiLock.next .tgiCell{animation:tgiIn .34s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i) * 22ms)}
.tgiTitle{font-size:0.9375rem;font-weight:600;color:var(--text)}
.tgiHint{margin-top:-6px;font-size:var(--fs-meta);color:var(--text3)}
.tgiCd{font-family:var(--font-num);color:#ef4444}
.tgiDots{display:flex;gap:6px}
.tgiPk{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:8px 14px;border:1px solid var(--line,rgb(128 128 128/.3));border-radius:999px;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer;opacity:.85}
.tgiPk:hover{opacity:1}
.tgiLock.pkMode .tgiGrid,.tgiLock.pkMode .tgiDots,.tgiLock.pkMode .tgiHint{display:none}
.tgiLock.pkMode .tgiPk{padding:12px 22px;font-size:15px;opacity:1}
.tgiPkAlt{background:none;border:0;color:inherit;font:inherit;font-size:12px;opacity:.55;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.tgiPk svg{width:17px;height:17px}
.tgiDots i{width:8px;height:8px;border-radius:4px;background:var(--card-hover);transition:background .25s ease,width .3s cubic-bezier(.2,.9,.3,1.2)}
.tgiDots i.on{background:var(--ok,#22c55e);width:18px}
.tgiDots i.pick{background:var(--text2);width:18px}
.tgiCell.pick{background:color-mix(in srgb,var(--text) 10%,var(--card));box-shadow:inset 0 0 0 2px var(--text2)}
.tgiDots i.just{animation:tgiDot .45s cubic-bezier(.2,.9,.3,1.5)}
@keyframes tgiDot{0%{transform:scale(.6)}55%{transform:scale(1.35);box-shadow:0 0 10px color-mix(in srgb,var(--ok,#22c55e) 70%,transparent)}100%{transform:none}}
.tgiGrid{display:grid;gap:8px;width:100%;max-width:360px;transition:opacity .2s ease,filter .2s ease}
.tgiGrid5{grid-template-columns:repeat(5,minmax(0,1fr));max-width:360px}
.tgiGridN{grid-template-columns:repeat(var(--c,5),minmax(0,1fr));max-width:calc(var(--c,5) * 72px)}
.tgiLock.cooldown .tgiGrid{opacity:.35;filter:grayscale(1)}
.tgiLock.unlocking .tgiCell{opacity:0;transform:scale(.8);filter:blur(4px);transition:opacity .35s ease,transform .35s ease,filter .35s ease;transition-delay:calc(var(--i) * 25ms)}
.tgiCell{width:100%;aspect-ratio:1;padding:0;border:0;border-radius:var(--r-card);background:var(--card);font-size:clamp(24px,12cqi,34px);line-height:1;cursor:pointer;transition:background .2s ease,transform .25s cubic-bezier(.2,.9,.3,1.3),opacity .25s ease,filter .25s ease,box-shadow .2s ease}
.tgiCell:hover:not(:disabled){background:var(--card-hover)}
.tgiCell:active:not(:disabled){transform:scale(.92)}
.tgiCell:disabled{cursor:default}
.tgiCell.on{background:color-mix(in srgb,var(--ok,#22c55e) 20%,var(--card));box-shadow:inset 0 0 0 2px var(--ok,#22c55e),0 0 22px color-mix(in srgb,var(--ok,#22c55e) 40%,transparent);animation:tgiOk .4s cubic-bezier(.2,.9,.3,1.4)}
@keyframes tgiOk{0%{transform:scale(.9)}55%{transform:scale(1.12)}100%{transform:scale(1.05)}}
.tgiLock.step .tgiCell:not(.pick){opacity:.22;transform:scale(.9);filter:blur(1.5px)}
.tgiCell.wrong{box-shadow:inset 0 0 0 2px #ef4444;background:rgba(239,68,68,.12)}
.tgiLock.cooldown .tgiCell.wrong{opacity:1;filter:none;box-shadow:inset 0 0 0 2px #ef4444;background:rgba(239,68,68,.12)}
.tgiLock.cooldown .tgiGrid:has(.wrong){opacity:1;filter:none}
.tgiLock.cooldown .tgiCell:not(.wrong){opacity:.35;filter:grayscale(1)}
#msgPop.tgiLocking>*:not(.msgHead){opacity:0;filter:blur(6px);transition:opacity .25s ease,filter .25s ease}
#msgPop.tgiOpened>*:not(.msgHead){animation:tgiUp .45s cubic-bezier(.2,.9,.3,1) both}
@media (prefers-reduced-motion:reduce){.tgiLock *,.tgiLock,#msgPop.tgiOpened>*{animation:none!important;transition:none!important}}
.msgBtn.locked::after{content:'';position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:var(--surface3) center/8px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23bbb'%3E%3Cpath fill-rule='evenodd' d='M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z' clip-rule='evenodd'/%3E%3C/svg%3E");box-shadow:0 0 0 2px var(--bg)}
.tgUnread{flex:none;min-width:16px;padding:0 5px;border-radius:8px;background:var(--accent);color:var(--bg);font:700 var(--fs-meta)/1rem var(--font-num);text-align:center}
/* прошлые сообщения цепочки - одной строкой, последнее - целиком (под ним теперь кнопки ответа, :last-child не годится) */
.tgRow .msgBody:has(+ .msgBody){-webkit-line-clamp:1;opacity:.7}
.tgRow .msgBody:not(:has(+ .msgBody)){-webkit-line-clamp:8;color:var(--text)}
.msgLock .ic{width:14px;height:14px}
@media (pointer:coarse){.tgiLock{padding-bottom:24px}.tgiGrid{gap:10px;max-width:360px}.tgiCell{font-size:clamp(28px,13cqi,44px)}}
.winsEmpty{padding:18px 8px;text-align:center;color:var(--text3);font-size:var(--fs-meta)}
/* DUDE!: на десктопе кнопки встают на место времени при наведении, без наложения */
@media (pointer:fine) and (min-width:700px){
  .msgActs,.msgRow:hover .msgActs{position:static;display:none;opacity:1;pointer-events:auto;background:none;padding:0;margin:-4px -4px -4px auto}
  .msgRow:hover .msgActs,.msgActs:focus-within{display:flex}
  .msgRow:hover time,.msgRow:focus-within time{display:none}
}
/* DUDE!: пока грузится - пустые плитки-заглушки вместо примеров */
.msgSkel{display:flex;flex-direction:column;gap:8px}
.msgSkel i{display:block;height:78px;border-radius:var(--r-card);background:linear-gradient(90deg,var(--card) 0%,var(--card-hover) 50%,var(--card) 100%);background-size:200% 100%;animation:msgSkel 1.3s ease-in-out infinite}
.msgSkel i:nth-child(2){height:62px}.msgSkel i:nth-child(3){opacity:.7}.msgSkel i:nth-child(4){height:62px;opacity:.45}
@keyframes msgSkel{from{background-position:100% 0}to{background-position:-100% 0}}
.msgHead .msgBrand{margin-right:auto}

/* шапки карточек на одной линии: единая высота, TODAY не переносится, у липкой шапки TODO нет светлой полосы */
section.panel > .panelHead{min-height:32px;margin-bottom:12px}
.dayToggle button{white-space:nowrap}
.digestTasks .panelHead{background:linear-gradient(var(--card),var(--card)),var(--bg);padding-top:0}

/* STORYTELL: стрелки в шапке рядом со счётчиком (‹ 3/8 ›) - текст на всю ширину; точки прогресса маленькие */
#storytellCard .stPager{display:flex;align-items:center;gap:4px}
#storytellCard .stPager .storytellNav{background:var(--card);color:var(--text3)}
#storytellCard .stPager .storytellNav:hover:not(:disabled){background:var(--card-hover);color:var(--text)}
#storytellCard .stPager .storytellNav:disabled{opacity:.3}
#storytellCard .stPager .chip{background:none;box-shadow:none;padding:0 4px;min-width:0;height:auto;font-variant-numeric:tabular-nums}

/* DUDE: два списка - Неразобранные / Все */
.msgTabs{display:flex;gap:2px;background:var(--card);border-radius:var(--r-sm);padding:2px;margin:10px 0 2px}
.msgTabs button{flex:1 1 auto;min-width:0;white-space:nowrap;border:0;border-radius:6px;background:transparent;color:var(--text3);font:600 0.75rem/1 var(--font-ui);padding:7px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .14s ease,color .14s ease}
.msgTabs button:hover{color:var(--text2)}
.msgTabs button.on{background:var(--surface3);color:var(--text)}
.msgTabs .msgIc{width:15px;height:15px;flex:none}
.msgTabs button{gap:5px}
.msgTabs i{font:600 0.6875rem/1 var(--font-num);font-style:normal;font-variant-numeric:tabular-nums;color:var(--text3)}
.msgTabs button.on i{color:var(--accent)}
.msgPop .msgFoot{position:sticky;bottom:-12px;z-index:2;padding-bottom:12px;background:var(--card-solid)}
/* очередь таймера v3: таймлайн без карточек - время старта · точка · фраза · длительность */
.ftQSec{gap:4px;grid-template-columns:minmax(0,1fr)}
.ftQSec > *{min-width:0}
.ftQTitle{display:flex;align-items:baseline;justify-content:space-between}
.ftQTitle em{font-style:normal;letter-spacing:.08em;text-transform:none;color:var(--text3)}
.ftQList{gap:0!important}
.ftQRow{position:relative;gap:8px!important;min-height:32px;padding:0 2px 0 4px!important;border-radius:8px;background:none!important;box-shadow:none!important}
.ftQRow:hover{background:var(--surface1)!important}
.ftQRow.drag{background:var(--surface2)!important;box-shadow:0 8px 20px rgba(0,0,0,.35)!important}
.ftQAt{flex:none;width:32px;font:600 0.625rem/1 var(--font-num)!important;color:var(--text3)!important;font-variant-numeric:tabular-nums}
.ftQRow > i{position:relative;width:7px!important;height:7px!important;align-self:center}
.ftQRow > i::before{content:"";position:absolute;left:3px;top:-14px;bottom:-14px;width:1px;background:var(--line);z-index:-1}
.ftQRow:first-child > i::before{top:3px}.ftQRow:last-child > i::before{bottom:3px}.ftQRow:only-child > i::before{display:none}
.ftQRow:first-child .ftQLbl{color:var(--text)}
.ftQLbl{font-size:0.75rem!important;font-weight:500!important}
.ftQLbl.empty{font-style:normal!important;color:var(--text3)!important}
.ftQTime{flex:none;margin-left:auto!important;padding:3px 6px!important;border-radius:6px;background:var(--surface2)!important;font:700 0.6562rem/1 var(--font-num)!important;color:var(--text2)!important}
.ftQTime:hover{color:var(--text)!important;background:var(--surface3)!important}
.ftQActs{display:flex;gap:0;flex:none}
.ftQActs .ftNextGo{width:22px;height:22px}
@media (hover:hover){.ftQRow .ftQDel{opacity:0;transition:opacity .12s}.ftQRow:hover .ftQDel,.ftQRow:focus-within .ftQDel{opacity:1}}
.ftQEmpty{padding:9px;border:1px dashed var(--line);border-radius:8px;text-align:center;font-size:0.6875rem;color:var(--text3)}
.ftQAddBar{display:flex;align-items:center;gap:3px;margin-top:4px}
.ftQTypeBtn{flex:none;display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:0;border-radius:8px;background:var(--surface2);color:var(--text);font:600 0.6562rem/1 var(--font-ui);cursor:pointer}
.ftQTypeBtn i{width:6px;height:6px;border-radius:50%;background:var(--ftA)}
.ftQTypeBtn.ft-break i{background:#c4b5fd}
.ftQTypeBtn:hover{background:var(--surface3)}
.ftQAddBar .ftQQuick{flex:1;min-width:0}
.ftQSec{container-type:inline-size}
@container (max-width:230px){.ftQAddBar{flex-wrap:wrap}.ftQAddBar .ftQQuick{flex-basis:100%}.ftQTypeBtn{flex:1;justify-content:center}}
@media (pointer:coarse){.ftQRow{min-height:44px}.ftQTypeBtn,.ftQAddBar .ftPreset{height:36px}}
.ftQActs{width:44px;justify-content:flex-end}

/* iPhone navigation: large, thumb-safe controls without horizontal overflow. */
.ftBtn:not(.ftOn){background:var(--surface2);color:var(--text2);box-shadow:none}
.ftBtn:not(.ftOn):hover{background:var(--surface3)}
@media (max-width:620px){
  .tabs{display:flex;flex-wrap:wrap;gap:8px;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));align-items:center}
  .tabGroup{order:1;flex:1 0 100%;height:46px;padding:3px;gap:3px}
  .tabGroup .tab{min-width:0;height:40px;padding:0 10px;font-size:.75rem;letter-spacing:.07em}
  .navControls{order:2;flex:1 0 100%;width:100%;margin:0;justify-content:center;gap:10px}
  .navControls .refresh{width:44px;height:44px;border-radius:12px}
  .navControls .refresh .ic{width:19px;height:19px}
  .msgBtn.locked::after{top:-2px;right:-2px;width:16px;height:16px;background-size:9px;box-shadow:0 0 0 2px var(--bg)}
  .ftBtn.ftOn{width:44px!important;min-width:44px;padding:0;justify-content:center;border-radius:12px}
  .ftBtn.ftOn .ftChipTime{display:none}
  .ftBtn.ftOn .ftMini{width:21px;height:21px}
}
/* Keep the whole navigation on one iPhone row: the tabs flex, controls stay thumb-sized. */
@media (max-width:620px){
  .tabs{flex-wrap:nowrap;gap:6px;padding:calc(6px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
  .tabGroup{order:initial;flex:1 1 auto;min-width:0;height:40px;gap:2px}
  .tabGroup .tab{height:34px;padding:0 5px;font-size:.65625rem;letter-spacing:.05em}
  .navControls{order:initial;flex:0 0 auto;width:auto;margin:0;gap:4px}
  .navControls .refresh{width:36px;height:36px;border-radius:10px}
  .navControls .refresh .ic{width:17px;height:17px}
  .msgBtn.locked::after{top:-3px;right:-3px;width:14px;height:14px;background-size:8px}
  .ftBtn.ftOn{width:36px!important;min-width:36px;border-radius:10px}
  .ftBtn.ftOn .ftMini{width:18px;height:18px}
}
@media (max-width:380px){
  .tabs{gap:4px;padding-left:8px;padding-right:8px}
  .tabGroup .tab{padding:0 3px;font-size:.59375rem;letter-spacing:.035em}
  .navControls{gap:3px}
  .navControls .refresh{width:34px;height:34px}
  .ftBtn.ftOn{width:34px!important;min-width:34px}
}
.ftQTime{min-width:34px;justify-content:center}

/* Strategy compass: one thesis + a short horizon list, calm and readable. */
.strategyPanel{align-self:start;min-height:0}
.strategyThesis{margin:0;padding:2px 0 2px 12px;border-left:2px solid var(--accent);font-size:.875rem;line-height:1.45;font-weight:500;color:var(--text)}
.strategyHorizon{margin-top:14px}
.strategyHorizon small{display:block;font:600 .625rem/1 var(--font-num);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.strategyHorizon ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.strategyHorizon li{position:relative;padding-left:17px;font-size:.8125rem;line-height:1.35;color:var(--text2)}
.strategyHorizon li::before{content:"→";position:absolute;left:0;color:var(--text3)}
.strategySource{display:block;text-decoration:none;margin:12px 0 0;color:var(--text3);font:500 .625rem/1.2 var(--font-num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.strategySource:hover{color:var(--text2)}
#strategyMeta.stgStale{color:var(--warn);background:rgba(251,191,36,.10)}
.stgBets{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.stgBet{min-width:0}
.stgBetTop{display:flex;align-items:baseline;gap:7px;min-width:0}
.stgBetTop b{flex:1;min-width:0;font-size:.8125rem;font-weight:600;line-height:1.3;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stgDot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--good);transform:translateY(-1px)}
.stgBet[data-st="at-risk"] .stgDot{background:var(--warn)}
.stgBet[data-st="off"] .stgDot{background:var(--bad)}
.stgBet[data-st="paused"] .stgDot{background:var(--text4)}
.stgNum{flex:none;font:700 .8125rem/1 var(--font-num);color:var(--text)}
.stgNum em{font-style:normal;font-weight:500;color:var(--text3)}
.stgBar{height:4px;margin:6px 0 0 14px;border-radius:99px;background:var(--surface2);overflow:hidden}
.stgBar i{display:block;height:100%;border-radius:inherit;background:var(--good);transition:width .4s ease}
.stgBet[data-st="at-risk"] .stgBar i{background:var(--warn)}
.stgBet[data-st="off"] .stgBar i{background:var(--bad)}
.stgBet small{display:block;margin:4px 0 0 14px;font-size:.6875rem;color:var(--text3)}
.stgNot{margin-top:13px;font-size:.6875rem;line-height:1.45;color:var(--text3)}
.stgNot small,.stgHorizon small{font:700 .59375rem/1 var(--font-num);letter-spacing:.08em;color:var(--text4);margin-right:4px}
.stgMore{margin-top:10px}
.stgOt{display:block;width:100%;margin:10px 0 0;padding:7px 10px;border:0;border-radius:var(--r-inner);background:var(--accent-weak);color:var(--text);font:inherit;font-size:.75rem;line-height:1.35;text-align:left;cursor:pointer}
.stgOt small{font:700 .59375rem/1 var(--font-num);letter-spacing:.08em;color:var(--accent);margin-right:4px}
.stgOt em{font-style:normal;color:var(--text3)}
.stgOt.off{background:color-mix(in srgb,var(--warn) 14%,transparent)}
.stgOt.off small{color:var(--warn)}
.stgBet.otOn .stgBetTop b::after{content:" 🎯";font-size:.6875rem}
.otBets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.otBets small{flex-basis:100%;font-size:.6875rem;color:var(--text3)}
.otBets em{flex-basis:100%;font-style:normal;font-size:.6875rem;color:var(--text3)}
.otBetChip{padding:6px 10px;border:1px solid var(--line,transparent);border-radius:99px;background:var(--card);color:var(--text2);font:inherit;font-size:.75rem;line-height:1.2;cursor:pointer}
.otBetChip.on{background:var(--accent-weak);color:var(--text);border-color:var(--accent)}
/* ONE THING - комната фокуса (showOneThingSheet) */
.sheet.otRoomSheet{width:min(580px,100%);max-height:88vh;padding:0 0 max(18px,env(safe-area-inset-bottom))}
.otRoom{display:flex;flex-direction:column}
.otrHead{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;background:var(--surface1)}
.otrHead b{display:flex;align-items:center;gap:8px;font:700 .8125rem/1 var(--font-num);letter-spacing:.1em;color:var(--accent)}
.otrHead b .ic{width:16px;height:16px}
.otrToast{margin:0 18px 10px;padding:8px 12px;border-radius:var(--r-sm);background:var(--accent-weak);color:var(--text);font-size:.8125rem}
.otrNow{margin:0 18px;padding:16px;border-radius:var(--r-inner);background:var(--card);border:1px solid var(--accent-soft)}
.otrWin{border-color:var(--accent)}
.otrKick .ic{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.otrMini{margin-left:10px;padding:0;border:0;background:none;color:var(--accent);font:500 .6875rem/1 var(--font-ui);letter-spacing:0;text-transform:none;cursor:pointer}
.otrNow .otrEmpty{margin:14px 0 0}
.otrKick{display:block;font:700 .625rem/1 var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.otrText{margin:8px 0 10px;font:700 1.25rem/1.3 var(--font-display);letter-spacing:-.01em;color:var(--text)}
.otrMeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.75rem;color:var(--text3)}
.otrMeta span{display:inline-flex;align-items:center;gap:5px}
.otrMeta .ic{width:13px;height:13px}
.otrBet{color:var(--accent)}
.otrGoBox{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:12px 18px 0}
.otrGo{flex:1 1 220px;display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;border-radius:var(--r-inner);background:var(--accent);color:var(--bg);font:inherit;text-align:left;cursor:pointer;transition:filter .12s ease}
.otrGo:hover{filter:brightness(1.08)}
.otrGo .ic{width:22px;height:22px;flex:none}
.otrGo b{display:block;font-size:.9375rem}
.otrGo small{display:block;margin-top:2px;font-size:.6875rem;opacity:.8}
.otrGoMore{display:flex;gap:8px}
.otrGoMore .otrBtn{padding:0 14px}
.otrSec{margin:18px 18px 0}
.otrQ{margin:0 18px 12px;font-size:.8125rem;line-height:1.45;color:var(--text3);font-style:italic}
.otrPad{margin:0 18px}
.otrBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--text2);font:500 .8125rem/1.2 var(--font-ui);cursor:pointer;white-space:nowrap}
.otrBtn:hover{color:var(--text);background:var(--card-hover)}
.otrBtn.pri{background:var(--accent-weak);border-color:var(--accent-soft);color:var(--text)}
.otrBtn .ic{width:13px;height:13px}
.otrBtn:disabled{opacity:.6;cursor:default}
.otrInline{display:flex;flex-wrap:wrap;gap:8px}
.otrInline input{flex:1 1 200px;min-width:0;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:400 .8125rem/1.3 var(--font-ui);outline:none}
.otrInline input:focus{border-color:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-weak)}
.otrStep{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.otrStep small{flex-basis:100%;font:700 .625rem/1 var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.otrStep span{flex:1 1 200px;font-size:.875rem;color:var(--text)}
.otrEmpty{margin:0 0 8px;font-size:.8125rem;color:var(--text3);display:flex;align-items:center;gap:8px}
.otrList{display:grid;gap:6px;margin-bottom:10px}
.otrItem{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--card);color:var(--text);font:inherit;font-size:.875rem;line-height:1.35;text-align:left;cursor:pointer}
.otrItem:hover{border-color:var(--accent-soft);background:var(--accent-weak)}
.otrItem em{font-style:normal;font-size:.6875rem;color:var(--text3)}
.otrCall{position:relative}
.otrCall .otrItem{width:100%;padding-right:34px}
.otrCallX{position:absolute;top:6px;right:6px;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text3);cursor:pointer;opacity:.6}
.otrCallX:hover{opacity:1;background:rgba(248,113,113,.12);color:var(--warn)}
.otrCallX .ic{width:13px;height:13px}
.otrLinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 18px 0}
.otrLinks .otrLink{margin:0}
.otrLink .ic{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.otrLink{align-self:flex-start;margin:16px 18px 0;padding:0;border:0;background:none;color:var(--accent);font:500 .8125rem/1.2 var(--font-ui);cursor:pointer}
.otrLink.muted{color:var(--text4)}
.stgQuestion{margin:8px 0 0;font-size:.8125rem;line-height:1.4;font-style:italic;color:var(--text)}
.stgHorizon{margin:8px 0 0;font-size:.6875rem;line-height:1.45;color:var(--text2)}

/* ── FOCUSERA UI: режим фокус/исследую, шаг и фишки дня в ONE THING, напарник таймера ── */
/* FOCUS: переключатель «фокус / исследую» в шапке карточки */
.focusMode{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 6px;border:0;border-radius:var(--r-pill);background:var(--card-hover);color:var(--accent);font:600 0.6875rem/1 var(--font-num);cursor:pointer}
.focusMode[hidden]{display:none}
.focusMode:hover{color:var(--text)}
.focusModeSw{position:relative;flex:none;width:18px;height:10px;border-radius:var(--r-pill);background:var(--accent-weak)}
.focusModeSw::after{content:"";position:absolute;top:2px;left:2px;width:6px;height:6px;border-radius:50%;background:var(--accent);transition:transform .18s ease}
.focusPanel.explore .focusMode{color:var(--text2)}
.focusPanel.explore .focusModeSw{background:var(--line-strong)}
.focusPanel.explore .focusModeSw::after{transform:translateX(8px);background:var(--text2)}
.focusMode.busy{opacity:.6;pointer-events:none}
/* explore: сверху идеи и PARKING, ONE THING приглушен */
.focusIdeas:empty{display:none}
.focusIdeas{margin:0 0 12px;padding:8px 6px 4px 0;border-radius:var(--r-inner);background:var(--card-hover)}
.focusIdeasHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 4px 11px}
.focusIdeasHead b{font:700 0.6875rem/1.2 var(--font-num);color:var(--accent)}
.focusIdeasHead small{font-size:0.625rem;color:var(--text3)}
.focusPanel.explore .focusOne{opacity:.45;transition:opacity .2s ease}
.focusPanel.explore .focusOne:hover,.focusPanel.explore .focusOne:focus-within{opacity:1}
/* шаг к ONE THING внутри карточки */
/* под ONE THING: 6 фишек дня + «Dude сегодня N/3» */
@media (pointer:coarse){.focusMode{padding:9px 10px}.focusStepIn{font-size:16px}}

/* таймер: «твой ритм» под пресетами */
.ftRhythm{display:block;width:100%;height:26px;margin-top:4px;border:0;border-radius:8px;background:var(--surface2);color:var(--text2);font:600 0.6562rem/1 var(--font-num);cursor:pointer}
.ftRhythm:hover{background:var(--surface3);color:var(--text)}
.ftRhythm.sel{background:color-mix(in srgb,var(--accent) 22%,var(--surface2));color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
/* таймер-напарник: RESUME над циферблатом и компактные листы под кнопками */
/* листы напарника удлиняют карточку: в короткой панели она не сжимается (иначе overflow:hidden режет низ), панель скроллится */
.ftPop > .ftHero{flex-shrink:0}
.ftMateResume{display:grid;gap:2px;margin:0 5px;padding:6px 8px;border-radius:8px;background:var(--surface1);text-align:left}
.ftMateResume small{font:700 0.5312rem/1.2 var(--font-num);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.ftMateResume span{font-size:0.6875rem;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.ftMate{display:grid;gap:6px;margin:0 5px;padding:8px;border-radius:var(--r-inner);background:var(--surface1);text-align:left}
.ftMateT{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0}
.ftMateT b{min-width:0;font:600 0.6875rem/1.3 var(--font-ui);color:var(--text);overflow-wrap:anywhere}
.ftMateT small{min-width:0;font:600 0.5938rem/1.2 var(--font-num);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftMateSub{font-size:0.625rem;line-height:1.35;color:var(--text3);overflow-wrap:anywhere}
.ftMateIn{box-sizing:border-box;width:100%;min-width:0;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--text);font:500 0.6875rem/1 var(--font-ui);outline:none}
.ftMateIn:focus{border-color:var(--accent)}
.ftMateIn::placeholder{color:var(--text3)}
.ftMateRow{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.ftMateRow > span{flex:1 0 100%;font-size:0.5938rem;color:var(--text3)}
.ftMateRow .ftChip{flex:1 1 auto}
.ftMateBtns{display:flex;flex-wrap:wrap;gap:4px}
.ftMateBtn{flex:1 1 auto;min-height:26px;padding:5px 8px;border:0;border-radius:8px;background:var(--surface2);color:var(--text2);font:600 0.6562rem/1.2 var(--font-ui);cursor:pointer}
.ftMateBtn:hover{background:var(--surface3);color:var(--text)}
.ftMateBtn.pri{background:color-mix(in srgb,var(--accent) 22%,var(--surface2));color:var(--accent)}
.ftMateBtn.ftNsdr{justify-self:start;flex:none}
.ftMateX{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:none;color:var(--text3);cursor:pointer}
.ftMateX:hover{color:var(--text);background:var(--surface2)}
.ftMateX .ftIc{width:10px;height:10px}
.ftWrap .ftMateT{flex-direction:column;align-items:stretch;gap:2px}
.ftCal{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent)}
.ftGuard{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
/* журнал отвлечений: «+ мысль» во время блока, разбор мыслей в конце */
.ftThoughtRow{margin:0 5px}
.ftThoughtAdd{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px dashed var(--line-strong);border-radius:var(--r-pill);background:none;color:var(--text3);font:600 0.625rem/1 var(--font-ui);cursor:pointer}
.ftThoughtAdd:hover{color:var(--text2);border-color:var(--text3)}
.ftThoughtAdd b{font:700 0.5938rem/1 var(--font-num);color:var(--accent)}
.ftThoughts{display:grid;gap:4px;margin:0 5px}
.ftMate .ftThoughts{margin:0}
.ftThought{display:grid;gap:4px;padding:6px 7px;border-radius:8px;background:var(--surface2)}
.ftThought.busy{opacity:.55}
.ftThought > span{font-size:0.6875rem;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.ftThought > small{font-size:0.5938rem;color:var(--warn)}
.ftThoughtActs{display:flex;flex-wrap:wrap;gap:3px}
.ftThoughtActs button{height:22px;padding:0 7px;border:0;border-radius:6px;background:var(--surface3);color:var(--text2);font:600 0.5938rem/1 var(--font-ui);cursor:pointer}
.ftThoughtActs button:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 18%,var(--surface3))}
@media (pointer:coarse){.ftMateIn{height:40px;font-size:0.875rem}.ftMateBtn{min-height:36px;font-size:0.8125rem}.ftMateRow .ftChip,.ftRhythm{height:36px;font-size:0.8125rem}.ftMateT b{font-size:0.8125rem}.ftThoughtAdd{height:34px;font-size:0.8125rem}.ftThought > span{font-size:0.8125rem}.ftThoughtActs button{height:32px;font-size:0.75rem}.ftMateX{width:32px;height:32px}}
/* захват мысли в PARKING */
.capBar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 56px);left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;width:min(560px,calc(100vw - 24px));padding:8px 12px;box-sizing:border-box;border-radius:12px;background:var(--card-solid);border:1px solid var(--line-strong);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.capBar[hidden]{display:none}
.capBar svg{width:16px;height:16px;flex:none;color:var(--text3)}
.capBar input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:1rem}
.capBar small{flex:none;color:var(--text3);font-size:.75rem}
.capBar.ok small{color:#22c55e}
.capBar.err small{color:#ef4444}

/* FOCUS = что делаю сейчас: шаг к ONE THING + ▶, фокус за день, окно до встречи, «не забыть» (v-93) */
.focusOneCard{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px 14px}
.focusOneCard.busy{opacity:.6}
.focusOneFor{justify-self:start;max-width:100%;padding:0;border:0;background:none;color:var(--text3);font:inherit;font-weight:500;font-size:0.6875rem;line-height:1.35;text-align:left;cursor:pointer;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.focusOneFor small{font:700 0.625rem/1.2 var(--font-num);letter-spacing:.04em;color:var(--accent)}
.focusOneFor:hover{color:var(--text2)}
.focusStepNow{font-size:1.0625rem;font-weight:650;line-height:1.3;color:var(--text);overflow-wrap:anywhere}
.focusStepBtns{display:flex;align-items:center;gap:6px}
.focusStepDone{height:34px;padding:0 12px;border:0;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font:inherit;font-weight:600;font-size:0.75rem;line-height:1;cursor:pointer}
.focusStepDone:hover{background:var(--accent);color:#fff}
.focusStepForm{display:flex;gap:6px}
.focusStepIn{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-inner);background:var(--card);color:var(--text);font:inherit;font-weight:500;font-size:0.8125rem;line-height:1}
.focusStepIn:focus{outline:none;border-color:var(--accent)}
.focusStepIn::placeholder{color:var(--text3)}
.focusStepOk{flex:none;height:36px;padding:0 14px;border:0;border-radius:var(--r-inner);background:var(--accent);color:#fff;font:inherit;font-weight:700;font-size:0.75rem;line-height:1;cursor:pointer}
.focusStepOk:disabled{opacity:.4;cursor:default}
.focusStepAlt{display:flex;flex-wrap:wrap;gap:4px 14px}
.focusLink{padding:2px 0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;font-size:0.6875rem;line-height:1.3;cursor:pointer}
.focusLink:hover{text-decoration:underline}
.focusLink:disabled{color:var(--text3);cursor:default;text-decoration:none}
.focusErr{font-size:0.6875rem;color:var(--text3)}
.focusSugg{display:grid;gap:4px}
.focusSugg button{padding:8px 10px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:var(--r-inner);background:var(--card);color:var(--text);font:inherit;font-weight:500;font-size:0.75rem;line-height:1.35;text-align:left;cursor:pointer}
.focusSugg button:hover{border-color:var(--accent);background:var(--accent-weak)}
.focusStall{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:8px 2px 0;font-size:0.6875rem;color:var(--text2)}
.focusFoot{display:flex;align-items:center;gap:8px;margin:10px 2px 0}
.focusDayBar{flex:1;height:5px;border-radius:var(--r-pill);background:var(--line-strong);overflow:hidden}
.focusDayBar i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .3s ease}
.focusFoot small{flex:none;font:600 0.625rem/1 var(--font-num);color:var(--text3)}
.focusWin{display:flex;align-items:center;gap:6px;margin:6px 2px 0;font-size:0.6875rem;color:var(--text2)}
.focusWin svg{flex:none;width:12px;height:12px;color:var(--text3)}
.focusHotHead{margin:12px 0 2px 9px;font:700 0.625rem/1.2 var(--font-num);letter-spacing:.04em;color:var(--text3);text-transform:uppercase}

/* кнопка сохранения: идёт / готово */
.btnSpin{display:inline-block;width:.9em;height:.9em;margin-right:.45em;vertical-align:-.12em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnSpin .7s linear infinite}
@keyframes btnSpin{to{transform:rotate(360deg)}}
button.saving:disabled,button.saved:disabled{opacity:1}
button.saved{background:#16a34a !important;color:#fff !important;transition:background .2s}
.focusOne.justSaved{animation:justAdded 1.6s ease;border-radius:10px}

/* ── IFS РАДАР: части за 7 дней из накопительного лога ifs-parts-radar ── */
.ifsPanel{position:relative;align-self:start;min-height:0;max-height:none;overflow:hidden;background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(244,114,182,.03) 60%,transparent)!important;border:1px solid color-mix(in srgb,rgba(167,139,250,1) 18%,var(--line))}
.ifsPanel{--ifs-self:var(--good);--ifs-manager:var(--blue);--ifs-firefighter:var(--peach);--ifs-exile:var(--pink)}
.ifsHero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:2px 4px 10px}
.ifsSelfNum{min-width:0}
.ifsSelfNum strong{display:block;font:700 2.25rem/1 var(--font-num);letter-spacing:-.02em;color:var(--ifs-self)}
.ifsSelfNum strong small{margin-left:2px;font-size:.9rem;font-weight:600;opacity:.75}
.ifsSelfNum span{display:block;margin-top:5px;font-size:.6875rem;color:var(--text3)}
.ifsSelfNum em{font:600 .6875rem/1 var(--font-num);font-style:normal;color:var(--text2)}
.ifsSelfNum em.up{color:var(--good)}.ifsSelfNum em.down{color:var(--warn)}
.ifsSpark{display:flex;align-items:flex-end;gap:3px;height:38px;flex:0 0 auto}
.ifsSpark b{width:7px;border-radius:2px;background:color-mix(in srgb,var(--ifs-self) 40%,transparent)}
.ifsSpark b:last-child{background:var(--ifs-self)}
.ifsSpark b.none{background:rgba(255,255,255,.08)}
.ifsMix{display:flex;gap:2px;height:8px;margin:0 4px;border-radius:4px;overflow:hidden}
.ifsMix b{min-width:3px;background:var(--ifs-self)}
.ifsMix b.manager{background:var(--ifs-manager)}.ifsMix b.firefighter{background:var(--ifs-firefighter)}.ifsMix b.exile{background:var(--ifs-exile)}
.ifsLegend{display:flex;flex-wrap:wrap;gap:4px 10px;margin:7px 4px 10px;font:500 .59375rem/1 var(--font-num);color:var(--text3)}
.ifsLegend i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--ifs-self);vertical-align:1px}
.ifsLegend .manager i{background:var(--ifs-manager)}.ifsLegend .firefighter i{background:var(--ifs-firefighter)}.ifsLegend .exile i{background:var(--ifs-exile)}
.ifsParts{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line)}
.ifsPart{--c:var(--ifs-manager)}
.ifsPart.firefighter{--c:var(--ifs-firefighter)}.ifsPart.exile{--c:var(--ifs-exile)}
.ifsRow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 22px 34px;align-items:center;gap:8px;width:100%;padding:6px 4px 6px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;position:relative}
.ifsRow::before{content:"";position:absolute;left:2px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--c)}
.ifsRow:hover,.ifsPart.open .ifsRow{background:var(--card)}
.ifsName{display:flex;flex-direction:column;gap:3px;min-width:0}
.ifsName b{font-size:.75rem;font-weight:600;line-height:1.2}
.ifsName i{font:500 .5625rem/1 var(--font-num);font-style:normal;letter-spacing:.04em;color:color-mix(in srgb,var(--c) 70%,var(--text3))}
.ifsBar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.05)}
.ifsBar b{display:block;height:100%;border-radius:3px;background:var(--c)}
.ifsBar u{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text3);opacity:.7}
.ifsVal{font:600 .75rem/1 var(--font-num);color:var(--text);text-align:right}
.ifsTrend{font:600 .625rem/1 var(--font-num);color:var(--text3);text-align:right}
.ifsTrend.up{color:var(--warn)}.ifsTrend.down{color:var(--good)}.ifsTrend.new{font-size:.5625rem;color:var(--pink)}
.ifsMore{margin:2px 4px 8px 10px;padding:9px 10px;border-radius:var(--r-sm);background:rgba(8,9,12,.28);border-left:2px solid var(--c)}
.ifsSignals{margin:0 0 8px;font-size:.6875rem;line-height:1.35;color:var(--text3)}
.ifsQuotes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ifsQuotes li{font-size:.71875rem;line-height:1.38;color:var(--text)}
.ifsQuotes q{font-style:italic}
.ifsQuotes span{display:flex;gap:8px;justify-content:space-between;margin-top:3px;font-size:.625rem;color:var(--text3)}
.ifsQuotes span i{font-style:normal;min-width:0}
.ifsQuotes span i::before{content:"→ "}
.ifsQuotes em{flex:0 0 auto;margin-left:auto;font:500 .5625rem/1.4 var(--font-num);font-style:normal}
.ifsCtx{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.ifsCtx span,.ifsQuiet span{padding:3px 7px;border-radius:var(--r-pill);background:var(--card);font-size:.625rem;color:var(--text2)}
.ifsNums{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:9px}
.ifsNums span{display:flex;flex-direction:column;gap:3px;font-size:.5625rem;color:var(--text3)}
.ifsNums b{font:600 .8125rem/1 var(--font-num);color:var(--text)}
.ifsQuiet{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:8px 4px 0}
.ifsQuiet small,.ifsQuestion small,.ifsPattern small{font:700 .59375rem/1 var(--font-num);letter-spacing:.08em;color:var(--text3)}
.ifsQuiet small{margin-right:4px;text-transform:uppercase}
.ifsQuiet span{color:var(--text3);background:transparent;border:1px dashed var(--line)}
.ifsQuestion{margin-top:12px;padding:10px 11px;border-radius:var(--r-inner);background:rgba(167,139,250,.09);border:1px solid rgba(167,139,250,.18);font-size:.78125rem;line-height:1.42;color:var(--text)}
.ifsQuestion small{display:block;margin-bottom:6px;color:rgba(167,139,250,1)}
.ifsPattern{margin-top:6px;padding:8px 11px;border-radius:var(--r-inner);background:rgba(255,255,255,.025)}
.ifsPattern summary{list-style:none;cursor:pointer;font-size:.6875rem;line-height:1.38;color:var(--text2)}
.ifsPattern summary::-webkit-details-marker{display:none}
.ifsPattern small{display:block;margin-bottom:5px}
.ifsPattern[open] summary span{display:none}
.ifsPattern p{margin:0;font-size:.6875rem;line-height:1.42;color:var(--text2)}
.ifsSource{margin:12px 4px 0;color:var(--text3);font:500 .625rem/1.2 var(--font-num);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ifsEmpty{padding:10px 4px;font-size:.75rem;color:var(--text3)}
@media(max-width:480px){.ifsRow{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 20px 34px;gap:6px}}

/* ── SPOTIFY: боковая панель-плеер (та же колонка, что FOCUS TIMER / DUDE!) ── */
body.spDocked{padding-right:var(--ftW);transition:padding-right .22s ease}
@media (min-width:700px) and (pointer:fine){body.spDocked .sideGrip{display:block}}
body.sideResizing .spPop{transition:none!important}
.spPop{gap:10px}
.spBtn{position:relative}
.spBtn.spOn{color:#1ed760}
.spEq{display:none;position:absolute;right:3px;bottom:4px;height:7px;gap:1px;align-items:flex-end}
.spBtn.spOn .spEq{display:flex}
.spEq b{width:2px;height:100%;border-radius:1px;background:#1ed760;animation:spEq 1s ease-in-out infinite;transform-origin:bottom}
.spEq b:nth-child(2){animation-delay:-.4s}.spEq b:nth-child(3){animation-delay:-.7s}
@keyframes spEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.spCard{display:grid;gap:8px;padding:10px;border-radius:var(--r-card);background:var(--card)}
.spArt{display:block;aspect-ratio:1;border-radius:var(--r-inner);overflow:hidden;background:var(--surface2)}
.spArt img{width:100%;height:100%;object-fit:cover;display:block}
.spMeta{display:grid;gap:2px;min-width:0}
.spMeta b{font:650 0.8125rem/1.25 var(--font-ui);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spMeta span{font:500 0.6875rem/1.25 var(--font-ui);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spProg{height:3px;border-radius:2px;background:color-mix(in srgb,var(--text) 12%,transparent);overflow:hidden}
.spProg i{display:block;height:100%;background:#1ed760;transition:width 1s linear}
.spTimes{display:flex;justify-content:space-between;margin-top:-4px;font:600 0.5625rem/1 var(--font-num);color:var(--text3);font-variant-numeric:tabular-nums}
.spCtrls{display:flex;align-items:center;justify-content:center;gap:10px}
.spB{width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--text2)}
.spB:hover:not(:disabled){background:var(--surface2);color:var(--text)}
.spB:disabled{opacity:.35;cursor:default}
.spB .ftIc{width:15px;height:15px}
.spB.spPlay{width:42px;height:42px;background:var(--text);color:var(--bg)}
.spB.spPlay:hover{background:var(--text);color:var(--bg);transform:scale(1.05)}
.spB.spPlay .ftIc{width:17px;height:17px}
.spDev{display:flex;align-items:center;gap:6px;padding:0 4px;font:500 0.625rem/1.2 var(--font-ui);color:var(--text3)}
.spDev .ic{width:11px;height:11px;flex:none}
.spDev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spEmpty{display:grid;gap:6px;padding:18px 8px;text-align:center;font:600 0.75rem/1.3 var(--font-ui);color:var(--text2)}
.spEmpty small{font-weight:500;font-size:0.6562rem;color:var(--text3)}
.spIdle .spArt,.spIdle .spMeta{opacity:.45;filter:saturate(.6)}
.spSleep{display:grid;gap:10px;padding:2px 4px;font:500 0.75rem/1.4 var(--font-ui);color:var(--text3);text-align:center}
.spOpen{justify-self:center;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:var(--r-pill);background:#1ed760;color:#000;font:700 0.8125rem/1 var(--font-ui);text-decoration:none}
.spOpen:hover{filter:brightness(1.08)}
.spDevs{display:grid;gap:4px}
.spDevs small{padding:0 4px;font:600 0.625rem/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.spDevB{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-inner);background:none;color:var(--text2);font:500 0.75rem/1.2 var(--font-ui);text-align:left;cursor:pointer}
.spDevB:hover{background:var(--surface2);color:var(--text)}
.spDevB .ftIc{flex:none;width:13px;height:13px;color:var(--text3)}
.spDevB span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v-156 колонка Spotify «сейчас играет» - «Волна» (класс spSk-* на #spPop) */
.spPop.spLive{isolation:isolate;--sp1:#5b5bd6;--sp2:#c2417a;--sp3:#2f8f9d;--sp4:#d98b2b;--spDom:#3a3a4a}
.spLive .spBar{position:relative;display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.22)}
.spLive .spBar i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:#fff;transition:width 1s linear}
.spNoArt{display:grid;place-items:center;aspect-ratio:1;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)}
.spNoArt .ic{width:30%;height:30%}
.spPop{overflow-anchor:none}
.spPop .ftHead b{min-width:0;overflow:hidden}
.spPop .ftHead b+.ftIcon{margin-left:auto}



/* 3 · «Волна»: обложка в край колонки с названием поверх (Яндекс), волна SoundCloud с отражением, play в переливающемся сгустке (Моя волна) */
.spSk-wave .ftHead{position:absolute;top:6px;left:10px;right:10px;z-index:3}
.spSk-wave .ftHead b,.spSk-wave .ftHead .ftIcon{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.spSk-wave .ftHead .ftIcon{background:rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.spW{flex:1;display:flex;flex-direction:column;gap:18px;min-height:0;padding-bottom:8px}
.spWHero{position:relative;margin:-6px -10px 0;aspect-ratio:1/1.12;flex:1 0 auto;overflow:hidden}
.spWArt{position:absolute;inset:0;display:block}
.spWArt img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 8s ease}
.spWHero:hover .spWArt img{transform:scale(1.12)}
.spWArt.spNoArt{aspect-ratio:auto}
.spWHero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 45%,color-mix(in srgb,var(--bg) 70%,transparent) 80%,var(--bg))}
.spWCap{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;display:grid;gap:3px;pointer-events:none}
.spWCap b{font:800 1.375rem/1.08 var(--font-ui);letter-spacing:-.02em;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spWCap span{font:600 0.8125rem/1.2 var(--font-ui);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spWave{position:relative;height:64px}
.spWLane{position:absolute;inset:0;display:flex;gap:2px;align-items:stretch}
.spWLane i{flex:1;position:relative}
.spWLane i::before,.spWLane i::after{content:"";position:absolute;left:0;right:0;background:color-mix(in srgb,var(--text) 32%,transparent);border-radius:1px}
.spWLane i::before{bottom:30%;height:calc(var(--h) * 70%)}
.spWLane i::after{top:71%;height:calc(var(--h) * 29%);opacity:.45}
.spWPlayed{clip-path:inset(0 calc(100% - var(--p)) 0 0);transition:clip-path 1s linear}
.spWPlayed i::before,.spWPlayed i::after{background:linear-gradient(var(--spAcc,#ff7a1a),var(--spAcc2,#ff3d00))}
.spWT{position:absolute;top:calc(70% - 16px);z-index:1;padding:2px 4px;border-radius:3px;background:#111;color:#fff;font:600 0.5625rem/1 var(--font-num);font-variant-numeric:tabular-nums}
.spWave .spPos{left:0;color:var(--spAcc,#ff7a1a)}
.spWDur{right:0}
.spWCtrls{display:flex;align-items:center;justify-content:space-between;padding:4px 2%}
.spWB{border:0;background:none;color:var(--text);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:transform .12s}
.spWB:active{transform:scale(.88)}
.spWB .ftIc{width:22px;height:22px}
.spWOrb{position:relative;width:96px;height:96px;display:grid;place-items:center;flex:none}
.spWOrb i{position:absolute;inset:6px;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;background:conic-gradient(from 0deg,var(--sp1),var(--sp2),#ff5500,var(--sp3),var(--sp1));filter:blur(10px);opacity:.85;animation:spOrb 9s linear infinite}
.spWOrb i+i{inset:12px;background:conic-gradient(from 180deg,var(--sp4),#ff3d6e,var(--sp2),var(--sp4));animation-duration:13s;animation-direction:reverse;opacity:.7;mix-blend-mode:screen}
@keyframes spOrb{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12);border-radius:58% 42% 37% 63%/55% 59% 41% 45%}100%{transform:rotate(360deg) scale(1)}}
.spPaused .spWOrb i{animation-play-state:paused;opacity:.35;filter:blur(12px) saturate(.5)}
.spWPlay{position:relative;z-index:1;width:62px;height:62px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s}
.spWPlay:hover{transform:scale(1.06)}
.spWPlay:active{transform:scale(.92)}
.spWPlay .ftIc{width:24px;height:24px}
.spWDev{display:flex;align-items:center;justify-content:center;gap:6px;font:600 0.6875rem/1.2 var(--font-ui);color:var(--text3)}
.spWDev .ic{width:12px;height:12px;flex:none}
@media (pointer:coarse){.spSk-wave .ftHead{left:12px;right:12px}.spWHero{margin:-6px -12px 0}}
/* v-159 «Волна» + из Spotify: размытая обложка снизу и переливы цветов обложки, перемотка по волне, shuffle/repeat, громкость, устройства */
.spW{position:relative}
.spWBg{position:absolute;z-index:-1;left:-10px;right:-10px;top:min(46%,340px);bottom:-10px;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(transparent,#000 22%);mask:linear-gradient(transparent,#000 22%)}
.spWBg i{position:absolute;inset:-40px;background:var(--spArt) center/cover;filter:blur(36px) saturate(1.5);opacity:.5;transform:scale(1.2)}
.spWBg b{position:absolute;width:150%;aspect-ratio:1;left:-25%;top:10%;border-radius:50%;opacity:.38;mix-blend-mode:screen;filter:blur(30px);
  background:conic-gradient(from 0deg,var(--sp1),var(--sp2),#ff5500,var(--sp3),var(--sp4),var(--sp1));animation:spOrb 17s linear infinite}
.spWBg b+b{top:45%;left:-40%;opacity:.3;background:conic-gradient(from 90deg,var(--sp3),#ff3d6e,var(--sp1),var(--sp4),var(--sp3));animation-duration:26s;animation-direction:reverse}
html.light .spWBg b{mix-blend-mode:multiply;opacity:.22}
.spPaused .spWBg b{animation-play-state:paused}
.spWave{cursor:pointer}
.spWave:hover .spWLane:not(.spWPlayed) i::before{background:color-mix(in srgb,var(--text) 46%,transparent)}
.spWTog{position:relative;width:36px;height:36px;color:var(--text3)}
.spWTog .ftIc{width:18px;height:18px}
.spWTog.on{color:var(--spAcc,#ff7a1a)}
.spWTog.on::after{content:"";position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.spWTog em{position:absolute;top:5px;right:4px;font:800 0.5rem/1 var(--font-num);font-style:normal}
.spWCtrls{padding:4px 0;gap:2px}
.spWCtrls .spWB{flex:0 1 40px;min-width:26px}
.spWCtrls .spWTog{flex-basis:34px}
.spWOrb{width:clamp(64px,38%,88px);height:auto;aspect-ratio:1;flex:0 1 auto}
.spWOrb .spWPlay{width:70%;height:70%}
.spWVol{display:flex;align-items:center;gap:8px;color:var(--text3);padding:0 4px}
.spWVol .ftIc{width:14px;height:14px;flex:none}
.spWVol input{flex:1;min-width:0;height:18px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.spWVol input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--spAcc,#ff7a1a),var(--spAcc2,#ff3d00)) 0/var(--v) 100% no-repeat,color-mix(in srgb,var(--text) 22%,transparent)}
.spWVol input::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--spAcc,#ff7a1a),var(--spAcc2,#ff3d00)) 0/var(--v) 100% no-repeat,color-mix(in srgb,var(--text) 22%,transparent)}
.spWVol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:scale(0);transition:transform .15s}
.spWVol input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.spWVol:hover input::-webkit-slider-thumb,.spWVol input:active::-webkit-slider-thumb,.spWVol input:focus-visible::-webkit-slider-thumb{transform:scale(1)}
.spWVol output{width:22px;text-align:right;font:600 0.625rem/1 var(--font-num);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s}
.spWVol:hover output,.spWVol:focus-within output{opacity:1}
@media (pointer:coarse){.spWVol input::-webkit-slider-thumb{transform:scale(1.2)}.spWVol output{opacity:1}}
.spWDev{border:0;background:none;width:100%;color:#1ed760;justify-content:flex-start;font:700 0.75rem/1.2 var(--font-ui);padding:6px 4px;border-radius:8px;cursor:pointer}
.spWDev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spWDev:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.spWDev.open small{color:#1ed760}
.spWDevs{display:grid;gap:2px;margin-top:-14px;padding:4px;border-radius:10px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(14px)}
.spWDevs>small{padding:6px;color:var(--text3);font:500 0.6875rem/1.3 var(--font-ui)}
.spWDevB{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--text);padding:7px 6px;border-radius:7px;font:600 0.75rem/1.2 var(--font-ui);text-align:left;cursor:pointer}
.spWDevB:hover{background:color-mix(in srgb,var(--text) 9%,transparent)}
.spWDevB .ic{width:13px;height:13px;flex:none}
.spWDevB span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spWDevB.on{color:#1ed760}
.spWDevB small{font-size:0.625rem;font-weight:600}


.spSk-wave .ftHead b{display:none}

@media (prefers-reduced-motion:reduce){.spWBg b{animation:none!important}}

@media (prefers-reduced-motion:reduce){.spWOrb i{animation:none!important}}
.spNote{margin-top:auto;padding:0 4px;font:500 0.625rem/1.3 var(--font-ui);color:var(--text3);opacity:.8}
/* плашка как нативный мини-плеер Spotify: плавающая карточка справа внизу; body резервирует под неё место внизу,
   чтобы последние блоки не оставались под ней; не заходит под открытые TIMER / DUDE! */
:root{--spMiniH:88px}
body.spMiniOn{padding-bottom:calc(var(--spMiniH) + 24px + env(safe-area-inset-bottom))}
.spMini{position:fixed;z-index:140;right:var(--spR,12px);bottom:calc(var(--spB,12px) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;
  width:min(380px,calc(100vw - 24px));height:var(--spMiniH);padding:0 12px 0 0;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);border-radius:18px;background:#000;box-shadow:0 10px 32px rgba(0,0,0,.55);transition:right .22s ease}
.spMini[hidden]{display:none}
body.ftDocked .spMini{right:calc(var(--ftW) + var(--spR,12px))}
body.msgDocked .spMini{right:calc(var(--msgW) + var(--spR,12px))}
.spMArt{flex:none;width:66px;height:66px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#1a1a1a;color:#888}
.spMArt img{width:100%;height:100%;object-fit:cover;display:block}
.spMArt .ic{width:22px;height:22px}
.spMMeta{min-width:0;flex:1 1 auto;display:grid;gap:4px;align-content:center;align-self:stretch;padding:0 2px;border:0;background:none;text-align:left;cursor:pointer;color:#a7a7a7}
.spMT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 0.9375rem/1.25 var(--font-ui)}
.spMT b{font-weight:600;color:#fff}
.spMMeta small{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap;font:600 0.8125rem/1.2 var(--font-ui);color:#1ed760}
.spMMeta small .ftIc{flex:none;width:14px;height:14px}
.spMMeta small.spMWarn{color:#a7a7a7;font-weight:500}
.spMMeta small:empty{display:none}
.spMB{flex:none;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.spMB .ftIc{width:22px;height:22px}
.spMB.spMPlay{width:50px;height:50px;background:#fff;color:#000}
.spMB.spMPlay:hover{transform:scale(1.05)}
.spMB.spMPlay .ftIc{width:20px;height:20px}
/* левая полоска как у нативного: красная точка (убрать плашку, × при наведении) сверху, хваталка из точек снизу - тянуть */
.spMSide{flex:none;align-self:stretch;width:26px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 0 12px;cursor:grab;touch-action:none}
.spMDrag,.spMDrag .spMSide{cursor:grabbing}
.spMDrag{transition:none;user-select:none}
.spMDot{position:relative;width:28px;height:28px;border:0;padding:0;background:none;display:grid;place-items:center;cursor:pointer;color:transparent}
.spMDot::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#ff5f57}
.spMDot .ftIc{position:relative;width:7px;height:7px}
.spMDot:hover,.spMDot:focus-visible{color:#5a0d0a}
.spMGrip{width:6px;height:16px;background:radial-gradient(circle,#777 1.1px,transparent 1.4px) 0 0/3px 4px repeat;opacity:.8}
.spMSide:hover .spMGrip{opacity:1}
@media (pointer:coarse){.spMSide{width:30px}.spMDot{width:32px;height:32px}.spMDot::before{width:14px;height:14px}}
.spMDim img,.spMMeta.spMDim .spMT{opacity:.5}
a.spMB{text-decoration:none}
.spMB.spMWake{background:#1ed760;color:#000}
.spMProg{position:absolute;left:34px;bottom:0;max-width:calc(100% - 46px);height:2px;border-radius:2px;background:#fff;transition:width 1s linear}
@media (max-width:699px){body.msgDocked .spMini,body.ftDocked .spMini{right:var(--spR,12px)}}
@media (pointer:coarse){.spB{width:44px;height:44px}.spB.spPlay{width:52px;height:52px}.spMeta b{font-size:0.9375rem}.spMeta span{font-size:0.8125rem}}
@media (prefers-reduced-motion:reduce){.spEq b{animation:none}.spProg i,.spMProg,.spMini{transition:none}}
/* DUDE! «Я жду»: @waiting из Todoist под «Ждут ответа» */
.waitBox{margin-top:14px}
.msgSecBox[data-sec="wait"],.waitRow{--sec:#a78bfa}
.waitRow{grid-template-columns:minmax(0,1fr)!important}
.waitRow .msgTop b{white-space:normal;overflow:visible}
.waitMeta{font:500 .6875rem/1.3 var(--font-num);color:var(--text3)}
.waitMeta:empty{display:none}
.waitRow.late time{color:#fbbf24}
.waitActs{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.waitActs button{padding:4px 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--text2);font:600 .6875rem/1 var(--font-ui);cursor:pointer}
.waitActs button:hover{background:var(--surface2);color:var(--text)}
.waitActs button:first-child:hover{color:#4ade80}
.tgQr{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,44px));width:fit-content;max-width:100%;margin-top:8px;padding:2px;border-radius:var(--r-inner);box-shadow:inset 0 0 0 1px var(--line)}
.tgQr button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;height:40px;padding:0 2px;border:0;border-radius:calc(var(--r-inner) - 2px);background:none;transition:background .15s ease,transform .1s ease}
.tgQr button b{font-size:1rem;line-height:1;font-weight:400}.tgQr button i{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 .5625rem/1 var(--font-ui);font-style:normal;color:var(--text3)}
.tgQr button i:empty{display:none}
.tgQr button:hover{background:var(--surface2)}.tgQr button:active{transform:scale(.9)}
.tgQr .tgQrOwn b{color:var(--text3);font-size:.8125rem}.tgQr .tgQrOwn:hover b{color:var(--text)}
/* быстрые ответы (v-337): пример сообщения + превью, сетка плиток-реакций, редактор выбранной */
.rxGridHead small,.rxEd small{font:400 .6875rem/1.35 var(--font-ui);color:var(--text3)}
.rxGridHead{display:flex;align-items:baseline;gap:10px;padding:16px 0 10px}
.rxGridHead b{font:600 .9375rem/1.2 var(--font-ui);color:var(--text)}
.rxUndo{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 .75rem/1 var(--font-ui);color:var(--text2)}
.rxGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.rxTile{display:flex;align-items:center;gap:8px;min-height:46px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-align:left;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.rxTile:hover{background:var(--card-hover)}
.rxTileE{flex:none;font-size:1.5rem;line-height:1}
.rxTileT{flex:1;min-width:0;font:500 .6875rem/1.25 var(--font-ui);color:var(--text2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rxTile.off{opacity:.4}.rxTile.off .rxTileE{filter:grayscale(1)}
.rxTile.sel{border-color:var(--accent)}
/* сколько на сообщение: три сегмента, в каждом мини-пузырь и N кнопок под ним */
.rxN{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface2)}
.rxN button{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 10px;border:0;border-radius:10px;background:none;color:var(--text3);cursor:pointer;transition:background .15s ease,color .15s ease}
.rxN button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.rxN button.on{background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.rxN button b{font:600 .9375rem/1 var(--font-num)}
.rxNPv{display:flex;flex-direction:column;gap:3px;width:36px}
.rxNPv .rxNMsg{display:block;width:24px;height:7px;border-radius:4px 4px 4px 1px;background:currentColor;opacity:.45}
.rxNPv span{display:flex;gap:2px}
.rxNPv span i{flex:1 1 0;height:6px;border-radius:3px;background:currentColor;opacity:.75}
.rxN button.on .rxNPv span i{background:var(--accent);opacity:1}
.rxTileAdd{justify-content:center;border-style:dashed;color:var(--text3);font:500 .6875rem/1 var(--font-ui)}.rxTileAdd span{font:inherit;letter-spacing:normal;white-space:nowrap}.rxTileAdd svg{width:var(--ic-l);height:var(--ic-l)}
.rxModalBg{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.rxEd{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:18px;background:var(--card-solid);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.rxEd label{display:flex;flex-direction:column;gap:5px}
.rxEd input{height:40px;padding:0 12px;border:0;border-radius:10px;background:var(--surface2);color:var(--text);font:500 .875rem/1 var(--font-ui);outline:none;min-width:0}
.rxEd input:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.rxEdHead{display:flex;align-items:center;gap:10px}
.rxEd .rxE{flex:none;width:56px;height:56px;padding:0;border-radius:50%;text-align:center;font-size:1.75rem}
.rxEd .rxEdTx{flex:1;height:48px;font-size:1rem;font-weight:600}
.rxEdX{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--text3);cursor:pointer}.rxEdX:hover{background:var(--surface2);color:var(--text)}.rxEdX svg{width:var(--ic-m);height:var(--ic-m)}
.rxEdBar{display:flex;align-items:center;gap:6px;padding-top:4px}.rxEdSw{display:flex;align-items:center;gap:8px;margin-right:auto}
#rxRow > .dudeKeysBtns{padding:12px 0 4px}
@media (max-width:599px){.rxEd{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.rxGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.rxTile{padding:7px 8px;gap:6px}.rxTileE{font-size:1.375rem}}
.tgQrForm{flex-wrap:nowrap}.tgQrIn{flex:1;min-width:0;padding:5px 10px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent;color:var(--text);font:500 .75rem/1.2 var(--font-ui);outline:none}.tgQrIn:focus{border-color:var(--accent)}
.tgReplied{opacity:.75;font-style:italic}
.waitRow.busy{opacity:.6}
.waitRow.gone{opacity:0;transform:translateX(-12px);transition:opacity .2s,transform .2s}

/* DUDE! «Вернуть» после ✓ / ⏰ */
.msgUndo{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:8px 8px 8px 12px;border-radius:10px;background:var(--text);color:var(--bg);font:600 var(--fs-body)/1.2 var(--font-ui);animation:msgUndoIn .18s ease-out}
.msgUndo button{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:7px;padding:5px 9px;background:color-mix(in srgb,var(--bg) 16%,transparent);color:inherit;font:700 var(--fs-meta)/1 var(--font-ui);cursor:pointer}
.msgUndo button:hover{background:color-mix(in srgb,var(--bg) 26%,transparent)}
@keyframes msgUndoIn{from{opacity:0;transform:translateY(6px)}}

/* STORYTELL шириной 2 / ↔: карточки историй в одну строку (слайдер) вместо карусели, клик - окно STORYTELL */
.stNew{font-style:normal;font:600 0.625rem/1 var(--font-num);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 6px;vertical-align:2px}

/* ── STORYTELL: story id + color tag, full-screen module (bank / picked, markdown view + edit) ── */
.stIdLine{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.stId{font:600 0.6875rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text2);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:3px 6px;letter-spacing:.02em}
.stTag{display:inline-flex;align-items:center;gap:4px;font-size:0.6875rem;font-weight:600;line-height:1;padding:4px 8px;border-radius:var(--r-pill,999px);color:var(--tag);background:color-mix(in srgb,var(--tag) 16%,transparent);border:0}
.stTag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tag)}
.storyHeadTop .stId{margin-right:2px}
body.stfLock{overflow:hidden}
.stFull{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:crmFade .18s ease}
.stfBox{position:relative}
.stFull.full{padding:calc(env(safe-area-inset-top) + 4px) 4px calc(env(safe-area-inset-bottom) + 4px)}
.stFull.full .stfBox{width:100%;border-radius:12px}
.stFull.full .crmFullIc .i-max,.stFull:not(.full) .crmFullIc .i-min{display:none}
.stfBarBtns{margin-left:auto;display:flex;gap:2px}
@media (max-width:699px){.stFull{padding:0}.stfBox{border-radius:0;border:0}}
.stFull.hidden{display:none}
/* STORYTELL как раздел (вкладка в меню): окно под меню, без затемнения, попапы меню (z 150) поверх */
html.view-st .stFull{top:var(--stTop,0px);z-index:25;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;padding:4px 4px calc(env(safe-area-inset-bottom) + 4px)}
html.view-st .stFull .stfBox{height:100%;max-height:none;box-shadow:none;animation:none}
.stfHead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 10px 12px 18px;user-select:none;border-bottom:1px solid var(--line)}
.stfTitle,.stfBarBtns{flex-shrink:0}
@media (min-width:761px){.stfHead{flex-wrap:nowrap}}
.stfTitle{font-family:var(--font-display);font-size:1.125rem;letter-spacing:.04em}
.stfTabs{display:flex;flex-shrink:0;background:var(--card);border-radius:var(--r-pill,999px);padding:3px}
.stfTabs button{border:0;background:transparent;color:var(--text2);padding:7px 14px;border-radius:var(--r-pill,999px);font:inherit;font-size:0.8125rem;cursor:pointer;white-space:nowrap}
.stfTabs button.on{background:var(--card-hover,rgba(255,255,255,.08));color:var(--text);font-weight:600}
.stfTabs i{font-style:normal;color:var(--text3);margin-left:3px}
#stfQ{display:none;width:150px;min-width:0;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:5px 9px;font:inherit;font-size:0.75rem}
.stfSearch{display:flex;align-items:center}
.stfSearch.on #stfQ{display:block}
.stfSearch.on .stfSearchBtn{display:none}
.stfSearchBtn{border:0;background:var(--card);color:var(--text3);border-radius:9px;width:30px;height:28px;display:grid;place-items:center;padding:0;cursor:pointer}
.stfSearchBtn:hover{color:var(--text)}
.stfSearchBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.stfGrid{flex:1;overflow:auto;padding:14px 16px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-content:start}
/* карточка как в блоке STORYTELL дашборда, только компактнее */
.stfCard{min-width:0;cursor:pointer;background:var(--card);border-radius:var(--r-card);padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px;transition:background .18s ease}
.stfCard:hover,.stfCard.cur{background:var(--card-hover)}
.stfMeta{display:flex;align-items:center;gap:6px}
.stfDot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--tag)}
.stfMeta .stId{flex:none}
/* метки карточки: тема, «пост», сердечко - разные по форме и цвету */
.stfTopic{min-width:0;display:inline-flex;align-items:center;gap:5px;font-size:0.6875rem;line-height:1;color:color-mix(in srgb,var(--tag) 80%,var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stfTopic .stfDot{width:6px;height:6px}
.stfTopic span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.stfPostTag{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:0.6875rem;line-height:1;font-weight:600;color:#f0b03a;background:color-mix(in srgb,#f0b03a 14%,transparent);border-radius:999px;padding:3px 7px 3px 5px}
.stfPostTag svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Читать | Редактировать */
.stfMode{display:flex;background:var(--card);border-radius:10px;padding:3px}
.stfMode button{white-space:nowrap;border:0;background:transparent;color:var(--text2);border-radius:8px;padding:6px 12px;font:inherit;font-size:0.8125rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s ease,color .15s ease}
.stfMode button:hover:not(:disabled){color:var(--text)}
.stfMode button.on{background:var(--card-hover,rgba(255,255,255,.08));color:var(--text);font-weight:600}
.stfMode button:disabled{opacity:.4;cursor:default}
.stfDirty{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.stfCardTitle{font-size:0.875rem;line-height:1.4;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stfCardText{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stfPick{flex:none;margin-left:auto;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--text3);cursor:pointer;display:grid;place-items:center;padding:0}
.stfPick svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.stfPick:hover{color:var(--text)}
.stfPick.on{color:#f5b83d}.stfPick.on svg{fill:currentColor}
.stfCard:not(.picked):not(:hover) .stfPick{opacity:.5}
.stfMeta{display:flex;align-items:center;gap:6px}
.stfEmpty{grid-column:1/-1;color:var(--text3);text-align:center;padding:40px 0;font-size:0.875rem}
.stfView{position:absolute;inset:0;background:var(--card-solid);display:flex;flex-direction:column;animation:fadeIn .14s ease both}
.stfView.hidden{display:none}
.stfVHead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px;border-bottom:1px solid var(--line)}
.stfVNav{display:flex;align-items:center;gap:2px}.stfSpacer{flex:1}
.stfPos{min-width:52px;text-align:center;font-size:0.75rem;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.stfIcBtn{flex:none;width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--text2);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s ease,color .15s ease}
.stfIcBtn:hover:not(:disabled){background:var(--card);color:var(--text)}
.stfIcBtn:disabled{opacity:.3;cursor:default}
.stfIcBtn.on{background:var(--card);color:var(--text)}
.stfIcBtn svg,.stfViewSw svg,.stfMode svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stfMode svg{width:15px;height:15px;opacity:.85}
.stfViewSw{display:flex;flex-shrink:0;background:var(--card);border-radius:10px;padding:3px}
.stfViewSw button{border:0;background:transparent;color:var(--text3);border-radius:8px;width:30px;height:28px;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .15s ease,color .15s ease}
.stfViewSw button:hover{color:var(--text)}
.stfViewSw button.on{background:var(--card-hover,rgba(255,255,255,.08));color:var(--text)}
.stfViewSw rect{stroke-width:1.7}
.stfViewSw circle{fill:currentColor}
.stfVMain{flex:1;min-height:0;display:flex}
.stfVMain .stfVBody{flex:1;min-width:0}
.stfToc{flex:0 0 220px;overflow:auto;padding:26px 18px 22px 4px;display:flex;flex-direction:column;gap:2px;animation:fadeIn .14s ease both}
.stfTocHead{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);font-weight:600;padding:0 0 8px 12px}
.stfTocItem{border:0;background:transparent;text-align:left;font:inherit;font-size:0.8125rem;line-height:1.35;color:var(--text3);padding:6px 10px;border-left:2px solid var(--line);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.stfTocItem.sub{padding-left:22px}
.stfTocItem:hover{color:var(--text)}
.stfTocItem.on{color:var(--text);border-left-color:var(--accent)}
.stfView{container-type:inline-size}
@container (max-width:780px){.stfToc,.stfTocBtn{display:none}}
.stfGrid.asList{grid-template-columns:1fr !important;gap:2px}
.stfGrid.asList .stfCard{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:8px;row-gap:1px;padding:8px 6px 8px 10px;border-radius:10px;background:transparent}
.stfGrid.asList .stfCard:hover,.stfGrid.asList .stfCard.cur{background:var(--card-hover)}
.stfGrid.asList .stfMeta{display:contents}
.stfGrid.asList .stId{grid-column:1;grid-row:1}
.stfGrid.asList .stfTopic{display:none}
.stfGrid.asList .stfCardTitle{grid-column:2;grid-row:1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stfGrid.asList .stfPostTag{grid-column:3;grid-row:1;padding:3px;font-size:0}
.stfGrid.asList .stfPostTag svg{width:11px;height:11px}
.stfGrid.asList .stfPick{grid-column:4;grid-row:1/3;width:26px;height:26px;margin:0}
.stfGrid.asList .stfCardText{grid-column:2/4;grid-row:2;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.75rem;color:var(--text3)}
.stfBtn{border:0;background:var(--card);color:var(--text);border-radius:10px;padding:8px 12px;font:inherit;font-size:0.8125rem;cursor:pointer}
.stfBtn:disabled{opacity:.35;cursor:default}
.stfBtn.on{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.stfBtn.gold{background:var(--accent);color:var(--bg);font-weight:600}
.stfVBody{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;align-items:center}
.stfVBody>*{width:100%;max-width:760px}
.stfMd{font-size:0.9375rem;line-height:1.65;color:var(--text)}
.stfMd h1{font-family:var(--font-display);font-size:1.5rem;line-height:1.25;margin:0 0 12px}
.stfMd h2,.stfMd h3{font-size:0.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin:22px 0 6px}
.stfMd p{margin:0 0 10px}
.stfMd blockquote{margin:6px 0 12px;padding:8px 14px;border-left:3px solid var(--accent);color:var(--text2);font-style:italic}
.stfMd ul,.stfMd ol{margin:0 0 10px;padding-left:22px}
.stfMd .stfNoPost{color:var(--text3);font-style:italic}
.stfMd h2.stfMatHead{margin:30px 0 4px;padding-top:16px;border-top:1px solid var(--line);color:var(--text2)}
.stfVMeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.stfSaveBar{display:flex;align-items:center;gap:8px;padding:8px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,var(--card-solid));font-size:0.8125rem;color:var(--text2);animation:fadeIn .14s ease both}
.stfSaveBar .stfBtn{padding:6px 12px}
/* узкое окно истории: кнопки режимов - только иконки; две колонки → одна под другой */
/* «Пост | Материал» - раскладка, не режим: слева пост, справа материал; в «Читать» оба отрисованы, в «Редактировать» оба - поля */
.stfDuoBtn{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--text2);border-radius:10px;padding:6px 11px;font:inherit;font-size:0.8125rem;white-space:nowrap;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.stfDuoBtn:hover:not(:disabled){color:var(--text)}
.stfDuoBtn.on{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent);font-weight:600}
.stfDuoBtn:disabled{opacity:.4;cursor:default}
.stfDuoBtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stfVBody.duo{overflow:hidden;padding-bottom:12px}
.stfVBody.duo>*{max-width:1500px}
.stfDuoTitle{font-family:var(--font-display);font-size:1.375rem;line-height:1.25;margin:0 0 14px;flex:none}
.stfDuo{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.stfDuoCol{min-height:0;display:flex;flex-direction:column}
.stfDuoPost{padding-right:22px;border-right:1px solid var(--line)}
.stfDuoMat{padding-left:22px}
.stfDuoHead{flex:none;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin:0 0 10px;font-weight:600}
.stfDuoScroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;padding-right:4px}
.stfDuoScroll>.stfMd>h2:first-child,.stfDuoScroll>.stfMd>h3:first-child{margin-top:0}
.stfDuoEd{flex:1;min-height:0;width:100%;resize:none;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;font-size:0.9375rem;line-height:1.65}
.stfDuoEd:focus{outline:none;border-color:var(--accent)}
.stfDuoEmpty{margin:0;padding:22px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--text3);font-size:0.875rem;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@container (max-width:620px){.stfVBody.duo{overflow:auto}.stfDuo{grid-template-columns:1fr;flex:none;gap:22px}.stfDuoPost{padding-right:0;border-right:0}.stfDuoMat{padding-left:0}.stfDuoScroll{overflow:visible}.stfDuoEd{min-height:45vh;resize:vertical}}
@container (max-width:720px){.stfMode button>span,.stfDuoBtn>span{display:none}.stfMode button,.stfDuoBtn{padding:6px 9px}}
.stfEditor{min-height:70vh;resize:vertical;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:16px;font:0.8125rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.stfPath{font-size:0.6875rem;color:var(--text3);margin:18px 0 0}
.stfMsg{font-size:0.8125rem;color:var(--accent);margin:6px 0 0}
@media (max-width:640px){.stfHead,.stfVHead{padding-left:14px;padding-right:14px}.stfGrid{padding:14px;grid-template-columns:1fr}.stfVBody{padding:16px 14px}}
.stfCol{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.stfListBar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px 0 10px;flex:none}
.stfListBar .stfViewSw{margin-left:auto}
.stfBoardSw{flex-shrink:0}
.stFull:not(.full) .stfBoardSw{display:none}
@media (max-width:699px){.stfBoardSw{display:none}}
.stfDd{position:relative;min-width:0}
.stfDdBtn{position:relative;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--text3);font:inherit;font-size:0.75rem;padding:6px 8px;border-radius:9px;cursor:pointer;white-space:nowrap}
.stfDdBtn:hover,.stfDdBtn.on{background:var(--card);color:var(--text)}
.stfDdBtn b{font-weight:500;font-variant-numeric:tabular-nums}
.stfDdBtn svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.stfDdBtn.narrowed{color:var(--text2)}
.stfDdBtn.narrowed::after{content:"";position:absolute;top:5px;left:18px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.stfDdBtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.stfDdPop{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:grid;grid-template-columns:repeat(2,minmax(150px,auto));gap:0 6px;max-height:min(70vh,460px);overflow:auto;padding:6px;background:var(--surface2);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.stfDdPop[hidden]{display:none}
.stfCk{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;font-size:0.8125rem;color:var(--text);cursor:pointer;white-space:nowrap}
.stfCk:hover{background:var(--card-hover)}
.stfCk input{margin:0;accent-color:var(--accent);cursor:pointer}
.stfCk span{flex:1}
.stfCk em{font-style:normal;font-size:0.6875rem;color:var(--text3);font-variant-numeric:tabular-nums}
.stfCkAll{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:2px}
@media (max-width:420px){.stfDdPop,.stfDdPop.cols3{grid-template-columns:1fr;min-width:200px}}
/* STORYTELL: обычное окно - сетка, история поверх; на весь экран - 30% темы | 70% история и редактор */
.stfMain{flex:1;min-height:0;display:flex;flex-direction:column}
@media (min-width:700px){
.stFull .stfMain{flex-direction:row}
.stFull .stfCol{flex:0 0 30%;max-width:30%;min-width:300px;border-right:1px solid var(--line)}
.stFull .stfGrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;padding:8px 10px}
.stFull .stfCard{padding:7px 9px 8px;gap:3px;border-radius:10px}
.stFull .stfGrid:not(.asList) .stfTopic span{display:none}
.stFull .stfGrid:not(.asList) .stfCardTitle{font-size:0.75rem;line-height:1.35;-webkit-line-clamp:3}
.stFull .stfGrid:not(.asList) .stfCardText{display:none}
.stFull .stfGrid:not(.asList) .stfPick{width:22px;height:22px}
.stFull .stfView{position:relative;inset:auto;flex:1;min-width:0;animation:none}
.stFull .stfView [data-stf=back]{display:none}
.stFull .stfVHead{flex-wrap:nowrap}
.stFull .stfVHead{gap:6px}
.stFull .stfEditor{min-height:calc(100vh - 230px)}
}
/* STORYTELL канбан: колонки стадий во всю ширину (фильтры панели остаются сверху), история открывается поверх */
.stfMain{position:relative}
.stfMain.kb .stfCol{flex:1;max-width:none;min-width:0;border-right:0}
.stfMain.kb .stfGrid{display:block;padding:10px 14px 20px;overflow:auto}
.stfMain.kb .stfView{position:absolute;inset:0;z-index:2}
.stFull .stfMain.kb .stfView [data-stf=back]{display:inline-flex}
.stfKb{display:flex;gap:10px;height:100%;min-height:0;align-items:stretch}
.stfKbCol{flex:1 0 230px;min-width:230px;display:flex;flex-direction:column;min-height:0;background:color-mix(in srgb,var(--card) 55%,transparent);border-radius:var(--r-card);border:1px dashed transparent;transition:border-color .15s ease,background .15s ease}
.stfKbCol.over{border-color:var(--st);background:color-mix(in srgb,var(--st) 8%,var(--card))}
.stfKbHead{display:flex;align-items:center;gap:7px;padding:10px 12px 8px;font-size:0.8125rem}
.stfKbHead .stfDot{background:var(--st)}
.stfKbHead b{font-weight:600;text-transform:capitalize}
.stfKbHead span{margin-left:auto;color:var(--text3);font-size:0.6875rem;font-variant-numeric:tabular-nums;opacity:.8}
.stfKbList{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:0 8px 10px}
.stfKbCard{padding:9px 10px 10px;gap:5px;cursor:grab}
.stfKbCard.drag{opacity:.4}
.stfKbCard .stfCardTitle{font-size:0.8125rem}
/* «→ дальше» видна всегда (раньше была прозрачной до hover - клик по низу карточки молча двигал её) */
.stfKbNext{align-self:flex-start;border:1px solid var(--line-strong);background:transparent;color:var(--text3);font:inherit;font-size:0.6875rem;padding:2px 8px;border-radius:999px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.stfKbNext:hover{color:var(--text);border-color:var(--text3)}
.stfKbCard.moved{box-shadow:0 0 0 2px var(--st);animation:stfMoved 1.2s ease}
@keyframes stfMoved{0%,40%{background:color-mix(in srgb,var(--st) 22%,var(--card))}}
#stfGrid:has(.stfKbUndo){position:relative}
.stfKbUndo{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:14px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line-strong);box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:0.8125rem;white-space:nowrap}
.stfKbUndo button{margin-left:auto;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.stfKbEmpty{color:var(--text3);font-size:0.75rem;text-align:center;margin:14px 0}
.stfStageSel{flex:none;font:inherit;font-size:0.75rem;font-weight:600;color:var(--st);background:color-mix(in srgb,var(--st) 14%,transparent);border:0;border-radius:999px;padding:5px 10px;cursor:pointer}
@media (max-width:700px){.stfKb{scroll-snap-type:x mandatory}.stfKbCol{flex:0 0 84%;scroll-snap-align:start}}
/* Spotify в навбаре: как индикатор таймера, только трек и базовые контролы */
.spNav{display:flex;align-items:center;gap:3px;height:var(--navH,34px);padding:0;min-width:0}
.spNav[hidden]{display:none}
.spNB{flex:none;width:22px;height:22px;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--text2);cursor:pointer;touch-action:manipulation}
.spNB:hover{background:var(--card-hover);color:var(--text)}
.spNB .ftIc{width:10px;height:10px}
.spNB.spNPlay{width:30px;height:30px;background:var(--text);color:var(--bg)}
.spNB.spNPlay:hover{background:var(--text);color:var(--bg);transform:scale(1.06)}
@media (pointer:coarse){.spNB{width:30px;height:30px}.spNB .ftIc{width:12px;height:12px}}

/* v-135 STORYTELL блок по wireframe: ＋ / ⤢ OPEN в шапке */
#storytellCard .stOpenBtn{font-size:0.9375rem}
#storytellCard .storytellSwipe{flex-direction:column;align-items:stretch;gap:6px}

/* обложка на кнопке пауза/играть: затемнение + белая иконка; на паузе обложка гаснет */
.spNB.spNArt,.spNB.spNArt:hover{background-color:#222;background-size:cover;background-position:center;color:#fff;border-radius:8px;width:36px;height:36px;margin:-3px 2px;position:relative;box-shadow:inset 0 0 0 100px rgba(0,0,0,.38)}
.spNB.spNArt:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.55)}
.spNB.spNArt.spNPaused{filter:grayscale(.7) brightness(.85)}
.spNB.spNArt .ftIc{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
@media (pointer:coarse){.spNB.spNArt{width:40px;height:40px}}

/* STORYTELL: карусель 2-1-2 (уже - 1-1-1 / одна с краями соседей). Все карточки одной ширины --cw и двигаются только
   transform'ом (--x/--y сдвиг, --sc масштаб) - текст не перетекает, заголовки везде одного кегля --tfs; --h - высота вёрстки.
   От 760px центральная поднимается в пустую середину шапки (stLift), а если наезжает на заголовок/пейджер - остаётся ниже */
#storytellCard{overflow:hidden;--hd:0px}
#storytellCard .storytellSwipe{min-height:0}
.stTrack{flex:1 1 340px;position:relative;min-height:150px;overflow:hidden;outline:none}
#storytellCard.stLift .storytellSwipe{margin-top:calc(-1 * var(--hd))}
#storytellCard.stLift .panelHead{pointer-events:none}
#storytellCard.stLift .panelHead > *{pointer-events:auto}
#storytellCard .stHeadL{display:flex;align-items:center;gap:8px;min-width:0}
/* v-228: второстепенное - в углы: ‹ 04/50 › ⏸ мелко в правом нижнем, ярче при наведении */
#storytellCard .stPager{margin:0 auto}
#storytellCard.stWide .stPager{margin:0 0 0 auto}
.stItem{
  --ease:cubic-bezier(.22,.8,.24,1);
  position:absolute;left:0;top:0;width:var(--cw);height:var(--h);transform-origin:0 0;
  transform:translate3d(var(--x),var(--y),0) scale(var(--sc,1));
  display:flex;flex-direction:column;gap:8px;padding:16px 18px 14px;border-radius:var(--r-card);
  background:linear-gradient(var(--card),var(--card)),var(--bg);border:1px solid var(--line);cursor:pointer;overflow:hidden;
  transition:transform .75s var(--ease),height .75s var(--ease),opacity .45s ease,border-color .5s ease,box-shadow .6s ease,filter .6s ease;
  will-change:transform;filter:saturate(.85) brightness(.92);
}
.stItem:not(.on):hover{border-color:var(--line-strong);filter:none}
.stItem.on{
  filter:none;
  background:linear-gradient(var(--card-hover),var(--card-hover)),var(--bg);
  border-color:var(--line-strong);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.7);
}
#storytellCard .stItem .storytellTitle{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:calc(var(--tfs,var(--fs-body)) * var(--fk,1));line-height:1.35;letter-spacing:-.005em;color:var(--text);text-wrap:balance}
.stText{flex:1;min-height:0;margin:0;overflow:hidden;font-size:calc(0.8125rem * var(--fk,1));line-height:1.55;color:var(--text3);transition:color .5s ease,opacity .4s ease;-webkit-mask-image:linear-gradient(#000 calc(100% - 1.2em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.2em),transparent)}
/* активная: текст листается колесом/пальцем, тает только последняя строка; долистал до конца - без затемнения */
.stItem.on .stText{color:var(--text2);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 1em),transparent);mask-image:linear-gradient(#000 calc(100% - 1em),transparent)}
.stItem.on .stText::-webkit-scrollbar{display:none}
.stItem.on.stEnd .stText{-webkit-mask-image:none;mask-image:none}
/* звезда - в правом верхнем углу каждой карточки (клик - снять, история уходит в backlog) */
.stItem .stfPick{position:absolute;top:10px;right:10px;margin:0;width:24px;height:24px;transition:transform .2s ease}
.stItem .stfPick svg{width:13px;height:13px}
.stItem .stfPick:hover{transform:scale(1.15)}
#storytellCard .stItem .storytellTitle{padding-right:20px}
/* обрезанные краем блока карточки - только заголовок */
.stItem.stMini{justify-content:center}
.stItem.stMini .stText{flex:0 0 0;opacity:0}
#storytellCard .stItem.stMini .storytellTitle{color:var(--text2)}
@media (prefers-reduced-motion:reduce){.stItem{transition:opacity .2s ease}}
/* навбар: меню слева (после логотипа, когда он виден), погода справа - перед кнопками */
.navControls [hidden]{display:none!important}
@media(min-width:900px){
  .tabs{justify-content:flex-start}
  .tabGroup{transition:margin-left .3s cubic-bezier(.2,.8,.2,1)}
  html.logoDocked .tabGroup{margin-left:calc(var(--navH) + 8px)}
  .tabsWeather{left:auto;right:calc(var(--navCtlW,180px) + 6px)}
}
/* v-169 iPad/iPhone: у колонки сверху отступ под статус-бар (10px + safe-area) - обложка и шапка его перекрывают, фон доходит до самого низа */
.spSk-wave .ftHead{top:calc(env(safe-area-inset-top) + 6px)}
.spSk-wave .spWHero{margin-top:calc(-10px - env(safe-area-inset-top))}
.spPop.spLive{overscroll-behavior:none}
/* v-172/174 B: низ - размытая затемнённая обложка вместо чёрного; блюр лежит под всей колонкой, обложка растворяется в нём без шва */
.spSk-soundcloud .spW{position:static}
.spSk-soundcloud .spWBg{inset:0;-webkit-mask:none;mask:none}
.spSk-soundcloud .spWBg i{opacity:1;filter:blur(40px) saturate(1.4)}
.spSk-soundcloud .spWBg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.5) 50%,rgba(0,0,0,.7))}
.spSk-soundcloud .spWHero::after{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%)}
.spSk-soundcloud .spWArt{-webkit-mask:linear-gradient(#000 50%,transparent);mask:linear-gradient(#000 50%,transparent)}

/* v-176 «Волна»: акцент из обложки (--spAcc), ♡ в любимые рядом с названием, «Дальше» - следующий трек и вся очередь */
.spWCap{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.spWCap>div{display:grid;gap:3px;min-width:0}
.spWLike{pointer-events:auto;border:0;background:none;width:38px;height:38px;margin:0 -6px -4px 0;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.85);cursor:pointer;transition:transform .15s,color .2s}
.spWLike .ftIc{width:24px;height:24px}
.spWLike:hover{color:#fff;transform:scale(1.08)}
.spWLike:active{transform:scale(.88)}
.spWLike.on{color:var(--spAcc,#ff7a1a)}
.spWLike:disabled{opacity:.35;cursor:default;transform:none}
.spWQ{display:grid;gap:2px;padding:4px;border-radius:10px;background:rgba(255,255,255,.07)}
.spWQ.open{background:rgba(255,255,255,.1)}
.spWQH{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:none;padding:5px 6px 3px;color:var(--text3);cursor:pointer}
.spWQH small{font:700 0.5625rem/1 var(--font-ui);text-transform:uppercase;letter-spacing:.08em}
.spWQH:hover{color:var(--text)}
/* трек очереди = кнопка «включить»: наведение - подсветка строки и ▶ поверх обложки; пока переключаем - ▶ пульсирует */
.spWQI{display:flex;align-items:center;gap:9px;min-width:0;flex:1;width:100%;border:0;background:none;padding:4px;border-radius:8px;color:var(--text);text-align:left;cursor:pointer;transition:background .15s}
.spWQI:hover:not(:disabled),.spWQI.busy{background:rgba(255,255,255,.1)}
.spWQI:disabled{cursor:default}
.spWQI>i{position:relative;flex:none;display:grid}
.spWQI>i::after{content:"";position:absolute;inset:0;border-radius:5px;background:rgba(0,0,0,.5);opacity:0;transition:opacity .18s}
.spWQI>i .ftIc{position:absolute;z-index:1;inset:0;margin:auto;width:14px;height:14px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s cubic-bezier(.3,1.6,.5,1)}
.spWQI:hover:not(:disabled)>i::after,.spWQI.busy>i::after{opacity:1}
.spWQI:hover:not(:disabled)>i .ftIc,.spWQI.busy>i .ftIc{opacity:1;transform:none}
.spWQI.busy>i .ftIc{animation:spQBusy .6s ease-in-out infinite alternate}
@keyframes spQBusy{to{transform:scale(1.35);opacity:.5}}
.spWQI img,.spWQNo{width:32px;height:32px;border-radius:5px;object-fit:cover;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.spWQNo .ic{width:14px;height:14px;opacity:.6}
.spWQI>span{display:grid;gap:2px;min-width:0}
.spWQI b{font:700 0.75rem/1.2 var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spWQI small{font:500 0.6875rem/1.2 var(--font-ui);color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spWQList{display:grid;gap:2px;margin-top:-6px;padding:4px;max-height:220px;overflow:auto;overscroll-behavior:contain;border-radius:10px;background:rgba(0,0,0,.22)}
.spWQList>small{color:var(--text3);font:500 0.6875rem/1.3 var(--font-ui);padding:4px}
/* v-179: перемешать / повтор / очередь / громкость спрятаны под «⋯» справа от кнопок */
.spWCtrls .spWGap{visibility:hidden;pointer-events:none}
.spWMoreB .spWDot{top:8px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--spAcc,#ff7a1a)}
.spWMoreB.on::after{display:none}
.spWMoreB .ftIc{width:20px;height:20px}
.spWMore{display:flex;flex-direction:column;gap:8px;padding:6px;margin:2px 0 4px;border-radius:14px;background:rgba(0,0,0,.28);animation:spWMoreIn .18s ease-out}
.spWMRow{display:flex;justify-content:center;gap:28px}
@keyframes spWMoreIn{from{opacity:0;transform:translateY(-4px)}}
/* v-231 низ колонки: устройство слева, «⋯» справа; меню «⋯» и список устройств раскрываются над полоской. Ряд кнопок - только ◀ ▶ ▶▶ по центру */
.spWCtrls{justify-content:center;gap:clamp(8px,6%,22px)}
.spWBot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.spWBot .spWDevs{margin:0}
.spWFoot{display:flex;align-items:center;gap:6px}
.spWDevBot{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:36px;padding:0 8px;border:0;border-radius:var(--r-inner);background:none;color:#1ed760;font:700 0.75rem/1 var(--font-ui);text-align:left;cursor:pointer}
.spWDevBot .ic{width:15px;height:15px;flex:none}
.spWDevBot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spWDevBot:hover,.spWDevBot.open{background:rgba(255,255,255,.08)}
.spWFoot .spWMoreB{flex:none}
/* v-238 ♡ и все иконки блока - одним семейством: голые, без подложек, контур 1.5, белые; включённое - цвет обложки (--spAcc).
   Размеры: ◀ ▶▶ 22px, ♡ / ⋯ / перемешать / повтор 20px. Наведение - чуть больше, нажатие - вжимается; лайк - сердце выпрыгивает, кольцо и искры */
.spWLike{position:relative;overflow:visible;width:40px;height:40px;margin:0 -8px -6px 0;border-radius:50%;background:none;color:var(--text);transition:color .2s}
.spWLike .ftIc,.spWTog .ftIc,.spWMoreB .ftIc{width:20px;height:20px}
.spWTog{width:40px;height:40px;color:var(--text2)}
.spWLike .ftIc,.spWB .ftIc{transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.spWLike:hover,.spWLike:active,.spWB:active{transform:none}
.spWLike:hover .ftIc,.spWB:hover .ftIc{transform:scale(1.12)}
.spWLike:active .ftIc,.spWB:active .ftIc{transform:scale(.82);transition-duration:.08s}
.spWLike.on{color:var(--spAcc,#ff7a1a)}
.spWLikeFx .ftIc{animation:spLikePop .55s cubic-bezier(.2,1.5,.4,1) var(--fx,0ms) both}
.spWLikeFx::before,.spWLikeFx::after{content:"";position:absolute;left:50%;top:50%;pointer-events:none;border-radius:50%}
.spWLikeFx::before{width:80%;height:80%;margin:-40% 0 0 -40%;border:2px solid var(--spAcc,#ff7a1a);animation:spLikeRing .5s ease-out var(--fx,0ms) both}
.spWLikeFx::after{width:4px;height:4px;margin:-2px 0 0 -2px;color:var(--spAcc2,#ff3d00);
  box-shadow:0 -18px,16px -9px,16px 9px,0 18px,-16px 9px,-16px -9px;animation:spLikeSpark .6s ease-out var(--fx,0ms) both}
@keyframes spLikePop{0%{transform:scale(.3)}45%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes spLikeRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.9);opacity:0;border-width:0}}
@keyframes spLikeSpark{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.spWLikeFx .ftIc,.spWLikeFx::before,.spWLikeFx::after{animation:none}}
/* v-257 обложка живая: пока играет - медленно «дышит» и чуть плывёт; курсор - параллакс картинки и блик там, где мышь;
   смена трека - обложка проявляется из размытия и пересвета с бликом-проходом, название выезжает снизу; пауза - обложка гаснет в ч/б.
   ♡ в любимых - заливка цветом обложки и свечение. Отдельные свойства translate/scale/rotate не спорят с transform */
.spWArt{overflow:hidden}
.spWArt img{translate:calc(var(--px,0) * -14px) calc(var(--py,0) * -14px);transition:transform 8s ease,translate .6s cubic-bezier(.2,.8,.2,1),filter .8s ease;
  animation:spArtBreath 14s ease-in-out infinite alternate}
@keyframes spArtBreath{0%{scale:1.02;rotate:0deg}50%{scale:1.09;rotate:.6deg}100%{scale:1.05;rotate:-.6deg}}
.spPaused .spWArt img{animation-play-state:paused;filter:grayscale(.55) brightness(.8)}
.spWArt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:soft-light;
  background:radial-gradient(60% 50% at calc(50% + var(--px,0) * 50%) calc(50% + var(--py,0) * 50%),rgba(255,255,255,.75),transparent 70%)}
.spHov .spWArt::after{opacity:1}
.spWCap b{text-shadow:0 2px 18px color-mix(in srgb,var(--spDom,#000) 70%,transparent)}
.spWCap{translate:calc(var(--px,0) * 5px) calc(var(--py,0) * 4px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.spWNew .spWArt{animation:spArtIn 1s cubic-bezier(.2,.8,.2,1) var(--nx,0ms) both}
.spWNew .spWArt::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);animation:spArtSweep 1.1s ease-out var(--nx,0ms) both}
.spWNew .spWCap>div{animation:spCapIn .8s cubic-bezier(.2,.8,.2,1) calc(var(--nx,0ms) + 150ms) both}
@keyframes spArtIn{0%{opacity:0;filter:blur(22px) saturate(2.2) brightness(1.4);transform:scale(1.18)}60%{opacity:1}100%{filter:none;transform:none}}
@keyframes spArtSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes spCapIn{0%{opacity:0;transform:translateY(16px);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
.spWLike.on .ftIc{filter:drop-shadow(0 0 7px var(--spAcc,#ff7a1a))}
.spWLike.on::after{content:"";position:absolute;inset:6px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--spAcc,#ff7a1a) 35%,transparent),transparent);animation:spLikeGlow 2.4s ease-in-out infinite}
.spWLikeFx.on::after{background:none;inset:auto;left:50%;top:50%;animation:spLikeSpark .6s ease-out var(--fx,0ms) both}
@keyframes spLikeGlow{50%{transform:scale(1.35);opacity:.5}}
@media (prefers-reduced-motion:reduce){.spWArt img,.spWNew .spWArt,.spWNew .spWArt::before,.spWNew .spWCap>div,.spWLike.on::after{animation:none}.spWArt img,.spWCap{translate:none}}
/* v-231 живая подложка: размытая обложка медленно плывёт, сверху переливается «сияние» из цветов обложки, пятна дышат,
   волна пульсирует как эквалайзер - всё только пока играет; на паузе замирает */
.spWBg i{animation:spBgDrift 28s ease-in-out infinite alternate}
@keyframes spBgDrift{0%{transform:scale(1.2) translate(0,0) rotate(0)}50%{transform:scale(1.38) translate(-5%,4%) rotate(6deg)}100%{transform:scale(1.28) translate(4%,-3%) rotate(-5deg)}}
.spWBg::before{content:"";position:absolute;z-index:1;inset:-30%;pointer-events:none;mix-blend-mode:screen;opacity:.55;filter:blur(28px);
  background:radial-gradient(40% 30% at 20% 30%,var(--sp1),transparent 70%),radial-gradient(35% 28% at 80% 25%,var(--sp2),transparent 70%),
    radial-gradient(45% 32% at 70% 75%,var(--sp3),transparent 70%),radial-gradient(38% 30% at 25% 80%,var(--sp4),transparent 70%);
  animation:spAurora 19s ease-in-out infinite alternate}
@keyframes spAurora{0%{transform:translate(0,0) rotate(0) scale(1)}33%{transform:translate(6%,-5%) rotate(25deg) scale(1.1)}66%{transform:translate(-5%,6%) rotate(-15deg) scale(.95)}100%{transform:translate(4%,3%) rotate(40deg) scale(1.08)}}
.spSk-soundcloud .spWBg::after{z-index:2}
.spWBg b{opacity:.5;animation:spOrb 17s linear infinite,spBreath 2.6s ease-in-out infinite}
.spWBg b+b{opacity:.42;animation:spOrb 26s linear infinite reverse,spBreath 3.4s ease-in-out infinite}
@keyframes spBreath{50%{filter:blur(38px) brightness(1.25)}}
html.light .spWBg::before{mix-blend-mode:multiply;opacity:.3}
.spWLane i::before{transform-origin:50% 100%;animation:spEq 1.1s ease-in-out infinite alternate}
.spWLane i:nth-child(2n)::before{animation-duration:.8s}
.spWLane i:nth-child(3n)::before{animation-duration:1.4s;animation-delay:-.4s}
.spWLane i:nth-child(5n)::before{animation-duration:.95s;animation-delay:-.7s}
.spWLane i:nth-child(7n)::before{animation-duration:1.25s;animation-delay:-.2s}
@keyframes spEq{0%{transform:scaleY(.78)}100%{transform:scaleY(1.08)}}
.spPaused .spWBg i,.spPaused .spWBg::before,.spPaused .spWBg b,.spPaused .spWLane i::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.spWBg i,.spWBg::before,.spWBg b,.spWLane i::before{animation:none}}
/* v-265 режимы визуала (✦ в «⋯»): Аура - обложка во весь блок, пульс-свечение и пылинки поверх; Винил - пластинка крутится,
   обложка - яблоко в центре, тонарм опускается на диск при игре; Лучи - обложка парящей карточкой с 3D-наклоном за курсором и отражением,
   за ней вращаются лучи. Авто - режим от трека. Общий «бит» --beat (псевдо-BPM трека), фаза --bph от часов - перерисовка не дёргает */
.spWFx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.spWFx>*{position:absolute;display:none}
.spWHero>.spWCap{z-index:5}
.spFxBg{inset:-20%;background:var(--spArt) center/cover;filter:blur(34px) saturate(1.6) brightness(.7);animation:spBgDrift 30s ease-in-out infinite alternate}
.spRays{left:50%;top:44%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;border-radius:50%;mix-blend-mode:screen;opacity:.7;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--sp2) 60%,transparent) 0 4deg,transparent 7deg 14deg,color-mix(in srgb,var(--sp1) 50%,transparent) 17deg 20deg,transparent 23deg 30deg);
  -webkit-mask:radial-gradient(closest-side,#000 8%,transparent 70%);mask:radial-gradient(closest-side,#000 8%,transparent 70%);animation:spRays 48s linear infinite}
@keyframes spRays{to{rotate:360deg}}
.spPulse{left:50%;top:44%;width:120%;aspect-ratio:1;margin:-60% 0 0 -60%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sp1) 75%,transparent),color-mix(in srgb,var(--sp2) 40%,transparent) 45%,transparent 72%);
  animation:spBeat var(--beat,.5s) cubic-bezier(.2,.7,.3,1) var(--bph,0s) infinite}
@keyframes spBeat{0%{scale:1.1;opacity:.95}20%{scale:1;opacity:.7}100%{scale:.86;opacity:.3}}
.spDust{inset:0;container-type:size}
.spDust s{position:absolute;left:var(--x);bottom:-14px;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 calc(var(--s) * 1.6) var(--c);
  mix-blend-mode:screen;opacity:0;animation:spDust 10s linear infinite}
@keyframes spDust{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.85}70%{opacity:.55}100%{transform:translate(22px,-108cqh) scale(1.3);opacity:0}}
.spDisc{left:50%;top:44%;width:78%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,transparent 0 19%,#0b0b0d 19.5% 21%,transparent 21.5%),repeating-radial-gradient(circle,#101013 0 1.4px,#1c1c21 1.8px 2.8px);
  box-shadow:0 22px 50px rgba(0,0,0,.65),0 0 70px color-mix(in srgb,var(--sp2) 45%,transparent)}
.spDisc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent,rgba(255,255,255,.14) 7%,transparent 16%,transparent 50%,rgba(255,255,255,.1) 57%,transparent 66%)}
.spArm{right:7%;top:3%;width:6px;height:44%;border-radius:4px;transform-origin:50% 9px;rotate:6deg;transition:rotate 1.2s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,#8d8d95,#f1f1f5 45%,#7d7d85);box-shadow:-6px 10px 18px rgba(0,0,0,.5)}
.spArm::before{content:"";position:absolute;left:50%;top:0;width:24px;height:24px;margin:-8px 0 0 -12px;border-radius:50%;background:radial-gradient(circle,#ddd 0 28%,#55555c 32%,#2a2a30 70%);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.spArm::after{content:"";position:absolute;left:50%;bottom:-12px;width:14px;height:20px;margin-left:-9px;border-radius:3px;background:linear-gradient(#c9c9cf,#6d6d75);rotate:18deg}
.spFxName{position:absolute;z-index:6;left:50%;top:16%;translate:-50% 0;padding:7px 13px;border-radius:99px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font:700 0.6875rem/1 var(--font-ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;animation:spFxName 1.4s ease var(--fa,0ms) both}
@keyframes spFxName{0%{opacity:0;transform:translateY(-8px) scale(.9)}15%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
/* Аура */
.spFx-aura .spWFx{z-index:1}
.spFx-aura .spPulse{display:block;top:100%;width:140%;margin:-70% 0 0 -70%;opacity:.6}
.spFx-aura .spDust{display:block}
.spFx-aura .spWHero:not(.spWNew) .spWArt{animation:spKick var(--beat,.5s) cubic-bezier(.2,.7,.3,1) var(--bph,0s) infinite}
@keyframes spKick{0%{scale:1.014}25%,100%{scale:1}}
/* Винил и Лучи: подложка - размытая обложка, сама обложка - объект в центре */
.spFx-vinyl .spFxBg,.spFx-rays .spFxBg,.spFx-vinyl .spPulse,.spFx-rays .spPulse,.spFx-vinyl .spDust,.spFx-rays .spDust,.spFx-rays .spRays{display:block}
.spFx-vinyl .spWArt,.spFx-rays .spWArt{inset:auto;left:50%;top:44%;aspect-ratio:1;translate:-50% -50%;z-index:2;-webkit-mask:none;mask:none}
.spFx-vinyl .spDisc,.spFx-vinyl .spArm{display:block}
.spFx-vinyl .spArm{z-index:3}
.spFx-vinyl .spWFx{z-index:auto}
.spFx-vinyl .spWArt{width:31%;border-radius:50%;box-shadow:0 0 0 3px #0b0b0d}
.spFx-vinyl .spWHero .spWArt img{border-radius:50%;translate:none;transform:none;scale:1;animation:spSpin 3.6s linear var(--spin,0s) infinite}
.spFx-vinyl .spWArt::after{opacity:1;inset:auto;left:50%;top:50%;width:10%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:normal;background:#0b0b0d;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.spFx-vinyl:not(.spPaused) .spArm{rotate:15deg}
.spFx-vinyl.spPaused .spWArt img{animation:none}
@keyframes spSpin{to{rotate:360deg}}
.spFx-rays .spWArt{width:64%;border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 90px color-mix(in srgb,var(--sp2) 50%,transparent);
  transform:perspective(700px) rotateX(calc(var(--py,0) * -12deg)) rotateY(calc(var(--px,0) * 14deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);
  -webkit-box-reflect:below 8px linear-gradient(transparent 62%,rgba(255,255,255,.22))}
.spFx-rays .spWHero:not(.spWNew) .spWArt{animation:spKick var(--beat,.5s) cubic-bezier(.2,.7,.3,1) var(--bph,0s) infinite}
.spPaused .spWFx *,.spPaused .spWFx{animation-play-state:paused!important}
.spPaused .spPulse{opacity:.25}
.spPaused .spWArt{animation-play-state:paused}
html.light .spPulse,html.light .spRays,html.light .spDust s{mix-blend-mode:normal;opacity:.35}
@media (prefers-reduced-motion:reduce){.spWFx *,.spFx-aura .spWArt,.spFx-rays .spWArt,.spFx-vinyl .spWArt img{animation:none!important}.spDust{display:none!important}}
/* единая шапка у виджетов сайдбара (FOCUS TIMER, DUDE!, SPOTIFY): кнопки 30px с иконкой 16px, заголовок 11px капсом, пилюля устройства той же высоты */
#ftPop .ftHead,#spPop .ftHead,#msgPop .msgHead{min-height:30px;gap:4px}
#ftPop .ftHead>.ftIcon,#spPop .ftHead>.ftIcon,#msgPop .msgHead .msgX{width:30px;height:30px;flex:none;border-radius:var(--r-inner);display:grid;place-items:center;padding:0;margin:0}
#ftPop .ftHead>.ftIcon svg,#spPop .ftHead>.ftIcon svg,#msgPop .msgHead .msgX svg{width:16px;height:16px}
#msgPop .msgHead .msgX{background:none;color:var(--text3)}
#msgPop .msgHead .msgX:hover,#msgPop .msgHead .msgX.on{background:var(--surface2);color:var(--text)}
#ftPop .ftHead>b,#msgPop .msgHead .msgBrand h2{font:700 0.6875rem/1 var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
#msgPop .msgAva{width:22px;height:22px}
#msgPop .msgBrand{margin-left:4px}
#spPop.spSk-wave .ftHead>.ftIcon{background:rgba(0,0,0,.32)}
@media (pointer:coarse){
  #ftPop .ftHead,#spPop .ftHead,#msgPop .msgHead{min-height:36px}
  #ftPop .ftHead>.ftIcon,#spPop .ftHead>.ftIcon,#msgPop .msgHead .msgX{width:36px;height:36px}
  #ftPop .ftHead>.ftIcon svg,#spPop .ftHead>.ftIcon svg,#msgPop .msgHead .msgX svg{width:18px;height:18px}
  #msgPop .msgAva{width:26px;height:26px}
}
#spPop.spSk-wave .ftHead{top:calc(env(safe-area-inset-top) + 12px)}

/* Погода в шапке - мини-карусель «иконка + текст»: слайды стопкой в одной grid-ячейке, ширина по самому широкому */
.tabsWeather .wxCar{display:inline-grid;align-items:center;overflow:hidden}
.tabsWeather .wxS{grid-area:1/1;display:inline-flex;align-items:center;gap:5px;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.tabsWeather .wxS.on{opacity:1;transform:none}
.tabsWeather .wxS .wxIc{width:16px;height:16px;flex:none;color:var(--text2)}
.tabsWeather .wxS b{font:700 0.75rem/1 var(--font-num);color:var(--text)}
.tabsWeather .wxS.wxRain .wxIc,.tabsWeather .wxS.wxRain b{color:#93c5fd}
html.light-mode .tabsWeather .wxS.wxRain .wxIc,html.light-mode .tabsWeather .wxS.wxRain b{color:#2563eb}
@media (prefers-reduced-motion:reduce){.tabsWeather .wxS{transition:none;transform:none}}
.weatherNowIc .wxIc{width:2rem;height:2rem}
.weatherMeta .wxIc{width:14px;height:14px;vertical-align:-2px}

/* ── Иконки: одна система на весь дашборд ──
   набор - контурный Lucide (ic(), сетка 24, линия 2) + контурные 16-сетки виджетов (FT/MSG/SP/погода, линия 1.5);
   шкала: 12 - внутри чипов/текста, 14 - мета и заголовки карточек, 16 - в кнопках (18 на таче);
   кнопки-иконки: 30px, радиус var(--r-inner) (36px на таче) - как в шапках сайдбар-виджетов */
.panelHead h2 .ic{width:14px;height:14px}
.refresh .ic,.navControls .refresh .ic,.headAddBtn svg,.headToggleBtn svg,.storytellNav svg,.paneClose svg,.otFxTry svg,
.todoEmpty button svg,.crmBtn svg,.crmCardActions button svg,.rowKebab svg,.paneGrip svg{width:16px;height:16px}
#taskLenToggleBtn,#voiceTaskBtn,#addTaskBtn,#addStoryBtn,#storyFullBtn,.todoEmpty button{width:30px;height:30px;border-radius:var(--r-inner)}
#taskLenToggleBtn svg,#voiceTaskBtn svg,#storytellCard .stPager .storytellNav svg{width:16px;height:16px}
#storytellCard .stPager .storytellNav svg{width:14px;height:14px}
.paneClose,.otFxTry{display:inline-grid;place-items:center;padding:0}
.crmCardActions button{display:inline-grid;place-items:center}
.crmCardActions button svg{width:14px;height:14px}
.rowKebab{display:grid;place-items:center}
.paneGrip{display:inline-grid;place-items:center}
.paneChip{display:inline-flex;align-items:center;gap:4px}
.paneChip .ic{width:12px;height:12px}
[data-act="subtask"]{display:inline-flex;align-items:center;gap:6px}
[data-act="subtask"] .ic{width:14px;height:14px}
.voiceSheetMic svg{width:26px;height:26px}
@media (pointer:coarse){
  .refresh .ic,.navControls .refresh .ic,.headAddBtn svg,.headToggleBtn svg,.paneClose svg,.otFxTry svg,.todoEmpty button svg,.crmBtn svg,
  #taskLenToggleBtn svg,#voiceTaskBtn svg{width:18px;height:18px}
}

/* Шапки сайдбар-виджетов на одной линии с меню: кнопки 30px с top = env + 6px, как .navControls; FOCUS TIMER - шапка над карточкой, как у DUDE!/Spotify */
#ftPop{padding-top:calc(env(safe-area-inset-top) + 6px)}
#ftPop > .ftHead{flex-shrink:0;margin-bottom:-4px;padding-left:2px}
#msgPop .msgHead{padding-top:0;margin-top:-4px}
#spPop.spSk-wave .ftHead{top:calc(env(safe-area-inset-top) + 6px)}
.ftStatsBar em .ic{width:14px;height:14px;display:block}
/* Меню (DASH / FOCUSERA / CRM) - та же типографика, что у заголовков виджетов (11px caps .14em), высота 30px как у кнопок-иконок */
@media (min-width:900px){
  .tabGroup{height:30px;padding:3px;gap:2px}
  .tabGroup .tab{height:100%;padding:0 12px;font:700 0.6875rem/1 var(--font-num);letter-spacing:.14em;color:var(--text3);border-radius:calc(var(--r-inner) - 3px)}
  .tabGroup .tab.active{color:var(--text);background:var(--surface3)}
  .tabGroup .tab:hover:not(.active){color:var(--text2)}
}
#spPop:not(.spSk-wave){padding-top:calc(env(safe-area-inset-top) + 6px)}

/* iPad portrait / Split View (621-899): nav like desktop - tabs left, weather + controls right, touch-sized 36px */
@media (min-width:621px) and (max-width:899px){
  .tabs{align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
  .tabGroup{height:36px}
  .tabGroup .tab{flex:0 0 auto;height:100%;padding:0 14px;font:700 0.6875rem/1 var(--font-num);letter-spacing:.14em;color:var(--text3);border-radius:calc(var(--r-inner) - 3px)}
  .tabGroup .tab.active{color:var(--text)}
  .tabsWeather.wideOnly{display:inline-flex!important;align-items:center;margin-left:auto;height:36px;padding:0 12px;border-radius:var(--r-inner);background:var(--surface2);cursor:pointer;white-space:nowrap}
  .navControls{margin-left:0;gap:6px}
  .tabsWeather.wideOnly:empty{display:none!important}
  .tabsWeather:empty + .navControls{margin-left:auto}
  .navControls .refresh{width:36px;height:36px;border-radius:var(--r-inner)}
  .navControls .refresh .ic{width:18px;height:18px}
  .ftBtn.ftOn{height:36px}
}

/* iPhone: FOCUS TIMER and Spotify open full-screen like DUDE, not as a cramped 170-250px strip over the page */
@media (max-width:699px){
  body.ftDocked,body.spDocked{padding-right:0}
  #ftPop,#spPop{width:100vw;box-sizing:border-box;padding-left:16px;padding-right:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 20px);border-left:0;box-shadow:none}
  #spPop .spWHero{margin-left:-16px;margin-right:-16px}
  #spPop.spSk-wave .ftHead{left:16px;right:16px}
}

/* ── Настройки: спокойный вид (KISS) - липкая шапка, вкладки-подчёркивание, секции без коробок ── */
.sheet.paneSheet{width:min(max(520px,calc(var(--cols,1) * 210px + 28px)),94vw);padding-top:0}
.setTop{position:sticky;top:0;z-index:2;margin:0 -14px 14px;padding:16px 14px 0;background:var(--surface1)}
.setTop .paneHead{margin:0 2px 8px}
.setTop .paneHead b{font-size:1.25rem}
.setTabs{gap:20px;padding:0 2px;margin:0;border-radius:0;background:none;border-bottom:1px solid var(--line)}
.setTab{flex:none;height:36px;padding:0;border-radius:0;position:relative;font-size:.6875rem;letter-spacing:.1em}
.setTab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.setTab.on{background:none;box-shadow:none;color:var(--text)}
.setTab.on::after{transform:scaleX(1)}
.setPage{min-height:min(440px,56vh);animation:fadeIn .2s ease}
.setH{margin:22px 2px 4px;color:var(--accent);letter-spacing:.12em}
.setPage > .setH:first-child{margin-top:4px}
.paneGlobal.setGroup{padding:0 2px;margin-bottom:0;border:0;border-radius:0;background:none}
.setRow{min-height:48px}
.setRow + .setRow{border-top:1px solid var(--line)}
.setRow.stack{flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}
.setRow.stack .setCtl{max-width:100%}
.setRow.stack .paneSeg{display:flex;width:100%;flex-wrap:wrap}
.setRow.stack .paneSeg button{flex:1 1 auto;padding:8px 10px}
.setRow.stack .paneSeg button.on{background:var(--accent);color:var(--bg);box-shadow:none}
.setLbl small:empty{display:none}
.paneSeg button.on{background:var(--accent);color:var(--bg);box-shadow:none}
.setGroup > .otFxChips{padding:10px 0}
.paneCols{padding:0 2px 8px}
.paneFoot{border-top:0;padding-top:4px}
/* Карточки: плоский список - одна строка на карточку (ручка · имя · ширина · высота · вкл) */
.paneGrid,.panePinned{gap:0}
.paneTile{flex-direction:row;align-items:center;gap:12px;padding:6px 8px;border-radius:var(--r-inner);background:none;box-shadow:none;border-bottom:1px solid var(--line)}
.paneTile:hover{background:var(--card)}
.paneTile .paneTileTop{display:contents}
.paneTile b{order:1}
.paneTile .paneTileOpts{order:2;flex:none;flex-wrap:nowrap;gap:8px}
.paneTile .paneSwitch{order:3}
.paneTile{padding-right:10px}
.paneTile.pinned{background:none;border-bottom:1px solid var(--line)}
.paneTile.fz::before{display:none}
.paneTile.fz{background:none}
.paneTile.lifted{background:var(--surface3);border-bottom:0}
.paneTile.pinned{padding-left:14px}

/* DUDE!: сообщения FOCUSERA - заголовок + короткие строки с кнопками вместо командного текста бота */
.msgBody.msgCard{display:flex;flex-direction:column;gap:4px;-webkit-line-clamp:unset;overflow:visible}
.msgCard b{font-weight:600;color:var(--text)}
.fzLine{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;position:relative;padding-left:12px}
.fzLine::before{content:'';position:absolute;left:3px;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--text3)}
.fzLine.sub{padding-left:22px;font-size:.92em;color:var(--text3)}
.fzLine.sub::before{left:13px;opacity:.5}
.fzLine.ok>span{opacity:.55}
.fzLine em,.fzErr{font-style:normal;font-size:.85em;color:var(--accent,#1689AC)}
.fzErr{color:#c0504d}
.fzActs{display:inline-flex;flex-wrap:wrap;gap:4px}
.fzActs.fzMain{margin-top:4px}
.fzAct{height:24px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card-solid);color:var(--text2);font:500 .75rem/1 var(--font-ui);cursor:pointer;transition:background .15s ease,transform .1s ease}
.fzAct:hover{background:var(--surface2);color:var(--text)}.fzAct:active{transform:scale(.94)}
.fzAct.main{height:28px;padding:0 12px;border-color:transparent;background:var(--accent,#1689AC);color:#fff}
.fzAct:disabled{opacity:.5;cursor:wait}

/* ── Иконки: токены (спека - vault PROJECTS/99 EXPERIMENTS/Hermes Dashboard/SPEC.md, «Иконки и пиктограммы») ──
   S 12 - в чипах и строке текста · M 14 - заголовки карточек, мета, вкладки · L 16 - иконка в кнопке (18 на таче)
   кнопка-иконка 30px (36 на таче); цвет только currentColor; emoji - только в пользовательском контенте */
:root{--ic-s:12px;--ic-m:14px;--ic-l:16px;--ic-btn:30px}
@media (pointer:coarse){:root{--ic-l:18px;--ic-btn:36px}}
.panelHead h2 .ic,.ftStatsBar em .ic,.crmCardActions button svg,[data-act="subtask"] .ic,#storytellCard .stPager .storytellNav svg,
.msgTabs .msgIc,.msgIc,.weatherMeta .wxIc{width:var(--ic-m);height:var(--ic-m)}
.paneChip .ic{width:var(--ic-s);height:var(--ic-s)}
.refresh .ic,.navControls .refresh .ic,.headAddBtn svg,.headToggleBtn svg,.storytellNav svg,.paneClose svg,.otFxTry svg,
.todoEmpty button svg,.crmBtn svg,.rowKebab svg,.paneGrip svg,#taskLenToggleBtn svg,#voiceTaskBtn svg,
.tabsWeather .wxS .wxIc,.ftIcon .ftIc,.ftIcon.ftClose .ftIc,.ftHead > .ftIcon svg,.rxDel .ic{width:var(--ic-l);height:var(--ic-l)}
.ftBtn .ftIdleIc{width:var(--ic-l)!important;height:var(--ic-l)!important}
.navControls .refresh,#taskLenToggleBtn,#voiceTaskBtn,#addTaskBtn,#addStoryBtn,#storyFullBtn,.todoEmpty button{width:var(--ic-btn);height:var(--ic-btn)}

/* DUDE! «Ждут ответа»: переключатель тестовых сообщений во вкладке + метка «тест» на строке */
.tgDemoBtn{display:block;width:100%;margin:8px 0;padding:9px 12px;border:1px dashed var(--line);border-radius:var(--r-inner);background:none;color:var(--text3);font:500 .75rem/1.2 var(--font-ui);cursor:pointer;text-align:center}
.tgDemoBtn:hover{color:var(--text);background:var(--surface2)}
.tgDemoBtn.on{border-style:solid}
.tgDemoTag{flex:none;margin-left:6px;padding:1px 6px;border-radius:var(--r-pill);background:var(--surface2);color:var(--text3);font:600 .625rem/1.4 var(--font-ui);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
/* STORYTELL канбан: колонки читаются как колонки (свой фон и рамка), карточки - отдельные плашки на нем */
.stfKbCol{background:var(--surface1);border:1px solid var(--line)}
.stfKbCard{background:var(--surface2);border:1px solid var(--line);border-radius:9px}
.stfKbCard:hover,.stfKbCard.cur{background:var(--surface3)}
/* STORYTELL список: статус истории - цветная полоска слева на карточке (цвет = колонка канбана) */
.stfMain:not(.kb) #stfGrid .stfCard{position:relative}
.stfMain:not(.kb) #stfGrid .stfCard::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--stc,transparent)}
/* STORYTELL колонки «Пост | Материал»: низ скролла мягко гаснет, а не режет строку пополам */
@container (min-width:621px){.stfDuoScroll{padding-bottom:28px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent)}}
/* STORYTELL окно (2026-10-22, по скрину Алексея) */
/* переключатель «список | канбан» - по центру шапки */
.stFull.full .stfHead{position:relative}
@media (min-width:700px){.stFull.full .stfBoardSw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}
/* поиск - всегда видимое поле с иконкой внутри, фильтр-воронка той же высоты */
.stFull .stfListBar{flex-wrap:nowrap;padding:10px 10px 2px}
.stFull .stfSearch{flex:1;min-width:0;position:relative}
.stFull .stfSearchBtn{position:absolute;left:3px;top:50%;transform:translateY(-50%);background:transparent;pointer-events:none}
.stFull #stfQ{display:block;width:100%;height:30px;padding:0 10px 0 30px;font-size:0.8125rem;border-color:transparent}
.stFull #stfQ:focus{outline:none;border-color:var(--accent)}
.stFull .stfDdBtn{height:30px;background:var(--card);color:var(--text2)}
.stFull .stfListBar .stfViewSw{margin-left:0}
/* режимы истории - только иконки (подписи в title) */
.stFull .stfMode button>span,.stFull .stfDuoBtn>span{display:none}
.stFull .stfMode button,.stFull .stfDuoBtn{padding:6px 9px}
/* статус - пилюля с точкой цвета колонки и своим шевроном вместо системного */
.stfStageSel{appearance:none;-webkit-appearance:none;height:28px;padding:0 26px 0 22px;background:radial-gradient(circle at 11px 50%,var(--st) 3.5px,transparent 4.5px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 8px center/12px no-repeat,color-mix(in srgb,var(--st) 14%,transparent)}
.stfStageSel:focus-visible{outline:2px solid var(--st);outline-offset:1px}
/* низ истории: путь файла слева, ← 1/257 → справа */
.stfVFoot{flex:none;display:flex;align-items:center;gap:12px;padding:6px 12px 6px 22px;border-top:1px solid var(--line)}
.stfVFoot .stfPath{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* текст истории мельче */
.stFull .stfMd,.stFull .stfDuoEd,.stFull .stfEditor{font-size:0.8125rem;line-height:1.6}
.stFull .stfMd h1,.stFull .stfDuoTitle{font-size:1.125rem}
.stFull .stfMd h2,.stFull .stfMd h3{font-size:0.6875rem;margin:18px 0 6px}
/* плитки: название целиком слева, справа звезда и под ней номер; тема и «пост» - только в виде списка */
.stFull .stfGrid:not(.asList) .stfTopic,.stFull .stfGrid:not(.asList) .stfPostTag{display:none}
.stFull .stfGrid:not(.asList){grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:5px}
.stFull .stfGrid:not(.asList) .stfCard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;column-gap:8px;row-gap:6px;align-items:start;padding:10px 8px 9px 13px}
.stFull .stfGrid:not(.asList) .stfMeta{display:contents}
.stFull .stfGrid:not(.asList) .stfCardTitle{grid-column:1;grid-row:1;display:block;-webkit-line-clamp:unset;overflow:visible;font-size:0.8125rem;line-height:1.38;hyphens:none}
.stFull .stfGrid:not(.asList) .stfPick{grid-column:2;grid-row:1;justify-self:center}
.stFull .stfGrid:not(.asList) .stId{grid-column:1/3;grid-row:2;justify-self:start;background:none;border:0;padding:0;font-family:var(--font-ui);font-size:0.6875rem;font-weight:400;letter-spacing:0;color:var(--text3);font-variant-numeric:tabular-nums}
/* поиск: обычный шрифт интерфейса, плейсхолдер приглушен */
.stFull #stfQ{font-family:var(--font-ui);letter-spacing:0}
.stFull #stfQ::placeholder{color:var(--text3);opacity:1}
/* переключатель раскладки с подписями */
.stFull .stfBoardSw button{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 11px;font:inherit;font-size:0.75rem}
/* легенда статусов = что значит цвет полоски; клик - только этот статус */
.stfLegend{display:none}
.stFull .stfMain:not(.kb) .stfLegend{display:flex;flex-wrap:nowrap;gap:0 1px;padding:6px 8px 0;flex:none;overflow-x:auto;scrollbar-width:none}
.stfLeg{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--text2);font:inherit;font-size:0.6875rem;padding:3px 4px;white-space:nowrap;border-radius:7px;cursor:pointer;text-transform:capitalize}
.stfLeg:hover{background:var(--card);color:var(--text)}
.stfLeg i{width:3px;height:11px;border-radius:2px;background:var(--st)}
.stfLeg em{font-style:normal;color:var(--text3);font-variant-numeric:tabular-nums}
.stfLeg.off{opacity:.4}
/* ручки ширины: список | история и пост | материал; ширины в настройках, общие для всех устройств */
.stFull .stfCol{flex:0 0 var(--stf-list,30%);max-width:none;min-width:240px}
.stfRsz{display:none}
@media (min-width:700px){.stFull .stfMain:not(.kb)>.stfRsz{display:block;flex:none;width:9px;margin:0 -5px 0 -4px;position:relative;z-index:3;cursor:col-resize;touch-action:none}}
.stfRsz::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:background .15s}
.stfRsz:hover::after,.stfRsz.drag::after{background:var(--accent);width:2px;left:3.5px}
.stfDuo{position:relative;grid-template-columns:minmax(0,var(--stf-duo,50%)) minmax(0,1fr)}
@container (min-width:621px){.stfDuoRsz{display:block;position:absolute;top:0;bottom:0;left:var(--stf-duo,50%);width:9px;margin-left:-5px;z-index:2;cursor:col-resize;touch-action:none}}
body.stfResizing{cursor:col-resize;user-select:none}
body.stfResizing iframe{pointer-events:none}
/* вид списка в окне: номер в колонке фиксированной ширины (названия по одной линии), название целиком */
.stFull .stfGrid.asList .stfCard{grid-template-columns:2.3em minmax(0,1fr) auto auto;align-items:start}
.stFull .stfGrid.asList .stId{justify-self:end;background:none;border:0;padding:0;margin-top:2px;font-family:var(--font-ui);font-size:0.6875rem;font-weight:400;letter-spacing:0;color:var(--text3);font-variant-numeric:tabular-nums}
.stFull .stfGrid.asList .stfCardTitle{white-space:normal;overflow:visible;line-height:1.35}
.stFull .stfGrid.asList .stfPostTag,.stFull .stfGrid.asList .stfPick{align-self:start}
/* карточки в окне: читается название и о чем история; номер - мелко справа под звездой, метка «пост» скрыта */
.stFull .stfGrid:is(.asList,:not(.asList)) .stfPostTag{display:none}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfCard{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:start}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfCardTitle{grid-column:1;grid-row:1}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfCardText{grid-column:1;grid-row:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;font-size:0.75rem;line-height:1.4;color:var(--text3)}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfPick{grid-column:2;grid-row:1;justify-self:center;height:18px;margin:0}
.stFull .stfGrid:is(.asList,:not(.asList)) .stId{grid-column:2;grid-row:2;justify-self:center;margin:0;opacity:.45;font-size:0.625rem}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfCard:hover .stId,.stFull .stfGrid:is(.asList,:not(.asList)) .stfCard.cur .stId{opacity:.8}
/* канбан компактнее (2026-10-22): плотнее колонки и карточки; карточка - клик открывает историю, статус - перетаскиванием */
.stfKb{gap:6px}
.stfKbCol{flex:1 0 190px;min-width:190px}
.stfKbHead{padding:8px 10px 6px;font-size:0.75rem}
.stfKbList{gap:4px;padding:0 6px 8px}
.stfKbCard{padding:6px 8px 7px;gap:2px;cursor:pointer}
.stfKbCard:active{cursor:grabbing}
.stfKbCard .stfCardTitle{font-size:0.75rem;line-height:1.35}
.stfKbCard .stId{opacity:.5}
/* пустые колонки канбана - узкие, место отдаем заполненным */
.stfKbCol:has(.stfKbEmpty){flex:0 0 130px;min-width:130px}
.stfKbCol:has(.stfKbEmpty) .stfKbEmpty{margin:10px 6px;font-size:0.6875rem}
/* пост с вариантами (### Вариант A/B внутри ## Пост): вкладки; в варианте - заголовок и версии (#### Заголовок 2 / Текст 2) */
.stfVars{margin:4px 0 10px}
/* шапка поста: «Пост  A B C D E ··· Как в тг  Озвучить» одной строкой */
.stfPostBar{flex:none;display:flex;align-items:center;gap:4px;min-height:28px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.stfMd .stfPostBar .stfPostLab,.stfPostLab{margin:0 8px 0 0;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:600}
.stfVarTabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.stfVarTab{min-width:26px;height:26px;padding:0 7px;border:1px solid transparent;border-radius:7px;background:none;color:var(--text3);font:600 0.8125rem var(--font-ui);cursor:pointer;max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s ease,background .15s ease}
.stfVarTab:hover{color:var(--text)}
.stfVarTab.on{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.stfPBSp{flex:1}
.stfTgBtn{flex:none;height:22px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:none;color:var(--text3);font:600 0.6875rem var(--font-ui);cursor:pointer;white-space:nowrap}
.stfTgBtn:hover{color:var(--text)}
.stfTgBtn.on{background:#2AABEE;border-color:#2AABEE;color:#fff}
.stfPBTts{display:none}
.stfPBTts.on{display:inline-flex}
.stfDuoMat>.stfDuoHead{min-height:28px;display:flex;align-items:center;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.stfVarPane{display:none}
.stfVarPane.on{display:block}
.stfVars.tg .stfPlain,.stfVars:not(.tg) .tgView{display:none}
/* «Как в тг»: окно канала Telegram (тёмная тема TG, в светлой - светлая) */
.tgView{border-radius:12px;overflow:hidden;background:#0e1621;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;max-width:520px}
.tgHead{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#17212b;color:#f5f5f5}
.tgHead span:last-child{display:flex;flex-direction:column;line-height:1.2}
.tgHead b{font-size:14px;font-weight:600}
.tgHead small{font-size:12px;color:#7f91a4}
.tgAva{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ff885e,#ff516a);color:#fff;font-weight:600;font-size:15px}
.tgFeed{padding:14px 12px 16px}
.tgBub{position:relative;max-width:100%;background:#182533;color:#f5f5f5;border-radius:12px 12px 12px 4px;padding:6px 10px 6px}
.tgName{color:#6ab3f3;font-weight:600;font-size:14px;margin-bottom:2px}
.tgText{white-space:pre-wrap;overflow-wrap:anywhere}
.tgText b{font-weight:600}
.tgMeta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:12px;color:#6d7f8f}
.tgMeta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
html.light-mode .tgView{background:linear-gradient(135deg,#dbddbb,#6ba587 45%,#d5d88d 70%,#88b884)}
html.light-mode .tgHead{background:#fff;color:#000}
html.light-mode .tgHead small{color:#707579}
html.light-mode .tgBub{background:#fff;color:#000;box-shadow:0 1px 2px rgba(16,35,47,.15)}
html.light-mode .tgName{color:#3390ec}
html.light-mode .tgMeta{color:#a0acb6}
.stfMd .stfVarTitle{font-weight:700;font-size:1.05em;color:var(--text);margin:0 0 8px}
.stfVer{margin:14px 0 0;padding:10px 0 0;border-top:1px dashed var(--line)}
.stfVerLab{display:inline-block;margin:0 0 6px;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text3)}
/* полноэкранный STORYTELL: одна строка шапки истории (режимы | номер + название | статус, звезда) - мета-строка и h1 в теле скрыты; карточки слева мельче */
.stfVTitle{display:none}
.stFull .stfVTitle{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1 1 auto;margin-left:8px}
.stFull .stfVTitle b{font:600 0.875rem/1.3 var(--font-ui);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stFull .stfVTitle .stId{flex:none;opacity:.5}
.stFull .stfVBody>.stfVMeta,.stFull .stfMd>h1:first-child,.stFull .stfDuoTitle{display:none}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfCardTitle{font-size:0.78125rem;line-height:1.35}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfCardText{font-size:0.6875rem;line-height:1.4}

/* ── FOCUS TIMER: проще - минуты одной строкой, очередь свернута в «+ что дальше» ── */
.ftPresets{grid-template-columns:repeat(6,1fr)}
.ftQMore{width:100%;height:30px;margin-top:2px;border:1px dashed var(--line);border-radius:8px;background:none;color:var(--text3);font:inherit;font-size:0.75rem;cursor:pointer}
.ftQMore:hover{color:var(--text);border-color:var(--ft1)}
@media (pointer:coarse){.ftQMore{height:44px}}
/* ряд управления: [+1] [ пауза на всю ширину ] [×] - боковые одинаковые квадраты, ровные зазоры */
.ftCtrls:has(.ftCtrlL){grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
.ftCtrlL .ftB,.ftCtrlR .ftB{width:30px;min-width:30px;padding:0;justify-content:center;font-size:0.75rem;letter-spacing:0}
.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:100%}
@media (pointer:coarse){.ftCtrlL .ftB,.ftCtrlR .ftB{width:44px;min-width:44px;font-size:0.875rem}.ftCtrls:has(.ftCtrlL) .ftB.ftPrimary{width:100%}}
/* очередь, добавление: сегмент Фокус | Перерыв + минуты сеткой 3×2, кнопки 34px */
.ftQAddBar{display:grid;gap:6px;margin-top:4px}
.ftQSeg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;border-radius:9px;background:var(--surface2)}
.ftQSeg button{display:flex;align-items:center;justify-content:center;gap:6px;height:30px;border:0;border-radius:7px;background:none;color:var(--text3);font:inherit;font-size:0.75rem;cursor:pointer}
.ftQSeg button.on{background:var(--surface3);color:var(--text);font-weight:600}
.ftQSeg button i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.ftQSeg button.on.ft-focus i{background:var(--ftA);opacity:1}.ftQSeg button.on.ft-break i{background:#c4b5fd;opacity:1}
.ftQAddBar .ftQQuick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ftQAddBar .ftPreset,.ftQAddBar .ftQCustomIn{height:34px;width:100%;font-size:0.8125rem}
@media (pointer:coarse){.ftQSeg button{height:40px}.ftQAddBar .ftPreset,.ftQAddBar .ftQCustomIn{height:44px}}

/* DUDE!: быстрые ответы крупнее и без подписей; отправка с отменой прямо в строке; вкладка «Тест»; плотнее по вертикали */
.tgQr{grid-template-columns:repeat(var(--n,6),minmax(0,46px));margin-top:6px}
.tgQr button{height:42px}
.tgQr button b{font-size:1.375rem}
.tgQr .tgQrOwn b{font-size:1.0625rem}
.tgSend{--c:var(--accent);position:relative;display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 6px 6px 10px;border-radius:var(--r-inner);background:color-mix(in srgb,var(--c) 10%,transparent);overflow:hidden;font:500 .75rem/1.2 var(--font-ui);color:var(--text2)}
.tgSend > b{flex:none;font-size:1.25rem;font-weight:400;line-height:1}
.tgSend > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.tgSend em{flex:none;display:inline-flex;align-items:center;gap:4px;font:600 var(--fs-meta)/1 var(--font-num);font-style:normal;color:var(--c)}
.tgSend em .msgIc{width:13px;height:13px}
.tgSend button{flex:none;border:0;border-radius:7px;padding:6px 10px;background:var(--text);color:var(--bg);font:700 var(--fs-meta)/1 var(--font-ui);cursor:pointer}
.tgSend.wait::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--c);transform-origin:left;animation:tgSendBar var(--s) linear forwards}
.tgSend.sending em{animation:tgSendPulse 1s ease-in-out infinite}
.tgSend.sent{--c:#4ade80}
.tgSend.fail{--c:#f87171}
@keyframes tgSendBar{to{transform:scaleX(0)}}
@keyframes tgSendPulse{50%{opacity:.4}}
.tgTestBar{display:flex;align-items:center;gap:6px;padding:0 2px 2px;font:500 var(--fs-meta)/1.3 var(--font-ui);color:var(--text3)}
.tgTestBar span{flex:1;min-width:0}
.tgTestBar button{flex:none;border:0;border-radius:7px;padding:5px 9px;background:var(--card);color:var(--text2);font:600 var(--fs-meta)/1 var(--font-ui);cursor:pointer}
.tgTestBar button:hover{background:var(--card-hover);color:var(--text)}
.tgTestBar ~ .tgRow .tgDemoTag{display:none}
.tgDemoBtn{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0}
#msgPop .msgHead{padding-bottom:4px;margin-bottom:0}
#msgPop .msgTabs{margin:4px 0 6px}
#msgPop .msgTabs button{padding:6px}
#msgPop .msgList{gap:6px}
#msgPop .msgRow,#msgPop .msgRow:hover{padding:8px 8px 9px 10px}
#msgPop .msgMain{gap:2px}
#msgPop .msgBody{line-height:1.45}
#msgPop .msgEmpty{padding:16px 8px}
@media (max-width:699px){#msgPop .msgRow,#msgPop .msgRow:hover{padding:8px 6px 9px 10px}}
/* «Слушать» - озвучка версии поста голосом Алексея */
.stfTtsRow{display:flex;justify-content:flex-end;margin:0 0 4px}
.stfTts{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface1, transparent);color:var(--text3);font:600 0.6875rem var(--font-ui);cursor:pointer}
.stfTts svg{width:11px;height:11px;fill:currentColor}
.stfTts:hover{color:var(--text);border-color:var(--text3)}
.stfTts.on,.stfTts.busy{color:var(--accent);border-color:var(--accent)}
.stfTts.busy svg{animation:stfTtsPulse 1s ease-in-out infinite}
@keyframes stfTtsPulse{50%{opacity:.3}}
.stfVer .stfTts{float:right}

/* v-272: вид (карточки / список / канбан) - один переключатель вверху; левый тоггл только там, где верхнего нет */
@media (min-width:700px){.stFull.full .stfListBar .stfViewSw:not(.stfBoardSw){display:none}}
.stfBoardSw rect{stroke-width:1.7}
.stfBoardSw circle{fill:currentColor}
/* v-273: Карточки и Список должны отличаться - плитки в 2+ колонки vs плотные строки */
.stFull .stfGrid:not(.asList){grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:8px 10px}
.stFull .stfGrid:not(.asList) .stfCard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 9px 10px 14px;grid-template-rows:auto 1fr;min-height:132px}
.stFull .stfGrid:not(.asList) .stfCard:hover,.stFull .stfGrid:not(.asList) .stfCard.cur{background:var(--card-hover);border-color:var(--line-strong)}
.stFull .stfGrid:not(.asList) .stfCardText{-webkit-line-clamp:4}
.stFull .stfGrid.asList{gap:0}
.stFull .stfGrid.asList .stfCard{border-radius:0;border-bottom:1px solid var(--line);padding:7px 6px 7px 12px}
.stFull .stfGrid.asList .stfCard:hover,.stFull .stfGrid.asList .stfCard.cur{border-radius:8px}
.stFull .stfGrid.asList .stfCardText{-webkit-line-clamp:1}
/* v-274: озвучка играет, пока открыт STORYTELL; «■ номер» в шапке окна - остановить */
.stfBarBtns{display:inline-flex;align-items:center;gap:8px}
.stfNow{height:26px}
.stfTts.fresh:not(.on){border-style:dashed}
/* v-276: компактный верх - шапки окна нет; слева строка 🦊ST | вид (иконки: список, карточки, канбан) | фильтр | сортировка | поиск, справа шапка истории на самом верху, ✕ - в правом углу */
.stfBrand{display:none}
.stfDdPop.cols3{grid-template-columns:repeat(3,minmax(140px,auto))}
.stfDdGrp:has(.stfSortOpt){display:flex;flex-direction:column;gap:1px}
.stfDdHead{cursor:default}.stfDdHead:hover{background:none}
.stfSortOpt{border:0;background:transparent;color:var(--text2);font:inherit;font-size:0.75rem;text-align:left;padding:6px 9px;border-radius:7px;cursor:pointer;white-space:nowrap}
.stfSortOpt:hover{background:var(--card-hover);color:var(--text)}
.stfSortOpt.on{color:var(--accent);font-weight:600}
@media (min-width:700px){
  .stFull.full .stfHead{position:absolute;top:8px;right:8px;z-index:6;padding:0;border:0;gap:6px;background:transparent}
  .stFull.full .stfHead .stfTitle{display:none}
  .stFull.full .stfBrand{display:inline-flex;align-items:center;gap:4px;flex:none;font:700 0.8125rem/1 var(--font-ui);letter-spacing:.04em;padding:0 4px 0 2px;white-space:nowrap}
  .stFull.full .stfBrand span{opacity:.85}
  .stFull.full .stfListBar{flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 10px;min-height:47px;box-sizing:border-box;border-bottom:1px solid var(--line)}
  .stFull.full .stfListBar .stfBoardSw{position:static;transform:none;margin:0 4px 0 0;padding:2px}
  .stFull.full .stfListBar .stfBoardSw button{width:28px;height:26px;padding:0;justify-content:center}
  .stFull.full .stfListBar .stfBoardSw button span{display:none}
  .stFull.full .stfVHead{min-height:47px;box-sizing:border-box;padding-top:6px;padding-bottom:6px;padding-right:52px}
  .stFull.full .stfBox:has(.stfNow:not(.hidden)) .stfVHead{padding-right:120px}
  .stFull.full .stfMain.kb .stfListBar{padding-right:52px}
  .stFull.full .stfBox:has(.stfNow:not(.hidden)) .stfMain.kb .stfListBar{padding-right:120px}
}
/* статус: точка под звездой вместо полоски слева; список - без превью, карточки - с превью и мельче */
.stfStDot{display:none}
.stFull .stfMain:not(.kb) #stfGrid .stfCard::before{display:none}
.stFull .stfGrid:is(.asList,:not(.asList)) .stfStDot{display:block;grid-column:2;grid-row:2;justify-self:center;align-self:start;width:7px;height:7px;margin-top:2px;border-radius:50%;background:var(--stc)}
.stFull .stfGrid:not(.asList) .stId{grid-row:3;align-self:end}
.stFull .stfGrid:not(.asList) .stfCardText{grid-row:2/4}
.stFull .stfGrid:not(.asList) .stfCardTitle{font-size:0.71875rem}
.stFull .stfGrid:not(.asList) .stfCardText{font-size:0.65625rem}
.stFull .stfGrid.asList .stfCardText,.stFull .stfGrid.asList .stId{display:none}
.stFull .stfGrid.asList .stfCardTitle{grid-row:1/3;align-self:center}
.stFull .stfGrid.asList .stfCard{padding-top:6px;padding-bottom:6px}
/* легенда статусов не нужна - числа по статусам в фильтре */
.stFull .stfMain:not(.kb) .stfLegend{display:none}
/* карточки канбана не наследуют высоту плиток */
.stFull .stfMain.kb .stfGrid .stfCard{min-height:0}
.stFull .stfMain.kb .stfGrid .stId{align-self:start}
.stfKbList>.stfCard{flex-shrink:0}
/* список: название + начало текста делят ровно 3 строки (короткое название - дальше текст, длинное - занимает всё) */
.stfCardBody{display:contents}
.stFull .stfGrid.asList .stfCardBody{grid-column:1;grid-row:1/3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:calc(3 * 1.35 * 0.78125rem)}
.stFull .stfGrid.asList .stfCardBody>.stfCardTitle{display:block;-webkit-line-clamp:unset;overflow:visible;white-space:normal;line-height:1.35}
.stFull .stfGrid.asList .stfCardBody>.stfCardText{display:block;-webkit-line-clamp:unset;overflow:visible;margin:1px 0 0;line-height:1.35}
/* канбан: карточки не сжимаются в колонке */
.stfKbList>.stfCard{flex:none}

/* Меню разделов: иконка + подпись, активная - светлый текст, бирюзовая иконка и полоска, которая переезжает между вкладками; CRM - внешняя ссылка за чертой */
.tabGroup{position:relative}
.tabs .tabGroup .tab{gap:6px;letter-spacing:.04em;color:var(--text2)}
.tabs .tabGroup .tab .ic{flex:none;width:14px;height:14px;opacity:.7;transition:color .2s ease,opacity .2s ease}
.tabs .tabGroup .tab:hover:not(.active){background:var(--card);color:var(--text)}
.tabs .tabGroup .tab.active{color:var(--text)}
.tabs .tabGroup .tab.active .ic{color:var(--accent);opacity:1}
.tabInd{position:absolute;left:10px;bottom:1px;height:2px;width:calc(var(--indW,0px) - 20px);transform:translateX(var(--indX,0px));border-radius:2px;background:var(--accent);pointer-events:none;z-index:1;transition:transform .3s cubic-bezier(.22,.8,.24,1),width .3s cubic-bezier(.22,.8,.24,1)}
@media (prefers-reduced-motion:reduce){.tabInd{transition:none}}
.tabs .tabGroup .tabExt{position:relative;margin-left:5px}
.tabs .tabGroup .tabExt::before{content:"";position:absolute;left:-4px;top:25%;bottom:25%;width:1px;background:var(--line-strong)}
.tabs .tabGroup .tabExt .tabExtIc{width:10px;height:10px;margin-left:-2px;opacity:.45}
/* телефон: только иконки, подпись - у активной */
@media (max-width:600px){
  .tabs .tabGroup .tab{min-width:36px;min-height:30px;padding:0 9px}
  .tabs .tabGroup .tab:not(.active) span,.tabs .tabGroup .tabExt .tabExtIc{display:none}
  .tabs .tabGroup .tab .ic{width:16px;height:16px}
  .tabs .tabGroup .tab.active{flex:2 1 auto}
}
/* плитки: текст не растягивается на несколько рядов (Safari не учитывал такой текст в высоте плитки - он вылезал на соседнюю);
   номер - слоем в правом нижнем углу, под звездой и точкой */
.stFull .stfMain:not(.kb) .stfGrid:not(.asList) .stfCard{grid-template-rows:auto 1fr;padding-bottom:12px}
.stFull .stfMain:not(.kb) .stfGrid:not(.asList) .stfCardText{grid-row:2;align-self:start;margin-bottom:14px}
.stFull .stfMain:not(.kb) .stfGrid:not(.asList) .stId{position:absolute;right:9px;bottom:9px;width:22px;text-align:center}
/* рабочая пометка «>>> ...» в посте: мелко, бледно, курсивом - заметна, но не спорит с текстом */
.stfMd .stfNote{margin:0 0 10px;padding-left:10px;border-left:2px dashed var(--line);font-size:0.75rem;line-height:1.45;font-style:italic;color:var(--text3)}
/* варианты поста сверх 4 - в выпадашке «+N ▾» */
.stfVarTabs{flex-wrap:nowrap}
.stfVarMore{position:relative;display:inline-flex}
.stfMoreBtn{max-width:none}
.stfVarMenu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:20;min-width:120px;max-height:260px;overflow:auto;padding:4px;background:var(--surface2);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);flex-direction:column;gap:2px}
.stfVarMore.open .stfVarMenu{display:flex}
.stfVarMenu .stfVarTab{width:100%;text-align:left;justify-content:flex-start}
/* канбан v-295 (по образцу Trello/Linear/Airtable): колонки 280px и прозрачные, шапка - пилюля стадии + число + «свернуть»;
   карточка - заметная плашка: название, строка данных (тема · оценка · ✎ · номер), «→ стадия» по наведению; свернутая колонка - вертикальная полоска */
.stFull .stfMain.kb .stfGrid{padding:12px 16px 16px}
.stfKb{gap:14px;width:max-content;min-width:100%}
.stfKbCol,.stfKbCol:has(.stfKbEmpty){flex:0 0 280px;width:280px;min-width:0;background:transparent;border:1px dashed transparent;border-radius:12px}
.stfKbHead{padding:2px 4px 10px;gap:8px;font-size:0.8125rem}
.stfKbHead .stfKbPill{margin-left:0}
.stfKbPill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:color-mix(in srgb,var(--st) 16%,transparent);color:color-mix(in srgb,var(--st) 55%,var(--text));font-weight:600;text-transform:capitalize}
.stfKbPill .stfDot{background:var(--st)}
.stfKbHead .stfKbN{margin-left:0;color:var(--text3);font-size:0.75rem;font-variant-numeric:tabular-nums;opacity:1}
.stfKbFold{margin-left:auto;width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--text3);cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease}
.stfKbFold svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stfKbCol:hover .stfKbFold{opacity:1}
.stfKbFold:hover{background:var(--surface2);color:var(--text)}
@media (hover:none){.stfKbFold{opacity:.7}}
.stfKbList{gap:8px;padding:0 2px 12px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.stFull .stfMain.kb .stfGrid .stfCard.stfKbCard{position:relative;display:flex;flex-direction:column;gap:8px;min-height:0;padding:10px 12px 9px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.stFull .stfMain.kb .stfGrid .stfCard.stfKbCard:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.stFull .stfMain.kb .stfGrid .stfCard.stfKbCard.cur{border-color:color-mix(in srgb,var(--st) 60%,var(--line));background:var(--surface3)}
.stFull .stfMain.kb .stfGrid .stfCard.stfKbCard.drag{opacity:.35}
.stfKbTop{display:flex;align-items:flex-start;gap:6px;align-self:stretch}
.stFull .stfMain.kb .stfGrid .stfKbCard .stfCardTitle{flex:1;min-width:0;font-size:0.8125rem;line-height:1.4;font-weight:500;white-space:normal;overflow:visible}
.stFull .stfMain.kb .stfGrid .stfKbCard .stfPick{flex:none;width:22px;height:22px;margin:-2px -4px 0 0;opacity:0;transition:opacity .15s ease}
.stFull .stfMain.kb .stfGrid .stfKbCard .stfPick svg{width:15px;height:15px}
.stFull .stfMain.kb .stfGrid .stfKbCard:hover .stfPick{opacity:.8}
@media (hover:none){.stFull .stfMain.kb .stfGrid .stfKbCard .stfPick{opacity:.5}}
.stfKbMeta{display:flex;align-self:stretch;align-items:center;gap:8px;min-height:18px;font-size:0.6875rem;color:var(--text3);font-variant-numeric:tabular-nums}
.stfKbTag{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:60%;padding:1px 7px 1px 6px;border-radius:999px;background:color-mix(in srgb,var(--tag) 13%,transparent);color:color-mix(in srgb,var(--tag) 50%,var(--text2));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stfKbTag i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--tag)}
.stfKbScore::before{content:'★ ';opacity:.6}
.stfKbPost{color:var(--text2)}
.stfPub{display:inline-flex;align-items:center;gap:4px;color:var(--text2);text-decoration:none;font-weight:600;white-space:nowrap}
.stfPub .ic,.stfPubBox header .ic{width:14px;height:14px}
/* иконки из общего набора ic() в кнопках STORYTELL: «вернуть», «закрыть», «⋯», метка «есть пост» */
:is(.stfRestore,.stfKbUndo button,.stfWhyUndo,.stfShelfBar button){display:inline-flex;align-items:center;gap:5px}
:is(.stfRestore,.stfKbUndo button,.stfWhyUndo,.stfShelfBar button,.stfWhyX) .ic{width:13px;height:13px}
.stfMore .ic{width:15px;height:15px;vertical-align:middle}
.stfKbPost .ic{width:11px;height:11px;vertical-align:-1px}
.stfPub:hover{color:var(--text)}
.stfVMeta .stfPub{font-size:.8125rem;overflow:hidden;text-overflow:ellipsis}
.stfPubPop{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.stfPubBox{display:flex;flex-direction:column;width:min(560px,100%);height:min(720px,100%);background:var(--bg,#fff);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.stfPubBox header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border,rgba(0,0,0,.1))}
.stfPubBox header b{font:600 .875rem/1.3 var(--font-ui);color:var(--text)}
.stfPubBox header a.stfBtn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.stfPubBox iframe{flex:1;width:100%;border:0;background:#fff}
.stFull .stfMain.kb .stfGrid .stfKbCard .stId{align-self:center;margin:0 0 0 auto;padding:0;background:none;border:0;font:400 0.6875rem/1 var(--font-ui);letter-spacing:0;color:var(--text3);opacity:.6}
.stFull .stfMain.kb .stfGrid .stfKbCard .stfKbNext{position:absolute;right:8px;bottom:6px;padding:2px 9px;background:var(--surface3);opacity:0;pointer-events:none;transition:opacity .15s ease}
.stFull .stfMain.kb .stfGrid .stfKbCard:hover .stfKbNext{opacity:1;pointer-events:auto}
.stfKbEmpty,.stfKbCol:has(.stfKbEmpty) .stfKbEmpty{display:grid;place-items:center;min-height:76px;margin:0;border:1px dashed var(--line);border-radius:10px;color:var(--text3);font-size:0.75rem}
.stfKbCol.fold{flex:0 0 44px;width:44px}
.stfKbFoldBar{width:100%;height:100%;max-height:420px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface1);color:var(--text2);font:600 0.8125rem/1 var(--font-ui);cursor:pointer;transition:background .15s ease}
.stfKbFoldBar:hover{background:var(--surface2);color:var(--text)}
.stfKbFoldBar .stfDot{flex:none;background:var(--st)}
.stfKbFoldBar b{writing-mode:vertical-rl;font-weight:600;text-transform:capitalize}
.stfKbFoldBar span{color:var(--text3);font-size:0.6875rem;font-weight:500}
.stfKb.dragging .stfKbCol{border-color:color-mix(in srgb,var(--st) 30%,transparent)}
.stfKbCol.over,.stfKb.dragging .stfKbCol.over{border-style:solid;border-color:var(--st);background:color-mix(in srgb,var(--st) 7%,transparent)}
@media (max-width:700px){.stfKb{width:auto}.stfKbCol,.stfKbCol:has(.stfKbEmpty){flex:0 0 84%;width:84%}.stfKbCol.fold{flex:0 0 44px;width:44px}}

/* DUDE! уведомления: тосты в правом верхнем углу (ntfShow) */
.ntfBox{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:9000;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 24px));pointer-events:none}
.ntf{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--card-solid);border:1px solid var(--line-strong);box-shadow:0 10px 30px rgba(0,0,0,.18);color:var(--text);font:400 .86rem/1.35 var(--font-ui);cursor:pointer;animation:ntfIn .22s ease-out}
.ntf.hot{border-color:rgba(248,113,113,.7);box-shadow:0 10px 30px rgba(248,113,113,.18)}
.ntf.out{opacity:0;transform:translateX(16px);transition:opacity .2s ease,transform .2s ease}
.ntf:hover{border-color:var(--text3)}
.ntfAva{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none}
.ntfMain{flex:1;min-width:0}
.ntfTop{display:flex;align-items:center;gap:6px;color:var(--text3)}
.ntfTop b{color:var(--text);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntfTop time{font:400 .72rem var(--font-num);flex:none}
.ntfText{margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ntfX{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;background:none;color:var(--text3);border-radius:8px;cursor:pointer;padding:0}
.ntfX:hover{background:var(--surface2);color:var(--text)}
.ntfX svg{width:14px;height:14px}
@keyframes ntfIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ntf{animation:none}}
/* архив/корзина: «⋯» на карточке канбана, зоны сброса при перетаскивании, просмотр в фильтре */
.stFull .stfMain.kb .stfGrid .stfKbCard .stfKbNext{display:none}
.stfKbCard .stfMore{position:absolute;right:6px;bottom:5px;width:24px;height:20px;padding:0;border:0;border-radius:6px;background:var(--surface3);color:var(--text2);font:inherit;font-size:0.875rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.stfKbCard:hover .stfMore,.stfKbCard .stfMore:focus-visible,.stfKbCard .stfMenu.open~.stfMore{opacity:1}
.stfKbCard .stfMore:hover{color:var(--text)}
.stfKbCard:has(.stfMenu.open) .stfMore{opacity:1}
.stfKbCard:has(.stfMenu.open){z-index:5}
/* «⋯» на плитках и в списке - как в канбане: видно при наведении (на тач-экранах - бледно всегда) */
.stfMain:not(.kb) .stfGrid .stfTile .stfMore{position:absolute;right:6px;bottom:5px;width:24px;height:20px;padding:0;border:0;border-radius:6px;background:var(--surface3);color:var(--text2);font:inherit;font-size:0.875rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s ease}
.stfMain:not(.kb) .stfGrid .stfTile:hover .stfMore,.stfMain:not(.kb) .stfGrid .stfTile .stfMore:focus-visible,.stfMain:not(.kb) .stfGrid .stfTile:has(.stfMenu.open) .stfMore{opacity:1}
.stfMain:not(.kb) .stfGrid .stfTile .stfMore:hover{color:var(--text)}
@media (hover:none){.stfMain:not(.kb) .stfGrid .stfTile .stfMore{opacity:.6}}
.stfMain:not(.kb) .stfGrid .stfTile:has(.stfMenu.open){z-index:5}
.stfMain:not(.kb) .stfGrid.asList .stfTile .stfMore{right:22px;bottom:6px}
.stfKbUndo.stfUndoSticky{position:sticky;left:auto;bottom:14px;transform:none;grid-column:1/-1;justify-self:center;width:max-content;margin:8px auto 0}
.stfMenu{display:none;position:absolute;right:6px;bottom:28px;z-index:6;min-width:150px;padding:4px;background:var(--surface3);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.stfMenu.open{display:flex;flex-direction:column}
.stfMenu button{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:0.75rem;text-align:left;cursor:pointer}
.stfMenu button:hover{background:var(--card-hover)}
.stfMenu svg,.stfKbShelf svg,.stfShelfOpt svg,.stfShelfBar svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stfMenu button[data-shelf="rejected"]{color:#f0a3a3}
.stfKbShelves{display:none}
.stfKb.dragging .stfKbShelves{display:flex;gap:10px;position:fixed;left:50%;bottom:22px;z-index:50;transform:translateX(-50%);width:min(520px,calc(100vw - 32px))}
.stfKbShelf{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border:1.5px dashed var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--surface2) 92%,transparent);backdrop-filter:blur(6px);color:var(--text2);font-size:0.8125rem;transition:background .15s ease,border-color .15s ease,color .15s ease}
.stfKbShelf svg{width:16px;height:16px}
.stfKbShelf.over{border-style:solid;border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 16%,var(--surface2))}
.stfKbShelf[data-shelfdrop="rejected"].over{border-color:#e07070;background:color-mix(in srgb,#e07070 16%,var(--surface2))}
.stfDdShelves{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.stfShelfOpt{flex:1;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text2);font:inherit;font-size:0.75rem;cursor:pointer}
.stfShelfOpt em{margin-left:auto;font-style:normal;color:var(--text3)}
.stfShelfOpt:hover,.stfShelfOpt.on{color:var(--text);border-color:var(--line-strong);background:var(--card-hover)}
.stfShelfBar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:6px 4px 8px;color:var(--text);font-size:0.8125rem}
.stfShelfBar span{color:var(--text3)}
.stfShelfBar button{margin-left:auto;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text2);font:inherit;font-size:0.6875rem;padding:3px 10px;cursor:pointer}
.stfShelfBar button:hover{color:var(--text);border-color:var(--line-strong)}
.stfRestore{grid-column:1/-1;justify-self:start;align-self:end;margin-top:6px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--text2);font:inherit;font-size:0.6875rem;padding:2px 9px;cursor:pointer;position:relative;z-index:1}
.stfRestore:hover{color:var(--text);border-color:var(--accent)}
/* плитки и список (v-297): своя разметка .stfTile в стиле карточки канбана, старые правила .stfCard ее не задевают;
   высоты текста заданы явно (max-height) - WebKit/Telegram не учитывал line-clamp в высоте и текст вылезал на соседнюю плитку */
.stFull .stfMain:not(.kb) .stfGrid:not(.asList){grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:12px 14px 20px}
.stfMain:not(.kb) .stfGrid .stfTile{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body heart" "meta meta";grid-template-rows:1fr auto;gap:12px 6px;padding:11px 10px 9px 13px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.stfMain:not(.kb) .stfGrid .stfTile:hover{border-color:var(--line-strong);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.stfMain:not(.kb) .stfGrid .stfTile.cur{border-color:color-mix(in srgb,var(--st) 60%,var(--line));background:var(--surface3)}
.stfTBody{grid-area:body;min-width:0}
.stfTTitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:calc(3 * 1.38em);font-size:0.8125rem;line-height:1.38;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.stfTText{margin:6px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;max-height:calc(5 * 1.45em);font-size:0.75rem;line-height:1.45;color:var(--text3)}
.stfMain:not(.kb) .stfGrid .stfTile .stfPick{grid-area:heart;align-self:start;justify-self:end;width:22px;height:22px;margin:-3px -4px 0 0;opacity:0;transition:opacity .15s ease}
.stfMain:not(.kb) .stfGrid .stfTile .stfPick svg{width:15px;height:15px}
.stfMain:not(.kb) .stfGrid .stfTile:hover .stfPick{opacity:.8}
.stfMain:not(.kb) .stfGrid .stfTile .stfPick.on{opacity:1}
@media (hover:none){.stfMain:not(.kb) .stfGrid .stfTile .stfPick{opacity:.5}}
.stfTMeta{grid-area:meta;display:flex;align-items:center;gap:8px;min-width:0;min-height:18px;font-size:0.6875rem;color:var(--text3);font-variant-numeric:tabular-nums}
.stfTDot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--st)}
.stfTNum{margin-left:auto;opacity:.75}
.stfTile .stfRestore{grid-area:auto;grid-column:1/-1}
/* список: строка без рамки, название до 2 строк + 1 строка «о чем», справа звезда и под ней точка статуса с номером */
.stfMain:not(.kb) .stfGrid.asList .stfTile{grid-template-areas:"body heart" "body meta";grid-template-rows:auto 1fr;gap:4px 12px;padding:9px 8px 9px 12px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.stfMain:not(.kb) .stfGrid.asList .stfTile:hover{background:var(--card-hover);border-bottom-color:transparent;border-radius:8px}
.stfMain:not(.kb) .stfGrid.asList .stfTile.cur{background:var(--surface3);border-bottom-color:transparent;border-radius:8px}
.stfGrid.asList .stfTTitle{-webkit-line-clamp:2;max-height:calc(2 * 1.38em)}
.stfGrid.asList .stfTText{display:block;margin-top:2px;white-space:nowrap;text-overflow:ellipsis;max-height:none}
.stfGrid.asList .stfTMeta{align-self:end;justify-self:end;gap:6px;min-height:0}
.stfGrid.asList .stfTMeta :is(.stfKbTag,.stfKbScore,.stfKbPost,.stfKbTest){display:none}
.stfGrid.asList .stfTNum{margin-left:0}

/* WINS v-295: победы по ставкам STRATEGY.md */
.winsLbl em{font-style:normal;font-weight:500;color:var(--text3)}
.winsBets{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.winsBet{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:3px 0;font-size:var(--fs-meta);line-height:1.3;color:var(--text2)}
.winsBet i{width:6px;height:6px;border-radius:50%;background:var(--good)}
.winsBet[data-status="at-risk"] i{background:var(--peach)}
.winsBet[data-status="off-track"] i{background:var(--bad,#f87171)}
.winsBetName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.winsBet b{font:700 var(--fs-body)/1 var(--font-num);font-variant-numeric:tabular-nums;color:var(--text)}
.winsBet.zero b,.winsBet.zero .winsBetName{color:var(--text3)}
.winsBetMetric{min-width:0;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.winBet{display:inline-block;margin-right:6px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent);font-weight:600}
/* номер истории - залитый кружок в начале названия, как ❶ (трехзначный - пилюля) */
.stfIdL{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.7em;height:1.7em;margin-right:6px;padding:0 .45em;border-radius:999px;background:color-mix(in srgb,var(--text) 16%,transparent);color:var(--text);font-size:0.625rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;vertical-align:.12em}
.stfMain:not(.kb) .stfGrid .stfTile.cur .stfIdL,.stfKbCard.cur .stfIdL{background:color-mix(in srgb,var(--st) 45%,transparent)}
/* корзина: «что не так?» - плашка внизу по центру, причины чипами + свой текст */
.stfWhy{position:fixed;left:50%;bottom:22px;z-index:60;transform:translateX(-50%);width:min(440px,calc(100vw - 24px));padding:12px 14px;background:var(--surface3);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.4);font-size:0.8125rem;color:var(--text)}
.stfWhyHead{display:flex;align-items:center;gap:10px}
.stfWhyHead span{flex:1;min-width:0}
.stfWhyHead b{font-variant-numeric:tabular-nums}
.stfWhyUndo,.stfWhyX{border:0;background:none;font:inherit;cursor:pointer;padding:2px 4px}
.stfWhyUndo{color:var(--accent);font-weight:600;font-size:0.75rem}
.stfWhyX{color:var(--text3)}
.stfWhyX:hover{color:var(--text)}
.stfWhyChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.stfWhyChips button{border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--text2);font:inherit;font-size:0.75rem;padding:4px 10px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.stfWhyChips button:hover{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.stfWhyOwn{display:flex;gap:6px;margin-top:8px}
.stfWhyOwn input{flex:1;min-width:0;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--text);font:inherit;font-size:0.75rem}
.stfWhyOwn input:focus{outline:none;border-color:var(--accent)}
.stfWhyOwn button{border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-size:0.75rem;font-weight:600;padding:0 12px;cursor:pointer}
.stfWhyDone{margin:0;text-align:center;color:var(--text2)}
@media (hover:none){.stfWhyOwn input{font-size:16px}}

/* ── Настройки - раздел под меню (v-305, по образцу настроек fixit): слева разделы, справа один раздел ── */
.setView{position:fixed;left:0;right:0;bottom:0;top:var(--setTop,0px);z-index:26;background:var(--bg);animation:fadeIn .15s ease}
.setView[hidden]{display:none}
html.view-set body{overflow:hidden}
#paneSettingsBtn.on{color:var(--accent);background:var(--accent-weak)}
.setBox{display:flex;height:100%;max-width:1080px;margin:0 auto}
.setSide{flex:0 0 264px;display:flex;flex-direction:column;gap:2px;min-height:0;padding:18px 12px 14px;border-right:1px solid var(--line);overflow-y:auto}
.setSideHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 12px 10px}
.setSideHead b{display:flex;align-items:center;gap:9px;font:700 1.0625rem/1 var(--font-display);letter-spacing:-.01em}
.setSideHead b .ic{width:18px;height:18px;color:var(--accent)}
.setFind{width:100%;margin:0 0 6px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface1);color:var(--text);font:400 .8125rem/1.3 var(--font-ui);outline:none;-webkit-appearance:none}
.setFind::placeholder{color:var(--text4)}
.setFind:focus{border-color:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-weak)}
.setNavList{display:flex;flex-direction:column;gap:2px}
.setNavH{padding:16px 10px 6px;font:700 .625rem/1 var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--text4)}
.setNavH:empty{padding:0;margin:10px 4px 6px;border-top:1px solid var(--line)}
.setNav{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;color:var(--text2);font:500 .8438rem/1.2 var(--font-ui);text-align:left;cursor:pointer;transition:background .12s ease,color .12s ease,opacity .12s ease}
.setNav .ic{width:16px;height:16px;flex:none;opacity:.75}
.setNav:hover{background:var(--card-hover);color:var(--text)}
.setNav.on{background:var(--accent-weak);color:var(--accent);font-weight:600}
.setNav.on .ic{opacity:1}
.setNav.dim{opacity:.35}
.setBox.searching .setNav.on{background:none;color:var(--text2);font-weight:500}
.setSideFoot{margin-top:auto;padding:14px 10px 0;display:flex;flex-direction:column;gap:3px;font:500 .6875rem/1.3 var(--font-num);color:var(--text3)}
.setSideFoot span{display:flex;align-items:center;gap:7px}
.setSideFoot span i{width:6px;height:6px;border-radius:50%;background:var(--good)}
.setSideFoot small{padding-left:13px;color:var(--text4);font-size:.625rem}
.setMain{flex:1;min-width:0;overflow-y:auto;padding:26px 36px 80px;overscroll-behavior:contain}
.setMainIn{max-width:720px;margin:0 auto}
.setView .setPage{min-height:0;animation:fadeIn .15s ease}
.setPageHead{margin:0 0 6px}
.setPageHead h2{margin:0 0 6px;font:700 1.25rem/1.2 var(--font-display);letter-spacing:-.01em;color:var(--text)}
.setPageHead p{margin:0;max-width:560px;font:400 .8125rem/1.55 var(--font-ui);color:var(--text3)}
.setView .setSect[hidden]{display:none}
.setView .setH{margin:26px 0 2px;color:var(--text3);letter-spacing:.1em}
.setView .setGroup{padding:0}
.setView .setSect:first-of-type > .setGroup{margin-top:10px}
.setView .setRow{min-height:0;padding:15px 0;gap:28px}
.setView .setRow.setMiss{display:none}
.setView .setLbl{gap:4px}
.setView .setLbl b{font-size:.875rem}
.setView .setLbl small{font-size:.75rem;line-height:1.5;max-width:420px}
.setView .setGroup > .otFxChips{padding:12px 0 4px}
.setView .paneGrid{max-width:420px}
.setView .paneTray,.setView .paneFoot{max-width:420px}
.setView .setPage[data-page="cards"] .setPageHead{margin-bottom:18px}
.setBox.searching .setPage{margin-bottom:34px}
.setBox.searching .setPage[data-page="cards"] > :not(.setPageHead){display:none}
.setBox.searching .setPageHead p{display:none}
.setBox.searching .setPageHead h2{font-size:.6875rem;font-family:var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.setNone{padding:40px 0;color:var(--text3);font-size:.875rem}
/* узко: разделы - лентой сверху, панель под ней */
@media (max-width:760px){
  .setBox{flex-direction:column}
  .setSide{flex:none;padding:12px 12px 0;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .setSideHead{padding:0 0 10px 4px}
  .setNavList{flex-direction:row;gap:4px;overflow-x:auto;margin:0 -12px;padding:2px 12px 10px;scrollbar-width:none}
  .setNavList::-webkit-scrollbar{display:none}
  .setNavH{display:none}
  .setNav{width:auto;flex:none;white-space:nowrap;padding:7px 11px;background:var(--surface1)}
  .setSideFoot{display:none}
  .setMain{padding:18px 16px calc(env(safe-area-inset-bottom) + 60px)}
  .setView .setRow{gap:12px}
}
@media (min-width:761px){
  .setView .setRow.stack{flex-direction:row;align-items:center;gap:28px;padding:15px 0}
  .setView .setRow.stack .paneSeg{display:inline-flex;width:auto;flex-wrap:nowrap}
  .setView .setRow.stack .paneSeg button{flex:none;padding:6px 10px}
}
/* iPad portrait / Split View: меню и погода той же высоты, что кнопки справа (DUDE и т.п.) - 30px */
@media (min-width:621px) and (max-width:899px){
  .tabs{--navH:30px}
  .tabGroup,.tabsWeather.wideOnly,.ftBtn.ftOn{height:var(--navH)}
}
/* iPhone: меню той же высоты, что кнопки справа - 30px */
@media (max-width:620px){
  .tabGroup{height:30px}
  .tabs .tabGroup .tab{height:auto;min-height:0}
}
/* меню как кнопки справа (v-316): каждая вкладка - отдельная кнопка высотой с кнопки справа, фон surface2, радиус --r-inner, иконка 16px (18 на таче) */
.tabs .tabGroup{height:auto;padding:0;gap:6px;background:none;border-radius:0;align-items:center}
.tabs .tabGroup .tab{flex:0 0 auto;height:var(--navH,30px);min-height:0;padding:0 11px;border-radius:var(--r-inner);background:var(--surface2);color:var(--text2);box-shadow:none}
.tabs .tabGroup .tab .ic{width:16px;height:16px}
.tabs .tabGroup .tab:hover:not(.active){background:var(--surface3);color:var(--text)}
.tabs .tabGroup .tab.active{background:var(--surface3);color:var(--text);box-shadow:none}
.tabs .tabGroup .tabExt{margin-left:0}
.tabs .tabGroup .tabExt::before{content:none}
.tabs.navT1 .tabGroup .tab{width:var(--navH,30px);min-width:0;padding:0}
@media (pointer:coarse){.tabs .tabGroup .tab .ic{width:18px;height:18px}}
/* STORYTELL: метка «тест поста» на карточках - три точки, 3/3 = акцентом; подробности в подсказке */
.stfKbTest{display:inline-flex;align-items:center;gap:2px;cursor:help}
.stfKbTest i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--text3) 30%,transparent)}
.stfKbTest i.on{background:var(--text3)}
.stfKbTest.ok i.on{background:var(--accent)}
/* ONE THING: предложение дня на первом экране - строка «почему» + Беру / Другое */
.oneThingPanel .otDaily{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin-top:10px;font-size:0.8125rem;line-height:1.35;color:var(--text3);text-align:center}
.otDaily > span{flex:0 1 auto;min-width:0;max-width:720px}
.otDaily small{display:block;font:600 0.625rem/1.4 var(--font-num);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
/* STORYTELL · новая версия рядом с прошлой + диктовка (v-323) */
.stfVarAdd{display:inline-grid;place-items:center;padding:0;width:26px;border:1px dashed var(--line);color:var(--text3);margin-left:4px}
.stfVarAdd:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent)}
.stfVarAdd svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.stfDuoEmpty .stfBtn{display:inline-flex;align-items:center;gap:6px}
.stfDuoEmpty .stfBtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.stfCmpVars{flex:1;min-height:0;display:flex;flex-direction:column}
.stfCmpSrc{display:inline-flex;gap:2px;margin-right:10px;padding:2px;border-radius:8px;background:var(--card)}
.stfCmpSrc button{height:22px;padding:0 9px;border:0;border-radius:6px;background:none;color:var(--text3);font:600 0.6875rem var(--font-ui);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.stfCmpSrc button:hover{color:var(--text)}
.stfCmpSrc button.on{background:var(--card-solid,var(--bg));color:var(--text);box-shadow:0 0 0 1px var(--line)}
.stfCmpNew .stfPostLab{color:var(--accent)}
.stfCmpName{display:inline-flex;align-items:center;gap:5px;font-size:0.75rem;color:var(--text3)}
.stfCmpName input{width:4.5em;height:24px;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text);font:600 0.8125rem var(--font-ui)}
.stfCmpName input:focus{outline:none;border-color:var(--accent)}
.stfCmpLink{border:0;background:none;padding:2px 4px;color:var(--text3);font:inherit;font-size:0.75rem;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.stfCmpLink:hover{color:var(--text)}
.stfCmpEdWrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.stfCmpEd{transition:border-color .15s ease,box-shadow .15s ease}
.stfCmpFoot{flex:none;display:flex;align-items:center;gap:10px}
.stfCmpCount{margin-left:auto;font-size:0.75rem;color:var(--text3);font-variant-numeric:tabular-nums}
.stfEdRec,.stfEdRec:focus{border-color:color-mix(in srgb,var(--bad) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 14%,transparent)}
/* микрофон: в шапке - иконка (+ таймер в записи), в новой версии - кнопка с подписью; кольцо дышит громкостью голоса */
.stfMic{width:auto;min-width:32px;padding:0 8px;gap:5px;display:inline-flex;align-items:center;justify-content:center}
.stfMicT{font:600 0.75rem var(--font-ui);font-variant-numeric:tabular-nums}
.stfMicT:empty{display:none}
.stfMicBig{--lvl:0;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text2);font:600 0.8125rem var(--font-ui);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.stfMicBig:hover:not(:disabled){color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.stfMicBig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.stfMicBig kbd{font:500 0.6875rem var(--font-ui);color:var(--text3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.stfMic.rec,.stfMicBig.rec{--lvl:0;color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 45%,transparent);box-shadow:0 0 0 calc(2px + var(--lvl) * 7px) color-mix(in srgb,var(--bad) 18%,transparent);transition:box-shadow .08s linear}
.stfMicBig.rec kbd{color:inherit;border-color:currentColor;opacity:.7}
.stfMic.busy,.stfMicBig.busy{opacity:1;color:var(--accent);cursor:progress}
.stfMic.busy svg,.stfMicBig.busy svg{animation:stfMicPulse 1s ease-in-out infinite}
@keyframes stfMicPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.stfMic.busy svg,.stfMicBig.busy svg{animation:none}.stfMic.rec,.stfMicBig.rec{box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}}
@container (max-width:620px){.stfCmp .stfCmpEd{min-height:40vh}.stfMicBig kbd{display:none}}

/* ── ЗАСТАВКА (v-324, v-328 iPad; static/saver/saver.js): северное сияние на весь экран */
.svRoot{position:fixed;inset:0;height:100dvh;z-index:2147483000;background:#01030a;opacity:0;transition:opacity 1.4s ease;cursor:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.svRoot.on{opacity:1}
.svRoot:not(.on){transition-duration:.4s;pointer-events:none}
.svRoot.svCur{cursor:default}
.svRoot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* без WebGL или если GPU отказал - мягкое CSS-сияние вместо чёрного экрана */
.svRoot.svNoGl canvas{display:none}
.svRoot.svNoGl::before,.svRoot.svNoGl::after{content:"";position:absolute;inset:-20%;filter:blur(40px);animation:svDrift 38s ease-in-out infinite alternate}
.svRoot.svNoGl::before{background:radial-gradient(60% 35% at 30% 62%,rgba(40,220,190,.42),transparent 70%),radial-gradient(45% 30% at 68% 52%,rgba(123,107,224,.38),transparent 70%)}
.svRoot.svNoGl::after{background:radial-gradient(50% 25% at 55% 70%,rgba(22,137,172,.4),transparent 70%);animation-duration:27s;animation-direction:alternate-reverse}
@keyframes svDrift{0%{transform:translate(-4%,2%) scale(1)}100%{transform:translate(5%,-3%) scale(1.12)}}
.svLay{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex;gap:clamp(22px,4vh,44px);padding:max(clamp(28px,7vh,84px),env(safe-area-inset-top)) max(clamp(28px,5vw,80px),env(safe-area-inset-right)) max(clamp(28px,7vh,84px),env(safe-area-inset-bottom)) max(clamp(28px,5vw,80px),env(safe-area-inset-left));--svK:1;--svA:.86;color:rgb(236 246 255/var(--svA));transition:translate 3s ease}
.svClock{display:flex;flex-direction:column;gap:10px;opacity:0;animation:svIn 2.4s .6s ease forwards}
.svClock b{font:200 calc(clamp(64px,11vw,156px)*var(--svK))/.9 Inter,'AnthropicSans',sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(120,220,255,.18),0 2px 30px rgba(0,0,0,.5)}
.svClock small{font:500 calc(clamp(12px,1.3vw,16px)*(.6 + var(--svK)*.4))/1.2 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.55;padding-left:.35em}
@keyframes svIn{to{opacity:1}}
.svInfo{max-width:min(440px,42vw);display:flex;flex-direction:column;gap:clamp(14px,2.4vh,24px);opacity:0;animation:svIn 2.4s 1s ease forwards}
.svBlk small{display:block;font:500 clamp(11px,1vw,13px)/1.2 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-bottom:6px}
.svBlk b{display:block;font:300 calc(clamp(17px,1.7vw,24px)*(.55 + var(--svK)*.45))/1.3 Inter,'AnthropicSans',sans-serif;text-shadow:0 2px 20px rgba(0,0,0,.5);overflow-wrap:anywhere}
.svBlk ul{list-style:none;margin:6px 0 0;padding:0;font:400 clamp(13px,1.15vw,15px)/1.4 Inter,sans-serif;opacity:.7}
.svBlk li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svBlk li i{font-style:normal;opacity:.65}
/* раскладка (Заставка → Вид): split - часы слева, блоки справа; left/right - всё в нижнем углу; center; top - верхний левый */
.svAt-split{justify-content:space-between;align-items:flex-end}
.svAt-split .svInfo{text-align:right}
.svAt-left,.svAt-right,.svAt-center,.svAt-top{flex-direction:column}
.svAt-left{justify-content:flex-end;align-items:flex-start}
.svAt-right{justify-content:flex-end;align-items:flex-end;text-align:right}
.svAt-left .svInfo,.svAt-right .svInfo{order:-1}
.svAt-center{justify-content:center;align-items:center;text-align:center}
.svAt-center .svClock small{padding-left:0}
.svAt-top{justify-content:flex-start;align-items:flex-start}
.svSz-s{--svK:.55}.svSz-l{--svK:1.4}
.svF-serif .svClock b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.svF-serif .svBlk b,.svF-serif .svBlk ul{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:calc(clamp(19px,1.9vw,27px)*(.55 + var(--svK)*.45))}
.svF-serif .svBlk ul{font-size:clamp(15px,1.3vw,18px)}
.svF-mono .svClock b{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:-.06em}
.svF-mono .svBlk b,.svF-mono .svBlk ul{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:-.02em}
.svF-bold .svClock b{font-family:Unbounded,Inter,sans-serif;font-weight:700;letter-spacing:-.03em}
@media (max-width:699px){.svAt-split{flex-direction:column;justify-content:flex-end;align-items:flex-start}.svAt-split .svInfo{order:-1;text-align:left}.svInfo{max-width:100%}}
.svHint{position:absolute;z-index:1;top:max(24px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font:500 13px/1 Inter,sans-serif;letter-spacing:.02em;color:rgba(236,246,255,.75);padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;white-space:nowrap;animation:svHint 4.5s ease forwards}
@keyframes svHint{0%{opacity:0;translate:0 -6px}12%,70%{opacity:1;translate:0 0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.svRoot.svNoGl::before,.svRoot.svNoGl::after{animation:none}}
/* кнопка ✦ - и на iPad в портрете (834px), где остальные wideOnly скрыты; [hidden] из настроек сильнее revert */
@media (min-width:700px){#svBtn.wideOnly{display:revert!important}}
#svBtn[hidden]{display:none!important}
.svSws{display:grid;grid-template-columns:repeat(10,26px);gap:6px}
.svSw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);transition:transform .15s}
.svSw:hover{transform:scale(1.12)}
.svSw.on{border-color:var(--text,#fff);box-shadow:0 0 0 2px var(--bg,#000) inset}
.svCyc{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.svCycB{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:999px;border:1px solid var(--line,rgba(127,127,127,.25));background:none;color:inherit;font:inherit;font-size:12px;cursor:pointer}
.svCycB i{width:26px;height:12px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)}
.svCycB.on{border-color:var(--accent,#1689AC);background:color-mix(in srgb,var(--accent,#1689AC) 14%,transparent)}
@media (max-width:699px){.svSws{grid-template-columns:repeat(5,26px)}}
.svPrev{position:relative;height:220px;border-radius:var(--r-inner,14px);overflow:hidden;background:#01030a;margin-bottom:16px}
.svPrev canvas{width:100%;height:100%;display:block}
.svGo{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.svGo:hover{background:rgba(255,255,255,.24)}
.svGo svg{width:14px;height:14px}

/* ── STORYTELL на телефоне (<700px, в т.ч. Telegram Mini App) ──
   список на весь экран, история - поверх списка со «←»; ширина списка с десктопа (--stf-list) тут не действует.
   Без рамок и скруглений, заголовок «STORYTELL» не дублирует вкладку; поля ввода 16px - иначе iOS зумит при фокусе. */
@media (max-width:699px){
  html.view-st .stFull,.stFull.full{padding:0 0 env(safe-area-inset-bottom)}
  .stFull.full .stfBox{border:0;border-radius:0;box-shadow:none}
  /* шапка окна: без названия; ✕ только в модалке (во вкладке и на отдельной странице закрывать нечего), ■ озвучки - плавает справа */
  .stFull.full .stfHead{position:absolute;top:7px;right:8px;z-index:6;padding:0;border:0;background:transparent;gap:6px}
  .stFull.full .stfHead .stfTitle,html.view-st .stFull [data-stf=close]{display:none}
  .stFull.full .stfBox:has(.stfHead .crmBtn:not([style*="none"])) .stfListBar{padding-right:52px}
  html:is(.view-st,.stfAlone) .stFull.full .stfBox .stfListBar{padding-right:10px}
  html:is(.view-st,.stfAlone) .stFull.full .stfBox:has(.stfNow:not(.hidden)) :is(.stfListBar,.stfVHead){padding-right:64px}

  /* раскладка: список на весь экран, история - слоем поверх */
  .stFull .stfMain:not(.kb){flex-direction:column}
  .stFull .stfMain:not(.kb) .stfCol{flex:1 1 auto;max-width:none;min-width:0;border-right:0}
  .stFull .stfMain .stfView{position:absolute;inset:0;z-index:4}

  /* строка поиска: крупнее под палец */
  .stFull .stfListBar{gap:8px;padding:10px 10px 6px}
  .stFull .stfDdBtn,.stFull #stfQ{height:38px}
  .stFull #stfQ{font-size:16px;padding-left:34px}
  .stFull .stfSearchBtn{left:6px}
  .stFull .stfListBar .stfViewSw button{width:36px;height:34px}
  /* фильтр: во всю ширину экрана, статус | тема в две колонки, сортировка - строкой ниже */
  .stFull .stfDdPop,.stFull .stfDdPop.cols3{width:calc(100vw - 20px);grid-template-columns:1fr 1fr;gap:4px 8px;max-height:70dvh}
  .stFull .stfDdPop.cols3 .stfDdGrp:has(.stfSortOpt){grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);padding-top:6px}
  .stFull .stfDdPop .stfDdGrp{min-width:0}

  /* список: статус - цветом номера, ⋯ - под звездой (не наезжает на текст), звезда - зона 36px */
  .stfMain:not(.kb) .stfGrid.asList{padding:2px 6px 24px}
  .stfMain:not(.kb) .stfGrid.asList .stfTile{grid-template-columns:minmax(0,1fr) 32px;gap:4px 8px;padding:11px 4px 11px 10px}
  .stfMain:not(.kb) .stfGrid .stfTile .stfIdL{background:color-mix(in srgb,var(--st) 32%,transparent)}
  .stfMain:not(.kb) .stfGrid.asList .stfTDot{display:none}
  .stfMain:not(.kb) .stfGrid.asList .stfTile .stfPick{width:32px;height:32px;margin:-6px -2px 0 0;justify-self:center}
  .stfMain:not(.kb) .stfGrid.asList .stfTile .stfMore{right:6px;bottom:8px;width:30px;height:26px;background:transparent;opacity:.55}
  .stfGrid.asList .stfTTitle{font-size:0.9375rem;line-height:1.35}
  .stfGrid.asList .stfTText{font-size:0.8125rem;margin-top:3px}
  .stfMain:not(.kb) .stfGrid:not(.asList){grid-template-columns:1fr 1fr;gap:8px;padding:6px 10px 24px}
  .stfMain:not(.kb) .stfGrid:not(.asList) .stfTile .stfMore{opacity:.55}

  /* шапка истории: 1-я строка «← название ★», 2-я - режимы, + , Пост|Материал, статус, микрофон */
  .stFull .stfVHead{flex-wrap:wrap;gap:8px 6px;padding:8px 10px}
  .stFull .stfVHead::after{content:"";order:2;flex-basis:100%;height:0}
  .stFull .stfVHead>*{order:3}
  .stFull .stfVHead [data-stf=back]{order:0;display:inline-flex;width:36px;height:36px;padding:0;align-items:center;justify-content:center;font-size:1.125rem;line-height:1}
  .stFull .stfVHead [data-stf=back] span,.stFull .stfVHead .stfSpacer{display:none}
  .stFull .stfVHead .stfVTitle{order:1;flex:1 1 0;margin-left:2px;align-items:center}
  .stFull .stfVHead .stfVTitle b{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:0.9375rem;line-height:1.3}
  .stFull .stfVHead>.stfPick{order:1;width:36px;height:36px}
  .stFull .stfVHead .stfMode button,.stFull .stfVHead .stfDuoBtn{height:34px;padding:0 11px}
  .stFull .stfVHead .stfStageSel{height:34px;margin-left:auto;font-size:0.8125rem}
  .stFull .stfVHead .stfMic{width:36px;height:36px}
  .stFull .stfSaveBar{padding:8px 10px}

  /* тело: одна колонка (пост, под ним материал), текст крупнее, правка - 16px */
  .stFull .stfVBody{padding:14px 14px 28px}
  .stFull .stfDuo{grid-template-columns:1fr}
  .stFull .stfMd{font-size:1rem;line-height:1.6}
  .stFull .stfMd h2,.stFull .stfMd h3{font-size:0.75rem}
  .stFull :is(.stfEditor,.stfDuoEd,.stfCmpEd){font-size:16px;line-height:1.55}
  .stFull .stfEditor{min-height:calc(100dvh - 220px)}
  .stFull .stfPostBar{flex-wrap:wrap;row-gap:6px}
  .stFull .tgView{max-width:none}

  /* низ: путь к файлу на телефоне не нужен, стрелки - во всю ширину */
  .stFull .stfVFoot{padding:4px 8px}
  .stFull .stfVFoot .stfPath{display:none}
  .stFull .stfVNav{flex:1;justify-content:space-between}
  .stFull .stfVNav .stfIcBtn{width:44px;height:40px}
}
/* ONE THING: «сменить» прямо на плашке - сразу выбор (поле «Своё» в фокусе + варианты одним тапом) */
.oneThingPanel .otChange{position:absolute;top:50%;right:14px;z-index:3;transform:translateY(-50%);padding:6px 11px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);background:rgba(0,0,0,.28);color:var(--text);font:600 .625rem/1 var(--font-num);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;opacity:0;transition:opacity .18s ease,background .18s ease;backdrop-filter:blur(6px)}
.oneThingPanel:hover .otChange,.oneThingPanel .otChange:focus-visible{opacity:1}
.oneThingPanel .otChange:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
@media (hover:none){.oneThingPanel .otChange{opacity:.8;top:10px;transform:none;right:10px}}
html.light-mode .oneThingPanel .otChange{background:rgba(255,255,255,.6);border-color:rgba(15,23,42,.12)}
.otrOwn{margin-top:4px;margin-bottom:12px}
/* ONE THING: своя высота плашки (Настройки → ONE THING → Размер), логотип сжимается под низкую плашку */
html.otHSet:not(.otDock) .oneThingPanel .oneThingRow{min-height:var(--otHeight)}
html.otHSet:not(.otDock) .otLogo{width:min(64px,calc(var(--otHeight) - 16px));height:min(64px,calc(var(--otHeight) - 16px));margin-top:calc(min(64px,calc(var(--otHeight) - 16px)) / -2)}

/* DUDE custom unlock duration */
.msgUnlockCtl{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.msgUnlockCtl label{display:flex;align-items:center;gap:5px;color:var(--text3);font-size:.75rem}
.msgUnlockCtl label.on{color:var(--accent)}
.msgUnlockCtl input{width:5.5em;padding:5px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface2);color:var(--text);font:inherit}
.setView .setRow:has(.msgUnlockCtl){flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}
.setView .setRow:has(.msgUnlockCtl) .setCtl{max-width:100%}