/* ==========================================================================
   PREMIUM SKIN · "Quiet Signal"
   Loaded after styles.css. Presentation only — no functional changes.
   ========================================================================== */

/* ---------- 0. Fonts ---------- */
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-latin.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/SpaceGrotesk-viet.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- 1. Tokens ---------- */
body{
  --bg:#07080a; --bg2:#0a0c0f; --bg3:#101318; --bg4:#161a20;
  --panel:rgba(11,13,16,.88); --panel-solid:#0b0d10;
  --border:rgba(240,238,230,.10); --border2:rgba(240,238,230,.06);
  --text:#f1efe8; --dim:#9a9c96; --dim2:#6f716c;
  --txt-1:#f1efe8; --txt-2:#a2a49e; --txt-3:#7f827c;
  --line:rgba(240,238,230,.10); --line-2:rgba(240,238,230,.08); --line-3:rgba(240,238,230,.18);
  --primary:#3fe6f0; --primary2:#19b9c6; --primary-soft:rgba(63,230,240,.10);
  --r2-line:rgba(240,238,230,.10); --r2-line-hi:rgba(240,238,230,.22);
  --r2-ink0:#07080a; --r2-ink1:rgba(10,12,15,.9);
  --px-paper:#edeae2; --px-ink:#08090b;
  --px-acc:#3fe6f0; --px-acc-dim:rgba(63,230,240,.16);
  --px-line:rgba(240,238,230,.09); --px-line-hi:rgba(240,238,230,.18);
  --px-dim:#8d908a; --px-dimmer:#63665f;
  --px-ease:cubic-bezier(.16,1,.3,1);
  --px-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --px-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text);
  font-family:var(--px-display);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.light{
  --bg:#f2f0e9; --bg2:#fbf9f3; --bg3:#eceae2; --bg4:#e2dfd5;
  --panel:rgba(255,253,247,.92); --panel-solid:#fffdf8;
  --border:rgba(20,22,24,.12); --border2:rgba(20,22,24,.07);
  --text:#15171a; --dim:#5f6266; --dim2:#8a8d90;
  --txt-1:#15171a; --txt-2:#5f6266; --txt-3:#85888b;
  --line:rgba(20,22,24,.12); --line-2:rgba(20,22,24,.08); --line-3:rgba(20,22,24,.2);
  --primary:#0aa6b5; --primary2:#0b8e9a; --primary-soft:rgba(10,166,181,.08);
  --r2-line:rgba(20,22,24,.12); --r2-line-hi:rgba(20,22,24,.24);
  --r2-ink0:#f2f0e9; --r2-ink1:rgba(255,253,247,.94);
  --px-paper:#15171a; --px-ink:#f7f5ef;
  --px-line:rgba(20,22,24,.12); --px-line-hi:rgba(20,22,24,.26);
  --px-dim:#6a6d68; --px-dimmer:#8f928c;
}

