/* ==========================================================================
   ngoc.love STUDIO 2 — product UI pass
   Loaded after studio.css. Removes the glass/HUD look and turns the app into
   a calm, familiar meeting product: editorial lobby, anchored popovers,
   edge-docked sidebars and a full-width control bar.
   ========================================================================== */

:root{
  --s2-bg:#0b0c0e;
  --s2-bg-soft:#101114;
  --s2-panel:#141519;
  --s2-panel-2:#1a1c21;
  --s2-line:rgba(242,239,233,.09);
  --s2-line-strong:rgba(242,239,233,.16);
  --s2-text:#f2efe8;
  --s2-muted:rgba(242,239,233,.68);
  --s2-faint:rgba(242,239,233,.45);
  --s2-cta:#f2efe6;
  --s2-cta-text:#111214;
  --s2-blue:#6f8cff;
  --s2-green:#5bd6a0;
  --s2-amber:#f2c46d;
  --s2-red:#e5484d;
}
html{background:var(--s2-bg)}
html:has(body.light){background:#f6f3ec}

/* first paint while /api/config is still loading */
#bootSplash{
  position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;background:var(--s2-bg);color:var(--s2-text);
}
body:has(.screen:not(.hidden)) #bootSplash{display:none}
.boot-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--s2-cta);color:var(--s2-cta-text);font-size:19px;line-height:1;
}
.boot-name{font-size:11px;letter-spacing:.24em;color:var(--s2-muted)}
.boot-line{width:82px;height:2px;border-radius:2px;background:var(--s2-line);overflow:hidden}
.boot-line i{display:block;width:38%;height:100%;background:var(--s2-blue);animation:bootSlide 1.05s ease-in-out infinite}
@keyframes bootSlide{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}

body.light{
  --s2-bg:#f6f3ec;
  --s2-bg-soft:#efece4;
  --s2-panel:#fffdf9;
  --s2-panel-2:#f2eee5;
  --s2-line:rgba(20,22,25,.10);
  --s2-line-strong:rgba(20,22,25,.18);
  --s2-text:#17181b;
  --s2-muted:rgba(23,24,27,.68);
  --s2-faint:rgba(23,24,27,.46);
  --s2-cta:#17181b;
  --s2-cta-text:#fffdf8;
}

/* ---------- ambient background: atmosphere only, no fake telemetry ---------- */
.px-bg{
  position:fixed!important;inset:0!important;z-index:0!important;overflow:hidden;pointer-events:none!important;
  background:var(--s2-bg)!important;
}
.px-bg .px-orb,.px-bg .px-grid,.px-chrome,.px-hero,.px-hero::before,.px-hero::after,.px-bg::before,.px-bg::after,.lobby-main::before,.lobby-main::after{display:none!important}
.px-atmosphere{
  position:absolute;inset:-24%;
  background:
    radial-gradient(42% 34% at 72% 16%,rgba(111,140,255,.13),transparent 68%),
    radial-gradient(38% 30% at 20% 64%,rgba(190,172,140,.075),transparent 70%),
    radial-gradient(48% 38% at 84% 88%,rgba(90,112,150,.075),transparent 72%);
  filter:blur(20px);
}
.px-grain{
  position:absolute;inset:0;opacity:.13;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
body.light .px-atmosphere{opacity:.55}
body.light .px-grain{opacity:.06}

/* ==========================================================================
   LOBBY
   ========================================================================== */
#joinScreen:not(.hidden){
  display:block!important;min-height:100dvh;padding:0!important;overflow:auto!important;
  position:relative;z-index:1;background:transparent!important;color:var(--s2-text);
}
#joinScreen.hidden{display:none!important}
.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}
#joinScreen::before,#joinScreen::after{display:none!important}
#joinScreen .join-card{display:none!important}

.lobby-header{
  position:relative;z-index:3;height:76px;display:flex;align-items:center;gap:32px;
  padding:0 clamp(22px,5vw,68px);border-bottom:1px solid var(--s2-line);
}
.lobby-brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:var(--s2-cta);color:var(--s2-cta-text);font-size:18px;line-height:1;letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-copy{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand-copy b{font-size:15px;font-weight:650;letter-spacing:.01em}
.brand-copy span{font-size:11px;color:var(--s2-faint);letter-spacing:.06em}
.lobby-nav{display:flex;align-items:center;gap:25px;flex:1;min-width:0}
.lobby-nav a,.lobby-nav button{
  appearance:none;border:0;background:none;padding:5px 0;color:var(--s2-muted);
  font:inherit;font-size:12.5px;cursor:pointer;position:relative;
}
.lobby-nav a:hover,.lobby-nav button:hover{color:var(--s2-text)}
.lobby-nav a::after,.lobby-nav button::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--s2-text);transition:right .22s ease;
}
.lobby-nav a:hover::after,.lobby-nav button:hover::after{right:0}
.lobby-tools{display:flex;align-items:center;gap:7px;flex:none}
.browser-badge{display:inline-flex;align-items:center;gap:7px;margin-right:10px;color:var(--s2-faint);font-size:10.5px;letter-spacing:.02em}
.browser-badge i{width:5px;height:5px;border-radius:50%;background:var(--s2-green);box-shadow:0 0 0 3px rgba(91,214,160,.09)}
.lobby-tool{
  appearance:none;border:1px solid transparent;background:transparent;color:var(--s2-muted);
  min-height:33px;padding:0 10px;border-radius:8px;font:inherit;font-size:11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
}
.lobby-tool svg{width:16px;height:16px}
.lobby-tool:hover{color:var(--s2-text);border-color:var(--s2-line);background:rgba(255,255,255,.035)}
body.light .lobby-tool:hover{background:rgba(20,22,25,.045)}

