:root{--topbar-height:75px;--layer-content-popover:18;--layer-authoring:23;--layer-student-banner:24;--layer-topbar:28;--layer-mobile-sidebar:48;--layer-modal:3000;--layer-confirm:3200;--layer-toast:3300}
.sidebar{width:288px;flex-shrink:0;border-right:1px solid var(--border);background:var(--surface-1);height:100vh;overflow-y:auto;position:sticky;top:0;padding:1rem .75rem 3rem}
.sidebar .student-feature-link{position:relative;align-items:center;margin:.35rem 0 .7rem;padding:9px 10px;border:1px solid var(--accent-border);border-radius:8px;background:var(--accent-bg);color:var(--accent-text)}
.sidebar .student-feature-link:hover{padding-left:10px;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface-1))}
.sidebar .student-feature-link .nav-num{border-color:var(--accent-border);background:var(--surface-1);color:var(--accent)}
.sidebar .student-feature-link .nav-title{display:flex;min-width:0;flex-direction:column;gap:1px}.sidebar .student-feature-link .nav-title b{font-size:13px}.sidebar .student-feature-link .nav-title small{overflow:hidden;color:var(--text-muted);font-size:9.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.sidebar .student-feature-arrow{margin-left:auto;color:var(--accent);font-size:15px}.sidebar .student-feature-link.active .nav-title small{color:rgba(255,255,255,.78)}
.side-head{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding:1rem .6rem .35rem}
.side-head:first-child{padding-top:.25rem}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;color:var(--text-secondary);font-size:14px;text-decoration:none;transition:background .15s,color .15s,padding-left .15s,box-shadow .15s}
.nav-item:hover{background:var(--surface-2);padding-left:13px}
.nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}
.nav-item.active{background:var(--accent-bg);color:var(--accent-text);font-weight:500}
.nav-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);font-size:12px;flex-shrink:0}
.nav-item.active .nav-num{background:var(--accent);color:#fff;border-color:var(--accent)}
.nav-item.done .nav-num{background:var(--c-lift);color:#fff;border-color:var(--c-lift)}
.nav-title{flex:1;line-height:1.3}
.nav-check{color:var(--c-lift);font-size:16px}
.course-navigator-week-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px;min-width:0}
.course-navigator-week-link{min-width:0}
.course-navigator-week-link .nav-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-navigator-week-actions{display:inline-flex;align-items:center;gap:2px;padding-right:2px}
.course-navigator-week-action{display:inline-flex;width:28px;height:28px;flex:0 0 28px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface-1);color:var(--text-muted);font-size:15px;text-decoration:none;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease}
.course-navigator-week-action:hover{border-color:var(--accent-border);background:var(--accent-bg);color:var(--accent-text);transform:translateY(-1px)}
.course-navigator-week-action.active{border-color:var(--accent);background:var(--accent);color:#fff}
.course-navigator-week-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side-foot{margin-top:1.6rem;padding-top:.8rem;border-top:1px solid var(--border)}
.side-credit{padding:6px 10px 2px}
.side-author{font-size:13px;font-weight:500;color:var(--text-primary)}
.side-lic{font-size:12px;color:var(--text-secondary);margin-top:4px;display:flex;align-items:center;gap:5px}
.side-lic i{font-size:15px}

/* Admin workspace navigation */
.sidebar.admin-sidebar{display:flex;flex-direction:column;padding:0 .7rem 1rem;background-color:var(--surface-1);background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 3.5%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--accent) 3.5%,transparent) 1px,transparent 1px);background-size:24px 24px}
.sidebar[data-course-navigator]{display:flex;flex-direction:column;padding:0 .75rem 3rem;background-color:var(--surface-1);background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 3.5%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--accent) 3.5%,transparent) 1px,transparent 1px);background-size:24px 24px}
.sidebar[data-course-navigator]>.nav-home{margin-top:.55rem}
.admin-side-top{display:flex;align-items:center;gap:8px;padding:1rem .35rem .85rem;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-1) 92%,transparent)}
.admin-side-brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none;color:var(--text-primary);border-radius:8px;padding:4px}
.admin-side-brand:hover{background:color-mix(in srgb,var(--surface-2) 72%,transparent)}
.admin-side-mark{width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:20px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 25%,transparent)}
.admin-side-mark-logo{background:transparent;box-shadow:none;overflow:hidden;border-radius:50%}.admin-side-mark-logo img{display:block;width:100%;height:100%;object-fit:contain}
.admin-side-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.admin-side-copy small{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.admin-side-copy strong{font-size:15px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-side-close{display:none;width:34px;height:34px;padding:0;align-items:center;justify-content:center;background:transparent;border:0;color:var(--text-secondary);font-size:20px}
.admin-nav{display:block;padding:.35rem 0 .2rem}
.admin-nav-section{--admin-nav-color:var(--accent);margin:.38rem 0 .68rem;padding:3px;border:1px solid color-mix(in srgb,var(--admin-nav-color) 12%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--admin-nav-color) 4.5%,var(--surface-1));box-shadow:0 2px 8px color-mix(in srgb,var(--admin-nav-color) 5%,transparent);overflow:hidden;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.admin-nav-overview{--admin-nav-color:#2563B8}
.admin-nav-teaching{--admin-nav-color:#7654B3}
.admin-nav-communication{--admin-nav-color:#B65F20}
.admin-nav-insight{--admin-nav-color:#15806F}
.admin-nav-quality{--admin-nav-color:#A33A2B}
.admin-nav-course{--admin-nav-color:#8B6B16}
.admin-nav-global{--admin-nav-color:#5B4BA8}
.admin-nav-label{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:34px;padding:.42rem .56rem;border:0;border-radius:9px;background:color-mix(in srgb,var(--admin-nav-color) 5%,transparent);color:var(--text-muted);font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-align:left;text-transform:uppercase;line-height:1.2;cursor:pointer;transition:background .16s ease,color .16s ease}
.admin-nav-label:hover{background:color-mix(in srgb,var(--admin-nav-color) 10%,var(--surface-1));color:var(--admin-nav-color)}
.admin-nav-label:focus-visible{outline:2px solid var(--admin-nav-color);outline-offset:1px}
.admin-nav-label-copy{display:flex;align-items:center;gap:7px;min-width:0}
.admin-nav-label-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-nav-label-copy i{color:var(--admin-nav-color);font-size:15px}
.admin-nav-chevron{flex:0 0 auto;color:var(--admin-nav-color);font-size:14px;transition:transform .18s ease}
.admin-nav-links{max-height:520px;overflow:hidden;opacity:1;transition:max-height .24s ease,opacity .16s ease}
.admin-nav-section.is-collapsed{background:color-mix(in srgb,var(--admin-nav-color) 3%,var(--surface-1));box-shadow:none}
.admin-nav-section.is-collapsed .admin-nav-chevron{transform:rotate(-90deg)}
.admin-nav-section.is-collapsed .admin-nav-links{max-height:0;opacity:0;pointer-events:none}
.admin-sidebar .admin-nav .nav-item{position:relative;min-height:40px;margin:2px 0;padding:6px 8px;border:1px solid transparent;border-radius:8px;gap:9px;font-size:13.5px;font-weight:550;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s}
.admin-sidebar .admin-nav .nav-item:hover{padding-left:8px;background:color-mix(in srgb,var(--admin-nav-color) 9%,var(--surface-2));border-color:color-mix(in srgb,var(--admin-nav-color) 20%,var(--border));color:var(--text-primary);transform:translateX(2px)}
.admin-sidebar .admin-nav .nav-num{width:29px;height:29px;flex:0 0 29px;border:0;border-radius:7px;background:color-mix(in srgb,var(--admin-nav-color) 12%,var(--surface-2));color:var(--admin-nav-color);font-size:16px}
.admin-sidebar .admin-nav .nav-item.active{padding-left:8px;background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 26%,transparent);transform:none}
.admin-sidebar .admin-nav .nav-item.active .nav-num{background:rgba(255,255,255,.16);border:0;color:#fff}
.admin-sidebar .admin-nav .nav-item.active:hover{background:var(--accent);color:#fff;transform:none}
.admin-nav-active-dot{width:5px;height:5px;margin-left:auto;border-radius:50%;background:transparent;flex:0 0 5px}
.admin-sidebar .admin-nav .nav-item.active .admin-nav-active-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.admin-nav-section:has(.nav-item.active){border-color:color-mix(in srgb,var(--admin-nav-color) 28%,var(--border));background:color-mix(in srgb,var(--admin-nav-color) 7%,var(--surface-1));box-shadow:0 4px 12px color-mix(in srgb,var(--admin-nav-color) 8%,transparent)}
.admin-nav-section:has(.nav-item.active) .admin-nav-label{color:var(--admin-nav-color)}
.admin-sidebar .side-foot{margin-top:auto;padding:.75rem 0 0;border-top:1px solid var(--border)}
.admin-side-user{display:flex;align-items:center;gap:9px;margin:0 .25rem .55rem;padding:.25rem .35rem .55rem;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.admin-user-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--accent-text);font-size:12px;font-weight:800;letter-spacing:.02em}
.admin-side-user>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.admin-side-user strong{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-side-user small{font-size:10.5px;color:var(--text-muted)}
.admin-sidebar .side-foot .nav-item{min-height:36px;margin:1px 0;padding:5px 9px;border:1px solid transparent;border-radius:8px;font-size:12.5px}
.admin-sidebar .side-foot .nav-item:hover{padding-left:9px;background:var(--surface-2);border-color:var(--border)}
.admin-sidebar .side-foot .nav-num{width:25px;height:25px;border:0;border-radius:7px;background:var(--surface-2);font-size:14px}
.admin-sidebar .side-foot .admin-workspace-switch{align-items:center;min-height:48px}
.admin-workspace-switch .nav-title{display:flex;min-width:0;flex-direction:column;gap:2px;line-height:1.15}
.admin-workspace-switch .nav-title b,
.admin-workspace-switch .nav-title small{display:block;overflow:hidden;text-overflow:ellipsis}
.admin-workspace-switch .nav-title b{color:var(--text-primary);font-size:12.5px;white-space:nowrap}
.admin-workspace-switch .nav-title small{color:var(--text-muted);font-size:10.5px;font-weight:500;white-space:normal}
.admin-workspace-switch>i:last-child{flex:0 0 auto;margin-left:auto}
.admin-sidebar .side-foot .nav-item.active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent-text);box-shadow:none;font-weight:700}
.admin-sidebar .side-foot .nav-item.active .nav-num{background:var(--accent);color:#fff}
.admin-sidebar .admin-signout:hover{background:var(--danger-bg);border-color:color-mix(in srgb,var(--danger-text) 25%,var(--border));color:var(--danger-text)}
.admin-sidebar .admin-signout:hover .nav-num{background:var(--danger-bg);color:var(--danger-text)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:1.3rem 0}
.about-grid .card{margin:0}
.muted{color:var(--text-muted);font-size:14px;line-height:1.7}
.lic-badge{display:inline-flex;align-items:center;gap:5px;font-size:19px;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;margin:.7rem 0}
.lic-badge span{font-size:14px;font-weight:500;margin-left:6px}
.about-copy{margin:.3rem 0;color:var(--text-secondary)}
.about-copy p{margin:.45rem 0;line-height:1.7}
.about-copy ul{margin:.45rem 0;padding-left:1.2rem;line-height:1.8}

.content{container-name:app-content;container-type:inline-size;flex:1;min-width:0;max-width:100%;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--layer-topbar);display:flex;min-width:0;min-height:var(--topbar-height);align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.brand{display:flex;min-width:0;align-items:center;gap:11px}
.brand>div{min-width:0}
.brand>i{font-size:24px;color:var(--accent)}
.brand-title,.brand-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-title{font-weight:600;font-size:15px}
.brand-sub{font-size:12px;color:var(--text-secondary)}
.content-editing-marker,.editor-content-editing-marker{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--accent-bg) 78%,var(--surface-2));color:var(--accent-text);font-size:12px;font-weight:800;letter-spacing:.035em;white-space:nowrap}
.content-editing-marker{flex:0 0 auto;min-height:32px;padding:0 11px;text-transform:uppercase}
.content-editing-marker[hidden]{display:none}
.content-editing-marker i{font-size:16px}
.content-editing-marker>span,.editor-content-editing-marker>span{color:#b42318}
[data-content-editing] .topbar{border-bottom-color:var(--accent-border);box-shadow:inset 0 -2px 0 var(--accent-bg)}
.top-right{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:14px}
.icon-btn{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius);width:36px;height:36px;cursor:pointer;color:var(--text-secondary);font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn[hidden]{display:none}
.icon-btn:hover{background:var(--surface-1)}
.login-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42);backdrop-filter:blur(7px)}
.login-panel{position:relative;width:min(430px,100%);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:18px;padding:1.45rem;box-shadow:0 26px 90px rgba(0,0,0,.3)}
.login-close{position:absolute;right:14px;top:14px}
.login-mark{width:54px;height:54px;border-radius:16px;background:var(--accent-bg);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:1rem}
.login-copy h2{font-size:1.45rem;margin:0 2.4rem .25rem 0}
.login-copy p{margin:0 0 1.1rem;color:var(--text-secondary);line-height:1.55}
.login-form{display:flex;flex-direction:column;gap:.85rem}
.login-form label{display:flex;flex-direction:column;gap:.35rem;font-size:13px;font-weight:600;color:var(--text-secondary)}
.login-form input{height:42px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-1);color:var(--text-primary);padding:0 12px;font:inherit}
.login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);outline:none}
.login-password{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;align-items:center}
.login-password .icon-btn{width:42px;height:42px}
.login-captcha{border:1px solid var(--border);border-radius:12px;background:var(--surface-1);padding:.75rem}
.login-captcha[hidden]{display:none}
.login-captcha-title{display:flex;align-items:center;gap:7px;color:var(--text-secondary);font-size:13px;font-weight:600;margin-bottom:.6rem}
.login-captcha-title i{font-size:18px;color:var(--accent)}
.login-captcha-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.login-captcha-tile{height:62px;padding:5px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;display:flex;align-items:center;justify-content:center}
.login-captcha-tile svg{width:100%;height:100%;display:block}
.login-captcha-tile:hover{border-color:var(--accent-border);background:var(--accent-bg)}
.login-captcha-tile.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);background:var(--surface-2)}
.bau-login-captcha{background:rgba(255,255,255,.88);border-color:rgba(21,58,111,.22);box-shadow:0 12px 32px rgba(14,35,78,.08)}
.bau-login-captcha>small{display:block;margin-top:.55rem;color:var(--text-secondary);font-size:var(--type-help,13px)}
.login-message{min-height:22px;color:var(--danger-text);font-size:13px;line-height:1.45}
.login-submit{border:0;justify-content:center;width:100%;cursor:pointer}
.login-submit.btn-primary,.login-submit.btn-primary:hover,.login-submit.btn-primary:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
.login-submit.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.login-submit[disabled]{opacity:.62;cursor:not-allowed;transform:none;filter:none}
.login-submit[disabled]:hover{background:var(--accent);color:#fff;filter:none;transform:none}
.btn-danger{background:var(--danger-text);border-color:var(--danger-text);color:#fff}
.btn-danger:hover{background:var(--danger-text);filter:brightness(1.07)}
.confirm-modal{position:fixed;inset:0;z-index:var(--layer-confirm);display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.46);backdrop-filter:blur(6px)}
.confirm-panel{width:min(430px,100%);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.28);padding:1.1rem;display:grid;grid-template-columns:48px minmax(0,1fr);gap:.85rem}
.confirm-panel.wide{width:min(760px,100%)}
.confirm-icon{width:48px;height:48px;border-radius:14px;background:var(--warning-bg);color:var(--warning-text);display:flex;align-items:center;justify-content:center;font-size:25px}
.confirm-panel.notice .confirm-icon,.confirm-panel.prompt .confirm-icon{background:var(--accent-bg);color:var(--accent-text)}
.operation-feedback{position:fixed;right:22px;bottom:22px;z-index:var(--layer-toast);display:flex;align-items:flex-start;gap:10px;max-width:min(390px,calc(100vw - 32px));padding:12px 14px;border:1px solid var(--accent-border);border-radius:13px;background:var(--surface-2);box-shadow:0 16px 42px rgba(0,0,0,.22);color:var(--text-primary)}.operation-feedback[hidden]{display:none}.operation-feedback>i{margin-top:1px;color:var(--accent-text);font-size:22px}.operation-feedback>span{display:flex;flex-direction:column;gap:2px;min-width:0}.operation-feedback b{font-size:13px}.operation-feedback small{color:var(--text-secondary);font-size:12px;line-height:1.4}
.confirm-panel.danger .confirm-icon{background:var(--danger-bg);color:var(--danger-text)}
.confirm-copy h2{font-size:1.1rem;margin:0 0 .25rem}
.confirm-copy p{margin:0;color:var(--text-secondary);line-height:1.55}
.confirm-details{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0 0}.confirm-details>div{padding:8px 9px;border:1px solid var(--border);border-radius:7px;background:var(--surface-1)}.confirm-details dt{margin:0 0 2px;color:var(--text-primary);font-size:11px;font-weight:800}.confirm-details dd{margin:0;color:var(--text-muted);font-size:10.5px;line-height:1.35}
.confirm-input{grid-column:1/-1;display:flex;flex-direction:column;gap:.35rem;color:var(--text-secondary);font-size:13px;font-weight:700}
.confirm-input input{width:100%;height:44px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface-1);color:var(--text-primary);padding:0 12px;font:inherit}
.confirm-input input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.confirm-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:.55rem;margin-top:.25rem}
.confirm-actions button{min-width:112px;justify-content:center}
.login-foot{display:flex;gap:8px;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:12px;line-height:1.5}
.login-foot i{font-size:18px;color:var(--accent)}
.portal-locked{grid-template-columns:0 minmax(0,1fr)}
.portal-locked .sidebar{display:none}
.portal-locked .content{grid-column:1 / -1}
.portal-locked .topbar,.portal-locked .student-view-banner,.portal-locked .teaching-message-dock,.portal-locked .foot{display:none}
.portal-locked main{max-width:none;padding:0}
.portal-session-transition{--transition-blue:#0062ad;min-height:100svh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(circle at 50% 35%,rgba(99,199,239,.18),transparent 24rem),linear-gradient(145deg,#eef5fa,#fff 58%,#edf5fa)}
.portal-session-transition-card{display:flex;width:min(390px,100%);flex-direction:column;align-items:center;padding:2rem;border:1px solid #c9dce9;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(3,55,100,.14);text-align:center}
.portal-session-transition-card img{display:block;width:min(285px,82%);height:auto;margin-bottom:1.8rem}
.portal-session-transition-mark{display:grid;width:54px;height:54px;margin-bottom:1rem;place-items:center;border-radius:17px;color:#fff;background:var(--transition-blue);box-shadow:0 12px 25px rgba(0,98,173,.22);font-size:1.55rem}
.portal-session-transition-mark i{animation:portal-session-spin .85s linear infinite}
.portal-session-transition-card strong{color:#112538;font-size:1.14rem;letter-spacing:-.015em}
.portal-session-transition-card span{margin-top:.32rem;color:#657789;font-size:.82rem}
.portal-bootstrap-failure{min-height:100svh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(circle at 50% 35%,rgba(99,199,239,.18),transparent 24rem),linear-gradient(145deg,#eef5fa,#fff 58%,#edf5fa)}
.portal-bootstrap-failure>div{width:min(440px,100%);padding:2.25rem;border:1px solid #c9dce9;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(3,55,100,.14);text-align:center}.portal-bootstrap-failure>div>i{display:grid;width:54px;height:54px;margin:0 auto 1rem;place-items:center;border-radius:17px;color:#fff;background:#a7473f;font-size:1.55rem}.portal-bootstrap-failure span{display:block;color:#657789;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.portal-bootstrap-failure h1{margin:.5rem 0;color:#112538;font-size:1.35rem}.portal-bootstrap-failure p{margin:0 0 1.35rem;color:#657789}
@keyframes portal-session-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.portal-session-transition-mark i{animation-duration:1.8s}}
.portal-landing{max-width:1180px;margin:0 auto;padding:2rem 1.2rem 3rem}
.portal-hero{margin-bottom:1.2rem}
.portal-login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,2.5rem);background:radial-gradient(circle at 48% 0%,color-mix(in srgb,var(--accent-bg) 55%,transparent),transparent 34rem),var(--bg)}
.portal-login-card,.portal-auth-page .portal-login-card{width:min(390px,100%);margin:0 auto;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:14px;padding:1.15rem;box-shadow:0 18px 54px rgba(0,0,0,.12)}
.portal-login-compact .login-mark{width:42px;height:42px;border-radius:12px;font-size:23px;margin:0}
.portal-login-brand{display:flex;align-items:center;gap:.75rem;padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:1px solid var(--border)}
.portal-login-brand h1{font-size:17px;line-height:1.2;margin:0;font-weight:700}
.portal-login-brand p{font-size:12px;color:var(--text-secondary);margin:.15rem 0 0}
.portal-login-compact .login-copy h2{font-size:1.18rem;margin:0 0 .1rem}
.portal-login-compact .login-copy p{font-size:13px;margin:0 0 .8rem}
.portal-login-compact .login-form{gap:.7rem}
.portal-login-compact .login-form input{height:38px}
.portal-login-compact .login-password{grid-template-columns:minmax(0,1fr) 38px}
.portal-login-compact .login-password .icon-btn{width:38px;height:38px}
.portal-login-compact .login-submit{min-height:38px}
.portal-auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:var(--bg)}
.link-btn{border:0;background:transparent;color:var(--accent-text);font:inherit;font-weight:600;cursor:pointer;padding:.45rem .2rem;text-align:center}
.link-btn:hover{text-decoration:underline}
.portal-reset-link{align-self:center}

/* Teaching context switcher: Workspace > Course > Week, persistent in the topbar. */
.ctx-switch{display:flex;min-width:0;flex:0 1 auto;align-items:center;gap:2px;margin-left:10px;padding-left:12px;border-left:1px solid var(--border)}
.ctx-switch[hidden]{display:none}
.ctx-sep{flex:0 0 auto;font-size:13px;color:var(--text-muted);opacity:.75}
.ctx-chip{position:relative;display:flex;flex:0 0 auto;align-items:center;border-radius:999px}
.ctx-chip>a,.ctx-pick{display:flex;flex:0 0 auto;align-items:center;gap:6px;padding:5px 9px;border:0;border-radius:999px;background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer}
.ctx-chip>a i,.ctx-pick i{font-size:15px}
.ctx-chip>a:hover,.ctx-pick:hover{background:var(--accent-bg);color:var(--accent-text)}
.ctx-chip.active>a{background:var(--accent-bg);color:var(--accent-text)}
.ctx-caret{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:-4px;border:0;border-radius:999px;background:transparent;color:var(--text-muted);cursor:pointer}
.ctx-caret:hover,.ctx-caret[aria-expanded="true"]{background:var(--accent-bg);color:var(--accent-text)}
.ctx-pick{width:auto;height:auto;margin-left:0;padding:5px 9px;color:var(--text-secondary)}
.ctx-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:230;display:flex;flex-direction:column;gap:2px;min-width:264px;max-width:340px;max-height:min(430px,64vh);overflow:auto;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--bg);box-shadow:0 14px 34px rgba(15,23,42,.16)}
.ctx-menu[hidden]{display:none}
.ctx-opt{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--text-primary);text-decoration:none}
.ctx-opt-ic{flex:0 0 auto;align-self:center;display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;height:30px;min-height:30px;max-height:30px;border-radius:8px;background:var(--accent-bg);color:var(--accent-text);font-size:16px}
.ctx-opt-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.ctx-opt b{font-size:13px;font-weight:700}
.ctx-opt span{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-opt small{font-size:11px;color:var(--text-muted)}
.ctx-opt:hover{background:var(--accent-bg)}
.ctx-opt.current{background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent-border)}
.ctx-opt.current b{color:var(--accent-text)}
.ctx-empty{padding:9px 10px;font-size:12px;color:var(--text-muted)}
@media (max-width:980px){.ctx-switch{display:none}}
@container app-content (max-width:980px){.ctx-switch{display:none}}
.ctx-student-learning-primary:focus-visible,.ctx-student-learning .ctx-caret:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:980px){.ctx-switch[data-student-navigation]{display:flex;margin-left:0;padding-left:0;border-left:0}.ctx-switch[data-student-navigation] .ctx-chip>a{padding-left:6px;padding-right:6px;font-size:12px}.ctx-switch[data-student-navigation] .ctx-caret{width:24px;height:24px;margin-left:-2px}}
@container app-content (max-width:980px){.ctx-switch[data-student-navigation]{display:flex;margin-left:0;padding-left:0;border-left:0}.ctx-switch[data-student-navigation] .ctx-chip>a{padding-left:6px;padding-right:6px;font-size:12px}.ctx-switch[data-student-navigation] .ctx-caret{width:24px;height:24px;margin-left:-2px}}
.ctx-student>a{color:var(--accent-text)}
.ctx-student.active>a{background:var(--accent);color:#fff}
.student-view-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:9px 1.5rem;background:color-mix(in srgb,var(--accent) 14%,var(--bg));border-bottom:1px solid var(--accent-border);position:sticky;top:var(--topbar-height);z-index:var(--layer-student-banner)}
.student-view-banner[hidden]{display:none}
.student-view-note{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;color:var(--text-primary)}
.student-view-note i{font-size:17px;color:var(--accent-text)}
.student-view-note b{color:var(--accent-text);font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:12px;white-space:nowrap}
.student-view-exit{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.student-view-exit:hover{filter:brightness(1.08)}
.topbar .topbar-left{flex:1 1 auto;min-width:0}
.topbar .top-right{flex:0 0 auto}
.topbar .brand{flex:0 0 auto;max-width:46vw}
.user-menu{position:relative;flex:0 0 auto}
.user-avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--accent-border);background:var(--accent-bg);color:var(--accent-text);font-size:13px;font-weight:800;letter-spacing:.03em;cursor:pointer;padding:0}
.user-avatar:hover{filter:brightness(1.06)}
.user-avatar-lg{width:44px;height:44px;font-size:15px;cursor:default}
.user-avatar>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;border-radius:inherit}
.user-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:240;display:flex;flex-direction:column;gap:13px;width:292px;max-height:min(580px,80vh);overflow:auto;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--bg);box-shadow:0 18px 42px rgba(15,23,42,.18)}
.user-panel[hidden]{display:none}
.user-panel-head{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.user-panel-id{display:flex;flex-direction:column;min-width:0}
@media (max-width:860px){
  :root{--topbar-height:71px}
  .topbar .brand{display:none}
  .sidebar[data-course-navigator] .course-navigator-top .course-navigator-close{position:static;margin:0;border:0;background:transparent;backdrop-filter:none}
}
.user-panel-id b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-panel-id small{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-panel-links{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);padding-top:12px}
.user-panel-links .appr-opt{display:flex;align-items:center;gap:8px;text-decoration:none}
.ctx-menu-sep{display:block;height:1px;margin:4px 2px;background:var(--border)}
.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.roster-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent-bg);color:var(--accent-text);font-size:11px;font-weight:800;overflow:hidden;vertical-align:middle;margin-right:8px;flex:0 0 auto}
.roster-avatar img{width:100%;height:100%;object-fit:cover}
.student-column .roster-avatar{float:left;margin-top:2px}
.teaching-compact-table .platform-table th,.teaching-compact-table .platform-table td{padding:8px 10px;font-size:13px;white-space:normal}
.teaching-compact-table .platform-table td b,.teaching-compact-table .platform-table td strong{font-size:13px}
.teaching-compact-table .platform-table td small,.teaching-compact-table .platform-table td span{font-size:12px}
.ctx-opt>b{flex:0 0 auto;white-space:nowrap}
.ctx-opt>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teaching-compact-table .platform-table th,.teaching-compact-table .platform-table td{padding:6px 10px;font-size:12.5px;line-height:1.35;vertical-align:middle;white-space:normal}
.teaching-compact-table .platform-table th{font-size:10.5px;letter-spacing:.06em}
.teaching-compact-table .platform-table td b,.teaching-compact-table .platform-table td strong{font-size:12.5px}
.teaching-compact-table .platform-table td small,.teaching-compact-table .platform-table td span{font-size:11.5px}
.teaching-compact-table .platform-person{padding:3px 8px;gap:6px;font-size:11.5px;border-radius:8px}
.teaching-compact-table .platform-person i{font-size:13px}
.teaching-compact-table .platform-table-status span{padding:3px 9px;font-size:10px;letter-spacing:.05em}
.teaching-compact-table .platform-row-actions .icon-btn,.teaching-compact-table .platform-table-actions .icon-btn{width:26px;height:26px;min-height:0}
.teaching-compact-table .platform-section-head h2{font-size:17px}
.teaching-compact-table .platform-table{width:auto;min-width:0;max-width:100%}
.teaching-compact-table .platform-table-wrap{overflow-x:auto}
.teaching-compact-table .platform-table th:last-child,.teaching-compact-table .platform-table td:last-child{display:none}
.teaching-compact-table .platform-table tbody tr{cursor:pointer}
.teaching-compact-table .platform-table tbody tr:hover td{background:var(--accent-bg)}
/* The professor landing has no menu: every entry was either the page itself,
   already in the top bar, or a tool that only means anything inside a course. */
