/* BAY Computer Lab 0.4.16 — KRUART visual convergence. Presentation only. */
:root{--kr-bg:#f6faff;--kr-card:#fff;--kr-soft:#f7fbff;--kr-blue-soft:#eef6ff;--kr-line:#dbe8f4;--kr-navy:#0b3d91;--kr-blue:#176de5;--kr-orange:#ff7a00;--kr-ink:#11325f;--kr-muted:#657d99;--kr-green:#18b98b;--kr-shadow:0 8px 24px rgba(20,61,117,.055);--kr-shadow-lg:0 18px 48px rgba(20,61,117,.11)}
html,body{background:var(--kr-bg)!important;color:var(--kr-ink)!important}
body{font-family:"Noto Sans Thai","Sarabun","Leelawadee UI",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:radial-gradient(circle at 6% 0,#e5f5ff 0,transparent 24rem),radial-gradient(circle at 96% 4%,#fff0df 0,transparent 22rem),var(--kr-bg)!important}
.topbar{min-height:76px!important;padding:7px clamp(16px,2.4vw,36px)!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid #e3edf6!important;box-shadow:0 3px 14px rgba(20,61,117,.04)!important;color:var(--kr-navy)!important}
.topbar .brand.brand-official>.product-logo{width:112px!important;height:60px!important;padding:0!important;background:transparent!important;border-radius:0!important}
.topbar .brand.brand-official>.school-lockup>small{color:#385b84!important;font-size:9px!important;line-height:1.3!important}
.main-nav,.topbar nav{height:61px!important;gap:2px!important}
.main-nav .nav-item,.topbar .nav{min-height:52px!important;padding:0 11px!important;border-radius:12px 12px 0 0!important;color:#183d70!important;background:transparent!important;font-size:12px!important;box-shadow:none!important}
.main-nav .nav-item img,.topbar .nav img{width:25px!important;height:25px!important;filter:none!important;opacity:1!important}
.main-nav .nav-item:hover,.topbar .nav:hover{background:#f5f9ff!important;color:var(--kr-navy)!important}
.main-nav .nav-item.active,.topbar .nav.active{background:transparent!important;color:var(--kr-navy)!important}
.main-nav .nav-item.active:after,.topbar .nav.active:after{display:block!important;content:""!important;position:absolute!important;left:10px!important;right:10px!important;bottom:-7px!important;height:3px!important;border-radius:99px!important;background:var(--kr-navy)!important}
.status-pill{border:1px solid #cde9df!important;background:#eef9f5!important;color:#16775b!important;padding:7px 10px!important}
.profile-button,.profile{color:var(--kr-navy)!important}.profile-button small,.profile small{color:#71849a!important}.profile-button strong,.profile strong{color:var(--kr-navy)!important}
.page-shell,.shell{width:min(calc(100% - 48px),1540px)!important;margin:14px auto 40px!important}
.panel,.content-section,.login-panel,.student-panel,.side-card,.quick,.stats article{background:#fff!important;border-color:var(--kr-line)!important;box-shadow:var(--kr-shadow)!important}
.section-kicker,.eyebrow,.kicker,.bay-product-eyebrow{color:var(--kr-orange)!important}
.section-heading h2,.panel-head h2,.panel-title h2{color:var(--kr-navy)!important}
.primary,.primary-button,.publish{background:linear-gradient(135deg,#ff7a00,#ff8d2d)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(255,122,0,.18)!important}
.secondary,.soft,.mini,.soft-button{background:#fff!important;color:var(--kr-navy)!important;border-color:var(--kr-line)!important}
/* Student launcher */
body:not(.teacher-ui) .login-view{gap:12px!important}
body:not(.teacher-ui) .login-hero{position:relative!important;min-height:326px!important;border:1px solid #cfe3f4!important;border-radius:24px!important;background:#dff4ff url("/assets/kruart-hero-final.webp") center/cover no-repeat!important;box-shadow:var(--kr-shadow-lg)!important}
body:not(.teacher-ui) .login-hero:after{display:none!important}
body:not(.teacher-ui) .login-hero .hero-copy{position:absolute!important;left:31%!important;top:18px!important;width:46%!important;padding:9px 13px 11px!important;border:0!important;border-radius:18px!important;background:rgba(255,255,255,.18)!important;box-shadow:none!important;text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 20px rgba(255,255,255,.92)!important}
body:not(.teacher-ui) .login-hero .hero-copy h1{margin:3px 0 6px!important;color:var(--kr-navy)!important;font-size:clamp(29px,2.9vw,43px)!important;line-height:1.06!important;letter-spacing:-.035em!important}
body:not(.teacher-ui) .login-hero .hero-copy p{max-width:520px!important;color:#55718f!important;font-size:11.5px!important;font-weight:700!important}
body:not(.teacher-ui) .login-hero .hero-note{margin-top:9px!important;border-color:#cfe1f3!important;background:rgba(255,255,255,.88)!important;color:#315577!important}
.login-panel{padding:16px!important;border-radius:20px!important}
.class-grid{gap:10px!important}.class-card{min-height:118px!important;border-radius:18px!important;border-color:#e1eaf3!important;box-shadow:0 7px 20px rgba(20,61,117,.06)!important;background:linear-gradient(145deg,#eef8ff,#fff 66%)!important}.class-card:nth-child(2n){background:linear-gradient(145deg,#fff5ea,#fff 66%)!important}.class-card:hover{border-color:#9fc8e8!important;box-shadow:0 14px 28px rgba(20,61,117,.10)!important}
.class-badge{background:linear-gradient(135deg,#176de5,#5fc8f5)!important;border-radius:15px!important}.class-card:nth-child(2n) .class-badge{background:linear-gradient(135deg,#ff7a00,#ff9a38)!important}
.student-card-select{border-radius:15px!important;border-color:#e1eaf3!important;box-shadow:0 5px 14px rgba(20,61,117,.045)!important}.student-card-select:hover{background:#f8fbff!important;border-color:#b8d5ed!important}
.student-card-select .avatar{background:linear-gradient(145deg,#eaf6ff,#fff0e3)!important;color:var(--kr-navy)!important}
.app-hero{min-height:300px!important;border:1px solid #cfe3f4!important;border-radius:24px!important;background:#f7dbea url("/assets/kruart-role-student-final.webp") center/cover no-repeat!important;box-shadow:var(--kr-shadow-lg)!important}
.app-hero:after{display:none!important}.student-dashboard .app-hero .hero-copy{position:absolute!important;left:51%!important;top:28px!important;width:43%!important;padding:18px 20px!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:20px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 30px rgba(20,61,117,.10)!important;text-shadow:none!important}
.student-dashboard .app-hero .hero-copy h1{color:var(--kr-navy)!important;font-size:clamp(31px,3vw,45px)!important}.student-dashboard .app-hero .hero-copy p{color:#55718f!important}.hero-cta{background:var(--kr-navy)!important;color:#fff!important;border-radius:13px!important;box-shadow:0 8px 18px rgba(11,61,145,.18)!important}
.program-card,.subject-card,.file-card{border-color:#e1eaf3!important;border-radius:15px!important;box-shadow:0 5px 14px rgba(20,61,117,.045)!important}.program-card:hover,.subject-card:hover,.file-card:hover{background:#f8fbff!important;border-color:#b8d5ed!important;box-shadow:0 12px 26px rgba(20,61,117,.08)!important}
.student-panel,.side-card{border-radius:18px!important}.student-avatar,.mini-avatar{background:#eaf6ff!important}.idea-card{background:linear-gradient(135deg,#e8f6ff,#fff2e4)!important}
/* Teacher Console launcher */
body.teacher-ui{padding-left:0!important}.teacher-ui .bay-pagebar{display:none!important}
@media(min-width:1181px){.teacher-ui .topbar{position:sticky!important;inset:auto!important;width:auto!important;height:76px!important;min-height:76px!important;padding:7px clamp(16px,2.4vw,36px)!important;display:grid!important;grid-template-columns:auto minmax(560px,1fr) auto!important;align-items:center!important;gap:22px!important;overflow:visible!important}.teacher-ui .topbar .brand{width:auto!important;min-width:max-content!important;padding:0!important;border-bottom:0!important}.teacher-ui .topbar nav{width:auto!important;height:61px!important;display:flex!important;gap:2px!important;align-items:stretch!important;justify-content:center!important}.teacher-ui .topbar nav:before{display:none!important}.teacher-ui .topbar .nav{width:auto!important;min-height:52px!important;padding:0 10px!important;justify-content:center!important;border-radius:12px 12px 0 0!important;color:#183d70!important;font-size:11px!important}.teacher-ui .profile{position:static!important;margin:0!important;width:auto!important;padding:4px 0 4px 8px!important;border:0!important;border-left:1px solid #e2ebf4!important;border-radius:0!important;background:#fff!important}.teacher-ui .avatar{background:#eaf6ff!important}.teacher-ui .logout{background:#fff!important;color:#657d99!important;border-color:#dbe8f4!important}}
.teacher-ui .top-grid{grid-template-columns:minmax(0,2.18fr) minmax(340px,.86fr)!important;gap:14px!important}
.teacher-ui .teacher-hero{min-height:326px!important;border:1px solid #cfe3f4!important;border-radius:24px!important;background:#dff4ff url("/assets/kruart-role-teacher-final.webp") center/cover no-repeat!important;box-shadow:var(--kr-shadow-lg)!important}
.teacher-ui .teacher-hero:before,.teacher-ui .teacher-hero:after{display:none!important}
.teacher-ui .teacher-hero .hero-copy{position:absolute!important;left:48%!important;top:34px!important;width:47%!important;padding:20px 22px!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:20px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 30px rgba(20,61,117,.10)!important}
.teacher-ui .teacher-hero h1{color:var(--kr-navy)!important;font-size:clamp(31px,3vw,44px)!important}.teacher-ui .teacher-hero p{color:#55718f!important;font-size:12px!important}.teacher-ui .hero-actions button{border-radius:13px!important}.teacher-ui .hero-actions .primary{background:var(--kr-navy)!important;box-shadow:0 8px 18px rgba(11,61,145,.18)!important}
.teacher-ui .quick{padding:14px!important;border-radius:20px!important}.teacher-ui .quick-grid button{min-height:68px!important;border-color:#e3edf6!important;border-radius:14px!important;background:#fff!important;color:var(--kr-navy)!important}.teacher-ui .quick-grid button:hover{background:#f8fbff!important;border-color:#b8d5ed!important}
.teacher-ui .stats{gap:9px!important;margin:11px 0 12px!important}.teacher-ui .stats article{min-height:78px!important;border-radius:16px!important}.teacher-ui .stats strong{color:var(--kr-navy)!important}
.teacher-ui .workspace{grid-template-columns:minmax(0,2.35fr) minmax(320px,.82fr)!important;gap:12px!important}.teacher-ui .panel{border-radius:18px!important;padding:15px!important}.teacher-ui .side-column{position:sticky!important;top:90px!important}.teacher-ui .flow-steps span{background:#f7fbff!important;border:1px solid #e3edf6!important;border-radius:12px!important;color:#5f7893!important}.teacher-ui .flow-steps b{background:#eef6ff!important;color:var(--kr-navy)!important}.teacher-ui .drop-zone{background:#f9fcff!important;border-color:#bfd8ed!important;color:var(--kr-navy)!important;border-radius:15px!important}.teacher-ui .file-row,.teacher-ui .website-row,.teacher-ui .app-card,.teacher-ui .device-card{border-color:#e3edf6!important;border-radius:13px!important}.teacher-ui .roster-card{background:linear-gradient(160deg,#fff,#eef9ff 70%,#fff4e8)!important;text-align:center!important}.teacher-ui .roster-illustration{display:grid!important}
.teacher-ui .preview-shell{border-radius:18px!important;background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.68)),url("/assets/kruart-role-student-final.webp")!important;background-position:center,center!important;background-size:auto,cover!important}
/* Admin + Teacher sign-in */
.admin-ui .admin-topbar{min-height:76px!important}.admin-ui .admin-shell{grid-template-columns:220px minmax(0,1fr)!important;min-height:calc(100vh - 76px)!important}.admin-ui .admin-sidebar{top:76px!important;height:calc(100vh - 76px)!important;padding:18px 12px!important;background:#fff!important;border-right:1px solid var(--kr-line)!important;box-shadow:8px 0 30px rgba(20,61,117,.035)!important}.admin-ui .admin-sidebar:before{content:"ADMIN WORKSPACE"!important;padding:5px 10px 8px!important;color:#71849a!important;font-size:8px!important;font-weight:900!important;letter-spacing:1px!important}.admin-ui .side-nav{min-height:47px!important;border-radius:12px!important;color:#5d7690!important;background:transparent!important;font-size:12px!important}.admin-ui .side-nav img{filter:none!important;opacity:1!important}.admin-ui .side-nav:hover,.admin-ui .side-nav.active{background:#eef6ff!important;color:var(--kr-navy)!important;box-shadow:none!important}.admin-ui .side-nav.active{box-shadow:inset 3px 0 0 var(--kr-blue)!important}.admin-ui .admin-main{width:min(1320px,calc(100% - 34px))!important}.admin-ui .admin-heading h1{color:var(--kr-navy)!important}.admin-ui .mode-badge{border-color:#cfe1f3!important;background:#eef6ff!important;color:var(--kr-navy)!important}.admin-ui .summary-card,.admin-ui .admin-card{border-color:var(--kr-line)!important;border-radius:18px!important;box-shadow:var(--kr-shadow)!important}.admin-ui .summary-card strong,.admin-ui .card-head h2,.admin-ui .version-compare strong,.admin-ui .recovery-box strong,.admin-ui .diag-list strong{color:var(--kr-navy)!important}.admin-ui .brand-preview>div,.admin-ui .version-compare>div,.admin-ui .diag-list>div{border-color:#e3edf6!important;background:#f8fbff!important}.admin-ui .recovery-box{border-color:#d8e8f5!important;background:linear-gradient(135deg,#e8f6ff,#fff2e4)!important}
.teacher-login-ui .login-shell{grid-template-columns:minmax(620px,1.2fr) minmax(410px,.8fr)!important;background:var(--kr-bg)!important}.teacher-login-ui .visual-panel{position:relative!important;padding:30px 36px!important;border-right:0!important;background:#dff4ff url("/assets/kruart-role-teacher-final.webp") center/cover no-repeat!important}.teacher-login-ui .visual-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 42%,rgba(255,255,255,.25) 74%,rgba(255,255,255,.55) 100%);pointer-events:none}.teacher-login-ui .visual-panel>.brand{position:relative;z-index:2}.teacher-login-ui .visual-panel .brand.brand-official{display:inline-flex!important;padding:7px 10px!important;border:1px solid rgba(255,255,255,.88)!important;border-radius:16px!important;background:rgba(255,255,255,.90)!important;box-shadow:0 8px 22px rgba(20,61,117,.08)!important}.teacher-login-ui .visual-panel .brand.brand-official>.product-logo{width:132px!important;height:82px!important;padding:0!important}.teacher-login-ui .visual-panel .brand.brand-official>.school-lockup>small{color:#385b84!important}.teacher-login-ui .visual-copy{position:absolute!important;left:47%!important;right:34px!important;top:35%!important;margin:0!important;padding:18px 20px!important;border:1px solid rgba(255,255,255,.90)!important;border-radius:20px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 30px rgba(20,61,117,.10)!important}.teacher-login-ui .visual-copy h1{margin:4px 0 8px!important;color:var(--kr-navy)!important;font-size:clamp(32px,3vw,46px)!important}.teacher-login-ui .visual-copy h1 em{color:var(--kr-orange)!important}.teacher-login-ui .visual-copy p{color:#55718f!important}.teacher-login-ui .scene{display:none!important}.teacher-login-ui .visual-foot{border-color:#dbe8f4!important;background:rgba(255,255,255,.92)!important;color:#516b84!important}.teacher-login-ui .form-panel{background:var(--kr-bg)!important}.teacher-login-ui .form-wrap{padding:28px!important;border:1px solid var(--kr-line)!important;border-radius:24px!important;background:#fff!important;box-shadow:var(--kr-shadow-lg)!important}.teacher-login-ui .form-wrap h2{color:var(--kr-navy)!important}.teacher-login-ui .badge{background:#eef6ff!important;color:var(--kr-navy)!important}.teacher-login-ui .submit{background:linear-gradient(135deg,#ff7a00,#ff8d2d)!important;border-radius:13px!important}.teacher-login-ui .field,.teacher-login-ui .secure-note{border-color:#dbe8f4!important;background:#f9fcff!important;border-radius:13px!important}
/* Responsive */
@media(max-width:1180px){.topbar{min-height:66px!important;padding:4px 14px!important}.main-nav,.topbar nav{height:44px!important;background:#fff!important}.main-nav .nav-item,.topbar .nav{min-height:42px!important}.page-shell,.shell{width:calc(100% - 20px)!important;margin-top:50px!important}.teacher-ui .top-grid,.teacher-ui .workspace{grid-template-columns:1fr!important}.teacher-ui .side-column{position:static!important}.admin-ui .admin-shell{grid-template-columns:74px minmax(0,1fr)!important}.admin-ui .admin-sidebar{top:66px!important;height:calc(100vh - 66px)!important}}
@media(max-width:760px){.topbar .brand.brand-official>.product-logo{width:82px!important;height:48px!important}.page-shell,.shell{width:calc(100% - 16px)!important}.login-hero{min-height:330px!important;background-position:center!important}.login-hero .hero-copy{left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important;padding:11px 13px!important;border:1px solid rgba(194,216,235,.82)!important;background:rgba(255,255,255,.945)!important;box-shadow:0 10px 26px rgba(20,61,117,.10)!important;text-shadow:none!important}.login-hero .hero-copy h1{font-size:28px!important}.login-hero .hero-copy p{font-size:11px!important}.app-hero{min-height:360px!important;background-position:28% center!important}.student-dashboard .app-hero .hero-copy{left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important;padding:13px 14px!important}.student-dashboard .app-hero .hero-copy h1{font-size:29px!important}.teacher-ui .teacher-hero{min-height:360px!important;background-position:28% center!important}.teacher-ui .teacher-hero .hero-copy{left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important;padding:13px 14px!important}.teacher-ui .teacher-hero h1{font-size:29px!important}.teacher-ui .quick{border-radius:18px!important}.admin-ui .admin-shell{display:block!important}.admin-ui .admin-sidebar{position:sticky!important;top:66px!important;height:auto!important;display:flex!important;overflow-x:auto!important;padding:7px!important;border-right:0!important;border-bottom:1px solid var(--kr-line)!important}.admin-ui .admin-sidebar:before{display:none!important}.admin-ui .side-nav{min-width:46px!important;font-size:0!important;justify-content:center!important}.teacher-login-ui .login-shell{grid-template-columns:1fr!important}.teacher-login-ui .visual-panel{display:none!important}.teacher-login-ui .form-panel{min-height:100vh!important;padding:20px 14px!important}.teacher-login-ui .form-wrap{padding:22px!important;border-radius:20px!important}}
@media(max-width:520px){.class-grid,.student-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.program-grid,.subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.file-grid{grid-template-columns:1fr!important}.teacher-ui .stats{grid-template-columns:repeat(2,1fr)!important}}
/* KRUART account chip fidelity */
.teacher-ui .profile .avatar{width:43px!important;height:43px!important;border-radius:50%!important;overflow:hidden!important;background:#eaf6ff!important}
.teacher-ui .profile .avatar img{width:48px!important;height:58px!important;object-fit:contain!important;transform:translateY(8px)!important}

/* 0.4.20 — final classroom UX polish after live AY-TEACHER visual review */
.topbar .brand.brand-official{gap:11px!important}.topbar .brand.brand-official>.product-logo{width:120px!important;height:64px!important}
.topbar .brand.brand-official>.school-lockup>img{width:31px!important;height:38px!important}.topbar .brand.brand-official>.school-lockup>small{font-size:10.5px!important;font-weight:800!important;line-height:1.35!important}
.teacher-ui .quick{display:flex!important;flex-direction:column!important;align-self:stretch!important}.teacher-ui .quick-grid{flex:1!important;grid-auto-rows:1fr!important;align-content:stretch!important}
.teacher-ui .quick-grid button{min-height:88px!important;padding:12px!important}.teacher-ui .quick-grid button strong{font-size:12.5px!important}.teacher-ui .quick-grid button small{font-size:10.5px!important;line-height:1.35!important}
.teacher-ui .stats article{padding:12px 14px!important;border-color:#e7eef5!important;box-shadow:0 7px 18px rgba(20,61,117,.045)!important}.teacher-ui .stats small,.teacher-ui .stats article div>span{font-size:10.5px!important}.teacher-ui .stats strong{font-size:24px!important}
.teacher-ui .panel{border-color:#e4edf5!important;box-shadow:0 8px 22px rgba(20,61,117,.045)!important}.teacher-ui .panel-head h2{font-size:20px!important}.teacher-ui .kicker{font-size:9.5px!important;letter-spacing:.02em!important}
.teacher-ui .lesson-form label{font-size:10.5px!important}.teacher-ui .lesson-form input,.teacher-ui .website-form input{height:43px!important;font-size:12.5px!important}.teacher-ui .soft{min-height:43px!important;font-size:11.5px!important}
.teacher-ui .drop-zone{min-height:92px!important}.teacher-ui .drop-zone strong{font-size:12.5px!important}.teacher-ui .drop-zone small{font-size:10.5px!important}.teacher-ui .file-row strong,.teacher-ui .website-row strong{font-size:11.5px!important}.teacher-ui .file-row small,.teacher-ui .website-row small{font-size:9.5px!important}
.teacher-ui .device-card{padding:11px!important}.teacher-ui .device-card strong{font-size:12.5px!important}.teacher-ui .device-card small{font-size:10px!important}.teacher-ui .device-note{font-size:9.5px!important}
.student-ui .class-card{min-height:126px!important;padding:14px!important}.student-ui .class-card strong{font-size:16px!important}.student-ui .class-card small{font-size:10.5px!important}.student-ui .student-card-select{min-height:88px!important}.student-ui .student-card-select strong{font-size:12.5px!important}.student-ui .student-card-select small{font-size:9.5px!important}
.student-ui .login-panel,.student-ui .content-section{border-color:#e4edf5!important;box-shadow:0 8px 22px rgba(20,61,117,.045)!important}.student-ui .section-heading h2{font-size:21px!important}.student-ui .section-kicker{font-size:10px!important}.student-ui button,.student-ui .class-card,.student-ui .student-card-select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(23,109,229,.24)!important;outline-offset:2px!important}
@media(max-width:1180px){.student-ui .page-shell{margin-top:12px!important}.teacher-ui .quick-grid button{min-height:76px!important}}
@media(max-width:760px){.topbar .brand.brand-official>.product-logo{width:88px!important;height:50px!important}.student-ui .login-hero{min-height:306px!important}.student-ui .class-card{min-height:108px!important;padding:12px!important}.student-ui .login-panel{padding:14px!important}.student-ui .section-heading h2{font-size:20px!important}.student-ui .number-dialog input{height:66px!important}.student-ui .primary-button{min-height:48px!important;font-size:14px!important}}
/* 0.4.21 — canonical Computer Lab identity */
.teacher-ui .teacher-hero{background-image:url("/assets/kruart-teacher-dashboard-final.webp")!important;background-position:center 48%!important;background-size:cover!important}
.teacher-ui .teacher-hero .hero-copy{left:56%!important;top:26px!important;width:40%!important;background:rgba(255,255,255,.93)!important;backdrop-filter:blur(7px)!important}
.teacher-ui .teacher-hero h1{font-size:clamp(30px,2.8vw,42px)!important}
.teacher-ui .teacher-hero p{font-size:12.5px!important;line-height:1.55!important}
@media(max-width:760px){.teacher-ui .teacher-hero{background-position:38% center!important}.teacher-ui .teacher-hero .hero-copy{left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important}}

/* 0.4.23 — KRUART exact composition authority */
:root{
  --kr-bg:#f5faff;--kr-card:#fff;--kr-soft:#f7fbff;--kr-blue-soft:#eaf5ff;
  --kr-line:#dbe8f4;--kr-navy:#0b3d91;--kr-blue:#176de5;--kr-orange:#ff7a00;
  --kr-ink:#11325f;--kr-muted:#657d99;--kr-green:#16855b;
  --kr-shadow:0 10px 28px rgba(20,61,117,.07);--kr-shadow-lg:0 22px 58px rgba(20,61,117,.14);
  --kr-r-sm:12px;--kr-r-md:16px;--kr-r-lg:22px;--kr-r-xl:30px;--kr-max:1240px;
}
body{background:var(--kr-bg)!important}
.page-shell,.shell{width:min(calc(100% - 48px),var(--kr-max))!important;margin:14px auto 34px!important}
.content-section,.login-panel,.student-panel,.side-card,.teacher-ui .panel,.teacher-ui .quick{border-color:var(--kr-line)!important;box-shadow:var(--kr-shadow)!important}

/* Student — same geometry language as kruart.online */
.student-ui .login-hero,.student-ui .app-hero{min-height:314px!important;border-radius:24px!important;box-shadow:0 8px 24px rgba(20,61,117,.09)!important;background:#dff4ff url('/assets/kruart-hero-final.webp') center/cover no-repeat!important}
.student-ui .login-hero .hero-copy,.student-ui .app-hero .hero-copy{left:31%!important;top:18px!important;width:46%!important;padding:7px 13px 9px!important;border:0!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;text-align:center!important;text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 20px rgba(255,255,255,.92)!important}
.student-ui .hero-copy h1{font-size:clamp(30px,2.55vw,40px)!important;line-height:1.06!important}
.student-ui .hero-copy p{margin-inline:auto!important;font-size:12px!important;line-height:1.45!important}
.student-ui .hero-cta{min-height:42px!important;padding:8px 16px!important;border-radius:13px!important;background:var(--kr-navy)!important}
.student-ui .student-dashboard{grid-template-columns:minmax(0,2.16fr) minmax(340px,.9fr)!important;gap:12px!important}
.student-ui .student-side-column{gap:0!important;padding:12px!important;border:1px solid #dfeaf4!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--kr-shadow)!important}
.student-ui .student-side-column>.student-panel,.student-ui .student-side-column>.side-card{margin:0!important;padding:11px 8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.student-ui .student-side-column>.side-card{border-top:1px solid #e6eef6!important}
.student-ui .student-side-column>.idea-card{margin-top:4px!important;border-top:0!important;border-radius:14px!important;background:linear-gradient(135deg,#e8f6ff,#fff2e4)!important}
.student-ui .content-section{margin-top:12px!important;padding:14px!important;border-radius:20px!important}
.student-ui .program-card,.student-ui .subject-card,.student-ui .file-card{border-radius:14px!important;box-shadow:0 5px 14px rgba(20,61,117,.045)!important}
.student-ui .class-card{min-height:116px!important;border-radius:18px!important;box-shadow:0 7px 20px rgba(20,61,117,.06)!important}

/* Teacher — KRUART hero + shortcut panel, not a separate admin theme */
.teacher-ui .shell{width:min(calc(100% - 48px),var(--kr-max))!important}
.teacher-ui .env-banner{width:min(calc(100% - 48px),var(--kr-max))!important}
.teacher-ui .top-grid{grid-template-columns:minmax(0,2.18fr) minmax(340px,.86fr)!important;gap:14px!important}
.teacher-ui .teacher-hero{min-height:314px!important;border-radius:24px!important;background:#dff4ff url('/assets/kruart-hero-final.webp') center/cover no-repeat!important;box-shadow:0 8px 24px rgba(20,61,117,.09)!important}
.teacher-ui .teacher-hero .hero-copy{left:31%!important;top:18px!important;width:46%!important;padding:8px 14px 10px!important;border:0!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;text-align:center!important;text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 20px rgba(255,255,255,.92)!important}
.teacher-ui .teacher-hero h1{font-size:clamp(30px,2.55vw,40px)!important;line-height:1.06!important}
.teacher-ui .teacher-hero p{margin-inline:auto!important;font-size:12px!important;line-height:1.45!important}
.teacher-ui .hero-actions{justify-content:center!important}
.teacher-ui .quick{padding:12px!important;border-radius:20px!important}
.teacher-ui .quick-grid{grid-template-columns:1fr!important;gap:6px!important}
.teacher-ui .quick-grid button{min-height:58px!important;padding:7px 9px!important;border-radius:14px!important;background:#fff!important;grid-template-columns:38px minmax(0,1fr)!important;column-gap:9px!important}
.teacher-ui .quick-grid button img{width:31px!important;height:31px!important}
.teacher-ui .quick-grid button strong{font-size:12.5px!important}
.teacher-ui .quick-grid button small{font-size:9.5px!important;color:#71849a!important}
.teacher-ui .workspace{grid-template-columns:minmax(0,2.16fr) minmax(340px,.9fr)!important;gap:12px!important}
.teacher-ui .panel{border-radius:18px!important;box-shadow:0 7px 20px rgba(20,61,117,.055)!important}
.teacher-ui .stats{gap:8px!important}.teacher-ui .stats article{min-height:72px!important;border-radius:15px!important;box-shadow:0 5px 14px rgba(20,61,117,.045)!important}

/* Teacher login follows the same public KRUART hero instead of a competing illustration. */
.teacher-login-ui .visual-panel{background:#dff4ff url('/assets/kruart-hero-final.webp') center/cover no-repeat!important}
.teacher-login-ui .visual-copy{left:31%!important;right:23%!important;top:24%!important;background:rgba(255,255,255,.88)!important}

@media(max-width:1180px){
  .page-shell,.shell,.teacher-ui .shell,.teacher-ui .env-banner{width:calc(100% - 24px)!important}
  .student-ui .student-dashboard,.teacher-ui .top-grid,.teacher-ui .workspace{grid-template-columns:1fr!important}
  .student-ui .student-side-column{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .student-ui .student-side-column>.student-panel{grid-column:1/-1!important;border-bottom:1px solid #e6eef6!important}
  .student-ui .student-side-column>.side-card{border:1px solid #e6eef6!important;border-radius:14px!important}
  .teacher-ui .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .page-shell,.shell,.teacher-ui .shell,.teacher-ui .env-banner{width:calc(100% - 18px)!important}
  .student-ui .login-hero,.student-ui .app-hero,.teacher-ui .teacher-hero{min-height:326px!important;height:326px!important;background-position:center top!important;background-size:auto 100%!important}
  .student-ui .login-hero .hero-copy,.student-ui .app-hero .hero-copy,.teacher-ui .teacher-hero .hero-copy{left:10px!important;right:10px!important;top:auto!important;bottom:10px!important;width:auto!important;padding:9px 11px 10px!important;border:1px solid rgba(194,216,235,.82)!important;border-radius:20px!important;background:rgba(255,255,255,.945)!important;box-shadow:0 10px 26px rgba(20,61,117,.10)!important;backdrop-filter:blur(8px)!important;text-shadow:none!important}
  .student-ui .student-side-column{grid-template-columns:1fr!important}
  .student-ui .student-side-column>.student-panel{grid-column:auto!important}
  .teacher-ui .quick-grid{grid-template-columns:1fr 1fr!important}
  .teacher-login-ui .visual-copy{left:10px!important;right:10px!important;top:auto!important;bottom:14px!important}
}
@media(max-width:560px){
  .teacher-ui .quick-grid{grid-template-columns:1fr!important}
  .student-ui .hero-copy h1,.teacher-ui .teacher-hero h1{font-size:28px!important}
  .student-ui .class-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* 0.4.23 mobile intrinsic-width closure */
.student-ui .class-grid,.student-ui .student-grid{min-width:0!important}
.student-ui .class-card,.student-ui .student-card-select{min-width:0!important;width:100%!important;overflow:hidden!important}
.student-ui .class-card strong,.student-ui .class-card small{min-width:0!important;overflow-wrap:anywhere!important}
@media(max-width:430px){
  .student-ui .class-grid{gap:8px!important}
  .student-ui .class-card{padding:10px!important;min-height:104px!important}
  .student-ui .class-card strong{font-size:14px!important;line-height:1.25!important}
  .student-ui .class-card small{font-size:10px!important}
}
@media(max-width:430px){
  .student-ui .class-grid{grid-template-columns:1fr!important}
  .student-ui .class-card{min-height:92px!important}
}


/* 2026-11-03 | Shared Computer Lab entry + admin presentation.
   Existing BAY brand assets, role checks and APIs are authoritative. */
body.admin-ui,body.teacher-login-ui{--lab-orange:#f47b1c;--lab-dark:#27303b;--lab-line:#ebe8e4;--lab-bg:#f7f8fa}
body.admin-ui{background:#f7f8fa!important;color:var(--lab-dark)!important}
body.admin-ui .admin-topbar{
  background:#fff!important;border-bottom:1px solid var(--lab-line)!important;
  box-shadow:0 3px 13px rgba(33,44,55,.03)!important
}
body.admin-ui .admin-title strong,body.admin-ui .admin-heading h1,body.admin-ui .card-head h2,
body.admin-ui .summary-card strong,body.admin-ui .diag-list strong{
  color:var(--lab-dark)!important
}
body.admin-ui .admin-main{width:min(1380px,calc(100% - 44px))!important;padding:27px 0 40px!important}
body.admin-ui .admin-heading{padding-bottom:8px!important}
body.admin-ui .summary-grid{gap:13px!important;margin-bottom:16px!important}
body.admin-ui .summary-card,body.admin-ui .admin-card{
  border:1px solid var(--lab-line)!important;background:#fff!important;
  border-radius:19px!important;box-shadow:0 8px 23px rgba(35,45,55,.05)!important
}
body.admin-ui .summary-card{min-height:110px!important;padding:17px!important}
body.admin-ui .summary-card strong{font-size:26px!important}
body.admin-ui .summary-card>img{padding:8px;border-radius:14px;background:#fff2e7!important}
body.admin-ui .admin-card{padding:20px!important}
body.admin-ui .mode-badge,body.admin-ui .lock-pill{
  background:#fff4e9!important;border:1px solid #fbd9bc!important;color:#b7570b!important
}
body.admin-ui .back-link,body.admin-ui .mini,body.admin-ui .secondary{
  border:1px solid #ece9e5!important;background:#fff!important;color:#4d5966!important;border-radius:12px!important
}
body.admin-ui .primary{
  background:linear-gradient(135deg,#ff9535,#ed6c0c)!important;
  border:0!important;color:#fff!important;box-shadow:0 8px 18px rgba(234,110,17,.15)!important
}
body.admin-ui .brand-preview>div,body.admin-ui .version-compare>div,
body.admin-ui .diag-list>div,body.admin-ui .recovery-box{
  border:1px solid #efe8e2!important;background:#fffaf7!important;border-radius:14px!important
}
body.admin-ui .admin-sidebar{background:#26303b!important;border-right:1px solid #374351!important;box-shadow:none!important}
body.admin-ui .admin-sidebar:before{color:#bfc6d0!important;letter-spacing:.06em!important}
body.admin-ui .side-nav{
  min-height:48px!important;color:#dbe4ec!important;background:transparent!important;
  border-radius:12px!important;font-weight:750!important
}
body.admin-ui .side-nav img{filter:brightness(0) invert(1)!important;opacity:.85!important}
body.admin-ui .side-nav.active,body.admin-ui .side-nav:hover{
  color:#fff!important;background:linear-gradient(135deg,#ff953b,#ef6c0c)!important;
  box-shadow:0 5px 14px rgba(219,95,12,.16)!important
}
body.admin-ui .side-nav.active{box-shadow:0 5px 14px rgba(219,95,12,.16)!important}
body.teacher-login-ui{
  color:#26303c!important;background:#f7f8fa!important
}
body.teacher-login-ui .login-shell{
  background:#f7f8fa!important;grid-template-columns:minmax(480px,1.1fr) minmax(400px,.9fr)!important
}
body.teacher-login-ui .visual-panel{
  position:relative!important;overflow:hidden!important;
  background:linear-gradient(135deg,rgba(234,100,9,.88),rgba(251,142,52,.74)),url("/assets/computer-room-hero.jpg") center/cover!important;
  border:0!important
}
body.teacher-login-ui .visual-panel:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(143,54,0,.12),transparent 55%)!important;pointer-events:none
}
body.teacher-login-ui .visual-panel .brand.brand-official{
  border:1px solid rgba(255,255,255,.75)!important;background:rgba(255,255,255,.95)!important;
  box-shadow:0 8px 25px rgba(71,44,20,.09)!important;border-radius:16px!important
}
body.teacher-login-ui .visual-copy{
  top:27%!important;left:8%!important;right:7%!important;
  max-width:600px!important;padding:24px!important;
  background:rgba(92,44,9,.16)!important;border:1px solid rgba(255,255,255,.38)!important;
  border-radius:21px!important;backdrop-filter:blur(5px)!important
}
body.teacher-login-ui .visual-copy h1,body.teacher-login-ui .visual-copy h1 em{
  color:#fff!important;text-shadow:0 2px 12px rgba(69,38,13,.13)!important;
  font-size:clamp(30px,2.75vw,44px)!important;line-height:1.15!important
}
body.teacher-login-ui .visual-copy p{color:#fffdf8!important;font-size:15px!important;font-weight:650!important}
body.teacher-login-ui .eyebrow{color:#ffedcf!important}
body.teacher-login-ui .scene{opacity:.12!important;pointer-events:none!important}
body.teacher-login-ui .form-panel{background:#f7f8fa!important}
body.teacher-login-ui .form-wrap{
  width:min(440px,100%)!important;padding:34px!important;
  border:1px solid #eee8e3!important;border-radius:24px!important;background:#fff!important;
  box-shadow:0 18px 42px rgba(40,49,60,.055)!important
}
body.teacher-login-ui .form-wrap h2{color:#242e38!important;font-size:32px!important}
body.teacher-login-ui .badge{background:#fff1e5!important;color:#bb5a11!important;border-radius:99px!important}
body.teacher-login-ui .lead{color:#657280!important}
body.teacher-login-ui .submit.sso-submit{
  background:linear-gradient(135deg,#ff9133,#ee6d0e)!important;
  border-radius:13px!important;box-shadow:0 8px 20px rgba(237,105,14,.15)!important;
  color:#fff!important;min-height:54px!important
}
body.teacher-login-ui .secure-note{border:1px solid #edeae6!important;border-radius:14px!important;background:#fafaf9!important}
body.teacher-login-ui .secure-note strong{color:#303a44!important}
body.teacher-login-ui .field{background:#fff!important;border-color:#eae8e5!important}
body.teacher-login-ui .field:focus-within{border-color:#f99d57!important;box-shadow:0 0 0 3px rgba(242,111,21,.11)!important}
@media(max-width:980px){
  body.admin-ui .admin-sidebar{background:#fff!important;border-bottom:1px solid #eee7df!important}
  body.admin-ui .admin-sidebar:before{display:none!important}
  body.admin-ui .side-nav{color:#4b5866!important;min-width:48px!important}
  body.admin-ui .side-nav img{filter:none!important}
  body.admin-ui .side-nav.active,body.admin-ui .side-nav:hover{color:#fff!important}
  body.admin-ui .side-nav.active img{filter:brightness(0) invert(1)!important}
  body.teacher-login-ui .login-shell{grid-template-columns:1fr!important}
  body.teacher-login-ui .form-panel{min-height:100dvh!important;padding:24px 14px!important}
  body.teacher-login-ui .form-wrap{padding:24px!important}
}
@media(max-width:560px){
  body.admin-ui .admin-main{width:calc(100% - 26px)!important;padding-top:18px!important}
  body.admin-ui .admin-heading h1{font-size:24px!important}
  body.admin-ui .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.admin-ui .summary-card{min-height:106px!important;padding:12px!important}
  body.admin-ui .admin-grid{grid-template-columns:1fr!important}
  body.teacher-login-ui .form-wrap{padding:22px 18px!important;border-radius:20px!important}
  body.teacher-login-ui .form-wrap h2{font-size:28px!important}
  body.teacher-login-ui .field input{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){body.admin-ui *,body.teacher-login-ui *{transition:none!important;animation:none!important}}