/* Вариант v2 — ALEX (mobile/DESIGN.md). Грамматика Outcrowd числами: скругление — доля размера (карточки 24–28,
   вложенные 20–22, пилюли целиком); поверхность — градиент плюс тень; свечение — на предмете; одна ступень зерна;
   статус — цветом и формой маркера; ход ~1,1–1,4 с по мягкой кривой, первым движется заголовок, вход снизу.
   Главная — по макету Александра (3663838B-…PNG): фон rgb(6,7,18), три счётчика точечной матрицей, медальон.
   Геометрия героя — в единицах макета: --u = ширина экрана / 1122. Иконки — Phosphor (.ph). */

[data-variant="v2"] {
  --v-bg: #060712;
  --v-card: #121320;
  --v-fg: #F5F5F7;
  --v-fg-2: #A9ABBF;          /* ≥ 7:1 на карточке */
  --v-fg-3: #8E90A6;          /* ≥ 5:1 — минимум для текста */
  --v-line: rgba(255, 255, 255, 0.07);
  --v-blue: #7C96FF;
  --v-blue-text: #AFC0FF;
  --v-amber: #FFB547;
  --v-amber-text: #FFC978;
  --v-green: #4ADE80;
  --v-green-text: #7BEBA6;
  --v-red: #FF6B6B;
  --v-red-text: #FFA3A3;
  --v-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --v-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --v-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --v-dock-h: 74px;
  --u: calc(min(100vw, 480px) / 1122);
}

[data-variant="v2"] body {
  background: var(--v-bg);
  color: var(--v-fg);
  font-family: var(--v-font);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.012em;
}

[data-variant="v2"] body::before {  /* зерно — одна ступень, неподвижно, под содержимым */
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.v-app { position: relative; isolation: isolate; min-height: 100vh; overflow-x: clip; }
:where(.v-app) :focus-visible { outline: 2px solid var(--v-blue-text); outline-offset: 2px; }
.ph { width: 20px; height: 20px; flex: none; }

.v-beam {  /* свет сверху — луч на первый экран, не зарево на страницу */
  position: absolute;
  top: -170px;
  left: 50%;
  z-index: -1;
  width: 560px;
  height: 440px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(110, 100, 255, 0.16), rgba(110, 100, 255, 0));
  pointer-events: none;
}

