/* ---------- Tokens ---------- */
:root{
  --primary:#6366F1;--violet:#8B5CF6;--pink:#EC4899;--green:#10B981;--amber:#F59E0B;--red:#EF4444;
  --bg:#F8FAFC;--bg2:#EEF2FF;--surface:#fff;--surface2:#F1F5F9;--text:#1F2937;--muted:#6B7280;--border:#E5E7EB;
  --grad:linear-gradient(135deg,#6366F1,#8B5CF6);--shadow:0 10px 30px rgba(99,102,241,.12);--radius:16px;
  --glow:radial-gradient(60rem 30rem at 85% -10%,rgba(139,92,246,.18),transparent 60%),radial-gradient(40rem 30rem at -10% 10%,rgba(99,102,241,.14),transparent 60%);
}
[data-theme=dark]{
  --bg:#0B0F24;--bg2:#141937;--surface:#151A38;--surface2:#1D2347;--text:#EEF0FF;--muted:#A0A7CC;--border:#2A3060;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --glow:radial-gradient(60rem 30rem at 85% -10%,rgba(139,92,246,.28),transparent 60%),radial-gradient(40rem 30rem at -10% 10%,rgba(99,102,241,.22),transparent 60%);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background-color:var(--bg);background-image:var(--glow);background-repeat:no-repeat;background-attachment:fixed;color:var(--text);min-height:100vh;overflow-x:hidden;transition:background-color .3s,color .3s;line-height:1.5}
*,*::before,*::after{transition:background-color .3s,border-color .3s,color .2s}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;font-weight:800}
h2{font-size:1.6rem;font-weight:700}h3{font-size:1.05rem;font-weight:700;margin-bottom:.6rem}
.muted{color:var(--muted)}.center{text-align:center}.mt{margin-top:1.4rem}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ic{width:20px;height:20px}.ic.xl{width:48px;height:48px;color:var(--primary)}
.row{display:flex;align-items:center;gap:.6rem}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.row.end{justify-content:flex-end;margin-top:1.2rem}
:focus-visible{outline:3px solid rgba(99,102,241,.55);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;padding:.8rem clamp(1rem,3vw,2rem);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--text)!important;text-decoration:none!important}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff}
.top-links{display:flex;gap:1.4rem;margin-left:2rem}.top-links a{color:var(--muted);font-weight:500}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.icon-btn:hover{border-color:var(--primary)}
#themeToggle .moon{display:none}[data-theme=dark] #themeToggle .sun{display:none}[data-theme=dark] #themeToggle .moon{display:block}
.avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:.85rem}.avatar.lg{width:64px;height:64px;font-size:1.2rem}
.avatar-btn{background:none;border:0;cursor:pointer;padding:0}
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;display:flex;flex-direction:column}
.dropdown-menu a,.dropdown-menu button{padding:.6rem .8rem;border-radius:8px;color:var(--text);background:none;border:0;text-align:left;font:inherit;cursor:pointer}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--surface2);text-decoration:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.2rem;border-radius:12px;border:1px solid transparent;font:600 .95rem inherit;font-family:inherit;cursor:pointer;text-decoration:none!important;transition:transform .15s,box-shadow .2s,background-color .3s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.35)}
.btn-outline{background:var(--surface);color:var(--text);border-color:var(--border)}.btn-outline:hover{border-color:var(--primary)}
.btn-ghost{background:none;color:var(--text)}
.btn-danger{background:var(--red);color:#fff}
.btn-lg{padding:.9rem 1.6rem;font-size:1rem}.btn-block{width:100%}
.btn.loading{pointer-events:none;opacity:.7}.btn.loading::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Layout ---------- */
.shell{display:block}
.shell.has-sidebar{display:grid;grid-template-columns:240px 1fr}
.sidebar{display:none}
.has-sidebar .sidebar{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem;border-right:1px solid var(--border);background:var(--surface);position:sticky;top:65px;height:calc(100vh - 65px)}
.sidebar a{padding:.7rem 1rem;border-radius:12px;color:var(--muted);font-weight:600}
.sidebar a:hover{background:var(--surface2);text-decoration:none}
.sidebar a.active{background:var(--grad);color:#fff}
main{padding:clamp(1rem,3vw,2.5rem);max-width:1200px;width:100%;margin:0 auto;min-width:0}
[data-view]{display:none;animation:fade .3s}[data-view].active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.center-view.active{display:grid;place-items:center;min-height:70vh}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.2rem}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:3rem 0}