/* ---------- 2. Base ---------- */
html,body{background:var(--bg)!important;color:var(--text)}
body{
  background-image:
    radial-gradient(900px 620px at 12% -12%,rgba(20,66,70,.30) 0%,rgba(7,8,10,0) 62%),
    radial-gradient(900px 700px at 92% 112%,rgba(28,32,66,.34) 0%,rgba(7,8,10,0) 62%),
    linear-gradient(180deg,#08090c 0%,#060708 58%,#07080a 100%)!important;
  background-attachment:fixed;
}
body.light{
  background-image:
    radial-gradient(900px 620px at 10% -10%,rgba(186,214,208,.45) 0%,rgba(242,240,233,0) 62%),
    radial-gradient(900px 700px at 94% 112%,rgba(206,205,226,.5) 0%,rgba(242,240,233,0) 62%),
    linear-gradient(180deg,#f5f3ec 0%,#f0eee7 100%)!important;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
body.light::after{opacity:.03;mix-blend-mode:multiply}

h1,h2,h3,h4,.join-head h1{font-family:var(--px-display);font-weight:500;letter-spacing:-.025em}
::selection{background:rgba(63,230,240,.28);color:var(--text)}

/* ---------- 3. Atmosphere ---------- */
.px-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.px-grid{
  position:absolute;inset:-2px;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(240,238,230,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(240,238,230,.045) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(80% 70% at 42% 22%,#000 0%,transparent 72%);
  mask-image:radial-gradient(80% 70% at 42% 22%,#000 0%,transparent 72%);
}
body.light .px-grid{background-image:
    linear-gradient(to right,rgba(20,22,24,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(20,22,24,.055) 1px,transparent 1px)}
.px-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;will-change:transform}
.px-orb-a{width:46vmax;height:46vmax;left:-16vmax;top:-18vmax;
  background:radial-gradient(circle at 50% 50%,rgba(26,120,128,.42),rgba(26,120,128,0) 68%);
  animation:pxDriftA 34s ease-in-out infinite alternate}
.px-orb-b{width:52vmax;height:52vmax;right:-20vmax;bottom:-24vmax;
  background:radial-gradient(circle at 50% 50%,rgba(58,64,140,.38),rgba(58,64,140,0) 68%);
  animation:pxDriftB 44s ease-in-out infinite alternate}
body.light .px-orb-a{opacity:.30;background:radial-gradient(circle at 50% 50%,rgba(120,190,188,.5),rgba(120,190,188,0) 68%)}
body.light .px-orb-b{opacity:.28;background:radial-gradient(circle at 50% 50%,rgba(160,162,210,.5),rgba(160,162,210,0) 68%)}
@keyframes pxDriftA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vh,0) scale(1.12)}}
@keyframes pxDriftB{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-5vw,-5vh,0) scale(1)}}

/* ---------- 4. Chrome ---------- */
.px-chrome{position:fixed;inset:0;z-index:55;pointer-events:none;
  transition:opacity .5s var(--px-ease),visibility .5s;color:var(--px-dim)}
body.in-room .px-chrome{opacity:0;visibility:hidden}
.px-brand{position:absolute;left:clamp(18px,2.2vw,34px);top:clamp(16px,2vh,28px);display:flex;align-items:center;gap:10px}
.px-mark{width:17px;height:17px;border-radius:50%;position:relative;flex:none;
  background:conic-gradient(from 0deg,rgba(240,238,230,.55),transparent 32%,transparent 68%,rgba(240,238,230,.35));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.2px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.2px),#000 0);
  animation:pxSpin 22s linear infinite}
.px-mark::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--px-acc);
  -webkit-mask:none;mask:none;opacity:.9}
.px-word{font-family:var(--px-mono);font-size:11px;letter-spacing:.18em;color:var(--text);font-weight:500}
.px-tag{font-family:var(--px-mono);font-size:8.5px;letter-spacing:.18em;color:var(--px-dim);
  border:1px solid var(--px-line);border-radius:4px;padding:2px 5px;transform:translateY(-1px)}
.px-status{position:absolute;right:clamp(18px,2.2vw,34px);top:clamp(16px,2vh,28px);
  display:flex;align-items:center;gap:8px;font-family:var(--px-mono);font-size:9px;letter-spacing:.22em;color:var(--px-dim)}
.px-status i{width:5px;height:5px;border-radius:50%;background:#58d68d;box-shadow:0 0 0 3px rgba(88,214,141,.12);
  animation:pxPulse 3.2s ease-in-out infinite}
.px-rail{position:absolute;left:clamp(18px,2.2vw,34px);bottom:clamp(22px,3vh,36px);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--px-mono);font-size:8.5px;letter-spacing:.38em;color:var(--px-dimmer);opacity:.8}
.px-meta{position:absolute;bottom:clamp(18px,2.4vh,30px);display:flex;align-items:center;gap:9px;
  font-family:var(--px-mono);font-size:9px;letter-spacing:.2em;color:var(--px-dimmer)}
.px-meta-l{right:clamp(18px,2.2vw,34px)}
.px-meta-r{right:clamp(120px,15vw,220px)}
.px-meta-l span:first-child{color:var(--px-dim);font-variant-numeric:tabular-nums;letter-spacing:.14em}
.px-live-dot{width:4px;height:4px;border-radius:50%;background:var(--px-acc);opacity:.8}
@keyframes pxPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes pxSpin{to{transform:rotate(360deg)}}

/* ---------- 5. Hero ---------- */
.px-hero{position:fixed;left:clamp(40px,5vw,84px);top:50%;transform:translateY(-50%);
  z-index:2;width:min(360px,30vw);pointer-events:none;display:none}
