/* ==========================================================================
   ngoc.love STUDIO — product-level layout & interaction polish
   Loaded after premium.css. Presentation only; core RTC logic is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Pre-call studio: no more one giant empty card
   -------------------------------------------------------------------------- */
#joinScreen .join-card{
  display:grid!important;
  grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);
  column-gap:30px;
  align-items:start;
  max-width:900px!important;
  padding:26px 28px 22px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(16,19,23,.97),rgba(9,11,14,.98))!important;
  border-color:rgba(240,238,230,.09)!important;
  box-shadow:0 34px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#joinScreen .join-card::after{display:none!important}
#joinScreen .join-card::before{
  left:28px;right:28px;
  background:linear-gradient(90deg,rgba(63,230,240,.38),rgba(240,238,230,.10) 34%,transparent 72%)!important;
}
#joinScreen .join-head{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:13px;
  text-align:left;
  margin:0 0 22px;
  padding:0 0 18px;
  border-bottom:1px solid rgba(240,238,230,.08);
}
#joinScreen .join-head .logo{grid-column:1;grid-row:1/3;margin:0;align-self:center;width:38px;height:38px}
#joinScreen .join-head .logo::after{inset:12px}
#joinScreen .join-head h1{grid-column:2;grid-row:1;align-self:end;margin:0;font-size:22px;font-weight:500}
#joinScreen .join-head .sub{grid-column:2;grid-row:2;align-self:start;margin:2px 0 0;font-size:12px;color:var(--px-dim)!important}
#joinScreen .head-tools{
  position:static!important;
  grid-column:3;grid-row:1/3;
  align-self:center;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end;
  gap:7px!important;
}
#joinScreen .head-tools .weather-pill,
#joinScreen .head-tools #logoutBtn{display:none!important}

