/* The live site (js/live.js): the product working by itself in the hero — a calendar that fills, a reminder answered in
   Telegram, a payment flying to the day's revenue; the barbershop's queue; the car board. Pains crossed out into their fix,
   the no-show calculator, sections rising in. Wears the page's theme tokens; the scene's colour is the niche demo's brand
   (--lv-accent). No libraries; under prefers-reduced-motion everything stands still. */
.lv { --lv-accent: var(--signal); --lv-row: 52px; position: relative; }
.lv-app { position: relative; border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow); overflow: hidden; color: var(--ink); }
.lv-app__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--tint); }
.lv-app__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.lv-app__top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.lv-app__logo { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--lv-accent); transition: background .5s; }
.lv-app__brand { flex: 1; min-width: 0; overflow: hidden; font: 600 14px/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.lv-app__rev { display: grid; justify-items: end; font-size: 11px; color: var(--ink-3); }
.lv-app__rev b { font: 700 18px/1.15 var(--font-display); color: var(--ink); transition: color .3s; }
.lv-app__rev b.is-up { color: var(--ok); }

/* ---- calendar ---- */
.lv-cal { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); }
.lv-cal__head { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.lv-cal__head span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-av { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--lv-accent) 15%, var(--bg));
  color: var(--lv-accent); font-size: 10px; font-weight: 700; transition: background .5s, color .5s; }
.lv-cal__rail { display: grid; grid-auto-rows: var(--lv-row); font-size: 10.5px; color: var(--ink-3); }
.lv-cal__rail span { padding: 3px 8px 0 0; text-align: right; }
.lv-cal__col { position: relative; height: calc(var(--lv-row) * 5); border-left: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lv-row) - 1px), var(--line) calc(var(--lv-row) - 1px) var(--lv-row)); }
.lv-card { position: absolute; left: 4px; right: 4px; overflow: hidden; padding: 5px 7px 5px 9px; border-radius: 8px; font-size: 11px; line-height: 1.3;
  background: color-mix(in srgb, var(--lv-accent) 10%, var(--bg)); box-shadow: inset 3px 0 0 var(--lv-accent), 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .4s, background .5s; }
