/* Оболочка прототипа поверх вёрстки, выгруженной из Фигмы (screens/*.html). */
html, body { margin: 0; background: var(--bg\/app); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
* { -webkit-tap-highlight-color: transparent; }
#app { max-width: 430px; margin: 0 auto; position: relative; min-height: 100vh; min-height: 100dvh; }
body.browser #app { box-shadow: 0 0 0 1px var(--border\/default); }

/* Корень экрана: в Фигме у него фиксированная высота, в приложении растём по контенту */
.screen-root { width: 100% !important; height: auto !important; min-height: 100vh; min-height: 100dvh; }
.screen-root > *:not(.absolute) { width: 100% !important; }
.screen-root > [data-name="Content"] { flex: 1 0 auto !important; }
.has-tabbar .screen-root > [data-name="Content"] { padding-bottom: 124px !important; }
.has-mainbar .screen-root > [data-name="Content"] { padding-bottom: 128px !important; }

/* Шапка Telegram: в браузере — макет из UI Kit, в Telegram её рисует клиент */
.tg-chrome { position: sticky !important; top: 0; z-index: 25; background: var(--bg\/app); }
body.tg .tg-chrome { display: none !important; }
.tg-header-hit { cursor: pointer; }

/* Нижние панели закреплены */
.dock { position: fixed !important; left: 50%; bottom: 0; transform: translateX(-50%); width: 100% !important; max-width: 430px; z-index: 30; }
body.tg .dock.mainbar { display: none !important; }
.dock.tabbar { background: linear-gradient(to top, var(--bg\/app) 60%, transparent); }

/* ---- Эффекты из Meowdes Refs ---- */
/* fluid-press-button: кнопка вжимается ровно на 1px с каждой стороны */
.press { transition: transform 120ms cubic-bezier(.2,.8,.2,1), filter 120ms; cursor: pointer; user-select: none; }
.press.is-pressed { transform: scale(var(--press, .985)); filter: brightness(.97); }

/* tabs-press-nudge: подложка таббара переезжает на пружине, на нажатии подаётся к пальцу */
.tab-pill { position: absolute; z-index: 0; border-radius: var(--radius\/20); background: var(--bg\/accent-soft); pointer-events: none;
  transition: transform 420ms linear(0, 0.2 6%, 0.68 17%, 0.94 26%, 1.05 34%, 1.04 42%, 1 55%, 0.99 68%, 1), width 300ms; }
[data-name="Bar"] > [data-name^="Tab/"] { background: transparent !important; position: relative; z-index: 1; transition: color .2s; }

/* squish-switch: бегунок тумблера резиновый */
.knob-anim { transition: left 180ms linear(0, 0.114, 0.321, 0.516, 0.671, 0.783, 0.86, 0.911, 0.944, 0.966, 0.979, 0.987, 0.992, 0.995, 0.997, 0.998, 1), width 160ms, transform 160ms !important; }
.addon-anim { transition: background 280ms ease, border-color 280ms ease, color 280ms ease !important; }
.is-squish .knob-anim { transform: scaleX(1.22) scaleY(.86); }
.lt { position: absolute; inset: 0; border-radius: 16px; background: var(--border\/strong); transition: background 160ms ease; cursor: pointer; }
.lt::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: left 200ms linear(0, 0.114, 0.321, 0.516, 0.671, 0.783, 0.86, 0.911, 0.944, 0.966, 0.979, 0.987, 0.992, 0.995, 0.997, 0.998, 1), width 160ms linear(0, 0.114, 0.321, 0.516, 0.671, 0.783, 0.86, 0.911, 0.944, 0.966, 0.979, 0.987, 0.992, 0.995, 0.997, 0.998, 1), height 160ms, top 160ms; }
.lt.on { background: var(--accent\/default); } /* как Toggle state=on в Фигме */
.lt.on::after { left: 22px; }
.lt.squish::after { width: 33px; height: 23px; top: 4px; }
.lt.on.squish::after { left: 16px; }
.lt.figma-toggle, .lt.figma-toggle.on { background: transparent; position: relative; inset: auto; }
.lt.figma-toggle::after { content: none; }
.lt[aria-disabled="true"] { cursor: default; }
.lt:focus-visible { outline: 2px solid var(--accent\/default); outline-offset: 3px; }

/* icon-swap-blur: иконка копирования уходит в размытие, галочка проявляется */
.swap-cell { position: relative; display: inline-grid; }
.swap-cell > * { grid-area: 1/1; transition: opacity 80ms ease-out, filter 80ms ease-out, transform 80ms ease-out; }
.swap-cell .to { opacity: 0; filter: blur(4px); transform: scale(.6); }
.is-swapped .swap-cell .from { opacity: 0; filter: blur(4px); transform: scale(.6); transition-duration: 60ms; transition-timing-function: ease-in; }
.is-swapped .swap-cell .to { opacity: 1; filter: none; transform: none; }

/* notification-island: тост сначала кругом, потом вытягивается в капсулу */
.island { position: fixed; left: 50%; bottom: calc(128px + env(safe-area-inset-bottom)); z-index: 70; transform: translateX(-50%) translateY(12px) scale(.6);
  display: flex; align-items: center; gap: 12px; height: 45px; max-width: 52px; padding: 12px 16px; border-radius: var(--radius\/16); overflow: hidden; box-sizing: border-box;
  background: var(--bg\/toast); color: #fff; font: 600 15px/21px Manrope, system-ui; white-space: nowrap; opacity: 0;
  box-shadow: 0 8px 24px rgba(15,23,41,.16); transition: transform 320ms linear(0, 0.2 6%, 0.68 17%, 0.94 26%, 1.05 34%, 1.02 45%, 1), opacity 160ms, max-width 380ms cubic-bezier(.2,.8,.2,1) 140ms; }
