/* reels line mini app. Values come from the mockup (claude.ai artifact 4JjaiLAH7QJ5vsVYgNWfZb, 13.10.2026,
   revised 15.10.2026: the menu and the main buttons float over the content, capsule buttons, the «i»
   examples): the note «Цвет и отступы» fixes the palette (60-30-10), the 8 pt grid and the glass capsules. */

/* ---- fonts: UI headings (Geologica) and the faces the preview card shows ---- */
@font-face { font-family: 'Geologica RL'; src: url(../assets/fonts/geologica-latin.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Geologica RL'; src: url(../assets/fonts/geologica-cyrillic.woff2) format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Druk Wide RL'; src: url(../assets/fonts/druk-wide-latin.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Druk Wide RL'; src: url(../assets/fonts/druk-wide-cyrillic.woff2) format('woff2'); font-weight: 700; font-display: block; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Look Bebas'; src: url(../assets/fonts/bebas-latin.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Look Bebas'; src: url(../assets/fonts/bebas-cyrillic.woff2) format('woff2'); font-weight: 700; font-display: block; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Look Roboto Flex Wide'; src: url(../assets/fonts/roboto-flex-wide-latin.woff2) format('woff2'); font-weight: 1000; font-display: block; }
@font-face { font-family: 'Look Roboto Flex Wide'; src: url(../assets/fonts/roboto-flex-wide-cyrillic.woff2) format('woff2'); font-weight: 1000; font-display: block; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Look Nimbus'; src: url(../assets/fonts/nimbus-latin.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Look Nimbus'; src: url(../assets/fonts/nimbus-cyrillic.woff2) format('woff2'); font-weight: 700; font-display: block; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Monologue'; src: url(../assets/fonts/monologue-latin.woff2) format('woff2'); font-weight: 400; }
@font-face { font-family: 'Monologue'; src: url(../assets/fonts/monologue-cyrillic.woff2) format('woff2'); font-weight: 400; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Moniqa'; src: url(../assets/fonts/moniqa-latin.woff2) format('woff2'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Moniqa'; src: url(../assets/fonts/moniqa-cyrillic.woff2) format('woff2'); font-weight: 700; font-style: italic; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* the faces the mockup took from Google Fonts: the same files the render uses (editing/montage/template/assets/fonts) */
@font-face { font-family: 'Unbounded'; src: url(../assets/fonts/unbounded-800-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(../assets/fonts/unbounded-800-cyrillic.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; src: url(../assets/fonts/unbounded-900-latin.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(../assets/fonts/unbounded-900-cyrillic.woff2) format('woff2'); font-weight: 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Playfair Display'; src: url(../assets/fonts/playfair-display-italic-latin.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(../assets/fonts/playfair-display-italic-cyrillic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/inter-latin.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../assets/fonts/inter-cyrillic.woff2) format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'TikTok Sans'; src: url(../assets/fonts/tiktok-sans-latin.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'TikTok Sans'; src: url(../assets/fonts/tiktok-sans-cyrillic.woff2) format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---- tokens. Named after the themeParams roles the mockup maps them to (bg = secondary_bg_color,
   surface = section_bg_color, muted = hint, line = section_separator_color); the values are the
   note «Цвет и отступы», and Telegram's colorScheme picks the set. ---- */
:root, :root[data-theme="dark"] {
  --bg: #0E0E11; --surface: #17171B; --text: #F4F1EA; --muted: #8E8B84; --line: rgba(244,241,234,0.09);
  --link: #F5338E; --btn: #F5338E; --off: #2C2C32; --track: #2C2C32; --raise: #1C1C21; --raise-in: #26262C;
  --dis: #1F1F24; --dis-fg: #6E6B65; --bad: #FF6B5E; --ring: #F5338E;
  --seg: #17171B;
  --glass: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%);
  --glass-rim: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 0 0 1px rgba(255,255,255,0.10), 0 6px 16px -8px rgba(0,0,0,0.7);
  --sel-border: rgba(255,255,255,0.28);
  --nv-glass: rgba(28,28,33,0.82); --nv-solid: #1C1C21; --nv-off: #8E8B84;
  --ok-bg: #E4FF3A; --ok-fg: #0E0E11; --ctl: #6E6B65; --toast: #F4F1EA; --toast-fg: #0E0E11;
  --icon-bg: #232328; --bar-track: #2C2C32; --brand-soft: rgba(245,51,142,0.16); --brand-text: #FF7AB8;
  --scrim: rgba(0,0,0,0.55); --bg-rgb: 14,14,17;
  --sw-off: #3A3A41;
  --fix-line: #E4FF3A;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4F1EA; --surface: #FFFFFF; --text: #0E0E11; --muted: #6B6862; --line: rgba(14,14,17,0.08);
  --link: #C2125F; --btn: #F5338E; --off: #DCD7CC; --track: #E4DFD4; --raise: #FFFFFF; --raise-in: #F4F1EA;
  --dis: #E4DFD4; --dis-fg: #949088; --bad: #C8331F; --ring: #F5338E;
  --seg: #E9E5DC;
  --glass: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 100%);
  --glass-rim: inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgba(14,14,17,0.08), 0 6px 16px -8px rgba(14,14,17,0.28);
  --sel-border: rgba(14,14,17,0.5);
  --nv-glass: rgba(255,255,255,0.82); --nv-solid: #FFFFFF; --nv-off: #6B6862;
  --ok-bg: #0E0E11; --ok-fg: #E4FF3A; --ctl: #949088; --toast: #0E0E11; --toast-fg: #F4F1EA;
  --icon-bg: #F4F1EA; --bar-track: #2C2C32; --brand-soft: rgba(245,51,142,0.12); --brand-text: #C2125F;
  --scrim: rgba(0,0,0,0.55); --bg-rgb: 244,241,234;
  --sw-off: #D9D4C9;
  --fix-line: #5E7A00;
  color-scheme: light;
}
:root {
  --pink: linear-gradient(180deg, #E8338A 0%, #CF1B6C 100%);
  --pink-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 24px -10px rgba(245,51,142,0.6);
  --lime: #E4FF3A;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, 'Segoe UI', sans-serif;
  --head: 'Geologica RL', var(--ui);
  /* Telegram's own insets (Bot API 8.0, core.telegram.org/bots/webapps, checked 15.10.2026), set by
     telegram-web-app.js: the device's (status bar, home indicator) plus, inside it, the room Telegram's
     own controls take in fullscreen. Zero in older clients and outside fullscreen. */
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + var(--vk-inset-top, 0px));
  --safe-bottom: max(calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + var(--vk-inset-bottom, 0px)), env(safe-area-inset-bottom, 0px));
  --safe-left: calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px) + var(--vk-inset-left, 0px));
  --safe-right: calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px) + var(--vk-inset-right, 0px));
  /* VK's insets (VKWebAppUpdateConfig / VKWebAppUpdateInsets, js/vk.js, 16.10.2026) join the same sums; unset
     everywhere else, so Telegram's values are what they were */
  /* the floating menu's distance from the bottom, and the room the content leaves under itself for the
     menu and the main button that float over it (the mockup's 104 = 88 + 16) */
  --nav-bottom: max(16px, var(--safe-bottom));
  --cta-pad: calc(88px + var(--nav-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The page itself never moves: every pan belongs to one of the screens' own scrollers. overscroll-behavior
   is read from the root element, not from body (css-overscroll-1 §4: a non-scroll-container ignores it),
   so the body's value never held the page still (the freeze on «Монтаж», 15.10.2026). */
html { overflow: hidden; overscroll-behavior: none; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-family: var(--ui); font-size: 15px; -webkit-font-smoothing: antialiased; overflow: hidden; -webkit-text-size-adjust: 100%; }
button { font-family: var(--ui); color: inherit; -webkit-user-select: none; user-select: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
h1 { margin: 0; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); max-width: 560px; margin: 0 auto; }
.screens { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
.screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.screen[hidden] { display: none; }
/* no scroll anchoring: «Монтаж» changes its header's height by the scroll position, and an anchored
   scroller would answer that by scrolling, which changes the header again */
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; position: relative; }
/* what floats over the content and is no scroller takes no pan: a drag there would move the page or
   Telegram's sheet, not the app (15.10.2026) */
.tabbar, .topbar, .bottom.float button, .overlay .scrim-btn, .screen.status { touch-action: none; }
/* "над закреплёнными кнопками контент плавно затухает, а не обрезается" */
.fade { position: relative; height: 0; flex-shrink: 0; z-index: 2; }
.fade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
.screen.no-bar .scroll-pad { padding-bottom: calc(32px + var(--safe-bottom)); }

/* ---- motion (note «Цвет и отступы», «Движение», 15.10.2026): 150-300 ms, slowing at the end; only
   opacity and shifts move. A block rises 8 px as it appears, a tab's content as the tab opens, a sheet
   comes up from below, a reward («+N», «Ролик готов», «Оплата прошла») pops in. Each plays once:
   setHTML (dom.js) keeps a block that stays, so a poll never replays it. ---- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes out { to { opacity: 0; } }
.rise, .jobbar, .screen > .scroll { animation: rise .24s cubic-bezier(.2,.8,.2,1) backwards; }
.screen > .scroll { animation-duration: .26s; }
.pop, .jobbar.done { animation: pop .45s cubic-bezier(.2,.8,.2,1) backwards; }
/* out of sight (app.js sight): what loops holds still until the app is back */
.idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }

/* ---- type ---- */
.h1 { font-family: var(--head); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.03em; }
.h2 { font-family: var(--head); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; }
.label { font-size: 13px; line-height: 18px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--muted); padding: 0 16px; }
.cap { font-size: 13px; line-height: 18px; color: var(--muted); padding: 0 16px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.col { display: flex; flex-direction: column; }
.g2 { gap: 2px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g24 { gap: 24px; } .g32 { gap: 32px; }
.card { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.link-btn { border: 0; background: none; padding: 8px 0; color: var(--link); font-size: 15px; cursor: pointer; }

/* ---- segmented control ---- */
/* the chosen option is glass, never pink or white (note «Цвет и отступы», «Стекло», 15.10.2026); the glass
   is one element that slides to the chosen button (dom.js seg: --n buttons, --i the chosen one) */
.seg { position: relative; height: 44px; padding: 3px; border-radius: 12px; background: var(--seg); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px - (var(--n) - 1) * 3px) / var(--n)); border-radius: 9px; background: var(--glass); box-shadow: var(--glass-rim); transform: translateX(calc(var(--i) * (100% + 3px))); transition: transform .28s cubic-bezier(.3,.7,.2,1); pointer-events: none; }
.seg button { position: relative; z-index: 1; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; padding: 0; transition: color .2s ease; }
.seg.small button { font-size: 13px; }
.seg button.ic { display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.unavailable { color: var(--dis-fg); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.seg.on-bg { background: var(--bg); }

/* ---- buttons ---- */
.btn { height: 52px; border: 0; border-radius: 14px; font-size: 17px; font-weight: 600; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; white-space: nowrap; position: relative; overflow: hidden; transition: transform .12s ease, background .12s ease; }
.btn.pink { background: var(--pink); color: #FFFFFF; box-shadow: var(--pink-shadow); }
.btn.pink:active:not([aria-disabled="true"]) { background: #C4185F; transform: scale(0.97); }
.btn.calm { background: var(--raise-in); color: var(--text); }
.btn.flat { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn[aria-disabled="true"] { background: var(--dis); color: var(--dis-fg); box-shadow: none; }
.btn .shine { position: absolute; top: 0; bottom: 0; left: -60%; width: 36%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: shine 2.6s linear infinite; pointer-events: none; }
@keyframes shine { from { left: -60%; } to { left: 160%; } }
.spinner { width: 18px; height: 18px; border-radius: 9px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #FFFFFF; display: block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bottom { flex-shrink: 0; padding: 12px 20px 0; background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
/* the main buttons over the menu float over the content (mockup, 15.10.2026); only the buttons take
   touches, a drag on the rest scrolls the content under it */
.bottom.float { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 32px 20px var(--cta-pad); pointer-events: none; }
.bottom.float button { pointer-events: auto; }
/* a capsule with a soft dark shadow, no pink glow */
.btn.capsule { border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 24px -10px rgba(0,0,0,0.5); }
.btn.capsule[aria-disabled="true"] { box-shadow: none; }

/* ---- tab bar: a glass capsule over the content that narrows on scroll (note «Цвет и отступы», «Стекло») ---- */
.tabbar { position: absolute; left: calc(20px + var(--safe-left)); right: calc(20px + var(--safe-right)); bottom: var(--nav-bottom); z-index: 5; padding: 6px 10px; transition: left .2s ease, right .2s ease; display: flex; align-items: center; border-radius: 32px; background: var(--nv-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--line), 0 14px 32px -14px rgba(0,0,0,0.55); }
.tabbar .tab { flex: 1 1 0; height: 52px; transition: height .2s ease; border: 0; background: none; padding: 0; cursor: pointer; color: var(--nv-off); font-size: 10px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.tabbar .tab[aria-selected="true"] { color: var(--text); }
.tabbar .tab.spacer { visibility: hidden; pointer-events: none; }
.tabbar .centre { width: 64px; height: 64px; margin: -22px 6px 0; flex-shrink: 0; border: 4px solid var(--bg); box-sizing: content-box; border-radius: 36px; padding: 0; cursor: pointer; background: var(--nv-solid); color: var(--nv-off); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; }
.tabbar .centre[aria-selected="true"] { background: var(--pink); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 12px 26px -10px rgba(245,51,142,0.75); }
.tabbar.mini { left: calc(72px + var(--safe-left)); right: calc(72px + var(--safe-right)); }
/* the keyboard is up (dom.watchTyping): the window shrank over it and the menu and the floating main button at
   its foot would stand on the field being typed in (the owner's phone, 20.10.2026: the menu first, and with it
   hidden «Смонтировать» still rode up); a mouse-and-keyboard window keeps them */
.typing:not(.desk):not(.wide) .tabbar, .typing:not(.desk):not(.wide) .bottom.float { display: none; }
.tabbar.mini .tab { height: 40px; font-size: 0; gap: 0; }

/* ---- montage bar under the header, and the «ready» pill ---- */
.jobbar { margin: 8px 20px 0; height: 44px; flex-shrink: 0; border: 0; border-radius: 22px; padding: 0 16px 0 8px; background: var(--nv-glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -14px rgba(0,0,0,0.45); color: var(--text); display: flex; align-items: center; gap: 10px; cursor: pointer; width: calc(100% - 40px); }
.jobbar .ring { width: 30px; height: 30px; flex-shrink: 0; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.jobbar .ring > span { width: 24px; height: 24px; border-radius: 12px; background: var(--nv-solid); display: flex; align-items: center; justify-content: center; }
.jobbar .t { flex-grow: 1; text-align: left; font-size: 15px; line-height: 20px; font-weight: 600; }
.jobbar .p { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jobbar.done { background: var(--lime); color: #0E0E11; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 15px; font-weight: 600; }

/* ---- sheets (example, montage) ---- */
.overlay { position: absolute; inset: 0; z-index: 40; background: var(--scrim); display: flex; flex-direction: column; justify-content: flex-end; animation: fade .2s ease-out backwards; }
.overlay .scrim-btn { flex-grow: 1; border: 0; background: none; padding: 0; cursor: pointer; }
/* a sheet follows the finger down and closes past a third of its height (chrome.js swipeToClose); its
   own scroll keeps the pull inside it; it never goes up under Telegram's controls in fullscreen */
.sheet { background: var(--raise); border-radius: 28px 28px 0 0; padding: 12px 20px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 20px; max-height: calc(100% - var(--safe-top) - 24px); overflow-y: auto; overscroll-behavior: contain; flex-shrink: 0; animation: up .34s cubic-bezier(.32,.72,0,1) backwards; }
.sheet.settle { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.sheet.leave { transition: transform .2s ease-in; }
.overlay.settle { transition: background-color .26s ease; }
.overlay.leave { transition: background-color .2s ease-in; }
.sheet.job { box-shadow: inset 0 1px 0 var(--line); gap: 24px; }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; flex-shrink: 0; }
.sheet.job .grabber { background: var(--off); }
.sheet .title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.sheet video { width: 170px; height: 302px; border-radius: 16px; object-fit: cover; align-self: center; background: #222; flex-shrink: 0; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pair > div { border-radius: 16px; background: var(--raise-in); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pair .k { font-size: 12px; color: var(--muted); }
.pair .v { font-size: 14px; line-height: 1.4; }
.sheet .text { font-size: 15px; line-height: 1.45; color: var(--muted); }

.job-head { display: flex; align-items: center; gap: 14px; }
.job-ring { width: 64px; height: 64px; flex-shrink: 0; border-radius: 32px; display: flex; align-items: center; justify-content: center; }
.job-ring > span { width: 58px; height: 58px; border-radius: 29px; background: var(--raise); display: flex; align-items: center; justify-content: center; }
.job-title { font-family: var(--head); font-size: 22px; line-height: 27px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
/* under 390 px the title and the percent do not fit on one line: the title wraps */
@media (max-width: 385px) { .job-title { white-space: normal; } }
.job-pct { flex-shrink: 0; }
.job-hint { font-size: 15px; line-height: 20px; color: var(--muted); }
.job-pct { font-family: var(--head); font-size: 44px; line-height: 44px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.job-pct span { font-size: 22px; color: var(--muted); }
.steps { border-radius: 16px; background: var(--raise-in); display: flex; flex-direction: column; }
.steps .st { min-height: 48px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.steps .st:first-child { border-top-color: transparent; }
.steps .mk { width: 22px; height: 22px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #0E0E11; font-size: 12px; font-weight: 800; border: 2px solid var(--off); }
.steps .st.done .mk { background: var(--lime); border: 0; }
.steps .st.on .mk { border: 2.5px solid #F5338E; }
.steps .lb { font-size: 16px; line-height: 21px; color: var(--muted); }
.steps .st.done .lb, .steps .st.on .lb { color: var(--text); }
.job-info { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 19px; color: var(--muted); }
.job-info svg { flex-shrink: 0; margin-top: 1px; }
.fail { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 8px 4px; }
.fail .ico { width: 88px; height: 88px; margin-bottom: 10px; border-radius: 26px; background: var(--raise-in); display: flex; align-items: center; justify-content: center; }
.fail .t { font-family: var(--head); font-size: 22px; line-height: 27px; font-weight: 600; letter-spacing: -0.02em; }
.fail .x { font-size: 15px; line-height: 21px; color: var(--muted); }

/* «Фарфор» while the montage runs: the jaw cuts and glues (the mockup's sin(t / 260), 15.10.2026: CSS in
   place of a frame loop, so it stops with its sheet and with the app out of sight) */
@keyframes jaw { from { transform: translate(-7.8px, 4.5px); } to { transform: translate(-10.2px, 5.9px); } }
[data-jaw] { animation: jaw .82s ease-in-out infinite alternate; }

/* ---- toast: real confirmations only ---- */
/* a message, not a control: a tap on it reaches what is under it */
.toast { position: absolute; left: 20px; right: 20px; z-index: 60; pointer-events: none; padding: 12px 14px; border-radius: 13px; background: var(--toast); color: var(--toast-fg); font-size: 15px; line-height: 20px; animation: toast-in .22s cubic-bezier(.2,.8,.2,1) backwards; }

/* ---- «Монтаж» ---- */
/* The logo and the card stay on top of the settings inside the same scroller, so a drag anywhere on the
   tab scrolls it; the screen had a header outside its scroller where a touch belonged to nothing of the
   app (the freeze on the compact summary, 15.10.2026). */
.m-head { position: sticky; top: 0; z-index: 3; background: var(--bg); }
/* a desktop window: the card stays large and scrolls away with the options (main.js, 15.10.2026) */
.desk .m-head { position: relative; }
/* scrolled: the logo fades out, the card moves left and makes room (mockup, 15.10.2026) */
.logo-row { height: 48px; flex-shrink: 0; padding: 0 20px; display: flex; align-items: center; overflow: hidden; transition: height .25s ease, opacity .2s ease; }
.m-head.compact .logo-row { height: 0; opacity: 0; }
.pv-block { position: relative; background: var(--bg); padding: 8px 20px 16px; display: flex; align-items: center; justify-content: center; gap: 16px; border-bottom: 1px solid transparent; }
.pv-block.compact { justify-content: flex-start; border-bottom-color: var(--line); }
.pv-card { width: 184px; height: 326px; flex-shrink: 0; position: relative; border-radius: 16px; overflow: hidden; transition: width .25s ease, height .25s ease; background: #222; }
.pv-block.compact .pv-card { width: 121px; height: 215px; }
.pv-stage { width: 216px; height: 384px; position: absolute; left: 0; top: 0; transform: scale(0.85); transform-origin: 0 0; transition: transform .25s ease; }
.pv-block.compact .pv-stage { transform: scale(0.56); }
.pv-stage > * { position: absolute; }
.pv-frame { left: 0; top: 0; width: 216px; height: 384px; }
.pv-frame img { width: 100%; height: 100%; display: block; }
.pv-cut { left: 0; top: 0; width: 216px; height: 384px; display: block; }
.pv-layer { left: 0; top: 0; width: 216px; height: 384px; pointer-events: none; }
.pv-layer > * { position: absolute; }
.pv-br { background: #000; opacity: 0; }
.pv-br video { left: 0; top: 0; width: 216px; height: 384px; display: block; object-fit: cover; }
.pv-controls { left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pv-play { height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 22px; background: rgba(14,14,17,.62); color: #FFFFFF; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pv-bar { flex-grow: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.pv-bar > div { height: 3px; background: #FFFFFF; width: 0; }
.pv-sum { display: none; flex-direction: column; gap: 6px; min-width: 0; }
.pv-block.compact .pv-sum { display: flex; }
.pv-sum .b { font-size: 17px; font-weight: 600; line-height: 1.3; }
.pv-sum .c { font-size: 14px; color: var(--muted); line-height: 1.4; }

.settings { padding: 24px 20px calc(156px + var(--cta-pad)); display: flex; flex-direction: column; gap: 32px; }
.fonts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; isolation: isolate; border-radius: 16px; border: 2px solid transparent; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: border-color .2s ease; }
/* a chosen tile (colour, font, the rating of a reel): the glass over the page's colour fades in, a light rim */
.tile::before, .fb button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--glass), var(--bg); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.tile[aria-pressed="true"], .tile[aria-checked="true"], .fb button[aria-pressed="true"] { border-color: var(--sel-border); }
.tile[aria-pressed="true"]::before, .tile[aria-checked="true"]::before, .fb button[aria-pressed="true"]::before { opacity: 1; }
.fonts .tile { height: 70px; }
.fonts .aa { font-size: 22px; line-height: 1; }
.fonts .nm { font-size: 13px; }
.colors { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 4px; scrollbar-width: none; }
.colors::-webkit-scrollbar { display: none; }
.desk .colors { cursor: grab; }
.colors.dragging, .colors.dragging .tile { cursor: grabbing; }
.colors .tile { width: 68px; flex-shrink: 0; padding: 8px 0; gap: 6px; font-size: 13px; justify-content: flex-start; }
/* the bridges' styles (MainBridges.dc.html): a frame of each in the picked colour over its name, the row
   scrolls sideways as the colours' does */
.br-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.br-row::-webkit-scrollbar { display: none; }
.desk .br-row { cursor: grab; }
.br-row.dragging, .br-row.dragging .tile { cursor: grabbing; }
.br-row .tile { width: 92px; flex-shrink: 0; padding: 5px 5px 8px; gap: 6px; align-items: stretch; justify-content: flex-start; text-align: left; }
.br .pic { position: relative; height: 136px; border-radius: 11px; overflow: hidden; background: #222; display: block; }
.br .pic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.br.off .pic img { opacity: .45; }
.br.off .pic svg { position: absolute; inset: 0; margin: auto; color: #FFFFFF; }
.br .nm { padding: 0 3px; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.swatch { width: 30px; height: 30px; border-radius: 15px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: block; }
.edits { display: flex; flex-direction: column; }
.edit { min-height: 52px; padding: 4px 14px 4px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.edit:first-child { border-top-color: transparent; }
.edit .nm { display: flex; align-items: center; gap: 2px; min-width: 0; }
.edit .l { font-size: 16px; line-height: 21px; white-space: nowrap; }
/* the «i» in the logo's style right after the name opens the example (was «▸ Пример», 15.10.2026) */
.edit .ex { width: 40px; height: 44px; margin: -10px 0; flex-shrink: 0; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.i-inline { display: inline-block; vertical-align: -4px; }
/* thin, no pink: on = a light track with a dark knob, the reverse in the light theme */
.switch { width: 44px; height: 44px; flex-shrink: 0; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; }
.switch > span { width: 40px; height: 24px; border-radius: 12px; padding: 2px; background: var(--off); display: flex; justify-content: flex-start; transition: background-color .2s ease; }
.switch > span > span { width: 20px; height: 20px; border-radius: 10px; background: #FFFFFF; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .22s cubic-bezier(.3,.7,.2,1), background-color .2s ease; }
.switch[aria-checked="true"] > span { background: var(--text); }
.switch[aria-checked="true"] > span > span { background: var(--bg); transform: translateX(16px); }
.hint-bad { font-size: 13px; line-height: 18px; color: var(--muted); padding: 0 16px; }
.status-row { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.status-ok { display: flex; align-items: center; gap: 8px; }
.check-dot { width: 20px; height: 20px; border-radius: 10px; background: var(--lime); color: #0E0E11; display: flex; align-items: center; justify-content: center; }
.up-bar { height: 4px; border-radius: 2px; background: var(--off); overflow: hidden; }
.up-bar > div { height: 4px; border-radius: 2px; background: #F5338E; width: 0; transition: width .2s linear; }
.up-err { display: flex; align-items: flex-start; gap: 10px; }
.up-err .t { font-size: 15px; font-weight: 600; }
.up-err .x { font-size: 13px; line-height: 18px; color: var(--muted); }
/* «Загрузить видео»: the label strictly centred, the icon hangs to its left, «Первый ролик бесплатно»
   smaller under it, one height with or without it (mockup, 15.10.2026) */
.main-btn { font-weight: 700; letter-spacing: -0.01em; height: 52px; }
.main-btn .lbl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.main-btn .row { position: relative; display: flex; align-items: center; justify-content: center; }
.main-btn .ico { position: absolute; right: 100%; margin-right: 8px; display: flex; }
.main-btn .promo-line { font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 0; opacity: 0.8; }
/* over the content: a light veil behind the lone button, an opaque band behind the status row */
.cta { background: linear-gradient(to bottom, rgba(var(--bg-rgb),0) 0%, rgba(var(--bg-rgb),0.6) 45%, rgba(var(--bg-rgb),0) 100%); }
.cta.solid { background: linear-gradient(to bottom, rgba(var(--bg-rgb),0) 0px, rgba(var(--bg-rgb),0.97) 32px, rgba(var(--bg-rgb),0.97) calc(100% - 54px - var(--cta-pad)), rgba(var(--bg-rgb),0.5) calc(100% - var(--cta-pad)), rgba(var(--bg-rgb),0) 100%); }
.bottom.float.paybar { padding-top: 12px; flex-direction: row; background: linear-gradient(to bottom, rgba(var(--bg-rgb),0) 0px, rgba(var(--bg-rgb),0.6) 30px, rgba(var(--bg-rgb),0) 100%); }

/* ---- «Бонусы» ---- */
.pad { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 32px; }
/* the room under the content for what floats over it: the menu (120), the menu and «Оплатить» (200) */
.pad.under-nav { padding-bottom: calc(16px + var(--cta-pad)); }
.pad.under-pay { padding-bottom: calc(96px + var(--cta-pad)); }
.ref-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ref-h1 { font-family: var(--head); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.03em; }
.ref-sub { font-size: 17px; line-height: 22px; color: var(--muted); }
.linkrow { height: 60px; padding: 0 8px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.linkrow .u { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 13px; padding: 0; background: var(--icon-bg); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.icon-btn.copied { background: var(--lime); color: #0E0E11; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 16px; overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.stat { background: var(--surface); padding: 18px 8px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.stat .v { white-space: nowrap; font-family: var(--head); font-size: 28px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 8px; }
.stat .v.lime { background: var(--lime); color: #0E0E11; padding: 2px 6px; }
.stat .k { font-size: 13px; line-height: 17px; color: var(--muted); }
.info-btn { width: 44px; height: 44px; margin: -10px 0; border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.info-btn[aria-expanded="true"] { color: var(--text); }
.note { padding: 12px 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 20px; }
.ladder .row { padding: 16px 0; display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid var(--line); }
.ladder .row:first-child { border-top-color: transparent; }
.ladder .dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; background: var(--track); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.ladder .row.done .dot { background: var(--lime); color: #0E0E11; }
.ladder .row.next .dot { background: var(--text); color: var(--bg); }
.ladder .body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 3px; }
.ladder .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ladder .lb { min-width: 0; font-size: 17px; line-height: 22px; color: var(--muted); }
.ladder .row.done .lb, .ladder .row.next .lb { color: var(--text); }
.ladder .rw { flex-shrink: 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--muted); border-radius: 8px; }
.ladder .row.next .rw { color: var(--text); }
.ladder .row.done .rw { background: var(--lime); color: #0E0E11; padding: 1px 8px; }
.ladder .prog { display: flex; align-items: center; gap: 10px; }
.ladder .bar { flex-grow: 1; height: 6px; border-radius: 3px; background: var(--bar-track); overflow: hidden; }
.ladder .bar > div { height: 6px; border-radius: 3px; background: var(--lime); }
.ladder .cnt { flex-shrink: 0; min-width: 40px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.acc { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.acc > button { height: 56px; padding: 0; border: 0; background: none; color: var(--text); font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.acc > button + div + button, .acc > button.second { border-top: 1px solid var(--line); }
.acc > button svg { transition: transform .2s; }
.acc > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.acc .rows { display: flex; flex-direction: column; padding-bottom: 12px; }
.acc .rows > div { height: 44px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.acc .terms { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; font-size: 15px; line-height: 20px; color: var(--muted); }

/* ---- «Баланс» ---- */
/* the balance card (Payment.dc.html, 15.10.2026): the number, the authors' reels at the right, the strip
   of where the reels came from; a balance that grew counts up with a lime «+N» (balance.js) */
.bal-card { position: relative; overflow: hidden; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.bal-pics { position: absolute; right: 22px; top: 18px; width: 92px; height: 96px; }
.bal-pics > span { position: absolute; width: 46px; height: 80px; border-radius: 10px; overflow: hidden; background: #222; box-shadow: 0 6px 14px -8px rgba(0,0,0,0.5); }
.bal-pics > span:nth-child(1) { left: 4px; top: 10px; transform: rotate(-12deg); }
.bal-pics > span:nth-child(2) { left: 24px; top: 4px; transform: rotate(-3deg); }
.bal-pics > span:nth-child(3) { left: 44px; top: 8px; transform: rotate(8deg); box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5); }
.bal-pics img { width: 46px; height: 80px; object-fit: cover; display: block; }
.bal-top { position: relative; display: flex; flex-direction: column; gap: 2px; padding-right: 104px; }
.bal-n { display: flex; align-items: flex-start; gap: 8px; }
.bal-n .n { font-family: var(--head); font-size: 64px; line-height: 64px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.bal-n .plus { margin-top: 6px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--lime); color: #0E0E11; font-size: 14px; line-height: 24px; font-weight: 700; animation: pop .45s cubic-bezier(.2,.8,.2,1) backwards, out .4s ease 1.8s forwards; }
.bal-top .l { font-size: 17px; line-height: 22px; color: var(--muted); }
.bal-top .unl { min-height: 88px; display: flex; align-items: center; font-family: var(--head); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.bal-parts { position: relative; display: flex; flex-direction: column; gap: 10px; }
.bal-parts .strip { height: 6px; border-radius: 3px; overflow: hidden; display: flex; gap: 2px; background: var(--track); }
.bal-parts .strip > span { height: 6px; }
.bal-parts .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bal-parts .legend > span { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--muted); }
.bal-parts .legend i { width: 8px; height: 8px; border-radius: 4px; display: block; }
.packs { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 8px; }
/* the chosen pack is glass like every chosen option (no longer the inverted card), its dot grows in */
.pack { position: relative; isolation: isolate; min-height: 68px; padding: 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; width: 100%; }
.pack::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--glass); box-shadow: var(--glass-rim); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.pack[aria-checked="true"]::before { opacity: 1; }
.pack .rd { width: 22px; height: 22px; border-radius: 11px; flex-shrink: 0; border: 2px solid var(--ctl); display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.pack .rd > span { width: 12px; height: 12px; border-radius: 6px; display: block; background: var(--text); opacity: 0; transform: scale(0.4); transition: transform .2s cubic-bezier(.3,.7,.2,1), opacity .2s ease; }
.pack[aria-checked="true"] .rd { border-color: var(--text); }
.pack[aria-checked="true"] .rd > span { opacity: 1; transform: none; }
.pack .mid { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* the name and the price per reel on one line each (the mockup, 15.10.2026) */
.pack .n { font-size: 17px; line-height: 22px; white-space: nowrap; }
.pack .per { font-size: 15px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.pack .price { flex-shrink: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pack .old { font-size: 15px; line-height: 20px; font-weight: 400; color: var(--muted); text-decoration: line-through; }
.pack .popular { position: absolute; right: 12px; top: -9px; z-index: 1; height: 18px; padding: 0 8px; border-radius: 9px; background: var(--lime); color: #0E0E11; font-size: 11px; line-height: 18px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.single { min-height: 44px; padding: 11px 16px; border-radius: 16px; font-size: 17px; line-height: 22px; }
/* stars (Payment.dc.html, 24.10.2026): the star before the amount, the method «Telegram Stars» */
.pack .per.xtr { display: flex; align-items: center; gap: 4px; }
.pack .price.xtr { align-items: center; gap: 5px; }
.single.star { display: flex; align-items: center; gap: 10px; }
.btn .amt { display: flex; align-items: center; gap: 5px; }
.consent { display: flex; align-items: center; gap: 4px; padding: 0 12px 0 6px; border-radius: 14px; transition: box-shadow .25s ease; }
/* a tap on the grey «Оплатить» / «Отправить заявку» points at the row and rings it for 1.6 s (app.js `point`,
   Payment.dc.html and Partner.dc.html, 23.10.2026: the red line under it could lie off the screen) */
.consent.ring { box-shadow: inset 0 0 0 2px var(--link); }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
.checkbox { width: 44px; height: 44px; flex-shrink: 0; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.checkbox > span { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--ctl); display: flex; align-items: center; justify-content: center; }
.checkbox > span svg { opacity: 0; }
.checkbox[aria-checked="true"] > span { background: var(--btn); border-color: var(--btn); }
.checkbox[aria-checked="true"] > span svg { opacity: 1; }
.checkbox.err > span { border-color: var(--bad); }
.consent .txt { font-size: 15px; line-height: 20px; }
.consent a { color: var(--link); text-decoration: none; }
.err-line { font-size: 13px; line-height: 18px; color: var(--bad); padding: 0 16px; }
.wait-head { display: flex; align-items: center; gap: 14px; }
/* «Жду оплату» blinks every 3.2 s, closing and opening (Payment.dc.html, 15.10.2026) */
[data-blink] { transform-box: fill-box; transform-origin: center; animation: blink 3.2s linear infinite; }
@keyframes blink { 0%, 94%, 100% { transform: none; } 97% { transform: scaleY(0.12); } }
.wait-steps .w { padding: 16px; display: flex; gap: 14px; border-top: 1px solid var(--line); }
.wait-steps .w:first-child { border-top-color: transparent; }
.wait-steps .n { width: 24px; height: 24px; flex-shrink: 0; border-radius: 12px; background: var(--track); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.wait-steps .t { font-size: 17px; line-height: 22px; }
.wait-steps .x { font-size: 15px; line-height: 20px; color: var(--muted); }
.done-box { display: flex; flex-direction: column; gap: 12px; padding-top: 48px; align-items: center; text-align: center; }
.badge-ok { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 36px; background: var(--ok-bg); color: var(--ok-fg); display: flex; align-items: center; justify-content: center; }
.badge-bad { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; }
.done-box .sub { font-size: 17px; line-height: 22px; color: var(--muted); }
.done-box .card { margin-top: 20px; padding: 16px; font-size: 15px; line-height: 20px; text-align: left; align-self: stretch; }

/* ---- «Ролик готов» ---- */
.res-head { display: flex; align-items: center; gap: 14px; }
.res-grid { padding: 12px 20px 32px; }
.res-video { align-self: center; width: 180px; height: 320px; flex-shrink: 0; border-radius: 20px; overflow: hidden; position: relative; background: #111111; box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6); cursor: pointer; }
.res-video video { width: 180px; height: 320px; object-fit: cover; display: block; }
.res-video .chip { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 10px; background: rgba(14,14,17,0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #FFFFFF; font-size: 12px; line-height: 16px; font-weight: 500; }
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.act { height: 76px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; }
.offer { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.offer .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.offer .t { min-width: 0; font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; }
.offer .timer { flex-shrink: 0; white-space: nowrap; padding: 2px 8px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.offer .x { font-size: 15px; line-height: 20px; color: var(--muted); }
.left-card { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.left-card .k { font-size: 13px; line-height: 18px; color: var(--muted); }
.left-card .v { font-family: var(--head); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; }
/* «Наш канал» (ResultChannel.dc.html): avatar 48, the text, the pill; the card's 16 px inside like .left-card */
.chan { width: 100%; min-height: 80px; padding: 16px; border: 0; color: var(--text); font: inherit; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.chan .ava { width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; }
.chan .tx { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chan .t { font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan .x { font-size: 15px; line-height: 20px; color: var(--muted); }
.chan .go { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 40px; font-weight: 600; }
.pill { height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.fb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fb button { position: relative; isolation: isolate; height: 44px; border: 2px solid transparent; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; transition: border-color .2s ease; }

/* ---- when the app cannot work ---- */
.fatal { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 32px 28px; }
.fatal .t { font-family: var(--head); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; }
.fatal .x { font-size: 15px; line-height: 21px; color: var(--muted); }
.fatal .btn { margin-top: 12px; max-width: 320px; }
.boot { flex: 1; display: flex; align-items: center; justify-content: center; }
.boot .spin { width: 28px; height: 28px; border-radius: 14px; border: 3px solid var(--off); border-top-color: #F5338E; animation: spin .8s linear infinite; }

/* «Уменьшить движение»: no entrance, no slide, no fade, no loop that only decorates; the spinners that say
   «wait» keep turning */
@media (prefers-reduced-motion: reduce) {
  .rise, .jobbar, .screen > .scroll, .pop, .overlay, .sheet, .toast, .bal-n .plus, .btn .shine, [data-blink], [data-jaw] { animation: none !important; }
  .seg .thumb, .seg button, .tile, .tile::before, .fb button, .fb button::before, .pack::before, .pack .rd, .pack .rd > span,
  .switch > span, .switch > span > span, .tabbar, .tabbar .tab, .logo-row, .pv-card, .pv-stage, .acc > button svg { transition: none !important; }
}

/* the no-room card (bot.py TXT_NO_ROOM_BEHIND, 15.10.2026): the bot's picture, as tall as the phone allows */
.sheet.noroom .example { display: block; align-self: center; width: auto; max-width: 100%; height: min(46vh, 380px); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #222; flex-shrink: 0; }
/* «Моя история» while its copy is made: the icon gives way to a spinner, the tile stays tappable-safe */
.act[aria-busy="true"] { pointer-events: none; opacity: 0.6; }
.act[aria-busy="true"] svg { animation: rl-spin .8s linear infinite; }
@keyframes rl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .act[aria-busy="true"] svg { animation: none; } }

/* ---- VK Mini App (html[data-platform="vk"], js/vk.js; 16.10.2026) ---- */
/* VK has no MainButton or SecondaryButton: the same buttons are this bar, in #app under the screens, so the
   screens end above it and nothing hides behind it. It looks like Telegram's: the page's own colour behind it
   (setBottomBarColor), no shadow, two buttons side by side with the second on the left, the main one solid
   #DB277B (tg.js PINK_SOLID) with white text. */
.vkbar { flex: 0 0 auto; display: flex; gap: 12px; padding: 12px 16px max(12px, var(--safe-bottom)); background: var(--bg); position: relative; z-index: 6; }
.vkbar .btn { flex: 1 1 0; min-width: 0; height: 50px; border-radius: 12px; font-size: 15px; line-height: 18px; white-space: normal; font-weight: 600; padding: 0 8px; box-shadow: none; }
.vkbar .btn.main { background: #DB277B; color: #FFFFFF; }
.vkbar .btn.main:active { background: #C4185F; }
.vkbar .btn.second { background: var(--surface); color: var(--text); }
.vkbar .btn[aria-busy="true"] { pointer-events: none; }
/* no share and no story on the result screen in VK (the buttons would have nowhere to go) */
html[data-platform="vk"] .acts { display: none; }
/* «Баланс» in VK starts with a heading in the style of «Тарифы» in place of the tab's big title, on a phone
   as on a desktop, where it stands level with «Тарифы» (the owner, 18.10.2026); Telegram keeps its title */
.bal-h2 { display: none; }
html[data-platform="vk"] .bal-title { display: none; }
html[data-platform="vk"] .bal-h2 { display: flex; }

/* VK's first launch (screens/welcome.js, Welcome.dc.html, 18.10.2026): the logo, the text, the consent and
   «Начать» at the bottom; --sw-off is the mockups' off track of the switch «Уведомления в VK» and the handle of
   the delete sheet (VK only, Telegram has neither) */
.w-head { height: 46px; flex-shrink: 0; padding: 6px 12px 0 20px; display: flex; align-items: center; }
.w-list { padding: 28px 20px 32px; display: flex; flex-direction: column; gap: 32px; }
.w-hero .h1 { text-wrap: balance; }
.w-sub { font-size: 17px; line-height: 22px; color: var(--muted); }
.w-feats { display: flex; flex-direction: column; }
.w-feat { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 21px; }
.w-feat + .w-feat { border-top: 1px solid var(--line); }
.w-feat .x { font-size: 15px; line-height: 20px; color: var(--muted); }
.welcome .nowrap { white-space: nowrap; }
.w-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.w-ico.gift { background: var(--lime); color: #0E0E11; }
.w-bottom { padding: 4px 20px max(22px, var(--safe-bottom)); gap: 8px; }
.w-bottom .consent { padding: 0; margin-left: -10px; }
.w-bottom .err-line { padding: 0 0 4px 34px; }
.w-bottom .btn.pink:not([aria-disabled="true"]) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 24px -10px rgba(245,51,142,0.7); }
.w-bottom .btn[aria-busy="true"] { pointer-events: none; }

/* «Аккаунт» at the bottom of «Баланс» in VK (balance.js account, Payment.dc.html) */
.acc-sec { margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.acc-sec h2 { margin: 0; }
.acc-row { width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 16px; background: none; color: var(--text); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.acc-row .tx { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-row .t { font-size: 17px; line-height: 22px; }
.acc-row .x { font-size: 15px; line-height: 20px; color: var(--muted); }
.acc-row.acc-del { min-height: 56px; gap: 12px; color: var(--bad); font-size: 17px; line-height: 22px; }
.big-sw { width: 51px; height: 31px; flex-shrink: 0; border-radius: 16px; position: relative; background: var(--sw-off); transition: background-color .2s ease; }
.big-sw > span { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: left .2s cubic-bezier(.3,.7,.2,1), background-color .2s ease; }
.acc-row[aria-checked="true"] .big-sw { background: var(--text); }
.acc-row[aria-checked="true"] .big-sw > span { left: 22px; background: var(--bg); }
/* the delete sheet (chrome.js deleteSheet) */
.sheet.del { box-shadow: inset 0 1px 0 var(--line); }
.sheet.del .grabber { background: var(--sw-off); }
.del-rows { border-radius: 16px; background: var(--raise-in); display: flex; flex-direction: column; }
.del-rows .r { min-height: 52px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 21px; }
.del-rows .r + .r { border-top: 1px solid var(--line); }
.del-rows .r.bad { color: var(--bad); }
.del-rows svg { flex-shrink: 0; }
.del-rows b { font-weight: 600; }
.del-note { font-size: 14px; line-height: 19px; color: var(--muted); }
.del-btns { display: flex; flex-direction: column; gap: 10px; }
.btn.danger { background: #C8331F; color: #FFFFFF; }
.btn.danger[aria-busy="true"] { pointer-events: none; }
/* «Аккаунт удалён»: over the whole window, the button at the bottom (app.js render, Payment.dc.html) */
.gone-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gone-mid { flex-grow: 1; min-height: 0; padding: 0 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.badge-gone { width: 72px; height: 72px; margin-bottom: 8px; border-radius: 36px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); display: flex; align-items: center; justify-content: center; }
.gone-mid .sub { font-size: 17px; line-height: 22px; color: var(--muted); }
.gone-btn { flex-shrink: 0; padding: 12px 20px max(22px, var(--safe-bottom)); }
@media (prefers-reduced-motion: reduce) { .big-sw, .big-sw > span { transition: none !important; } }

/* ---- a wide VK window (vk.com in a browser, 18.10.2026; app.js fitLayout marks html.wide in VK from 768 px) ----
   The mockups «Десктоп: vk.com в браузере» (claude.ai artifact SenKdgGeTfmfPbpb7BF8jC, the screens with
   layout="desktop"): a 72 px header and the content on a row of 928 px centred in the window, at least
   24 px from its edges (--row-pad); the menu and the montage bar in the header, two columns per screen,
   the sheets as centred windows. Every rule is under .wide: the phone does not change. */
.desk-logo { display: none; }
.tabbar .centre .lb { display: none; }
.wide { --cta-pad: 24px; }
.wide #app { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr) auto; padding: var(--safe-top) var(--safe-right) 0 var(--safe-left); }
/* the header's three share one cell (an item placed by row alone would open a column of its own); the
   side room of the 928 px row is a percentage taken where it is used, of the window's width */
.wide #app { --row-pad: max(24px, calc((100% - 928px) / 2)); }
.wide .desk-logo { display: flex; grid-area: 1 / 1; justify-self: start; align-self: center; margin-left: var(--row-pad); }
.wide .screens { grid-area: 2 / 1; }
.wide .overlays { display: contents; }

/* header: the menu in the middle, its items in a row with their names; the open tab on glass, «Монтаж»
   a pink capsule when open and plain words when not */
.wide .tabbar, .wide .tabbar.mini { grid-area: 1 / 1; justify-self: center; align-self: center; position: relative; left: auto; right: auto; bottom: auto; padding: 4px; }
.wide .tabbar .tab, .wide .tabbar.mini .tab { flex: 0 0 auto; height: 40px; padding: 0 16px; flex-direction: row; gap: 8px; font-size: 14px; border-radius: 20px; }
.wide .tabbar .tab[aria-selected="true"] { background: var(--glass); box-shadow: var(--glass-rim); }
.wide .tabbar .tab.spacer { display: none; }
.wide .tabbar .centre { width: auto; height: 40px; margin: 0 4px; border: 0; border-radius: 20px; padding: 0 18px 0 14px; gap: 8px; font-size: 14px; font-weight: 600; }
.wide .tabbar .centre:not([aria-selected="true"]) { background: none; box-shadow: none; }
.wide .tabbar .centre svg { width: 20px; height: 20px; }
.wide .tabbar .centre .lb { display: inline; }
.wide .topbar { grid-area: 1 / 1; justify-self: end; align-self: center; z-index: 6; margin-right: var(--row-pad); }
.wide .jobbar { margin: 0; width: auto; }
/* the bar with its words (240 px) beside the centred menu (366) needs a window from 920 px; a narrower one
   keeps the ring and the percent, the words stay in its label (measured 18.10.2026) */
@media (max-width: 919px) { .wide .jobbar .t { display: none; } }
/* «Ролик готов» has «Назад» where the logo is */
.back-pill { height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; cursor: pointer; }

/* «Монтаж»: on the left (320 px) the preview and the main button, never scrolled; on the right (up to
   560 px) the settings with their own scroll */
.wide .m-screen { display: grid; grid-template-columns: 320px minmax(0, 560px); grid-template-rows: auto minmax(0, 1fr); column-gap: 48px; justify-content: center; padding: 0 24px; }
.wide .m-screen > .scroll { display: contents; }
.wide .m-head { grid-column: 1; grid-row: 1; position: relative; }
.wide .m-head .logo-row { display: none; }
.wide .pv-block { padding: 8px 0 16px; }
.wide .pv-block .pv-card { width: var(--pv-w); height: var(--pv-h); }
.wide .pv-block .pv-stage { transform: scale(var(--pv-scale)); }
/* «Пример» and the progress bar keep their phone size (0.85) on the larger card and span its width */
.wide .pv-controls { right: auto; width: calc(196px * var(--pv-scale) / 0.85); transform: scale(calc(0.85 / var(--pv-scale))); transform-origin: 0 100%; }
/* 4 px at the sides keep the focus ring inside the scroller */
.wide .settings { grid-column: 2; grid-row: 1 / 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin; padding: 8px 4px 48px; animation: rise .26s cubic-bezier(.2,.8,.2,1) backwards; }
.wide .colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; margin: 0; padding: 2px 0 4px; cursor: auto; }
.wide .colors .tile { width: auto; }
.wide .br-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; margin: 0; padding: 2px 0 6px; cursor: auto; }
.wide .br-row .tile { width: auto; }
.wide .m-screen > .bottom { grid-column: 1; grid-row: 2; align-self: start; position: relative; padding: 0 0 24px; background: none; pointer-events: auto; }
.wide .main-btn:hover:not([aria-disabled="true"]) { filter: brightness(1.06); }

/* the other screens scroll across the whole window; their content is the 928 px row */
.wide .screen .pad { padding: 24px var(--row-pad) 48px; }
.wide .screen .fade { display: none; }
/* «Бонусы» and «Баланс»: two columns of up to 440 px (the second screen's wrappers are contents on a phone) */
.two-col > .col-a, .two-col > .col-b { display: contents; }
.wide .two-col { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 440px); column-gap: 48px; row-gap: 32px; justify-content: center; align-items: start; }
.wide .two-col > .col-a, .wide .two-col > .col-b { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.wide .two-col > .col-a { grid-column: 1; }
.wide .two-col > .col-b { grid-column: 2; }
/* «Бонусы»: the character right after the title, not at the far edge of the 440 px column (the owner, 18.10.2026) */
.wide .ref-hero { justify-content: flex-start; gap: 16px; }
/* «Оплатить» under the tariffs: in the flow under the scroller, at the right column */
.wide .bottom.float.paybar { position: relative; flex-shrink: 0; margin-left: calc(50% + 24px); width: min(440px, calc((100% - 96px) / 2)); padding: 12px 0 24px; background: transparent; }
/* waiting, paid, failed: one column of 560 px, the buttons under it */
.wide .one-col { width: 100%; max-width: 560px; margin: 0 auto; }
.wide .vkbar { grid-area: 3 / 1; justify-self: center; width: calc(100% - 48px); max-width: 560px; padding: 12px 0 24px; }

/* «Ролик готов»: the reel (288×512) on the left, the rest on the right (up to 440 px); VK's buttons in a
   row under the rating (app.js puts its bar in the screen's slot) */
.wide .screen .res-grid { display: grid; grid-template-columns: 288px minmax(0, 440px); grid-template-rows: repeat(4, auto) minmax(0, 1fr); column-gap: 48px; row-gap: 24px; justify-content: center; align-content: start; padding: 24px 24px 48px; }
.wide .res-grid > * { grid-column: 2; }
.wide .res-grid > .res-video { grid-column: 1; grid-row: 1 / span 5; align-self: start; width: 288px; height: 512px; }
.wide .res-video video { width: 288px; height: 512px; }
.res-slot { display: none; }
.wide .res-slot:not(:empty) { display: block; }
.wide .res-slot .vkbar { justify-self: stretch; width: auto; max-width: none; padding: 0; background: none; }
.wide .res-slot .vkbar .btn { height: 52px; border-radius: 14px; font-size: 16px; line-height: 19px; }
.wide .res-slot .vkbar .btn.main { flex-grow: 1.15; }

/* the first launch (Welcome.dc.html, layout desktop): the title and the consent with «Начать» in the left
   column, the list on the right, centred on the window's height; the logo is the header's */
.wide .welcome { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 440px); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: 48px; row-gap: 24px; justify-content: center; padding: 24px 24px 0; overflow-y: auto; }
.wide .welcome .w-head { display: none; }
.wide .welcome > .scroll, .wide .w-list { display: contents; }
.wide .w-hero { grid-column: 1; grid-row: 2; align-self: end; }
.wide .w-feats { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.wide .w-bottom { grid-column: 1; grid-row: 3; align-self: start; padding: 8px 0 0; }
/* «Баланс»: «Аккаунт» under the balance in the left column, the tariffs beside both */
.wide .two-col.with-acc { grid-template-rows: auto 1fr; }
.wide .two-col.with-acc > .col-b { grid-row: 1 / span 2; }
.wide .two-col > .acc-sec { grid-column: 1; grid-row: 2; margin-top: 0; }
/* «Аккаунт удалён»: the window's middle, its header too; the text 440 px wide, the button under it */
.wide #app.gone .screens { grid-row: 1 / -1; }
.wide .gone-box { justify-content: center; align-items: center; }
.wide .gone-mid { flex-grow: 0; max-width: 496px; }
.wide .gone-btn { width: 440px; max-width: 100%; padding: 24px 0 0; }

/* sheets: a window in the middle, no grabber, fading in rather than coming up */
.wide .overlay { justify-content: center; align-items: center; }
.wide .overlay .scrim-btn { position: absolute; inset: 0; }
.wide .sheet { position: relative; width: 440px; max-height: calc(100% - 48px); border-radius: 24px; padding: 24px; animation: toast-in .22s cubic-bezier(.2,.8,.2,1) backwards; }
.wide .grabber { display: none; }
/* a message at the bottom in the middle, 400 px */
.wide .toast { left: 0; right: 0; width: 400px; max-width: calc(100% - 48px); margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .wide .settings, .wide .sheet { animation: none !important; } }

/* ---- the person's own title and the caption text (MainEdit.dc.html, 19.10.2026) ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.own-title { margin-top: -12px; }
.field-wrap { position: relative; display: flex; align-items: center; }
.field { width: 100%; height: 52px; border: 0; border-radius: 12px; padding: 0 48px 0 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
.field:focus { box-shadow: inset 0 0 0 1px var(--sel-border); }
.field::placeholder { color: var(--muted); }
.own-title.bad .field, .field-wrap.bad .field { box-shadow: inset 0 0 0 1px var(--bad); }
.cap.bad, .fix-note.bad { color: var(--bad); }
.field-clear { position: absolute; right: 4px; width: 44px; height: 44px; border: 0; background: none; padding: 0; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chips-box { margin-top: 4px; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s ease, box-shadow .2s ease; }
.tchip.big { background: var(--glass), var(--surface); box-shadow: var(--glass-rim); font-size: 15px; font-weight: 800; text-transform: uppercase; }
.tchip.after { color: var(--muted); }
.text-row { width: 100%; min-height: 64px; border: 0; border-radius: 16px; padding: 10px 12px 10px 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: inherit; }
.text-row[aria-disabled="true"] { cursor: default; }
.text-row .t { font-size: 16px; line-height: 21px; }
.text-row .t.dim { opacity: 0.5; }
.text-row .s { font-size: 13px; line-height: 18px; color: var(--muted); }
.text-row .chev { flex-shrink: 0; color: var(--muted); }
/* the row's sign, bare, and what is grey while the row does not open yet (the owner, 24.10.2026) */
.text-row .sign { width: 24px; height: 24px; flex-shrink: 0; display: flex; color: var(--text); }
.text-row[aria-disabled="true"] .sign, .text-row[aria-disabled="true"] .chev, .text-row[aria-disabled="true"] .ins-plus { color: var(--dis-fg); }
.ring-spin { width: 20px; height: 20px; flex-shrink: 0; border-radius: 10px; border: 2px solid var(--off); border-top-color: var(--text); animation: spin .8s linear infinite; }
.sheet.editor { position: relative; height: min(790px, calc(100% - var(--safe-top) - 24px)); padding: 0; gap: 0; overflow: hidden; box-shadow: inset 0 1px 0 var(--line); }
/* the editors' bar as Apple's (chrome.js sheetBar, MainInsert.dc.html, 22.10.2026): a small title in the middle,
   the cross on a round base at the leading edge, «Готово» a white checkmark in a pink circle at the trailing
   one, grey while the sheet is not done; no hairline, the content fades under the bar and the footer */
.sh-head { flex-shrink: 0; padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 4px; }
.sh-head .grabber { background: var(--off); }
.sh-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 48px; }
.sh-title { font-size: 17px; line-height: 22px; font-weight: 600; }
.sh-x, .sh-done { width: 48px; height: 48px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sh-x { justify-self: start; }
.sh-done { justify-self: end; }
.sh-x > span, .sh-done > span { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.sh-x > span { background: var(--raise-in); color: var(--text); }
.sh-done > span { background: var(--pink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); color: #FFFFFF; transition: background .2s ease, color .2s ease; }
.sh-done[aria-disabled="true"] { cursor: default; }
.sh-done[aria-disabled="true"] > span { background: var(--raise-in); box-shadow: none; color: var(--dis-fg); }
.ed-legend { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 8px; font-size: 14px; line-height: 19px; color: var(--muted); }
.ed-legend > div { display: flex; align-items: center; gap: 8px; }
.lg-cut, .lg-fix, .lg-auto { width: 26px; flex-shrink: 0; text-align: center; font-weight: 600; }
.lg-cut { text-decoration: line-through; text-decoration-thickness: 2px; }
.lg-fix { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--fix-line); }
.lg-auto { display: flex; justify-content: center; }
.ed-words { flex-grow: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 17px 24px; display: flex; flex-direction: column; gap: 14px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%); scrollbar-width: thin; scrollbar-color: var(--off) transparent; }
.ed-phrase { display: flex; flex-wrap: wrap; gap: 2px 0; }
.ed-word { border: 0; border-radius: 6px; margin: 0; padding: 2px 3px; background: transparent; color: var(--text); font: inherit; font-size: 19px; line-height: 27px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; transition: background .15s ease, color .15s ease; }
.ed-word.cut { color: var(--muted); background: var(--raise-in); text-decoration: line-through; text-decoration-thickness: 2px; }
.ed-word.fixed { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--fix-line); }
.ed-foot { flex-shrink: 0; padding: 12px 20px max(28px, calc(16px + var(--safe-bottom))); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; line-height: 19px; color: var(--muted); }
.ed-foot .link-btn { flex-shrink: 0; height: 44px; padding: 0; }
/* the insert's words in the caption editor: one pink band behind the chip with its time in the reel; the
   editor's own line when a cut would break it (MainInsert.dc.html, 23.10.2026) */
.ed-word.ins { background: var(--ins-band); border-radius: 0; }
.ed-word.ins.last { border-radius: 0 6px 6px 0; }
.ed-chip { height: 31px; padding: 0 3px 0 5px; border-radius: 6px 0 0 6px; background: var(--ins-band); display: inline-flex; align-items: center; }
.ed-chip > span, .ins-chip > span { height: 20px; padding: 0 8px; border-radius: 10px; background: var(--ins-chip); color: var(--ins-chip-fg); font-size: 12px; line-height: 20px; font-weight: 700; white-space: nowrap; }
.ed-chip .num, .ins-chip .num { font-weight: 500; }
.ed-toast { position: absolute; left: 20px; right: 20px; bottom: 84px; z-index: 3; pointer-events: none; padding: 12px 14px; border-radius: 13px; background: var(--toast); color: var(--toast-fg); font-size: 15px; line-height: 20px; animation: toast-in .22s cubic-bezier(.2,.8,.2,1) backwards; }
.overlay.inner { position: absolute; inset: 0; z-index: 2; }
.sheet.fix { gap: 14px; border-radius: 24px 24px 0 0; box-shadow: inset 0 1px 0 var(--line); }
.fix-h { font-size: 14px; line-height: 19px; color: var(--muted); }
.sheet.fix .field { background: var(--raise-in); padding: 0 16px; font-size: 17px; }
.fix-note { font-size: 13px; line-height: 18px; color: var(--muted); margin-top: -6px; padding: 0 4px; }
.fix-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fix-back { align-self: center; height: 44px; padding: 0 8px; }
/* «Вставка» (MainInsert.dc.html, 21.10.2026): its row under the caption text, its sheet with the file, where it
   stands, the words it is on and a video's piece and sound. The card's units: 216 x 384 for the reel's
   1080 x 1920, the editor at 1.16667 of them (252 x 448) */
.g10 { gap: 10px; } .g20 { gap: 20px; } .g28 { gap: 28px; }
/* the pink of the insert's place among the words, the selection of its phrase and the red past 10 s */
.overlays { --ins-band: rgba(245,51,142,0.16); --ins-chip: #F5338E; --ins-chip-fg: #0E0E11; --ins-sel: rgba(255,255,255,0.16); --ins-over: rgba(255,107,94,0.26); --ins-rail: rgba(244,241,234,0.2); }
:root[data-theme="light"] .overlays { --ins-band: rgba(194,18,95,0.09); --ins-chip: #C2125F; --ins-chip-fg: #FFFFFF; --ins-sel: rgba(14,14,17,0.09); --ins-over: rgba(200,51,31,0.14); --ins-rail: rgba(14,14,17,0.14); }
.text-row .s.bad { color: var(--bad); }
.ins-row.has { padding-left: 10px; }
.ins-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #2A2A30; display: block; }
.ins-thumb.big { width: 56px; height: 56px; border-radius: 12px; }
.ins-thumb img, .ins-thumb video { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.ins-plus { width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; background: var(--raise-in); color: var(--text); display: flex; align-items: center; justify-content: center; }
.ins-body { gap: 28px; padding: 16px 20px 24px; }
.ins-pick { width: 100%; min-height: 72px; flex-shrink: 0; border: 0; border-radius: 16px; padding: 12px; background: var(--raise-in); color: var(--text); display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: inherit; transition: box-shadow .25s ease; }
.ins-pick .ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; background: var(--raise); display: flex; align-items: center; justify-content: center; }
.ins-pick .t { flex-grow: 1; min-width: 0; font-size: 16px; line-height: 21px; font-weight: 600; }
.ins-pick .chev { flex-shrink: 0; color: var(--muted); }
/* what was not taken, 8 px under the pick */
.ins-err { margin-top: -20px; }
/* the grey checkmark's nudge (app.insertDone): what is missing ringed as a form rings an empty field, the
   checkmark and the footer's line shaken; two names, so every tap plays it again */
.ins-pick.need, .ins-words.need { box-shadow: inset 0 0 0 2px var(--link); }
.ins-file.need { outline: 2px solid var(--link); outline-offset: 6px; border-radius: 12px; }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes nudge2 { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.nudge { animation: nudge .42s ease both; }
.nudge2 { animation: nudge2 .42s ease both; }
.seg.on-raise { background: var(--raise-in); }
.ins-file { display: flex; align-items: center; gap: 12px; }
.ins-file .t { font-size: 16px; line-height: 21px; font-weight: 600; }
.ins-file .s { font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-file .link-btn { flex-shrink: 0; height: 44px; padding: 0 2px; }
.ins-place { display: flex; flex-direction: column; align-items: center; }
.ins-edit { width: 252px; height: 448px; position: relative; border-radius: 18px; overflow: hidden; background: #222; flex-shrink: 0; -webkit-user-select: none; user-select: none; }
.ins-edit.drag { cursor: grab; touch-action: none; }
.ins-canvas { position: absolute; left: 0; top: 0; width: 216px; height: 384px; transform: scale(1.16667); transform-origin: 0 0; }
.ins-frame { position: absolute; left: 0; top: 0; width: 216px; height: 384px; }
.ins-frame img, .ins-cut { width: 216px; height: 384px; display: block; object-fit: cover; pointer-events: none; }
.ins-cut { position: absolute; left: 0; top: 0; }
/* the paper and its soft edge are one gradient: two layers left a hair of a line between them (21.10.2026) */
.ins-paper { position: absolute; left: 0; top: 0; width: 216px; height: 204px; pointer-events: none; }
.ins-box { position: absolute; border-radius: 7px; overflow: hidden; background: #2A2A30; pointer-events: none; }
/* how see-through it is comes with the frame (chrome.js insertSheet, the slider) */
.ins-box.behind { box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.ins-box.split { box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.ins-box.clear { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 6px 9px rgba(0,0,0,0.3)); }
.ins-media { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ins-box.clear .ins-media { object-fit: contain; }
.ins-outline { position: absolute; box-sizing: border-box; border-radius: 7px; border: 1.2px solid rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); pointer-events: none; }
.ins-handle { position: absolute; width: 38px; height: 38px; border: 0; padding: 0; background: none; cursor: nwse-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.ins-handle span { width: 13px; height: 13px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 0 0 1.5px rgba(14,14,17,0.55), 0 2px 6px rgba(0,0,0,0.4); display: block; }
/* the empty frame before the file (the owner, 21.10.2026): a picture sign, or the hand's hint inside its lower
   right corner (chrome.js syncHint) */
.ins-slot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.72); }
/* on the paper, while a finger is on the frame: the part under the paper dark, its edge dashed (the owner,
   23.10.2026: the frame stays on the paper) */
.ins-bound { position: absolute; left: 0; top: 180px; width: 216px; height: 204px; background: rgba(14,14,17,0.6); border-top: 1px dashed rgba(255,255,255,0.9); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.ins-edit.touch .ins-bound { opacity: 1; }
/* «Прозрачность» (MainInsert.dc.html, the owner, 23.10.2026): the native slider over a drawn rail and fill, its
   thumb Apple's white 28 px knob; the fill runs to the thumb's middle */
.ins-clear { border-radius: 16px; background: var(--raise-in); padding: 12px 16px 2px; display: flex; flex-direction: column; }
.ins-clear .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ins-clear .t { font-size: 16px; line-height: 21px; }
.ins-clear .v { font-size: 16px; line-height: 21px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ins-clear .track { display: flex; align-items: center; gap: 10px; height: 48px; color: var(--muted); }
.ins-clear .track svg { flex-shrink: 0; display: block; }
.ins-clear .rng { position: relative; flex-grow: 1; min-width: 0; height: 44px; }
.ins-clear .rail, .ins-clear .fill { position: absolute; left: 14px; top: 20px; height: 4px; border-radius: 2px; pointer-events: none; }
.ins-clear .rail { right: 14px; background: var(--ins-rail); }
.ins-clear .fill { background: var(--text); }
.ins-clear input { position: absolute; left: 0; top: 0; width: 100%; height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; touch-action: pan-y; }
.ins-clear input::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.ins-clear input::-moz-range-track { height: 44px; background: transparent; }
.ins-clear input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.14); }
.ins-clear input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.14); }
.ins-clear input:focus { outline: none; }
.ins-clear input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--link); }
.ins-clear input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--link); }
.ins-hint { position: absolute; width: 52px; height: 52px; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85)) drop-shadow(0 1px 3px rgba(0,0,0,0.5)); animation: fade .3s ease both; }
.ins-hint > div, .ins-hint-anim { width: 100%; height: 100%; }
.ins-words { border-radius: 16px; background: var(--raise-in); padding: 12px 9px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .25s ease; }
.iw { border: 0; border-radius: 6px; margin: 0; padding: 2px 3px; background: transparent; color: var(--text); font: inherit; font-size: 17px; line-height: 25px; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
/* the picked phrase as a text selection: one band, a bar at each end, the words past 10 s red */
.iw.in { background: var(--ins-sel); border-radius: 0; }
.iw.in.over { background: var(--ins-over); }
.iw.first { border-radius: 6px 0 0 6px; box-shadow: inset 2px 0 0 var(--text); }
.iw.last { border-radius: 0 6px 6px 0; box-shadow: inset -2px 0 0 var(--text); }
.iw.first.last { border-radius: 6px; box-shadow: inset 2px 0 0 var(--text), inset -2px 0 0 var(--text); }
/* the hook's first 8 s with a title: one band behind the chip «Хук до 0:08», no end there */
.iw.zone { background: var(--ins-band); border-radius: 0; cursor: default; }
.iw.zone.zlast { border-radius: 0 6px 6px 0; }
.ins-chip { height: 29px; padding: 0 3px 0 5px; border-radius: 6px 0 0 6px; background: var(--ins-band); display: inline-flex; align-items: center; }
.ins-strip { position: relative; height: 64px; border-radius: 12px; overflow: hidden; background: #2A2A30; touch-action: none; }
.ins-strip .cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ins-strip .cells img { width: 100%; height: 64px; object-fit: cover; display: block; pointer-events: none; }
.ins-strip .shade { position: absolute; top: 0; bottom: 0; background: rgba(14,14,17,0.62); pointer-events: none; }
.ins-strip .win { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 2.5px solid #FFFFFF; border-radius: 12px; cursor: grab; touch-action: none; }
.ins-times { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; color: var(--muted); padding: 0 4px; font-variant-numeric: tabular-nums; }
.ins-sound { border-radius: 16px; background: var(--raise-in); min-height: 64px; padding: 10px 14px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ins-sound .t { font-size: 16px; line-height: 21px; }
.ins-sound .s { font-size: 13px; line-height: 18px; color: var(--muted); }
.ins-sound .switch[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.ins-sum { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ins-sum .n { font-size: 17px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.ins-sum .x { font-size: 13px; line-height: 18px; color: var(--muted); }
.ins-sum .bad { color: var(--bad); }
/* the ask the insert brings (chrome.js askSheet), drawn as the delete sheet */
.sheet.ask { box-shadow: inset 0 1px 0 var(--line); padding-bottom: calc(28px + var(--safe-bottom)); }
.sheet.ask .grabber { background: var(--off); }
.ask-t { text-wrap: balance; }
.ask-x { font-size: 16px; line-height: 22px; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .nudge, .nudge2, .ins-hint, .ed-toast { animation: none !important; } .iw, .ins-pick, .ins-words, .sh-done > span { transition: none !important; } }
.wide .sheet.editor { height: min(720px, calc(100% - 48px)); padding: 0; }
.wide .overlay.inner { align-items: center; justify-content: center; }

/* ---- the partner programme (screens/partner.js, Partner.dc.html, 21.10.2026) ---- */
.p-entry { min-height: 72px; padding: 14px 16px; border: 0; color: var(--text); display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: inherit; }
.p-tag { flex-shrink: 0; padding: 4px 8px; border-radius: 10px; background: var(--lime); color: #0E0E11; font-family: var(--head); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; }
.p-entry-t { font-size: 15px; line-height: 20px; font-weight: 600; }
.p-entry-s { font-size: 13px; line-height: 18px; color: var(--muted); }
.p-wait, .p-terms, .p-bal { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.p-bal { gap: 16px; }
.p-wait-i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px; background: rgba(228,255,58,0.10); color: var(--text); display: flex; align-items: center; justify-content: center; }
:root[data-theme="light"] .p-wait-i { background: rgba(228,255,58,0.45); }
.p-h3 { font-family: var(--head); font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; }
.p-note { font-size: 15px; line-height: 20px; color: var(--muted); }
.p-big { flex-shrink: 0; font-family: var(--head); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-terms-t { font-size: 17px; line-height: 22px; font-weight: 600; }
.p-link { align-self: flex-start; min-height: 44px; border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.p-link.inline { min-height: 0; display: inline; align-self: auto; }
.p-label { font-size: 13px; line-height: 18px; color: var(--muted); padding: 0 4px; }
.p-field { width: 100%; height: 52px; box-sizing: border-box; padding: 0 16px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: 17px; }
.p-field.on-bg { background: var(--bg); }
.p-field::placeholder { color: currentColor; opacity: .42; }
.p-field:focus { outline: 2px solid var(--ring); outline-offset: 0; }
.p-field.bad { box-shadow: inset 0 0 0 2px var(--bad); }
.p-err { font-size: 13px; line-height: 18px; color: var(--bad); padding: 0 4px; }
.p-agree { font-size: 15px; line-height: 20px; }
/* the application's consent row is a `.consent` too (it rings); 10 px left of the column so the box lines up with the fields */
.consent.p-consent { margin-left: -10px; padding-left: 0; }
.p-bal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-rate { flex-shrink: 0; padding: 3px 8px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.p-new { height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.p-links { display: flex; flex-direction: column; overflow: hidden; }
.p-lrow { min-height: 68px; padding: 10px 8px 10px 16px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); }
.p-lname { font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-lsub { font-size: 13px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.icon-btn.p-quiet { background: transparent; color: var(--muted); }
.p-mini { flex-shrink: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--icon-bg); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.p-mini.on { background: var(--btn); color: #FFFFFF; }
@keyframes p-hl { 0%, 45% { background-color: rgba(228,255,58,0.16); } 100% { background-color: rgba(228,255,58,0); } }
.p-hl { animation: p-hl 2.6s ease-out both; }
.stat .v.p-money { font-size: 20px; line-height: 28px; padding: 0 6px; }
.p-cap { font-size: 13px; line-height: 18px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--muted); padding: 0 0 4px; }
.p-op { min-height: 64px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.p-op-i { width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; background: var(--icon-bg); color: var(--text); display: flex; align-items: center; justify-content: center; }
.p-op-t { font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-op-s { font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-op-a { flex-shrink: 0; white-space: nowrap; font-size: 15px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 8px; }
.p-op-a.in { background: var(--lime); color: #0E0E11; padding: 1px 8px; }
.p-empty { padding: 24px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 20px; color: var(--muted); text-align: center; text-wrap: balance; }
.p-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p-two .btn[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
.p-sum { padding: 14px 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.p-sum-v { font-family: var(--head); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-done { min-height: 300px; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 0 8px; }
@keyframes p-draw { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }
.p-draw { stroke-dasharray: 21; animation: p-draw .4s .28s cubic-bezier(.3,.7,.2,1) both; }
.g20 { gap: 20px; }
@media (prefers-reduced-motion: reduce) { .p-hl, .p-draw { animation: none !important; } }