.join-preview-col,.join-form-col{min-width:0;grid-row:2}
.join-preview-col{grid-column:1}
.join-form-col{grid-column:2;padding-left:28px;border-left:1px solid rgba(240,238,230,.075)}
.join-block-head{
  height:20px;
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 9px;
  font-family:var(--px-mono);
  font-size:9px;font-weight:400;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(240,238,230,.43);
}
.join-ready{display:inline-flex;align-items:center;gap:6px;color:rgba(240,238,230,.55);letter-spacing:.06em;text-transform:none;font-family:inherit;font-size:10px}
.join-ready i{width:5px;height:5px;border-radius:50%;background:#59d99b;box-shadow:0 0 0 3px rgba(89,217,155,.10)}
.join-ready.off i{background:#7b838c;box-shadow:none}
.join-step{color:rgba(63,230,240,.74);letter-spacing:.12em}

#joinScreen .preview-wrap{
  width:100%;
  aspect-ratio:16/9;
  max-height:304px;
  border-radius:12px!important;
  border:1px solid rgba(240,238,230,.10)!important;
  background:#050607!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
#joinScreen #previewVideo{border-radius:0!important;object-fit:cover}
#joinScreen .preview-bar{bottom:10px;gap:8px}
#joinScreen .pv-btn{
  width:38px;height:38px;
  background:rgba(8,10,12,.66)!important;
  border-color:rgba(240,238,230,.14)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#joinScreen .pv-btn .ico{width:17px;height:17px}
#joinScreen .pv-btn.off{background:rgba(210,61,67,.88)!important;border-color:transparent!important}
#joinScreen .level-meter{left:10px;bottom:10px;width:64px;height:3px}
#joinScreen .preview-stats{top:9px;right:9px;padding:3px 8px;font-size:9px;font-family:var(--px-mono);letter-spacing:.06em}
#joinScreen .preview-ph{font-size:10px;letter-spacing:.12em}

.join-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px}
.device-select{
  min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;
  border-radius:9px;
  border:1px solid rgba(240,238,230,.085);
  background:rgba(255,255,255,.025);
  transition:border-color .2s,background .2s;
}
.device-select:hover{border-color:rgba(240,238,230,.16);background:rgba(255,255,255,.038)}
.device-ico{flex:none;width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:rgba(240,238,230,.05);color:rgba(240,238,230,.62)}
.device-ico svg{width:14px;height:14px}
.device-meta{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.device-meta b{font-size:9px;font-weight:400;letter-spacing:.06em;color:rgba(240,238,230,.38)}
.device-meta select{
  width:100%;min-width:0;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:rgba(240,238,230,.79)!important;font-size:10.5px!important;line-height:1.35;
  text-overflow:ellipsis;cursor:pointer;
}
.device-meta select:focus{outline:none!important;box-shadow:none!important;border:0!important}
.device-meta select option{background:#111418;color:#f1efe8}
.join-assurance{display:flex;align-items:center;gap:6px;margin:9px 1px 0;color:rgba(240,238,230,.31);font-size:9.5px;letter-spacing:.01em}
.join-assurance svg{width:12px;height:12px;flex:none}

#joinScreen .fields{margin-top:0}
#joinScreen .row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#joinScreen .row .field{min-width:0}
#joinScreen .field{margin-bottom:10px;gap:5px}
#joinScreen .field>span{font-size:8.5px;letter-spacing:.14em}
#joinScreen input[type=text],#joinScreen input[type=password],#joinScreen select{
  padding:10px 11px!important;font-size:13px!important;border-radius:9px!important;
}
#joinScreen .join-actions{gap:8px;margin-top:2px}
#joinScreen #joinBtn{flex:1;min-width:0;padding:12px 18px!important;font-size:13.5px!important;border-radius:9px!important}
#joinScreen #diagBtn{flex:none;padding:12px 15px!important;border-radius:9px!important;font-size:12px!important}
#joinScreen .lastroom{margin-bottom:9px;padding:8px 10px;border-radius:9px}
#joinScreen .friends-box{grid-column:1/-1;margin-top:16px;padding-top:12px}
#joinScreen .hint{font-size:10.5px;min-height:15px;margin-bottom:5px}

@media (min-width:1360px) and (max-width:1499px){
  #joinScreen .join-card{max-width:840px!important}
  #joinScreen .join-head h1{font-size:20px}
}
@media (max-width:980px){
  #joinScreen .join-card{grid-template-columns:1fr;max-width:700px!important}
  .join-preview-col,.join-form-col{grid-column:1;grid-row:auto}
  .join-form-col{padding:20px 0 0;border-left:0;border-top:1px solid rgba(240,238,230,.075)}
  #joinScreen .preview-wrap{max-height:none}
}
@media (max-width:640px){
  #joinScreen .join-card{padding:20px 15px 17px!important}
  #joinScreen .join-head{column-gap:10px;margin-bottom:17px;padding-bottom:14px}
  #joinScreen .join-head .logo{width:33px;height:33px}
  #joinScreen .join-head .logo::after{inset:10px}
  #joinScreen .join-head h1{font-size:18px}
  #joinScreen .join-head .sub{font-size:10.5px}
  #joinScreen .head-tools{gap:5px!important}
  #joinScreen .head-tools .mini-btn{padding:5px 7px;font-size:8px}
  .join-devices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .join-devices .device-select:last-child{grid-column:1/-1}
  #joinScreen .preview-wrap{max-height:min(62vh,560px)}
  #joinScreen .row{grid-template-columns:1fr}
  #joinScreen #joinBtn{min-height:46px}
}

/* --------------------------------------------------------------------------
   2. Docked meeting panels: chat / content / interpretation
   -------------------------------------------------------------------------- */
#chatWin,#shareWin,#itpWin{
  position:absolute!important;
  top:56px!important;right:10px!important;bottom:10px!important;left:auto!important;
  width:min(372px,calc(100% - 20px))!important;
  height:auto!important;max-height:none!important;
  border-radius:14px!important;
  background:rgba(12,15,19,.975)!important;
  border:1px solid rgba(240,238,230,.11)!important;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(28px) saturate(125%)!important;-webkit-backdrop-filter:blur(28px) saturate(125%)!important;
  animation:studioDockIn .26s cubic-bezier(.22,.8,.3,1) both!important;
}
#shareWin{width:min(390px,calc(100% - 20px))!important}
#chatWin .fw-head,#shareWin .fw-head,#itpWin .fw-head{
  height:48px;min-height:48px;padding:0 10px 0 15px!important;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(240,238,230,.075)!important;
  background:rgba(255,255,255,.018)!important;
  cursor:default!important;font-size:13px!important;font-weight:500!important;letter-spacing:.01em;
}
#chatWin .fw-head[data-drag],#shareWin .fw-head[data-drag],#itpWin .fw-head[data-drag]{touch-action:auto}
#chatWin .fw-title-row,#shareWin .fw-title-row,#itpWin .fw-title-row{gap:7px}
#chatWin .fw-actions,#shareWin .fw-actions,#itpWin .fw-actions{gap:3px}
#chatWin .fw-tool,#shareWin .fw-tool,#itpWin .fw-tool{width:29px;height:29px;display:grid;place-items:center;padding:0!important;border-radius:7px;color:rgba(240,238,230,.42)}
#chatWin .fw-tool:hover,#shareWin .fw-tool:hover,#itpWin .fw-tool:hover{color:var(--text);background:rgba(240,238,230,.07)}
#chatWin .fw-tool .ico,#shareWin .fw-tool .ico,#itpWin .fw-tool .ico{width:15px;height:15px}
#chatWin .fw-close,#shareWin .fw-close,#itpWin .fw-close{width:29px;height:29px;display:grid;place-items:center;padding:0;border-radius:7px;color:rgba(240,238,230,.45)}
#chatWin .fw-close:hover,#shareWin .fw-close:hover,#itpWin .fw-close:hover{background:rgba(229,72,77,.14);color:#ff9d9f}
#chatWin .fw-close svg,#shareWin .fw-close svg,#itpWin .fw-close svg{width:16px;height:16px}
#chatWin .fw-body{padding:0!important}
#chatWin .chat-log{padding:14px 14px 7px!important;gap:11px!important;background:transparent}
#chatWin .chat-form{padding:10px 11px 8px!important;border-top:1px solid rgba(240,238,230,.075)!important;gap:5px!important;background:rgba(5,7,9,.35)}
#chatWin .chat-form textarea{min-height:37px!important;padding:9px 10px!important;font-size:12.5px!important;border-radius:9px!important;background:rgba(255,255,255,.045)!important}
#chatWin .chat-form .btn-sm{height:34px;min-width:34px;padding:0 10px!important;border-radius:8px!important}
#chatWin .chat-form button[type=submit]{padding:0 14px!important}
#chatWin .chat-hint{padding:0 13px 9px!important;font-size:8.5px!important;background:rgba(5,7,9,.35)}
#chatWin .msg{max-width:92%}
#chatWin .msg .bubble{border-radius:3px 11px 11px 11px!important;padding:8px 11px!important;font-size:12.5px!important;line-height:1.6!important}
#chatWin .msg.mine .bubble{border-radius:11px 3px 11px 11px!important}
#chatWin .msg .who{font-size:9.5px!important;margin-bottom:1px}
#chatWin .chat-conn{margin-left:5px;width:6px;height:6px}