.px-hero::before{content:"";position:absolute;left:-160px;top:50%;width:640px;height:640px;
  transform:translateY(-50%);border-radius:50%;border:1px solid rgba(240,238,230,.055);z-index:-1;pointer-events:none}
.px-hero::after{content:"";position:absolute;left:118px;top:50%;width:230px;height:230px;
  transform:translateY(-50%);border-radius:50%;border:1px dashed rgba(240,238,230,.07);z-index:-1;pointer-events:none}
body.light .px-hero::before{border-color:rgba(20,22,24,.09)}
body.light .px-hero::after{border-color:rgba(20,22,24,.10)}
body[data-screen="login"] .px-hero,body[data-screen="join"] .px-hero{display:block}
body.in-room .px-hero{display:none}
.px-eyebrow{display:flex;align-items:center;gap:12px;
  font-family:var(--px-mono);font-size:9px;letter-spacing:.3em;color:var(--px-dim);margin-bottom:26px}
.px-rule{width:34px;height:1px;background:linear-gradient(90deg,var(--px-acc),rgba(63,230,240,0))}
.px-hero h2{margin:0 0 22px;font-size:clamp(42px,3.6vw,58px);line-height:1.02;letter-spacing:-.045em;
  font-weight:400;color:var(--text)}
.px-hero h2 .px-dim{color:var(--px-dim)}
.px-hero h2 .px-period{color:var(--px-acc)}
.px-hero p{margin:0 0 34px;font-size:13px;line-height:2;color:var(--px-dim);letter-spacing:.01em}
.px-specs{display:flex;gap:26px;padding-top:18px;border-top:1px solid var(--px-line)}
.px-specs div{display:flex;flex-direction:column;gap:6px}
.px-specs span{font-family:var(--px-mono);font-size:8px;letter-spacing:.26em;color:var(--px-dimmer)}
.px-specs b{font-family:var(--px-mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--px-dim)}
.px-hero-foot{display:flex;align-items:center;gap:12px;margin-top:30px;
  font-family:var(--px-mono);font-size:8px;letter-spacing:.24em;color:var(--px-dimmer)}
.px-hero-line{flex:1;height:1px;background:var(--px-line)}

/* ---------- 6. Screens & card ---------- */
#joinScreen,#loginScreen{background:transparent!important;overflow:visible!important}
#joinScreen::before,#loginScreen::before,#joinScreen::after,#loginScreen::after{display:none!important}
#waitingScreen{background:transparent;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:26px 16px calc(26px + var(--safe-b))}
#loginScreen,#joinScreen{align-items:center}
#loginScreen,#joinScreen,#waitingScreen{position:relative;z-index:2}