.shell-no-sidebar{grid-template-columns:0 minmax(0,1fr)}
.shell-no-sidebar .sidebar{display:none}
.shell-no-sidebar .content{grid-column:1 / -1}
.shell-no-sidebar #menuToggle{display:none}
/* The course navigation, as a bar. Six sections plus Setup, which sits apart
   because setting a course up is a different job from teaching it. */
.shell-tabs{
  position:sticky;
  top:var(--topbar-height);
  z-index:var(--layer-student-banner);
  display:flex;
  flex-direction:column;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.shell-tabs[hidden]{display:none}
.shell-tabs-bar{display:flex;align-items:stretch;gap:4px;padding:0 16px;overflow-x:auto;scroll-snap-type:x proximity}
.shell-tab{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 13px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:var(--text-secondary);
  font-size:13px;
  text-decoration:none;
  scroll-snap-align:start;
  cursor:pointer;
}
.shell-tab i{font-size:16px}
.shell-tab:hover{color:var(--text-primary)}
.shell-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:650}
.shell-tab-divider{align-self:center;flex:0 0 auto;width:1px;height:22px;margin:0 4px;background:var(--border-strong)}
.shell-tab-setup{margin-left:auto;color:var(--text-muted)}
.shell-tab-setup.active{color:var(--accent)}
.shell-tab-more{position:relative;display:inline-flex;flex:0 0 auto}
/* Fixed, not absolute: .shell-tabs-bar scrolls horizontally, and a non-visible
   overflow-x makes overflow-y compute to auto as well - which clipped this
   panel out of existence the moment it opened. Fixed positioning leaves that
   coordinate space; the toggle places it from the button's own rect. */
