*{box-sizing:border-box;margin:0}
/* Bright theme (Jumpshare-style): white cards on a cool light canvas */
:root{--bg:#f5f7fb;--card:#ffffff;--line:#e2e8f0;--txt:#16233b;--dim:#5b6b82;--acc:#2f6bff;--accd:#1f54d6;--danger:#e5484d}
body{background:var(--bg);color:var(--txt);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}
.hidden{display:none!important}
.offscreen{position:fixed;left:-9999px;width:1px;height:1px}

.nav{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:20px;color:var(--txt)}
.brand span{color:var(--acc)}
.badge{margin-left:auto;font-size:13px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:4px 12px}

.recwrap{max-width:1100px;margin:28px auto;padding:0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04)}
.nav{background:var(--card)}
.card h1{font-size:22px;margin-bottom:18px}
.card h3{font-size:14px;color:var(--dim);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--dim)}
select{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:15px}
.hint{color:var(--dim);font-size:14px;margin:18px 0}

.cta{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:10px;padding:13px 24px;font-size:16px;font-weight:700;cursor:pointer}
.cta:hover{background:var(--accd)}
.cta.small{padding:9px 16px;font-size:14px;border-radius:8px}
.cta.danger{background:var(--danger)}
.chip{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--acc)}
.chip.active{border-color:var(--acc);color:var(--acc)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.toolbar .spacer{flex:1}
.timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;color:var(--danger);min-width:64px}
#stage{width:100%;border-radius:10px;border:1px solid var(--line);background:#000;touch-action:none}
video#playback{width:100%;border-radius:10px;border:1px solid var(--line);background:#000;margin-bottom:14px}

.transcriptbox pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;max-height:160px;overflow:auto;font:13px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;color:var(--dim)}
.aiout{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:10px;white-space:pre-wrap;font:14px/1.7 system-ui,sans-serif;color:var(--txt);min-height:40px}