.lv-card b { display: block; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.lv-card small { display: block; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.lv-card.is-new { transform: translateY(-12px) scale(.94); opacity: 0; }
.lv-card.is-paid { opacity: .55; }
.lv-card.is-online { animation: lv-glow 1.6s 2; }
@keyframes lv-glow { 50% { box-shadow: inset 3px 0 0 var(--lv-accent), 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); } }
.lv-tag { position: absolute; top: 4px; right: 5px; padding: 1px 6px; border-radius: 99px; background: var(--signal); color: #fff; font-size: 9.5px; font-weight: 700; transition: background .3s; }
.lv-tag.is-ok { background: var(--ok); }
.lv-pay { position: absolute; z-index: 3; top: 0; left: 0; padding: 6px 11px; border-radius: 99px; background: var(--ok); color: #fff; font: 700 13px/1 var(--font-display);
  box-shadow: 0 10px 24px -8px rgba(19, 128, 79, .6); opacity: 0; pointer-events: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .3s; }

/* ---- Telegram: the phone (home) or a floating chat (a niche's hero) ---- */
.lv-phone { position: absolute; right: -18px; bottom: 0; z-index: 2; width: 216px; padding: 9px; border-radius: 26px; background: #111; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55); transform: rotate(2.5deg); }
.lv-phone .lv-tg { border-radius: 19px; min-height: 236px; }
.lv-tg { display: flex; flex-direction: column; overflow: hidden; background: #dfe9f2; color: #0f0f10; }
.lv-tg__top { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: #fff; font-size: 12px; font-weight: 600; }
.lv-tg__top i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2aa3e0; color: #fff; font-size: 10.5px; font-style: normal; }
.lv-tg__top small { display: block; font-size: 10px; font-weight: 400; color: #75757d; }
.lv-tg__top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 9px; }
.lv-msg { max-width: 92%; padding: 7px 9px; border-radius: 13px 13px 13px 4px; background: #fff; font-size: 11.5px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
  transform-origin: 0 100%; transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
.lv-msg.is-me { align-self: flex-end; border-radius: 13px 13px 4px 13px; background: #e3f7d1; transform-origin: 100% 100%; }
.lv-msg.is-hidden { transform: scale(.6); opacity: 0; }
.lv-typing { display: inline-flex; gap: 3px; }
.lv-typing i { width: 5px; height: 5px; border-radius: 50%; background: #75757d; animation: lv-dots 1s infinite; }
.lv-typing i:nth-child(2) { animation-delay: .15s; } .lv-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lv-dots { 50% { transform: translateY(-3px); opacity: .5; } }
.lv-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 9px 9px; transition: opacity .3s; }
.lv-kb span { position: relative; display: grid; place-items: center; height: 28px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .85); color: #2a7ab8; font-size: 11px; font-weight: 600; }
.lv-kb span.is-tap::after, .lv-btn.is-tap::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  background: rgba(42, 122, 184, .35); animation: lv-ripple .6s forwards; }
@keyframes lv-ripple { to { transform: scale(14); opacity: 0; } }
.lv-kb.is-hidden { opacity: 0; }
/* a niche's hero: the chat floats over the illustration */
/* above the app, over the illustration: it never hides the calendar */
.lv-float { position: absolute; left: -14px; bottom: calc(100% - 52px); z-index: 2; width: 220px; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); transform: rotate(-2deg); }
.lv-float .lv-chat { min-height: 120px; }

/* ---- the barbershop's queue ---- */
.lv-q { display: grid; gap: 12px; padding: 14px; }
.lv-q__stats { display: flex; gap: 8px; }
.lv-q__stat { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--tint); font-size: 10.5px; color: var(--ink-3); }
.lv-q__stat b { display: block; font: 700 20px/1.1 var(--font-display); color: var(--ink); }
.lv-q__stat--main { background: var(--lv-accent); color: color-mix(in srgb, #fff 80%, transparent); }
.lv-q__stat--main b { color: #fff; }
.lv-q__body { display: grid; gap: 10px; }
@media (min-width: 520px) { .lv-q__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.lv-q__title { margin-bottom: 6px; font: 600 11px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lv-q__list { display: grid; gap: 6px; align-content: start; }
.lv-tk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; background: var(--tint);
  border: 1px solid var(--line); transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s, border-color .3s; }
.lv-tk__no { display: grid; place-items: center; min-width: 38px; height: 32px; border-radius: 7px; background: var(--tint-2); font: 700 16px/1 var(--font-display); }
.lv-tk__no::before { content: '№'; margin-right: 1px; font-size: 9px; color: var(--ink-3); }
.lv-tk__who { min-width: 0; }
.lv-tk__who b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lv-tk__who small { display: block; overflow: hidden; font-size: 10.5px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.lv-tk__eta { font: 700 12.5px/1 var(--font-display); text-align: right; white-space: nowrap; color: var(--lv-accent); }
.lv-tk__eta small { display: block; font: 400 10px/1.4 var(--font-body); color: var(--ink-3); }
.lv-tk.is-now { border-color: var(--ok); } .lv-tk.is-now .lv-tk__eta { color: var(--ok); }
.lv-tk.is-gone { opacity: 0; transform: translateX(36px) scale(.9); }
.lv-tk.is-new { opacity: 0; transform: translateY(12px); }
.lv-ch { display: grid; gap: 5px; padding: 8px 10px; border-radius: 9px; background: var(--tint); border: 1px solid var(--line); transition: border-color .4s; }
.lv-ch__head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.lv-ch__head i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lv-c); }
.lv-ch__state { margin-left: auto; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--lv-accent) 18%, var(--bg)); color: var(--lv-accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.lv-ch.is-free { border-color: var(--ok); } .lv-ch.is-free .lv-ch__state { background: color-mix(in srgb, var(--ok) 15%, var(--bg)); color: var(--ok); }
.lv-ch__now { font-size: 11px; color: var(--ink-2); }
.lv-ch__bar { height: 4px; overflow: hidden; border-radius: 9px; background: var(--tint-2); }
.lv-ch__bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lv-accent); }
.lv-btn { position: relative; justify-self: start; overflow: hidden; padding: 5px 11px; border: 0; border-radius: 7px; background: var(--lv-accent); color: #fff; font: 700 11px/1.3 var(--font-body); }

/* ---- the car board ---- */
.lv-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.lv-lane { display: grid; align-content: start; gap: 6px; min-height: 250px; padding: 8px; border-radius: 10px; background: var(--tint); }
.lv-lane__title { display: flex; justify-content: space-between; gap: 4px; padding: 2px 2px 4px; font: 600 11.5px/1.2 var(--font-display); color: var(--ink-2); }
.lv-lane__title b { display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 99px; background: var(--tint-2); font-size: 10.5px; }
.lv-lane--done { background: color-mix(in srgb, var(--ok) 9%, var(--bg)); } .lv-lane--done .lv-lane__title b { color: var(--ok); }
.lv-car { display: grid; gap: 3px; padding: 7px 8px; border-radius: 9px; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--line); font-size: 10.5px; will-change: transform; }
.lv-plate { justify-self: start; display: inline-flex; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1.5px #1d2733; font: 700 11px/1 var(--font-display); letter-spacing: .02em; color: #0f0f10; }
.lv-plate i { width: 7px; background: #0b6bcb; } .lv-plate span { padding: 3px 5px; background: #fff; }
.lv-car small { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.lv-car b { justify-self: start; padding: 1px 6px; border-radius: 99px; background: color-mix(in srgb, var(--lv-accent) 13%, var(--bg)); color: var(--lv-accent); font-size: 10px; }
.lv-notify { position: absolute; left: -14px; bottom: calc(100% - 40px); z-index: 2; display: flex; gap: 9px; width: 230px; padding: 11px 12px; border-radius: 15px; background: #fff; color: #0f0f10;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .06); font-size: 12px; opacity: 0; transform: translateY(14px);
  transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
.lv-notify.is-on { opacity: 1; transform: none; }
.lv-notify i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2aa3e0; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.lv-notify b { display: block; font-size: 11.5px; }

/* ---- the hero: home's stage and a niche's showcase ---- */
.lv-stage { position: relative; padding: 0 0 190px; }   /* the phone hangs below the calendar: the room is the stage's, so nothing after it runs under the phone */
.lv-stage .lv-app { max-width: 600px; }
@media (max-width: 959px) { .lv-phone { position: relative; right: auto; bottom: auto; margin: -70px 6px 0 auto; } .lv-stage { padding: 0; } }
.showcase--live .lv-app { width: 84%; margin: -38% 0 0 auto; }
.showcase--live:not(.showcase--art) .lv-app { width: 100%; margin: 0; }
@media (max-width: 559px) { .showcase--live .lv-app { width: 100%; margin-top: -24%; } .lv-float, .lv-notify { left: 6px; bottom: calc(100% - 26px); width: 190px; }
  /* a narrow column: the word would cover the name — a dot (online), then a tick (confirmed) */
  .lv-tag { top: 5px; right: 5px; width: 15px; height: 15px; padding: 0; font-size: 0; display: grid; place-items: center; }
  .lv-tag.is-ok::after { content: '✓'; font-size: 10px; line-height: 1; } }
/* no illustration above: the chat sits at the app's corner */
.showcase--live:not(.showcase--art) .lv-float, .showcase--live:not(.showcase--art) .lv-notify { bottom: auto; top: 40%; }

/* the rotating word of the home title */
.lv-rot { position: relative; display: inline-flex; height: 1.08em; overflow: hidden; vertical-align: bottom; color: var(--lv-word, var(--signal)); transition: width .55s cubic-bezier(.2, .8, .2, 1), color .55s; }
.lv-rot__word { display: block; white-space: nowrap; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.lv-rot__word.is-out { transform: translateY(-105%); opacity: 0; }
.lv-rot__word.is-in { transform: translateY(105%); opacity: 0; }

/* ---- pains crossed out into their fix ---- */
.pain--fix { display: grid; gap: 12px; align-content: start; }
.pain--fix .pain__was { position: relative; justify-self: start; display: flex; gap: 12px; align-items: flex-start; }
.pain__now { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 16px; }
.pain__now::before { content: '✓'; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 12px; }
/* the line runs through the text line by line (an inline background is drawn across its line boxes) */
.js-live .pain--fix .pain__was span { background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 60% / 0 2px; transition: background-size 1.1s cubic-bezier(.4, 0, .2, 1), color .5s; }
.js-live .pain--fix .pain__now { opacity: 0; transform: translateY(10px); transition: opacity .5s .5s, transform .6s .5s cubic-bezier(.2, .8, .2, 1); }
.js-live .pain--fix.is-solved .pain__was span { background-size: 100% 2px; color: var(--ink-3); }
.js-live .pain--fix.is-solved .pain__now { opacity: 1; transform: none; }
.js-live .pain--fix:nth-child(2) .pain__was span { transition-delay: .15s; } .js-live .pain--fix:nth-child(3) .pain__was span { transition-delay: .3s; }
.pains__solved { color: var(--ink-3); }

/* ---- the no-show calculator ---- */
.lv-calc { display: grid; gap: 26px; padding: 28px 22px; border: 1px solid var(--dark-line); border-radius: 22px; background: var(--dark); color: var(--on-dark); }
@media (min-width: 900px) { .lv-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 44px; } }
.lv-calc__in { display: grid; gap: 20px; }
.lv-range { display: grid; gap: 8px; }
.lv-range__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--dark-ink-2); }
.lv-range__top b { font: 700 18px/1 var(--font-display); color: var(--on-dark); }
.lv-range input { width: 100%; height: 22px; accent-color: var(--signal); }
.lv-calc__out { display: grid; gap: 10px; justify-items: start; }
.lv-calc__out small { font-size: 14px; color: var(--dark-ink-2); }
.lv-calc__big { font: 700 clamp(42px, 7vw, 74px)/1 var(--font-display); letter-spacing: -.03em; color: color-mix(in srgb, var(--signal) 75%, #fff); }
.lv-calc__note { max-width: 30em; font-size: 15px; color: var(--dark-ink-2); }
.lv-calc__note b { color: var(--on-dark); }

/* sections rise in once */
.js-live .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
.js-live .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lv *, .lv *::before, .lv *::after, .pain--fix *, .rv, .lv-rot * { animation: none !important; transition: none !important; }
  .js-live .rv { opacity: 1; transform: none; }
  .js-live .pain--fix .pain__now { opacity: 1; transform: none; }
}

/* ---------- «примерьте на себя»: the visitor's name and colour on the live scene ---------- */
.tryon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -22px rgba(15, 15, 16, .5); }
.tryon[hidden] { display: none; }
.tryon__field { display: grid; gap: 6px; min-width: 0; }
.tryon__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.tryon__label .ic { color: var(--signal); }
.tryon__input { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
  font: 600 16px var(--font-display); transition: border-color .15s, box-shadow .15s; }
.tryon__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); }
.tryon__colors { display: grid; grid-template-columns: repeat(5, 22px); gap: 6px; align-self: end; padding-bottom: 6px; }
.tryon__sw { width: 22px; height: 22px; border-radius: 99px; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); transition: transform .12s; cursor: pointer; }
.tryon__sw:hover { transform: scale(1.15); }
.tryon__sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw); }
.tryon__cta { grid-column: 1 / -1; min-height: 42px; animation: tryon-in .35s ease both; }
.tryon__cta[hidden] { display: none; }
.tryon__hint { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-3); }
.tryon.is-mine .tryon__hint { display: none; }
@keyframes tryon-in { from { opacity: 0; transform: translateY(4px); } }
.hero--niche .tryon, .hero:not(.hero--niche) .tryon { max-width: 560px; }
@media (min-width: 960px) {
  .hero__grid > .tryon { grid-column: 2; margin-top: -36px; justify-self: center; width: min(560px, 100%); }
}

/* ---------- «прямо сейчас в демо»: the demos' real numbers running by ---------- */
.pulse { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); overflow: hidden; }
.pulse[hidden] { display: none; }
.pulse__live { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pulse__live i { width: 8px; height: 8px; border-radius: 99px; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: pulse-dot 1.6s ease-out infinite; }
@keyframes pulse-dot { 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.pulse__track { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.pulse__row { display: flex; width: max-content; gap: 8px; animation: pulse-run calc(var(--n, 6) * 6s) linear infinite; }
.pulse:hover .pulse__row, .pulse:focus-within .pulse__row { animation-play-state: paused; }
@keyframes pulse-run { to { transform: translateX(-50%); } }
.pulse__item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--tint); font-size: 13px; white-space: nowrap; color: var(--ink-2); transition: background .15s; }
.pulse__item b { color: var(--ink); font-weight: 700; }
.pulse__item:hover { background: var(--tint-2); }
@media (prefers-reduced-motion: reduce) {
  .pulse__row { animation: none; flex-wrap: wrap; width: auto; }
  .pulse__live i { animation: none; }
}

/* ---- the hall (a club, a field): places with their timer rings ---- */
.lv-floor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; background: var(--tint); }
.lv-ft { --c: var(--ink-3); position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 3px;
  padding: 9px 10px; border-radius: 12px; background: var(--bg); box-shadow: inset 3px 0 0 var(--c), 0 1px 2px rgba(0, 0, 0, .05); overflow: hidden; transition: box-shadow .3s, transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.lv-ft.is-free { --c: #16a34a; }
.lv-ft.is-busy { --c: var(--lv-accent); }
.lv-ft.is-open { --c: var(--signal); }
.lv-ft.is-soon { --c: #d97706; }
.lv-ft.is-over { --c: #dc2626; animation: lv-over 1s ease-in-out infinite; }
@keyframes lv-over { 50% { box-shadow: inset 3px 0 0 #dc2626, 0 0 0 3px rgba(220, 38, 38, .22); } }
.lv-ft.is-pop { transform: scale(1.04); }
.lv-ft__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-ft__head b { flex: 1; min-width: 0; overflow: hidden; font: 650 12px/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.lv-ft__badge { flex: none; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--c) 14%, var(--bg)); color: var(--c); font-size: 9.5px; font-weight: 700; }
.lv-ft.is-over .lv-ft__badge { background: #dc2626; color: #fff; }
.lv-ft__ring { position: relative; grid-row: 2 / 4; width: 64px; height: 64px; }
.lv-ft__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lv-ft__track { fill: none; stroke: var(--tint-2, #ececea); stroke-width: 8; }
.lv-ft__arc { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s linear, stroke .3s; }
.lv-ft.is-free .lv-ft__arc { stroke-dasharray: 2 4; stroke-dashoffset: 0 !important; opacity: .5; }
.lv-ft__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lv-ft__time { font: 700 11.5px/1.1 var(--font-display); letter-spacing: -.02em; }
.lv-ft.is-free .lv-ft__time { font-size: 10px; color: #16a34a; }
.lv-ft.is-over .lv-ft__time { color: #dc2626; }
.lv-ft__sub { max-width: 54px; font-size: 8.5px; line-height: 1.15; color: var(--ink-3); }
.lv-ft.is-open .lv-ft__sub { color: color-mix(in srgb, var(--signal) 70%, var(--ink)); font-weight: 700; font-size: 10px; }
.lv-ft__who { align-self: end; overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lv-ft__chip { align-self: start; justify-self: start; max-width: 100%; overflow: hidden; padding: 1px 7px; border-radius: 99px; background: var(--tint); font-size: 10px; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.lv-ft__chip:empty { display: none; }
.lv-ft__chip.is-pop { animation: lv-chip .6s cubic-bezier(.34, 1.4, .64, 1); background: color-mix(in srgb, var(--signal) 18%, var(--bg)); color: var(--ink); }
@keyframes lv-chip { 40% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .lv-ft.is-over { animation: none; } .lv-ft { transition: none; } }

/* a dark niche hero (court, road, campus, energy): the app in it stays the app — light, with its own ink */
:root[data-theme="energy"] .hero--niche .lv, :root[data-theme="campus"] .hero--niche .lv,
:root[data-theme="court"] .hero--niche .lv, :root[data-theme="road"] .hero--niche .lv {
  --ink: #0f0f10; --ink-2: #55555c; --ink-3: #75757d; --line: #e8e8e6; --line-strong: #d6d6d9; --bg: #ffffff; color: var(--ink);
}

/* ---- a field's or a court's tile: the ground from above with the scoreboard over it ---- */
.lv-ft--pitch { grid-template-columns: 1fr; padding: 8px; }
.lv-pitch { position: relative; aspect-ratio: 200 / 118; border-radius: 9px; overflow: hidden; isolation: isolate; }
.lv-ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-ground .g-line, .lv-ground .g-glass { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lv-ground--football .g-base { fill: #2f8f46; } .lv-ground--football .g-stripe { fill: rgba(255, 255, 255, .07); }
.lv-ground .g-goal { fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lv-ground--padel .g-base { fill: #0f3f73; } .lv-ground--padel .g-court { fill: #1f6fbf; } .lv-ground--padel .g-glass { stroke: rgba(186, 230, 253, .85); stroke-width: 2.5; }
.lv-ground--tennis .g-base { fill: #2c7a4b; } .lv-ground--tennis .g-court { fill: #2f5fbd; }
.lv-ground .g-net { stroke: #f8fafc; stroke-width: 2; stroke-dasharray: 2 1.5; vector-effect: non-scaling-stroke; }
.lv-ft--pitch.is-free .lv-ground { filter: saturate(.55) brightness(1.08); }
.lv-ft--pitch.is-over .lv-pitch::after { content: ""; position: absolute; inset: 0; background: rgba(220, 38, 38, .32); animation: lv-blink 1s ease-in-out infinite; }
@keyframes lv-blink { 50% { opacity: .35; } }
.lv-ft--pitch .lv-ft__who { position: absolute; z-index: 1; top: 5px; left: 50%; transform: translateX(-50%); max-width: 90%; padding: 1px 8px; border-radius: 99px;
  background: rgba(10, 20, 14, .55); color: #fff; font-size: 10px; }
.lv-ft--pitch .lv-ft__who:empty { display: none; }
.lv-pitch__board { position: absolute; z-index: 1; left: 50%; top: 56%; transform: translate(-50%, -50%); display: grid; justify-items: center; padding: 3px 8px 4px; border-radius: 7px; background: rgba(8, 12, 10, .8); }
.lv-pitch__board .lv-ft__time { font: 700 13px/1.05 ui-monospace, "SF Mono", Consolas, monospace; color: #fef08a; }
.lv-pitch__board .lv-ft__sub { max-width: none; font-size: 8px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.lv-ft--pitch.is-free .lv-pitch__board .lv-ft__time { font: 700 10px/1.2 var(--font-display); color: #bbf7d0; }
.lv-ft--pitch.is-over .lv-pitch__board .lv-ft__time { color: #fecaca; }
.lv-ft--pitch.is-open .lv-pitch__board .lv-ft__sub { color: #fde68a; font-weight: 700; }
.lv-pitch__time { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, .35); }
.lv-pitch__time i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a3e635, #fef08a); transition: width .3s linear; }
.lv-ft--pitch .lv-ft__chip { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .lv-ft--pitch.is-over .lv-pitch::after { animation: none; } }

/* ---- a computer club's map: the zones, the seats lit while played on, a balance's toast ---- */
.lv-map { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; padding: 10px; background: var(--tint); }
.lv-zone { display: grid; align-content: start; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.lv-zone__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
.lv-zone__head b { font: 700 12.5px/1.2 var(--font-display); }
.lv-zone__price { padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--lv-accent) 16%, var(--bg)); color: color-mix(in srgb, var(--lv-accent) 70%, var(--ink)); font-size: 9.5px; font-weight: 700; }
.lv-zone__count { margin-left: auto; font-size: 9.5px; color: var(--ink-3); }
.lv-seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 5px; }
.lv-zone--side .lv-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a seat is a computer, as in the CRM: a dark monitor on its stand, its screen lit while played on */
.lv-seat { --c: #64717e; --scr: #05080b; display: grid; justify-items: center; min-width: 0; color: #eef4f1; transition: transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.lv-seat.is-busy { --c: var(--lv-accent); }
.lv-seat.is-open { --c: #38bdf8; }
.lv-seat.is-soon { --c: #d97706; }
.lv-seat.is-over { --c: #dc2626; }
.lv-seat__mon { position: relative; width: 100%; min-width: 0; padding: 2px 2px 6px; border-radius: 6px; background: linear-gradient(180deg, #1b222b, #10151b 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .3s; }
.lv-seat__mon::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 2px; border-radius: 2px; transform: translateX(-50%); background: #2b3540; }
.lv-seat__screen { position: relative; display: grid; aspect-ratio: 3 / 2; min-width: 0; padding: 4px 5px 6px; overflow: hidden; border-radius: 4px; background: var(--scr); }
.lv-seat__screen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0 24%, transparent 24.5%); }
.lv-seat__stand { position: relative; width: 44%; height: 8px; }
.lv-seat__stand::before { content: ""; position: absolute; left: 50%; top: 0; width: 8px; height: 6px; transform: translateX(-50%); background: #1b232c; clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); }
.lv-seat__stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #1b232c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.lv-seat:is(.is-busy, .is-open, .is-soon, .is-over) .lv-seat__screen { background: radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 64%),
  linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--scr)), var(--scr) 88%); }
.lv-seat:is(.is-busy, .is-open, .is-soon, .is-over) .lv-seat__screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: var(--c); opacity: .15;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V27l13-9 9 6 15-14 13 10 11-7 15 12 12-8 13 9 19-11v25z'/%3E%3C/svg%3E") 0 100% / 170% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V27l13-9 9 6 15-14 13 10 11-7 15 12 12-8 13 9 19-11v25z'/%3E%3C/svg%3E") 0 100% / 170% 100% no-repeat; }
.lv-seat:is(.is-busy, .is-open, .is-soon, .is-over) .lv-seat__mon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent), 0 10px 18px -10px var(--c); }
.lv-seat:is(.is-busy, .is-open, .is-soon, .is-over) .lv-seat__mon::after { background: var(--c); box-shadow: 0 0 5px var(--c); }
.lv-seat.is-over .lv-seat__mon { animation: lv-seat-over 1s ease-in-out infinite; }
@keyframes lv-seat-over { 50% { box-shadow: 0 0 0 2px #dc2626, 0 0 18px -2px #dc2626; } }
.lv-seat.is-down .lv-seat__screen { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 5px, rgba(255, 255, 255, .06) 5px 10px), var(--scr); }
.lv-seat.is-down .lv-seat__mon::after { background: #dc2626; }
.lv-seat.is-pop { transform: scale(1.08); }
.lv-seat__no, .lv-seat__time, .lv-seat__who { position: relative; z-index: 1; }
.lv-seat__no { font: 800 12px/1 ui-monospace, "SF Mono", Consolas, monospace; color: color-mix(in srgb, var(--c) 72%, #ffffff); }
.lv-seat:is(.is-free, .is-down) .lv-seat__no { color: #64717e; }
.lv-seat__time { font: 700 9.5px/1.15 ui-monospace, "SF Mono", Consolas, monospace; color: #f3f8f6; }
.lv-seat:is(.is-free, .is-down) .lv-seat__time { font: 600 8.5px/1.15 var(--font-body, inherit); color: #8693a0; }
.lv-seat.is-over .lv-seat__time { color: #fecaca; }
.lv-seat__who { overflow: hidden; font-size: 8px; color: rgba(226, 236, 232, .72); text-overflow: ellipsis; white-space: nowrap; }
.lv-seat__bar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--c) 18%, transparent); }
.lv-seat__bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .3s linear; }
.lv-map__toast { position: absolute; left: 50%; bottom: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 99px; background: var(--ink); color: var(--bg);
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.4, .64, 1); pointer-events: none; }
.lv-map__toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 420px) { .lv-map { grid-template-columns: 1fr; } .lv-zone--side .lv-seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .lv-seat.is-over .lv-seat__mon { animation: none; } .lv-seat, .lv-map__toast { transition: none; } }