/* ============================================================
   SPECTRA NEXUS — COMMUNICATIONS PANEL (shared stylesheet)
   ============================================================ */
:root{
  --void:#070A11;--panel:#0D111D;
  --glass:rgba(16,24,40,.7);--glass-line:rgba(0,242,254,.15);
  --cy:#00F2FE;--cy2:#4FACFE;--pu:#7F00FF;--pu2:#E100FF;--em:#00FF9D;
  --gold:#FFD25C;--rose:#FF5C7A;
  --txt:#E8EEF8;--mut:#8B9AB4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--txt);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,.disp{font-family:'Orbitron',sans-serif;letter-spacing:.02em;margin:0}
.mono{font-family:'Space Grotesk',monospace}
a{text-decoration:none;color:inherit}
button{font:inherit}

/* ---------- ambient ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 8%,rgba(127,0,255,.17),transparent 55%),
   radial-gradient(ellipse at 8% 88%,rgba(0,242,254,.12),transparent 52%),
   linear-gradient(180deg,#070A11,#0A0E18 55%,#070A11)}
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(0,242,254,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(127,0,255,.05) 1px,transparent 1px);
  background-size:64px 64px;animation:drift 24s linear infinite}
@keyframes drift{to{background-position:64px 64px}}

/* ---------- surfaces ---------- */
.glass{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-line);border-radius:16px;position:relative;overflow:hidden}
.glass::after{content:'';position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);opacity:.5}
.tick::before,.tick::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none;opacity:.7}
.tick::before{top:9px;left:9px;border-top:2px solid var(--cy);border-left:2px solid var(--cy)}
.tick::after{bottom:9px;right:9px;border-bottom:2px solid var(--pu2);border-right:2px solid var(--pu2)}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.lift:hover{transform:translateY(-5px);border-color:rgba(0,242,254,.45);box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 24px rgba(0,242,254,.15)}

.eyebrow{font-family:'Space Grotesk',monospace;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cy)}
.led{width:8px;height:8px;border-radius:50%;background:var(--em);box-shadow:0 0 9px var(--em);display:inline-block;animation:blip 1.15s steps(1,end) infinite}
.led.amber{background:var(--gold);box-shadow:0 0 9px var(--gold)}
.led.rose{background:var(--rose);box-shadow:0 0 9px var(--rose)}
@keyframes blip{50%{opacity:.25}}
.chip{font-family:'Space Grotesk',monospace;font-size:.6rem;letter-spacing:.14em;padding:5px 11px;border-radius:999px;
  border:1px solid var(--glass-line);background:rgba(0,0,0,.35);color:var(--mut);white-space:nowrap;display:inline-block}

/* ---------- gate ---------- */
#gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(ellipse at 50% 40%,#0C1120,#04060C 75%)}
#gate.hide{display:none}
.gatebox{width:100%;max-width:440px;padding:34px 28px;text-align:center}
.vault{width:78px;height:78px;margin:0 auto 20px;border-radius:50%;position:relative;
  border:2px solid rgba(0,242,254,.5);display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  box-shadow:0 0 34px rgba(0,242,254,.25),inset 0 0 24px rgba(0,242,254,.1)}
.vault::before,.vault::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(127,0,255,.5);animation:spin 14s linear infinite}
.vault::after{inset:-18px;border-color:rgba(0,242,254,.22);animation-duration:22s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
#code{width:100%;margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(4,8,18,.9);
  border:1px solid rgba(0,242,254,.3);color:#fff;font-family:'Space Grotesk',monospace;letter-spacing:.26em;
  text-align:center;font-size:1rem;text-transform:uppercase}
#code:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(0,242,254,.16)}
.gbtn{margin-top:14px;width:100%;padding:13px;border:0;border-radius:12px;cursor:pointer;color:#031018;font-weight:700;
  font-family:'Space Grotesk',monospace;letter-spacing:.16em;background:linear-gradient(120deg,var(--cy),var(--cy2));
  box-shadow:0 0 26px rgba(0,242,254,.3);transition:.25s}