.lobby-main{
  position:relative;z-index:2;max-width:1360px;margin:0 auto;
  padding:clamp(40px,6.6vh,82px) clamp(22px,5vw,68px) 48px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,520px);
  gap:clamp(46px,6vw,112px);align-items:center;
}
.lobby-copy{max-width:640px;padding-bottom:10px}
.lobby-eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 25px;color:var(--s2-faint);font-size:11px;letter-spacing:.16em}
.lobby-eyebrow span{width:30px;height:1px;background:var(--s2-line-strong)}
.lobby-copy h1{margin:0;color:var(--s2-text);font-size:clamp(45px,5.2vw,78px);line-height:1.04;letter-spacing:-.065em;font-weight:520}
.lobby-copy h1 em{
  font-style:normal;position:relative;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(111,140,255,.78);
  text-decoration-thickness:2px;text-underline-offset:.09em;
}
.lobby-copy h1 em::after{display:none}
body.light .lobby-copy h1 em{color:#0f1012}
.lobby-lede{max-width:530px;margin:28px 0 0;color:var(--s2-muted);font-size:15px;line-height:1.95;letter-spacing:.005em}
.lobby-actions{display:flex;align-items:center;gap:10px;margin-top:33px;flex-wrap:wrap}
.btn-lobby-primary,.btn-lobby-secondary{
  min-height:48px;border-radius:10px;padding:0 21px;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:520;letter-spacing:.01em;cursor:pointer;transition:transform .16s ease,background .16s,border-color .16s;
}
.btn-lobby-primary svg,.btn-lobby-secondary svg{width:17px;height:17px}
.btn-lobby-primary{border:1px solid transparent;background:var(--s2-cta);color:var(--s2-cta-text);box-shadow:0 10px 24px -16px rgba(0,0,0,.8)}
.btn-lobby-primary:hover{transform:translateY(-1px);background:#fffdf7}
body.light .btn-lobby-primary:hover{background:#000}
.btn-lobby-secondary{border:1px solid var(--s2-line-strong);background:rgba(255,255,255,.018);color:var(--s2-text)}
.btn-lobby-secondary:hover{background:rgba(255,255,255,.055);transform:translateY(-1px)}
body.light .btn-lobby-secondary{background:rgba(255,255,255,.5)}
body.light .btn-lobby-secondary:hover{background:#fff}

.recent-block{margin-top:30px;padding-top:18px;border-top:1px solid var(--s2-line);max-width:540px}
.recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.recent-head>span{font-size:10.5px;letter-spacing:.11em;color:var(--s2-faint)}
.recent-head button{border:0;background:none;color:var(--s2-faint);font:inherit;font-size:10.5px;cursor:pointer;padding:3px 0}
.recent-head button:hover{color:var(--s2-text)}
.recent-list{display:flex;flex-direction:column}
.recent-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--s2-line);
  background:none;color:var(--s2-text);text-align:left;cursor:pointer;font:inherit;
}
.recent-item:last-child{border-bottom:0}
.recent-item:hover .recent-id{color:var(--s2-blue)}
.recent-avatar{width:29px;height:29px;border-radius:8px;background:var(--s2-panel-2);display:grid;place-items:center;flex:none;color:var(--s2-muted)}
.recent-avatar svg{width:14px;height:14px}
.recent-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.recent-id{font-size:12.5px;font-weight:520;transition:color .15s}
.recent-time{font-size:10px;color:var(--s2-faint)}
.recent-go{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:var(--s2-faint);background:rgba(255,255,255,.035)}
.recent-go svg{width:12px;height:12px}

.lobby-points{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--s2-line);max-width:600px;
}
.lobby-points li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.point-icon{width:18px;height:18px;border-radius:0;background:none;display:grid;place-items:center;flex:none;color:var(--s2-faint)}
body.light .point-icon{background:none;color:var(--s2-faint)}
.point-icon svg{width:15px;height:15px}
.lobby-points li>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.lobby-points b{font-size:11.5px;font-weight:520;color:var(--s2-text)}
.lobby-points small{font-size:10px;line-height:1.55;color:var(--s2-faint)}

.join-studio{width:100%;max-width:520px;justify-self:end}
.preview-card{position:relative}
.preview-head{height:26px;display:flex;align-items:center;gap:10px;margin:0 1px 7px}
.preview-label{font-size:10.5px;letter-spacing:.10em;color:var(--s2-faint);flex:1}
.preview-head .join-ready{flex:none}
.preview-head .preview-stats{position:static!important;inset:auto!important;font-size:9.5px;color:var(--s2-faint);background:none;border:0;padding:0}

#joinScreen .preview-wrap{
  position:relative;width:100%;aspect-ratio:16/9;max-height:360px;
  border:1px solid var(--s2-line-strong)!important;border-radius:15px!important;background:#070809!important;
  overflow:hidden;box-shadow:0 26px 60px -42px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04);
}
#joinScreen .preview-wrap::before,#joinScreen .preview-wrap::after{display:none!important}
body.light #joinScreen .preview-head .join-ready{color:var(--s2-muted)!important;background:none!important;border:0!important;box-shadow:none!important}
#joinScreen #previewVideo{width:100%;height:100%;object-fit:cover;border-radius:0!important}
#joinScreen .preview-ph{font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.54)}
#joinScreen .preview-bar{bottom:12px;left:50%;transform:translateX(-50%);right:auto;gap:8px}
#joinScreen .pv-btn{
  width:39px;height:39px;border-radius:50%!important;background:rgba(12,13,15,.72)!important;
  border:1px solid rgba(255,255,255,.16)!important;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#joinScreen .pv-btn:hover{background:rgba(24,26,30,.9)!important;border-color:rgba(255,255,255,.28)!important}
#joinScreen .pv-btn.off{background:#ca383d!important;border-color:transparent!important}
#joinScreen .pv-btn .ico{width:16px;height:16px}
#joinScreen .level-meter{left:13px;bottom:14px;width:58px;height:3px;border-radius:3px;background:rgba(255,255,255,.14)}

.join-devices{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;
  margin-top:13px!important;border-top:1px solid var(--s2-line);border-bottom:1px solid var(--s2-line);
}
.join-devices .device-select{display:flex!important;align-items:center;gap:9px;min-width:0;padding:11px 12px!important;border:0!important;border-radius:0!important;background:transparent!important}
.join-devices .device-select+.device-select{border-left:1px solid var(--s2-line)!important}
.join-devices .device-select:hover{background:rgba(255,255,255,.022)!important}
body.light .join-devices .device-select:hover{background:rgba(20,22,25,.025)!important}
.device-ico{width:18px!important;height:18px!important;border-radius:0!important;background:none!important;color:var(--s2-faint)!important;flex:none}
body.light .device-ico{background:none!important;color:rgba(20,22,25,.42)!important}
.device-ico svg{width:14px!important;height:14px!important}
.device-meta{gap:2px!important;min-width:0;flex:1}
.device-meta b{font-size:9.5px!important;line-height:1.2;color:var(--s2-faint)!important;letter-spacing:.04em!important}
.device-value-row{display:flex;align-items:center;gap:5px;min-width:0}
.device-meta select{
  appearance:none!important;-webkit-appearance:none!important;flex:1;width:100%;min-width:0;
  padding:1px 15px 1px 0!important;margin:0;border:0!important;border-radius:0!important;
  background-color:transparent!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888b92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 1px center!important;background-size:10px!important;
  color:var(--s2-text)!important;font-size:11px!important;line-height:1.55!important;
  text-overflow:ellipsis;cursor:pointer;outline:0;
}
.device-meta select option{background:var(--s2-panel);color:var(--s2-text)}
#joinScreen .join-devices .device-meta select{
  height:auto!important;padding:1px 15px 1px 0!important;background-color:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;font-size:11px!important;line-height:1.55!important;
}
.dev-test{
  appearance:none;border:0;background:none;padding:1px 0;color:var(--s2-faint);
  font:inherit;font-size:9.5px;cursor:pointer;flex:none;white-space:nowrap;
}
.dev-test:hover{color:var(--s2-text)}

.join-form{margin-top:24px;padding-top:22px;border-top:1px solid var(--s2-line)}
.join-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:17px}
.form-kicker{margin:0 0 5px;font-size:9.5px;letter-spacing:.13em;color:var(--s2-faint)}
.join-form-head h2{margin:0;font-size:24px;line-height:1.2;font-weight:560;letter-spacing:-.035em}
.secure-note{max-width:190px;display:flex;align-items:flex-start;gap:6px;padding-top:3px;color:var(--s2-faint);font-size:9px;line-height:1.55;text-align:right}
.secure-note svg{width:13px;height:13px;flex:none;margin-top:1px;opacity:.8}

#joinScreen .fields{margin:0}
#joinScreen .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#joinScreen .field{display:flex;flex-direction:column;margin-bottom:12px;gap:6px;min-width:0}
#joinScreen .field>span{font-size:10.5px;font-weight:480;letter-spacing:.02em;color:var(--s2-muted)}
#joinScreen input[type=text],#joinScreen input[type=password],#joinScreen select{
  height:46px;padding:0 13px!important;background:rgba(255,255,255,.038)!important;
  border:1px solid var(--s2-line)!important;border-radius:9px!important;color:var(--s2-text)!important;
  font-size:13.5px!important;line-height:46px;outline:0;box-shadow:none!important;transition:border-color .16s,background .16s;
}
body.light #joinScreen input[type=text],body.light #joinScreen input[type=password],body.light #joinScreen select{background:rgba(255,255,255,.72)!important}
#joinScreen input[type=text]:focus,#joinScreen input[type=password]:focus,#joinScreen select:focus{
  border-color:rgba(111,140,255,.7)!important;background:rgba(255,255,255,.055)!important;box-shadow:0 0 0 3px rgba(111,140,255,.10)!important;
}
#joinScreen input::placeholder{color:var(--s2-faint)}

.join-options{margin:1px 0 13px;border-top:1px solid var(--s2-line);border-bottom:1px solid var(--s2-line)}
.join-options summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:10px 1px;color:var(--s2-faint);font-size:10.5px}
.join-options summary::-webkit-details-marker{display:none}
.join-options summary svg{width:13px;height:13px;transition:transform .18s}
.join-options[open] summary svg{transform:rotate(180deg)}
.join-options-body{padding:2px 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join-options-body .field{margin-bottom:0}

.lastroom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px!important;padding:9px 11px!important;
  border:1px solid var(--s2-line)!important;border-radius:9px!important;background:rgba(255,255,255,.025)!important;
}
.lastroom .lr-txt{font-size:10.5px;color:var(--s2-muted)}
.lastroom .lr-txt b{color:var(--s2-text);font-weight:540}
.lastroom .btn{height:30px!important;padding:0 10px!important;font-size:10px!important;border-radius:7px!important}