#shareWin .fw-body{padding:13px 14px 14px!important;gap:10px}
#shareWin .share-tips{font-size:10.5px;line-height:1.65;margin-bottom:0;color:rgba(240,238,230,.38)}
#shareWin .share-list{gap:7px;min-height:54px}
#shareWin .share-empty{
  margin:auto;padding:18px 14px;max-width:240px;
  color:rgba(240,238,230,.3);font-size:10.5px;line-height:1.7;text-align:center;
}
#shareWin .share-item{padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.018)}
#shareWin .share-form{gap:7px;margin-top:2px;padding-top:11px;border-top:1px solid rgba(240,238,230,.07)}
#shareWin .share-form>input,#shareWin .share-form .row-inline input{padding:9px 10px!important;font-size:12px!important;border-radius:8px!important}
#shareWin .share-form .btn{height:36px;border-radius:8px!important}

#itpWin .fw-body{padding:13px 14px!important;gap:9px}
#itpWin .itp-langrow{gap:7px}
#itpWin .itp-lang{flex:1;padding:8px 7px;border-radius:8px}
#itpWin .itp-foot{padding-top:9px;border-top:1px solid rgba(240,238,230,.07)}
#itpWin .itp-hint{font-size:9.5px;line-height:1.55}

.stage.dock-open #grid{padding-right:390px}
.stage.dock-open.has-screen #grid,.stage.dock-open.wb-on #grid{padding-right:8px}
.stage.dock-open .topbar{right:394px}
@media (max-width:760px){
  #chatWin,#shareWin,#itpWin{
    top:50px!important;left:7px!important;right:7px!important;bottom:7px!important;
    width:auto!important;border-radius:13px!important;
  }
  .stage.dock-open #grid{padding-right:8px}
  .stage.dock-open .topbar{right:0}
}
@keyframes studioDockIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   3. Utility windows: clock & music
   -------------------------------------------------------------------------- */
