/* ============ live build: real phones + the venue screen (on top of the mockup's design system) ============ */
@font-face { font-family: 'Inter'; src: url(/fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
[hidden] { display: none !important; }

/* ---------------- phone page ---------------- */
.phone-page { background: #000; overscroll-behavior: none; touch-action: manipulation; }
.phone-page .pv { position: fixed; inset: 0; max-width: 560px; margin: 0 auto; padding-top: max(10px, env(safe-area-inset-top)); }
.phone-page .pv-head { padding-top: 8px; }
.phone-page .pv-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.phone-page .viewer { height: min(46vh, 300px); }
.phone-page .push { top: max(12px, env(safe-area-inset-top)); }
.phone-page .av { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 17px; font-weight: 700; color: #fff; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); flex: none; }
.phone-page .av.big { width: 52px; height: 52px; font-size: 22px; }
.pill [data-tm] { font-variant-numeric: tabular-nums; }
.pill [data-tm].low { color: var(--orange); }
.tu { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255,159,10,.14); color: #ffb340; font-size: 13.5px; font-weight: 600; animation: msgIn .4s var(--ease) both; }
.room-n { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border-radius: 14px; background: var(--fill3); color: var(--cp-text-soft); font-size: 14px; font-weight: 600; }
.pricebar .ready { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 20px; background: rgba(48,209,88,.14); color: #4ee07a; font-size: 13px; font-weight: 600; white-space: nowrap; }
.you-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 14px; }
.you-card b { display: block; font-size: 16px; } .you-card small { display: block; font-size: 12.5px; color: var(--l2); margin-top: 1px; }
.join-art { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; margin: 18px 0 16px; color: #fff; background: linear-gradient(140deg, #0a84ff, #5e5ce6 55%, #bf5af2); box-shadow: 0 16px 40px rgba(94,92,230,.35); }
.field-in { display: flex; align-items: center; height: 50px; padding: 0 14px; border-radius: 13px; background: var(--cp-surface); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.field-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--cp-text); font: 600 17px var(--font); }
.field-in input::placeholder { color: var(--l3); font-weight: 500; }
.field-in input:disabled { opacity: .4; }
#jCode { letter-spacing: .3em; text-transform: uppercase; }
.fine { text-align: center; font-size: 12px; color: var(--l3); margin-top: 8px; }
.card.hl { padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 7px; }
.card.hl div { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; color: var(--cp-text-soft); }
.card.hl .sym { color: #bf5af2; flex: none; margin-top: 1px; }
.writing { animation: bob 1.6s ease-in-out infinite; margin-bottom: 12px; }
.typing.r { align-self: flex-end; }
.sigpad.inked .ph { opacity: 0; }
.inputbar .in input:disabled { opacity: .45; }
#toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 90; max-width: min(92vw, 420px); padding: 11px 18px; border-radius: 16px; background: rgba(58,58,62,.94); backdrop-filter: blur(20px); color: #fff; font: 600 14.5px var(--font); text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--spring); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#net { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 95; padding: 6px 14px; border-radius: 14px; background: rgba(255,69,58,.92); color: #fff; font: 600 13px var(--font); opacity: 0; pointer-events: none; transition: opacity .3s; }
#net.on { opacity: 1; }
.live-pv .chat { padding-bottom: 6px; }
.live-pv .msg { max-width: 88%; }
.chat > .it { display: contents; }
.tg .ic { flex: none; }
@media (min-width: 600px) { .phone-page { background: radial-gradient(1200px 700px at 50% 0%, #121226, #000); } .phone-page .pv { box-shadow: 0 0 0 1px rgba(255,255,255,.06); } }

/* ---------------- big screen (host) ---------------- */
.host-page { background: #000; cursor: default; }
.host-page:not(.awake) { cursor: none; }
.lv-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #000; }
.lv-bswrap { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transition: transform .9s var(--ease); z-index: 2; }
.lv-bswrap .bs { transition: border-radius .9s var(--ease); }
.lv-bswrap .bs.full { border-radius: 0; box-shadow: none; }
.lv-stage.guided .lv-bswrap { transform: translate(556px, 132px) scale(.6875); }
.lv-guide, .lv-top, .lv-foot { opacity: 0; pointer-events: none; transition: opacity .6s var(--ease), transform .8s var(--ease); }
.lv-stage.guided .lv-guide, .lv-stage.guided .lv-top, .lv-stage.guided .lv-foot { opacity: 1; pointer-events: auto; }
.lv-guide { position: absolute; left: 44px; top: 112px; width: 470px; height: 930px; display: flex; flex-direction: column; align-items: center; transform: translateX(-30px); }
.lv-stage.guided .lv-guide { transform: none; }
.lv-glabel { width: 100%; min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; text-align: center; margin-bottom: 10px; }
.lv-glabel b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.2; }
.lv-gstep { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tA, #0a84ff); }
.lv-guide .iphone { transform: scale(.86); transform-origin: top center; margin-bottom: -121px; }
.lv-gjoin { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 9px 16px 9px 9px; border-radius: 18px; background: rgba(44,44,46,.62); box-shadow: inset 0 0 0 1px var(--glass-stroke); }
.lv-gjoin:empty { display: none; }
.lv-gjoin img { width: 62px; height: 62px; border-radius: 10px; background: #fff; padding: 5px; }
.lv-gjoin b { display: block; font-size: 17px; } .lv-gjoin small { display: block; font-size: 15px; color: var(--l2); }
.lv-tap { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.28); box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 6px 20px rgba(0,0,0,.4); opacity: 0; z-index: 70; pointer-events: none; transition: left .45s var(--ease), top .45s var(--ease), opacity .3s; }
.lv-tap.on { opacity: 1; }
.lv-tap.tap { animation: lvTap .5s var(--ease); }
@keyframes lvTap { 40% { transform: scale(.72); background: rgba(255,255,255,.55); } }
.lv-pressed { filter: brightness(1.35); transform: scale(.97); transition: transform .15s, filter .15s; }
#gPv { pointer-events: none; }
.lv-top { position: absolute; left: 44px; right: 44px; top: 28px; height: 72px; display: flex; align-items: center; gap: 22px; z-index: 3; }
.lv-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.lv-brand b { display: block; font-size: 22px; font-weight: 700; } .lv-brand small { display: block; font-size: 15px; color: var(--l2); }
.lv-rail { flex: 1; display: flex; justify-content: center; gap: 8px; min-width: 0; }
.lv-rail span { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-radius: 21px; font-size: 17px; font-weight: 600; color: var(--l3); background: rgba(255,255,255,.04); white-space: nowrap; transition: all .4s var(--ease); }
.lv-rail span.done { color: var(--l2); }
.lv-rail span.on { color: #fff; background: rgba(10,132,255,.22); box-shadow: inset 0 0 0 1px rgba(10,132,255,.6); }
.lv-join { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-radius: 26px; background: rgba(44,44,46,.62); box-shadow: inset 0 0 0 1px var(--glass-stroke); font-size: 19px; color: var(--l2); }
.lv-join b { color: #fff; font-size: 24px; letter-spacing: .14em; }
.lv-foot { position: absolute; left: 556px; right: 44px; top: 908px; height: 120px; display: flex; align-items: center; gap: 14px; z-index: 3; }
.lv-run { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff6961; margin-right: 6px; white-space: nowrap; }
.lv-f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 16px; border-radius: 20px; background: rgba(28,28,30,.86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.lv-f b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; } .lv-f small { display: block; font-size: 14.5px; color: var(--l2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-black { position: absolute; inset: 0; background: #000; z-index: 100; }
.bs-pill.low { color: var(--orange); } .bs-pill.done { color: #ff6961; }
.lv-code { letter-spacing: .12em; }
.lv-ic-users::before { content: ''; display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat; vertical-align: -4px; }

/* scene helpers */
.lv-sim { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(255,214,10,.14); color: #ffd60a; font-size: 15px; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; white-space: nowrap; }
.lv-real { font-style: normal; color: #4ee07a; font-weight: 700; } .lv-simi { font-style: normal; color: #ffd60a; font-weight: 600; }
.lv-wait { height: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.lv-wait p { font-size: 30px; color: var(--l2); margin: 0; max-width: 760px; }
.lv-wait > svg { animation: bob 2.4s ease-in-out infinite; }
.lv-dots { display: inline-flex; gap: 8px; } .lv-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--l2); animation: blink 1.2s infinite both; } .lv-dots i:nth-child(2) { animation-delay: .2s; } .lv-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.lv-soft { color: var(--l2); font-style: normal; }
.lv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--l3); font-size: 20px; height: 100%; }
.sr-card.lv-ghost { opacity: .18; }
.lv-last { display: flex; flex-direction: column; gap: 10px; }
.lv-last > div { display: flex; align-items: flex-start; gap: 12px; font-size: 22px; line-height: 1.35; color: var(--cp-text-soft); }
.lv-last > div.me { color: #9ccaff; }
.lv-last > div > span:last-child { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-intro { font-size: 18px; color: #3a3a3c; margin: 0 0 12px; line-height: 1.4; }
.lv-why { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 21px; line-height: 1.35; color: var(--cp-text-soft); }
.lv-why .sym { color: #bf5af2; flex: none; margin-top: 3px; }
.nbo .o.lv-pick { box-shadow: inset 0 0 0 2px rgba(191,90,242,.7); border-radius: 18px; }
.lv-tonight { position: absolute; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 19px; background: rgba(255,69,58,.9); color: #fff; font-size: 17px; font-weight: 700; z-index: 3; }
.cv-card.lv-on { box-shadow: 0 0 0 3px rgba(10,132,255,.9), 0 20px 50px rgba(0,0,0,.4); }
.nd.lv-dash { border: 2px dashed rgba(255,214,10,.45); background: rgba(28,28,30,.7); }
#mpSvg path.lv-dashp { stroke-dasharray: .015 .012; }
.lv-end { display: grid; grid-template-columns: 1fr 640px; gap: 60px; height: 100%; align-items: center; }
.lv-end .monday { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lv-endcard { position: relative; height: 640px; border-radius: 40px; overflow: hidden; }
.lv-endcard canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* control bar */
.lv-bar { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 150; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 26px; background: rgba(36,36,38,.78); backdrop-filter: blur(30px) saturate(1.6); box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.14); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); font-family: var(--font); }
.awake .lv-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lv-bar button { height: 44px; min-width: 44px; padding: 0 13px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; background: rgba(255,255,255,.08); font: 600 15px var(--font); }
.lv-bar button:hover { background: rgba(255,255,255,.16); }
.lv-bar button:disabled { opacity: .35; }
.lv-bar button.prom { background: var(--blue); padding: 0 14px 0 18px; }
.lv-bar button.warn { background: #ff9f0a; color: #000; }
.lv-bar button.on { background: rgba(10,132,255,.3); }
.lv-bstep { display: flex; flex-direction: column; padding: 0 12px; min-width: 150px; }
.lv-bstep b { font-size: 15px; color: #fff; } .lv-bstep small { font-size: 12.5px; color: var(--l2); font-variant-numeric: tabular-nums; }
.lv-sep { width: 1px; height: 26px; background: rgba(255,255,255,.14); margin: 0 4px; }

/* settings sheet */
.lv-sheet { position: fixed; top: 14px; right: 14px; bottom: 14px; width: 500px; z-index: 200; border-radius: 26px; background: rgba(28,28,30,.9); backdrop-filter: blur(40px) saturate(1.8); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.14); color: #fff; font-family: var(--font); overflow: hidden; animation: lvSheet .45s var(--ease); }
@keyframes lvSheet { from { transform: translateX(40px); opacity: 0; } }
.lv-sh { height: 100%; display: flex; flex-direction: column; }
.lv-shh { position: relative; padding: 20px 22px 14px; box-shadow: inset 0 -.5px 0 var(--sep); }
.lv-shh b { display: block; font-size: 22px; font-weight: 700; } .lv-shh small { font-size: 13.5px; color: var(--l2); }
.lv-x { position: absolute; right: 16px; top: 18px; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.lv-shb { flex: 1; overflow-y: auto; padding: 6px 16px 30px; scrollbar-width: thin; }
.lv-grp { margin-top: 18px; }
.lv-gh { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--l2); padding: 0 8px 7px; }
.lv-gh2 { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--l2); margin: 14px 2px 8px; }
.lv-card { border-radius: 14px; background: rgba(58,58,60,.55); padding: 4px 0; }
.lv-card > .lv-seg, .lv-card > #genBox, .lv-card > .lv-note { margin: 8px 12px; }
.lv-row { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 14px; }
.lv-row + .lv-row { box-shadow: inset 0 .5px 0 var(--sep); }
.lv-ri { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill3); color: var(--cp-text-soft); flex: none; }
.lv-rt { flex: 1; min-width: 0; } .lv-rt b { display: block; font-size: 15.5px; font-weight: 500; } .lv-rt small { display: block; font-size: 12.5px; color: var(--l2); line-height: 1.3; }
.lv-sub { margin: 0 12px 6px 54px; border-radius: 10px; background: rgba(0,0,0,.18); }
.lv-sub .lv-row { min-height: 40px; padding: 4px 12px; } .lv-sub .lv-rt b { font-size: 14px; }
.lv-step { display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; background: rgba(118,118,128,.24); padding: 2px; }
.lv-step button { width: 38px; height: 30px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: 500; }
.lv-step button:hover { background: rgba(255,255,255,.1); }
.lv-step b { min-width: 58px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.lv-seg { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(118,118,128,.24); }
.lv-seg button { flex: 1; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #fff; font: 600 14.5px var(--font); white-space: nowrap; overflow: hidden; }
.lv-seg button.on { background: #636366; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.lv-seg.big button { height: 50px; font-size: 17px; }
.lv-note { font-size: 12.5px; color: var(--l2); line-height: 1.4; padding: 7px 8px 0; }
.lv-note.red { color: #ff6961; }
.lv-in { display: flex; height: 44px; margin-bottom: 8px; padding: 0 12px; border-radius: 11px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); }
.lv-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 500 15px var(--font); }
.lv-try { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.lv-try button { height: 30px; padding: 0 11px; border-radius: 15px; background: rgba(255,255,255,.08); color: var(--cp-text-soft); font: 500 13px var(--font); }
.lv-act { width: 100%; height: 46px; margin: 4px 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.1); color: #fff; font: 600 15px var(--font); }
.lv-card > .lv-act { width: calc(100% - 24px); margin: 6px 12px; }
.lv-act.blue { background: var(--blue); } .lv-act.red { color: #ff6961; }
.lv-act:disabled { opacity: .5; }
.lv-gen { display: flex; flex-direction: column; gap: 7px; margin: 10px 2px 4px; font-size: 14px; color: var(--l3); }
.lv-gen div { display: flex; align-items: center; gap: 8px; } .lv-gen .ok { color: #4ee07a; } .lv-gen .on { color: #fff; } .lv-gen small { color: var(--l2); }
.lv-prev { display: flex; gap: 12px; margin: 12px 2px 4px; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.25); }
.lv-prev b { display: block; font-size: 15.5px; } .lv-prev small { display: block; font-size: 12.5px; color: var(--l2); line-height: 1.4; margin-top: 2px; }

/* start card */
.lv-start { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: radial-gradient(1400px 900px at 50% 0%, #17172e, #000 70%); font-family: var(--font); color: #fff; }
.lv-sc { width: min(560px, 90vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lv-logo { width: 104px; height: 104px; border-radius: 28px; display: grid; place-items: center; background: linear-gradient(140deg, #0a84ff, #5e5ce6 55%, #bf5af2); box-shadow: 0 20px 60px rgba(94,92,230,.45); margin-bottom: 8px; }
.lv-sc h1 { margin: 0; font-size: 48px; font-weight: 800; letter-spacing: -.035em; }
.lv-sc p { margin: 0 0 10px; font-size: 18px; line-height: 1.45; color: var(--cp-text-soft); }
.lv-sc .lv-seg { width: 100%; }
.lv-go { width: 100%; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--blue); color: #fff; font: 700 18px var(--font); margin-top: 6px; }
.lv-go.gray { background: rgba(255,255,255,.1); margin-top: 0; }
.lv-sc small { color: var(--l3); font-size: 13.5px; margin-top: 6px; }
.host-page #toast { bottom: 96px; font-size: 17px; }
.lv-simt { color: #ffd60a; font-weight: 600; }
.lv-kn { color: var(--l2); font-weight: 600; font-size: .85em; }
.lv-tonight2 { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: 12px; padding: 0 12px; border-radius: 15px; background: rgba(255,69,58,.9); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* configurator: the 3D object stays in view; only the options scroll */
.pv-stick { flex: none; padding: 0 16px 6px; position: relative; z-index: 2; }
.pv-stick .viewer { margin: 0; height: 236px; }
.phone-page .pv-stick .viewer { height: clamp(176px, 36vh, 320px); }
.viewer .vt { position: absolute; left: 14px; top: 10px; right: 120px; pointer-events: none; }
.viewer .vt small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.62); }
.viewer .vt b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.viewer.light .vt small { color: rgba(28,28,30,.6); } .viewer.light .vt b { color: #1c1c1e; text-shadow: none; }
.pv-opts { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }
.pv-opts > #pvOpts > .sec:first-child { margin-top: 10px; }

/* start card: Custom (prompt) */
.lv-sc.wide { width: min(700px, 92vw); }
.lv-cgen { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: rgba(44,44,46,.55); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); animation: lvSheet .4s var(--ease); }
.lv-cgen .lv-in { margin: 0; }
.lv-in.big { height: 56px; align-items: center; gap: 10px; background: rgba(0,0,0,.35); }
.lv-in.big > span { color: #bf5af2; display: grid; place-items: center; }
.lv-in.big input { font-size: 17px; font-weight: 600; }
.lv-cgen .lv-try { margin: 0; }
.lv-cgen .lv-try button { height: 34px; font-size: 13.5px; }
.lv-cgen .lv-go { margin-top: 4px; }
.lv-cgen .lv-gen { margin: 6px 4px; font-size: 15px; gap: 9px; }
.lv-recent { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 12px; box-shadow: inset 0 .5px 0 var(--sep); }
.lv-recent > span { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--l2); margin: 0 2px 2px; }
.lv-recent button { display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font: 600 15px var(--font); }
.lv-recent button small { flex: 1; min-width: 0; color: var(--l2); font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-recent button:hover { background: rgba(255,255,255,.11); }
.lv-sgdone { display: flex; flex-direction: column; gap: 8px; }
.lv-prev.big { margin: 0 0 6px; padding: 14px; gap: 14px; }
.lv-prev.big b { font-size: 19px; } .lv-prev.big small { font-size: 13.5px; }
.lv-prev small.ok { display: inline-flex; align-items: center; gap: 6px; color: #4ee07a; margin-top: 6px; }
.lv-sc .lv-go:disabled { opacity: .5; }
.pricebar b { white-space: nowrap; }
@media (max-width: 400px) { .phone-page .pricebar .ready .rl { display: none; } }

/* time's up: the part is locked (the server refuses changes too) */
#app.locked [data-act]:not([data-act="view"]):not([data-act="explain"]):not([data-act="twistopen"]), #app.locked .inputbar, #app.locked #pvSig { opacity: .42; filter: saturate(.3); }
#app.locked #pvSig canvas { pointer-events: none; }
#app.locked .pricebar .ready.lk { background: rgba(255,159,10,.16); color: #ffb340; }

/* host password + end session */
.lv-bar button.prom.red { background: #ff453a; color: #fff; }
.lv-ended { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(48,209,88,.16); color: #30d158; font-size: 14.5px; font-weight: 600; }
.lv-out { appearance: none; border: 0; background: none; color: var(--l2); font: 600 13.5px var(--font-text, inherit); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lv-out:hover { color: var(--cp-text); }
#mimLogin .lv-in { width: 100%; }
.lv-old { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.lv-old .lv-go { font-size: 16.5px; }
.lv-go.gray.red { color: #ff6961; }
.lv-go.gray.red:hover { background: rgba(255,69,58,.16); }