.v-card {
  position: relative;
  border-radius: 28px;
  background-color: var(--v-card);
  background-image: linear-gradient(180deg, #171828, #10111C);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -28px rgba(0, 0, 0, 0.95);
}

/* --- Шапка: меню, где я, здоровье ------------------------------------------------------------------------ */
.v-top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: calc(var(--safe-top) + 6px) 12px 0 8px;
}
.v-menu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  color: var(--v-fg);
  transition: transform 120ms var(--v-soft), background-color 160ms;
}
.v-menu .ph { width: 24px; height: 24px; }
.v-menu:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.06); }
.v-health {  /* точка здоровья: цвет и форма свечения; слово — на главной и в aria-label */
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 500;
  transition: transform 120ms var(--v-soft);
}
.v-health:active { transform: scale(0.96); }
.v-health__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-green); box-shadow: 0 0 10px rgba(74, 222, 128, 0.85); }
.v-health[data-tone="attention"] .v-health__dot { background: var(--v-amber); box-shadow: 0 0 10px rgba(255, 181, 71, 0.8); }
.v-health[data-tone="offline"] .v-health__dot,
.v-health[data-tone="loading"] .v-health__dot { background: #71717A; box-shadow: none; }

/* --- Лента ------------------------------------------------------------------------------------------------ */
.v-main { padding: 0 16px calc(var(--v-dock-h) + var(--safe-bottom) + 28px); }
.v-demo { padding-top: 4px; text-align: center; font-size: 12px; line-height: 16px; color: var(--v-fg-3); }

/* --- Герой по макету: счётчики точечными цифрами над медальоном (единицы макета --u) ----------------------- */
.v-hero { display: grid; justify-items: center; text-align: center; margin: 0 -16px; }
.v-counts {  /* три счётчика по центрам 20/50/80 % ширины — как на макете Александра; цифры — типографские (29.09) */
  display: grid;
  grid-template-columns: repeat(3, calc(340 * var(--u)));
  justify-content: center;
  width: 100%;
  margin-top: calc(24 * var(--u));
}
.v-count {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 44px;
  margin: 0 4px;
  padding: 10px 4px 11px;
  border: 1px solid transparent;
  border-radius: 24px;
  transition: transform 140ms var(--v-soft), background-color 160ms;
}
.v-count:active { transform: scale(0.96); }
.v-count__num {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 44px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--v-fg);
}
.v-count__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; letter-spacing: 0; color: var(--v-fg-2); white-space: nowrap; }
.v-count__label .v-marker { transform: scale(0.8); }
.v-count[data-zero="true"] .v-count__num { color: var(--v-fg-3); }
.v-count--wait[data-due="true"] {  /* есть что подтвердить сейчас — акцент на кнопке, не на тексте */
  background-color: rgba(255, 181, 71, 0.09);
  background-image: linear-gradient(180deg, rgba(255, 181, 71, 0.14), rgba(255, 181, 71, 0.05));
  border-color: rgba(255, 181, 71, 0.3);
  box-shadow: 0 12px 28px -16px rgba(255, 181, 71, 0.5), inset 0 1px 0 rgba(255, 220, 160, 0.12);
}
.v-count--wait[data-due="true"] .v-count__num { color: var(--v-amber-text); }
.v-hero[data-tone="offline"] .v-count__num { color: #9A9CB0; }

/* Медальон: кадр 1034 из 1122, центр на 552 — как на макете. Холст WebGL во весь кадр, без него — CSS-сфера. */
.v-medal {  /* 29.09 Александр: на 15 % меньше макета — кадр 879 (0,85 × 1034), центр на 552, как было */
  position: relative;
  justify-self: start;
  width: calc(879 * var(--u));
  height: calc(879 * var(--u));
  margin: calc(12 * var(--u)) 0 0 calc(112.5 * var(--u) + (100% - 1122 * var(--u)) / 2);
}
.v-blob-slot { position: absolute; inset: 0; display: grid; place-items: center; view-transition-name: v-blob; }
.v-blob { position: absolute; inset: -12%; width: 124%; height: 124%; pointer-events: none; }  /* шире кадра — ореол не срезается */
/* Свечение вокруг медальона — под холстом, цветами макета Александра (слева циан, справа фиолет, снизу синий), мягко
   пульсирует; без связи — гаснет, медальон серый. */
.v-blob-slot::before {
  content: '';
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 56%, rgba(20, 140, 215, 0.62), rgba(20, 140, 215, 0) 72%),
    radial-gradient(closest-side at 72% 42%, rgba(120, 70, 225, 0.55), rgba(120, 70, 225, 0) 72%),
    radial-gradient(closest-side at 50% 62%, rgba(30, 60, 190, 0.5), rgba(30, 60, 190, 0) 80%);
  filter: blur(22px);
  animation: v-halo 5.5s ease-in-out infinite alternate;
}
.v-blob-slot[data-tone="offline"]::before { animation: none; opacity: 0.25; }
.v-blob-slot.has-blob::before { display: none; }  /* живой медальон светит сам — свечением макета */
.v-blob-slot[data-tone="offline"] .v-blob { filter: grayscale(1) brightness(0.72); }
.v-blob-slot.has-blob .v-orb { display: none; }
.v-orb {  /* запасной вид без WebGL */
  position: relative;
  width: 62%;
  height: 62%;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #9DB0FF 0%, #5B6CF0 38%, #2A2380 74%, #140F45 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 60px 6px rgba(124, 150, 255, 0.3),
              inset 0 -20px 40px rgba(8, 6, 40, 0.75), inset 0 14px 28px rgba(255, 255, 255, 0.16);
}
.v-orb__swirl {
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, rgba(77, 215, 255, 0), rgba(77, 215, 255, 0.8), rgba(176, 140, 255, 0) 35%,
                             rgba(255, 122, 217, 0.6) 55%, rgba(176, 140, 255, 0) 75%, rgba(77, 215, 255, 0));
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: v-swirl 12s linear infinite;
}
.v-orb__gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 34% 20% at 38% 20%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%);
}
.v-hero[data-tone="offline"] .v-orb { filter: grayscale(1) brightness(0.7); }

.v-hello { margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--v-fg-2); }
.v-q { margin-top: 4px; font-size: 30px; line-height: 36px; font-weight: 650; letter-spacing: -0.025em; }