#clockWin{
  width:min(334px,calc(100% - 20px))!important;
  max-height:calc(100% - 150px)!important;
  border-radius:14px!important;overflow:hidden;
}
#clockWin .fw-head,#musicWin .fw-head{
  height:46px;min-height:46px;padding:0 10px 0 15px;
  border-bottom:1px solid rgba(240,238,230,.075);
  background:rgba(255,255,255,.018);
}
#clockWin .clock-body{padding:15px 16px 14px!important;overflow:auto}
#clockWin .ck-tabs{padding:3px!important;border-radius:9px!important;background:rgba(255,255,255,.04)!important;gap:2px}
#clockWin .ck-tab{padding:7px 8px!important;border-radius:7px!important;font-size:10.5px!important}
#clockWin .ck-tab.on{background:rgba(240,238,230,.10)!important;color:var(--text)!important}
#musicWin{
  width:min(760px,calc(100% - 20px))!important;
  max-height:min(590px,calc(100% - 120px))!important;
  border-radius:14px!important;overflow:hidden;
}
#musicWin .music-body{padding:0!important;background:#05070a}
#musicWin .music-body iframe{width:100%;height:100%;min-height:420px;border:0}

/* Network quality: anchored popover, not a full diagnostic card */
#statsPanel{
  top:56px!important;right:52px!important;z-index:32!important;
  width:286px;min-width:0!important;max-height:calc(100% - 144px);
  padding:8px 10px!important;border-radius:12px!important;
  background:rgba(14,17,21,.985)!important;
  border:1px solid rgba(240,238,230,.12)!important;
  box-shadow:0 24px 58px -22px rgba(0,0,0,.9)!important;
  overflow:auto;
  animation:studioMenuIn .18s ease-out both!important;
}
#statsPanel h3{margin:4px 3px 8px!important;font-size:11px!important;font-weight:500!important;letter-spacing:.02em;color:rgba(240,238,230,.84)}
#statsPanel .stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 3px;border-bottom:1px solid rgba(240,238,230,.05);font-size:10px}
#statsPanel .stat-row:last-child{border-bottom:0}
#statsPanel .stat-row span{color:rgba(240,238,230,.38)}
#statsPanel .stat-row b{font-family:var(--px-mono);font-size:9.5px;font-weight:500;color:rgba(240,238,230,.76);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){
  #statsPanel{right:8px!important;left:8px!important;top:50px!important;width:auto}
}

/* --------------------------------------------------------------------------
   4. Bottom tool popover
   -------------------------------------------------------------------------- */