.shell-tab-menu-panel{
  position:fixed;
  z-index:calc(var(--layer-topbar) + 1);
  min-width:220px;
  padding:6px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface-2);
  box-shadow:0 12px 30px rgba(31,30,28,.14);
}
.shell-tab-menu-panel[hidden]{display:none}
.week-shell-sections .week-nav{display:none}
.shell-subtabs{display:flex;gap:4px;padding:7px 16px;overflow-x:auto;border-top:1px solid var(--border)}
/* display:flex above beats the browser default for [hidden], so every inactive
   section row would render. Only the current section's row may be visible. */
.shell-subtabs[hidden]{display:none}
.shell-subtab{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  color:var(--text-secondary);
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
}
.shell-subtab i{font-size:14px}
.shell-subtab:hover{background:var(--surface-1);color:var(--text-primary)}
.shell-subtab.active{background:var(--accent-bg);color:var(--accent-text);font-weight:650}
.shell-tab-menu-panel .shell-subtab{display:flex;border-radius:7px}
@media (max-width:640px){
  .shell-tabs-bar,.shell-subtabs{padding-left:10px;padding-right:10px}
  /* Keep every destination named on a phone. The old rule reduced inactive
     course tabs to icons, which made horizontal navigation hard to scan and
     left the icon glyph as the only visible cue. The bar already scrolls, so
     short text labels are the clearer compact treatment. */
  .shell-tab{gap:5px;padding:0 10px;font-size:12px}
  .shell-tab-divider{margin:0 2px}
  .shell-tab>span{display:inline}
  .shell-tab-setup{margin-left:0}
  .shell-tab-menu-panel .shell-subtab>span{display:inline}
}
/* Week chips in the student Weeks row: compact squares, the current one filled. */
.shell-week-chip{min-width:34px;justify-content:center;font-variant-numeric:tabular-nums}
.shell-week-chip.active{background:var(--accent);color:#fff;font-weight:700}
/* Career Pathways is the one shell action that is about the student rather
   than the course, so it is the one allowed to carry colour of its own. */
.topbar-career{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border:0;
  border-radius:999px;
  background:linear-gradient(120deg,var(--accent) 0%,#7654c6 100%);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 32%,transparent);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.topbar-career i{font-size:16px}
.topbar-career:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 42%,transparent)}
.topbar-career:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topbar-career[hidden]{display:none}
@media (max-width:900px){.topbar-career span{display:none}}
/* Section chips: a week's own parts, with the student's state on each. */
.shell-section-chip{gap:5px}
.shell-section-chip .shell-section-tick{color:var(--good-text,#1f7a45);font-size:13px}
.shell-section-chip.is-done:not(.active){color:var(--text-muted)}
.shell-section-chip .tab-waiting-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
}
.shell-section-chip.active .tab-waiting-badge{background:#fff;color:var(--accent-text)}
/* One save-status voice: unsaved is a fact in amber, saving spins in accent,
   saved flashes green and leaves. Sits under modals, above content. */
.save-status-chip{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:calc(var(--layer-modal) - 10);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border:1px solid transparent;
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(31,30,28,.18);
}
.save-status-chip[hidden]{display:none}
.save-status-chip.is-dirty{background:#8a6508;color:#fff}
.save-status-chip.is-dirty b{opacity:.8;font-weight:700}
.save-status-chip.is-saving{background:var(--accent);color:#fff}
.save-status-chip.is-saved{background:var(--good-text,#1f7a45);color:#fff}
.save-status-spin{animation:save-status-rotate 0.9s linear infinite}
@keyframes save-status-rotate{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.save-status-spin{animation:none}}