/* INVIZ — кабинет. Утверждённый макет v8 (docs/design/mockups/inviz/inviz-v8-2026-10-10.html, «имба», 10.10.2026):
   стиль приветственного баннера — почти чёрный фон, приглушённо-фиолетовый диск за героиней, тонкие орбиты с точками,
   искры, узкий кремовый Oswald в цифрах и заголовках, разреженные лавандовые подписи, плоский цвет без неона.
   Героиня в верхней трети сидит на кромке карточки, реплика слева. Шкала срока — орбита: линия + «планета».
   Правила продукта: без backdrop-filter и filter (ux-telegram.md п. 33), шрифты свои (п. 38), файл ≤ 64 КБ. */

@font-face { font-family: Oswald; font-weight: 300 700; font-display: swap;
  src: url(fonts/oswald-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: Oswald; font-weight: 300 700; font-display: swap;
  src: url(fonts/oswald-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap;
  src: url(fonts/golos-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+20BD, U+2122, U+2212; }
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap;
  src: url(fonts/golos-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --bg: #0b0a0e; --card: #141118; --card2: #1c1822; --line: #2b2533;
  --violet: #7a5ad3; --violet-hi: #8f6fe6; --violet-dim: #3a2d66; --lav: #b8a4ee; --cream: #f2ede4;
  --text: var(--cream); --muted: #8b8395; --chev: #5c5566;
  --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: Oswald, "Arial Narrow", "Roboto Condensed", var(--font);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --stage-h: 316px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { font-size: 16px; line-height: 1.4; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
svg { display: block; }
[hidden] { display: none !important; }
.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }

.app { display: flex; flex-direction: column; height: 100%; max-width: 480px; margin: 0 auto; position: relative; overflow: hidden;
  padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
.top { height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; position: relative; z-index: 6; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .06em; }
.brand svg { width: 12px; height: 12px; fill: var(--lav); }
.pill { height: 30px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.pill svg { width: 15px; height: 15px; fill: none; stroke: var(--lav); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* сцена: диск, орбиты, искры, героиня, реплика. Высота фиксирована — карточка под ней, героиня сидит на её кромке */
.stage { position: relative; height: calc(var(--stage-h) - 54px); flex-shrink: 0; z-index: 2; }
.disk { position: absolute; width: 236px; height: 236px; border-radius: 50%; left: calc(50% - 38px); top: -8px; background: var(--violet); transition: background .4s; }
.app.dim .disk { background: var(--violet-dim); }
.orbit { position: absolute; left: calc(50% - 195px); top: 0; width: 390px; height: 262px; overflow: visible; pointer-events: none; }
.orbit ellipse { fill: none; stroke: var(--lav); stroke-width: 1; opacity: .75; }
.orbit circle { fill: var(--lav); }
.orbit .planet { fill: var(--violet-hi); }
.spk { position: absolute; fill: var(--lav); pointer-events: none; }
.vline { position: absolute; right: 16px; top: 22px; width: 1px; height: 120px; background: var(--lav); opacity: .55; }
.vline::after { content: ""; position: absolute; left: -4px; bottom: 32px; width: 9px; height: 9px; border-radius: 50%; background: var(--lav); }
/* Без filter/анимаций на картинке — Android webview (п. 33). Позиция по позе задаётся классом. */
.hero { position: absolute; left: 50%; bottom: 0; max-width: none; width: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; display: none; z-index: 3; }
.hero.show { display: block; }
.hero.pose-sit { height: 324px; bottom: -40px; margin-left: -34px; }
.hero.pose-wave { height: 442px; bottom: -134px; margin-left: -54px; clip-path: inset(0 0 30.5% 0); }
.hero.pose-present { height: 438px; bottom: -134px; margin-left: -60px; clip-path: inset(0 0 30.5% 0); }
/* реплика: без «пузыря» — подпись экрана разреженным капсом, фраза узким кремовым, линия с затуханием */
.bubble { position: absolute; left: 14px; top: 30px; max-width: min(158px, 40vw); z-index: 5; display: grid; gap: 7px; }
.bubble small { font-family: var(--display); font-weight: 300; font-size: 11px; letter-spacing: .42em; color: var(--lav); text-transform: uppercase; }
.bubble span { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.08; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 1px 12px var(--bg); }
.bubble::after { content: ""; display: block; width: 120px; height: 1px; background: linear-gradient(90deg, var(--lav), transparent); margin-top: 4px; }
.bubble:active span { opacity: .75; }

.screen { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; outline: none; position: relative; z-index: 4; }
.screen::-webkit-scrollbar { width: 0; }
.page { padding: 0 14px 24px; display: flex; flex-direction: column; gap: 12px; animation: fade .22s ease-out; }
.page.sub { padding-top: 6px; }
.app.pose-sit .page.sub { padding-top: 38px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* карточка срока: кромка — лавандовая линия с точкой слева и искрой справа, как линия на баннере */
.card { background: var(--card); border-top: 1px solid var(--lav); padding: 16px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.card::before { content: ""; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--lav); }
.card > .spark-end { position: absolute; right: -6px; top: -7px; width: 13px; height: 13px; fill: var(--lav); }
.card.plain { border-top-color: var(--line); }
.card.plain::before, .card.plain > .spark-end { display: none; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--lav); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-hi); box-shadow: 0 0 0 3px rgba(143,111,230,.25); }
.status.warn { color: var(--cream); }
.status.warn i { background: var(--cream); box-shadow: 0 0 0 3px rgba(242,237,228,.18); }
.status.bad { color: var(--muted); }
.status.bad i { background: var(--muted); box-shadow: none; }
.tariff { font-size: 13px; color: var(--muted); }
.days { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.days > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.days .n { font-size: 92px; line-height: .82; letter-spacing: -.01em; }
.days .n.warn { color: var(--violet-hi); }
.days .n.dim { color: var(--muted); }
.days .u { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); }
.until { font-family: var(--display); font-weight: 300; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--lav); text-align: right; line-height: 1.5; max-width: 50%; }
/* орбита срока: линия, пройденное — кремовое, «планета» на сегодняшнем дне, искра в конце */
.track { position: relative; height: 16px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.track .done { position: absolute; left: 0; top: 6.5px; height: 2px; background: var(--cream); }
.track .p { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--violet-hi);
  box-shadow: 0 0 0 4px rgba(143,111,230,.22), 0 0 14px rgba(143,111,230,.7); }
.track.warn .done { background: var(--violet-hi); }
.track.warn .p { background: var(--cream); box-shadow: 0 0 0 4px rgba(242,237,228,.15), 0 0 14px rgba(242,237,228,.5); }
.track.off .done, .track.off .p { display: none; }
.track .end { position: absolute; right: -2px; top: 1px; width: 14px; height: 14px; fill: var(--lav); }
.split { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.split b { color: var(--cream); font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row2 > .only { grid-column: span 2; }

/* кнопки: плотный фиолет, узкий капс; вторая — тонкий лавандовый контур */
.btn { height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; text-wrap: balance;
  background: var(--violet); color: var(--cream); border: 1px solid var(--violet); }
.btn.second { background: transparent; border-color: var(--lav); color: var(--cream); }
.btn.small { height: 42px; font-size: 13px; }
.btn:disabled { opacity: .5; }
.btn:active, .pill:active, .row:active { opacity: .8; }

/* подписи разделов — разреженный капс с линией, как «Добро пожаловать» на баннере */
.caption { display: flex; align-items: center; gap: 10px; margin: 2px 0 -4px; padding: 0 2px; font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: .36em; color: var(--lav); text-transform: uppercase; }
.caption::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.group { background: var(--card); display: flex; flex-direction: column; overflow: hidden; }
.row { min-height: 52px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: var(--text); }
.row + .row { border-top: 1px solid var(--line); }
.row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 12.5px; color: var(--muted); }
.row .v { font-size: 13.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row .v.ac { color: var(--lav); font-weight: 500; }
.tile { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--line); }
.tile svg { width: 16px; height: 16px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile .num { font-size: 14px; font-weight: 600; }
.tile.ac { background: var(--violet); border-color: var(--violet); }
.chev { width: 7px; height: 12px; flex-shrink: 0; fill: none; stroke: var(--chev); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 0 2px; margin: 0; }
.note b { color: var(--cream); font-weight: 600; }
.link-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; color: var(--cream); background: var(--card); border: 1px solid var(--line); border-left: 2px solid var(--lav); padding: 10px 12px; }
.center { text-align: center; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.empty b { display: block; color: var(--cream); font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .12em; }

/* тарифы */
.plan { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.radio { width: 18px; height: 18px; border: 1px solid var(--chev); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.radio.on { border-color: var(--lav); }
.radio.on::after { content: ""; width: 8px; height: 8px; background: var(--violet-hi); }
.seg { display: grid; border: 1px solid var(--line); }
.seg button { height: 40px; font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); text-align: center; }
.seg button.on { background: var(--violet); color: var(--cream); }
.price { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.save { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .16em; color: var(--bg); background: var(--lav); padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }

/* вкладки: активная — кремовая, сверху короткая фиолетовая черта */
.tabs { flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg); border-top: 1px solid var(--line); padding: 8px 4px calc(10px + var(--safe-b)); position: relative; z-index: 6; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #827a8c; font-size: 11px; font-weight: 500; padding: 2px 0; position: relative; text-align: center; }
.tabs button.on { color: var(--cream); }
.tabs button.on::before { content: ""; position: absolute; top: -9px; width: 22px; height: 2px; background: var(--violet-hi); }
.tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Запуск — точь-в-точь первый макет INVIZ (inviz-2026-10-09.html, «Запуск»), тайминги оттуда же:
   0–1,25 с  имя проявляется из размытия посреди экрана и тает (фон и свечение видны сразу, без чёрной шторки);
   0,75–2,05 с  радужная полоса через весь экран снизу вверх, следом за ней проявляется героиня;
   0,7 с  ореол (диск) раскрывается из 60 %; 1,55 с  карточки поднимаются на 46 px; 1,7 с  искры, орбиты, реплика;
   1,9 с  шапка и вкладки. Тап — пропуск, вибрация в такт (app.js).
   Без filter (ux-telegram.md п. 33 — на Android падал webview): размытие слова — прозрачный текст + тень. */
.launch { position: absolute; inset: 0; z-index: 20; display: none; place-items: center; pointer-events: none; }
.launch.go { display: grid; pointer-events: auto; animation: lift 0s linear 2.5s both; }
.launch::before { content: ""; position: absolute; left: 50%; top: 18%; width: 120%; height: 64%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(122,90,211,.55), rgba(122,90,211,.14) 55%, transparent 75%); }
.launch.go::before { animation: glowOut 1.2s ease-out .9s both; }
.splash { position: relative; font-family: var(--display); font-weight: 700; font-size: 46px; letter-spacing: .14em; padding-left: .14em; color: var(--cream);
  text-shadow: 0 0 30px rgba(183,148,255,.8); opacity: 0; }
.launch.go .splash { animation: splash 1.25s cubic-bezier(.2,.7,.2,1) both; }
.scan { position: absolute; left: 0; right: 0; top: 100%; height: 90px; z-index: 19; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(120,230,255,.18) 35%, rgba(214,180,255,.55) 50%, rgba(255,190,240,.18) 65%, transparent); }
.app.booting .scan { animation: scan 1.3s cubic-bezier(.45,0,.2,1) .75s both; }
.app.booting .hero.show { -webkit-mask: linear-gradient(180deg, transparent 0 40%, #000 60%) 0 0 / 100% 300% no-repeat;
  mask: linear-gradient(180deg, transparent 0 40%, #000 60%) 0 0 / 100% 300% no-repeat; animation: reveal 1.3s cubic-bezier(.45,0,.2,1) .75s both; }
.app.booting .disk { animation: haloIn 1.2s ease-out .7s both; }
.app.booting .orbit, .app.booting .spk, .app.booting .vline, .app.booting .bubble { animation: fadeIn .6s ease-out 1.7s both; }
.app.booting .screen { animation: glassIn .8s cubic-bezier(.2,.8,.2,1) 1.55s both; }
.app.booting .top, .app.booting .tabs { animation: fadeIn .6s ease-out 1.9s both; }
@keyframes lift { to { visibility: hidden; pointer-events: none; } }
@keyframes glowOut { to { opacity: 0; } }
/* «размытие» без filter: прозрачный текст + тень того же цвета; разрядка .5em → .14em → .1em и рост 1,08 — как в макете */
@keyframes splash { 0% { opacity: 0; color: transparent; text-shadow: 0 0 14px rgba(242,237,228,.95); letter-spacing: .5em; }
  25% { opacity: 1; } 45% { color: var(--cream); text-shadow: 0 0 30px rgba(183,148,255,.8); letter-spacing: .14em; } 70% { opacity: 1; }
  100% { opacity: 0; color: transparent; text-shadow: 0 0 6px rgba(242,237,228,.9); letter-spacing: .1em; transform: scale(1.08); } }
@keyframes scan { 0% { top: 100%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: -12%; opacity: 0; } }
@keyframes reveal { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
@keyframes haloIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes glassIn { from { opacity: 0; translate: 0 46px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(143,111,230,.12), 0 0 20px rgba(143,111,230,.8); } }
.track .p { animation: pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .launch, .app.booting *, .track .p { animation: none !important; -webkit-mask: none !important; mask: none !important; } .launch.go, .scan { display: none; } }

.toast { position: absolute; left: 50%; bottom: calc(84px + var(--safe-b)); transform: translateX(-50%) translateY(12px); z-index: 30; max-width: 90%; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--lav); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.err { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.err b { display: block; color: var(--cream); margin-bottom: 6px; }