#morePanel{
  position:fixed!important;inset:0!important;z-index:970!important;
  display:block!important;padding:0!important;
  background:transparent!important;backdrop-filter:none!important;
  pointer-events:none!important;
}
#morePanel.hidden{display:none!important}
#morePanel .more-box{
  position:absolute;right:18px;bottom:calc(100px + var(--safe-b));
  width:326px;max-width:none;padding:9px!important;
  border-radius:13px!important;
  background:rgba(14,17,21,.985)!important;
  border:1px solid rgba(240,238,230,.12)!important;
  box-shadow:0 26px 64px -22px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.04)!important;
  pointer-events:auto!important;
  animation:studioMenuIn .19s cubic-bezier(.22,.8,.3,1) both!important;
}
#morePanel .more-box::after{
  content:"";position:absolute;right:31px;bottom:-6px;width:10px;height:10px;
  transform:rotate(45deg);
  background:rgba(14,17,21,.985);border-right:1px solid rgba(240,238,230,.12);border-bottom:1px solid rgba(240,238,230,.12);
}
.more-head{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 8px 8px}
.more-head span{display:flex;flex-direction:column;gap:2px}
.more-head b{font-size:12.5px;font-weight:500;color:rgba(240,238,230,.94)}
.more-head small{font-size:9px;color:rgba(240,238,230,.32)}
.more-close{
  width:28px;height:28px;display:grid;place-items:center;padding:0;
  border:0;border-radius:7px;background:transparent;color:rgba(240,238,230,.38);cursor:pointer;
}
.more-close:hover{background:rgba(240,238,230,.07);color:var(--text)}
.more-close svg{width:15px;height:15px}
.more-group{display:flex;flex-direction:column;gap:1px}
.more-sep{height:1px;margin:5px 7px;background:rgba(240,238,230,.07)}
#morePanel .more-item{
  display:grid!important;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:9px;
  width:100%;padding:7px 8px!important;margin:0!important;
  border:0!important;border-radius:8px!important;background:transparent!important;
  text-align:left;color:var(--text);cursor:pointer;
}
#morePanel .more-item:hover{background:rgba(240,238,230,.065)!important;transform:none!important}
#morePanel .mi-ico{
  width:31px;height:31px;display:grid;place-items:center;border-radius:8px!important;
  background:rgba(240,238,230,.045)!important;border:1px solid rgba(240,238,230,.075)!important;
}
#morePanel .mi-ico svg{width:15px;height:15px;color:rgba(240,238,230,.64)}
#morePanel .mi-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
#morePanel .mi-txt b{font-size:11.5px;font-weight:500;color:rgba(240,238,230,.88)}
#morePanel .mi-txt small{font-size:9.5px;color:rgba(240,238,230,.31);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-key{font-family:var(--px-mono);font-size:9px;color:rgba(240,238,230,.28);padding:2px 5px;border:1px solid rgba(240,238,230,.09);border-radius:4px}
@media (max-width:640px){
  #morePanel .more-box{
    left:8px;right:8px;bottom:calc(76px + var(--safe-b));width:auto;
    max-height:calc(100dvh - 112px);overflow:auto;
  }
  #morePanel .more-box::after{display:none}
}
@keyframes studioMenuIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   5. Reactions, raised hand, picture-in-picture
   -------------------------------------------------------------------------- */
.reaction-tray{
  position:fixed;left:50%;bottom:calc(178px + var(--safe-b));z-index:980;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:3px;
  padding:6px 7px;
  border-radius:14px;
  background:rgba(14,17,21,.98);
  border:1px solid rgba(240,238,230,.12);
  box-shadow:0 22px 52px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  animation:studioMenuIn .18s ease-out both;
}
.reaction-tray.hidden{display:none}
.reaction-label{
  padding:0 8px 0 6px;
  font-family:var(--px-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(240,238,230,.3);white-space:nowrap;
}
.reaction-tray button{
  width:38px;height:38px;border:0;border-radius:9px;background:transparent;
  font-size:21px;line-height:1;cursor:pointer;transition:background .15s,transform .15s;
}
.reaction-tray button:hover{background:rgba(240,238,230,.075);transform:translateY(-2px) scale(1.05)}
.reaction-tray button:active{transform:scale(.94)}

.studio-reaction{
  position:absolute;z-index:45;pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));
  animation:studioReaction 2.5s cubic-bezier(.2,.7,.3,1) forwards;
}
.studio-reaction b{display:block;font-size:34px;font-weight:400;line-height:1}
.studio-reaction span{
  display:block;margin-top:4px;padding:2px 7px;border-radius:999px;
  background:rgba(6,8,10,.72);border:1px solid rgba(240,238,230,.10);
  color:rgba(240,238,230,.75);font-size:9px;text-align:center;white-space:nowrap;
}
@keyframes studioReaction{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.75)}
  12%{opacity:1;transform:translate(-50%,-52%) scale(1.05)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-170%) scale(.92)}
}

