/* UseMyPhone — design language (blueprint §5)
   White space is the brand. Green means exactly one thing: a live connection. */

/* Any author rule that sets `display` silently defeats the `hidden` attribute,
   because author styles outrank the browser's own [hidden]{display:none}. For a
   full-screen overlay that is invisible-but-present, and it swallows every click
   on the page. This one line makes `hidden` mean hidden, everywhere, for good. */
[hidden]{display:none !important}

:root{
  --paper:#ffffff;
  --wash:#f5f7fa;
  --ink:#0b1220;
  --muted:#5a6472;
  --line:#e6e9ef;
  --green:#17a34a;
  --green-soft:#e8f7ee;
  --green-ink:#0f7a37;
  --red:#e0403f;
  --stage:#0e1119;
  --stage-2:#1a2130;
  --stage-line:#2a3142;
  --stage-ink:#f2f4f8;
  --stage-muted:#98a1b0;
  --amber:#c47f14;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 10px 34px rgba(11,18,32,.08);
  --shadow-lg:0 20px 60px rgba(11,18,32,.18);
  --ease:cubic-bezier(.2,.7,.3,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; letter-spacing:-.025em; text-wrap:balance; line-height:1.12}
p{margin:0}
img,svg,video{max-width:100%; display:block}
button{font:inherit; color:inherit}
a{color:inherit; text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.center{text-align:center}
.spacer{flex:1}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:6px}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  font-size:14px; font-weight:650; padding:11px 22px; white-space:nowrap;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease);
}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:not(:disabled):active{transform:translateY(1px)}
.btn-pri{background:var(--ink); color:#fff}
.btn-pri:not(:disabled):hover{background:#1b2536}
.btn-grn{background:var(--green); color:#fff}
.btn-grn:not(:disabled):hover{background:#149243}
.btn-ghost{border-color:var(--line); background:transparent}
.btn-ghost:not(:disabled):hover{background:var(--wash)}
.btn-light{background:#fff; color:var(--ink)}
.btn-rec{background:var(--red); color:#fff}
.btn-lg{padding:15px 30px; font-size:15.5px}
.btn-chip{
  border-radius:var(--r-md); border-color:var(--line); background:var(--paper);
  font-size:12.5px; font-weight:600; padding:8px 13px;
}
.btn-chip:not(:disabled):hover{background:var(--wash)}
.btn-chip.on{border-color:var(--green); color:var(--green-ink); background:var(--green-soft)}
.btn-chip.danger{color:#c0392f; border-color:#f0d5d3}
.btn-chip.danger:hover{background:#fdf3f2}
.btn-chip[disabled]{opacity:.4}
.btn.full{width:100%}
.btn-group{display:inline-flex; gap:4px}

/* ── shared bits ──────────────────────────────────────────────────────── */
.dot{width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block; flex:none}
.dot.amber{background:var(--amber)}
.dot.grey{background:var(--muted)}
.pulse{animation:pulse 1.7s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(23,163,74,.32)} 50%{box-shadow:0 0 0 7px rgba(23,163,74,0)}}
@media (prefers-reduced-motion: reduce){
  .pulse{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
.status-live{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:650}
.status-live.green{color:var(--green-ink)}
.status-live.small{font-size:11px}
.logo{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.02em}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20}
.nav-inner{max-width:1120px; margin:0 auto; padding:0 28px; height:66px; display:flex; align-items:center; gap:26px}
.nav-links{display:flex; gap:22px; font-size:14px; color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-inner .btn{margin-left:auto}
@media(max-width:640px){ .nav-links{display:none} }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{max-width:1120px; margin:0 auto; padding:64px 28px 40px}
.hero-narrow{max-width:760px; padding-bottom:8px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
@media(max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:34px} .hero-grid > div:first-child{order:2} }
.eyebrow{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted); margin-bottom:14px}
.h1{font-size:clamp(30px,4.6vw,46px); font-weight:800; letter-spacing:-.035em}
.h1-home{font-size:clamp(34px,5.4vw,54px)}
.lede{font-size:17px; color:var(--muted); margin-top:20px; max-width:44ch}
.hero-cta{display:flex; align-items:center; gap:16px; margin-top:30px; flex-wrap:wrap}
.cta-note{font-size:13.5px; color:var(--muted)}
.ticks{list-style:none; display:flex; gap:22px; padding:0; margin:32px 0 0; font-size:12.5px; color:var(--muted); flex-wrap:wrap}
.ticks li::before{content:"✓ "; color:var(--green)}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.chip{border:1px solid var(--line); border-radius:var(--r-md); padding:7px 12px; font-size:12.5px; font-weight:600}

/* ── pairing card ─────────────────────────────────────────────────────── */
.qr-card{
  background:var(--wash); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.qr-card-head{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.qr-state{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%}
.qr-state[hidden]{display:none}
.qr-box{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; line-height:0}
#qr-slot{width:186px; height:186px}
#qr-slot svg{width:100%; height:100%; display:block}
.qr-skeleton{width:100%; height:100%; border-radius:6px; background:linear-gradient(100deg,#eef0f4 30%,#f7f8fa 50%,#eef0f4 70%); background-size:220% 100%; animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.qr-alt{font-size:12px; color:var(--muted)}
.qr-alt b{color:var(--ink)}
.qr-code{font-family:var(--mono); font-size:27px; font-weight:700; letter-spacing:.13em; font-variant-numeric:tabular-nums}
.qr-expired{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 0}
.qr-expired-icon{font-size:30px}
.qr-expired-title{font-weight:750; font-size:17px}
.qr-expired p{font-size:13px; color:var(--muted); max-width:30ch}

.qr-trouble{width:100%; margin-top:4px; border-top:1px solid var(--line); padding-top:12px; text-align:left}
.qr-trouble summary{font-size:12.5px; color:var(--muted); cursor:pointer; list-style:none; text-align:center}
.qr-trouble summary::-webkit-details-marker{display:none}
.qr-trouble summary:hover{color:var(--ink)}
.qr-trouble summary:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px}
.qr-trouble-body{padding-top:10px}
.qr-trouble-body p{font-size:12.5px; color:var(--muted); margin:0 0 8px}
.qr-trouble-url{font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink);
  background:var(--wash); border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  word-break:break-all; user-select:all}
.qr-trouble-note{margin-top:8px !important}

/* ── bands ────────────────────────────────────────────────────────────── */
.band{border-top:1px solid var(--line); padding:56px 0}
.band.alt{background:var(--wash)}
.band-inner{max-width:1120px; margin:0 auto; padding:0 28px}
.band-inner + .band-inner{margin-top:22px}
.band-head{display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.band-head h2{font-size:24px; font-weight:750}
.band-head span{font-size:13.5px; color:var(--muted)}

.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:13px}
@media(max-width:900px){ .tools-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .tools-grid{grid-template-columns:1fr} }
.tool-card{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; background:var(--paper);
  cursor:pointer; transition:border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.tool-card:hover{border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow)}
.tool-card.soon{border-style:dashed; opacity:.55; cursor:default}
.tool-card.soon:hover{border-color:var(--line); transform:none; box-shadow:none}
.tool-icon{font-size:23px; line-height:1.2}
.tool-name{font-weight:700; font-size:14.5px; margin-top:7px}
.tool-blurb{font-size:12.5px; color:var(--muted)}
.tool-card.nudge{animation:nudge 1.4s var(--ease) 2}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(23,163,74,0)} 50%{box-shadow:0 0 0 6px rgba(23,163,74,.14)}}

.audiences{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
@media(max-width:800px){ .audiences{grid-template-columns:1fr; gap:20px} }
.audiences h3{font-size:15px; font-weight:700}
.audiences p{font-size:13.5px; color:var(--muted); margin-top:6px}

.faq{max-width:760px}
.faq h2{font-size:24px; font-weight:750; margin-bottom:20px}
.faq-item{border-top:1px solid var(--line); padding:18px 0}
.faq-item h3{font-size:15px; font-weight:700}
.faq-item p{font-size:14px; color:var(--muted); margin-top:6px}

.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media(max-width:800px){ .steps{grid-template-columns:1fr} }
.steps li{display:flex; gap:13px; align-items:flex-start}
.steps b{width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex:none}
.steps li:last-child b{background:var(--green)}
.steps h3{font-size:14.5px; font-weight:700}
.steps p{font-size:13px; color:var(--muted); margin-top:4px}

/* ── pricing ──────────────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1020px; margin:0 auto; align-items:start}
@media(max-width:960px){ .plans{grid-template-columns:1fr; max-width:420px} }
.plan{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; display:flex; flex-direction:column}
.plan.featured{border:2px solid var(--green); position:relative}
.plan-flag{position:absolute; top:-11px; right:20px; background:var(--green); color:#fff; font-size:10px;
  font-weight:700; letter-spacing:.06em; border-radius:999px; padding:4px 11px}
.plan-name{font-weight:750; font-size:16px}
.plan-price{font-size:32px; font-weight:800; letter-spacing:-.03em; margin-top:8px}
.plan-price small{font-size:13px; font-weight:600; color:var(--muted)}
.plan-note{font-size:12px; color:var(--muted); margin-top:2px}
.plan-list{list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-direction:column; gap:9px; font-size:13px; flex:1}
.plan-list li::before{content:"✓ "; color:var(--green); font-weight:700}
.plan-carry{color:var(--muted)}
.plan-carry::before{content:"" !important}
.plan-soon{font-size:11.5px; color:var(--muted); text-align:center; margin-top:9px}
.teams-row{display:flex; align-items:center; gap:15px; border:1px dashed var(--line); border-radius:var(--r-lg);
  padding:15px 20px; max-width:720px; margin:20px auto 0; background:var(--paper)}
.teams-row > div{flex:1; display:flex; flex-direction:column}
.teams-row b{font-size:13.5px}
.teams-row span{font-size:12.5px; color:var(--muted)}

/* ── footer ───────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line); background:var(--wash); padding:44px 0 30px; margin-top:0}
.footer-inner{max-width:1120px; margin:0 auto; padding:0 28px; display:flex; gap:44px; flex-wrap:wrap; justify-content:space-between}
.footer-inner p{font-size:13px; color:var(--muted); margin-top:10px; max-width:34ch}
.footer-cols{display:flex; gap:52px; flex-wrap:wrap}
.footer-cols > div{display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--muted)}
.footer-cols b{color:var(--ink); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px}
.footer-cols a:hover{color:var(--ink)}
.footer-note{max-width:1120px; margin:30px auto 0; padding:20px 28px 0; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); max-width:78ch}

/* ══ APPLICATION ══════════════════════════════════════════════════════════ */
body.in-app{overflow:hidden}
body.in-app #marketing{display:none}
.app{display:grid; grid-template-columns:250px 1fr; height:100dvh}
.app[hidden]{display:none}
@media(max-width:820px){ .app{grid-template-columns:1fr; grid-template-rows:auto 1fr} }

.rail{border-right:1px solid var(--line); background:var(--wash); padding:22px 18px;
  display:flex; flex-direction:column; gap:16px; overflow-y:auto}
@media(max-width:820px){ .rail{flex-direction:row; align-items:center; border-right:none; border-bottom:1px solid var(--line); padding:12px 16px; gap:12px}
  .rail .rail-label, .rail .session-tray, .rail .device-stats{display:none}
  .rail-foot{flex-direction:row; margin-left:auto}
  .rail-foot .btn{width:auto}
}
.device-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px}
.device-head{display:flex; align-items:center; gap:11px}
.device-icon{width:36px; height:36px; border-radius:var(--r-sm); background:var(--green-soft);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex:none}
.device-name{font-weight:700; font-size:13.5px}
.device-stats{display:flex; flex-direction:column; gap:6px; margin:12px 0 0; font-size:11.5px; color:var(--muted)}
.device-stats > div{display:flex; justify-content:space-between; gap:10px}
.device-stats dt{display:inline}
.device-stats dd{margin:0; color:var(--ink); font-weight:650}
.rail-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.session-tray{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; font-size:12.5px; color:var(--muted)}
.session-tray li{display:flex; gap:8px; align-items:center}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px}
.app.offline .device-card{opacity:.55}

.stage{overflow-y:auto; padding:26px 30px 34px; min-width:0; display:flex; flex-direction:column}
.pane{display:flex; flex-direction:column; gap:14px; min-height:0; flex:1}
.pane[hidden]{display:none}
.pane-title{font-size:23px; font-weight:750}
.pane-sub{font-size:13.5px; color:var(--muted); margin-top:-8px}
.pane-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pane-name{font-weight:750; font-size:15.5px}
.pane-stat{font-size:11.5px; color:var(--muted); margin-left:auto}
.app-tools{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){ .app-tools{grid-template-columns:repeat(2,1fr)} }

.stage-split{display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:14px; flex:1; min-height:0}
@media(max-width:900px){ .stage-split{grid-template-columns:1fr} }
.video-wrap{position:relative; border-radius:var(--r-lg); overflow:hidden; display:flex;
  align-items:center; justify-content:center; min-height:280px}
.video-wrap.dark{background:var(--stage)}
.video-wrap.paper{background:#fff; border:1px solid var(--line)}
/* Transforms and filters apply to BOTH the live video and the freeze canvas —
   a frozen frame that loses its rotation or enhancement reads as a glitch.
   --dz is the desktop-side digital zoom for phones without native zoom;
   every transform composes with it so zoom survives rotate and mirror. */
.video-wrap video{width:100%; height:100%; object-fit:contain; background:transparent}
.video-wrap :is(video, canvas.freeze-canvas){transform:scale(var(--dz,1))}
.video-wrap.mirrored :is(video, canvas.freeze-canvas){transform:scaleX(-1) scale(var(--dz,1))}
.video-wrap.rot90 :is(video, canvas.freeze-canvas){transform:rotate(90deg) scale(.62) scale(var(--dz,1))}
.video-wrap.rot180 :is(video, canvas.freeze-canvas){transform:rotate(180deg) scale(var(--dz,1))}
.video-wrap.rot270 :is(video, canvas.freeze-canvas){transform:rotate(270deg) scale(.62) scale(var(--dz,1))}
.video-wrap.mirrored.rot90 :is(video, canvas.freeze-canvas){transform:rotate(90deg) scale(.62) scaleY(-1) scale(var(--dz,1))}
.video-wrap.enhance :is(video, canvas.freeze-canvas){filter:contrast(1.28) brightness(1.1) saturate(.92)}
.video-wrap.bw :is(video, canvas.freeze-canvas){filter:grayscale(1) contrast(1.55) brightness(1.12)}
.video-wrap.frozen video{visibility:hidden}
.video-wrap canvas.freeze-canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.video-badge{position:absolute; left:14px; bottom:12px; background:rgba(0,0,0,.55); color:#fff;
  border:0; border-radius:var(--r-sm); padding:5px 10px; font-size:11px; font-weight:600}
.video-badge.right{left:auto; right:14px; cursor:pointer}
.video-wrap.paper .video-badge{background:rgba(11,18,32,.72)}
.video-frozen{position:absolute; top:12px; left:14px; background:#2458d6; color:#fff; border-radius:var(--r-sm);
  padding:4px 10px; font-size:10.5px; font-weight:700; letter-spacing:.06em}
.video-waiting{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--stage-muted); gap:10px}
.video-wrap.paper .video-waiting{color:var(--muted)}

.tray{display:flex; flex-direction:column; gap:9px; min-height:0}
.tray-label{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.tray-items{display:flex; flex-direction:column; gap:9px; overflow-y:auto; flex:1; min-height:60px}
.tray-empty{font-size:11.5px; color:var(--muted); line-height:1.4}
.tray-shot{position:relative; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--wash); flex:none}
.tray-shot img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.tray-shot .tray-actions{position:absolute; inset:auto 0 0 0; display:flex; gap:1px; opacity:0; pointer-events:none; transition:opacity .15s var(--ease)}
.tray-shot:hover .tray-actions,.tray-shot:focus-within .tray-actions{pointer-events:auto}
.tray-shot:hover .tray-actions, .tray-shot:focus-within .tray-actions{opacity:1}
.tray-actions button{flex:1; border:0; background:rgba(11,18,32,.82); color:#fff; font-size:10.5px; padding:6px 0; cursor:pointer}
.tray-actions button:hover{background:var(--ink)}

.controls{display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding-top:2px}

.hint-bar{display:flex; align-items:center; gap:12px; border:1px dashed var(--line); background:var(--green-soft);
  border-radius:var(--r-md); padding:12px 18px; font-size:13px}
.hint-bar .status-live{margin-left:auto; font-size:11px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:13px; align-content:start}
.shot{position:relative; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--wash)}
.shot img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.shot-meta{display:flex; justify-content:space-between; gap:8px; padding:8px 11px; font-size:11px; color:var(--muted)}
.shot .tray-actions{position:absolute; top:8px; right:8px; display:flex; gap:5px; opacity:0; pointer-events:none; transition:opacity .15s var(--ease)}
.shot:hover .tray-actions,.shot:focus-within .tray-actions{pointer-events:auto}
.shot:hover .tray-actions, .shot:focus-within .tray-actions{opacity:1}
.shot .tray-actions button{border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:var(--r-sm);
  font-size:10.5px; padding:4px 8px; cursor:pointer}
.gallery-empty{grid-column:1/-1; text-align:center; color:var(--muted); font-size:13.5px; padding:44px 0}

.files-split{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:820px){ .files-split{grid-template-columns:1fr} }
.dropzone{border:2px dashed var(--line); border-radius:var(--r-lg); padding:34px 22px; text-align:center;
  cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease)}
.dropzone:hover, .dropzone.over{border-color:var(--green); background:var(--green-soft)}
.dz-icon{font-size:24px}
.dz-title{font-weight:650; font-size:14px; margin-top:8px}
.dz-sub{font-size:12px; color:var(--muted); margin-top:3px}
.transfers{border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 18px; display:flex; flex-direction:column; gap:9px}
.xfer{display:flex; align-items:center; gap:10px; font-size:12.5px}
.xfer-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xfer-size{color:var(--muted); font-size:11.5px}
.xfer-bar{width:74px; height:5px; border-radius:99px; background:var(--line); overflow:hidden; flex:none}
.xfer-bar span{display:block; height:100%; background:var(--green); width:0; transition:width .2s linear}
.xfer-done{color:var(--green-ink); font-weight:700; font-size:11.5px}
.xfer a{color:var(--green-ink); font-weight:650; text-decoration:underline}

/* ── toasts ───────────────────────────────────────────────────────────── */
.toast-wrap{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:400;
  display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none}
.toast{background:var(--ink); color:#fff; border-radius:var(--r-md); padding:11px 18px; font-size:13.5px;
  box-shadow:var(--shadow-lg); animation:rise .2s var(--ease); max-width:90vw; text-align:center}
.toast.good{background:var(--green)}
.toast.warn{background:var(--amber)}
.toast.bad{background:var(--red)}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ══ PHONE ════════════════════════════════════════════════════════════════ */
body.page-phone{background:var(--paper)}
.phone-app{min-height:100dvh; display:flex; flex-direction:column}
.pscreen{flex:1; display:flex; flex-direction:column; padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  gap:16px; min-height:100dvh}
.pscreen[hidden]{display:none}
.pscreen.dark{background:var(--stage); color:var(--stage-ink)}
.plogo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15.5px; justify-content:center}
.pbody{flex:1; display:flex; flex-direction:column; justify-content:center; gap:18px}
.pbody.center{align-items:center; text-align:center}
.pbig{font-size:42px; text-align:center}
.pbody h1{font-size:22px; font-weight:750; text-align:center}
.pmeta{display:flex; flex-direction:column; gap:9px; border:1px solid var(--line); border-radius:var(--r-lg); padding:15px; margin:0}
.pmeta > div{display:flex; justify-content:space-between; gap:12px; font-size:13.5px}
.pmeta dt{color:var(--muted)}
.pmeta dd{margin:0; font-weight:700; text-align:right}
.pfoot{display:flex; flex-direction:column; gap:10px}
.pnote{font-size:12px; color:var(--muted); text-align:center}
.pscreen.dark .pnote{color:var(--stage-muted)}
.pnote.error{color:var(--red); font-weight:600; font-size:13px}

.plive-top{display:flex; align-items:center; justify-content:space-between}
.plive-top .status-live{color:#2bc46a; font-size:11.5px; letter-spacing:.05em}
.plive-top .dot{background:#2bc46a}
.pbatt{font-size:11.5px; color:var(--stage-muted)}
.ppreview{position:relative; flex:1; border-radius:var(--r-lg); overflow:hidden; background:#151a25;
  display:flex; align-items:center; justify-content:center; min-height:180px}
.ppreview video{width:100%; height:100%; object-fit:cover}
/* ══ barcode scanner ═════════════════════════════════════════════════════ */
.scan-split{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:14px; min-height:0}
.scan-side{display:flex; flex-direction:column; gap:10px}
.scan-last{border:1px solid var(--line); border-radius:var(--r-md); padding:14px; background:var(--wash)}
.scan-last.flash{animation:scanflash .5s ease-out}
@keyframes scanflash{0%{background:rgba(23,163,74,.22); border-color:var(--green)}100%{background:var(--wash)}}
.scan-last-label{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700}
.scan-last-value{font-size:21px; font-weight:700; margin-top:6px; word-break:break-all; line-height:1.25}
.scan-last-meta{font-size:12px; color:var(--muted); margin-top:6px}
.scan-toggle{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink); cursor:pointer}
.scan-toggle.center{justify-content:center; margin-top:10px}
.scan-toggle input{width:16px; height:16px; accent-color:var(--green); flex-shrink:0}
.scan-reticle{position:absolute; inset:22% 18%; border:2px solid rgba(255,255,255,.85); border-radius:12px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.28); pointer-events:none}
.scan-table-wrap{margin-top:14px; border:1px solid var(--line); border-radius:var(--r-md); overflow:auto; max-height:230px}
.scan-table{width:100%; border-collapse:collapse; font-size:13.5px}
.scan-table th{position:sticky; top:0; background:var(--wash); text-align:left; padding:9px 12px;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line)}
.scan-table td{padding:9px 12px; border-bottom:1px solid var(--line)}
.scan-table tr:last-child td{border-bottom:none}
.scan-code{font-weight:600; word-break:break-all}
.scan-empty td{color:var(--muted); text-align:center; padding:22px}
.btn.tiny{padding:3px 9px; font-size:11.5px}
.pane-stat.warn{color:#b4791b}
.pscan-hint{margin:10px 0 0; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.1);
  font-size:13.5px; font-weight:600; text-align:center; word-break:break-all}

/* ══ microphone ══════════════════════════════════════════════════════════ */
.mic-stage{flex:1; display:flex; flex-direction:column; justify-content:center; gap:26px;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; background:var(--wash); min-height:0}
.mic-meter{display:flex; flex-direction:column; gap:9px}
.mic-bars{display:flex; align-items:flex-end; gap:3px; height:150px}
.mic-bars span{flex:1; min-height:2px; height:2px; border-radius:2px; background:var(--line);
  transition:height .08s linear, background .12s linear}
.mic-bars span.on{background:var(--green)}
.mic-bars span.hot{background:#e0a03f}
.mic-peak{height:7px; border-radius:4px; background:var(--line); overflow:hidden}
.mic-peak span{display:block; height:100%; background:var(--green); transition:width .1s linear}
.mic-peak span.clipping{background:var(--red)}
.mic-scale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted);
  font-family:ui-monospace,"SF Mono",Consolas,monospace}
.mic-readout{text-align:center}
.mic-big{font-size:38px; font-weight:800; letter-spacing:-.03em}
.mic-sub{font-size:14px; color:var(--muted); margin-top:4px}
.mic-rec-time{font-size:14px; font-weight:700; color:var(--red)}
.pane-note{font-size:12.5px; color:var(--muted); margin:10px 0 0}
.pmeter{width:100%; height:10px; border-radius:5px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:20px}
.pmeter span{display:block; height:100%; width:0; background:#2bc46a; border-radius:5px; transition:width .08s linear}

/* ══ presentation remote ═════════════════════════════════════════════════ */
.deck-stage{flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--stage); overflow:hidden; min-height:0}
.deck-stage.loading::after{content:'Opening your slides…'; position:absolute; color:#98a1b0; font-size:14px}
.deck-stage canvas{max-width:100%; max-height:100%; display:block; box-shadow:0 10px 40px rgba(0,0,0,.4)}
.deck-stage:fullscreen{border-radius:0; background:#000}
.deck-blank{position:absolute; inset:0; background:#000; z-index:3}
.deck-empty{text-align:center; color:#c6ccd8; padding:34px; max-width:52ch}
.deck-empty h3{color:#fff; font-size:19px; margin:12px 0 8px}
.deck-empty p{font-size:13.5px; color:#98a1b0; margin:0 0 16px}
.deck-empty-icon{font-size:38px}
.deck-alt{font-size:12.5px !important; border-top:1px solid #2a3142; padding-top:14px; margin-top:18px !important}
.deck-alt b{color:#c6ccd8}
.deck-count,.deck-timer{font-size:14px; font-weight:700}
.premote-top{display:flex; justify-content:space-between; align-items:center; padding:4px 2px 12px; font-size:15px; font-weight:700}
.premote-pad{position:relative; flex:1; display:flex; gap:8px; min-height:0}
.premote-half{flex:1; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--wash);
  font-size:44px; color:var(--muted); display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.premote-half:active{background:var(--green); color:#fff; border-color:var(--green)}
.premote-half.next{flex:1.6}
.premote-hint{position:absolute; left:0; right:0; bottom:12px; text-align:center; font-size:12px;
  color:var(--muted); pointer-events:none}
.premote-notes{padding:12px; border-radius:var(--r-md); background:var(--wash);
  font-size:14.5px; line-height:1.55; flex:1; overflow:auto; white-space:pre-wrap}
.premote-foot{display:flex; gap:8px}
.premote-foot .btn{flex:1}
.btn.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ── Presentation Remote+ ─────────────────────────────────────────────── */
/* The desktop keeps the slide big and puts notes and questions beside it —
   never on the stage, because the stage is what the projector shows. */
.deck-split{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; min-height:0}
.deck-side{display:flex; flex-direction:column; min-height:0; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--paper); overflow:hidden}
.deck-side-head{display:flex; border-bottom:1px solid var(--line)}
.deck-side-tab{flex:1; padding:11px 8px; font-size:13px; font-weight:650; color:var(--muted);
  background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px}
.deck-side-tab.on{color:var(--ink); border-bottom-color:var(--green)}
.deck-side-pane{flex:1; display:flex; flex-direction:column; min-height:0; padding:12px; gap:10px}
.deck-side-hint{font-size:12px; color:var(--muted); margin:0}
.deck-notes-input{flex:1; min-height:120px; resize:none; border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px; font:inherit; font-size:13.5px; line-height:1.55;
  background:var(--wash); color:var(--ink)}
.deck-notes-input:focus{outline:2px solid var(--green); outline-offset:-1px; background:var(--paper)}
.deck-badge,.premote-badge{background:var(--green); color:#fff; border-radius:999px;
  font-size:10.5px; font-weight:700; padding:1px 6px; min-width:17px; text-align:center}
.deck-qa-link{display:flex; gap:6px; align-items:center}
.deck-qa-link code{flex:1; font-size:11px; background:var(--wash); border:1px solid var(--line);
  border-radius:6px; padding:6px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.deck-qa-list{flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px}
.qa-item{border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--r-md);
  padding:9px 11px; background:var(--wash)}
.qa-text{font-size:13.5px; line-height:1.5}
.qa-time{font-size:11px; color:var(--muted); margin-top:4px}
/* The pointer sits above the slide but below the blank overlay, so blanking
   the projector hides the pointer too. */
.deck-laser{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:radial-gradient(circle,#ff3b30 0%,#ff3b30 45%,rgba(255,59,48,.35) 70%,transparent 72%);
  box-shadow:0 0 14px 4px rgba(255,59,48,.55); pointer-events:none; z-index:2}
.deck-timer[data-tone="soon"]{color:#d98324}
.deck-timer[data-tone="over"]{color:var(--red)}
.deck-timer.paused{opacity:.55}
.deck-target-wrap{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.deck-target{font:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:8px;
  padding:5px 8px; background:var(--paper); color:var(--ink)}
@media (max-width:1000px){ .deck-split{grid-template-columns:1fr; grid-template-rows:1fr auto} .deck-side{max-height:38vh} }

/* Phone side */
.premote-title{font-size:14px; color:var(--muted); padding:0 2px 10px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.premote-tabs{display:flex; gap:6px; padding-bottom:10px}
.premote-tab{flex:1; padding:8px 6px; font-size:12.5px; font-weight:650; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:5px}
.premote-tab.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.premote-body{flex:1; display:flex; flex-direction:column; min-height:0}
.premote-tools{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:10px}
.premote-pad.lasing .premote-half{opacity:.4; pointer-events:none}
.premote-pad.lasing{background:var(--wash); border-radius:var(--r-lg); touch-action:none}
.premote-laser-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--green); font-weight:650; pointer-events:none}
.premote-empty{color:var(--muted); font-size:13.5px; text-align:center; margin:auto; line-height:1.6}
.premote-empty span{font-size:12px; opacity:.8}
.premote-qa{flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px}
.premote-q{border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--r-md);
  padding:10px 12px; background:var(--wash); font-size:14px; line-height:1.5}
.premote-q time{display:block; font-size:11px; color:var(--muted); margin-top:5px}
.premote-clock[data-tone="soon"]{color:#d98324}
.premote-clock[data-tone="over"]{color:var(--red)}
.premote-clock.warn{animation:clockflash .6s ease-in-out 6}
@keyframes clockflash{50%{color:var(--red); transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){ .premote-clock.warn{animation:none; color:var(--red)} }

/* ══ photo booth ══════════════════════════════════════════════════════════ */
.booth-split{flex:1; display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; min-height:0}
@media (max-width:900px){ .booth-split{grid-template-columns:1fr; grid-template-rows:auto 1fr} }
.booth-invite{border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; text-align:center;
  background:var(--wash); display:flex; flex-direction:column; align-items:center; gap:8px}
.booth-welcome{font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.booth-welcome-sub{font-size:13.5px; color:var(--muted)}
.booth-qr{width:190px; height:190px; background:#fff; border-radius:var(--r-md); padding:10px; margin-top:6px}
.booth-qr svg{width:100%; height:100%; display:block}
.booth-url{font-size:11.5px; color:var(--muted); word-break:break-all}
.booth-note{font-size:12px; color:var(--muted); margin:6px 0 0}
.booth-brandbar{display:grid; grid-template-columns:auto 1fr auto 1fr; gap:8px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; margin-bottom:10px}
@media (max-width:760px){ .booth-brandbar{grid-template-columns:1fr} }
.booth-gallery-wrap{display:flex; flex-direction:column; min-height:0; gap:8px}
.booth-gallery{flex:1; overflow:auto; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); align-content:start}
.booth-shot{position:relative; margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line)}
.booth-shot img{width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--wash)}
.booth-shot.hidden-shot img{filter:grayscale(1) brightness(.55)}
.booth-shot-bar{position:absolute; inset:auto 0 0 0; display:flex; gap:4px; justify-content:center;
  padding:5px; background:linear-gradient(transparent, rgba(11,18,32,.75)); opacity:0; pointer-events:none; transition:opacity .15s}
.booth-shot:hover .booth-shot-bar,.booth-shot:focus-within .booth-shot-bar{pointer-events:auto}
.booth-shot:hover .booth-shot-bar, .booth-shot:focus-within .booth-shot-bar{opacity:1}
.booth-show{position:fixed; inset:0; z-index:200; background:#000; display:flex; align-items:center; justify-content:center}
.booth-show img{max-width:100%; max-height:100%; object-fit:contain}
.booth-show-close{position:absolute; top:16px; right:20px; width:42px; height:42px; border-radius:50%;
  border:0; background:rgba(255,255,255,.15); color:#fff; font-size:18px; cursor:pointer}
@media (prefers-reduced-motion:reduce){ .booth-shot-bar{transition:none} }

/* Guest page */
.booth-guest .pbody{gap:14px}
.booth-take{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:30px 20px; border-radius:var(--r-lg); background:var(--green); color:#fff;
  font-size:18px; font-weight:750; margin-top:8px; -webkit-tap-highlight-color:transparent}
.booth-take:active{filter:brightness(.94)}
.booth-take-icon{font-size:34px}
.booth-pick{display:block; text-align:center; padding:12px; font-size:14px; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-md); margin-top:10px}
.booth-sent{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:12px}
.booth-thumb{width:62px; height:62px; object-fit:cover; border-radius:8px; border:1px solid var(--line)}
.pnote.small{font-size:11.5px; opacity:.85}

/* ══ multi-camera ═════════════════════════════════════════════════════════ */
.mc-grid{flex:1; display:grid; gap:10px; min-height:0;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); align-content:start}
.mc-grid[data-count="1"]{grid-template-columns:1fr}
.mc-tile{position:relative; margin:0; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--stage); display:flex; flex-direction:column; min-height:180px}
.mc-tile video{width:100%; flex:1; min-height:0; object-fit:contain; background:#0e1119; display:block}
.mc-tile figcaption{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--stage)}
.mc-label{flex:1; min-width:0; background:transparent; border:1px solid transparent; border-radius:6px;
  color:#f2f4f8; font:inherit; font-size:13px; font-weight:650; padding:3px 6px}
.mc-label:hover{border-color:#2a3142}
.mc-label:focus{outline:none; border-color:var(--green); background:#0e1119}
.mc-who{font-size:11px; color:#98a1b0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:9ch}
.mc-live{font-size:10px; font-weight:700; letter-spacing:.06em; color:#2bc46a}
.mc-actions{position:absolute; top:8px; right:8px; display:flex; gap:5px; opacity:0; pointer-events:none; transition:opacity .15s}
.mc-tile:hover .mc-actions,.mc-tile:focus-within .mc-actions{pointer-events:auto}
.mc-tile:hover .mc-actions, .mc-tile:focus-within .mc-actions{opacity:1}
.mc-grid.focus-mode .mc-tile{display:none}
.mc-grid.focus-mode .mc-tile.focused{display:flex; grid-column:1 / -1}
.mc-addbar{border:1px solid var(--green); border-radius:var(--r-lg); background:var(--green-soft, rgba(23,163,74,.08));
  padding:14px; margin-bottom:10px}
.mc-add-inner{display:flex; gap:16px; align-items:center}
.mc-add-qr{width:132px; height:132px; background:#fff; border-radius:var(--r-md); padding:8px; flex-shrink:0}
.mc-add-qr svg{width:100%; height:100%; display:block}
.mc-add-title{font-size:15px; font-weight:700}
.mc-add-note{font-size:13px; color:var(--muted); margin:5px 0 8px; max-width:52ch}
.mc-add-code{font-size:19px; letter-spacing:.14em; font-weight:600; margin-bottom:10px}
@media (prefers-reduced-motion:reduce){ .mc-actions{transition:none} }

/* ══ accounts & sign-in ═══════════════════════════════════════════════════ */
.account-chip{margin-top:10px; border-top:1px solid var(--line); padding-top:10px}
.account-btn{display:flex; align-items:center; gap:10px; width:100%; background:transparent;
  border:1px solid transparent; border-radius:var(--r-md); padding:8px; cursor:pointer; text-align:left}
.account-btn:hover{background:var(--wash); border-color:var(--line)}
.account-avatar{width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:14px; background:var(--wash); color:var(--muted); border:1px solid var(--line)}
.account-avatar.in{background:var(--green); color:#fff; border-color:var(--green)}
.account-meta{display:flex; flex-direction:column; min-width:0}
.account-name{font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.account-plan{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.auth-backdrop{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(11,18,32,.55); padding:20px; opacity:0; transition:opacity .2s}
.auth-backdrop.show{opacity:1}
@media (prefers-reduced-motion:reduce){ .auth-backdrop{transition:none} }
.auth-card{position:relative; width:100%; max-width:400px; background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:32px 30px; box-shadow:0 24px 60px rgba(11,18,32,.28); transform:translateY(8px); transition:transform .2s}
.auth-backdrop.show .auth-card{transform:none}
.auth-close{position:absolute; top:14px; right:16px; width:32px; height:32px; border:0; border-radius:50%;
  background:var(--wash); color:var(--muted); cursor:pointer; font-size:14px}
.auth-logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; letter-spacing:-.02em}
.auth-title{font-size:22px; font-weight:750; letter-spacing:-.02em; margin:18px 0 8px; text-wrap:balance}
.auth-sub{font-size:14px; color:var(--muted); margin:0 0 22px; line-height:1.5}
.auth-methods{display:flex; flex-direction:column; gap:10px}
.auth-btn{display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:var(--r-md);
  border:1px solid var(--line); font-weight:650; font-size:14.5px; cursor:pointer; text-decoration:none; color:var(--ink); background:var(--paper)}
.auth-btn:hover{background:var(--wash)}
.auth-ic{font-weight:800; font-size:16px}
.auth-or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:16px 0}
.auth-or::before,.auth-or::after{content:''; flex:1; height:1px; background:var(--line)}
.auth-email{display:flex; flex-direction:column; gap:10px}
.auth-input{border:1px solid var(--line); border-radius:var(--r-md); padding:12px; font:inherit; font-size:15px;
  background:var(--wash); color:var(--ink)}
.auth-input:focus{outline:2px solid var(--green); outline-offset:-1px; background:var(--paper)}
.auth-note{font-size:13px; margin:12px 0 0; line-height:1.45}
.auth-note.good{color:var(--green)}
.auth-note.error{color:var(--red)}
.auth-fine{font-size:11.5px; color:var(--muted); margin:16px 0 0; text-align:center}

/* ══ clipboard bridge ═════════════════════════════════════════════════════ */
.clip-split{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; min-height:0}
@media (max-width:900px){ .clip-split{grid-template-columns:1fr; grid-template-rows:auto 1fr} }
.clip-compose{display:flex; flex-direction:column; gap:10px}
.clip-label{font-size:12px; font-weight:650; color:var(--muted); letter-spacing:.03em}
.clip-input{flex:1; min-height:120px; resize:vertical; border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px; font:inherit; font-size:14.5px; line-height:1.55; background:var(--wash); color:var(--ink)}
.clip-input:focus{outline:2px solid var(--green); outline-offset:-1px; background:var(--paper)}
.clip-actions{display:flex; align-items:center; gap:8px}
.clip-count{font-size:12px; color:var(--muted)}
.clip-history{display:flex; flex-direction:column; min-height:0; gap:8px}
#clip-list{flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px}
.clip-item{border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; background:var(--paper)}
.clip-item.out{border-left:3px solid var(--green)}
.clip-item.in{border-left:3px solid var(--ink)}
.clip-item-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.clip-tag{font-size:11px; font-weight:650; color:var(--muted); letter-spacing:.04em}
.clip-when{font-size:11px; color:var(--muted)}
.clip-text{font-size:13.5px; line-height:1.5; word-break:break-word; white-space:pre-wrap; max-height:8em; overflow:auto}
.clip-item-actions{display:flex; gap:6px; margin-top:8px}

/* Phone clipboard */
.pclip-list{flex:1; overflow:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; min-height:0}
.pclip-item{border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; background:var(--wash)}
.pclip-item.in{border-left:3px solid var(--green)}
.pclip-item.out{border-left:3px solid var(--muted)}
.pclip-text{font-size:14.5px; line-height:1.5; word-break:break-word; white-space:pre-wrap}
.pclip-actions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.pclip-form{display:flex; flex-direction:column; gap:8px}

/* ══ signature pad ════════════════════════════════════════════════════════ */
.sig-split{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:12px; min-height:0}
@media (max-width:900px){ .sig-split{grid-template-columns:1fr; grid-template-rows:1fr auto} }
.sig-stage{position:relative; display:flex; align-items:center; justify-content:center; min-height:0;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  background-image:linear-gradient(var(--wash) 1px, transparent 1px); background-size:100% 28px}
.sig-stage canvas{width:100%; height:100%; display:block}
.sig-empty{text-align:center; color:var(--muted); padding:30px; max-width:46ch}
.sig-empty h3{color:var(--ink); font-size:18px; margin:10px 0 8px}
.sig-empty p{font-size:13.5px; margin:0}
.sig-meta{padding:0 0 10px}
.sig-who{width:100%; margin-top:5px; border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px 10px; font:inherit; font-size:13px; background:var(--wash); color:var(--ink)}
.sig-who:focus{outline:2px solid var(--green); outline-offset:-1px; background:var(--paper)}
.sig-shot{background:var(--paper)}
.sig-shot img{width:100%; aspect-ratio:auto; height:auto; object-fit:contain; background:var(--wash); padding:6px}
.sig-shot-meta{font-size:11.5px; color:var(--muted); padding:4px 8px}

/* Phone signing screen — deliberately the plainest screen in the product:
   somebody is being handed a stranger's phone and must know what to do. */
.psign-head{padding:8px 4px 12px; text-align:center}
.psign-title{font-size:19px; font-weight:750; letter-spacing:-.02em}
.psign-sub{font-size:13px; color:var(--muted); margin-top:4px}
.psign-padwrap{position:relative; flex:1; border:1.5px dashed var(--line); border-radius:var(--r-lg);
  background:var(--paper); min-height:0; overflow:hidden}
.psign-canvas{width:100%; height:100%; display:block; touch-action:none}
.psign-baseline{position:absolute; left:22px; right:22px; bottom:26%; border-bottom:1.5px solid var(--line);
  pointer-events:none; text-align:center}
.psign-baseline span{position:relative; top:12px; font-size:11px; color:var(--muted); background:var(--paper); padding:0 8px}
.psign-foot{display:flex; gap:8px; padding-top:12px}
.psign-foot .btn{flex:1; padding:14px; font-size:15px}

/* ══ annotation pad ═══════════════════════════════════════════════════════ */
.ann-stage{flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--stage); overflow:hidden; min-height:0}
.ann-stage.over{outline:2px dashed var(--green); outline-offset:-6px}
.ann-stage canvas{position:absolute; display:block}
#ann-base{z-index:1}
#ann-ink{z-index:2}
.pann-head{display:flex; justify-content:space-between; align-items:baseline; padding:4px 2px 10px}
.pann-title{font-size:15px; font-weight:700}
.pann-hint{font-size:12px; color:var(--muted)}
.pann-padwrap{position:relative; flex:1; min-height:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:var(--wash);
  background-size:contain; background-position:center; background-repeat:no-repeat}
.pann-padwrap.has-bg{background-color:#0e1119}
.pann-canvas{width:100%; height:100%; display:block; touch-action:none}
.pann-colours{display:flex; gap:10px; justify-content:center; padding:12px 0 8px}
.pann-colour{width:32px; height:32px; border-radius:50%; border:2px solid transparent;
  background:var(--c); box-shadow:0 0 0 1px var(--line) inset}
.pann-colour.on{border-color:var(--ink); transform:scale(1.12)}
.pann-tools{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding-bottom:10px}
.pann-tools .btn{padding:10px 4px; font-size:12px}

/* Audience Q&A page */
.ask-input{width:100%; border:1px solid var(--line); border-radius:var(--r-md); padding:12px;
  font:inherit; font-size:16px; line-height:1.5; resize:vertical; background:var(--wash); color:var(--ink)}
.ask-input:focus{outline:2px solid var(--green); outline-offset:-1px; background:var(--paper)}
.ask-count{font-size:12px; color:var(--muted); text-align:right; margin:6px 0 12px}
.pnote.good{color:var(--green)}

/* ══ room camera ═════════════════════════════════════════════════════════ */
.room-alert{font-size:12px; font-weight:700; color:#b4791b; background:rgba(224,160,63,.16);
  border-radius:999px; padding:4px 11px; animation:roompulse 1.1s ease-in-out infinite}
@keyframes roompulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){
  .room-alert{animation:none}
  .scan-last.flash{animation:none}
}

/* ── recognised text panel (document scanner) ───────────────────────────── */
.doc-text{margin:14px 0 0; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  display:flex; flex-direction:column; overflow:hidden}
.doc-text-head{display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.doc-text-status{font-size:12.5px; color:var(--muted)}
.doc-text-status.working{color:var(--ink)}
.doc-text-status.working::before{content:'◌ '; }
.doc-text-status.good{color:var(--green)}
.doc-text-status.low{color:#b4791b}
.doc-text-body{width:100%; min-height:132px; max-height:280px; resize:vertical; border:0; outline:0;
  padding:12px 14px; font:13.5px/1.6 ui-monospace,"SF Mono",Consolas,monospace; color:var(--ink);
  background:transparent; white-space:pre-wrap}
.doc-text-body:focus-visible{box-shadow:inset 0 0 0 2px var(--green)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Reconnection notice — a line, not a screen. The camera keeps running behind it. */
.pbanner{margin:8px 0 0; padding:8px 12px; border-radius:10px; font-size:13px; font-weight:600;
  background:rgba(245,191,79,.16); color:#f5bf4f; text-align:center}
.pshare-card{background:var(--stage-2); border-radius:var(--r-md); padding:13px 15px}
.pshare-title{font-size:13.5px; font-weight:650}
.pshare-sub{font-size:11.5px; color:var(--stage-muted); margin-top:3px}
.pcontrols{display:flex; gap:8px}
.pcontrols .btn{flex:1; justify-content:center; background:var(--stage-2); border-color:var(--stage-line); color:var(--stage-ink)}
.pcontrols .btn:hover{background:#222b3d}
.pcontrols .btn.on{background:#243a2c; border-color:#2bc46a; color:#7ee2a3}
.pcontrols .btn.danger{color:#ff6b69; border-color:#4a2b2b; background:#2a1e21}
.pshutter-wrap{display:flex; justify-content:center; padding:4px 0}
.pshutter{width:70px; height:70px; border-radius:50%; border:3px solid #fff; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
.pshutter span{width:56px; height:56px; border-radius:50%; background:#fff; transition:transform .12s var(--ease)}
.pshutter:active span{transform:scale(.85)}
.pfile-btn{display:flex; align-items:center; justify-content:center; border:2px dashed var(--line);
  border-radius:var(--r-lg); padding:26px; font-weight:650; font-size:15px; cursor:pointer}
.ptransfers{display:flex; flex-direction:column; gap:8px}
.code-input{width:100%; font-family:var(--mono); font-size:32px; font-weight:700; letter-spacing:.14em;
  text-align:center; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 10px; margin-bottom:14px;
  background:var(--paper); color:var(--ink)}
#join-form{display:flex; flex-direction:column}

/* ── account page ─────────────────────────────────────────────────────── */
.account-page{max-width:760px; margin:0 auto; padding:48px 28px 90px; display:flex; flex-direction:column; gap:18px}
.account-head{margin-bottom:6px}
.account-head .lede{margin-top:10px}
.acct-card{border:1px solid var(--line); border-radius:var(--r-xl); padding:22px 24px; background:var(--paper)}
.acct-card.acct-danger{border-color:#f0d5d3}
.acct-row{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.acct-actions{display:flex; gap:8px; flex-wrap:wrap}
.acct-label{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.acct-value{font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:4px}
.acct-note{font-size:13.5px; color:var(--muted); margin-top:6px; max-width:52ch}
.acct-banner{margin-top:16px; padding:12px 15px; border-radius:var(--r-md); font-size:13.5px;
  background:var(--wash); border:1px solid var(--line)}
.acct-banner.warn{background:#fdf6e8; border-color:#f0e0bd; color:#7a5a12}
.acct-limits{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:1px}
.acct-limits li{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14px}
.acct-limits li:last-child{border-bottom:none}
.acct-limits li span{color:var(--muted)}
.acct-devices{margin-top:12px; display:flex; flex-direction:column; gap:1px}
.acct-device{display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.acct-device:last-child{border-bottom:none}
.acct-device span{color:var(--muted); font-size:12.5px}
.acct-empty{color:var(--muted); font-size:13.5px; margin-top:10px}
#acct-history{margin-top:12px}

/* ── pricing: billing period toggle ───────────────────────────────────── */
.cycle-row{display:flex; justify-content:center; margin-top:26px}
.cycle-toggle{display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line);
  border-radius:999px; background:var(--wash)}
.cycle-toggle .btn-chip{border-color:transparent; background:transparent; border-radius:999px}
.cycle-toggle .btn-chip.on{background:var(--paper); border-color:var(--line); color:var(--ink)}