.v-suggest { display: flex; gap: 8px; width: 100%; margin-top: 16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.v-suggest::-webkit-scrollbar { display: none; }
.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 44px;
  padding: 0 16px 0 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 120ms var(--v-soft), background-color 160ms;
}
.v-chip .ph { width: 18px; height: 18px; color: #C4C8FF; }
.v-chip:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.1); }

/* --- Сводка ALEX ----------------------------------------------------------------------------------------- */
.v-brief { margin-top: 16px; padding: 18px; }
.v-brief__head { display: flex; align-items: center; gap: 10px; }
.v-brief__spark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(124, 150, 255, 0.28), rgba(176, 140, 255, 0.28));
  color: #CDBDFF;
}
.v-brief__spark .ph { width: 16px; height: 16px; }
.v-brief__title { font-size: 15px; line-height: 20px; font-weight: 600; }
.v-brief__at { margin-left: auto; font-size: 13px; color: var(--v-fg-3); }
.v-brief__text { margin-top: 12px; font-size: 16px; line-height: 23px; color: #E6E6EE; }
.v-word { opacity: 0; filter: blur(4px); animation: v-word 520ms var(--v-soft) forwards; animation-delay: calc(900ms + var(--i) * 34ms); }

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.v-badge[data-tone="waiting"] { background: rgba(255, 181, 71, 0.16); color: var(--v-amber-text); }
.v-badge[data-tone="active"] { background: rgba(124, 150, 255, 0.18); color: var(--v-blue-text); }
.v-badge[data-tone="done"] { background: rgba(74, 222, 128, 0.14); color: var(--v-green-text); }
.v-badge[data-tone="failed"], .v-badge[data-tone="blocked"] { background: rgba(255, 107, 107, 0.16); color: var(--v-red-text); }
.v-badge[data-tone="idle"] { background: rgba(255, 255, 255, 0.08); color: var(--v-fg-2); }
.v-badge .v-marker { width: 9px; height: 9px; }

/* --- Маркер статуса: цвет и форма (27447553) ----------------------------------------------------------------- */
.v-marker { position: relative; flex: none; display: inline-block; width: 12px; height: 12px; background: currentColor; pointer-events: none; }
.v-marker[data-tone="active"] { color: var(--v-blue); }
.v-marker[data-tone="waiting"] { color: var(--v-amber); }
.v-marker[data-tone="blocked"], .v-marker[data-tone="failed"] { color: var(--v-red); }
.v-marker[data-tone="done"], .v-marker[data-tone="ok"] { color: var(--v-green); }
.v-marker[data-tone="idle"] { color: #7A7C90; }
.v-marker--circle, .v-marker--dot { border-radius: 50%; }
.v-marker--circle { box-shadow: 0 0 10px rgba(124, 150, 255, 0.7); }
.v-marker--circle::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: v-ping 2.2s var(--v-soft) infinite;
}
.v-marker--triangle { clip-path: polygon(50% 6%, 96% 90%, 4% 90%); }
.v-marker--square { width: 11px; height: 11px; border-radius: 3px; }
.v-marker--star { width: 13px; height: 13px; clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 79% 94%, 50% 72%, 21% 94%, 31% 58%, 2% 36%, 38% 35%); }
.v-marker--ring { width: 11px; height: 11px; background: none; border: 2px solid currentColor; border-radius: 50%; }

