*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; height: 100vh; height: 100lvh; overflow: hidden; overscroll-behavior: none; }
body {
  background: #F5B61D;
  color: #fff;
  font-family: "General Sans", -apple-system, "SF Pro Display", system-ui, sans-serif;
  height: 100vh; height: 100lvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  letter-spacing: -0.005em;
}
button, input { font-family: inherit; cursor: pointer; }
*::-webkit-scrollbar { display: none; }
input { -webkit-appearance: none; appearance: none; }

:root {
  /* brand — yellow persona world */
  --brand: #E8C547;
  --brand-lite: #F0D660;
  --brand-deep: #D4B538;
  --brand-soft: rgba(232,197,71,0.18);
  --brand-border: rgba(232,197,71,0.45);
  --brand-glow: rgba(232,197,71,0.28);

  /* legacy aliases (so old CSS keeps working until we sweep it) */
  --accent: #E8C547;
  --accent-soft: rgba(232,197,71,0.18);
  --accent-border: rgba(232,197,71,0.45);
  --accent-text: rgba(232,197,71,0.9);

  --bg: #0a0a0c;
  --bg2: #161618;
  --bg3: #1d1d20;

  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --panel: #161618;
  --panel-border: 1px solid rgba(255,255,255,0.08);
  --panel-border-strong: 1px solid rgba(255,255,255,0.14);
  --tab-h: 88px;
}