/* ---------- Home ---------- */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:2rem 0}
.eyebrow{color:var(--primary);font-weight:600;margin-bottom:.8rem}.lead{color:var(--muted);font-size:1.1rem;margin:1.2rem 0 1.8rem;max-width:34rem}
.hero-art{position:relative;padding:1rem}
.mock{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:1rem;transform:rotate(-2deg)}
.mock-bar{display:flex;gap:6px;margin-bottom:.8rem}.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.mock-grid b{aspect-ratio:16/10;border-radius:12px;background:var(--grad)}
.mock-grid b:nth-child(2){background:linear-gradient(135deg,#EC4899,#8B5CF6)}.mock-grid b:nth-child(3){background:linear-gradient(135deg,#10B981,#6366F1)}.mock-grid b:nth-child(4){background:linear-gradient(135deg,#F59E0B,#EC4899)}
.float{position:absolute;padding:.4rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600;font-size:.85rem}
.f1{top:-4px;right:6px;color:var(--pink)}.f2{bottom:0;left:6px;color:var(--green)}
.feat h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.feat p{color:var(--muted);font-size:.95rem}
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}.split p{margin:.6rem 0 1.2rem}
.checks{list-style:none;padding:0;display:grid;gap:.7rem}.checks li::before{content:"✓";color:#fff;background:var(--green);border-radius:50%;display:inline-grid;place-items:center;width:20px;height:20px;font-size:.7rem;margin-right:.6rem}

/* ---------- Forms ---------- */
.auth{width:100%;max-width:440px;display:grid;gap:1rem}
.field{display:grid;gap:.35rem}label,legend{font-weight:600;font-size:.9rem}
input[type=text],input[type=email],input[type=password],input[type=search],input:not([type]){width:100%;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit}
input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
input.invalid{border-color:var(--red)}.err{color:var(--red);min-height:1em;font-size:.8rem}
input[readonly]{font-weight:800;letter-spacing:.25em;text-align:center;font-size:1.2rem}
#joinCode{text-transform:uppercase;letter-spacing:.2em;text-align:center}
.check{display:flex;gap:.5rem;align-items:center;font-weight:500}
.options{border:1px solid var(--border);border-radius:12px;padding:1rem;display:grid;gap:.8rem}
.switch{display:flex;align-items:center;gap:.7rem;padding:.4rem 0;cursor:pointer;font-weight:500}
.switch input{appearance:none;width:42px;height:24px;border-radius:99px;background:var(--border);position:relative;cursor:pointer;flex:none}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked{background:var(--primary)}.switch input:checked::after{transform:translateX(18px)}
.search{max-width:260px}
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.status i{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.status[data-state=connected]{color:var(--green)}.status[data-state=connected] i{background:var(--green)}
.status[data-state=connecting]{color:var(--amber)}.status[data-state=connecting] i{background:var(--amber);animation:pulse 1s infinite}
.status[data-state=error]{color:var(--red)}.status[data-state=error] i{background:var(--red)}
@keyframes pulse{50%{opacity:.3}}

/* ---------- Dashboard / lists ---------- */
.stat strong{display:block;font-size:2rem;margin-top:.2rem}
.list{list-style:none;padding:0;display:grid;gap:.5rem}
.list li{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;border-radius:12px;background:var(--surface2)}
.list li .grow{flex:1;min-width:0}.list small{color:var(--muted);display:block}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:99px;background:var(--bg2);color:var(--primary);font-size:.78rem;font-weight:700}
.pill.live{background:rgba(16,185,129,.15);color:var(--green)}.pill.ended{background:rgba(107,114,128,.18);color:var(--muted)}.pill.scheduled{background:rgba(245,158,11,.18);color:var(--amber)}
.table-wrap{overflow-x:auto;padding:0}
table{width:100%;border-collapse:collapse;min-width:560px}th,td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}tr:last-child td{border-bottom:0}
.empty{display:grid;place-items:center;text-align:center;gap:.4rem;padding:2.5rem 1rem}

/* ---------- Meeting ---------- */
.meet-grid{display:grid;grid-template-columns:1fr 300px;gap:1.2rem}
.stage{min-height:420px;display:grid;place-items:center;background:linear-gradient(135deg,var(--surface),var(--bg2))}
.stage.sharing{background:var(--grad);color:#fff}.stage.sharing .muted{color:#e0e7ff}
.controls{display:flex;justify-content:center;gap:.8rem;margin-top:1.2rem;flex-wrap:wrap}
.ctrl{display:grid;justify-items:center;gap:.3rem;min-width:84px;padding:.8rem 1rem;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:600 .8rem inherit;cursor:pointer;box-shadow:var(--shadow)}
.ctrl[aria-pressed=true]{background:var(--grad);color:#fff;border-color:transparent}
.ctrl.danger{background:var(--red);color:#fff;border-color:transparent;align-content:center}

/* ---------- Toasts / modal ---------- */
.toasts{position:fixed;top:78px;right:1rem;z-index:60;display:grid;gap:.6rem;width:min(340px,calc(100vw - 2rem))}
.toast{padding:.8rem 1rem;border-radius:12px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary);box-shadow:var(--shadow);animation:fade .25s}
.toast.success{border-left-color:var(--green)}.toast.error{border-left-color:var(--red)}.toast.warn{border-left-color:var(--amber)}
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(10,12,30,.6);padding:1rem}
.modal-box{max-width:420px;width:100%}
.scrim{position:fixed;inset:0;background:rgba(10,12,30,.5);z-index:24}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero,.split,.grid-2,.meet-grid{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr 1fr}
  .shell.has-sidebar{grid-template-columns:1fr}
  .has-sidebar .sidebar{position:fixed;left:0;top:65px;bottom:0;height:auto;width:250px;z-index:25;transform:translateX(-100%);transition:transform .25s}
  .has-sidebar .sidebar.open{transform:none}
  .menu-btn:not([hidden]){display:grid}
  .top-links{display:none}
}
@media(max-width:600px){
  .grid-3,.grid-4{grid-template-columns:1fr}.btn-lg{width:100%}.top-actions .btn-ghost{display:none}.stage{min-height:260px}
  .page-head .row{width:100%}
}

/* ---------- Multi-page additions ---------- */
.center-view{display:grid;place-items:center;min-height:70vh}
textarea{width:100%;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;resize:vertical}
textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.top-links a.active{color:var(--primary)}
.menu-btn{display:none}
.footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem clamp(1rem,3vw,2rem);border-top:1px solid var(--border);font-size:.9rem}
.side{display:grid;gap:1rem;align-content:start}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.tile{display:grid;place-items:center;gap:.5rem;aspect-ratio:16/9;border-radius:var(--radius);background:linear-gradient(135deg,var(--bg2),var(--surface2));border:1px solid var(--border)}
.avatar.alt{background:linear-gradient(135deg,#EC4899,#8B5CF6)}
.access{border-color:var(--primary)}
.mt{margin-top:1.2rem}
@media(max-width:960px){
  .menu-btn{display:grid}
  .top-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:.5rem 1rem;background:var(--surface);border-bottom:1px solid var(--border)}
  .top-links.open{display:flex}.top-links a{padding:.8rem 0}
  .meet-grid{grid-template-columns:1fr}
}
@media(max-width:600px){.tiles{grid-template-columns:1fr 1fr}}

/* ===== Reference-matched design (LinkUp style) ===== */
:root{--glow:radial-gradient(40rem 28rem at 90% 0,rgba(139,92,246,.16),transparent 60%),radial-gradient(34rem 26rem at 0 100%,rgba(16,185,129,.12),transparent 60%),radial-gradient(30rem 24rem at 10% 0,rgba(99,102,241,.14),transparent 60%);--bg:#F8FAFF}
[data-theme=dark]{--bg:#0A0D24;--surface:#12163A;--surface2:#1A1F4A;--border:#2B3170;--glow:radial-gradient(40rem 28rem at 90% 0,rgba(139,92,246,.35),transparent 60%),radial-gradient(34rem 26rem at 0 100%,rgba(99,102,241,.3),transparent 60%)}
[data-theme=dark] .card{background:rgba(18,22,58,.8);border-color:rgba(139,92,246,.4);box-shadow:0 0 40px rgba(99,102,241,.22)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.small{font-size:.8rem}.btn-pill{border-radius:999px}
.script{font-family:Caveat,cursive;font-size:1.7rem;line-height:1.1;color:var(--primary);transform:rotate(-8deg);position:absolute}
.person{width:100%;height:100%;display:block}
/* hero */
.hero{grid-template-columns:1fr 1.1fr;padding:2.5rem 0 1rem}
.hero h1{font-size:clamp(2.8rem,6vw,4.4rem);margin-bottom:1rem}
.hero-art{position:relative;min-height:340px;display:grid;place-items:center}
.laptop{width:min(100%,430px)}
.screen{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;background:#1F2937;border-radius:14px 14px 0 0;border:4px solid #374151;border-bottom:0}
.screen .person{aspect-ratio:1;background:linear-gradient(135deg,#E0E7FF,#F5D0FE);border-radius:8px}
.base{height:14px;background:linear-gradient(#cbd5e1,#94a3b8);border-radius:0 0 14px 14px;margin:0 -14px}
.s1{top:0;right:0}
.plant{position:absolute;width:90px;left:-6px;bottom:-4px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0;padding:1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.strip div{display:flex;align-items:center;gap:.7rem;font-size:.85rem;font-weight:600}
.strip .ic{width:38px;height:38px;padding:9px;border-radius:12px;background:var(--bg2);color:var(--primary);flex:none}
/* auth cards */
.auth{border-radius:24px;padding:2rem;max-width:420px}
.deco{position:relative}.sl{left:calc(50% - 360px);top:30%}
.badge-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:var(--bg2);color:var(--primary)}
.badge-ic .ic{width:26px;height:26px}
#roomCode{font-size:1.9rem;letter-spacing:.12em;padding:.9rem;background:var(--bg2);border:2px solid var(--border);color:var(--text)}
.btn-copy{background:linear-gradient(135deg,#4F6EF7,#6366F1);color:#fff}
[data-theme=dark] .btn-copy{background:linear-gradient(135deg,#14B8A6,#10B981)}
.or{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.8rem}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.input-ic{position:relative}.input-ic .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}.input-ic input{padding-left:2.5rem!important}
#joinCode{text-align:left;letter-spacing:normal;text-transform:none}#joinCode:not(:placeholder-shown){text-transform:uppercase;letter-spacing:.15em}
.plant-r{left:auto;right:calc(50% - 360px);bottom:10%;width:110px}
/* meeting */
.meet-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.meet-grid{grid-template-columns:1fr 290px}
.tiles{gap:1rem}.tile{margin:0;position:relative;aspect-ratio:1/1.05;overflow:hidden;border-radius:20px;background:linear-gradient(160deg,#FCE7F3,#E0E7FF);border:1px solid var(--border)}
.tile.alt{background:linear-gradient(160deg,#DBEAFE,#EDE9FE)}
[data-theme=dark] .tile{background:linear-gradient(160deg,#2A2160,#1A1F4A)}
.tile .person{position:absolute;inset:12% 8% 0}
.tile figcaption{position:absolute;left:10px;bottom:10px;padding:.15rem .7rem;border-radius:99px;background:rgba(15,18,40,.65);color:#fff;font-size:.8rem}
.controls{justify-content:flex-start;margin-top:1rem}
.ctrl{position:relative;min-width:68px;padding:.6rem .8rem;border-radius:14px;font-size:.72rem;box-shadow:none}
.ctrl.danger{padding:.8rem 1.2rem}
.badge{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font:700 .65rem/18px Inter,sans-serif;text-align:center}
.btn-green{background:var(--green);color:#fff}
@media(max-width:960px){.hero,.meet-grid{grid-template-columns:1fr}.strip{grid-template-columns:1fr 1fr}.sl,.plant-r{display:none}}
@media(max-width:600px){.strip{grid-template-columns:1fr}.tile{aspect-ratio:1}.controls .ctrl{flex:1}}

/* ===== Strict reference match ===== */
.btn-sm{padding:.4rem 1.1rem;font-size:.85rem}
.nav-part{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)}
body.min .top-links a:not(:first-child){display:none}
body.min .top-links{display:flex!important;position:static;flex-direction:row;margin-left:auto;padding:0;border:0;background:none}
body.min .top-links a:first-child{order:2}
body.min #guestActions,body.min #userMenu,body.min .menu-btn{display:none!important}
body.min .top-actions{margin-left:0}
.plane{position:absolute;right:calc(50% - 330px);top:28%;width:34px;color:var(--primary);opacity:.7;transform:rotate(8deg)}
@media(max-width:960px){.plane{display:none}}

/* ===== Dark mode fixes ===== */
:root{color-scheme:light}
[data-theme=dark]{color-scheme:dark}
[data-theme=dark] .screen .person{background:linear-gradient(135deg,#2A2160,#1A1F4A)}
[data-theme=dark] .strip,[data-theme=dark] .dropdown-menu,[data-theme=dark] .toast,[data-theme=dark] .ctrl{background:rgba(18,22,58,.85);border-color:rgba(139,92,246,.4)}
[data-theme=dark] .ctrl[aria-pressed=true]{background:var(--grad)}
[data-theme=dark] .ctrl.danger{background:var(--red)}
[data-theme=dark] .btn-outline{background:rgba(18,22,58,.7);border-color:rgba(139,92,246,.5);color:var(--text)}
[data-theme=dark] .topbar{background:rgba(10,13,36,.8)}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#7F87B8}
[data-theme=dark] .script{color:#A5B4FC}
[data-theme=dark] .remote-browser-card{background:rgba(18,22,58,.9);border-color:rgba(139,92,246,.5);box-shadow:0 12px 40px rgba(0,0,0,.4)}

/* ---------- REAL MEETING MEDIA / CHAT ---------- */
.tile video{width:100%;height:100%;object-fit:cover;border-radius:20px;background:#111;display:block}
.chat-panel{position:fixed;right:24px;bottom:24px;width:340px;max-width:calc(100vw - 48px);z-index:50;padding:0;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.chat-head h3{margin:0}
.chat-messages{height:300px;overflow:auto;padding:12px}
.chat-message{background:var(--bg2);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.chat-message.mine{background:var(--primary);color:#fff;margin-left:28px}
.chat-message b{font-size:.75rem}
.chat-message p{margin:3px 0 0;word-break:break-word}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.chat-form input{min-width:0;flex:1}
@media(max-width:600px){.chat-panel{right:12px;bottom:12px;max-width:calc(100vw - 24px);width:calc(100vw - 24px)}}

/* ---------- Made by (creators) ---------- */
.creators{margin-top:2.2rem}
.creators-head{text-align:center;margin-bottom:1.4rem}
.creators-head h2{margin:.2rem 0 .4rem}
.creators-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:760px;margin:0 auto}
.creator{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.5rem;transition:transform .2s,border-color .2s,box-shadow .2s}
.creator:hover{transform:translateY(-4px);border-color:var(--primary)}
.creator .avatar.lg{flex:none;box-shadow:0 8px 20px rgba(99,102,241,.35)}
.creator h3{margin:0;font-size:1.15rem}
.creator p{margin:.15rem 0 0;color:var(--muted);font-size:.9rem}
.creators-note{text-align:center;color:var(--muted);margin-top:1.2rem;font-size:.95rem}
.creators-note .heart{color:var(--pink)}
.made-by{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;padding:1.1rem 1.5rem;text-align:center;background:linear-gradient(135deg,var(--surface),var(--bg2))}
.made-by .avatars{display:flex}
.made-by .avatars .avatar{border:3px solid var(--surface)}
.made-by .avatars .avatar+.avatar{margin-left:-10px}
.made-by p{margin:0;font-weight:600}
@media(max-width:600px){.creators-grid{grid-template-columns:1fr}}

/* ---------- Remote Browser Control Workspace ---------- */
.remote-browser-card {
  margin-top: 1.5rem;
  padding: 1.2rem;
  border: 2px solid var(--primary);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 12px 35px rgba(99,102,241,0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.remote-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
}
.remote-browser-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.remote-browser-url-form {
  display: flex;
  gap: 0.4rem;
  flex: 1;
  min-width: 260px;
}
.remote-browser-url-form input {
  flex: 1;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}
.rb-presets {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.remote-browser-viewport {
  position: relative;
  width: 100%;
  height: 540px;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.remote-browser-viewport iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.rb-pointer-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
.rb-click-ripple {
  position: absolute;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  border-radius: 50%;
  background: rgba(236,72,153,0.7);
  border: 2px solid #fff;
  box-shadow: 0 0 16px #ec4899;
  animation: clickRipple 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes clickRipple {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(2.8); opacity: 0; }
}
.rb-cursor-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(99,102,241,0.9);
  pointer-events: none;
  transition: left 0.05s linear, top 0.05s linear;
  transform: translate(-50%, -50%);
  z-index: 15;
}

/* ---------- Remote Browser Fullscreen Mode ---------- */
.remote-browser-card.fullscreen {
  position: fixed;
  inset: 12px;
  z-index: 100;
  margin: 0;
  height: calc(100vh - 24px);
  max-width: none;
  box-shadow: 0 0 50px rgba(0,0,0,0.7);
}
.remote-browser-card.fullscreen .remote-browser-viewport {
  height: calc(100vh - 170px);
}




/* ---------- Remote Browser (AnyDesk-style) ---------- */
.remote-browser-viewport { height: auto; min-height: 240px; display: flex; justify-content: center; background: #111; }
.remote-browser-viewport canvas {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  cursor: default;
  outline: none;
  background: #000;
}
.remote-browser-viewport canvas:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.remote-browser-card.fullscreen .remote-browser-viewport canvas { max-height: calc(100vh - 230px); }
.remote-browser-card.fullscreen .remote-browser-viewport { height: auto; }
.rb-waiting, .rb-paused {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; color: #fff; font-weight: 600; background: rgba(0,0,0,.55); z-index: 5;
}
.rb-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.rb-tab {
  display: flex; align-items: center; gap: 6px; max-width: 200px; min-width: 90px;
  padding: .35rem .5rem .35rem .75rem; border: 1px solid var(--border); border-bottom: 0;
  border-radius: 10px 10px 0 0; background: var(--bg2); color: var(--muted); font-size: .82rem; cursor: pointer;
}
.rb-tab.active { background: var(--surface); color: var(--text, inherit); border-color: var(--primary); font-weight: 600; }
.rb-tab-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-tab-x, .rb-tab-new { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.rb-tab-x:hover, .rb-tab-new:hover { background: rgba(127,127,127,.25); }
.rb-host-bar {
  position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .6rem 1rem; margin-bottom: 1rem; border-radius: 12px;
  background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.5); font-weight: 600;
}
.rb-host-bar span:nth-child(2) { flex: 1; min-width: 200px; }


/* ---------- Remote Browser: full-window mode (default while controlling) ---------- */
body.rb-full { overflow: hidden; }
.remote-browser-card.fullscreen {
  position: fixed; inset: 0; z-index: 200; margin: 0; height: 100vh; max-width: none;
  border-radius: 0; border: 0; padding: .6rem .8rem; gap: .5rem; overflow: hidden;
  box-shadow: none; background: var(--surface);
}
.remote-browser-card.fullscreen .remote-browser-head { padding-bottom: .4rem; }
.remote-browser-card.fullscreen .remote-browser-viewport { flex: 1; min-height: 0; height: auto; align-items: center; }
.remote-browser-card.fullscreen .remote-browser-viewport canvas { max-height: calc(100vh - 170px); }
.rb-host-bar { z-index: 300; }


/* ---------- Remote screen video ---------- */
.remote-browser-viewport video {
  display: block; width: auto; max-width: 100%; max-height: 70vh;
  background: #000; outline: none; cursor: crosshair; object-fit: contain;
}
.remote-browser-viewport video:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.remote-browser-card.fullscreen .remote-browser-viewport video { max-height: calc(100vh - 200px); }


/* ---------- Remote browser: tab strip + address bar ---------- */
.rb-tabs { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .15rem; min-height: 2rem; }
.rb-tab { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; min-width: 100px; max-width: 210px; padding: .3rem .5rem; border: 1px solid rgba(128,128,128,.45); border-radius: 8px 8px 0 0; font-size: .8rem; white-space: nowrap; cursor: pointer; user-select: none; }
.rb-tab .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.rb-tab .x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; opacity: .7; padding: 0 .1rem; }
.rb-tab .x:hover { opacity: 1; }
.rb-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.rb-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rb-url-form { display: flex; flex: 1; gap: .4rem; min-width: 220px; }
.rb-url-form input { flex: 1; padding: .4rem .7rem; font-size: .9rem; }


/* ---------- Forgot password flow (appended) ---------- */
.form-stack{display:grid;gap:1rem}
.back-link{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600}
.back-link .ic{width:18px;height:18px}
.email-hl{color:var(--primary)}
.mail-art{display:grid;place-items:center;margin:.2rem 0}

/* stepper */
.steps{list-style:none;padding:0;margin:.2rem 0 .4rem;display:grid}
.step{position:relative;display:flex;align-items:flex-start;gap:.9rem;padding-bottom:1rem}
.step:last-child{padding-bottom:0}
.step:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--border)}
.step.completed:not(:last-child)::before{background:rgba(99,102,241,.35)}
.step-circle{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface2);color:var(--muted);font-weight:700;font-size:.95rem}
.step-circle svg{width:16px;height:16px}
.step.active .step-circle{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(99,102,241,.35)}
.step.completed .step-circle{background:color-mix(in srgb,var(--primary) 22%,var(--surface));color:var(--primary)}
.step-text strong{display:block;font-size:.92rem;line-height:1.3}
.step-text small{display:block;color:var(--muted);font-size:.8rem}

/* 6-digit code boxes */
.otp-inputs{display:flex;justify-content:space-between;gap:.5rem}
.otp-inputs .otp-input{flex:1;width:auto;min-width:0;max-width:52px;height:52px;padding:0;text-align:center;font-size:1.3rem;font-weight:700;border-radius:12px}

/* password eye button */
.input-ic.has-toggle input{padding-right:2.8rem}
.input-ic .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.input-ic .eye:hover{color:var(--primary)}
.input-ic .eye svg{width:18px;height:18px}

/* keep "Home" visible in the navbar on small screens (only on these 3 pages) */
@media(max-width:960px){
  .auth-page .topbar .top-links{display:flex;position:static;flex-direction:row;margin:0 0 0 .5rem;padding:0;border:0;background:none}
  .auth-page .topbar .top-links a{padding:0}
}

/* ---------- Browser control extension status (dashboard, create meeting, install guide) ---------- */
.ext-status{display:grid;gap:.7rem;margin-bottom:1.2rem}
.ext-status-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ext-status h3{margin:0 0 .2rem}
.ext-status .ext-message{margin:0;color:var(--muted)}
.ext-pill{flex:none;background:var(--bg2);color:var(--muted)}
[data-ext-status][data-state=ready] .ext-pill{background:rgba(16,185,129,.15);color:var(--green)}
[data-ext-status][data-state=ready]{border-left:4px solid var(--green)}
[data-ext-status][data-state=outdated] .ext-pill,[data-ext-status][data-state=not-connected] .ext-pill{background:rgba(245,158,11,.18);color:var(--amber)}
[data-ext-status][data-state=outdated],[data-ext-status][data-state=not-connected]{border-left:4px solid var(--amber)}
[data-ext-status][data-state=not-installed] .ext-pill{background:rgba(239,68,68,.14);color:var(--red)}
[data-ext-status][data-state=not-installed]{border-left:4px solid var(--red)}
.ext-gate{display:grid;gap:.6rem;padding:.9rem 1rem;border-radius:12px;background:var(--surface2);font-size:.9rem}
.ext-gate[hidden]{display:none}
.check-row{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--text)}
.check-row input{width:auto;margin-top:.25rem}
.steps{padding-left:1.2rem;display:grid;gap:.7rem;margin:0}
.steps code{background:var(--bg2);padding:.1rem .35rem;border-radius:6px}
.tab-picker{display:grid;gap:.5rem;margin:.6rem 0}
.tab-picker select{width:100%;padding:.7rem .9rem;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit}


/* ---------- Browser access 1.6: automatic tab discovery, request + connection states ---------- */
.rb-request{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.rb-request input{flex:1;min-width:220px;padding:.55rem .8rem;font-size:.9rem}
.rb-request-status{margin:.5rem 0 0;font-weight:600;color:var(--muted)}
.rb-request-status[data-state=waiting]{color:var(--amber)}
.rb-request-status[data-state=declined]{color:var(--red)}
.access-status{margin:.2rem 0;color:var(--muted)}
.access-status[data-kind=ready]{color:var(--green);font-weight:600}
.access-status[data-kind=choose],.access-status[data-kind=no-tabs],.access-status[data-kind=failed],.access-status[data-kind^=ext-]{color:var(--amber);font-weight:600}
.access-status[data-kind=ext-not-installed],.access-status[data-kind=ext-wrong-site],.access-status[data-kind=ext-missing]{color:var(--red)}
#accessCard button[data-action=accept]:disabled{opacity:.5;cursor:not-allowed}
.rb-locked{pointer-events:none;opacity:.6}
#rbScreen.rb-locked{opacity:1;cursor:wait}
.remote-browser-card .rb-nav button:disabled,.remote-browser-card #rbUrl:disabled{opacity:.5;cursor:not-allowed}
.rb-host-bar[data-state=connecting],.rb-host-bar[data-state=reconnecting]{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.6)}
[data-ext-status][data-state=blocked] .ext-pill{background:rgba(245,158,11,.18);color:var(--amber)}
[data-ext-status][data-state=blocked]{border-left:4px solid var(--amber)}
[data-ext-status][data-state=wrong-site] .ext-pill{background:rgba(239,68,68,.14);color:var(--red)}
[data-ext-status][data-state=wrong-site]{border-left:4px solid var(--red)}


/* ---------- 1.7: Browser Access status (server sessions) and the other person's screen share ---------- */
[data-ba-status][data-state=ready] .ext-pill{background:rgba(16,185,129,.15);color:var(--green)}
[data-ba-status][data-state=ready]{border-left:4px solid var(--green)}
[data-ba-status][data-state=unavailable] .ext-pill,[data-ba-status][data-state=offline] .ext-pill{background:rgba(239,68,68,.14);color:var(--red)}
[data-ba-status][data-state=unavailable],[data-ba-status][data-state=offline]{border-left:4px solid var(--red)}
.screen-stage{display:grid;gap:.4rem;padding:.6rem;margin-bottom:1rem}
.screen-stage video{width:100%;max-height:65vh;background:#000;border-radius:10px;object-fit:contain;pointer-events:none}
.screen-stage-cap{margin:0}
.remote-browser-card[data-role=owner] .rb-nav,.remote-browser-card[data-role=owner] .rb-tab-new{display:none}
.remote-browser-card[data-role=owner] #rbScreen{cursor:default}

/* ---------- 1.7.1: Browser Access fixes ---------- */
/* the host bar no longer floats over the top navigation when the page is scrolled */
.rb-host-bar { position: relative; top: auto; z-index: 1; }
/* sharer's live view of the shared tab (view only) */
.rb-host-view { display: grid; gap: .5rem; padding: .8rem; margin-bottom: 1rem; }
.rb-host-view p { margin: 0; }
.rb-host-view-box { position: relative; background: #000; border-radius: 10px; overflow: hidden; display: flex; justify-content: center; }
.rb-host-view-box canvas { display: block; max-width: 100%; max-height: 55vh; pointer-events: none; }
.rb-host-bar .btn-outline { color: inherit; border-color: currentColor; background: transparent; }

/* 1.8.0 Chrome Access */
.rb-tab.restricted { opacity: .55; cursor: not-allowed; font-style: italic; }
.access-warn { color: var(--amber, #b45309); }
.rb-host-bar[data-state="paused"] { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.6); }
#rbRequestStatus[data-state="active"], #rbRequestStatus[data-state="approved"] { color: var(--green, #059669); }
#rbRequestStatus[data-state="rejected"], #rbRequestStatus[data-state="revoked"], #rbRequestStatus[data-state="expired"], #rbRequestStatus[data-state="disconnected"] { color: var(--red, #dc2626); }
/* the bar's buttons start on their own row at the left, so notifications on the right never cover Revoke Access */
#rbHostBarText { flex: 1 1 calc(100% - 120px); }
/* shown only when Chrome blocks the other person's sound until a click on this page (autoplay rules) */
.sound-unlock { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 400; box-shadow: 0 10px 30px rgba(0,0,0,.25); }