:root{--paper:#f1f5fb;--navy:#101c3f;--ink:#17254b}
body{background:var(--paper);color:var(--ink)} main{max-width:1340px}header{padding:4px max(4vw,16px)}header img{width:min(225px,65vw)}h1{font-weight:800;letter-spacing:-.035em;margin:.6rem 0 1.2rem}h2{font-weight:750}section{box-shadow:0 6px 20px #1224410a}nav{padding:0 0 15px}nav span{font-weight:650}
.dash-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:20px;align-items:start}.dash-content{min-width:0}.dash-content>section:first-child{margin-top:0}.dash-menu{display:flex;flex-direction:column;gap:5px;background:white;border:1px solid var(--line);padding:10px;border-radius:16px}.dash-menu a{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;color:#263656}.dash-menu a:hover,.dash-menu a.selected{background:#e9e7ff;color:#4330a2}.dash-menu a.selected{font-weight:800}.dash-hero{background:linear-gradient(115deg,#202858,#4841a0);border-radius:18px;padding:25px;color:white;margin-bottom:16px}.dash-hero h2{font-size:clamp(1.35rem,3vw,2rem);color:white}.dash-hero p{margin:0;color:#e9e7ff}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:12px}.metric{border-radius:14px;padding:16px;display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}.metric span{font-weight:650;font-size:.9rem}.metric strong{font-size:clamp(1.05rem,2.4vw,1.55rem)}.metric.violet{background:#ede8ff;color:#452680}.metric.blue{background:#e4efff;color:#174d92}.metric.mint{background:#d7f8ed;color:#005f4d}.metric.amber{background:#fff0d4;color:#734a00}.status-pill{display:inline-block;border-radius:1rem;background:#e9ecfb;padding:3px 9px;font-size:.85rem;font-weight:700}.table{width:100%;text-align:left;border-collapse:collapse}.table-responsive{overflow-x:auto}.table th,.table td{padding:.7rem;border-bottom:1px solid var(--line);min-width:85px}.table td:last-child{min-width:155px}.action-row{display:flex;gap:12px;flex-wrap:wrap}
.auth-layout{max-width:850px;margin:24px auto;display:grid;grid-template-columns:1fr 1.15fr;gap:0;overflow:hidden;border-radius:22px;background:white;box-shadow:0 16px 44px #1424561a}.auth-layout section{margin:0;border:0;border-radius:0;padding:clamp(22px,5vw,46px)}.auth-art{display:grid;align-content:center;justify-items:center;gap:9px;padding:28px;background:linear-gradient(155deg,#101c3f,#42378e);color:white}.auth-art img{width:86px}.auth-art strong{font-size:1.65rem}.auth-art span{color:#dcd7fc}
@media(max-width:760px){.dash-layout,.auth-layout{grid-template-columns:minmax(0,1fr)}.dash-menu{flex-direction:row;overflow-x:auto}.dash-menu a{white-space:nowrap}.auth-art{padding:20px}.auth-art img{width:55px}}

/* Shared light surfaces and classroom navigation */
body{background:radial-gradient(ellipse at top right,#ebe7ff 0%,transparent 38%),#f5f7fc}
header{box-shadow:0 4px 20px #1526460a}
section{border-color:#e5e8f4;border-radius:20px;box-shadow:0 9px 30px #1925530b}
section>h2{display:flex;align-items:center;gap:10px}
section>h2::before{content:"";width:5px;height:1.12em;background:#6552ce;border-radius:6px;flex-shrink:0}
button{background:#4b3ba6;border-radius:10px}button:hover{background:#372781}
button:focus-visible,a:focus-visible{outline:3px solid #7f70eb;outline-offset:3px}
form input,form select,form textarea{border-color:#d7daeb;background:#fbfcff}
.metric{border:1px solid #ffffffa0;box-shadow:0 4px 18px #1925530b}
.dash-hero{background:linear-gradient(112deg,#332579,#5751bb 67%,#457ec5)}
.dash-menu a{border:1px solid transparent}
.dash-menu a.selected{border-color:#dad2ff}
.menu-toggle{display:none}
.context-menu{margin-bottom:16px}
.context-menu .dash-menu{flex-direction:row;flex-wrap:wrap}
.class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr));gap:14px;margin-bottom:16px}
.class-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px;border:1px solid #e5def8;border-radius:16px;background:linear-gradient(155deg,#f0ebff,#fff 70%);min-width:0}
.class-card:nth-child(3n+2){background:linear-gradient(155deg,#e5f8f5,#fff 70%);border-color:#d5eee8}
.class-card:nth-child(3n+3){background:linear-gradient(155deg,#e5efff,#fff 70%);border-color:#dce8fb}
.class-card h3{font-size:1.23rem;font-weight:780;margin:0}
.class-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#e5dcff;color:#49349b;font-size:1.4rem;font-weight:800;flex:none}
.class-hero{display:flex;justify-content:space-between;align-items:center;gap:16px}
.class-hero h2{margin-top:10px}.class-hero .class-mark{background:#ffffff30;color:white;width:58px;height:58px}
.class-tag{display:inline-block;background:#e8e1fd;color:#49358e;font-size:.82rem;font-weight:700;padding:4px 10px;border-radius:20px;overflow-wrap:anywhere}
.class-open,.class-shortcuts a{display:inline-flex;gap:12px;align-items:center;text-decoration:none;color:#433190;background:#ede7ff;border:1px solid #ded3fa;border-radius:10px;padding:9px 12px;min-height:44px}
.class-open{margin-top:auto}.class-open:hover,.class-shortcuts a:hover{background:#ded2ff}
.class-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
@media(max-width:760px){
 main{padding-inline:12px}
 .menu-toggle{display:flex;width:100%;align-items:center;gap:10px;justify-content:space-between}
 .menu-toggle + .dash-menu{display:none}
 .menu-toggle[aria-expanded=true] + .dash-menu{display:flex;flex-direction:column;margin-top:8px}
 .dash-layout{gap:12px}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metric{padding:12px}
 .table-responsive{-webkit-overflow-scrolling:touch}
}
@media(max-width:360px){.metric-grid{grid-template-columns:1fr}}
@media print{.context-menu,.class-shortcuts,.menu-shell{display:none}}

.sticky-workspace{position:sticky;top:0;z-index:1020;background:#f7f8ff;padding:8px 0 10px;border-bottom:1px solid #e1def1;margin-bottom:14px}
.sticky-workspace nav{padding:0 0 7px}
.sticky-workspace .dash-menu{flex-direction:row;flex-wrap:wrap;padding:4px;gap:3px}
.sticky-workspace .dash-menu a{padding:7px 11px}
.dash-layout{grid-template-columns:minmax(0,1fr)}
.curriculum-term{font-size:1rem;margin:16px 0 4px;color:#49358e}
@media(max-width:760px){
 .sticky-workspace .dash-menu{max-height:55vh;overflow:auto}
 .sticky-workspace .menu-toggle[aria-expanded=true] + .dash-menu{flex-direction:column;flex-wrap:nowrap}
}
@media print{.sticky-workspace{display:none}}

.account-bar{display:flex;align-items:center;gap:12px;padding:0 0 10px;min-width:0}
.account-bar strong{min-width:0;overflow-wrap:anywhere}
.dashboard-home{display:inline-flex;align-items:center;gap:8px;flex:none;border-radius:12px;padding:8px 13px;background:linear-gradient(120deg,#49349e,#3567b1);color:white;text-decoration:none;font-weight:750;box-shadow:0 4px 12px #49349e26}
.dashboard-home:hover{color:white;background:#39318e}
.dashboard-home span{font-size:1.2rem}
.account-signout{margin:0 0 0 auto;flex:none}
.account-signout button{width:44px;height:44px;padding:0;background:#eeeaff;color:#433190;font-size:1.3rem}
@media print{.account-bar{display:none}}

.workspace-header{position:sticky;top:0;z-index:1030;display:flex;align-items:center;gap:12px;padding:6px clamp(10px,2vw,28px);background:#fff}
.workspace-header .workspace-brand{flex:none}
.workspace-header img{width:clamp(120px,12vw,174px)}
.workspace-header .menu-shell{flex:1;min-width:0}
.workspace-header .dash-menu{flex-direction:row;align-items:center;gap:2px;padding:0;border:0;overflow-x:auto}
.workspace-header .dash-menu a{white-space:nowrap;padding:8px clamp(7px,.8vw,12px);font-size:.9rem}
.workspace-logout{margin:0 0 0 auto;flex:none}
.workspace-logout button{background:#b42334;padding:8px 13px}
.workspace-logout button:hover{background:#921828}
@media(max-width:980px){
 .workspace-header .menu-shell{flex:0 0 auto;margin-left:auto}
 .workspace-header .menu-toggle{display:flex;align-items:center;gap:6px;width:auto;padding:7px 10px}
 .workspace-header .menu-toggle + .dash-menu{display:none}
 .workspace-header .menu-toggle[aria-expanded=true] + .dash-menu{display:flex;position:absolute;top:100%;right:10px;left:10px;flex-direction:column;align-items:stretch;max-height:65vh;overflow:auto;padding:8px;border:1px solid var(--line);box-shadow:0 8px 20px #19255320}
 .workspace-logout{margin-left:0}
}
@media(max-width:360px){.workspace-header{gap:6px}.workspace-header img{width:110px}.workspace-header .menu-caption{display:none}}

.start-class{margin:14px 0;padding:14px;background:#e7f7ef;border-radius:14px}
.start-class summary{display:list-item;width:max-content;background:#08774e;color:white;font-weight:750;padding:10px 16px;border-radius:10px;cursor:pointer}
.media-options{display:grid;gap:9px}
.media-options label{display:flex;align-items:center;gap:9px}
.media-options input{width:auto}
#message-notice{background:#e9e7ff;border-radius:12px;padding:10px 14px;margin-bottom:12px}
.chat-contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}
#chat-thread article{white-space:pre-wrap}

.live-studio{background:#10182d;color:#f1f4fc;border-radius:18px;overflow:hidden;margin:16px 0}
.studio-top,.studio-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px}
.studio-top{background:#19243e}.studio-top #live-presence{margin-left:auto;font-size:.875rem;color:#d7deee}
.on-air{background:#bd2038;color:white;border-radius:7px;padding:4px 9px;font-size:.75rem;font-weight:800;letter-spacing:.07em}
.video-stage{position:relative;aspect-ratio:16/9;min-height:250px;background:radial-gradient(ellipse at center,#263451,#11192a 72%)}
.video-stage #media,.video-stage #stage-placeholder{position:absolute;inset:0}
#stage-placeholder{display:grid;place-content:center;text-align:center;gap:8px;padding:18px}
#stage-placeholder strong{font-size:clamp(1.25rem,4vw,2rem)}
#stage-placeholder span{color:#ccd6ed}
#media:not(:empty)+#stage-placeholder{display:none}
#media iframe{display:block;border:0}
.studio-actions button{background:#35466e}
.studio-actions #join-media{background:#08774e}
.end-session{margin-left:auto}.end-session form{margin:0}.end-session button{background:#b42334}
#media-feedback{margin:0;padding:0 14px 12px;color:#d7deee}
#media-feedback:empty{display:none}
@media(max-width:600px){.studio-top #live-presence{margin-left:0;width:100%}.video-stage{min-height:300px}}
.video-stage #media video{width:100%;height:100%;object-fit:contain;background:#10182d}
.video-stage #media[hidden]+#stage-placeholder{display:grid}
#stage-fullscreen{position:absolute;top:8px;right:8px;z-index:3;background:#19243e}
.video-stage:fullscreen,.video-stage.expanded{width:100vw;height:100dvh;aspect-ratio:auto}
.video-stage.expanded{position:fixed;inset:0;z-index:2000}
.video-stage #media video{object-fit:contain}
#video-stage.camera-off #stage-placeholder,#media.no-preview+#stage-placeholder{display:grid;pointer-events:none}
#video-stage.camera-off #stage-placeholder{background:#10182d}
#media video.guest-video{position:absolute;bottom:8px;right:8px;width:min(30%,220px);height:auto;z-index:2;border-radius:12px}
#discussion-panel{padding:10px 14px;background:#19243e}
#discussion-panel summary{cursor:pointer;font-weight:700}
#discussion{max-height:190px;overflow:auto;overflow-wrap:anywhere}
#class-clock{font-variant-numeric:tabular-nums;color:#ffdf9d}
.live-studio,.video-stage{width:100%;min-width:0;max-width:100%}
.video-stage{aspect-ratio:16/9;min-height:0;overflow:hidden}
.video-stage #media video{display:block;width:100%;height:100%;min-width:0;max-width:100%;object-fit:contain}
.video-stage:fullscreen,.video-stage.expanded{max-width:none}
#stage-alerts{position:absolute;z-index:4;bottom:8px;left:8px;right:8px;display:grid;gap:4px;pointer-events:none}
#stage-alerts>div{display:flex;min-width:0;max-width:100%;justify-self:start;pointer-events:auto}
#stage-alerts button{background:#202b49ec;padding:4px 8px;min-height:32px;text-align:left;font-size:.8rem}
#stage-alerts button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#stage-fullscreen{font-size:.8rem;min-height:36px;padding:5px 9px}
#direct-mic,#direct-camera,#share-screen,#move-overlay,#open-discussion{background:#4a3c88;min-width:44px;padding:8px}
#teaching-controls{margin-top:14px}
.live-invite{padding:18px;border-radius:16px;background:#9f1c32;color:white;margin-bottom:14px}
.live-invite h2{color:white;margin:8px 0}.live-invite a{display:inline-block;background:#08774e;color:white;border-radius:10px;padding:10px 16px;text-decoration:none}
#join-camera-option{display:flex;align-items:center;gap:6px;font-size:.85rem}
#join-camera-option input{width:auto}
.auth-art:has(.auth-logo){background:#f1f5ff}.auth-art img.auth-logo{width:min(100%,290px)}
#media video.guest-video{width:min(28%,220px);height:auto;max-height:28%;border:2px solid #8397d1}
#media video.guest-video:nth-of-type(3){right:31%}
#media video.guest-video:nth-of-type(4){right:61%}
.studio-actions button:has(svg){display:grid;justify-items:center;gap:3px;min-width:64px;font-size:.72rem;background:#354d7b}
.studio-actions #direct-camera{background:#514597}.studio-actions #share-screen{background:#176657}.studio-actions #open-discussion{background:#604380}
#media .guest-strip{position:absolute;top:8px;left:8px;right:110px;display:flex;gap:8px;overflow-x:auto;z-index:2}
#media .guest-strip:empty{display:none}
#media .guest-strip video.guest-video{position:static;flex:0 0 auto;width:clamp(70px,14vw,160px);max-height:none;aspect-ratio:16/9;background:#10182d}
#media video.rtc-camera-bubble{position:absolute;z-index:2;width:clamp(48px,17%,160px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid #fff;bottom:8px;right:8px;pointer-events:none}
#media video.rtc-camera-bubble[data-corner="0"],#media video.rtc-camera-bubble[data-corner="1"]{top:48px;bottom:auto}
#media video.rtc-camera-bubble[data-corner="0"],#media video.rtc-camera-bubble[data-corner="2"]{left:8px;right:auto}
.chat-badge{background:#a6193a;color:white;border-radius:99px;padding:1px 7px;margin-left:5px;font-size:.75rem}
.chat-conversation{padding:14px;background:#fff}
#chat-thread{height:clamp(240px,48vh,560px);overflow:auto;background:#edf4ef;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
#chat-thread article{max-width:82%;padding:8px 12px;border:0;border-radius:13px;background:white;align-self:flex-start}
#chat-thread .chat-out{background:#d2f5dc;align-self:flex-end}
#chat-thread small{text-align:right;font-size:.7rem}
.chat-conversation textarea{min-height:56px}
.resource-preview{width:100%;height:78vh;border:1px solid #dce3ef;border-radius:12px;background:#fff}
.resource-actions{display:inline-flex;gap:12px;margin-left:10px}
.chat-full{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:calc(100dvh - 105px);min-height:360px;margin:0;padding:0;overflow:hidden}
.conversation-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#075f50;color:white}
.conversation-bar a,.conversation-bar small{color:white}
.chat-full #chat-thread{height:auto;border-radius:0}
#chat-thread img{display:block;max-width:min(100%,340px);max-height:290px;object-fit:contain;border-radius:8px}
.chat-composer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;margin:0;background:#fff}
.chat-composer textarea{flex:1;min-width:80px;min-height:44px;resize:vertical;border-radius:22px}
.chat-composer button[type=submit]{background:#08774e;border-radius:50%;min-width:44px;padding:8px}
.chat-emoji{position:relative}.chat-emoji summary{cursor:pointer;font-size:1.5rem;list-style:none}
.chat-emoji>div{position:absolute;bottom:100%;left:0;width:184px;padding:6px;background:white;box-shadow:0 2px 16px #0002}
.chat-emoji button{min-height:36px;padding:5px;background:#edf4ef}
.chat-image-picker{position:relative;width:34px;place-items:center;cursor:pointer;font-size:1.4rem}
.chat-image-picker input{position:absolute;inset:0;opacity:0;cursor:pointer}
#chat-attachment,#chat-send-error{width:100%}#chat-attachment:empty,#chat-send-error:empty{display:none}
#message-notice{position:fixed;right:14px;bottom:14px;z-index:1040;margin:0;background:#075f50;color:white;box-shadow:0 6px 18px #0002}
#message-notice a{color:white}
.invoice-header,.invoice-parties{display:flex;justify-content:space-between;gap:18px;padding:16px}
.invoice-header{background:#eef3ff;border-radius:12px}.invoice-totals{display:grid;grid-template-columns:1fr auto;gap:6px;max-width:280px;margin-left:auto}
.invoice-totals dd{text-align:right}
.class-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.class-tabs a{background:#eef0fa;border-radius:9px;padding:9px 13px;text-decoration:none}
.class-tabs a[aria-current=page]{background:#49349e;color:white}
.chat-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#244b43;color:#fff;font-weight:750;flex:none}
.chat-full .conversation-bar{background:#10191c;flex-wrap:wrap}
.chat-full #chat-thread{background-color:#101b1f;background-image:radial-gradient(circle at 10px 10px,#ffffff12 1px,transparent 2px);background-size:25px 25px;color:#eef8f2}
.chat-full #chat-thread article{background:#263237;color:#f4faf6}
.chat-full #chat-thread article.chat-out{background:#145240}
.chat-full #chat-thread small{color:#c2d7cb}
.chat-full .chat-composer{background:#1c272b;color:white}
.chat-full .chat-composer textarea{background:#26363a;color:white;border-color:#42565a}
.chat-full .chat-composer textarea::placeholder{color:#becbc8}
@media(max-width:720px){
 main:has(.chat-full){padding:0}
 .chat-full{border-radius:0;height:var(--chat-height,100dvh);min-height:0}
 .chat-full .conversation-bar{padding:8px 12px;gap:9px}
 .chat-full .chat-composer{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}