.tile.hand-raised::before{
  content:attr(data-hand-label);position:absolute;left:10px;bottom:42px;z-index:4;
  padding:4px 8px;border-radius:999px;
  background:rgba(245,190,80,.92);color:#211a0b;
  font-size:9.5px;font-weight:600;letter-spacing:.03em;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.7);
}
.tile.hand-raised{border-color:rgba(245,190,80,.45)}
.grid.mode-speaker .tile.pip.hand-raised::before,.grid.lm-pip .tile.pip.hand-raised::before{
  left:6px;bottom:24px;padding:2px 5px;font-size:8px;
}
.tile-pip{
  position:absolute;right:9px;top:42px;z-index:5;
  width:30px;height:30px;display:grid;place-items:center;padding:0;
  border-radius:7px;border:1px solid rgba(240,238,230,.12);
  background:rgba(6,8,10,.66);color:rgba(240,238,230,.78);
  opacity:0;transform:translateY(-2px);cursor:pointer;
  transition:opacity .18s,background .18s,transform .18s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.tile:hover .tile-pip,.tile:focus-within .tile-pip{opacity:1;transform:none}
.tile-pip:hover{background:rgba(240,238,230,.13);color:#fff}
.tile-pip svg{width:15px;height:15px}
.tile-pip.hidden-pip{display:none!important}
@media (pointer:coarse){.tile-pip{opacity:.72;top:auto;bottom:9px;right:9px}.tile:hover .tile-pip{opacity:1}}

/* --------------------------------------------------------------------------
   6. Invite & shortcuts dialogs
   -------------------------------------------------------------------------- */
#inviteRoomModal,#shortcutsModal{background:rgba(2,3,4,.72)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.invite-dialog,.shortcut-dialog{
  width:min(570px,100%);
  padding:22px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(20,24,29,.99),rgba(11,14,18,.99));
  border:1px solid rgba(240,238,230,.12);
  box-shadow:0 38px 100px -38px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.045);
  animation:studioDialogIn .24s cubic-bezier(.22,.8,.3,1) both;
}
.shortcut-dialog{width:min(440px,100%)}
.invite-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:17px;border-bottom:1px solid rgba(240,238,230,.08)}
.invite-head h3{margin:0 0 4px;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--text)}
.invite-head p{margin:0;font-size:10.5px;line-height:1.6;color:rgba(240,238,230,.38)}
.invite-body{display:grid;grid-template-columns:174px minmax(0,1fr);gap:20px;padding:20px 0 18px}
.invite-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.invite-qr{width:166px;height:166px;display:grid;place-items:center;padding:10px;border-radius:11px;background:#fff;color:#0a0b0d}
.invite-qr img,.invite-qr svg{width:100%;height:100%;display:block}
.invite-qr-wrap small{font-size:9px;color:rgba(240,238,230,.33)}
.invite-fields{display:flex;flex-direction:column;gap:13px;min-width:0}
.invite-fields label{display:flex;flex-direction:column;gap:5px;min-width:0}
.invite-fields label>span{font-family:var(--px-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,238,230,.34)}
.copy-row{display:flex;gap:6px;min-width:0}
.copy-row input{
  flex:1;min-width:0;padding:9px 10px!important;border-radius:8px!important;
  font-family:var(--px-mono)!important;font-size:10.5px!important;color:rgba(240,238,230,.78)!important;
  background:rgba(255,255,255,.035)!important;border:1px solid rgba(240,238,230,.09)!important;
}
.copy-row .btn{height:35px;padding:0 13px!important;border-radius:8px!important;font-size:10.5px!important;white-space:nowrap}
.invite-note{display:flex;align-items:flex-start;gap:7px;padding-top:2px;font-size:9.5px;line-height:1.65;color:rgba(240,238,230,.31)}
.invite-note svg{width:13px;height:13px;flex:none;margin-top:1px}
.invite-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(240,238,230,.08)}
.invite-foot .btn{gap:6px;height:34px;padding:0 12px!important;border-radius:8px!important;font-size:10.5px!important}
.invite-foot span{font-size:9px;color:rgba(240,238,230,.28)}

