/*!
 * Strenos: живые экраны приложения на главной.
 * Внешняя часть (список сценариев, рамка) в стиле сайта. Внутри экрана
 * интерфейс приложения по его токенам: фон #09090B, карточки #1C1C22,
 * лайм #CCFF00, разминка #4FC3F7, янтарь #FBBF24, SF Pro и SF Rounded.
 * Холст 393 точки, как iPhone, масштабируется под рамку (--k из live.js).
 */

/* ── Раздел ── */
.live-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--g); align-items: center; }
.live-list { grid-column: 1 / 7; list-style: none; margin: 0; padding: 0; counter-reset: lt; }
.lt-item { border-top: 1px solid var(--line-2); }
.lt-item:last-child { border-bottom: 1px solid var(--line-2); }
/* Переход по ссылке #lt-… не прячет пункт под липкой шапкой. */
.lt { scroll-margin-top: 160px; }
.lt { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 0 12px; width: 100%; min-height: 80px; padding: 16px 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--font); letter-spacing: -.03em; transition: color .25s; }
.lt::before { counter-increment: lt; content: counter(lt, decimal-leading-zero); font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.lt::after { content: ""; width: 10px; height: 10px; justify-self: end; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .5; transition: transform .35s var(--ease), opacity .25s; }
.lt:hover { color: var(--ink-2); }
.lt[aria-expanded="true"] { color: var(--ink); }
.lt[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; }
.lt:focus-visible { outline-offset: -2px; }
.lp { padding: 0 0 28px 52px; }
.lp p { margin: 0 0 16px; max-width: 48ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.lp ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.lp li { position: relative; padding-left: 20px; color: var(--ink); font-size: 15px; line-height: 1.45; border: 0; }
.lp li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--ink); }
.live-side { grid-column: 7 / -1; display: grid; justify-items: center; gap: 20px; }

