:root {
  --bg:#101419; --panel:#151b22; --line:#38434f; --text:#edeff2;
  --muted:#9aa5b1; --blue:#acc4ef; --green:#a8f0ce;
}
html,body { background:var(--bg); }
[hidden] { display:none !important; }
body { padding:24px; }
#join-panel { width:100%; margin:0; border:0; border-radius:8px; padding:28px; box-shadow:none; }
#join-panel h1 { font-size:27px; letter-spacing:-1px; }
#join-panel h1 span { color:var(--green); }
#join-panel #code { font-size:23px; }
#join-form { gap:12px; }
#join-form button { color:var(--green); background:#101419; border-color:#668d7e; }
#join-form button:hover,#join-form button:focus-visible { background:#243a4e; border-color:var(--green); }
body.room-joined { padding:0; }
body.room-joined .panel.activity-shell { background:var(--bg); }
body.room-joined .session-toolbar { border-bottom:1px solid var(--line); background:#151b22; align-items:stretch; }
.academy-mark { flex:none; align-self:center; padding:0 18px; color:#d6e0e9; font-size:20px; font-weight:700; letter-spacing:-1px; }
.academy-mark span { color:var(--green); }
body.room-joined .session-tabs { position:static; padding:8px 0 0; min-height:51px; background:transparent; border:0; gap:4px; scrollbar-width:thin; }
body.room-joined .session-tab { min-width:0; padding:9px 18px; min-height:43px; background:transparent; border:1px solid transparent; border-bottom:0; font-size:12px; }
body.room-joined .session-tab[aria-selected=true] { top:0; color:var(--green); background:var(--bg); border-color:var(--line); box-shadow:0 2px var(--bg); }
body.room-joined .session-tab:hover { color:#fff; background:#202a35; }
body.room-joined .session-tab:focus-visible { outline:2px solid var(--green); outline-offset:-4px; }
#exit-training { margin:8px 12px; padding:5px 12px; min-height:34px; border-color:var(--line); font-size:11px; color:var(--muted); background:transparent; }
body.room-joined .session-tab-shell { height:auto; }
body.room-joined .session-tab-shell .session-tab { border-right:0; border-radius:4px 0 0; }
body.room-joined .session-tab-close { min-height:43px; border-color:transparent; background:transparent; }
body.room-joined .session-tab-shell:has([aria-selected=true]) .session-tab-close { top:0; color:var(--green); background:var(--bg); border-color:var(--line); }
body.room-joined .session-layout { min-height:calc(100dvh - var(--session-tabs-height,52px)); }
.academy-panel { min-width:0; height:calc(100dvh - var(--session-tabs-height,52px)); }
.terminal-panel { display:flex; flex-direction:column; background:#101419; }
.terminal-toolbar { display:flex; align-items:center; justify-content:space-between; flex:none; height:38px; padding:0 20px; border-bottom:1px solid #232e39; color:#b8c2cd; font-size:11px; }
#terminal-status { display:flex; align-items:center; gap:7px; color:#7f8a96; font-size:10px; }
#terminal-status::before { content:''; display:block; height:5px; width:5px; background:#707b87; border-radius:50%; }
#terminal-surface { flex:1; min-height:0; overflow:hidden; padding:16px 20px; }
#terminal-surface .xterm { height:100%; }
.unavailable-panel { display:grid; place-items:center; font-size:12px; color:var(--muted); }
body.room-joined .presentation-focus { background:#101419; }
body.room-joined .activity-head { font-size:11px; color:var(--muted); }
@media(max-width:780px) {
  .academy-mark { padding:0 10px; font-size:15px; }
  body.room-joined .session-tab { padding:9px 13px; min-height:43px; font-size:11px; }
  #exit-training { margin:8px 6px; padding:5px 8px; }
  #terminal-surface { padding:12px; }
}

.academy-auth { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; width:min(420px,calc(100vw - 40px)); padding:28px; font:inherit; }
.academy-auth::backdrop { background:#000b; }
.academy-auth h2 { margin:0 0 24px; font-size:21px; }
.academy-auth button { display:block; width:100%; margin-top:12px; font-size:13px; }
.academy-auth button:first-of-type { color:var(--green); border-color:#668d7e; }
.academy-auth [role=alert] { color:#f1b8ab; font-size:12px; }

.login-panel { width:min(420px,100%); margin:12vh auto 0; border:1px solid var(--line); border-radius:8px; padding:32px; box-shadow:none; }
.login-panel h1 { font-size:27px; letter-spacing:-1px; }
.login-panel h1 span { color:var(--green); }
.login-panel .academy-auth { border:0; padding:0; width:auto; }
.login-panel .academy-auth h2 { font-size:15px; color:var(--muted); margin:24px 0; font-weight:400; }
.signed-in-as { font-size:12px; overflow-wrap:anywhere; }
#switch-account { display:block; margin:18px auto 0; min-height:32px; font-size:11px; border:0; background:none; color:var(--muted); }

#join-course-dialog { padding:0; width:min(420px,calc(100vw - 32px)); color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; }
#join-course-dialog::backdrop { background:#000a; }
#cancel-join { margin-top:12px; width:100%; }
.account-actions { display:flex; align-items:center; gap:8px; padding:8px 12px; flex:none; }
.account-actions button { white-space:nowrap; min-height:34px; font-size:11px; padding:5px 10px; border-color:var(--line); }
.account-actions .signed-in-as { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-actions #exit-training { margin:0; }
.identity-status { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
@media(max-width:780px) {
  .account-actions { padding:8px 6px; gap:4px; }
  .account-actions button { padding:5px 7px; }
  .account-actions .signed-in-as { display:none; }
}