@keyframes atmoBreath {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
@keyframes atmoBreathWarm {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.app {
  max-width: 480px; margin: 0 auto;
  height: 100vh; height: 100lvh;
  position: relative;
  overflow: hidden;
}

/* ============ ATMOSPHERE BACKGROUND ============ */
.atmosphere {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.atmo-base {
  position: absolute; inset: 0;
  background: #F5B61D;
}
.atmo-glow-top {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 38% at 50% -6%, rgba(232,197,71,0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* ============ HERO BG (full-screen persona, 3 zoom levels) ============ */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: none;
}
.hero-bg.on { display: block; }
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.hero-bg.zoom-0 .full-img { opacity: 1; }
.hero-bg.zoom-2 .head-img { opacity: 1; }
.hero-bg .full-img { object-position: center 35%; }
.hero-bg .head-img { object-position: center 30%; }
/* zoom-0 = full body, zoom-2 = head & shoulders. zoom-1 unused (legacy). */
.hero-bg.zoom-0 .hero-frames img { object-position: center 50%; }
.hero-bg.zoom-2 .hero-frames img { object-position: center 30%; }

/* zone overlay over the persona */
@keyframes zonePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(232,197,71,0.18), 0 0 18px rgba(232,197,71,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(232,197,71,0.10), 0 0 30px rgba(232,197,71,0.55); }
}
@keyframes zoneBreathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.hero-zones {
  position: absolute; inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.app.map-on .hero-zones { opacity: 1; pointer-events: auto; }
.hero-zone {
  position: absolute;
  width: 36px; height: 36px;
  margin-left: -18px; margin-top: -18px;
  display: none;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  pointer-events: auto;
}
/* === FULL BODY (zoom-0): only posture + body === */
.hero-bg.zoom-0 .hero-zone[data-zone="posture"],
.hero-bg.zoom-0 .hero-zone[data-zone="body"] { display: flex; }
.hero-bg.zoom-0 .hero-zone[data-zone="posture"] { left: 33%; top: 30%; }
.hero-bg.zoom-0 .hero-zone[data-zone="body"]    { left: 50%; top: 52%; }

/* === HEAD CLOSE-UP (zoom-2): only face zones === */
.hero-bg.zoom-2 .hero-zone[data-zone="brows"],
.hero-bg.zoom-2 .hero-zone[data-zone="cheek"],
.hero-bg.zoom-2 .hero-zone[data-zone="jaw"],
.hero-bg.zoom-2 .hero-zone[data-zone="skin"],
.hero-bg.zoom-2 .hero-zone[data-zone="voice"] { display: flex; }
.hero-bg.zoom-2 .hero-zone[data-zone="brows"] { left: 60%; top: 38%; }   /* правая бровь */
.hero-bg.zoom-2 .hero-zone[data-zone="cheek"] { left: 36%; top: 52%; }   /* левая скула */
.hero-bg.zoom-2 .hero-zone[data-zone="jaw"]   { left: 64%; top: 52%; }   /* правая скула (как просил) */
.hero-bg.zoom-2 .hero-zone[data-zone="skin"]  { left: 50%; top: 58%; }   /* нос */
.hero-bg.zoom-2 .hero-zone[data-zone="voice"] { left: 50%; top: 90%; }
.hero-zone .core {
  width: 12px; height: 12px;
  border-radius: 99px;
  background: rgba(10,10,12,0.85);
  border: 1.5px solid rgba(255,255,255,0.5);
  transition: all 0.3s ease;
}
.hero-zone.active .core {
  background: var(--brand);
  border-color: var(--brand);
  animation: zonePulse 2.4s ease-in-out infinite;
}
.hero-zone.regress .core {
  background: #C26A6A;
  border-color: #C26A6A;
}
.hero-zone .ping {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 99px;
  border: 1.5px solid var(--brand);
  opacity: 0;
}
.hero-zone.active .ping { animation: zoneBreathe 2.4s ease-in-out infinite; }
.hero-zone .zlbl {
  position: absolute;
  bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 6px;
  padding: 5px 9px;
  border-radius: 99px;
  background: #0a0a0c;
  color: #fff;
  font-size: 11px; font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
  border: 1px solid var(--brand);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.hero-zone:hover .zlbl,
.hero-zone:active .zlbl { opacity: 1; }

/* toggle Обычный / Карта */
.hero-map-toggle {
  position: absolute;
  top: max(env(safe-area-inset-top, 16px), 56px);
  left: 12px;
  z-index: 6;
  opacity: calc(1 - var(--sheet-progress, 0));    /* fades out as sheet expands medium → expanded */
  transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(10,10,12,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.1);
}
.hero-map-toggle button {
  padding: 7px 12px;
  border-radius: 99px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.6);
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.hero-map-toggle button.on {
  background: var(--brand);
  color: #0a0a0c;
}
.app.task-open .hero-map-toggle,
body:not(:has(.hero-bg.on)) .hero-map-toggle { display: none; }

/* zoom indicator — 3 dots top-right */
.hero-zoom-indicator {
  position: absolute;
  top: max(env(safe-area-inset-top, 16px), 56px);
  right: 16px;
  z-index: 6;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10,10,12,0.55);
  padding: 8px 6px;
  border-radius: 99px;
  pointer-events: none;
}
.hero-zoom-indicator .dot {
  width: 5px; height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-bg.zoom-0 ~ .hero-zoom-indicator .dot:nth-child(3),
.hero-bg.zoom-1 ~ .hero-zoom-indicator .dot:nth-child(2),
.hero-bg.zoom-2 ~ .hero-zoom-indicator .dot:nth-child(1) {
  background: var(--brand);
  transform: scale(1.4);
}
.hero-bg-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 35%, rgba(232,197,71,0.32) 0%, rgba(232,197,71,0.12) 35%, transparent 70%);
  mix-blend-mode: soft-light;
}
.hero-bg-vignette {
  position: absolute; inset: 0;
  background: transparent;
}

/* When the sheet is closed there is no active screen — pill-tabs sit on top of bg */
.app.sheet-closed .pill-tabs { /* nothing for now, but kept for future tweaks */ }

/* ============ APP SHEET — floating card with margins on all sides ============ */
:root {
  --sheet-gap: 16px;                                 /* lowered — sheet sits closer to the bottom edge */
  --safe-top: 0px;
  --safe-bottom: 0px;
}
@supports (padding: max(0px)) {
  :root {
    /* iPhone: gap = max(16px, safe-bottom - 4) → ~30px on a Pro w/ home indicator. */
    --sheet-gap: max(16px, calc(env(safe-area-inset-bottom, 0px) - 4px));
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
}
/* Standalone (Add to Home Screen / PWA): ignore notch for the sheet's expanded height,
   so it grows to fill the screen like in Safari (where Safari itself handles the Dynamic Island).
   Top-bars and headers keep their own env() offsets so back buttons stay under the notch. */
@media all and (display-mode: standalone) {
  :root { --safe-top: 0px; }
}
/* === DEV preview toggles (force Safari / Standalone look on desktop & DevTools) === */
/* Safari = mimics real iPhone Safari, gap raised slightly so peek sits a notch above the bottom edge. */
html.force-safari {
  --sheet-gap: 16px;
  --safe-top: 0px;
  --safe-bottom: 0px;
}
/* Standalone = same gap as Safari (10px), keeps notch reservation (47px). */
html.force-standalone {
  --sheet-gap: 16px;
  --safe-top: 47px;
  --safe-bottom: 34px;
}
/* Single registered property drives BOTH bottom and padding-bottom — they stay in lock-step,
   eliminating the desync that made tabs jitter on iPhone transitions. */
@property --sheet-drop {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.app-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  --sheet-drop: 0px;                           /* peek/medium: no bottom drop */
  width: calc(100% - var(--sheet-gap) * 2 + var(--sheet-drop) * 2);
  max-width: 396px;
  /* Bottom = sheet-gap from the very bottom edge — matches side gap exactly. */
  bottom: calc(var(--sheet-gap) - var(--sheet-drop));
  padding-bottom: var(--sheet-drop);           /* compensates the bottom drop — tabs stay put */
  z-index: 50;
  height: 75px;                                /* peek height */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;                   /* drag-handle + pill-tabs anchored to bottom */
  color: #fff;
  /* pill look applied to the SHEET itself (in every state) so drag-handle and tabs feel unified */
  background: rgba(20,20,22,0.92);
  border: 0;     /* removed — was visible as a thin white line on the dark expanded bg, flickering on transitions because border-left/right/bottom snapped to 0 in .expanded outside the transition list */
  /* Peek/medium = 41 (capped by half-height); expanded = 54 (just under iPhone Pro hardware curve ~55). */
  border-radius: calc(41px + 13px * var(--sheet-drop) / var(--sheet-gap));
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  overflow: hidden;
  /* All properties 0.4s synchronized — fast snap, no judder. */
  transition:
    height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    --sheet-drop 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    max-width 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    background 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.app-sheet.dragging {
  transition: none !important;
  touch-action: none;                                /* iOS: lock all native gestures during drag */
  will-change: height, width, bottom, padding-bottom;
}
.app-sheet > .sheet-content { display: none; }
.app-sheet.medium > .sheet-content,
.app-sheet.expanded > .sheet-content,
.app-sheet.dragging > .sheet-content { display: flex; }
.app-sheet.medium {
  /* medium: same width/bottom as peek — only height grows upward */
  height: calc(42% + 10.5px);
}
.app-sheet.expanded {
  --sheet-drop: var(--sheet-gap);
  max-width: 100vw;     /* explicit length so the transition from 396px is smooth (`none` keyword wouldn't animate) */
  /* Leave ~120px of background visible at the top — sheet is a tall bottom-sheet, not fullscreen. */
  height: calc(100% - max(120px, var(--safe-top) + 80px));
  background: #0a0a0c;                         /* deep black in expanded — intentional mood shift */
}

/* drag handle visible in every state — user grabs it to drag the sheet */
.app-sheet > .sheet-drag-handle { display: flex; }
.app.task-open .pill-tabs { display: none; }

.sheet-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  min-height: 0;
  /* Freeze inner content width to the sheet's MEDIUM-state width — same in dragging / expanded.
     On iPhone (sheet-gap=36) medium sheet is `100vw - 72`, so a flat 396 cap is too loose.
     min(100vw - 2*gap, 396px) tracks the true medium width on every device. */
  width: 100%;
  max-width: min(calc(100vw - var(--sheet-gap) * 2), 396px);
  margin-left: auto;
  margin-right: auto;
  /* Compensate for absolute drag-handle (6+4+2 = 12px tall). Applied here on
     the base rule so it's also in effect while .dragging is active (which has
     no .medium / .expanded class) — otherwise content sits 12px too high
     during a swipe and visibly drops down on snap. */
  padding-top: 12px;
}
.app-sheet.medium .sheet-content,
.app-sheet.expanded .sheet-content {
  display: flex;
  flex-direction: column;
}

/* screens inside sheet — content panes */
.screen {
  display: none;
  flex-direction: column;
  color: #fff;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.screen.active { display: flex; }

/* prep stays a fullscreen overlay (it's a pre-onboarding gate); level used to be too,
   but is now a regular pane inside the app-sheet so it follows medium/expanded states. */
.screen[data-screen="prep"] {
  position: fixed;
  left: 50%; top: 0; bottom: 0;
  width: 100%; max-width: 480px;
  transform: translateX(-50%);
  height: 100%;
  background: var(--bg);
  border-top-left-radius: 0; border-top-right-radius: 0;
  border-top: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  z-index: 95;
  overflow: hidden;
}

/* drag handle anchored to the TOP of the sheet via absolute positioning.
   Why absolute (not flex-end / flex-start): when the sheet collapses to peek,
   .sheet-content switches to display:none, which would yank the handle from
   "top of sheet" to "bottom of sheet" in a single frame at the end of the
   spring snap — visually a 40-50px jump. Absolute removes the handle from
   the flex flow so its position never depends on whether content is rendered. */
.sheet-drag-handle {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
  flex-shrink: 0;
  z-index: 2;
  pointer-events: auto;
}
.sheet-drag-handle::before {
  content: '';
  width: 64px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
}

/* peek drag-handle — no longer needed; the sheet's own drag-handle is always visible. */
.sheet-peek-handle { display: none !important; }

.status-offset {
  height: max(60px, calc(env(safe-area-inset-top, 16px) + 50px));
  flex-shrink: 0;
}

/* ============ KICKERS / LABELS ============ */
.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
  font-family: var(--mono);
  text-transform: uppercase;
}
.kicker.accent { color: var(--accent); }

.title-display {
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  color: #fff; line-height: 1.1;
}
.title-large {
  font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.1; color: #fff;
}

/* ============ ONBOARDING ============ */
.onb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.onb-top-bar {
  position: relative; z-index: 5;
  height: 56px; padding: 0 22px;
  padding-top: max(env(safe-area-inset-top, 16px), 16px);
  display: flex; align-items: center; justify-content: flex-end;
  flex-shrink: 0;
}
.onb-skip {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.55);
  font-size: 15px; font-weight: 500;
  display: flex; align-items: center; gap: 4px;
  padding: 8px;
}
.onb-skip:hover { color: #fff; }
.onb-hero {
  flex: 1; min-height: 0;
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: 0 28px;
}
.onb-headline { padding-bottom: 12px; }
.onb-headline-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px; font-family: var(--mono);
  text-transform: uppercase;
}
.onb-headline-title {
  font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.12; color: #fff;
}
.onb-headline-sub {
  font-size: 15px; line-height: 1.45;
  color: rgba(255,255,255,0.55);
  margin-top: 12px; letter-spacing: -0.005em;
}
.onb-bottom {
  position: relative; z-index: 5;
  padding: 0 22px max(32px, calc(env(safe-area-inset-bottom, 0px) + 32px));
  flex-shrink: 0;
}
.onb-dots {
  display: flex; gap: 6px; margin-bottom: 22px; padding-left: 6px;
}
.onb-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,0.25);
  transition: all 0.28s ease;
}
.onb-dot.active { width: 18px; background: #fff; }
.onb-cta {
  width: 100%; height: 58px; border-radius: 99px;
  border: 0; background: #fff; color: #000;
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}
.onb-cta:disabled {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.35);
  cursor: default;
}
.onb-cta:hover:not(:disabled) { transform: translateY(-1px); }

.onb-splash {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 18px;
  height: 100%;
}
.onb-splash-mark {
  width: 78px; height: 78px; border-radius: 22px;
  background: linear-gradient(155deg, #2a2a2a 0%, #0a0a0a 100%);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.onb-splash-name {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.4); font-family: var(--mono);
}

.onb-scene {
  position: relative; flex: 1; min-height: 360px;
}

/* Day cards */
.onb-day-card {
  width: 130px; padding: 18px 18px 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(38,38,40,0.95), rgba(20,20,22,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
}
.onb-day-card .lab {
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  font-family: var(--mono); margin-bottom: 6px;
}
.onb-day-card .num {
  font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: #fff;
}
.onb-day-card .bar {
  margin-top: 14px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.1); position: relative; overflow: hidden;
}
.onb-day-card .fill {
  position: absolute; inset: 0; background: var(--accent);
}

/* Goal icons */
.onb-goal-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(48,48,50,0.95), rgba(22,22,24,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.onb-goal-icon.hero {
  width: 88px; height: 88px; border-radius: 22px;
  font-size: 42px;
  box-shadow: 0 30px 60px rgba(199,232,76,0.2), 0 0 0 1px rgba(199,232,76,0.3);
}
.onb-count-pill {
  padding: 10px 20px; border-radius: 99px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  font-size: 14px; font-weight: 600; color: #fff;
}

/* Plan card */
.onb-plan-card {
  width: 280px; padding: 18px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(40,40,42,0.95), rgba(18,18,20,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.onb-plan-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.onb-plan-row:first-of-type { border-top: 0; }
.onb-plan-time {
  font-size: 11px; font-family: var(--mono);
  color: rgba(255,255,255,0.4); width: 38px;
}
.onb-plan-title {
  font-size: 13px; font-weight: 600; color: #fff;
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb-plan-title.done {
  color: rgba(255,255,255,0.4); text-decoration: line-through;
}
.onb-plan-dur { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.onb-plan-check {
  width: 18px; height: 18px; border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.onb-plan-check.done { background: var(--accent); border: 0; }

/* Progress card */
.onb-progress-card {
  width: 280px; padding: 20px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(40,40,42,0.95), rgba(18,18,20,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
}
.onb-before-after {
  width: 90px; height: 110px; border-radius: 14px;
  background: repeating-linear-gradient(45deg, #2a2a2a 0 8px, #1f1f1f 8px 16px);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: flex-end; padding: 8px;
}
.onb-before-after.after {
  border: 1px solid rgba(199,232,76,0.4);
  box-shadow: 0 0 30px rgba(199,232,76,0.2);
}

/* Dark options for forms */
.onb-dark-option {
  width: 100%; padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(40,40,42,0.95), rgba(22,22,24,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff; text-align: left;
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: all 0.18s ease;
  margin-bottom: 10px;
}
.onb-dark-option.on {
  background: linear-gradient(160deg, rgba(199,232,76,0.18), rgba(199,232,76,0.05));
  border-color: var(--accent-border);
  box-shadow: 0 0 30px rgba(199,232,76,0.15);
}
.onb-dark-option .icon {
  font-size: 22px; color: rgba(255,255,255,0.3); font-family: var(--mono);
}
.onb-dark-option.on .icon { color: var(--accent); }

/* Slider field */
.onb-field {
  padding: 18px 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(40,40,42,0.95), rgba(22,22,24,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.onb-field-row {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 12px;
}
.onb-field-label {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.5); letter-spacing: 0.02em;
}
.onb-field-val {
  font-size: 22px; font-weight: 700; color: #fff;
  font-family: var(--mono); letter-spacing: -0.02em;
}
.onb-field-val .unit {
  font-size: 12px; opacity: 0.5; margin-left: 6px; font-weight: 500;
}
.onb-field input[type=range] {
  width: 100%; height: 4px; accent-color: var(--accent);
}
.onb-field-range {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,0.3);
  margin-top: 6px; font-family: var(--mono);
}

/* Goals scroll */
.onb-goals-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
  margin: 0 -28px; padding: 8px 28px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
}
.onb-goal-cat {
  margin-bottom: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.onb-goal-cat:first-of-type { padding-top: 0; border-top: 0; }
.onb-goal-cat-head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding: 6px 8px;
  margin-left: -8px; margin-right: -8px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.14s ease;
}
.onb-goal-cat-head:hover {
  background: rgba(255,255,255,0.03);
}
.onb-goal-cat-head.all-on {
  background: rgba(199,232,76,0.06);
}
.onb-goal-cat-icon { font-size: 16px; }
.onb-goal-cat-name {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  flex: 1; text-align: left;
}
.onb-goal-cat-head.all-on .onb-goal-cat-name { color: var(--accent); }
.onb-goal-cat-count {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  font-family: var(--mono);
}
.onb-goal-cat-head.all-on .onb-goal-cat-count { color: var(--accent); }
.onb-goal-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.onb-goal-chip {
  padding: 9px 13px; border-radius: 99px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.14s ease;
}
.onb-goal-chip.on {
  background: rgba(199,232,76,0.16);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* Final */
.onb-final-bg {
  background: radial-gradient(ellipse at 50% 0%, #1a1a2e 0%, #0a0a0e 60%, #000 100%) !important;
}
.onb-final-mark {
  width: 96px; height: 96px; border-radius: 26px;
  background: linear-gradient(155deg, #1a1a1c 0%, #000 100%);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.onb-final-text { text-align: center; padding-bottom: 12px; }
.onb-final-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  color: rgba(199,232,76,0.85);
  margin-bottom: 14px; font-family: var(--mono);
}
.onb-final-title {
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.1; color: #fff; margin-bottom: 12px;
}
.onb-final-sub {
  font-size: 15px; line-height: 1.45;
  color: rgba(255,255,255,0.55); letter-spacing: -0.005em;
}

.onb-screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  background: #000; z-index: 50;
  animation: fadeIn 0.4s ease;
}
.onb-screen.active { display: flex; }

/* ============ DAY 0 — PREP ============ */
.prep-content {
  flex: 1; padding: 4px 22px 0;
  overflow-y: auto;
}
.prep-header {
  padding: 4px 0 24px;
  text-align: center;
}
.prep-header-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px; font-family: var(--mono);
}
.prep-header-num {
  font-size: 56px; font-weight: 700; line-height: 1;
  letter-spacing: -0.035em;
  color: #fff; margin-bottom: 10px;
  font-feature-settings: 'tnum' 1;
}
.prep-header-num-total {
  color: rgba(255,255,255,0.25); font-weight: 500;
}
.prep-header-sub {
  font-size: 14px; color: rgba(255,255,255,0.55);
  margin-bottom: 18px; letter-spacing: -0.005em;
}
.prep-progress {
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.1);
  overflow: hidden; margin: 0 4px;
}
.prep-progress-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.22s ease;
}
.prep-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.4);
  margin-top: 8px; padding: 0 4px;
  font-family: var(--mono);
}

.prep-section { margin-bottom: 28px; }
.prep-section-head {
  display: flex; align-items: baseline;
  justify-content: space-between;
  padding: 0 4px; margin-bottom: 10px;
}
.prep-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.prep-section-count {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.32);
  font-family: var(--mono);
}
.prep-rows {
  display: flex; flex-direction: column; gap: 8px;
}
.prep-row {
  width: 100%; display: flex; align-items: center;
  gap: 14px; padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  text-align: left;
  transition: all 0.16s ease;
  font-family: inherit; color: inherit;
}
.prep-row:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
.prep-row.on {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}
.prep-row .check {
  width: 26px; height: 26px; border-radius: 999px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.16s ease;
}
.prep-row .check svg { width: 14px; height: 14px; }
.prep-row.on .check {
  border: 0; background: var(--accent);
}
.prep-row .body { flex: 1; min-width: 0; }
.prep-row .title-row {
  display: flex; align-items: baseline; gap: 8px;
}
.prep-row .title {
  font-size: 16px; font-weight: 600;
  color: #fff; letter-spacing: -0.01em;
  transition: color 0.16s ease;
}
.prep-row.on .title {
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.3);
}
.prep-row .opt {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  padding: 2px 6px; border-radius: 4px;
}
.prep-row .meta {
  font-size: 13px; color: rgba(255,255,255,0.42);
  margin-top: 2px; letter-spacing: -0.005em;
}
.prep-row .price {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  font-family: var(--mono); white-space: nowrap;
}

.prep-footer {
  position: relative; z-index: 2;
  padding: 16px 20px max(40px, calc(env(safe-area-inset-bottom, 0px) + 32px));
  background: linear-gradient(to top, #050506 70%, rgba(5,5,6,0));
  flex-shrink: 0;
}
.prep-cta {
  width: 100%; padding: 17px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  transition: all 0.18s ease;
}
.prep-cta.primary {
  border: 0;
  background: var(--accent);
  color: #0a0a0a;
}
.prep-cta:hover { transform: translateY(-1px); }
.prep-disclaimer {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.45;
}

/* ============ V3 — TODAY (hero persona + flat task list) ============ */
.t-fixed-header {
  flex-shrink: 0;             /* sticky top — doesn't scroll with task list */
  padding-top: 8px;
}
.t-scroll {
  flex: 1; overflow-y: auto;
  padding: 8px 0 110px;
}
/* compact summary header for Today sheet (replaces big hero card) */
.t-sheet-head {
  padding: 4px 22px 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.t-sheet-head-meta {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.t-sheet-head-day {
  font-size: 18px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.t-sheet-bar {
  margin: 0 22px 4px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.t-sheet-bar-fill {
  height: 100%; background: var(--brand);
  border-radius: 99px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px var(--brand);
}

.t-topline {
  padding: 0 22px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
/* Small uppercase header style — same DNA as .lvl-detail-meta («привычка · 09:30»).
   Used for the today date and create-task title/cancel for visual consistency. */
.t-date {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* HERO persona card */
.hero-persona {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand-lite) 0%, var(--brand) 60%, var(--brand-deep) 100%);
  box-shadow: 0 30px 60px rgba(232,197,71,0.25), 0 12px 24px rgba(0,0,0,0.4);
  border: 0; padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.hero-persona:active { transform: scale(0.992); }
.hero-photo {
  position: relative;
  height: 360px;
}
.hero-photo img,
.hero-photo video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.hero-day-pill {
  position: absolute; top: 16px; right: 16px;
  background: rgba(10,10,12,0.85);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: #fff;
  letter-spacing: -0.1px;
}
.hero-tap-hint {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(10,10,12,0.5);
  border-radius: 999px;
  padding: 5px 10px 5px 12px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 4px;
}
.hero-meta {
  background: #0a0a0c;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hero-meta-text { flex: 1; min-width: 0; }
.hero-level-label {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.hero-bar {
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.hero-bar-fill {
  height: 100%; background: var(--brand);
  box-shadow: 0 0 8px var(--brand);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.hero-xp-pill {
  background: var(--brand); color: #0a0a0c;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

/* Add-task button — replaces the old 0/N pill in the same spot.
   Yellow circle with a plus icon (см. Add-Button.html design). */
.hero-add-btn {
  width: 36px; height: 36px;
  border-radius: 18px;
  border: 0; padding: 0;
  background: var(--brand);
  color: #0a0a0c;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 14px rgba(232,197,71,0.22);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.hero-add-btn:active { transform: scale(0.92); }
.hero-add-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2.4; stroke-linecap: round;
}

/* ============ CREATE-TASK screen — lives inside .sheet-content like data-screen="task" ============ */
.screen[data-screen="create-task"] {
  background: var(--bg, #0a0a0c);
  color: #fff;
}
.screen[data-screen="create-task"].active {
  display: flex;
  flex-direction: column;
}
/* hide tab bar while create-task is open (drag-handle stays — same as today/path/me) */
.app.create-task-open .pill-tabs { display: none; }

.ct-head {
  flex-shrink: 0;
  /* 8px top + 14px bottom + 22px sides — matches .t-topline on today screen and
     the task-pane topbar so «Новая задача» / «Отмена» sit at the same coordinates. */
  padding: 8px 22px 14px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
/* Title block matches Today screen typography:
   .ct-h-title  = .t-date     (14/500, rgba(255,255,255,0.62))
   .ct-h-sub    = .t-sheet-head-meta  (11/500, rgba(255,255,255,0.5))
   .ct-h-cancel = same as title (14/500, same colour) */
.ct-h-block { display: flex; flex-direction: column; min-width: 0; }
.ct-h-title {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ct-h-sub {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: -0.1px;
  line-height: 1.45;
}
.ct-h-cancel {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.38);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0; margin: 0;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.ct-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}

.ct-name-input {
  width: 100%;
  background: #161618;
  color: #fff; border: 0; border-radius: 22px;
  padding: 18px;
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.3px;
  outline: none; margin-bottom: 8px;
  font-family: inherit;
}
.ct-name-input::placeholder { color: rgba(255,255,255,0.32); }
.ct-name-input:focus { box-shadow: 0 0 0 1px rgba(232,197,71,0.4) inset; }

.ct-seg {
  display: flex; gap: 4px;
  background: #161618; border-radius: 22px;
  padding: 4px; margin-bottom: 8px;
}
.ct-seg button {
  flex: 1; padding: 12px;
  border: 0; border-radius: 18px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.1px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.18s ease, color 0.18s ease;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-seg button.on {
  background: var(--brand); color: #0a0a0c;
  font-weight: 600;
}
.ct-seg button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ct-desc {
  width: 100%;
  background: #161618; color: #fff;
  border: 0; border-radius: 22px;
  padding: 14px 16px;
  font-size: 14px; line-height: 1.45;
  resize: none; min-height: 76px;
  outline: none; margin-bottom: 8px;
  font-family: inherit;
}
.ct-desc::placeholder { color: rgba(255,255,255,0.32); }
.ct-desc:focus { box-shadow: 0 0 0 1px rgba(232,197,71,0.4) inset; }

.ct-row {
  background: #161618; border: 0; border-radius: 22px;
  padding: 14px 16px; width: 100%;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; text-align: left;
  color: #fff;
  transition: background 0.15s ease;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-row:active { background: #1d1d20; }
.ct-row .ico {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: rgba(255,255,255,0.05);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ct-row .ico svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.78); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-row .ct-body-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-row .lab { font-size: 12px; color: rgba(255,255,255,0.42); letter-spacing: -0.1px; }
.ct-row .val { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row .val.muted { color: rgba(255,255,255,0.4); font-weight: 500; }
.ct-row .arrow { color: rgba(255,255,255,0.32); font-size: 18px; }

/* Sticky footer with the «Добавить» CTA — always at the bottom of the screen,
   in flex flow, so the form's scroll area never overlaps it. */
.ct-cta-wrap {
  flex-shrink: 0;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(10,10,12,0) 0%, var(--bg, #0a0a0c) 18%);
}
.ct-cta {
  width: 100%;
  height: 54px;
  border: 0; border-radius: 27px;
  background: var(--brand); color: #0a0a0c;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  box-shadow: 0 14px 30px rgba(232,197,71,0.18);
  transition: opacity 0.18s ease, transform 0.12s ease;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-cta:active { transform: scale(0.98); }
.ct-cta:disabled { opacity: 0.45; box-shadow: none; }

/* ========= INLINE ACCORDION pickers (Category / Date / Time) ========= */
/* Tap a row → it expands inline below the value, no overlay over the form. */
.ct-acc {
  background: #161618;
  border-radius: 22px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: background 0.2s ease;
}
.ct-acc.on { background: #19191b; }
.ct-acc-head {
  width: 100%;
  /* Match .task-row in the today list — same padding, same heights, same rhythm. */
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0;
  color: #fff; text-align: left;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-acc-head .ico {
  width: 28px; height: 28px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.ct-acc-head .ico svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.78); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.18s ease; }
.ct-acc.on .ct-acc-head .ico { background: var(--brand); }
.ct-acc.on .ct-acc-head .ico svg { stroke: #0a0a0c; }
.ct-acc-head .ct-body-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
/* Mirror .task-row .sub: 11/500, rgba(255,255,255,0.38), margin-bottom 2 — gives the
   identical "label above value" rhythm as the today list rows. */
.ct-acc-head .lab {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.38);
  margin-bottom: 2px;
  letter-spacing: 0;
}
/* Mirror .task-row .title: 15/600, -0.2px tracking, white. */
.ct-acc-head .val { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-acc-head .val.muted { color: rgba(255,255,255,0.4); font-weight: 500; }
.ct-acc-head .chev {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.32);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1), color 0.18s ease;
  flex-shrink: 0;
}
.ct-acc-head .chev svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-acc.on .ct-acc-head .chev { transform: rotate(180deg); color: var(--brand); }
.ct-acc-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.36s cubic-bezier(0.32,0.72,0,1), opacity 0.22s ease;
}
.ct-acc.on .ct-acc-body { opacity: 1; }
.ct-acc[data-acc="cat"].on .ct-acc-body  { max-height: 280px; }
.ct-acc[data-acc="date"].on .ct-acc-body { max-height: 540px; }
.ct-acc[data-acc="time"].on .ct-acc-body { max-height: 420px; }
.ct-acc[data-acc="checkins"].on .ct-acc-body { max-height: 220px; }
.ct-acc[data-acc="meter"].on .ct-acc-body { max-height: 360px; }

/* Стандартные элементы для чек-инов / счётчика — общие в форме создания задачи */
.ct-acc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ct-acc-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.ct-acc-row:first-child { padding-top: 4px; }
.ct-acc-row-label {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.78);
  letter-spacing: -0.1px;
}
.ct-toggle {
  position: relative; width: 50px; height: 30px;
  background: rgba(120,120,128,0.32); border-radius: 99px;
  transition: background 0.18s ease;
  border: 0; padding: 0;
  cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ct-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 26px; height: 26px; background: #fff; border-radius: 99px;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ct-toggle.on { background: #34c759; }
.ct-toggle.on::after { transform: translateX(20px); }
.ct-stepper {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.ct-stepper button {
  width: 34px; height: 34px;
  border: 0; background: transparent;
  color: #fff; font-size: 18px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-stepper button:active { background: rgba(255,255,255,0.1); }
.ct-stepper .val {
  min-width: 38px; text-align: center;
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.ct-num-input {
  background: rgba(255,255,255,0.08);
  border: 0; border-radius: 10px;
  padding: 7px 10px;
  color: #fff; font-size: 14px; font-weight: 600;
  font-family: inherit; outline: none;
  width: 78px; text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none; -moz-appearance: textfield;
}
.ct-num-input::-webkit-outer-spin-button,
.ct-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-num-input:focus { background: rgba(255,255,255,0.12); }
.ct-unit-select {
  background: rgba(255,255,255,0.08);
  border: 0; border-radius: 10px;
  padding: 7px 28px 7px 12px;
  color: #fff; font-size: 14px; font-weight: 600;
  font-family: inherit; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23ffffff80' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.ct-acc-pad {
  padding: 4px 14px 14px;
}

/* Category — 2-column tile grid */
.ct-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ct-cat-tile {
  background: rgba(255,255,255,0.04);
  border: 0; border-radius: 14px;
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.ct-cat-tile:active { transform: scale(0.97); }
.ct-cat-tile .ico {
  width: 26px; height: 26px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.ct-cat-tile .ico svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.78); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.18s ease; }
.ct-cat-tile.on { background: var(--brand); color: #0a0a0c; }
.ct-cat-tile.on .ico { background: rgba(10,10,12,0.18); }
.ct-cat-tile.on .ico svg { stroke: #0a0a0c; }

/* Date — quick chips, calendar nav, calendar grid (inline, no extra padding) */
.ct-quick { display: flex; gap: 6px; margin-bottom: 12px; }
.ct-quick button { flex: 1; padding: 10px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 0; color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease; }
.ct-quick button.on { background: var(--brand); color: #0a0a0c; }

/* 2×2 grid of recurrence pattern presets — only shown in «Постоянная» mode */
.ct-pat {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.ct-pat button {
  padding: 11px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 0;
  color: rgba(255,255,255,0.78);
  font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.ct-pat button.on { background: var(--brand); color: #0a0a0c; font-weight: 600; }

.ct-cal-hint {
  margin-top: 8px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.4);
  text-align: center;
  letter-spacing: -0.1px;
}

/* Mode-aware visibility — JS toggles `data-recur="once"|"daily"` on the screen root */
.screen[data-screen="create-task"][data-recur="once"] .ct-mode-daily { display: none; }
.screen[data-screen="create-task"][data-recur="daily"] .ct-mode-once { display: none; }

/* Multi-pick highlight on calendar — полностью жёлтый фон, чёрный текст. */
.ct-cal .day.multi {
  background: var(--brand);
  color: #0a0a0c; font-weight: 600;
}

.ct-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.ct-cal-nav .mo { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: #fff; text-transform: capitalize; }
.ct-cal-nav button { background: rgba(255,255,255,0.06); border: 0; width: 30px; height: 30px; border-radius: 15px; color: #fff; font-size: 14px; display: grid; place-items: center; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ct-cal {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ct-cal .wd { text-align: center; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.32); letter-spacing: 0.14em; padding: 4px 0 4px; }
.ct-cal .day {
  aspect-ratio: 1 / 1; border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,0.78);
  border: 0; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 0; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-cal .day:disabled { color: rgba(255,255,255,0.16); }
.ct-cal .day.today { background: rgba(255,255,255,0.06); color: #fff; font-weight: 600; }
.ct-cal .day.on { background: var(--brand); color: #0a0a0c; font-weight: 600; }

/* Time — preset list + custom input */
.ct-time-list { display: flex; flex-direction: column; gap: 12px; }
.ct-time-list .preset {
  background: rgba(255,255,255,0.04); border: 0; border-radius: 14px;
  padding: 11px 14px; color: #fff;
  display: flex; align-items: center; gap: 10px; text-align: left;
  width: 100%; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, color 0.18s ease;
}
.ct-time-list .preset .ico {
  width: 28px; height: 28px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.78);
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}
.ct-time-list .preset .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-time-list .preset .lab { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ct-time-list .preset .lab .nm { font-size: 14px; font-weight: 600; }
.ct-time-list .preset .lab .sub { font-size: 12px; color: rgba(255,255,255,0.4); transition: color 0.18s ease; }
.ct-time-list .preset.on { background: var(--brand); color: #0a0a0c; }
.ct-time-list .preset.on .nm { color: #0a0a0c; }
.ct-time-list .preset.on .sub { color: rgba(10,10,12,0.6); }
.ct-time-list .preset.on .ico { background: rgba(10,10,12,0.18); color: #0a0a0c; }
.ct-time-list .custom-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border-radius: 14px;
  padding: 11px 14px; cursor: pointer;
}
.ct-time-list .custom-row .ico {
  width: 28px; height: 28px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center; flex-shrink: 0;
  color: rgba(255,255,255,0.78);
}
.ct-time-list .custom-row .ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-time-list .custom-row .lab { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ct-time-list .custom-row .lab .nm { font-size: 14px; font-weight: 600; color: #fff; }
.ct-time-list .custom-row .lab .sub { font-size: 12px; color: rgba(255,255,255,0.4); }
.ct-time-list .custom-row input {
  width: auto; min-width: 80px;
  background: rgba(255,255,255,0.08); border: 0; border-radius: 10px;
  padding: 8px 10px; color: var(--brand); font-size: 14px; font-weight: 600;
  outline: none; color-scheme: dark; font-family: inherit; text-align: center;
  cursor: pointer;
}

/* Inline wheel-picker для формы создания задачи (часы:минуты на всю ширину) */
.ct-wheel-card {
  position: relative;
  height: 168px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  margin-top: 0;
  overflow: hidden;
}
.ct-wheel-card::before, .ct-wheel-card::after {
  content: ''; position: absolute; left: 0; right: 0; height: 56px;
  pointer-events: none; z-index: 3;
}
.ct-wheel-card::before {
  top: 0;
  background: linear-gradient(180deg, #19191b 30%, rgba(25,25,27,0));
}
.ct-wheel-card::after {
  bottom: 0;
  background: linear-gradient(0deg, #19191b 30%, rgba(25,25,27,0));
}
.ct-wheel-band {
  position: absolute; left: 16px; right: 16px;
  top: 50%; transform: translateY(-50%);
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  z-index: 1;
}
.ct-wheel {
  position: relative;
  height: 100%;
  width: 78px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  scrollbar-width: none;
}
.ct-wheel::-webkit-scrollbar { display: none; }
.ct-wheel-inner { padding: 62px 0; }
.ct-wheel-cell {
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.4);
  scroll-snap-align: center;
  letter-spacing: -0.5px;
  transition: color 0.16s ease, font-weight 0.16s ease;
}
.ct-wheel-cell.active { color: #fff; font-weight: 600; }
.ct-wheel-colon {
  width: 14px; text-align: center;
  color: #fff;
  font-size: 26px; font-weight: 600; letter-spacing: -0.5px;
  z-index: 2;
  margin-top: -2px;
}
/* Когда «Весь день» активен — wheel-picker приглушён */
.ct-time-list .preset[data-time="any"].on ~ .ct-wheel-card { opacity: 0.45; }

.ct-toast {
  position: absolute; left: 50%; bottom: 110px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(40,40,42,0.95); color: #fff;
  padding: 12px 18px; border-radius: 18px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 28px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 20;
}
.ct-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.t-section-head {
  padding: 24px 22px 14px;
  display: flex; justify-content: space-between; align-items: baseline;
  flex-shrink: 0;
}
.t-section-title {
  margin: 0;
  font-size: 22px; font-weight: 600;
  color: #fff; letter-spacing: -0.5px;
}
.t-section-meta {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.38);
}

/* legacy compat — no longer referenced visually but keep selectors safe */
.t-header { display: none; }
.t-header-row {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 14px;
}
.t-day-counter {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--brand); font-family: var(--mono);
}
.t-meta {
  font-size: 14px; color: rgba(255,255,255,0.55);
}
.t-progress-bar {
  margin-top: 16px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.t-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease;
}

.view-toggle-row {
  padding: 4px 22px 12px;
  display: flex; justify-content: flex-end;
  flex-shrink: 0;
}
.view-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.view-toggle button {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 0; font-size: 11px; font-weight: 600;
  letter-spacing: -0.005em;
}
.view-toggle button.on {
  background: #fff; color: #0a0a0a;
}
.view-toggle button svg { width: 14px; height: 14px; }

.scroll-area {
  flex: 1; overflow-y: auto;
  padding: 4px 14px 96px;
  -webkit-overflow-scrolling: touch;            /* iOS momentum scroll */
  overscroll-behavior: contain;                 /* don't chain scroll to body */
  touch-action: pan-y;
}

/* V3 — Task cards (flat, mono-color, brand accent only) */
.schedule-panel {
  padding: 0; background: transparent; border: 0; box-shadow: none;
}
.task-divider { display: none; }

.task-row {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 0; border-radius: 22px;
  text-align: left;
  /* box-shadow не в transition — снятие свечения при переходе medium↔expanded мгновенное */
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  color: #fff;
  cursor: pointer;
}
.task-row.now {
  background: var(--brand);
  box-shadow: 0 12px 28px rgba(232,197,71,0.28);
}
.task-row.done { opacity: 0.45; }
.task-row .time {
  display: none; /* time moved into pill on the right */
}
.task-row .body { flex: 1; min-width: 0; }
.task-row .title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-row.now .title { color: #0a0a0c; }
.task-row.done .title {
  color: rgba(255,255,255,0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.4);
}
.task-row .sub {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.38);
  margin-bottom: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.task-row.now .sub { color: rgba(10,10,12,0.6); }
.task-row .now-badge,
.task-row .time-pill {
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  letter-spacing: -0.1px;
  border: none;
  margin: 0;
}
button.time-pill { cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; }
button.time-pill:active { transform: scale(0.94); background: rgba(255,255,255,0.12); }
.task-row.now .now-badge,
.task-row.now .time-pill {
  background: #0a0a0c; color: var(--brand);
}
.task-row.done .time-pill {
  background: rgba(232,197,71,0.15);
  color: var(--brand);
}

.task-check-circle {
  width: 26px; height: 26px; border-radius: 99px;
  border: 1.8px solid rgba(255,255,255,0.55);
  background: transparent;
  flex-shrink: 0;
  transition: all 0.18s ease;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.task-row.now .task-check-circle {
  border-color: rgba(10,10,12,0.7);
}
.task-check-circle.done {
  background: #fff; border-color: #fff;
}
.task-check-circle svg { width: 14px; height: 11px; }
/* Кружок с кольцом-прогрессом для combo / windowed задач */
.task-check-circle.has-progress {
  border: 0;
  color: #fff;
  background: transparent;
}
.task-check-circle.has-progress svg { width: 26px; height: 26px; }
/* На жёлтой активной карточке — кольцо БЕЛОЕ (не тёмное) */
.task-row.now .task-check-circle.has-progress { color: #fff; }
.task-row.now .task-check-circle.has-progress svg circle:first-child { stroke: rgba(255,255,255,0.32); }

/* Swipe-to-delete (iOS-style): свайп влево → красная «Удалить» справа. */
.task-swipe {
  position: relative;
  margin: 0 16px 8px;
  border-radius: 22px;
  overflow: hidden;
  touch-action: pan-y;
}
.task-swipe-del {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 84px;
  border: 0; padding: 0;
  background: #ff453a;
  color: #fff;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 0;
  transition: background 0.12s ease;
}
.task-swipe-del:active { background: #d93428; }
.task-swipe-shell {
  position: relative;
  z-index: 1;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  background: var(--bg);  /* перекрывает delete когда не раскрыто; БЕЗ border-radius чтобы не было просветов в углах */
}
.task-swipe.revealed .task-swipe-shell {
  transform: translateX(-84px);
}
/* Полный свайп до коммита — кнопка ярче и шире */
.task-swipe.will-commit .task-swipe-del {
  background: #c92e25;
}
/* Внутри shell — снимаем горизонтальные отступы с .task-row, она занимает всю ширину */
.task-swipe-shell > .task-row {
  margin: 0; width: 100%;
}

/* Inline-accordion для задач с windows[] (Язык/Осанка):
   1-й тап на строку → разворачивает блок с чек-инами и кнопкой.
   2-й тап → открывает полную шторку. */
.task-item { display: contents; }
.task-inline-acc {
  margin: 0 16px;                   /* нижний 0 — иначе у combo/windowed +8px поверх swipe-margin */
  padding: 0 14px;
  background: var(--bg2);
  border-radius: 0 0 22px 22px;     /* нижние корпуса как у строки сверху */
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.24s ease, margin-bottom 0.24s ease;
}
/* В раскрытом состоянии: нижние углы строки квадратные → шов с аккордеоном бесшовный */
.task-item.expanded .task-row {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.task-item.expanded > .task-swipe {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.task-item.expanded .task-swipe-shell {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.task-item.expanded > .task-inline-acc {
  max-height: 160px; opacity: 1;
  padding: 12px 14px;
  margin-bottom: 8px;               /* возвращаем зазор только когда раскрыто */
}
/* combo может содержать 5-10 пунктов — даём больше места */
.task-item-combo.expanded > .task-inline-acc {
  max-height: 640px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.task-inline-acc-cells {
  display: grid; gap: 6px;
  margin-bottom: 10px;
}
.task-inline-acc-cell {
  height: 24px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 0; padding: 0;
  transition: background 0.16s ease, transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.task-inline-acc-cell.on { background: var(--brand); }
.task-inline-acc-cell.missed,
.checkin-cell.missed {
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cell-missed-label {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.3px;
  font-weight: 500;
}
.cell-done-label {
  font-size: 9px;
  color: rgba(10,10,12,0.75);
  letter-spacing: 0.3px;
  font-weight: 700;
}
/* on-ячейка должна центрировать своё содержимое */
.task-inline-acc-cell.on,
.checkin-cell.on {
  display: flex; align-items: center; justify-content: center;
}
.task-inline-acc-cell { cursor: pointer; }
.task-inline-acc-cell.missed { cursor: default; }
.task-inline-acc-cell:not(.missed):active {
  transform: scale(0.92);
  background: rgba(232,197,71,0.65);
}
.task-inline-acc-btn {
  display: block; width: 100%;
  padding: 11px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 0; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, transform 0.12s ease;
}
.task-inline-acc-btn:active { transform: scale(0.98); }
.task-inline-acc-btn[disabled] {
  opacity: 0.45;
  cursor: default;
  color: rgba(255,255,255,0.6);
}
.task-inline-acc-btn[disabled]:active { transform: none; }
/* Сохранить = тот же фон что и Чек-ин, меняется только текст */
/* Для combo: между списком пунктов и кнопкой — небольшой воздух */
.combo-list + .task-inline-acc-btn { margin-top: 12px; }

/* 3D card grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; padding: 8px 6px;
}
.task-card-3d {
  position: relative; padding: 16px 14px 18px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(48,48,52,0.95), rgba(20,20,24,0.95));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  text-align: left;
  color: #fff; min-height: 132px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: all 0.24s ease;
}
.task-card-3d.now {
  background: linear-gradient(155deg, rgba(199,232,76,0.22), rgba(199,232,76,0.04));
  border: 1px solid var(--accent-border);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 32px rgba(199,232,76,0.18);
}
.task-card-3d.done { opacity: 0.55; }
.tc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.tc-time {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.45);
  font-family: var(--mono);
}
.task-card-3d.now .tc-time { color: var(--accent); }
.tc-now-badge {
  font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
  padding: 3px 7px; border-radius: 99px;
  background: var(--accent); color: #0a0a0a;
  font-family: var(--mono);
}
.tc-title {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; line-height: 1.2;
  margin-bottom: 6px;
}
.task-card-3d.done .tc-title { text-decoration: line-through; }
.tc-sub {
  font-size: 11px; color: rgba(255,255,255,0.5);
}

.tomorrow-card {
  margin: 14px 16px 0;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--bg2);
  border: 0;
  display: flex; align-items: center; gap: 12px;
  cursor: default;
}
.tomorrow-card .label {
  font-size: 11px; font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,0.38);
  margin-bottom: 2px;
}
.tomorrow-card .text {
  font-size: 14px; font-weight: 500; color: #fff;
}
.tomorrow-card .body { flex: 1; }
.tomorrow-arrow {
  color: rgba(255,255,255,0.38);
  font-size: 18px;
}

/* ============ Аккордеоны под основным списком (Просрочено / Весь день / Выполнено) ============ */
.overdue-section,
.allday-section,
.done-section {
  margin: 18px 0 0;
}
.overdue-header,
.allday-header,
.done-header {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 6px 22px 8px;
  display: flex; align-items: center; gap: 8px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.overdue-label,
.allday-label,
.done-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.42);
}
.overdue-count,
.allday-count,
.done-count {
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.1px;
  color: rgba(255,255,255,0.32);
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  margin-left: 2px;
}
.overdue-chev,
.allday-chev,
.done-chev {
  margin-left: auto;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.32);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.overdue-section.open .overdue-chev,
.allday-section.open .allday-chev,
.done-section.open .done-chev { transform: rotate(180deg); }
.overdue-list,
.allday-list,
.done-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.overdue-section.open .overdue-list,
.allday-section.open .allday-list,
.done-section.open .done-list { max-height: 1200px; }
.overdue-list .task-row { opacity: 0.78; }
.overdue-list .task-row .time-pill {
  background: rgba(255,160,140,0.10);
  color: rgba(255,180,160,0.85);
}
.allday-list .task-row .time-pill {
  background: rgba(120,170,255,0.08);
  color: rgba(160,190,230,0.85);
}

/* ============ V3 — PATH ============ */
.p-header-v3 {
  padding: 4px 22px 4px;
  display: flex; align-items: baseline; justify-content: space-between;
  flex-shrink: 0;
}
.p-title {
  margin: 0;
  font-size: 28px; font-weight: 600;
  color: #fff; letter-spacing: -0.7px;
}
.p-day {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.62);
}
.p-sub-v3 {
  padding: 0 22px;
  font-size: 14px; color: rgba(255,255,255,0.62);
  margin-bottom: 18px;
  flex-shrink: 0;
}
.p-overall {
  padding: 0 22px 18px;
  flex-shrink: 0;
}
.p-overall-bar {
  height: 6px; border-radius: 3px;
  background: var(--bg2);
  overflow: hidden;
}
.p-overall-fill {
  height: 100%; background: var(--brand);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* legacy shim */
.p-header { display: none; }
.level-card {
  padding: 16px 18px; margin-bottom: 10px;
  border-radius: 22px;
  background: var(--bg2);
  border: 0;
  position: relative;
}
.level-card.current {
  background: var(--brand);
  color: #0a0a0c;
  box-shadow: 0 12px 28px rgba(232,197,71,0.28);
}
.level-card.completed {
  opacity: 0.55;
}
.level-card.locked {
  opacity: 0.5;
}
.lvl-meta {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.level-card.current .lvl-meta { color: rgba(10,10,12,0.55); }
.lvl-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.3px;
  color: #fff; margin-bottom: 10px;
}
.level-card.current .lvl-title { color: #0a0a0c; }
.lvl-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.lvl-tag {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 0;
  padding: 5px 10px; border-radius: 99px;
  color: rgba(255,255,255,0.62);
  letter-spacing: -0.1px;
}
.level-card.current .lvl-tag {
  background: rgba(10,10,12,0.12);
  color: rgba(10,10,12,0.7);
}
.lvl-progress-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}
.level-card.current .lvl-progress-row { color: rgba(10,10,12,0.6); }
.lvl-progress-bar {
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.level-card.current .lvl-progress-bar { background: rgba(10,10,12,0.18); }
.lvl-progress-fill {
  height: 100%; background: var(--brand);
}
.level-card.current .lvl-progress-fill { background: #0a0a0c; }
.lvl-unlock-btn {
  padding: 12px 18px; border-radius: 99px;
  background: var(--brand); color: #0a0a0c;
  border: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.1px;
  margin-top: 12px;
  cursor: pointer;
}
.lvl-locked-text {
  font-size: 12px; color: rgba(255,255,255,0.4);
  margin-top: 4px;
  letter-spacing: -0.1px;
}

/* clickable affordance for level cards */
.level-card { cursor: pointer; transition: transform 0.18s ease; }
.level-card:active { transform: scale(0.992); }

/* ============ V3 — LEVEL DETAIL (matches level-detail-v3.jsx) ============ */
.lvl-detail-topbar {
  padding: max(env(safe-area-inset-top, 16px), 60px) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
/* Mirror today screen's .t-topline layout exactly — same paddings, so «тело · 8:00»
   sits in the same horizontal/vertical spot as «пятница 8 мая» on the main page.
   The topbar lives inside .sheet-body (which has 16px horizontal padding); the negative
   margin escapes that, then 22px padding lands the meta flush with .t-date on Today. */
.screen[data-screen="task"] .lvl-detail-topbar {
  margin: 0 -16px;
  padding: 8px 22px 14px;
}
/* Hide the back button entirely inside the task pane — closing is done via the
   «Отмена» button on the right (matches the create-task header pattern). */
.screen[data-screen="task"] .sheet-back { display: none; }
/* Meta flush-left like .t-date on today screen (no extra inner padding). */
.screen[data-screen="task"] .lvl-detail-meta {
  text-align: left;
  padding-left: 0;
}
/* «Отмена» button — visually mirrors .lvl-detail-meta on the left:
   uppercase, 11/600, tracked, same low-contrast gray. Symmetric pair. */
.sheet-cancel {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.38);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0; margin: 0;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.lvl-detail-back {
  width: 38px; height: 38px;
  border-radius: 19px;
  border: 0;
  background: var(--bg2);
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lvl-detail-meta {
  flex: 1;
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
}
.lvl-detail-now-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand);
  font-size: 10px; font-weight: 700;
  color: #000;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.lvl-detail-spacer { width: 38px; flex-shrink: 0; }

.lvl-detail-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 16px;
}
/* Match Today/task topbar coordinates: 8px top / 22px sides / 14px bottom,
   meta flush-left, hide the now-defunct ‹ back button (closing via «Отмена» on right). */
.screen[data-screen="level"] .lvl-detail-topbar {
  padding: 8px 22px 14px;
}
.screen[data-screen="level"] .lvl-detail-back { display: none; }
.screen[data-screen="level"] .lvl-detail-meta {
  text-align: left;
  padding-left: 0;
}
/* Sticky CTA footer in flex flow — never overlaps body content. Hidden in medium. */
.screen[data-screen="level"].active .lvl-detail-footer {
  position: static;
  flex-shrink: 0;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(10,10,12,0) 0%, var(--bg) 18%);
}
.app-sheet.medium .screen[data-screen="level"].active .lvl-detail-footer { display: none; }

.lvl-detail-hero {
  border-radius: 28px;
  padding: 22px 20px;
  margin-bottom: 18px;
  background: var(--bg2);
  color: #fff;
}
.lvl-detail-hero.current {
  background: var(--brand);
  color: #000;
}
.lvl-detail-title {
  margin: 0;
  font-size: 34px; font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.05;
  color: #fff;
}
.lvl-detail-hero.current .lvl-detail-title { color: #000; }
.lvl-detail-range {
  margin-top: 6px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.62);
}
.lvl-detail-hero.current .lvl-detail-range { color: rgba(0,0,0,0.55); }

.lvl-detail-locked-block {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  display: flex; align-items: center; gap: 10px;
}

.lvl-detail-progress {
  margin-top: 18px;
}
.lvl-detail-progress-line {
  display: flex; justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.lvl-detail-hero.current .lvl-detail-progress-line {
  color: rgba(0,0,0,0.7);
}
.lvl-detail-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.lvl-detail-hero.current .lvl-detail-progress-bar {
  background: rgba(0,0,0,0.15);
}
.lvl-detail-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.lvl-detail-hero.current .lvl-detail-progress-fill {
  background: #000;
}

.lvl-detail-section {
  margin-bottom: 22px;
}
.lvl-detail-section-h {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 4px;
}
.lvl-detail-about {
  margin: 0;
  font-size: 15px;
  color: #fff;
  line-height: 1.5;
  padding: 0 4px;
}

/* habit rows */
.lvl-task-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg2);
  border: 0; border-radius: 16px;
  text-align: left;
  color: #fff;
  cursor: pointer;
  margin-bottom: 6px;
  transition: all 0.18s ease;
  font-family: inherit;
}
.lvl-task-row:active { transform: scale(0.99); }
.lvl-task-row.locked { opacity: 0.5; cursor: default; }
.lvl-task-row .check {
  width: 22px; height: 22px;
  border-radius: 11px;
  flex-shrink: 0;
  background: transparent;
  border: 1.8px solid rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
}
.lvl-task-row.done .check {
  background: #fff; border-color: #fff;
}
.lvl-task-row .body { flex: 1; min-width: 0; }
.lvl-task-row .title {
  font-size: 15px; font-weight: 600;
  color: #fff; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lvl-task-row.done .title {
  color: rgba(255,255,255,0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.4);
}
.lvl-task-row .sub {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-top: 1px;
}
.lvl-task-row .cat-dot {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--brand);
  flex-shrink: 0;
  margin-right: 4px;
}
.lvl-task-row .arrow {
  color: rgba(255,255,255,0.38);
  font-size: 16px;
}

/* days grid */
.lvl-detail-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.lvl-day-cell {
  aspect-ratio: 1 / 1.15;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.04);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.lvl-day-cell.past {
  background: rgba(232,197,71,0.18);
  border: 1px solid rgba(255,255,255,0.04);
}
.lvl-day-cell.today {
  background: var(--brand);
  border: 0;
}
.lvl-day-lab {
  font-size: 9px; font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.lvl-day-cell.today .lvl-day-lab { color: rgba(0,0,0,0.55); }
.lvl-day-num {
  font-size: 18px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.4px;
  line-height: 1;
}
.lvl-day-cell.past .lvl-day-num { color: var(--brand); }
.lvl-day-cell.today .lvl-day-num { color: #000; }

/* next preview */
.lvl-detail-next {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--bg2);
  display: flex; align-items: center; gap: 12px;
}
.lvl-detail-next-num {
  width: 36px; height: 36px;
  border-radius: 18px;
  background: rgba(255,255,255,0.18);
  opacity: 0.7;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: #000;
  flex-shrink: 0;
}
.lvl-detail-next-body { flex: 1; }
.lvl-detail-next-title {
  font-size: 15px; font-weight: 600;
  color: #fff;
}
.lvl-detail-next-sub {
  font-size: 12px; color: rgba(255,255,255,0.38);
  margin-top: 1px;
}

/* fixed CTA */
.lvl-detail-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px max(28px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
  z-index: 5;
}
.lvl-detail-cta {
  width: 100%; height: 56px;
  border: 0;
  border-radius: 28px;
  background: var(--brand);
  color: #000;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(232,197,71,0.25);
  font-family: inherit;
}
.lvl-detail-cta:disabled {
  background: var(--bg2);
  color: rgba(255,255,255,0.55);
  cursor: default;
  box-shadow: none;
}

/* ============ V3 — ME (matches handoff today-v3 MeV3) ============ */
.me-content {
  flex: 1; overflow-y: auto;
  padding: 0 0 110px;
  position: relative;
}

/* floating top bar with back + menu (sits above the yellow card) */
.me-topbar {
  position: absolute;
  top: max(env(safe-area-inset-top, 16px), 56px);
  left: 0; right: 0;
  z-index: 5;
  padding: 0 22px;
  display: flex; justify-content: space-between; align-items: center;
  pointer-events: none;
}
.me-topbtn {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* big yellow persona card */
.me-hero {
  margin: 0 14px 20px;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  height: 480px;
  background: linear-gradient(180deg, var(--brand-lite) 0%, var(--brand) 55%, var(--brand-deep) 100%);
  box-shadow: 0 30px 60px rgba(232,197,71,0.3), 0 12px 24px rgba(0,0,0,0.4);
}
.me-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  display: block;
}
.me-hero-meta {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
}
.me-hero-name {
  font-size: 38px; font-weight: 700;
  color: #0a0a0c; letter-spacing: -1.2px;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(232,197,71,0.4);
}
.me-hero-sub {
  font-size: 13px; font-weight: 500;
  color: rgba(10,10,12,0.6);
  margin-top: 4px;
}

/* hide legacy nodes */
.hero-card { display: none; }
.stat-grid { display: none; }

/* 3 stats grid: wide XP / serie / progress */
.me-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  padding: 0 14px;
  margin-bottom: 24px;
}
.me-stat {
  background: var(--bg2);
  border: 0;
  border-radius: 22px;
  padding: 14px 12px;
  text-align: center;
}
.me-stat-wide {
  text-align: left;
  padding: 14px 14px;
}
.me-stat .num {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.4px; line-height: 1;
  color: #fff;
  font-feature-settings: 'tnum' 1;
}
.me-stat-wide .num {
  font-size: 28px;
  color: var(--brand);
  letter-spacing: -0.6px;
}
.me-stat .label {
  font-size: 11px; color: rgba(255,255,255,0.38);
  margin-top: 4px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.me-stat-bar {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin-top: 8px;
  overflow: hidden;
}
.me-stat-fill {
  height: 100%; background: var(--brand);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* section heading "Зоны" */
.me-section-h {
  margin: 0 0 12px;
  padding: 0 22px;
  font-size: 18px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.4px;
}

/* zone list rows */
.me-zones {
  padding: 0 14px;
  margin-bottom: 24px;
}
.me-zone-row {
  margin-bottom: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--bg2);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.me-zone-badge {
  width: 36px; height: 36px;
  border-radius: 18px;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px; font-weight: 700;
  color: #0a0a0c;
}
.me-zone-name {
  font-size: 15px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}
.me-zone-sub {
  font-size: 11px; color: rgba(255,255,255,0.38);
  margin-top: 1px;
  letter-spacing: -0.1px;
}
.me-zone-arrow {
  color: rgba(255,255,255,0.38);
  font-size: 18px;
  margin-left: auto;
}

/* settings */
.me-settings {
  margin: 0 14px 14px;
  border-radius: 22px;
  background: var(--bg2);
  overflow: hidden;
}
.me-settings-row {
  padding: 15px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.me-settings-row:last-child { border-bottom: 0; }
.me-settings-label {
  font-size: 15px; font-weight: 500; color: #fff;
  letter-spacing: -0.2px;
}
.me-settings-right {
  display: flex; align-items: center; gap: 8px;
}
.me-settings-val {
  font-size: 13px;
  color: rgba(255,255,255,0.62);
}
.me-settings-arrow {
  color: rgba(255,255,255,0.38);
  font-size: 16px;
}

.me-logout {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px;
  height: 50px;
  border-radius: 25px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.2px;
  cursor: pointer;
}
.me-logout:hover { color: #FF453A; border-color: rgba(255,69,58,0.3); }

/* legacy compat */
.danger-zone { display: none; }
.danger-btn { display: none; }

/* ============ ME-DASHBOARD-MENU (m2-*) ============
   Implements design from Me-Dashboard-Menu.html, scoped under .screen[data-screen="me"].
   Uses brand var(--brand) and matches existing dark token palette. */
.me-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px;
  position: relative;
}

.m2-tap {
  transition: transform 0.12s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.m2-tap:active { transform: scale(0.97); }

/* IDENTITY */
.m2-identity {
  margin: 8px 14px 14px;
  padding: 14px 16px;
  border-radius: 22px;
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 28px);
  text-align: left;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.m2-identity:active { background: rgba(255,255,255,0.03); }
.m2-id-text { flex: 1; min-width: 0; }
.m2-id-name { font-size: 26px; font-weight: 700; letter-spacing: -0.7px; line-height: 1; color: #fff; }
.m2-id-meta { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; }
.m2-avatar {
  width: 64px; height: 64px;
  border-radius: 32px;
  background: linear-gradient(180deg, var(--brand-lite, #F0D660), var(--brand-deep, #D4B538));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #0a0a0c;
  box-shadow: 0 12px 28px rgba(232,197,71,0.3);
  overflow: hidden;
}
.m2-avatar svg { width: 36px; height: 36px; display: block; }
.m2-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* center the face — image's head sits in the upper-third of the frame */
  object-position: center 18%;
  display: block;
  user-select: none; -webkit-user-drag: none;
}

/* XP CARD */
.m2-xp-wrap { padding: 0 14px; margin-bottom: 10px; }
.m2-xp-card {
  background: var(--bg2); border-radius: 24px;
  padding: 20px 18px; width: 100%;
  text-align: left;
}
.m2-xp-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 16px;
}
.m2-xp-kicker {
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.m2-xp-num {
  font-size: 44px; font-weight: 700;
  color: #fff; letter-spacing: -1.4px;
  line-height: 1; margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.m2-xp-pill {
  padding: 6px 10px; border-radius: 999px;
  background: rgba(232,197,71,0.15);
  font-size: 11px; font-weight: 700;
  color: var(--brand);
}
.m2-chart {
  display: flex; gap: 6px; align-items: flex-end;
  height: 70px; position: relative;
}
.m2-chart-col {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  transition: transform 0.12s ease;
  font-family: inherit; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.m2-chart-col:active { transform: scale(0.92); }
.m2-chart-bar {
  width: 100%; min-height: 4px;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.m2-chart-bar.today { background: var(--brand); }
.m2-chart-col.selected .m2-chart-bar {
  background: var(--brand);
  box-shadow: 0 0 14px rgba(232,197,71,0.5);
}
.m2-chart-day {
  font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.35);
}
.m2-chart-col.today .m2-chart-day,
.m2-chart-col.selected .m2-chart-day {
  color: var(--brand); font-weight: 700;
}
.m2-day-pop {
  position: absolute;
  background: var(--brand); color: #0a0a0c;
  padding: 5px 9px;
  font-size: 11px; font-weight: 700;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -100%);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.32,0.72,0,1);
  z-index: 5; white-space: nowrap;
}
.m2-day-pop.on { opacity: 1; transform: translate(-50%, calc(-100% - 6px)); }
.m2-day-pop::after {
  content: ''; position: absolute;
  bottom: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--brand);
}

/* 3 STATS */
.m2-stats3 {
  padding: 0 14px; margin-bottom: 28px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.m2-stat3 {
  background: var(--bg2); border: 0;
  border-radius: 18px; padding: 14px 12px;
  text-align: center; width: 100%;
  color: #fff; font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m2-stat3:active { background: var(--bg3); }
.m2-stat3 .n {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.5px; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform 0.18s ease;
}
.m2-stat3:active .n { transform: scale(1.06); }
.m2-stat3.brand .n { color: var(--brand); }
.m2-stat3 .l {
  font-size: 11px; color: rgba(255,255,255,0.4);
  margin-top: 6px;
}

/* SECTION HEADER */
.m2-sect-h {
  margin: 0 0 12px;
  padding: 0 22px;
  font-size: 18px; font-weight: 600;
  color: #fff; letter-spacing: -0.4px;
}

/* ZONES */
.m2-zones-wrap { padding: 0 14px; margin-bottom: 24px; }
.m2-zones {
  background: var(--bg2);
  border-radius: 22px;
  padding: 4px 16px;
}
.m2-zone {
  width: 100%;
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: block;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  color: #fff; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.14s ease;
}
.m2-zone:last-child { border-bottom: 0; }
.m2-zone:active { opacity: 0.6; }
.m2-zone-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.m2-zone-name { font-size: 14px; font-weight: 500; letter-spacing: -0.2px; color: #fff; }
.m2-zone-pct {
  font-size: 12px; color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}
.m2-zone-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.m2-zone-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

/* MEASURES */
.m2-measures {
  padding: 0 14px; margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.m2-measure {
  background: var(--bg2); border: 0;
  border-radius: 18px; padding: 14px 12px;
  text-align: center; width: 100%;
  color: #fff; font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m2-measure:active { background: var(--bg3); }
.m2-measure-row { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.m2-measure-n { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.m2-measure-u { font-size: 12px; color: rgba(255,255,255,0.5); }
.m2-measure-sub { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 6px; }

/* SETTINGS */
.m2-settings {
  margin: 0 14px 14px;
  border-radius: 22px;
  background: var(--bg2);
  overflow: hidden;
}
.m2-set-row {
  width: 100%;
  padding: 15px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: left;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  color: #fff; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease;
}
.m2-set-row:last-child { border-bottom: 0; }
.m2-set-row:active { background: var(--bg3); }
.m2-set-l { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }
.m2-set-r {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.6); font-size: 13px;
}
.m2-chev {
  color: rgba(255,255,255,0.35);
  font-size: 16px; line-height: 1;
  transform: translateY(-1px);
}

/* TOGGLE */
.m2-toggle {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  position: relative;
  transition: background 0.22s ease;
  flex-shrink: 0;
}
.m2-toggle::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.22s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.m2-toggle.on { background: var(--brand); }
.m2-toggle.on::after { transform: translateX(18px); }

.m2-logout {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px;
  height: 50px;
  border-radius: 25px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.2px;
  font-family: inherit; cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.m2-logout:active {
  background: rgba(233,112,112,0.08);
  border-color: rgba(233,112,112,0.4);
  color: #E97070;
}

/* ============ ME-DETAIL pane (inside .sheet-content, mirrors task pane) ============ */
.screen[data-screen="me-detail"] {
  background: var(--bg, #0a0a0c);
  color: #fff;
}
.app.me-detail-open .app-sheet > .sheet-drag-handle { display: flex; }  /* keep handle visible */
.app.me-detail-open .pill-tabs { display: none; }

.md-head {
  flex-shrink: 0;
  padding: 8px 22px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.md-meta {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

.md-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}
.md-title {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.7px;
  margin: 0 6px 14px;
  color: #fff;
}
.md-block { margin-bottom: 14px; }
.md-block p {
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,0.7);
  padding: 0 6px 12px;
}
.md-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.md-stat {
  background: var(--bg3); border-radius: 14px;
  padding: 12px 14px;
}
.md-stat .n {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.md-stat .l {
  font-size: 11px; color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
.md-big {
  padding: 14px 6px 4px;
  font-size: 56px; font-weight: 700;
  letter-spacing: -2px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.md-big .pct { font-size: 28px; opacity: 0.5; }
.md-sub {
  padding: 0 6px 18px;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.md-bar {
  margin: 0 6px 18px;
  height: 8px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.md-fill { height: 100%; border-radius: 99px; transition: width 0.5s cubic-bezier(0.32,0.72,0,1); }

.md-stepper {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 6px 22px;
  justify-content: center;
}
.md-step-btn {
  width: 44px; height: 44px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 20px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 0; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.md-step-btn:active { background: rgba(255,255,255,0.14); }
.md-step-val {
  font-size: 38px; font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  min-width: 100px; text-align: center;
}

.md-opts { display: flex; flex-direction: column; gap: 0; }
.md-opt {
  width: 100%;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 14px;
  text-align: left;
  background: transparent; border: 0;
  color: #fff; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease;
}
.md-opt:active { background: rgba(255,255,255,0.05); }
.md-opt .l { font-size: 15px; font-weight: 500; }
.md-opt .check {
  width: 22px; height: 22px;
  border-radius: 99px;
  border: 1.6px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.md-opt.on .check {
  background: var(--brand); border-color: var(--brand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'><path d='M1 5.5 L5 9.5 L13 1.5' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}

.md-footer {
  flex-shrink: 0;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(10,10,12,0) 0%, var(--bg, #0a0a0c) 18%);
}
.md-footer:empty { display: none; }
.app-sheet.medium .screen[data-screen="me-detail"].active .md-footer { display: none; }
.md-cta {
  width: 100%; height: 54px;
  border: 0; border-radius: 27px;
  background: var(--brand); color: #0a0a0c;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 14px 30px rgba(232,197,71,0.18);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.md-cta:active { transform: scale(0.98); }
.md-cta.danger {
  background: #E97070; color: #fff;
  box-shadow: 0 14px 30px rgba(233,112,112,0.18);
}

/* ============ Уведомления — шторка настроек (открывается из «Я» → Уведомления) ============ */
.notif-section-label {
  padding: 18px 6px 8px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.42);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.notif-section-hint {
  padding: 6px 6px 0;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  line-height: 1.5;
}
.notif-group {
  background: var(--bg2);
  border-radius: 16px;
  overflow: hidden;
}
.notif-row {
  display: flex; align-items: center;
  width: 100%;
  padding: 14px 16px;
  min-height: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  text-align: left;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row-l {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.notif-row-name {
  font-size: 15px; font-weight: 500;
  color: #fff; letter-spacing: -0.1px;
}
.notif-row-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.notif-row-r {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  flex-shrink: 0;
}
.notif-toggle {
  width: 50px; height: 30px;
  background: rgba(120,120,128,0.32);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s ease;
  flex-shrink: 0;
  border: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.notif-toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 26px; height: 26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.18s ease;
}
.notif-toggle.on { background: #34c759; }
.notif-toggle.on::after { transform: translateX(20px); }
.notif-time-pill {
  background: rgba(120,120,128,0.24);
  color: var(--brand);
  border: 0; padding: 6px 14px;
  border-radius: 8px;
  font-size: 16px; font-weight: 500;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.notif-seg-row {
  padding: 8px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.notif-seg-row:last-child { border-bottom: 0; }
.notif-seg-label {
  font-size: 11px; color: rgba(255,255,255,0.45);
  margin-bottom: 8px; letter-spacing: 0.2px;
}
.notif-seg {
  display: flex;
  background: rgba(120,120,128,0.24);
  border-radius: 9px;
  padding: 2px;
}
.notif-seg button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 7px 10px;
  font-size: 13px; font-weight: 500;
  border-radius: 7px;
  letter-spacing: -0.05px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.notif-seg button.on {
  background: var(--bg3);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-weight: 600;
}

/* ============ V3 — TAB BAR — pill in peek, flat footer in medium/expanded ============ */
.pill-tabs {
  position: relative;
  display: flex;
  align-items: flex-end;                            /* keep tab buttons anchored to bottom — icons Y never moves */
  flex-shrink: 0;
  flex: 0 0 auto;                                   /* fixed height — never stretch */
  width: 100%;
  max-width: 370px;                                 /* lock tabs row to peek inner width */
  margin: 0 auto;                                   /* center inside sheet at any sheet width */
  padding: 0 4px 14px;                              /* peek: icons sit higher in the menu */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: padding 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
/* When sheet is open (medium / expanded) — lift the tab bar's top edge by 12px so there's
   more dark headroom above the icons. Icons stay anchored to the bottom (flex-end). */
.app-sheet.medium .pill-tabs,
.app-sheet.expanded .pill-tabs {
  padding-top: 12px;
}
/* (removed padding-top: 14 modifier — was causing tabs Y to shift between states) */
/* In medium: lock the inner scroll so any swipe/wheel gesture goes to drag-to-expand instead.
   Once the sheet is expanded, scroll re-enables for normal browsing. */
.app-sheet.medium .scroll-area,
.app-sheet.medium .me-content,
.app-sheet.medium .sheet-body {
  overflow: hidden;
}
.pill-tabs button {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 2px 0;
  border-radius: 22px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.55);
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.1px;
  line-height: 1;
  transition: color 0.18s ease;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.pill-tabs button:focus,
.pill-tabs button:focus-visible,
.pill-tabs button:active {
  outline: none;
  background: transparent;
}
.pill-tabs button .tab-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: inherit;
  transition: color 0.18s ease;
}
.pill-tabs button .tab-icon svg { width: 100%; height: 100%; }
.pill-tabs button.on,
.pill-tabs button.on .tab-icon {
  color: var(--brand);
}
.pill-tabs button.on { font-weight: 600; }
.pill-tabs.hidden { display: none; }

/* ============ BOTTOM SHEET ============ */
/* task detail = content pane inside the expanded sheet, same as today/path/me */
.sheet-backdrop { display: none !important; }
.bottom-sheet { display: none !important; }

.screen[data-screen="task"] {
  /* inherits .screen rules (display none, flex column when active) */
}
.screen[data-screen="task"].active .sheet-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
}
/* Sticky footer — in flex flow at the bottom, never overlaps body text.
   Same pattern as the create-task CTA wrapper. */
.screen[data-screen="task"].active .sheet-footer {
  flex-shrink: 0;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, rgba(10,10,12,0) 0%, var(--bg, #0a0a0c) 18%);
}
/* Скрываем footer и в medium, и при dragging (когда юзер тянет к close).
   Без .dragging правила footer оставался видимым весь tween 350мс пока шит
   уменьшался — кнопка «медленно исчезала» в самом конце. */
.app-sheet.medium .screen[data-screen="task"].active .sheet-footer,
.app-sheet.dragging .screen[data-screen="task"].active .sheet-footer { display: none; }
/* Empty footer leaves no visual gap */
.screen[data-screen="task"].active .sheet-footer:empty { display: none; }

.sheet-handle { display: none; }

.sheet-body {
  flex: 1; overflow-y: auto;
  padding: 0 16px 140px;
}
.task-detail-hero-wrap {
  margin: 20px 0 18px;
}
.task-detail-hero-wrap .lvl-detail-hero {
  margin: 0;
}
/* sheet sections inside task detail — same look as level detail */
.sheet-body .sheet-block {
  padding: 0 4px;
}
.sheet-body .sheet-tip {
  margin: 0 0 24px;
}
.sheet-body .sheet-meta-row {
  margin: 0 0 22px;
}
.sheet-body .sheet-diagram {
  margin: 0 0 22px;
}
.sheet-body .video-stage {
  padding: 0 0 22px;
}
.sheet-body .sheet-timer {
  padding: 12px 0 16px;
}

/* V3 — top bar with back + category pill */
.sheet-topbar {
  padding: max(env(safe-area-inset-top, 16px), 60px) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.sheet-back {
  width: 38px; height: 38px;
  border-radius: 19px;
  border: 0;
  background: var(--bg2);
  color: #fff;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sheet-cat-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg2);
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.62);
  display: flex; align-items: center; gap: 8px;
}
.sheet-cat-dot {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--brand);
}

/* legacy aliases — keep so existing render*Sheet code keeps working */
.sheet-header {
  padding: 24px 22px 0;
}
.sheet-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.sheet-title-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.sheet-title { display: none; } /* moved into hero card */
.sheet-close { display: none; } /* replaced by sheet-back top bar */

/* V3 hero card */
.sheet-hero {
  margin: 24px 22px 18px;
  border-radius: 28px;
  padding: 24px 22px;
  background: var(--brand);
  color: #0a0a0c;
}
.sheet-hero-meta {
  font-size: 13px; font-weight: 500;
  color: rgba(10,10,12,0.55);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.sheet-hero-title {
  margin: 0;
  font-size: 30px; font-weight: 600;
  color: #0a0a0c;
  letter-spacing: -0.8px;
  line-height: 1.05;
}

/* V3 meta-row pills (награда / когда) */
.sheet-meta-row {
  margin: 0 22px 22px;
  display: flex; gap: 8px;
}
.sheet-meta-pill {
  flex: 1;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--bg2);
}
.sheet-meta-pill .lab {
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.sheet-meta-pill .val {
  font-size: 15px; font-weight: 600;
  color: #fff;
}

/* V3 sections */
.sheet-block {
  padding: 0 22px;
  margin-bottom: 22px;
}
.sheet-block .block-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.62);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.sheet-block .block-content {
  font-size: 15px; color: #fff;
  line-height: 1.5;
}
.sheet-block .block-content ul {
  margin: 0; padding: 0; list-style: none;
}
.sheet-block .block-content li {
  display: flex; gap: 12px;
  margin-bottom: 10px;
  font-size: 14px; color: #fff; line-height: 1.4;
  position: relative;
  padding-left: 0;
}
.sheet-block .block-content li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  width: 22px; height: 22px;
  border-radius: 11px; flex-shrink: 0;
  background: var(--bg2);
  color: rgba(255,255,255,0.62);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  margin-top: 1px;
}
.sheet-block .block-content ul {
  counter-reset: step-counter;
}

/* tip box */
.sheet-tip {
  margin: 0 22px 24px;
  padding: 16px;
  border-radius: 18px;
  background: var(--bg2);
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  line-height: 1.5;
}
.sheet-tip-label {
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* footer fixed CTA */
.sheet-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px max(28px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
  border-top: 0;
  flex-shrink: 0;
  z-index: 10;
  pointer-events: auto;
}

.sheet-primary {
  width: 100%; height: 56px;
  padding: 0;
  border-radius: 28px;
  border: 0;
  background: var(--brand); color: #0a0a0c;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.sheet-primary:disabled {
  background: var(--bg2);
  color: rgba(255,255,255,0.55);
  cursor: default;
}
/* «Сделано ✓» state — tap again to undo */
.sheet-done-btn.is-done {
  background: rgba(232,197,71,0.14);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(232,197,71,0.45);
}
.sheet-ghost {
  background: var(--bg2);
  border: 0;
  color: #fff;
  height: 56px;
  border-radius: 28px;
  font-size: 15px; font-weight: 600;
  min-width: 110px;
  cursor: pointer;
}

/* Diagram placeholder */
.sheet-diagram {
  background: var(--bg2);
  border: 0;
  border-radius: 18px;
  height: 140px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.38);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 22px 22px;
}

/* Check-ins grid */
.checkins-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.checkins-grid {
  display: grid; gap: 6px;
  margin-bottom: 12px;
}
.checkin-cell {
  height: 28px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.14s ease;
}
.checkin-cell.on {
  background: var(--brand);
}
/* Любая non-missed ячейка кликабельна (toggle on/off). */
.checkin-cell.missed { cursor: default; }
.checkin-cell:not(.missed):active {
  transform: scale(0.92);
  background: rgba(232,197,71,0.65);
}

/* Combo sheet — список под-пунктов с чек-боксами */
.combo-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.combo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
  width: 100%;
  color: #fff;
}
.combo-item:active { opacity: 0.6; }
/* Чекнутый пункт — без специального фона, только зачёркнутый текст + жёлтая галочка */
.combo-item.on {}
.combo-item-check {
  width: 20px; height: 20px; border-radius: 99px;
  border: 1.6px solid rgba(255,255,255,0.4);
  flex-shrink: 0;
  display: grid; place-items: center;
  color: #0a0a0c;
  transition: background 0.15s, border-color 0.15s;
}
.combo-item-check svg { width: 12px; height: 12px; display: block; }
.combo-item-check svg path { display: none; }   /* галочка скрыта пока не отмечено */
.combo-item.on .combo-item-check {
  background: var(--brand);
  border-color: var(--brand);
}
.combo-item.on .combo-item-check svg path { display: block; }
.combo-item-label {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 500; letter-spacing: -0.2px;
  color: rgba(255,255,255,0.92);
}
.combo-item.on .combo-item-label {
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.4);
}
.checkin-add {
  width: 100%; padding: 14px;
  border-radius: 18px;
  background: var(--bg2);
  border: 0;
  color: #fff;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
}

/* Timer */
.sheet-timer {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12px 22px 16px;
}
.timer-circle {
  position: relative; width: 240px; height: 240px;
  margin-bottom: 24px;
}
.timer-circle svg { transform: rotate(-90deg); }
.timer-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.timer-time {
  font-size: 56px; font-weight: 700;
  color: #fff;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.timer-state {
  font-size: 11px; color: rgba(255,255,255,0.38);
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.timer-hint {
  font-size: 14px; color: rgba(255,255,255,0.55);
  text-align: center; max-width: 320px;
  line-height: 1.5;
}

/* Video */
.video-stage { padding: 0 22px 22px; }
.video-frame {
  aspect-ratio: 16/9; border-radius: 18px;
  overflow: hidden; background: #000;
  border: 0;
  position: relative;
}
.video-frame video { width: 100%; height: 100%; display: block; }
.video-pattern {
  position: absolute; inset: 0;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Water meter */
.meter-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.meter-bar {
  height: 8px; border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden; margin-bottom: 14px;
}
.meter-fill {
  height: 100%; background: var(--brand);
  border-radius: 99px;
  transition: width 0.28s ease;
}
.meter-buttons { display: flex; gap: 8px; }
.meter-btn {
  flex: 1; padding: 14px 10px;
  border-radius: 18px;
  background: var(--bg2);
  border: 0;
  color: #fff;
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.2px;
  cursor: pointer;
  font-family: inherit;
}

/* ============ MODAL ============ */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(20px);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal.open { display: flex; }
.modal-card {
  background: linear-gradient(160deg, rgba(40,40,42,0.95), rgba(20,20,22,0.95));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 32px 28px;
  max-width: 400px; width: 100%;
}
.modal-title {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 12px;
}
.modal-text {
  font-size: 14px; color: rgba(255,255,255,0.55);
  line-height: 1.55; margin-bottom: 24px;
}
.modal-list {
  font-size: 13px; color: #fff;
  list-style: none; padding: 0;
  margin: 12px 0 24px;
}
.modal-list li {
  padding: 6px 0;
  display: flex; align-items: center; gap: 8px;
}
.modal-list li::before {
  content: '·'; color: var(--accent); font-weight: 700;
}
.modal-actions { display: flex; gap: 10px; }
.modal-btn { flex: 1; }

/* Duration picker */
.duration-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 16px;
}
.duration-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 14px;
  text-align: left; color: #fff;
  transition: all 0.15s ease;
}
.duration-btn:hover { border-color: rgba(255,255,255,0.14); }
.duration-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.duration-btn .duration-num {
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
}
.duration-btn .duration-label {
  font-size: 12px; color: rgba(255,255,255,0.55);
  font-weight: 500; margin-top: 2px;
}
.duration-btn .duration-desc {
  font-size: 11px; color: rgba(255,255,255,0.4);
  margin-top: 8px; line-height: 1.3;
}
.duration-custom-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
}
.duration-custom-row input {
  flex: 1; font-size: 16px;
  background: transparent;
  border: 0; color: #fff;
  font-family: var(--mono);
  padding: 4px 0;
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  top: max(24px, calc(env(safe-area-inset-top) + 16px));
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  background: linear-gradient(160deg, rgba(40,40,42,0.95), rgba(20,20,22,0.95));
  color: #fff;
  padding: 12px 20px; border-radius: 99px;
  font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.14);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  z-index: 250;
  pointer-events: none;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ CELEBRATE ============ */
@keyframes celebrate {
  0%   { transform: translate(-50%, -8px) scale(0.9); opacity: 0; }
  15%  { transform: translate(-50%, 0)    scale(1);   opacity: 1; }
  85%  { transform: translate(-50%, 0)    scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -4px) scale(0.95);opacity: 0; }
}
.celebrate {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0a0a0a;
  padding: 12px 20px; border-radius: 99px;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  animation: celebrate 1.4s ease;
  z-index: 300;
  pointer-events: none;
}

/* ============ V3 ONBOARDING ============ */
.onb-v3 {
  display: none;
  position: absolute; inset: 0;
  z-index: 2;
  background: var(--bg);
  flex-direction: column;
  animation: fadeIn 0.3s ease;
}
.onb-v3.active { display: flex; }

/* === LANDING === */
.lv3-logo {
  position: absolute;
  top: max(env(safe-area-inset-top, 16px), 60px);
  left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.62);
  letter-spacing: 4px;
  z-index: 5;
}
.lv3-stage {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-top: 70px;
  min-height: 0;
}
.lv3-comp {
  position: relative;
  width: 320px; height: 320px;
  display: none;
}
.lv3-comp.on { display: block; animation: fadeIn 0.5s ease; }
.lv3-fan { width: 320px; height: 360px; }
.lv3-space { width: 340px; height: 380px; }

.lv3-spotlight {
  position: absolute;
  top: -20px; left: 50%;
  width: 280px; height: 380px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(232,197,71,0.18), transparent 60%);
}

.ppill {
  position: absolute;
  width: 280px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--brand-lite), var(--brand) 70%, var(--brand-deep));
  padding: 8px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transform-origin: center;
}
.ppill-glow {
  box-shadow: 0 30px 60px rgba(232,197,71,0.45), 0 0 0 2px rgba(255,255,255,0.4);
}
.ppill-img {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--brand-deep);
  overflow: hidden;
  flex-shrink: 0;
}
.ppill-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.ppill-meta { flex: 1; min-width: 0; }
.ppill-label {
  font-size: 11px; font-weight: 500;
  color: rgba(10,10,12,0.55);
  margin-bottom: 1px;
}
.ppill-day {
  font-size: 18px; font-weight: 700;
  color: #0a0a0c;
  letter-spacing: -0.3px;
}
.ppill-status {
  background: #0a0a0c; color: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  margin-right: 4px;
}
.ppill-status.final { color: #4ED896; }

.lv3-dots {
  display: flex; gap: 6px;
  justify-content: center;
  margin-bottom: 22px;
}
.lv3-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.25);
  border: 0; padding: 0; cursor: pointer;
  transition: all 0.24s ease;
}
.lv3-dot.active {
  width: 22px;
  background: #fff;
}

.lv3-text { padding: 0 28px 12px; }
.lv3-h {
  margin: 0;
  font-size: 32px; font-weight: 600;
  color: #fff; letter-spacing: -1px;
  line-height: 1.05;
  white-space: pre-line;
}
.lv3-sub {
  margin: 10px 0 0;
  font-size: 14px; font-weight: 400;
  color: rgba(255,255,255,0.62);
  line-height: 1.45;
  max-width: 320px;
}
.lv3-bottom {
  padding: 14px 22px max(40px, calc(env(safe-area-inset-bottom, 0px) + 32px));
  display: flex; flex-direction: column; gap: 10px;
}
.lv3-cta {
  width: 100%; height: 56px;
  border: 0; border-radius: 28px;
  background: var(--bg2); color: #fff;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lv3-cta.final {
  background: #fff; color: #0a0a0c;
  box-shadow: 0 12px 30px rgba(255,255,255,0.18);
}
.lv3-secondary {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  display: none;
}
.lv3-secondary.show { display: block; }

/* === Q-screens === */
.qv3-header {
  padding: max(env(safe-area-inset-top, 16px), 60px) 22px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.qv3-back {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.qv3-step {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.62);
}
.qv3-progress {
  margin: 0 22px;
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.qv3-progress-fill {
  height: 100%; background: var(--brand);
  border-radius: 999px;
  box-shadow: 0 0 8px var(--brand);
  transition: width 0.3s ease;
}
.qv3-body {
  flex: 1;
  padding: 28px 22px 0;
  min-height: 0;
}
.qv3-focus-body { overflow-y: auto; }
.qv3-h {
  margin: 0;
  font-size: 30px; font-weight: 600;
  color: #fff; letter-spacing: -0.8px;
  line-height: 1.15;
}
.qv3-sub {
  margin: 10px 0 36px;
  font-size: 14px; color: rgba(255,255,255,0.62);
  line-height: 1.45;
}
.qv3-input {
  width: 100%; height: 56px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(255,255,255,0.15);
  outline: none;
  color: #fff;
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.4px;
  font-family: inherit;
  transition: border 0.2s ease;
}
.qv3-input:focus,
.qv3-input.has-value { border-bottom-color: var(--brand); }
.qv3-bottom {
  padding: 14px 22px max(40px, calc(env(safe-area-inset-bottom, 0px) + 32px));
  flex-shrink: 0;
}
.qv3-cta {
  width: 100%; height: 56px;
  border: 0; border-radius: 28px;
  background: #fff; color: #0a0a0c;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255,255,255,0.18);
  transition: all 0.2s ease;
}
.qv3-cta:disabled {
  background: var(--bg2); color: rgba(255,255,255,0.38);
  cursor: default;
  box-shadow: none;
}

/* age wheel */
.qv3-wheel-wrap {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0 22px;
  min-height: 260px;
}
.qv3-wheel-band {
  position: absolute;
  top: 50%; left: 32px; right: 32px;
  transform: translateY(-50%);
  height: 52px; border-radius: 18px;
  background: var(--brand);
  box-shadow: 0 0 40px rgba(232,197,71,0.4);
  pointer-events: none;
}
.qv3-wheel {
  height: 260px; width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  -webkit-overflow-scrolling: touch;
}
.qv3-wheel-pad { height: 104px; }
.qv3-wheel-item {
  height: 52px;
  scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500;
  color: rgba(255,255,255,0.38);
  letter-spacing: -0.5px;
  transition: all 0.15s ease;
}
.qv3-wheel-item.active {
  font-size: 30px; font-weight: 700;
  color: #0a0a0c;
}

/* focus grid */
.qv3-focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qv3-focus-card {
  background: var(--bg2);
  border: 1.5px solid transparent;
  border-radius: 22px;
  padding: 16px;
  cursor: pointer;
  outline: none;
  text-align: left;
  position: relative;
  transition: all 0.2s ease;
  color: #fff;
}
.qv3-focus-card.on {
  background: var(--bg3);
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(232,197,71,0.18);
}
.qv3-focus-icon {
  width: 36px; height: 36px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qv3-focus-card.face .qv3-focus-icon  { background: #C7E84C; }
.qv3-focus-card.body .qv3-focus-icon  { background: #FF7A45; }
.qv3-focus-card.voice .qv3-focus-icon { background: var(--brand); }
.qv3-focus-card.mind .qv3-focus-icon  { background: #4ED896; }
.qv3-focus-icon svg { width: 18px; height: 18px; }
.qv3-focus-title {
  font-size: 16px; font-weight: 600;
  color: #fff;
  margin-top: 0;
  letter-spacing: -0.3px;
}
.qv3-focus-sub {
  font-size: 12px; color: rgba(255,255,255,0.62);
  margin-top: 3px; line-height: 1.3;
}
.qv3-focus-tick {
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 11px;
  background: var(--brand);
  display: none;
  align-items: center; justify-content: center;
}
.qv3-focus-card.on .qv3-focus-tick { display: flex; }

/* === GENERATE — round avatar with scan ring & line === */
.genv3-stage {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 56px;
  padding: 60px 22px;
}
.genv3-avatar {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.genv3-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(232,197,71,0.45) 0%, rgba(232,197,71,0.18) 35%, transparent 70%);
  animation: genv3-glow-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.genv3-orbit {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(232,197,71,0.55);
  animation: genv3-spin 14s linear infinite;
  pointer-events: none;
}
.genv3-disc {
  position: relative;
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brand);
  box-shadow: 0 0 60px rgba(232,197,71,0.35), inset 0 0 30px rgba(232,197,71,0.15);
  background: var(--brand);
}
.genv3-disc video,
.genv3-disc img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.genv3-scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
  box-shadow: 0 0 16px var(--brand), 0 0 30px var(--brand);
  animation: genv3-scan-move 2s ease-in-out infinite;
  pointer-events: none;
}
.genv3-bracket {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--brand);
  pointer-events: none;
  opacity: 0.85;
}
.genv3-bracket-tl { top: -4px;    left: -4px;    border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.genv3-bracket-tr { top: -4px;    right: -4px;   border-left: 0;  border-bottom: 0; border-top-right-radius: 4px; }
.genv3-bracket-bl { bottom: -4px; left: -4px;    border-right: 0; border-top: 0;    border-bottom-left-radius: 4px; }
.genv3-bracket-br { bottom: -4px; right: -4px;   border-left: 0;  border-top: 0;    border-bottom-right-radius: 4px; }

@keyframes genv3-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes genv3-scan-move {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 3px); opacity: 0; }
}
.genv3-lines {
  min-height: 180px;
  width: 100%;
}
.genv3-line {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
  padding-left: 14px;
  position: relative;
  opacity: 0;
  animation: fadeUp 0.3s ease forwards;
}
.genv3-line.last { color: var(--brand); }
.genv3-line::before {
  content: '›';
  position: absolute; left: 0;
  color: var(--brand);
}
@keyframes genv3-spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* === WELCOME === */
.wlcv3-body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 22px 0;
  text-align: center;
}
.wlcv3-mark {
  width: 100px; height: 100px;
  border-radius: 50px;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 60px rgba(232,197,71,0.5);
  margin-bottom: 32px;
}
.wlcv3-h {
  margin: 0;
  font-size: 34px; font-weight: 600;
  color: #fff; letter-spacing: -0.8px;
  line-height: 1.05;
}
.wlcv3-sub {
  margin: 12px 0 0;
  font-size: 18px; font-weight: 500;
  color: rgba(255,255,255,0.62);
}
.wlcv3-meta {
  margin: 24px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.38);
}

/* ============ DEV mode switch (top-right corner, fixed) ============ */
.dev-mode-switch {
  position: fixed;
  top: max(env(safe-area-inset-top, 8px), 8px);
  right: 8px;
  display: flex;
  padding: 3px;
  gap: 2px;
  background: rgba(10,10,12,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  z-index: 9999;
  font-family: inherit;
}
.dev-mode-switch button {
  padding: 5px 9px;
  border-radius: 99px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.dev-mode-switch button.on {
  background: var(--brand);
  color: #0a0a0c;
}

/* ============ EDIT-TIME — iOS-alert popup с wheel-picker (anchored к time-pill) ============ */
/* Scrim — лёгкое затемнение фона, ловит тап-вне */
.et-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 1099;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.et-scrim.on { opacity: 1; pointer-events: auto; }

.et-alert {
  position: fixed;
  /* JS выставляет top/left и transform-origin под кнопку */
  width: 260px;
  background: #28282a;
  border: 0.5px solid rgba(255,255,255,0.05);
  border-radius: 22px;
  z-index: 1100;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: scale(0.92);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.35);
  color: #fff;
  font-family: inherit;
}
.et-alert.on {
  opacity: 1; pointer-events: auto;
  transform: scale(1);
}

.et-alert .et-pane { display: none; flex-direction: column; }
.et-alert.s1 .et-pane.s1 { display: flex; }
.et-alert.s2 .et-pane.s2 { display: flex; }

/* Pane 1 — wheel time picker */
.et-a-head { padding: 16px 18px 4px; text-align: center; }
.et-a-eyebrow {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: -0.1px;
}

.et-wheel-wrap {
  position: relative;
  height: 168px;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  margin: 4px 0 6px;
  overflow: hidden;
}
.et-wheel-wrap::before, .et-wheel-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; height: 56px;
  pointer-events: none; z-index: 3;
}
.et-wheel-wrap::before {
  top: 0;
  background: linear-gradient(180deg, #28282a 30%, rgba(40,40,42,0));
}
.et-wheel-wrap::after {
  bottom: 0;
  background: linear-gradient(0deg, #28282a 30%, rgba(40,40,42,0));
}
.et-wheel-band {
  position: absolute; left: 16px; right: 16px;
  top: 50%; transform: translateY(-50%);
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  z-index: 1;
}
.et-wheel {
  position: relative;
  height: 100%;
  width: 78px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  scrollbar-width: none;
}
.et-wheel::-webkit-scrollbar { display: none; }
.et-wheel-inner { padding: 62px 0; }
.et-wheel-cell {
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.4);
  scroll-snap-align: center;
  letter-spacing: -0.5px;
  transition: color 0.16s ease, font-weight 0.16s ease;
}
.et-wheel-cell.active { color: #fff; font-weight: 600; }
.et-wheel-colon {
  width: 14px; text-align: center;
  color: #fff;
  font-size: 26px; font-weight: 600; letter-spacing: -0.5px;
  z-index: 2;
  margin-top: -2px;
}

.et-a-actions-single {
  border-top: 0.5px solid rgba(255,255,255,0.12);
  display: flex;
}
.et-a-btn-primary {
  flex: 1;
  padding: 14px 0;
  font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--brand);
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.et-a-btn-primary:active { background: rgba(255,255,255,0.06); }

/* Pane 2 — apply scope */
.et-a-question {
  padding: 22px 22px 6px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.3px;
  color: #fff;
  text-align: center;
  line-height: 1.32;
}
.et-a-q-sub {
  padding: 8px 22px 18px;
  font-size: 12px; color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.1px;
}
.et-a-q-sub b { color: #fff; font-weight: 600; }

.et-a-actions-stack {
  display: flex; flex-direction: column;
  border-top: 0.5px solid rgba(255,255,255,0.12);
}
.et-a-btn {
  padding: 14px 0;
  font-size: 16px; font-weight: 500; letter-spacing: -0.2px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.et-a-btn:last-child { border-bottom: 0; }
.et-a-btn:active { background: rgba(255,255,255,0.06); }
.et-a-btn.primary { color: var(--brand); font-weight: 600; }