@font-face{font-family:CirceRounded;src:url('../public/exai-assets/circe-rounded-regular.otf')}@font-face{font-family:CirceRounded;src:url('../public/exai-assets/circe-rounded-bold.otf');font-weight:700}
:root{--student-blue:#3974f7;--student-blue-dark:#245fe0;--student-ink:#17191f;--student-muted:#777e8e;--student-placeholder:#626670;--student-line:#e1e7f0;--student-page:#f7f9fd;--student-radius-control:8px;--student-radius-card:10px}
html,body{margin:0}body{background:var(--student-page)!important;color:var(--student-ink)!important;font-family:CirceRounded,"Circe Rounded",Arial,sans-serif!important}
.shell,.app{height:100vh!important;min-height:0!important;overflow:hidden!important}.main-area,.main{height:100vh!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}.sidebar{position:sticky!important;top:0!important;align-self:flex-start!important;height:100vh!important;min-height:100vh!important;overflow:hidden!important}
.sidebar{flex:0 0 216px!important;width:216px!important;padding:28px 20px 24px!important;border-right:1px solid var(--student-line)!important;background:#fff!important}
.logo,.main-logo{display:block!important;width:76px!important;height:40px!important;margin:0 0 27px 7px!important;object-fit:contain}
.nav-label,.nav-heading{margin:0 0 10px!important;color:#a5a8ae!important;font-size:10px!important;font-weight:700!important;letter-spacing:.13em!important}
.nav,.sidebar nav{display:grid;gap:5px}.nav a,.nav-link{display:flex!important;align-items:center!important;gap:12px!important;height:43px!important;margin:0!important;padding:0 14px!important;border-radius:var(--student-radius-control)!important;color:#676973!important;font-size:13px!important;text-decoration:none!important;white-space:nowrap!important}
.nav a.active,.nav-link.active{background:#edf3ff!important;color:var(--student-blue-dark)!important;font-weight:700!important}.nav img,.nav-link img{width:20px!important;height:20px!important;object-fit:contain!important;filter:grayscale(1) brightness(.55)}.nav a.active img,.nav-link.active img{filter:brightness(0) saturate(100%) invert(42%) sepia(92%) saturate(2474%) hue-rotate(211deg) brightness(101%) contrast(94%)}.support{display:none!important}
.topbar{position:sticky!important;top:0!important;z-index:15!important;display:flex!important;align-items:center!important;gap:14px!important;height:66px!important;padding:0 38px!important;border-bottom:1px solid #eceff4!important;background:#fff!important}.school{display:none!important}.language,.lang{margin-left:auto!important}
.language,.lang{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;border:0!important;background:transparent!important;color:#666a74!important;font-size:11px!important}.profile,.user{display:flex!important;align-items:center!important;gap:8px!important;margin-left:0!important;border:0!important;background:transparent!important;color:#666a74!important;font-size:11px!important;font-weight:700!important}.profile img,.user img{width:32px!important;height:32px!important;border-radius:50%!important}
.content,.page-content{width:min(1050px,calc(100% - 64px))!important;margin-right:auto!important;margin-left:auto!important;padding:36px 0 70px!important}.heading h1,.page-heading h1{margin:0 0 7px!important;font-size:28px!important;line-height:1.18!important;letter-spacing:-.03em!important}.heading>p:last-child,.page-heading>div>p:last-child{margin:0!important;color:var(--student-muted)!important;font-size:13px!important}.eyebrow{margin:0 0 9px!important;color:var(--student-blue-dark)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.13em!important}
.search,.search-field{display:flex!important;align-items:center!important;gap:10px!important;height:44px!important;padding:0 14px!important;border:1px solid var(--student-line)!important;border-radius:var(--student-radius-control)!important;background:#fff!important}.search input,.search-field input{min-width:0!important;width:100%!important;height:42px!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:#626670!important;font-size:12px!important}.search input::placeholder,.search-field input::placeholder{color:var(--student-placeholder)!important;opacity:1}
.select-wrap,.subject-select{position:relative!important;height:44px!important}.select-wrap select,.subject-select select{width:100%!important;height:44px!important;padding:0 42px 0 14px!important;appearance:none!important;border:1px solid #d9e1ee!important;border-radius:var(--student-radius-control)!important;background:#fff!important;color:#626670!important;font-size:12px!important;line-height:44px!important;box-shadow:none!important}.select-wrap select:hover,.subject-select select:hover{border-color:#bdcae0!important}.select-wrap select:focus,.subject-select select:focus{border-color:var(--student-blue)!important;outline:3px solid #e7efff!important}.select-wrap svg,.subject-select svg{position:absolute!important;right:14px!important;top:50%!important;width:16px!important;height:16px!important;transform:translateY(-50%)!important;pointer-events:none!important;fill:none!important;stroke:#6f7580!important;stroke-width:1.7!important}
@media(max-width:900px) and (min-width:651px){.sidebar{flex-basis:76px!important;width:76px!important;padding:24px 12px!important}.logo,.main-logo{content:url('../public/exai-assets/logo-mark.svg');width:44px!important;height:37px!important;margin:0 auto 30px!important}.nav-label,.nav-heading,.support span,.nav a,.nav-link{font-size:0!important}.nav a,.nav-link{justify-content:center!important;width:44px!important;height:44px!important;margin:0 auto!important;padding:0!important;gap:0!important}.nav img,.nav-link img{width:22px!important;height:22px!important}.content,.page-content{width:calc(100% - 40px)!important}}
@media(max-width:650px){html,body{max-width:100%;overflow-x:hidden}.sidebar{position:sticky!important;top:0!important;z-index:16!important;width:100%!important;height:58px!important;min-height:58px!important;padding:7px 14px!important;display:flex!important;align-items:center!important;flex-direction:row!important;border-right:0!important;border-bottom:1px solid var(--student-line)!important}.logo,.main-logo{content:url('../public/exai-assets/logo-mark.svg');width:38px!important;height:32px!important;margin:0 10px 0 0!important}.nav-label,.nav-heading,.support{display:none!important}.nav,.sidebar nav{display:flex!important;gap:3px!important;margin:0!important}.nav a,.nav-link{justify-content:center!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;gap:0!important;font-size:0!important}.nav img,.nav-link img{width:21px!important;height:21px!important}.topbar{position:fixed!important;top:0!important;right:10px!important;z-index:17!important;height:58px!important;padding:0!important;background:transparent!important;border:0!important}.school,.profile span,.user span{display:none!important}.language,.lang{padding:7px 6px!important}.profile,.user{margin-left:3px!important}.content,.page-content{width:calc(100% - 32px)!important;padding:25px 0 45px!important}.heading h1,.page-heading h1{font-size:25px!important}}
@media(max-width:390px){.sidebar{padding-left:10px!important}.logo,.main-logo{width:34px!important;margin-right:5px!important}.nav a,.nav-link{width:38px!important;height:38px!important}.topbar{right:6px!important}.language,.lang{gap:4px!important;padding:6px 3px!important}.profile,.user{margin-left:1px!important}.profile img,.user img{width:28px!important;height:28px!important}}
.awaiting-note{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:34px!important;padding:1px 10px 0!important;border:1px solid #ead8c2!important;border-radius:7px!important;background:#fff8ef!important;color:#9a5d23!important;font-size:10px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important}.awaiting-note:before{content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#d58a43}
.assistance-note{display:inline-flex;width:max-content;margin-top:6px;padding:4px 7px;border-radius:6px;background:#eef4ff;color:#315baf;font-size:10px;font-weight:700}
.select-wrap>select,.subject-select>select,.select-wrap>svg,.subject-select>svg{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.ds-select{position:relative;width:100%;height:44px}.ds-select-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:44px;padding:0 13px 0 14px;border:1px solid #d9e1ee;border-radius:8px;background:#fff;color:#626670;font-size:12px;text-align:left;box-shadow:none}.ds-select-button:hover{border-color:#bdcae0}.ds-select.open .ds-select-button,.ds-select-button:focus-visible{border-color:var(--student-blue);outline:3px solid #e7efff}.ds-select-chevron{flex:0 0 auto;width:8px;height:8px;border-right:1.7px solid #6f7580;border-bottom:1.7px solid #6f7580;transform:rotate(45deg) translateY(-2px);transition:.15s}.ds-select.open .ds-select-chevron{transform:rotate(225deg) translate(-2px,-1px)}.ds-select-menu{position:absolute;top:calc(100% + 7px);right:0;left:0;z-index:40;display:none;min-width:max-content;padding:6px;border:1px solid #dfe5ef;border-radius:10px;background:#fff;box-shadow:0 14px 36px rgba(28,41,74,.14)}.ds-select.open .ds-select-menu{display:grid}.ds-select-option{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;padding:0 10px;border:0;border-radius:7px;background:#fff;color:#5f6672;font-size:11px;text-align:left;white-space:nowrap}.ds-select-option:hover{background:#f5f8ff}.ds-select-option[aria-selected=true]{background:#edf3ff;color:var(--student-blue-dark);font-weight:700}.ds-select-option[aria-selected=true]:after{content:'✓';font-size:11px}.ds-language{width:108px}.ds-language .ds-select-button{height:36px;border-color:transparent;background:transparent}.ds-language .ds-select-menu{left:auto;min-width:138px}.topbar .ds-language{margin-left:auto}
@media(max-width:650px){.shell,.app{display:block!important;height:100vh!important}.main-area,.main{height:calc(100vh - 58px)!important;overflow-y:auto!important}.ds-language{width:82px}.ds-language .ds-select-button{height:42px;padding:0 8px;border:0;background:transparent}.ds-language .ds-select-menu{top:48px;right:0}.topbar{pointer-events:none}.topbar .ds-language,.topbar .profile,.topbar .user{pointer-events:auto}}
@media(max-width:650px){.ds-language{width:54px}.ds-language .ds-select-button{justify-content:center;gap:8px}.ds-language .ds-select-button>span:first-child{font-size:0;line-height:1;white-space:nowrap}.ds-language .ds-select-button>span:first-child:after{content:attr(data-short-label);font-size:11px}.ds-language .ds-select-menu{min-width:138px}}
/* Final responsive safeguards shared by every student surface. */
*,*:before,*:after{box-sizing:border-box}.content>*{max-width:100%}.toolbar,.filters,.filter-bar,.subject-toolbar{min-width:0!important}.search,.search-field{min-width:0!important}.select-wrap,.subject-select{min-width:0!important}.audio-card,.audio-row,.wave,.feedback-panel,.question-card{min-width:0;max-width:100%}.audio-row{overflow:hidden}.wave{overflow:hidden;flex:1 1 auto}.wave>*{max-width:100%}
@media(max-width:650px){.toolbar,.filters,.filter-bar,.subject-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(120px,38%)!important;gap:10px!important}.toolbar .search,.filters .search,.filter-bar .search{width:auto!important}.toolbar .select-wrap,.filters .select-wrap,.filter-bar .select-wrap,.subject-toolbar .select-wrap{width:auto!important}.ds-select-menu{min-width:100%;max-width:min(260px,calc(100vw - 32px))}.audio-card,.audio-row{width:100%!important}.audio-row{gap:8px!important;padding-right:10px!important;padding-left:10px!important}.wave{width:auto!important}}
@media(max-width:390px){.ds-language{width:48px}.ds-language .ds-select-button{font-size:10px;padding-inline:5px}.toolbar,.filters,.filter-bar,.subject-toolbar{grid-template-columns:minmax(0,1fr) 124px!important}}
.insight-actions{display:flex;justify-content:flex-end;gap:9px;margin:-35px 0 18px}.insight-actions a,.secondary-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border:1px solid #cbd9f5;border-radius:8px;background:#fff;color:var(--student-blue-dark);font-size:11px;font-weight:700;text-decoration:none}.insight-actions a:hover,.secondary-action:hover{background:#f2f6ff}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.detail-card,.detail-panel{padding:20px;border:1px solid var(--student-line);border-radius:var(--student-radius-card);background:#fff}.detail-card small{color:var(--student-muted);font-size:10px;font-weight:700;letter-spacing:.08em}.detail-card b{display:block;margin:7px 0 3px;font-size:26px}.detail-card p,.detail-panel p{margin:0;color:var(--student-muted);font-size:12px}.detail-panel{margin-top:14px}.detail-panel h2{margin:0 0 15px;font-size:18px}.detail-list{display:grid;gap:9px}.detail-row{display:grid;grid-template-columns:minmax(140px,1fr) 2fr auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid #edf0f5}.detail-row:first-child{border-top:0}.detail-row strong{font-size:13px}.detail-row span{color:var(--student-muted);font-size:11px}.detail-meter{height:7px;overflow:hidden;border-radius:20px;background:#edf0f5}.detail-meter i{display:block;height:100%;border-radius:inherit;background:var(--student-blue)}.saved-answer{margin-top:8px;padding:11px;border-radius:8px;background:#f7f9fd;color:#555d6c;font-size:11px}.empty-state{padding:36px 20px;text-align:center}.empty-state h3{margin:0 0 7px;font-size:17px}.empty-state p{max-width:430px;margin:0 auto 16px}.back-link{display:inline-flex;margin-bottom:18px;color:var(--student-blue-dark);font-size:12px;font-weight:700;text-decoration:none}
@media(max-width:650px){.insight-actions{justify-content:flex-start;margin:10px 0 18px;overflow-x:auto}.insight-actions a{white-space:nowrap}.detail-grid{grid-template-columns:1fr}.detail-row{grid-template-columns:1fr auto}.detail-row .detail-meter{grid-column:1/-1}.detail-panel{padding:16px}}

/* Backend performance view model: shared student/teacher rendering contract. */
.performance-trend-plot{display:flex;align-items:end;gap:clamp(10px,4vw,34px);height:190px;padding:20px 10px 0;border-bottom:1px solid #e4e9f1}.performance-trend-point{display:grid;grid-template-rows:auto 1fr auto;align-items:end;justify-items:center;gap:6px;min-width:36px;height:100%;color:#77808d;font-size:11px}.performance-trend-point>b{color:#3f4a5b;font-size:11px}.performance-trend-point>i{width:18px;height:var(--performance-value);min-height:2px;border-radius:5px 5px 0 0;background:#3974f7}.performance-radar-wrap{display:grid;place-items:center;min-height:280px}.performance-radar-wrap svg{width:min(100%,360px);overflow:visible}.performance-radar-current{fill:rgba(57,116,247,.14);stroke:#3974f7;stroke-width:3}.performance-radar-wrap text{fill:#4f5968;font:11px CirceRounded,"Circe Rounded",Arial,sans-serif}.performance-insights{margin:14px 0;padding:22px;border:1px solid #d9e5ff;border-radius:12px;background:#f8faff}.performance-insights>header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.performance-insights h2,.performance-insights h3{margin:0}.performance-insights header p,.performance-insights article p{margin:4px 0 0;color:#667286;line-height:1.5}.performance-insights .ai-insight-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:10px}.performance-insights article{padding:16px;border:1px solid #e1e7f0;border-radius:9px;background:#fff}.performance-insights article small{color:#6f7a8b;font-weight:700}.resource-state{padding:30px 20px;text-align:center}.resource-state h2{margin:0 0 7px}.resource-state p{margin:0 auto 14px;color:#737d8c}.resource-state button{min-height:38px;padding:0 15px;border:1px solid #cbd9f5;border-radius:8px;background:#fff;color:#245fe0;font-weight:700}.resource-state-error{border:1px solid #f0c9c9;border-radius:10px;background:#fff8f8}.teacher-table tr.click-row,.performance-assessment-results tr.click-row{cursor:pointer}
@media(max-width:760px){.performance-insights .ai-insight-grid{grid-template-columns:1fr}.performance-radar-wrap{min-height:240px}.performance-trend-plot{gap:10px;overflow-x:auto}.performance-trend-point{flex:0 0 42px}.teacher-student-overview{display:block}.teacher-student-overview>*+*{margin-top:14px}}
.trend-help{margin:6px 0 0!important;color:#858c98!important;font-size:9px!important}.trend-bars i{cursor:help}.trend-up{color:#2b8a57!important}.trend-down{color:#c95454!important}