/* ── Рамка iPhone: настоящий корпус, живой экран под строкой статуса ── */
.lv-phone { position: relative; width: min(clamp(300px, 27vw, 392px), var(--fit-w)); filter: drop-shadow(0 40px 50px rgba(14, 14, 15, .26)) drop-shadow(0 8px 14px rgba(14, 14, 15, .14)); }
.lv-frame { display: block; width: 100%; height: auto; }
.lv-screen { --k: .93; pointer-events: none; user-select: none; -webkit-user-select: none; position: absolute; left: 4.112%; top: 8.756%; width: 91.84%; height: 90.37%; overflow: hidden; border-radius: 0 0 17.6% 17.6% / 0 0 8.69% 8.69%; background: #09090B; visibility: hidden; }
.is-live .lv-screen { visibility: visible; }
.lv-canvas { width: 393px; height: 798px; transform: scale(var(--k)); transform-origin: 0 0; }

/* ── Интерфейс приложения внутри экрана ── */
.lv-canvas { color: #FAFAFA; font: 400 17px/1.25 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; text-align: left; }
.lv-canvas * { box-sizing: border-box; }
.lv-canvas button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lv-canvas input { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: none; min-width: 0; }
.lv-canvas input:focus-visible { box-shadow: 0 1px 0 #CCFF00; }
.lv-canvas b { font-weight: 500; }
.lv-canvas em, .lv-canvas i { font-style: normal; }
.lv-canvas small { font-size: 11px; font-weight: 600; color: #71717A; letter-spacing: 0; margin-left: 2px; }
.lv-page { position: relative; height: 798px; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 22px; }
.lv-ac { color: #CCFF00; }
.lv-mt { color: #71717A; }
.lv-tx { color: #FAFAFA; }
.lv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; flex: none; }
.lv-top > :first-child { justify-self: start; }
.lv-top > :last-child { justify-self: end; }
.lv-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.lv-circ { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(28, 28, 34, .9); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .04); color: #FAFAFA; }
.lv-circ svg { width: 18px; height: 18px; }
.lv-red { color: #F87171; }
.lv-pill { display: inline-flex; align-items: center; gap: 18px; height: 44px; padding: 0 16px; border-radius: 22px; background: rgba(28, 28, 34, .9); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.lv-pill svg { width: 18px; height: 18px; }
.lv-cap { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 22px; background: rgba(28, 28, 34, .9); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); font-size: 17px; }
.lv-cap.is-saved { color: #CCFF00; }
.lv-card { background: #1C1C22; border-radius: 26px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .05); padding: 16px; }
.lv-chev { width: 7px; height: 12px; margin-left: 8px; color: #52525B; flex: none; }
.lv-cta { flex: none; display: flex; align-items: center; justify-content: center; height: 56px; margin-top: auto; border-radius: 28px; background: #CCFF00; color: #09090B !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.01em; transition: transform .2s; }
.lv-cta:active { transform: scale(.98); }
.lv-cta.is-done { background: #222228; color: #CCFF00 !important; }
.lv-num, .lv-clock, .lv-set .lv-reps, .lv-set .lv-w, .lv-set .lv-rt, .lv-hero b, .lv-forms b, .lv-z b, .lv-in input { font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Тренировка */
.lv-stats { display: flex; align-items: center; gap: 8px; white-space: nowrap; height: 52px; flex: none; padding: 0 2px; font-size: 14px; color: #A1A1AA; }
.lv-ton { color: #FAFAFA; font-size: 15px; }
.lv-clock { margin-left: auto; font-size: 32px; font-weight: 300; color: #FAFAFA; letter-spacing: -.02em; }
.lv-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .16); }
.lv-hr, .lv-kc { font-size: 12px; }
.lv-hr i, .lv-kc i { color: #FAFAFA; font-size: 16px; }
.lv-kc { margin-right: auto; }
.lv-snd { width: 40px; height: 40px; }
.lv-excard { padding: 18px 16px 4px; }
.lv-exhead { display: flex; align-items: baseline; gap: 12px; }
.lv-exhead b { margin-right: auto; font-size: 17px; }
.lv-cnt { font-size: 13px; color: #CCFF00; opacity: .85; }
.lv-exsub { display: flex; align-items: center; gap: 14px; margin: 14px 0 8px; font-size: 14px; }
.lv-exsub .lv-r { margin-left: auto; }
.lv-cols, .lv-set { display: grid; grid-template-columns: 32px 52px 1fr 76px 70px 26px; align-items: center; }
.lv-cols { height: 26px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #71717A; }
.lv-cols span:nth-child(1) { grid-column: 1 / 3; padding-left: 36px; }
.lv-cols em { color: #4FC3F7; }
.lv-cols span:nth-child(2), .lv-cols span:nth-child(3) { text-align: right; }
.lv-cols span:nth-child(3) { padding-right: 4px; }
.lv-cols span:nth-child(4) { padding-left: 14px; }
.lv-sets { max-height: 350px; overflow-y: auto; scrollbar-width: none; }
.lv-sets::-webkit-scrollbar { display: none; }
.lv-set { height: 50px; border-bottom: .5px solid rgba(255, 255, 255, .07); --c: #CCFF00; }
.lv-set.is-wu { --c: #4FC3F7; }
.lv-set.is-wn { --c: #FBBF24; }
.lv-cb { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--c); transition: background-color .18s, transform .18s; }
.lv-cb svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .18s, transform .22s cubic-bezier(.2, .9, .3, 1.4); }
.lv-set.is-done .lv-cb { background: var(--c); box-shadow: none; }
.lv-set.is-done .lv-cb svg { opacity: 1; transform: none; }
.lv-cb:active { transform: scale(.88); }
.lv-lab { color: var(--c); font-size: 15px; }
.lv-reps { text-align: right; color: var(--c); font-size: 18px; }
.lv-w { text-align: right; color: var(--c); font-size: 18px; padding-right: 4px; }
.lv-rt { padding-left: 14px; color: var(--c); font-size: 16px; }
.lv-rt small { margin: 0 8px 0 0; color: #52525B; }
.lv-x { color: #52525B; text-align: center; font-size: 17px; }
.lv-set:not(.is-done) .lv-reps, .lv-set:not(.is-done) .lv-w, .lv-set:not(.is-done) .lv-lab, .lv-set:not(.is-done) .lv-rt { opacity: .78; }
.lv-adds { display: flex; justify-content: center; gap: 28px; height: 54px; align-items: center; }
.lv-adds button { font-size: 17px; }
.lv-line { display: flex; justify-content: space-between; align-items: center; height: 46px; border-top: .5px solid rgba(255, 255, 255, .07); font-size: 16px; color: #A1A1AA; }
.lv-line b { color: #FAFAFA; font-weight: 400; }

/* Калькулятор 1ПМ */
.lv-ormcard { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 18px 16px 16px; display: flex; flex-direction: column; }
.lv-ormcard::-webkit-scrollbar { display: none; }
.lv-cardh { display: flex; justify-content: space-between; align-items: center; }
.lv-cardh b { font-size: 21px; }
.lv-q { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2A2A32; color: #FAFAFA; font-size: 15px; font-weight: 600; }
.lv-modes { display: flex; gap: 22px; margin: 16px 0 14px; }
.lv-modes button { height: 32px; font-size: 15px; color: #71717A; }
.lv-modes .is-on { color: #CCFF00; font-weight: 500; }
.lv-ormtop { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: start; }
.lv-ins { display: grid; gap: 10px; }
.lv-in { display: grid; gap: 4px; padding: 10px 12px; border-radius: 16px; background: #151519; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .06); cursor: text; }
.lv-in > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #71717A; }
.lv-inrow { display: flex; align-items: baseline; gap: 4px; }
.lv-in input { width: 100%; font-size: 26px; font-weight: 400; color: #FAFAFA; }
.lv-in small { font-size: 13px; color: #71717A; font-weight: 500; }
.lv-hero { display: grid; gap: 4px; padding-top: 6px; }
.lv-hero > div { display: flex; align-items: baseline; gap: 6px; }
.lv-hero b { font-size: 64px; font-weight: 300; line-height: 1; color: #CCFF00; letter-spacing: -.03em; }
.lv-hero small { font-size: 15px; color: #A1A1AA; }
.lv-hero span { font-size: 15px; color: #71717A; }
.lv-hero em { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; color: #71717A; }
.lv-hero em i, .lv-seg2 i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-size: 11px; font-weight: 600; color: #A1A1AA; }
.lv-forms { display: grid; grid-template-columns: repeat(5, 1fr); margin: 16px 0 4px; padding: 14px 0 12px; border-top: .5px solid rgba(255, 255, 255, .07); border-bottom: .5px solid rgba(255, 255, 255, .07); }
.lv-forms button { display: grid; gap: 4px; justify-items: center; padding: 4px 0; border-radius: 12px; }
.lv-forms b { font-size: 17px; font-weight: 300; color: #A1A1AA; }
.lv-forms span { font-size: 12px; color: #71717A; }
.lv-forms .is-on b, .lv-forms .is-on span { color: #CCFF00; }
.lv-forms .is-on b { font-weight: 400; }
.lv-forms .is-off { cursor: default; opacity: .7; }
.lv-seg2 { display: flex; gap: 18px; height: 44px; align-items: center; margin-top: 4px; }
.lv-seg2 button { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #52525B; }
.lv-seg2 .is-on { color: #CCFF00; font-weight: 600; }
.lv-types { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.lv-types::-webkit-scrollbar { display: none; }
.lv-types button { flex: none; height: 30px; font-size: 14px; color: #A1A1AA; box-shadow: inset 0 -1.5px 0 transparent; }
.lv-types .is-on { color: #CCFF00; font-weight: 600; box-shadow: inset 0 -1.5px 0 #CCFF00; }
.lv-zrows { margin-bottom: 8px; }
.lv-z { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; height: 50px; border-bottom: .5px solid rgba(255, 255, 255, .06); }
.lv-z:last-child { border-bottom: 0; }
.lv-zp { text-align: right; font: 400 13px ui-monospace, "SF Mono", Menlo, monospace; color: #A1A1AA; }
.lv-zl { font-size: 15px; }
.lv-zw { display: grid; justify-items: end; gap: 1px; }
.lv-zw b { font-size: 18px; font-weight: 300; }
.lv-zw small { font-size: 11px; }
.lv-zw i { font: 400 12px ui-rounded, -apple-system, system-ui, sans-serif; color: #A1A1AA; }
.lv-incard { margin-top: 8px; }

/* Новый рекорд */
.lv-reccard { padding: 14px 16px 6px; }
.lv-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 14px; }
.lv-presets button { display: grid; gap: 3px; justify-items: center; align-content: center; height: 66px; border-radius: 16px; background: #151519; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .06); transition: box-shadow .2s; }
.lv-presets b { font-size: 17px; font-weight: 500; }
.lv-presets span { font-size: 13px; color: #71717A; }
.lv-presets .is-on { box-shadow: inset 0 0 0 1.5px #CCFF00; }
.lv-presets .is-on b, .lv-presets .is-on span { color: #CCFF00; }
.lv-rows { border-top: .5px solid rgba(255, 255, 255, .07); }
.lv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; border-bottom: .5px solid rgba(255, 255, 255, .07); font-size: 17px; text-align: left; }
.lv-row:last-child { border-bottom: 0; }
.lv-row > span { color: #A1A1AA; }
.lv-row > b { display: inline-flex; align-items: center; font-weight: 400; color: #FAFAFA; }
.lv-row > b.lv-ac { color: #CCFF00; font-weight: 500; }
.lv-two { flex-direction: column; align-items: flex-end !important; text-align: right; line-height: 1.2; position: relative; padding-right: 15px; }
.lv-two em { font-size: 13px; color: #CCFF00; }
.lv-two .lv-chev { position: absolute; right: 0; top: 50%; margin-top: -6px; }
.lv-inline input { width: 72px; text-align: right; font-size: 17px; font-family: ui-rounded, -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.lv-inline small { font-size: 13px; color: #71717A; margin-left: 5px; }
.lv-vid { display: grid; gap: 12px; padding: 14px 16px; }
.lv-thumb { position: relative; width: 104px; height: 104px; border-radius: 14px; background: #2A2A32 url(../img/live-video.jpg) center / cover; }
.lv-thumb span { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 8px; background: rgba(0, 0, 0, .55); font-size: 12px; font-weight: 600; }
.lv-addv { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.lv-addv em { margin-left: auto; color: #52525B; font-size: 15px; }

/* Конструктор */
.lv-name { display: flex; align-items: center; height: 56px; padding: 0 18px; border-radius: 18px; }
.lv-name input { width: 100%; font-size: 17px; font-weight: 500; }
.lv-blocks { padding: 4px 16px; max-height: 512px; overflow-y: auto; scrollbar-width: none; }
.lv-blocks::-webkit-scrollbar { display: none; }
.lv-blk { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 14px; align-items: center; min-height: 64px; border-bottom: .5px solid rgba(255, 255, 255, .07); }
.lv-blk:last-child { border-bottom: 0; }
.lv-bi { color: #52525B; font-size: 15px; }
.lv-bt { display: grid; gap: 3px; }
.lv-bt b { font-size: 17px; font-weight: 400; }
.lv-bt em { font-size: 14px; color: #71717A; }
.lv-bn { font-size: 14px; color: #52525B; }
.lv-blk.is-new { animation: lv-new .9s ease both; }
@keyframes lv-new { from { background: rgba(204, 255, 0, .12); } }
.lv-sheet { position: absolute; inset: -60px 0 0; z-index: 5; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .5); animation: lv-fade .25s ease both; }
.lv-pane { width: 100%; padding: 8px 16px 28px; border-radius: 34px 34px 0 0; background: #1C1C22; animation: lv-up .38s cubic-bezier(.2, .9, .2, 1) both; }
.lv-grab { width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: #52525B; }
.lv-paneh { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-bottom: 4px; }
.lv-paneh b { font-size: 17px; font-weight: 600; }
.lv-opt { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t c" "s c"; align-items: center; width: 100%; min-height: 60px; padding: 8px 0; border-bottom: .5px solid rgba(255, 255, 255, .07); text-align: left; }
.lv-opt:last-child { border-bottom: 0; }
.lv-opt b { grid-area: t; font-size: 17px; font-weight: 400; }
.lv-opt em { grid-area: s; font-size: 14px; color: #71717A; }
.lv-opt .lv-chev { grid-area: c; }
@keyframes lv-fade { from { opacity: 0; } }
@keyframes lv-up { from { transform: translateY(100%); } }

/* ── Узкие экраны ── */
@media (max-width: 1023px) {
  .live-list, .live-side { grid-column: 1 / -1; }
  .live-side { order: -1; }
  .lv-phone { width: min(78vw, 360px, var(--fit-w)); }
}
@media (max-width: 600px) {
  .lv-phone { width: min(88vw, 380px, var(--fit-w)); }
  .lt { min-height: 64px; font-size: 22px; grid-template-columns: 32px minmax(0, 1fr) 20px; }
  .lp { padding-left: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-cb svg, .lv-cb, .lt::after { transition: none; }
  .lv-sheet, .lv-pane, .lv-blk.is-new { animation: none; }
}

/* Экран не прыгает: телефон прижат к верху и едет липко, пока читаешь список. */
@media (min-width: 1024px) {
  .live-in { align-items: start; }
  .live-side { position: sticky; top: 104px; }
}

/* Телефон и планшет: вместо аккордеона чипы над экраном, описание под ним.
   Нажал чип, экран сменился прямо перед глазами, ничего не схлопывается. */
@media (max-width: 1023px) {
  .live-in { display: flex; flex-wrap: wrap; gap: 8px; }
  .live-list, .lt-item { display: contents; }
  .lt { order: 1; flex: none; width: auto; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 16px; font-weight: 500; letter-spacing: 0; }
  .lt::before, .lt::after { display: none; }
  .lt[aria-expanded="true"] { background: var(--ink); color: #fff; box-shadow: none; }
  .live-side { order: 2; flex: 0 0 100%; margin-top: 24px; }
  .lp { order: 3; flex: 0 0 100%; padding: 28px 0 0; }
}

/* Экран телефона живой: нажатия, поля и галочки работают. */
.is-live .lv-screen { pointer-events: auto; }
.lv-screen input { user-select: text; -webkit-user-select: text; }
/* Рамка фокуса только для клавиатуры и мягкая, без чёрного прямоугольника после клика. */
.lt:focus { outline: none; }
.lt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); border-radius: 12px; }

/* Настоящие снимки экранов: лежат друг на друге, виден выбранный, смена мягким растворением. */
.lv-shots { display: grid; filter: none; }
.lv-shot { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.lv-shot.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.lv-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 761px) { .lv-shot img { filter: drop-shadow(0 40px 50px rgba(14, 14, 15, .26)); } }
@media (prefers-reduced-motion: reduce) { .lv-shot, .lv-shot.is-on { transition: none; } }