.gbtn:hover{filter:brightness(1.12)}
#gmsg{margin-top:13px;min-height:20px;font-family:'Space Grotesk',monospace;font-size:.72rem;letter-spacing:.1em}
.shake{animation:shk .34s}
@keyframes shk{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ---------- bar ---------- */
.bar{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(7,10,17,.88);border-bottom:1px solid var(--glass-line)}
.navlink{font-family:'Space Grotesk',monospace;font-size:.68rem;letter-spacing:.1em;color:var(--mut);padding:6px 10px;border-radius:8px;transition:.2s;white-space:nowrap}
.navlink:hover{color:var(--cy);background:rgba(0,242,254,.08)}
.clockstrip{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:0;
  font-family:'Space Grotesk',monospace;font-size:.7rem;letter-spacing:.1em;font-weight:700;
  padding:12px 20px;border-radius:11px;color:#031018;background:linear-gradient(120deg,var(--cy),var(--cy2));
  box-shadow:0 0 20px rgba(0,242,254,.26);transition:.25s}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn.green{background:linear-gradient(120deg,var(--em),var(--cy))}
.btn.purple{background:linear-gradient(120deg,var(--pu),var(--pu2));color:#fff;box-shadow:0 0 20px rgba(127,0,255,.3)}
.btn.gold{background:linear-gradient(120deg,var(--gold),#FF9F1A)}
.btn.ghost{background:transparent;color:var(--cy);border:1px solid rgba(0,242,254,.4);box-shadow:none}
.btn.ghost:hover{background:rgba(0,242,254,.08)}
.btn.wide{width:100%}

/* ---------- video room ---------- */
.room{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--glass-line);background:#04060E}
.room-stage{position:relative;aspect-ratio:16/9;min-height:280px;background:
  radial-gradient(ellipse at 50% 120%,rgba(0,242,254,.08),transparent 60%),#04060E}
.room-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;text-align:center}
.room-grid{position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(rgba(0,242,254,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,242,254,.07) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask:radial-gradient(ellipse at 50% 50%,#000,transparent 78%);mask:radial-gradient(ellipse at 50% 50%,#000,transparent 78%)}
.room-ring{width:82px;height:82px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  border:2px solid rgba(0,242,254,.45);box-shadow:0 0 30px rgba(0,242,254,.22)}
.room-ring::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(225,0,255,.45);animation:spin 12s linear infinite}
.room-ring::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--cy);animation:spin 2.4s linear infinite}
.room-name{font-family:'Space Grotesk',monospace;font-size:.66rem;letter-spacing:.18em;color:var(--cy)}
.room-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--glass-line);background:rgba(4,8,18,.6)}

/* ---------- lists ---------- */
.row{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:12px;
  border:1px solid var(--glass-line);background:rgba(4,8,18,.5);transition:.25s}
.row:hover{border-color:rgba(0,242,254,.4);background:rgba(0,242,254,.05)}
.row .ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:rgba(0,242,254,.1);border:1px solid rgba(0,242,254,.28)}
.row .ic.g{background:rgba(0,255,157,.1);border-color:rgba(0,255,157,.3)}
.row .ic.p{background:rgba(127,0,255,.12);border-color:rgba(225,0,255,.3)}
.row .ic.a{background:rgba(255,210,92,.1);border-color:rgba(255,210,92,.3)}
.row .t{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.row .s{display:block;font-size:.76rem;color:var(--mut);margin-top:3px;line-height:1.5}
.row .act{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.stack{display:grid;gap:10px}

/* meeting card */
.meet{display:grid;gap:4px;padding:15px;border-radius:12px;border:1px solid var(--glass-line);background:rgba(4,8,18,.5);position:relative;overflow:hidden}
.meet.live{border-color:rgba(0,255,157,.45);background:rgba(0,255,157,.06)}
.meet .when{font-family:'Space Grotesk',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--cy)}
.meet.live .when{color:var(--em)}
.meet .ttl{font-size:.92rem;font-weight:600}
.meet .who{font-size:.76rem;color:var(--mut)}
.meet .bar2{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--cy),transparent);background-size:200% 100%;animation:flow 3s linear infinite;opacity:.6}
@keyframes flow{0%{background-position:-100% 0}100%{background-position:200% 0}}