/* video settings sliders (camera circles) */
.vidsettings{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:14px 0 4px}
.vidsettings h3{margin:0;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.vidsettings .sld{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.vidsettings input[type=range]{width:130px;accent-color:var(--acc)}
.vidsettings .sld span{min-width:44px;color:var(--txt);font-variant-numeric:tabular-nums;font-size:12px}

/* logo (Pro) controls */
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--dim)}
.probadge{display:inline-block;background:#f0b429;color:#14181f;font-size:10px;font-weight:800;letter-spacing:.08em;border-radius:5px;padding:1px 6px;vertical-align:2px}
#logoControls input[type=file]{color:var(--dim);font-size:13px;max-width:170px}
.logorow{flex-wrap:nowrap;align-items:center;gap:10px}
.namelogorow{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.nameField{flex:1;min-width:200px}
.nameField input{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:15px;width:100%}
.logoField{flex:2;min-width:320px;display:flex;flex-direction:column;gap:6px}
.hiddenfile{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
label[for="logoFile"]{cursor:pointer}
/* logo preview thumbnail — checkerboard shows PNG transparency */
.logoprev{height:34px;max-width:120px;object-fit:contain;border:1px solid var(--line);border-radius:6px;padding:2px;
  background-image:linear-gradient(45deg,#e2e2e2 25%,transparent 25%),linear-gradient(-45deg,#e2e2e2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e2e2 75%),linear-gradient(-45deg,transparent 75%,#e2e2e2 75%);
  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
#logoControls input[type=file]::file-selector-button{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer;margin-right:8px}
#logoControls.locked{cursor:pointer}
#logoControls.locked input,#logoControls.locked select,#logoControls.locked .togglechip{pointer-events:none;opacity:.45}
.togglechip{display:inline-flex;flex-direction:row;align-items:center;gap:7px;font-size:13px;color:var(--txt)}
.togglechip input{accent-color:var(--acc)}

/* share link result (Pro) — readonly URL + copy chip, replaces the button inline */
.shareresult{display:inline-flex;align-items:center;gap:8px;flex:1 1 260px;min-width:240px}
.shareresult input{flex:1;min-width:0;background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;font-family:ui-monospace,Consolas,monospace}
.shareresult .chip{flex:0 0 auto}

/* Above the modal band (1100) and the mobile sheets — a toast that lands behind an open
   dialog is a toast nobody reads. */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--txt);color:#fff;border:1px solid var(--txt);padding:11px 20px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;font-size:14px;z-index:1700;box-shadow:0 8px 24px rgba(16,24,40,.25)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* theater preview (host) — wider stage, taller canvas */
.recwrap.theater{max-width:min(1680px,96vw)}
.recwrap.theater #stage{max-height:78vh;object-fit:contain}

/* live transcript side drawer */
.drawer{position:fixed;top:0;right:0;height:100vh;width:360px;max-width:88vw;background:var(--card);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(16,24,40,.14);z-index:45;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;padding:16px}
.drawer.open{transform:translateX(0)}
.drawerhead{display:flex;align-items:center;justify-content:space-between}
.drawerhead h3{margin:0;font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.drawer pre{flex:1;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;font:13px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;color:var(--dim)}

/* "Sharing …" state on the Share Screen button — stands out with a live green dot */
#btnShareScreen.sharing{background:#e7fbf0;border-color:#16a34a;color:#0a7a3c;font-weight:800}
.livedotmini{display:inline-block;width:9px;height:9px;border-radius:50%;background:#16a34a;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:livepulse 1.3s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* nav record button (blue → red while recording) */
.navrec{padding:9px 16px;font-size:14px}
.cta.recording{background:var(--danger)}

/* guest screen-share request banner */
.sharereq{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:70;display:flex;gap:10px;align-items:center;background:var(--txt);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.35);font-size:14px}
.sharereq .cta.small{background:#22c55e}
.sharereq .chip{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* nav camera-adjust dropdown (⚙ next to Webcam On) */
.navdd{position:relative;display:inline-flex;gap:8px;align-items:center}
.campanel{position:absolute;top:calc(100% + 10px);left:0;z-index:46;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(16,24,40,.18);padding:14px 16px;min-width:320px}
.campanel .vidsettings{flex-direction:column;align-items:stretch;margin:0;gap:12px}
.campanel .vidsettings .sld{justify-content:space-between}

/* setup-screen live self-preview (circular) + gear */
.selfprev{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 14px}
.selfprevvid{width:160px;height:160px;border-radius:50%;object-fit:cover;border:3px solid var(--acc);background:#000;transform:scaleX(-1)}

/* host settings shown as a live overlay over the running preview (session stays live) */
#setupCard.as-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(780px,92vw);max-height:88vh;overflow:auto;z-index:60;box-shadow:0 0 0 100vmax rgba(6,9,14,.55),0 20px 60px rgba(16,24,40,.4)}

/* account modal */
/* z-index 50 put dialogs UNDER any header that carries a stacking order (record.html's
   nav is 100), so record.html had been patching .modal locally. Fixed once here: the
   modal band is 1100, above every page header. Toast moved above it (see .toast) so
   confirmations stay readable over an open dialog. */
.modal{position:fixed;inset:0;background:rgba(6,9,14,.72);display:flex;align-items:center;justify-content:center;z-index:1100;padding:20px}
.modalcard{max-width:420px;width:100%;position:relative}
.modalclose{position:absolute;top:14px;right:14px}
.modalcard label{margin-bottom:12px}
.modalcard input[type=email],.modalcard input[type=password]{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px}
.modalcard .cta{width:100%;margin-top:4px}
.accerr{color:var(--danger);font-size:13px;min-height:18px;margin:2px 0 8px}
.nav .badge a{color:var(--acc)}

/* landing */
.hero{max-width:980px;margin:70px auto 40px;padding:0 20px;text-align:center}
.hero h1{font-size:44px;line-height:1.15;font-weight:800}
.hero h1 em{color:var(--acc);font-style:normal}
.hero p{color:var(--dim);font-size:19px;max-width:640px;margin:18px auto 30px}
.features{max-width:980px;margin:40px auto 80px;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.feat h3{font-size:17px;margin-bottom:8px}
.feat p{color:var(--dim);font-size:14.5px}
.pricing{text-align:center;color:var(--dim);font-size:15px;margin-bottom:70px}
footer{border-top:1px solid var(--line);color:var(--dim);text-align:center;padding:26px;font-size:13px}

/* Brand logo mark (added with new EZ Web Streams logo) */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand-ico{width:30px;height:30px;flex:none;display:block}
.ezn-brand{display:inline-flex;align-items:center;gap:9px}
.ezn-brand .brand-ico{width:28px;height:28px}
.ezn-brand .ezn-dot{display:none}