/* Auth, dashboard, lobby — dark navy + gold. */
.appnav{position:sticky;top:0;z-index:40;background:rgba(10,18,48,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.appnav .container{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.appnav .brand{font-size:1.1rem;color:#fff;display:flex;align-items:center;gap:.5rem}
.appnav .who{display:flex;align-items:center;gap:.7rem;color:var(--ink-2);font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-weight:800;font-size:.9rem}

/* auth */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:820px){.auth-wrap{grid-template-columns:1fr}}
.auth-side{background:linear-gradient(160deg,#0C1738,#111F45);color:#fff;padding:3rem;display:flex;flex-direction:column;position:relative;overflow:hidden;border-right:1px solid var(--line)}
.auth-side::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(59,107,255,.35),transparent 60%);top:-140px;left:-100px;filter:blur(50px)}
.auth-side::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(246,198,81,.22),transparent 62%);bottom:-140px;right:-90px;filter:blur(50px)}
@media(max-width:820px){.auth-side{display:none}}
.auth-side .brand{position:relative}
.auth-illus{position:relative;margin:1.5rem auto;max-width:400px;width:100%}
.auth-side h2{font-size:1.8rem;position:relative}.auth-side ul{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.7rem;position:relative}
.auth-side li{display:flex;gap:.6rem;align-items:center;font-weight:500;color:var(--ink-2)}
.auth-side li b{color:var(--accent-2)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:2.5rem;background:var(--bg)}
.auth-card{width:min(400px,90vw)}
.auth-card .brand{margin-bottom:1.4rem;color:#fff}
.tabs{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:.25rem;margin-bottom:1.4rem}
.tabs a{flex:1;text-align:center;padding:.55rem;border-radius:9px;font-weight:700;color:var(--muted)}
.tabs a.active{background:var(--gold);color:var(--on-gold);box-shadow:var(--glow-gold)}

/* dashboard */
.dash{padding:2rem 0 4rem}
.dash-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}
.dash-head h1{font-size:1.9rem;margin:0;color:#fff}
/* auto-fit so a 5th tile (webinar) wraps gracefully instead of hardcoding a
   column count that has to be revised every time a tile is added/removed */
.actionbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}
@media(max-width:520px){.actionbar{grid-template-columns:1fr}}
.action.live{background:linear-gradient(135deg,#F43F5E,#F472B6)}
.action{display:flex;gap:.9rem;align-items:center;padding:1.2rem;border-radius:16px;cursor:pointer;color:#fff;font-weight:700;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .2s;border:1px solid transparent}
.action:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.action .ai{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.4rem;flex:0 0 46px}
.action.new{background:linear-gradient(135deg,#2E5BE6,#5B78FF)}
.action.webinar{background:linear-gradient(135deg,#7C3AED,#38D6F0)}
.action.join{background:linear-gradient(135deg,#111F45,#16264F);border-color:rgba(246,198,81,.35)}
.action.sched{background:linear-gradient(135deg,#E0A93A,#F6C651);color:var(--on-gold)}
.action.sched .ai{background:rgba(10,18,48,.18)}
.action small{display:block;font-weight:500;opacity:.9}

.tab-row{display:flex;gap:.5rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.tab-row button{background:none;border:none;padding:.7rem 1rem;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;font-size:.98rem}
.tab-row button.active{color:var(--accent-2);border-color:var(--accent)}

.mlist{display:grid;gap:.8rem}
.mrow{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);flex-wrap:wrap}
.mrow .mi{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center;font-size:1.2rem;flex:0 0 44px}
.mrow .mi.mi-live{background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(244,114,182,.10))}
.mrow .mi.mi-webinar{background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(56,214,240,.12))}
.mrow .meta{flex:1;min-width:180px}
.mrow .meta b{font-size:1.02rem;color:#fff}
.mrow .meta .sub{color:var(--muted);font-size:.86rem;display:flex;gap:.7rem;flex-wrap:wrap}
.mrow .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--accent-2)}
.mrow .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.empty{text-align:center;color:var(--muted);padding:2rem;border:1.5px dashed var(--line);border-radius:16px}
.empty img{width:180px;margin:0 auto 1rem}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(4,8,22,.66);backdrop-filter:blur(4px);z-index:200;display:grid;place-items:center;padding:1rem}
.modal{background:var(--card);border:1px solid var(--line);border-radius:20px;width:min(520px,94vw);max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);animation:rise .25s ease}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;color:#fff}.modal-body{padding:1.4rem}
.x{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1}
.switch{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line-soft);gap:1rem}
.switch:last-child{border:none}
.switch span{color:var(--ink-2)}
.toggle{position:relative;width:44px;height:24px;flex:0 0 44px}
.toggle input{opacity:0;width:0;height:0}
.toggle span{position:absolute;inset:0;background:#2a3b66;border-radius:999px;transition:.2s;cursor:pointer}
.toggle span::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+span{background:var(--accent)}
.toggle input:checked+span::before{transform:translateX(20px);background:var(--on-gold)}

/* lobby */
.lobby{min-height:100vh;background:radial-gradient(1200px 600px at 70% -10%,rgba(59,107,255,.25),transparent),linear-gradient(160deg,#0A1230,#0C1738);color:#fff;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.lobby-card{width:min(960px,96vw);display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:24px;padding:1.6rem;box-shadow:var(--shadow-lg)}
@media(max-width:800px){.lobby-card{grid-template-columns:1fr}}
.preview{position:relative;background:#060B1C;border-radius:18px;overflow:hidden;aspect-ratio:16/10;display:grid;place-items:center}
.preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.preview .off{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);text-align:center;gap:.5rem}
.preview .off .av{width:88px;height:88px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-size:2rem;font-weight:800}
.prev-ctrls{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:.6rem}
.cbtn{width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;font-size:1.2rem;display:grid;place-items:center;transition:.15s}
.cbtn:hover{background:rgba(255,255,255,.25)}
.cbtn.off{background:var(--rose,#F43F5E)}
.lobby-form h2{font-size:1.5rem;color:#fff}
.lobby-form .muted{color:var(--muted)}
.lobby-form label{color:var(--ink-2)}
.wait-panel{text-align:center;padding:1rem}
.wait-panel h2{color:#fff}
.wait-panel .spinner{width:34px;height:34px;margin:1rem auto}
.meta-muted{color:var(--muted);font-size:.9rem}