.join-card{
  position:relative;max-width:860px;padding:30px 30px 26px;
  background:linear-gradient(168deg,rgba(19,22,26,.94) 0%,rgba(10,12,15,.96) 58%,rgba(8,9,11,.97) 100%)!important;
  border:1px solid var(--px-line)!important;border-radius:22px!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 40px 90px -32px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(22px) saturate(115%);-webkit-backdrop-filter:blur(22px) saturate(115%);
  overflow:hidden;
  animation:pxCardIn .65s var(--px-ease) both!important;
}
.join-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(63,230,240,.055),transparent 62%);
  transition:opacity .45s var(--px-ease)
}
.join-card:hover::after{opacity:1}
.join-card::before{
  content:"";position:absolute;left:30px;right:30px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(63,230,240,.55),rgba(240,238,230,.18) 28%,transparent 70%);
  display:block!important
}
#loginScreen .login-card{max-width:452px}
#joinScreen .join-card{max-width:820px}
@keyframes pxCardIn{from{opacity:0;transform:translateY(16px) scale(.99);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

.join-head{margin-bottom:20px}
.join-head h1{
  margin:10px 0 5px;font-size:27px;font-weight:450;letter-spacing:-.035em;line-height:1.15;
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:var(--text)!important;color:var(--text)!important;
}
.join-head .sub{margin:0;font-size:12.5px;color:var(--px-dim);letter-spacing:.015em}
.head-tools{top:-2px;right:0;gap:7px;align-items:flex-end}
.mini-btn{
  background:transparent;border:1px solid var(--px-line);border-radius:7px;
  font-family:var(--px-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--px-dim);padding:6px 9px;transition:color .2s,border-color .2s,background .2s
}
.mini-btn:hover{color:var(--text);border-color:var(--px-line-hi);background:rgba(255,255,255,.04);transform:none}

.logo{
  font-size:0!important;line-height:1;width:44px;height:44px;margin:0 auto 8px;position:relative;
  display:block;background:none!important;-webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:none!important;animation:none!important;
}
.logo::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(240,238,230,.6),rgba(240,238,230,.06) 26%,rgba(240,238,230,.06) 74%,rgba(240,238,230,.45));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 0);
  animation:pxSpin 20s linear infinite;display:block!important
}
.logo::after{
  content:"";position:absolute;inset:14px;border-radius:50%;display:block!important;
  background:radial-gradient(circle at 34% 30%,#d6feff 0%,var(--px-acc) 48%,#0b98a4 100%);
  box-shadow:0 0 14px rgba(63,230,240,.32),inset 0 0 6px rgba(0,0,0,.35)
}
body.light .logo::before{background:conic-gradient(from 0deg,rgba(20,22,24,.55),rgba(20,22,24,.05) 26%,rgba(20,22,24,.05) 74%,rgba(20,22,24,.4))}

/* ---------- 7. Fields ---------- */
.fields{margin-top:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field>span{
  font-family:var(--px-mono);font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--px-dimmer)
}
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  background:rgba(255,255,255,.032)!important;
  border:1px solid var(--px-line)!important;border-radius:10px;color:var(--text);
  padding:12px 13px;font-family:inherit;font-size:14px;
  transition:border-color .22s var(--px-ease),background .22s,box-shadow .22s
}
input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,select:hover,textarea:hover{
  background:rgba(255,255,255,.05)!important;border-color:var(--px-line-hi)!important
}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:none!important;border-color:rgba(63,230,240,.5)!important;
  background:rgba(255,255,255,.05)!important;
  box-shadow:0 0 0 3px rgba(63,230,240,.08)!important
}
::placeholder{color:var(--px-dimmer);opacity:.85}
input[type=checkbox],input[type=radio]{accent-color:var(--px-acc)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--px-dim) 50%),linear-gradient(135deg,var(--px-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.hint{font-size:11px;color:var(--px-dim)}

/* ---------- 8. Buttons ---------- */
.btn{border-radius:10px;font-family:inherit;font-weight:500;letter-spacing:.01em;
  transition:transform .18s var(--px-ease),background .2s,border-color .2s,box-shadow .25s,color .2s}
.btn-primary{
  background:var(--px-paper)!important;color:var(--px-ink)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 28px -14px rgba(0,0,0,.9)!important;
  text-shadow:none!important;border:1px solid rgba(255,255,255,.14)!important;
}
.btn-primary:hover{background:#fffdf6!important;filter:none!important;transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 36px -16px rgba(0,0,0,.95)!important}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn-ghost{background:rgba(255,255,255,.035)!important;border:1px solid var(--px-line)!important;color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.07)!important;border-color:var(--px-line-hi)!important;transform:translateY(-1px)}
.btn-danger{background:#e5484d!important;color:#fff!important;border:0!important;
  box-shadow:0 10px 26px -12px rgba(229,72,77,.7)!important}
.btn-lg{padding:14px 22px;font-size:15px}
.btn-sm{padding:8px 14px;font-size:12.5px}
body.light .btn-primary{background:#15171a!important;color:#f7f5ef!important;border-color:rgba(20,22,24,.9)!important}
body.light .btn-primary:hover{background:#000!important}
body.light .btn-ghost{background:rgba(20,22,24,.03)!important;border-color:rgba(20,22,24,.14)!important}

/* ---------- 9. Preview ---------- */
.preview-wrap{border-radius:14px!important;border:1px solid var(--px-line)!important;
  background:radial-gradient(120% 100% at 50% 0%,#0a0d11 0%,#050607 72%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 24px 50px -26px rgba(0,0,0,.9)!important}
.preview-wrap::before,.preview-wrap::after{
  content:"";position:absolute;width:16px;height:16px;z-index:3;pointer-events:none;
  border:1px solid rgba(240,238,230,.32);display:block!important
}
.preview-wrap::before{left:10px;top:10px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.preview-wrap::after{right:10px;bottom:10px;border-left:0;border-top:0;border-radius:0 0 3px 0}
.preview-ph{background:transparent!important;color:var(--px-dim)}
.pv-btn{background:rgba(8,10,12,.55)!important;border:1px solid rgba(240,238,230,.14)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .18s var(--px-ease),background .2s,border-color .2s}
.pv-btn:hover{background:rgba(240,238,230,.12)!important;border-color:rgba(240,238,230,.3)!important;transform:scale(1.05)}
.pv-btn.off{background:rgba(229,72,77,.85)!important;border-color:rgba(229,72,77,.9)!important}
.level-meter{height:3px!important;border-radius:99px;background:rgba(240,238,230,.12)!important}
.level-meter i{background:var(--px-acc)!important;border-radius:99px}

/* weather / last room */
.weather-pill{background:transparent!important;border:1px solid var(--px-line)!important;
  border-radius:7px!important;padding:5px 8px!important;animation:none!important;
  font-family:var(--px-mono);font-size:9px!important;letter-spacing:.1em;color:var(--px-dim)!important}
.weather-pill .wico{color:var(--px-dim)!important;width:13px!important;height:13px!important}
.weather-pill .wtemp{font-family:var(--px-mono)!important;font-size:10px!important;font-weight:500!important;
  color:var(--text)!important}
.weather-pill .wcity{font-size:9px!important;color:var(--px-dim)!important;max-width:90px}
.lastroom{background:rgba(255,255,255,.03)!important;border:1px solid var(--px-line)!important;border-radius:10px!important}
.lastroom .btn-primary{padding:7px 12px}

/* ---------- 10. Waiting ---------- */
#waitingScreen .join-card{max-width:430px;text-align:center;padding:42px 34px}
.spinner{
  width:34px;height:34px;border:1.5px solid rgba(240,238,230,.12)!important;
  border-top-color:var(--px-acc)!important;border-radius:50%;
  margin:0 auto 22px!important;filter:none!important;animation:pxRot .9s linear infinite!important
}
#waitingScreen h2{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px}
#waitingScreen .sub{font-size:12.5px;color:var(--px-dim)}
@keyframes pxRot{to{transform:rotate(360deg)}}

/* ---------- 11. Room ---------- */
.stage{background:radial-gradient(120% 90% at 50% -10%,#0b0e13 0%,#050607 62%)!important}
.grid{gap:10px;padding:10px}
.grid .tile{
  background:#050708!important;border:1px solid rgba(240,238,230,.075)!important;
  border-radius:14px!important;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.03)!important;
  animation:pxTileIn .45s var(--px-ease) both!important;
  transition:border-color .25s var(--px-ease),box-shadow .3s var(--px-ease)
}
@keyframes pxTileIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.grid .tile:hover{border-color:rgba(240,238,230,.16)!important}
.tile.speaking{
  outline:1.5px solid rgba(88,214,141,.85)!important;outline-offset:-1.5px;
  box-shadow:0 0 0 1px rgba(88,214,141,.28),0 0 36px -12px rgba(88,214,141,.45)!important
}
.tile.local{border-color:rgba(63,230,240,.35)!important}
.tile-name{
  background:rgba(6,8,10,.55)!important;border:1px solid rgba(240,238,230,.08)!important;
  border-radius:7px!important;font-size:11px!important;letter-spacing:.02em;padding:4px 9px!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.tile-badge{background:rgba(6,8,10,.6)!important;border:1px solid rgba(240,238,230,.08);
  border-radius:6px!important;backdrop-filter:blur(8px);font-size:10.5px!important}
.tile-badge.muted{background:rgba(229,72,77,.85)!important}

.topbar{padding:calc(12px + var(--safe-t)) 14px 12px;
  background:linear-gradient(180deg,rgba(4,5,6,.72),rgba(4,5,6,0))!important}
.room-chip,.stat-chip{
  background:rgba(8,10,12,.55)!important;border:1px solid rgba(240,238,230,.10)!important;
  border-radius:7px!important;font-family:var(--px-mono);font-size:9.5px!important;
  letter-spacing:.14em;padding:6px 10px!important;color:rgba(240,238,230,.86)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.stat-chip.good{background:rgba(20,120,80,.55)!important;border-color:rgba(88,214,141,.3)!important}
.stat-chip.bad{background:rgba(160,40,44,.6)!important;border-color:rgba(229,72,77,.35)!important}
.tb-btn{
  width:36px;height:36px;background:rgba(8,10,12,.55)!important;
  border:1px solid rgba(240,238,230,.1)!important;border-radius:8px!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .2s,border-color .2s,transform .18s var(--px-ease)
}
.tb-btn:hover{background:rgba(240,238,230,.1)!important;border-color:rgba(240,238,230,.22)!important;transform:translateY(-1px)}

footer.controls{
  width:min(1060px,calc(100% - 26px));margin:0 auto calc(10px + var(--safe-b));
  background:rgba(10,12,15,.72)!important;
  border:1px solid rgba(240,238,230,.10)!important;border-radius:18px!important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);
  padding:9px 11px!important
}
footer.controls .ctl{
  min-width:60px;padding:8px 8px;border-radius:11px;color:rgba(240,238,230,.72);
  background:transparent;border:1px solid transparent;
  transition:background .18s,color .18s,border-color .18s,transform .18s var(--px-ease)
}
footer.controls .ctl .ico{width:19px;height:19px}
footer.controls .ctl i{font-size:9px;letter-spacing:.08em;color:rgba(240,238,230,.42);font-style:normal}
footer.controls .ctl:hover{background:rgba(240,238,230,.07)!important;color:var(--text);
  border-color:rgba(240,238,230,.08);transform:translateY(-2px)}
footer.controls .ctl.on{
  background:rgba(63,230,240,.10)!important;border-color:rgba(63,230,240,.28)!important;
  color:#c9fbff!important;box-shadow:none!important
}
footer.controls .ctl.on i{color:rgba(201,251,255,.6)}
footer.controls .ctl.off{background:rgba(229,72,77,.13)!important;border-color:rgba(229,72,77,.35)!important;
  color:#ff9a9e!important}
footer.controls .ctl.off i{color:rgba(255,154,158,.6)}
.ctl-danger{background:#e5484d!important;border-radius:11px!important;border:0!important;
  box-shadow:0 12px 26px -12px rgba(229,72,77,.75)!important;transition:transform .18s var(--px-ease),filter .18s}
.ctl-danger:hover{filter:brightness(1.06)!important;transform:translateY(-2px)!important}
.ctl-danger i{color:rgba(255,255,255,.75)!important}
.badge{background:var(--px-acc)!important;color:#04191b!important;font-weight:600}

body.light footer.controls{background:rgba(10,12,15,.72)!important}
body.light footer.controls .ctl{color:rgba(240,238,230,.72)}
body.light .room-chip,body.light .stat-chip{background:rgba(8,10,12,.55)!important;color:rgba(240,238,230,.86)!important}
body.light .tb-btn{background:rgba(8,10,12,.55)!important;color:#f1efe8!important}

/* ---------- 12. Panels, drawer, chat, modals ---------- */
.panel,.float-win,.more-box,.modal-box,.clock-win,.music-win{
  background:rgba(11,13,16,.93)!important;border:1px solid rgba(240,238,230,.10)!important;
  border-radius:16px!important;
  box-shadow:0 34px 80px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);
  animation:pxPanelIn .34s var(--px-ease) both!important
}
@keyframes pxPanelIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.drawer{
  background:rgba(10,12,15,.94)!important;border-left:1px solid rgba(240,238,230,.1)!important;
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);
  animation:pxDrawerIn .36s var(--px-ease) both!important
}
@keyframes pxDrawerIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.panel h3,.fw-title-row{font-size:12px;letter-spacing:.02em}
.dtab{font-family:var(--px-mono);font-size:10.5px;letter-spacing:.1em;color:var(--px-dim)}
.dtab.active{color:var(--text)!important;border-bottom-color:var(--px-acc)!important}
.fw-head{border-bottom:1px solid rgba(240,238,230,.07)!important}
.fw-title-row{font-weight:500}
.modal{background:rgba(3,4,5,.68)!important;backdrop-filter:blur(8px)}
.modal-box{padding:24px!important}
.modal-box h4{font-size:15px;font-weight:500}
.toast{
  background:rgba(12,14,17,.9)!important;border:1px solid rgba(240,238,230,.14)!important;
  border-radius:8px!important;font-family:var(--px-mono);font-size:11px;letter-spacing:.04em;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9)!important;animation:pxToastIn .32s var(--px-ease) both!important
}
@keyframes pxToastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}

.chat-log{gap:12px}
.msg .bubble{background:rgba(240,238,230,.055)!important;border:1px solid rgba(240,238,230,.06)!important;
  border-radius:4px 13px 13px 13px!important;font-size:13px;line-height:1.65;box-shadow:none!important}
.msg.mine .bubble{
  background:var(--px-paper)!important;color:var(--px-ink)!important;border-color:transparent!important;
  border-radius:13px 4px 13px 13px!important;box-shadow:0 10px 24px -14px rgba(0,0,0,.8)!important
}
.msg.mine .bubble .chat-quote{background:rgba(0,0,0,.06);border-left-color:rgba(0,0,0,.25)}
.msg.mine .bubble a{color:#0a6d78}
.msg.mine .bubble .chat-mention{color:#0a6d78}
.msg.mine .msg-status{color:rgba(8,9,11,.5)}
.msg .who{font-size:10px;letter-spacing:.03em;color:var(--px-dim)}
.msg .who .ts{font-family:var(--px-mono);font-size:9px}
.msg .chat-quote{border-left-color:rgba(63,230,240,.45);background:rgba(255,255,255,.035)}
.chat-form textarea{background:rgba(255,255,255,.04)!important;border-radius:10px!important}
.chat-new-btn{background:var(--px-paper)!important;color:var(--px-ink)!important;border:0!important;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.85)!important;font-size:11px}
.chat-conn.ok{background:#58d68d!important;box-shadow:0 0 0 3px rgba(88,214,141,.14)!important}
.chat-conn.bad{background:#e5484d!important;box-shadow:0 0 0 3px rgba(229,72,77,.14)!important}
.chat-hint{font-family:var(--px-mono);font-size:9px!important;letter-spacing:.06em;color:var(--px-dimmer)!important}
.chat-file{background:rgba(255,255,255,.04);border-radius:9px}

/* captions, whiteboard, share */
.caption-bar{background:rgba(8,10,12,.62)!important;border:1px solid rgba(240,238,230,.08)!important;border-radius:10px!important;
  backdrop-filter:blur(14px)}
.wb-toolbar{background:rgba(10,12,15,.9)!important;border-bottom:1px solid rgba(240,238,230,.08)!important}
.wb-tool,.wb-btn{border-radius:9px!important;background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(240,238,230,.09)!important}
.wb-tool.active,.wb-tab.active{background:var(--px-paper)!important;color:var(--px-ink)!important;border-color:transparent!important;
  box-shadow:none!important}
.wb-tab{border-radius:999px!important;border:1px solid rgba(240,238,230,.1)!important;background:rgba(255,255,255,.03)!important}
.wb-color.active{box-shadow:0 0 0 2px rgba(63,230,240,.35)!important}
.share-focus{border-radius:12px!important}
.share-item{border-radius:9px!important;border:1px solid rgba(240,238,230,.09)}
.share-item:hover,.share-item.active{border-color:rgba(63,230,240,.35)!important;background:rgba(255,255,255,.035)!important}
.more-item{border-radius:11px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(240,238,230,.09)!important}
.more-item:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(240,238,230,.18)!important;transform:translateY(-1px)}
.mi-ico{background:rgba(63,230,240,.08)!important;border:1px solid rgba(63,230,240,.18)!important;border-radius:9px!important}
.member .avatar,.avatar{background:linear-gradient(145deg,#2b3138,#151a20)!important;border:1px solid rgba(240,238,230,.1)!important}

/* light theme for floating surfaces (room stays cinematic) */
body.light .panel,body.light .float-win,body.light .more-box,body.light .modal-box,body.light .drawer{
  background:rgba(255,253,247,.96)!important;border-color:rgba(20,22,24,.12)!important
}
body.light .msg .bubble{background:rgba(20,22,24,.05)!important;border-color:rgba(20,22,24,.06)!important;color:var(--text)}
body.light .msg.mine .bubble{background:#15171a!important;color:#f7f5ef!important}

/* ---------- 13. Scrollbars ---------- */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(240,238,230,.14);border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:rgba(240,238,230,.24)}
*::-webkit-scrollbar-track{background:transparent}
body.light ::-webkit-scrollbar-thumb{background:rgba(20,22,24,.18)}

/* ---------- 14. Layout: desktop editorial split ---------- */
@media (min-width:1360px){
  #loginScreen,#joinScreen{justify-content:flex-end!important;padding-right:6vw!important}
  #loginScreen .login-card,#joinScreen .join-card{margin:0!important}
  #joinScreen .join-card{max-width:760px}
}
@media (max-width:1359px){
  .px-hero{display:none!important}
}
@media (max-width:820px){
  .px-chrome{display:none}
  .join-card{padding:22px 18px 20px;border-radius:18px!important}
  .join-head h1{font-size:23px}
  footer.controls{width:calc(100% - 12px);margin-bottom:calc(6px + var(--safe-b));border-radius:16px!important;padding:7px 6px!important}
  footer.controls .ctl{min-width:52px;padding:7px 5px}
  footer.controls .ctl i{font-size:8.5px}
}
@media (max-width:480px){
  #joinScreen{padding:14px 10px calc(14px + var(--safe-b))!important}
  .join-card{padding:20px 15px 18px}
  .field>span{font-size:8.5px}
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .px-orb{display:none}
}

/* hint + details polish */
.hint{color:var(--px-dim)!important}
.hint.err{color:#e8898c!important}
.hint.ok{color:rgba(126,212,167,.92)!important}
details.friends-box summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:12px;color:var(--px-dim);padding:2px 0}
details.friends-box summary::-webkit-details-marker{display:none}
details.friends-box summary::after{content:"";width:6px;height:6px;margin-left:auto;
  border-right:1px solid var(--px-dim);border-bottom:1px solid var(--px-dim);
  transform:rotate(-45deg);transition:transform .22s var(--px-ease)}
details.friends-box[open] summary::after{transform:rotate(45deg)}
/* room focus: hide atmosphere while in call */
body::after{transition:opacity .6s var(--px-ease)}
body.in-room .px-bg{opacity:0;transition:opacity .6s var(--px-ease)}
body.in-room::after{opacity:0}

/* empty camera placeholder */
.preview-ph{flex-direction:column;gap:14px;font-family:var(--px-mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--px-dim)}
.preview-ph::before{content:"";width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(240,238,230,.22);
  background:radial-gradient(circle at 50% 50%,rgba(63,230,240,.45) 0 3px,transparent 4px);
  animation:pxPulse 2.8s ease-in-out infinite}
/* wide-screen ambient rings */
.px-bg::before,.px-bg::after{content:"";position:absolute;left:56%;top:47%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.px-bg::before{width:min(74vw,1120px);aspect-ratio:1;border:1px solid rgba(240,238,230,.045)}
.px-bg::after{width:min(46vw,700px);aspect-ratio:1;border:1px dashed rgba(240,238,230,.05)}
body.light .px-bg::before{border-color:rgba(20,22,24,.07)}
body.light .px-bg::after{border-color:rgba(20,22,24,.08)}
@media (max-width:820px){.px-bg::before,.px-bg::after{display:none}}

/* light theme: keep the call stage cinematic */
body.light #roomScreen,body.light .room-shell{background:#050607!important}
body.light footer.controls{background:rgba(10,12,15,.86)!important}
/* form stagger */
.fields>*{animation:pxFieldIn .55s var(--px-ease) both}
.fields>*:nth-child(1){animation-delay:.04s}
.fields>*:nth-child(2){animation-delay:.09s}
.fields>*:nth-child(3){animation-delay:.14s}
.fields>*:nth-child(4){animation-delay:.19s}
.fields>*:nth-child(5){animation-delay:.24s}
.fields>*:nth-child(6){animation-delay:.29s}
.fields>*:nth-child(7){animation-delay:.34s}
@keyframes pxFieldIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* global banner */
.banner{background:rgba(16,10,11,.95)!important;border-bottom:1px solid rgba(229,72,77,.35)!important;
  color:#f1efe8;font-size:12.5px;letter-spacing:.01em;box-shadow:none!important}
.banner.warn{background:rgba(28,20,9,.95)!important;border-bottom-color:rgba(245,158,11,.4)!important}
.banner.info{background:rgba(9,15,26,.95)!important;border-bottom-color:rgba(63,230,240,.32)!important}
.banner.ok{background:rgba(8,21,15,.95)!important;border-bottom-color:rgba(88,214,141,.38)!important}

/* self-check output */
.diag{background:rgba(255,255,255,.03);border:1px solid var(--px-line);border-radius:10px;
  padding:10px 12px;font-family:var(--px-mono);font-size:10px;line-height:1.85;
  letter-spacing:.02em;color:var(--px-dim);white-space:pre-wrap;max-height:180px;overflow:auto}