#joinScreen .hint{min-height:16px;margin:0 0 9px;font-size:10.5px;line-height:1.5;color:var(--s2-faint)}
#joinScreen .hint.ok{color:rgba(91,214,160,.82)}
#joinScreen .hint.err{color:#ff9b9d}
.join-actions{display:flex;align-items:center;gap:8px;margin-top:1px}
#joinScreen #joinBtn{
  flex:1;height:48px;min-height:48px;border:0!important;border-radius:9px!important;background:var(--s2-cta)!important;
  color:var(--s2-cta-text)!important;font-size:13.5px!important;font-weight:560!important;letter-spacing:.01em;
  box-shadow:0 10px 22px -18px rgba(0,0,0,.9)!important;
}
#joinScreen #joinBtn:hover{filter:none!important;background:#fffdf7!important}
body.light #joinScreen #joinBtn:hover{background:#000!important}
#joinScreen #diagBtn{
  flex:none;height:48px;padding:0 17px!important;border:1px solid var(--s2-line)!important;border-radius:9px!important;
  background:transparent!important;color:var(--s2-muted)!important;font-size:12px!important;
}
#joinScreen #diagBtn:hover{border-color:var(--s2-line-strong)!important;color:var(--s2-text)!important}
#diagResult{margin-top:9px;padding:10px 12px;border:1px solid var(--s2-line);border-radius:9px;background:rgba(255,255,255,.02);font-size:10.5px;line-height:1.8;color:var(--s2-muted)}

.friends-box{margin-top:19px!important;padding:0!important;border:0!important;border-top:1px solid var(--s2-line)!important;border-radius:0!important;background:transparent!important}
.friends-box summary{list-style:none;display:flex;align-items:center;gap:8px;padding:14px 1px 12px;cursor:pointer;color:var(--s2-muted);font-size:11px}
.friends-box summary::-webkit-details-marker{display:none}
.friends-summary{display:inline-flex;align-items:center;gap:7px;flex:none}
.friends-summary svg{width:14px;height:14px}
.friends-hint{flex:1;color:var(--s2-faint);font-size:9.5px;text-align:right}
.friends-chevron{width:13px;height:13px;transition:transform .18s;color:var(--s2-faint)}
.friends-box[open] .friends-chevron{transform:rotate(180deg)}
.friends-box .fr-search{display:flex;gap:7px;margin:1px 0 8px}
.friends-box .fr-search input{flex:1;height:38px!important;line-height:38px;padding:0 11px!important;font-size:12px!important}
.friends-box .fr-search .btn{height:38px;padding:0 14px!important;border-radius:8px!important;background:var(--s2-panel-2)!important;border:1px solid var(--s2-line)!important;color:var(--s2-text)!important;font-size:11px!important}
.friend-list{max-height:220px;overflow:auto}

.lobby-footer{
  position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:16px clamp(22px,5vw,68px) 28px;
  display:flex;align-items:center;gap:13px;color:var(--s2-faint);font-size:9.5px;letter-spacing:.03em;border-top:1px solid var(--s2-line);
}
.lobby-footer .footer-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}
.lobby-footer a{margin-left:auto;color:var(--s2-faint);text-decoration:none}
.lobby-footer a:hover{color:var(--s2-text)}

/* ==========================================================================
   LOGIN
   ========================================================================== */
#loginScreen:not(.hidden){
  display:flex!important;flex-direction:column;align-items:stretch;min-height:100dvh;
  padding:0!important;position:relative;z-index:1;background:transparent!important;color:var(--s2-text);
}
#loginScreen.hidden{display:none!important}
#loginScreen::before,#loginScreen::after{display:none!important}
#loginScreen .auth-header{flex:none}
#loginScreen .auth-header .lobby-tools{margin-left:0}
.auth-header-note{margin-left:auto;margin-right:22px;color:var(--s2-faint);font-size:10px;letter-spacing:.08em}
.auth-main{
  flex:1;width:100%;max-width:1360px;margin:0 auto;
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(360px,420px)!important;
  gap:clamp(48px,7vw,120px);align-items:center;
  padding:clamp(34px,6vh,70px) clamp(22px,5vw,68px) 44px!important;
}
.auth-copy{max-width:620px;padding-bottom:0}
.auth-copy h1{
  margin:0;color:var(--s2-text);font-size:clamp(46px,5.3vw,80px);line-height:1.04;
  letter-spacing:-.065em;font-weight:520;
}
.auth-copy h1 em{
  font-style:normal;position:relative;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(111,140,255,.78);
  text-decoration-thickness:2px;text-underline-offset:.09em;
}
body.light .auth-copy h1 em{color:#0f1012}
.auth-lede{max-width:500px;margin:27px 0 0;color:var(--s2-muted);font-size:14.5px;line-height:1.95}
.auth-points{
  list-style:none;display:flex;flex-wrap:wrap;gap:26px 30px;max-width:560px;
  margin:32px 0 0;padding:22px 0 0;border-top:1px solid var(--s2-line);
}
.auth-points li{display:flex;align-items:flex-start;gap:9px;min-width:0}
.auth-points .point-icon{color:var(--s2-faint)}
.auth-points li>span:last-child{display:flex;flex-direction:column;gap:3px}
.auth-points b{font-size:11.5px;font-weight:520;color:var(--s2-text)}
.auth-points small{font-size:9.5px;line-height:1.55;color:var(--s2-faint)}
.auth-quote{display:flex;gap:8px;max-width:430px;margin-top:34px;color:var(--s2-faint)}
.auth-quote>span{font-family:Georgia,serif;font-size:31px;line-height:.9;color:var(--s2-line-strong)}
.auth-quote p{margin:0;font-size:11.5px;line-height:1.75;letter-spacing:.01em}

#loginScreen .login-card{
  width:100%!important;max-width:400px!important;justify-self:end;
  padding:0!important;border:0!important;border-radius:0!important;background:none!important;
  box-shadow:none!important;backdrop-filter:none!important;animation:none!important;
}
#loginScreen .login-card::before,#loginScreen .login-card::after{display:none!important}
.auth-panel-head{padding-top:19px;border-top:1px solid var(--s2-line-strong);margin:0 0 23px}
.auth-step{display:block;color:var(--s2-faint);font-size:9px;letter-spacing:.17em}
.auth-panel-head h1{font-size:30px;font-weight:560;letter-spacing:-.04em;margin:9px 0 6px;color:var(--s2-text)}
.auth-panel-head .sub{font-size:11px;line-height:1.65;color:var(--s2-faint)}
#loginScreen .fields{display:flex;flex-direction:column}
#loginScreen .field{margin-bottom:14px;gap:7px}
#loginScreen .field>span{font-size:10.5px;letter-spacing:.04em;color:var(--s2-muted)}
#loginScreen input{height:48px;padding:0 13px!important;background:rgba(255,255,255,.035);border:1px solid var(--s2-line);border-radius:10px;color:var(--s2-text)}
body.light #loginScreen input{background:rgba(255,255,255,.78)}
#loginScreen input:focus{border-color:rgba(111,140,255,.72)!important;background:rgba(255,255,255,.055)!important;box-shadow:0 0 0 3px rgba(111,140,255,.10)!important}
#loginScreen .hint{min-height:18px;margin:0 0 9px;font-size:10.5px;line-height:1.55;color:var(--s2-faint)}
#loginScreen .hint.ok{color:rgba(91,214,160,.82)}
#loginScreen .hint.err{color:#ff9b9d}
#loginScreen .join-actions{display:flex;flex-direction:column;gap:0;margin-top:2px}
#loginScreen .btn-primary{width:100%;height:48px;border:0!important;border-radius:10px!important;background:var(--s2-cta)!important;color:var(--s2-cta-text)!important;font-size:13.5px!important;font-weight:560!important}
#loginScreen .btn-primary:hover{background:#fffdf7!important}
body.light #loginScreen .btn-primary:hover{background:#000!important}
.auth-switch{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:17px;color:var(--s2-faint);font-size:11px}
.auth-link{
  appearance:none;border:0;background:none;padding:0;color:var(--s2-text);
  font:inherit;font-size:11px;cursor:pointer;text-decoration:underline;
  text-decoration-color:var(--s2-line-strong);text-underline-offset:3px;
}
.auth-link:hover{text-decoration-color:var(--s2-blue)}
.auth-privacy{margin:25px 0 0;padding-top:15px;border-top:1px solid var(--s2-line);font-size:9.5px;line-height:1.7;color:var(--s2-faint)}
.auth-footer{flex:none;width:100%;margin:0 auto}
.auth-foot-right{margin-left:auto;color:var(--s2-faint)}
/* ==========================================================================
   ROOM — stage + top bar
   ========================================================================== */
