/* Shared UI tokens and responsive layouts for Nếp. */
.search-trigger{display:grid;place-items:center;flex-shrink:0;border:0;background:transparent;color:var(--muted);padding:0;width:28px;min-height:40px}.subnav{overflow-y:hidden}.subnav-item{margin-bottom:0}.completed .task-copy b{color:var(--muted)}
:root{--ink:#203a34;--muted:#586d65;--line:#dce5df;--paper:#f4f7f3;--white:#fff;--green:#24634b;--green-dark:#194d39;--green-light:#e8f1e9;--surface-soft:#edf3ee;--accent:#965325;--danger:#b12f37;--radius:18px;--shadow:0 4px 20px #1c433008}
body{font-size:16px;line-height:1.5}html{scroll-padding-top:96px}button,a,input,select,textarea{touch-action:manipulation}button{transition:background .15s,color .15s,border-color .15s}button:active{opacity:.8}:focus-visible{outline:3px solid #b27826!important;outline-offset:3px}button,input,select{min-height:44px}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{color:var(--ink)}input::placeholder{color:var(--muted)}.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--green);color:#fff;padding:12px 20px;border-radius:10px}.skip-link:focus{top:12px}.ui-icon{width:21px;height:21px;display:inline-block;vertical-align:middle;flex-shrink:0}
.sidebar{width:256px;padding:32px 20px 18px;background:var(--white);overflow-y:auto}.main-area{margin-left:256px}.brand{font-size:26px;padding:0 12px 40px}.brand-mark{width:42px;height:42px;font-size:29px}.brand small{font-size:12px;color:var(--muted)}.side-label{font-size:11px;color:var(--muted);letter-spacing:1.5px;padding-bottom:12px}.nav-list{gap:8px}.nav-item{font-size:14px;padding:13px 14px;gap:12px;min-height:50px;color:var(--muted);border-radius:12px}.nav-item.active{background:var(--green-light);color:var(--green)}.nav-item:hover{background:var(--surface-soft)}.nav-icon{display:flex;width:22px;color:inherit}.theme-toggle{display:flex;align-items:center;gap:12px;width:100%;margin-top:24px;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:10px 14px;color:var(--muted);font-size:13px}.mini-card{padding:16px;background:var(--surface-soft);border-color:var(--line)}.mini-card p,.mini-card small{font-size:12px;color:var(--muted)}.mini-card p b{font-size:14px;color:var(--ink)}.mini-progress,.mini-spark{display:none}.profile b{font-size:14px}.profile small{font-size:12px;color:var(--muted)}.profile .avatar{width:40px;height:40px}
.topbar{height:80px;padding:0 40px;background:var(--white);backdrop-filter:none}.breadcrumb{font-size:13px;color:var(--muted)}.breadcrumb b{color:var(--ink)}.today-label{font-size:12px;color:var(--muted)}.search-box{width:260px;height:44px;border-color:var(--line);background:var(--paper);border-radius:10px}.search-box input{font-size:13px;min-width:0;color:var(--ink)}.search-box kbd{font-size:10px;background:var(--white);color:var(--muted)}.top-actions{gap:16px}.icon-button{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;color:var(--muted)}.content-wrap{max-width:1440px;padding:38px 40px 24px}.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--green);margin-bottom:10px}.page-title-row{margin-bottom:28px;gap:20px}.page-title-row h1,.welcome-row h1{font-size:30px;line-height:1.3;letter-spacing:-1px;margin-bottom:8px}.page-subtitle{font-size:14px;line-height:1.7;color:var(--muted)}.primary-button,.secondary-button{font-size:14px;border-radius:10px;padding:11px 17px;line-height:1.5;box-shadow:none}.primary-button{background:var(--green);color:#fff}.secondary-button{border:1px solid var(--line);background:var(--white);color:var(--ink)}.button-pair{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.subnav{gap:12px;margin:26px 0 24px;overflow-x:auto;padding:4px 0 0}.subnav-item{font-size:14px;color:var(--muted);padding:13px 16px;white-space:nowrap}.subnav-item.active{color:var(--green);border-color:var(--green)}
.teaching-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}.metric-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);background:var(--white);border-radius:16px}.metric-symbol{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--green-light);color:var(--green)}.metric-card:nth-child(2) .metric-symbol{background:#fff2e1;color:#965325}.metric-card:nth-child(3) .metric-symbol{background:#edf0fb;color:#4c60a2}.metric-card small{display:block;font-size:13px;color:var(--muted)}.metric-card strong{display:block;font:750 27px Montserrat,sans-serif;color:var(--ink);margin-top:3px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.section-heading h2{font:700 18px Montserrat;margin:0 0 4px}.section-heading p{font-size:13px;color:var(--muted);margin:0}.class-grid{gap:20px}.class-card{padding:24px;border-radius:18px;position:relative;background:var(--white);transition:border-color .15s,box-shadow .15s}.class-open{cursor:pointer}.class-open:hover{border-color:var(--green);box-shadow:0 8px 24px #18483212}.class-color{width:48px;height:48px;font-size:15px;border-radius:14px;background:var(--green-light);color:var(--green)}.class-card:nth-child(3n+2) .class-color{background:#fff0df;color:#95521d}.class-card:nth-child(3n+3) .class-color{background:#eceffb;color:#4b5f9b}.class-student-count{font-size:12px;color:var(--muted);background:var(--surface-soft);padding:5px 10px;border-radius:20px}.class-card h3{font-size:18px;margin:22px 0 5px;overflow-wrap:anywhere}.class-card>p{font-size:14px;color:var(--muted)}.class-days{font-size:13px;color:var(--muted);margin:16px 0}.class-card-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--muted)}.class-card-foot b{color:var(--ink);font-weight:600}.card-hint{display:flex;align-items:center;justify-content:space-between;color:var(--green);font-size:13px;font-weight:600;margin-top:20px}.add-student-standalone{margin-top:20px}.empty-state{padding:36px 20px;text-align:center;color:var(--muted);font-size:14px;border-radius:14px;background:var(--surface-soft);grid-column:1/-1}.empty-state button{margin-top:12px}
.panel{background:var(--white);padding:24px;border-radius:18px}.panel-heading{gap:16px;align-items:center}.panel-heading h2{font-size:18px}.panel-heading p{font-size:13px;color:var(--muted)}.text-button,.full-link{font-size:13px;color:var(--green)}.text-button{padding:9px 4px}.round-add,.close-button,.date-switch button{width:44px;height:44px;background:var(--surface-soft);border-color:var(--line);color:var(--ink)}.stat-top,.stat-foot{font-size:12px;color:var(--muted)}.stat-number{font-size:26px}.stat-card{background:var(--white)}.finance-summary{gap:16px;margin-bottom:24px}.finance-sum-card{padding:24px;background:var(--white)}.finance-sum-card small{font-size:13px;color:var(--muted)}.finance-sum-card b{font-size:26px;color:var(--ink)}.finance-sum-card:first-child b{color:var(--green)}.finance-chart-panel{margin-bottom:24px}.chart-layout{gap:24px;padding:28px 0;flex-wrap:wrap}.donut-chart{width:160px;height:160px;flex-shrink:0}.donut-chart:before{background:var(--white);inset:22px}.donut-center b{font-size:20px}.donut-center small,.legend>div,.legend b{font-size:13px;color:var(--muted)}.legend{gap:14px;min-width:180px}.legend>div{grid-template-columns:10px 1fr auto}.transaction-tools{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.transaction-tools input{flex:1;min-width:160px;border:1px solid var(--line);background:var(--white);border-radius:9px;padding:10px 12px;font-size:14px}.select-button,.status-select{font-size:13px;border:1px solid var(--line);background:var(--white);color:var(--ink);padding:10px 12px}.table-scroll{margin-top:20px}th{font-size:11px;color:var(--muted);letter-spacing:.6px;background:var(--surface-soft)}td{font-size:14px;color:var(--ink);padding:16px 10px}.row-edit{border:0;background:var(--surface-soft);color:var(--green);font-size:13px;padding:8px 12px;border-radius:8px;min-width:44px}.row-edit:hover{background:var(--green-light)}.danger{color:var(--danger)}.transaction-amount{font-size:14px}
.attendance-toolbar,.calendar-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin:20px 0}.date-switch{font-size:14px;gap:10px}.attendance-list,.fee-list{background:var(--white);border-color:var(--line);padding:0 20px}.attendance-row{padding:16px 0;flex-wrap:wrap}.attendance-row b{font-size:15px}.attendance-row small,.attendance-schedule,.fee-tip{font-size:13px;color:var(--muted)}.avatar{font-size:13px}.fee-filters{display:flex;gap:8px;margin-bottom:16px}.fee-filter,.todo-filter{background:var(--white);color:var(--muted);border:1px solid var(--line);padding:9px 15px;border-radius:9px;font-size:13px}.fee-filter.active,.todo-filter.active{background:var(--green-light);color:var(--green);border-color:var(--green)}.fee-row,.fee-header{grid-template-columns:minmax(150px,1.5fr) .6fr .9fr 1fr .9fr;font-size:13px;gap:12px;padding:16px 0}.fee-header{font-size:10px;color:var(--muted);letter-spacing:.5px}.fee-name small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.fee-status{font-size:12px;border:0;white-space:normal;color:#8c4c18;background:#fff0dc}.fee-status.paid{background:var(--green-light);color:var(--green)}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);background:var(--white);border-radius:12px;overflow:auto}.calendar-head{text-align:center;padding:14px 4px;color:var(--muted);font-size:12px;background:var(--surface-soft)}.calendar-cell{min-height:110px;padding:10px;border-top:1px solid var(--line);border-right:1px solid var(--line);font-size:13px}.calendar-event{background:var(--green-light);color:var(--green);padding:5px;border-radius:5px;font-size:11px;margin-top:6px;overflow-wrap:anywhere}.week-grid{display:grid;grid-template-columns:60px repeat(7,minmax(100px,1fr));grid-template-rows:64px repeat(28,24px);background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:auto;position:relative}.week-day-head{text-align:center;font-size:12px;padding:8px;background:var(--surface-soft)}.week-day-head b{display:block;font-size:18px}.week-time{font-size:11px;color:var(--muted);text-align:center}.week-slot{border-top:1px solid var(--line);border-left:1px solid var(--line)}.week-event{z-index:1;margin:2px 4px;padding:8px;border-radius:8px;background:var(--green-light);border-left:3px solid var(--green);color:var(--green);font-size:11px;overflow:auto}.week-event b,.week-event span{display:block}.makeup-event{background:#fff0dc;color:#8c4c18;border-color:#8c4c18}
.notes-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 14px}.notes-section-title h2{font:700 18px Montserrat;margin:0}.notes-grid{gap:20px}.note-card{padding:24px;min-height:220px}.note-card h3{font-size:17px}.note-card p{font-size:14px;color:#4d6050;overflow-wrap:anywhere}.note-card small{font-size:12px;color:#53644f}.note-footer{gap:12px;flex-wrap:wrap}.note-footer>span{display:flex;gap:6px}.todo-toolbar{gap:12px;flex-wrap:wrap}.todo-tabs{flex-wrap:wrap}.todo-row{gap:12px;padding:18px 0;flex-wrap:wrap}.task-copy b,.todo-row .task-copy b{font-size:14px}.task-copy small,.todo-row .task-copy small{font-size:12px;color:var(--muted)}.task-copy{min-width:130px}.task-check,.todo-row .task-check{width:24px;height:24px;min-height:24px;border-color:#728a7b}.task-check:checked:after{font-size:16px;line-height:22px}.priority{font-size:11px;padding:5px 9px;white-space:normal}.priority.high{color:#9e3b32}.priority.medium{color:#825c18}.priority.low{color:#3e6537}.muted{font-size:13px;color:var(--muted)}
dialog{width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 40px);background:var(--white);color:var(--ink);border-color:var(--line);border-radius:20px}dialog form{padding:28px}.dialog-head h2{font-size:24px}.dialog-head{gap:16px}.dialog-actions{border-top:1px solid var(--line);padding-top:20px}.field{margin-bottom:18px}.field label{font-size:14px;color:var(--ink)}.field input,.field select,.field textarea{font-size:16px;border-color:#a7b9ae;background:var(--white);color:var(--ink);border-radius:9px;padding:11px 12px;min-width:0;width:100%}.field input[type=checkbox]{width:24px;min-height:24px;height:24px}.field select[multiple]{min-height:180px}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:2px}.weekday-options{display:flex;flex-wrap:wrap;gap:8px}.weekday-option{display:flex;align-items:center;gap:7px;background:var(--surface-soft);border-radius:8px;padding:9px 12px;min-height:44px}.weekday-option input{accent-color:var(--green);width:18px!important;min-height:18px!important;height:18px!important}.class-detail-head{color:var(--muted);font-size:14px}.class-detail-head .button-pair{margin-top:16px}.class-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px;flex-wrap:wrap;font-size:14px}.student-detail{display:flex;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.student-detail>span:nth-child(2){flex:1;min-width:150px}.student-detail b{font-size:14px;display:block}.student-detail small{font-size:12px;color:var(--muted);display:block;margin-top:4px}.auth-copy{margin-bottom:24px}.footer{font-size:12px;color:var(--muted);gap:16px;flex-wrap:wrap;margin-top:40px}.toast{font-size:14px;max-width:calc(100vw - 32px);text-align:center}.menu-scrim{display:none}
body.dark{color-scheme:dark;--ink:#e5f0e9;--muted:#b2c4b8;--line:#3b5145;--paper:#14231c;--white:#1c3025;--green:#9ed6b7;--green-dark:#b9e5cd;--green-light:#294937;--surface-soft:#243d2e;--danger:#ffabb0;--shadow:none}.dark .primary-button{background:#9ed6b7;color:#143022}.dark .primary-button:hover{background:#b9e5cd}.dark .mini-card,.dark .profile,.dark .note-card{border-color:var(--line)}.dark .brand small,.dark .class-color,.dark .nav-item.active .nav-icon,.dark .profile-more,.dark .date-switch,.dark .transaction-amount.expense{color:var(--ink)}.dark .note-card{background:var(--surface-soft)}.dark .note-card p,.dark .note-card small{color:var(--muted)}.dark .fee-status.paid{color:var(--green)}.dark .class-student-count,.dark .task-copy small,.dark .class-card>p{color:var(--muted)}.dark .search-box kbd{background:var(--white)}.dark .metric-card:nth-child(n) .metric-symbol,.dark .class-card:nth-child(n) .class-color{background:var(--green-light);color:var(--green)}.dark .priority.high{background:#59322e;color:#ffd0c7}.dark .priority.medium,.dark .fee-status.unpaid{background:#4d3c20;color:#f7d39d}.dark .priority.low{background:#304a2d;color:#c4e0bb}
@media(min-width:1600px){.content-wrap{padding-top:48px}.class-card{padding:28px}}
@media(max-width:1200px){.sidebar{width:224px;padding-inline:16px}.main-area{margin-left:224px}.topbar{padding-inline:28px}.content-wrap{padding:32px 28px}.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{padding:16px;gap:12px}.search-box{width:220px}.today-label{display:none}}
@media(max-width:900px){.teaching-metrics{gap:10px}.metric-card{padding:16px 12px;gap:8px}.metric-symbol{width:34px;height:38px}.metric-card small{font-size:12px}.metric-card strong{font-size:23px}.breadcrumb{font-size:12px}.finance-summary{grid-template-columns:1fr}.finance-sum-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.finance-sum-card b{margin:0;font-size:24px}.fee-list{overflow-x:auto}.fee-header,.fee-row{min-width:650px}.fee-header span:nth-child(3),.fee-row span:nth-child(3){display:block}.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{width:270px;z-index:30;visibility:hidden}.sidebar.open{visibility:visible}.main-area{margin-left:0}.menu-scrim.show{display:block;position:fixed;inset:0;background:#10251bb3;z-index:29;border:0;border-radius:0}.topbar{height:72px;padding:0 16px;gap:8px}.mobile-menu{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;color:var(--ink)}.breadcrumb{font-size:13px}.breadcrumb>span,.breadcrumb-prefix{display:none}.top-actions{gap:6px}.search-box{width:44px;height:44px;padding:0;border:0;background:transparent}.search-box input,.search-box kbd{display:none}.search-box:focus-within{position:absolute;inset:10px 16px;width:auto;background:var(--white);border:1px solid var(--line);padding:0 12px;z-index:2}.search-box:focus-within input{display:block}.search-box:focus-within kbd{display:none}.search-trigger{border:0;background:none;color:var(--muted);width:44px;padding:0}.content-wrap{padding:26px 16px}.page-title-row{flex-direction:column;gap:16px;margin-bottom:24px}.page-title-row h1{font-size:28px}.page-subtitle{font-size:14px}.page-title-row .primary-button{font-size:14px;padding:11px 17px}.eyebrow{font-size:10px}.teaching-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric-card{display:block;padding:14px 10px}.metric-symbol{width:32px;height:32px;border-radius:9px;margin-bottom:10px}.metric-symbol .ui-icon{width:18px}.metric-card small{font-size:11px}.metric-card strong{font-size:24px}.subnav{gap:0;margin:20px 0}.subnav-item{font-size:13px;padding:12px 10px;flex-shrink:0}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}.section-heading h2{font-size:18px}.class-grid{grid-template-columns:1fr;gap:16px}.class-card{padding:22px}.class-card h3{font-size:19px}.class-card-foot{font-size:13px}.card-hint{font-size:14px}.notes-grid{grid-template-columns:1fr}.note-card h3{font-size:18px}.note-card p{font-size:15px}.panel{padding:20px 16px}.panel-heading{flex-wrap:wrap}.attendance-toolbar{align-items:stretch}.attendance-toolbar>.button-pair{width:100%}.attendance-toolbar select{max-width:100%;flex:1}.date-switch{font-size:13px;max-width:100%}.date-switch span{flex:1;text-align:center}.date-switch button{flex-shrink:0}.fee-filters{flex-wrap:wrap}.fee-header,.fee-row{grid-template-columns:minmax(150px,1.5fr) .6fr .9fr 1fr .9fr}.calendar-grid{grid-template-columns:repeat(7,minmax(95px,1fr))}.calendar-toolbar .date-switch{width:100%}.week-grid{max-width:100%}.todo-row .priority{display:inline-block}.todo-row .task-copy b{font-size:15px}.task-copy small,.todo-row .task-copy small{font-size:13px}.todo-row .task-copy{flex-basis:calc(100% - 44px)}.todo-row>.row-edit:first-of-type{margin-left:auto}.footer{font-size:11px;margin-top:32px}.transaction-tools{flex-direction:column}.transaction-tools input{width:100%;font-size:16px}.finance-sum-card{padding:18px}.finance-sum-card small{font-size:13px}.finance-sum-card b{font-size:22px}.legend{width:100%}.chart-layout{padding:20px 0}.legend>div,.legend b{font-size:12px}dialog form{padding:22px 18px}.dialog-head h2{font-size:22px}.class-detail-actions .secondary-button{width:100%}.student-detail>span:nth-child(2){min-width:120px}.student-detail>.row-edit:first-of-type{margin-left:auto}.today-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:760px){.subnav-item{padding-inline:8px;font-size:12px}.metric-card small{font-size:12px}.breadcrumb{min-width:0;overflow-wrap:anywhere}.legend b{white-space:normal}}

.date-label{display:grid;gap:6px;font-size:13px;color:var(--muted)}.date-label input{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);font-size:16px}.attendance-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}.attendance-choices{display:flex;gap:8px;flex-wrap:wrap}.attendance-choice{border:1px solid var(--line);border-radius:9px;background:var(--white);padding:9px 14px;font-size:14px}.attendance-choice.selected{background:var(--green);color:var(--white);border-color:var(--green)}.dark .attendance-choice.selected{color:#143022}.attendance-row small{display:block}.fee-summary{display:grid;gap:5px;background:var(--green-light);padding:20px;border-radius:14px}.fee-summary b{font-size:27px}.fee-summary span{font-size:14px}.tuition-table caption{text-align:left;font-weight:700;padding:16px 8px}.tuition-table th{font-size:13px;text-transform:none;letter-spacing:0}.teaching-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)}.teaching-day{padding:10px;min-height:150px;border-right:1px solid var(--line);border-top:1px solid var(--line);min-width:0}.teaching-day h3{font-size:14px;margin:0 0 12px}.teaching-day h3>span{display:none}.teaching-day.is-today{box-shadow:inset 0 3px var(--green)}.teaching-day.outside-month{background:var(--surface-soft)}.teaching-event{display:grid;width:100%;text-align:left;gap:4px;border:0;border-left:3px solid var(--green);border-radius:7px;background:var(--green-light);color:var(--ink);padding:10px 7px;margin-bottom:8px;font-size:12px;overflow-wrap:anywhere}.teaching-event small{color:var(--muted)}.teaching-day>p{font-size:12px}.teaching-event:hover{outline:1px solid var(--green)}
@media(max-width:1100px){.teaching-calendar{grid-template-columns:repeat(2,minmax(0,1fr))}.teaching-calendar>.calendar-head{display:none}.teaching-day h3>span{display:inline;margin-right:8px}.teaching-event{font-size:14px}}
@media(max-width:600px){.teaching-calendar{grid-template-columns:1fr}.attendance-choices{width:100%;margin-top:8px}.attendance-choice{flex:1;padding:10px 8px}.attendance-row small{display:block}.teaching-day{min-height:90px}.date-label{max-width:100%}.date-label select{max-width:100%}.attendance-toolbar .button-pair{align-items:flex-end}.attendance-toolbar .button-pair .date-label{flex:1}}

.class-buttons{display:flex;flex-wrap:wrap;gap:12px}.class-name-button{padding:14px 24px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--green);font-weight:700;font-size:16px}.class-name-button:hover{border-color:var(--green);background:var(--green-light)}.enrollment-student{padding:20px 0;border-top:1px solid var(--line)}.enrollment-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.enrollment-status{font-size:12px;color:var(--green)}.enrollment-student>small{display:block;color:var(--muted);margin:8px 0}.enrollment-student .button-pair{margin:12px 0}.enrollment-student details{font-size:13px;line-height:1.8}.enrollment-student summary{cursor:pointer;min-height:44px;display:list-item;padding-top:10px}

.day-schedules{display:grid;gap:12px}.day-schedule{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.day-schedule>label{min-width:0;font-size:13px}.day-schedule input[type=time]{margin-top:5px;padding:9px 6px;font-size:15px}.day-schedule input:disabled{opacity:.45}.day-schedule .weekday-option{padding:8px;gap:6px}@media(max-width:440px){.day-schedule{grid-template-columns:1fr 1fr}.day-schedule .weekday-option{grid-column:1/-1}}

.session-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;padding:14px 0;border-bottom:1px solid var(--line)}.session-row label{min-width:0;display:grid;gap:6px}.session-row input,.session-row select{font-size:14px!important;padding:9px 6px!important}.session-row .row-edit{margin-bottom:1px}#addSession{margin-top:12px}#sessionRows:empty{display:none}@media(max-width:520px){.session-row{grid-template-columns:1fr 1fr}.session-row>label:first-child{grid-column:1/-1}.session-row>button{grid-column:1/-1;justify-self:end}}

.compact-class-summary{display:flex;align-items:center;justify-content:space-between;gap:16px}.compact-class-summary strong{font:700 24px Montserrat,sans-serif}.compact-class-summary small{font:400 13px 'Inter',sans-serif;color:var(--muted)}.compact-schedule{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 28px}.compact-schedule>span{background:var(--surface-soft);padding:7px 10px;border-radius:8px;font-size:12px;color:var(--muted)}.compact-student-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.compact-student-title h3{font:700 16px Montserrat;margin:0}.compact-student-title h3 span{font:500 12px 'Inter';margin-left:6px;color:var(--muted)}.compact-student{border-bottom:1px solid var(--line)}.compact-student>summary{display:flex;align-items:center;gap:12px;min-height:64px;cursor:pointer;list-style:none}.compact-student>summary::-webkit-details-marker{display:none}.compact-student-name{flex:1;min-width:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}.compact-state{font-size:11px;border-radius:20px;background:var(--green-light);color:var(--green);padding:4px 8px;white-space:nowrap}.compact-state.resting{background:var(--surface-soft);color:var(--muted)}.compact-manage{font-size:12px;color:var(--muted)}.compact-manage:after{content:'⌄';margin-left:6px}.compact-student[open] .compact-manage:after{content:'⌃'}.compact-student-body{padding:0 0 20px}.compact-student-body>p{font-size:13px;color:var(--muted);margin:0 0 12px}.compact-student-body .secondary-button{font-size:13px;padding:8px 14px}.compact-history{margin-top:16px;font-size:12px;color:var(--muted)}.compact-history>div{display:flex;gap:18px;padding:5px 0}.compact-history time{min-width:80px}.compact-class-options{margin-top:20px;font-size:12px;color:var(--muted)}.compact-class-options>summary{cursor:pointer;min-height:44px;padding:10px 0}.compact-student-body .danger{font-size:12px}.compact-student-list+.compact-class-options{border:0}@media(max-width:440px){.compact-student>summary{gap:8px}.compact-manage{font-size:11px}.compact-state{font-size:10px}.compact-class-summary strong{font-size:22px}}

.enrollment-switch{display:flex;align-items:center;gap:10px;background:none;border:0;padding:8px;font-size:13px}.switch-track{display:block;width:40px;height:24px;padding:3px;border-radius:20px;background:var(--muted);transition:background .15s}.switch-track i{display:block;height:18px;width:18px;background:var(--white);border-radius:50%;transition:transform .15s}.enrollment-switch[aria-checked=true] .switch-track{background:var(--green)}.enrollment-switch[aria-checked=true] .switch-track i{transform:translateX(16px)}.compact-history>div{align-items:center;flex-wrap:wrap;gap:8px 16px}.compact-history>div .text-button{margin-left:auto;font-size:12px}

.dialog-breadcrumb{margin:-8px 0 12px}.dialog-breadcrumb[hidden]{display:none}.dialog-breadcrumb .text-button{font-size:13px}.compact-class-summary>.button-pair{justify-content:flex-end}@media(max-width:440px){.compact-class-summary{flex-wrap:wrap}.compact-class-summary>.button-pair{width:100%;justify-content:flex-start}}

/* Class hub: edit at entity header, add at list header, destructive action at footer. */
.compact-class-summary{padding:4px 0 0}.hub-edit-class{flex-shrink:0}.compact-schedule{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.compact-student-title{margin-bottom:12px;align-items:center}.hub-add-student{font-size:13px;padding:10px 14px;white-space:nowrap}.compact-manage{display:grid;place-items:center;width:32px;min-height:44px;flex-shrink:0}.compact-manage:after{margin:0;font-size:18px}.compact-student>summary{gap:12px}.compact-student-body{padding:0 12px 18px;background:var(--surface-soft);border-radius:10px;margin:0 0 12px}.hub-student-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px}.hub-student-actions .secondary-button{background:var(--white)}.hub-student-actions .enrollment-switch{margin-left:auto;min-height:44px}.compact-history{border-top:1px solid var(--line);padding-top:10px}.compact-history>div{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:8px;align-items:center}.hub-edit-date{padding:9px 8px;min-width:64px}.compact-history>div .text-button{margin:0}.compact-state{font-size:12px}.compact-student-name{font-size:15px}#entryDialog .dialog-actions{position:sticky;bottom:0;background:var(--white);margin:20px -2px -2px;padding:16px 2px 2px;z-index:2;align-items:center}#hubDeleteClass{margin-right:auto;font-size:13px;padding:10px 8px}#hubDeleteClass[hidden]{display:none}#entryDialog:has(#hubDeleteClass:not([hidden])) .dialog-actions .secondary-button{min-width:90px}.dialog-breadcrumb{border-bottom:1px solid var(--line);padding-bottom:8px}.dialog-breadcrumb .text-button{min-height:44px}.compact-student-list{margin-bottom:8px}@media(max-width:440px){.compact-class-summary{flex-wrap:nowrap}.hub-edit-class{padding:9px 12px}.compact-student-title{gap:8px}.hub-add-student{font-size:12px;padding:9px 10px}.compact-student-name{font-size:14px}.compact-history>div{grid-template-columns:80px minmax(0,1fr) auto;gap:4px;font-size:11px}.hub-edit-date{font-size:11px;min-width:58px}.compact-state{font-size:11px}.hub-student-actions{gap:8px}}


/* 2026-11 design pass: connected workflow, restrained motion and a framed work surface. */
:root{--chrome:#edf2ed;--surface-raised:#f8faf8;--ease-out:cubic-bezier(.16,1,.3,1);--ease-exit:cubic-bezier(.7,0,.84,0);--motion-fast:140ms;--motion-ui:240ms}
body{background:var(--chrome)}
::selection{background:#c9dfd0;color:var(--ink)}
.sidebar,.topbar{background:var(--chrome)}
.topbar{height:64px;border:0}
.content-wrap{max-width:none;margin:0 8px 8px 0;padding:30px 32px 40px;background:var(--white);border:1px solid #e4eae5;border-radius:16px;min-height:calc(100dvh - 72px)}
.page-title-row{align-items:flex-end}.page-title-row h1{letter-spacing:-.03em}
.eyebrow{display:none}
.teaching-metrics{gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white)}
.metric-card{border:0;border-radius:0;padding:17px 20px}.metric-card+.metric-card{border-left:1px solid var(--line)}
.metric-symbol{width:36px;height:36px;border-radius:10px;background:transparent!important;color:var(--green)!important}
.metric-card strong{font-size:24px;font-variant-numeric:tabular-nums}
.subnav{position:relative;gap:0;margin:24px 0 0;border-bottom:1px solid var(--line);padding:0}
.subnav-item{display:flex;align-items:center;gap:8px;border:0;border-bottom:2px solid transparent;padding:12px 18px;color:var(--muted);transition:color var(--motion-ui),border-color var(--motion-ui),background var(--motion-ui)}
.subnav-item>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;font-size:11px;font-variant-numeric:tabular-nums}
.subnav-item.active{border-bottom-color:var(--green);color:var(--green);background:transparent}.subnav-item.active>span{border-color:var(--green);background:var(--green);color:#fff}
.workflow-context{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0 22px;color:var(--muted);font-size:13px}
.workflow-context p{margin:0}.workflow-next{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--green);font-weight:700;padding:6px 0}.workflow-next .ui-icon{width:18px;transition:transform var(--motion-ui) var(--ease-out)}.workflow-next:hover .ui-icon{transform:translateX(4px)}
#teachingContent{transform-origin:50% 0}.view-entering{animation:view-in 340ms var(--ease-out) both}
@keyframes view-in{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-entering{animation:page-in 340ms var(--ease-out) both}@keyframes page-in{from{opacity:.45;transform:translateY(6px)}to{opacity:1;transform:none}}
.class-name-button{position:relative;overflow:hidden;min-height:52px;transition:background var(--motion-ui),border-color var(--motion-ui),color var(--motion-ui),transform var(--motion-fast) var(--ease-out)}
.class-name-button::after{content:'→';margin-left:20px;opacity:0;transform:translateX(-5px);display:inline-block;transition:opacity var(--motion-ui),transform var(--motion-ui) var(--ease-out)}
.class-name-button:hover::after,.class-name-button:focus-visible::after{opacity:1;transform:none}.class-name-button:active{transform:scale(.985)}
.attendance-choice{transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}.attendance-choice:active{transform:scale(.96)}
.attendance-choice.selected{box-shadow:inset 0 0 0 1px #fff5}
.compact-student>summary{transition:color var(--motion-ui),background var(--motion-ui);border-radius:10px;padding-inline:8px}.compact-student>summary:hover{background:var(--surface-raised)}
.compact-student-body{animation:details-in 260ms var(--ease-out) both}@keyframes details-in{from{opacity:.4;transform:translateY(-5px)}to{opacity:1;transform:none}}
dialog{box-shadow:0 24px 70px #10291d2b;animation:dialog-in 320ms var(--ease-out) both}dialog::backdrop{background:#10251b73;animation:backdrop-in 220ms ease both}@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:10px;box-shadow:0 12px 32px #10291d2b;transition:opacity var(--motion-ui),transform var(--motion-ui) var(--ease-out)}
.primary-button,.secondary-button,.row-edit,.text-button,.workflow-next{transition:background var(--motion-ui),color var(--motion-ui),border-color var(--motion-ui),transform var(--motion-fast)}
.primary-button:active,.secondary-button:active,.row-edit:active,.text-button:active,.workflow-next:active{transform:scale(.98);opacity:1}
.tuition-table td:nth-last-child(-n+3),.tuition-table th:nth-last-child(-n+3){font-variant-numeric:tabular-nums}
@media(max-width:760px){.topbar{height:56px}.content-wrap{margin:0;padding:22px 16px 32px;border:0;border-radius:0;min-height:calc(100dvh - 56px)}.page-title-row{align-items:stretch}.teaching-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric-card{padding:12px 8px}.metric-card+.metric-card{border-left:1px solid var(--line)}.metric-symbol{margin-bottom:6px}.subnav{margin-top:18px;scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}.subnav-item{padding:11px 10px}.subnav-item>span{display:none}.workflow-context{padding:11px 0 18px;align-items:flex-start}.workflow-context p{max-width:55%}.workflow-next{text-align:right;justify-content:flex-end}.class-buttons{display:grid;grid-template-columns:1fr}.class-name-button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left}.class-name-button::after{opacity:.65;transform:none}dialog{animation-duration:240ms}}
@media(prefers-reduced-motion:reduce){.view-entering,.page-entering,.compact-student-body,dialog,dialog::backdrop{animation:none!important}.workflow-next .ui-icon,.class-name-button::after{transform:none!important}}

.brand small{color:#52675f!important}.side-label{font-size:12px;text-transform:none;letter-spacing:.04em}.search-box kbd{font-size:11px}.schedule-time small,.session-pill,.schedule-info p{font-size:11px!important}#themeIcon{min-width:34px;font-size:12px;font-weight:700;color:var(--green)}


/* Impeccable finish: readable legacy surfaces and consistent secondary text. */
.breadcrumb span,.today-label,.stat-foot,.panel-heading p,.schedule-time small,.schedule-info p,.task-copy small,.transaction-copy small,.donut-center small,.legend>div,.mini-card p,.mini-card small,.profile small,.footer,.muted{color:var(--muted)!important}
.trend,.stat-foot a,.green-pill,.mint,.fee-status.paid,.transaction-amount.income{color:var(--green-dark)!important}
.orange-text,.peach{color:#7b451f!important}.soft-tag,.gray-pill{color:#4f625a!important}
.panel-heading p,.stat-top,.stat-foot,.schedule-info p,.task-copy small,.transaction-copy small,.donut-center small,.legend>div,.legend b,.full-link,.footer,.class-avatar,.priority,.fee-header,.fee-row,.finance-sum-card small,.note-card small,.todo-date{font-size:12px!important}
.task-copy b,.transaction-copy b,.schedule-info b{font-size:13px!important}
.search-box{padding-block:5px}.search-box input{min-height:32px}
@media(max-width:760px){.page-subtitle{font-size:14px!important}.primary-button{font-size:14px!important}.footer{font-size:11px!important}.finance-sum-card small,.note-card p{font-size:12px!important}}


/* Class and student actions: clear hierarchy, framed controls, safe destructive placement. */
.action-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;line-height:1.2;box-shadow:none;transition:background var(--motion-ui),border-color var(--motion-ui),color var(--motion-ui),transform var(--motion-fast)}
.action-button{border:1px solid #b9c9bf!important;background:var(--white)!important;color:var(--green-dark)!important}
.action-button:hover{border-color:var(--green)!important;background:var(--green-light)!important}
.danger-button{border:1px solid #d8aeb1;background:#fff;color:var(--danger)}
.danger-button:hover{border-color:var(--danger);background:#fff0f1;color:#8d2028}
.action-button:active,.danger-button:active{transform:scale(.98)}
.hub-student-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding-top:14px}
.hub-student-edit-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.framed-switch{border:1px solid var(--line);border-radius:10px;background:var(--white);padding:8px 10px!important;min-width:132px;justify-content:center}
.framed-switch:hover{border-color:#a9bbb0;background:var(--white)}
#hubDeleteClass{margin-right:auto;min-width:96px}
.hub-edit-class{border-color:#aebfb5!important;font-weight:700}.hub-edit-class:hover{border-color:var(--green)!important;background:var(--green-light)!important}
.hub-add-student{border:1px solid var(--green-dark);box-shadow:0 3px 10px #173c2d16}
@media(max-width:520px){.hub-student-actions{grid-template-columns:1fr}.hub-student-edit-actions{display:grid;grid-template-columns:1fr 1fr}.hub-student-edit-actions .action-button{width:100%}.framed-switch{width:100%;margin:0!important}#hubDeleteClass{min-width:0;padding-inline:10px}.dialog-actions{gap:7px}}


/* Attendance control bar: one line, session-aware navigation and balanced fields. */
.attendance-control-bar{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(220px,.8fr);align-items:end;gap:14px;margin:18px 0 22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-raised)}
.attendance-date-control,.attendance-class-control{display:grid;gap:7px;min-width:0;margin:0}
.control-label{font-size:12px;font-weight:700;color:var(--muted);line-height:1.2}
.session-date-nav{display:grid;grid-template-columns:44px minmax(130px,1fr) 44px;align-items:center;gap:7px}
.session-date-nav input,.attendance-class-control select{width:100%;height:46px;min-width:0;border:1px solid #b8c8be;border-radius:10px;background:var(--white);color:var(--ink);font-size:15px;padding:9px 12px}
.session-date-nav input{font-variant-numeric:tabular-nums}
.session-nav-button{display:grid;place-items:center;width:44px;height:46px;border:1px solid #b8c8be;border-radius:10px;background:var(--white);color:var(--green-dark);font-size:24px;font-weight:600;line-height:1;transition:background var(--motion-ui),border-color var(--motion-ui),transform var(--motion-fast)}
.session-nav-button:hover{border-color:var(--green);background:var(--green-light)}
.session-nav-button:active{transform:scale(.96)}
.attendance-class-control select{font-size:14px;font-weight:600;padding-right:34px}
.calendar-toolbar .button-pair{margin-left:auto}
@media(max-width:700px){.attendance-control-bar{grid-template-columns:minmax(0,1.25fr) minmax(118px,.75fr);gap:8px;padding:12px}.session-date-nav{grid-template-columns:40px minmax(96px,1fr) 40px;gap:5px}.session-nav-button{width:40px}.session-date-nav input{padding:8px 6px;font-size:13px}.attendance-class-control select{padding:8px 26px 8px 8px;font-size:13px}.control-label{font-size:11px}}
@media(max-width:420px){.attendance-control-bar{grid-template-columns:minmax(0,1.35fr) minmax(108px,.65fr);padding:10px;gap:7px}.session-date-nav{grid-template-columns:36px minmax(88px,1fr) 36px}.session-nav-button{width:36px;height:44px;font-size:21px}.session-date-nav input,.attendance-class-control select{height:44px}.attendance-class-control select{font-size:12px}.control-label{font-size:11px}}


/* 2026-11 typography system: Inter UI + Montserrat display. */
:root{--font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--font-heading:'Montserrat','Inter',system-ui,sans-serif;--text-xs:12px;--text-sm:13px;--text-base:15px;--text-button:14px;--text-h3:18px;--text-h2:20px;--text-h1:30px}
html{font-family:var(--font-body);font-size:16px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body,button,input,select,textarea{font-family:var(--font-body)!important}
body{font-size:var(--text-base);line-height:1.55;letter-spacing:-.005em}
h1,h2,h3,.brand,.page-title-row h1,.welcome-row h1,.dialog-head h2,.compact-class-summary strong,.metric-card strong,.stat-number,.finance-sum-card b{font-family:var(--font-heading)!important;letter-spacing:-.025em}
h1,.page-title-row h1,.welcome-row h1{font-size:clamp(26px,2.2vw,var(--text-h1))!important;line-height:1.2;font-weight:700!important}
h2,.panel-heading h2,.section-heading h2,.notes-section-title h2{font-size:var(--text-h2)!important;line-height:1.3;font-weight:600!important}
h3,.compact-student-title h3,.note-card h3{font-size:var(--text-h3)!important;line-height:1.35;font-weight:600!important}
p,.page-subtitle,.muted,.field,.attendance-row,.fee-row,td{line-height:1.55}
.page-subtitle,.section-heading p,.panel-heading p,.compact-student-body>p,.fee-tip,.attendance-schedule{font-size:var(--text-base)!important}
button,.primary-button,.secondary-button,.text-button,.row-edit,.action-button,.danger-button,.subnav-item,.workflow-next,.attendance-choice,.fee-filter,.todo-filter{font-size:var(--text-button)!important;font-weight:600;letter-spacing:-.005em}
.primary-button,.hub-add-student{font-weight:700!important}
label,.control-label,.date-label,.field label,th{font-size:var(--text-sm)!important;font-weight:600}
small,.footer,.today-label,.compact-state,.compact-history,.metric-card small,.stat-top,.stat-foot,.task-copy small,.transaction-copy small{font-size:var(--text-xs)!important;line-height:1.45}
input,select,textarea,.field input,.field select,.field textarea{font-size:15px!important;line-height:1.4}
.brand{font-size:24px!important;font-weight:700!important}.brand small{font-family:var(--font-body)!important;font-size:12px!important;font-weight:500;letter-spacing:0}
.metric-card strong{font-size:26px!important;font-weight:700}.compact-class-summary strong{font-size:24px!important}
.calendar-head,.teaching-event,.teaching-day>p,.teaching-day h3{font-family:var(--font-body)!important}.teaching-day h3{font-size:13px!important;letter-spacing:0}.teaching-event{font-size:13px!important}
.session-date-nav input,[data-date-vn]{font-variant-numeric:tabular-nums;letter-spacing:.01em}
@media(max-width:760px){:root{--text-base:15px;--text-h1:27px;--text-h2:19px;--text-h3:17px}.brand{font-size:22px!important}.subnav-item{font-size:13px!important}.metric-card strong{font-size:24px!important}.workflow-context{font-size:13px}.footer{font-size:12px!important}}


/* Enrollment date and time editor. */
.enrollment-datetime{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(130px,.75fr);gap:12px;align-items:start}
.enrollment-datetime .field{margin-bottom:14px}.enrollment-datetime input{height:46px}
.compact-history>div{grid-template-columns:150px minmax(0,1fr) auto!important}
.compact-history time{min-width:0!important;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.hub-edit-date{min-width:112px!important}
@media(max-width:520px){.enrollment-datetime{grid-template-columns:minmax(0,1fr) 120px;gap:8px}.compact-history>div{grid-template-columns:1fr auto!important}.compact-history>div>span{grid-column:1/2}.hub-edit-date{grid-column:2;grid-row:1/3;min-width:104px!important}}


/* New class: bulk student entry. */
.bulk-student-box{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised)}
.bulk-student-box textarea{display:block;width:100%;min-height:132px!important;resize:vertical;background:var(--white)!important;line-height:1.6!important}
.bulk-student-box textarea::placeholder{color:#84958c;opacity:1}
.bulk-student-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}
.bulk-student-meta small{color:var(--muted);font-size:12px!important}.bulk-student-meta strong{flex-shrink:0;color:var(--green-dark);font-size:13px;font-weight:700}
@media(max-width:520px){.bulk-student-box{padding:11px}.bulk-student-meta{align-items:flex-start;flex-direction:column;gap:5px}.bulk-student-box textarea{min-height:150px!important}}


.enrollment-date-only{max-width:560px}
.enrollment-date-only .field{margin-bottom:14px}
.enrollment-date-only input{height:48px;font-variant-numeric:tabular-nums}
.enrollment-date-only small{display:block;margin-top:7px;color:var(--muted,#66766f);font-size:12px;line-height:1.5}


/* Smart date input and bulk student updates */
.smart-date-control{position:relative;display:flex;align-items:center;min-width:0}
.smart-date-control>input[data-date-vn]{width:100%;padding-right:48px}
.smart-date-button{position:absolute;right:4px;width:44px;height:44px;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--primary,#24634b);font-size:20px}
.smart-date-button:hover{background:color-mix(in srgb,var(--primary,#24634b) 10%,transparent)}
.smart-date-native{position:absolute!important;right:8px;bottom:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.date-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.date-shortcuts button,.bulk-selection-actions button{min-height:34px;border:1px solid color-mix(in srgb,var(--primary,#24634b) 24%,transparent);border-radius:999px;background:var(--surface,#fff);color:var(--primary,#24634b);padding:6px 12px;font:600 13px/1.2 Inter,sans-serif}
.compact-student-title-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.bulk-action-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--primary,#24634b) 24%,transparent);border-radius:14px;background:color-mix(in srgb,var(--primary,#24634b) 6%,var(--surface,#fff))}
.bulk-selection-actions{display:flex;flex-wrap:wrap;gap:6px}
.bulk-student-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.bulk-mode .bulk-student-row{grid-template-columns:44px minmax(0,1fr);gap:8px}
.bulk-student-check{display:grid;place-items:center;min-width:44px;min-height:56px;cursor:pointer}
.bulk-student-check input{width:20px;height:20px;accent-color:var(--primary,#24634b)}
.bulk-date-summary{display:flex;flex-direction:column;gap:3px;padding:12px 14px;margin-bottom:16px;border-radius:12px;background:color-mix(in srgb,var(--primary,#24634b) 8%,var(--surface,#fff))}
.bulk-date-summary span{color:var(--muted,#586d65);font-size:13px}
@media(max-width:640px){.compact-student-title{align-items:flex-start}.compact-student-title-actions{width:100%;justify-content:stretch}.compact-student-title-actions button{flex:1}.bulk-action-bar{grid-template-columns:1fr}.bulk-action-bar>.primary-button{width:100%}.bulk-selection-actions{order:2}.bulk-action-bar>.primary-button{order:3}}


/* Compact multi-select and enrollment timeline controls */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.bulk-action-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:10px 0;border-radius:12px}
.bulk-action-bar>strong{white-space:nowrap;font-size:14px}
.bulk-select-menu{min-width:170px;max-width:220px}
.bulk-select-menu select{width:100%;height:40px;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);padding:0 34px 0 12px;font:600 13px/1.2 Inter,sans-serif;cursor:pointer}
.bulk-action-bar>.primary-button{min-height:40px;margin-left:auto;padding:9px 14px;font-size:13px;white-space:nowrap}
.bulk-mode .bulk-student-row{grid-template-columns:40px minmax(0,1fr);gap:4px}
.bulk-student-check{min-width:40px;min-height:56px}
.bulk-student-check input{width:19px;height:19px;margin:0}
.compact-manage:after{content:''!important;width:8px;height:8px;margin:0!important;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform 160ms ease}
.compact-student[open] .compact-manage:after{content:''!important;transform:rotate(225deg) translate(-1px,-1px)}
.history-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.history-delete{display:grid;place-items:center;width:36px;height:36px;min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--danger,#a13d3d);font:500 22px/1 Inter,sans-serif;cursor:pointer}
.history-delete:hover,.history-delete:focus-visible{background:color-mix(in srgb,var(--danger,#a13d3d) 10%,transparent)}
.compact-history>div{grid-template-columns:150px minmax(0,1fr) auto!important}
@media(max-width:640px){.bulk-action-bar{display:grid;grid-template-columns:1fr auto}.bulk-select-menu{min-width:0;max-width:none}.bulk-action-bar>.primary-button{grid-column:1/-1;width:100%;margin:0}.compact-history>div{grid-template-columns:1fr auto!important}.history-actions{grid-column:2;grid-row:1/3}}


/* Today's teaching overview */
.today-teaching{margin-bottom:28px;padding:20px;border:1px solid color-mix(in srgb,var(--primary,#24634b) 20%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary,#24634b) 7%,var(--white)) 0%,var(--white) 70%)}
.today-teaching-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.today-kicker,.calendar-overview-heading span{display:block;margin-bottom:4px;color:var(--primary,#24634b);font-size:11px;font-weight:800;letter-spacing:.11em}
.today-teaching-heading h2,.calendar-overview-heading h2{margin:0;font:700 20px/1.3 Montserrat,sans-serif;color:var(--ink)}
.today-teaching-heading>strong{padding:6px 10px;border-radius:999px;background:var(--white);color:var(--primary,#24634b);font-size:12px;white-space:nowrap}
.today-session-list{display:grid;gap:10px}
.today-session{display:grid;grid-template-columns:160px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:14px;background:var(--white)}
.today-session.upcoming{border-left-color:var(--primary,#24634b)}
.today-session.live{border-left-color:#d48a24;background:color-mix(in srgb,#d48a24 5%,var(--white))}
.today-session-time{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.today-session-time>b{font-size:15px;color:var(--ink)}
.today-status{padding:4px 7px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.today-status.upcoming{background:color-mix(in srgb,var(--primary,#24634b) 10%,var(--white));color:var(--primary,#24634b)}
.today-status.live{background:color-mix(in srgb,#d48a24 15%,var(--white));color:#8a5614}
.today-session-copy h3{margin:0 0 3px;font:700 15px/1.3 Montserrat,sans-serif;color:var(--ink)}
.today-session-copy p,.today-empty p{margin:0;color:var(--muted);font-size:13px}
.today-session-actions{display:flex;gap:8px}
.today-session-actions button{min-height:40px;padding:8px 12px;font-size:13px;white-space:nowrap}
.today-empty{display:flex;align-items:center;gap:12px;padding:16px;border:1px dashed var(--line);border-radius:13px;background:var(--white)}
.today-empty-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:12px;background:var(--surface-soft);color:var(--primary,#24634b)}
.today-empty strong{display:block;margin-bottom:3px;color:var(--ink);font-size:14px}
.calendar-overview-heading{margin:0 0 12px}
@media(max-width:760px){.today-teaching{padding:16px}.today-session{grid-template-columns:1fr auto}.today-session-copy{grid-column:1/2}.today-session-actions{grid-column:2;grid-row:1/3;flex-direction:column}.today-session-actions button{min-width:92px}}
@media(max-width:520px){.today-teaching-heading{align-items:flex-start}.today-teaching-heading h2{font-size:18px}.today-session{grid-template-columns:1fr;padding:13px}.today-session-actions{grid-column:1;grid-row:auto;flex-direction:row}.today-session-actions button{flex:1}.today-teaching-heading>strong{font-size:11px}}


/* Today schedule visibility */
.teaching-day.is-today{position:relative;background:color-mix(in srgb,var(--primary,#24634b) 6%,var(--white));box-shadow:inset 0 3px var(--primary,#24634b)}
.teaching-day h3{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.teaching-day h3 em{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border-radius:999px;background:var(--primary,#24634b);color:var(--white);font:700 10px/1 Inter,sans-serif;font-style:normal;white-space:nowrap}
.today-empty{justify-content:flex-start}
.today-empty>div:nth-child(2){flex:1;min-width:0}
.today-empty .secondary-button{min-height:40px;white-space:nowrap}
@media(max-width:520px){.today-empty{align-items:flex-start;flex-wrap:wrap}.today-empty .secondary-button{width:100%}}


/* Toasts share the browser top layer with modal dialogs. */
#toast[popover]{position:fixed;inset:24px auto auto 50%;margin:0;transform:translate(-50%,-12px);width:max-content;max-width:min(520px,calc(100vw - 32px));border:1px solid color-mix(in srgb,#fff 24%,transparent);background:#263b30;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 14px 38px #10251b40;font-size:14px;font-weight:600;line-height:1.45;text-align:center;opacity:0;pointer-events:none;z-index:2147483647;transition:opacity 160ms ease,transform 160ms ease}
#toast[popover]::backdrop{display:none}
#toast[popover].show{opacity:1;transform:translate(-50%,0)}
#toast[popover][data-tone="error"]{background:#8f3434;border-color:#c56a6a}
@media(max-width:520px){#toast[popover]{inset:12px auto auto 50%;width:calc(100vw - 24px);padding:12px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){#toast[popover]{transition:none}}


/* Attendance billing rules and class-off state */
.attendance-progress-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.class-off-button{color:#875626;border-color:color-mix(in srgb,#a86528 35%,var(--line));background:color-mix(in srgb,#f5d9b8 22%,var(--white))}
.attendance-fee-rule{margin:10px 0 16px;padding:10px 12px;border-radius:10px;background:var(--surface-soft);font-size:13px!important}
.attendance-cancelled-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;margin-bottom:12px;border:1px solid color-mix(in srgb,#a86528 32%,var(--line));border-radius:13px;background:color-mix(in srgb,#f3d4ad 20%,var(--white))}
.attendance-cancelled-banner strong,.attendance-cancelled-banner span{display:block}.attendance-cancelled-banner span{margin-top:3px;color:var(--muted);font-size:13px}
.attendance-cancelled-empty{text-align:center;padding:34px 18px;border:1px dashed color-mix(in srgb,#a86528 35%,var(--line));border-radius:14px;background:var(--white)}
.attendance-cancelled-empty strong{display:block;margin-bottom:5px;font-size:16px}.attendance-cancelled-empty p{margin:0;color:var(--muted);font-size:13px}
.attendance-choice[data-status="absent_excused"].selected{background:#e8f0f5;color:#345c73;border-color:#6f98ae}
.attendance-choice[data-status="absent_unexcused"].selected{background:#fff0dc;color:#7d4d1e;border-color:#c68a4f}
.attendance-choice[data-status="makeup"].selected{background:#eee9f8;color:#5e4b86;border-color:#8d79b7}
@media(max-width:640px){.attendance-progress-actions{width:100%}.attendance-progress-actions button{flex:1}.attendance-cancelled-banner{align-items:stretch;flex-direction:column}.attendance-cancelled-banner button{width:100%}}


.today-session.cancelled{border-left-color:#a86528;background:color-mix(in srgb,#f3d4ad 16%,var(--white))}
.today-status.cancelled{background:#fff0dc;color:#7d4d1e}
.teaching-event.cancelled-event{border-left-color:#a86528;background:#fff4e8;color:#6f481f}


/* Grouped tuition reports */
.fee-report-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.fee-range-fields{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;flex:1;min-width:min(100%,520px)}
.fee-range-fields .date-label{gap:5px}.fee-range-fields input,.fee-range-fields select{width:100%;min-height:44px;border:1px solid #a7b9ae;border-radius:9px;background:var(--white);color:var(--ink);padding:9px 12px;font-size:15px}
.fee-report-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.fee-report-actions .date-switch{margin-right:6px}
.fee-report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.fee-report-summary article{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--white)}.fee-report-summary span{display:block;color:var(--muted);font-size:12px}.fee-report-summary strong{display:block;margin-top:5px;font:700 22px/1.25 Montserrat,sans-serif}.fee-report-summary .money{background:var(--green-light);border-color:color-mix(in srgb,var(--green) 22%,var(--line))}.fee-report-summary .money strong{font-size:19px;color:var(--green)}
.fee-report-note{margin:0 0 18px}.fee-class-reports{display:grid;gap:18px}.fee-class-report{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.fee-class-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;background:var(--surface-soft);border-bottom:1px solid var(--line)}.fee-class-heading>div:first-child span{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em}.fee-class-heading h3{margin:3px 0 0;font:700 18px/1.3 Montserrat,sans-serif}.fee-class-totals{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.fee-class-totals strong{color:var(--green);font-size:16px}.fee-class-report .table-scroll{margin:0}.fee-detail-table{min-width:760px}.fee-detail-table caption{padding:12px 18px;color:var(--muted);font-size:12px}.fee-detail-table th,.fee-detail-table td{font-variant-numeric:tabular-nums}.fee-detail-table th:nth-child(n+2),.fee-detail-table td:nth-child(n+2){text-align:right}.fee-detail-table tfoot td{background:var(--surface-soft)}
@media(max-width:760px){.fee-range-fields{grid-template-columns:1fr 1fr}.fee-range-fields .date-label:last-child{grid-column:1/-1}.fee-report-actions{width:100%;justify-content:stretch}.fee-report-actions>.date-switch{width:100%;margin:0}.fee-report-actions>.secondary-button,.fee-report-actions>.primary-button{flex:1}.fee-report-summary{grid-template-columns:1fr 1fr}.fee-class-heading{align-items:flex-start;flex-direction:column}.fee-class-totals{justify-content:flex-start}}
@media(max-width:420px){.fee-range-fields{grid-template-columns:1fr}.fee-range-fields .date-label:last-child{grid-column:auto}.fee-report-summary{grid-template-columns:1fr 1fr}.fee-report-summary strong{font-size:19px}}

/* Learning workflow: keep controls and long Vietnamese names readable. */
.session-summary,.assessment-toolbar,.assessment-card,.profile-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.session-summary{padding:18px 0}.session-summary h2,.assessment-toolbar h2{margin:0;font-size:22px}.session-summary p,.assessment-toolbar p,.assessment-card p{margin:6px 0 0;color:var(--muted);font-size:14px}
.session-summary .eyebrow,.learning-dialog .eyebrow{display:none}
.session-actions,.bulk-review{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bulk-review{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.bulk-review label{display:flex;align-items:center;gap:8px;min-height:44px}.bulk-review>span{color:var(--muted);margin-right:auto}
.session-list .session-student{display:grid;grid-template-columns:24px 36px minmax(140px,1fr) auto;gap:12px;padding:18px 0;align-items:center}.session-student>b{min-width:0;overflow-wrap:anywhere}.session-student>b small{display:block;margin-top:4px;font-weight:400;color:var(--muted);font-size:12px}.session-student .attendance-choices{grid-column:3 / -1;grid-row:2;flex-wrap:wrap;justify-content:flex-start}.session-student .review-button{grid-column:4;grid-row:1}.review-check,[data-review-all]{width:22px;height:22px;accent-color:var(--green)}
.review-button{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:inherit;font-size:14px}
.assessment-toolbar{margin-bottom:20px}.assessment-toolbar .button-pair{display:flex;gap:8px;flex-wrap:wrap;min-width:0}.assessment-toolbar select{max-width:100%}.assessment-list{display:grid;gap:12px}.assessment-card{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--white)}.assessment-card>div{min-width:0;flex:1}.assessment-card h3{margin:6px 0;font-size:18px;overflow-wrap:anywhere}.assessment-card .eyebrow{font-size:13px;letter-spacing:0;color:var(--muted)}
.learning-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}.learning-dialog form{padding:24px}.learning-dialog .dialog-head h2{overflow-wrap:anywhere}.learning-dialog .dialog-actions{position:sticky;bottom:-24px;background:var(--white);padding-bottom:16px;z-index:1}.learning-dialog .dialog-actions[hidden]{display:none}.dialog-context{color:var(--muted);font-size:14px;line-height:1.6}.review-fieldset{border:0;border-bottom:1px solid var(--line);padding:0 0 16px;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px}.review-fieldset legend{font-weight:600;margin-bottom:8px}.review-fieldset label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:8px 12px;font-size:14px}.review-fieldset input{accent-color:var(--green);width:18px;height:18px}.review-fieldset label:has(input:checked){background:var(--green-light);border-color:var(--green)}.private-note-field small{font-size:13px;color:var(--muted);line-height:1.5}.learning-dialog textarea{min-height:100px}
.assessment-meta{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr);gap:12px}.score-head,.score-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 100px;gap:12px;align-items:center}.score-head{padding:8px 0;color:var(--muted);font-size:13px}.score-row{padding:12px 0;border-bottom:1px solid var(--line)}.score-row b{font-size:14px;overflow-wrap:anywhere}.score-row input,.score-row select{width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:inherit;font-size:16px}.score-row input{text-align:right;font-variant-numeric:tabular-nums}.score-row input:disabled{background:var(--surface-soft);opacity:.65}.score-row :focus-visible,.review-button:focus-visible,.review-fieldset input:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.timeline-section h3{margin:24px 0 12px;font-size:17px}.timeline-item{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.timeline-item time{color:var(--muted);font-variant-numeric:tabular-nums}.timeline-item p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.profile-actions{margin-bottom:12px}
@media(max-width:760px){.session-actions{width:100%}.session-actions button{flex:1;min-height:44px}.assessment-toolbar{align-items:stretch}.assessment-toolbar>div{width:100%}.assessment-toolbar .button-pair>*{flex:1}.session-list .session-student{grid-template-columns:24px 32px minmax(0,1fr);gap:10px}.session-student .review-button{grid-column:3;grid-row:3;justify-self:start}.session-student .attendance-choices{grid-column:1 / -1;grid-row:2;display:flex;gap:8px}.session-student .attendance-choice{min-height:44px;flex:1 1 calc(50% - 8px);white-space:normal}.session-student .text-button{min-height:44px}.assessment-meta{grid-template-columns:1fr 1fr}.assessment-meta>.field:first-child{grid-column:1 / -1}}
@media(max-width:480px){.learning-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.learning-dialog form{padding:16px}.learning-dialog .dialog-head h2{font-size:20px}.learning-dialog .dialog-actions{bottom:-16px}.score-head{display:none}.score-row{grid-template-columns:minmax(0,1fr) 100px;gap:8px}.score-row b{grid-column:1 / -1}.timeline-item{grid-template-columns:1fr;gap:6px}.profile-actions{align-items:stretch}.profile-actions button{width:100%}.bulk-review>span{font-size:13px}.bulk-review>button{width:100%}.session-actions button{flex-basis:100%}.assessment-toolbar .button-pair>*{flex-basis:100%}.assessment-meta{grid-template-columns:1fr}.assessment-meta>.field:first-child{grid-column:auto}}
@media(max-width:1100px){.attendance-control-bar{grid-template-columns:minmax(0,1fr)}.attendance-class-control select{font-size:16px}.session-date-nav{grid-template-columns:44px minmax(0,1fr) 44px}.session-nav-button{width:44px}.session-date-nav input{font-size:16px}.session-actions{width:100%}.session-actions button{flex:1 1 auto}}
/* Compact attendance workspace — Nếp */
.subnav{display:flex;gap:4px;padding:5px;margin-top:24px;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow-x:auto}
.subnav .subnav-item{flex:1;justify-content:center;gap:9px;min-height:46px;padding:10px 14px;border:1px solid transparent;border-radius:8px;background:transparent;white-space:nowrap}
.subnav .subnav-item .ui-icon{width:19px;height:19px;flex-shrink:0}
.subnav .subnav-item:hover{background:var(--white);color:var(--ink)}
.subnav .subnav-item.active{background:var(--white);color:var(--green);border-color:var(--line);box-shadow:0 2px 3px #10251b08}
.workflow-context{min-height:76px;padding:14px 0 20px}
.workflow-next{min-height:42px;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--green);white-space:nowrap}
.workflow-next:hover{background:var(--green-light);border-color:var(--green)}
.session-list .session-student{grid-template-columns:22px 32px minmax(140px,1fr) auto 40px;gap:12px;padding:12px 0;min-height:72px}
.session-list .session-student .attendance-choices{grid-column:4;grid-row:1;display:flex;flex-wrap:nowrap;gap:4px;width:auto;margin:0;align-items:center}
.session-list .session-student .review-button{grid-column:5;grid-row:1;justify-self:end}
.session-student .attendance-choice,.session-student .attendance-clear,.session-student .review-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted)}
.session-student .ui-icon{width:20px;height:20px}
.session-student .attendance-choice:hover,.session-student .review-button:hover,.session-student .attendance-clear:hover:not(:disabled){background:var(--paper);border-color:var(--line);color:var(--ink)}
.session-student .attendance-choice.selected{background:var(--green);border-color:var(--green);color:#fff}
.session-student .attendance-choice[data-status="absent_excused"].selected{background:#f6edda;border-color:#b79a57;color:#745718}
.session-student .attendance-choice[data-status="absent_unexcused"].selected{background:#faeaea;border-color:#ca8585;color:#a13232}
.session-student .attendance-choice[data-status="makeup"].selected{background:#eaf0fa;border-color:#859fc7;color:#325d9e}
.session-student .attendance-clear:disabled{opacity:.3;cursor:default}
.session-student .review-button{border-color:var(--line)}
.session-student>b{font-size:14px!important;line-height:1.4}
.session-student>b small{font-size:12px!important;line-height:1.4;margin-top:3px}
.session-student .review-check{width:18px;height:18px;margin:0}
.session-list .session-student .avatar{width:30px;height:30px}
.session-student:focus-within{background:var(--paper)}
.session-student button:focus-visible,.subnav-item:focus-visible,.workflow-next:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:1100px){.subnav .subnav-item{padding:10px;gap:6px}.session-list .session-student{gap:8px;grid-template-columns:20px 30px minmax(120px,1fr) auto 40px}}
@media(max-width:600px){.subnav .subnav-item{flex:0 0 auto;padding:10px 12px}.workflow-context{align-items:flex-start;flex-direction:column;gap:10px;padding:14px 0 20px}.workflow-context p{max-width:none}.workflow-next{align-self:flex-end;min-height:44px}.session-list{padding-inline:12px}.session-list .session-student{grid-template-columns:20px 30px minmax(0,1fr) 44px;gap:8px;padding:12px 0}.session-list .session-student .review-button{grid-column:4;grid-row:1;width:44px;height:44px}.session-list .session-student .attendance-choices{grid-column:2 / -1;grid-row:2;justify-content:space-between;gap:4px}.session-student .attendance-choice,.session-student .attendance-clear{flex:0 0 44px;width:44px;height:44px;min-height:44px}.session-student>b{overflow-wrap:anywhere}}

.attendance-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 18px;padding:0 4px 12px;color:var(--muted);font-size:12px}.attendance-legend>span{display:inline-flex;align-items:center;gap:5px}.attendance-legend .ui-icon{width:16px;height:16px}@media(max-width:600px){.attendance-legend{justify-content:flex-start;gap:8px 14px}}
/* Refined session controls: one working toolbar, clear primary action. */
.workflow-context{min-height:80px;gap:20px;padding:16px 0 24px}
.workflow-next{display:inline-flex;gap:12px;min-height:46px;padding:11px 16px;background:var(--green-dark);border:0;color:#fff;border-radius:10px;box-shadow:0 3px 5px #173e2814;line-height:1.4}
.workflow-next>.ui-icon:first-child{width:20px;height:20px;opacity:.85}
.workflow-next>.ui-icon:last-child{width:17px;height:17px;margin-left:8px;opacity:.8}
.workflow-next:hover{background:var(--green);color:#fff;box-shadow:0 4px 8px #173e2820}
.workflow-next:hover>.ui-icon:first-child{transform:none}
.session-summary{padding:18px 0 14px;gap:14px}
.session-actions{gap:8px;flex-wrap:nowrap;width:auto}
.session-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 12px;white-space:nowrap;flex:0 1 auto;border-radius:8px;font-size:13px!important}
.session-actions .ui-icon{width:17px;height:17px}
.session-actions .session-mark-all{border-color:transparent;background:transparent;color:var(--green)}
.session-actions .session-mark-all:hover{background:var(--green-light)}
.session-actions .class-off-button{border-color:var(--line);color:var(--muted);background:var(--white)}
.session-actions .class-off-button:hover{background:var(--paper);color:var(--ink)}
.session-actions .primary-button{background:var(--green);box-shadow:0 2px 3px #173e2810}
.attendance-fee-rule{margin:8px 0 20px;padding:10px 12px;background:var(--paper);border-radius:8px;font-size:12px!important}
.bulk-review{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;margin:0;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--paper);min-height:62px}
.bulk-selection{display:flex;align-items:center;gap:14px;min-width:0}
.bulk-selection label{min-height:40px;gap:10px;font-size:13px;font-weight:600;white-space:nowrap}
.bulk-selection input{width:18px;height:18px;min-height:18px;margin:0}
.bulk-selection #reviewCount{padding-left:14px;border-left:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap}
.bulk-review>[data-review-selected]{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 11px;width:auto;font-size:13px!important;border-radius:7px;background:var(--white);color:var(--green);border-color:var(--line)}
.bulk-review>[data-review-selected] .ui-icon{width:17px;height:17px}
.bulk-review>[data-review-selected]:disabled{opacity:.45}
.bulk-review>[data-review-selected]:enabled:hover{background:var(--green);color:#fff;border-color:var(--green)}
.attendance-key{position:relative;margin-left:auto;font-size:12px;color:var(--muted)}
.attendance-key summary{display:flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;list-style:none}
.attendance-key summary::-webkit-details-marker{display:none}
.attendance-key summary .ui-icon{width:16px;height:16px}
.attendance-key summary:hover{color:var(--green)}
.attendance-key summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.attendance-key .attendance-legend{position:absolute;right:0;top:calc(100% + 8px);z-index:5;display:grid;gap:12px;min-width:188px;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 20px #10251b14;color:var(--ink)}
.session-list{border-top-left-radius:0;border-top-right-radius:0}
.session-list .session-student{min-height:68px;padding:10px 0}
.session-student .attendance-choices{padding:2px;background:var(--paper);border-radius:9px}
.session-student .attendance-choice,.session-student .attendance-clear{flex-basis:36px;width:36px;height:36px;min-height:36px}
.session-student .review-button{margin-left:4px;border-color:transparent;background:transparent}
.session-student .review-button:hover{border-color:var(--line);background:var(--paper)}
@media(max-width:1100px) and (min-width:761px){.session-summary{align-items:flex-start}.session-actions{flex-wrap:wrap;justify-content:flex-end}.session-actions button{flex-basis:auto}}
@media(max-width:760px){.session-summary{gap:14px}.session-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.session-actions button{flex:1 1 auto;min-height:44px;padding:10px}.workflow-context{align-items:flex-start}.workflow-next{align-self:flex-end}.bulk-review{padding:8px 12px;gap:4px 12px}.bulk-selection{flex:1;gap:10px}.bulk-selection #reviewCount{padding-left:10px}.attendance-key{width:100%;margin-left:0}.attendance-key summary{min-height:32px;justify-content:flex-end}.attendance-key .attendance-legend{top:100%}.bulk-review>[data-review-selected]{min-height:40px}.session-student .attendance-choice,.session-student .attendance-clear{flex:0 0 44px;width:44px;height:44px;min-height:44px}.session-student .attendance-choices{background:transparent;padding:0}.session-list .session-student{padding:12px 0}}
@media(max-width:360px){.bulk-selection{flex-basis:100%}.bulk-review>[data-review-selected]{margin-bottom:4px}.attendance-key{width:auto;margin-left:auto}.workflow-next{max-width:100%;white-space:normal}.workflow-next>.ui-icon:last-child{margin-left:0}}
@media(prefers-reduced-motion:reduce){.workflow-next .ui-icon{transition:none}}

.dark .workflow-next{background:#a0d4b8;color:#143126}.dark .workflow-next:hover{background:#b9e0cc;color:#143126}.dark .session-actions .primary-button{color:#143126}
/* Sculpted teaching metrics: deep green satin surface with dimensional objects. */
#teachingMetrics{gap:12px;padding:0;border:0;border-radius:0;overflow:visible;background:transparent}
#teachingMetrics .metric-card{position:relative;isolation:isolate;display:flex;align-items:center;min-height:126px;padding:22px;border:0;border-radius:14px;overflow:hidden;background:linear-gradient(125deg,#234c40,#15382e);box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #09221966,0 5px 10px #173d2e12;transition:transform .25s ease,box-shadow .25s ease}
#teachingMetrics .metric-card:nth-child(2){background:linear-gradient(125deg,#31594a,#1d4035)}
#teachingMetrics .metric-card:nth-child(3){background:linear-gradient(125deg,#23483e,#132f28)}
#teachingMetrics .metric-card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffff30,0 9px 15px #173d2e20}
#teachingMetrics .metric-copy{position:relative;z-index:1;min-width:0;width:calc(100% - 82px)}
#teachingMetrics .metric-copy small{display:block;color:#c6dace;font-size:12px!important;line-height:1.5;max-width:155px}
#teachingMetrics .metric-copy strong{margin-top:8px;color:#fff;font-size:34px!important;font-weight:650;letter-spacing:-.035em;line-height:1.15;font-variant-numeric:tabular-nums}
.metric-sculpture{position:absolute;right:8px;top:50%;width:96px;height:100px;transform:translateY(-50%);background-image:url('assets/teaching-sculptures.png');background-repeat:no-repeat;background-size:300% 100%;filter:drop-shadow(0 5px 4px #041b1740);pointer-events:none}
.metric-book{background-position:0% 50%}.metric-users{background-position:50% 50%}.metric-calendar{background-position:100% 50%}
@media(max-width:1100px){#teachingMetrics .metric-card{min-height:132px;padding:18px 14px}#teachingMetrics .metric-copy{width:calc(100% - 62px)}.metric-sculpture{width:78px;height:90px;right:2px}#teachingMetrics .metric-copy small{font-size:11px!important}#teachingMetrics .metric-copy strong{font-size:32px!important}}
@media(max-width:600px){#teachingMetrics{gap:8px}#teachingMetrics .metric-card{min-height:160px;padding:62px 12px 14px;align-items:flex-end;border-radius:12px}#teachingMetrics .metric-copy{width:100%}#teachingMetrics .metric-copy small{font-size:11px!important;min-height:33px}#teachingMetrics .metric-copy strong{font-size:29px!important;margin-top:5px}.metric-sculpture{width:64px;height:64px;top:5px;right:calc(50% - 32px);transform:none}}
@media(prefers-reduced-motion:reduce){#teachingMetrics .metric-card{transition:none}#teachingMetrics .metric-card:hover{transform:none}}