.v-note, .v-live:not(:empty) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 15px;
  line-height: 20px;
  color: var(--v-fg-2);
}
.v-note .ph { width: 18px; height: 18px; margin-top: 1px; color: var(--v-amber); }
.v-note[data-tone="offline"] .ph { color: #8E90A6; }
.v-live:empty { display: none; }
.v-live { background-color: rgba(74, 222, 128, 0.08) !important; color: #D8F7E4 !important; }
.v-live .v-marker { margin-top: 4px; }

/* --- Решение: акцентная карточка среди нейтральных ------------------------------------------------------- */
.v-decision {
  position: relative;
  scroll-margin-top: calc(var(--safe-top) + 16px);
  margin-top: 16px;
  padding: 20px 18px 18px;
  overflow: hidden;
  border-radius: 28px;
  background-color: #1C150C;
  background-image: radial-gradient(120% 90% at 0% 0%, rgba(255, 181, 71, 0.26), rgba(255, 181, 71, 0) 55%),
                    linear-gradient(180deg, #221A10, #15120D);
  border: 1px solid rgba(255, 181, 71, 0.3);
  box-shadow: 0 30px 70px -32px rgba(255, 160, 50, 0.4), inset 0 1px 0 rgba(255, 220, 160, 0.14);
}
.v-decision__head { display: flex; align-items: center; gap: 8px; }
.v-eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-amber-text); }
.v-decision__until { margin-left: auto; font-size: 13px; line-height: 18px; color: rgba(255, 236, 210, 0.74); }
.v-decision__title { margin-top: 12px; font-size: 24px; line-height: 29px; font-weight: 650; letter-spacing: -0.022em; }
.v-decision__target { margin-top: 4px; font-size: 15px; line-height: 20px; color: rgba(255, 240, 222, 0.76); }
.v-params { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.v-param { flex: 1 1 auto; min-width: 84px; padding: 10px 12px; border-radius: 16px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); }
.v-param dt { font-size: 12px; line-height: 16px; color: rgba(255, 240, 222, 0.7); white-space: nowrap; }
.v-param dd { margin-top: 3px; font-size: 16px; line-height: 21px; font-weight: 600; white-space: nowrap; }
.v-decision__code {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 12px;
  font-family: var(--v-mono);
  font-size: 11.5px;
  line-height: 16px;
  color: rgba(255, 240, 222, 0.66);
}
.v-decision__off { margin-top: 10px; font-size: 14px; line-height: 19px; color: var(--v-amber-text); }
.v-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.v-btn { height: 52px; border-radius: 26px; font-size: 17px; font-weight: 600; text-align: center; transition: transform 120ms var(--v-soft), background-color 160ms; }
.v-btn--solid { background-color: #F7F4EE; color: #16120C; box-shadow: 0 10px 26px -12px rgba(255, 220, 170, 0.6); }
.v-btn--solid:active { background-color: #E6DFD3; }
.v-btn--ghost { background-color: rgba(255, 255, 255, 0.08); color: var(--v-fg); border: 1px solid rgba(255, 255, 255, 0.16); }
.v-btn--ghost:active { background-color: rgba(255, 255, 255, 0.14); }
.v-btn:active { transform: scale(0.97); }
.v-btn:disabled { opacity: 0.4; transform: none; }
.v-link { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; font-size: 15px; color: var(--v-blue-text); }
.v-link .ph { width: 16px; height: 16px; }

/* --- В работе: контейнер со светом сверху и вложенными карточками (27157966) --------------------------------- */
/* Ритм (29.09, по шоту 27157966): заголовок — по краю того, что под ним; от заголовка до карточек — 12 px всегда
   (строка заголовка 32 px, ссылка «Все» её не растит); между карточками — 16, перед разделом с внешним заголовком — 28. */
.v-panel { margin-top: 16px; padding: 18px 12px 12px; overflow: hidden; }
.v-panel__beam {
  position: absolute;
  top: -130px;
  left: 50%;
  width: 340px;
  height: 230px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124, 150, 255, 0.24), rgba(124, 150, 255, 0));
  pointer-events: none;
}
.v-section__head { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 12px; }
.v-section__head .v-link { margin-top: -6px; margin-bottom: -6px; }   /* касание 44, строка заголовка — 32 */
.v-h2 { font-size: 20px; line-height: 25px; font-weight: 650; letter-spacing: -0.016em; }
.v-count-pill { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 600; }
.v-tasks { position: relative; display: grid; gap: 8px; }
.v-task {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background-color: #191A28;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.v-task[data-tone="active"] { border-color: rgba(124, 150, 255, 0.22); box-shadow: inset 0 1px 0 rgba(175, 192, 255, 0.12); }
.v-task[data-tone="active"]::before {  /* идёт работа — по кромке бежит свет; процента нет */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(175, 192, 255, 0), rgba(175, 192, 255, 0.95), rgba(175, 192, 255, 0)) no-repeat;
  background-size: 38% 100%;
  animation: v-sweep 2.6s linear infinite;
}
.v-task[data-tone="waiting"] { border-color: rgba(255, 181, 71, 0.2); }
.v-task__head { position: relative; display: grid; gap: 6px; width: 100%; padding: 14px 44px 14px 14px; text-align: left; }
.v-task__head:active { background: rgba(255, 255, 255, 0.03); }
.v-task__row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; }
.v-task__state { font-weight: 600; color: var(--v-fg-2); }
.v-task[data-tone="active"] .v-task__state { color: var(--v-blue-text); }
.v-task[data-tone="waiting"] .v-task__state { color: var(--v-amber-text); }
.v-task[data-tone="blocked"] .v-task__state, .v-task[data-tone="failed"] .v-task__state { color: var(--v-red-text); }
.v-task__time { color: var(--v-fg-3); }
.v-task__title { font-size: 17px; line-height: 22px; font-weight: 600; }
.v-task__note { font-size: 15px; line-height: 20px; color: var(--v-fg-2); }
.v-task__chev { position: absolute; right: 14px; top: 50%; color: var(--v-fg-3); transform: translateY(-50%); transition: transform 350ms var(--v-soft); }
.v-task__chev .ph { width: 16px; height: 16px; }
.v-task[data-open="true"] .v-task__chev { transform: translateY(-50%) rotate(180deg); }
.v-task__more { padding: 0 14px 6px; animation: v-open 420ms var(--v-soft); }
.v-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 12px; border-top: 1px solid var(--v-line); }
.v-facts dt { font-size: 12px; line-height: 16px; color: var(--v-fg-3); }
.v-facts dd { margin-top: 2px; font-size: 14px; line-height: 19px; }
.v-facts__type { display: flex; align-items: center; gap: 6px; }
.v-facts__type .ph { width: 16px; height: 16px; color: var(--v-blue-text); }
.v-mono { font-family: var(--v-mono); font-size: 12px; overflow-wrap: anywhere; }
.v-empty { padding: 2px 0 6px; font-size: 15px; line-height: 20px; color: var(--v-fg-2); }