/* countdown */
.count{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(1.5rem,4vw,2.2rem);
  background:linear-gradient(120deg,var(--cy),var(--cy2),var(--pu2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* form */
.inp{width:100%;padding:12px 14px;border-radius:11px;background:rgba(4,8,18,.75);border:1px solid var(--glass-line);
  color:var(--txt);font-family:'Inter',sans-serif;font-size:.86rem;transition:.25s}
.inp::placeholder{color:#5E6C84}
.inp:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 2px rgba(0,242,254,.16)}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:88px}
.fgrid{display:grid;gap:11px}
@media(min-width:640px){.fgrid.two{grid-template-columns:1fr 1fr}}

/* console */
.console{border-radius:12px;border:1px solid var(--glass-line);background:rgba(4,8,18,.72);overflow:hidden}
.console .head{display:flex;align-items:center;gap:8px;padding:8px 13px;border-bottom:1px solid var(--glass-line);
  font-family:'Space Grotesk',monospace;font-size:.6rem;letter-spacing:.14em;color:var(--cy);background:rgba(0,242,254,.05)}
.console .body{height:126px;overflow:hidden;padding:11px 13px;font-family:'Space Grotesk',monospace;font-size:.66rem;line-height:1.7;color:rgba(0,242,254,.85)}
.console .ln{white-space:nowrap;opacity:0;animation:appear .3s forwards}
@keyframes appear{to{opacity:1}}
.k{color:var(--pu2)}.n{color:var(--em)}.s{color:var(--gold)}

/* embed slot */
.slot{border:1px dashed rgba(139,154,180,.3);border-radius:14px;padding:26px 20px;text-align:center;color:#5E6C84;background:rgba(10,14,24,.4)}
.slot .lk{font-size:1.4rem;opacity:.6}
.embed{border-radius:14px;overflow:hidden;border:1px solid var(--glass-line);background:#fff;min-height:520px}
.embed iframe{width:100%;height:640px;border:0;display:block}

/* copy field */
.copy{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.copy .val{flex:1;min-width:200px;padding:11px 13px;border-radius:10px;background:rgba(4,8,18,.8);
  border:1px solid var(--glass-line);font-family:'Space Grotesk',monospace;font-size:.74rem;color:var(--cy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
  .reveal{opacity:1!important;transform:none!important}
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#080C14}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cy),var(--pu));border-radius:9px}

/* ============================================================
   LIVE CALENDAR EMBED
   ============================================================ */
.calwrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--glass-line);
  background:rgba(4,8,18,.72);box-shadow:0 0 30px rgba(0,242,254,.1)}
.calbar{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--glass-line);
  background:rgba(0,242,254,.05)}
.calframe{position:relative;background:#070A11}
.calframe iframe{display:block;width:100%;height:520px;border:0;background:#070A11}
.calcnr{position:absolute;width:20px;height:20px;pointer-events:none;z-index:3;opacity:.75}
.calcnr.tl{top:8px;left:8px;border-top:2px solid var(--cy);border-left:2px solid var(--cy)}
.calcnr.tr{top:8px;right:8px;border-top:2px solid var(--pu2);border-right:2px solid var(--pu2)}
.calcnr.bl{bottom:8px;left:8px;border-bottom:2px solid var(--pu2);border-left:2px solid var(--pu2)}
.calcnr.br{bottom:8px;right:8px;border-bottom:2px solid var(--cy);border-right:2px solid var(--cy)}

/* whatsapp message preview */
.preview{margin-top:12px;padding:14px 16px;border-radius:11px;white-space:pre-wrap;line-height:1.65;
  font-size:.76rem;color:#DCE7F6;background:rgba(0,255,157,.05);border:1px solid rgba(0,255,157,.25)}

@media(max-width:768px){
  .calframe iframe{height:460px}
}

/* room stage is now a launcher, not an embed */
.room-stage{cursor:default}
.room-idle{position:absolute;inset:0}

/* in-page call embed */
.room-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;background:#04060E}
.room-stage.in-call{aspect-ratio:16/9;min-height:420px}
@media(max-width:768px){ .room-stage.in-call{min-height:330px} }

/* ============================================================
   NEXUS LIVE — in-page WebRTC call surface
   ============================================================ */
.call{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--glass-line);background:#04060E}
.call-stage{position:relative;min-height:340px;background:
  radial-gradient(ellipse at 50% 120%,rgba(0,242,254,.07),transparent 62%),#04060E;
  display:flex;align-items:center;justify-content:center;padding:22px}
.call-grid-bg{position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:linear-gradient(rgba(0,242,254,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,242,254,.07) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask:radial-gradient(ellipse at 50% 50%,#000,transparent 78%);mask:radial-gradient(ellipse at 50% 50%,#000,transparent 78%)}

/* entry choices */
.call-entry{position:relative;z-index:3;width:100%;max-width:620px;display:grid;gap:14px}
.call-ring{width:76px;height:76px;margin:0 auto 6px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
  font-size:1.55rem;border:2px solid rgba(0,242,254,.45);box-shadow:0 0 30px rgba(0,242,254,.2)}
.call-ring::before{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(225,0,255,.45);animation:spin 13s linear infinite}
.call-ring::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--cy);animation:spin 2.6s linear infinite}
.call-split{display:grid;gap:12px}
@media(min-width:700px){.call-split{grid-template-columns:1fr auto 1fr;align-items:start}}
.call-or{display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',monospace;font-size:.58rem;
  letter-spacing:.18em;color:#5E6C84;padding:6px 0}
.call-card{padding:16px;border-radius:13px;border:1px solid var(--glass-line);background:rgba(4,8,18,.6)}
.call-card h4{font-family:'Space Grotesk',monospace;font-size:.6rem;letter-spacing:.16em;color:var(--cy);margin:0 0 10px}
.call-card.host h4{color:var(--gold)}

/* video tiles */
.tiles{position:relative;z-index:3;width:100%;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.tiles.multi{grid-template-columns:1fr 1fr}}
.tile{position:relative;border-radius:13px;overflow:hidden;background:#070A11;border:1px solid rgba(0,242,254,.28);aspect-ratio:16/10}
.tile video{width:100%;height:100%;object-fit:cover;display:block;background:#070A11}
.tile .tag{position:absolute;bottom:8px;left:8px;z-index:3;font-family:'Space Grotesk',monospace;font-size:.56rem;
  letter-spacing:.12em;color:#fff;padding:3px 9px;border-radius:9px;background:rgba(4,8,18,.72);border:1px solid rgba(0,242,254,.35)}
.tile.me .tag{border-color:rgba(0,255,157,.45);color:var(--em)}
.tile .cnr{position:absolute;width:14px;height:14px;pointer-events:none;z-index:2;opacity:.7}
.tile .cnr.tl{top:7px;left:7px;border-top:2px solid var(--cy);border-left:2px solid var(--cy)}
.tile .cnr.br{bottom:7px;right:7px;border-bottom:2px solid var(--pu2);border-right:2px solid var(--pu2)}
.tile .muted{position:absolute;top:8px;right:8px;z-index:3;font-size:.8rem;opacity:.9}

/* control bar */
.call-ctl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--glass-line);background:rgba(4,8,18,.66)}
.cbtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,242,254,.35);background:rgba(4,8,18,.7);
  color:var(--txt);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.22s}
.cbtn:hover{border-color:var(--cy);box-shadow:0 0 16px rgba(0,242,254,.3)}
.cbtn.off{background:rgba(255,92,122,.16);border-color:rgba(255,92,122,.5)}
.cbtn.end{background:rgba(255,92,122,.2);border-color:rgba(255,92,122,.6)}
.cbtn.end:hover{background:var(--rose);color:#fff}
.roomtag{font-family:'Space Grotesk',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--cy);
  padding:7px 12px;border-radius:999px;border:1px solid rgba(0,242,254,.32);background:rgba(0,242,254,.06)}
.callmsg{font-family:'Space Grotesk',monospace;font-size:.66rem;letter-spacing:.08em;color:var(--mut);min-height:18px}
.callmsg.ok{color:var(--em)}.callmsg.err{color:var(--rose)}.callmsg.warn{color:var(--gold)}

/* external bridge steps */
.bridge-steps{display:grid;gap:16px}
@media(min-width:860px){.bridge-steps{grid-template-columns:repeat(3,1fr)}}
.bstep{display:flex;gap:13px;align-items:flex-start;padding:15px;border-radius:13px;
  border:1px solid var(--glass-line);background:rgba(4,8,18,.55)}
.bstep .bnum{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',monospace;font-size:.74rem;font-weight:700;color:#031018;
  background:linear-gradient(120deg,var(--pu2),var(--pu));color:#fff;box-shadow:0 0 14px rgba(127,0,255,.35)}
.bstep h4{font-family:'Space Grotesk',monospace;font-size:.62rem;letter-spacing:.16em;color:var(--pu2);margin:4px 0 6px}
.bstep p{color:var(--mut);font-size:.8rem;line-height:1.6;margin:0}

/* ------------------------------------------------------------------
   DOCUMENT VAULT
   The login screen's .vault is a 78px lock badge. The document grid
   needs its own class, or the cards stack inside that circle.
   ------------------------------------------------------------------ */
.docgrid{display:grid;gap:12px;grid-template-columns:1fr;width:100%;margin:0}
@media(min-width:640px){.docgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.docgrid{grid-template-columns:repeat(3,1fr)}}
.vcard-b{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  width:100%;min-height:132px;padding:18px;border-radius:14px;cursor:pointer;text-align:left;
  border:1px solid rgba(0,242,254,.22);background:rgba(4,10,26,.55);color:var(--txt,#E8EEF8);
  font-family:inherit;transition:.24s}
.vcard-b:hover{border-color:rgba(0,242,254,.7);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.4)}
.vcard-b .vic{font-size:1.6rem;line-height:1;margin-bottom:3px}
.vcard-b b{font-size:.92rem;font-weight:700;line-height:1.35}
.vcard-b>span:not(.vic):not(.vlock){font-size:.79rem;color:var(--mut,#8B9AB4);line-height:1.55}
.vcard-b .vlock{margin-top:auto;font-family:'Space Grotesk',ui-monospace,monospace;font-size:.55rem;
  letter-spacing:.11em;color:#FFD25C;padding-top:8px}
@media(max-width:520px){
  .vcard-b{min-height:0;padding:15px}
  .vcard-b .vic{font-size:1.35rem}
}