.shortcut-list{display:flex;flex-direction:column;margin-top:8px}
.shortcut-list>div{display:flex;align-items:center;gap:5px;padding:11px 3px;border-bottom:1px solid rgba(240,238,230,.06)}
.shortcut-list>div:last-child{border-bottom:0}
.shortcut-list span{flex:1;font-size:11.5px;color:rgba(240,238,230,.72)}
.shortcut-list kbd{
  min-width:24px;height:23px;display:inline-grid;place-items:center;padding:0 7px;
  border-radius:5px;border:1px solid rgba(240,238,230,.13);border-bottom-color:rgba(240,238,230,.22);
  background:rgba(255,255,255,.045);color:rgba(240,238,230,.62);
  font-family:var(--px-mono);font-size:9px;box-shadow:0 1px 0 rgba(0,0,0,.35);
}
@keyframes studioDialogIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .invite-dialog,.shortcut-dialog{padding:17px}
  .invite-body{grid-template-columns:1fr;gap:15px;padding:16px 0}
  .invite-qr-wrap{order:2}
  .invite-fields{order:1}
  .invite-qr{width:148px;height:148px}
  .invite-foot span{display:none}
  .reaction-label{display:none}
  .reaction-tray{bottom:calc(132px + var(--safe-b));gap:1px}
  .reaction-tray button{width:36px;height:36px}
}

/* --------------------------------------------------------------------------
   7. Small consistency fixes
   -------------------------------------------------------------------------- */
footer.controls .ctl#btnHand.on{background:rgba(245,190,80,.13)!important;border-color:rgba(245,190,80,.36)!important;color:#ffd98d!important}
footer.controls .ctl#btnHand.on i{color:rgba(255,217,141,.72)}
body.light #joinScreen .join-card{background:rgba(255,253,247,.98)!important}
body.light .device-select{background:rgba(20,22,24,.03);border-color:rgba(20,22,24,.09)}
body.light .device-ico{background:rgba(20,22,24,.055);color:rgba(20,22,24,.56)}
body.light .device-meta b{color:rgba(20,22,24,.38)}
body.light .device-meta select{color:rgba(20,22,24,.78)!important}
body.light .join-block-head{color:rgba(20,22,24,.42)}
body.light .join-assurance{color:rgba(20,22,24,.34)}
body.light #morePanel .more-box,body.light .invite-dialog,body.light .shortcut-dialog{background:rgba(255,253,247,.99)!important;border-color:rgba(20,22,24,.12)!important}
body.light .more-head b,body.light #morePanel .mi-txt b,body.light .invite-head h3{color:#17191c}
body.light .more-head small,body.light #morePanel .mi-txt small,body.light .invite-head p{color:rgba(20,22,24,.42)}
body.light #morePanel .mi-ico{background:rgba(20,22,24,.04)!important;border-color:rgba(20,22,24,.08)!important}
body.light #morePanel .mi-ico svg{color:rgba(20,22,24,.58)}
body.light .reaction-tray{background:rgba(255,253,247,.99);border-color:rgba(20,22,24,.12)}
body.light .reaction-tray button:hover,body.light .more-close:hover{background:rgba(20,22,24,.06)}
@media (prefers-reduced-motion:reduce){
  .studio-reaction{animation-duration:.001ms!important}
}