/* --- Система: бенто (gauge 27332491, плитка-заливка 27054608) ------------------------------------------------- */
.v-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.v-bento > .v-h2 { grid-column: 1 / -1; display: flex; align-items: center; min-height: 32px; margin-bottom: 2px; }
.v-tile { position: relative; overflow: hidden; padding: 16px; border-radius: 24px; text-align: left; }
.v-tile--gauge { grid-column: 1 / -1; padding: 16px 16px 14px; }
.v-tile__label { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-fg-2); }
.v-tile__label .ph { width: 16px; height: 16px; }
.v-gauge { position: relative; width: 100%; max-width: 280px; margin: 8px auto 0; }
.v-gauge svg { display: block; width: 100%; overflow: visible; }
.v-gauge__track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 11; stroke-linecap: round; }
.v-gauge__arc { fill: none; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 0 999; }
.v-gauge__arc--5h { stroke: url(#v-g5); filter: drop-shadow(0 0 7px rgba(124, 150, 255, 0.6)); }
.v-gauge__arc--5h[data-state="reached"], .v-gauge__arc--5h[data-state="near"] { stroke: var(--v-amber); filter: drop-shadow(0 0 7px rgba(255, 181, 71, 0.6)); }
.v-gauge__arc--week { stroke: rgba(176, 140, 255, 0.6); }
.v-gauge__tick { stroke: var(--v-fg); stroke-width: 2.5; stroke-linecap: round; }
.v-gauge__center { position: absolute; left: 0; right: 0; bottom: -2px; display: grid; justify-items: center; }
.v-gauge__center b { font-size: 44px; line-height: 44px; font-weight: 650; letter-spacing: -0.04em; }
.v-gauge__center small { margin-left: 2px; font-size: 20px; font-weight: 600; color: var(--v-fg-2); letter-spacing: 0; }
.v-gauge__center span { font-size: 13px; line-height: 18px; color: var(--v-fg-3); }
.v-gauge__legend { display: grid; gap: 6px; margin-top: 12px; }
.v-gauge__legend div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; }
.v-gauge__legend dt { display: inline-flex; align-items: center; gap: 7px; color: var(--v-fg-2); }
.v-gauge__legend dd { text-align: right; }
.v-dot { width: 8px; height: 8px; border-radius: 50%; }
.v-dot--5h { background: linear-gradient(90deg, #6E8BFF, #B08CFF); }
.v-dot--week { background: rgba(176, 140, 255, 0.6); }
.v-tile--spend {
  background-color: #1FB866;
  background-image: linear-gradient(160deg, #46E68F, #12A158);
  color: #03200E;
  box-shadow: 0 20px 50px -26px rgba(34, 197, 94, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.v-tile--spend .v-tile__label { color: #073A1C; }
.v-tile__big { display: block; margin-top: 16px; font-size: 48px; line-height: 48px; font-weight: 700; letter-spacing: -0.045em; }
.v-tile__foot { margin-top: 10px; font-size: 13px; line-height: 17px; color: #073A1C; }
.v-tile--sys { display: flex; flex-direction: column; gap: 12px; transition: transform 120ms var(--v-soft); }
.v-tile--sys:active { transform: scale(0.98); }
.v-sys { display: grid; gap: 9px; }
.v-sys__row { display: flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 18px; }
.v-sys__row .ph { width: 16px; height: 16px; color: var(--v-fg-2); }
.v-sys__row > span:not(.v-marker) { flex: 1; }
.v-sys__row .v-marker { width: 8px; height: 8px; }

/* --- Итоги: лента в край --------------------------------------------------------------------------------- */
.v-section { margin-top: 28px; }
.v-results { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.v-results::-webkit-scrollbar { display: none; }
.v-result { flex: 0 0 72%; scroll-snap-align: start; }
.v-result:first-child { flex-basis: 80%; }
.v-result__btn { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; height: 100%; min-height: 152px; padding: 16px; border-radius: 24px; text-align: left; transition: transform 140ms var(--v-soft); }
.v-result__btn:active { transform: scale(0.98); }
.v-result__title { font-size: 17px; line-height: 22px; font-weight: 600; }
.v-result__note { font-size: 15px; line-height: 20px; color: var(--v-fg-2); }
.v-result__time { margin-top: auto; font-size: 13px; line-height: 18px; color: var(--v-fg-3); }

.v-stub { padding-top: 22px; }
.v-stub .v-q { font-size: 34px; line-height: 40px; }
.v-stub__list { margin-top: 20px; padding: 6px 16px; }
.v-stub__list li { display: flex; gap: 10px; align-items: center; padding: 14px 0; font-size: 15px; line-height: 20px; color: var(--v-fg-2); }
.v-stub__list li + li { border-top: 1px solid var(--v-line); }

/* --- Док: поле «Спросить ALEX» (из A) ---------------------------------------------------------------------- */
.v-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 10px 12px max(8px, calc(var(--safe-bottom) + 10px - var(--kb-inset)));  /* клавиатура закрывает индикатор */
  background: linear-gradient(to top, rgba(6, 7, 18, 0.97) 58%, rgba(6, 7, 18, 0));
  transform: translateY(calc(var(--kb-inset) * -1));
  transition: transform 280ms var(--v-soft);
}
.v-dock__note { padding: 0 8px 8px; font-size: 13px; line-height: 18px; color: var(--v-fg-2); }
/* поле ввода, меню «+», чат и работа — chat.css */

/* --- Шторка (как у ChatGPT): разделы, закреплённые проекты, недавнее, новый запрос --------------------------- */
.v-drawer { position: fixed; inset: 0; z-index: 30; visibility: hidden; transition: visibility 0s linear 420ms; }
.v-drawer[data-open="true"] { visibility: visible; transition-delay: 0s; }
.v-drawer__scrim { position: absolute; inset: 0; width: 100%; background: rgba(2, 3, 10, 0.62); opacity: 0; transition: opacity 360ms var(--v-soft); }
.v-drawer[data-open="true"] .v-drawer__scrim { opacity: 1; }
.v-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(86%, 360px);
  padding: calc(var(--safe-top) + 12px) 10px calc(var(--safe-bottom) + 12px);
  overflow-y: auto;
  background-color: #0B0C18;
  background-image: linear-gradient(180deg, #11122A, #0A0B16 40%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 30px 0 80px -30px rgba(0, 0, 0, 0.9);
  transform: translateX(-104%);
  transition: transform 420ms var(--v-soft);
}
.v-drawer[data-open="true"] .v-drawer__panel { transform: none; }
.v-drawer__panel:focus { outline: none; }
.v-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 14px; }
.v-drawer__brand { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: 0.01em; }
.v-drawer__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; color: var(--v-fg); }
.v-drawer__icon .ph { width: 22px; height: 22px; }
.v-drawer__list { display: grid; gap: 2px; margin-top: 10px; }
.v-drawer__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 17px;
  line-height: 22px;
  color: var(--v-fg);
  text-align: left;
  transition: background-color 160ms;
}
.v-drawer__item .ph { width: 22px; height: 22px; color: #C9CBE4; }
.v-drawer__item:active { background: rgba(255, 255, 255, 0.06); }
.v-drawer__item[aria-current="page"] { background: rgba(255, 255, 255, 0.08); }
.v-drawer__count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--v-amber); color: #1A1206; font-size: 12px; line-height: 22px; font-weight: 700; text-align: center; }
.v-drawer__h { margin: 22px 14px 4px; font-size: 17px; line-height: 22px; font-weight: 700; }
.v-proj__icon { display: grid; place-items: center; color: var(--pc); }
.v-proj__icon .ph { color: var(--pc); }
.v-proj__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v-proj__lock { display: grid; place-items: center; color: var(--v-fg-3); }
.v-proj__lock .ph { width: 16px; height: 16px; color: var(--v-fg-3); }
.v-drawer__all { margin-top: 2px; color: var(--v-fg-2); }
.v-drawer__meta { margin-left: auto; font-size: 14px; color: var(--v-fg-3); }
.v-thread { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 58px; }
.v-thread__title { font-size: 16px; line-height: 21px; }
.v-thread__meta { font-size: 13px; line-height: 17px; color: var(--v-fg-3); }
.v-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 16px 4px 0; }
.v-new {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  border-radius: 26px;
  background-color: #5B6CF0;
  background-image: linear-gradient(135deg, #6E7BFF, #4E5BE0);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 650;
  box-shadow: 0 14px 34px -14px rgba(100, 110, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 120ms var(--v-soft);
}
.v-new .ph { width: 22px; height: 22px; }
.v-new:active { transform: scale(0.96); }
html.drawer-open { overflow: hidden; }

/* --- Скелет ------------------------------------------------------------------------------------------------ */
.v-sk { display: block; border-radius: 10px; background: rgba(255, 255, 255, 0.06); animation: v-shimmer 1.6s ease-in-out infinite alternate; }
.v-sk--label { width: calc(150 * var(--u)); height: calc(34 * var(--u)); }
.v-sk--digit { width: calc(78 * var(--u)); height: calc(103 * var(--u)); border-radius: 8px; }
.v-sk--hello { width: 180px; height: 14px; margin-top: 6px; }
.v-sk--q { width: 240px; height: 30px; margin-top: 10px; }
.v-sk--line { width: 100%; height: 14px; margin-top: 12px; }
.v-sk--short { width: 60%; }
.v-orb--sk { background: rgba(255, 255, 255, 0.05); box-shadow: none; animation: v-shimmer 1.6s ease-in-out infinite alternate; }
.v-brief .v-sk--line:first-child { margin-top: 0; }

/* --- Вход: один раз. Первыми — подписи и точки, медальон вырастает (~1,4 с), дальше карточки снизу --------------- */
.v-count__num, .v-count__label, .v-hello, .v-q, .v-suggest, .v-brief, .v-note, .v-decision, .v-panel, .v-bento, .v-section { opacity: 0; transform: translateY(16px); }
.v-medal { opacity: 0; scale: 0.9; }
.is-entered :is(.v-count__num, .v-count__label, .v-hello, .v-q, .v-suggest, .v-brief, .v-note, .v-decision, .v-panel, .v-bento, .v-section) {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--v-soft), transform 1100ms var(--v-soft);
}
.is-entered .v-medal { opacity: 1; scale: 1; transition: opacity 900ms var(--v-soft) 160ms, scale 1400ms var(--v-soft) 160ms; }
.is-entered .v-hello { transition-delay: 380ms; }
.is-entered .v-q { transition-delay: 440ms; }
.is-entered .v-suggest { transition-delay: 520ms; }
.is-entered .v-brief { transition-delay: 600ms; }
.is-entered .v-note, .is-entered .v-decision { transition-delay: 680ms; }
.is-entered .v-panel { transition-delay: 740ms; }
.is-entered .v-bento { transition-delay: 800ms; }
.is-entered .v-section { transition-delay: 860ms; }
.is-entered .v-gauge__arc { stroke-dasharray: var(--len) 999; transition: stroke-dasharray 1400ms var(--v-soft) 800ms; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }

@keyframes v-halo { from { opacity: 0.7; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes v-dot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes v-swirl { to { transform: rotate(360deg); } }
@keyframes v-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes v-word { to { opacity: 1; filter: none; } }
@keyframes v-open { from { opacity: 0; transform: translateY(-6px); } }
@keyframes v-shimmer { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes v-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }