@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;color:#253c35;background:#f5f8f6;font-synthesis:none;--green:#176b57;--green-dark:#105140;--green-soft:#e9f5ef;--ink:#253c35;--muted:#75877f;--border:#e1e9e4;--surface:#fff;--shadow:0 14px 40px rgba(26,71,56,.07),0 2px 8px rgba(26,71,56,.03)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 85% 0,#eaf5f1 0,transparent 24rem),#f5f8f6}button,input,select,textarea{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,a{cursor:pointer}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:10px 14px;background:#fff;border-radius:10px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(36,137,107,.25);outline-offset:2px}
.sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:236px;padding:31px 20px 24px;display:flex;flex-direction:column;background:rgba(255,255,255,.95);border-right:1px solid var(--border)}.brand{display:flex;align-items:center;gap:11px;padding:0 10px;font-size:22px;font-weight:700;letter-spacing:-.5px}.brand em{color:#d4a446;font-style:normal}.brand-mark{width:38px;height:42px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,#258269,#105844);border-radius:12px;box-shadow:0 8px 20px rgba(23,107,87,.22)}.brand-mark svg{width:23px;height:23px;stroke-width:2.4}.desktop-nav{display:grid;gap:7px;margin-top:47px}.desktop-nav p{margin:0 11px 10px;color:#9aaba3;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.desktop-nav a,.desktop-nav button{min-height:47px;display:flex;align-items:center;gap:13px;padding:0 13px;color:#75877f;border:0;border-radius:11px;background:transparent;font-size:13px;text-align:left;transition:.18s ease}.desktop-nav a:hover,.desktop-nav button:hover{background:#f2f7f4;color:var(--green)}.desktop-nav .active{color:var(--green);background:var(--green-soft);font-weight:600}.desktop-nav svg{width:19px}.desktop-nav small{margin-left:auto;padding:3px 7px;color:#578474;background:rgba(255,255,255,.8);border-radius:6px;font-size:9px;font-weight:500}.sidebar-insight{position:relative;margin-top:auto;overflow:hidden;padding:18px;border:1px solid #e7eee7;border-radius:16px;background:linear-gradient(150deg,#f4f8ec,#edf6f1)}.sidebar-insight::after{content:"";position:absolute;right:-24px;top:-24px;width:75px;height:75px;border-radius:50%;background:rgba(221,191,105,.18)}.sidebar-insight>svg{color:#a8893e;width:23px}.sidebar-insight strong{display:block;margin-top:10px;font-size:12px}.sidebar-insight p{margin:5px 0 13px;color:#84948a;font-size:10px;line-height:1.7}.mini-avatars{display:flex}.mini-avatars i{width:28px;height:28px;display:grid;place-items:center;margin-right:-6px;color:#547666;background:#d9ebe2;border:2px solid #f4f8ef;border-radius:50%;font-size:9px;font-style:normal}.mini-avatars i:nth-child(2){background:#e6e0ef;color:#776987}.mini-avatars i:nth-child(3){background:#f2ddd3;color:#936e5b}.mini-avatars i:last-child{background:#fff;color:#84948a}.teacher-card{display:flex;align-items:center;gap:10px;margin-top:18px;padding:17px 7px 0;border-top:1px solid #edf1ee}.teacher-avatar{width:38px;height:38px;display:grid;place-items:center;color:#6b775a;background:linear-gradient(145deg,#f4f0d9,#dfe9d8);border-radius:13px;font-weight:600}.teacher-card strong{display:block;font-size:12px}.teacher-card span{display:flex;align-items:center;gap:5px;margin-top:2px;color:#90a097;font-size:9px}.teacher-card span i{width:5px;height:5px;border-radius:50%;background:#53a47e}.teacher-card>svg{width:17px;margin-left:auto;color:#9caaa2}
.app-shell{margin-left:236px;min-height:100vh}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(255,255,255,.76);border-bottom:1px solid rgba(225,233,228,.9);backdrop-filter:blur(18px)}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:11px}.breadcrumb span{color:#96a49d}.breadcrumb b{color:#c5cec9;font-weight:400}.breadcrumb strong{font-weight:500}.save-indicator{display:flex;align-items:center;gap:7px;color:#778c82;font-size:10px}.save-indicator i,.autosave i{width:7px;height:7px;border-radius:50%;background:#60a886;box-shadow:0 0 0 4px rgba(96,168,134,.1)}.mobile-brand{display:none}main{width:min(1260px,calc(100% - 70px));margin:0 auto;padding:35px 0 0}
.hero{position:relative;min-height:275px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;overflow:hidden;padding:40px 47px;color:#fff;border-radius:24px;background:linear-gradient(125deg,#155e4b 0%,#247860 48%,#5b9184 100%);box-shadow:0 18px 45px rgba(20,88,69,.18)}.hero::before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to left,#000,transparent 58%)}.hero-glow{position:absolute;width:330px;height:330px;top:-170px;left:27%;border-radius:50%;background:rgba(175,236,218,.21);filter:blur(3px)}.hero-copy{position:relative;z-index:2;align-self:center}.kicker{display:flex;align-items:center;gap:8px;color:#c4e3d8;font-size:10px;font-weight:600;letter-spacing:.16em}.kicker svg{width:16px}.hero h1{margin:12px 0 7px;font-size:clamp(31px,3vw,44px);line-height:1.2;letter-spacing:-.8px}.hero-copy>p{max-width:420px;margin:0;color:rgba(255,255,255,.76);font-size:13px}.hero-context{display:flex;gap:10px;margin-top:25px}.hero-context span{display:flex;align-items:center;gap:7px;padding:8px 12px;color:#dceee8;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);border-radius:10px;font-size:10px;backdrop-filter:blur(8px)}.hero-context svg{width:15px}.hero-context b{color:#fff;font-weight:500}.hero-visual{position:relative;height:210px;z-index:1}.classroom-illustration{width:100%;height:225px;overflow:visible;border:0;filter:drop-shadow(0 16px 16px rgba(8,50,38,.16));transform:translateY(-8px)}.progress-float{position:absolute;right:1%;bottom:-7px;display:flex;align-items:center;gap:11px;padding:10px 15px 10px 10px;color:var(--ink);background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.7);border-radius:16px;box-shadow:0 14px 30px rgba(8,55,40,.18);backdrop-filter:blur(10px)}.progress-ring{--percent:0;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#3b9475 calc(var(--percent)*1%),#e8efeb 0);position:relative}.progress-ring::before{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}.progress-ring span{z-index:1;color:#34765f;font-size:10px;font-weight:700}.progress-float strong{display:block;font-size:11px}.progress-float>div:last-child span{display:block;margin-top:2px;color:#8c9a93;font-size:9px}
.context-card{display:flex;align-items:center;gap:25px;margin-top:20px;padding:17px 20px;background:#fff;border:1px solid var(--border);border-radius:17px;box-shadow:0 8px 26px rgba(31,79,62,.045)}.context-title{display:flex;align-items:center;gap:12px;min-width:230px}.soft-icon{width:41px;height:41px;display:grid;place-items:center;flex:0 0 auto;color:var(--green);background:var(--green-soft);border-radius:12px}.soft-icon svg{width:19px}.context-title strong{display:block;font-size:12px}.context-title span:not(.soft-icon){display:block;margin-top:2px;color:#91a098;font-size:9px}.context-fields{display:flex;gap:12px;margin-left:auto}.context-fields label,.form-grid label{display:grid;gap:5px;color:#809088;font-size:9px}select,input,textarea{color:#385047;border:1px solid #dfe7e2;background:#fff;border-radius:9px}.context-fields select,.context-fields input{width:158px;height:39px;padding:0 11px;font-size:11px}.icon-button{width:40px;height:40px;display:grid;place-items:center;color:#60786d;background:#f7faf8;border:1px solid #e1e8e4;border-radius:10px;transition:.18s ease}.icon-button:hover{color:var(--green);background:var(--green-soft);transform:translateY(-1px)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.metric{position:relative;min-height:114px;display:flex;align-items:center;gap:14px;overflow:hidden;padding:21px 22px;background:#fff;border:1px solid var(--border);border-radius:17px;box-shadow:0 8px 24px rgba(31,79,62,.035);transition:transform .18s ease,box-shadow .18s ease}.metric:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.metric-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px}.metric-icon svg{width:21px}.present-metric .metric-icon{color:#33805f;background:#e7f5ed}.late-metric .metric-icon{color:#b3842d;background:#fff4d9}.away-metric .metric-icon{color:#b16e6b;background:#faecea}.metric>div:nth-child(2){line-height:1}.metric>div>span{display:block;margin-bottom:8px;color:#7d8f86;font-size:10px}.metric strong{font-size:26px;font-weight:600}.metric small{margin-left:4px;color:#9aa7a0;font-size:9px}.metric-bar{position:absolute;inset:auto 0 0;height:3px;background:#f3f6f4}.metric-bar i{display:block;width:0;height:100%;transition:width .45s ease}.present-metric .metric-bar i{background:#63aa88}.late-metric .metric-bar i{background:#ddbd72}.away-metric .metric-bar i{background:#d79894}
.roster{margin-top:22px;padding:28px;background:#fff;border:1px solid var(--border);border-radius:21px;box-shadow:0 10px 32px rgba(31,79,62,.045)}.roster-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-label{color:#7b9b8d;font-size:9px;font-weight:600;letter-spacing:.16em}.roster h2{margin:6px 0 3px;font-size:21px;letter-spacing:-.25px}.roster h2 b{display:inline-block;vertical-align:middle;margin-left:6px;padding:3px 8px;color:#638477;background:#eff5f2;border-radius:7px;font-size:9px;font-weight:500}.roster-header p{margin:0;color:#94a19a;font-size:10px}.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border-radius:10px;font-size:11px;font-weight:600;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.button svg{width:17px}.button:hover{transform:translateY(-1px)}.button.primary{color:#fff;border:1px solid var(--green);background:linear-gradient(135deg,#20765f,#125643);box-shadow:0 8px 18px rgba(23,107,87,.15)}.button.primary:hover{box-shadow:0 10px 22px rgba(23,107,87,.24)}.button.secondary{color:#516a5f;border:1px solid #dfe7e2;background:#fff}.button.secondary:hover{color:var(--green);background:#f6faf8}.roster-tools{display:flex;align-items:end;gap:10px;margin-top:22px;padding-bottom:21px;border-bottom:1px solid #edf2ef}.search-box{width:min(330px,100%);height:40px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #dfe7e2;border-radius:10px;background:#fbfcfb}.search-box:focus-within{border-color:#9dcbbd;box-shadow:0 0 0 3px rgba(43,134,105,.09)}.search-box svg{width:17px;color:#91a098}.search-box input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:11px}.filter-box{display:grid;gap:4px;margin-left:auto;color:#87978f;font-size:8px}.filter-box select{height:40px;min-width:125px;padding:0 10px;font-size:10px}.student-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:21px}.student-card{position:relative;min-width:0;padding:17px;border:1px solid #e6ece8;border-radius:16px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:cardIn .28s both}.student-card:hover{transform:translateY(-2px);border-color:#d7e4dd;box-shadow:0 11px 28px rgba(31,79,62,.07)}.student-card.just-updated{animation:statusPop .35s ease}.student-main{display:flex;align-items:center;gap:13px}.student-avatar{position:relative;width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#657d72;background:linear-gradient(145deg,#e1f0e8,#cae0d5);border-radius:18px;font-size:18px;font-weight:600}.student-avatar::before{content:"";position:absolute;width:39px;height:39px;top:-18px;right:-14px;border-radius:50%;background:rgba(255,255,255,.45)}.student-avatar.tone-1{color:#677990;background:linear-gradient(145deg,#e5edf6,#ceddec)}.student-avatar.tone-2{color:#8d705f;background:linear-gradient(145deg,#f5e5dc,#ead0c1)}.student-avatar.tone-3{color:#756986;background:linear-gradient(145deg,#eee8f5,#dbd1e9)}.student-info{min-width:0;flex:1}.student-info strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px;white-space:nowrap}.student-info>span{display:block;margin-top:4px;color:#94a29b;font-size:9px}.current-status{display:inline-flex!important;align-items:center;gap:4px;width:fit-content;margin-top:7px!important;padding:4px 7px;border-radius:7px;color:#83928b!important;background:#f2f5f3;font-size:8px!important}.current-status svg{width:11px;height:11px}.status-present .current-status{color:#367e60!important;background:#e9f5ee}.status-late .current-status{color:#a77c2d!important;background:#fff5dc}.status-leave .current-status{color:#6f78a3!important;background:#eff1f9}.status-absent .current-status{color:#ae6b67!important;background:#fbedeb}.note-toggle{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;color:#84958c;border:1px solid #e5ebe7;border-radius:10px;background:#fbfcfb}.note-toggle svg{width:15px}.note-toggle.has-note{color:var(--green);background:var(--green-soft);border-color:#d6e8df}.status-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}.status-button{min-height:34px;display:flex;align-items:center;justify-content:center;gap:5px;color:#7f8e87;background:#fafbfa;border:1px solid #e7ece9;border-radius:9px;font-size:8.5px;transition:.15s ease}.status-button svg{width:13px;height:13px}.status-button:hover{color:var(--green);border-color:#cddfd6}.status-button.selected[data-status="present"]{color:#2f7959;background:#e8f5ed;border-color:#c7e2d1}.status-button.selected[data-status="late"]{color:#a77b28;background:#fff5dc;border-color:#ecdba9}.status-button.selected[data-status="leave"]{color:#68739e;background:#eef0fa;border-color:#dce0f1}.status-button.selected[data-status="absent"]{color:#ad6863;background:#fbedeb;border-color:#ebd2cf}.note-area{display:none;margin-top:12px;padding-top:11px;border-top:1px solid #edf1ef}.note-area.open{display:block;animation:fadeDown .2s both}.note-area label{display:grid;gap:5px;color:#87978f;font-size:8px}.note-input{width:100%;padding:9px 10px;font-size:10px;resize:vertical;min-height:39px}.show-more{display:flex;align-items:center;gap:7px;margin:20px auto 0;padding:9px 14px;color:#618074;border:0;background:transparent;font-size:10px}.show-more svg{width:14px}.roster-footer{display:flex;justify-content:space-between;margin-top:22px;padding-top:17px;color:#98a59e;border-top:1px solid #edf2ef;font-size:9px}.autosave{display:flex;align-items:center;gap:7px}.empty-state{text-align:center;padding:46px 20px 35px}.empty-art{position:relative;width:130px;height:100px;margin:0 auto 20px}.empty-board{position:absolute;inset:7px 5px 12px;border:5px solid #fff;border-radius:20px;background:linear-gradient(145deg,#e5f3ed,#e9eff6);box-shadow:0 11px 28px rgba(38,82,67,.1)}.empty-board::before,.empty-board::after{content:"";position:absolute;left:27px;right:27px;height:6px;border-radius:4px;background:#bad8cb}.empty-board::before{top:27px}.empty-board::after{top:43px;right:49px}.empty-face{position:absolute;z-index:2;bottom:0;left:45px;width:43px;height:43px;display:grid;place-items:center;color:#8b705e;background:#f0d7c8;border:4px solid #fff;border-radius:50%;font-size:13px}.empty-state h3{margin:0 0 5px;font-size:15px}.empty-state p{margin:0 0 16px;color:#8e9c95;font-size:10px}.page-footer{display:flex;justify-content:space-between;padding:25px 2px 90px;color:#9aa7a0;font-size:9px}
dialog{width:min(540px,calc(100% - 28px));max-height:min(720px,calc(100vh - 34px));padding:0;color:var(--ink);border:1px solid #dce6e0;border-radius:21px;box-shadow:0 30px 90px rgba(12,48,37,.28)}dialog[open]{animation:dialogIn .22s ease both}dialog::backdrop{background:rgba(15,43,35,.46);backdrop-filter:blur(5px)}#student-form{padding:25px}.dialog-header{display:flex;align-items:center;gap:12px}.dialog-header h2{margin:0;font-size:18px}.dialog-header p{margin:2px 0 0;color:#87978f;font-size:10px}.dialog-header p strong{color:var(--green)}.dialog-close{width:36px;height:36px;margin-left:auto;color:#84948c;border:0;border-radius:10px;background:#f5f7f6;font-size:22px;line-height:1}.form-grid{display:grid;grid-template-columns:1fr 130px;gap:10px;margin-top:22px}.form-grid input{width:100%;height:42px;padding:0 11px;font-size:11px}.dialog-submit{width:100%;margin-top:11px}.manage-heading{display:flex;justify-content:space-between;margin:25px 0 8px;padding-top:20px;border-top:1px solid #edf1ef;font-size:11px}.manage-heading span{color:#91a098;font-size:9px}.manage-list{max-height:245px;overflow:auto}.manage-row{display:flex;align-items:center;gap:10px;padding:9px 3px;border-bottom:1px solid #eef2ef}.manage-avatar{width:34px;height:34px;display:grid;place-items:center;color:#61796e;background:#e7f1ec;border-radius:10px;font-size:10px}.manage-row div:nth-child(2){min-width:0;flex:1}.manage-row strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:10px;white-space:nowrap}.manage-row small{color:#93a198;font-size:8px}.delete-student{width:32px;height:32px;display:grid;place-items:center;color:#b3716d;border:0;border-radius:9px;background:#fbefed}.delete-student svg{width:14px}.manage-empty{padding:20px 0;color:#94a199;text-align:center;font-size:10px}#toast{position:fixed;z-index:100;left:50%;bottom:25px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 30px);padding:10px 16px 10px 10px;color:#fff;background:#183f33;border:1px solid rgba(255,255,255,.1);border-radius:13px;box-shadow:0 15px 40px rgba(10,42,32,.24);opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.22s ease}#toast.visible{opacity:1;transform:translate(-50%,0)}#toast span{width:28px;height:28px;display:grid;place-items:center;color:#1f6c55;background:#dff3e9;border-radius:9px}#toast svg{width:15px;stroke-width:2.5}#toast p{margin:0;font-size:10px;white-space:nowrap}.mobile-nav{display:none}
@keyframes cardIn{from{opacity:0;transform:translateY(7px)}}@keyframes fadeDown{from{opacity:0;transform:translateY(-4px)}}@keyframes dialogIn{from{opacity:0;transform:translateY(12px) scale(.98)}}@keyframes statusPop{45%{transform:scale(1.015);border-color:#9dcdbb}}
@media(max-width:1050px){.sidebar{width:205px;padding-inline:15px}.app-shell{margin-left:205px}.topbar{padding-inline:27px}main{width:calc(100% - 40px)}.hero{grid-template-columns:1fr .85fr;padding-inline:32px}.hero-visual{transform:scale(.92);transform-origin:right center}.context-title{min-width:auto}.context-card{gap:14px}.context-fields{margin-left:auto}.context-fields select,.context-fields input{width:138px}}
@media(max-width:820px){.sidebar{display:none}.app-shell{margin-left:0}.topbar{height:64px;padding:0 22px}.mobile-brand{display:flex;align-items:center;gap:9px}.mobile-brand .brand-mark{width:31px;height:34px;border-radius:10px}.mobile-brand .brand-mark svg{width:18px}.mobile-brand strong{font-size:14px}.breadcrumb{display:none}main{width:calc(100% - 32px);padding-top:22px}.hero{min-height:240px;padding:30px}.hero-visual{opacity:.93}.hero h1{font-size:32px}.hero-copy>p{font-size:11px}.context-card{flex-wrap:wrap}.context-fields{order:2;width:100%}.context-fields label{flex:1}.context-fields select,.context-fields input{width:100%}.context-card>.icon-button{margin-left:auto}.student-grid{grid-template-columns:1fr}.mobile-nav{position:fixed;z-index:40;left:50%;bottom:12px;display:grid;grid-template-columns:repeat(3,1fr);width:min(330px,calc(100% - 28px));padding:6px;background:rgba(255,255,255,.92);border:1px solid rgba(218,228,222,.95);border-radius:18px;box-shadow:0 14px 40px rgba(20,63,50,.17);backdrop-filter:blur(15px);transform:translateX(-50%)}.mobile-nav a,.mobile-nav button{min-height:49px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#84938c;border:0;border-radius:13px;background:transparent;font-size:8px}.mobile-nav .active{color:var(--green);background:var(--green-soft)}.mobile-nav svg{width:18px}#toast{bottom:86px}.page-footer{padding-bottom:100px}}
@media(max-width:600px){.topbar{padding-inline:16px}.save-indicator span{display:none}main{width:calc(100% - 24px);padding-top:13px}.hero{min-height:325px;grid-template-columns:1fr;align-items:start;padding:28px 23px 19px;border-radius:20px}.hero-copy{z-index:3}.hero h1{margin-top:9px;font-size:29px}.hero-copy>p{max-width:280px;line-height:1.7}.hero-context{margin-top:17px}.hero-visual{position:absolute;right:-20px;bottom:-10px;width:78%;height:185px;transform:none}.classroom-illustration{height:183px;opacity:.9}.progress-float{right:17px;bottom:11px}.progress-ring{width:43px;height:43px}.context-card{margin-top:12px;padding:15px;border-radius:15px}.context-title{flex:1}.context-fields{gap:8px}.context-fields select,.context-fields input{font-size:10px}.metrics{gap:8px;margin-top:12px}.metric{min-height:95px;display:block;padding:15px 12px}.metric-icon{width:34px;height:34px;margin-bottom:10px;border-radius:11px}.metric-icon svg{width:17px}.metric>div:nth-child(2)>span{margin-bottom:5px;font-size:8px}.metric strong{font-size:22px}.roster{margin-top:12px;padding:20px 14px;border-radius:18px}.roster-header{align-items:flex-end}.roster h2{font-size:18px}.roster-header .button{padding-inline:11px;font-size:9px}.roster-tools{display:grid;grid-template-columns:1fr auto;align-items:end;margin-top:18px}.search-box{grid-column:1/-1;max-width:none}.filter-box{margin-left:0}.filter-box select{min-width:118px}.add-student{min-height:40px;font-size:9px}.student-grid{margin-top:14px}.student-card{padding:14px}.student-avatar{width:51px;height:51px;border-radius:16px}.status-actions{gap:5px}.status-button{min-height:39px;flex-direction:column;gap:2px;font-size:7.5px}.roster-footer{line-height:1.5}.autosave{max-width:140px;text-align:right}.page-footer{padding-inline:2px}.form-grid{grid-template-columns:1fr}#student-form{padding:20px}dialog{border-radius:19px}.manage-list{max-height:200px}}
.progress-ring{--progress:0%;background:conic-gradient(#3b9475 var(--progress),#e8efeb 0)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Readable Thai type scale */
.desktop-nav p,.kicker,.section-label{font-size:11px}.sidebar-insight p,.teacher-card span,.save-indicator,.hero-context span,.context-title span:not(.soft-icon),.context-fields label,.form-grid label,.metric small,.roster-header p,.filter-box,.roster-footer,.page-footer,.dialog-header p,.manage-heading span,.manage-row small{font-size:11px}.sidebar-insight strong,.teacher-card strong,.context-title strong,.metric>div>span,.button,.search-box input,.filter-box select,.student-info>span,.note-input,.manage-row strong,#toast p{font-size:12px}.hero-copy>p{font-size:14px}.student-info strong{font-size:14px}.current-status{font-size:10px!important}.status-button{font-size:11px}.metric strong{font-size:29px}
@media(max-width:600px){.hero-copy>p{font-size:13px}.hero-context span{font-size:11px}.context-fields select,.context-fields input{font-size:12px}.metric>div:nth-child(2)>span{font-size:10px}.roster-header .button,.add-student{font-size:10px}.status-button{font-size:10px}.page-footer{font-size:10px}}
@media(max-width:600px){body{overflow-x:hidden}.hero::after{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(90deg,rgba(21,94,75,.96) 0,rgba(21,94,75,.82) 48%,transparent 78%);pointer-events:none}.hero-copy{position:relative;z-index:3}.hero-copy>p{max-width:235px}.progress-float{right:25px}.context-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.context-fields label,.context-fields input,.context-fields select{min-width:0;max-width:100%}.roster-header>div{min-width:0}.roster-header .button{flex:0 0 auto;max-width:132px}.metrics,.roster,.context-card{min-width:0;max-width:100%}}

/* Authentication */
[hidden]{display:none!important}
.auth-locked .sidebar,.auth-locked .app-shell,.auth-locked .mobile-nav{display:none}.auth-screen{position:fixed;z-index:200;inset:0;display:grid;grid-template-columns:minmax(420px,1.1fr) minmax(380px,.9fr);background:#f4f8f6}.auth-screen[hidden]{display:none}.auth-visual{position:relative;overflow:hidden;padding:42px 55px;color:#fff;background:linear-gradient(135deg,#105542,#24745d 58%,#77a59a)}.auth-visual::before{content:"";position:absolute;width:430px;height:430px;left:38%;top:-230px;border-radius:50%;background:rgba(176,233,216,.18)}.auth-visual::after{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(to bottom right,transparent,#000)}.auth-brand{position:relative;z-index:2;width:max-content;color:#fff;padding:0}.auth-brand em{color:#f0cf74}.auth-message{position:relative;z-index:2;margin-top:15vh}.auth-message h1{margin:13px 0 12px;font-size:clamp(38px,5vw,64px);line-height:1.17;letter-spacing:-1.7px}.auth-message p{max-width:470px;margin:0;color:rgba(255,255,255,.73);font-size:14px}.auth-art{position:absolute;z-index:2;right:7%;bottom:8%;width:315px;height:190px}.art-board{position:absolute;inset:0 0 28px 32px;padding:35px;background:linear-gradient(145deg,#e5f5ef,#dceef1);border:8px solid rgba(255,255,255,.9);border-radius:27px;box-shadow:0 24px 50px rgba(7,44,33,.22)}.art-board i{display:block;width:55%;height:8px;margin-bottom:14px;border-radius:8px;background:#8fc4b2}.art-board i:nth-child(2){width:36%}.art-board i:nth-child(3){width:68%;background:#b5d7cb}.art-person{position:absolute;bottom:0;width:77px;height:77px;display:grid;place-items:center;color:#566f65;background:linear-gradient(145deg,#f5dfd1,#eabf9f);border:7px solid #fff;border-radius:50%;font-size:21px;font-weight:700;box-shadow:0 14px 25px rgba(14,61,47,.17)}.art-person.one{left:0}.art-person.two{left:61px;background:linear-gradient(145deg,#dce9f4,#b9d0e5)}.art-check{position:absolute;right:-17px;top:-18px;width:59px;height:59px;display:grid;place-items:center;color:#176b57;background:#fff4ca;border:6px solid rgba(255,255,255,.9);border-radius:20px;transform:rotate(7deg)}.art-check svg{width:29px;stroke-width:2.7}.auth-panel{display:grid;place-items:center;padding:35px;background:radial-gradient(circle at 20% 15%,#e7f4ef,transparent 18rem)}.auth-card{width:min(410px,100%);padding:40px;background:rgba(255,255,255,.88);border:1px solid rgba(214,227,220,.9);border-radius:25px;box-shadow:0 24px 70px rgba(28,74,58,.11);backdrop-filter:blur(15px)}.auth-icon{width:49px;height:49px;display:grid;place-items:center;padding:0;color:var(--green);background:var(--green-soft);border:0;border-radius:15px;font:inherit;cursor:default}.auth-icon:focus-visible{outline:3px solid rgba(109,76,219,.25);outline-offset:3px}.auth-card h2{margin:22px 0 6px;font-size:27px}.auth-card>p{margin:0 0 25px;color:#7c8e85;font-size:12px;line-height:1.7}.auth-card label,.settings-card form>label,.textarea-field,.role-field,.password-field,.file-field{display:grid;gap:6px;margin-top:13px;color:#677c72;font-size:11px}.auth-card input,.settings-card input,.role-field select,.password-field input,.file-field input{width:100%;height:45px;padding:0 13px;font-size:13px}.auth-submit{width:100%;margin-top:19px}.auth-card .auth-error{min-height:18px;margin:9px 0 -6px;color:#b35f5a;font-size:10px}.auth-card>small{display:block;margin-top:14px;color:#98a69f;text-align:center;font-size:10px}.topbar-right{display:flex;align-items:center;gap:15px}.user-chip{display:flex;align-items:center;gap:6px;padding-left:15px;border-left:1px solid #e3eae6;color:#657c71;font-size:10px}.user-chip svg{width:14px}.user-chip b{font-weight:600}
.auth-recovery-dialog{width:min(500px,calc(100% - 32px))}.auth-recovery-dialog form{padding:26px}.auth-recovery-help{display:block;margin-top:9px;color:#87958e;font-size:10px;line-height:1.6}.auth-recovery-status{min-height:20px;margin:13px 0 0;color:#9a625c;font-size:11px;line-height:1.6}.auth-recovery-status.success{color:#26745c}.auth-recovery-dialog .dialog-submit{width:100%;margin-top:16px}

/* Views and navigation */
.view{animation:viewIn .28s ease both}.view[hidden]{display:none}.desktop-nav .nav-view.active,.mobile-nav .nav-view.active{color:var(--green);background:var(--green-soft);font-weight:600}@keyframes viewIn{from{opacity:0;transform:translateY(6px)}}.teacher-card>button{width:32px;height:32px;display:grid;place-items:center;margin-left:auto;color:#9caaa2;border:0;border-radius:9px;background:transparent}.teacher-card>button:hover{color:var(--green);background:#eff5f2}.teacher-card>button svg{width:16px}.teacher-card span b{font-weight:400}.teacher-avatar.has-photo,.teacher-photo.has-photo,.student-avatar.has-photo{background-size:cover;background-position:center;color:transparent}.view-hero{position:relative;min-height:210px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:35px 44px;color:#fff;border-radius:24px;box-shadow:0 18px 45px rgba(20,88,69,.14)}.view-hero h1{margin:9px 0 5px;font-size:38px}.view-hero p{margin:0;color:rgba(255,255,255,.76);font-size:13px}.subject-hero{background:linear-gradient(125deg,#24556c,#39768b 55%,#8a96c4)}.subject-hero::before,.settings-hero::before{content:"";position:absolute;inset:0;opacity:.16;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to left,#000,transparent 58%)}.subject-hero-art{position:relative;width:260px;height:140px}.subject-hero-art i{position:absolute;width:105px;height:135px;border:6px solid rgba(255,255,255,.86);border-radius:16px;background:linear-gradient(145deg,#f3d78f,#d6a75f);box-shadow:0 16px 28px rgba(25,54,72,.22);transform:rotate(-9deg)}.subject-hero-art i:nth-child(2){left:72px;top:-8px;background:linear-gradient(145deg,#d6ece7,#8dc0b5);transform:rotate(2deg)}.subject-hero-art i:nth-child(3){left:145px;top:7px;background:linear-gradient(145deg,#e1dcf0,#9ba6d0);transform:rotate(11deg)}.settings-hero{background:linear-gradient(125deg,#31544c,#477b6d 58%,#8cae9f)}.settings-hero-lock{position:relative;width:130px;height:130px;display:grid;place-items:center;margin-right:55px;color:#24654f;background:linear-gradient(145deg,#fff,#dcece6);border:8px solid rgba(255,255,255,.25);border-radius:35px;box-shadow:0 20px 35px rgba(18,64,50,.22);transform:rotate(5deg)}.settings-hero-lock svg{width:58px;height:58px;stroke-width:1.5}.view-section,.settings-card{margin-top:22px;padding:28px;background:#fff;border:1px solid var(--border);border-radius:21px;box-shadow:0 10px 32px rgba(31,79,62,.045)}.view-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.view-heading h2,.settings-title h2{margin:6px 0 0;font-size:21px}.view-heading h2 b{display:inline-block;margin-left:6px;padding:3px 8px;color:#638477;background:#eff5f2;border-radius:7px;font-size:9px;font-weight:500}

/* Subjects */
.subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:23px}.subject-card{overflow:hidden;border:1px solid #e3ebe6;border-radius:17px;background:#fff;transition:.18s ease}.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.subject-cover{position:relative;height:155px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#dcefe8,#c5dfd6)}.subject-cover img{width:100%;height:100%;object-fit:cover}.subject-placeholder{font-size:42px;font-weight:700;color:rgba(40,91,74,.45)}.subject-code{position:absolute;left:12px;top:12px;padding:5px 8px;color:#365b50;background:rgba(255,255,255,.86);border-radius:8px;font-size:9px;backdrop-filter:blur(8px)}.subject-body{padding:16px}.subject-body h3{margin:0;font-size:15px}.subject-body p{height:42px;overflow:hidden;margin:6px 0 14px;color:#7e8f87;font-size:11px;line-height:1.8}.subject-actions{display:flex;gap:7px;padding-top:12px;border-top:1px solid #edf1ef}.subject-actions button{min-height:34px;display:flex;align-items:center;justify-content:center;gap:5px;color:#647a70;border:1px solid #e2e9e5;border-radius:9px;background:#fafcfa;font-size:9px}.subject-actions .edit-subject{flex:1}.subject-actions .delete-subject{width:35px;color:#b06d68;background:#fbefed;border-color:#f1dcda}.subject-actions svg{width:13px}.subject-upload{display:block;margin-top:20px;cursor:pointer}.subject-image-preview{height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;color:#6f857a;border:1px dashed #bcd1c6;border-radius:15px;background:linear-gradient(145deg,#f1f8f4,#edf3f7)}.subject-image-preview svg{width:29px}.subject-image-preview b{font-size:11px;font-weight:500}.subject-image-preview.has-photo{background-size:cover;background-position:center}.subject-image-preview.has-photo>*{display:none}.subject-fields{grid-template-columns:1fr 140px}.textarea-field textarea{width:100%;padding:11px 13px;resize:vertical;font-size:12px;line-height:1.6}.file-field{margin-top:14px}.file-field input{height:auto;padding:9px}.file-field small{color:#95a39c;font-size:9px}

/* Settings and permissions */
.settings-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}.settings-card{min-width:0}.settings-title{display:flex;align-items:center;gap:12px}.settings-title h2{margin:0;font-size:18px}.settings-title p{margin:3px 0 0;color:#85968d;font-size:10px}.teacher-photo-wrap{display:flex;align-items:center;gap:15px;margin:22px 0}.teacher-photo{width:88px;height:88px;display:grid;place-items:center;color:#667b71;background:linear-gradient(145deg,#e0eee7,#cadfd5);border-radius:25px;font-size:27px;font-weight:700}.upload-button{position:relative}.settings-card form>.button{margin-top:17px}.account-settings>.button{margin:20px 0 10px}.account-list{display:grid;gap:8px;margin-top:10px}.account-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #e5ece8;border-radius:13px}.account-avatar{width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;color:#527565;background:#e5f1eb;border-radius:12px;font-size:12px;font-weight:700}.account-info{min-width:0;flex:1}.account-info strong{display:block;font-size:12px}.account-info span{display:block;margin-top:2px;color:#87978f;font-size:9px}.permission-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.permission-tags i{padding:2px 5px;color:#5f7e71;background:#eff5f2;border-radius:5px;font-size:7px;font-style:normal}.account-actions{display:flex;gap:5px}.account-actions button{width:32px;height:32px;display:grid;place-items:center;color:#657b71;border:1px solid #e1e8e4;border-radius:9px;background:#fafcfa}.account-actions button:last-child{color:#b06d68;background:#fbefed}.account-actions svg{width:13px}.role-field select{width:100%;height:43px;padding:0 11px;font-size:12px}.account-fields{margin-top:20px}.permission-fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;padding:14px;border:1px solid #e1e9e4;border-radius:14px}.permission-fieldset legend{padding:0 6px;color:#536d61;font-size:11px;font-weight:600}.permission-fieldset label{display:flex;align-items:flex-start;gap:8px;padding:9px;background:#f8faf9;border-radius:10px}.permission-fieldset input{margin-top:3px;accent-color:var(--green)}.permission-fieldset b{display:block;font-size:10px}.permission-fieldset small{display:block;margin-top:2px;color:#8b9a93;font-size:8px}.password-field{margin-top:18px}.password-field+ .password-field{margin-top:11px}

/* Student photos */
.student-avatar-wrap{position:relative;flex:0 0 auto}.student-photo-button{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;display:grid;place-items:center;color:#fff;border:2px solid #fff;border-radius:8px;background:#28765f;box-shadow:0 4px 9px rgba(23,107,87,.2)}.student-photo-button svg{width:11px}.manage-avatar-button{position:relative;width:36px;height:36px;flex:0 0 auto;padding:0;overflow:hidden;color:#61796e;border:0;border-radius:10px;background:#e7f1ec;background-size:cover;background-position:center}.manage-avatar-button svg{position:absolute;right:1px;bottom:1px;width:12px;padding:2px;color:#fff;background:var(--green);border-radius:4px}
.student-avatar img{width:100%;height:100%;object-fit:cover}

@media(max-width:900px){.auth-screen{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{padding:22px}.subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-grid{grid-template-columns:1fr}.view-hero{min-height:190px}.mobile-nav{grid-template-columns:repeat(5,1fr);width:min(430px,calc(100% - 24px))}}
@media(max-width:600px){.auth-card{padding:28px 22px;border-radius:21px}.auth-card h2{font-size:24px}.topbar-right{gap:7px}.user-chip{padding-left:8px}.user-chip svg{display:none}.view-hero{min-height:190px;padding:27px 23px;border-radius:20px}.view-hero h1{font-size:30px}.view-hero p{max-width:230px;font-size:11px}.subject-hero-art{position:absolute;right:-90px;bottom:9px;transform:scale(.72)}.settings-hero-lock{position:absolute;right:-25px;margin:0;transform:scale(.68) rotate(5deg)}.view-section,.settings-card{padding:20px 14px;border-radius:18px}.subject-grid{grid-template-columns:1fr}.subject-cover{height:180px}.settings-grid{gap:0}.teacher-photo{width:76px;height:76px}.permission-fieldset{grid-template-columns:1fr}.account-row{align-items:flex-start}.permission-tags{display:none}.form-grid.subject-fields,.form-grid.account-fields{grid-template-columns:1fr}.mobile-nav a,.mobile-nav button{font-size:7px}}
.user-chip{padding:7px 9px 7px 15px;border:0;border-left:1px solid #e3eae6;background:transparent}.user-chip:hover{color:var(--green)}.user-chip .logout-icon{width:13px;margin-left:3px}
@media(max-width:600px){.user-chip{padding:7px 5px 7px 8px}.user-chip .logout-icon{display:block}}
@media(max-width:600px){.mobile-nav a,.mobile-nav button{font-size:9px}}

/* Spacious account editor */
#account-dialog{width:min(760px,calc(100% - 32px))}#subject-dialog{width:min(640px,calc(100% - 32px))}#password-dialog{width:min(480px,calc(100% - 32px))}#student-form,#subject-form,#account-form,#password-form{padding:28px}.account-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.account-fields input{width:100%;height:46px;padding:0 13px}.permission-fieldset{gap:12px;padding:18px;margin-top:22px}.permission-fieldset label{min-height:66px;align-items:center;padding:13px 14px}.permission-fieldset input{flex:0 0 auto;width:16px;height:16px;margin:0}.permission-fieldset b{font-size:11px}.permission-fieldset small{margin-top:4px;font-size:9px;line-height:1.45}#account-form .role-field{margin-top:17px}#account-form .dialog-submit{min-height:48px;margin-top:16px}
@media(max-width:600px){#student-form,#subject-form,#account-form,#password-form{padding:20px}.account-fields{grid-template-columns:1fr}.permission-fieldset{grid-template-columns:1fr;padding:13px;gap:8px}.permission-fieldset label{min-height:58px;padding:11px 12px}}

/* Purple and white theme */
:root{--green:#6e4cdb;--green-dark:#4b318e;--green-soft:#f0ebff;--ink:#312b43;--muted:#7d768e;--border:#e8e3f2;--surface:#fff;--shadow:0 16px 42px rgba(75,49,142,.10),0 2px 8px rgba(75,49,142,.04)}
body{color:var(--ink);background:radial-gradient(circle at 88% 2%,rgba(181,160,244,.24) 0,transparent 27rem),radial-gradient(circle at 18% 70%,rgba(220,211,255,.22) 0,transparent 24rem),#f8f7fc}
.sidebar{background:rgba(255,255,255,.96);border-color:#ebe7f3}.brand-mark{background:linear-gradient(145deg,#8d6cf0,#5434b3);box-shadow:0 9px 24px rgba(97,65,193,.28)}.brand em{color:#9c7cf0}.desktop-nav a:hover,.desktop-nav button:hover{color:#6545c4;background:#f5f1ff}.desktop-nav .active,.desktop-nav .nav-view.active{color:#5d3cbd;background:linear-gradient(100deg,#eee8ff,#f6f3ff)}.desktop-nav small{color:#7358c5;background:#fff}.sidebar-insight{border-color:#e8e0f7;background:linear-gradient(150deg,#f8f5ff,#eee9fb)}.sidebar-insight::after{background:rgba(165,134,238,.18)}.sidebar-insight>svg{color:#7e5dd5}.mini-avatars i{color:#675398;background:#e8e0fb;border-color:#f7f3ff}.mini-avatars i:nth-child(2){background:#eee6ff;color:#7f64bd}.mini-avatars i:nth-child(3){background:#e0e8fa;color:#667aab}.teacher-avatar{color:#67559a;background:linear-gradient(145deg,#eee8ff,#ddd3f7)}.teacher-card span i{background:#8a6ee0}.teacher-card>button:hover{color:#6646c6;background:#f1edfb}
.topbar{background:rgba(255,255,255,.82);border-color:#ebe7f2}.save-indicator i,.autosave i{background:#8063d8;box-shadow:0 0 0 4px rgba(128,99,216,.11)}.user-chip:hover{color:#6443c4}
.hero{background:linear-gradient(128deg,#452b81 0%,#6848c7 48%,#9a83df 100%);box-shadow:0 20px 52px rgba(78,48,150,.22)}.hero-glow{left:29%;background:rgba(219,207,255,.24)}.hero::before{opacity:.2}.hero-context span{color:#eeeaff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}.kicker{color:#e5dcff}.classroom-illustration{filter:drop-shadow(0 18px 18px rgba(48,27,101,.2));animation:purpleFloat 6s ease-in-out infinite}.progress-float{box-shadow:0 16px 34px rgba(50,29,106,.22)}.progress-ring{background:conic-gradient(#7655dc var(--progress),#eeeaf7 0)}.progress-ring span{color:#6546c3}
.context-card,.roster,.view-section,.settings-card{border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#eee9f8,#ded4f2) border-box;box-shadow:0 11px 34px rgba(76,54,133,.06)}.soft-icon{color:#6745c7;background:linear-gradient(145deg,#eee8ff,#f5f2ff)}.icon-button{color:#705d96;background:#faf9fd;border-color:#e6e0ef}.icon-button:hover{color:#6543c4;background:#f0ebff}.metric{border-color:#e8e3f1;box-shadow:0 9px 26px rgba(75,49,142,.045)}.metric::before{content:"";position:absolute;width:72px;height:72px;right:-34px;top:-36px;border-radius:50%;background:radial-gradient(circle,rgba(126,94,218,.12),transparent 70%)}.metric:hover{border-color:#dcd2f1;box-shadow:0 16px 36px rgba(75,49,142,.11)}.section-label{color:#7557c6}.roster h2 b,.view-heading h2 b{color:#6d56a2;background:#f2eefb}.button.primary{position:relative;overflow:hidden;border-color:#6847d0;background:linear-gradient(135deg,#8664eb,#5635b1);box-shadow:0 9px 22px rgba(103,70,204,.22)}.button.primary::after{content:"";position:absolute;inset:-40% auto -40% -40%;width:24%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-22deg) translateX(-220%);transition:transform .55s ease;pointer-events:none}.button.primary:hover{box-shadow:0 12px 28px rgba(103,70,204,.32)}.button.primary:hover::after{transform:skewX(-22deg) translateX(700%)}.button.secondary:hover{color:#6543c4;background:#f7f4ff}.search-box:focus-within{border-color:#b9a5eb;box-shadow:0 0 0 3px rgba(106,74,205,.1)}.student-card{border-color:#e9e4f1}.student-card:hover{border-color:#d9cff0;box-shadow:0 13px 31px rgba(73,49,130,.10)}.student-avatar{color:#65568e;background:linear-gradient(145deg,#eee9fb,#dbd2f2)}.student-avatar.tone-1{color:#5e6d9a;background:linear-gradient(145deg,#e8ebfa,#d5ddf2)}.student-avatar.tone-2{color:#8a5f83;background:linear-gradient(145deg,#f5e7f2,#ecd2e5)}.student-avatar.tone-3{color:#7257a0;background:linear-gradient(145deg,#eee5fa,#dcd0ee)}.note-toggle.has-note{color:#6543c4;background:#f0ebff;border-color:#dcd1f4}.student-photo-button{background:linear-gradient(145deg,#8563e7,#5a39b5);box-shadow:0 5px 12px rgba(90,57,181,.27)}
.auth-visual{background:linear-gradient(135deg,#3f2678,#6443bd 58%,#9d89dc)}.auth-visual::before{background:rgba(215,202,255,.20)}.auth-panel{background:radial-gradient(circle at 20% 15%,#eee9fc,transparent 19rem),#faf9fd}.auth-card{border-color:#e3dcf1;box-shadow:0 25px 75px rgba(70,45,132,.15)}.auth-icon{color:#6847cb;background:linear-gradient(145deg,#eee8ff,#f7f5ff)}.art-board{background:linear-gradient(145deg,#f0ecff,#e4def8)}.art-board i{background:#a895df}.art-board i:nth-child(3){background:#c1b5e5}.art-check{color:#6543c4;background:#f2edff}.auth-card input:focus-visible{outline-color:rgba(109,76,219,.3)}
.subject-hero{background:linear-gradient(125deg,#443081,#6850c1 55%,#a58ddf)}.settings-hero{background:linear-gradient(125deg,#3d2b76,#6449b7 58%,#9b88d3)}.settings-hero-lock{color:#6243bd;background:linear-gradient(145deg,#fff,#e8e1f8);box-shadow:0 20px 38px rgba(55,34,112,.28)}.subject-hero-art i{background:linear-gradient(145deg,#d9cdfa,#a88ee8);box-shadow:0 18px 32px rgba(52,32,105,.25)}.subject-hero-art i:nth-child(2){background:linear-gradient(145deg,#efeaff,#c6b7ef)}.subject-hero-art i:nth-child(3){background:linear-gradient(145deg,#dddaf5,#9996d8)}.subject-card{border-color:#e8e2f0}.subject-card:hover{box-shadow:0 16px 38px rgba(71,45,133,.13)}.subject-cover{background:linear-gradient(145deg,#eee9fb,#d9cef2)}.subject-placeholder{color:rgba(82,55,153,.48)}.subject-code{color:#5d4a89}.subject-image-preview{color:#705c9e;border-color:#cfc0ec;background:linear-gradient(145deg,#f5f2fd,#ece7f7)}.teacher-photo{color:#6e59a3;background:linear-gradient(145deg,#eee7ff,#d9cff3)}.account-avatar{color:#67539a;background:#ece6fa}.permission-tags i{color:#685594;background:#f0ecf8}.permission-fieldset input{accent-color:#6847c9}.account-actions button:hover{color:#6543c4;background:#f4f0fc}.manage-avatar-button{color:#685592;background:#ebe5f8}.manage-avatar-button svg{background:#6847c9}dialog{border-color:#ded5ee;box-shadow:0 32px 95px rgba(45,27,91,.31)}dialog::backdrop{background:rgba(42,30,70,.48)}#toast{background:#392865;box-shadow:0 16px 42px rgba(46,29,91,.30)}#toast span{color:#6343be;background:#eee8ff}.mobile-nav{border-color:#e5deef;box-shadow:0 15px 42px rgba(61,40,113,.19)}.mobile-nav .active,.mobile-nav .nav-view.active{color:#6342c1;background:linear-gradient(145deg,#eee8ff,#f6f3ff)}
@keyframes purpleFloat{0%,100%{transform:translateY(-8px)}50%{transform:translateY(-14px)}}
@media(max-width:600px){.hero::after{background:linear-gradient(90deg,rgba(67,42,125,.97) 0,rgba(91,61,171,.88) 48%,transparent 80%)}.classroom-illustration{animation-duration:5s}.view-hero{box-shadow:0 16px 38px rgba(76,49,145,.18)}}

/* KiddyArt Buriram brand logo */
.logo-full{display:block;flex:0 0 auto;overflow:hidden;background:#fff;border:1px solid #eee9f7;box-shadow:0 10px 28px rgba(91,57,181,.14)}.logo-full img{display:block;width:100%;height:100%;object-fit:contain}.site-brand{justify-content:center;padding:0}.site-brand .logo-full{width:132px;height:132px;border-radius:22px}.auth-brand{padding:7px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);border-radius:21px;backdrop-filter:blur(10px)}.auth-brand .logo-full{width:112px;height:112px;border-color:rgba(255,255,255,.58);border-radius:16px;box-shadow:0 12px 30px rgba(38,20,84,.23)}.mobile-brand .logo-full{width:52px;height:52px;border-radius:12px;box-shadow:0 7px 18px rgba(91,57,181,.13)}
.mobile-auth-brand{display:none}
@media(max-width:900px){.auth-panel{position:relative}.mobile-auth-brand{position:absolute;top:18px;left:22px;display:flex;padding:6px;background:rgba(255,255,255,.88);border:1px solid #e7e0f4;border-radius:18px;box-shadow:0 10px 28px rgba(75,49,142,.10);backdrop-filter:blur(10px)}.mobile-auth-brand .logo-full{width:84px;height:84px;border-radius:13px}}
@media(max-width:600px){.mobile-auth-brand{top:14px;left:16px;padding:5px}.mobile-auth-brand .logo-full{width:76px;height:76px;border-radius:12px}.mobile-brand .logo-full{width:48px;height:48px}}

/* Student directory and individual profiles */
.students-hero{background:linear-gradient(125deg,#493087,#7253ce 55%,#a994e5)}
.students-hero::before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to left,#000,transparent 65%)}
.students-hero-art{position:relative;width:285px;height:150px;margin-right:30px}
.students-hero-art i{position:absolute;bottom:10px;width:92px;height:112px;display:grid;place-items:center;color:#6953a1;background:linear-gradient(145deg,#fff,#e8e1fa);border:7px solid rgba(255,255,255,.35);border-radius:46px 46px 25px 25px;box-shadow:0 20px 34px rgba(48,29,99,.22);font-size:27px;font-style:normal;font-weight:700}
.students-hero-art i:nth-child(1){left:5px;transform:rotate(-8deg)}.students-hero-art i:nth-child(2){left:96px;bottom:24px;z-index:2;color:#6b4bc0;transform:scale(1.08)}.students-hero-art i:nth-child(3){left:190px;transform:rotate(8deg)}
.directory-toolbar{display:flex;align-items:end;gap:12px;margin-top:20px;padding:18px 20px;background:#fff;border:1px solid #e7e1f1;border-radius:18px;box-shadow:0 10px 30px rgba(75,49,142,.055)}
.directory-toolbar label{display:grid;gap:5px;color:#7f778e;font-size:9px}.directory-classroom select,.directory-toolbar .filter-box select{height:42px;min-width:138px;padding:0 11px;font-size:11px}.directory-search{width:auto;min-width:220px;flex:1}.directory-toolbar>.button{min-height:42px}
.directory-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.directory-metrics article{min-height:100px;display:flex;align-items:center;gap:14px;padding:19px 21px;background:#fff;border:1px solid #e8e2f1;border-radius:17px;box-shadow:0 9px 25px rgba(75,49,142,.045)}.directory-metrics small{display:block;margin-bottom:4px;color:#8b8498;font-size:9px}.directory-metrics strong{font-size:25px}.directory-metrics article div>span{margin-left:4px;color:#9991a7;font-size:9px}.directory-metrics .attention-icon{color:#a56c27;background:#fff1d7}
.student-directory-section{margin-top:14px;padding:27px;background:#fff;border:1px solid transparent;border-radius:21px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#eee9f8,#ded4f2) border-box;box-shadow:0 11px 34px rgba(76,54,133,.06)}.student-directory-section .view-heading>p{margin:0;color:#918a9d;font-size:10px}.student-directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:21px}
.directory-student-card{position:relative;min-width:0;display:flex;align-items:center;gap:13px;padding:15px;color:var(--ink);text-align:left;background:#fff;border:1px solid #e9e4f1;border-radius:16px;transition:.18s ease;animation:cardIn .28s both}.directory-student-card:hover{transform:translateY(-2px);border-color:#d7ccf0;box-shadow:0 13px 31px rgba(73,49,130,.10)}.directory-student-card.needs-attention::before{content:"";position:absolute;top:12px;left:12px;width:8px;height:8px;background:#e4a858;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 3px rgba(228,168,88,.16)}
.directory-avatar{width:68px;height:68px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#705c9d;background:linear-gradient(145deg,#eee9fb,#d9cef2);border-radius:20px;font-size:21px;font-weight:700}.directory-avatar.tone-1{color:#5e6d9a;background:linear-gradient(145deg,#e8ebfa,#d5ddf2)}.directory-avatar.tone-2{color:#8a5f83;background:linear-gradient(145deg,#f5e7f2,#ecd2e5)}.directory-avatar.tone-3{color:#7257a0;background:linear-gradient(145deg,#eee5fa,#dcd0ee)}.directory-avatar img{width:100%;height:100%;object-fit:cover}
.directory-student-copy{min-width:0;flex:1}.directory-student-copy strong,.directory-student-copy small,.directory-contact{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-student-copy strong{font-size:12px}.directory-student-copy small{margin-top:4px;color:#8d8699;font-size:9px}.directory-contact{margin-top:8px;color:#766c87;font-size:8px}
.directory-card-stats{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}.directory-status{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;color:#7f788b;background:#f3f1f6;border-radius:8px;font-size:8px}.directory-status svg{width:11px;height:11px}.directory-status.status-present{color:#347a5b;background:#e8f5ed}.directory-status.status-late{color:#a67825;background:#fff3d7}.directory-status.status-leave{color:#66719b;background:#eff1fa}.directory-status.status-absent{color:#ad6661;background:#faeae8}.directory-stars{display:flex;align-items:center;gap:3px;color:#9a712d;font-size:8px}.directory-stars svg{width:12px;color:#d5a443}.directory-rate{color:#948c9f;font-size:8px}.directory-open{display:grid;place-items:center;color:#8e82a1;transform:rotate(-90deg)}.directory-open svg{width:16px}

.student-profile-dialog{width:min(1120px,calc(100% - 32px));max-width:none;max-height:92vh;padding:0;overflow:hidden;border:1px solid #ded5ee;border-radius:27px;background:#faf9fd}.student-profile-dialog::backdrop{background:rgba(42,30,70,.55);backdrop-filter:blur(4px)}.student-profile-shell{max-height:92vh;overflow:auto}.student-profile-header{position:sticky;z-index:5;top:0;display:flex;align-items:center;gap:16px;padding:22px 26px;color:#fff;background:linear-gradient(120deg,#432a7e,#6b49c5 58%,#9580da);box-shadow:0 8px 26px rgba(63,40,117,.16)}.student-profile-header::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}.student-profile-header>*{position:relative;z-index:1}.profile-avatar{width:78px;height:78px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#6348a9;background:linear-gradient(145deg,#fff,#e8e0fa);border:4px solid rgba(255,255,255,.72);border-radius:24px;background-size:cover;background-position:center;font-size:25px;font-weight:700;box-shadow:0 12px 28px rgba(37,21,76,.20)}.profile-heading{min-width:0}.profile-heading>span{color:#dbd1f8;font-size:8px;font-weight:700;letter-spacing:.15em}.profile-heading h2{overflow:hidden;margin:4px 0 5px;text-overflow:ellipsis;white-space:nowrap;font-size:24px}.profile-heading p{display:flex;align-items:center;gap:8px;margin:0;color:rgba(255,255,255,.72);font-size:9px}.profile-heading p b{color:#fff;font-weight:500}.profile-heading p i{width:3px;height:3px;background:rgba(255,255,255,.5);border-radius:50%}.profile-status{display:flex;align-items:center;gap:6px;margin-left:auto;padding:8px 11px;color:#5f5870;background:rgba(255,255,255,.9);border-radius:10px;font-size:9px;font-weight:600}.profile-status svg{width:14px}.profile-status.status-present{color:#327557}.profile-status.status-late{color:#a37424}.profile-status.status-absent{color:#ad625e}.profile-status.status-leave{color:#63709c}.student-profile-header .dialog-close{position:static;color:#fff;background:rgba(255,255,255,.13)}.student-profile-header .dialog-close:hover{background:rgba(255,255,255,.22)}
.profile-tabs{position:sticky;z-index:4;top:122px;display:flex;gap:6px;padding:10px 24px;background:rgba(255,255,255,.94);border-bottom:1px solid #ebe5f3;backdrop-filter:blur(12px)}.profile-tabs button{min-height:40px;display:flex;align-items:center;gap:7px;padding:0 13px;color:#81788f;background:transparent;border:0;border-radius:10px;font-size:10px}.profile-tabs button svg{width:15px}.profile-tabs button:hover{color:#6847c9;background:#f4f0fc}.profile-tabs button.active{color:#5f3cbe;background:linear-gradient(145deg,#ece6ff,#f5f2ff);font-weight:600}
.profile-pane{padding:25px;animation:viewIn .25s ease both}.profile-photo-editor{display:flex;align-items:center;gap:18px;padding:17px;background:#f7f4fc;border:1px solid #e7dff3;border-radius:17px}.profile-photo-preview{width:96px;height:96px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#67529d;background:linear-gradient(145deg,#eee8ff,#d9cff3);border-radius:25px;background-size:cover;background-position:center;font-size:30px;font-weight:700}.profile-photo-editor>div:last-child{min-width:0}.profile-photo-editor strong{display:block;font-size:12px}.profile-photo-editor p{margin:5px 0 12px;color:#8e869a;font-size:9px}.profile-photo-editor>div>div{display:flex;gap:7px}.button.subtle{color:#8a6371;background:transparent;border:1px solid #e7dce3}.button.danger{color:#aa5f5a;background:#fff2f0;border:1px solid #f0d8d5}.button.danger:hover{background:#fbe7e4}.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}.profile-form-grid label{display:grid;gap:6px;color:#71687f;font-size:10px}.profile-form-grid input,.profile-form-grid select,.profile-form-grid textarea{width:100%;min-height:44px;padding:0 12px;border-color:#dfd8e8;font-size:12px}.profile-form-grid textarea{padding:11px 12px;resize:vertical}.wide-field{grid-column:1/-1}.profile-form-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.profile-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.profile-summary-grid article{padding:18px 20px;background:linear-gradient(145deg,#f7f4ff,#fff);border:1px solid #e8e1f2;border-radius:16px}.profile-summary-grid span{display:block;color:#8b8398;font-size:9px}.profile-summary-grid strong{display:block;margin-top:7px;color:#513695;font-size:22px}
.attendance-editor-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:14px;margin-top:14px}.profile-editor-card,.profile-history-card{padding:20px;background:#fff;border:1px solid #e8e2f0;border-radius:18px;box-shadow:0 9px 26px rgba(75,49,142,.045)}.profile-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.profile-card-heading h3{margin:4px 0 0;font-size:15px}.profile-card-heading>svg{width:18px;color:#7052cb}.profile-card-heading>input{height:37px;padding:0 8px;font-size:10px}.compact-grid{gap:10px;margin-top:16px}.profile-editor-card>.button{margin-top:15px}.attendance-calendar{margin-top:16px}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekdays{margin-bottom:6px}.calendar-weekdays span{color:#9a92a5;text-align:center;font-size:8px}.calendar-day{min-width:0;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#746c80;background:#faf9fc;border:1px solid transparent;border-radius:9px}.calendar-day:hover{border-color:#d8cdf0}.calendar-day b{font-size:10px}.calendar-day small{font-size:6.5px}.calendar-day.blank{background:transparent}.calendar-day.status-present{color:#39785d;background:#edf8f1}.calendar-day.status-late{color:#9b742a;background:#fff6df}.calendar-day.status-leave{color:#66719a;background:#f1f2fa}.calendar-day.status-absent{color:#a6635f;background:#fceeed}.calendar-day.selected{outline:2px solid #7958d8;outline-offset:1px}.calendar-legend{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.calendar-legend span{padding:4px 7px;border-radius:6px;font-size:7px}.calendar-legend .status-present{color:#39785d;background:#edf8f1}.calendar-legend .status-late{color:#9b742a;background:#fff6df}.calendar-legend .status-leave{color:#66719a;background:#f1f2fa}.calendar-legend .status-absent{color:#a6635f;background:#fceeed}
.profile-history-card{margin-top:14px}.profile-history-list{display:grid;gap:7px;margin-top:15px}.profile-history-row{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;color:var(--ink);text-align:left;background:#faf9fc;border:1px solid #ece7f2;border-radius:12px}.history-attendance-row{cursor:pointer}.history-attendance-row:hover{border-color:#d8cdf0;background:#f8f5ff}.history-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;color:#6d54b4;background:#eee9fa;border-radius:10px;font-size:12px;font-weight:700}.history-icon svg{width:14px}.history-icon.status-present,.history-icon.positive{color:#39785d;background:#e7f5ed}.history-icon.status-late{color:#a17627;background:#fff2d5}.history-icon.status-leave{color:#65709a;background:#eceffa}.history-icon.status-absent,.history-icon.negative{color:#a8615d;background:#fae8e6}.history-main{min-width:0;flex:1}.history-main strong,.history-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-main strong{font-size:10px}.history-main small{margin-top:3px;color:#8f879b;font-size:8px}.history-meta{text-align:right}.history-meta b,.history-meta small{display:block}.history-meta b{font-size:9px}.history-meta small{margin-top:3px;color:#958da0;font-size:7px}.profile-empty-history{padding:22px;color:#958da0;text-align:center;background:#faf9fc;border:1px dashed #ddd5e9;border-radius:12px;font-size:9px}
.stars-layout{display:grid;grid-template-columns:260px 1fr;gap:14px}.star-balance-card{display:flex;align-items:center;gap:17px;padding:24px;color:#fff;background:linear-gradient(135deg,#6c48c9,#9876e4);border-radius:20px;box-shadow:0 15px 34px rgba(91,58,181,.2)}.star-balance-card>span{width:64px;height:64px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:20px}.star-balance-card svg{width:30px}.star-balance-card small{color:#ded3fb;font-size:9px}.star-balance-card strong{display:inline-block;margin-top:2px;font-size:36px}.star-balance-card p{display:inline;margin:0 0 0 5px;font-size:10px}.star-form-row{display:grid;grid-template-columns:120px 90px 1fr auto;gap:8px;margin-top:17px}.star-form-row select,.star-form-row input{min-width:0;height:42px;padding:0 10px;font-size:10px}.star-form-row .button{min-height:42px}
.notes-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}.notes-layout textarea{width:100%;margin-top:16px;padding:12px;border-color:#dfd7e8;resize:vertical;font-size:11px;line-height:1.7}.profile-alert-list{display:grid;gap:8px;margin-top:16px}.profile-alert{display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px}.profile-alert>span{width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px}.profile-alert svg{width:14px}.profile-alert strong,.profile-alert small{display:block}.profile-alert strong{font-size:10px}.profile-alert small{margin-top:3px;font-size:8px}.profile-alert.danger{color:#9c5b57;background:#fbedeb}.profile-alert.warning{color:#976f28;background:#fff5df}.profile-alert.info{color:#665695;background:#f0ecfa}.profile-alert.success{color:#347458;background:#eaf6ef}

@media(max-width:900px){.student-directory-grid{grid-template-columns:1fr}.directory-toolbar{flex-wrap:wrap}.directory-search{order:3;flex-basis:100%}.students-hero-art{position:absolute;right:-75px;bottom:10px;transform:scale(.8)}.student-profile-dialog{width:calc(100% - 20px);max-height:95vh}.student-profile-shell{max-height:95vh}.attendance-editor-layout,.notes-layout{grid-template-columns:1fr}.stars-layout{grid-template-columns:1fr}.profile-tabs{top:122px;overflow-x:auto}.profile-tabs button{flex:0 0 auto}}
@media(max-width:600px){.students-hero{min-height:235px}.students-hero p{max-width:235px}.directory-toolbar{padding:14px}.directory-classroom,.directory-toolbar .filter-box{flex:1}.directory-classroom select,.directory-toolbar .filter-box select{width:100%;min-width:0}.directory-toolbar>.button{width:100%}.directory-metrics{grid-template-columns:1fr}.directory-metrics article{min-height:82px}.student-directory-section{padding:20px 12px}.student-directory-section .view-heading>p{display:none}.directory-student-card{gap:10px;padding:12px}.directory-avatar{width:56px;height:56px;border-radius:17px}.directory-card-stats{gap:4px}.directory-rate{display:none}.directory-open{display:none}.student-profile-dialog{width:100%;max-height:100vh;border-radius:0}.student-profile-shell{max-height:100vh}.student-profile-header{gap:11px;padding:16px 14px}.profile-avatar{width:58px;height:58px;border-radius:18px}.profile-heading h2{max-width:175px;font-size:17px}.profile-heading p{gap:5px}.profile-status{position:absolute;right:51px;bottom:11px;padding:5px 7px;font-size:7px}.student-profile-header .dialog-close{margin-left:auto}.profile-tabs{top:90px;padding:8px 10px}.profile-tabs button{min-height:37px;padding:0 10px;font-size:9px}.profile-pane{padding:15px 12px}.profile-photo-editor{align-items:flex-start;padding:13px}.profile-photo-preview{width:75px;height:75px;border-radius:20px}.profile-photo-editor>div>div{flex-wrap:wrap}.profile-form-grid{grid-template-columns:1fr}.profile-form-actions{flex-direction:column-reverse}.profile-form-actions .button{width:100%}.profile-summary-grid{gap:6px}.profile-summary-grid article{padding:13px 10px}.profile-summary-grid strong{font-size:17px}.profile-editor-card,.profile-history-card{padding:15px 12px}.calendar-weekdays,.calendar-days{gap:3px}.calendar-day{height:42px}.history-meta small{display:none}.star-form-row{grid-template-columns:1fr 80px}.star-form-row input:nth-of-type(2){grid-column:1/-1}.star-form-row .button{width:100%}.stars-layout{gap:10px}}

/* Structured subject and course editor */
.subject-heading-actions{display:flex;align-items:center;gap:9px}.subject-heading-actions select{height:41px;min-width:158px;padding:0 11px;color:#645a75;background:#fff;border:1px solid #e1dbe9;border-radius:10px;font-size:10px}
#subject-dialog{width:min(980px,calc(100% - 32px));max-width:none;max-height:92vh;padding:0;overflow:hidden;border-radius:26px}
#subject-form{max-height:92vh;display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:18px 22px;overflow-y:auto;padding:30px;background:linear-gradient(180deg,#fff 0,#fbfaff 100%)}
#subject-form>.dialog-header{position:sticky;z-index:8;top:0;grid-column:1/-1;display:flex;min-height:88px;margin:-30px -30px 2px;padding:22px 30px;background:rgba(255,255,255,.96);border-bottom:1px solid #ebe5f3;box-shadow:0 8px 24px rgba(75,49,142,.045);backdrop-filter:blur(14px)}
#subject-form>.dialog-header h2{font-size:21px}#subject-form>.dialog-header p{max-width:550px;line-height:1.55}
#subject-form>.subject-upload{grid-column:1;grid-row:2/4;margin:0}.subject-upload .subject-image-preview{height:100%;min-height:255px;padding:18px;color:#755bc0;border:1px dashed #cdbfee;border-radius:18px;background:linear-gradient(145deg,#f7f4ff,#ece6fb)}.subject-upload .subject-image-preview::after{content:"JPG, PNG หรือ WebP";color:#9a90aa;font-size:8px}.subject-upload .subject-image-preview.has-photo::after{display:none}
#subject-form>.subject-fields{grid-column:2;margin:0;grid-template-columns:minmax(0,1fr) 150px;gap:13px}#subject-form>.textarea-field{grid-column:2;margin:0}#subject-form>.textarea-field textarea{min-height:146px;border-color:#dfd8e8;border-radius:11px}
#subject-form label>span,.subject-dynamic-fields label>span,.subject-course-grid label>span{color:#6f667d;font-size:9px;font-weight:500}#subject-form input,#subject-form select,#subject-form textarea{width:100%;border-color:#dfd8e8;background:#fff}#subject-form input:focus-visible,#subject-form select:focus-visible,#subject-form textarea:focus-visible{outline-color:rgba(108,72,201,.23);border-color:#b9a5e9}
.subject-config-section{grid-column:1/-1;padding:21px 22px;background:#fff;border:1px solid #e8e1f2;border-radius:19px;box-shadow:0 9px 26px rgba(75,49,142,.04)}.subject-config-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.subject-config-heading .soft-icon{width:42px;height:42px}.subject-config-heading h3{margin:0;color:#352d45;font-size:15px}.subject-config-heading p{margin:3px 0 0;color:#91899e;font-size:9px;line-height:1.5}
.pricing-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pricing-choice label{position:relative;min-width:0;cursor:pointer}.pricing-choice input{position:absolute;width:1px!important;height:1px;opacity:0;pointer-events:none}.pricing-choice label>span{min-height:76px;display:flex;flex-direction:column;justify-content:center;padding:13px 14px 13px 42px;color:#635a72;background:#faf9fc;border:1px solid #e6e0ed;border-radius:13px;transition:.16s ease}.pricing-choice label>span::before{content:"";position:absolute;left:15px;top:50%;width:15px;height:15px;border:2px solid #c7bdd7;border-radius:50%;transform:translateY(-50%)}.pricing-choice label>span b{font-size:10px}.pricing-choice label>span small{margin-top:4px;color:#958c9f;font-size:8px;line-height:1.4}.pricing-choice input:checked+span{color:#5f3dbb;background:linear-gradient(145deg,#f1ecff,#faf8ff);border-color:#bfaeef;box-shadow:0 7px 20px rgba(94,61,183,.08)}.pricing-choice input:checked+span::before{border:5px solid #7250d1;background:#fff}.pricing-choice input:focus-visible+span{outline:3px solid rgba(108,72,201,.18)}
.subject-dynamic-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;padding:15px;background:#f8f6fc;border:1px solid #ebe5f3;border-radius:14px}.subject-dynamic-fields label,.subject-course-grid label{min-width:0;display:grid;align-content:start;gap:6px}.subject-dynamic-fields input,.subject-dynamic-fields select,.subject-course-grid input,.subject-course-grid select{height:44px;padding:0 12px;border-radius:10px;font-size:11px}.teacher-assignment-fields{margin-top:0}.teacher-assignment-fields label:first-child{grid-column:auto}.teacher-assignment-hint{display:flex;align-items:center;gap:6px;margin:10px 2px 0;color:#887e97;font-size:8.5px;line-height:1.55}.teacher-assignment-hint::before{content:"i";width:17px;height:17px;display:grid;place-items:center;flex:0 0 auto;color:#6846c5;background:#eee8fb;border-radius:50%;font-size:8px;font-weight:700}
.subject-course-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.subject-course-grid label:nth-child(7){grid-column:span 2}.subject-course-grid label:nth-child(8){grid-column:span 2}
#subject-admin-note-field{grid-column:1/-1;margin:0;padding:20px 22px;background:#fffdf8;border:1px solid #eee4cf;border-radius:17px}#subject-admin-note-field textarea{min-height:82px;margin-top:2px;border-color:#e6dcc8}
#subject-form>.dialog-submit{position:sticky;z-index:7;bottom:-30px;grid-column:1/-1;min-height:52px;margin:0 -30px -30px;border-radius:0 0 25px 25px;box-shadow:0 -12px 30px rgba(75,49,142,.12)}
.admin-subject-section[hidden],.subject-dynamic-fields[hidden],#subject-main-teacher-field[hidden],#subject-assistant-field[hidden]{display:none!important}

.subject-grid{align-items:stretch}.subject-card{display:flex;min-width:0;flex-direction:column;border-color:#e6dff0;border-radius:19px;box-shadow:0 8px 24px rgba(73,49,130,.045)}.subject-cover{height:180px;flex:0 0 auto}.subject-cover::after{content:"";position:absolute;inset:auto 0 0;height:42%;pointer-events:none;background:linear-gradient(transparent,rgba(43,25,84,.18))}.course-status,.my-subject-badge{position:absolute;z-index:2;padding:5px 8px;border-radius:8px;font-size:8px;font-weight:600;backdrop-filter:blur(8px)}.course-status{top:12px;right:12px;color:#655b75;background:rgba(255,255,255,.9)}.course-status.status-open{color:#36755b;background:rgba(235,249,241,.94)}.course-status.status-active{color:#5f3dbc;background:rgba(242,237,255,.95)}.course-status.status-paused{color:#9a7228;background:rgba(255,246,222,.95)}.course-status.status-completed{color:#607096;background:rgba(239,242,250,.95)}.my-subject-badge{left:12px;bottom:12px;color:#fff;background:rgba(92,60,181,.88)}
.subject-body{display:flex;flex:1;flex-direction:column;padding:18px}.subject-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.subject-title-row h3{min-width:0;overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.teacher-state{flex:0 0 auto;padding:4px 7px;color:#846821;background:#fff4d8;border-radius:7px;font-size:7.5px;font-weight:600}.teacher-state.assigned{color:#3e735d;background:#eaf6ef}.teacher-state.recruiting{color:#9b633d;background:#faebe1}.subject-body>p{height:40px;margin:7px 0 13px;color:#837b8f;font-size:10px;line-height:1.7}.subject-commercial{padding:12px 13px;background:linear-gradient(145deg,#f3efff,#faf8ff);border:1px solid #e5dcf7;border-radius:12px}.subject-commercial strong,.subject-commercial small{display:block}.subject-commercial strong{color:#5d3eb2;font-size:12px}.subject-commercial small{margin-top:4px;color:#877c96;font-size:8.5px;line-height:1.45}
.subject-teacher-line,.subject-schedule-line{display:flex;align-items:flex-start;gap:8px;margin-top:11px;color:#766d83;font-size:9px;line-height:1.55}.subject-teacher-line svg,.subject-schedule-line svg{width:15px;height:15px;flex:0 0 auto;color:#7657cc}.subject-teacher-line span{min-width:0}.subject-teacher-line b{color:#493c5b;font-weight:600}.subject-teacher-line small{display:block;margin-top:2px;color:#948a9f}.subject-actions{margin-top:auto;padding-top:15px}.subject-actions button{min-height:38px;border-radius:10px}.subject-actions .edit-subject{color:#64518c;background:#faf8fe}.subject-actions .edit-subject:hover{color:#5e3db8;background:#f1ecfc}

@media(max-width:1050px){#subject-form{grid-template-columns:220px minmax(0,1fr)}.subject-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subject-dynamic-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.teacher-assignment-fields label:first-child{grid-column:1/-1}}
@media(max-width:700px){.subject-heading-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}.subject-heading-actions select{flex:1}.view-heading{flex-wrap:wrap}#subject-dialog{width:100%;max-height:100vh;border-radius:0}#subject-form{max-height:100vh;grid-template-columns:1fr;gap:13px;padding:18px}#subject-form>.dialog-header{top:0;grid-column:1;min-height:76px;margin:-18px -18px 0;padding:17px 18px}#subject-form>.dialog-header h2{font-size:18px}#subject-form>.dialog-header p{font-size:8px}#subject-form>.subject-upload{grid-column:1;grid-row:auto}.subject-upload .subject-image-preview{min-height:190px}#subject-form>.subject-fields,#subject-form>.textarea-field{grid-column:1}.subject-config-section{grid-column:1;padding:16px 14px}.pricing-choice,.subject-dynamic-fields,.subject-course-grid{grid-template-columns:1fr}.teacher-assignment-fields label:first-child,.subject-course-grid label:nth-child(7),.subject-course-grid label:nth-child(8){grid-column:auto}#subject-admin-note-field{grid-column:1;padding:16px 14px}#subject-form>.dialog-submit{bottom:-18px;grid-column:1;margin:0 -18px -18px;border-radius:0;min-height:54px}.subject-title-row{align-items:center}.subject-cover{height:190px}}

/* Keep notifications visible above modal dialogs and subject artwork consistent. */
#toast{inset:auto auto 25px 50%;margin:0;z-index:2147483647;max-width:min(430px,calc(100% - 28px));white-space:normal}
#toast p{min-width:0;white-space:normal;line-height:1.45}
body:has(dialog[open]) #toast{bottom:86px}
#subject-form>.subject-upload .subject-image-preview{width:100%;height:auto;min-height:0;aspect-ratio:16/9;background-position:center;background-size:cover}
.subject-cover{height:auto;aspect-ratio:16/9}
.subject-cover img{display:block;object-position:center}
@media(max-width:820px){#toast{bottom:86px}}

/* Student portfolio */
.student-work-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:15px;padding:19px 20px;color:#403650;background:linear-gradient(135deg,#f1ecff,#fff 64%);border:1px solid #e3d9f5;border-radius:19px;box-shadow:0 10px 28px rgba(79,49,147,.06)}.student-work-summary .soft-icon{width:48px;height:48px;color:#6845c8;background:#e8dfff;border-radius:15px}.student-work-summary-copy{min-width:0}.student-work-summary-copy h3{margin:3px 0 4px;font-size:17px}.student-work-summary-copy p{margin:0;color:#8c829a;font-size:9px}.student-work-summary-stats{display:flex;gap:7px}.student-work-summary-stats span{min-width:92px;padding:10px 12px;color:#766b86;text-align:center;background:rgba(255,255,255,.82);border:1px solid #e8e1f1;border-radius:11px;font-size:8px}.student-work-summary-stats b{display:block;margin-bottom:2px;color:#5f3dbb;font-size:17px}.student-work-summary>.button{white-space:nowrap}
.student-work-editor{margin-top:14px;padding:21px}.work-admin-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;color:#6a51aa;background:#f0ebfb;border-radius:8px;font-size:8px}.work-admin-badge svg{width:12px}.student-work-editor-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;margin-top:18px}.student-work-media-editor{min-width:0}.student-work-photo-upload{display:block;cursor:pointer}.student-work-photo-preview{width:100%;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden;color:#7356c1;background:linear-gradient(145deg,#f4f0ff,#e9e1fa);border:1px dashed #c9b8ed;border-radius:16px;background-size:cover;background-position:center;transition:.18s ease}.student-work-photo-preview:hover{border-color:#8f73dc;box-shadow:0 9px 24px rgba(91,59,179,.1)}.student-work-photo-preview svg{width:29px}.student-work-photo-preview b{font-size:10px}.student-work-photo-preview small{color:#978ba5;font-size:8px}.student-work-photo-preview.has-photo>*{display:none}.student-work-media-editor>.button{width:100%;margin-top:8px}.student-work-fields{min-width:0}.student-work-form-grid{margin-top:0}.student-work-form-grid label,.student-work-teacher-field{min-width:0;display:grid;align-content:start;gap:6px;color:#71687f;font-size:10px}.student-work-form-grid select{width:100%;min-height:44px;padding:0 12px;border-color:#dfd8e8;font-size:11px}.student-work-teacher{min-height:44px;display:flex;align-items:center;gap:8px;padding:6px 9px;background:#f8f5fd;border:1px solid #e4dcf0;border-radius:9px}.work-teacher-avatar{width:29px;height:29px;display:grid;place-items:center;flex:0 0 auto;color:#6547b7;background:#e9e1fa;border-radius:8px;font-size:9px;font-weight:700}.student-work-teacher>span:last-child{min-width:0}.student-work-teacher b,.student-work-teacher small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-work-teacher b{color:#4c405d;font-size:9px}.student-work-teacher small{margin-top:2px;color:#958b9f;font-size:7px}.student-work-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.student-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.student-work-card{min-width:0;overflow:hidden;background:#fff;border:1px solid #e6dff0;border-radius:18px;box-shadow:0 9px 25px rgba(72,47,132,.055);transition:transform .18s ease,box-shadow .18s ease}.student-work-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(72,47,132,.1)}.student-work-visual{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:0}.student-work-photo{display:block;cursor:zoom-in;background:#eae3f8}.student-work-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.student-work-photo>span{position:absolute;right:11px;bottom:10px;display:flex;align-items:center;gap:5px;padding:6px 8px;color:#fff;background:rgba(51,34,88,.76);border-radius:8px;font-size:7px;opacity:0;transform:translateY(4px);transition:.18s ease;backdrop-filter:blur(7px)}.student-work-photo:hover>span,.student-work-photo:focus-visible>span{opacity:1;transform:none}.student-work-photo>span svg{width:12px}.student-work-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#8169bd;background:linear-gradient(145deg,#eee8fb,#f8f5ff)}.student-work-placeholder>span{width:47px;height:47px;display:grid;place-items:center;background:rgba(255,255,255,.7);border-radius:15px}.student-work-placeholder svg{width:23px}.student-work-placeholder small{font-size:8px}.student-work-card-body{padding:16px}.student-work-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.student-work-card-heading>div{min-width:0}.student-work-card-heading span{display:block;overflow:hidden;color:#7655c5;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:600}.student-work-card-heading h4{overflow:hidden;margin:4px 0 0;color:#393043;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.student-work-card-heading>strong{display:flex;align-items:center;gap:4px;flex:0 0 auto;padding:6px 8px;color:#805d20;background:#fff4d9;border-radius:8px;font-size:9px}.student-work-card-heading>strong svg{width:13px;color:#d19e35}.student-work-meta{display:flex;flex-wrap:wrap;gap:7px 12px;margin-top:12px}.student-work-meta span{display:flex;align-items:center;gap:5px;min-width:0;color:#81768e;font-size:8px}.student-work-meta span:first-child{max-width:65%}.student-work-meta b{overflow:hidden;color:#5b5068;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.student-work-meta svg{width:13px;flex:0 0 auto;color:#7757cb}.student-work-card-body>p{display:-webkit-box;min-height:34px;overflow:hidden;margin:12px 0 0;color:#81778c;font-size:9px;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:2}.student-work-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid #eee9f3}.student-work-card footer>small{overflow:hidden;color:#9a92a3;text-overflow:ellipsis;white-space:nowrap;font-size:7px}.student-work-actions{display:flex;gap:6px;flex:0 0 auto}.student-work-actions button{height:31px;display:flex;align-items:center;justify-content:center;gap:5px;color:#66517f;background:#faf8fd;border:1px solid #e7e0ee;border-radius:8px;font-size:8px}.student-work-actions .edit-student-work{padding:0 9px}.student-work-actions .delete-student-work{width:31px;color:#aa625e;background:#fff2f0;border-color:#f0d8d5}.student-work-actions svg{width:12px}.student-work-empty{grid-column:1/-1;padding:54px 20px;color:#8d829c;text-align:center;background:linear-gradient(145deg,#faf8ff,#fff);border:1px dashed #d9ceec;border-radius:18px}.student-work-empty>span{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 13px;color:#7454c9;background:#eee8fc;border-radius:18px}.student-work-empty svg{width:27px}.student-work-empty h4{margin:0;color:#4b4058;font-size:14px}.student-work-empty p{margin:6px 0 0;font-size:9px}
.student-work-preview-dialog{width:min(900px,calc(100% - 32px));max-width:none;max-height:92vh;padding:0;overflow:hidden;border:1px solid #ded5ee;border-radius:24px;background:#161022;box-shadow:0 30px 90px rgba(22,14,42,.42)}.student-work-preview-dialog::backdrop{background:rgba(24,16,42,.72);backdrop-filter:blur(7px)}.student-work-preview-shell{position:relative;max-height:92vh;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);overflow:auto}.student-work-preview-shell>.dialog-close{position:absolute;z-index:2;top:14px;right:14px;color:#fff;background:rgba(25,17,43,.6);backdrop-filter:blur(8px)}.student-work-preview-media{min-height:520px;display:grid;place-items:center;overflow:hidden;background:#100b19}.student-work-preview-media>img{width:100%;height:100%;object-fit:contain}.student-work-preview-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#d8cbed;background:radial-gradient(circle at 50% 35%,#3d285e,#171020 68%)}.student-work-preview-placeholder>span{width:72px;height:72px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:23px}.student-work-preview-placeholder svg{width:34px}.student-work-preview-placeholder b{font-size:10px}.student-work-preview-shell>div:last-child{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:34px 28px;color:#fff;background:linear-gradient(145deg,#3f2a73,#7653c6)}.student-work-preview-shell .section-label{color:#d9cef5}.student-work-preview-shell h2{margin:8px 0 6px;font-size:22px}.student-work-preview-shell p{color:rgba(255,255,255,.7);font-size:9px;line-height:1.7}.student-work-preview-stars{width:fit-content;display:flex;align-items:center;gap:6px;margin-top:13px;padding:8px 11px;color:#6d4d16;background:#fff2cd;border-radius:9px;font-size:10px;font-weight:700}.student-work-preview-stars svg{width:14px}.student-work-preview-description{margin-top:17px!important;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
@media(max-width:900px){.student-work-summary{grid-template-columns:auto 1fr auto}.student-work-summary-stats{grid-column:2}.student-work-summary>.button{grid-column:3;grid-row:1/3}.student-work-editor-layout{grid-template-columns:220px minmax(0,1fr)}.student-work-preview-shell{grid-template-columns:1fr}.student-work-preview-media{height:min(58vh,560px);min-height:300px}.student-work-preview-shell>div:last-child{padding:24px;justify-content:flex-start}}
@media(max-width:700px){.student-work-summary{grid-template-columns:auto 1fr;padding:15px}.student-work-summary-copy p{line-height:1.55}.student-work-summary-stats{grid-column:1/-1;width:100%}.student-work-summary-stats span{flex:1}.student-work-summary>.button{grid-column:1/-1;grid-row:auto;width:100%}.student-work-editor{padding:15px 12px}.work-admin-badge{font-size:7px}.student-work-editor-layout{grid-template-columns:1fr;gap:14px}.student-work-photo-preview{aspect-ratio:16/9}.student-work-form-grid{grid-template-columns:1fr}.student-work-form-actions{flex-direction:column-reverse}.student-work-form-actions .button{width:100%}.student-work-grid{grid-template-columns:1fr}.student-work-card-body{padding:14px}.student-work-photo>span{opacity:1;transform:none}.student-work-card footer{align-items:flex-end}.student-work-preview-dialog{width:100%;max-height:100vh;border-radius:0}.student-work-preview-shell{max-height:100vh}.student-work-preview-media{height:55vh;min-height:260px}.student-work-preview-shell>div:last-child{min-height:45vh}.student-work-preview-shell h2{font-size:19px}}

/* Profile check indicator and aligned directory search */
.profile-status{position:relative;width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;margin-left:auto;padding:0;color:#694ac2;background:linear-gradient(145deg,#fff,#eee8ff);border:3px solid rgba(255,255,255,.72);border-radius:50%;box-shadow:0 10px 25px rgba(34,20,74,.2),inset 0 0 0 1px rgba(91,58,181,.08);font-size:0;isolation:isolate}.profile-status::before{content:"";position:absolute;z-index:-1;inset:-7px;border:1px solid rgba(255,255,255,.24);border-radius:50%;opacity:.9}.profile-status svg{width:28px;height:28px;stroke-width:2.7}.profile-status.status-present{color:#277153;background:linear-gradient(145deg,#fff,#dff4e8)}.profile-status.status-late{color:#9b6c17;background:linear-gradient(145deg,#fff,#ffedbd)}.profile-status.status-leave{color:#53669b;background:linear-gradient(145deg,#fff,#e1e7fa)}.profile-status.status-absent{color:#a84f4b;background:linear-gradient(145deg,#fff,#f8deda)}
.directory-toolbar .directory-search{width:auto;height:42px;min-width:220px;display:flex;align-items:center;align-self:end;gap:9px;padding:0 12px}.directory-toolbar .directory-search svg{width:17px;height:17px;flex:0 0 auto}.directory-toolbar .directory-search input{width:100%;height:40px;align-self:center;padding:0;border:0;outline:0;line-height:normal;background:transparent}
@media(max-width:600px){.profile-status{position:absolute;top:21px;right:58px;bottom:auto;width:46px;height:46px;margin:0;border-width:2px}.profile-status::before{inset:-5px}.profile-status svg{width:23px;height:23px}.directory-toolbar .directory-search{width:100%;min-width:0;height:42px}}

/* Attendance dashboard */
#attendance-view{--attendance-purple:#6d43df;--attendance-purple-dark:#3f238d;--attendance-soft:#f2edff;--attendance-line:#e6dff5;display:grid;gap:16px;padding-bottom:8px}
.attendance-search-hero{position:relative;min-height:245px;display:flex;align-items:center;overflow:hidden;padding:34px 50px;color:#fff;border-radius:25px;background:radial-gradient(circle at 75% 20%,rgba(255,255,255,.16),transparent 22%),linear-gradient(125deg,#43228f 0%,#6b3ddd 51%,#8b62ef 100%);box-shadow:0 22px 52px rgba(71,38,153,.22);isolation:isolate}
.attendance-search-hero::before,.attendance-search-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.07)}
.attendance-search-hero::before{width:310px;height:310px;right:-72px;top:-170px}.attendance-search-hero::after{width:260px;height:260px;left:45%;bottom:-210px}
.attendance-hero-copy{position:relative;z-index:2;width:min(66%,720px)}
.attendance-hero-copy .kicker{color:#ded1ff}.attendance-hero-copy h1{margin:10px 0 2px;font-size:clamp(31px,3.25vw,48px);line-height:1.15;letter-spacing:-1.2px}.attendance-hero-copy>p{margin:0;color:rgba(255,255,255,.82);font-size:13px}
.attendance-main-search{width:min(100%,610px);height:58px;display:flex;align-items:center;gap:13px;margin-top:20px;padding:0 16px;color:#4a3487;background:#fff;border:3px solid rgba(235,225,255,.65);border-radius:15px;box-shadow:0 12px 35px rgba(34,17,90,.25),0 0 0 3px rgba(255,255,255,.1)}
.attendance-main-search:focus-within{border-color:#cdbbff;box-shadow:0 13px 38px rgba(34,17,90,.28),0 0 0 5px rgba(255,255,255,.13)}.attendance-main-search svg{width:27px;height:27px;flex:0 0 auto;stroke-width:2.3}.attendance-main-search input{min-width:0;width:100%;height:50px;padding:0;color:#3d3066;background:transparent;border:0;outline:0;font-size:15px}.attendance-main-search input::placeholder{color:#a29aae}.attendance-main-search kbd{padding:4px 7px;color:#8c7ea9;background:#f5f2fb;border:1px solid #e6dff0;border-radius:6px;font-family:inherit;font-size:8px}
.attendance-search-hints{display:flex;align-items:center;gap:9px;margin-top:10px;padding-left:3px;color:rgba(255,255,255,.76);font-size:9px}.attendance-search-hints span{padding:4px 10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:8px}.attendance-search-hints i{width:3px;height:3px;background:rgba(255,255,255,.48);border-radius:50%}
.attendance-hero-art{position:absolute;z-index:1;right:4%;top:23px;width:270px;height:205px}.search-lens{position:absolute;left:28px;top:5px;width:137px;height:137px;border:22px solid rgba(255,255,255,.92);border-radius:50%;background:radial-gradient(circle at 42% 42%,rgba(255,255,255,.2),rgba(204,185,255,.13) 60%,rgba(86,50,188,.2));box-shadow:inset 0 0 0 7px rgba(255,255,255,.18),0 20px 32px rgba(38,18,99,.25);transform:rotate(-42deg)}.search-lens::after{content:"";position:absolute;width:42px;height:105px;left:50%;top:108px;border-radius:24px;background:linear-gradient(90deg,#fff,#d9cdff 45%,#fff);box-shadow:0 12px 22px rgba(41,21,101,.25);transform:translateX(-50%)}.search-lens span{position:absolute;width:46px;height:17px;left:15px;top:17px;border-radius:50%;background:rgba(255,255,255,.48);transform:rotate(-18deg)}
.lens-rays i{position:absolute;z-index:2;width:28px;height:4px;background:#fff;border-radius:4px;box-shadow:0 0 10px rgba(255,255,255,.35)}.lens-rays i:nth-child(1){left:3px;top:49px;transform:rotate(12deg)}.lens-rays i:nth-child(2){left:17px;top:15px;transform:rotate(42deg)}.lens-rays i:nth-child(3){left:0;top:83px;transform:rotate(-20deg)}
.attendance-hero-art p{position:absolute;right:0;top:60px;margin:0;color:rgba(255,255,255,.9);font-size:12px;font-style:italic;line-height:1.6;text-align:center;transform:rotate(-8deg)}
.attendance-live-context{position:absolute;z-index:3;right:22px;bottom:15px;display:flex;gap:7px}.attendance-live-context span{display:flex;align-items:center;gap:6px;padding:6px 9px;color:#ece5ff;background:rgba(50,23,116,.25);border:1px solid rgba(255,255,255,.14);border-radius:8px;font-size:8px;backdrop-filter:blur(8px)}.attendance-live-context svg{width:12px;height:12px}.attendance-live-context b{color:#fff;font-weight:600}
.attendance-context{margin-top:0;gap:18px;padding:15px 18px;border-radius:16px}.attendance-context .context-title{min-width:245px}.attendance-context .context-fields{margin-left:auto}.attendance-context .context-fields select,.attendance-context .context-fields input{width:150px}.attendance-checked{min-width:82px;padding-left:16px;border-left:1px solid #eee9f5;text-align:center}.attendance-checked small{display:block;color:#92899f;font-size:8px}.attendance-checked strong{display:block;margin-top:2px;color:#5837af;font-size:12px}.attendance-export{height:41px;white-space:nowrap}
.attendance-metrics{gap:13px;margin-top:0}.attendance-metrics .metric{min-height:108px;padding:19px 22px;border:1px solid #e8e2f2;border-radius:17px}.attendance-metrics .metric-icon{width:52px;height:52px;border-radius:15px}.attendance-metrics .metric-icon svg{width:25px;height:25px}.attendance-metrics .metric>div:nth-child(2)>span{font-size:11px}.attendance-metrics .metric strong{font-size:27px}.attendance-metrics .metric small{font-size:9px}.metric-percent{margin-left:auto;padding:5px 8px;border-radius:9px;font-size:9px}.present-metric .metric-percent{color:#22a56b;background:#e8f8ef}.late-metric .metric-percent{color:#cb8911;background:#fff5dc}.away-metric .metric-percent{color:#e05267;background:#fff0f2}.attendance-metrics .metric-bar{left:22px;right:22px;bottom:13px}
.attendance-dashboard-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:14px}.attendance-panel{min-width:0;padding:22px;background:#fff;border:1px solid #e7e0f2;border-radius:21px;box-shadow:0 11px 32px rgba(75,49,142,.06)}
.attendance-panel-heading{display:flex;align-items:center;gap:11px}.panel-icon,.roster-heading-icon{width:45px;height:45px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,#8b64f0,#5b34ca);border-radius:13px;box-shadow:0 9px 18px rgba(102,67,207,.2)}.panel-icon svg,.roster-heading-icon svg{width:21px;height:21px}.attendance-panel-heading h2{margin:0;color:#322953;font-size:17px}.attendance-panel-heading p{margin:2px 0 0;color:#91889e;font-size:9px}.attendance-panel-heading p b{color:#6550a0}.attendance-total{margin-left:auto;text-align:right}.attendance-total small{display:block;color:#91899e;font-size:8px}.attendance-total strong{color:#3d277d;font-size:24px}.attendance-total span{margin-left:3px;color:#7d7490;font-size:9px}
.attendance-chart-layout{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:22px;margin-top:19px}.attendance-donut{--present-end:0%;--late-end:0%;--leave-end:0%;--absent-end:0%;width:190px;height:190px;background:conic-gradient(#31b776 0 var(--present-end),#ffb42b var(--present-end) var(--late-end),#4f86ef var(--late-end) var(--leave-end),#ee5269 var(--leave-end) var(--absent-end),#e9e8f2 var(--absent-end) 100%);box-shadow:inset 0 0 0 1px rgba(84,59,145,.04)}.attendance-donut::before{inset:28px;background:#fff;box-shadow:0 0 22px rgba(84,59,145,.05)}.attendance-donut>div{position:relative;z-index:1;display:grid;place-items:center}.attendance-donut #progress-percent{color:#37216f;font-size:34px;line-height:1;font-weight:800}.attendance-donut #progress-title{margin-top:6px;color:#24a86a;font-size:12px}.attendance-donut #progress-subtitle{margin-top:1px;color:#958da2;font-size:9px}
.attendance-legend{display:grid;gap:0}.attendance-legend>div{display:grid;grid-template-columns:10px 1fr auto 42px;align-items:center;gap:8px;min-height:39px;border-bottom:1px solid #f0ecf5;font-size:9px}.attendance-legend>div:last-child{border:0}.attendance-legend i{width:9px;height:9px;border-radius:50%}.attendance-legend span{color:#5f566d}.attendance-legend strong{color:#3c3450;font-size:9px}.attendance-legend b{text-align:right;font-size:9px}.legend-present{background:#31b776}.legend-late{background:#ffb42b}.legend-leave{background:#4f86ef}.legend-absent{background:#ee5269}.attendance-legend>div:nth-child(1) b{color:#22a467}.attendance-legend>div:nth-child(2) b{color:#cb8813}.attendance-legend>div:nth-child(3) b{color:#4a7fdf}.attendance-legend>div:nth-child(4) b{color:#dc4c62}
.attendance-quote{display:flex;align-items:center;gap:11px;margin-top:17px;padding:11px 13px;background:linear-gradient(105deg,#f5f0ff,#fbf9ff);border:1px solid #ebe3fa;border-radius:13px}.attendance-quote>span{width:37px;height:37px;display:grid;place-items:center;background:#e9dfff;border-radius:11px;font-size:18px}.attendance-quote strong,.attendance-quote small{display:block}.attendance-quote strong{color:#4d358b;font-size:9px}.attendance-quote small{margin-top:2px;color:#9288a1;font-size:8px}
.recent-count{margin-left:auto;padding:6px 10px;color:#6040be;background:#eee8ff;border-radius:9px;font-size:9px}.recent-attendance-list{display:grid;gap:7px;margin-top:18px}.recent-attendance-row{width:100%;min-width:0;display:grid;grid-template-columns:43px minmax(0,1fr) auto 106px;align-items:center;gap:10px;padding:9px 11px;color:#3b334f;background:#fff;border:1px solid #eae5f1;border-radius:13px;text-align:left;transition:.16s ease}.recent-attendance-row:hover{border-color:#cfc1ee;background:#fbf9ff;box-shadow:0 8px 18px rgba(81,53,145,.07);transform:translateY(-1px)}.recent-avatar{width:43px;height:43px;display:grid;place-items:center;overflow:hidden;color:#6247a9;background:#eee8ff;border-radius:12px;background-position:center;background-size:cover;font-size:15px;font-weight:700}.recent-avatar.has-photo img{width:100%;height:100%;object-fit:cover}.recent-avatar.tone-1{color:#5468a0;background:#e8edfc}.recent-avatar.tone-2{color:#a04c89;background:#f8e4f2}.recent-avatar.tone-3{color:#2c8c67;background:#e2f6ed}.recent-student{min-width:0}.recent-student strong,.recent-student small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-student strong{font-size:10px}.recent-student small{margin-top:3px;color:#91899e;font-size:8px}.recent-status{min-width:77px;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 9px;border-radius:10px;font-size:8px;font-weight:600}.recent-status svg{width:13px;height:13px}.recent-status.status-present{color:#1f985f;background:#e7f7ee}.recent-status.status-late{color:#b4770b;background:#fff3d5}.recent-status.status-leave{color:#4476d2;background:#eaf1ff}.recent-status.status-absent{color:#d4485e;background:#ffeaed}.recent-time{display:flex;align-items:center;gap:7px;color:#71688a}.recent-time>svg{width:16px;height:16px;flex:0 0 auto}.recent-time b,.recent-time small{display:block;white-space:nowrap}.recent-time b{font-size:8px}.recent-time small{margin-top:2px;color:#a097ad;font-size:7px}.recent-empty{display:grid;place-items:center;min-height:244px;color:#948ba2;text-align:center}.recent-empty>span{width:55px;height:55px;display:grid;place-items:center;color:#7655d6;background:#f0ebff;border-radius:17px}.recent-empty>span svg{width:25px}.recent-empty strong{margin-top:10px;color:#5c526d;font-size:11px}.recent-empty p{margin:4px 0 0;font-size:8px}.recent-open-roster{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;color:#643fd0;background:#fff;border:1px solid #cdbdf4;border-radius:12px;font-size:9px;font-weight:600}.recent-open-roster:hover{color:#fff;background:linear-gradient(135deg,#815be9,#5933c3);border-color:#6942d3}.recent-open-roster svg{width:15px;height:15px}.recent-open-roster svg:last-child{margin-left:2px;transform:rotate(-90deg)}
.attendance-roster{margin-top:0}.attendance-roster .roster-header{justify-content:flex-start}.attendance-roster .roster-header>div:nth-child(2){min-width:0}.attendance-roster .roster-header #mark-all{margin-left:auto}.attendance-roster .roster-main-search{width:min(520px,100%);height:46px;border:2px solid #d8cdf2}.attendance-roster .roster-main-search input{height:42px;font-size:12px}.attendance-roster .roster-tools{align-items:end}.attendance-roster .filter-box select,.attendance-roster .add-student{height:46px}.attendance-roster .student-card{border-radius:15px}

@media(min-width:821px){.sidebar{width:128px;padding:20px 13px 18px;align-items:stretch}.app-shell{margin-left:128px}.sidebar .site-brand{justify-content:center;padding:0}.sidebar .site-brand .logo-full{width:78px;height:78px}.sidebar .desktop-nav{gap:7px;margin-top:23px}.sidebar .desktop-nav>p,.sidebar .desktop-nav small,.sidebar .sidebar-insight{display:none}.sidebar .desktop-nav button,.sidebar .desktop-nav a{min-height:64px;flex-direction:column;justify-content:center;gap:5px;padding:7px 4px;text-align:center;font-size:10px;line-height:1.2}.sidebar .desktop-nav svg{width:21px;height:21px}.sidebar .teacher-card{flex-direction:column;gap:6px;margin-top:auto;padding:14px 0 0;text-align:center}.sidebar .teacher-card>div:nth-child(2){min-width:0}.sidebar .teacher-card strong,.sidebar .teacher-card b{display:block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar .teacher-card span{justify-content:center}.sidebar .teacher-card>button{width:31px;height:31px;display:grid;place-items:center;margin:2px auto 0;color:#8d82a0;background:#f7f4fc;border:0;border-radius:9px}.sidebar .teacher-card>button svg{width:15px}.topbar{padding-inline:30px}main{width:min(1260px,calc(100% - 38px));padding-top:20px}}
@media(max-width:1100px){.attendance-hero-copy{width:72%}.attendance-hero-art{right:-2%;transform:scale(.88)}.attendance-context{flex-wrap:wrap}.attendance-context .context-title{min-width:210px}.attendance-context .context-fields{margin-left:auto}.attendance-checked{order:3;margin-left:auto}.attendance-context .attendance-export{order:4}.attendance-dashboard-grid{grid-template-columns:1fr}.attendance-chart-layout{grid-template-columns:220px 1fr}.attendance-donut{margin-inline:auto}.recent-attendance-row{grid-template-columns:43px minmax(0,1fr) 90px 115px}}
@media(max-width:820px){#attendance-view{gap:12px}.attendance-search-hero{min-height:270px;padding:29px 25px}.attendance-hero-copy{width:78%}.attendance-hero-copy h1{font-size:34px}.attendance-hero-art{right:-34px;top:32px;opacity:.55;transform:scale(.78)}.attendance-live-context{right:14px}.attendance-context .context-fields{width:100%;order:3;margin:0}.attendance-checked{order:4;margin:0 0 0 auto}.attendance-context .attendance-export{order:5}.attendance-dashboard-grid{grid-template-columns:1fr}.attendance-roster .roster-header{flex-wrap:wrap}.attendance-roster .roster-header #mark-all{margin-left:auto}.attendance-roster .roster-tools{grid-template-columns:minmax(0,1fr) auto}.attendance-roster .roster-main-search{grid-column:1/-1;width:100%}}
@media(max-width:600px){.attendance-search-hero{min-height:330px;padding:25px 19px 17px;align-items:flex-start}.attendance-hero-copy{width:100%}.attendance-hero-copy h1{max-width:300px;font-size:29px;letter-spacing:-.6px}.attendance-hero-copy>p{max-width:300px;line-height:1.65}.attendance-main-search{height:55px;margin-top:17px;padding-inline:13px}.attendance-main-search input{font-size:12px}.attendance-main-search kbd{display:none}.attendance-search-hints{flex-wrap:wrap;gap:5px}.attendance-search-hints i{display:none}.attendance-hero-art{right:-68px;top:151px;opacity:.38;transform:scale(.62)}.attendance-hero-art p{display:none}.attendance-live-context{left:18px;right:auto;bottom:13px}.attendance-context{gap:12px;padding:14px}.attendance-context .context-title{width:100%;min-width:0}.attendance-context .context-fields{display:grid;grid-template-columns:1fr 1fr}.attendance-context .context-fields select,.attendance-context .context-fields input{width:100%}.attendance-checked{min-width:0;margin:0;padding:0;border:0;text-align:left}.attendance-context .attendance-export{margin-left:auto;padding-inline:12px}.attendance-export span{display:none}.attendance-metrics{grid-template-columns:1fr}.attendance-metrics .metric{min-height:92px}.attendance-dashboard-grid{gap:12px}.attendance-panel{padding:16px 13px;border-radius:18px}.attendance-panel-heading{align-items:flex-start}.panel-icon{width:40px;height:40px}.attendance-panel-heading h2{font-size:15px}.attendance-total small{display:none}.attendance-total strong{font-size:20px}.attendance-chart-layout{grid-template-columns:1fr;gap:12px}.attendance-donut{width:178px;height:178px}.attendance-legend>div{grid-template-columns:10px 1fr auto 38px}.attendance-quote{margin-top:12px}.recent-attendance-row{grid-template-columns:39px minmax(0,1fr) auto;padding:9px}.recent-avatar{width:39px;height:39px}.recent-time{grid-column:2/-1;padding-top:2px;border-top:1px solid #f0ecf5}.recent-time small{display:inline;margin-left:5px}.recent-status{min-width:68px;padding-inline:7px}.recent-empty{min-height:190px}.attendance-roster{padding:17px 13px}.attendance-roster .roster-heading-icon{display:none}.attendance-roster .roster-header>div:nth-child(2){width:100%}.attendance-roster .roster-header #mark-all{width:100%;margin:10px 0 0}.attendance-roster .roster-tools{display:grid;grid-template-columns:1fr auto}.attendance-roster .filter-box{margin:0}.attendance-roster .add-student{padding-inline:10px}.attendance-roster .student-grid{margin-top:14px}}

/* Google Sheets sync */
.google-sync-settings{grid-column:1/-1}.sync-settings-icon{color:#fff;background:linear-gradient(145deg,#8d66ef,#5733bd);box-shadow:0 8px 20px rgba(94,57,190,.2)}.sync-badge{display:flex;align-items:center;gap:7px;margin-left:auto;padding:7px 10px;color:#7f768f;background:#f3f1f6;border-radius:9px;font-size:8px}.sync-badge i{width:7px;height:7px;background:#aaa2b5;border-radius:50%}.sync-badge b{font-weight:600}.sync-badge.is-ready,.sync-badge.is-success{color:#287453;background:#e9f7ef}.sync-badge.is-ready i,.sync-badge.is-success i{background:#34aa75;box-shadow:0 0 0 4px rgba(52,170,117,.1)}.sync-badge.is-pending,.sync-badge.is-syncing{color:#8a671e;background:#fff5dc}.sync-badge.is-pending i,.sync-badge.is-syncing i{background:#e8a726}.sync-badge.is-syncing i{animation:syncPulse 1s ease infinite}.sync-badge.is-error{color:#a95155;background:#fcebec}.sync-badge.is-error i{background:#df5d66}.sync-badge.is-offline{color:#5b6893;background:#edf0fa}.sync-badge.is-offline i{background:#7182bd}
.google-sync-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);gap:22px;margin-top:22px}.google-sync-form{padding:18px;background:#faf9fd;border:1px solid #ebe5f4;border-radius:16px}.google-sync-form>label:not(.sync-toggle){display:grid;gap:6px;margin-top:13px;color:#6d647a;font-size:10px}.google-sync-form>label:not(.sync-toggle)>input{width:100%;height:44px;padding:0 12px;color:#463c58;border-color:#dfd7e9;font-size:11px}.google-sync-form>label:not(.sync-toggle)>input:focus{border-color:#a991e0;box-shadow:0 0 0 3px rgba(105,72,201,.09);outline:0}.sync-toggle{display:flex!important;align-items:flex-start;gap:11px;margin:0!important;padding:13px;color:#4c425d;background:#fff;border:1px solid #e8e2f0;border-radius:13px;cursor:pointer}.sync-toggle input{width:18px!important;height:18px!important;flex:0 0 auto;margin:1px 0 0;accent-color:#6847cc}.sync-toggle b,.sync-toggle small{display:block}.sync-toggle b{font-size:10px}.sync-toggle small{margin-top:3px;color:#91899d;font-size:8px;line-height:1.5}.sync-photo-toggle{margin-top:13px!important}.google-sync-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.google-sync-actions .button{margin:0}
.google-sync-overview{display:flex;flex-direction:column;gap:11px}.sync-status-card{display:flex;align-items:center;gap:13px;padding:16px;background:linear-gradient(135deg,#f5f1ff,#fbfaff);border:1px solid #e7def6;border-radius:16px}.sync-status-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;color:#6745c7;background:#e9e1ff;border-radius:14px}.sync-status-icon svg{width:21px}.sync-status-card small,.sync-status-card strong,.sync-status-card p{display:block}.sync-status-card>div>small{color:#968ca2;font-size:8px}.sync-status-card strong{margin-top:2px;color:#4f378e;font-size:12px}.sync-status-card p{margin:2px 0 0;color:#8c8398;font-size:8px;line-height:1.5}.sync-status-card[data-sync-state="success"],.sync-status-card[data-sync-state="ready"]{background:linear-gradient(135deg,#edf9f2,#fbfefc);border-color:#d7eddf}.sync-status-card[data-sync-state="success"] .sync-status-icon,.sync-status-card[data-sync-state="ready"] .sync-status-icon{color:#27805a;background:#ddf3e6}.sync-status-card[data-sync-state="error"]{background:#fff7f7;border-color:#f0d8da}.sync-status-card[data-sync-state="error"] .sync-status-icon{color:#b24f57;background:#fce7e9}.sync-status-card[data-sync-state="offline"] .sync-status-icon{color:#596898;background:#e7ebfa}
.sync-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sync-stats>span{padding:12px 14px;background:#fff;border:1px solid #e9e4f0;border-radius:13px}.sync-stats small,.sync-stats strong{display:block}.sync-stats small{color:#948b9f;font-size:8px}.sync-stats strong{margin-top:4px;color:#49376f;font-size:11px}.google-sync-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.google-sync-controls .button{padding-inline:10px}.sync-help{padding:15px;color:#766d83;background:#fff;border:1px solid #e9e4ef;border-radius:14px;font-size:8.5px}.sync-help>strong{color:#4d4161;font-size:10px}.sync-help ol{margin:8px 0 10px;padding-left:18px;line-height:1.8}.sync-help code{padding:2px 4px;color:#5a3cac;background:#f0ebfb;border-radius:4px;font-family:Consolas,monospace;font-size:8px}.sync-help a{display:flex;align-items:center;gap:4px;width:fit-content;color:#633fc3;font-weight:600}.sync-help a:hover{text-decoration:underline}.sync-help a svg{width:12px;height:12px;transform:rotate(-90deg)}.sync-privacy-note{display:flex;align-items:center;gap:7px;margin:16px 0 0;padding-top:13px;color:#8b8297;border-top:1px solid #eee9f3;font-size:8px}.sync-privacy-note svg{width:13px;color:#6544c3}
.save-indicator[data-sync-state="pending"] i,.save-indicator[data-sync-state="syncing"] i{background:#e4a82b;box-shadow:0 0 0 4px rgba(228,168,43,.11)}.save-indicator[data-sync-state="syncing"] i{animation:syncPulse 1s ease infinite}.save-indicator[data-sync-state="success"] i,.save-indicator[data-sync-state="ready"] i{background:#35a974;box-shadow:0 0 0 4px rgba(53,169,116,.1)}.save-indicator[data-sync-state="error"] i{background:#d95a64;box-shadow:0 0 0 4px rgba(217,90,100,.1)}.save-indicator[data-sync-state="offline"] i{background:#7180b8;box-shadow:0 0 0 4px rgba(113,128,184,.1)}@keyframes syncPulse{50%{opacity:.35;transform:scale(.72)}}
@media(max-width:900px){.google-sync-layout{grid-template-columns:1fr}.google-sync-settings{margin-top:18px}}
@media(max-width:600px){.google-sync-settings .settings-title{align-items:flex-start;flex-wrap:wrap}.google-sync-settings .settings-title>div{min-width:0;flex:1}.sync-badge{width:100%;margin:3px 0 0}.google-sync-layout{gap:13px;margin-top:16px}.google-sync-form{padding:13px}.google-sync-actions{display:grid;grid-template-columns:1fr}.google-sync-actions .button{width:100%}.google-sync-controls{grid-template-columns:1fr}.sync-stats{grid-template-columns:1fr 1fr}.sync-help{line-height:1.55}}

/* Public website */
.public-mode .sidebar,.public-mode .app-shell,.public-mode .mobile-nav,.admin-mode .public-site,.auth-locked .public-site{display:none!important}.public-site{min-height:100vh;color:#312848;background:radial-gradient(circle at 92% 6%,rgba(185,162,255,.22),transparent 28rem),#fff}.public-header{position:sticky;z-index:80;top:0;height:82px;display:flex;align-items:center;gap:30px;padding:0 max(28px,calc((100% - 1180px)/2));background:rgba(255,255,255,.9);border-bottom:1px solid #eee9f6;box-shadow:0 8px 30px rgba(61,38,118,.04);backdrop-filter:blur(18px)}.public-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}.public-brand .logo-full{width:55px;height:55px;border-radius:14px}.public-brand b,.public-brand small{display:block}.public-brand b{color:#4d328f;font-size:17px;letter-spacing:-.3px}.public-brand small{margin-top:1px;color:#958ba3;font-size:8px}.public-header nav{display:flex;align-items:center;gap:25px;margin-left:auto}.public-header nav a{position:relative;padding:30px 0;color:#6f657d;font-size:11px;font-weight:500}.public-header nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:19px;height:2px;background:#6e46d6;border-radius:3px;transition:.2s}.public-header nav a:hover{color:#5c38bc}.public-header nav a:hover::after{left:0;right:0}.public-header-actions{display:flex;gap:8px}.public-header-actions button,.public-menu-toggle{height:39px;display:flex;align-items:center;gap:7px;padding:0 13px;border-radius:10px;font-size:9px;font-weight:600}.public-header-actions svg{width:15px}.public-parent-login{color:#5d3db7;background:#f4f0ff;border:1px solid #e5dcfa}.public-staff-login{color:#fff;background:linear-gradient(135deg,#8060e7,#5332ad);border:1px solid #6845c7;box-shadow:0 7px 16px rgba(92,58,184,.18)}.public-menu-toggle{display:none;color:#6142bb;background:#f2edff;border:0}.public-main{width:100%;max-width:none;margin:0;padding:0}.public-hero{position:relative;min-height:620px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;overflow:hidden;padding:68px max(28px,calc((100% - 1180px)/2)) 80px;background:linear-gradient(145deg,#fbfaff,#f2edff 55%,#ece4ff)}.public-hero::before{content:"";position:absolute;right:-90px;top:-110px;width:420px;height:420px;border:1px solid rgba(108,72,205,.13);border-radius:50%;box-shadow:0 0 0 70px rgba(109,72,206,.025),0 0 0 140px rgba(109,72,206,.018)}.public-hero-copy{position:relative;z-index:2;padding-right:30px}.public-eyebrow{display:flex;align-items:center;gap:8px;width:fit-content;padding:7px 11px;color:#6944cc;background:#eee7ff;border:1px solid #e2d6ff;border-radius:9px;font-size:9px;font-weight:700;letter-spacing:.15em}.public-eyebrow svg{width:14px}.public-hero h1{margin:18px 0 14px;color:#302548;font-size:clamp(44px,5vw,68px);line-height:1.14;letter-spacing:-2px}.public-hero h1 em{color:#6d43d8;font-style:normal}.public-hero-copy>p{max-width:550px;margin:0;color:#756b82;font-size:14px;line-height:1.9}.public-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}.public-primary-action,.public-secondary-action{min-height:47px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 19px;border-radius:12px;font-size:11px;font-weight:700;transition:.18s ease}.public-primary-action{color:#fff;background:linear-gradient(135deg,#865fec,#5832bb);border:1px solid #7047d3;box-shadow:0 12px 25px rgba(94,58,190,.22)}.public-primary-action:hover{box-shadow:0 15px 30px rgba(94,58,190,.3);transform:translateY(-2px)}.public-primary-action svg{width:16px;transform:rotate(-90deg)}.public-secondary-action{color:#56476d;background:#fff;border:1px solid #ded6e9}.public-secondary-action svg{width:16px;color:#704bc9}.public-trust{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;color:#7f758c;font-size:9px}.public-trust span{display:flex;align-items:center;gap:5px}.public-trust svg{width:13px;color:#37a879;stroke-width:2.4}.public-hero-visual{position:relative;z-index:1;width:540px;height:470px;justify-self:end}.public-dashboard-preview{position:absolute;z-index:3;left:52px;top:52px;width:410px;height:345px;padding:21px;background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.9);border-radius:30px;box-shadow:0 35px 70px rgba(68,40,133,.2);backdrop-filter:blur(13px);transform:rotate(2deg)}.public-dashboard-preview header{display:flex;gap:6px}.public-dashboard-preview header i{width:7px;height:7px;background:#e5dff0;border-radius:50%}.public-dashboard-preview header i:first-child{background:#8a67e9}.preview-welcome{margin-top:25px;padding:19px;color:#fff;background:linear-gradient(120deg,#52309f,#835ce4);border-radius:18px}.preview-welcome span,.preview-welcome strong{display:block}.preview-welcome span{color:#dcd0ff;font-size:8px}.preview-welcome strong{margin-top:4px;font-size:15px}.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.preview-stats span{padding:16px;background:#f8f5ff;border:1px solid #eee7fb;border-radius:15px}.preview-stats b,.preview-stats small{display:block}.preview-stats b{color:#5635ae;font-size:24px}.preview-stats small{margin-top:2px;color:#8d829b;font-size:8px}.preview-progress{display:grid;gap:10px;margin-top:17px}.preview-progress span{height:9px;overflow:hidden;background:#eeeaf4;border-radius:8px}.preview-progress i{display:block;width:88%;height:100%;background:linear-gradient(90deg,#7d5adf,#ab8cf5);border-radius:8px}.preview-progress span:nth-child(2) i{width:68%;background:linear-gradient(90deg,#38b37c,#83d8af)}.preview-progress span:nth-child(3) i{width:78%;background:linear-gradient(90deg,#f4b83c,#f9d37c)}.public-orbit{position:absolute;border:1px solid rgba(111,72,210,.15);border-radius:50%}.orbit-one{inset:5px 35px 20px 20px}.orbit-two{inset:70px -20px -45px 105px}.public-float-card{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 15px;background:rgba(255,255,255,.96);border:1px solid #eee8f6;border-radius:15px;box-shadow:0 15px 35px rgba(65,40,120,.14);animation:publicFloat 5s ease-in-out infinite}.public-float-card>span{width:37px;height:37px;display:grid;place-items:center;border-radius:11px}.public-float-card b,.public-float-card small{display:block}.public-float-card b{font-size:9px}.public-float-card small{margin-top:2px;color:#958b9f;font-size:7px}.float-attendance{left:3px;top:114px}.float-attendance>span{color:#249260;background:#e3f6ec}.float-attendance svg{width:18px}.float-stars{right:0;bottom:35px;animation-delay:-2s}.float-stars>span{color:#c58913;background:#fff2cd;font-size:20px}
.public-highlights{position:relative;z-index:5;width:min(1080px,calc(100% - 40px));display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:-42px auto 0;padding:15px;background:rgba(255,255,255,.95);border:1px solid #ebe5f4;border-radius:22px;box-shadow:0 20px 45px rgba(68,41,126,.1)}.public-highlights article{display:flex;align-items:center;gap:12px;padding:15px 18px}.public-highlights article+article{border-left:1px solid #eee9f4}.public-highlights article>span{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;color:#6844c7;background:#eee8ff;border-radius:13px}.public-highlights svg{width:20px}.public-highlights strong,.public-highlights p{display:block}.public-highlights strong{font-size:11px}.public-highlights p{margin:3px 0 0;color:#91879d;font-size:8px}.public-section{width:min(1180px,calc(100% - 44px));margin:0 auto;padding:100px 0 20px}.public-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.public-section-heading>div>span,.public-steps-copy>span,.public-contact-copy>span{color:#7652d3;font-size:9px;font-weight:700;letter-spacing:.17em}.public-section-heading h2,.public-steps h2,.public-contact h2{margin:7px 0 5px;color:#302647;font-size:33px;letter-spacing:-.8px}.public-section-heading p{margin:0;color:#8b8197;font-size:11px}.public-section-heading>a{display:flex;align-items:center;gap:5px;color:#6541c4;font-size:10px;font-weight:600}.public-section-heading>a svg{width:14px;transform:rotate(-90deg)}.public-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:28px}.public-course-card{overflow:hidden;background:#fff;border:1px solid #e9e3f1;border-radius:20px;box-shadow:0 11px 30px rgba(67,43,121,.07);transition:.2s}.public-course-card:hover{border-color:#d8cbef;box-shadow:0 19px 42px rgba(67,43,121,.12);transform:translateY(-4px)}.public-course-cover{position:relative;height:190px;display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(145deg,#5a37b0,#9674ec);background-size:cover;background-position:center}.public-course-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(39,22,79,.35),transparent 60%)}.public-course-cover>svg{width:62px;height:62px;opacity:.5}.public-course-cover>span{position:absolute;z-index:2;left:13px;top:13px;padding:6px 9px;color:#5835ae;background:rgba(255,255,255,.9);border-radius:8px;font-size:8px;font-weight:600}.public-course-body{padding:18px}.public-course-code{color:#82769a;font-size:8px}.public-course-body h3{margin:5px 0 6px;font-size:16px}.public-course-body>p{height:38px;overflow:hidden;margin:0;color:#8a8096;font-size:9px;line-height:1.7}.public-course-price{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding:11px 12px;color:#5e40b4;background:#f6f2ff;border-radius:11px}.public-course-price strong{font-size:12px}.public-course-price small{font-size:8px}.public-course-meta{display:grid;gap:7px;margin-top:14px;color:#766c83;font-size:8px}.public-course-meta span{display:flex;align-items:center;gap:6px}.public-course-meta svg{width:13px;color:#7250c8}.public-empty{place-items:center;padding:55px 20px;margin-top:28px;color:#8a8096;background:#faf8fd;border:1px dashed #d9cdef;border-radius:20px;text-align:center}.public-empty:not([hidden]){display:grid}.public-empty>span{width:60px;height:60px;display:grid;place-items:center;color:#6d49c7;background:#eee8ff;border-radius:18px}.public-empty>span svg{width:27px}.public-empty strong{margin-top:12px;color:#4d425a;font-size:13px}.public-empty p{margin:3px 0 0;font-size:9px}.public-teacher-section{padding-bottom:90px}.public-section-heading.centered{justify-content:center;text-align:center}.public-section-heading.centered p{max-width:520px}.public-teacher-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:17px;margin-top:28px}.public-teacher-card{width:260px;padding:25px 20px;background:#fff;border:1px solid #e9e3f1;border-radius:20px;box-shadow:0 10px 28px rgba(67,43,121,.065);text-align:center}.public-teacher-avatar{width:92px;height:92px;display:grid;place-items:center;overflow:hidden;margin:0 auto;color:#6545b6;background:linear-gradient(145deg,#f0ebff,#d9cdf8);border:6px solid #f7f4ff;border-radius:28px;background-size:cover;background-position:center;font-size:27px;font-weight:700;box-shadow:0 10px 24px rgba(80,50,151,.14)}.public-teacher-card h3{margin:13px 0 3px;font-size:14px}.public-teacher-card p{margin:0;color:#8e849a;font-size:9px}.public-teacher-card span{display:inline-flex;margin-top:10px;padding:5px 8px;color:#6042b8;background:#f1ecff;border-radius:7px;font-size:8px}.public-steps{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:85px max(28px,calc((100% - 1080px)/2));color:#fff;background:linear-gradient(130deg,#3e237f,#6840cc 58%,#9470ec)}.public-steps-copy>span{color:#d8caff}.public-steps h2{color:#fff}.public-steps-copy>p{max-width:420px;margin:0;color:rgba(255,255,255,.72);font-size:11px;line-height:1.8}.public-steps-copy .public-primary-action{margin-top:22px;color:#5835b3;background:#fff;border-color:#fff;box-shadow:0 12px 30px rgba(35,17,75,.18)}.public-step-list{display:grid;gap:11px}.public-step-list article{display:grid;grid-template-columns:40px 47px 1fr;align-items:center;gap:11px;padding:14px 17px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:16px;backdrop-filter:blur(8px)}.public-step-list article>b{color:rgba(255,255,255,.45);font-size:18px}.public-step-list article>span{width:43px;height:43px;display:grid;place-items:center;color:#5d3bb9;background:#fff;border-radius:13px}.public-step-list svg{width:19px}.public-step-list strong{font-size:11px}.public-step-list p{margin:3px 0 0;color:rgba(255,255,255,.68);font-size:8px}.public-contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center;padding:90px max(28px,calc((100% - 1080px)/2));background:#f8f5ff}.public-contact-copy>p{max-width:420px;color:#80758d;font-size:11px;line-height:1.8}.public-contact-points{display:grid;gap:9px;margin-top:24px}.public-contact-points span{display:flex;align-items:center;gap:8px;color:#6d627a;font-size:9px}.public-contact-points svg{width:15px;color:#2fa672}.public-application-form{padding:25px;background:#fff;border:1px solid #e7e0f0;border-radius:23px;box-shadow:0 18px 45px rgba(69,42,130,.1)}.public-form-heading{display:flex;align-items:center;gap:11px}.public-form-heading>span{width:45px;height:45px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#8962ea,#5835b8);border-radius:13px}.public-form-heading svg{width:20px}.public-form-heading strong,.public-form-heading p{display:block}.public-form-heading strong{font-size:14px}.public-form-heading p{margin:2px 0 0;color:#91869d;font-size:8px}.public-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}.public-form-grid label{display:grid;gap:5px;color:#766b83;font-size:9px}.public-form-grid input,.public-form-grid select,.public-form-grid textarea{width:100%;min-height:43px;padding:0 11px;color:#463b56;border-color:#e0d9e8;font-size:10px}.public-form-grid textarea{padding:10px 11px;resize:vertical}.public-honeypot{position:absolute!important;left:-10000px!important}.public-form-status{min-height:16px;margin:8px 0 0;color:#a64e55;font-size:8px}.public-application-form>.public-primary-action{width:100%;margin-top:7px;border:0}.public-application-form>.public-primary-action svg{transform:none}.public-footer{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:70px;padding:55px max(28px,calc((100% - 1080px)/2)) 70px;color:#d8cff0;background:#2f2052}.public-footer .public-brand b{color:#fff}.public-footer .public-brand small{color:#aaa0c3}.public-footer>div>p{max-width:390px;margin:13px 0 0;color:#a99fbc;font-size:9px;line-height:1.7}.public-footer>div:nth-child(n+2){display:grid;align-content:start;gap:9px;min-width:120px}.public-footer>div:nth-child(n+2) strong{margin-bottom:4px;color:#fff;font-size:10px}.public-footer>div:nth-child(n+2) a,.public-footer>div:nth-child(n+2) button{padding:0;color:#afa6c2;background:none;border:0;text-align:left;font-size:9px}.public-footer>div:nth-child(n+2) a:hover,.public-footer>div:nth-child(n+2) button:hover{color:#fff}.public-copyright{position:absolute;left:max(28px,calc((100% - 1080px)/2));right:max(28px,calc((100% - 1080px)/2));bottom:21px;margin:0;padding-top:15px;color:#817691;border-top:1px solid rgba(255,255,255,.09);font-size:8px}
.auth-back-public{position:absolute;top:25px;right:28px;display:flex;align-items:center;gap:5px;padding:8px 11px;color:#6c5e7f;background:#fff;border:1px solid #e6dfed;border-radius:9px;font-size:9px}.auth-back-public svg{width:13px;transform:rotate(90deg)}
@keyframes publicFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Parent login and read-only portal */
.parent-login-dialog{width:min(470px,calc(100% - 24px));max-height:calc(100vh - 24px);padding:0;overflow:auto;border:1px solid #dfd6ed;border-radius:26px;background:#fbf9ff}.parent-login-dialog::backdrop,.parent-portal-dialog::backdrop{background:rgba(37,23,67,.62);backdrop-filter:blur(7px)}.parent-login-card{position:relative;padding:30px 34px 32px;text-align:center}.parent-login-card .dialog-close{position:absolute;right:17px;top:17px}.parent-login-brand{display:inline-flex}.parent-login-brand .logo-full{width:74px;height:74px;border-radius:19px}.parent-login-icon{width:49px;height:49px;display:grid;place-items:center;margin:20px auto 0;color:#6742c5;background:#eee8ff;border-radius:15px}.parent-login-icon svg{width:22px}.parent-login-card h2{margin:13px 0 4px;font-size:23px}.parent-login-card>p{margin:0 auto 19px;max-width:330px;color:#897e96;font-size:10px;line-height:1.6}.parent-login-card>label{display:grid;gap:6px;margin-top:11px;color:#6f657d;text-align:left;font-size:9px}.parent-login-card input{width:100%;height:47px;padding:0 13px;color:#40354f;border-color:#ded6e7;font-size:12px;text-align:center;letter-spacing:.04em}.parent-login-card #parent-pin{font-size:19px;letter-spacing:.35em}.parent-login-error{min-height:18px!important;margin:8px 0 0!important;color:#ac5157!important;font-size:9px!important}.parent-login-submit{width:100%;border:0}.parent-login-submit svg{transform:none}.parent-login-card>small{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:13px;color:#978da1;font-size:8px}.parent-login-card>small svg{width:12px}.parent-portal-dialog{width:min(1120px,calc(100% - 28px));max-width:none;max-height:94vh;padding:0;overflow:hidden;border:1px solid #dcd2ed;border-radius:28px;background:#f8f6fc}.parent-portal-shell{max-height:94vh;overflow:auto}.parent-portal-header{position:sticky;z-index:4;top:0;display:flex;align-items:center;gap:14px;padding:19px 25px;color:#fff;background:linear-gradient(120deg,#432381,#6d43d4 58%,#9877e8);box-shadow:0 9px 28px rgba(51,29,99,.18)}.parent-portal-header::after{content:"";position:absolute;inset:0;opacity:.15;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:22px 22px}.parent-portal-header>*{position:relative;z-index:1}.parent-portal-avatar{width:68px;height:68px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;color:#6545b5;background:linear-gradient(145deg,#fff,#e5dcf8);border:4px solid rgba(255,255,255,.62);border-radius:21px;background-size:cover;background-position:center;font-size:22px;font-weight:700}.parent-portal-header>div:nth-child(2)>span{color:#dbcefb;font-size:8px;font-weight:700;letter-spacing:.15em}.parent-portal-header h2{margin:3px 0 2px;font-size:21px}.parent-portal-header p{margin:0;color:rgba(255,255,255,.72);font-size:8px}.parent-portal-exit{display:flex;align-items:center;gap:6px;margin-left:auto;padding:9px 11px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:10px;font-size:8px}.parent-portal-exit svg{width:14px}.parent-portal-content{width:auto;margin:0;padding:22px}.parent-welcome{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:linear-gradient(110deg,#eee8ff,#fbf9ff);border:1px solid #e4daf6;border-radius:17px}.parent-welcome span{color:#7150c8;font-size:8px;font-weight:700;letter-spacing:.12em}.parent-welcome h3{margin:4px 0 2px;font-size:16px}.parent-welcome p{margin:0;color:#8f859a;font-size:8px}.parent-welcome>b{padding:7px 9px;color:#6848bd;background:#fff;border-radius:9px;font-size:8px}.parent-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:13px}.parent-summary-grid article{display:flex;align-items:center;gap:11px;padding:16px;background:#fff;border:1px solid #e8e2ef;border-radius:15px}.parent-summary-grid article>span{width:40px;height:40px;display:grid;place-items:center;color:#6644c4;background:#eee8ff;border-radius:12px}.parent-summary-grid article>span svg{width:18px}.parent-summary-grid small,.parent-summary-grid strong{display:block}.parent-summary-grid small{color:#90869c;font-size:8px}.parent-summary-grid strong{margin-top:3px;color:#443552;font-size:15px}.parent-summary-attendance>span{color:#27865d!important;background:#e5f6ec!important}.parent-portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.parent-portal-card{padding:18px;background:#fff;border:1px solid #e8e2ef;border-radius:18px}.parent-portal-card>header>div{display:flex;align-items:center;gap:10px}.parent-portal-card>header>div>span{width:39px;height:39px;display:grid;place-items:center;color:#6947c5;background:#eee9ff;border-radius:12px}.parent-portal-card>header svg{width:17px}.parent-portal-card h3{margin:0;font-size:13px}.parent-portal-card header p{margin:2px 0 0;color:#948a9f;font-size:8px}.parent-attendance-history,.parent-work-list{display:grid;gap:7px;margin-top:14px}.parent-history-row,.parent-work-row{display:flex;align-items:center;gap:10px;padding:10px;background:#fbfafd;border:1px solid #eee9f3;border-radius:12px}.parent-history-status{width:35px;height:35px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px}.parent-history-status svg{width:15px}.parent-history-status.status-present{color:#269260;background:#e5f6ec}.parent-history-status.status-late{color:#b37b12;background:#fff2d2}.parent-history-status.status-leave{color:#4e72ba;background:#eaf0fb}.parent-history-status.status-absent{color:#c14f5b;background:#fce8ea}.parent-history-row>div,.parent-work-row>div{min-width:0;flex:1}.parent-history-row strong,.parent-history-row small,.parent-work-row strong,.parent-work-row small{display:block}.parent-history-row strong,.parent-work-row strong{font-size:9px}.parent-history-row small,.parent-work-row small{margin-top:2px;color:#948a9f;font-size:7px}.parent-history-row>b{font-size:8px}.parent-work-photo{width:47px;height:47px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;color:#6a49bd;background:#eee8ff;border-radius:12px;background-size:cover;background-position:center}.parent-work-photo svg{width:19px}.parent-work-stars{color:#b77d12!important}.parent-portal-empty{display:grid;place-items:center;min-height:175px;color:#988ea3;text-align:center}.parent-portal-empty>span{width:48px;height:48px;display:grid;place-items:center;color:#6b48c6;background:#eee8ff;border-radius:14px}.parent-portal-empty strong{margin-top:8px;color:#61566d;font-size:10px}.parent-portal-empty p{margin:2px 0 0;font-size:8px}

/* Parent access controls and applications */
.parent-access-admin{margin-top:18px;padding:16px;background:linear-gradient(145deg,#f7f3ff,#fcfbff);border:1px solid #e5dcf4;border-radius:17px}.parent-access-heading{display:flex;align-items:center;gap:11px}.parent-access-heading>div:nth-child(2){min-width:0;flex:1}.parent-access-heading strong{display:block;font-size:11px}.parent-access-heading p{margin:3px 0 0;color:#91869c;font-size:8px}.parent-access-status{padding:6px 9px;color:#81778d;background:#eeeaf2;border-radius:8px;font-size:8px}.parent-access-status.active{color:#287653;background:#e4f5eb}.parent-pin-controls{display:grid;grid-template-columns:minmax(160px,1fr) auto auto;align-items:end;gap:8px;margin-top:14px}.parent-pin-controls label{display:grid;gap:5px;color:#71667e;font-size:9px}.parent-pin-controls input{width:100%;height:42px;padding:0 12px;font-size:16px;letter-spacing:.25em}.parent-access-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.parent-access-admin>small{display:block;margin-top:9px;color:#968b9f;font-size:8px}.applications-hero{background:linear-gradient(125deg,#43277e,#7148cb 58%,#ab8ce8)}.applications-hero-art{position:relative;width:180px;height:130px;margin-right:45px}.applications-hero-art>span{position:absolute;z-index:2;right:10px;top:5px;width:100px;height:120px;display:grid;place-items:center;color:#6741bd;background:linear-gradient(145deg,#fff,#ece5fb);border:7px solid rgba(255,255,255,.25);border-radius:23px;box-shadow:0 17px 30px rgba(45,25,91,.22);transform:rotate(5deg)}.applications-hero-art>span svg{width:42px;height:42px}.applications-hero-art i{position:absolute;width:88px;height:108px;left:22px;top:15px;background:rgba(255,255,255,.19);border:1px solid rgba(255,255,255,.22);border-radius:20px;transform:rotate(-8deg)}.applications-hero-art i:last-child{left:2px;top:26px;opacity:.55;transform:rotate(-15deg)}.application-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:17px}.application-metrics article{display:flex;align-items:center;gap:12px;padding:17px;background:#fff;border:1px solid #e8e2f0;border-radius:16px}.application-metrics article>span{width:43px;height:43px;display:grid;place-items:center;color:#6845c4;background:#eee8ff;border-radius:13px}.application-metrics svg{width:19px}.application-metrics small,.application-metrics strong{display:block}.application-metrics small{color:#8e849a;font-size:8px}.application-metrics strong{margin-top:2px;color:#41344e;font-size:20px}.applications-toolbar{display:flex;align-items:end;gap:10px;margin-top:20px;padding-bottom:18px;border-bottom:1px solid #eee9f3}.applications-toolbar .search-box{width:min(480px,100%)}.applications-toolbar .filter-box{margin-left:auto}.application-list{display:grid;gap:9px;margin-top:17px}.application-row{display:grid;grid-template-columns:46px minmax(0,1.2fr) minmax(150px,.8fr) auto;align-items:center;gap:12px;padding:13px;background:#fff;border:1px solid #e8e2ef;border-radius:15px}.application-avatar{width:46px;height:46px;display:grid;place-items:center;color:#6645b8;background:#eee8ff;border-radius:14px;font-weight:700}.application-main,.application-contact{min-width:0}.application-main strong,.application-main small,.application-contact span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.application-main strong{font-size:11px}.application-main small,.application-contact span{margin-top:3px;color:#91879d;font-size:8px}.application-main p{margin:6px 0 0;color:#71677e;font-size:8px;line-height:1.5}.application-status-control{display:flex;align-items:center;gap:7px}.application-status-control select{height:37px;min-width:125px;padding:0 9px;font-size:8px}.application-status-pill{padding:5px 7px;border-radius:7px;font-size:7px}.application-status-pill.status-new{color:#9b701d;background:#fff3d7}.application-status-pill.status-contacted{color:#4e6fae;background:#eaf0fb}.application-status-pill.status-trial{color:#6542b9;background:#eee8ff}.application-status-pill.status-enrolled{color:#287452;background:#e5f5eb}.application-status-pill.status-closed{color:#7e7688;background:#efedf2}

@media(max-width:1000px){.public-header nav{gap:14px}.public-hero{grid-template-columns:1fr .85fr}.public-hero-visual{width:440px;transform:scale(.87);transform-origin:right center}.public-course-grid{grid-template-columns:repeat(2,1fr)}.public-contact{gap:30px}.parent-portal-grid{grid-template-columns:1fr}.application-row{grid-template-columns:46px 1fr auto}.application-contact{grid-column:2}.application-status-control{grid-column:3;grid-row:1/3}}
@media(max-width:820px){.public-header{height:70px;padding:0 16px}.public-header .public-brand .logo-full{width:48px;height:48px}.public-header .public-brand small{display:none}.public-header nav,.public-header-actions{position:absolute;left:12px;right:12px;top:65px;display:none}.public-header.menu-open nav{display:grid;gap:0;padding:8px;background:#fff;border:1px solid #e7e0f0;border-radius:15px 15px 0 0;box-shadow:0 20px 40px rgba(58,35,110,.13)}.public-header.menu-open nav a{padding:11px 13px}.public-header.menu-open nav a::after{display:none}.public-header.menu-open .public-header-actions{top:238px;display:grid;grid-template-columns:1fr 1fr;padding:9px;background:#fff;border:1px solid #e7e0f0;border-top:0;border-radius:0 0 15px 15px}.public-menu-toggle{display:grid;place-items:center;margin-left:auto;width:39px;padding:0}.public-hero{min-height:730px;grid-template-columns:1fr;align-items:start;padding-top:55px}.public-hero-copy{padding:0}.public-hero h1{font-size:48px}.public-hero-visual{width:520px;height:405px;justify-self:center;transform:scale(.82);transform-origin:center top}.public-highlights{grid-template-columns:1fr;margin-top:-35px}.public-highlights article+article{border-top:1px solid #eee9f4;border-left:0}.public-course-grid{grid-template-columns:1fr 1fr}.public-steps{grid-template-columns:1fr;gap:35px}.public-contact{grid-template-columns:1fr;gap:28px}.public-footer{grid-template-columns:1fr 1fr}.public-footer>div:first-child{grid-column:1/-1}.parent-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.public-header .public-brand>span:last-child{display:none}.public-hero{min-height:675px;padding:38px 18px 35px}.public-eyebrow{font-size:8px}.public-hero h1{margin-top:14px;font-size:36px;letter-spacing:-1px}.public-hero-copy>p{font-size:11px;line-height:1.75}.public-hero-actions{display:grid;grid-template-columns:1fr}.public-hero-actions>*{width:100%}.public-trust{gap:7px}.public-hero-visual{width:430px;height:340px;margin-left:-20px;transform:scale(.72)}.public-dashboard-preview{left:35px}.float-attendance{left:-5px}.float-stars{right:-8px}.public-highlights{width:calc(100% - 24px);padding:8px;border-radius:18px}.public-highlights article{padding:12px}.public-section{width:calc(100% - 28px);padding-top:72px}.public-section-heading{align-items:start}.public-section-heading h2,.public-steps h2,.public-contact h2{font-size:27px}.public-section-heading>a{display:none}.public-course-grid{grid-template-columns:1fr}.public-course-cover{height:180px}.public-teacher-section{padding-bottom:65px}.public-steps{padding:60px 18px}.public-step-list article{grid-template-columns:30px 42px 1fr;padding:12px}.public-contact{padding:65px 14px}.public-application-form{padding:20px 14px}.public-form-grid{grid-template-columns:1fr}.public-footer{grid-template-columns:1fr;padding:45px 20px 80px}.public-footer>div:first-child{grid-column:auto}.public-copyright{left:20px;right:20px}.auth-back-public{top:14px;right:14px}.parent-login-card{padding:24px 19px}.parent-portal-dialog{width:100%;max-height:100vh;border-radius:0}.parent-portal-shell{max-height:100vh}.parent-portal-header{padding:14px 12px}.parent-portal-avatar{width:54px;height:54px;border-radius:17px}.parent-portal-header h2{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.parent-portal-exit{width:36px;height:36px;justify-content:center;padding:0}.parent-portal-exit span{display:none}.parent-portal-content{padding:12px}.parent-welcome{align-items:flex-start;padding:14px}.parent-welcome>b{font-size:7px}.parent-summary-grid{grid-template-columns:1fr 1fr;gap:7px}.parent-summary-grid article{gap:8px;padding:11px}.parent-summary-grid article>span{width:34px;height:34px}.parent-summary-grid strong{font-size:12px}.parent-portal-card{padding:14px 11px}.parent-pin-controls{grid-template-columns:1fr 1fr}.parent-pin-controls label{grid-column:1/-1}.parent-access-actions{display:grid;grid-template-columns:1fr}.parent-access-actions .button{width:100%}.application-metrics{grid-template-columns:1fr}.applications-section .view-heading{align-items:flex-start;flex-direction:column}.applications-section .view-heading .button{width:100%}.applications-toolbar{display:grid;grid-template-columns:1fr}.applications-toolbar .filter-box{width:100%;margin:0}.applications-toolbar .filter-box select{width:100%}.application-row{grid-template-columns:42px 1fr;padding:11px}.application-avatar{width:42px;height:42px}.application-contact{grid-column:2}.application-status-control{grid-column:1/-1;grid-row:auto}.application-status-control select{flex:1}.applications-hero-art{right:-45px;margin:0;transform:scale(.68)}}

.public-hero h1{font-size:clamp(42px,4.5vw,60px)}.public-hero h1 em{white-space:nowrap}.public-course-cover>img,.public-teacher-avatar>img,.parent-work-photo>img{width:100%;height:100%;object-fit:cover}.public-course-cover>img{position:absolute;inset:0}.public-form-status.success{color:#25835b}.public-primary-action:disabled,.button:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}.parent-access-status.active{color:#277b59;background:#e5f5ec;border-color:#ccead9}
@media(max-width:600px){.public-hero h1{font-size:34px}.public-hero h1 em{white-space:normal}}
.parent-portal-header>div:nth-child(2)>span{font-size:9px}.parent-portal-header p{font-size:10px}.parent-welcome p{font-size:10px}.parent-welcome>b{font-size:9px}.parent-summary-grid small{font-size:10px}.parent-summary-grid strong{font-size:18px}.parent-portal-card h3{font-size:14px}.parent-portal-card header p{font-size:9px}.parent-history-row strong,.parent-work-row strong{font-size:11px}.parent-history-row small,.parent-work-row small{font-size:9px}.parent-history-row>b{font-size:9px}
.application-metrics small{font-size:10px}.application-main strong{font-size:13px}.application-main small,.application-contact span{font-size:10px}.application-main p{font-size:10px}.application-contact>span,.application-contact>a,.application-contact>small{display:flex;align-items:center;gap:5px;margin-top:5px;overflow:hidden;color:#81758e;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.application-contact svg{width:13px;height:13px;flex:0 0 auto}.application-contact>small{font-size:9px}.application-status-control{font-size:10px}.application-status-control select{font-size:10px}

/* Public banner slideshow */
.public-hero-slider{position:relative;display:block;min-height:620px;padding:0;overflow:hidden}.public-slides{position:relative;z-index:1;display:grid;overflow:hidden;min-height:620px;touch-action:pan-y}.public-hero-slide{grid-area:1/1;min-width:0;min-height:620px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;padding:68px max(64px,calc((100% - 1180px)/2)) 80px;background:linear-gradient(145deg,#fbfaff,#f2edff 55%,#ece4ff);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(22px) scale(.995);transition:opacity .55s ease,transform .55s ease,visibility .55s}.public-hero-slide.active{z-index:2;opacity:1;visibility:visible;pointer-events:auto;transform:none}.public-uploaded-slide::before{content:"";position:absolute;right:-100px;top:-130px;width:470px;height:470px;border:1px solid rgba(108,72,205,.11);border-radius:50%;box-shadow:0 0 0 70px rgba(109,72,206,.025),0 0 0 140px rgba(109,72,206,.018)}.public-uploaded-slide>*{position:relative;z-index:1}.public-banner-media{position:relative;width:min(540px,100%);aspect-ratio:16/9;justify-self:end;padding:11px;overflow:hidden;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.96);border-radius:31px;box-shadow:0 32px 70px rgba(67,39,132,.2);transform:rotate(1.2deg)}.public-banner-media::before{content:"";position:absolute;z-index:2;inset:11px;border:1px solid rgba(255,255,255,.45);border-radius:22px;pointer-events:none}.public-banner-media>img{width:100%;height:100%;display:block;object-fit:cover;border-radius:22px}.public-banner-media>svg{width:70px;height:70px;position:absolute;left:50%;top:50%;color:#aa90ec;transform:translate(-50%,-50%)}.public-banner-media>span{position:absolute;z-index:3;right:24px;bottom:23px;padding:7px 10px;color:#fff;background:rgba(45,27,83,.63);border:1px solid rgba(255,255,255,.24);border-radius:9px;font-size:9px;font-weight:700;letter-spacing:.12em;backdrop-filter:blur(8px)}.public-uploaded-slide .public-hero-copy>p{max-width:570px}.public-slider-arrow{position:absolute;z-index:8;top:50%;width:42px;height:42px;display:grid;place-items:center;color:#6340c3;background:rgba(255,255,255,.86);border:1px solid #e1d7f2;border-radius:50%;box-shadow:0 10px 25px rgba(63,39,119,.12);backdrop-filter:blur(9px);transform:translateY(-50%);transition:.18s}.public-slider-arrow:hover{color:#fff;background:#6c45d0;border-color:#6c45d0}.public-slider-arrow svg{width:18px}.public-slider-arrow.previous{left:22px}.public-slider-arrow.previous svg{transform:rotate(90deg)}.public-slider-arrow.next{right:22px}.public-slider-arrow.next svg{transform:rotate(-90deg)}.public-slider-dots{position:absolute;z-index:8;left:50%;bottom:24px;display:flex;align-items:center;gap:7px;padding:7px 9px;background:rgba(255,255,255,.8);border:1px solid rgba(225,215,242,.9);border-radius:20px;box-shadow:0 8px 22px rgba(69,43,127,.1);backdrop-filter:blur(9px);transform:translateX(-50%)}.public-slider-dots button{width:7px;height:7px;padding:0;background:#c9bbe9;border:0;border-radius:9px;transition:.22s}.public-slider-dots button.active{width:24px;background:#6d46d0}.public-slider-dots button:focus-visible{outline-color:#6d46d0}

/* Banner manager */
.banner-settings{grid-column:1/-1}.banner-settings .settings-title{flex-wrap:wrap}.banner-settings-icon{color:#fff;background:linear-gradient(145deg,#8c65ed,#5b38bd);box-shadow:0 8px 20px rgba(91,55,186,.2)}.banner-settings .settings-title>div{min-width:220px;flex:1}.banner-limit{padding:6px 9px;color:#6542bd;background:#f0eaff;border:1px solid #e3d9fa;border-radius:8px;font-size:9px;font-weight:700}.banner-settings .settings-title>.button{margin-left:3px}.banner-admin-list{display:grid;gap:9px;margin-top:20px}.banner-admin-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;align-items:center;gap:15px;padding:11px;background:#fbfaff;border:1px solid #e7dff2;border-radius:16px}.banner-admin-preview{position:relative;width:150px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;color:#7958cc;background:linear-gradient(145deg,#eee8ff,#ddd1fa);border-radius:12px}.banner-admin-preview>img{width:100%;height:100%;object-fit:cover}.banner-admin-preview>svg{width:27px}.banner-admin-preview>b{position:absolute;left:7px;top:7px;min-width:24px;height:24px;display:grid;place-items:center;color:#fff;background:rgba(50,31,91,.7);border-radius:7px;font-size:8px}.banner-admin-copy{min-width:0}.banner-admin-copy>span{color:#7956d1;font-size:8px;font-weight:700;letter-spacing:.13em}.banner-admin-copy h3{margin:4px 0 3px;overflow:hidden;color:#41344e;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.banner-admin-copy p{margin:0;overflow:hidden;color:#82778e;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.banner-admin-copy small{display:block;margin-top:5px;overflow:hidden;color:#9a90a4;text-overflow:ellipsis;white-space:nowrap;font-size:8px}.banner-admin-status{display:flex;align-items:center;gap:5px;padding:6px 8px;color:#887e94;background:#efedf2;border-radius:8px;font-size:8px}.banner-admin-status.active{color:#287653;background:#e4f5eb}.banner-admin-status svg{width:12px}.banner-admin-actions{display:flex;gap:5px}.banner-admin-actions button{width:34px;height:34px;display:grid;place-items:center;color:#675b74;background:#fff;border:1px solid #e2dbe9;border-radius:9px}.banner-admin-actions button:hover{color:#6542bd;background:#f2edff}.banner-admin-actions button:disabled{opacity:.3;cursor:not-allowed}.banner-admin-actions button[data-banner-action="up"] svg{transform:rotate(180deg)}.banner-admin-actions button[data-banner-action="delete"]{color:#b15f60;background:#fff4f2;border-color:#f0dcda}.banner-admin-actions svg{width:14px}.banner-admin-empty{display:flex;align-items:center;gap:13px;margin-top:20px;padding:20px;color:#82788e;background:#faf8fd;border:1px dashed #d9ceeb;border-radius:16px}.banner-admin-empty>span{width:49px;height:49px;display:grid;place-items:center;flex:0 0 auto;color:#704bc6;background:#eee8ff;border-radius:14px}.banner-admin-empty svg{width:22px}.banner-admin-empty strong{display:block;color:#51455e;font-size:11px}.banner-admin-empty p{margin:3px 0 0;font-size:9px}.banner-public-note{display:flex;align-items:center;gap:6px;margin:13px 0 0;color:#8b8097;font-size:8px}.banner-public-note svg{width:13px;color:#6e4bc4}.banner-dialog{width:min(950px,calc(100% - 24px));max-width:none;max-height:94vh;padding:0;overflow:auto;border:1px solid #ddd3eb;border-radius:25px;background:#fff}.banner-dialog::backdrop{background:rgba(38,24,66,.62);backdrop-filter:blur(7px)}#banner-form{padding:25px}.banner-editor-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:19px}.banner-media-editor{min-width:0}.banner-image-upload{display:block}.banner-image-preview{width:100%;aspect-ratio:16/9;display:grid;place-items:center;align-content:center;gap:6px;overflow:hidden;color:#7454c7;background:linear-gradient(145deg,#f0eaff,#e6dcfa);border:1px dashed #cdbbeb;border-radius:18px;background-size:cover;background-position:center;cursor:pointer}.banner-image-preview.has-photo{border-style:solid;color:transparent}.banner-image-preview svg{width:33px;height:33px}.banner-image-preview b{font-size:11px}.banner-image-preview small{font-size:8px}.banner-media-editor>.button{width:100%;margin-top:8px}.banner-fields .form-grid{margin:0}.banner-fields textarea{min-height:92px}.banner-enabled-toggle{display:flex;align-items:flex-start;gap:9px;margin-top:13px;padding:11px;color:#665a72;background:#f8f5fc;border-radius:11px}.banner-enabled-toggle input{margin-top:3px;accent-color:#6a45ca}.banner-enabled-toggle b,.banner-enabled-toggle small{display:block}.banner-enabled-toggle b{font-size:10px}.banner-enabled-toggle small{margin-top:2px;color:#958b9f;font-size:8px}.banner-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:1000px){.public-hero-slide{grid-template-columns:1fr .85fr}.public-banner-media{width:440px}.banner-admin-row{grid-template-columns:125px minmax(0,1fr) auto}.banner-admin-preview{width:125px}.banner-admin-status{grid-column:2}.banner-admin-actions{grid-column:3;grid-row:1/3}}
@media(max-width:820px){.public-hero-slider,.public-slides{min-height:730px}.public-hero-slide{min-height:730px;grid-template-columns:1fr;align-items:start;padding:55px 18px 50px}.public-banner-media{width:min(520px,92vw);justify-self:center;margin-top:26px}.public-slider-arrow{top:auto;bottom:20px}.public-slider-arrow.previous{left:17px}.public-slider-arrow.next{right:17px}.public-slider-dots{bottom:25px}.banner-editor-layout{grid-template-columns:1fr}.banner-dialog{width:min(700px,calc(100% - 20px))}.banner-admin-row{grid-template-columns:115px minmax(0,1fr)}.banner-admin-preview{width:115px}.banner-admin-status{grid-column:2}.banner-admin-actions{grid-column:1/-1;grid-row:auto;justify-content:flex-end}}
@media(max-width:600px){.public-hero-slider,.public-slides{min-height:690px}.public-hero-slide{min-height:690px;padding:38px 18px 55px}.public-banner-media{width:100%;margin-top:25px;padding:7px;border-radius:22px}.public-banner-media::before{inset:7px;border-radius:16px}.public-banner-media>img{border-radius:16px}.public-banner-media>span{right:15px;bottom:14px}.public-slider-arrow{width:36px;height:36px;bottom:15px}.public-slider-dots{bottom:19px}.banner-settings .settings-title>.button{width:100%;margin:5px 0 0}.banner-admin-row{grid-template-columns:90px minmax(0,1fr);gap:10px}.banner-admin-preview{width:90px}.banner-admin-status{justify-self:start}.banner-admin-actions{justify-content:stretch}.banner-admin-actions button{flex:1}.banner-dialog{width:100%;max-height:100vh;border-radius:0}#banner-form{padding:18px 14px}.banner-editor-layout{gap:13px}.banner-dialog-actions{display:grid;grid-template-columns:1fr 1fr}.banner-dialog-actions .button{width:100%}}

/* Cinematic public hero */
.public-hero-shortcuts{display:none}.public-hero-slider.has-uploaded-banners{height:clamp(540px,calc(100svh - 82px),760px);min-height:540px;padding:0;background:#21163d}.public-hero-slider.has-uploaded-banners .public-slides{height:100%;min-height:0}.public-hero-slider.has-uploaded-banners .public-hero-slide{position:relative;width:100%;height:100%;min-height:0;display:block;padding:0;overflow:hidden;background:#21163d}.public-hero-slider.has-uploaded-banners .public-uploaded-slide::before{content:none}.public-banner-canvas{position:absolute!important;z-index:0!important;inset:0;width:100%;height:100%;display:block;overflow:hidden;background:linear-gradient(135deg,#34205f,#8062d8)}.public-banner-canvas>img{position:absolute;inset:0;width:100%;height:100%;display:block}.public-banner-backdrop{object-fit:cover;filter:blur(24px) saturate(.82);opacity:.72;transform:scale(1.07)}.public-banner-foreground{z-index:1;object-fit:contain}.public-banner-canvas>svg{position:absolute;left:50%;top:50%;width:82px;height:82px;color:#b49bf3;transform:translate(-50%,-50%)}.public-banner-shade{position:absolute!important;z-index:2!important;inset:0;background:linear-gradient(90deg,rgba(19,13,33,.5),rgba(24,15,43,.34) 48%,rgba(19,13,33,.5)),linear-gradient(0deg,rgba(17,11,29,.72),transparent 47%,rgba(17,11,29,.25));pointer-events:none}.public-banner-link,.public-banner-static{position:absolute!important;z-index:3!important;inset:0;display:block}.public-banner-link{cursor:pointer}.public-banner-link:focus-visible{outline:5px solid rgba(255,255,255,.9);outline-offset:-7px}.public-banner-content{position:absolute!important;z-index:4!important;left:50%;top:46%;width:min(900px,calc(100% - 180px));color:#fff;text-align:center;text-shadow:0 3px 22px rgba(8,4,18,.72);transform:translate(-50%,-50%);pointer-events:none}.public-banner-content>span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.86);font-size:11px;font-weight:700;letter-spacing:.18em}.public-banner-content>span svg{width:14px;height:14px}.public-banner-content h1{margin:12px 0 9px;color:#fff;font-size:clamp(44px,5vw,72px);line-height:1.12;letter-spacing:-1.5px}.public-banner-content p{max-width:720px;margin:0 auto;color:rgba(255,255,255,.88);font-size:clamp(13px,1.2vw,17px);line-height:1.7}.has-uploaded-banners .public-hero-shortcuts{position:absolute;z-index:10;left:50%;bottom:34px;width:min(720px,calc(100% - 140px));display:block;color:#fff;transform:translateX(-50%)}.public-hero-shortcuts>p{margin:0 0 10px;text-align:center;text-shadow:0 2px 12px rgba(9,5,19,.8)}.public-hero-shortcuts>p span,.public-hero-shortcuts>p strong{display:block}.public-hero-shortcuts>p span{color:rgba(255,255,255,.7);font-size:9px}.public-hero-shortcuts>p strong{margin-top:2px;font-size:12px}.public-hero-shortcuts nav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.public-hero-shortcuts a,.public-hero-shortcuts button{height:78px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:12px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);border-radius:10px;text-align:left;font-size:10px;font-weight:600;box-shadow:0 10px 24px rgba(9,4,21,.12);backdrop-filter:blur(10px);transition:.18s ease}.public-hero-shortcuts a:hover,.public-hero-shortcuts button:hover,.public-hero-shortcuts a:focus-visible,.public-hero-shortcuts button:focus-visible{background:rgba(126,86,227,.72);border-color:rgba(255,255,255,.5);transform:translateY(-3px)}.public-hero-shortcuts svg{width:20px;height:20px;stroke-width:1.7}.public-hero-slider.has-uploaded-banners .public-slider-arrow{top:46%;bottom:auto;color:#fff;background:rgba(35,22,62,.45);border-color:rgba(255,255,255,.28);box-shadow:0 10px 25px rgba(10,5,20,.2)}.public-hero-slider.has-uploaded-banners .public-slider-arrow:hover{background:#7148db}.public-hero-slider.has-uploaded-banners .public-slider-dots{bottom:156px;background:rgba(29,18,51,.42);border-color:rgba(255,255,255,.22)}.public-hero-slider.has-uploaded-banners .public-slider-dots button{background:rgba(255,255,255,.48)}.public-hero-slider.has-uploaded-banners .public-slider-dots button.active{background:#fff}.public-hero-slider.has-uploaded-banners+.public-highlights{margin:0 auto}.banner-fields label>small{display:block;margin-top:2px;color:#958b9f;font-size:8px;line-height:1.45}
@media(max-width:820px){.public-hero-slider.has-uploaded-banners{height:clamp(570px,calc(100svh - 70px),700px);min-height:570px}.public-banner-content{top:39%;width:calc(100% - 80px)}.public-banner-content h1{font-size:clamp(38px,8vw,56px)}.has-uploaded-banners .public-hero-shortcuts{bottom:22px;width:calc(100% - 40px)}.public-hero-shortcuts nav{grid-template-columns:repeat(5,minmax(92px,1fr));overflow-x:auto;padding:3px 3px 8px;scrollbar-width:thin}.public-hero-shortcuts a,.public-hero-shortcuts button{height:74px}.public-hero-slider.has-uploaded-banners .public-slider-dots{bottom:142px}}
@media(max-width:600px){.public-hero-slider.has-uploaded-banners{height:clamp(590px,calc(100svh - 70px),680px);min-height:590px}.public-banner-content{top:35%;width:calc(100% - 64px)}.public-banner-content>span{font-size:9px}.public-banner-content h1{margin-top:9px;font-size:clamp(30px,9vw,40px);line-height:1.16;letter-spacing:-.5px;overflow-wrap:anywhere}.public-banner-content p{font-size:11px;line-height:1.55}.has-uploaded-banners .public-hero-shortcuts{bottom:14px;width:calc(100% - 24px)}.public-hero-shortcuts>p{margin-bottom:6px}.public-hero-shortcuts nav{grid-template-columns:repeat(3,1fr);gap:6px;overflow:visible;padding:0}.public-hero-shortcuts a,.public-hero-shortcuts button{height:61px;padding:9px;font-size:8px}.public-hero-shortcuts svg{width:17px;height:17px}.public-hero-slider.has-uploaded-banners .public-slider-arrow{top:35%;width:36px;height:36px}.public-hero-slider.has-uploaded-banners .public-slider-arrow.previous{left:10px}.public-hero-slider.has-uploaded-banners .public-slider-arrow.next{right:10px}.public-hero-slider.has-uploaded-banners .public-slider-dots{bottom:194px}}
.banner-image-preview{background-color:#2a1a4c;background-position:center;background-repeat:no-repeat;background-size:contain}.banner-admin-preview{background:#2a1a4c}.banner-admin-preview>img{object-fit:contain;background:#2a1a4c}.public-default-banner{background:linear-gradient(125deg,#211443,#51309e 48%,#8b68e3)}.public-default-banner::before,.public-default-banner::after,.public-default-banner>i{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)}.public-default-banner::before{width:520px;height:520px;left:-130px;top:-250px}.public-default-banner::after{width:440px;height:440px;right:-90px;bottom:-260px}.public-default-banner>i:nth-child(1){width:270px;height:270px;left:50%;top:50%;border:1px solid rgba(255,255,255,.14);background:transparent;box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018);transform:translate(-50%,-50%)}.public-default-banner>i:nth-child(2){width:110px;height:110px;left:17%;bottom:19%;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.02));filter:blur(1px)}.public-default-banner>i:nth-child(3){width:170px;height:170px;right:14%;top:13%;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.01))}

/* Public experience inspired by Chula's clear first-screen navigation */
html{scroll-padding-top:94px}.public-header{position:fixed;left:0;right:0;top:0;z-index:80;background:linear-gradient(to bottom,rgba(24,14,45,.78),rgba(24,14,45,.28) 58%,transparent);border-bottom-color:transparent;box-shadow:none;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}.public-header.is-scrolled,.public-header.menu-open{background:rgba(255,255,255,.94);border-bottom-color:#eee9f6;box-shadow:0 10px 32px rgba(43,26,81,.09)}.public-header:not(.is-scrolled):not(.menu-open) .public-brand b,.public-header:not(.is-scrolled):not(.menu-open) nav a{color:#fff;text-shadow:0 2px 12px rgba(13,7,28,.45)}.public-header:not(.is-scrolled):not(.menu-open) .public-brand small{color:rgba(255,255,255,.72)}.public-header:not(.is-scrolled):not(.menu-open) nav a::after{background:#fff}.public-header:not(.is-scrolled):not(.menu-open) .public-parent-login{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);backdrop-filter:blur(12px)}.public-header:not(.is-scrolled):not(.menu-open) .public-staff-login{background:rgba(111,72,218,.78);border-color:rgba(255,255,255,.3);backdrop-filter:blur(12px)}.public-header:not(.is-scrolled):not(.menu-open) .public-menu-toggle{color:#fff;background:rgba(255,255,255,.16)}.public-header nav a{font-size:13px;font-weight:600}.public-header-actions button{font-size:12px}.public-brand small{font-size:10px}.public-hero-slider.has-uploaded-banners{height:clamp(560px,86svh,760px);min-height:560px}.public-banner-content{top:45%}.public-banner-content h1{font-size:clamp(46px,5.2vw,74px)}.public-banner-content p{font-size:clamp(14px,1.25vw,17px)}.has-uploaded-banners .public-hero-shortcuts{bottom:28px;width:min(760px,calc(100% - 140px))}.public-hero-shortcuts>p span{font-size:11px}.public-hero-shortcuts>p strong{font-size:14px}.public-hero-shortcuts a,.public-hero-shortcuts button{height:86px;padding:14px;font-size:13px;line-height:1.25}.public-hero-shortcuts svg{width:22px;height:22px}.public-hero-slider.has-uploaded-banners .public-slider-dots{bottom:174px}.public-highlights strong{font-size:14px}.public-highlights p{font-size:11px;line-height:1.5}.public-section-heading>div>span,.public-steps-copy>span,.public-contact-copy>span{font-size:11px}.public-section-heading h2,.public-steps h2,.public-contact h2{font-size:36px;line-height:1.25}.public-section-heading p{font-size:13px;line-height:1.65}.public-section-heading>a{font-size:12px}.public-course-code{font-size:10px}.public-course-body h3{font-size:18px}.public-course-body>p{height:58px;font-size:12px;line-height:1.65}.public-course-price strong{font-size:14px}.public-course-price small{font-size:10px}.public-course-meta{font-size:11px;line-height:1.45}.public-course-meta svg{width:15px}.public-teacher-card h3{font-size:17px}.public-teacher-card p{font-size:12px;line-height:1.5}.public-teacher-card span{font-size:10px}.public-teacher-section{width:100%;padding-left:max(28px,calc((100% - 1180px)/2));padding-right:max(28px,calc((100% - 1180px)/2));background:#faf8fe}.public-steps-copy>p{font-size:14px;line-height:1.8}.public-step-list strong{font-size:14px}.public-step-list p{font-size:11px;line-height:1.5}.public-contact-copy>p{font-size:14px}.public-contact-points span{font-size:12px}.public-form-heading strong{font-size:16px}.public-form-heading p{font-size:11px}.public-form-grid label{font-size:11px}.public-form-grid input,.public-form-grid select,.public-form-grid textarea{font-size:13px}.public-form-status{font-size:11px}.public-footer>div>p{font-size:11px}.public-footer>div:nth-child(n+2) strong{font-size:13px}.public-footer>div:nth-child(n+2) a,.public-footer>div:nth-child(n+2) button{font-size:11px}.public-copyright{font-size:10px}
@media(max-width:820px){html{scroll-padding-top:82px}.public-header nav a{font-size:12px}.public-header-actions button{font-size:11px}.public-hero-slider.has-uploaded-banners{height:clamp(600px,88svh,700px);min-height:600px}.public-banner-content{top:37%}.has-uploaded-banners .public-hero-shortcuts{bottom:18px}.public-hero-shortcuts a,.public-hero-shortcuts button{height:78px;padding:12px;font-size:12px}.public-hero-slider.has-uploaded-banners .public-slider-dots{bottom:160px}.public-teacher-section{padding-left:22px;padding-right:22px}}
@media(max-width:600px){.public-header{background:linear-gradient(to bottom,rgba(24,14,45,.82),rgba(24,14,45,.18),transparent)}.public-hero-slider.has-uploaded-banners{height:clamp(620px,90svh,700px);min-height:620px}.public-banner-content{top:31%;width:calc(100% - 56px)}.public-banner-content h1{font-size:clamp(31px,9vw,39px)}.public-banner-content p{font-size:12px}.has-uploaded-banners .public-hero-shortcuts{bottom:12px}.public-hero-shortcuts>p span{font-size:10px}.public-hero-shortcuts>p strong{font-size:12px}.public-hero-shortcuts a,.public-hero-shortcuts button{height:70px;padding:10px;font-size:12px}.public-hero-slider.has-uploaded-banners .public-slider-dots{bottom:212px}.public-highlights strong{font-size:13px}.public-highlights p{font-size:11px}.public-section-heading h2,.public-steps h2,.public-contact h2{font-size:29px}.public-section-heading p{font-size:12px}.public-teacher-section{width:100%;padding:72px 14px 65px}.public-step-list strong{font-size:13px}.public-step-list p{font-size:11px}.public-form-grid input,.public-form-grid select,.public-form-grid textarea{font-size:12px}}

/* Full-bleed uploaded banners */
.public-hero-slider.has-uploaded-banners{height:clamp(640px,92svh,900px);min-height:640px}.public-banner-canvas>img.public-banner-cover{z-index:1;width:100%;height:100%;object-fit:cover;background:none;filter:none;opacity:1;transform:none}.banner-image-preview{aspect-ratio:12/5;background-color:#2a1a4c;background-repeat:no-repeat;background-size:cover}.banner-admin-preview{aspect-ratio:12/5}.banner-admin-preview>img{object-fit:cover}.banner-fields select{width:100%;min-height:43px;color:#463b56;border-color:#e0d9e8;font-size:11px}
@media(max-width:820px){.public-hero-slider.has-uploaded-banners{height:clamp(640px,94svh,820px);min-height:640px}}
@media(max-width:600px){.public-hero-slider.has-uploaded-banners{height:clamp(640px,100svh,820px);min-height:640px}.banner-image-preview{aspect-ratio:16/9}}

/* Transparent public navigation with a white hover state */
.public-header:not(.is-scrolled):not(.menu-open){background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}.public-header,.public-header .public-brand b,.public-header .public-brand small,.public-header nav a,.public-header .public-parent-login,.public-header .public-staff-login,.public-header .public-menu-toggle{transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease}.public-header:not(.is-scrolled):not(.menu-open):focus-within{background:rgba(255,255,255,.97);border-bottom-color:#eee9f6;box-shadow:0 10px 32px rgba(43,26,81,.09);backdrop-filter:blur(18px)}.public-header:not(.is-scrolled):not(.menu-open):focus-within .public-brand b,.public-header:not(.is-scrolled):not(.menu-open):focus-within nav a{color:#514367;text-shadow:none}.public-header:not(.is-scrolled):not(.menu-open):focus-within .public-brand small{color:#8d829b}.public-header:not(.is-scrolled):not(.menu-open):focus-within nav a::after{background:#6e46d6}.public-header:not(.is-scrolled):not(.menu-open):focus-within .public-parent-login{color:#5d3db7;background:#f4f0ff;border-color:#e5dcfa;backdrop-filter:none}.public-header:not(.is-scrolled):not(.menu-open):focus-within .public-staff-login{color:#fff;background:linear-gradient(135deg,#8060e7,#5332ad);border-color:#6845c7;backdrop-filter:none}.public-header:not(.is-scrolled):not(.menu-open):focus-within .public-menu-toggle{color:#6142bb;background:#f2edff}
@media(hover:hover) and (pointer:fine){.public-header:not(.is-scrolled):not(.menu-open):hover{background:rgba(255,255,255,.97);border-bottom-color:#eee9f6;box-shadow:0 10px 32px rgba(43,26,81,.09);backdrop-filter:blur(18px)}.public-header:not(.is-scrolled):not(.menu-open):hover .public-brand b,.public-header:not(.is-scrolled):not(.menu-open):hover nav a{color:#514367;text-shadow:none}.public-header:not(.is-scrolled):not(.menu-open):hover .public-brand small{color:#8d829b}.public-header:not(.is-scrolled):not(.menu-open):hover nav a::after{background:#6e46d6}.public-header:not(.is-scrolled):not(.menu-open):hover .public-parent-login{color:#5d3db7;background:#f4f0ff;border-color:#e5dcfa;backdrop-filter:none}.public-header:not(.is-scrolled):not(.menu-open):hover .public-staff-login{color:#fff;background:linear-gradient(135deg,#8060e7,#5332ad);border-color:#6845c7;backdrop-filter:none}.public-header:not(.is-scrolled):not(.menu-open):hover .public-menu-toggle{color:#6142bb;background:#f2edff}}

/* Draggable banner focal point editor */
.banner-image-upload{display:block}.banner-image-preview{--banner-focus-x:50%;--banner-focus-y:50%;position:relative;isolation:isolate;aspect-ratio:12/5;display:grid;place-items:center;overflow:hidden;color:#6744c1;background-color:#f2edff;background-image:none;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;border:2px dashed #c9b8ee;border-radius:18px;cursor:pointer;touch-action:none;user-select:none;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.banner-image-preview:hover,.banner-image-preview:focus-visible,.banner-image-preview.is-drop-target{border-color:#7349da;box-shadow:0 0 0 4px rgba(115,73,218,.12)}.banner-image-preview.is-drop-target{background-color:#e9e0ff}.banner-upload-placeholder{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px;text-align:center;transition:opacity .16s ease}.banner-upload-placeholder svg{width:34px;height:34px;margin-bottom:3px}.banner-upload-placeholder b{color:#4f386f;font-size:12px}.banner-upload-placeholder strong{color:#7047cb;font-size:10px}.banner-upload-placeholder small{color:#8e819f;font-size:9px;line-height:1.35}.banner-image-preview.has-photo{color:#fff;border-style:solid;border-color:#d8ccef;cursor:grab}.banner-image-preview.has-photo:active,.banner-image-preview.is-dragging{cursor:grabbing}.banner-image-preview.has-photo .banner-upload-placeholder{opacity:0;pointer-events:none}.banner-drag-hint{position:absolute;z-index:3;left:50%;bottom:10px;display:none;padding:7px 10px;color:#fff;background:rgba(29,18,51,.76);border:1px solid rgba(255,255,255,.28);border-radius:999px;box-shadow:0 5px 18px rgba(18,10,36,.22);font-size:8px;font-weight:600;white-space:nowrap;pointer-events:none;transform:translateX(-50%);backdrop-filter:blur(8px)}.banner-image-preview.has-photo .banner-drag-hint{display:block}.banner-focus-marker{position:absolute;z-index:2;left:var(--banner-focus-x);top:var(--banner-focus-y);display:none;width:25px;height:25px;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 12px rgba(18,8,39,.55);pointer-events:none;transform:translate(-50%,-50%)}.banner-focus-marker::before,.banner-focus-marker::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}.banner-focus-marker::before{width:35px;height:1px}.banner-focus-marker::after{width:1px;height:35px}.banner-image-preview.has-photo .banner-focus-marker{display:block}.banner-position-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px 10px;color:#7b7086;background:#f8f5fc;border:1px solid #ebe4f3;border-radius:10px;font-size:8px}.banner-position-controls[hidden]{display:none!important}.banner-position-controls output{margin-left:4px;color:#5f3db7;font-weight:700}.banner-position-controls button{padding:5px 8px;color:#6542bd;background:#fff;border:1px solid #ded4ed;border-radius:7px;font:inherit;font-weight:700;cursor:pointer}.banner-position-controls button:hover{background:#efe9ff;border-color:#cbb9ec}.banner-media-editor>.button{margin-top:8px}
@media(max-width:600px){.banner-image-preview{aspect-ratio:12/5}.banner-upload-placeholder{gap:3px;padding:10px}.banner-upload-placeholder svg{width:27px;height:27px}.banner-upload-placeholder b{font-size:10px}.banner-upload-placeholder strong,.banner-upload-placeholder small{font-size:8px}.banner-drag-hint{bottom:6px}}

/* Attendance results driven by the hero search */
.attendance-search-results{padding:19px 21px 21px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#e9e1f8,#d9cdf1) border-box;border:1px solid transparent;border-radius:20px;box-shadow:0 12px 34px rgba(72,47,132,.07);animation:fadeDown .22s both}.attendance-search-results[hidden]{display:none!important}.attendance-search-results-heading{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid #eee9f5}.attendance-search-results-heading>div{min-width:0}.attendance-search-results-heading h2{margin:4px 0 2px;color:#322953;font-size:17px}.attendance-search-results-heading h2 b{display:inline-block;margin-left:5px;padding:4px 8px;color:#6646bd;background:#f0eaff;border-radius:8px;font-size:9px;vertical-align:middle}.attendance-search-results-heading p{margin:0;overflow:hidden;color:#91889e;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.clear-attendance-search{min-height:37px;display:flex;align-items:center;gap:6px;margin-left:auto;padding:0 11px;color:#67567e;background:#faf8fd;border:1px solid #e5ddef;border-radius:10px;font-size:9px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.16s ease}.clear-attendance-search:hover{color:#6541c1;background:#f1ebff;border-color:#d3c5ef}.clear-attendance-search svg{width:14px;height:14px}.attendance-result-grid{margin-top:15px}.attendance-search-results .student-card{border-color:#e7e0f1;background:#fff}.attendance-search-results .student-card:focus-visible{outline:3px solid rgba(111,72,210,.24);outline-offset:2px}.attendance-search-empty{padding:27px 15px 12px}.attendance-search-empty-icon{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 10px;color:#6f49cd;background:#eee8ff;border-radius:15px}.attendance-search-empty-icon svg{width:22px;height:22px}.attendance-search-empty h3{margin-bottom:4px}.attendance-search-empty p{margin:0}
@media(max-width:600px){.attendance-search-results{padding:14px 12px 16px;border-radius:17px}.attendance-search-results-heading{align-items:flex-start;gap:9px}.attendance-search-results-heading .roster-heading-icon{width:39px;height:39px;border-radius:11px}.attendance-search-results-heading h2{font-size:15px}.attendance-search-results-heading p{max-width:190px;white-space:normal;line-height:1.45}.clear-attendance-search{min-height:35px;padding-inline:8px;font-size:8px}.attendance-result-grid{margin-top:12px}}

/* Teacher profiles, course enrollment, and scoped access */
#account-dialog,#subject-dialog{width:min(900px,calc(100% - 32px))}#account-form{display:grid;gap:18px}.account-teacher-profile,.role-access-summary{display:grid;gap:16px;padding:18px;border:1px solid #e4dcf4;border-radius:18px;background:linear-gradient(145deg,#fcfbff,#f7f4fd)}.account-section-heading{display:flex;align-items:center;gap:12px}.account-section-heading h3{margin:0;color:#372c4c;font-size:15px}.account-section-heading p{margin:3px 0 0;color:#8b819d;font-size:10px;line-height:1.55}.account-photo-editor{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:18px;padding:14px;background:#fff;border:1px solid #ebe5f5;border-radius:15px}.account-photo-preview{width:112px;height:112px;display:grid;place-items:center;overflow:hidden;color:#684bb0;background:linear-gradient(145deg,#eee7ff,#ddd1f7);border-radius:26px;background-size:cover;background-position:center;font-size:34px;font-weight:800}.account-photo-preview.has-photo{color:transparent}.account-photo-editor>div:last-child>strong{display:block;font-size:13px}.account-photo-editor>div:last-child>p{margin:4px 0 11px;color:#90869e;font-size:9px}.account-photo-editor>div:last-child>div{display:flex;flex-wrap:wrap;gap:8px}.account-profile-fields{grid-template-columns:1fr 1fr;gap:13px}.account-profile-fields label{display:grid;gap:6px;color:#71677e;font-size:10px}.account-profile-fields input,.account-profile-fields select,.account-profile-fields textarea{width:100%;padding:0 12px;font-size:12px}.account-profile-fields input,.account-profile-fields select{height:43px}.account-profile-fields textarea{padding-block:10px;resize:vertical;line-height:1.55}.account-subject-picker>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:12px}.account-subject-picker strong{font-size:12px}.account-subject-picker p{margin:3px 0 0;color:#91879f;font-size:9px}.account-subject-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.account-subject-list label{display:flex;align-items:center;gap:9px;min-height:58px;padding:10px 12px;border:1px solid #e8e2f2;border-radius:12px;background:#fff;cursor:pointer}.account-subject-list label:has(input:checked){border-color:#bba8eb;background:#f3efff;box-shadow:0 0 0 2px rgba(113,76,216,.07)}.account-subject-list input{width:16px;height:16px;accent-color:#6e4cdb}.account-subject-list b,.account-subject-list small{display:block}.account-subject-list b{font-size:11px}.account-subject-list small{margin-top:3px;color:#9389a2;font-size:8px}.account-subject-empty{padding:14px;text-align:center;background:#fff;border-radius:12px}.role-access-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.role-access-list>div{display:flex;align-items:flex-start;gap:9px;padding:12px;background:#fff;border:1px solid #ebe5f5;border-radius:12px}.role-access-list>div>span{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;color:#6847c9;background:#eee8ff;border-radius:9px}.role-access-list svg{width:15px;height:15px}.role-access-list p{margin:0}.role-access-list b,.role-access-list small{display:block}.role-access-list b{font-size:10px}.role-access-list small{margin-top:3px;color:#8d839c;font-size:8px;line-height:1.45}.account-avatar.has-photo{overflow:hidden;background:#eee8ff}.account-avatar img{width:100%;height:100%;object-fit:cover}.account-row{min-height:74px}.account-info strong{font-size:11px}

.subject-enrollment-count{margin-left:auto;padding:6px 10px;color:#6544bf;background:#f0ebff;border-radius:10px;font-size:10px}.subject-enrollment-search{height:43px;margin-top:14px}.subject-enrollment-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:300px;margin-top:11px;overflow:auto;padding-right:4px}.subject-enrollment-row{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border:1px solid #e8e2f1;border-radius:12px;background:#fff;cursor:pointer}.subject-enrollment-row:has(input:checked){border-color:#bba8eb;background:#f4f0ff}.subject-enrollment-row>input{width:16px;height:16px;flex:0 0 auto;accent-color:#6e4cdb}.subject-enrollment-avatar{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#6b50a7;background:#eee7fa;border-radius:10px;font-size:12px;font-weight:700}.subject-enrollment-avatar img{width:100%;height:100%;object-fit:cover}.subject-enrollment-row>span:last-child{min-width:0}.subject-enrollment-row b,.subject-enrollment-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subject-enrollment-row b{font-size:10px}.subject-enrollment-row small{margin-top:3px;color:#91889d;font-size:8px}.subject-enrollment-empty{margin-top:10px;padding:17px;text-align:center;color:#8d8499;background:#fff;border-radius:12px;font-size:10px}.subject-enrollment-line{display:flex;align-items:center;gap:7px;margin:8px 0 11px;color:#756b83;font-size:10px}.subject-enrollment-line svg{width:14px;height:14px;color:#7655d5}.subject-enrollment-line b{color:#4f3b81}.subject-actions .view-subject-students{width:100%;color:#6544bf;background:#f5f1ff;border-color:#e1d7f6}

.teacher-subject-scope{display:grid;gap:5px;min-width:220px;color:#7d748a;font-size:9px}.teacher-subject-scope select{height:42px;padding:0 11px}.directory-contact i{display:inline-block;margin:2px 4px 0 0;padding:3px 6px;color:#6849be;background:#f0ebff;border-radius:6px;font-size:8px;font-style:normal}.staff-student-card .directory-card-stats{justify-content:center}.staff-access-note{color:#8d829b;font-size:8px}.restricted-teacher .student-profile-header{padding-right:72px}.restricted-teacher .profile-heading{max-width:none}.restricted-teacher .profile-tabs{justify-content:center}.restricted-teacher .profile-tabs button{min-width:150px}.star-subject-row{display:grid;grid-template-columns:minmax(190px,320px) 1fr;align-items:end;gap:13px;margin-bottom:12px}.star-subject-row label{display:grid;gap:5px;color:#7c728b;font-size:9px}.star-subject-row select{width:100%;height:40px;padding:0 10px}.star-subject-row small{padding-bottom:8px;color:#91879f;font-size:9px}

@media(max-width:760px){#account-dialog{width:100%;max-height:100vh;border-radius:0}#account-form{padding:18px 14px}.account-photo-editor{grid-template-columns:82px 1fr;gap:12px}.account-photo-preview{width:82px;height:82px;border-radius:21px}.account-profile-fields,.account-subject-list,.role-access-list,.subject-enrollment-list{grid-template-columns:1fr}.role-access-list{gap:7px}.teacher-subject-scope{width:100%;min-width:0}.star-subject-row{grid-template-columns:1fr}.star-subject-row small{padding:0}.restricted-teacher .profile-tabs button{min-width:0}.restricted-teacher .student-profile-header{padding-right:58px}}

/* Teacher directory */
.teachers-hero{background:linear-gradient(125deg,#3d237f 0%,#6a43d2 55%,#a486f1 100%)}
.teachers-hero::before,.teachers-hero::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.15);border-radius:50%}
.teachers-hero::before{width:300px;height:300px;right:-40px;top:-180px;box-shadow:0 0 0 55px rgba(255,255,255,.035)}
.teachers-hero::after{width:170px;height:170px;right:210px;bottom:-125px;background:rgba(255,255,255,.055)}
.teachers-hero>div:first-child{position:relative;z-index:2;max-width:650px}
.teachers-hero h1{margin:8px 0 7px;font-size:34px;letter-spacing:-.7px}
.teachers-hero p{max-width:610px;margin:0;color:rgba(255,255,255,.75);font-size:13px;line-height:1.7}
.teachers-hero .kicker{color:#e5dcff}
.teachers-hero-art{position:relative;z-index:2;width:230px;height:150px}
.teachers-hero-art>span{position:absolute;left:72px;top:24px;width:83px;height:83px;display:grid;place-items:center;color:#633fc1;background:rgba(255,255,255,.94);border:8px solid rgba(255,255,255,.24);border-radius:29px;box-shadow:0 20px 40px rgba(39,20,84,.22)}
.teachers-hero-art svg{width:37px;height:37px;stroke-width:1.8}
.teachers-hero-art i{position:absolute;width:45px;height:45px;border:5px solid rgba(255,255,255,.82);border-radius:50%;background:#b69ff3}
.teachers-hero-art i:nth-child(2){left:15px;bottom:12px}.teachers-hero-art i:nth-child(3){right:13px;bottom:20px;background:#f2cddf}.teachers-hero-art i:nth-child(4){right:12px;top:2px;width:32px;height:32px;background:#ccebdc}
.teacher-directory-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.teacher-directory-metrics article{display:flex;align-items:center;gap:13px;min-height:96px;padding:18px 20px;background:#fff;border:1px solid #e8e1f1;border-radius:18px;box-shadow:0 10px 26px rgba(72,44,133,.055)}
.teacher-directory-metrics .soft-icon{width:49px;height:49px;flex:0 0 auto;color:#6843ca;background:#eee8ff;border-radius:15px}
.teacher-directory-metrics .public-icon{color:#278460;background:#e5f5ec}.teacher-directory-metrics .assigned-icon{color:#bb8116;background:#fff2d4}
.teacher-directory-metrics small,.teacher-directory-metrics strong,.teacher-directory-metrics div>span{display:block}.teacher-directory-metrics small{color:#887e94;font-size:10px}.teacher-directory-metrics strong{display:inline;margin-top:2px;color:#372b4c;font-size:25px}.teacher-directory-metrics div>span{display:inline;margin-left:4px;color:#998fa3;font-size:9px}
.teacher-directory-section{margin-top:18px;padding:28px;background:#fff;border:1px solid #e8e1f1;border-radius:22px;box-shadow:0 14px 35px rgba(67,39,126,.06)}
.teacher-directory-heading{align-items:center}.teacher-directory-heading>div>p{margin:5px 0 0;color:#91869d;font-size:10px}.teacher-directory-heading .button{flex:0 0 auto}
.teacher-directory-toolbar{display:grid;grid-template-columns:minmax(250px,1fr) 200px;gap:12px;margin:23px 0 20px;padding:14px;background:#faf8fd;border:1px solid #eee9f4;border-radius:16px}
.teacher-directory-toolbar .search-box{height:46px;background:#fff}.teacher-directory-toolbar .filter-box{height:46px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:0 11px;background:#fff;border:1px solid #dce6e0;border-radius:11px}.teacher-directory-toolbar .filter-box span{font-size:9px;white-space:nowrap}.teacher-directory-toolbar .filter-box select{height:38px;border:0;background:transparent;text-align:right}
.teacher-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.teacher-admin-card{position:relative;overflow:hidden;padding:0 19px 19px;background:#fff;border:1px solid #e5def0;border-radius:20px;box-shadow:0 9px 24px rgba(63,37,119,.055)}
.teacher-admin-cover{height:72px;margin:0 -19px;background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.25),transparent 50px),linear-gradient(120deg,#4d2c9e,#8664e2)}
.teacher-public-status{position:absolute;right:13px;top:13px;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;color:#fff;background:rgba(35,18,74,.28);border:1px solid rgba(255,255,255,.25);border-radius:9px;font-size:8px;font-weight:600;backdrop-filter:blur(8px)}
.teacher-public-status svg{width:12px;height:12px}.teacher-public-status.is-hidden{color:#6e5d78;background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.95)}
.teacher-admin-profile{position:relative;display:flex;align-items:flex-end;gap:13px;margin-top:-30px}
.teacher-admin-photo{width:82px;height:82px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#6242b4;background:linear-gradient(145deg,#eee7ff,#ded2f8);border:6px solid #fff;border-radius:24px;font-size:27px;font-weight:800;box-shadow:0 8px 20px rgba(73,45,137,.14)}
.teacher-admin-photo img,.public-teacher-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.teacher-admin-profile>div:last-child{min-width:0;padding-bottom:5px}.teacher-admin-profile small{color:#7150ca;font-size:8px;font-weight:700;letter-spacing:.08em}.teacher-admin-profile h3{overflow:hidden;margin:3px 0 1px;color:#372c49;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.teacher-admin-profile p{margin:0;color:#968ba1;font-size:9px}
.teacher-admin-bio{min-height:42px;margin:15px 0 12px;color:#7c7189;font-size:10px;line-height:1.7}
.teacher-subject-tags{min-height:31px;display:flex;flex-wrap:wrap;gap:6px}.teacher-subject-tags span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;color:#6545bd;background:#f3efff;border-radius:8px;font-size:8px}.teacher-subject-tags svg{width:11px;height:11px}.teacher-subject-tags .teacher-no-subject{color:#94899e;background:#f6f4f8}
.teacher-admin-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border:1px solid #eee9f3;border-radius:12px;background:#fbfafd}.teacher-admin-stats span{padding:10px 12px}.teacher-admin-stats span+span{border-left:1px solid #eee9f3}.teacher-admin-stats small,.teacher-admin-stats strong{display:block}.teacher-admin-stats small{color:#968ca0;font-size:8px}.teacher-admin-stats strong{margin-top:2px;color:#4c386f;font-size:16px}
.teacher-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.teacher-admin-actions .button{min-height:40px;padding:0 10px;font-size:9px}.teacher-admin-actions svg{width:14px}
.teacher-admin-empty{margin-top:10px;padding:55px 20px;background:#faf8fd;border:1px dashed #d9ceea;border-radius:18px}.teacher-admin-empty:not([hidden]){display:grid;place-items:center}.teacher-admin-empty span{width:52px;height:52px;display:grid;place-items:center;color:#6a48c5;background:#eee8ff;border-radius:16px}.teacher-admin-empty svg{width:24px}.teacher-admin-empty strong{margin-top:11px}.teacher-admin-empty p{margin:4px 0 0;color:#978da1;font-size:9px}
.account-public-toggle{display:flex;align-items:flex-start;gap:11px;padding:14px;background:#fff;border:1px solid #e7e0f1;border-radius:13px;cursor:pointer}.account-public-toggle:has(input:checked){border-color:#bda9ed;background:#f4f0ff}.account-public-toggle input{width:17px;height:17px;margin-top:1px;accent-color:#6d49d1}.account-public-toggle b,.account-public-toggle small{display:block}.account-public-toggle b{font-size:11px}.account-public-toggle small{margin-top:3px;color:#8f849b;font-size:8px;line-height:1.5}
.public-teacher-card{display:flex;flex-direction:column;align-items:center;min-height:360px}.public-teacher-role{margin-top:14px;color:#7753ce;font-size:9px;font-weight:700;letter-spacing:.09em}.public-teacher-card h3{margin:5px 0 1px}.public-teacher-nickname{color:#94899f;font-size:10px;font-weight:500}.public-teacher-card .public-teacher-bio{min-height:54px;margin:13px 0 14px;color:#81758e;font-size:11px;line-height:1.65}.public-teacher-card .public-teacher-subject{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:auto;padding:9px 10px;color:#6040b7;background:#f2edff;border-radius:10px;font-size:9px;line-height:1.35}.public-teacher-subject svg{width:14px;height:14px;flex:0 0 auto}

@media(max-width:920px){.teacher-admin-grid{grid-template-columns:1fr}.teachers-hero-art{width:180px}.teacher-directory-metrics{gap:9px}.teacher-directory-metrics article{padding:14px}}
@media(max-width:820px){.mobile-nav{grid-template-columns:repeat(7,minmax(58px,1fr));width:calc(100% - 16px);max-width:700px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.mobile-nav::-webkit-scrollbar{display:none}}
@media(max-width:640px){.teachers-hero{min-height:210px;padding:27px 22px}.teachers-hero-art{display:none}.teachers-hero h1{font-size:28px}.teachers-hero p{font-size:11px}.teacher-directory-metrics{grid-template-columns:1fr}.teacher-directory-metrics article{min-height:76px}.teacher-directory-section{padding:20px 14px}.teacher-directory-heading{align-items:flex-start;gap:15px}.teacher-directory-heading .button{width:100%}.teacher-directory-toolbar{grid-template-columns:1fr;padding:10px}.teacher-admin-card{padding:0 14px 15px}.teacher-admin-cover{margin-inline:-14px}.teacher-admin-actions{grid-template-columns:1fr}.public-teacher-card{width:min(300px,100%)}}

/* Course hours and notifications */
.hour-notification-center{position:relative;z-index:70}
.hour-notification-button{position:relative;width:41px;height:41px;display:grid;place-items:center;color:#6f6283;background:#f8f6fc;border:1px solid #e8e2f0;border-radius:12px;transition:.18s ease}
.hour-notification-button:hover,.hour-notification-button[aria-expanded="true"]{color:#6541c4;background:#f0ebff;border-color:#d9cdf1}
.hour-notification-button.has-alerts{color:#bf4857;background:#fff1f2;border-color:#f5cbd0;box-shadow:0 7px 18px rgba(190,63,79,.11)}
.hour-notification-button svg{width:19px;height:19px}.hour-notification-button.has-alerts svg{animation:bellRing 2.8s ease-in-out infinite;transform-origin:50% 10%}
.hour-notification-count{position:absolute;right:-6px;top:-7px;min-width:19px;height:19px;padding:0 5px;color:#fff;background:#e84d5d;border:2px solid #fff;border-radius:10px;font-size:8px;line-height:15px;text-align:center;box-shadow:0 4px 10px rgba(186,48,65,.28)}
.hour-notification-panel{position:absolute;right:0;top:50px;width:min(390px,calc(100vw - 32px));overflow:hidden;background:#fff;border:1px solid #e6deef;border-radius:18px;box-shadow:0 24px 65px rgba(47,27,91,.2);animation:notificationIn .18s ease both}
.hour-notification-panel[hidden]{display:none!important}.hour-notification-panel>header{display:flex;align-items:center;gap:11px;padding:17px 18px;background:linear-gradient(135deg,#4a2a96,#7952da);color:#fff}
.hour-notification-panel>header>span{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.14);border-radius:12px}.hour-notification-panel>header svg{width:18px}.hour-notification-panel>header strong,.hour-notification-panel>header small{display:block}.hour-notification-panel>header strong{font-size:13px}.hour-notification-panel>header small{margin-top:2px;color:rgba(255,255,255,.72);font-size:8px}
.hour-notification-list{max-height:360px;overflow:auto;padding:8px}.hour-notification-item{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;color:#463a55;background:#fff;border:0;border-radius:12px;text-align:left;transition:.15s}.hour-notification-item:hover{background:#fff4f5}.hour-notification-item+.hour-notification-item{border-top:1px solid #f0ebf3}.notification-student-avatar{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;color:#743f8b;background:#f5dff1;border-radius:12px;font-size:14px;font-weight:700}.notification-student-avatar img{width:100%;height:100%;object-fit:cover}.hour-notification-item span:nth-child(2){min-width:0}.hour-notification-item strong,.hour-notification-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hour-notification-item strong{font-size:10px}.hour-notification-item small{margin-top:3px;color:#91869c;font-size:8px}.hour-notification-item>b{padding:6px 8px;color:#bd3f50;background:#ffeaed;border-radius:8px;font-size:8px;white-space:nowrap}.hour-notification-item.is-empty>b{color:#fff;background:#d84657}
.hour-notification-empty{display:grid;place-items:center;padding:34px 15px;text-align:center}.hour-notification-empty>span{width:43px;height:43px;display:grid;place-items:center;color:#2c956b;background:#e6f6ee;border-radius:13px}.hour-notification-empty strong{margin-top:9px;font-size:11px}.hour-notification-empty small{margin-top:2px;color:#93899d;font-size:8px}.hour-notification-panel>footer{padding:10px 15px;color:#8d8298;background:#faf8fc;border-top:1px solid #eee9f3;font-size:8px;text-align:center}
.alert-settings-icon{color:#c14050!important;background:#ffeaed!important}.hour-alert-settings form{display:grid;gap:15px;margin-top:22px}.hour-alert-settings form>label{display:grid;gap:7px;color:#746a80;font-size:10px}.hour-threshold-input{display:grid;grid-template-columns:1fr auto;align-items:center;overflow:hidden;border:1px solid #dfd7e8;border-radius:11px;background:#fff}.hour-threshold-input input{height:47px;border:0;border-radius:0}.hour-threshold-input b{padding:0 15px;color:#695c76;border-left:1px solid #eee8f2;font-size:10px}.hour-alert-preview{display:flex;align-items:center;gap:12px;padding:14px;color:#6b3e4a;background:linear-gradient(135deg,#fff2f3,#fff8f8);border:1px solid #f4d5d9;border-radius:14px}.hour-alert-preview>span{width:41px;height:41px;display:grid;place-items:center;flex:0 0 auto;color:#c34655;background:#fff;border-radius:12px;box-shadow:0 7px 16px rgba(184,61,76,.1)}.hour-alert-preview svg{width:18px}.hour-alert-preview strong,.hour-alert-preview p{display:block}.hour-alert-preview strong{font-size:11px}.hour-alert-preview p{margin:3px 0 0;color:#a0767e;font-size:8px}
.classroom-settings-icon{color:#6542c3!important;background:#eee8ff!important}.classroom-add-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px;margin-top:22px}.classroom-add-form label{display:grid;gap:6px;color:#756a81;font-size:9px}.classroom-add-form input{height:43px}.classroom-add-form .button{height:43px}.classroom-settings-list{display:grid;gap:8px;margin-top:14px}.classroom-settings-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto 35px;align-items:center;gap:9px;padding:10px;background:#faf8fd;border:1px solid #e9e2f1;border-radius:13px}.classroom-settings-badge{width:40px;height:40px;display:grid;place-items:center;color:#6845c7;background:#eee8ff;border-radius:11px}.classroom-settings-badge svg{width:18px}.classroom-settings-row label{display:grid;gap:4px;color:#8b8195;font-size:7px}.classroom-settings-row input{height:38px;padding:0 10px;font-size:10px}.classroom-student-count{min-width:51px;color:#94899f;font-size:8px;text-align:center}.classroom-student-count b{display:block;color:#4e3a70;font-size:13px}.classroom-rename,.classroom-delete{height:35px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;color:#5e3db8;background:#fff;border:1px solid #ddd3ec;border-radius:9px;font-size:8px}.classroom-rename:hover{background:#eee8ff}.classroom-delete{width:35px;padding:0;color:#b45259;background:#fff4f3;border-color:#efd9d7}.classroom-settings-row button svg{width:13px}.classroom-settings-row button:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.38}.classroom-settings-note{display:flex;align-items:flex-start;gap:6px;margin:13px 0 0;color:#91869c;font-size:8px;line-height:1.6}.classroom-settings-note svg{width:13px;flex:0 0 auto;color:#7653d0}
@media(max-width:600px){.classroom-add-form{grid-template-columns:1fr}.classroom-add-form .button{width:100%}.classroom-settings-row{grid-template-columns:36px minmax(0,1fr) 34px}.classroom-settings-badge{width:36px;height:36px}.classroom-student-count{grid-column:1;grid-row:2}.classroom-rename{grid-column:2/4;grid-row:2;justify-self:end}.classroom-delete{grid-column:3;grid-row:1}.classroom-rename span{display:none}}
.directory-student-card.near-hour-limit{overflow:hidden;border-color:#efb8bf;background:linear-gradient(100deg,#fff5f6 0,#fff 38%);box-shadow:0 9px 25px rgba(190,61,77,.09)}.directory-student-card.near-hour-limit::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(#ea5969,#be3446)}.directory-student-card.near-hour-limit:hover{border-color:#e58f99;box-shadow:0 13px 30px rgba(190,61,77,.14)}
.directory-course-hours{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.directory-course-hours i{display:inline-flex;align-items:center;gap:4px;max-width:210px;padding:4px 7px;color:#6547b4;background:#f2edff;border-radius:7px;font-size:7px;font-style:normal}.directory-course-hours i svg{width:10px;height:10px;flex:0 0 auto}.directory-course-hours i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-course-hours i b{font-weight:700;white-space:nowrap}.directory-course-hours i.is-low{color:#b63b4b;background:#ffe8eb}.directory-course-hours i.course-more{color:#83788e;background:#f3f1f5}.directory-no-course{color:#9a909f;font-size:8px}
.student-course-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;background:linear-gradient(135deg,#f7f3ff,#fff);border:1px solid #e4daf4;border-radius:18px}.student-course-summary h3{margin:5px 0 3px;font-size:18px}.student-course-summary p{margin:0;color:#897f95;font-size:9px}.student-course-summary-stats{display:flex;gap:8px}.student-course-summary-stats>span{min-width:92px;padding:11px 14px;background:#fff;border:1px solid #e8e1f1;border-radius:12px;text-align:center}.student-course-summary-stats small,.student-course-summary-stats strong,.student-course-summary-stats b{display:block}.student-course-summary-stats small{color:#8c8297;font-size:8px}.student-course-summary-stats strong{margin-top:2px;color:#5634b1;font-size:21px}.student-course-summary-stats b{color:#9a90a4;font-size:7px}.student-course-summary-stats .course-alert-stat.has-alerts{background:#fff1f2;border-color:#f1c7cc}.student-course-summary-stats .course-alert-stat.has-alerts strong{color:#c64051}
.student-course-list{display:grid;gap:13px;margin-top:16px}.student-course-card{padding:18px;background:#fff;border:1px solid #e6dfee;border-radius:18px;box-shadow:0 8px 24px rgba(70,43,127,.05)}.student-course-card.is-low,.student-course-card.is-empty{border-color:#efbbc1;background:linear-gradient(135deg,#fff8f8,#fff)}.student-course-card>header{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px}.student-course-icon{width:52px;height:52px;display:grid;place-items:center;overflow:hidden;color:#6541c4;background:#eee8ff;border-radius:15px}.student-course-icon img{width:100%;height:100%;object-fit:cover}.student-course-icon svg{width:23px}.student-course-card>header>div{min-width:0}.student-course-card>header small{color:#806da8;font-size:7px;font-weight:700;letter-spacing:.1em}.student-course-card h4{overflow:hidden;margin:2px 0 3px;color:#372b4a;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.student-course-card>header p{display:flex;align-items:center;gap:5px;margin:0;color:#8e8499;font-size:8px}.student-course-card>header p svg{width:11px}.student-course-status{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;color:#26805c;background:#e5f5ec;border-radius:9px;font-size:8px;white-space:nowrap}.student-course-status svg{width:12px}.student-course-card.is-low .student-course-status,.student-course-card.is-empty .student-course-status{color:#ba3d4d;background:#ffe8eb}
.student-course-hour-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:15px;overflow:hidden;background:#faf8fd;border:1px solid #eee8f4;border-radius:13px}.student-course-hour-grid>span{padding:12px 14px}.student-course-hour-grid>span+span{border-left:1px solid #ebe5f1}.student-course-hour-grid small,.student-course-hour-grid strong,.student-course-hour-grid b{display:block}.student-course-hour-grid small{color:#91879c;font-size:8px}.student-course-hour-grid strong{display:inline-block;margin-top:3px;color:#49336f;font-size:20px}.student-course-hour-grid b{display:inline;margin-left:4px;color:#9a90a3;font-size:7px}.student-course-hour-grid .remaining strong{color:#2d8b66}.student-course-card.is-low .remaining strong,.student-course-card.is-empty .remaining strong{color:#c23e4f}
.student-course-progress{margin-top:13px}.student-course-progress>span{display:block;height:8px;overflow:hidden;background:#eeeaf2;border-radius:6px}.student-course-progress i{display:block;height:100%;background:linear-gradient(90deg,#6a45cc,#9b7bea);border-radius:6px;transition:width .3s}.student-course-card.is-low .student-course-progress i{background:linear-gradient(90deg,#e35767,#bd3345)}.student-course-progress small{display:block;margin-top:5px;color:#92889c;font-size:7px;text-align:right}
.student-course-hours-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:9px;margin-top:14px;padding-top:14px;border-top:1px solid #eee8f2}.student-course-hours-form label{display:grid;gap:5px;color:#776c83;font-size:8px}.student-course-hours-form input{width:100%;height:39px;padding:0 10px;font-size:10px}.student-course-hours-form .button{height:39px;padding:0 13px;font-size:8px}.student-course-readonly{display:flex;align-items:center;gap:6px;margin-top:13px;padding-top:12px;color:#90869a;border-top:1px solid #eee8f2;font-size:8px}.student-course-readonly svg{width:12px}.student-course-empty{display:grid;place-items:center;padding:55px 20px;text-align:center}.student-course-empty>span{width:55px;height:55px;display:grid;place-items:center;color:#6845c4;background:#eee8ff;border-radius:17px}.student-course-empty strong{margin-top:11px;font-size:12px}.student-course-empty p{margin:3px 0 0;color:#958ba0;font-size:8px}
@keyframes notificationIn{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}@keyframes bellRing{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(12deg)}92%{transform:rotate(-11deg)}95%{transform:rotate(7deg)}98%{transform:rotate(-4deg)}}

@media(max-width:700px){.save-indicator{display:none}.hour-notification-panel{position:fixed;left:10px;right:10px;top:66px;width:auto}.student-course-summary{align-items:flex-start;flex-direction:column}.student-course-summary-stats{width:100%}.student-course-summary-stats>span{flex:1}.student-course-card{padding:14px}.student-course-card>header{grid-template-columns:45px minmax(0,1fr)}.student-course-icon{width:45px;height:45px}.student-course-status{grid-column:1/-1;width:100%;justify-content:center}.student-course-hours-form{grid-template-columns:1fr 1fr}.student-course-hours-form .button{grid-column:1/-1;width:100%}.directory-course-hours i{max-width:170px}}

/* Student course enrollment */
#student-dialog{width:min(760px,calc(100% - 32px))}#student-form{max-height:min(760px,calc(100vh - 34px));overflow:auto}.student-subject-picker{margin-top:17px;padding:16px;border:1px solid #e4dcf3;border-radius:17px;background:linear-gradient(145deg,#fbf9ff,#f6f2fd)}.student-subject-picker-heading{display:flex;align-items:center;gap:11px}.student-subject-picker-heading .soft-icon{width:40px;height:40px;flex:0 0 auto}.student-subject-picker-heading .soft-icon svg{width:19px}.student-subject-picker-heading h3{margin:0;color:#3d3151;font-size:13px}.student-subject-picker-heading p{margin:3px 0 0;color:#91879d;font-size:8px}.student-subject-picker-heading>b{margin-left:auto;padding:6px 9px;color:#6444bd;background:#ede7ff;border-radius:9px;font-size:9px;white-space:nowrap}.student-subject-choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}.student-subject-choice{overflow:hidden;border:1px solid #e6dfef;border-radius:13px;background:#fff;transition:.18s ease}.student-subject-choice.selected{border-color:#bba8eb;box-shadow:0 0 0 2px rgba(112,73,211,.07)}.student-subject-choice-main{display:grid;grid-template-columns:16px 38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;cursor:pointer}.student-subject-choice-main>input{width:16px;height:16px;margin:0;accent-color:#704bd6}.student-subject-choice-icon{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;color:#6947c5;background:#eee8ff;border-radius:10px}.student-subject-choice-icon svg{width:18px}.student-subject-choice-icon img{width:100%;height:100%;object-fit:cover}.student-subject-choice-main span:nth-of-type(2){min-width:0}.student-subject-choice-main b,.student-subject-choice-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.student-subject-choice-main b{font-size:10px}.student-subject-choice-main small{margin-top:3px;color:#91879d;font-size:7px}.student-subject-choice-main>i{padding:4px 6px;color:#796d86;background:#f4f1f7;border-radius:7px;font-size:7px;font-style:normal;white-space:nowrap}.student-subject-choice.selected .student-subject-choice-main>i{color:#5e3eb7;background:#eee8ff}.student-subject-choice-hours{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-top:1px solid #ede8f3;background:#faf8fd}.student-subject-choice-hours[hidden]{display:none}.student-subject-choice-hours>label{display:grid;gap:4px;color:#7c7188;font-size:8px}.student-subject-choice-hours>label>div{position:relative}.student-subject-choice-hours input{width:100%;height:36px;padding:0 38px 0 9px;font-size:10px}.student-subject-choice-hours label b{position:absolute;right:10px;top:50%;color:#978ca1;font-size:8px;transform:translateY(-50%)}.student-subject-choice-empty{margin-top:12px;padding:16px;color:#8f8599;background:#fff;border:1px dashed #ddd4eb;border-radius:12px;text-align:center;font-size:9px}.student-course-summary-actions{display:flex;align-items:center;gap:10px}.student-course-summary-actions>.button{height:44px;padding:0 14px;font-size:9px;white-space:nowrap}.profile-subject-enrollment{margin-top:14px;padding:18px;border:1px solid #cfbdf5;border-radius:17px;background:linear-gradient(145deg,#f7f3ff,#fff);box-shadow:0 12px 28px rgba(88,53,163,.08);animation:notificationIn .2s ease}.profile-subject-enrollment[hidden]{display:none}.profile-subject-enrollment-heading{display:flex;align-items:flex-start;gap:12px}.profile-subject-enrollment-heading h4{margin:4px 0 2px;font-size:15px}.profile-subject-enrollment-heading p{margin:0;color:#8e849a;font-size:8px}.profile-subject-enrollment-heading .dialog-close{width:31px;height:31px;font-size:18px}.profile-subject-enrollment .student-subject-choice-list{grid-template-columns:repeat(3,minmax(0,1fr));max-height:390px;overflow:auto;padding-right:3px}.profile-subject-enrollment-submit{width:100%;min-height:43px;margin-top:13px}.profile-subject-enrollment-submit:disabled{cursor:not-allowed;opacity:.45}

@media(max-width:900px){.profile-subject-enrollment .student-subject-choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}.student-course-summary-actions{width:100%;align-items:stretch;flex-direction:column}.student-course-summary-actions>.button{width:100%}}
@media(max-width:700px){#student-dialog{width:100%;max-height:100vh;border-radius:0}#student-form{max-height:100vh;padding:18px 14px}.student-subject-choice-list,.profile-subject-enrollment .student-subject-choice-list{grid-template-columns:1fr}.student-subject-picker-heading{align-items:flex-start}.student-subject-picker-heading p{line-height:1.55}.student-subject-choice-main{grid-template-columns:16px 36px minmax(0,1fr)}.student-subject-choice-main>i{grid-column:3}.profile-subject-enrollment{padding:14px}.profile-subject-enrollment .student-subject-choice-list{max-height:none}.student-course-summary-actions{width:100%}}

/* Subject attendance flow */
.attendance-search-card{display:grid;gap:14px;padding:17px}.attendance-search-card .student-main{align-items:flex-start}.attendance-course-statuses{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.attendance-course-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:8px;font-size:8px;font-style:normal}.attendance-course-chip svg{width:11px;height:11px}.attendance-course-chip b{font-weight:600}.attendance-course-chip i{font-style:normal}.attendance-course-chip.status-present{color:#277d57;background:#e6f5ec}.attendance-course-chip.status-late{color:#a36f16;background:#fff2d4}.attendance-course-chip.status-leave{color:#5270a7;background:#eaf0fa}.attendance-course-chip.status-absent{color:#b84755;background:#fce8ea}.attendance-course-pending{display:block!important;width:fit-content;margin-top:8px!important;padding:5px 7px;color:#8e8498!important;background:#f4f1f7;border-radius:8px;font-size:8px!important}.attendance-check-button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;color:#fff;border:0;border-radius:13px;background:linear-gradient(135deg,#825eee,#5532b3);box-shadow:0 10px 24px rgba(91,54,181,.22);font-size:13px;font-weight:700;cursor:pointer;transition:.18s ease}.attendance-check-button:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(91,54,181,.3)}.attendance-check-button svg{width:20px;height:20px}.attendance-check-button small{padding-left:9px;color:rgba(255,255,255,.7);border-left:1px solid rgba(255,255,255,.25);font-size:8px;font-weight:400}.attendance-check-button:disabled{cursor:not-allowed;color:#948c9b;background:#efedf1;box-shadow:none}.attendance-check-dialog{width:min(720px,calc(100% - 28px));max-width:none;max-height:94vh;overflow:hidden;border-color:#ddd3ef;border-radius:25px;background:#faf8fd}.attendance-check-dialog::backdrop{background:rgba(39,25,68,.58);backdrop-filter:blur(6px)}#attendance-check-form{max-height:94vh;overflow:auto}.attendance-check-header{position:sticky;z-index:4;top:0;display:flex;align-items:center;gap:13px;padding:17px 20px;color:#fff;background:linear-gradient(120deg,#42227e,#6942cd 62%,#9779e5);box-shadow:0 8px 24px rgba(60,35,115,.18)}.attendance-check-avatar{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#6747b7;background:#fff;border:3px solid rgba(255,255,255,.65);border-radius:17px;font-size:19px;font-weight:700}.attendance-check-avatar img{width:100%;height:100%;object-fit:cover}.attendance-check-header>div{min-width:0}.attendance-check-header>div>span{color:#d9ccfa;font-size:7px;font-weight:700;letter-spacing:.16em}.attendance-check-header h2{overflow:hidden;margin:3px 0 2px;text-overflow:ellipsis;white-space:nowrap;font-size:18px}.attendance-check-header p{margin:0;color:rgba(255,255,255,.72);font-size:8px}.attendance-check-header .dialog-close{color:#fff;background:rgba(255,255,255,.14)}.attendance-check-progress{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 20px;background:#fff;border-bottom:1px solid #eae4f2}.attendance-check-progress span{display:flex;align-items:center;gap:5px;color:#a097a8;font-size:8px;font-weight:600}.attendance-check-progress span b{width:22px;height:22px;display:grid;place-items:center;color:#8c809b;background:#f0edf3;border-radius:50%;font-size:8px}.attendance-check-progress span.active{color:#6440c2}.attendance-check-progress span.active b{color:#fff;background:#6843cf;box-shadow:0 4px 12px rgba(103,66,205,.25)}.attendance-check-progress span.done{color:#398263}.attendance-check-progress span.done b{color:#257855;background:#e1f3e9}.attendance-check-progress>i{width:42px;height:1px;background:#e4deeb}.attendance-check-step{padding:21px}.attendance-check-step.active{animation:notificationIn .2s ease}.attendance-step-heading{display:flex;align-items:center;gap:11px}.attendance-step-heading .soft-icon{width:43px;height:43px;flex:0 0 auto}.attendance-step-heading h3{margin:0;font-size:16px}.attendance-step-heading p{margin:3px 0 0;color:#8e8499;font-size:9px}.attendance-subject-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:16px}.attendance-subject-option{display:grid;grid-template-columns:45px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:11px;text-align:left;border:1px solid #e6deef;border-radius:13px;background:#fff;cursor:pointer;transition:.16s ease}.attendance-subject-option:hover:not(:disabled){border-color:#baa6e9;box-shadow:0 7px 18px rgba(83,49,154,.08)}.attendance-subject-option.selected{border-color:#8b69dc;background:#f4f0ff;box-shadow:0 0 0 2px rgba(105,67,201,.1)}.attendance-subject-option.unavailable{cursor:not-allowed;filter:grayscale(1);opacity:.48;background:#f3f1f4}.attendance-subject-option-icon{width:45px;height:45px;display:grid;place-items:center;overflow:hidden;color:#6746c2;background:#eee8ff;border-radius:12px}.attendance-subject-option-icon img{width:100%;height:100%;object-fit:cover}.attendance-subject-option-icon svg{width:19px}.attendance-subject-option>span:nth-child(2){min-width:0}.attendance-subject-option small,.attendance-subject-option strong,.attendance-subject-option i{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attendance-subject-option small{color:#765bb9;font-size:7px;font-weight:700}.attendance-subject-option strong{margin-top:2px;font-size:11px}.attendance-subject-option i{margin-top:3px;color:#908699;font-size:7px;font-style:normal}.attendance-subject-option>b{padding:5px 7px;color:#6e52b1;background:#f0eaff;border-radius:8px;font-size:7px;white-space:nowrap}.attendance-subject-option>b svg{width:10px;margin-right:3px}.attendance-subject-option>b.status-present{color:#287d57;background:#e3f4ea}.attendance-subject-option>b.status-late{color:#a26f16;background:#fff1d1}.attendance-subject-option>b.status-leave{color:#5570a7;background:#e9eff9}.attendance-subject-option>b.status-absent{color:#b74554;background:#fbe6e8}.attendance-subject-empty{grid-column:1/-1;display:grid;place-items:center;padding:35px;color:#91879b;text-align:center}.attendance-subject-empty>span{width:50px;height:50px;display:grid;place-items:center;color:#6845c7;background:#eee8ff;border-radius:15px}.attendance-subject-empty strong{margin-top:8px;color:#574d61;font-size:11px}.attendance-subject-empty p{margin:3px 0 0;font-size:8px}.attendance-step-error{min-height:17px;margin:8px 0 0;color:#bb4753;font-size:8px}.attendance-step-next{width:100%;margin-top:2px}.attendance-step-next svg,.attendance-step-actions .button.primary svg{transform:rotate(-90deg)}.attendance-selected-subject{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:11px 13px;background:#f1ecff;border:1px solid #dfd4f6;border-radius:13px}.attendance-selected-subject>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:#6440c2;background:#fff;border-radius:10px}.attendance-selected-subject>span svg{width:17px}.attendance-selected-subject>div{min-width:0;flex:1}.attendance-selected-subject small,.attendance-selected-subject strong,.attendance-selected-subject p{display:block}.attendance-selected-subject small{color:#8c7aa9;font-size:7px}.attendance-selected-subject strong{margin-top:2px;font-size:11px}.attendance-selected-subject p{margin:2px 0 0;color:#8a8094;font-size:7px}.attendance-selected-subject>b{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:8px;font-size:7px}.attendance-selected-subject>b svg{width:11px}.attendance-selected-subject>b.status-present{color:#287d57;background:#ddf2e6}.attendance-selected-subject>b.status-late{color:#a26f16;background:#ffefc8}.attendance-selected-subject>b.status-leave{color:#5570a7;background:#e5edf9}.attendance-selected-subject>b.status-absent{color:#b74554;background:#fae1e4}.attendance-status-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.attendance-status-choices button{display:grid;place-items:center;min-height:135px;padding:16px;color:#71677e;border:1px solid #e3ddec;border-radius:16px;background:#fff;cursor:pointer;transition:.18s ease}.attendance-status-choices button:hover{transform:translateY(-2px);border-color:#cdbde9}.attendance-status-choices button.selected{color:#603dbb;border-color:#9f83e3;background:#f3efff;box-shadow:0 0 0 3px rgba(105,67,201,.08)}.attendance-status-choices button>span{width:50px;height:50px;display:grid;place-items:center;color:#6846c5;background:#eee8ff;border-radius:15px}.attendance-status-choices button:nth-child(2)>span{color:#5171aa;background:#e8effa}.attendance-status-choices svg{width:23px}.attendance-status-choices b{margin-top:8px;font-size:13px}.attendance-status-choices small{margin-top:3px;color:#91879b;font-size:8px}.attendance-leave-reason{display:grid;gap:6px;margin-top:13px;color:#73687f;font-size:9px}.attendance-leave-reason span b{color:#bc4654}.attendance-leave-reason textarea{width:100%;padding:10px 12px;resize:vertical;font-size:10px}.attendance-step-actions{display:grid;grid-template-columns:140px 1fr;gap:9px;margin-top:5px}.attendance-step-actions .button{width:100%}.attendance-step-actions .button.secondary svg{transform:rotate(90deg)}.attendance-confirm-state{display:flex;align-items:center;gap:11px;padding:14px;border-radius:14px}.attendance-confirm-state>span{width:45px;height:45px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px}.attendance-confirm-state svg{width:21px}.attendance-confirm-state small,.attendance-confirm-state strong{display:block}.attendance-confirm-state small{font-size:7px}.attendance-confirm-state strong{margin-top:2px;font-size:12px}.attendance-confirm-state.status-present{color:#267b55;background:#e3f4e9}.attendance-confirm-state.status-late{color:#9f6b13;background:#fff1cf}.attendance-confirm-state.status-leave{color:#526fa7;background:#e8eff9}.attendance-confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:12px;overflow:hidden;background:#e9e3ef;border:1px solid #e9e3ef;border-radius:13px}.attendance-confirm-grid>span{padding:11px 13px;background:#fff}.attendance-confirm-grid small,.attendance-confirm-grid strong{display:block}.attendance-confirm-grid small{color:#92889d;font-size:7px}.attendance-confirm-grid strong{margin-top:3px;font-size:10px}.attendance-hour-confirm{margin-top:12px;padding:14px;border:1px solid #ded4ef;border-radius:15px;background:#f8f5ff}.attendance-hour-confirm-heading{display:flex;align-items:center;gap:10px}.attendance-hour-confirm-heading>span{width:38px;height:38px;display:grid;place-items:center;color:#6642c4;background:#e9e1ff;border-radius:11px}.attendance-hour-confirm-heading svg{width:18px}.attendance-hour-confirm-heading h3{margin:0;font-size:12px}.attendance-hour-confirm-heading p{margin:2px 0 0;color:#8e839a;font-size:7px}.attendance-hour-confirm>label{display:grid;gap:5px;margin-top:12px;color:#766b82;font-size:8px}.attendance-hour-confirm>label>div{position:relative}.attendance-hour-confirm input{width:100%;height:42px;padding:0 70px 0 11px;font-size:12px;font-weight:600}.attendance-hour-confirm>label>div>b{position:absolute;right:11px;top:50%;color:#8e8498;font-size:8px;transform:translateY(-50%)}.attendance-hour-balance{display:grid;grid-template-columns:1fr 25px 1fr;align-items:center;gap:7px;margin-top:10px}.attendance-hour-balance>span{padding:10px;background:#fff;border-radius:10px}.attendance-hour-balance small,.attendance-hour-balance strong{display:block}.attendance-hour-balance small{color:#91879c;font-size:7px}.attendance-hour-balance strong{margin-top:2px;color:#3c7b62;font-size:11px}.attendance-hour-balance strong.insufficient{color:#bc4553}.attendance-hour-balance>svg{width:15px;color:#8e7ab9;transform:rotate(-90deg)}.attendance-no-deduction{display:flex;align-items:center;gap:10px;margin-top:12px;padding:13px;color:#57709d;background:#edf2fa;border-radius:13px}.attendance-no-deduction>span{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;background:#fff;border-radius:11px}.attendance-no-deduction svg{width:17px}.attendance-no-deduction strong{display:block;font-size:10px}.attendance-no-deduction p{margin:2px 0 0;font-size:7px}.attendance-confirm-submit:disabled{cursor:not-allowed;opacity:.45}

@media(max-width:600px){.attendance-search-card{padding:13px}.attendance-check-button{min-height:51px}.attendance-check-button small{display:none}.attendance-check-dialog{width:100%;max-height:100vh;border-radius:0}#attendance-check-form{max-height:100vh}.attendance-check-header{padding:13px 12px}.attendance-check-avatar{width:47px;height:47px;border-radius:14px}.attendance-check-header h2{max-width:220px;font-size:15px}.attendance-check-progress{gap:5px;padding:11px 8px}.attendance-check-progress>i{width:18px}.attendance-check-progress span{font-size:7px}.attendance-check-step{padding:15px 12px}.attendance-subject-options,.attendance-status-choices{grid-template-columns:1fr}.attendance-subject-option{grid-template-columns:41px minmax(0,1fr) auto}.attendance-subject-option-icon{width:41px;height:41px}.attendance-status-choices button{min-height:105px}.attendance-step-actions{grid-template-columns:105px 1fr}.attendance-confirm-grid{grid-template-columns:1fr}.attendance-course-chip{max-width:100%}.attendance-course-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attendance-course-chip i{white-space:nowrap}}

/* Site branding manager */
.branding-settings{grid-column:1/-1}.branding-settings-icon{color:#fff;background:linear-gradient(145deg,#39a8e5,#147ebc);box-shadow:0 8px 20px rgba(20,126,188,.2)}.branding-form{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:22px;margin-top:20px;padding:17px;background:linear-gradient(145deg,#f4faff,#fff);border:1px solid #dbeaf4;border-radius:17px}.branding-preview{width:150px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:#d9f1ff;border:1px solid #c5e3f4;border-radius:25px;box-shadow:0 12px 28px rgba(25,116,169,.13)}.branding-preview img{width:100%;height:100%;display:block;object-fit:cover}.branding-controls{min-width:0}.branding-controls>p{margin:0;color:#423754;font-size:13px;font-weight:700}.branding-controls>small{display:block;max-width:640px;margin-top:5px;color:#84798f;font-size:9px;line-height:1.65}.branding-controls>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.branding-controls .button{margin:0}.branding-security-note{display:flex;align-items:center;gap:6px;margin:12px 0 0;color:#8b8097;font-size:8px}.branding-security-note svg{width:13px;color:#6e4bc4}.branding-form.is-busy{opacity:.68;pointer-events:none}.logo-full img{object-fit:cover}
@media(max-width:600px){.branding-form{grid-template-columns:1fr;padding:14px}.branding-preview{width:120px;justify-self:center}.branding-controls{text-align:center}.branding-controls>div{display:grid;grid-template-columns:1fr}.branding-controls .button{width:100%}.branding-security-note{align-items:flex-start;line-height:1.55}}