#roomScreen,#roomScreen .room-shell{background:#0d0e11!important}
.stage{background:radial-gradient(120% 90% at 50% 0%,#17191e 0%,#101114 42%,#0b0c0e 100%)!important}
.stage::before,.stage::after{display:none!important}
.grid{gap:8px!important;padding:8px!important}
.stage.dock-open #grid{padding-right:390px!important}
.stage.dock-open.has-screen #grid,.stage.dock-open.wb-on #grid{padding-right:8px!important}
.grid .tile{border-radius:10px!important;background:#08090b!important;border:1px solid rgba(255,255,255,.075)!important;box-shadow:none!important}
.grid .tile:hover{border-color:rgba(255,255,255,.15)!important}
.tile.speaking{outline:2px solid rgba(91,214,160,.9)!important;outline-offset:-2px;box-shadow:0 0 0 1px rgba(91,214,160,.20)!important}
.tile.local{border-color:rgba(255,255,255,.16)!important}
.tile-name{
  left:9px!important;bottom:9px!important;padding:4px 9px!important;background:rgba(8,9,11,.68)!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:6px!important;font-size:10.5px!important;
  font-weight:450!important;letter-spacing:.01em!important;color:rgba(255,255,255,.92)!important;backdrop-filter:blur(8px)!important;
}
.tile-badge{background:rgba(8,9,11,.70)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:6px!important;font-size:9.5px!important;color:rgba(255,255,255,.8)!important}
.tile-badge.muted{background:rgba(197,52,58,.86)!important;border-color:transparent!important}

.topbar{
  padding:calc(11px + var(--safe-t)) 15px 10px!important;display:flex;align-items:center!important;justify-content:space-between;
  background:linear-gradient(180deg,rgba(11,12,14,.94) 0%,rgba(11,12,14,.62) 58%,rgba(11,12,14,0) 100%)!important;border:0!important;
}
.tb-left,.tb-right{display:flex;align-items:center;gap:7px;pointer-events:auto}
.room-chip{
  appearance:none;height:30px!important;padding:0 11px!important;border:1px solid rgba(255,255,255,.11)!important;
  border-radius:7px!important;background:rgba(20,21,25,.78)!important;color:rgba(255,255,255,.9)!important;
  font-family:inherit!important;font-size:11px!important;font-weight:520!important;letter-spacing:.01em!important;
  cursor:pointer;backdrop-filter:blur(12px)!important;
}
.room-chip:hover{background:rgba(34,36,42,.9)!important;border-color:rgba(255,255,255,.2)!important}
.meeting-timer{
  height:30px;display:inline-flex;align-items:center;padding:0 9px;color:rgba(255,255,255,.48);
  font-size:10.5px;font-variant-numeric:tabular-nums;border-radius:6px;background:rgba(20,21,25,.52);
}
.stat-chip{
  height:30px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:0 10px!important;border-radius:7px!important;background:rgba(20,21,25,.64)!important;
  border:1px solid rgba(255,255,255,.09)!important;color:rgba(255,255,255,.62)!important;
  font-family:inherit!important;font-size:10px!important;letter-spacing:.01em!important;
}
.stat-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.stat-chip.good{color:rgba(91,214,160,.9)!important;border-color:rgba(91,214,160,.18)!important;background:rgba(24,54,40,.5)!important}
.stat-chip.good::before{background:var(--s2-green);box-shadow:0 0 0 3px rgba(91,214,160,.10)}
.stat-chip.bad{color:#ff9b9d!important;border-color:rgba(229,72,77,.25)!important;background:rgba(63,24,26,.55)!important}
.stat-chip.bad::before{background:#ff7b7e}
.stat-chip.rec{border-color:rgba(229,72,77,.26)!important;color:#ff9b9d!important;background:rgba(63,24,26,.55)!important}
.stat-chip.rec::before{display:none}
.rec-dot{width:5px;height:5px;border-radius:50%;background:#ff5b60;margin-right:1px}
.tb-btn{
  width:33px!important;height:33px!important;padding:0!important;border:1px solid rgba(255,255,255,.09)!important;
  border-radius:7px!important;background:rgba(20,21,25,.64)!important;color:rgba(255,255,255,.66)!important;
  backdrop-filter:blur(12px)!important;transition:background .15s,border-color .15s,color .15s!important;
}
.tb-btn:hover{background:rgba(38,40,46,.88)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;transform:none!important}
.tb-btn .ico{width:16px!important;height:16px!important}
.tb-btn-count{width:auto!important;min-width:33px!important;padding:0 8px!important;gap:5px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.tb-btn-count span{font-size:10px;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
.tb-sep{width:1px;height:20px;background:rgba(255,255,255,.10);margin:0 2px}

/* ==========================================================================
   DOCKED PANELS
   ========================================================================== */
#chatWin,#shareWin,#itpWin,#notesWin{
  position:absolute!important;top:58px!important;right:0!important;bottom:0!important;left:auto!important;
  width:min(382px,100%)!important;height:auto!important;max-height:none!important;border-radius:0!important;
  background:#111215!important;border:0!important;border-left:1px solid rgba(255,255,255,.09)!important;
  box-shadow:-24px 0 70px -44px rgba(0,0,0,.85)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation:s2DockIn .22s cubic-bezier(.22,.8,.3,1) both!important;z-index:20!important;
}
@keyframes s2DockIn{from{opacity:.4;transform:translateX(18px)}to{opacity:1;transform:none}}
#shareWin{width:min(410px,100%)!important}
#chatWin .fw-head,#shareWin .fw-head,#itpWin .fw-head,#notesWin .fw-head{
  height:52px!important;min-height:52px!important;padding:0 10px 0 16px!important;background:#15161a!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;font-size:12.5px!important;font-weight:540!important;
  color:rgba(255,255,255,.9)!important;cursor:default!important;
}
#chatWin .fw-close,#shareWin .fw-close,#itpWin .fw-close,#notesWin .fw-close,
#chatWin .fw-tool,#shareWin .fw-tool,#itpWin .fw-tool,#notesWin .fw-tool{width:29px!important;height:29px!important;border-radius:6px!important;color:rgba(255,255,255,.42)!important}
#chatWin .fw-close:hover,#shareWin .fw-close:hover,#itpWin .fw-close:hover,#notesWin .fw-close:hover,
#chatWin .fw-tool:hover,#shareWin .fw-tool:hover,#itpWin .fw-tool:hover,#notesWin .fw-tool:hover{background:rgba(255,255,255,.065)!important;color:#fff!important}
#chatWin .fw-body,#shareWin .fw-body,#itpWin .fw-body{padding:0!important}
#chatWin .chat-log{padding:16px 15px 8px!important;gap:13px!important}
#chatWin .msg{max-width:94%}
#chatWin .msg .bubble{padding:8px 11px!important;border-radius:2px 10px 10px 10px!important;font-size:12.5px!important;line-height:1.6!important;background:#1d1f24!important}
#chatWin .msg.mine .bubble{border-radius:10px 2px 10px 10px!important;background:#f0ede5!important;color:#151619!important}
#chatWin .msg .who{font-size:9.5px!important;color:rgba(255,255,255,.36)!important}
#chatWin .chat-form{padding:11px 12px 7px!important;background:#101114!important;border-top:1px solid rgba(255,255,255,.075)!important}
#chatWin .chat-form textarea{min-height:38px!important;border-radius:8px!important;background:#1a1c20!important;border:1px solid rgba(255,255,255,.08)!important;font-size:12.5px!important}
#chatWin .chat-hint{padding:0 14px 10px!important;background:#101114!important;color:rgba(255,255,255,.28)!important}
#shareWin .fw-body{padding:15px!important;gap:11px}
#shareWin .share-tips{font-size:10px!important;line-height:1.7;color:rgba(255,255,255,.34)!important}
#shareWin .share-form>input,#shareWin .share-form .row-inline input{background:#1a1c20!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;color:#fff!important}
#shareWin .share-form .btn{background:var(--s2-cta)!important;color:var(--s2-cta-text)!important;border:0!important;border-radius:8px!important}

#notesWin .notes-body{display:flex;flex-direction:column;height:calc(100% - 52px);padding:0!important;background:#111215}
#notesArea{
  flex:1;width:100%;resize:none;border:0!important;border-radius:0!important;outline:0!important;
  padding:18px 17px!important;background:transparent!important;color:#e9e6df!important;font-size:13px!important;line-height:1.85!important;
}
#notesArea::placeholder{color:rgba(255,255,255,.24)}
.notes-state{font-size:9px;color:rgba(255,255,255,.30);font-weight:400;letter-spacing:.02em}
#notesWin .fw-title-row{gap:9px}
#notesWin .notes-state{padding:2px 6px;border:1px solid rgba(255,255,255,.08);border-radius:4px;white-space:nowrap}
.notes-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;border-top:1px solid rgba(255,255,255,.075);font-size:9px;color:rgba(255,255,255,.30)}

/* ==========================================================================
   DRAWER / MEMBERS / SETTINGS
   ========================================================================== */
.drawer{
  width:min(382px,100%)!important;background:#111215!important;border-left:1px solid rgba(255,255,255,.09)!important;
  border-radius:0!important;box-shadow:-24px 0 70px -44px rgba(0,0,0,.85)!important;backdrop-filter:none!important;
  z-index:26!important;animation:s2DockIn .22s ease both!important;
}
.drawer-head{
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px 0 17px;border-bottom:1px solid rgba(255,255,255,.075);background:#15161a;
}
.drawer-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.drawer-head b{font-size:13px;font-weight:540;color:rgba(255,255,255,.9)}
.drawer-head span{font-size:9.5px;color:rgba(255,255,255,.3)}
.drawer-invite{
  display:inline-flex;align-items:center;gap:5px;height:31px;padding:0 10px;border:1px solid rgba(255,255,255,.10);
  border-radius:7px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);font:inherit;font-size:10px;cursor:pointer;
}
.drawer-invite svg{width:13px;height:13px}
.drawer-invite:hover{color:#fff;background:rgba(255,255,255,.08)}
.drawer-tabs{height:43px;background:#111215;border-bottom:1px solid rgba(255,255,255,.075)}
.drawer-tabs .dtab{font-size:11px!important;padding:0 14px!important;color:rgba(255,255,255,.4)!important;border-bottom:2px solid transparent!important}
.drawer-tabs .dtab.active{color:#fff!important;border-bottom-color:var(--s2-cta)!important}
.drawer-close{width:36px!important;height:36px!important;margin:3px 7px 0 auto!important;border-radius:7px!important;color:rgba(255,255,255,.4)!important}
.drawer-close:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
.tab-pane{padding:14px 15px!important}
.member-search{display:flex;align-items:center;gap:7px;height:37px;padding:0 10px;margin-bottom:10px;border:1px solid rgba(255,255,255,.085);border-radius:8px;background:#181a1e}
.member-search svg{width:14px;height:14px;color:rgba(255,255,255,.32);flex:none}
.member-search input{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;color:#fff;font-size:11.5px!important;outline:0;padding:0!important}
.member-list{gap:1px!important}
.member{padding:9px 7px!important;border-radius:8px!important;border-bottom:0!important}
.member:hover{background:rgba(255,255,255,.04)}
.member .avatar{width:31px!important;height:31px!important;border-radius:8px!important;font-size:10.5px!important;background:#23252b!important;color:rgba(255,255,255,.7)!important}
.member .meta b{font-size:11.5px!important;color:rgba(255,255,255,.84)!important;font-weight:500!important}
.member .meta small{font-size:9px!important;color:rgba(255,255,255,.3)!important}
.member .kick{font-size:9.5px!important;border:1px solid rgba(229,72,77,.25)!important;background:rgba(229,72,77,.08)!important;color:#ff9b9d!important;border-radius:6px!important;padding:4px 7px!important}
.setting-group{border-top:1px solid rgba(255,255,255,.07);padding:15px 0 4px}
.setting-group:first-child{border-top:0;padding-top:0}
.setting-group h4{font-size:10px!important;letter-spacing:.10em!important;text-transform:uppercase;color:rgba(255,255,255,.32)!important;margin:0 0 10px!important;font-weight:500!important}
.setting-group .field>span{font-size:10px!important;color:rgba(255,255,255,.42)!important}
.setting-group select,.setting-group input[type=text]{height:39px!important;background:#1a1c20!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:7px!important;color:#fff!important;font-size:11.5px!important}
.switch-row{padding:8px 0!important;font-size:11.5px!important;color:rgba(255,255,255,.68)!important;border-bottom:0!important}
.switch-row input{accent-color:#f2efe6}

/* ==========================================================================
   NETWORK POPOVER
   ========================================================================== */
#statsPanel{
  top:58px!important;right:56px!important;width:304px!important;min-width:0!important;padding:12px!important;
  border-radius:12px!important;background:#17181c!important;border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 22px 55px -20px rgba(0,0,0,.8)!important;backdrop-filter:none!important;z-index:35!important;
}
.stats-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:2px 3px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.stats-head h3{margin:0!important;font-size:12px!important;font-weight:540!important;color:#fff!important}
.stats-head p{margin:3px 0 0;font-size:9.5px;color:rgba(255,255,255,.34)}
.net-signal{display:flex;align-items:flex-end;gap:2px;height:15px;padding-top:2px}
.net-signal i{width:3px;border-radius:2px;background:rgba(255,255,255,.16)}
.net-signal i:nth-child(1){height:5px}.net-signal i:nth-child(2){height:9px}.net-signal i:nth-child(3){height:13px}
.net-signal.good i{background:var(--s2-green)}
.net-signal.warn i:nth-child(-n+2){background:var(--s2-amber)}
.net-signal.bad i:first-child{background:#ff7b7e}
#statsPanel .stat-row{padding:7px 3px!important;border-bottom:1px solid rgba(255,255,255,.045)!important;font-size:10px!important}
#statsPanel .stat-row span{color:rgba(255,255,255,.38)!important}
#statsPanel .stat-row b{font-family:inherit!important;font-size:10px!important;color:rgba(255,255,255,.78)!important;font-weight:500!important}
.stats-details{margin-top:4px;border-top:1px solid rgba(255,255,255,.07)}
.stats-details summary{list-style:none;padding:8px 3px 4px;font-size:9.5px;color:rgba(255,255,255,.32);cursor:pointer}
.stats-details summary::-webkit-details-marker{display:none}
.stats-details[open] summary{color:rgba(255,255,255,.54)}

/* ==========================================================================
   MORE MENU / REACTIONS / CONTROL BAR
   ========================================================================== */
#morePanel .more-box{
  right:16px!important;bottom:calc(80px + var(--safe-b))!important;width:286px!important;padding:6px!important;
  border-radius:12px!important;background:#17181c!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 24px 60px -22px rgba(0,0,0,.9)!important;backdrop-filter:none!important;
}
#morePanel .more-box::after{display:none!important}
.more-head{padding:6px 8px 10px!important;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:5px}
.more-head b{font-size:11.5px!important;color:rgba(255,255,255,.92)!important;font-weight:540!important}
.more-head small{display:none!important}
#morePanel .more-item{height:34px!important;gap:10px!important;padding:0 8px!important;border-radius:7px!important}
#morePanel .more-item:hover{background:rgba(255,255,255,.055)!important}
#morePanel .mi-ico{width:20px!important;height:20px!important;border-radius:0!important;background:none!important;border:0!important}
#morePanel .mi-ico svg{width:15px!important;height:15px!important;color:rgba(255,255,255,.52)!important}
#morePanel .mi-txt b{font-size:12px!important;color:rgba(255,255,255,.88)!important;font-weight:460!important}
#morePanel .mi-txt small{display:none!important}
.mi-key{font-family:inherit!important;font-size:8.5px!important;color:rgba(255,255,255,.25)!important;border-color:rgba(255,255,255,.08)!important}
.more-sep{margin:4px 6px!important;background:rgba(255,255,255,.07)!important}

.reaction-tray{
  bottom:calc(92px + var(--safe-b))!important;padding:5px 6px!important;border-radius:13px!important;
  background:#17181c!important;border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85)!important;backdrop-filter:none!important;
}
.reaction-tray button{border-radius:8px!important}
.reaction-label{font-family:inherit!important;letter-spacing:.02em!important;color:rgba(255,255,255,.30)!important;font-size:9px!important}

footer.controls{
  width:100%!important;margin:0!important;padding:10px 18px calc(10px + var(--safe-b))!important;
  background:#0e0f12!important;border:0!important;border-top:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;
  overflow-x:auto;scrollbar-width:none;
}
footer.controls::-webkit-scrollbar{display:none}
footer.controls .ctl{
  min-width:64px!important;height:54px!important;padding:5px 8px!important;border:0!important;border-radius:8px!important;
  background:transparent!important;color:rgba(255,255,255,.62)!important;display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;transition:background .15s,color .15s!important;
}
footer.controls .ctl:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;transform:none!important}
footer.controls .ctl .ico{width:20px!important;height:20px!important}
footer.controls .ctl i{font-size:9.5px!important;letter-spacing:.02em!important;color:rgba(255,255,255,.52)!important;font-style:normal!important}
footer.controls .ctl:hover i{color:rgba(255,255,255,.78)!important}
footer.controls .ctl.on{background:rgba(255,255,255,.12)!important;border:0!important;color:#fff!important;box-shadow:none!important}
footer.controls .ctl.on i{color:rgba(255,255,255,.82)!important}
footer.controls .ctl.off{background:rgba(229,72,77,.14)!important;color:#ff9b9d!important}
footer.controls .ctl.off i{color:rgba(255,155,157,.66)!important}
footer.controls .ctl#btnHand.on{background:rgba(242,196,109,.14)!important;color:#ffd98d!important}
footer.controls .ctl#btnHand.on i{color:rgba(255,217,141,.72)!important}
footer.controls #btnClock,footer.controls #btnMusic{display:none!important}
.ctl-danger{
  min-width:66px!important;height:54px!important;margin-left:10px!important;border:0!important;border-radius:9px!important;
  background:#d94045!important;color:#fff!important;box-shadow:none!important;display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
}
.ctl-danger:hover{background:#e5484d!important;transform:none!important;filter:none!important}
.ctl-danger i{color:rgba(255,255,255,.86)!important;font-size:9.5px!important}

/* ==========================================================================
   INVITE / SHORTCUTS / SECONDARY WINDOWS
   ========================================================================== */
.modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.62)!important}
.modal-box{
  max-width:360px!important;padding:20px!important;border-radius:13px!important;
  background:var(--s2-panel)!important;border:1px solid var(--s2-line-strong)!important;
  box-shadow:0 30px 80px -34px rgba(0,0,0,.8)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation:s2DialogIn .16s cubic-bezier(.22,.8,.3,1) both!important;
}
@keyframes s2DialogIn{from{opacity:.4;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}
.modal-box h4{margin:0 0 9px!important;font-size:14px!important;font-weight:560!important;color:var(--s2-text)}
.modal-box p{margin:0!important;font-size:12px!important;line-height:1.65!important;color:var(--s2-muted)}
.modal-box input{height:40px;margin-top:4px;padding:0 11px!important;background:rgba(255,255,255,.045)!important;border:1px solid var(--s2-line)!important;border-radius:8px!important;color:var(--s2-text)!important;font-size:12.5px!important;outline:0}
body.light .modal-box input{background:rgba(20,22,25,.035)!important}
.modal-box input:focus{border-color:rgba(111,140,255,.65)!important;box-shadow:0 0 0 3px rgba(111,140,255,.10)!important}
.modal-actions{gap:8px!important;margin-top:15px!important}
.modal-actions .btn{height:34px!important;padding:0 13px!important;border-radius:7px!important;font-size:11px!important}
#inviteRoomModal,#shortcutsModal{
  padding:0!important;align-items:stretch!important;justify-content:flex-end!important;
  background:rgba(3,4,6,.46)!important;
}
#inviteRoomModal .invite-dialog,#shortcutsModal .shortcut-dialog{
  width:min(408px,100%)!important;max-width:none!important;height:100%!important;max-height:none!important;
  padding:0!important;border-radius:0!important;border:0!important;border-left:1px solid rgba(255,255,255,.10)!important;
  background:#111215!important;box-shadow:-32px 0 90px -54px rgba(0,0,0,.95)!important;
  display:flex!important;flex-direction:column!important;overflow:hidden;
  animation:s2SheetIn .22s cubic-bezier(.22,.8,.3,1) both!important;
}
#shortcutsModal .shortcut-dialog{width:min(372px,100%)!important}
@keyframes s2SheetIn{from{opacity:.55;transform:translateX(30px)}to{opacity:1;transform:none}}
.invite-dialog>.invite-head,.shortcut-dialog>.invite-head{padding:22px 22px 16px!important;border-bottom:1px solid rgba(255,255,255,.075)!important}
.invite-head h3{font-size:16.5px!important;font-weight:560!important;color:#fff!important}
.invite-head p{font-size:10.5px!important;line-height:1.55!important;color:rgba(255,255,255,.38)!important}
.invite-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.065)}
.invite-meta>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.invite-meta>div+div{padding-left:14px;border-left:1px solid rgba(255,255,255,.065)}
.invite-meta span{font-size:9px;color:rgba(255,255,255,.30);letter-spacing:.03em}
.invite-meta b{font-size:11.5px;font-weight:520;color:rgba(255,255,255,.84);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite-body{display:flex!important;flex-direction:column!important;gap:16px!important;padding:18px 22px!important;overflow:auto;flex:1}
.invite-qr-wrap{align-self:center;padding:9px;border-radius:12px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06)}
.invite-qr{width:132px!important;height:132px!important;border-radius:8px!important}
.invite-qr-wrap small{margin-top:2px;font-size:8.5px!important;color:rgba(255,255,255,.30)!important}
.invite-fields{display:flex;flex-direction:column;gap:13px}
.invite-fields label>span{font-family:inherit!important;font-size:9px!important;letter-spacing:.05em!important;color:rgba(255,255,255,.32)!important}
.copy-row input{height:34px;background:#1a1c20!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:7px!important;color:rgba(255,255,255,.76)!important;font-family:inherit!important;font-size:10.5px!important}
.copy-row .btn{background:var(--s2-cta)!important;color:var(--s2-cta-text)!important;border:0!important;border-radius:7px!important}
.copy-row .btn-ghost{background:rgba(255,255,255,.05)!important;color:rgba(255,255,255,.68)!important;border:1px solid rgba(255,255,255,.09)!important}
.invite-note{font-size:9.5px!important;line-height:1.65!important;color:rgba(255,255,255,.30)!important}
.invite-foot{padding:12px 22px calc(12px + var(--safe-b))!important;border-top:1px solid rgba(255,255,255,.075)!important;background:#0f1013;margin-top:auto;display:flex;flex-direction:column;gap:8px!important;align-items:stretch!important}
.invite-foot-actions{display:flex;flex-wrap:wrap;gap:6px}
.invite-foot-actions .btn{flex:0 0 auto}
.invite-foot>span{font-size:8.5px!important;color:rgba(255,255,255,.28)!important;text-align:right}
.invite-foot .btn{background:rgba(255,255,255,.05)!important;color:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:7px!important}
.shortcut-list{padding:8px 22px 24px!important;margin-top:0!important;overflow:auto;flex:1}
.shortcut-list>div{border-color:rgba(255,255,255,.06)!important;padding:10px 0!important}
.shortcut-list span{font-size:11px!important}
.shortcut-list kbd{font-family:inherit!important;border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.05)!important;color:rgba(255,255,255,.6)!important;border-radius:5px!important}

/* secondary surfaces use the same right-hand rail as chat and notes */
#clockWin,#musicWin{
  position:absolute!important;top:58px!important;right:0!important;bottom:0!important;left:auto!important;
  width:min(382px,100%)!important;height:auto!important;max-height:none!important;transform:none!important;
  border-radius:0!important;border:0!important;border-left:1px solid rgba(255,255,255,.09)!important;
  background:#111215!important;box-shadow:-24px 0 70px -44px rgba(0,0,0,.85)!important;
  overflow:hidden;backdrop-filter:none!important;z-index:20!important;
  animation:s2DockIn .22s cubic-bezier(.22,.8,.3,1) both!important;
}
#clockWin .fw-head,#musicWin .fw-head{
  height:52px!important;min-height:52px!important;padding:0 10px 0 16px!important;
  background:#15161a!important;border-bottom:1px solid rgba(255,255,255,.075)!important;
  color:rgba(255,255,255,.9)!important;font-size:12.5px!important;font-weight:540!important;
}
#clockWin .fw-body{height:calc(100% - 52px)!important;padding:16px 16px 18px!important;overflow:auto!important}
#clockWin .ck-big{font-size:36px!important;letter-spacing:-.03em}
#clockWin .ck-tabs{margin-bottom:16px}
#clockWin .ck-world{width:100%;margin-top:14px;padding-top:4px;border-top:1px solid rgba(255,255,255,.06)}
#clockWin .ck-world>div{display:flex;align-items:center;justify-content:space-between;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.045)}
#clockWin .ck-world span{font-size:10px;color:rgba(255,255,255,.36)}
#clockWin .ck-world b{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
#clockWin .ck-elapsed{width:100%;display:flex;align-items:center;justify-content:space-between;padding:9px 2px 2px;margin-top:2px}
#clockWin .ck-elapsed span{font-size:10px;color:rgba(255,255,255,.36)}
#clockWin .ck-elapsed b{font-size:12px;font-weight:540;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
#musicWin .music-body{height:calc(100% - 52px)!important;padding:0!important}
#musicWin .music-body iframe{min-height:0!important;height:100%!important;width:100%!important}

/* layout picker */
#layoutPanel{
  top:58px!important;right:56px!important;width:300px!important;min-width:0!important;padding:9px!important;
  border-radius:12px!important;background:var(--s2-panel)!important;border:1px solid var(--s2-line-strong)!important;
  box-shadow:0 22px 55px -20px rgba(0,0,0,.55)!important;backdrop-filter:none!important;z-index:35!important;
}
.lp-head{padding:7px 8px 10px;border-bottom:1px solid var(--s2-line);margin-bottom:8px}
.lp-head b{display:block;font-size:11.5px;font-weight:540;color:var(--s2-text)}
.lp-head span{display:block;margin-top:2px;font-size:9.5px;color:var(--s2-faint)}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 1px 8px}
.lp-option{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;padding:7px;border:1px solid var(--s2-line);border-radius:9px;
  background:rgba(255,255,255,.018);color:var(--s2-text);text-align:left;font:inherit;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.lp-option:hover{background:rgba(255,255,255,.045);border-color:var(--s2-line-strong)}
body.light .lp-option:hover{background:rgba(20,22,25,.04)}
.lp-option.on{border-color:rgba(111,140,255,.62);background:rgba(111,140,255,.07)}
.lp-preview{
  display:block;width:100%;aspect-ratio:16/10;border-radius:5px;background:#0b0c0e;
  padding:4px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.055);
}
body.light .lp-preview{background:#e3ded3;border-color:rgba(20,22,25,.08)}
.lp-preview-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.lp-preview-grid i{display:block;border-radius:2px;background:#2a2d34}
body.light .lp-preview-grid i{background:#fffdf9}
.lp-preview-speaker i{display:block;background:#2a2d34;border-radius:2px}
body.light .lp-preview-speaker i{background:#fffdf9}
.lp-preview-speaker .big{position:absolute;inset:4px;bottom:15px}
.lp-preview-speaker .small{position:absolute;right:6px;bottom:6px;width:34%;height:30%;box-shadow:0 0 0 2px #0b0c0e}
body.light .lp-preview-speaker .small{box-shadow:0 0 0 2px #e3ded3}
.lp-label{font-size:11px;font-weight:480;padding-right:17px}
.lp-check{position:absolute;right:7px;bottom:8px;width:14px;height:14px;border-radius:50%;border:1px solid var(--s2-line-strong);display:grid;place-items:center}
.lp-option.on .lp-check{border-color:var(--s2-blue);background:var(--s2-blue)}
.lp-option.on .lp-check::after{content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.lp-note{margin:5px 8px 4px;padding-top:9px;border-top:1px solid var(--s2-line);font-size:9px;line-height:1.5;color:var(--s2-faint)}

/* The meeting room is always a dark surface. Keep every meeting overlay on
   the dark palette even when the lobby is in light mode. */
body.light #roomScreen,
body.light #morePanel,
body.light #inviteRoomModal,
body.light #shortcutsModal,
body.light #layoutPanel{
  --bg:#0b0e14;--bg2:#12161f;--bg3:#1a1f2b;--bg4:#232936;
  --panel:rgba(18,22,31,.96);--panel-solid:#12161f;
  --border:#2a3140;--border2:#39415380;
  --text:#e9edf5;--dim:#94a0b8;--dim2:#6b7793;
  --primary:#3b82f6;--primary2:#2563eb;--primary-soft:rgba(59,130,246,.14);
  --s2-bg:#0b0c0e;--s2-bg-soft:#101114;--s2-panel:#141519;--s2-panel-2:#1a1c21;
  --s2-line:rgba(242,239,233,.09);--s2-line-strong:rgba(242,239,233,.16);
  --s2-text:#f2efe8;--s2-muted:rgba(242,239,233,.68);--s2-faint:rgba(242,239,233,.45);
  --s2-cta:#f2efe6;--s2-cta-text:#111214;
  color:var(--text);
}
body.light #morePanel .more-box{background:#17181c!important;border-color:rgba(255,255,255,.12)!important;color:var(--s2-text)}
body.light #inviteRoomModal .invite-dialog,
body.light #shortcutsModal .shortcut-dialog{background:#111215!important;border-left-color:rgba(255,255,255,.10)!important;color:var(--s2-text)}
body.light #layoutPanel{background:#141519!important;border-color:rgba(255,255,255,.16)!important}
body.light #layoutPanel .lp-option{background:rgba(255,255,255,.018)}
body.light #layoutPanel .lp-option:hover{background:rgba(255,255,255,.05)}
body.light #layoutPanel .lp-preview{background:#0b0c0e;border-color:rgba(255,255,255,.055)}
body.light #layoutPanel .lp-preview-grid i,
body.light #layoutPanel .lp-preview-speaker i{background:#2a2d34}
body.light #layoutPanel .lp-preview-speaker .small{box-shadow:0 0 0 2px #0b0c0e}

/* muted-speaking reminder */
.speak-hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:46;
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
  padding:8px 9px 8px 12px;border-radius:10px;background:#f2efe6;color:#151619;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.75);font-size:11.5px;line-height:1.4;
}
.speak-hint.hidden{display:none!important}
.speak-hint-dot{width:6px;height:6px;border-radius:50%;background:#d94045;flex:none;animation:speakPulse 1.4s ease-in-out infinite}
@keyframes speakPulse{0%,100%{opacity:1}50%{opacity:.35}}
.speak-hint button[type="button"]:not(.speak-dismiss){
  appearance:none;border:0;border-radius:6px;background:#151619;color:#fffdf8;
  height:27px;padding:0 9px;font:inherit;font-size:10px;font-weight:520;cursor:pointer;
}
.speak-hint button[type="button"]:not(.speak-dismiss):hover{background:#000}
.speak-dismiss{appearance:none;border:0;background:none;color:rgba(21,22,25,.42);width:24px;height:24px;padding:0;font-size:17px;line-height:1;cursor:pointer}
.speak-dismiss:hover{color:#151619}

/* drag to send */
.drop-overlay{
  position:absolute;inset:10px;z-index:42;display:grid;place-items:center;
  border:1.5px dashed rgba(255,255,255,.28);border-radius:14px;background:rgba(11,12,14,.82);
  backdrop-filter:blur(6px);pointer-events:none;
}
.drop-overlay.hidden{display:none!important}
.drop-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 30px;border-radius:14px;background:#17181c;border:1px solid rgba(255,255,255,.11);text-align:center}
.drop-card svg{width:30px;height:30px;color:rgba(255,255,255,.66);margin-bottom:3px}
.drop-card b{font-size:14px;color:#fff;font-weight:540}
.drop-card span{font-size:10px;color:rgba(255,255,255,.36)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1050px){
  .lobby-main{grid-template-columns:minmax(0,1fr) minmax(390px,470px);gap:44px}
  .lobby-copy h1{font-size:clamp(41px,5.2vw,62px)}
  .lobby-points{grid-template-columns:1fr;gap:10px}
}
/* laptop screens: keep the whole join flow above the fold */
@media (min-width:821px) and (max-height:940px){
  .lobby-header{height:66px}
  .lobby-main{padding-top:30px;padding-bottom:28px}
  .lobby-copy h1{font-size:clamp(42px,4.2vw,58px)}
  .lobby-lede{margin-top:20px;font-size:14px;line-height:1.78}
  .lobby-actions{margin-top:24px}
  .recent-block{margin-top:22px;padding-top:14px}
  .lobby-points{margin-top:26px;padding-top:18px;gap:14px}
  #joinScreen .preview-wrap{max-height:min(32vh,300px)}
  .join-devices .device-select{padding-top:9px!important;padding-bottom:9px!important}
  .join-form{margin-top:16px;padding-top:14px}
  .join-form-head{margin-bottom:12px}
  #joinScreen .field{margin-bottom:9px}
  .friends-box{margin-top:12px!important}
  .lobby-footer{padding-top:12px;padding-bottom:16px}
}
@media (min-width:821px) and (max-height:780px){
  .lobby-header{height:60px}
  .lobby-main{padding-top:20px;padding-bottom:16px}
  .lobby-copy h1{font-size:clamp(38px,3.6vw,46px)}
  .lobby-lede{margin-top:16px;font-size:13px;line-height:1.7}
  .lobby-actions{margin-top:20px}
  .lobby-points{display:none}
  #joinScreen .preview-wrap{max-height:180px}
  .join-form{margin-top:14px;padding-top:12px}
  .join-form-head h2{font-size:22px}
  #joinScreen #joinBtn,#joinScreen #diagBtn{height:44px;min-height:44px}
  .lobby-footer{padding-top:8px;padding-bottom:10px}
}
@media (max-width:820px){
  .lobby-header{height:64px;padding:0 18px;gap:16px}
  .lobby-nav{display:none}
  .browser-badge{display:none}
  .lobby-main{grid-template-columns:1fr;gap:32px;padding:30px 18px 34px}
  #joinScreen .lobby-main{display:flex;flex-direction:column;gap:28px}
  #joinScreen .join-studio{order:1}
  #joinScreen .lobby-copy{order:2;padding-top:24px;border-top:1px solid var(--s2-line)}
  .lobby-copy{max-width:none;padding:0}
  .lobby-copy h1{font-size:clamp(38px,10.4vw,56px);line-height:1.06}
  .lobby-lede{font-size:13.5px;line-height:1.85;margin-top:20px;max-width:none}
  .lobby-actions{margin-top:24px}
  .lobby-points{display:none}
  .recent-block{margin-top:24px}
  .join-studio{max-width:none;justify-self:stretch}
  .join-form{margin-top:22px}
  #joinScreen .preview-wrap{max-height:min(58vh,520px)}
  .lobby-footer{border-top:0;padding:8px 18px 22px;font-size:8.5px}
  .auth-main{grid-template-columns:1fr!important;gap:34px!important;padding-top:30px!important}
  .auth-copy h1{font-size:clamp(38px,8.4vw,56px)}
  .auth-panel{max-width:none!important;justify-self:stretch!important}
}
@media (max-width:560px){
  .lobby-header{height:58px;padding:0 14px}
  .auth-header-note{display:none}
  .brand-mark{width:30px;height:30px;border-radius:8px;font-size:16px}
  .brand-copy b{font-size:13.5px}.brand-copy span{font-size:9.5px}
  .lobby-tools{gap:2px}
  .lobby-tool{min-height:31px;padding:0 7px;font-size:10px}
  .lobby-main{padding:24px 14px 30px}
  .lobby-copy h1{font-size:clamp(34px,10.8vw,48px)}
  .lobby-lede{font-size:12.5px}
  .btn-lobby-primary,.btn-lobby-secondary{min-height:45px;padding:0 16px;font-size:12.5px}
  .lobby-actions{gap:8px}
  .join-devices{grid-template-columns:1fr 1fr!important}
  #joinScreen .preview-wrap{max-height:min(22vh,190px)!important}
  .join-devices .device-select:nth-child(3){grid-column:1/-1;border-left:0!important;border-top:1px solid var(--s2-line)!important}
  #joinScreen .row{grid-template-columns:1fr}
  .join-form-head h2{font-size:22px}
  .secure-note{display:none}
  .join-options-body{grid-template-columns:1fr}
  .friends-hint{display:none}
  footer.controls{justify-content:flex-start!important;padding-left:8px!important;padding-right:8px!important}
  footer.controls .ctl{min-width:54px!important;height:48px!important}
  .ctl-danger{min-width:56px!important;height:48px!important}
  #chatWin,#shareWin,#itpWin,#notesWin{top:0!important;width:100%!important;border-left:0!important}
  #chatWin .fw-head,#shareWin .fw-head,#itpWin .fw-head,#notesWin .fw-head{height:56px!important;min-height:56px!important;padding-top:var(--safe-t)!important}
  .topbar{padding:calc(9px + var(--safe-t)) 10px 8px!important}
  .meeting-timer{display:none!important}
  .stat-chip:not(#connChip){display:none!important}
  .tb-sep{display:none!important}
  #btnNotesTop{display:none!important}
  #roomChip{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #statsPanel{top:52px!important;left:8px!important;right:8px!important;width:auto!important}
  .invite-body{grid-template-columns:1fr!important}
  .invite-qr-wrap{order:2}.invite-fields{order:1}
  #morePanel .more-box{left:8px!important;right:8px!important;bottom:calc(72px + var(--safe-b))!important;width:auto!important;max-height:calc(100dvh - 108px);overflow:auto}
  .auth-main{padding:22px 16px 30px!important;gap:26px!important}
  .auth-copy h1{font-size:clamp(36px,10.6vw,46px)}
  .auth-lede{font-size:12.5px;margin-top:18px}
  .auth-points,.auth-quote{display:none}
  .auth-panel-head{padding-top:16px;margin-bottom:19px}
  .auth-panel-head h1{font-size:26px}
  #loginScreen input{height:46px}
  #loginScreen .btn-primary{height:46px}
  .auth-footer .auth-foot-right{display:none}
}
@media (prefers-reduced-motion:reduce){
  .px-atmosphere{animation:none!important}
}

@media (max-width:620px){
  #inviteRoomModal,#shortcutsModal{align-items:flex-end!important}
  #inviteRoomModal .invite-dialog,#shortcutsModal .shortcut-dialog{
    width:100%!important;height:auto!important;max-height:92dvh!important;
    border-left:0!important;border-top:1px solid rgba(255,255,255,.10)!important;
    border-radius:16px 16px 0 0!important;
    animation:s2SheetUp .24s cubic-bezier(.22,.8,.3,1) both!important;
  }
  @keyframes s2SheetUp{from{opacity:.55;transform:translateY(36px)}to{opacity:1;transform:none}}
  .invite-dialog>.invite-head,.shortcut-dialog>.invite-head{padding:18px 18px 14px!important}
  .invite-meta{padding:12px 18px}
  .invite-body{padding:16px 18px!important;gap:14px!important}
  .invite-qr{width:116px!important;height:116px!important}
  .invite-foot{padding:12px 18px calc(12px + var(--safe-b))!important}
  #inviteRoomModal .invite-foot-actions .btn span{display:inline!important}
  #inviteRoomModal .invite-foot-actions{gap:6px}
  #inviteRoomModal .invite-foot-actions .btn{flex:1 1 0;justify-content:center;min-width:0;padding:0 8px!important}
  .shortcut-list{padding:6px 18px 20px!important}
  #clockWin,#musicWin{top:0!important;width:100%!important;border-left:0!important}
  #layoutPanel{top:52px!important;left:8px!important;right:8px!important;width:auto!important}
  .speak-hint{bottom:10px!important;font-size:11px}
  footer.controls .ctl i{font-size:9px!important}
  .stage.dock-open #grid{padding-right:8px!important}
}
/* Mobile meeting tools: keep video visible while chatting/translation is open. */
@media (max-width:560px){
  #chatWin,#shareWin,#itpWin,#notesWin{
    top:auto!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(66px + var(--safe-b))!important;
    width:auto!important;
    height:min(54dvh,460px)!important;
    max-height:calc(100dvh - 142px - var(--safe-t))!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:14px!important;
    box-shadow:0 16px 46px rgba(0,0,0,.48)!important;
    overflow:hidden!important;
  }
  #chatWin .fw-head,#shareWin .fw-head,#itpWin .fw-head,#notesWin .fw-head{
    height:48px!important;
    min-height:48px!important;
    padding-top:0!important;
  }
  #chatWin .fw-body,#itpWin .fw-body{min-height:0!important;height:calc(100% - 48px)!important;display:flex!important;flex-direction:column!important}
  #chatWin .chat-log,#itpWin .chat-log{min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  #chatWin .chat-form{flex:none!important;padding-bottom:8px!important}
  #chatWin .chat-hint{flex:none!important;padding-bottom:8px!important}
  #notesWin .notes-body{height:calc(100% - 48px)!important}
}