.island svg { flex: none; color: var(--status\/success-bright); } /* тост как компонент Toast в Фигме */
.island span { opacity: 0; transition: opacity 180ms 260ms; }
.island.show { opacity: 1; transform: translateX(-50%); max-width: 340px; }
.island.show span { opacity: 1; }

/* infinity-dash-spinner */
.inf-spin { width: 64px; height: 64px; color: var(--accent\/default); display: block; margin: 0 auto; }
.inf-spin path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; stroke-dasharray: 15 85;
  animation: inf-move 2s linear infinite, inf-dash 4s ease-in-out infinite; }
@keyframes inf-move { to { stroke-dashoffset: -100; } }
@keyframes inf-dash { 0%, 100% { stroke-dasharray: 15 85; } 50% { stroke-dasharray: 40 60; } }

/* click-spark: холст на весь экран */
#sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* Шторки: вход пружиной, выход быстрее (fluid-dialog) */
.sheet-ov { position: fixed; inset: 0; background: rgba(15,23,41,.4); z-index: 50; opacity: 0; transition: opacity 240ms; }
.sheet-ov.show { opacity: 1; }
.sheet-wrap { position: fixed; left: 50%; bottom: 0; z-index: 51; width: 100%; max-width: 430px; transform: translate(-50%, 100%);
  transition: transform 460ms linear(0, 0.2 6%, 0.68 17%, 0.94 26%, 1.03 34%, 1.02 45%, 1); max-height: 90vh; overflow: auto; }
.sheet-wrap.show { transform: translate(-50%, 0); }
.sheet-wrap.hide { transition: transform 200ms ease-in; transform: translate(-50%, 100%); }
.sheet-wrap > * { width: 100% !important; position: relative !important; inset: auto !important; transform: none !important; height: auto !important; }
.sheet-wrap { scrollbar-width: none; }
.sheet-wrap::-webkit-scrollbar { display: none; }

/* Смена экранов */
.cancel-dialog { width: 270px; max-width: calc(100% - 48px); padding: 0; border: 0; border-radius: var(--radius\/16); overflow: hidden; background: var(--bg\/surface); color: var(--text\/primary); box-shadow: 0 8px 12px rgba(15,23,41,.16); font-family: Inter, Arial, sans-serif; }
.cancel-dialog::backdrop { background: rgba(15,23,41,.4); }
.cancel-dialog > * { width: 100%; height: auto; }
.cancel-dialog p { font-family: inherit; }
.cancel-dialog [data-name="Text"] { padding: 20px 16px; }
.cancel-dialog [role="button"]:focus-visible { outline: 2px solid var(--accent\/default); outline-offset: -2px; border-radius: 0 0 0 16px; }
.enter-push { animation: pushIn 300ms cubic-bezier(.2,.8,.2,1); }
@keyframes pushIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.enter-fade { animation: fadeIn 220ms ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Вода «Глубина» (water.js): холст под содержимым карточки */
.w-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
[data-name="Card/Subscription"] { cursor: pointer; }

/* Демо-меню (браузер) */
.demo { position: fixed; top: 128px; left: 50%; transform: translateX(calc(215px - 100% - 8px)); z-index: 80; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(11,27,51,.14); padding: 8px; display: none; flex-direction: column; gap: 2px; font: 600 13px/18px Manrope, system-ui; min-width: 170px; }
.demo.open { display: flex; }
.demo b { font-size: 11px; color: var(--text\/tertiary); text-transform: uppercase; letter-spacing: .6px; padding: 4px 8px; }
.demo button { all: unset; cursor: pointer; padding: 8px; border-radius: 8px; }
.demo button.on { background: var(--bg\/accent-soft); color: var(--accent\/default); }
@media (max-width: 430px) { .demo { left: auto; right: 8px; transform: none; } }

/* В рамке iPhone (preview.html): без скроллбаров и без демо-меню, статусы переключаются снаружи */
html:has(body.embedded), body.embedded { scrollbar-width: none; }
html:has(body.embedded)::-webkit-scrollbar { display: none; }
body.embedded::-webkit-scrollbar { display: none; }
body.embedded .demo { display: none !important; }
body.embedded #app { box-shadow: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Сверка с Фигмой (?shot=1): всё замирает */
body.shot *, body.shot *::before, body.shot *::after { animation: none !important; transition: none !important; }
body.shot .demo { display: none !important; }
body.shot #app { max-width: 390px; margin: 0; box-shadow: none; }
body.shot .dock, body.shot .sheet-wrap { left: 0; max-width: 390px; transform: none; }

/* Плитки срока: в Фигме обводка внутри и не меняет размер, в CSS рамка добавляет высоту. Рисуем её тенью. */
[data-name="Terms"] > [data-name="Frame"] > * { border-width: 0 !important; box-shadow: inset 0 0 0 1px var(--border\/default); }
[data-name="Terms"] > [data-name="Frame"] > .border-2 { box-shadow: inset 0 0 0 2px var(--accent\/default); }