:root{
  --bg:#f4f7fb;--surface:#fff;--surface-2:#f8fafc;--text:#172033;--muted:#6b7280;
  --primary:#2563eb;--primary-2:#1d4ed8;--border:#e5e7eb;--danger:#dc2626;
  --shadow:0 10px 30px rgba(15,23,42,.08);--radius:20px;--safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
html{font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{margin:0;min-height:100vh;background:var(--bg);-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted);line-height:1.8}
.eyebrow{font-size:.78rem;color:var(--muted);font-weight:700;margin-bottom:4px}
h1,h2,h3,p{margin-top:0}
h1{font-size:1.35rem;margin-bottom:0}h2{font-size:1.25rem;margin-bottom:4px}h3{font-size:1rem}
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{width:min(100%,420px);background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:var(--shadow);text-align:center}
.brand-mark{width:64px;height:64px;margin:0 auto 16px;border-radius:20px;display:grid;place-items:center;background:var(--text);color:#fff;font-size:1.7rem;font-weight:800}
.stack{display:grid;gap:14px;margin-top:24px;text-align:right}.stack.compact{margin-top:18px}
label{display:grid;gap:7px;font-size:.88rem;font-weight:700;color:#374151}
input,select,textarea{width:100%;border:1px solid var(--border);background:#fff;border-radius:14px;padding:13px 14px;color:var(--text);outline:none;min-height:46px}
input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px #dbeafe}
.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800}
.btn.primary{background:var(--primary);color:white}.btn.primary:active{background:var(--primary-2)}
.btn.large{min-height:50px;width:100%}
.notice{padding:12px 14px;border-radius:14px;margin:18px 0;text-align:right;font-size:.88rem;line-height:1.7}
.notice.warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.app-shell{min-height:100dvh;padding-bottom:calc(82px + var(--safe-bottom))}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;background:rgba(244,247,251,.94);backdrop-filter:blur(12px)}
.icon-button{border:1px solid var(--border);background:var(--surface);width:42px;height:42px;border-radius:14px;display:grid;place-items:center}
.context-card{margin:4px 16px 14px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 6px 20px rgba(15,23,42,.04);display:grid;gap:10px}
.context-card label span{font-size:.75rem;color:var(--muted)}
.context-card select{min-height:42px;padding:9px 10px;border-radius:12px;background:var(--surface-2)}
.context-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.content{padding:0 16px 30px;max-width:780px;margin:auto}
.page{display:none}.page.active{display:block}
.hero{background:linear-gradient(135deg,#0f172a,#334155);color:#fff;border-radius:24px;padding:22px;margin-bottom:16px}
.hero .muted{color:#dbeafe}.hero h2{font-size:1.3rem}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;text-align:center;box-shadow:0 5px 18px rgba(15,23,42,.04)}
.stat-card strong{display:block;font-size:1.35rem;margin:6px 0 2px}.stat-card small{color:var(--muted);font-size:.75rem}
.stat-icon{font-size:1.2rem}.section-title{margin:0 2px 10px}
.quick-grid{display:grid;gap:10px}
.quick-card{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:16px;display:flex;gap:14px;align-items:center;text-align:right}
.quick-card>span{width:46px;height:46px;background:var(--surface-2);border-radius:14px;display:grid;place-items:center;font-size:1.3rem}
.quick-card div{display:grid;gap:4px}.quick-card small{color:var(--muted)}
.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}
.date-input{width:auto;min-width:140px}
.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px;margin-bottom:12px}
.summary-strip span{display:grid;text-align:center;font-size:.72rem;color:var(--muted);gap:2px}.summary-strip b{font-size:1rem;color:var(--text)}
.student-list{display:grid;gap:9px}
.student-row{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:13px;display:grid;gap:10px}
.student-top{display:flex;align-items:center;gap:11px}
.avatar{width:42px;height:42px;border-radius:13px;background:#eff6ff;color:#1d4ed8;display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.student-name{font-weight:800}.student-note{font-size:.78rem;color:var(--muted);margin-top:3px}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.status-button{border:1px solid var(--border);background:var(--surface-2);border-radius:11px;padding:8px 4px;font-size:.74rem;font-weight:800;color:#4b5563}
.status-button.active[data-status="present"]{background:#ecfdf5;border-color:#86efac;color:#166534}
.status-button.active[data-status="absent"]{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.status-button.active[data-status="late"]{background:#fffbeb;border-color:#fde68a;color:#92400e}
.status-button.active[data-status="excused"]{background:#eff6ff;border-color:#93c5fd;color:#1e40af}
.sticky-action{position:sticky;bottom:calc(76px + var(--safe-bottom));padding-top:12px;background:linear-gradient(transparent,var(--bg) 24%)}
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:0 12px;margin-bottom:12px}
.search-box input{border:0;box-shadow:none;background:transparent;padding-right:0}
.empty{text-align:center;background:var(--surface);border:1px dashed #cbd5e1;border-radius:18px;padding:28px 18px;color:var(--muted)}
.empty div{font-size:2rem}.empty h3{color:var(--text);margin:8px 0 5px}
.settings-grid{display:grid;gap:10px}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:0 16px}
.settings-card summary{padding:16px 0;font-weight:800;cursor:pointer}
.settings-card form{padding-bottom:16px}
.danger-card{width:100%;padding:16px;text-align:right;color:var(--danger);font-weight:800}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);border-top:1px solid var(--border);padding:7px 8px calc(7px + var(--safe-bottom));backdrop-filter:blur(16px)}
.nav-item{border:0;background:transparent;border-radius:14px;padding:6px 4px;display:grid;place-items:center;gap:2px;color:#64748b}
.nav-item span{font-size:1.2rem}.nav-item small{font-size:.7rem;font-weight:800}.nav-item.active{color:var(--primary);background:#eff6ff}
.modal{border:0;padding:0;background:transparent;width:min(92%,480px)}
.modal::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(3px)}
.modal-card{background:var(--surface);border-radius:24px;padding:20px;display:grid;gap:15px}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.toast{position:fixed;z-index:100;top:18px;left:50%;transform:translate(-50%,-120px);background:#111827;color:#fff;padding:11px 16px;border-radius:14px;box-shadow:var(--shadow);transition:.25s;max-width:90%;font-size:.88rem}
.toast.show{transform:translate(-50%,0)}.toast.error{background:#991b1b}
@media(min-width:700px){
  .context-card{max-width:748px;margin-left:auto;margin-right:auto}
  .quick-grid{grid-template-columns:repeat(3,1fr)}
  .quick-card{align-items:flex-start}
  .bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:520px;bottom:14px;border:1px solid var(--border);border-radius:22px;padding:7px;box-shadow:var(--shadow)}
  .app-shell{padding-bottom:110px}
}

.btn.secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.attendance-tools{display:flex;gap:8px;margin:-4px 0 12px}
.attendance-tools .btn{flex:1}
.grade-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.grade-controls label span{font-size:.75rem;color:var(--muted)}
.exam-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:16px;padding:12px 14px;margin-bottom:12px;font-size:.86rem;line-height:1.7}
.grade-row{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:13px;display:flex;align-items:center;gap:12px}
.grade-row .student-top{flex:1}
.grade-input-wrap{display:flex;align-items:center;gap:6px}
.grade-input{width:88px;text-align:center;font-weight:800}
.max-score{font-size:.8rem;color:var(--muted);white-space:nowrap}
.bottom-nav{grid-template-columns:repeat(5,1fr)}
@media(max-width:420px){.grade-controls{grid-template-columns:1fr}.summary-strip{grid-template-columns:repeat(2,1fr)}}

.stats-grid{grid-template-columns:repeat(2,1fr)}
.student-tools{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:12px}
.student-tools .search-box{margin-bottom:0}.compact-select{width:auto;min-width:128px}
.student-actions{display:flex;gap:8px;margin-top:2px}.student-actions .btn{flex:1}
.btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.btn.small-btn,.small-btn{padding:8px 11px;font-size:.78rem}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.compact-head{margin:20px 2px 10px}.compact-head h3{margin-bottom:0}
.history-list{display:grid;gap:8px}.history-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:right}
.history-card .history-date{font-weight:800}.history-counts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.chip{font-size:.72rem;padding:5px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}
.profile-modal{width:min(94%,600px);max-height:92dvh}.profile-card{max-height:92dvh;overflow:auto}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.profile-stats>div{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px;text-align:center}.profile-stats strong{display:block;font-size:1.1rem}.profile-stats small{color:var(--muted);font-size:.72rem}
.profile-section{display:grid;gap:10px;padding-top:4px}.profile-section h3{margin:0}.mini-list,.notes-list{display:grid;gap:7px}.mini-row,.note-row{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:10px 11px;display:flex;justify-content:space-between;gap:10px;align-items:center}.mini-row small,.note-row small{color:var(--muted)}
.note-form{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:end}.note-form textarea{min-height:46px}.note-row{display:block}.note-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}.note-tag{font-size:.7rem;border-radius:999px;padding:3px 7px;background:#eff6ff;color:#1e40af}
@media(max-width:520px){.student-tools{grid-template-columns:1fr}.compact-select{width:100%}.note-form{grid-template-columns:1fr}.profile-stats{grid-template-columns:repeat(2,1fr)}}

.action-card{width:100%;text-align:right;color:var(--text);font-weight:800;padding:16px;border-radius:18px}
.report-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.report-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.report-kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px;text-align:center}
.report-kpi small{display:block;color:var(--muted);font-size:.72rem}.report-kpi strong{display:block;font-size:1.15rem;margin-top:5px}
.report-filter-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.report-table-wrap{overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.report-table{width:100%;border-collapse:collapse;min-width:620px}
.report-table th,.report-table td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:right;font-size:.84rem;white-space:nowrap}
.report-table th{background:var(--surface-2);color:#475569;font-size:.76rem;position:sticky;top:0}
.report-table tbody tr:last-child td{border-bottom:0}
.metric-good{color:#166534}.metric-warn{color:#92400e}.metric-bad{color:#991b1b}
@media(max-width:520px){
  .report-actions{grid-template-columns:1fr}
  .report-summary-grid{grid-template-columns:repeat(2,1fr)}
  .report-filter-card{grid-template-columns:1fr}
}
@media print{
  body{background:#fff}.topbar,.context-card,.bottom-nav,.report-actions,.report-filter-card,.page:not(#reportsPage){display:none!important}
  #reportsPage{display:block!important}.content{max-width:none;padding:0}.report-table-wrap{overflow:visible;border:0}.report-table{min-width:0}
}

/* v8: schedule + lesson mode */
.today-lessons,.schedule-list{display:grid;gap:9px}.mini-empty{padding:14px;background:var(--surface);border:1px dashed var(--border);border-radius:16px;color:var(--muted);text-align:center;font-size:.84rem}
.week-tabs{display:flex;gap:7px;overflow:auto;padding:2px 0 12px;scrollbar-width:none}.week-tab{white-space:nowrap;border:1px solid var(--border);background:var(--surface);padding:9px 13px;border-radius:999px;font-weight:800;color:#64748b}.week-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.schedule-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px}.schedule-time{min-width:76px}.schedule-time b,.schedule-time small,.schedule-main b,.schedule-main small{display:block}.schedule-time small,.schedule-main small{color:var(--muted);font-size:.72rem;margin-top:3px}.schedule-main{min-width:0}.schedule-main b{font-size:.92rem}.lesson-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.assignment-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;justify-content:space-between;gap:12px;align-items:start}.assignment-card p{margin:5px 0 0;font-size:.84rem}.assignment-card small{color:var(--muted);white-space:nowrap;font-size:.72rem}
@media(max-width:420px){.schedule-card{grid-template-columns:auto 1fr}.schedule-card>.btn{grid-column:1/-1}.assignment-card{display:block}.assignment-card small{display:block;margin-top:8px}}

/* v9 final polish */
.offline-banner{position:fixed;z-index:90;top:0;left:0;right:0;padding:10px 14px;background:#7c2d12;color:#fff;text-align:center;font-size:.82rem;font-weight:800;box-shadow:0 5px 20px rgba(0,0,0,.15)}
body.is-offline .topbar{top:38px}
.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 0 16px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface-2);padding:12px;border-radius:14px}
.switch-row input{width:22px;height:22px;min-height:auto}
.small-copy{font-size:.8rem;margin:0}
body.compact-ui .student-row{padding:9px 11px;gap:7px}
body.compact-ui .status-button{padding:6px 3px}
body.compact-ui .context-card{padding:10px}
body.compact-ui .quick-card{padding:12px}
body.compact-ui .stat-card{padding:10px}
body.compact-ui .content{padding-left:12px;padding-right:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.loading-dots:after{content:'...';animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
@media(max-width:430px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .settings-actions{grid-template-columns:1fr}
  .topbar{padding-left:14px;padding-right:14px}
}

/* v10 records + lesson center */
.record-menu{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}.record-card{border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:14px;text-align:right;color:inherit;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center}.record-card span{font-size:1.5rem;grid-row:1/3}.record-card b{font-size:.9rem}.record-card small{color:var(--muted);font-size:.72rem}.record-card.active{outline:2px solid var(--primary);background:var(--surface-2)}.record-toolbar{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:12px}.record-content,.lesson-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:14px;overflow:auto}.records-table{width:100%;border-collapse:collapse;min-width:620px;font-size:.82rem}.records-table th,.records-table td{padding:9px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}.records-table th{background:var(--surface-2);position:sticky;top:0}.print-title{display:none}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lesson-alert{padding:12px 14px;border-radius:14px;margin-bottom:8px;background:var(--surface);border:1px solid var(--border)}.lesson-alert.exam{border-inline-start:4px solid #d97706}.lesson-schedule-card,.curriculum-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px;border-bottom:1px solid var(--border)}.curriculum-row.done{text-decoration:none;opacity:.7}.curriculum-row .status-dot{font-size:1.1rem}.lesson-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}.record-section-title{display:flex;justify-content:space-between;align-items:center;margin:6px 0 12px}.secret-lock{padding:24px;text-align:center}.mini-action{border:0;background:var(--surface-2);border-radius:10px;padding:7px 10px;color:inherit}.lesson-history-card{padding:11px;border-bottom:1px solid var(--border)}
@media(max-width:650px){.lesson-grid{grid-template-columns:1fr}.record-toolbar{grid-template-columns:1fr 1fr}.record-toolbar .btn{grid-column:1/-1}.lesson-actions{grid-template-columns:1fr}.record-menu{grid-template-columns:1fr 1fr}}
@media print{body *{visibility:hidden!important}.record-content,.record-content *,.lesson-panel,.lesson-panel *{visibility:visible!important}.record-content,.lesson-panel{position:static!important;border:0!important}.bottom-nav,.topbar,.context-card,.record-menu,.record-toolbar,.page-toolbar,.lesson-actions{display:none!important}.page{display:none!important}.page.active{display:block!important}.records-table{min-width:0;font-size:10pt}.print-title{display:block;visibility:visible!important}}

.records-archive-panel{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px}
.record-archive-card,.lesson-history-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:13px;display:grid;gap:9px}
.record-archive-head,.lesson-history-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.record-archive-actions,.lesson-history-buttons,.dialog-actions,.lesson-history-actions{display:flex;gap:7px;flex-wrap:wrap}
.grade-register-students{max-height:44vh;overflow:auto;display:grid;gap:8px;padding:4px}
.grade-register-row{display:grid;grid-template-columns:1fr 100px;gap:10px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px}
.grade-register-row input{text-align:center;min-height:40px}
.wide-modal{width:min(94vw,820px)}
.lesson-detail-print{display:grid;gap:10px;line-height:1.8}
.lesson-detail-row{border-bottom:1px solid var(--border);padding:7px 0}
.lesson-detail-row b{display:block;margin-bottom:3px}
@media(max-width:520px){.record-toolbar{display:grid;grid-template-columns:1fr 1fr}.record-toolbar select{grid-column:span 1}.record-toolbar .btn{padding:10px 8px;font-size:.78rem}.grade-register-row{grid-template-columns:1fr 82px}.lesson-history-actions{width:100%}.lesson-history-actions .btn{flex:1}}

/* v12 archives + official print */
.archive-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin:10px 0 14px}.btn.danger{background:#b91c1c;color:#fff;border-color:#b91c1c}.record-archive-card b,.lesson-history-card b{font-size:.94rem}.record-archive-card small,.lesson-history-card small{color:var(--muted)}
@media(max-width:650px){.archive-filters{grid-template-columns:1fr 1fr}.archive-filters input:first-child,.archive-filters select{grid-column:1/-1}}


/* v14 - teacher daily hub */
.daily-hub{background:linear-gradient(145deg,#0f172a,#172554);color:#fff;border-radius:26px;padding:18px;margin-bottom:14px;box-shadow:0 18px 45px rgba(15,23,42,.18)}
.daily-hub .muted{color:#cbd5e1}.daily-hub .eyebrow{color:#93c5fd}.daily-hub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.daily-hub-head h2{margin:3px 0 4px;font-size:1.35rem}
.next-lesson-card{margin-top:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:15px}.next-lesson-main h3{margin:7px 0 3px;font-size:1.08rem}.daily-badge{display:inline-flex;border-radius:999px;padding:5px 9px;background:#dbeafe;color:#1e3a8a;font-size:.7rem;font-weight:900}.next-lesson-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.next-lesson-meta span{font-size:.72rem;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.1)}
.next-lesson-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.next-lesson-buttons .btn{flex:1;min-width:90px}.daily-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.daily-action{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;border-radius:16px;padding:10px 6px;display:grid;place-items:center;gap:2px;text-align:center}.daily-action span{font-size:1.2rem}.daily-action b{font-size:.78rem}.daily-action small{font-size:.63rem;color:#cbd5e1}.daily-action.primary-action{background:#2563eb;border-color:#60a5fa}
.tomorrow-prep{margin-top:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}.tomorrow-prep h3{margin:0 0 9px}.tomorrow-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)}.tomorrow-row:last-child{border-bottom:0}.tomorrow-row small{color:#cbd5e1}.tomorrow-row .btn{white-space:nowrap}
@media(max-width:520px){.daily-hub{border-radius:22px;padding:15px}.daily-actions{grid-template-columns:repeat(2,1fr)}.daily-hub-head{align-items:center}.next-lesson-buttons .btn{min-width:0}.stats-grid{margin-top:4px}}

.hub-plan-line{margin:9px 0 2px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.08);font-size:.82rem;line-height:1.6}.hub-plan-line b{color:#bfdbfe}

.lesson-plan-hint{display:grid;gap:3px;padding:11px 12px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}.lesson-plan-hint span{font-size:.78rem;font-weight:800}.lesson-plan-hint small{color:#475569}.lesson-finish-status{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:3px 0}.lesson-finish-status label{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--border,#e2e8f0);border-radius:12px;font-weight:800;font-size:.82rem}.lesson-finish-status input{width:auto}.lesson-quick{flex-wrap:wrap}.lesson-quick .btn{flex:1;min-width:90px}

.intelligence-panel{margin-top:14px;display:grid;gap:10px}.class-memory-card{padding:14px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0)}.memory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.memory-grid>div{padding:10px;border-radius:13px;background:rgba(148,163,184,.09);display:grid;gap:3px}.memory-grid small{color:var(--muted,#64748b);font-size:.72rem}.memory-grid b{font-size:.88rem}.memory-reached{margin:10px 0 0;font-size:.82rem;font-weight:800}.smart-alerts{display:grid;gap:7px}.smart-alert{padding:10px 12px;border-radius:13px;background:#fff7ed;border:1px solid #fed7aa;font-size:.8rem;font-weight:800}.smart-alert.ok{background:#f0fdf4;border-color:#bbf7d0}.weekly-prep{padding:14px;border-radius:18px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);display:grid;gap:8px}.week-prep-day{display:grid;grid-template-columns:90px 1fr;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--border,#e2e8f0)}.week-prep-day span,.week-prep-day small{grid-column:2;font-size:.78rem}.profile-intelligence{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.profile-intelligence>div{padding:10px 7px;border-radius:14px;background:rgba(148,163,184,.1);display:grid;gap:4px;text-align:center}.profile-intelligence small{font-size:.68rem}.profile-intelligence strong{font-size:.9rem}.smart-search{grid-column:1/-1}@media(max-width:420px){.profile-intelligence{grid-template-columns:1fr}.memory-grid{grid-template-columns:1fr 1fr}}

.curriculum-dashboard{display:grid;gap:7px}.curriculum-mini{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:14px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0)}.curriculum-mini>div{display:grid;gap:2px}.curriculum-mini small{color:var(--muted,#64748b)}.progress-track{height:8px;border-radius:99px;background:rgba(148,163,184,.2);overflow:hidden}.progress-track span{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.7}

.toolbar-actions{display:flex;gap:8px;align-items:center}.teacher-book-preview{margin-top:18px;padding:20px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:18px}.teacher-book-head{text-align:center;margin-bottom:16px}.teacher-book-head h2{margin:0 0 6px}.teacher-book-head p{margin:3px 0;color:var(--muted,#64748b)}.teacher-book-sign{display:flex;justify-content:space-between;gap:20px;margin-top:28px;font-weight:800}@media print{body *{visibility:hidden!important}#teacherBookPreview,#teacherBookPreview *{visibility:visible!important}#teacherBookPreview{display:block!important;position:absolute;inset:0;width:100%;margin:0;border:0;border-radius:0;padding:10mm;color:#000;background:#fff}.teacher-book-sign{margin-top:18mm}}

.global-search-panel{position:relative;margin-bottom:12px}.global-search-box{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);box-shadow:0 8px 25px rgba(15,23,42,.05)}.global-search-box input{border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;width:100%;font-size:.9rem}.global-search-results{position:absolute;z-index:30;top:calc(100% + 6px);inset-inline:0;padding:7px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:16px;box-shadow:0 18px 40px rgba(15,23,42,.16);max-height:360px;overflow:auto}.global-search-results button{width:100%;display:flex;gap:10px;align-items:center;text-align:right;padding:10px;border:0;background:transparent;border-radius:11px}.global-search-results button:hover{background:rgba(148,163,184,.12)}.global-search-results button div{display:grid;gap:2px}.global-search-results small{color:var(--muted,#64748b)}

.attendance-history-summary{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}.attendance-history-summary span{padding:7px 10px;border-radius:12px;background:rgba(148,163,184,.12);font-size:.78rem}.history-open-hint{display:block;margin-top:7px;color:var(--muted,#64748b);font-size:.7rem}

.notification-center-card{margin:12px 0;padding:14px;border-radius:18px;background:var(--card,#fff);box-shadow:0 8px 24px rgba(15,23,42,.06)}.notification-center{display:grid;gap:8px}.smart-notification{width:100%;border:0;border-radius:14px;padding:11px 12px;text-align:right;background:rgba(59,130,246,.08);color:inherit}.smart-notification strong,.smart-notification small{display:block}.smart-notification small{margin-top:4px;opacity:.72}.notification-clear{padding:12px;border-radius:14px;background:rgba(34,197,94,.08);font-size:.85rem}.compact-select{max-width:120px}

.notification-actions{display:flex;gap:7px;justify-content:flex-end;margin:0 0 9px}.notification-history{display:grid;gap:7px;margin-top:10px;max-height:360px;overflow:auto}.smart-notification.unread{font-weight:700;box-shadow:inset 3px 0 0 currentColor}
.notification-unread-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;background:#dc2626;color:#fff;font:700 11px/1 sans-serif}
.notification-unread-badge.hidden{display:none}
.notification-center .smart-notification{cursor:pointer}


/* v17 professional cleanup */
@media (max-width:520px){
  .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .daily-hub{margin-top:0}
  .notification-center-card{margin-top:14px}
  .page-toolbar{gap:10px;align-items:flex-start}
  .page-toolbar .toolbar-actions{flex-wrap:wrap;justify-content:flex-end}
  .sticky-action{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  button,.btn,.nav-item,.daily-action,.quick-card{touch-action:manipulation}
}


/* v18 professional UI */
.quick-add-fab{position:fixed;z-index:85;inset-inline-start:max(18px,env(safe-area-inset-left));bottom:calc(78px + env(safe-area-inset-bottom));width:56px;height:56px;border:0;border-radius:18px;background:var(--primary);color:#fff;font-size:1.8rem;line-height:1;box-shadow:0 14px 32px rgba(15,23,42,.24);display:grid;place-items:center}
.quick-add-menu{position:fixed;z-index:84;inset-inline-start:max(18px,env(safe-area-inset-left));bottom:calc(142px + env(safe-area-inset-bottom));width:min(270px,calc(100vw - 36px));padding:8px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 22px 55px rgba(15,23,42,.2);display:grid;gap:4px}
.quick-add-menu.hidden{display:none}.quick-add-menu button{border:0;background:transparent;color:inherit;text-align:right;border-radius:13px;padding:12px 13px;font-weight:800;display:flex;gap:10px;align-items:center}.quick-add-menu button:active{background:var(--surface-2)}
.record-actions-menu{position:relative}.record-actions-menu>summary{list-style:none;cursor:pointer}.record-actions-menu>summary::-webkit-details-marker{display:none}.record-actions-popover{position:absolute;z-index:20;top:calc(100% + 7px);inset-inline-end:0;width:180px;padding:7px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 16px 38px rgba(15,23,42,.16);display:grid;gap:6px}.record-actions-popover .btn{width:100%;justify-content:flex-start}
@media(max-width:520px){.record-menu{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}.record-card{min-width:170px;scroll-snap-align:start}.record-toolbar{grid-template-columns:1fr 1fr}.record-actions-menu{grid-column:1/-1}.record-actions-popover{inset-inline-start:0;inset-inline-end:auto;width:100%}.quick-add-fab{bottom:calc(82px + env(safe-area-inset-bottom))}}


/* v18 lesson + settings organization */
.lesson-page-head{margin-bottom:10px}.lesson-page-head .muted{margin:4px 0 0;font-size:.82rem}
.lesson-step-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 12px}.lesson-step-strip span{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 7px;border-radius:13px;background:var(--surface);border:1px solid var(--border);font-size:.74rem;font-weight:800}.lesson-step-strip b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:.68rem}.lesson-plan-shortcut{margin-bottom:12px}
.settings-sections{display:grid;gap:8px}.settings-group-title{margin:12px 4px 3px;color:var(--muted);font-size:.76rem;font-weight:900}.settings-group-title:first-child{margin-top:0}.settings-sections .settings-grid{margin-bottom:4px}
@media(max-width:420px){.lesson-step-strip{gap:5px}.lesson-step-strip span{font-size:.68rem;padding:8px 4px}.lesson-step-strip b{width:20px;height:20px}.lesson-page-head{align-items:flex-start}}


/* v19 teacher memory + smart tools */
.teacher-memory-note{display:flex;gap:8px;align-items:end;margin-top:10px}.teacher-memory-note label{flex:1}.contact-log-section{border-inline-start:3px solid var(--primary)}
.undo-bar{position:fixed;z-index:120;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));width:min(430px,calc(100vw - 28px));background:#172033;color:#fff;border-radius:16px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 16px 38px rgba(0,0,0,.25)}.undo-bar.hidden{display:none}.undo-bar button{border:0;background:transparent;color:#fff;font-weight:900;text-decoration:underline}
.paper-grades-preview{display:grid;gap:8px;max-height:55vh;overflow:auto}.paper-grades-preview label{display:grid;grid-template-columns:1fr 92px;gap:10px;align-items:center}.paper-review-note{padding:12px;border-radius:14px;background:var(--surface-2);margin-bottom:6px}
@media(max-width:520px){.teacher-memory-note{align-items:stretch;flex-direction:column}.paper-grades-preview{max-height:50vh}}

.memory-teacher-summary{margin-top:10px;padding:11px 12px;border-radius:14px;background:var(--surface-2);display:grid;gap:5px}.memory-teacher-summary b{font-size:.82rem}.memory-teacher-summary span{font-size:.78rem;line-height:1.55}


/* v19.1 mobile reports fix */
.teacher-book-preview-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}.teacher-book-sheet{background:var(--surface,#fff)}.teacher-book-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:520px){
 #reportsPage .report-table-wrap{overflow:visible;border:0;background:transparent}
 #reportsPage .report-table{min-width:0;display:block}
 #reportsPage .report-table thead{display:none}
 #reportsPage .report-table tbody{display:grid;gap:9px}
 #reportsPage .report-table tr{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px}
 #reportsPage .report-table td{border:0!important;padding:3px 0;white-space:normal;font-size:.82rem;min-width:0}
 #reportsPage .report-table td:first-child{grid-column:1/-1;font-weight:900;font-size:.94rem}
 #reportsPage .report-table td:nth-child(2)::before{content:"المعدل: ";color:var(--muted)}
 #reportsPage .report-table td:nth-child(3)::before{content:"الحضور: ";color:var(--muted)}
 #reportsPage .report-table td:nth-child(4)::before{content:"الغياب: ";color:var(--muted)}
 #reportsPage .report-table td:nth-child(5)::before{content:"الاختبارات: ";color:var(--muted)}
 #teacherBookPreview{padding:12px;margin-top:14px;overflow:hidden}
 #teacherBookPreview .teacher-book-sheet{border:0;padding:0}
 #teacherBookPreview .teacher-book-table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
 #teacherBookPreview .report-table{display:table;min-width:620px}
 #teacherBookPreview .report-table thead{display:table-header-group}
 #teacherBookPreview .report-table tbody{display:table-row-group}
 #teacherBookPreview .report-table tr{display:table-row;background:transparent;border:0;padding:0}
 #teacherBookPreview .report-table th,#teacherBookPreview .report-table td{display:table-cell;padding:9px 8px;white-space:nowrap}
 #teacherBookPreview .report-table td::before{content:none!important}
 #teacherBookPreview .teacher-book-sign{font-size:.78rem;gap:10px}
 body:has(#reportsPage.active) #quickAddButton{display:none}
}
@media print{
 .teacher-book-preview-actions{display:none!important}
 #teacherBookPreview .teacher-book-table-scroll{overflow:visible!important;border:0!important}
 #teacherBookPreview .teacher-book-sheet{width:100%!important}
 #teacherBookPreview .report-table{display:table!important;min-width:0!important;width:100%!important}
 #teacherBookPreview .report-table thead{display:table-header-group!important}
 #teacherBookPreview .report-table tbody{display:table-row-group!important}
 #teacherBookPreview .report-table tr{display:table-row!important}
 #teacherBookPreview .report-table th,#teacherBookPreview .report-table td{display:table-cell!important;white-space:nowrap!important}
}


/* v20.1 account management */
.account-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.account-user-list{display:grid;gap:10px;margin-top:10px}
.account-user-card{display:grid;gap:10px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.account-user-main{display:flex;align-items:center;gap:10px;min-width:0}
.account-user-main>div:last-child{display:grid;gap:2px;min-width:0}
.account-user-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-user-main small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-user-state{display:flex;gap:6px;flex-wrap:wrap}
.account-status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:700;border:1px solid var(--border);background:var(--surface)}
.account-status.active{border-color:rgba(22,163,74,.24);background:rgba(22,163,74,.08)}
.account-status.inactive{border-color:rgba(220,38,38,.24);background:rgba(220,38,38,.08)}
.account-status.pending{border-color:rgba(217,119,6,.24);background:rgba(217,119,6,.08)}
.account-user-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:700px){
  .account-user-card{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .account-user-actions{grid-column:1/-1}
}


/* v21 multi-tenant administration */
.input-mini{
  min-width:120px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:inherit;
  font:inherit;
}
#developerManagementGrid .settings-card,
#accountManagementCard,
#teacherAssignmentCard,
#studentAccountLinkCard{
  overflow:hidden;
}
#investorSchoolQuota{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2);
}
#teacherAccountFields,
#studentAccountFields{
  padding:10px 0 0;
  border-top:1px dashed var(--border);
}
@media(max-width:640px){
  .account-user-actions .input-mini{
    width:100%;
  }
}

.assignment-draft-list{display:grid;gap:8px}
.assignment-draft-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.assignment-draft-chip span{font-size:.9rem;font-weight:700}

.audit-row{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.audit-row strong{font-size:.92rem}
.audit-row small{color:var(--muted);line-height:1.6}


/* v21.5 investor finance */
.finance-summary-grid{margin-bottom:14px}
.finance-student-list{display:grid;gap:12px}
.finance-student-card{display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.finance-student-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.finance-student-head>div{display:grid;gap:3px;min-width:0}
.finance-student-head strong{font-size:1rem}
.finance-student-head small{color:var(--muted)}
.finance-money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.finance-money-grid>div{display:grid;gap:3px;padding:10px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border)}
.finance-money-grid small{color:var(--muted);font-size:.78rem}
.finance-money-grid strong{font-size:.92rem}
.finance-dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#studentFinanceHistory{margin-top:12px}
@media(max-width:640px){
  .finance-money-grid{grid-template-columns:1fr}
  .finance-dialog-grid{grid-template-columns:1fr}
}


/* v21.6 role-aware More page */
.role-more-panel{
  margin-bottom:18px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
}
.role-more-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.role-more-card{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:82px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-2);
  color:inherit;
  text-align:right;
  font:inherit;
}
.role-more-card>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  background:var(--surface);
  font-size:1.2rem;
}
.role-more-card>div{
  display:grid;
  gap:3px;
  min-width:0;
}
.role-more-card b{font-size:.95rem}
.role-more-card small{color:var(--muted);line-height:1.5}
@media(max-width:640px){
  .role-more-grid{grid-template-columns:1fr}
}


/* v21.7 remembered login and multi-account switching */
.remember-login-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2);
}
.remember-login-row input{margin-top:4px;flex:0 0 auto}
.remember-login-row>span{display:grid;gap:3px}
.remember-login-row small{color:var(--muted);line-height:1.5}
.remembered-login-accounts{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.remembered-account-list{display:grid;gap:10px;margin-top:10px}
.remembered-account-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface-2);
}
.remembered-account-main{display:flex;align-items:center;gap:10px;min-width:0}
.remembered-account-main>div:last-child{display:grid;gap:2px;min-width:0}
.remembered-account-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.remembered-account-main small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.remembered-account-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
#savedAccountsHint{display:block;margin-top:2px}
@media(max-width:640px){
  .remembered-account-card{align-items:flex-start;flex-direction:column}
  .remembered-account-actions{width:100%}
  .remembered-account-actions .btn{flex:1}
}


/* v21.8 login remember checkbox fix */
.remember-login-row{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:start;
  column-gap:10px;
  text-align:right;
  cursor:pointer;
}
.remember-login-row input[type="checkbox"]{
  width:22px;
  height:22px;
  min-height:22px;
  padding:0;
  margin:2px 0 0;
  border-radius:6px;
  box-shadow:none;
}
.remember-login-row>span{
  min-width:0;
  width:auto;
}
.remember-login-row b,
.remember-login-row small{
  display:block;
  width:auto;
}


/* v21.8 login remember checkbox fix */
.remember-login-row{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:start;
  column-gap:10px;
  text-align:right;
  cursor:pointer;
}
.remember-login-row input[type="checkbox"]{
  width:22px;
  height:22px;
  min-height:22px;
  padding:0;
  margin:2px 0 0;
  border-radius:6px;
  box-shadow:none;
}
.remember-login-row>span{
  min-width:0;
  width:auto;
}
.remember-login-row b,
.remember-login-row small{
  display:block;
  width:auto;
}


/* v21.9 investor collections and payroll */
.investor-page-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-bottom:14px;
}
.investor-finance-kpis{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.finance-risk-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0;
}
.finance-filter-chip{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:999px;
  min-height:38px;
  padding:7px 12px;
  font:inherit;
  font-weight:800;
}
.finance-filter-chip.active{
  border-color:var(--primary);
  background:#eff6ff;
  color:var(--primary);
}
.finance-filter-chip b{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  margin-inline-start:4px;
  border-radius:999px;
  background:var(--surface-2);
  font-size:.75rem;
}
.finance-age-select{
  display:flex;
  align-items:center;
  gap:7px;
  margin-inline-start:auto;
}
.finance-age-select select{
  width:auto;
  min-height:38px;
  padding:7px 10px;
}
.finance-state-wrap{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.compact-empty{
  padding:18px 10px;
}
.staff-period-bar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.staff-period-bar label{
  min-width:180px;
}
.staff-summary-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-bottom:14px;
}
.investor-staff-list{
  display:grid;
  gap:12px;
}
.staff-payroll-card{
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
}
.staff-payroll-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.staff-assignment-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.staff-assignment-tags span{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}
.payroll-history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.payroll-history-item>div{
  display:grid;
  gap:3px;
}
@media(max-width:900px){
  .investor-finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .staff-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .investor-page-actions .btn{flex:1}
  .finance-age-select{width:100%;margin-inline-start:0;justify-content:space-between}
  .finance-age-select select{flex:1}
  .staff-period-bar{align-items:stretch;flex-direction:column}
  .staff-period-bar label{min-width:0}
  .staff-summary-grid{grid-template-columns:1fr 1fr}
  .staff-payroll-head{align-items:flex-start}
}


/* v22 investor executive suite */
.investor-executive{
  margin:14px 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(135deg,var(--surface),var(--surface-2));
}
.investor-executive-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.investor-executive-grid article{
  display:grid;
  gap:4px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.investor-executive-grid small{color:var(--muted)}
.investor-executive-grid strong{font-size:1rem}
.investor-executive-grid .net-card{border-color:rgba(37,99,235,.35)}
.investor-smart-alerts{display:grid;gap:7px;margin-top:10px}
.investor-alert{padding:9px 11px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:.86rem;font-weight:700}
.investor-cashflow-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.net-kpi{border-color:rgba(37,99,235,.35)!important}
.expense-list{display:grid;gap:10px}
.expense-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
}
.expense-card>div:first-child{display:grid;gap:3px}
.expense-card small{color:var(--muted)}
.history-actions{margin-inline-start:auto}
.staff-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.staff-filter-toolbar{margin-top:0}
@media(max-width:760px){
  .investor-executive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .investor-cashflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .staff-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .expense-card{grid-template-columns:1fr auto}
  .expense-card .account-user-actions{grid-column:1/-1}
}
@media(max-width:480px){
  .investor-executive-grid,.investor-cashflow-grid{grid-template-columns:1fr}
}


/* v22.1 compact investor student/teacher lists */
.compact-disclosure-card{
  padding:0;
  overflow:hidden;
}
.disclosure-summary{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:right;
  cursor:pointer;
  padding:12px 14px;
}
.disclosure-summary:hover{background:var(--surface-2)}
.disclosure-identity{min-width:0}
.disclosure-identity>div:last-child{min-width:0}
.disclosure-identity strong,
.disclosure-identity small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.compact-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  font-size:.92rem;
}
.disclosure-summary-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
.disclosure-quick-value{
  color:var(--text);
  font-size:.82rem;
  white-space:nowrap;
}
.disclosure-chevron{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  transition:transform .18s ease;
}
.compact-disclosure-card.open .disclosure-chevron{transform:rotate(180deg)}
.disclosure-body{
  display:grid;
  gap:12px;
  padding:0 14px 14px;
  border-top:1px solid var(--border);
}
.disclosure-body.hidden{display:none}
.disclosure-meta-line{
  padding-top:10px;
  color:var(--muted);
  font-size:.82rem;
}
.finance-student-card.compact-disclosure-card,
.staff-payroll-card.compact-disclosure-card{gap:0}
@media(max-width:640px){
  .disclosure-summary{align-items:center}
  .disclosure-summary-right{gap:6px}
  .disclosure-quick-value{display:none}
  .finance-state-wrap{justify-content:flex-end}
  .disclosure-body .finance-money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* v22.2 investor command center */
.investor-subsection-head{
  display:flex;align-items:end;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border)
}
.investor-subsection-head h4{margin:2px 0 0;font-size:1rem}
.investor-today-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px
}
.investor-today-grid article{
  display:grid;gap:4px;padding:10px;border:1px solid var(--border);
  border-radius:14px;background:var(--surface)
}
.investor-today-grid small{color:var(--muted);font-size:.72rem}
.investor-today-grid strong{font-size:.96rem}
.investor-insight-card{
  margin-top:10px;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden
}
.investor-insight-card>summary{
  list-style:none;cursor:pointer;padding:12px 14px;display:grid;
  grid-template-columns:auto 1fr;gap:2px 9px;align-items:center
}
.investor-insight-card>summary::-webkit-details-marker{display:none}
.investor-insight-card>summary>span{font-size:1.2rem;grid-row:1/3}
.investor-insight-card>summary>b{font-size:.9rem}
.investor-insight-card>summary>small{color:var(--muted);font-size:.72rem}
.investor-school-comparison,.investor-activity-list{
  display:grid;gap:8px;padding:0 12px 12px
}
.school-comparison-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;
  gap:10px;align-items:center;padding:10px 11px;border:1px solid var(--border);
  border-radius:14px;background:var(--surface-2)
}
.school-comparison-card>div:first-child{display:grid;gap:3px}
.school-comparison-card small{color:var(--muted)}
.school-comparison-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.school-comparison-metrics span{
  display:grid;gap:2px;padding:7px 8px;border-radius:10px;background:var(--surface)
}
.school-comparison-metrics small{font-size:.66rem}
.school-comparison-metrics b{font-size:.78rem;white-space:nowrap}
.investor-activity-row{
  display:grid;gap:4px;padding:10px 11px;border:1px solid var(--border);
  border-radius:13px;background:var(--surface-2)
}
.investor-activity-row strong{font-size:.84rem}
.investor-activity-row small{color:var(--muted);font-size:.72rem;line-height:1.5}
.investor-monthly-report-sheet{
  margin:16px 0;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface)
}
.monthly-report-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--border)
}
.monthly-report-head h3{margin:2px 0}
.monthly-report-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px
}
.monthly-report-grid article{
  display:grid;gap:4px;padding:10px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--border)
}
.monthly-report-grid small{color:var(--muted);font-size:.7rem}
.monthly-report-grid strong{font-size:.88rem}
.monthly-report-grid .monthly-net{border-color:rgba(37,99,235,.35)}
.monthly-report-foot{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)
}
.monthly-report-foot span{
  font-size:.74rem;padding:6px 8px;border-radius:999px;background:var(--surface-2)
}
@media(max-width:760px){
  .investor-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .school-comparison-card{grid-template-columns:1fr}
  .school-comparison-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .school-comparison-card .btn{width:100%}
  .monthly-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .investor-today-grid{grid-template-columns:1fr 1fr}
  .school-comparison-metrics{grid-template-columns:1fr 1fr 1fr}
  .monthly-report-head{display:grid}
}
@media print{
  body.printing-investor-report *{visibility:hidden!important}
  body.printing-investor-report #investorMonthlyReportSheet,
  body.printing-investor-report #investorMonthlyReportSheet *{visibility:visible!important}
  body.printing-investor-report #investorMonthlyReportSheet{
    position:absolute;inset:0;width:100%;margin:0;padding:12mm;border:0;border-radius:0;background:#fff;color:#000
  }
  body.printing-investor-report #investorMonthlyReportSheet .monthly-report-grid{grid-template-columns:repeat(4,1fr)}
}


/* v22.3 investor finishing layer */
.investor-command-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px
}
.investor-command-copy{min-width:0;display:grid;gap:4px}
.investor-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.investor-title-line .eyebrow{margin:0}
.investor-command-copy h3{margin:0;font-size:1.1rem}
.investor-narrative{margin:0;color:var(--muted);font-size:.82rem;line-height:1.65}
.investor-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.investor-alert-badge,.investor-status-pill{
  display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 9px;
  border-radius:999px;border:1px solid var(--border);font-size:.7rem;font-weight:900;background:var(--surface)
}
.investor-alert-badge:not(.clear){background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.investor-alert-badge.clear{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.investor-status-pill.stable{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.investor-status-pill.watch{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.investor-status-pill.attention{background:#fef2f2;border-color:#fecaca;color:#991b1b}
#investorFavoriteSchoolButton.active{font-weight:900}
.investor-customize{position:relative}
.investor-customize>summary{list-style:none;cursor:pointer}
.investor-customize>summary::-webkit-details-marker{display:none}
.investor-customize-popover{
  position:absolute;z-index:40;top:calc(100% + 7px);inset-inline-end:0;width:min(280px,82vw);
  padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface);
  box-shadow:0 18px 42px rgba(15,23,42,.16);display:grid;gap:8px
}
.investor-customize-popover>b{font-size:.82rem;margin-bottom:2px}
.investor-customize-popover label{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;background:var(--surface-2);font-size:.78rem
}
.investor-customize-popover input{width:17px;height:17px}
.investor-control-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
  padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface)
}
.investor-period-switch{display:flex;align-items:center;gap:5px}
.investor-period-switch button{
  border:0;border-radius:10px;padding:7px 10px;background:transparent;color:var(--muted);
  font:inherit;font-size:.74rem;font-weight:800;cursor:pointer
}
.investor-period-switch button.active{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.investor-refresh-meta{display:flex;align-items:flex-end;gap:8px;flex-direction:column}
.investor-refresh-meta span{font-size:.76rem;font-weight:900}
.investor-refresh-meta small{font-size:.66rem;color:var(--muted)}
.investor-quick-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:10px
}
.investor-quick-strip button{
  border:1px solid var(--border);border-radius:13px;background:var(--surface);color:inherit;
  min-height:46px;padding:8px;display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;cursor:pointer
}
.investor-quick-strip button:hover{background:var(--surface-2)}
.investor-quick-strip span{font-size:1rem}
.investor-quick-strip b{font-size:.75rem}
.investor-trend{
  width:max-content;max-width:100%;padding:3px 6px;border-radius:999px;font-size:.64rem;font-weight:900;
  background:var(--surface-2);color:var(--muted)
}
.investor-trend.up{background:#eff6ff;color:#1d4ed8}
.investor-trend.down{background:#f8fafc;color:#475569}
.investor-alert-ok{background:#f0fdf4!important;border-color:#bbf7d0!important;color:#166534}
.investor-pref-hidden{display:none!important}
@media(max-width:720px){
  .investor-command-head{display:grid}
  .investor-head-actions{justify-content:flex-start}
  .investor-customize-popover{inset-inline-start:0;inset-inline-end:auto}
  .investor-control-bar{align-items:stretch;flex-direction:column}
  .investor-refresh-meta{align-items:flex-start;flex-direction:row;justify-content:space-between}
  .investor-period-switch{display:grid;grid-template-columns:repeat(3,1fr)}
  .investor-period-switch button{width:100%}
  .investor-quick-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){
  .investor-head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .investor-head-actions>*{min-width:0}
  .investor-alert-badge{width:100%}
  #investorFavoriteSchoolButton{width:100%}
}

/* v22.4 compact investor activity */
.investor-activity-collapsible{margin-top:10px}
.investor-activity-toggle{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  color:inherit;text-align:start;font:inherit;cursor:pointer
}
.investor-activity-toggle:hover{background:var(--surface-2)}
.investor-activity-toggle-icon{font-size:1.1rem}
.investor-activity-toggle-copy{display:grid;gap:3px;min-width:0}
.investor-activity-toggle-copy b{font-size:.92rem}
.investor-activity-toggle-copy small{font-size:.7rem;color:var(--muted);font-weight:500}
.investor-activity-toggle-arrow{font-size:1.25rem;transition:transform .2s ease;color:var(--muted)}
.investor-activity-toggle.open .investor-activity-toggle-arrow{transform:rotate(180deg)}
.investor-activity-panel{padding-top:8px}


/* v22.5 mobile investor layout polish */
@media(max-width:720px){
  .investor-command-head{gap:10px;margin-bottom:10px}
  .investor-command-copy{gap:3px}
  .investor-command-copy h3{font-size:1.08rem}
  .investor-narrative{font-size:.76rem;line-height:1.75}
  .investor-head-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px;width:100%;align-items:stretch
  }
  .investor-alert-badge,
  #investorFavoriteSchoolButton{
    width:100%;min-height:42px;border-radius:13px
  }
  .investor-customize{
    grid-column:1/-1;width:100%
  }
  .investor-customize>summary{
    width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;
    border-radius:13px
  }
  .investor-control-bar{
    gap:8px;padding:9px;margin:0 0 9px;border-radius:15px
  }
  .investor-period-switch{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;width:100%
  }
  .investor-period-switch button{
    min-height:38px;padding:7px 5px;border-radius:11px;font-size:.78rem
  }
  .investor-refresh-meta{
    width:100%;display:flex;flex-direction:row;align-items:center;
    justify-content:space-between;gap:8px;padding:0 3px
  }
  .investor-refresh-meta span{font-size:.7rem}
  .investor-refresh-meta small{font-size:.65rem}
  .investor-quick-strip{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;margin:0 0 12px
  }
  .investor-quick-strip button{
    width:100%;min-width:0;min-height:52px;padding:8px 6px;
    border-radius:14px;display:flex;flex-direction:column;gap:2px
  }
  .investor-quick-strip span{font-size:1.08rem;line-height:1.1}
  .investor-quick-strip b{font-size:.78rem;line-height:1.25;white-space:nowrap}
  .investor-executive-grid{gap:8px}
  .investor-executive-grid article{min-width:0}
}
@media(max-width:390px){
  .investor-head-actions{grid-template-columns:1fr 1fr!important}
  .investor-customize{grid-column:1/-1}
  .investor-quick-strip{grid-template-columns:1fr 1fr!important}
}


/* v22.6 hard mobile viewport containment */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app-shell,.topbar,.context-card,.content,.page{max-width:100%;min-width:0}
img,svg,video,canvas{max-width:100%}
.context-grid>*,
.context-card label,
.context-card select,
.content>*,
.page>*{min-width:0}
@media(max-width:699px){
  .app-shell{width:100%;overflow-x:clip}
  .topbar{width:100%;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
  .context-card{
    width:auto;max-width:none;
    margin-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));
    padding:12px
  }
  .context-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .context-card select{width:100%;max-width:100%;min-width:0}
  .content{
    width:100%;max-width:100%;
    padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));
    margin:0
  }
  .page{width:100%;max-width:100%;overflow-x:clip}
  .hero,.investor-executive,.management-panel,.section-card{max-width:100%;min-width:0}
}
@media(max-width:430px){
  .context-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}


/* v22.7 prevent iOS form-focus auto zoom */
@media(max-width:699px){
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    font-size:16px!important;
  }
  .context-card select,
  .login-card input,
  .login-card select{
    font-size:16px!important;
  }
}


/* v22.8 auto-centered bottom navigation */
.bottom-nav{
  display:flex;
  align-items:stretch;
  justify-content:center;
  grid-template-columns:none;
}
.bottom-nav>.nav-item{
  flex:1 1 0;
  min-width:0;
  max-width:130px;
}
@media(max-width:699px){
  .bottom-nav{
    width:100%;
    max-width:100%;
    left:0;
    right:0;
    transform:none;
    justify-content:center;
  }
  .bottom-nav>.nav-item{
    flex:1 1 0;
    max-width:120px;
  }
}


/* v22.9 exact dynamic bottom-nav centering */
.bottom-nav{
  display:grid!important;
  grid-template-columns:repeat(var(--visible-nav-count,4),minmax(0,1fr))!important;
  justify-content:stretch!important;
}
.bottom-nav>.nav-item{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:none!important;
}


/* v22.10 bottom nav: visible items center themselves, no column count dependency */
@media(max-width:699px){
  .bottom-nav{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:0!important;
    width:100vw!important;
    max-width:100vw!important;
    left:0!important;
    right:0!important;
    margin:0!important;
    transform:none!important;
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
  }
  .bottom-nav>.nav-item:not(.hidden){
    display:grid!important;
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:120px!important;
    margin:0!important;
  }
  .bottom-nav>.nav-item.hidden{display:none!important}
}


/* Management dashboard: professional mobile action cards */
#managementDashboard > .daily-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
#managementDashboard > .daily-actions .daily-action{
  min-height:92px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 6px 18px rgba(15,23,42,.055);
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
  place-items:initial;
  align-items:center;
  text-align:right;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#managementDashboard > .daily-actions .daily-action span{
  grid-row:1 / 3;
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  font-size:1.15rem;
  line-height:1;
}
#managementDashboard > .daily-actions .daily-action b{
  align-self:end;
  font-size:.82rem;
  line-height:1.35;
  color:var(--text);
}
#managementDashboard > .daily-actions .daily-action small{
  align-self:start;
  font-size:.68rem;
  line-height:1.35;
  color:var(--muted);
}
#managementDashboard > .daily-actions .daily-action:active{
  transform:scale(.975);
  box-shadow:0 3px 10px rgba(15,23,42,.08);
  border-color:var(--primary);
}
@media(max-width:380px){
  #managementDashboard > .daily-actions{gap:8px}
  #managementDashboard > .daily-actions .daily-action{
    min-height:86px;
    padding:10px;
    grid-template-columns:38px 1fr;
    column-gap:8px;
  }
  #managementDashboard > .daily-actions .daily-action span{width:38px;height:38px;border-radius:12px}
}


/* Student profile: compact tabbed mobile experience */
.profile-card{overflow:hidden;display:flex;flex-direction:column;max-height:min(88dvh,820px)}
.profile-card>.modal-head{flex:0 0 auto;margin-bottom:8px}
.profile-tabs{flex:0 0 auto;display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 1px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.profile-tabs::-webkit-scrollbar{display:none}
.profile-tab{flex:0 0 auto;scroll-snap-align:start;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:9px 14px;font-size:.78rem;font-weight:800;white-space:nowrap}
.profile-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.18)}
.profile-tab-panel{display:none;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 1px 12px}
.profile-tab-panel.active{display:block}
.profile-tab-panel[data-profile-panel="overview"]{overflow-y:auto}
.profile-card .profile-section{margin-top:0}
@media(max-width:520px){
  .profile-modal{padding:10px}
  .profile-card{width:100%;max-height:calc(100dvh - 28px);border-radius:24px;padding:14px}
  .profile-card>.modal-head{position:relative}
  .profile-tabs{margin-inline:-2px}
  .profile-tab{padding:9px 13px}
  .profile-tab-panel{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}


/* Smart header account popover */
.header-popover{position:relative}
.header-popover>summary{list-style:none;cursor:pointer}
.header-popover>summary::-webkit-details-marker{display:none}
.header-popover-card{position:absolute;inset-inline-start:auto;inset-inline-end:0;top:calc(100% + 8px);width:min(82vw,310px);box-sizing:border-box;max-height:70dvh;overflow-y:auto;overflow-x:hidden;z-index:70;padding:10px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 18px 50px rgba(15,23,42,.18)}
.account-popover-card{display:grid;gap:5px}
.account-popover-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;border-bottom:1px solid var(--border);margin-bottom:3px}
.account-popover-head>div{display:grid;gap:2px;min-width:0}
.account-popover-head b{font-size:.92rem;overflow-wrap:anywhere}
.account-popover-head small{font-size:.72rem}
.account-avatar{width:42px;height:42px;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;font-size:1.15rem}
.account-popover-card>button{width:100%;border:0;background:transparent;color:var(--text);border-radius:13px;padding:12px;text-align:right;font:inherit;font-weight:800;display:flex;align-items:center;gap:9px}
.account-popover-card>button:active{background:var(--surface-2)}
.account-popover-card>button.account-popover-danger{color:#dc2626}


/* Manager records are supervisory/read-only */
body.manager-records-readonly #recordsPage #recordContent input,
body.manager-records-readonly #recordsPage #recordContent textarea,
body.manager-records-readonly #recordsPage #recordContent [contenteditable="true"]{pointer-events:none}
body.manager-records-readonly #recordsPage #recordContent button:not(.view-record):not(.open-profile){display:none!important}
body.manager-records-readonly #recordsPage .teacher-record-edit{display:none!important}
body.manager-records-readonly #recordTeacherSelect{grid-column:1/-1}


/* Teacher dashboard: compact professional action cards */
#teacherDashboard>.daily-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
#teacherDashboard .daily-action{
  min-height:88px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 6px 18px rgba(15,23,42,.055);
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
  place-items:initial;
  align-items:center;
  text-align:right;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#teacherDashboard .daily-action span{
  grid-row:1/3;
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  font-size:1.12rem;
  line-height:1;
}
#teacherDashboard .daily-action b{
  align-self:end;
  color:var(--text);
  font-size:.82rem;
  line-height:1.35;
}
#teacherDashboard .daily-action small{
  align-self:start;
  color:var(--muted);
  font-size:.67rem;
  line-height:1.35;
}
#teacherDashboard .daily-action:active{
  transform:scale(.975);
  border-color:var(--primary);
  box-shadow:0 3px 10px rgba(15,23,42,.08);
}
@media(max-width:380px){
  #teacherDashboard>.daily-actions{gap:8px}
  #teacherDashboard .daily-action{min-height:84px;padding:10px;grid-template-columns:38px minmax(0,1fr);column-gap:8px}
  #teacherDashboard .daily-action span{width:38px;height:38px;border-radius:12px}
}


/* Manager weekly schedule builder */
.schedule-manager-tools{margin:0 0 14px;padding:14px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 6px 18px rgba(15,23,42,.05)}
.schedule-manager-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.schedule-manager-head>div{display:grid;gap:3px}
.schedule-manager-head b{font-size:.9rem}
.schedule-manager-head small{color:var(--muted);font-size:.7rem;line-height:1.5}
.schedule-manager-head>span{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:var(--surface-2);color:var(--primary);font-size:.68rem;font-weight:900}
.schedule-manager-actions{display:flex;gap:8px;margin-top:12px}
.schedule-manager-actions .btn{flex:1}


/* Students page local class selector */
.students-class-picker{margin:0 0 14px;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface);display:grid;gap:7px}
.students-class-picker label{display:grid;gap:7px;font-weight:800}
.students-class-picker label span{font-size:.78rem;color:var(--muted)}
.students-class-picker select{width:100%;min-height:50px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);color:var(--text);padding:0 12px;font:inherit;font-weight:800}
.students-class-picker small{color:var(--muted);font-size:.7rem}


/* Records hub: compact fixed grid, no horizontal carousel */
#recordsPage .page-toolbar{align-items:center}
#recordsPage #printRecordButton{width:44px;height:44px;padding:0;border-radius:14px;font-size:0;display:grid;place-items:center}
#recordsPage #printRecordButton::before{content:none!important;display:none!important}
#recordsPage .record-menu{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  overflow:visible;
  padding:0;
  margin:0 0 14px;
}
#recordsPage .record-card{
  min-width:0;
  min-height:92px;
  padding:12px;
  border-radius:18px;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
  box-shadow:0 5px 16px rgba(15,23,42,.045);
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
#recordsPage .record-card span{
  grid-row:1/3;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:var(--surface-2);
  font-size:1.15rem;
}
#recordsPage .record-card b{font-size:.79rem;line-height:1.35;align-self:end}
#recordsPage .record-card small{font-size:.65rem;line-height:1.35;align-self:start}
#recordsPage .record-card.active{
  outline:0;
  border-color:var(--primary);
  background:var(--surface);
  box-shadow:0 7px 20px rgba(15,23,42,.075);
}
#recordsPage .record-card.active span{background:rgba(37,99,235,.09)}
#recordsPage .record-card:active{transform:scale(.98)}
#recordsPage .record-toolbar{
  padding:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
@media(max-width:520px){
  #recordsPage .record-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding-bottom:0}
  #recordsPage .record-card{min-width:0}
}


/* Large-class record student picker */
.record-student-picker{position:relative;min-width:0}
.record-student-picker-button{width:100%;min-height:50px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);font:inherit;font-weight:800;padding:0 14px;display:flex;align-items:center;gap:8px;justify-content:flex-start}
.record-student-picker-panel{position:absolute;inset-inline:0;top:calc(100% + 7px);z-index:80;background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:9px;box-shadow:0 18px 45px rgba(15,23,42,.16);max-height:320px;overflow:auto}
.record-student-picker-panel input{width:100%;min-height:44px;border:1px solid var(--border);border-radius:12px;padding:0 12px;font:inherit;margin-bottom:7px}
.record-student-option{width:100%;border:0;background:transparent;color:var(--text);padding:11px 10px;border-radius:11px;text-align:right;font:inherit;font-weight:700}
.record-student-option:active,.record-student-option.active{background:var(--surface-2)}
.records-archive-collapsible{padding:0;overflow:visible}
.records-archive-collapsible>summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.records-archive-collapsible>summary::-webkit-details-marker{display:none}
.records-archive-collapsible>summary h3,.records-archive-collapsible>summary p{margin:0}
.records-archive-collapsible>summary span{font-size:.7rem;color:var(--muted);font-weight:800}
.records-archive-collapsible[open]>summary span{font-size:0}
.records-archive-collapsible[open]>summary span::after{content:"إغلاق الأرشيف";font-size:.7rem}
.records-archive-body{padding:0 14px 14px}


/* Student dashboard: compact professional action cards */
#studentDashboard{padding:16px}
#studentDashboard>.section-head{margin-bottom:12px}
#studentDashboard>.daily-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0;
}
#studentDashboard .daily-action{
  min-height:86px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:18px;
  padding:12px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  place-items:initial;
  align-items:center;
  column-gap:10px;
  row-gap:2px;
  text-align:right;
  box-shadow:0 5px 16px rgba(15,23,42,.045);
}
#studentDashboard .daily-action span{
  grid-row:1/3;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:var(--surface-2);
  font-size:1.15rem;
}
#studentDashboard .daily-action b{font-size:.82rem;line-height:1.25;align-self:end}
#studentDashboard .daily-action small{font-size:.65rem;line-height:1.3;color:var(--muted);align-self:start}
#studentDashboard .daily-action:active{transform:scale(.98);background:var(--surface-2)}
#studentDashboard .daily-action[data-go="schedule"]{grid-column:1/-1;min-height:78px}
@media(max-width:520px){
  #studentDashboard>.daily-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #studentDashboard .daily-action{min-height:82px;padding:10px;grid-template-columns:38px minmax(0,1fr);column-gap:8px}
  #studentDashboard .daily-action span{width:38px;height:38px;border-radius:12px}
}

/* Student academic search */
#studentDashboard .student-search-panel{margin:0 0 14px;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);box-shadow:none}
.student-search-heading{display:flex;align-items:center;gap:9px;margin-bottom:9px;text-align:right}
.student-search-heading>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--surface);border:1px solid var(--border)}
.student-search-heading div{display:grid;gap:1px}.student-search-heading b{font-size:.82rem}.student-search-heading small{font-size:.64rem;color:var(--muted)}
#studentDashboard .student-search-panel .global-search-box{min-height:48px;border-radius:14px;background:var(--surface)}
#studentDashboard .student-search-panel .global-search-results{z-index:90}


/* v22.33 Classroom feed + school announcements */
.classroom-toolbar{margin-bottom:12px}
.classroom-filter-bar{position:sticky;top:0;z-index:8;display:flex;gap:8px;overflow-x:auto;padding:8px 0 12px;background:var(--bg);scrollbar-width:none}
.classroom-filter-bar::-webkit-scrollbar{display:none}
.classroom-filter{flex:0 0 auto;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:9px 14px;font:inherit;font-size:.75rem;font-weight:800}
.classroom-filter.active{background:var(--text);border-color:var(--text);color:var(--surface)}
.classroom-pinned{display:grid;gap:10px;margin-bottom:14px;padding:12px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.classroom-pinned-title{display:flex;align-items:center;gap:7px;font-size:.78rem}
.classroom-feed{display:grid;gap:10px}
.classroom-card{border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:14px;box-shadow:0 6px 18px rgba(15,23,42,.045);display:grid;gap:11px}
.classroom-card header,.announcement-manage-card header{display:flex;align-items:flex-start;gap:10px}
.feed-icon{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);font-size:1.12rem}
.classroom-card header>div,.announcement-manage-card header>div{min-width:0;display:grid;gap:3px}
.classroom-card h3,.announcement-manage-card h3{margin:0;font-size:.96rem;line-height:1.45;color:var(--text)}
.feed-label{font-size:.68rem;color:var(--muted);font-weight:800}
.feed-pin{display:inline-flex;align-items:center;margin-inline-start:5px;padding:3px 7px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.62rem}
.announcement-body{margin:0;white-space:pre-wrap;line-height:1.8;color:var(--text);font-size:.86rem}
.classroom-card footer,.announcement-manage-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.66rem;border-top:1px solid var(--border);padding-top:9px}
.feed-edited{font-size:.62rem}
.announcement-urgent{border-inline-start:4px solid #ef4444}
.announcement-closure{border-inline-start:4px solid #d97706}
.announcement-academic{border-inline-start:4px solid #2563eb}
.assignment-feed-card{border-inline-start:4px solid #16a34a}
.assignment-feed-card .feed-label{color:var(--muted)}
.announcement-manager-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.announcement-manager-note>span{font-size:1.1rem}
.announcement-manager-note>div{display:grid;gap:3px}
.announcement-manager-note b{font-size:.82rem}
.announcement-manager-note small{font-size:.68rem;color:var(--muted);line-height:1.5}
.announcement-manage-list{display:grid;gap:10px}
.announcement-manage-card{border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:14px;display:grid;gap:10px;box-shadow:0 6px 18px rgba(15,23,42,.04)}
.announcement-manage-card>p{margin:0;white-space:pre-wrap;line-height:1.75;font-size:.84rem}
.announcement-audience-copy{padding:8px 10px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:.7rem;font-weight:700}
.announcement-manage-actions{display:flex;gap:8px}
.announcement-manage-actions .btn{flex:1}
.announcement-manage-actions .danger{
  background:#fff;
  color:#b91c1c;
  border:1px solid #fecaca;
}
.announcement-manage-actions .danger:hover,
.announcement-manage-actions .danger:focus{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fca5a5;
}
.announcement-composer{max-height:min(88dvh,860px);overflow:auto}
.announcement-audience{border:1px solid var(--border);border-radius:16px;padding:10px 12px;display:grid;gap:8px}
.announcement-audience legend{padding:0 6px;font-size:.72rem;color:var(--muted);font-weight:800}
.announcement-audience label{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800}
.announcement-class-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}
.announcement-class-head b{font-size:.78rem}
.announcement-class-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:230px;overflow:auto;padding:2px}
.announcement-class-option{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:14px;padding:10px;background:var(--surface)}
.announcement-class-option>span{min-width:0;display:grid;gap:2px}
.announcement-class-option b{font-size:.72rem;line-height:1.35}
.announcement-class-option small{font-size:.62rem;color:var(--muted)}
.announcement-compose-hint{padding:10px 12px;border-radius:13px;background:var(--surface-2);color:var(--muted);font-size:.68rem;line-height:1.6}
@media(max-width:520px){
  .classroom-card,.announcement-manage-card{border-radius:18px;padding:12px}
  .classroom-card footer,.announcement-manage-card footer{align-items:flex-start}
  .announcement-class-picker{grid-template-columns:1fr}
  .announcement-composer{max-height:calc(100dvh - 30px)}
}

.exam-feed-card{border-inline-start:4px solid #7c3aed}
.exam-feed-card .feed-label{color:var(--muted)}


/* v22.34 announcement composer mobile polish */
.announcement-composer{width:min(94vw,620px);padding:18px;gap:14px}
.announcement-composer>.modal-head{margin-bottom:2px}
.announcement-composer>label{display:grid;gap:7px}
.announcement-composer>label>span{font-size:.76rem;font-weight:850;color:var(--text)}
.announcement-composer select,.announcement-composer input[type="text"],.announcement-composer input:not([type]),.announcement-composer textarea{
  width:100%;border:1px solid var(--border);border-radius:15px;background:var(--surface);
  min-height:50px;padding:11px 13px;font:inherit;color:var(--text);box-sizing:border-box
}
.announcement-composer textarea{min-height:128px;resize:vertical;line-height:1.7}
.announcement-target-section{display:grid;gap:10px;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.announcement-section-title{display:flex;align-items:center;gap:9px}
.announcement-section-title>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--surface)}
.announcement-section-title>div{display:grid;gap:2px}
.announcement-section-title b{font-size:.8rem}.announcement-section-title small{font-size:.64rem;color:var(--muted)}
.announcement-audience{border:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.announcement-audience-choice{position:relative;display:flex!important;align-items:center!important;gap:9px;padding:11px!important;border:1px solid var(--border);border-radius:14px;background:var(--surface);min-height:64px}
.announcement-audience-choice input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:currentColor}
.announcement-audience-choice>span{display:grid;gap:2px;min-width:0}
.announcement-audience-choice b{font-size:.72rem;line-height:1.35}.announcement-audience-choice small{font-size:.61rem;color:var(--muted);line-height:1.35}
.announcement-audience-choice:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.announcement-class-wrap{display:grid;gap:8px;padding-top:2px}
.announcement-class-head>div{display:grid;gap:2px}.announcement-class-head small{font-size:.62rem;color:var(--muted)}
.announcement-class-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:210px;padding:0}
.announcement-class-option{min-height:52px;padding:9px 10px;background:var(--surface);border-radius:13px}
.announcement-class-option input{width:18px;height:18px;margin:0;flex:0 0 auto}
.announcement-class-option:has(input:checked){border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.announcement-pin-section{display:grid;gap:8px}
.announcement-pin-toggle{display:flex!important;align-items:center!important;justify-content:space-between;gap:12px;padding:12px 14px!important;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.announcement-pin-toggle>span{display:grid;gap:2px}.announcement-pin-toggle b{font-size:.76rem}.announcement-pin-toggle small{font-size:.62rem;color:var(--muted)}
.announcement-pin-toggle input{width:20px;height:20px;margin:0}
.announcement-pin-date{display:grid!important;gap:6px}.announcement-pin-date.hidden{display:none!important}
.announcement-compose-hint{margin:0;padding:10px 12px;border-radius:13px;font-size:.65rem}
#saveAnnouncementButton{position:sticky;bottom:0;z-index:3;min-height:52px;box-shadow:0 -8px 20px rgba(255,255,255,.88)}
@media(max-width:520px){
 .announcement-composer{width:calc(100vw - 22px);max-height:calc(100dvh - 24px);padding:14px;border-radius:22px}
 .announcement-audience{grid-template-columns:1fr}
 .announcement-class-picker{grid-template-columns:1fr}
 .announcement-composer textarea{min-height:116px}
}


/* v22.35 announcement composer layout fix */
#announcementDialog{width:min(94vw,620px);max-width:620px}
#announcementDialog .announcement-composer{width:100%;max-width:none;box-sizing:border-box;direction:rtl;text-align:right;overflow-x:hidden}
#announcementDialog .modal-head{direction:rtl}
#announcementDialog .modal-head .icon-button{margin-inline-start:auto;flex:0 0 auto}
#announcementDialog .announcement-target-section{width:100%;box-sizing:border-box;overflow:hidden}
#announcementDialog .announcement-section-title{direction:rtl;justify-content:flex-start}
#announcementDialog .announcement-audience{width:100%;box-sizing:border-box}
#announcementDialog .announcement-audience-choice{width:100%;box-sizing:border-box;overflow:hidden;direction:rtl}
#announcementDialog .announcement-audience-choice>span{overflow:hidden}
#announcementDialog .announcement-class-head{direction:rtl;width:100%;box-sizing:border-box}
#announcementDialog .announcement-class-picker{width:100%;box-sizing:border-box;overflow-x:hidden}
#announcementDialog .announcement-class-option{width:100%;box-sizing:border-box;direction:rtl;overflow:hidden}
#announcementDialog .announcement-pin-section{width:100%;box-sizing:border-box}
#announcementDialog .announcement-pin-toggle{width:100%;box-sizing:border-box;direction:rtl}
#announcementDialog input,#announcementDialog textarea,#announcementDialog select{max-width:100%;box-sizing:border-box}
.announcement-body-field{position:relative}
.announcement-body-field>small{font-size:.78rem;color:var(--muted);line-height:1.5}
.announcement-mention-options{display:grid;position:relative;z-index:2;width:100%;max-height:216px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:5px}
.announcement-mention-options.hidden{display:none}
.announcement-mention-options button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%;padding:8px 10px;text-align:right;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;cursor:pointer}
.announcement-mention-options button:hover,.announcement-mention-options button:focus-visible{background:var(--surface-2);outline:2px solid var(--border)}
.announcement-mention-options b{font-size:.9rem}.announcement-mention-options small{font-size:.76rem;color:var(--muted)}
@media(max-width:520px){
 #announcementDialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);margin:auto}
 #announcementDialog .announcement-composer{width:100%;max-height:calc(100dvh - 28px);padding:16px;border-radius:24px;gap:13px}
 #announcementDialog .announcement-audience{grid-template-columns:1fr}
 #announcementDialog .announcement-audience-choice{min-height:58px;padding:10px 12px!important}
 #announcementDialog .announcement-class-picker{grid-template-columns:1fr;max-height:190px}
 #announcementDialog .announcement-class-head{align-items:center}
 #announcementDialog .announcement-pin-toggle{padding:11px 12px!important}
}

/* Private school conversations */
.chat-page-toolbar{margin-bottom:16px}
.chat-page-toolbar h2{margin:2px 0 0}
.chat-layout{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);height:min(690px,72dvh);min-height:470px;direction:rtl;border:1px solid #e1e7f0;border-radius:22px;background:white;overflow:hidden;box-shadow:0 16px 40px rgba(25,39,70,.07);scroll-margin-top:116px}
.chat-sidebar,.chat-thread{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.chat-sidebar{border-left:1px solid #e8edf4;padding:0}
.chat-sidebar-heading{padding:19px 18px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-sidebar-heading>div{display:grid;gap:3px;min-width:0}
.chat-sidebar-heading strong{font-size:1.13rem;color:#162239}
.chat-sidebar-heading small{font-size:.72rem;color:#8592a7}
.chat-new-button{border:0;border-radius:13px;background:#2457e7;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;min-height:39px;padding:0 11px;white-space:nowrap;font:inherit;font-size:.8rem;font-weight:750;cursor:pointer;box-shadow:0 5px 13px rgba(36,87,231,.2)}
.chat-new-button.active,.chat-new-button:hover{background:#1747c5}
.chat-new-button:focus-visible,.chat-person:focus-visible,.chat-back-button:focus-visible,.chat-send-button:focus-visible{outline:3px solid #92b4ff;outline-offset:2px}
.chat-search-wrap{display:flex;align-items:center;gap:9px;margin:0 15px 13px;padding:0 12px;background:#f2f5fa;border:1px solid #e9eef6;border-radius:13px;min-height:44px}
.chat-search-wrap>span{font-size:1.45rem;color:#8895aa;line-height:1}
#chatContactSearch{min-width:0;width:100%;height:44px;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:#152238;text-align:right}
#chatContactSearch::placeholder{color:#8b97aa}
.chat-section-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 19px;font-size:.76rem;color:#67768e}
.chat-section-heading strong{font-weight:800}.chat-section-heading span{color:#8a96aa}
.chat-section-heading button{border:0;background:transparent;color:#73829a;font-size:1rem;cursor:pointer;padding:3px 7px}
.chat-contacts-panel{margin:0 12px 10px;border:1px solid #e1e8f3;border-radius:16px;background:#fbfcff;overflow:hidden;flex:0 1 43%;min-height:100px;display:flex;flex-direction:column}
.chat-contacts-panel .chat-section-heading{padding:9px 12px}
.chat-contacts{overflow-y:auto;min-height:0;padding:0 5px 5px}
.chat-inbox-title{padding-top:8px;padding-bottom:8px}
.chat-inbox{min-height:0;flex:1;overflow-y:auto;padding:0 7px 12px}
.chat-person{display:flex;align-items:center;gap:11px;width:100%;min-width:0;min-height:72px;padding:12px;border:0;border-radius:13px;text-align:right;background:transparent;color:#182438;font:inherit;cursor:pointer;transition:background .15s}
.chat-person+.chat-person{margin-top:2px}
.chat-person.active,.chat-person:hover{background:#edf4ff}
.chat-avatar{flex:0 0 45px;width:45px;height:45px;display:grid;place-items:center;border-radius:16px;background:#e6efff;color:#2258d1;font-size:.92rem;font-weight:850;letter-spacing:.02em}
.chat-avatar.student{background:#e9f4ef;color:#208062}
.chat-avatar.admin,.chat-avatar.investor{background:#f2ecff;color:#7651c4}
.chat-person-main{min-width:0;flex:1;display:grid;gap:4px}
.chat-person-top,.chat-person-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.chat-person b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.87rem;font-weight:800}
.chat-person small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7c8ba0;font-size:.72rem}
.chat-person time{white-space:nowrap;color:#98a3b4;font-size:.65rem;direction:rtl}
.chat-person-role{font-size:.62rem;color:#90a0b4}
.chat-person-arrow{color:#9aa9bf;font-size:1.1rem}
.chat-person em,.chat-nav-badge{flex:0 0 auto;background:#2457e7;color:white;border-radius:999px;font-style:normal;font-size:.68rem;font-weight:850;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px}
.chat-nav-badge.hidden{display:none}
.chat-empty{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px;color:#74839a}
.chat-empty>span{display:grid;place-items:center;width:55px;height:55px;border-radius:18px;background:#edf3ff;color:#2d5bde;font-size:1.55rem}
.chat-empty b{color:#25354d;font-size:.89rem}.chat-empty small{max-width:240px;font-size:.75rem;line-height:1.6}
.chat-thread-header{display:flex;align-items:center;gap:11px;min-height:76px;box-sizing:border-box;padding:12px 17px;border-bottom:1px solid #e9eef5;background:#fff}
.chat-thread-header .chat-avatar{width:43px;height:43px;flex-basis:43px}
.chat-thread-identity{min-width:0;flex:1;display:grid;gap:3px}
.chat-thread-identity b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1b2940}
.chat-thread-identity small{font-size:.71rem;color:#8391a5}
.chat-private-label{flex:0 0 auto;border-radius:99px;background:#f0f4fa;color:#72829a;font-size:.66rem;padding:6px 9px}
.chat-back-button{display:none;border:0;background:#f1f5fb;color:#253c64;width:40px;height:40px;border-radius:12px;font-size:1.15rem;cursor:pointer}
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px;background:#f6f8fc;overscroll-behavior:contain}
.chat-thread-empty{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#8694a8;padding:24px}
.chat-thread-empty span{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:#eaf1ff;font-size:1.75rem}
.chat-thread-empty b{font-size:.94rem;color:#253854}.chat-thread-empty small{max-width:260px;font-size:.75rem;line-height:1.7}
.chat-day-label{align-self:center;background:#e8edf5;color:#73829a;border-radius:99px;padding:5px 13px;font-size:.65rem;font-weight:700;margin:9px 0}
.chat-bubble{max-width:min(76%,430px);padding:10px 13px 7px;border-radius:18px;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.65;font-size:.84rem;box-shadow:0 2px 8px rgba(21,38,70,.035)}
.chat-bubble.mine{align-self:flex-start;background:#dce9ff;color:#162e5a;border-bottom-right-radius:5px}
.chat-bubble.theirs{align-self:flex-end;background:#fff;color:#263548;border:1px solid #e9edf4;border-bottom-left-radius:5px}
.chat-bubble small{display:block;text-align:left;font-size:.62rem;color:#7789a5;margin-top:3px;line-height:1.3}
.chat-composer{display:flex;gap:10px;padding:10px 13px;border-top:1px solid #e8edf4;align-items:end;background:#fff}
.chat-composer textarea{flex:1;min-width:0;box-sizing:border-box;resize:none;min-height:44px;max-height:130px;border:1px solid #e2e9f2;border-radius:15px;padding:10px 13px;font:inherit;font-size:16px;line-height:1.5;background:#f7f9fc}
.chat-composer textarea:focus{outline:2px solid #b6caff;border-color:#6d98ed}
.chat-send-button{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border:0;border-radius:14px;background:#2457e7;color:#fff;font-size:1.25rem;cursor:pointer;transform:none}
.chat-send-button:disabled{opacity:.55;cursor:wait}
@media(max-width:700px){
 .chat-page-toolbar{margin-bottom:12px}
 .chat-layout{display:block;height:clamp(430px,64dvh,700px);min-height:0;border-radius:20px}
 .chat-sidebar,.chat-thread{height:100%;width:100%;border:0}
 .chat-layout:not(.thread-open) .chat-thread{display:none}
 .chat-layout.thread-open .chat-sidebar{display:none}
 .chat-contacts-panel{flex-basis:55%}
 .chat-back-button{display:grid;place-items:center}
 .chat-thread-header{padding:10px 12px;gap:9px;min-height:66px}
 .chat-private-label{display:none}
 .chat-messages{padding:14px 12px}
 .chat-bubble{max-width:83%}
 .chat-composer{padding:9px 10px}
}

/* Daily attendance register */
.attendance-register-meta{display:grid;gap:4px;padding:12px 14px;margin:0 0 12px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.attendance-register-meta b{font-size:.85rem}.attendance-register-meta small{font-size:.7rem;color:var(--muted)}
.sticky-action{gap:8px}.sticky-action #confirmAttendanceRegister{flex:1}.sticky-action #saveAttendanceButton{flex:1}
@media(max-width:520px){.sticky-action{display:grid;grid-template-columns:1fr}.page-toolbar #attendancePeriod{width:100%;margin-top:8px}}

/* Attendance manager dashboard */
.attendance-manager-dashboard{display:grid;gap:10px;margin-bottom:16px}.attendance-reminder{padding:11px 13px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa;font-size:.76rem;font-weight:800;color:#9a3412}.attendance-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.attendance-class-card{display:grid;grid-template-columns:1fr auto;gap:6px 10px;text-align:right;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);font:inherit;color:var(--text)}.attendance-class-card>div{display:grid}.attendance-class-card small{font-size:.66rem;color:var(--muted)}.attendance-state{display:inline-flex;align-items:center;border-radius:99px;padding:4px 8px;font-size:.62rem;font-weight:850;background:#fff7ed;color:#9a3412}.attendance-state.confirmed{background:#ecfdf5;color:#047857}.attendance-state.missing{background:#f1f5f9;color:#64748b}.absent-roster-list{display:grid;gap:8px}.absent-roster-row{display:grid;gap:3px;padding:11px 12px;border:1px solid var(--border);border-radius:14px}.absent-roster-row small{color:var(--muted);font-size:.68rem}@media(max-width:520px){.attendance-class-grid{grid-template-columns:1fr}.sticky-action{grid-template-columns:1fr}}


/* v22.42 attendance class-first flow */
.attendance-teacher-picker{display:grid;gap:12px;margin-bottom:16px}
.attendance-picker-note{margin:0;padding:10px 12px;border-radius:14px;background:var(--surface-2);color:var(--muted);font-size:.72rem;line-height:1.65}
.attendance-teacher-class-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.attendance-teacher-class-card{display:flex;align-items:center;gap:11px;width:100%;min-height:88px;padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font:inherit;text-align:right;cursor:pointer;box-shadow:0 5px 16px rgba(15,23,42,.035)}
.attendance-teacher-class-card.active{border-color:#2563eb;box-shadow:inset 0 0 0 1px #2563eb}
.attendance-class-icon{flex:0 0 44px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);font-size:1.2rem}
.attendance-class-copy{min-width:0;flex:1;display:grid;gap:3px}
.attendance-class-copy b{font-size:.88rem}.attendance-class-copy small{font-size:.68rem;color:var(--muted);line-height:1.45}.attendance-class-copy em{font-style:normal;font-size:.65rem;color:#2563eb;font-weight:800}
.attendance-class-arrow{font-size:1.1rem;color:var(--muted)}
.attendance-class-workspace{display:grid;gap:12px;scroll-margin-top:110px}
.attendance-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:17px;background:var(--surface)}
.attendance-workspace-head>div{display:grid;gap:2px}.attendance-workspace-head h3{margin:0;font-size:.95rem}
.attendance-picker-loading{padding:18px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:16px}
@media(max-width:620px){.attendance-teacher-class-list{grid-template-columns:1fr}.attendance-workspace-head{align-items:flex-start}.attendance-workspace-head .btn{white-space:nowrap}}


/* v22.43 professional roll-call attendance */
.attendance-page-toolbar{align-items:flex-end}
.attendance-toolbar-fields{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.attendance-workspace-actions{display:flex;gap:7px;align-items:center}
.attendance-register-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.attendance-register-meta>div{display:grid;gap:3px}
.attendance-rollcall-launcher{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 8px 24px rgba(15,23,42,.045)}
.attendance-rollcall-launcher-copy{display:flex;align-items:center;gap:12px;min-width:0}
.attendance-rollcall-launcher-copy>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#ecfdf5;color:#047857;font-weight:900;font-size:1.1rem;flex:0 0 auto}
.attendance-rollcall-launcher-copy>div{display:grid;gap:3px}.attendance-rollcall-launcher-copy b{font-size:.9rem}.attendance-rollcall-launcher-copy small{font-size:.69rem;line-height:1.55;color:var(--muted)}
.attendance-rollcall-panel{display:grid;gap:12px}
.rollcall-progress-card{display:grid;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.rollcall-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.rollcall-progress-head>div{display:grid;gap:1px}.rollcall-progress-head small{font-size:.65rem;color:var(--muted)}.rollcall-progress-head b{font-size:.9rem}
.rollcall-progress-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}.rollcall-progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:#2563eb;transition:width .2s ease}
.rollcall-undo{border:0;background:transparent;color:#2563eb;font:inherit;font-size:.68rem;font-weight:850;padding:7px 0;cursor:pointer}
.rollcall-stack{display:grid;gap:10px}
.rollcall-current-card{display:grid;gap:15px;padding:18px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 12px 34px rgba(15,23,42,.07)}
.rollcall-student-count{font-size:.66rem;color:var(--muted);font-weight:800}
.rollcall-student-main{display:flex;align-items:center;gap:12px}.rollcall-avatar{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:#edf4ff;color:#2457e7;font-size:1.2rem;font-weight:900;flex:0 0 auto}.rollcall-student-main>div{display:grid;gap:2px}.rollcall-student-main small{font-size:.65rem;color:var(--muted)}.rollcall-student-main h3{margin:0;font-size:1.05rem}
.rollcall-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rollcall-action{min-height:58px;border-radius:16px;border:1px solid var(--border);font:inherit;font-weight:900;font-size:.86rem;cursor:pointer}.rollcall-action.present{background:#ecfdf5;border-color:#86efac;color:#166534}.rollcall-action.absent{background:#fef2f2;border-color:#fecaca;color:#b91c1c}.rollcall-action:disabled,.rollcall-secondary-actions button:disabled{opacity:.55;cursor:wait}
.rollcall-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rollcall-secondary-actions button{min-height:45px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;font-size:.73rem;font-weight:850}
.rollcall-next{display:grid;gap:7px;padding:12px 14px;border-radius:16px;background:var(--surface-2)}.rollcall-next>small{font-size:.64rem;color:var(--muted);font-weight:800}.rollcall-next>div{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.rollcall-next span{white-space:nowrap;padding:6px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:.66rem}
.rollcall-done{display:grid;place-items:center;text-align:center;gap:6px;padding:24px 16px;border:1px solid #bbf7d0;border-radius:20px;background:#f0fdf4}.rollcall-done>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#16a34a;color:#fff;font-weight:900}.rollcall-done h3{margin:4px 0 0;font-size:.95rem}.rollcall-done p{margin:0;color:#64748b;font-size:.7rem;line-height:1.6}
.attendance-history-section{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden}.attendance-history-section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;cursor:pointer}.attendance-history-section>summary::-webkit-details-marker{display:none}.attendance-history-section>summary h3,.attendance-history-section>summary p{margin:0}.attendance-history-section>summary span{font-size:.66rem;color:#2563eb;font-weight:850}.attendance-history-body{display:grid;gap:10px;padding:0 13px 13px}.attendance-history-toolbar{display:flex;justify-content:flex-end;gap:8px}
.attendance-final-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.attendance-record-dialog{width:min(96vw,680px)}.attendance-record-card{width:min(92vw,640px);max-height:88dvh;overflow:auto}.attendance-record-card .modal-head small{display:block;margin-top:4px;color:var(--muted);font-size:.65rem}.attendance-record-body{display:grid;gap:12px}.attendance-record-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.attendance-record-summary span{display:grid;place-items:center;gap:2px;padding:10px 6px;border-radius:13px;background:var(--surface-2);font-size:.64rem}.attendance-record-summary b{font-size:.9rem}.attendance-record-summary .present{background:#ecfdf5;color:#166534}.attendance-record-summary .absent{background:#fef2f2;color:#b91c1c}.attendance-record-summary .late{background:#fff7ed;color:#c2410c}.attendance-record-summary .excused{background:#eff6ff;color:#1d4ed8}
.attendance-record-groups{display:grid;gap:10px}.attendance-record-group{border:1px solid var(--border);border-radius:16px;overflow:hidden}.attendance-record-group header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--surface-2)}.attendance-record-group header b{font-size:.78rem}.attendance-record-group header span{font-size:.68rem;font-weight:900}.attendance-record-students{display:grid}.attendance-record-students>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-top:1px solid var(--border)}.attendance-record-students strong{font-size:.76rem}.attendance-record-students small{font-size:.62rem;color:var(--muted);text-align:left}.attendance-record-group>p{margin:0;padding:13px;color:var(--muted);font-size:.68rem}
@media(max-width:620px){
 .attendance-page-toolbar{align-items:stretch}.attendance-toolbar-fields{display:grid;grid-template-columns:1fr}.attendance-rollcall-launcher{grid-template-columns:1fr}.attendance-rollcall-launcher .btn{width:100%}.attendance-final-actions{grid-template-columns:1fr}.attendance-record-summary{grid-template-columns:repeat(2,1fr)}.attendance-record-students>div{align-items:flex-start;flex-direction:column}.attendance-record-students small{text-align:right}
}


/* v22.44 manager official attendance inbox */
.manager-attendance-inbox{display:grid;gap:14px}
.manager-attendance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.manager-attendance-head>div{display:grid;gap:3px}.manager-attendance-head h3,.manager-attendance-head p{margin:0}.manager-attendance-head small{max-width:560px;color:var(--muted);font-size:.68rem;line-height:1.6}
.manager-attendance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.manager-attendance-kpis>span{display:grid;gap:3px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);text-align:center}.manager-attendance-kpis small{font-size:.62rem;color:var(--muted)}.manager-attendance-kpis b{font-size:1rem}
.manager-attendance-filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.manager-attendance-filters button{white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 12px;font:inherit;font-size:.68rem;font-weight:850}.manager-attendance-filters button.active{background:var(--text);border-color:var(--text);color:var(--surface)}
.manager-attendance-list{display:grid;gap:10px}.manager-attendance-card{display:grid;gap:12px;padding:15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 7px 22px rgba(15,23,42,.045)}.manager-attendance-card.awaiting{border-inline-start:4px solid #2563eb}.manager-attendance-card.incomplete{border-inline-start:4px solid #f59e0b}.manager-attendance-card.confirmed{border-inline-start:4px solid #16a34a}
.manager-attendance-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.manager-attendance-card-head>div{display:grid;gap:2px}.manager-attendance-card-head h4{margin:0;font-size:.94rem}.manager-attendance-card-head small{font-size:.64rem;color:var(--muted)}.manager-attendance-date{font-size:.63rem;color:#2563eb;font-weight:850}
.manager-attendance-status{flex:0 0 auto;border-radius:999px;padding:6px 9px;font-size:.61rem;font-weight:900}.manager-attendance-status.awaiting{background:#eff6ff;color:#1d4ed8}.manager-attendance-status.incomplete{background:#fff7ed;color:#c2410c}.manager-attendance-status.confirmed{background:#ecfdf5;color:#047857}
.manager-attendance-source{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 10px;border-radius:13px;background:var(--surface-2)}.manager-attendance-source span{font-size:.61rem;color:var(--muted)}.manager-attendance-source b{font-size:.72rem}.manager-attendance-source em{font-style:normal;font-size:.61rem;color:#2563eb;font-weight:850}
.manager-attendance-progress{display:grid;gap:8px}.manager-attendance-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:.67rem}.manager-attendance-progress>div:first-child span{color:var(--muted)}
.manager-attendance-mini-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.manager-attendance-mini-counts span{padding:7px 5px;border-radius:11px;background:var(--surface-2);text-align:center;font-size:.61rem;font-weight:800}.manager-attendance-mini-counts .present{background:#ecfdf5;color:#166534}.manager-attendance-mini-counts .absent{background:#fef2f2;color:#b91c1c}.manager-attendance-mini-counts .late{background:#fff7ed;color:#c2410c}.manager-attendance-mini-counts .excused{background:#eff6ff;color:#1d4ed8}
.manager-attendance-actions{display:flex;gap:8px;align-items:center}.manager-attendance-actions .btn{flex:1}.manager-attendance-published{flex:1;text-align:center;padding:10px;border-radius:12px;background:#ecfdf5;color:#047857;font-size:.65rem;font-weight:850}
.attendance-record-review-action{display:grid;margin-top:4px}.attendance-record-publish-state{padding:12px 13px;border-radius:14px;font-size:.68rem;font-weight:800;line-height:1.55}.attendance-record-publish-state.confirmed{background:#ecfdf5;color:#047857}.attendance-record-publish-state.pending{background:#fff7ed;color:#9a3412}
@media(max-width:620px){.manager-attendance-head{display:grid}.manager-attendance-head .btn{width:100%}.manager-attendance-kpis{grid-template-columns:repeat(2,1fr)}.manager-attendance-card-head{display:grid}.manager-attendance-status{justify-self:start}.manager-attendance-mini-counts{grid-template-columns:repeat(2,1fr)}.manager-attendance-actions{display:grid;grid-template-columns:1fr}.manager-attendance-actions .btn{width:100%}}

/* v22.45 manager attendance actions must remain interactive in manager read-only records */
body.manager-records-readonly #recordsPage #recordContent .manager-attendance-inbox button,
body.manager-records-readonly #recordsPage #recordContent .manager-attendance-card button{
  display:inline-flex!important;
}
body.manager-records-readonly #recordsPage #recordContent .manager-attendance-filters button{
  display:inline-flex!important;
}

/* v22.46 official attendance workflow controls */
body.manager-records-readonly #recordsPage #recordContent .view-record,
body.manager-records-readonly #recordsPage #recordContent .manager-attendance-actions .view-record{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.manager-attendance-actions{margin-top:2px}
.manager-attendance-actions .review-attendance,
.manager-attendance-actions .confirm-attendance{min-height:44px;align-items:center;justify-content:center}


/* =========================================================
   v23.0 — Immersive UI system
   Global across developer, investor, admin, teacher, student
   ========================================================= */
:root{
  color-scheme:light;
  --bg:#f4f6fb;
  --surface:rgba(255,255,255,.92);
  --surface-solid:#ffffff;
  --surface-2:#f5f7fb;
  --surface-3:#edf1f7;
  --text:#121827;
  --muted:#6f7a90;
  --border:#e2e7f0;
  --border-strong:#d3dbe8;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --accent-soft:rgba(37,99,235,.10);
  --accent-glow:rgba(37,99,235,.20);
  --danger:#dc2626;
  --success:#059669;
  --warning:#d97706;
  --shadow:0 20px 55px rgba(25,38,68,.10);
  --shadow-soft:0 8px 24px rgba(25,38,68,.065);
  --shadow-float:0 18px 52px rgba(25,38,68,.16);
  --radius:22px;
  --radius-lg:28px;
  --glass:rgba(255,255,255,.76);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080b12;
  --surface:rgba(15,20,32,.92);
  --surface-solid:#0f1420;
  --surface-2:#151b29;
  --surface-3:#1b2333;
  --text:#f4f7fb;
  --muted:#96a1b5;
  --border:#212a3b;
  --border-strong:#2a3549;
  --danger:#fb7185;
  --success:#34d399;
  --warning:#fbbf24;
  --shadow:0 24px 70px rgba(0,0,0,.36);
  --shadow-soft:0 10px 32px rgba(0,0,0,.24);
  --shadow-float:0 22px 70px rgba(0,0,0,.48);
  --glass:rgba(10,14,23,.76);
}
body[data-role="investor"]{--primary:#d97706;--primary-2:#b45309;--accent-soft:rgba(217,119,6,.12);--accent-glow:rgba(217,119,6,.22)}
body[data-role="admin"]{--primary:#2563eb;--primary-2:#1d4ed8;--accent-soft:rgba(37,99,235,.11);--accent-glow:rgba(37,99,235,.22)}
body[data-role="teacher"]{--primary:#7c3aed;--primary-2:#6d28d9;--accent-soft:rgba(124,58,237,.11);--accent-glow:rgba(124,58,237,.22)}
body[data-role="student"]{--primary:#0f766e;--primary-2:#0b625b;--accent-soft:rgba(15,118,110,.11);--accent-glow:rgba(15,118,110,.22)}
body[data-role="developer"]{--primary:#e11d48;--primary-2:#be123c;--accent-soft:rgba(225,29,72,.10);--accent-glow:rgba(225,29,72,.20)}

html{background:var(--bg);scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 12% 9%,var(--accent-soft),transparent 31%),
    radial-gradient(circle at 88% 3%,rgba(99,102,241,.08),transparent 28%),
    var(--bg);
  color:var(--text);
  overflow-x:clip;
  transition:background-color .28s ease,color .28s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.36;
  background-image:
    linear-gradient(rgba(120,130,160,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,130,160,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}
html[data-theme="dark"] body::before{opacity:.2}
::selection{background:var(--primary);color:#fff}
.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}

/* Typography */
h1,h2,h3,h4,strong,b{letter-spacing:-.012em}
h1{font-size:1.48rem}
h2{font-size:1.36rem}
h3{font-size:1.03rem}
.eyebrow{
  color:var(--primary);
  font-size:.69rem;
  letter-spacing:.055em;
  text-transform:none;
  font-weight:900;
}
.muted{color:var(--muted)}
.small-copy{font-size:.74rem}

/* Global controls */
input,select,textarea{
  background:var(--surface-solid);
  color:var(--text);
  border-color:var(--border);
  border-radius:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent)}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.btn{
  border-radius:15px;
  min-height:43px;
  transition:transform .16s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 9px 22px var(--accent-glow);
}
.btn.secondary,.btn.ghost{
  background:var(--surface-solid);
  color:var(--text);
  border-color:var(--border);
}
.btn:not([disabled]):active{transform:scale(.975)}
.icon-button,.icon-btn{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px);
}
.icon-button:active,.icon-btn:active{transform:scale(.94)}

/* Login — premium entry */
.login-shell{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 18%,var(--accent-glow),transparent 33%),
    radial-gradient(circle at 82% 78%,rgba(99,102,241,.16),transparent 31%);
}
.login-card{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  border-color:var(--border);
  background:var(--glass);
  backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:var(--shadow);
}
.login-card::before{
  content:"";
  position:absolute;
  width:180px;height:180px;
  inset:-86px auto auto -58px;
  border-radius:42% 58% 63% 37%;
  background:linear-gradient(135deg,var(--primary),transparent 72%);
  opacity:.16;
  transform:rotate(21deg);
  pointer-events:none;
}
.brand-mark{
  background:linear-gradient(145deg,var(--primary),var(--primary-2));
  box-shadow:0 14px 34px var(--accent-glow);
}
.login-theme-toggle{
  position:absolute;
  top:16px;left:16px;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  display:grid;place-items:center;
  box-shadow:var(--shadow-soft);
  z-index:2;
}

/* App chrome */
.app-shell{padding-bottom:calc(94px + var(--safe-bottom))}
.topbar{
  padding:14px 18px 12px;
  background:var(--glass);
  border-bottom:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  backdrop-filter:blur(24px) saturate(1.25);
  box-shadow:0 8px 28px rgba(15,23,42,.035);
}
.topbar::after{
  content:"";
  position:absolute;
  right:18px;bottom:-1px;
  width:54px;height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--primary),transparent);
}
.topbar-actions{display:flex;align-items:center;gap:9px}
.theme-quick-toggle{position:relative;overflow:hidden}
.theme-quick-toggle::after{
  content:"";
  position:absolute;inset:auto -8px -12px auto;
  width:27px;height:27px;border-radius:50%;
  background:var(--accent-soft);
}
#pageTitle{font-size:1.38rem;margin-top:1px}
#roleBadge{
  display:inline-flex;
  width:max-content;
  margin-top:3px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--primary);
  font-size:.63rem;
  font-weight:850;
}
.content{max-width:880px;padding:8px 16px 34px}
.page.active{
  animation:uiPageIn .34s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes uiPageIn{
  from{opacity:0;transform:translateY(10px) scale(.995)}
  to{opacity:1;transform:none}
}

/* Floating navigation */
.bottom-nav{
  left:12px;right:12px;bottom:calc(10px + var(--safe-bottom));
  width:auto;
  display:flex;
  gap:5px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  padding:7px;
  border:1px solid color-mix(in srgb,var(--border) 88%,transparent);
  border-radius:24px;
  background:var(--glass);
  box-shadow:var(--shadow-float);
  backdrop-filter:blur(26px) saturate(1.3);
}
.bottom-nav::-webkit-scrollbar{display:none}
.nav-item{
  min-width:69px;
  flex:1 0 69px;
  min-height:55px;
  padding:6px 7px;
  color:var(--muted);
  border-radius:18px;
  transition:.18s ease;
}
.nav-item span{font-size:1.14rem;filter:saturate(.78)}
.nav-item small{font-size:.62rem}
.nav-item.active{
  color:var(--primary);
  background:linear-gradient(145deg,var(--accent-soft),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 16%,transparent);
  transform:translateY(-1px);
}
.nav-item.active span{filter:none;transform:scale(1.08)}
.quick-add-fab{
  background:linear-gradient(145deg,var(--primary),var(--primary-2))!important;
  box-shadow:0 16px 35px var(--accent-glow)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.quick-add-fab:active{transform:scale(.93) rotate(8deg)}
.quick-add-menu{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow-float);
  backdrop-filter:blur(22px);
}

/* Cards — all modules */
:is(.context-card,.stat-card,.quick-card,.student-row,.grade-row,.report-kpi,.report-filter-card,
.schedule-card,.assignment-card,.settings-card,.record-card,.record-content,.lesson-panel,.record-archive-card,
.notification-center-card,.classroom-card,.announcement-manage-card,.role-more-card,.remembered-account-card,
.account-user-card,.expense-card,.finance-student-card,.staff-payroll-card,.investor-insight-card,
.school-comparison-card,.section-card,.history-card,.manager-attendance-card,.attendance-class-card,
.attendance-teacher-class-card,.attendance-register-meta,.attendance-rollcall-launcher,.rollcall-progress-card,
.rollcall-current-card,.attendance-history-section,.chat-layout,.profile-card,.class-memory-card,.next-lesson-card){
  border-color:var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
:is(.quick-card,.record-card,.daily-action,.role-more-card,.settings-card.action-card,.attendance-teacher-class-card,
.attendance-class-card,.history-card,.school-comparison-card){
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
@media(hover:hover){
  :is(.quick-card,.record-card,.daily-action,.role-more-card,.settings-card.action-card,.attendance-teacher-class-card,
  .attendance-class-card,.history-card,.school-comparison-card):hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--primary) 28%,var(--border));
    box-shadow:0 16px 40px rgba(20,30,55,.12);
  }
}
:is(.quick-card,.record-card,.role-more-card,.daily-action):active{transform:scale(.985)}
.quick-card>span,.record-card>span,.role-more-card>span,.daily-action>span,.feed-icon,.attendance-class-icon{
  background:var(--accent-soft)!important;
  color:var(--primary);
}
.record-card.active{
  outline:0;
  border-color:color-mix(in srgb,var(--primary) 60%,var(--border));
  background:linear-gradient(145deg,var(--accent-soft),var(--surface));
  box-shadow:0 10px 28px var(--accent-glow);
}
.context-card{
  border-radius:22px;
  background:linear-gradient(145deg,var(--surface),var(--surface-2));
}

/* Hero / dashboards */
.hero,.dp-plan-head{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 26%,rgba(255,255,255,.18),transparent 26%),
    linear-gradient(135deg,var(--primary-2),#182238 72%);
  box-shadow:0 20px 48px var(--accent-glow);
}
.hero::after{
  content:"✦";
  position:absolute;
  left:20px;bottom:-18px;
  font-size:5rem;
  opacity:.075;
  transform:rotate(-16deg);
}
.daily-hub-head{
  padding:15px 16px;
  margin-bottom:13px;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(135deg,var(--surface),var(--accent-soft));
  box-shadow:var(--shadow-soft);
}
.daily-actions{gap:9px}
.daily-action{
  border-color:var(--border)!important;
  background:var(--surface)!important;
  border-radius:19px!important;
  box-shadow:var(--shadow-soft);
}
.daily-action.primary-action{
  background:linear-gradient(145deg,var(--accent-soft),var(--surface))!important;
  border-color:color-mix(in srgb,var(--primary) 28%,var(--border))!important;
}
.stat-card strong,.report-kpi strong{color:var(--text)}
.stat-card{position:relative;overflow:hidden}
.stat-card::after{
  content:"";
  position:absolute;
  inset:auto -14px -20px auto;
  width:55px;height:55px;border-radius:50%;
  background:var(--accent-soft);
}

/* Lists / tables */
.student-list,.history-list,.classroom-feed,.announcement-manage-list,.account-user-list{gap:10px}
.student-row,.record-archive-card,.history-card{border-radius:19px}
.records-table,.report-table{color:var(--text)}
.records-table th,.report-table th{
  background:var(--surface-2);
  color:var(--muted);
  border-color:var(--border);
}
.records-table td,.report-table td{border-color:var(--border)}
.report-table tbody tr:hover,.records-table tbody tr:hover{background:var(--accent-soft)}
.report-table-wrap{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-soft)}
.chip{background:var(--surface-2);border-color:var(--border);color:var(--text)}

/* Attendance */
.attendance-manager-dashboard,.attendance-teacher-picker,.attendance-class-workspace{gap:12px}
.attendance-reminder{
  border-color:color-mix(in srgb,var(--warning) 30%,var(--border));
  background:color-mix(in srgb,var(--warning) 10%,var(--surface));
  color:var(--warning);
}
.attendance-state.awaiting,.manager-attendance-status.awaiting{background:var(--accent-soft);color:var(--primary)}
.rollcall-progress-track{background:var(--surface-3)}
.rollcall-progress-track span{background:linear-gradient(90deg,var(--primary),#8b5cf6)}
.rollcall-current-card{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--primary) 24%,var(--border));
}
.rollcall-current-card::before{
  content:"";
  position:absolute;
  width:120px;height:120px;
  left:-60px;top:-62px;
  border-radius:50%;
  background:var(--accent-soft);
}
.rollcall-avatar{background:var(--accent-soft);color:var(--primary)}
.rollcall-action.present{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.32);color:var(--success)}
.rollcall-action.absent{background:rgba(244,63,94,.11);border-color:rgba(244,63,94,.30);color:var(--danger)}
.rollcall-secondary-actions button{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.rollcall-next{background:var(--surface-2)}
.rollcall-next span{background:var(--surface);border-color:var(--border);color:var(--text)}
.rollcall-done{background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.28)}
.attendance-record-summary span,.manager-attendance-mini-counts span{border:1px solid transparent}
.attendance-record-summary .present,.manager-attendance-mini-counts .present{background:rgba(16,185,129,.11);color:var(--success)}
.attendance-record-summary .absent,.manager-attendance-mini-counts .absent{background:rgba(244,63,94,.10);color:var(--danger)}
.attendance-record-summary .late,.manager-attendance-mini-counts .late{background:rgba(245,158,11,.11);color:var(--warning)}
.attendance-record-summary .excused,.manager-attendance-mini-counts .excused{background:rgba(59,130,246,.11);color:#60a5fa}

/* Chats */
.chat-layout{border-radius:24px;overflow:hidden}
.chat-sidebar,.chat-thread,.chat-thread-header,.chat-composer{background:var(--surface-solid)}
.chat-sidebar{border-color:var(--border)}
.chat-search-wrap{background:var(--surface-2);border-color:var(--border)}
#chatContactSearch{color:var(--text)}
.chat-contacts-panel{background:var(--surface-2);border-color:var(--border)}
.chat-person{color:var(--text)}
.chat-person.active,.chat-person:hover{background:var(--accent-soft)}
.chat-avatar{background:var(--accent-soft);color:var(--primary)}
.chat-messages{background:var(--surface-2)}
.chat-bubble.theirs{background:var(--surface-solid);color:var(--text);border-color:var(--border)}
.chat-bubble.mine{background:var(--accent-soft);color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border))}
.chat-composer textarea{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.chat-send-button,.chat-new-button{background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 8px 20px var(--accent-glow)}

/* Announcements */
.classroom-filter-bar{background:linear-gradient(var(--bg) 76%,transparent)}
.classroom-filter{background:var(--surface);color:var(--muted);border-color:var(--border)}
.classroom-filter.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.classroom-pinned,.announcement-manager-note{background:var(--surface);border-color:var(--border)}
.announcement-audience-choice,.announcement-class-option{background:var(--surface);border-color:var(--border)}
.announcement-target-section{background:var(--surface-2);border-color:var(--border)}
#announcementDialog .announcement-composer input,
#announcementDialog .announcement-composer textarea,
#announcementDialog .announcement-composer select{background:var(--surface-solid);color:var(--text);border-color:var(--border)}

/* Finance / investor / management */
.investor-dashboard,.investor-executive,.finance-center,.staff-center{color:var(--text)}
.investor-insight-card>summary,.records-archive-panel,.compact-disclosure-card{background:var(--surface);border-color:var(--border)}
.investor-trend,.investor-alert-badge{border-color:var(--border)}
.net-card{background:linear-gradient(145deg,var(--surface),var(--accent-soft));border-color:var(--border)}
.finance-student-card,.staff-payroll-card,.expense-card{background:var(--surface);border-color:var(--border)}
.metric-good{color:var(--success)}.metric-warn{color:var(--warning)}.metric-bad{color:var(--danger)}

/* Records */
.record-menu{gap:10px}
.record-content,.records-archive-panel{border-radius:21px}
.record-actions-popover,.record-student-picker-panel{
  background:var(--surface-solid);
  border-color:var(--border);
  box-shadow:var(--shadow-float);
}
.record-student-option{color:var(--text)}
.record-student-option:hover{background:var(--accent-soft)}
.manager-attendance-head,.manager-attendance-kpis>span,.manager-attendance-card{
  background:var(--surface);
  border-color:var(--border);
}
.manager-attendance-source{background:var(--surface-2)}
.manager-attendance-filters button{background:var(--surface);border-color:var(--border);color:var(--muted)}
.manager-attendance-filters button.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.manager-attendance-status.confirmed,.manager-attendance-published,.attendance-record-publish-state.confirmed{background:rgba(16,185,129,.11);color:var(--success)}
.manager-attendance-status.incomplete,.attendance-record-publish-state.pending{background:rgba(245,158,11,.11);color:var(--warning)}

/* Settings / more */
.settings-sections{display:grid;gap:6px}
.settings-group-title{
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.04em;
  margin:19px 4px 8px;
}
.settings-card{overflow:hidden}
.settings-card summary{position:relative}
.settings-card[open]{border-color:color-mix(in srgb,var(--primary) 24%,var(--border))}
.settings-card[open] summary{color:var(--primary)}
.action-card{background:linear-gradient(145deg,var(--surface),var(--surface-2))}
.switch-row{background:var(--surface-2)}
.switch-row input{accent-color:var(--primary)}
.danger-card{background:rgba(244,63,94,.06);border-color:rgba(244,63,94,.18)}

/* Appearance settings */
.appearance-settings-body{display:grid;gap:15px;padding:0 0 17px}
.appearance-setting-title{margin:0 0 9px;font-size:.74rem;font-weight:850;color:var(--muted)}
.theme-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.theme-choice{
  display:grid;gap:5px;
  text-align:center;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:17px;
  padding:10px 8px;
  font:inherit;
}
.theme-choice b{font-size:.72rem}.theme-choice small{font-size:.59rem;color:var(--muted)}
.theme-choice.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-soft)}
.theme-choice-preview{height:44px;border-radius:11px;border:1px solid var(--border);position:relative;overflow:hidden}
.theme-choice-preview::before{content:"";position:absolute;inset:7px;border-radius:6px}
.light-preview{background:#f4f6fb}.light-preview::before{background:#fff;box-shadow:0 8px 16px #cbd5e180}
.dark-preview{background:#080b12}.dark-preview::before{background:#151b29;box-shadow:0 8px 16px #0008}
.system-preview{background:linear-gradient(90deg,#f4f6fb 50%,#080b12 50%)}.system-preview::before{background:linear-gradient(90deg,#fff 50%,#151b29 50%)}
.appearance-motion-row>span{display:grid;gap:3px}
.appearance-motion-row small,.appearance-note{font-size:.64rem;color:var(--muted);line-height:1.55}
.appearance-note{margin:0;padding:10px 11px;border-radius:13px;background:var(--accent-soft)}

/* Modal / popover / toast */
.modal::backdrop{background:rgba(2,6,23,.66);backdrop-filter:blur(7px)}
.modal-card{
  background:var(--surface-solid);
  border:1px solid var(--border);
  box-shadow:0 28px 90px rgba(0,0,0,.30);
}
dialog[open] .modal-card{animation:uiModalIn .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes uiModalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.header-popover-card,.notification-center-card{
  background:var(--surface);
  border-color:var(--border);
  backdrop-filter:blur(24px);
}
.toast{
  background:color-mix(in srgb,var(--text) 92%,transparent);
  color:var(--bg);
  border:1px solid color-mix(in srgb,var(--border) 30%,transparent);
  backdrop-filter:blur(18px);
}
.toast.error{background:#9f1239;color:#fff}

/* Dark overrides for hard-coded legacy surfaces */
html[data-theme="dark"] :is(
  .login-card,.modal-card,.context-card,.stat-card,.quick-card,.student-row,.grade-row,.settings-card,
  .report-kpi,.report-filter-card,.report-table-wrap,.schedule-card,.assignment-card,.record-card,.record-content,
  .lesson-panel,.records-archive-panel,.record-archive-card,.notification-center-card,.classroom-card,
  .announcement-manage-card,.role-more-card,.remembered-account-card,.account-user-card,.expense-card,
  .finance-student-card,.staff-payroll-card,.investor-insight-card,.school-comparison-card,.section-card,
  .history-card,.manager-attendance-card,.attendance-class-card,.attendance-teacher-class-card,
  .attendance-register-meta,.attendance-rollcall-launcher,.rollcall-progress-card,.rollcall-current-card,
  .attendance-history-section,.attendance-record-card,.profile-card,.class-memory-card,.next-lesson-card
){
  background:var(--surface);
  color:var(--text);
  border-color:var(--border);
}
html[data-theme="dark"] :is(input,select,textarea){background:var(--surface-solid);color:var(--text)}
html[data-theme="dark"] :is(.status-button,.mini-action,.note-row,.mini-row,.profile-stats>div,.switch-row){
  background:var(--surface-2);color:var(--text);border-color:var(--border)
}
html[data-theme="dark"] .notice.warning{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.22);color:#fbbf24}
html[data-theme="dark"] .exam-info{background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.20);color:#93c5fd}
html[data-theme="dark"] .empty,html[data-theme="dark"] .mini-empty{background:var(--surface);border-color:var(--border);color:var(--muted)}
html[data-theme="dark"] .topbar{box-shadow:0 12px 34px rgba(0,0,0,.22)}
html[data-theme="dark"] .bottom-nav{box-shadow:0 20px 68px rgba(0,0,0,.52)}
html[data-theme="dark"] .nav-item.active{background:var(--accent-soft)}
html[data-theme="dark"] .record-card.active{background:linear-gradient(145deg,var(--accent-soft),var(--surface))}
html[data-theme="dark"] .chat-day-label{background:var(--surface-3);color:var(--muted)}

/* Graffiti-light graphic accents */
body[data-page="home"] .page.active::before,
body[data-page="more"] .page.active::before{
  content:"";
  display:block;
  position:absolute;
  width:130px;height:130px;
  left:-70px;top:90px;
  border:18px solid var(--accent-soft);
  border-radius:42% 58% 64% 36% / 46% 35% 65% 54%;
  transform:rotate(-18deg);
  pointer-events:none;
  z-index:-1;
}
.content{position:relative;z-index:1}

/* Motion staging */
@keyframes uiRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row){
  animation:uiRise .38s cubic-bezier(.2,.8,.2,1) both;
}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row):nth-child(2){animation-delay:.025s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row):nth-child(3){animation-delay:.05s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row):nth-child(4){animation-delay:.075s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row):nth-child(n+5){animation-delay:.1s}

/* Explicit reduced motion */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Mobile polish */
@media(max-width:620px){
  .content{padding:7px 12px 28px}
  .topbar{padding:12px 14px 10px}
  .topbar-actions{gap:7px}
  .icon-button{width:40px;height:40px;border-radius:13px}
  .page-toolbar{align-items:flex-start}
  .record-menu{gap:8px}
  .record-card{padding:12px;border-radius:17px}
  .theme-choice-grid{gap:6px}
  .theme-choice{padding:8px 5px}
  .bottom-nav{left:8px;right:8px;bottom:calc(7px + var(--safe-bottom));border-radius:22px}
  .nav-item{min-width:67px;flex-basis:67px}
  .quick-add-fab{bottom:calc(87px + var(--safe-bottom))!important}
}
@media(min-width:900px){
  .content{max-width:1040px}
  .bottom-nav{width:min(760px,calc(100vw - 32px));left:50%;right:auto;transform:translateX(-50%)}
  .quick-grid{grid-template-columns:repeat(3,1fr)}
}

/* Keep print clean regardless of active theme */
@media print{
  html,body{background:#fff!important;color:#111!important}
  body::before{display:none!important}
}

/* v23 layout conflict guard */
.bottom-nav{transform:none}
@media(min-width:900px){.bottom-nav{transform:translateX(-50%)}}


/* =========================================================
   v23.1 — Graffiti iconography + kinetic menus
   ========================================================= */
.g-icon-wrap{
  width:44px;height:44px;
  display:grid!important;
  place-items:center;
  flex:0 0 44px;
  border-radius:14px;
  background:var(--accent-soft)!important;
  color:var(--primary)!important;
  position:relative;
  overflow:visible;
}
.g-icon-wrap::after{
  content:"";
  position:absolute;
  width:16px;height:4px;
  border-radius:999px;
  background:currentColor;
  opacity:.12;
  inset:auto 5px 3px auto;
  transform:rotate(-11deg);
}
.g-icon{width:25px;height:25px;overflow:visible;filter:url(#graffitiRough)}
.g-icon path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.g-icon .g-main{stroke-width:1.9}
.g-icon .g-sketch{stroke-width:3.6;opacity:.12;transform:translate(.55px,.3px)}
.nav-item>.g-icon-wrap{
  width:32px;height:31px;flex-basis:32px;border-radius:11px;
  background:transparent!important;
}
.nav-item>.g-icon-wrap::after{display:none}
.nav-item>.g-icon-wrap .g-icon{width:23px;height:23px}
.nav-item.active>.g-icon-wrap{
  background:var(--accent-soft)!important;
  transform:rotate(-2deg) scale(1.05);
}
.daily-action>.g-icon-wrap,.quick-card>.g-icon-wrap,.role-more-card>.g-icon-wrap,.record-card>.g-icon-wrap{
  background:linear-gradient(145deg,var(--accent-soft),color-mix(in srgb,var(--surface) 75%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.quick-add-menu button>.g-icon-wrap,
.settings-card.action-card>.g-icon-wrap{
  width:36px;height:36px;flex:0 0 36px;border-radius:12px;
}
.settings-card.action-card{
  display:flex!important;
  align-items:center;
  gap:11px;
}
.stat-card>.g-icon-wrap{
  width:38px;height:38px;flex:0 0 38px;margin:0 auto 4px;
}

/* graffiti strokes around active / primary cards */
:is(.nav-item.active,.record-card.active,.daily-action.primary-action,.manager-attendance-card.awaiting)::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:4px;
  border:1.5px solid color-mix(in srgb,var(--primary) 48%,transparent);
  border-radius:inherit;
  opacity:.28;
  transform:rotate(-.35deg) translate(.5px,-.5px);
}
:is(.nav-item,.record-card,.daily-action,.manager-attendance-card){position:relative}

/* opening kinetics */
.header-popover-card,
.notification-center-card,
.quick-add-menu,
.record-actions-popover,
.record-student-picker-panel{
  transform-origin:top right;
}
details[open]>.header-popover-card,
details[open]>.notification-center-card{
  animation:menuPopIn .25s cubic-bezier(.16,1,.3,1) both;
}
.quick-add-menu:not(.hidden){
  animation:fabMenuIn .27s cubic-bezier(.16,1,.3,1) both;
}
@keyframes menuPopIn{
  0%{opacity:0;transform:translateY(-10px) scale(.955);filter:blur(3px)}
  62%{transform:translateY(2px) scale(1.008);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes fabMenuIn{
  0%{opacity:0;transform:translateY(16px) scale(.94) rotate(-1.5deg)}
  68%{opacity:1;transform:translateY(-2px) scale(1.01) rotate(.25deg)}
  100%{transform:none}
}
.settings-card[open]>summary::after{
  content:"⌁";
  position:absolute;
  inset-inline-end:2px;
  color:var(--primary);
  font-size:1.25rem;
  animation:scribbleTick .3s ease both;
}
@keyframes scribbleTick{from{opacity:0;transform:translateX(6px) rotate(-12deg)}to{opacity:1;transform:none}}
.settings-card>summary{transition:color .18s ease,padding .18s ease}
.settings-card[open]>summary{padding-inline-start:7px}
.settings-card[open]{
  box-shadow:0 18px 44px color-mix(in srgb,var(--accent-glow) 34%,transparent);
}

/* list item entrance, noticeable but not slow */
.page.active :is(
  .daily-action,.quick-card,.record-card,.settings-card,.student-row,.history-card,
  .manager-attendance-card,.attendance-teacher-class-card,.attendance-class-card,
  .classroom-card,.announcement-manage-card,.finance-student-card,.staff-payroll-card
){
  animation:kineticCardIn .42s cubic-bezier(.18,.9,.24,1) both;
}
@keyframes kineticCardIn{
  from{opacity:0;transform:translateY(16px) rotate(.18deg) scale(.985)}
  65%{opacity:1;transform:translateY(-2px) rotate(-.08deg) scale(1.002)}
  to{opacity:1;transform:none}
}

/* button / icon micro interactions */
@media(hover:hover){
  :is(.nav-item,.daily-action,.quick-card,.record-card,.role-more-card,.settings-card.action-card):hover .g-icon{
    transform:rotate(-4deg) scale(1.08);
  }
}
.g-icon{transition:transform .18s cubic-bezier(.2,.8,.2,1)}
:is(.nav-item,.daily-action,.quick-card,.record-card,.role-more-card,.settings-card.action-card):active .g-icon{
  transform:rotate(5deg) scale(.92);
}
.quick-add-fab::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1.5px dashed color-mix(in srgb,var(--primary) 55%,transparent);
  border-radius:50%;
  animation:graffitiOrbit 10s linear infinite;
}
@keyframes graffitiOrbit{to{transform:rotate(360deg)}}

/* modal spring */
dialog[open]{animation:dialogFadeIn .22s ease both}
dialog[open] .modal-card{
  animation:dialogSpringIn .36s cubic-bezier(.16,1,.3,1) both!important;
}
@keyframes dialogFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dialogSpringIn{
  0%{opacity:0;transform:translateY(24px) scale(.955)}
  65%{opacity:1;transform:translateY(-3px) scale(1.006)}
  100%{transform:none}
}

/* page title motion */
body[data-page] #pageTitle{animation:titleSketchIn .36s cubic-bezier(.2,.9,.2,1)}
@keyframes titleSketchIn{
  from{opacity:.2;transform:translateX(9px);letter-spacing:.02em}
  to{opacity:1;transform:none;letter-spacing:-.012em}
}

body.reduce-motion .quick-add-fab::before{animation:none!important}


/* =========================================================
   v23.2 — cinematic mobile motion + premium graffiti polish
   ========================================================= */
:root{
  --motion-spring:cubic-bezier(.16,1,.3,1);
  --motion-snap:cubic-bezier(.2,.9,.2,1);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background:radial-gradient(circle at 84% 8%,var(--accent-glow),transparent 26%),
             radial-gradient(circle at 8% 82%,color-mix(in srgb,var(--primary-2) 7%,transparent),transparent 30%);
  opacity:.32;mix-blend-mode:multiply;
}
html[data-theme="dark"] body::after{opacity:.22;mix-blend-mode:screen}
.cinematic-page-in{animation:cinematicPageIn .48s var(--motion-spring) both!important}
@keyframes cinematicPageIn{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.985);filter:blur(4px)}
  58%{opacity:1;transform:translate3d(0,-2px,0) scale(1.002);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
.page.active .hero{animation:heroSweep .58s var(--motion-spring) both;overflow:hidden;position:relative}
.page.active .hero::after{
  content:"";position:absolute;inset:-70% -35%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%);
  transform:translateX(80%) rotate(7deg);animation:heroInkSweep .9s .12s var(--motion-spring) both;
}
@keyframes heroSweep{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes heroInkSweep{to{transform:translateX(-80%) rotate(7deg)}}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card){
  transform-origin:50% 80%;
  animation-name:premiumStagger!important;
  animation-duration:.5s!important;
  animation-timing-function:var(--motion-spring)!important;
}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card):nth-child(1){animation-delay:.025s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card):nth-child(2){animation-delay:.055s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card):nth-child(3){animation-delay:.085s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card):nth-child(4){animation-delay:.115s}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card):nth-child(n+5){animation-delay:.145s}
@keyframes premiumStagger{
  0%{opacity:0;transform:translateY(20px) scale(.965) rotate(.35deg)}
  65%{opacity:1;transform:translateY(-2px) scale(1.006) rotate(-.08deg)}
  100%{opacity:1;transform:none}
}
.nav-item{
  isolation:isolate;transition:color .2s ease,background .24s ease,transform .22s var(--motion-spring)!important;
}
.nav-item::before{
  content:"";position:absolute;inset:3px 8px;border-radius:13px;z-index:-1;
  background:var(--accent-soft);opacity:0;transform:scale(.55) rotate(-4deg);
  transition:opacity .2s ease,transform .32s var(--motion-spring);
}
.nav-item.active::before{opacity:1;transform:scale(1) rotate(-1deg)}
.nav-item.active{transform:translateY(-3px)}
.nav-item.nav-pulse .g-icon-wrap{animation:navIconPop .38s var(--motion-spring)}
@keyframes navIconPop{0%{transform:scale(.82) rotate(7deg)}55%{transform:scale(1.16) rotate(-5deg)}100%{transform:scale(1.05) rotate(-2deg)}}
.g-icon-wrap{
  transition:transform .25s var(--motion-spring),box-shadow .25s ease,background .25s ease!important;
}
:is(.quick-card,.daily-action,.record-card,.role-more-card,.settings-card.action-card):active .g-icon-wrap{
  transform:scale(.9) rotate(6deg);box-shadow:0 0 0 6px var(--accent-soft);
}
:is(button,.quick-card,.daily-action,.record-card,.role-more-card,summary).ui-pressed{filter:saturate(1.08)}
.quick-card,.daily-action,.record-card,.role-more-card,.settings-card{
  transition:transform .22s var(--motion-spring),border-color .22s ease,box-shadow .25s ease,background .25s ease;
}
@media(hover:hover){
  :is(.quick-card,.daily-action,.record-card,.role-more-card,.settings-card):hover{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 28%,var(--border));
    box-shadow:0 15px 34px color-mix(in srgb,var(--accent-glow) 30%,transparent);
  }
}
details[open]>.notification-center-card,
details[open]>.header-popover-card{
  animation:premiumPopover .34s var(--motion-spring) both!important;
}
@keyframes premiumPopover{
  0%{opacity:0;transform:translateY(-14px) scale(.94) rotate(-.5deg);filter:blur(5px)}
  62%{opacity:1;transform:translateY(2px) scale(1.008);filter:blur(0)}
  100%{transform:none;filter:none}
}
.quick-add-menu:not(.hidden){animation:premiumFabMenu .36s var(--motion-spring) both!important}
.quick-add-menu:not(.hidden)>*{animation:premiumMenuItem .38s var(--motion-spring) both}
.quick-add-menu:not(.hidden)>*:nth-child(2){animation-delay:.035s}
.quick-add-menu:not(.hidden)>*:nth-child(3){animation-delay:.07s}
.quick-add-menu:not(.hidden)>*:nth-child(4){animation-delay:.105s}
@keyframes premiumFabMenu{from{opacity:0;transform:translateY(22px) scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes premiumMenuItem{from{opacity:0;transform:translateX(-10px) scale(.92)}to{opacity:1;transform:none}}
dialog[open] .modal-card{animation:premiumDialog .42s var(--motion-spring) both!important}
@keyframes premiumDialog{
  0%{opacity:0;transform:translateY(32px) scale(.92);filter:blur(5px)}
  60%{opacity:1;transform:translateY(-4px) scale(1.008);filter:blur(0)}
  100%{transform:none;filter:none}
}
.toast.show{animation:toastBounce .42s var(--motion-spring) both}
@keyframes toastBounce{0%{opacity:0;transform:translate(-50%,-36px) scale(.9)}65%{opacity:1;transform:translate(-50%,4px) scale(1.01)}100%{transform:translate(-50%,0)}}
.notification-unread-badge:not(.hidden){animation:badgeBreath 1.8s ease-in-out infinite}
@keyframes badgeBreath{50%{transform:scale(1.18);box-shadow:0 0 0 5px rgba(244,63,94,.10)}}
.attendance-rollcall-launcher,.rollcall-current-card{position:relative;overflow:hidden}
.rollcall-current-card::before{
  content:"";position:absolute;inset-inline-start:0;top:15%;height:70%;width:3px;border-radius:99px;background:var(--primary);
  animation:attendanceMarker 1.7s ease-in-out infinite;
}
@keyframes attendanceMarker{50%{transform:scaleY(.55);opacity:.45}}
@media(max-width:620px){
  .bottom-nav{box-shadow:0 16px 50px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.55)}
  .nav-item small{transition:transform .22s var(--motion-spring),opacity .2s ease}
  .nav-item.active small{transform:translateY(-1px)}
}
body.reduce-motion::after{display:none}
body.reduce-motion .notification-unread-badge,
body.reduce-motion .rollcall-current-card::before{animation:none!important}


/* v23.3 — iPhone viewport + modal background stability */
:root{--vv-bottom:0px}
.bottom-nav{
  bottom:var(--vv-bottom)!important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
body.dialog-open,
body:has(dialog[open]){overflow:hidden!important;overscroll-behavior:none}
body.dialog-open .app-shell,
body:has(dialog[open]) .app-shell{
  overscroll-behavior:none;
}
body.dialog-open .app-shell :is(.page,.hero,.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card,.g-icon-wrap),
body:has(dialog[open]) .app-shell :is(.page,.hero,.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card,.g-icon-wrap){
  animation-play-state:paused!important;
  transition:none!important;
}
body.dialog-open .bottom-nav,
body:has(dialog[open]) .bottom-nav{pointer-events:none}
.modal[open]{
  position:fixed;
  inset:0;
  margin:auto;
  max-height:min(92dvh,calc(100dvh - 24px));
  overscroll-behavior:contain;
}
.modal[open] .modal-card{
  max-height:min(92dvh,calc(100dvh - 24px));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.profile-modal[open],.profile-modal[open] .profile-card{
  max-height:min(92dvh,calc(100dvh - 24px));
}
@supports(height:100svh){
  .modal[open]{max-height:min(92svh,calc(100svh - 24px))}
  .modal[open] .modal-card,.profile-modal[open],.profile-modal[open] .profile-card{max-height:min(92svh,calc(100svh - 24px))}
}
@media(min-width:700px){
  .bottom-nav{bottom:calc(14px + var(--vv-bottom))!important;transform:translateX(-50%) translateZ(0);-webkit-transform:translateX(-50%) translateZ(0)}
}


/* v23.4 — hardened iOS modal + bottom navigation behavior */
:root{--vv-height:100dvh}
.bottom-nav{
  bottom:calc(var(--vv-bottom) + 8px + var(--safe-bottom))!important;
  padding-bottom:7px!important;
}
body.dialog-open{
  height:var(--vv-height);
  overflow:hidden!important;
  touch-action:none;
}
body.dialog-open .app-shell{
  height:var(--vv-height);
  overflow:hidden!important;
}
body.dialog-open dialog[open]{
  touch-action:pan-y;
}
body.dialog-open dialog[open] .modal-card,
body.dialog-open dialog[open] .profile-card{
  touch-action:pan-y;
}
.modal[open]{
  width:min(94vw,520px);
  max-width:calc(100vw - 20px);
}
.profile-modal[open]{width:min(96vw,640px)}
.modal[open]::backdrop{
  background:rgba(4,8,18,.66);
  backdrop-filter:blur(10px) saturate(.8);
  -webkit-backdrop-filter:blur(10px) saturate(.8);
}
.modal[open] .modal-card{
  overscroll-behavior-y:contain;
  scrollbar-gutter:stable;
}
.profile-modal[open] .profile-card{
  overscroll-behavior-y:contain;
}
@media(max-width:620px){
  .modal[open]{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    margin:auto;
  }
  .profile-modal[open]{
    width:calc(100vw - 12px);
    max-width:calc(100vw - 12px);
  }
  .modal[open] .modal-card{
    border-radius:24px;
    padding:16px;
  }
}
@media(min-width:700px){
  .bottom-nav{bottom:calc(var(--vv-bottom) + 14px + var(--safe-bottom))!important}
}


/* v23.5 — hard-pin mobile navigation to the visual viewport */
@media(max-width:699px){
  html,body{transform:none!important;filter:none!important;perspective:none!important}
  .bottom-nav{
    position:fixed!important;
    z-index:2147483000!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    transform:translate3d(0,0,0)!important;
    -webkit-transform:translate3d(0,0,0)!important;
    contain:layout style paint;
    isolation:isolate;
  }
  .app-shell{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
}


/* v23.6 — structural viewport dock: nav is outside #appView */
#appView.hidden + .bottom-nav{display:none!important}
.bottom-nav{
  position:fixed!important;
  z-index:2147483640!important;
  top:auto!important;
  left:max(8px,env(safe-area-inset-left))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
  -webkit-transform:none!important;
  will-change:auto!important;
  contain:layout paint!important;
  isolation:isolate!important;
}
@media(max-width:699px){
  .bottom-nav{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  #appView{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
}
@media(min-width:700px){
  .bottom-nav{
    left:50%!important;
    right:auto!important;
    width:min(760px,calc(100vw - 32px))!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    -webkit-transform:translateX(-50%)!important;
  }
}


/* v23.7 — complete graffiti icon polish */
.utility-g-icon{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
  border-radius:11px!important;background:var(--accent-soft)!important;
}
.icon-button .utility-g-icon,
.header-popover>summary .utility-g-icon{
  width:30px!important;height:30px!important;flex-basis:30px!important;background:transparent!important;
}
.icon-button .utility-g-icon::after,
.header-popover>summary .utility-g-icon::after{display:none}
#profileButton,#themeQuickToggle,#loginThemeToggle,#notificationPopover>summary{
  display:grid!important;place-items:center!important;padding:0!important;
}
#themeQuickIcon,#loginThemeIcon{display:grid;place-items:center}
#themeQuickIcon .g-icon,#loginThemeIcon .g-icon{width:22px;height:22px}
#notificationPopover>summary>.g-icon-wrap,#profileButton>.g-icon-wrap{
  margin:auto!important;
}
:is(#accountPopoverPassword,#accountPopoverLogout,#enableNotificationsButton,#recordStudentPickerButton,
#printInvestorMonthlyReport,#paperGradesButton,#exportClassExcel,#printClassReport,#backupClassJson,
#saveRecordSnapshot,#shareCurrentRecord,#exportRecordCsv,#printRecordButtonMobile,#fullBackupButton,
#restoreBackupButton,#changeOwnPasswordButton){
  display:inline-flex!important;align-items:center!important;gap:8px!important;
}
.investor-quick-actions button .g-icon-wrap{width:38px;height:38px;flex-basis:38px}
.stat-icon.g-icon-wrap{margin-inline:auto}


/* v23.9 — icon cleanup + unified student avatars */
.field-g-icon{width:28px!important;height:28px!important;flex:0 0 28px!important;background:transparent!important;box-shadow:none!important}
.field-g-icon::after{display:none!important}
.g-inline-icon{display:inline-grid;width:18px;height:18px;vertical-align:-4px;margin-inline:2px}
.g-inline-icon .g-icon{width:18px;height:18px}
.feed-icon.g-icon-wrap{width:42px!important;height:42px!important;flex:0 0 42px!important}
details.settings-card>summary{
  display:flex!important;align-items:center!important;gap:10px!important;
}
details.settings-card>summary>.g-icon-wrap{
  width:36px!important;height:36px!important;flex:0 0 36px!important;margin-inline-end:2px!important;
}
.student-avatar-unified{display:inline-grid;place-items:center;width:100%;height:100%}
.student-avatar-unified svg{width:100%;height:100%;display:block;overflow:visible}
.student-avatar-bg{fill:color-mix(in srgb,var(--primary) 12%,var(--surface));stroke:color-mix(in srgb,var(--primary) 55%,var(--border));stroke-width:1.5}
.student-avatar-head{fill:color-mix(in srgb,var(--primary) 82%,white)}
.student-avatar-body{fill:color-mix(in srgb,var(--primary) 66%,var(--surface));stroke:var(--primary);stroke-width:1.4}
.student-avatar-shirt{fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.student-avatar-tie{fill:none;stroke:white;stroke-width:2;stroke-linecap:round}
.avatar:has(.student-avatar-unified),.rollcall-avatar:has(.student-avatar-unified){padding:3px!important;background:transparent!important;color:transparent!important}
.avatar:has(.student-avatar-unified){width:48px;height:48px}
.rollcall-avatar:has(.student-avatar-unified){width:64px;height:64px}


/* v24.0 mobile screenshot cleanup */
@media (max-width:700px){
  /* Keep utility actions clean and prevent accidental legacy/duplicate glyphs. */
  #studentsPage .section-head .btn,
  #recordsPage .section-head .btn{min-width:0;white-space:nowrap}
  #studentsPage .toolbar,
  #studentsPage .filters,
  #recordsPage .toolbar,
  #recordsPage .filters{gap:12px;align-items:stretch}
  #studentsPage input[type="search"],
  #recordsPage input[type="search"]{width:100%;min-width:0}
  #recordsPage table{width:100%;table-layout:fixed}
  #recordsPage th,#recordsPage td{overflow-wrap:anywhere;word-break:normal}
  #recordsPage select{max-width:100%;min-width:0}
  #announcementsPage [class*="announcement"]{overflow:hidden}
  #announcementsPage [class*="announcement"] img{max-width:100%}
  #chatsPage .chat-person{grid-template-columns:auto minmax(0,1fr);align-items:center}
  #chatsPage .chat-avatar{flex:0 0 auto;overflow:hidden;white-space:nowrap}
  #chatsPage .chat-person-main{min-width:0}
  #chatsPage .chat-person-main b,#chatsPage .chat-person-main small{overflow:hidden;text-overflow:ellipsis}
  #morePage button,#morePage .card{min-width:0}
}
/* Hide legacy emoji/text fallbacks when a graffiti SVG was injected. */
.graffiti-icon + .legacy-icon,
.graffiti-icon + [aria-hidden="true"].emoji-icon{display:none!important}


/* v24.0 highlighted mobile cleanup */
#studentsPage .toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#importStudentsButton,#printRecordButton,#recordStudentPickerButton{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
}
#recordStudentPickerButton>.g-icon-wrap,#importStudentsButton>.g-icon-wrap,#printRecordButton>.g-icon-wrap{flex:0 0 28px}
#announcementManagementCard{overflow:hidden}
#announcementManagementCard>.g-icon-wrap{flex:0 0 36px}
#logoutButton{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;
  min-height:78px;padding:16px!important;text-align:right!important;
}
#logoutButton>.g-icon-wrap{width:38px!important;height:38px!important;flex:0 0 38px!important;margin:0!important}
#logoutButton>span:not(.g-icon-wrap){display:block;min-width:0}
.announcement-manage-card .feed-icon.g-icon-wrap{width:42px!important;height:42px!important;flex:0 0 42px!important;font-size:0!important}
.announcement-manage-card .feed-icon .g-icon{width:23px;height:23px}
.chat-avatar{overflow:hidden}
.chat-avatar>.chat-role-icon,.chat-avatar>.student-avatar-unified{width:100%;height:100%;display:grid;place-items:center}
.chat-role-icon .g-icon{width:23px;height:23px}
.chat-avatar .student-avatar-unified{width:42px;height:42px}
.chat-thread-header>.chat-avatar>.g-icon{width:23px;height:23px}

@media(max-width:700px){
  #studentsPage .page-toolbar{align-items:flex-start;gap:12px}
  #studentsPage .toolbar-actions{width:100%}
  #studentsPage .toolbar-actions .btn{min-height:48px}
  #studentsPage .student-tools{grid-template-columns:minmax(0,1fr) auto!important;gap:10px}
  #studentsPage .student-tools .search-box{min-width:0;margin:0}
  #studentsPage .student-tools #studentSort{min-width:122px;max-width:42vw}
  #importStudentsButton{min-width:118px}

  #recordsPage .page-toolbar{align-items:flex-start}
  #printRecordButton{min-width:112px;min-height:46px}
  #recordsPage .record-toolbar{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;align-items:stretch!important;
  }
  #recordsPage #recordTeacherSelect{grid-column:1/-1!important}
  #recordsPage #recordSubjectSelect{grid-column:1/2!important;min-width:0!important;width:100%!important}
  #recordsPage .record-student-picker{grid-column:2/3!important;min-width:0!important;position:relative}
  #recordStudentPickerButton{width:100%!important;min-width:0!important;min-height:46px!important;padding:10px 12px!important}
  #recordStudentPickerButton>span:not(.g-icon-wrap){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #recordsPage .record-actions-menu,#recordsPage #newGradeRegister,#recordsPage #recordTemplateSelect{grid-column:1/-1!important;width:100%!important}
  #recordsPage .record-actions-menu>summary{width:100%;text-align:center}
  #recordsPage .record-content{overflow-x:auto!important;padding:12px!important}
  #recordsPage .records-table{width:max-content!important;min-width:100%!important;table-layout:auto!important}
  #recordsPage .records-table th,#recordsPage .records-table td{white-space:nowrap!important}
  #recordsPage .record-student-picker-panel{
    position:absolute!important;inset-inline-end:0!important;top:calc(100% + 8px)!important;
    width:min(86vw,360px)!important;max-width:none!important;z-index:80!important;
  }

  #announcementsPage .announcement-manage-card header{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important}
  #announcementsPage .announcement-manage-card header>div{min-width:0}
  #announcementsPage .announcement-manage-card h3{overflow-wrap:anywhere}
  #announcementsPage .announcement-manage-card>p{overflow-wrap:anywhere}

  #chatsPage .chat-person{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:11px!important}
  #chatsPage .chat-avatar{width:46px!important;height:46px!important;flex-basis:46px!important;border-radius:15px!important}
  #chatsPage .chat-person-main{min-width:0!important}
  #chatsPage .chat-person-top,#chatsPage .chat-person-bottom{min-width:0}
  #chatsPage .chat-person b,#chatsPage .chat-person small{max-width:100%}

  #morePage #communicationToolsGrid .action-card,
  #morePage #logoutButton{min-height:82px}
}


/* v24.1 compact import button */
#studentsPage .toolbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#importStudentsButton{
  min-width:0!important;
  width:auto!important;
  min-height:44px!important;
  padding:9px 13px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#importStudentsButton>.g-icon-wrap{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  margin:0!important;
}
#importStudentsButton .g-icon{
  width:20px!important;
  height:20px!important;
}
#importStudentsButton>span:not(.g-icon-wrap){
  font-size:.86rem!important;
  font-weight:800!important;
}
@media(max-width:700px){
  #studentsPage .toolbar-actions{
    width:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }
  #studentsPage .toolbar-actions .btn{
    min-height:44px!important;
  }
  #openAddStudent{
    padding-inline:14px!important;
    min-width:0!important;
    width:auto!important;
  }
  #importStudentsButton{
    padding:8px 12px!important;
  }
}


/* v24.2 remove legacy print pseudo icon */
#recordsPage #printRecordButton::before{content:none!important;display:none!important}


/* v24.4 unified teacher avatar */
.teacher-avatar-unified{
  width:42px;height:42px;display:inline-grid;place-items:center;
}
.teacher-avatar-unified svg{width:42px;height:42px;display:block}
.teacher-avatar-bg{fill:color-mix(in srgb,var(--primary) 14%,var(--surface));stroke:var(--primary);stroke-width:1.6}
.teacher-avatar-head,.teacher-avatar-body{fill:var(--primary)}
.teacher-avatar-shirt,.teacher-avatar-tie{fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-avatar>.teacher-avatar-unified{width:100%;height:100%;display:grid;place-items:center}


/* v24.5 premium login face */
#loginView{
  background:
    radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--primary) 17%,transparent),transparent 34%),
    radial-gradient(circle at 12% 42%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 28%),
    var(--bg);
}
#loginView .login-card{
  position:relative;
  overflow:hidden;
  padding:34px 28px 30px;
  border-radius:30px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 96%,var(--primary) 4%),var(--surface));
}
#loginView .login-card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.8;
}
#loginThemeToggle{
  position:absolute!important;top:18px!important;inset-inline-start:18px!important;
  width:44px!important;height:44px!important;border-radius:14px!important;
  border:1px solid var(--border)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.08)!important;
}
#loginThemeToggle #loginThemeIcon{width:100%;height:100%;display:grid!important;place-items:center!important}
#loginThemeToggle #loginThemeIcon>.g-icon{width:22px!important;height:22px!important}
#loginThemeToggle #loginThemeIcon::before,#loginThemeToggle #loginThemeIcon::after{content:none!important;display:none!important}

#loginView .brand-mark{
  width:82px!important;height:82px!important;margin:4px auto 14px!important;padding:0!important;
  border-radius:25px!important;
  background:linear-gradient(145deg,#3478ff,#1554d8)!important;
  color:#fff!important;
  box-shadow:0 16px 34px color-mix(in srgb,var(--primary) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.28)!important;
  display:grid!important;place-items:center!important;transform:none!important;
}
.brand-logo-svg{width:57px;height:57px;display:block;overflow:visible}
.brand-school{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:2.3;stroke-linejoin:round}
.brand-roof{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.brand-door,.brand-window{fill:#fff;opacity:.96}
.brand-book{fill:#fff;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.brand-book-line{fill:none;stroke:#1f62e8;stroke-width:1.8;stroke-linecap:round}
#loginView .login-card>h1{font-size:1.75rem!important;letter-spacing:-.02em;margin-bottom:4px!important}
#loginView .login-card>p.muted{max-width:310px;margin-inline:auto!important;font-size:.92rem}
#loginView #loginButton{
  min-height:54px!important;border-radius:16px!important;
  background:linear-gradient(135deg,#3478ff,#1e58df)!important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--primary) 25%,transparent);
}
@media(max-width:480px){
  #loginView.login-shell{padding:18px!important}
  #loginView .login-card{padding:30px 22px 24px!important;border-radius:28px!important}
  #loginView .brand-mark{width:76px!important;height:76px!important}
  .brand-logo-svg{width:52px;height:52px}
}


/* v24.6 reliable login theme toggle */
#loginThemeToggle{
  color:var(--primary)!important;
  background:color-mix(in srgb,var(--surface) 92%,var(--primary) 8%)!important;
  border-color:color-mix(in srgb,var(--border) 72%,var(--primary) 28%)!important;
}
#loginThemeToggle #loginThemeIcon{display:grid!important;place-items:center!important;width:100%!important;height:100%!important}
.login-theme-svg{width:23px!important;height:23px!important;display:block!important;overflow:visible!important}
.login-theme-svg .theme-moon-path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#loginThemeToggle:hover{transform:translateY(-1px)}


/* v24.8 account settings icon cleanup */
#accountSettingsCard .settings-actions .settings-icon-btn{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  min-height:58px!important;
  padding:12px 14px!important;
  overflow:hidden!important;
  text-align:right!important;
}
#accountSettingsCard .settings-actions .settings-icon-btn>.g-icon-wrap{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
  display:grid!important;place-items:center!important;margin:0!important;
  border-radius:11px!important;background:color-mix(in srgb,var(--primary) 12%,transparent)!important;
}
#accountSettingsCard .settings-actions .settings-icon-btn>.g-icon-wrap .g-icon{width:21px!important;height:21px!important}
#accountSettingsCard .settings-actions .settings-icon-btn>span:not(.g-icon-wrap){
  min-width:0!important;font-size:.94rem!important;font-weight:800!important;line-height:1.35!important;
}
#accountSettingsCard .settings-actions .settings-icon-btn::before,
#accountSettingsCard .settings-actions .settings-icon-btn::after{content:none!important;display:none!important}
@media(max-width:700px){
 #accountSettingsCard .settings-actions{
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
 }
 #accountSettingsCard .settings-actions .settings-icon-btn{width:100%!important;min-width:0!important}
}


/* v24.9 modern account surfaces */
#accountPopover .account-popover-head .account-avatar{
  width:48px!important;height:48px!important;border-radius:16px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 18%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface)))!important;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border))!important;
  color:var(--primary)!important;font-size:0!important;overflow:hidden!important;
}
#accountPopover .account-popover-head .account-avatar>.g-icon-wrap{
  width:30px!important;height:30px!important;background:transparent!important;box-shadow:none!important;
}
#accountPopover .account-modern-action{
  display:flex!important;align-items:center!important;gap:12px!important;
  min-height:56px!important;padding:10px 12px!important;border-radius:15px!important;
  font-weight:800!important;
}
#accountPopover .account-modern-action>.g-icon-wrap{
  width:36px!important;height:36px!important;flex:0 0 36px!important;
  display:grid!important;place-items:center!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--primary) 12%,transparent)!important;
}
#accountPopover .account-modern-action>.g-icon-wrap .g-icon{width:21px!important;height:21px!important}
#accountPopover .account-popover-danger>.g-icon-wrap{
  background:color-mix(in srgb,#ef4444 12%,transparent)!important;color:#ef4444!important;
}
#accountSettingsCard .settings-actions .settings-icon-btn>.g-icon-wrap{
  color:var(--primary)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 15%,transparent),color-mix(in srgb,var(--primary) 7%,transparent))!important;
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent)!important;
}


/* v25.0 account onboarding and role avatars */
.account-request-entry{margin-top:10px!important}
.account-request-card{gap:16px!important}
.account-request-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.account-request-note{
  border:1px solid var(--border);background:var(--surface-2);border-radius:16px;
  padding:13px 14px;text-align:right;
}
.account-request-note strong{display:block;margin-bottom:6px}
.account-request-note p{margin:0;color:var(--muted);line-height:1.8;font-size:.84rem}
.app-rights-footer{
  text-align:center;color:var(--muted);font-size:.72rem;
  padding:18px 12px calc(22px + var(--safe-bottom));opacity:.9;
}
.role-avatar-unified{width:42px;height:42px;display:inline-grid;place-items:center}
.role-avatar-unified svg{width:42px;height:42px;display:block}
.role-avatar-bg{fill:color-mix(in srgb,var(--primary) 13%,var(--surface));stroke:color-mix(in srgb,var(--primary) 50%,var(--border));stroke-width:1.5}
.role-avatar-head,.role-avatar-body{fill:color-mix(in srgb,var(--primary) 82%,white)}
.role-avatar-shirt,.role-avatar-tie{fill:none;stroke:var(--surface);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.role-avatar-badge{fill:color-mix(in srgb,#f59e0b 86%,white)}
.investor-role-avatar .role-avatar-bg{fill:color-mix(in srgb,#8b5cf6 12%,var(--surface));stroke:color-mix(in srgb,#8b5cf6 48%,var(--border))}
.investor-role-avatar .role-avatar-head,.investor-role-avatar .role-avatar-body{fill:color-mix(in srgb,#8b5cf6 82%,white)}
.admin-role-avatar .role-avatar-bg{fill:color-mix(in srgb,#2563eb 12%,var(--surface));stroke:color-mix(in srgb,#2563eb 50%,var(--border))}
#accountPopoverAvatar>.role-avatar-unified{width:44px;height:44px}
#accountPopoverAvatar>.role-avatar-unified svg{width:44px;height:44px}
.remembered-account-card .avatar>.role-avatar-unified{width:100%;height:100%}
.remembered-account-card .avatar>.role-avatar-unified svg{width:100%;height:100%}
@media(max-width:520px){
  .account-request-actions{grid-template-columns:1fr}
}


/* v25.1 account request sheet + rights */
.login-rights-footer{
  width:min(100%,420px);
  margin:14px auto 0;
  display:grid;
  justify-items:center;
  gap:5px;
  text-align:center;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.5;
}
.login-rights-footer strong{color:var(--text);font-size:.76rem}
.developer-whatsapp-link{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,#25d366 35%,var(--border));
  background:color-mix(in srgb,#25d366 10%,var(--surface));
  color:color-mix(in srgb,#25d366 76%,var(--text));
  font-weight:800;
  text-decoration:none;
}
.account-request-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.account-request-overlay.hidden{display:none!important}
.account-request-sheet{
  width:min(100%,460px);
  max-height:min(82dvh,720px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:20px;
  border-radius:26px 26px 20px 20px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:0 28px 70px rgba(0,0,0,.32);
}
.account-request-intro{margin-bottom:14px}
.account-contact-row{
  width:100%;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:68px;
  padding:11px 12px;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:17px;
  background:var(--surface-2);
  color:var(--text);
  text-align:right;
  text-decoration:none;
}
.account-contact-row>span:last-child{display:grid;gap:3px;min-width:0}
.account-contact-row b{font-size:.94rem}
.account-contact-row small{color:var(--muted);font-size:.76rem;line-height:1.5}
.contact-badge{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:13px;
  background:var(--accent-soft);
  color:var(--primary);
  font-size:.78rem;
  font-weight:900;
}
.whatsapp-row{
  border-color:color-mix(in srgb,#25d366 34%,var(--border));
  background:color-mix(in srgb,#25d366 8%,var(--surface));
}
.whatsapp-row .contact-badge{
  background:color-mix(in srgb,#25d366 18%,var(--surface));
  color:#16a34a;
}
.account-request-note{margin-top:14px}
body.account-request-open{overflow:hidden}
@media(min-width:700px){
  .account-request-overlay{align-items:center}
  .account-request-sheet{border-radius:26px}
}

/* v25.2 reliable inline signup */
.developer-whatsapp-link{font:inherit;cursor:pointer}
.account-request-details{width:100%;margin:0}
.account-request-details>summary{list-style:none;cursor:pointer;box-sizing:border-box}
.account-request-details>summary::-webkit-details-marker{display:none}
.account-request-inline{
  margin-top:10px;padding:14px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface-2);display:grid;gap:10px;text-align:right
}
.account-request-inline .btn{width:100%}
.account-request-text{margin:0;padding:10px;border-radius:12px;background:var(--surface);font-size:.78rem;color:var(--muted);line-height:1.7}


/* v25.3 simplified account guidance */
.account-request-info-only{
  gap:8px!important;
  padding:16px!important;
}
.account-request-info-only strong{
  font-size:1rem;
}
.account-request-guidance{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.9;
}
.account-request-guidance b{
  color:var(--text);
  font-weight:900;
}

/* v25.4 records mobile picker alignment fix */
@media(max-width:700px){
 #recordsPage .record-toolbar{
   grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
   direction:rtl!important;
 }
 #recordsPage #recordSubjectSelect{
   grid-column:1/2!important;
   grid-row:auto!important;
   width:100%!important;
   min-width:0!important;
 }
 #recordsPage .record-student-picker{
   grid-column:2/3!important;
   grid-row:auto!important;
   width:100%!important;
   min-width:0!important;
   overflow:visible!important;
 }
 #recordsPage #recordStudentPickerButton{
   width:100%!important;
   min-width:0!important;
   max-width:100%!important;
   height:50px!important;
   padding:0 14px!important;
   display:flex!important;
   align-items:center!important;
   justify-content:center!important;
   gap:0!important;
   overflow:hidden!important;
   white-space:nowrap!important;
 }
 #recordsPage #recordStudentPickerButton>.g-icon-wrap{
   display:none!important;
 }
 #recordsPage #recordStudentPickerButton>span:not(.g-icon-wrap){
   display:block!important;
   width:100%!important;
   min-width:0!important;
   overflow:hidden!important;
   text-overflow:ellipsis!important;
   white-space:nowrap!important;
   text-align:center!important;
   line-height:1.2!important;
 }
 #recordsPage .record-student-picker-panel{
   inset-inline:0!important;
   width:100%!important;
   min-width:min(82vw,340px)!important;
   max-width:min(82vw,340px)!important;
 }
}

/* v25.5 simplified records student filter */
#recordsPage .record-student-select{
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  border:1px solid var(--border)!important;
  border-radius:15px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  padding:0 14px!important;
  font:inherit!important;
  font-weight:800!important;
}
@media(max-width:700px){
  #recordsPage .record-toolbar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
  }
  #recordsPage #recordSubjectSelect,
  #recordsPage #recordStudentSelect{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    height:50px!important;
  }
  #recordsPage .record-student-picker,
  #recordsPage #recordStudentPickerButton,
  #recordsPage #recordStudentPickerPanel{
    display:none!important;
  }
}

/* v25.7 announcement unpin */
.announcement-manage-actions .unpin-announcement{font-weight:800}

/* v25.8 composer polish */
#announcementDialog #announcementType{font-weight:850;background-image:none}
#announcementDialog .announcement-section-title>span.announcement-recipient-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(47,111,237,.14);border:1px solid rgba(76,137,255,.28);color:#4d8cff;font-size:0;position:relative}
#announcementDialog .announcement-section-title>span.announcement-recipient-icon:before{content:"";width:9px;height:9px;border:2px solid currentColor;border-radius:50%;position:absolute;top:8px;right:14px}
#announcementDialog .announcement-section-title>span.announcement-recipient-icon:after{content:"";width:19px;height:9px;border:2px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0;position:absolute;bottom:8px;right:9px}
#saveAnnouncementButton.announcement-publish-button{position:relative;bottom:auto;z-index:auto;width:100%;min-height:58px;border-radius:18px;border:1px solid rgba(100,151,255,.42);background:linear-gradient(135deg,#327bff,#1e57d7);box-shadow:0 10px 26px rgba(25,85,204,.24);font-size:1rem;font-weight:900;letter-spacing:0;padding:13px 20px;margin-top:3px}
#saveAnnouncementButton.announcement-publish-button:before{content:"";display:inline-block;width:17px;height:17px;margin-inline-end:9px;vertical-align:-3px;border:2px solid currentColor;border-radius:4px 11px 4px 11px;transform:rotate(-18deg)}
#saveAnnouncementButton.announcement-publish-button:active{transform:scale(.985)}
@media(max-width:520px){#saveAnnouncementButton.announcement-publish-button{min-height:56px;border-radius:16px}}

/* v25.9 hard reset for composer submit + pin */
#announcementDialog .announcement-compose-hint{display:none!important}
#announcementDialog .announcement-pin-toggle b{display:flex;align-items:center;gap:8px}
#announcementDialog .announcement-pin-toggle b:before{content:"";width:15px;height:15px;display:inline-block;flex:0 0 auto;background:currentColor;clip-path:polygon(43% 0,57% 0,62% 32%,78% 43%,78% 55%,56% 55%,54% 100%,46% 100%,44% 55%,22% 55%,22% 43%,38% 32%)}
#announcementDialog #saveAnnouncementButton.announcement-publish-button{all:unset!important;box-sizing:border-box!important;width:100%!important;height:52px!important;min-height:52px!important;max-height:52px!important;border-radius:15px!important;background:linear-gradient(135deg,#327bff,#205cdb)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font:inherit!important;font-weight:900!important;font-size:.96rem!important;cursor:pointer!important;box-shadow:0 8px 20px rgba(30,90,210,.22)!important;position:relative!important;margin:2px 0 0!important;padding:0 18px!important;overflow:hidden!important}
#announcementDialog #saveAnnouncementButton.announcement-publish-button:before{content:none!important;display:none!important}
#announcementDialog #saveAnnouncementButton.announcement-publish-button:disabled{opacity:.62!important}

/* v26.0 announcement composer viewport/scroll fix */
#announcementDialog{
  padding:0!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
#announcementDialog .dialog-card,
#announcementDialog .modal-card,
#announcementDialog .announcement-dialog-card{
  box-sizing:border-box!important;
  width:min(100%,760px)!important;
  max-width:760px!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0 auto!important;
  border-radius:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding-bottom:calc(34px + env(safe-area-inset-bottom))!important;
}
#announcementDialog form{
  overflow:visible!important;
  max-height:none!important;
  height:auto!important;
  padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
}
#announcementDialog #saveAnnouncementButton.announcement-publish-button{
  position:static!important;
  flex:none!important;
  margin:14px 0 8px!important;
}
@media(min-width:701px){
 #announcementDialog{padding:18px!important;align-items:center!important;overflow:auto!important}
 #announcementDialog .dialog-card,
 #announcementDialog .modal-card,
 #announcementDialog .announcement-dialog-card{
   height:auto!important;max-height:calc(100dvh - 36px)!important;border-radius:24px!important;
 }
}

/* v26.1 iOS native dialog scrolling fix */
@media(max-width:700px){
  #announcementDialog[open]{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:calc(10px + env(safe-area-inset-top)) 12px calc(22px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    align-items:initial!important;
  }
  #announcementDialog .announcement-composer{
    width:100%!important;
    max-width:620px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:16px!important;
    padding-bottom:18px!important;
    overflow:visible!important;
    border-radius:22px!important;
    touch-action:pan-y!important;
  }
  #announcementDialog .announcement-target-section,
  #announcementDialog .announcement-class-picker,
  #announcementDialog .announcement-class-wrap{
    overflow:visible!important;
  }
  #announcementDialog #saveAnnouncementButton.announcement-publish-button{
    position:static!important;
    margin-top:14px!important;
    margin-bottom:8px!important;
  }
}


/* v26.4 mobile tuition workspace polish */
@media(max-width:640px){
  #investorFinancePanel .page-toolbar{margin-bottom:12px}
  #investorFinancePanel .page-toolbar h2{font-size:1.55rem;line-height:1.15}
  #investorFinancePanel .investor-page-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:12px;
  }
  #investorFinancePanel .investor-page-actions .btn{
    min-width:0;
    min-height:48px;
    padding:10px 8px;
    font-size:.92rem;
    border-radius:14px;
  }
  #investorFinancePanel #investorAddStudentButton{grid-column:1/-1}
  #investorFinancePanel .investor-finance-kpis{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
  }
  #investorFinancePanel .investor-finance-kpis .report-kpi{
    min-height:82px;
    padding:12px 10px;
    border-radius:16px;
  }
  #investorFinancePanel .investor-finance-kpis .report-kpi:last-child{
    grid-column:1/-1;
    min-height:70px;
  }
  #investorFinancePanel .finance-risk-toolbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:10px 0 12px;
  }
  #investorFinancePanel .finance-filter-chip{
    width:100%;
    min-height:42px;
    padding:8px 7px;
    font-size:.84rem;
  }
  #investorFinancePanel .finance-filter-chip:first-child{grid-column:1/-1}
  #investorFinancePanel .finance-age-select{
    grid-column:1/-1;
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:8px;
  }
  #investorFinancePanel .finance-age-select select{width:100%;min-width:0}
  #investorFinancePanel .finance-tools{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  #investorFinancePanel .finance-tools .search-box,
  #investorFinancePanel .finance-tools select{width:100%;min-width:0}
}


/* v26.7 student payment history cards */
#studentFinanceHistory{display:grid;gap:10px;margin-top:12px}
#studentFinanceHistory .student-payment-history-card{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;
  gap:12px!important;padding:14px!important;margin:0!important;border:1px solid var(--border)!important;
  border-radius:18px!important;background:var(--surface-2)!important;box-shadow:0 6px 18px rgba(15,23,42,.05)!important;
}
.student-payment-history-info{min-width:0;display:grid;gap:5px;text-align:right}
.student-payment-history-amount{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.student-payment-history-amount strong{font-size:1.05rem;font-weight:950;color:var(--text)}
.student-payment-history-info small{color:var(--muted);font-size:.78rem;line-height:1.5}
.student-payment-status-badge{
  display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,#22c55e 13%,var(--surface));color:#16a34a;
  border:1px solid color-mix(in srgb,#22c55e 28%,var(--border));font-size:.7rem;font-weight:900
}
.student-payment-history-actions{display:flex!important;gap:7px!important;align-items:center!important}
.student-payment-history-actions .btn{
  min-height:39px!important;padding:7px 10px!important;border-radius:12px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  white-space:nowrap!important;font-size:.78rem!important;font-weight:900!important
}
.student-payment-history-actions .g-icon{width:16px!important;height:16px!important}
.student-payment-history-actions .payment-edit-btn{color:var(--primary)!important}
.student-payment-history-actions .payment-cancel-btn{color:#dc2626!important;border-color:color-mix(in srgb,#ef4444 24%,var(--border))!important}
#addStudentPaymentButton.editing-payment{
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 8px 20px rgba(37,99,235,.22)!important
}
@media(max-width:520px){
  #studentFinanceHistory .student-payment-history-card{grid-template-columns:1fr!important;gap:10px!important;padding:13px!important}
  .student-payment-history-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .student-payment-history-actions .btn{width:100%!important;min-width:0!important}
}


/* v26.8 finance card actions */
.finance-card-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
}
.finance-card-actions .btn{width:100%!important;min-width:0!important;min-height:46px!important}
.finance-card-payment-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
.finance-card-payment-btn .g-icon{width:17px!important;height:17px!important}
#studentFinanceFeeSection.hidden,#studentFinancePaymentSection.hidden{display:none!important}
@media(max-width:520px){
  .finance-card-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .finance-card-actions .btn:first-child{grid-column:1/-1!important}
}


/* v27 official school records */
.official-record-menu{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.official-record-menu .record-card{min-height:126px!important;padding:16px 12px!important;border-radius:20px!important}
.official-record-menu .record-card>span{font-size:1.65rem}
.official-record-menu .record-card b{font-size:.94rem}
.official-record-menu .record-card small{line-height:1.45}
.official-register-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.official-register-head>div{display:grid;gap:3px}.official-register-head b{font-size:1rem}.official-register-head small{color:var(--muted)}
.official-register-head>span{padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);font-size:.75rem;font-weight:900}
.official-signatures{display:flex;justify-content:space-between;gap:20px;padding:28px 18px 8px;font-weight:800;color:var(--muted)}
.official-placeholder{text-align:center;padding:34px 18px;border:1px dashed var(--border);border-radius:20px;background:var(--surface-2)}
.official-placeholder>span{font-size:2.2rem}.official-placeholder h3{margin:10px 0 6px}.official-placeholder p{max-width:520px;margin:0 auto;color:var(--muted);line-height:1.7}
.official-placeholder-badge{display:inline-flex;margin-top:14px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);font-size:.76rem;font-weight:900}
@media(max-width:720px){.official-record-menu{grid-template-columns:repeat(2,minmax(0,1fr))!important}.official-record-menu .record-card:first-child{grid-column:1/-1}.official-record-menu .record-card{min-height:112px!important}.records-table{min-width:820px}.record-content{overflow-x:auto}}
@media print{.official-record-menu,.record-toolbar,.records-archive-panel,.page-toolbar button,.bottom-nav{display:none!important}.official-register-head{border:0!important;background:#fff!important}.official-signatures{padding-top:42px}.records-table{font-size:11px!important}}


/* v28 print identity settings */
.print-settings-body{padding-top:12px}.print-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.print-settings-grid label,.print-logo-settings label{display:grid;gap:6px}.print-settings-grid label>span,.print-logo-settings label>span{font-size:.78rem;font-weight:800;color:var(--muted)}
.print-logo-settings{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.print-logo-preview{height:150px;border:1px dashed var(--border);border-radius:18px;display:grid;place-items:center;overflow:hidden;background:var(--surface)}.print-logo-preview img{max-width:85%;max-height:85%;object-fit:contain}.print-logo-preview span{font-size:.78rem;color:var(--muted)}
.print-option-switches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.print-settings-preview{padding:16px;background:var(--surface-2);border-radius:18px}.print-preview-sheet{position:relative;overflow:hidden;width:min(100%,430px);aspect-ratio:210/297;margin:auto;background:#fff;color:#111;padding:28px;text-align:center;box-shadow:0 12px 35px #0002}.print-preview-logo{display:block;margin:0 auto 8px;max-height:65px;object-fit:contain}.print-preview-watermark{position:absolute;width:55%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.print-preview-sheet b,.print-preview-sheet h4,.print-preview-sheet small,.print-preview-lines{position:relative;z-index:1}.print-preview-sheet h4{margin:8px}.print-preview-lines{height:55%;margin-top:18px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 25px,#bbb 26px)}.print-border-none{border:none}.print-border-simple{border:2px solid #333}.print-border-double{border:5px double #333}.print-border-classic{border:3px solid #555;outline:1px solid #555;outline-offset:-8px}.print-border-decorative{border:6px double #777;border-radius:3px}
@media(max-width:720px){.print-settings-grid{grid-template-columns:1fr}.print-logo-settings{grid-template-columns:1fr}.print-logo-preview{height:120px}.print-option-switches{grid-template-columns:1fr 1fr}}


/* account popover saved-account switcher */
.account-switcher-panel{margin:10px 0 8px;padding:12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.account-switcher-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.account-switcher-head .eyebrow{margin:0 0 2px}.account-switcher-head b{font-size:.88rem}
.account-popover-saved-list{display:grid;gap:7px;max-height:230px;overflow:auto}.account-popover-saved-list .remembered-account-card{padding:9px;border-radius:14px;background:var(--surface);box-shadow:none}.account-popover-saved-list .remembered-account-main{min-width:0}.account-popover-saved-list .remembered-account-main .avatar{width:38px;height:38px}.account-popover-saved-list .remembered-account-main strong{font-size:.82rem}.account-popover-saved-list .remembered-account-main small{font-size:.68rem}.account-popover-saved-list .remembered-account-actions{gap:5px}.account-popover-saved-list .small-btn{min-height:32px;padding:5px 8px;font-size:.7rem}.account-popover-saved-list .account-status{font-size:.68rem}
@media(max-width:520px){.account-popover-card{width:min(92vw,390px)!important}.account-switcher-head{align-items:flex-start}.account-popover-saved-list{max-height:200px}}


/* v29 investor workspace */
.investor-finance-tabs{position:sticky;top:8px;z-index:12;display:flex;gap:7px;overflow-x:auto;padding:8px;margin:4px 0 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);border-radius:17px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.investor-finance-tabs button{flex:0 0 auto;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;font-size:.78rem;font-weight:850;padding:9px 13px;cursor:pointer}.investor-finance-tabs button.active{background:var(--primary);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 25%,transparent)}
#investorFinanceOverview{scroll-margin-top:80px}#investorMonthlyReportSheet,#investorExpenseSection{scroll-margin-top:86px}
@media(max-width:720px){.investor-command-head{align-items:flex-start}.investor-head-actions{width:100%;justify-content:flex-start}.investor-executive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.investor-finance-tabs{margin-inline:-4px}.investor-monthly-report-sheet{border-radius:18px}}


/* v29.1 investor icon refresh */
.investor-executive .g-icon-wrap,.investor-quick-strip .g-icon-wrap{display:grid;place-items:center}
.investor-quick-strip button>span{width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border))}
.investor-quick-strip .g-icon{width:23px;height:23px}
.investor-insight-card>summary>span,.investor-activity-toggle-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border))}
.investor-insight-card>summary .g-icon,.investor-activity-toggle-icon .g-icon{width:22px;height:22px}
.investor-icon-action{display:inline-flex!important;align-items:center;gap:6px}.investor-icon-action .utility-g-icon{width:22px;height:22px}.investor-icon-action .g-icon{width:17px;height:17px}
.investor-smart-alerts .investor-alert{position:relative;padding-inline-start:48px!important}.investor-smart-alerts .investor-alert:before{content:"";position:absolute;inset-inline-start:12px;top:50%;width:25px;height:25px;transform:translateY(-50%);border-radius:9px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border))}
.investor-smart-alerts .investor-alert:after{content:"!";position:absolute;inset-inline-start:20px;top:50%;transform:translateY(-54%);font-weight:950;color:var(--primary);font-size:.9rem}


/* fee plan button: compact icon, no stacked graffiti tile */
#classFeePlanButton{display:flex!important;align-items:center;justify-content:center;gap:8px!important}
#classFeePlanButton .fee-plan-icon{width:22px;height:22px;flex:0 0 22px;display:inline-block;background:currentColor;opacity:.92;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 9l9-5 9 5M5 10v8m4-8v8m6-8v8m4-8v8M3 20h18'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 9l9-5 9 5M5 10v8m4-8v8m6-8v8m4-8v8M3 20h18'/%3E%3C/svg%3E") center/contain no-repeat}


/* v29.2 investor cleanup */
.investor-more-groups{display:grid;gap:12px}.investor-more-group{border:1px solid var(--border);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-soft)}
.investor-more-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}.investor-more-group>summary::-webkit-details-marker{display:none}.investor-more-group>summary>.g-icon-wrap{width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));display:grid;place-items:center;flex:0 0 auto}.investor-more-group>summary .g-icon{width:23px;height:23px}.investor-more-group>summary>div{display:grid;gap:3px}.investor-more-group>summary small{color:var(--muted);font-size:.72rem}.investor-more-group[open]>summary{border-bottom:1px solid var(--border)}
.investor-more-group .role-more-grid{padding:12px}.investor-clean-settings #contextBar{margin-top:16px}.investor-clean-settings .settings-sections>.settings-group-title.hidden+.settings-grid.hidden{display:none!important}
.investor-reports-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 16px;padding:18px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:var(--shadow-soft)}.investor-reports-hero h3{margin:3px 0 5px;font-size:1.15rem}.investor-reports-hero small{color:var(--muted)}.investor-report-chips{display:flex;gap:7px;flex-wrap:wrap}.investor-report-chips button{border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));background:var(--surface);color:var(--primary);border-radius:999px;padding:8px 12px;font:inherit;font-size:.73rem;font-weight:850}
body[data-role="investor"] #reportsPage .report-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}body[data-role="investor"] #reportsPage .report-kpi{min-height:108px;display:grid;align-content:center;gap:7px}body[data-role="investor"] #reportsPage .report-kpi strong{font-size:1.55rem}
body[data-role="investor"] #investorStaffList .teacher-avatar-unified{width:48px;height:48px;flex:0 0 48px}
@media(max-width:720px){.investor-reports-hero{display:grid}.investor-report-chips{width:100%}.investor-report-chips button{flex:1}.investor-more-group .role-more-grid{grid-template-columns:1fr!important}body[data-role="investor"] #reportsPage .report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.investor-clean-settings #contextBar{border-radius:18px}}


/* v30 customer demo experience */
.demo-login-separator{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.72rem}.demo-login-separator:before,.demo-login-separator:after{content:"";height:1px;flex:1;background:var(--border)}.demo-entry-button{display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px!important;text-align:right!important;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface))!important;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border))!important;color:var(--text)!important}.demo-entry-button>span:last-child{display:grid;gap:2px}.demo-entry-button b{font-size:.92rem}.demo-entry-button small{font-size:.68rem;color:var(--muted);font-weight:600}.demo-entry-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:var(--primary);position:relative;box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 25%,transparent)}.demo-entry-icon:after{content:"";position:absolute;inset:11px;background:#fff;clip-path:polygon(15% 0,100% 50%,15% 100%)}
.demo-role-dialog{width:min(94vw,760px);border:0;padding:0;background:transparent}.demo-role-card{width:100%;max-width:none;padding:22px}.demo-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:16px}.demo-role-option{position:relative;display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;text-align:right;border:1px solid var(--border);border-radius:19px;background:var(--surface-2);color:var(--text);padding:14px;cursor:pointer;font:inherit;transition:.18s ease}.demo-role-option:hover,.demo-role-option:active{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));transform:translateY(-2px);box-shadow:var(--shadow-soft)}.demo-role-option:disabled{opacity:.6;pointer-events:none}.demo-role-option>div{display:grid;gap:4px}.demo-role-option b{font-size:.9rem}.demo-role-option small{font-size:.69rem;line-height:1.5;color:var(--muted)}.demo-role-option em{font-style:normal;font-size:.68rem;font-weight:900;color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--surface));padding:5px 8px;border-radius:999px}.demo-role-icon{width:50px;height:50px;border-radius:16px;background:color-mix(in srgb,var(--primary) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));position:relative}.demo-role-icon:before{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--primary);border-radius:50%;left:16px;top:9px}.demo-role-icon:after{content:"";position:absolute;width:25px;height:13px;border:2px solid var(--primary);border-bottom:0;border-radius:15px 15px 0 0;left:10px;bottom:7px}.demo-role-note{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:15px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 15%,var(--border))}.demo-role-note>span{width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 12%,transparent)}.demo-role-note p{display:grid;gap:2px;margin:0}.demo-role-note small{color:var(--muted);font-size:.69rem}
.demo-mode-banner{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px max(14px,env(safe-area-inset-right)) 9px max(14px,env(safe-area-inset-left));background:color-mix(in srgb,var(--primary) 9%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.demo-mode-copy{display:flex;align-items:center;gap:9px}.demo-mode-copy>div{display:grid;gap:1px}.demo-mode-copy b{font-size:.78rem}.demo-mode-copy small{font-size:.64rem;color:var(--muted)}.demo-mode-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 13%,transparent)}.demo-mode-actions{display:flex;gap:6px}.demo-mode-actions .btn{min-height:32px;font-size:.68rem;padding:5px 9px}
@media(max-width:620px){.demo-role-grid{grid-template-columns:1fr}.demo-role-card{padding:18px 14px}.demo-role-option{grid-template-columns:46px 1fr auto}.demo-role-icon{width:46px;height:46px}.demo-role-icon:before{left:14px}.demo-role-icon:after{left:8px}.demo-mode-banner{align-items:center}.demo-mode-copy small{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-mode-actions .btn{padding:5px 7px}}


/* MANHJ v31 — premium identity & login experience */
body[data-build="31.7"] .login-shell{
  min-height:100dvh;position:relative;overflow:hidden;padding:clamp(22px,5vw,52px) 16px;
  display:grid;place-items:center;background:
  radial-gradient(circle at 12% 14%,rgba(56,189,248,.34),transparent 30%),
  radial-gradient(circle at 88% 12%,rgba(124,58,237,.30),transparent 32%),
  radial-gradient(circle at 55% 92%,rgba(14,165,233,.22),transparent 38%),
  linear-gradient(145deg,#061633 0%,#0a2d69 43%,#135bd2 72%,#30116f 120%);
}
body[data-build="31.7"] .login-shell::before,
body[data-build="31.7"] .login-shell::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.11);border-radius:50%}
body[data-build="31.7"] .login-shell::before{width:560px;height:560px;top:-270px;right:-230px;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018)}
body[data-build="31.7"] .login-shell::after{width:430px;height:430px;bottom:-300px;left:-160px;box-shadow:0 0 0 65px rgba(255,255,255,.025)}
body[data-build="31.7"] .login-card{
  width:min(100%,470px);position:relative;z-index:2;padding:22px clamp(18px,5vw,32px) 18px;
  border-radius:34px;border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(245,249,255,.86));
  box-shadow:0 32px 90px rgba(1,10,34,.38),inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  animation:manhjCardIn .72s cubic-bezier(.2,.8,.2,1) both;
}
.manhj-login-brand{text-align:center;margin:4px 0 18px}
.manhj-brand-mark{width:92px!important;height:92px!important;margin:0 auto 4px!important;border-radius:28px!important;
  display:grid!important;place-items:center;background:linear-gradient(145deg,#fff,rgba(255,255,255,.72))!important;
  box-shadow:0 20px 45px rgba(37,99,235,.24),inset 0 0 0 1px rgba(37,99,235,.10)!important;
  transform:rotate(-2deg);animation:manhjLogoFloat 4.8s ease-in-out infinite}
.manhj-logo-svg{width:72px;height:72px;overflow:visible}
.manhj-logo-book{fill:url(#manhjLogoGrad);opacity:.96}
.manhj-logo-cap{fill:none;stroke:#102a63;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.manhj-logo-route{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;opacity:.9}
.manhj-wordmark{display:flex;align-items:baseline;justify-content:center;gap:10px;direction:rtl;line-height:1}
.manhj-wordmark strong{font-size:2.35rem;letter-spacing:-.06em;color:#102a63;font-weight:900}
.manhj-wordmark span{font-size:.95rem;font-weight:900;letter-spacing:.24em;color:#2563eb;direction:ltr}
.manhj-tagline{margin:10px 0 7px;color:#53647f;font-weight:700;font-size:.9rem}
.manhj-trust-row{display:flex;align-items:center;justify-content:center;gap:8px;color:#7b8ba6;font-size:.69rem;font-weight:800}
.manhj-trust-row i{width:4px;height:4px;border-radius:50%;background:#38bdf8}
.manhj-login-features{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 15px}
.manhj-login-features article{min-width:0;padding:10px 7px;border:1px solid #dce7f6;border-radius:16px;background:rgba(255,255,255,.63);text-align:center}
.manhj-feature-icon{width:25px;height:25px;margin:0 auto 6px;display:grid;place-items:center;border-radius:9px;background:#e9f2ff;color:#2563eb;font-size:.62rem;font-weight:900}
.manhj-feature-icon svg{width:16px;height:16px;fill:none!important;stroke:#2563eb!important;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.manhj-feature-icon svg *{fill:none!important;stroke:#2563eb!important}
.manhj-login-features b{display:block;color:#173260;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manhj-login-features small{display:none}
body[data-build="31.7"] #loginForm{gap:11px}
body[data-build="31.7"] #loginForm label>span:first-child{color:#314766;font-size:.78rem;font-weight:800}
body[data-build="31.7"] #loginForm input[type="text"],
body[data-build="31.7"] #loginForm input[type="password"]{min-height:52px;border-radius:16px;border:1px solid #d6e1f0;background:rgba(255,255,255,.82);box-shadow:inset 0 1px 2px rgba(15,23,42,.025);font-size:16px;transition:.2s ease}
body[data-build="31.7"] #loginForm input:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(59,130,246,.12);transform:translateY(-1px)}
body[data-build="31.7"] #loginButton{min-height:54px;border:0;border-radius:17px;background:linear-gradient(110deg,#0ea5e9,#2563eb 52%,#7c3aed);box-shadow:0 13px 28px rgba(37,99,235,.27);font-weight:900;letter-spacing:.01em;position:relative;overflow:hidden}
body[data-build="31.7"] #loginButton::after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:manhjShine 4.4s ease-in-out infinite}
body[data-build="31.7"] .remember-login-row{border:0!important;background:transparent!important;padding:3px 2px!important}
body[data-build="31.7"] .remember-login-row small{display:none}
body[data-build="31.7"] .demo-login-separator{margin:0}
body[data-build="31.7"] .account-request-details{border-radius:15px!important}
body[data-build="31.7"] .login-rights-footer{margin-top:15px;padding-top:13px;border-top:1px solid #dbe5f2;gap:3px}
body[data-build="31.7"] .login-rights-footer span{font-size:.66rem;color:#71819a}
body[data-build="31.7"] .login-rights-footer strong{font-size:.73rem;color:#29436d}
body[data-build="31.7"] .developer-whatsapp-link{font-size:.69rem}
body[data-build="31.7"] .login-theme-toggle{background:rgba(255,255,255,.76)!important;border-color:#dbe7f5!important;box-shadow:0 7px 20px rgba(15,23,42,.08)}
body[data-build="31.7"] .topbar .eyebrow{letter-spacing:.08em;font-weight:900;color:var(--primary)}
@keyframes manhjCardIn{from{opacity:0;transform:translateY(24px) scale(.975)}to{opacity:1;transform:none}}
@keyframes manhjLogoFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes manhjShine{0%,70%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}
@media(max-width:430px){
 body[data-build="31.7"] .login-shell{padding:18px 12px}
 body[data-build="31.7"] .login-card{padding:18px 16px 15px;border-radius:29px}
 .manhj-brand-mark{width:80px!important;height:80px!important;border-radius:24px!important}
 .manhj-logo-svg{width:62px;height:62px}
 .manhj-wordmark strong{font-size:2rem}.manhj-wordmark span{font-size:.8rem}
 .manhj-tagline{font-size:.8rem;margin-top:8px}
 .manhj-login-features article{padding:8px 4px}.manhj-login-features b{font-size:.66rem}
}
[data-theme="dark"] body[data-build="31.7"] .login-card{background:linear-gradient(155deg,rgba(8,18,39,.94),rgba(12,28,58,.91));border-color:rgba(148,190,255,.22)}
[data-theme="dark"] .manhj-brand-mark{background:linear-gradient(145deg,#15294d,#0c1d3b)!important}
[data-theme="dark"] .manhj-wordmark strong{color:#e8f1ff}
[data-theme="dark"] .manhj-tagline,[data-theme="dark"] .manhj-trust-row{color:#9db0ce}
[data-theme="dark"] .manhj-login-features article{background:rgba(14,31,62,.7);border-color:#263d64}
[data-theme="dark"] .manhj-login-features b{color:#dbeafe}
[data-theme="dark"] body[data-build="31.7"] #loginForm input[type="text"],
[data-theme="dark"] body[data-build="31.7"] #loginForm input[type="password"]{background:rgba(8,21,44,.8);border-color:#294266}

/* demo entry flow v31.1 */
.demo-school-name{margin:8px 0 4px;font-size:1.05rem;font-weight:900;color:var(--primary)}
.demo-role-card{max-width:620px}
.demo-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-role-option{min-height:110px}
@media(max-width:560px){.demo-role-grid{grid-template-columns:1fr}.demo-role-option{min-height:88px}}

/* MANHJ v31.2 download platform cards */
.manhj-downloads{margin:0 0 15px;padding:13px;border:1px solid #dce7f6;border-radius:21px;background:linear-gradient(145deg,rgba(240,247,255,.88),rgba(255,255,255,.7))}
.manhj-downloads-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.manhj-downloads-head b{font-size:.78rem;color:#173260}.manhj-downloads-head span{font-size:.62rem;color:#8190a7}
.manhj-download-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.manhj-download-btn{min-height:54px;border:0;border-radius:15px;padding:8px 10px;display:flex;align-items:center;justify-content:flex-start;gap:9px;text-align:left;direction:ltr;color:#fff;background:linear-gradient(125deg,#0ea5e9,#2563eb 58%,#6d28d9);box-shadow:0 8px 18px rgba(37,99,235,.16);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.manhj-download-btn:active{transform:scale(.97)}.download-symbol{width:27px;text-align:center;font-size:1.45rem;font-weight:800;line-height:1}
.manhj-download-btn span:last-child{display:flex;flex-direction:column;line-height:1.02}.manhj-download-btn small{font-size:.48rem;opacity:.82;letter-spacing:.03em}.manhj-download-btn b{font-size:.76rem;margin-top:3px}
[data-theme="dark"] .manhj-downloads{background:rgba(14,31,62,.72);border-color:#263d64}[data-theme="dark"] .manhj-downloads-head b{color:#dbeafe}
@media(max-width:380px){.manhj-downloads{padding:10px}.manhj-download-btn{padding:7px;gap:5px}.download-symbol{width:22px;font-size:1.2rem}.manhj-download-btn b{font-size:.69rem}}

/* MANHJ v31.3 — download area moved below login */
.manhj-downloads{margin:16px 0 4px;padding:14px;border-radius:22px;background:linear-gradient(145deg,rgba(240,247,255,.74),rgba(255,255,255,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.manhj-downloads-head{margin-bottom:10px}
.manhj-download-grid{gap:9px}
.manhj-download-btn{min-height:58px;border-radius:17px;padding:9px 11px;background:linear-gradient(135deg,#169cff 0%,#2563eb 52%,#6d28d9 100%);box-shadow:0 10px 22px rgba(37,99,235,.18)}
.download-symbol{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px}
.download-symbol svg{width:25px;height:25px;display:block;fill:currentColor;stroke:none}
.download-symbol.android-mark svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.manhj-download-btn small{font-size:.5rem}.manhj-download-btn b{font-size:.8rem}
@media(max-width:430px){.manhj-downloads{margin-top:14px;padding:12px}.manhj-download-btn{min-height:56px}}

/* Al Nakhlah Private Schools v31.5 — semantic brand + SEO support */
.manhj-wordmark h1{margin:0;padding:.08em .12em .14em;display:inline-block;overflow:visible;font-size:2.35rem;letter-spacing:0;color:#102a63;font-weight:900;line-height:1.16}
.manhj-seo-summary{max-width:390px;margin:0 auto 10px;color:#6b7c96;font-size:.72rem;line-height:1.7;font-weight:650}
.manhj-about-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 10px;border-radius:10px;color:var(--primary);font-size:.69rem;font-weight:800;text-decoration:none}
[data-theme="dark"] .manhj-wordmark h1{color:#e8f1ff}
[data-theme="dark"] .manhj-seo-summary{color:#9db0ce}
@media(max-width:430px){.manhj-wordmark h1{font-size:2rem}.manhj-seo-summary{font-size:.68rem}}

/* Al Nakhlah Private Schools visual identity v31.6 */
.manhj-logo-image{width:78px;height:78px;display:block;filter:drop-shadow(0 10px 18px rgba(37,99,235,.18))}.topbar .eyebrow{color:#315b9c;font-weight:900;letter-spacing:.02em}html[data-theme="dark"] .topbar .eyebrow{color:#67b5ff}.manhj-wordmark h1{background:linear-gradient(110deg,#102a63 8%,#2563eb 58%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}.btn.primary{background:linear-gradient(110deg,#0ea5e9,#2563eb 55%,#7c3aed);box-shadow:0 9px 24px rgba(37,99,235,.18)}

/* Al Nakhlah Private Schools visual identity v31.7 */
:root{
  --manhj-cyan:#22d3ee;
  --manhj-blue:#168bff;
  --manhj-indigo:#4f46e5;
  --manhj-violet:#8b5cf6;
  --manhj-navy:#0f172a;
}
.manhj-brand-mark{overflow:hidden}
.manhj-logo-image{width:82px;height:82px;object-fit:contain}
.manhj-wordmark span{background:linear-gradient(90deg,var(--manhj-cyan),var(--manhj-blue),var(--manhj-violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.manhj-trust-row i{background:linear-gradient(135deg,var(--manhj-cyan),var(--manhj-violet))}
.topbar-brand{display:flex;align-items:center;gap:11px;min-width:0}
.topbar-brand-logo{width:42px;height:42px;flex:0 0 42px;padding:4px;border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,246,255,.88));border:1px solid rgba(37,99,235,.14);box-shadow:0 8px 22px rgba(37,99,235,.13)}
[data-theme="dark"] .topbar-brand-logo{background:linear-gradient(145deg,#13294d,#0b1d3a);border-color:#28466f}
.topbar-brand>div{min-width:0}
.topbar-brand #pageTitle{margin-top:2px}
.btn.primary,.manhj-download-btn{background:linear-gradient(115deg,var(--manhj-cyan) -10%,var(--manhj-blue) 38%,var(--manhj-indigo) 67%,var(--manhj-violet) 110%)}
.icon-button:focus-visible,.btn:focus-visible,.manhj-download-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--manhj-cyan) 55%,transparent);outline-offset:2px}
@media(max-width:430px){.topbar-brand-logo{width:38px;height:38px;flex-basis:38px}.topbar-brand{gap:8px}.topbar .eyebrow{font-size:.62rem}}

.login-footer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.login-footer-actions .manhj-about-link,
.login-footer-actions .developer-whatsapp-link{
  min-height:44px;padding:10px 14px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:850;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.login-footer-actions .manhj-about-link{
  color:#2563eb;background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.22);
  box-shadow:0 7px 18px rgba(37,99,235,.08)
}
.login-footer-actions .developer-whatsapp-link{
  color:#0f766e;background:rgba(20,184,166,.08);
  border:1px solid rgba(20,184,166,.28);
  box-shadow:0 7px 18px rgba(20,184,166,.08)
}
.login-footer-actions .manhj-about-link:active,
.login-footer-actions .developer-whatsapp-link:active{transform:scale(.98)}
[data-theme="dark"] .login-footer-actions .manhj-about-link{color:#7db7ff;background:rgba(37,99,235,.12);border-color:#29466f}
[data-theme="dark"] .login-footer-actions .developer-whatsapp-link{color:#6ee7d8;background:rgba(20,184,166,.1);border-color:rgba(45,212,191,.28)}
@media(max-width:430px){.login-footer-actions{grid-template-columns:1fr}.login-footer-actions .manhj-about-link,.login-footer-actions .developer-whatsapp-link{min-height:46px;font-size:.8rem}}


/* MANHJ bilingual interface v32 */
.login-language-toggle{position:absolute;top:18px;left:18px;z-index:6;min-width:64px;height:44px;padding:0 11px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #dbe7f5;background:rgba(255,255,255,.76);color:#2563eb;box-shadow:0 7px 20px rgba(15,23,42,.08);font:900 .72rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
[data-theme="dark"] .login-language-toggle{background:rgba(8,21,44,.78);border-color:#294266;color:#67b5ff}
.language-quick-toggle{width:auto!important;min-width:58px!important;padding:0 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;font-size:.66rem!important;font-weight:950!important;color:var(--primary)!important}
[data-language-toggle]{--lang-switch-accent:var(--primary,#14b8a6);--lang-switch-soft:var(--surface-2,rgba(255,255,255,.08));}
.language-switch-mark{position:relative;display:inline-block;flex:0 0 auto;width:29px;height:23px;direction:ltr}
.language-switch-tile{position:absolute;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font:950 .56rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;border:1px solid color-mix(in srgb,currentColor 20%,transparent);box-shadow:0 3px 8px rgba(2,8,23,.16);transition:transform .18s ease,box-shadow .18s ease}
.language-switch-latin{inset:0 auto auto 0;background:var(--lang-switch-soft);color:currentColor;transform:rotate(-6deg)}
.language-switch-arabic{inset:auto 0 0 auto;background:linear-gradient(145deg,#14b8a6,#0ea5e9);color:#fff;border-color:rgba(255,255,255,.24);transform:rotate(6deg)}
[data-language-toggle]:active .language-switch-latin{transform:rotate(-2deg) translateY(1px)}
[data-language-toggle]:active .language-switch-arabic{transform:rotate(2deg) translateY(-1px)}
.language-toggle-text{display:block;min-width:18px;text-align:center;direction:ltr;letter-spacing:.045em;font-weight:950}
.public-round-action[data-language-toggle]{min-width:68px}
.public-round-action[data-language-toggle] .language-switch-latin{background:rgba(255,255,255,.10)}
.public-round-action[data-language-toggle] .language-switch-arabic{background:linear-gradient(145deg,#22d3ee,#2563eb)}
.login-language-toggle .language-switch-latin{background:rgba(37,99,235,.08)}
[data-theme="dark"] .login-language-toggle .language-switch-latin{background:rgba(103,181,255,.09)}

html[data-language="en"] body{direction:ltr}
html[data-language="en"] .login-card,html[data-language="en"] .content,html[data-language="en"] .modal-card,html[data-language="en"] .header-popover-card,html[data-language="en"] .notification-center-card,html[data-language="en"] .account-popover-card{direction:ltr;text-align:left}
html[data-language="en"] .manhj-login-brand,html[data-language="en"] .manhj-login-features article,html[data-language="en"] .login-rights-footer{text-align:center}
html[data-language="en"] .manhj-wordmark{direction:ltr}
html[data-language="en"] input:not([type="number"]):not([type="date"]):not([type="time"]),html[data-language="en"] textarea,html[data-language="en"] select{direction:ltr;text-align:left}
html[data-language="en"] .topbar,html[data-language="en"] .topbar-brand,html[data-language="en"] .topbar-actions,html[data-language="en"] .bottom-nav,html[data-language="en"] .section-head,html[data-language="en"] .modal-head,html[data-language="en"] .account-popover-head{direction:ltr}
html[data-language="en"] .topbar .eyebrow{letter-spacing:.08em}
html[data-language="en"] .table-wrap,html[data-language="en"] table{direction:ltr}
html[data-language="en"] .chat-person-arrow{transform:scaleX(-1)}
html[data-language="en"] .login-footer-actions{direction:ltr}
@media(max-width:430px){.login-language-toggle{top:15px;left:14px;min-width:64px;height:42px;border-radius:13px}.language-quick-toggle{min-width:54px!important;padding:0 6px!important;gap:6px!important}.language-switch-mark{width:27px;height:22px}.language-switch-tile{width:17px;height:17px;font-size:.53rem}.public-round-action[data-language-toggle]{min-width:64px}}


/* v32.4 English mobile polish */
.notification-popover-card{
  inset-inline-start:auto!important;
  inset-inline-end:0!important;
  max-width:calc(100vw - 24px)!important;
  box-sizing:border-box!important;
}
html[data-language="en"] .manhj-wordmark{
  width:100%;
  justify-content:center;
  direction:ltr;
  gap:0;
}
html[data-language="en"] .manhj-wordmark span{display:none!important}
html[data-language="en"] .manhj-wordmark h1{
  white-space:nowrap;
  font-size:2.12rem;
  line-height:1.08;
  letter-spacing:.075em;
  text-align:center;
  padding-inline:.08em;
}
html[data-language="en"] .manhj-login-features article{
  min-height:82px;
  padding:9px 5px;
  display:grid;
  align-content:center;
}
html[data-language="en"] .manhj-login-features b{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:.62rem!important;
  line-height:1.16!important;
  min-height:2.35em;
  display:flex!important;
  align-items:center;
  justify-content:center;
  overflow-wrap:anywhere;
}
html[data-language="en"] .bottom-nav{
  direction:ltr;
  overflow-x:hidden!important;
}
html[data-language="en"] .bottom-nav>.nav-item:not(.hidden){
  min-width:0!important;
  flex:1 1 0!important;
  padding-inline:2px!important;
}
html[data-language="en"] .bottom-nav .nav-item small{
  width:100%;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  font-size:.58rem!important;
  letter-spacing:-.015em;
}
html[data-language="en"] .notification-popover-card,
html[data-language="en"] .header-popover-card{
  direction:ltr;
  text-align:left;
}
html[data-language="en"] .notification-popover-card .smart-notification{
  text-align:left;
}
@media(max-width:430px){
  .notification-popover-card{
    width:min(340px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
  }
  html[data-language="en"] .manhj-wordmark h1{font-size:1.98rem}
  html[data-language="en"] .manhj-login-features{gap:6px}
  html[data-language="en"] .manhj-login-features b{font-size:.59rem!important}
  html[data-language="en"] .bottom-nav .nav-item small{font-size:.55rem!important}
}


/* v32.6 — separate public home and login routes */
.public-shell{
  min-height:100dvh;
  position:relative;
  overflow:hidden;
  padding:clamp(18px,3vw,34px);
  background:
    radial-gradient(circle at 10% 12%,rgba(34,211,238,.22),transparent 31%),
    radial-gradient(circle at 88% 8%,rgba(139,92,246,.25),transparent 30%),
    radial-gradient(circle at 60% 92%,rgba(22,139,255,.22),transparent 36%),
    linear-gradient(145deg,#06142f 0%,#0a2e68 45%,#124ec0 72%,#2d1268 120%);
  color:#fff;
}
.public-shell::before,.public-shell::after{
  content:"";position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.09);border-radius:50%;
}
.public-shell::before{width:620px;height:620px;top:-330px;right:-250px;box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 170px rgba(255,255,255,.012)}
.public-shell::after{width:460px;height:460px;bottom:-310px;left:-190px;box-shadow:0 0 0 68px rgba(255,255,255,.018)}
.public-stage{position:relative;z-index:2;width:min(1160px,100%);min-height:calc(100dvh - clamp(36px,6vw,68px));margin:auto;display:flex;flex-direction:column}
.public-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,6vh,72px)}
.public-brand-mini{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:950;letter-spacing:.12em;font-size:.8rem}
.public-brand-mini img{width:46px;height:46px;padding:4px;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.public-nav-actions{display:flex;align-items:center;gap:9px}
.public-round-action{min-width:46px;height:44px;padding:0 11px;border:1px solid rgba(255,255,255,.20);border-radius:14px;background:rgba(255,255,255,.11);color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(0,0,0,.11)}
.public-round-action .g-icon{width:21px;height:21px}
.public-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);gap:clamp(26px,6vw,78px);align-items:center;flex:1}
.public-hero-card{max-width:640px}
.public-brand-lockup{display:flex;align-items:center;gap:17px;margin-bottom:24px}
.public-logo-halo{width:92px;height:92px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,rgba(255,255,255,.82));box-shadow:0 24px 55px rgba(0,0,0,.22),inset 0 0 0 1px rgba(37,99,235,.12);transform:rotate(-2deg)}
.public-logo-halo img{width:78px;height:78px;object-fit:contain}
.public-wordmark{display:grid;gap:7px}
.public-wordmark strong{font-size:clamp(2rem,4vw,3.15rem);line-height:.95;font-weight:950;letter-spacing:-.06em}
.public-wordmark span{font-size:.82rem;font-weight:950;letter-spacing:.28em;color:#8fe9ff;direction:ltr}
.public-eyebrow{margin:0 0 9px;color:#9bdcff;font-weight:900;font-size:.8rem;letter-spacing:.04em}
.public-hero-card h1{max-width:720px;margin:0;font-size:clamp(2.05rem,5vw,4.35rem);line-height:1.03;letter-spacing:-.045em;text-wrap:balance}
.public-lead{max-width:660px;margin:22px 0 0;color:#dcecff;font-size:clamp(.96rem,1.5vw,1.16rem);line-height:1.95;font-weight:650}
.public-cta{display:flex;align-items:center;gap:11px;margin-top:30px;flex-wrap:wrap}
.public-primary-cta,.public-dashboard-btn{width:auto!important;min-width:190px;min-height:54px;border-radius:17px!important;padding-inline:24px!important}
.public-primary-cta{box-shadow:0 16px 38px rgba(14,165,233,.3)!important}
.public-dashboard-btn{border:1px solid rgba(255,255,255,.27);background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.public-links{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap}
.public-link-card{min-height:44px;padding:10px 15px;border:1px solid rgba(255,255,255,.17);border-radius:14px;background:rgba(255,255,255,.07);color:#e7f2ff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:850}
.public-contact-card{font:inherit;font-size:.78rem;font-weight:850}
.public-showcase{position:relative;padding:clamp(20px,3vw,30px);border:1px solid rgba(255,255,255,.19);border-radius:32px;background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.075));box-shadow:0 30px 80px rgba(0,0,0,.24);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.public-showcase::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.07);border-radius:24px;pointer-events:none}
.public-showcase-head{position:relative;z-index:1;display:grid;gap:10px;margin-bottom:19px}
.public-showcase-head strong{font-size:1rem;line-height:1.6}
.public-showcase-badge{width:max-content;padding:6px 10px;border-radius:999px;background:rgba(34,211,238,.13);border:1px solid rgba(103,232,249,.3);color:#9af2ff;font-size:.65rem;font-weight:950;letter-spacing:.18em}
.public-feature-grid{position:relative;z-index:1;display:grid;gap:10px}
.public-feature-grid article{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(3,15,43,.18)}
.public-feature-grid .manhj-feature-icon{margin:0;flex:0 0 auto;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.93)}
.public-feature-grid b{display:block;font-size:.86rem;color:#fff}
.public-feature-grid small{display:block;margin-top:3px;color:#c9dcf6;font-size:.73rem;line-height:1.55}
.public-role-orbit{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.public-role-orbit span{padding:10px;border-radius:13px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:.72rem;font-weight:850;color:#e9f5ff}
.public-trust-line{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;color:#b9d0ef;font-size:.69rem;font-weight:850}
.public-trust-line i{width:4px;height:4px;border-radius:50%;background:#67e8f9}
.public-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(28px,6vh,64px);padding-top:18px;border-top:1px solid rgba(255,255,255,.11);color:#adc5e5;font-size:.68rem}
.public-footer strong{color:#d8e7fb}
.login-theme-toggle{right:18px!important;left:auto!important}
.login-home-link{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:7;min-height:44px;padding:0 13px;border-radius:14px;border:1px solid #dbe7f5;background:rgba(255,255,255,.76);color:#29436d;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.72rem;font-weight:900;box-shadow:0 7px 20px rgba(15,23,42,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.login-session-return{width:100%;min-height:46px;margin:0 0 10px;border-radius:14px;border:1px solid rgba(37,99,235,.2);background:rgba(37,99,235,.08);color:#1d4ed8;font-weight:900}
.public-home-button .g-icon{width:20px;height:20px}
[data-theme="dark"] .login-home-link{background:rgba(8,21,44,.78);border-color:#294266;color:#c8ddff}
[data-theme="dark"] .login-session-return{border-color:#29466f;background:rgba(37,99,235,.12);color:#86b9ff}
html[data-language="en"] .public-shell{direction:ltr}
html[data-language="en"] .public-hero-card,html[data-language="en"] .public-showcase{text-align:left}
html[data-language="en"] .public-brand-lockup{direction:ltr}
html[data-language="en"] .public-wordmark strong{display:none}
html[data-language="en"] .public-wordmark span{font-size:1.35rem;letter-spacing:.16em;color:#fff}
html[data-language="en"] .public-feature-grid article{direction:ltr}
html[data-language="en"] .public-footer{direction:ltr}
@media(max-width:860px){
  .public-hero-grid{grid-template-columns:1fr;gap:28px}
  .public-hero-card{max-width:none}
  .public-showcase{max-width:620px}
  .public-nav{margin-bottom:36px}
}
@media(max-width:520px){
  .public-shell{padding:14px}
  .public-stage{min-height:calc(100dvh - 28px)}
  .public-nav{margin-bottom:25px}
  .public-brand-mini span{display:none}
  .public-brand-mini img{width:42px;height:42px;border-radius:13px}
  .public-brand-lockup{gap:12px;margin-bottom:19px}
  .public-logo-halo{width:74px;height:74px;border-radius:23px}
  .public-logo-halo img{width:63px;height:63px}
  .public-wordmark strong{font-size:2rem}
  .public-wordmark span{font-size:.68rem;letter-spacing:.2em}
  .public-hero-card h1{font-size:2.45rem}
  .public-lead{font-size:.9rem;line-height:1.8;margin-top:17px}
  .public-cta{display:grid;grid-template-columns:1fr;margin-top:23px}
  .public-primary-cta,.public-dashboard-btn{width:100%!important;min-width:0}
  .public-links{display:grid;grid-template-columns:1fr 1fr}
  .public-showcase{padding:18px;border-radius:25px}
  .public-feature-grid article{padding:12px}
  .public-footer{display:grid;justify-content:start;line-height:1.6;margin-top:30px}
  .login-home-label{display:none}
  .login-home-link{width:42px;padding:0}
  html[data-language="en"] .public-wordmark span{font-size:1.05rem;letter-spacing:.12em}
}


/* v32.7 — keep login focused; move public content to home */
.public-secondary-grid{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  gap:18px;
  margin-top:clamp(28px,5vh,56px);
}
.public-info-card,
.public-download-section{
  border:1px solid rgba(255,255,255,.17);
  border-radius:28px;
  background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.065));
  box-shadow:0 24px 60px rgba(0,0,0,.17);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.public-info-card{padding:24px;display:flex;align-items:center}
.public-info-card h2{margin:0 0 10px;font-size:1.15rem;color:#fff}
.public-info-card p:last-child{margin:0;color:#d7e7fb;line-height:1.9;font-size:.86rem;font-weight:650}
.public-download-section{padding:18px}
.public-download-section .manhj-downloads{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.public-download-section .manhj-downloads-head{margin-bottom:14px}
.public-download-section .manhj-downloads-head b{color:#fff!important}
.public-download-section .manhj-downloads-head span{color:#b9d0ef!important}
.public-download-section .manhj-download-btn{
  background:rgba(255,255,255,.94)!important;
  color:#173260!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:0 10px 24px rgba(1,10,34,.12)!important;
}
.public-download-section .manhj-download-btn small{color:#6b7d99!important}
.public-download-section .manhj-download-btn b{color:#173260!important}
.public-download-section .download-symbol{color:#2563eb!important}
#loginView .login-card{width:min(100%,430px)}
#loginView .manhj-login-brand{margin-bottom:10px}
#loginView .manhj-brand-mark{width:78px!important;height:78px!important;border-radius:23px!important}
#loginView .manhj-logo-image{width:68px;height:68px}
#loginView .manhj-wordmark h1{font-size:1.85rem}
#loginView #loginForm{margin-top:14px}
#loginView .remembered-login-accounts{margin-top:14px}
@media(max-width:860px){
  .public-secondary-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .public-secondary-grid{margin-top:24px}
  .public-info-card,.public-download-section{border-radius:22px}
  .public-info-card{padding:18px}
  .public-download-section{padding:14px}
  .public-download-section .manhj-download-grid{grid-template-columns:1fr 1fr}
  #loginView .login-card{padding-top:18px}
}


/* v32.8 — align login header controls; keep home button clear of logo */
#loginView .login-card{padding-top:82px!important}
#loginView .login-language-toggle,
#loginView .login-home-link,
#loginView .login-theme-toggle{
  top:18px!important;
  height:44px!important;
  border-radius:14px!important;
}
#loginView .login-language-toggle{left:18px!important;right:auto!important}
#loginView .login-theme-toggle{right:18px!important;left:auto!important;width:44px!important}
#loginView .login-home-link{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  min-width:88px!important;
  padding:0 13px!important;
  border:1px solid #dbe7f5!important;
  background:rgba(255,255,255,.76)!important;
  color:#29436d!important;
  box-shadow:0 7px 20px rgba(15,23,42,.08)!important;
}
#loginView .login-home-link > span:first-child{font-size:1.15rem;line-height:1}
[data-theme="dark"] #loginView .login-home-link{
  background:rgba(8,21,44,.78)!important;
  border-color:#294266!important;
  color:#c8ddff!important;
}
@media(max-width:430px){
  #loginView .login-card{padding-top:76px!important}
  #loginView .login-language-toggle{top:15px!important;left:14px!important}
  #loginView .login-theme-toggle{top:15px!important;right:14px!important}
  #loginView .login-home-link{
    top:15px!important;
    min-width:74px!important;
    width:auto!important;
    padding:0 10px!important;
  }
  #loginView .login-home-label{display:inline!important;font-size:.68rem}
}


/* v32.9 — full light mode for public landing page */
[data-theme="light"] .public-shell{
  background:
    radial-gradient(circle at 10% 12%,rgba(34,211,238,.18),transparent 31%),
    radial-gradient(circle at 88% 8%,rgba(139,92,246,.13),transparent 30%),
    radial-gradient(circle at 60% 92%,rgba(22,139,255,.12),transparent 36%),
    linear-gradient(145deg,#f8fbff 0%,#eef5ff 44%,#e7efff 72%,#f5efff 120%);
  color:#10213e;
}
[data-theme="light"] .public-shell::before,
[data-theme="light"] .public-shell::after{
  border-color:rgba(37,99,235,.10);
}
[data-theme="light"] .public-brand-mini{color:#173260}
[data-theme="light"] .public-brand-mini img{
  background:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.14);
}
[data-theme="light"] .public-round-action{
  border-color:rgba(37,99,235,.18);
  background:rgba(255,255,255,.78);
  color:#2563eb;
  box-shadow:0 10px 26px rgba(37,99,235,.09);
}
[data-theme="light"] .public-logo-halo{
  background:linear-gradient(145deg,#fff,#f5f9ff);
  box-shadow:0 24px 55px rgba(37,99,235,.14),inset 0 0 0 1px rgba(37,99,235,.10);
}
[data-theme="light"] .public-wordmark strong{color:#102a63}
[data-theme="light"] .public-wordmark span{
  background:linear-gradient(90deg,#06b6d4,#2563eb,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
[data-theme="light"] .public-eyebrow{color:#2563eb}
[data-theme="light"] .public-hero-card h1{color:#10213e}
[data-theme="light"] .public-lead{color:#53647f}
[data-theme="light"] .public-dashboard-btn{
  border-color:rgba(37,99,235,.22);
  background:rgba(255,255,255,.72);
  color:#1d4ed8;
}
[data-theme="light"] .public-link-card{
  border-color:rgba(37,99,235,.14);
  background:rgba(255,255,255,.66);
  color:#29436d;
}
[data-theme="light"] .public-showcase,
[data-theme="light"] .public-info-card,
[data-theme="light"] .public-download-section{
  border-color:rgba(37,99,235,.14);
  background:linear-gradient(155deg,rgba(255,255,255,.88),rgba(245,249,255,.78));
  box-shadow:0 24px 60px rgba(37,99,235,.10);
}
[data-theme="light"] .public-showcase::before{border-color:rgba(37,99,235,.06)}
[data-theme="light"] .public-showcase-head strong,
[data-theme="light"] .public-feature-grid b,
[data-theme="light"] .public-info-card h2{color:#173260}
[data-theme="light"] .public-showcase-badge{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.16);
  color:#2563eb;
}
[data-theme="light"] .public-feature-grid article{
  border-color:rgba(37,99,235,.10);
  background:rgba(239,246,255,.72);
}
[data-theme="light"] .public-feature-grid small,
[data-theme="light"] .public-info-card p:last-child{color:#61738f}
[data-theme="light"] .public-role-orbit span{
  background:rgba(239,246,255,.78);
  border-color:rgba(37,99,235,.10);
  color:#29436d;
}
[data-theme="light"] .public-trust-line{color:#71819a}
[data-theme="light"] .public-trust-line i{background:#2563eb}
[data-theme="light"] .public-footer{
  border-top-color:rgba(37,99,235,.12);
  color:#71819a;
}
[data-theme="light"] .public-footer strong{color:#29436d}
[data-theme="light"] .public-download-section .manhj-downloads-head b{color:#173260!important}
[data-theme="light"] .public-download-section .manhj-downloads-head span{color:#71819a!important}
[data-theme="light"] .public-download-section .manhj-download-btn{
  background:#fff!important;
  border-color:rgba(37,99,235,.12)!important;
  box-shadow:0 10px 24px rgba(37,99,235,.08)!important;
}


/* v33.0 — polished login home control */
#loginView .login-home-link{
  min-width:44px!important;
  width:44px!important;
  height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden;
  border:1px solid rgba(37,99,235,.20)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(241,246,255,.78))!important;
  color:#2563eb!important;
  box-shadow:0 10px 28px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,.9)!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
#loginView .login-home-link:active{transform:translateX(-50%) scale(.93)!important}
#loginView .login-home-icon{width:21px;height:21px;display:grid;place-items:center}
#loginView .login-home-icon svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
[data-theme="dark"] #loginView .login-home-link{
  border-color:rgba(96,165,250,.30)!important;
  background:linear-gradient(145deg,rgba(20,43,78,.94),rgba(8,25,54,.88))!important;
  color:#72b7ff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
@media(hover:hover){
  #loginView .login-home-link:hover{
    transform:translateX(-50%) translateY(-2px)!important;
    box-shadow:0 14px 32px rgba(37,99,235,.17)!important;
  }
}
@media(max-width:430px){
  #loginView .login-home-link{min-width:44px!important;width:44px!important;padding:0!important}
}


/* v33.1 — tuition payment receipt system */
.receipt-settings-panel{margin-top:8px;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.receipt-settings-panel .section-head{margin-bottom:5px}
.receipt-settings-grid{margin-top:10px}
.receipt-option-switches{margin-top:10px}
.receipt-custom-disabled{opacity:.55}
.payment-receipt-modal-card{width:min(96vw,760px)!important;max-height:min(92dvh,900px)!important;overflow:auto!important}
.receipt-print-controls{display:grid;gap:12px}
.receipt-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.receipt-control-grid .receipt-payer-field{grid-column:span 2}
.receipt-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.receipt-toggle-grid .switch-row,.receipt-remember-row{margin:0!important;padding:10px 12px!important;border:1px solid var(--border)!important;border-radius:13px!important;background:var(--surface-2)!important}
.receipt-remember-row{margin-top:2px!important}
.receipt-preview-shell{margin-top:14px;padding:12px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--surface-2) 70%,var(--bg))}
.receipt-preview-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.receipt-preview-label span{font-weight:900}.receipt-preview-label small{color:var(--muted);font-weight:800}
.payment-receipt-preview{display:grid;place-items:start center;overflow:auto;padding:10px;border-radius:14px;background:#dfe5ec}
.payment-receipt-preview .receipt-sheet{box-sizing:border-box;background:#fff;color:#111;box-shadow:0 12px 35px rgba(15,23,42,.16);font-family:Tahoma,Arial,sans-serif;font-size:11px;padding:12px;direction:rtl}
.payment-receipt-preview[data-size="58"] .receipt-sheet{width:250px}
.payment-receipt-preview[data-size="80"] .receipt-sheet{width:330px}
.payment-receipt-preview[data-size="a6"] .receipt-sheet{width:380px}
.payment-receipt-preview[data-size="a5"] .receipt-sheet{width:480px}
.payment-receipt-preview[data-size="a4"] .receipt-sheet{width:600px}
.payment-receipt-preview[data-template="a4_split"]{display:block;overflow:auto}
.payment-receipt-preview[data-template="a4_split"] .receipt-split-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);direction:ltr;width:780px;min-height:550px;position:relative;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.16)}
.payment-receipt-preview[data-template="a4_split"] .receipt-split-page>.receipt-sheet{width:100%;max-width:none;min-height:550px;margin:0;padding:14px;direction:rtl;font-size:10px;box-shadow:none}
.payment-receipt-preview[data-template="a4_split"] .receipt-split-page>.receipt-sheet+.receipt-sheet{page-break-before:auto;border-left:0}
.payment-receipt-preview[data-template="a4_split"] .receipt-split-page:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed #555;transform:translateX(-50%);pointer-events:none}
.payment-receipt-preview[data-template="a4_split"] .receipt-split-page .receipt-amount-box{padding:8px;margin:8px 0}
.payment-receipt-preview[data-template="a4_split"] .receipt-split-page .receipt-info-row{padding:5px 0;font-size:10px}
.student-account-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;font-size:10px;font-weight:800;border:1px solid #b9c7d8;border-radius:999px;padding:3px 7px;margin-top:4px;color:#475569;background:#f1f5f9}
.student-account-status.pending{border-color:#e4c98b;background:#fff8e6;color:#805b14}
.payment-receipt-preview[data-size="custom"] .receipt-sheet{width:min(420px,100%)}
.receipt-head{text-align:center;border-bottom:1.5px solid #111;padding-bottom:7px;margin-bottom:7px;position:relative}
.receipt-logo{display:block;max-width:84px;max-height:62px;object-fit:contain;margin:0 auto 4px}
.receipt-school-name{font-size:1.2em;font-weight:950;line-height:1.5}.receipt-title{font-weight:850}
.receipt-reprint-badge{display:inline-block;margin-top:5px;padding:2px 6px;border:1px dashed #555;border-radius:5px;font-size:.72em}
.receipt-copy-index{display:block;color:#555;margin-top:3px}
.receipt-number,.receipt-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dotted #bbb}
.receipt-number span,.receipt-info-row span{color:#555}.receipt-number b{font-family:Arial,sans-serif;font-size:.9em}
.receipt-info-row b{text-align:left;max-width:62%}
.receipt-amount-box{text-align:center;border:2px solid #111;border-radius:7px;padding:8px;margin:8px 0}
.receipt-amount-box span{display:block;font-size:.8em}.receipt-amount-box strong{display:block;font-size:1.65em;margin-top:2px}
.receipt-balance{display:grid;border:1px solid #777;margin-top:8px}.receipt-balance>div{display:flex;justify-content:space-between;padding:5px;border-bottom:1px solid #bbb}.receipt-balance>div:last-child{border-bottom:0}.receipt-balance .remaining{font-weight:950}
.receipt-sign-row{display:flex;justify-content:space-around;gap:10px;text-align:center;margin-top:16px}.receipt-sign-row span{flex:1;font-weight:800}.receipt-sign-row i{display:block;height:12px;border-bottom:1px solid #666}
.receipt-footer{display:grid;gap:2px;text-align:center;margin-top:9px;padding-top:6px;border-top:1px dashed #777;color:#555;font-size:.72em}
.receipt-template-modern .receipt-head{border-bottom:3px solid #111}.receipt-template-modern .receipt-amount-box{background:#f2f2f2}
.receipt-template-compact{font-size:10px!important}.receipt-template-compact .receipt-info-row{padding:3px 0}.receipt-template-compact .receipt-amount-box{padding:5px;margin:5px 0}.receipt-template-compact .receipt-sign-row{margin-top:10px}
.receipt-dialog-actions{display:grid;grid-template-columns:1.3fr .7fr;gap:10px;margin-top:14px}
.payment-receipt-btn{display:inline-flex!important;align-items:center!important;gap:6px!important}.payment-receipt-btn .g-icon{width:16px;height:16px}
.student-payment-history-actions{flex-wrap:wrap}
@media(max-width:640px){
  .receipt-control-grid{grid-template-columns:1fr 1fr}
  .receipt-control-grid .receipt-payer-field{grid-column:1/-1}
  .receipt-toggle-grid{grid-template-columns:1fr}
  .payment-receipt-modal-card{width:96vw!important}
  .payment-receipt-preview{padding:8px;justify-content:start}
  .payment-receipt-preview .receipt-sheet{max-width:100%}
}
@media(max-width:420px){
  .receipt-control-grid{grid-template-columns:1fr}
  .receipt-dialog-actions{grid-template-columns:1fr}
  .payment-receipt-preview[data-size="80"] .receipt-sheet,
  .payment-receipt-preview[data-size="a6"] .receipt-sheet,
  .payment-receipt-preview[data-size="a5"] .receipt-sheet,
  .payment-receipt-preview[data-size="a4"] .receipt-sheet{width:100%}
}


/* v33.2 — keep receipt preview viewport stable across paper sizes */
.payment-receipt-modal-card{
  width:min(96vw,720px)!important;
  max-width:720px!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
.receipt-print-controls,
.receipt-preview-shell,
.receipt-dialog-actions{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
.receipt-preview-shell{
  overflow:hidden!important;
}
.payment-receipt-preview{
  width:100%!important;
  min-width:0!important;
  height:420px!important;
  min-height:420px!important;
  max-height:420px!important;
  overflow:auto!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:12px!important;
}
.payment-receipt-preview .receipt-sheet,
.payment-receipt-preview[data-size="58"] .receipt-sheet,
.payment-receipt-preview[data-size="80"] .receipt-sheet,
.payment-receipt-preview[data-size="a6"] .receipt-sheet,
.payment-receipt-preview[data-size="a5"] .receipt-sheet,
.payment-receipt-preview[data-size="a4"] .receipt-sheet,
.payment-receipt-preview[data-size="custom"] .receipt-sheet{
  width:320px!important;
  min-width:0!important;
  max-width:100%!important;
  flex:0 0 auto!important;
  margin:0 auto!important;
}
.payment-receipt-preview .receipt-number,
.payment-receipt-preview .receipt-info-row,
.payment-receipt-preview .receipt-balance>div{
  min-width:0!important;
}
.payment-receipt-preview .receipt-number b,
.payment-receipt-preview .receipt-info-row b{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:420px){
  .payment-receipt-preview{
    height:390px!important;
    min-height:390px!important;
    max-height:390px!important;
    padding:8px!important;
  }
  .payment-receipt-preview .receipt-sheet,
  .payment-receipt-preview[data-size="58"] .receipt-sheet,
  .payment-receipt-preview[data-size="80"] .receipt-sheet,
  .payment-receipt-preview[data-size="a6"] .receipt-sheet,
  .payment-receipt-preview[data-size="a5"] .receipt-sheet,
  .payment-receipt-preview[data-size="a4"] .receipt-sheet,
  .payment-receipt-preview[data-size="custom"] .receipt-sheet{
    width:300px!important;
    max-width:100%!important;
  }
}


/* v33.4 — Al Nakhlah Private Schools premium school messaging */
#chatsPage.chat-hub-page{
  --chat-accent:var(--primary);
  --chat-soft:color-mix(in srgb,var(--primary) 9%,var(--surface));
  --chat-border:color-mix(in srgb,var(--border) 84%,var(--primary) 16%);
  display:none;
}
#chatsPage.chat-hub-page.active{display:block}
.chat-hub-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:12px;padding:4px 2px 0;
}
.chat-hub-copy{display:grid;gap:3px;min-width:0}
.chat-hub-copy .eyebrow{margin:0}
.chat-hub-copy h2{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.chat-hub-copy>p:last-child{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6}
.chat-new-button{
  min-height:46px;padding:0 16px;border:0;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font:inherit;font-weight:900;font-size:.78rem;cursor:pointer;
  box-shadow:0 12px 26px var(--accent-glow);white-space:nowrap;
}
.chat-new-button.active{box-shadow:0 0 0 4px var(--accent-soft),0 12px 26px var(--accent-glow)}
.chat-new-symbol{font-size:1.25rem;line-height:1;font-weight:500}

.chat-filter-bar{
  display:flex;align-items:center;gap:7px;overflow-x:auto;padding:2px 1px 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chat-filter-bar::-webkit-scrollbar{display:none}
.chat-filter-bar button{
  flex:0 0 auto;min-height:35px;padding:7px 11px;border:1px solid var(--chat-border);
  border-radius:999px;background:var(--surface);color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.69rem;font-weight:850;cursor:pointer;
}
.chat-filter-bar button b{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text);font-size:.61rem;
}
.chat-filter-bar button.active{
  background:var(--text);border-color:var(--text);color:var(--bg);
  box-shadow:0 6px 16px rgba(15,23,42,.12);
}
.chat-filter-bar button.active b{background:color-mix(in srgb,var(--bg) 18%,transparent);color:var(--bg)}

#chatsPage .chat-layout{
  height:min(720px,calc(100dvh - 230px));min-height:560px;
  display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  border:1px solid var(--chat-border);border-radius:26px;overflow:hidden;
  background:var(--surface);box-shadow:0 22px 65px rgba(15,23,42,.08);
}
#chatsPage .chat-sidebar{
  min-width:0;position:relative;display:flex;flex-direction:column;
  border-inline-end:1px solid var(--chat-border);background:var(--surface);
  overflow:hidden;
}
.chat-sidebar-search{padding:14px 14px 10px}
#chatsPage .chat-search-wrap{
  min-height:46px;border:1px solid var(--chat-border);border-radius:15px;
  background:var(--surface-2);display:flex;align-items:center;gap:9px;padding:0 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.chat-search-icon{width:20px;height:20px;color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.chat-search-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
#chatContactSearch{
  width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;
  color:var(--text);font:inherit;font-size:.79rem;padding:0!important;box-shadow:none!important;
}
#chatContactSearch::placeholder{color:color-mix(in srgb,var(--muted) 82%,transparent)}

.chat-inbox-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 15px 9px;
}
.chat-inbox-heading>div{display:grid;gap:2px}
.chat-inbox-heading strong{font-size:.78rem}
.chat-inbox-heading small{font-size:.61rem;color:var(--muted)}
.chat-secure-pill{
  display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;
  background:rgba(16,185,129,.09);color:#059669;font-size:.61rem;font-weight:900;
}
.chat-secure-pill>span{font-size:.46rem}
#chatsPage .chat-inbox{
  flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px;scrollbar-width:thin;
}
.chat-conversation-card{
  width:100%;min-height:78px;padding:10px 9px;border:0;border-radius:17px;
  display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px;
  background:transparent;color:var(--text);text-align:start;font:inherit;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.chat-conversation-card:hover{background:var(--surface-2)}
.chat-conversation-card:active{transform:scale(.985)}
.chat-conversation-card.active{background:var(--chat-soft)}
.chat-conversation-card.unread{background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
#chatsPage .chat-avatar{
  width:48px;height:48px;min-width:48px;border-radius:16px;display:grid;place-items:center;
  overflow:hidden;background:var(--chat-soft);color:var(--primary);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 16%,var(--border));
}
#chatsPage .chat-avatar .role-avatar-unified{width:48px!important;height:48px!important}
.chat-conversation-main{min-width:0;display:grid;gap:3px}
.chat-conversation-top,.chat-conversation-preview{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
}
.chat-conversation-top b{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.8rem;font-weight:900;
}
.chat-conversation-top time{flex:0 0 auto;font-size:.58rem;color:var(--muted);direction:rtl}
.chat-conversation-card.unread .chat-conversation-top b{color:var(--primary)}
.chat-conversation-preview small{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:.67rem;
}
.chat-conversation-preview em{
  flex:0 0 auto;min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;background:var(--primary);color:#fff;
  font-style:normal;font-size:.58rem;font-weight:900;
}
.chat-conversation-role{
  width:max-content;max-width:100%;padding:2px 7px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);font-size:.56rem;font-weight:850;
}

#chatsPage .chat-contacts-panel{
  position:absolute;z-index:8;top:70px;inset-inline:10px;bottom:10px;
  display:flex;flex-direction:column;border:1px solid var(--chat-border);border-radius:20px;
  background:color-mix(in srgb,var(--surface-solid) 96%,transparent);
  box-shadow:0 24px 60px rgba(15,23,42,.18);overflow:hidden;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#chatsPage .chat-contacts-panel.hidden{display:none!important}
#chatsPage .chat-section-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px;border-bottom:1px solid var(--chat-border);
}
#chatsPage .chat-section-heading>div{display:grid;gap:2px}
#chatsPage .chat-section-heading strong{font-size:.82rem}
#chatsPage .chat-section-heading small{font-size:.61rem;color:var(--muted)}
#chatCloseContacts{
  width:34px;height:34px;border:1px solid var(--chat-border);border-radius:11px;
  background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;
}
#chatsPage .chat-contacts{min-height:0;overflow-y:auto;padding:8px}
.chat-contact-card{
  width:100%;display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:10px;
  border:0;border-radius:16px;background:transparent;color:var(--text);padding:9px;
  font:inherit;text-align:start;cursor:pointer;
}
.chat-contact-card:hover{background:var(--surface-2)}
.chat-contact-main{min-width:0;display:grid;gap:3px}
.chat-contact-main b{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-contact-main small{font-size:.61rem;color:var(--muted)}
.chat-contact-action{font-size:1rem;color:var(--muted)}

#chatsPage .chat-thread{
  min-width:0;position:relative;display:flex;flex-direction:column;background:var(--surface-2);
}
#chatsPage .chat-thread-header{
  min-height:72px;padding:10px 12px;border-bottom:1px solid var(--chat-border);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;
  background:color-mix(in srgb,var(--surface-solid) 94%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#chatsPage .chat-back-button{
  width:40px;height:40px;border:1px solid var(--chat-border);border-radius:13px;
  display:none;place-items:center;background:var(--surface);color:var(--text);cursor:pointer;
}
.chat-back-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-peer-header{
  min-width:0;border:0;background:transparent;color:var(--text);font:inherit;
  display:flex;align-items:center;gap:10px;text-align:start;padding:0;cursor:pointer;
}
.chat-peer-header:disabled{cursor:default}
#chatsPage .chat-thread-avatar{width:46px;height:46px;min-width:46px;border-radius:15px}
#chatsPage .chat-thread-avatar .role-avatar-unified{width:46px!important;height:46px!important}
.chat-thread-identity{min-width:0;display:grid;gap:2px}
.chat-thread-identity b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.chat-thread-identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.61rem}
.chat-thread-actions{display:flex;align-items:center;gap:7px}
#chatsPage .chat-private-label{
  display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;
  background:rgba(16,185,129,.09);color:#059669;font-size:.58rem;font-weight:900;
}
.chat-private-label>span{font-size:.42rem}
.chat-info-button{
  width:38px;height:38px;border:1px solid var(--chat-border);border-radius:12px;
  display:grid;place-items:center;background:var(--surface);color:var(--text);cursor:pointer;
}
.chat-info-button:disabled{opacity:.38;cursor:default}
.chat-info-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

#chatsPage .chat-messages{
  flex:1;min-height:0;overflow-y:auto;padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:5px;
  background:
    radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--primary) 5%,transparent),transparent 28%),
    var(--surface-2);
  scroll-behavior:smooth;
}
.chat-day-label{display:flex;align-items:center;justify-content:center;margin:10px 0 7px}
.chat-day-label span{
  padding:5px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--chat-border);
  color:var(--muted);font-size:.58rem;font-weight:850;box-shadow:0 4px 12px rgba(15,23,42,.04);
}
#chatsPage .chat-bubble{
  width:max-content;max-width:min(76%,560px);display:grid;gap:3px;
  padding:9px 11px 6px;border:1px solid var(--chat-border);
  border-radius:18px;background:var(--surface);color:var(--text);
  box-shadow:0 5px 16px rgba(15,23,42,.035);line-height:1.65;
  animation:chatBubbleIn .2s ease both;
}
@keyframes chatBubbleIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
#chatsPage .chat-bubble.mine{
  align-self:flex-start;border-end-start-radius:5px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface)));
  border-color:color-mix(in srgb,var(--primary) 22%,var(--border));
}
#chatsPage .chat-bubble.theirs{align-self:flex-end;border-end-end-radius:5px}
.chat-bubble-body{font-size:.77rem;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-bubble>small{display:flex;align-items:center;justify-content:flex-end;gap:4px;color:var(--muted);font-size:.54rem;direction:rtl}
.chat-message-state{font-size:.58rem;color:var(--muted);letter-spacing:-.12em}
.chat-message-state.read{color:var(--primary)}
.chat-thread-empty{
  margin:auto;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;text-align:center;color:var(--muted);padding:24px;
}
.chat-thread-empty b{color:var(--text);font-size:.88rem}
.chat-thread-empty small{max-width:280px;font-size:.67rem;line-height:1.6}
.chat-empty-mark{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:var(--chat-soft);color:var(--primary);font-size:1.15rem;font-weight:900;
}
.chat-loading-mark{animation:chatSpin 1s linear infinite}
@keyframes chatSpin{to{transform:rotate(360deg)}}
.chat-empty{
  min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;color:var(--muted);padding:20px;
}
.chat-empty b{color:var(--text);font-size:.8rem}.chat-empty small{font-size:.64rem;line-height:1.55}
.chat-empty-success .chat-empty-mark{background:rgba(16,185,129,.10);color:#059669}

#chatsPage .chat-composer{
  padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;
  border-top:1px solid var(--chat-border);background:color-mix(in srgb,var(--surface-solid) 96%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#chatsPage .chat-composer.hidden{display:none!important}
.chat-composer-field{
  min-height:46px;border:1px solid var(--chat-border);border-radius:16px;background:var(--surface-2);
  display:flex;align-items:center;padding:0 12px;
}
#chatsPage .chat-composer textarea{
  width:100%;min-height:44px;max-height:112px;resize:none;border:0!important;outline:0!important;
  background:transparent!important;color:var(--text)!important;box-shadow:none!important;
  font:inherit;font-size:.78rem;line-height:1.55;padding:11px 0!important;
}
#chatsPage .chat-send-button{
  width:46px;height:46px;border:0;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;cursor:pointer;
  box-shadow:0 9px 22px var(--accent-glow);transition:transform .16s ease,opacity .16s ease;
}
#chatsPage .chat-send-button:active{transform:scale(.92)}
#chatsPage .chat-send-button:disabled{opacity:.55}
.chat-send-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chat-jump-bottom{
  position:absolute;z-index:4;inset-inline-start:50%;bottom:76px;transform:translateX(-50%);
  width:36px;height:36px;border:1px solid var(--chat-border);border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--text);
  box-shadow:0 8px 20px rgba(15,23,42,.14);cursor:pointer;
}
.chat-jump-bottom.hidden{display:none!important}

.chat-profile-panel{
  position:absolute;z-index:10;inset-block:0;inset-inline-end:0;width:min(360px,100%);
  display:flex;flex-direction:column;background:color-mix(in srgb,var(--surface-solid) 98%,transparent);
  border-inline-start:1px solid var(--chat-border);box-shadow:-20px 0 55px rgba(15,23,42,.14);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:chatProfileIn .24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chatProfileIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
html[dir="ltr"] .chat-profile-panel{box-shadow:20px 0 55px rgba(15,23,42,.14)}
.chat-profile-panel.hidden{display:none!important}
.chat-profile-head{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:26px 18px 18px;border-bottom:1px solid var(--chat-border);
  background:linear-gradient(180deg,var(--chat-soft),transparent);
}
.chat-profile-close{
  position:absolute;top:12px;inset-inline-start:12px;width:36px;height:36px;border:1px solid var(--chat-border);
  border-radius:12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;
}
.chat-profile-avatar{
  width:82px;height:82px;border-radius:26px;display:grid;place-items:center;overflow:hidden;
  background:var(--chat-soft);box-shadow:0 14px 35px var(--accent-glow),inset 0 0 0 1px var(--chat-border);
}
.chat-profile-avatar .role-avatar-unified{width:82px!important;height:82px!important}
.chat-profile-head h3{margin:7px 0 0;font-size:1.05rem}
.chat-profile-role{
  padding:4px 9px;border-radius:999px;background:var(--chat-soft);color:var(--primary);
  font-size:.62rem;font-weight:900;
}
.chat-profile-head small{font-size:.65rem;color:var(--muted)}
.chat-profile-details{
  flex:1;min-height:0;overflow-y:auto;padding:14px;display:grid;
  grid-template-columns:1fr 1fr;align-content:start;gap:8px;
}
.chat-profile-detail{
  min-width:0;padding:11px;border:1px solid var(--chat-border);border-radius:14px;
  background:var(--surface);display:grid;gap:4px;
}
.chat-profile-detail.wide{grid-column:1/-1}
.chat-profile-detail small{font-size:.58rem;color:var(--muted)}
.chat-profile-detail b{font-size:.72rem;line-height:1.55;overflow-wrap:anywhere}
.chat-profile-loading{
  grid-column:1/-1;min-height:110px;display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--muted);font-size:.68rem;text-align:center;
}
.chat-profile-loading>span{
  width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;
  animation:chatSpin .8s linear infinite;
}
.chat-profile-actions{padding:12px 14px;display:grid;gap:8px;border-top:1px solid var(--chat-border)}
.chat-profile-actions .btn{width:100%}
.chat-profile-privacy{
  margin:0;padding:0 14px 14px;color:var(--muted);font-size:.58rem;line-height:1.5;text-align:center;
}
.chat-profile-privacy>span{color:#10b981;font-size:.45rem}

[data-theme="dark"] #chatsPage .chat-layout{box-shadow:0 24px 70px rgba(0,0,0,.28)}
[data-theme="dark"] .chat-conversation-card.unread{background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
[data-theme="dark"] #chatsPage .chat-bubble.mine{background:color-mix(in srgb,var(--primary) 14%,var(--surface))}
[data-theme="dark"] .payment-receipt-preview{color-scheme:light}

@media(max-width:700px){
  #chatsPage .chat-hub-top{align-items:flex-end}
  .chat-hub-copy>p:last-child{display:none}
  .chat-new-button{min-height:42px;padding:0 13px;border-radius:14px}
  .chat-filter-bar{margin-inline:-2px}
  #chatsPage .chat-layout{
    height:calc(100dvh - 250px);min-height:500px;max-height:720px;
    display:block;border-radius:23px;
  }
  #chatsPage .chat-sidebar{height:100%;border-inline-end:0}
  #chatsPage .chat-thread{height:100%;display:none}
  #chatsPage .chat-layout.thread-open .chat-sidebar{display:none!important}
  #chatsPage .chat-layout.thread-open .chat-thread{display:flex!important}
  #chatsPage .chat-back-button{display:grid}
  #chatsPage .chat-private-label{display:none}
  #chatsPage .chat-thread-header{grid-template-columns:auto minmax(0,1fr) auto;min-height:66px;padding:8px 9px}
  #chatsPage .chat-thread-avatar{width:42px;height:42px;min-width:42px}
  #chatsPage .chat-thread-avatar .role-avatar-unified{width:42px!important;height:42px!important}
  #chatsPage .chat-messages{padding:14px 10px 12px}
  #chatsPage .chat-bubble{max-width:86%;padding:8px 10px 5px}
  .chat-bubble-body{font-size:.75rem}
  #chatsPage .chat-composer{padding:8px 9px calc(8px + env(safe-area-inset-bottom))}
  .chat-profile-panel{width:100%;border-inline-start:0;box-shadow:none}
  .chat-thread-open-page .chat-hub-top,
  .chat-thread-open-page .chat-filter-bar{display:none}
  .chat-thread-open-page .chat-layout{height:calc(100dvh - 178px);max-height:none}
}
@media(max-width:390px){
  .chat-hub-copy h2{font-size:1.15rem}
  .chat-new-button span:last-child{display:none}
  .chat-new-button{width:43px;padding:0}
  #chatsPage .chat-layout{height:calc(100dvh - 240px);min-height:490px}
  .chat-conversation-card{grid-template-columns:48px minmax(0,1fr);min-height:74px;padding:8px}
  #chatsPage .chat-avatar{width:44px;height:44px;min-width:44px;border-radius:14px}
  #chatsPage .chat-avatar .role-avatar-unified{width:44px!important;height:44px!important}
  .chat-conversation-role{font-size:.53rem}
  .chat-thread-open-page .chat-layout{height:calc(100dvh - 170px)}
}


/* v33.6 — compact unified chat profile information */
.chat-profile-details{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:12px 14px 10px!important;
  align-content:initial!important;
}
.chat-profile-detail,
.chat-profile-detail.wide{
  grid-column:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:58px!important;
  padding:9px 11px!important;
  border:1px solid var(--chat-border)!important;
  border-radius:15px!important;
  background:var(--surface)!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  box-shadow:0 4px 12px rgba(15,23,42,.025)!important;
}
.chat-profile-detail-icon{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--chat-soft)!important;
  color:var(--primary)!important;
  flex:0 0 auto!important;
}
.chat-profile-detail-icon .g-icon{
  width:19px!important;
  height:19px!important;
}
.chat-profile-detail-copy{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
  text-align:start!important;
}
.chat-profile-detail-copy small{
  font-size:.57rem!important;
  line-height:1.35!important;
  color:var(--muted)!important;
}
.chat-profile-detail-copy b{
  min-width:0!important;
  font-size:.73rem!important;
  line-height:1.55!important;
  font-weight:850!important;
  color:var(--text)!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.chat-profile-detail-copy .chat-profile-ltr{
  direction:ltr!important;
  unicode-bidi:isolate!important;
  text-align:start!important;
  justify-self:start!important;
}
@media(max-width:700px){
  .chat-profile-details{padding:10px 12px 8px!important}
  .chat-profile-detail,.chat-profile-detail.wide{min-height:56px!important}
}


/* v33.7 — single clean information card inside chat profile */
.chat-profile-details{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px 14px 14px!important;
  display:block!important;
  overscroll-behavior:contain;
}
.chat-profile-info-card{
  width:100%!important;
  min-width:0!important;
  border:1px solid var(--chat-border)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:var(--surface)!important;
  box-shadow:0 7px 22px rgba(15,23,42,.035)!important;
}
.chat-profile-info-card .chat-profile-detail,
.chat-profile-info-card .chat-profile-detail.wide{
  width:100%!important;
  min-height:58px!important;
  margin:0!important;
  padding:9px 11px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
.chat-profile-info-card .chat-profile-detail + .chat-profile-detail{
  border-top:1px solid color-mix(in srgb,var(--chat-border) 78%,transparent)!important;
}
.chat-profile-info-card .chat-profile-detail-icon{
  width:36px!important;
  height:36px!important;
  border-radius:11px!important;
}
.chat-profile-info-card .chat-profile-detail-copy{gap:1px!important}
.chat-profile-info-card .chat-profile-detail-copy small{font-size:.56rem!important}
.chat-profile-info-card .chat-profile-detail-copy b{
  font-size:.72rem!important;
  line-height:1.45!important;
}
.chat-profile-actions{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:3!important;
  padding:10px 14px!important;
  background:color-mix(in srgb,var(--surface-solid) 96%,transparent)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.chat-profile-privacy{
  flex:0 0 auto!important;
  padding:0 14px 12px!important;
  background:color-mix(in srgb,var(--surface-solid) 96%,transparent)!important;
}
@media(max-width:700px){
  .chat-profile-head{padding:20px 16px 14px!important}
  .chat-profile-avatar{width:74px!important;height:74px!important;border-radius:23px!important}
  .chat-profile-avatar .role-avatar-unified{width:74px!important;height:74px!important}
  .chat-profile-head h3{font-size:.98rem!important;margin-top:5px!important}
  .chat-profile-details{padding:10px 12px 12px!important}
  .chat-profile-info-card{border-radius:16px!important}
  .chat-profile-info-card .chat-profile-detail,
  .chat-profile-info-card .chat-profile-detail.wide{min-height:55px!important;padding:8px 10px!important}
  .chat-profile-actions{padding:9px 12px!important}
  .chat-profile-privacy{padding:0 12px 10px!important}
}


/* v34.0 — Guardian Family Hub */
body[data-role="guardian"]{
  --primary:#0891b2;
  --primary-2:#7c3aed;
  --accent-soft:rgba(8,145,178,.11);
  --accent-glow:rgba(124,58,237,.18);
}
.guardian-role-avatar .guardian-child-head{opacity:.86}
.guardian-role-avatar .guardian-child-body{opacity:.82}
.guardian-role-avatar .role-avatar-badge{fill:var(--primary);stroke:none}

.guardian-child-bar{
  position:sticky;
  top:calc(env(safe-area-inset-top) + 76px);
  z-index:34;
  width:min(1120px,calc(100% - 28px));
  margin:10px auto 0;
  min-height:62px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(180px,290px);
  align-items:center;
  gap:10px;
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));
  border-radius:19px;
  background:color-mix(in srgb,var(--surface-solid) 94%,transparent);
  box-shadow:0 12px 34px rgba(15,23,42,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.guardian-child-bar.hidden{display:none!important}
.guardian-child-bar-icon{
  width:43px;height:43px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;box-shadow:0 8px 20px var(--accent-glow);font-size:1.05rem;
}
.guardian-child-bar-copy{min-width:0;display:grid;gap:1px}
.guardian-child-bar-copy small{font-size:.55rem;color:var(--muted);font-weight:800}
.guardian-child-bar-copy b{font-size:.77rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-child-bar-copy span{font-size:.58rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-child-bar-select select{
  width:100%;height:43px;padding-inline:10px;border-radius:13px;font-size:.69rem;font-weight:800;
  background:var(--surface-2);
}

.guardian-dashboard{
  display:grid;gap:14px;margin-bottom:16px;
}
.guardian-dashboard.hidden{display:none!important}
.guardian-dashboard-hero{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:25px;
  background:
    radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--primary-2) 18%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));
  box-shadow:0 20px 48px rgba(15,23,42,.07);
}
.guardian-dashboard-hero::after{
  content:"♥";position:absolute;inset-inline-end:22px;bottom:-36px;
  font-size:8rem;line-height:1;color:color-mix(in srgb,var(--primary) 6%,transparent);pointer-events:none;
}
.guardian-dashboard-hero>div{position:relative;z-index:1}
.guardian-dashboard-hero h2{margin:3px 0 6px}
.guardian-dashboard-hero p:last-child{margin:0;max-width:640px;color:var(--muted);font-size:.74rem;line-height:1.65}
.guardian-family-open{position:relative;z-index:1;white-space:nowrap}
.guardian-family-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;
}
.guardian-family-kpis article{
  min-width:0;min-height:88px;padding:12px;border:1px solid var(--border);border-radius:18px;
  background:var(--surface);display:flex;align-items:center;gap:10px;box-shadow:0 8px 22px rgba(15,23,42,.035);
}
.guardian-family-kpis .guardian-kpi-wide{grid-column:auto}
.guardian-kpi-icon{
  width:36px;height:36px;min-width:36px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--primary);font-size:.64rem;font-weight:950;
}
.guardian-family-kpis article>div{min-width:0;display:grid;gap:2px}
.guardian-family-kpis small{font-size:.56rem;color:var(--muted)}
.guardian-family-kpis strong{font-size:.87rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-home-head,.guardian-family-section-head,.guardian-list-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.guardian-home-head h3,.guardian-family-section-head h3,.guardian-list-head h3{margin:1px 0 0}
.guardian-home-head>small,.guardian-family-section-head>small,.guardian-list-head>small{font-size:.58rem;color:var(--muted)}
.guardian-home-children,.guardian-children-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:9px;
}
.guardian-home-actions{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
.guardian-home-actions button,.guardian-child-quick-actions button{
  min-height:72px;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:var(--text);
  font:inherit;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  align-items:center;text-align:start;column-gap:9px;padding:11px;cursor:pointer;
}
.guardian-home-actions button>span,.guardian-child-quick-actions button>span{
  grid-row:1/3;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--primary);font-weight:950;
}
.guardian-home-actions b{font-size:.7rem}.guardian-home-actions small{font-size:.56rem;color:var(--muted)}

.guardian-family-panel{display:grid;gap:15px}
.guardian-family-panel.hidden{display:none!important}
.guardian-family-header{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:18px 19px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:24px;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary) 6%,var(--surface)));
}
.guardian-family-header h2{margin:2px 0}.guardian-family-header p:last-child{margin:0;color:var(--muted);font-size:.69rem}
.guardian-family-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.guardian-family-summary{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
}
.guardian-family-summary article{
  min-width:0;padding:12px;border:1px solid var(--border);border-radius:17px;background:var(--surface);display:grid;gap:3px;
}
.guardian-family-summary small{font-size:.55rem;color:var(--muted)}
.guardian-family-summary strong{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-family-summary .guardian-family-money strong{color:var(--primary)}
.guardian-child-card{
  min-width:0;padding:11px;border:1px solid var(--border);border-radius:19px;background:var(--surface);
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:10px;
  color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:.18s ease;
}
.guardian-child-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}
.guardian-child-card.active{
  border-color:color-mix(in srgb,var(--primary) 55%,var(--border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),color-mix(in srgb,var(--primary-2) 5%,var(--surface)));
  box-shadow:0 10px 28px var(--accent-glow);
}
.guardian-child-card-avatar{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:1rem;
}
.guardian-child-card-main{min-width:0;display:grid;gap:2px}
.guardian-child-card-main b{font-size:.73rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-child-card-main small{font-size:.57rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-child-card-main em{font-style:normal;font-size:.55rem;color:var(--primary);font-weight:800}
.guardian-child-card-stats{display:grid;justify-items:end;gap:3px;min-width:75px}
.guardian-child-card-stats i{
  font-style:normal;padding:3px 7px;border-radius:999px;font-size:.52rem;font-weight:900;background:var(--surface-2);color:var(--muted);
}
.guardian-child-card-stats i.ok{background:rgba(16,185,129,.1);color:#059669}
.guardian-child-card-stats i.danger{background:rgba(239,68,68,.1);color:#dc2626}
.guardian-child-card-stats i.warn{background:rgba(245,158,11,.12);color:#d97706}
.guardian-child-card-stats i.info{background:rgba(59,130,246,.1);color:#2563eb}
.guardian-child-card-stats small{font-size:.5rem;color:var(--muted)}

.guardian-selected-child{
  border:1px solid var(--border);border-radius:25px;background:var(--surface);overflow:hidden;
  box-shadow:0 18px 50px rgba(15,23,42,.055);
}
.guardian-selected-child.hidden{display:none!important}
.guardian-selected-child-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));
  border-bottom:1px solid var(--border);
}
.guardian-child-avatar{
  width:55px;height:55px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:1.2rem;
  box-shadow:0 10px 25px var(--accent-glow);
}
.guardian-selected-child-head h3{margin:2px 0;font-size:1rem}
.guardian-selected-child-head p:last-child{margin:0;color:var(--muted);font-size:.62rem}
.guardian-relation-chip{padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--primary);font-size:.58rem;font-weight:900}
.guardian-child-quick-actions{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px 12px;border-bottom:1px solid var(--border);
}
.guardian-child-quick-actions button{min-height:52px;padding:7px;border-radius:14px;grid-template-columns:auto 1fr;grid-template-rows:1fr}
.guardian-child-quick-actions button>span{grid-row:auto;width:31px;height:31px;border-radius:10px}
.guardian-child-quick-actions b{font-size:.63rem}
.guardian-family-tabs{
  display:flex;gap:5px;padding:9px 11px;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:none;
}
.guardian-family-tabs::-webkit-scrollbar{display:none}
.guardian-family-tabs button{
  flex:0 0 auto;min-height:34px;padding:6px 11px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-2);color:var(--muted);font:inherit;font-size:.59rem;font-weight:850;cursor:pointer;
}
.guardian-family-tabs button.active{background:var(--text);border-color:var(--text);color:var(--bg)}
.guardian-family-content{padding:14px;min-height:210px}
.guardian-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.guardian-overview-grid article{
  min-width:0;min-height:92px;padding:11px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);display:grid;align-content:start;gap:5px;
}
.guardian-overview-grid span{font-size:.55rem;color:var(--muted)}
.guardian-overview-grid strong{font-size:.72rem;line-height:1.4}
.guardian-overview-grid strong.ok{color:#059669}.guardian-overview-grid strong.danger{color:#dc2626}.guardian-overview-grid strong.warn{color:#d97706}
.guardian-overview-grid small{font-size:.52rem;color:var(--muted);line-height:1.45}
.guardian-important-note{
  margin-top:9px;padding:10px 12px;border:1px solid rgba(245,158,11,.25);border-radius:14px;
  background:rgba(245,158,11,.08);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.guardian-important-note b{font-size:.65rem}.guardian-important-note button{border:0;background:transparent;color:#d97706;font:inherit;font-size:.58rem;font-weight:900;cursor:pointer}
.guardian-timeline{margin-top:14px;display:grid;gap:8px}
.guardian-timeline-item{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid var(--border);
}
.guardian-timeline-item:last-child{border-bottom:0}
.guardian-timeline-item .g-icon-wrap{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--primary);display:grid;place-items:center}
.guardian-timeline-item .g-icon{width:18px;height:18px}
.guardian-timeline-item>div{min-width:0}.guardian-timeline-item b{font-size:.66rem}.guardian-timeline-item p{margin:2px 0 0;font-size:.59rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guardian-timeline-item>small{font-size:.5rem;color:var(--muted)}

.guardian-record-row,.guardian-grade-row,.guardian-request-row{
  min-height:60px;padding:9px 1px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.guardian-record-row:last-child,.guardian-grade-row:last-child,.guardian-request-row:last-child{border-bottom:0}
.guardian-record-row>div,.guardian-grade-row>div,.guardian-request-row>div{min-width:0;display:grid;gap:3px}
.guardian-record-row b,.guardian-grade-row b,.guardian-request-row b{font-size:.67rem}
.guardian-record-row small,.guardian-grade-row small,.guardian-request-row small{font-size:.56rem;color:var(--muted)}
.guardian-grade-row>strong{font-size:.9rem;color:var(--primary)}.guardian-grade-row>strong i{font-style:normal;font-size:.55rem;color:var(--muted)}
.guardian-status{padding:4px 8px;border-radius:999px;font-size:.55rem;font-weight:900;background:var(--surface-2)}
.guardian-status.absent{color:#dc2626;background:rgba(239,68,68,.1)}.guardian-status.present{color:#059669;background:rgba(16,185,129,.1)}.guardian-status.late{color:#d97706;background:rgba(245,158,11,.1)}
.guardian-fee-card{
  margin-top:9px;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);
}
.guardian-fee-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.guardian-fee-kpis span{padding:8px;border-radius:12px;background:var(--surface);display:grid;gap:2px}
.guardian-fee-kpis small{font-size:.52rem;color:var(--muted)}.guardian-fee-kpis b{font-size:.68rem}
.guardian-fee-kpis .remaining b{color:#dc2626}.guardian-fee-kpis .paid b{color:#059669}
.guardian-fee-card>p{margin:8px 0 0;font-size:.55rem;color:var(--muted)}
.guardian-payment-mini-list{margin-top:8px;display:grid;gap:5px}
.guardian-payment-mini-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}
.guardian-payment-mini-list span,.guardian-payment-mini-list small{font-size:.52rem;color:var(--muted)}.guardian-payment-mini-list b{font-size:.63rem}
.guardian-access-note{padding:18px;border:1px dashed var(--border);border-radius:18px;text-align:center;background:var(--surface-2)}
.guardian-access-note b{font-size:.76rem}.guardian-access-note p{margin:5px 0 0;font-size:.61rem;color:var(--muted)}

.guardian-announcement-card{
  margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2);
}
.guardian-announcement-card.needs-ack{border-color:rgba(245,158,11,.35);background:linear-gradient(135deg,rgba(245,158,11,.06),var(--surface))}
.guardian-announcement-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.guardian-announcement-card header>div{display:grid;gap:2px}.guardian-announcement-card b{font-size:.7rem}.guardian-announcement-card small{font-size:.52rem;color:var(--muted)}
.guardian-announcement-card p{font-size:.62rem;line-height:1.65;color:var(--muted)}
.guardian-ack-state,.guardian-ack-badge{padding:3px 7px;border-radius:999px;font-size:.5rem;font-weight:900;white-space:nowrap}
.guardian-ack-state.pending,.guardian-ack-badge{background:rgba(245,158,11,.12);color:#d97706}
.guardian-ack-state.done{background:rgba(16,185,129,.1);color:#059669}
.guardian-ack-badge{display:inline-flex;margin-inline-start:5px}
.guardian-request-row>div:first-child p{margin:4px 0 0;font-size:.56rem;color:var(--muted)}
.guardian-request-row-side{display:flex!important;align-items:flex-end!important;gap:4px}
.guardian-request-row-side span{padding:4px 7px;border-radius:999px;background:var(--surface-2);font-size:.5rem;font-weight:900}
.guardian-request-row-side span.approved{color:#059669;background:rgba(16,185,129,.1)}.guardian-request-row-side span.rejected{color:#dc2626;background:rgba(239,68,68,.1)}
.guardian-request-row-side button{border:0;background:transparent;color:var(--primary);font:inherit;font-size:.5rem;font-weight:900;cursor:pointer}

.guardian-management-intro,.guardian-account-note{
  padding:11px 12px;border-radius:15px;background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--primary-2) 6%,var(--surface)));
  display:grid;gap:3px;margin-bottom:4px;
}
.guardian-management-intro b,.guardian-account-note b{font-size:.7rem}.guardian-management-intro small,.guardian-account-note small{font-size:.57rem;color:var(--muted);line-height:1.55}
.guardian-link-switches,.guardian-account-permissions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.guardian-link-switches .switch-row,.guardian-account-permissions .switch-row{margin:0!important;padding:8px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface-2)!important}
.guardian-managed-link{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--border);
}
.guardian-managed-link:last-child{border-bottom:0}
.guardian-managed-avatar{width:42px;height:42px;border-radius:13px;background:var(--accent-soft);color:var(--primary);display:grid;place-items:center}
.guardian-managed-link>div:nth-child(2){min-width:0;display:grid;gap:2px}.guardian-managed-link b{font-size:.67rem}.guardian-managed-link small,.guardian-managed-link p{font-size:.53rem;color:var(--muted);margin:0}
.guardian-request-admin-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:13px;border-top:1px solid var(--border)}
.guardian-request-admin-head b{font-size:.7rem}
.guardian-managed-request{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);
}
.guardian-managed-request:last-child{border-bottom:0}
.guardian-managed-request>div:first-child{min-width:0;display:grid;gap:2px}
.guardian-managed-request b{font-size:.65rem}.guardian-managed-request small,.guardian-managed-request p,.guardian-managed-request em{font-size:.54rem;color:var(--muted);font-style:normal;margin:0}
.guardian-managed-request-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.guardian-managed-request-actions span,.guardian-managed-request-actions button{padding:4px 7px;border:0;border-radius:999px;font:inherit;font-size:.5rem;font-weight:900}
.guardian-managed-request-actions span{background:var(--surface-2);color:var(--muted)}
.guardian-managed-request-actions button{cursor:pointer;background:var(--accent-soft);color:var(--primary)}
.guardian-managed-request-actions button.approve{background:rgba(16,185,129,.1);color:#059669}.guardian-managed-request-actions button.reject{background:rgba(239,68,68,.1);color:#dc2626}
.announcement-ack-section{margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.guardian-request-dialog .modal-card{width:min(94vw,590px)}
.guardian-request-dialog textarea{resize:vertical}

@media(max-width:860px){
  .guardian-family-kpis,.guardian-family-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-family-kpis .guardian-kpi-wide,.guardian-family-summary .guardian-family-money{grid-column:1/-1}
  .guardian-home-actions,.guardian-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .guardian-child-bar{
    top:calc(env(safe-area-inset-top) + 72px);width:calc(100% - 20px);grid-template-columns:auto minmax(0,1fr);padding:7px 8px;border-radius:17px;
  }
  .guardian-child-bar-select{grid-column:1/-1}
  .guardian-child-bar-select select{height:39px}
  .guardian-dashboard-hero{display:grid;padding:17px;border-radius:21px}
  .guardian-dashboard-hero .btn{width:100%}
  .guardian-family-header{align-items:stretch;display:grid;padding:15px;border-radius:20px}
  .guardian-family-head-actions{display:grid;grid-template-columns:1fr 1fr}
  .guardian-family-kpis{grid-template-columns:1fr 1fr}
  .guardian-home-head,.guardian-family-section-head,.guardian-list-head{align-items:flex-start}
  .guardian-home-head>small,.guardian-family-section-head>small{max-width:45%;text-align:end}
  .guardian-home-children,.guardian-children-cards{grid-template-columns:1fr}
  .guardian-child-card{grid-template-columns:43px minmax(0,1fr) auto}
  .guardian-selected-child-head{grid-template-columns:auto minmax(0,1fr);padding:13px}
  .guardian-relation-chip{grid-column:1/-1;width:max-content;margin-inline-start:67px}
  .guardian-child-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guardian-family-content{padding:11px}
  .guardian-overview-grid{grid-template-columns:1fr 1fr}
  .guardian-fee-kpis{grid-template-columns:1fr}
  .guardian-payment-mini-list>div{grid-template-columns:auto 1fr}
  .guardian-payment-mini-list small{grid-column:1/-1}
  .guardian-link-switches,.guardian-account-permissions{grid-template-columns:1fr}
  .guardian-managed-link{grid-template-columns:38px minmax(0,1fr)}
  .guardian-managed-link>button{grid-column:1/-1;width:100%}
}
@media(max-width:390px){
  .guardian-family-kpis article{min-height:76px}
  .guardian-home-actions{grid-template-columns:1fr 1fr}
  .guardian-overview-grid{grid-template-columns:1fr}
  .guardian-child-card-stats small:last-child{display:none}
}


/* v32.3 Smart Transport + Family Safety */
.transport-page{display:none;gap:16px}
.transport-page.active{display:grid}
.transport-hero{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px;border:1px solid var(--border);border-radius:26px;
  background:linear-gradient(135deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow);
}
.transport-hero h2{margin:3px 0 5px;font-size:1.35rem}.transport-hero p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.7}
.transport-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.transport-kpis article{
  min-height:82px;padding:12px;border:1px solid var(--border);border-radius:20px;background:var(--surface);
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-soft)
}
.transport-kpis article>span{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--primary);font-weight:950}
.transport-kpis article div{display:grid;gap:3px}.transport-kpis small{font-size:.54rem;color:var(--muted);line-height:1.35}.transport-kpis strong{font-size:1.05rem}
.transport-safety-note{
  padding:13px 15px;border:1px dashed var(--primary);border-radius:17px;background:var(--accent-soft);display:grid;gap:3px
}
.transport-safety-note b{font-size:.72rem}.transport-safety-note small{font-size:.58rem;color:var(--muted);line-height:1.6}
.transport-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:4px 0 10px}
.transport-section-head h3{margin:2px 0 0;font-size:.94rem}.transport-section-head>small{color:var(--muted);font-size:.55rem}
.transport-admin-grid,.transport-shared-grid,.transport-guardian-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.transport-admin-card,.transport-panel-card{
  border:1px solid var(--border);border-radius:22px;background:var(--surface);padding:16px;box-shadow:var(--shadow-soft)
}
.transport-form-title{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--border);margin-bottom:2px}
.transport-form-title>span{width:34px;height:34px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;color:var(--primary);font-weight:950}
.transport-form-title>div{display:grid;gap:2px}.transport-form-title b{font-size:.7rem}.transport-form-title small{font-size:.53rem;color:var(--muted)}
.transport-form-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.transport-management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.transport-list{display:grid;gap:7px}
.transport-list-card{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:11px;border:1px solid var(--border);border-radius:17px;background:var(--surface-2)
}
.transport-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--primary)}
.transport-card-icon .g-icon{width:24px;height:24px}
.transport-card-main{display:grid;gap:2px;min-width:0}.transport-card-main b{font-size:.7rem}.transport-card-main small,.transport-card-main p,.transport-card-main em{font-size:.54rem;color:var(--muted);font-style:normal;margin:0;line-height:1.45}
.transport-card-main em{color:var(--primary);font-weight:850}
.transport-mini-row,.transport-request-card,.transport-emergency-row,.driver-message-row,.transport-note-row,.transport-arrival-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border)
}
.transport-mini-row:last-child,.transport-request-card:last-child,.transport-emergency-row:last-child,.driver-message-row:last-child,.transport-note-row:last-child,.transport-arrival-row:last-child{border-bottom:0}
.transport-mini-row>div,.transport-request-card>div:first-child,.transport-emergency-row>div,.driver-message-row>div,.transport-note-row>div{display:grid;gap:2px;min-width:0}
.transport-mini-row b,.transport-request-card b,.transport-emergency-row b,.driver-message-row b,.transport-note-row b,.transport-arrival-row b{font-size:.66rem}
.transport-mini-row small,.transport-request-card small,.transport-emergency-row small,.driver-message-row small,.transport-note-row small,.transport-arrival-row small{font-size:.52rem;color:var(--muted)}
.transport-mini-row p,.transport-request-card p,.transport-emergency-row p,.driver-message-row p,.transport-note-row p{font-size:.56rem;color:var(--muted);margin:2px 0 0;line-height:1.55}
.transport-request-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.transport-arrival-row{justify-content:flex-start}.transport-arrival-row>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(16,185,129,.12);color:#059669;font-weight:950}
.transport-arrival-row>div{display:grid;gap:2px}.transport-arrival-row em{font-style:normal;font-size:.5rem;font-weight:900;color:#059669}
.transport-emergency-row.is-open{padding:10px;border:1px solid rgba(239,68,68,.22);border-radius:15px;background:rgba(239,68,68,.055)}
.driver-message-row>span,.transport-emergency-row>.chip{font-size:.48rem;font-weight:900;padding:4px 7px;border-radius:999px;background:var(--surface-2);white-space:nowrap}
.driver-message-row.emergency>span{background:rgba(239,68,68,.1);color:#dc2626}
.driver-message-row.help>span{background:var(--accent-soft);color:var(--primary)}
.driver-trip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.driver-bus-block{border:1px solid var(--border);border-radius:23px;background:var(--surface);padding:14px;box-shadow:var(--shadow-soft);display:grid;gap:8px}
.driver-bus-block>header{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.driver-bus-block>header>div:last-child{display:grid;gap:2px}.driver-bus-block header b{font-size:.74rem}.driver-bus-block header small{font-size:.53rem;color:var(--muted)}
.driver-trip-card{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.driver-trip-card>div{display:grid;gap:2px}.driver-trip-card small,.driver-trip-card span{font-size:.51rem;color:var(--muted)}.driver-trip-card b{font-size:.65rem}.driver-trip-card.is-complete{opacity:.72}
.driver-roster-panel{margin-bottom:16px}.driver-roster-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--border);margin-bottom:8px}
.driver-roster-head h3{margin:2px 0 0}
.driver-roster-list{display:grid;gap:8px}
.driver-student-card{
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:11px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)
}
.driver-student-avatar{width:48px;height:48px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--surface)}
.driver-student-avatar .student-avatar-unified{width:46px;height:46px}.transport-student-photo{width:100%;height:100%;object-fit:cover}
.driver-student-info{display:grid;gap:3px;min-width:0}.driver-student-info>b{font-size:.7rem}.driver-student-info>small{font-size:.52rem;color:var(--muted)}
.driver-student-info details{margin-top:2px}.driver-student-info summary{cursor:pointer;font-size:.5rem;color:var(--primary);font-weight:850}.driver-student-info details p{font-size:.5rem;color:var(--muted);line-height:1.55;margin:4px 0 0}
.driver-student-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap;max-width:240px}
.transport-status-chip{display:inline-flex;width:max-content;max-width:100%;padding:4px 7px;border-radius:999px;background:var(--accent-soft);color:var(--primary);font-size:.49rem;font-weight:900}
.status-arrived_school,.status-arrived_home{background:rgba(16,185,129,.11);color:#059669}.status-not_boarded{background:rgba(239,68,68,.1);color:#dc2626}.status-on_bus,.status-on_return_bus{background:rgba(59,130,246,.1);color:#2563eb}
.guardian-transport-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.guardian-transport-card{border:1px solid var(--border);border-radius:23px;background:var(--surface);padding:15px;box-shadow:var(--shadow-soft)}
.guardian-transport-card>header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--border)}
.guardian-transport-card header>div:nth-child(2){min-width:0}.guardian-transport-card header small{font-size:.49rem;color:var(--muted)}.guardian-transport-card h3{font-size:.76rem;margin:2px 0}.guardian-transport-card header p{font-size:.52rem;color:var(--muted);margin:0}
.guardian-transport-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 0}
.guardian-transport-meta span{display:grid;gap:2px;padding:8px;border-radius:13px;background:var(--surface-2);font-size:.51rem;color:var(--muted)}.guardian-transport-meta b{font-size:.49rem;color:var(--text)}
.transport-timeline{display:grid;gap:4px}.transport-timeline>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;font-size:.53rem}.transport-timeline i{width:7px;height:7px;border-radius:50%;background:var(--primary)}.transport-timeline small{color:var(--muted);font-size:.49rem}
.driver-role-avatar{display:grid!important;place-items:center}.driver-role-avatar .g-icon{width:24px;height:24px}
body.transport-driver-mode .bottom-nav .nav-item:not([data-page="home"]):not([data-page="transport"]):not([data-page="more"]){display:none!important}
body.transport-driver-mode #quickAddButton{display:none!important}
body.transport-driver-mode #studentDashboard,
body.transport-driver-mode #guardianDashboard,
body.transport-driver-mode #teacherDailyHub,
body.transport-driver-mode #teacherHomeExtras{display:none!important}

@media(max-width:1050px){
  .transport-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .transport-hero{align-items:stretch;display:grid;padding:17px;border-radius:21px}.transport-hero .btn{width:100%}
  .transport-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.transport-kpis article{min-height:72px;padding:10px;border-radius:17px}
  .transport-admin-grid,.transport-shared-grid,.transport-guardian-forms,.transport-management-grid,.driver-trip-grid,.guardian-transport-grid{grid-template-columns:1fr}
  .transport-form-two{grid-template-columns:1fr}
  .driver-student-card{grid-template-columns:44px minmax(0,1fr)}.driver-student-actions{grid-column:1/-1;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.driver-student-actions .btn{width:100%}
  .transport-list-card{grid-template-columns:38px minmax(0,1fr)}.transport-list-card>.btn{grid-column:1/-1;width:100%}
  .transport-request-card,.transport-emergency-row,.driver-message-row{align-items:flex-start;flex-direction:column}
  .transport-request-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.transport-request-actions .btn{width:100%}
  .guardian-transport-card>header{grid-template-columns:38px minmax(0,1fr)}.guardian-transport-card>header>.transport-status-chip{grid-column:1/-1}
  .guardian-transport-meta{grid-template-columns:1fr 1fr}.guardian-transport-meta span:first-child{grid-column:1/-1}
}
@media(max-width:390px){
  .transport-kpis article>span{width:30px;height:30px}.transport-kpis small{font-size:.5rem}.transport-kpis strong{font-size:.94rem}
  .driver-student-actions{grid-template-columns:1fr}
}

/* staging 3x300 - class first student loading */
.student-class-browser{
  margin:0 0 14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  display:grid;
  gap:12px;
}
.student-class-browser-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.student-class-browser-head h3{margin:2px 0 0}
.student-class-browser-head small{max-width:260px;color:var(--muted);font-size:.72rem;line-height:1.55;text-align:left}
.student-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.student-class-card{
  width:100%;min-width:0;min-height:82px;padding:12px;
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface-2);color:var(--text);
  text-align:right;font:inherit;transition:.15s ease;
}
.student-class-card:active{transform:scale(.985)}
.student-class-card.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 14%,transparent);background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
.student-class-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--surface);font-size:1.1rem}
.student-class-card>div{display:grid;gap:3px;min-width:0}
.student-class-card strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-class-card small{font-size:.68rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-class-card>b{font-size:1rem;color:var(--primary)}
.class-first-empty{padding:28px 16px;text-align:center;border:1px dashed var(--border);border-radius:20px;background:var(--surface);display:grid;gap:7px}
.class-first-empty>span{width:48px;height:48px;margin:auto;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);font-size:1.25rem}
.class-first-empty h3,.class-first-empty p{margin:0}
.class-first-empty p{color:var(--muted);font-size:.78rem;line-height:1.7;max-width:420px;margin-inline:auto}
@media(max-width:520px){
  .student-class-browser{padding:12px;border-radius:18px}
  .student-class-browser-head{display:grid;gap:4px}
  .student-class-browser-head small{max-width:none;text-align:right}
  .student-class-grid{grid-template-columns:1fr 1fr;gap:8px}
  .student-class-card{grid-template-columns:38px minmax(0,1fr) auto;min-height:76px;padding:10px;gap:8px}
  .student-class-card-icon{width:38px;height:38px}
}

/* staging 3x300 - lazy transport browser */
.transport-manager-settings{
  margin:14px 0;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  overflow:hidden;
}
.transport-manager-settings>summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.transport-manager-settings>summary::-webkit-details-marker{display:none}
.transport-manager-settings>summary h3,.transport-manager-settings>summary p{margin:0}
.transport-manager-settings>summary span{font-size:.72rem;color:var(--primary);font-weight:800}
.transport-manager-settings[open]>summary{border-bottom:1px solid var(--border)}
.transport-manager-settings>.transport-admin-grid{padding:14px}
.transport-management-lazy{grid-template-columns:1fr}
.transport-bus-picker-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.transport-bus-pick-card{
  width:100%;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);color:var(--text);
  padding:12px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:right;font:inherit;
}
.transport-bus-pick-card.active{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 7%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 13%,transparent)}
.transport-bus-pick-card>div{display:grid;gap:3px;min-width:0}
.transport-bus-pick-card strong{font-size:.9rem}
.transport-bus-pick-card small,.transport-bus-pick-card p{margin:0;color:var(--muted);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport-bus-pick-card em{font-size:.66rem;color:var(--primary);font-style:normal}
.transport-bus-pick-card i{font-style:normal;font-size:.7rem;font-weight:900;color:var(--primary)}
.transport-bus-pick-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface)}
.transport-student-toolbar{display:grid;gap:10px;margin:0 0 12px}
.transport-student-filters{display:flex;gap:7px;overflow:auto;padding-bottom:2px;scrollbar-width:none}
.transport-student-filters::-webkit-scrollbar{display:none}
.transport-student-filters button{
  flex:0 0 auto;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--muted);
  padding:8px 11px;font:700 .7rem/1 system-ui;
}
.transport-student-filters button.active{background:var(--primary);border-color:var(--primary);color:white}
.transport-student-compact-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.transport-student-compact-main{display:grid;gap:4px;min-width:0}
.transport-student-compact-main b{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport-student-compact-main small{font-size:.67rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport-status-chip{padding:6px 8px;border-radius:999px;background:var(--surface-2);font-size:.63rem;color:var(--muted);white-space:nowrap}
.transport-status-chip[data-status="arrived_school"],.transport-status-chip[data-status="arrived_home"]{color:#1f9d62;background:rgba(31,157,98,.1)}
.transport-status-chip[data-status="not_boarded"]{color:#d9534f;background:rgba(217,83,79,.1)}
.transport-collapsible-panel{overflow:hidden}
.transport-collapsible-panel>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.transport-collapsible-panel>summary::-webkit-details-marker{display:none}
.transport-collapsible-panel>summary h3,.transport-collapsible-panel>summary p{margin:0}
.transport-collapsible-panel>summary span{font-size:.7rem;color:var(--primary);font-weight:800}
.transport-collapsible-panel[open]>summary{padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:10px}
@media(max-width:560px){
  .transport-bus-picker-grid{grid-template-columns:1fr}
  .transport-bus-pick-card{grid-template-columns:42px minmax(0,1fr) auto}
  .transport-bus-pick-icon{width:42px;height:42px}
  .transport-student-compact-row{grid-template-columns:minmax(0,1fr) auto}
  .transport-student-compact-row .btn{grid-column:1/-1;width:100%;margin-top:2px}
}

/* staging 3x300 - real feed pagination */
.feed-load-more{
  display:flex;
  justify-content:center;
  padding:14px 0 4px;
}
.feed-load-more-btn{
  min-width:180px;
  border-radius:999px;
  font-weight:800;
}
.feed-load-more-btn:disabled{
  opacity:.65;
  cursor:wait;
}


/* v32.5 - unified role-aware student cards */
.student-list,.finance-student-list{display:grid;gap:12px}
.student-compact-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 10px 28px rgba(15,23,42,.07);
}
.student-card-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:start;
  padding:0;
}
.student-letter-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(145deg,#eef2ff,#e2e8f0);
  color:var(--primary);
  font-size:1.35rem;
  font-weight:900;
  border:1px solid color-mix(in srgb,var(--primary) 12%,var(--border));
}
.student-card-copy{min-width:0;display:grid;gap:6px}
.student-card-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:1rem;
  font-weight:900;
  color:var(--text);
}
.student-card-copy small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}
.student-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.student-card-action,.student-card-more{
  border:0;
  background:transparent;
  min-height:44px;
  border-radius:14px;
  color:var(--primary);
  display:grid;
  place-items:center;
  gap:3px;
  padding:6px 9px;
  font-weight:800;
}
.student-card-action{min-width:72px}
.student-card-action .g-icon{width:22px;height:22px}
.student-card-action span{font-size:.72rem;white-space:nowrap}
.student-card-action.guardian-action{color:#0f766e}
.student-card-action:disabled{opacity:.38;cursor:not-allowed}
.student-card-more{
  width:42px;
  min-width:42px;
  font-size:1.8rem;
  line-height:1;
  color:var(--text);
}
.student-card-action:hover,.student-card-more:hover{background:var(--surface-2)}
.student-card-identity:focus-visible,.student-card-action:focus-visible,.student-card-more:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 24%,transparent);
  outline-offset:2px;
}
.student-card-menu{
  position:absolute;
  z-index:12;
  top:calc(100% - 8px);
  left:14px;
  min-width:190px;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 38px rgba(15,23,42,.16);
}
.student-card-menu button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  min-height:42px;
  padding:9px 10px;
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:start;
  font-weight:800;
}
.student-card-menu button:hover{background:var(--surface-2)}
.student-card-menu .g-icon{width:19px;height:19px;color:var(--primary)}
#profileStudentMeta{margin:3px 0 0}
.profile-finance-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.profile-finance-grid>div{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:15px;
  padding:12px;
  display:grid;
  gap:5px;
}
.profile-finance-grid small{color:var(--muted);font-weight:700}
.profile-finance-grid strong{font-size:1rem}
.profile-finance-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.student-guardian-dialog-card{width:min(100%,560px)}
.student-guardian-content{display:grid;gap:10px}
.student-guardian-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface-2);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.student-guardian-main{display:flex;align-items:center;gap:10px;min-width:0}
.guardian-letter-avatar{width:44px;height:44px;font-size:1.05rem;color:#0f766e}
.student-guardian-main>div{min-width:0;display:grid;gap:4px}
.student-guardian-main strong,.student-guardian-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-guardian-main small{color:var(--muted)}
.student-guardian-actions .btn{display:flex;align-items:center;gap:6px}
.student-guardian-actions .g-icon{width:18px;height:18px}

@media (max-width:620px){
  .student-compact-card{
    grid-template-columns:minmax(0,1fr);
    gap:9px;
    padding:13px 14px;
    border-radius:20px;
  }
  .student-card-actions{
    justify-content:flex-end;
    border-top:1px solid var(--border);
    padding-top:8px;
  }
  .student-card-action{min-width:68px}
  .student-card-menu{top:calc(100% - 6px);left:10px;right:auto}
}
@media (max-width:390px){
  .student-letter-avatar{width:46px;height:46px}
  .student-card-action span{font-size:.68rem}
  .student-card-action{min-width:62px;padding-inline:6px}
}


/* v32.5.1 - student action menu layering/mobile disclosure hotfix */
.student-list,
.finance-student-list{
  position:relative;
  overflow:visible;
}
.student-compact-card{
  overflow:visible;
  z-index:1;
  isolation:isolate;
}
.student-compact-card.menu-open{
  z-index:90;
}
.student-card-actions{
  position:relative;
  z-index:2;
}
.student-card-menu{
  z-index:120;
  top:calc(100% + 8px);
  left:12px;
  right:auto;
  max-width:min(240px,calc(100vw - 36px));
  background:var(--surface);
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.student-card-menu button{
  position:relative;
  z-index:1;
}
@media (max-width:620px){
  .student-compact-card.menu-open{
    box-shadow:0 14px 34px rgba(15,23,42,.12);
  }
  .student-card-menu{
    position:static;
    grid-column:1/-1;
    width:100%;
    min-width:0;
    max-width:none;
    margin-top:2px;
    padding:8px;
    border-radius:14px;
    box-shadow:none;
    background:var(--surface-2);
    border:1px solid var(--border);
  }
  .student-card-menu button{
    min-height:46px;
    background:var(--surface);
    border:1px solid var(--border);
    margin-bottom:6px;
  }
  .student-card-menu button:last-child{
    margin-bottom:0;
  }
}


/* v32.6 - lazy, mobile-first transport manager */
.transport-manager-v2{display:grid;gap:14px}
.transport-manager-top-actions{display:flex;gap:10px;flex-wrap:wrap}
.transport-manager-top-actions .btn{display:flex;align-items:center;justify-content:center;gap:7px}
.transport-manager-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.transport-manager-tabs button{
  border:0;background:transparent;color:var(--muted);border-radius:16px;
  min-height:74px;padding:8px 6px;display:grid;place-items:center;gap:3px;font-weight:800
}
.transport-manager-tabs button>span{font-size:1.25rem}
.transport-manager-tabs button>b{font-size:.8rem}
.transport-manager-tabs button>small{font-size:.65rem;font-weight:700;white-space:nowrap}
.transport-manager-tabs button.active{background:var(--surface-2);color:var(--primary);box-shadow:inset 0 0 0 1px var(--border)}
.transport-manager-landing{
  min-height:210px;display:grid;place-items:center;text-align:center;align-content:center;gap:8px;
  padding:28px;background:var(--surface);border:1px dashed var(--border);border-radius:22px;color:var(--muted)
}
.transport-manager-landing-icon{font-size:2.4rem}
.transport-manager-landing h3{margin:0;color:var(--text)}
.transport-manager-landing p{max-width:520px;margin:0;line-height:1.8}
.transport-lazy-section{
  display:grid;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(15,23,42,.05)
}
.transport-driver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.transport-driver-card{
  display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)
}
.transport-driver-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.transport-driver-avatar{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--border);font-weight:900;color:var(--primary)
}
.transport-driver-card-head>div{min-width:0;display:grid;gap:3px}
.transport-driver-card-head strong,.transport-driver-card-head small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transport-driver-card-head small{color:var(--muted)}
.transport-license-chip{font-size:.67rem;font-weight:800;border-radius:999px;padding:5px 8px;background:var(--surface);border:1px solid var(--border)}
.transport-license-chip.ok{color:#166534}.transport-license-chip.warning{color:#92400e}.transport-license-chip.danger{color:#991b1b}
.transport-driver-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.transport-driver-card-meta span{display:grid;gap:2px;padding:9px;border-radius:12px;background:var(--surface);font-size:.78rem}
.transport-driver-card-meta b{font-size:.68rem;color:var(--muted)}
.transport-fleet-card{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:11px;
  padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)
}
.transport-fleet-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface);color:var(--primary)}
.transport-fleet-icon .g-icon{width:24px;height:24px}
.transport-fleet-copy{min-width:0;display:grid;gap:3px}
.transport-fleet-copy strong,.transport-fleet-copy small,.transport-fleet-copy p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.transport-fleet-copy small,.transport-fleet-copy p{font-size:.74rem;color:var(--muted)}
.transport-create-driver-card{width:min(100%,620px)}
.transport-optional-details{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:0 12px}
.transport-optional-details>summary{padding:13px 2px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.transport-optional-details>summary span{font-size:.72rem;color:var(--muted)}
.transport-optional-details[open]>summary{border-bottom:1px solid var(--border);margin-bottom:10px}
.transport-switch-card{
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface-2)
}
.transport-switch-card>span{display:grid;gap:3px}
.transport-switch-card small{color:var(--muted);font-size:.72rem}
.transport-switch-card input{width:22px;height:22px;min-height:0}
.transport-driver-bus-fields{display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.transport-driver-credentials{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-radius:18px;
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border))
}
.transport-driver-credentials>div{display:grid;gap:3px}
.transport-driver-credentials span,.transport-driver-credentials small{font-size:.72rem;color:var(--muted)}
.transport-driver-credentials strong{direction:ltr;text-align:left;user-select:all}
.transport-driver-credentials .btn,.transport-driver-credentials>small{grid-column:1/-1}
#transportStudentsSection #transportAssignmentPanel{margin-top:4px}

@media(max-width:700px){
  .transport-manager-tabs{grid-template-columns:repeat(5,minmax(72px,1fr));overflow-x:auto;scrollbar-width:none}
  .transport-manager-tabs::-webkit-scrollbar{display:none}
  .transport-manager-tabs button{min-width:72px}
  .transport-driver-grid{grid-template-columns:1fr}
  .transport-fleet-card{grid-template-columns:auto minmax(0,1fr) auto}
  .transport-fleet-card>.btn{grid-column:1/-1;width:100%}
  .transport-license-chip{grid-column:1/-1;justify-self:start}
  .transport-driver-card-head{grid-template-columns:auto minmax(0,1fr)}
  .transport-driver-card-head .transport-license-chip{grid-column:1/-1}
}
@media(max-width:520px){
  .transport-manager-top-actions{display:grid;grid-template-columns:1fr 1fr}
  .transport-manager-top-actions .btn{padding-inline:8px}
  .transport-lazy-section{padding:12px;border-radius:18px}
  .transport-driver-card-meta{grid-template-columns:1fr}
  .transport-driver-credentials{grid-template-columns:1fr}
  .transport-driver-credentials .btn,.transport-driver-credentials>small{grid-column:auto}
}


/* v32.6.1 - unified modern transport iconography */
.transport-icon-button{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.transport-inline-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.transport-inline-icon .g-icon{width:21px;height:21px}

.transport-kpis article{
  position:relative;
  overflow:hidden;
}
.transport-kpi-icon{
  width:50px!important;
  height:50px!important;
  min-width:50px;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface))!important;
  color:var(--primary)!important;
  border:1px solid color-mix(in srgb,var(--primary) 15%,var(--border));
}
.transport-kpi-icon .g-icon{width:25px;height:25px}
.transport-kpi-alert .transport-kpi-icon{
  color:#b45309!important;
  background:rgba(245,158,11,.10)!important;
  border-color:rgba(245,158,11,.16)!important;
}
.transport-kpi-drivers .transport-kpi-icon{
  color:#0f766e!important;
  background:rgba(13,148,136,.09)!important;
  border-color:rgba(13,148,136,.16)!important;
}
.transport-kpi-trips .transport-kpi-icon{
  color:#2563eb!important;
  background:rgba(37,99,235,.08)!important;
  border-color:rgba(37,99,235,.14)!important;
}
.transport-manager-tabs button{
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.transport-manager-tabs button:active{transform:scale(.97)}
.transport-tab-icon{
  width:38px;
  height:38px;
  display:grid!important;
  place-items:center;
  border-radius:13px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--muted);
}
.transport-tab-icon .g-icon{width:21px;height:21px}
.transport-manager-tabs button.active .transport-tab-icon{
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--primary) 18%,var(--border));
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 10%,transparent);
}
.transport-manager-tabs button[data-transport-section="safety"].active .transport-tab-icon{
  color:#b45309;
  background:rgba(245,158,11,.09);
  border-color:rgba(245,158,11,.16);
}
.transport-manager-landing-icon,
.transport-empty-icon{
  width:64px;
  height:64px;
  display:grid!important;
  place-items:center!important;
  border-radius:20px;
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));
}
.transport-manager-landing-icon .g-icon,
.transport-empty-icon .g-icon{width:31px;height:31px}
.transport-form-icon{
  width:38px!important;
  height:38px!important;
  min-width:38px;
  display:grid!important;
  place-items:center!important;
  border-radius:12px;
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border));
  color:var(--primary);
}
.transport-form-icon .g-icon{width:20px;height:20px}
.transport-bus-pick-card>i .g-icon{width:18px;height:18px}
@media(max-width:520px){
  .transport-kpi-icon{width:46px!important;height:46px!important;min-width:46px}
  .transport-kpi-icon .g-icon{width:23px;height:23px}
  .transport-tab-icon{width:36px;height:36px}
  .transport-tab-icon .g-icon{width:20px;height:20px}
  .transport-manager-tabs button{min-height:88px}
  .transport-manager-tabs button>b{font-size:.76rem}
  .transport-manager-tabs button>small{font-size:.60rem}
}


/* v32.6.2 - clean bottom navigation active state + softer motion */
.bottom-nav .nav-item{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  transition:
    color .18s ease,
    background .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease!important;
}
.bottom-nav .nav-item::before,
.bottom-nav .nav-item::after{
  content:none!important;
  display:none!important;
}
.bottom-nav .nav-item>.g-icon-wrap{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    color .18s ease!important;
}
.bottom-nav .nav-item>.g-icon-wrap::before,
.bottom-nav .nav-item>.g-icon-wrap::after{
  content:none!important;
  display:none!important;
}
.bottom-nav .nav-item>.g-icon-wrap .g-icon{
  width:24px!important;
  height:24px!important;
  transform:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)!important;
}
.bottom-nav .nav-item.active{
  color:var(--primary)!important;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface))!important;
  box-shadow:0 5px 16px color-mix(in srgb,var(--primary) 10%,transparent)!important;
  transform:translateY(-1px)!important;
}
.bottom-nav .nav-item.active>.g-icon-wrap{
  color:var(--primary)!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:scale(1.04)!important;
}
.bottom-nav .nav-item.active small{
  color:var(--primary)!important;
  font-weight:900!important;
}
.bottom-nav .nav-item:active{
  transform:translateY(0) scale(.975)!important;
}
.bottom-nav .nav-item:active .g-icon{
  transform:scale(.94)!important;
}
.bottom-nav .nav-item.nav-pulse>.g-icon-wrap{
  animation:navSoftTap .26s cubic-bezier(.2,.8,.2,1) both!important;
}
@keyframes navSoftTap{
  0%{transform:scale(.94)}
  58%{transform:scale(1.09)}
  100%{transform:scale(1.04)}
}
@media(hover:hover){
  .bottom-nav .nav-item:hover .g-icon{
    transform:scale(1.04)!important;
  }
}
body.reduce-motion .bottom-nav .nav-item,
body.reduce-motion .bottom-nav .nav-item>.g-icon-wrap,
body.reduce-motion .bottom-nav .nav-item .g-icon{
  animation:none!important;
  transition:none!important;
}


/* v32.6.6 - keep Telegram download card visually identical after converting it to a link */
a.manhj-download-btn,
a.manhj-download-btn:link,
a.manhj-download-btn:visited,
a.manhj-download-btn:hover,
a.manhj-download-btn:active{
  text-decoration:none!important;
}


/* v32.9 performance pass: keep motion polished without expensive full-page blur/repaint */
.cinematic-page-in{animation-duration:.24s!important;will-change:transform,opacity}
@keyframes cinematicPageIn{
  0%{opacity:.72;transform:translate3d(0,8px,0) scale(.996)}
  100%{opacity:1;transform:none}
}
.page.active .hero{animation-duration:.3s!important}
.page.active :is(.stat-card,.quick-card,.daily-action,.record-card,.settings-card,.role-more-card,.classroom-card,.announcement-manage-card,.manager-attendance-card,.student-row,.history-card){
  animation-duration:.28s!important;
  animation-delay:0s!important;
}
@keyframes premiumStagger{
  0%{opacity:.78;transform:translateY(8px) scale(.992)}
  100%{opacity:1;transform:none}
}
dialog[open] .modal-card{animation-duration:.26s!important}
@keyframes premiumDialog{
  0%{opacity:.76;transform:translateY(14px) scale(.975)}
  100%{opacity:1;transform:none}
}


/* v32.12 mandatory Terms of Use + Privacy consent gate */
.legal-consent-dialog{
  width:min(100%,900px);
  max-width:900px;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.legal-consent-dialog::backdrop{
  background:rgba(4,8,16,.82);
  backdrop-filter:blur(10px);
}
.legal-consent-card{
  width:min(92vw,760px);
  max-height:min(90dvh,860px);
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px;
  border-radius:26px;
  overflow:hidden;
}
.legal-consent-head h2{
  margin:3px 0 4px;
  font-size:clamp(1.3rem,4.5vw,1.9rem);
  line-height:1.25;
}
.legal-consent-head .eyebrow{margin:0 0 4px}
.legal-consent-body{
  min-height:190px;
  max-height:52dvh;
  overflow:auto;
  padding:2px 8px 2px 2px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.legal-consent-dialog[dir="ltr"] .legal-consent-body{
  padding:2px 2px 2px 8px;
}
.legal-consent-body section{
  padding:14px 0;
  border-bottom:1px solid color-mix(in srgb,var(--border) 85%,transparent);
}
.legal-consent-body section:first-child{padding-top:2px}
.legal-consent-body section:last-child{
  border-bottom:0;
  padding-bottom:4px;
}
.legal-consent-body h3{
  margin:0 0 7px;
  font-size:.98rem;
  color:var(--text);
}
.legal-consent-body p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.8;
}
.legal-consent-check{
  display:flex!important;
  align-items:flex-start;
  gap:11px;
  padding:14px;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  border-radius:16px;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
  cursor:pointer;
  user-select:none;
}
.legal-consent-check input{
  width:20px!important;
  height:20px!important;
  min-width:20px;
  margin:2px 0 0!important;
  accent-color:var(--primary);
}
.legal-consent-check span{
  font-size:.9rem;
  line-height:1.65;
  font-weight:750;
}
.legal-consent-actions{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:10px;
}
.legal-consent-actions .btn{
  min-height:48px;
}
.legal-consent-actions .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none!important;
}
.legal-decline-button{
  border-color:color-mix(in srgb,#ef4444 24%,var(--border))!important;
}
@media(max-width:620px){
  .legal-consent-dialog{
    width:100%;
    max-width:none;
    margin:0;
  }
  .legal-consent-card{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 24px);
    border-radius:22px;
    padding:18px 16px;
    gap:13px;
  }
  .legal-consent-body{max-height:48dvh}
  .legal-consent-actions{grid-template-columns:1fr}
  .legal-consent-actions #legalContinueButton{order:1}
  .legal-consent-actions #legalDeclineButton{order:2}
}


/* v32.14 About Al Nakhlah Private Schools + account deletion request flow */
.manhj-about-entry{
  margin:0 0 18px;
}
.manhj-about-entry-button{
  width:100%;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));
}
.manhj-about-dialog,
.legal-document-dialog,
.account-deletion-dialog{
  width:min(100%,900px);
  max-width:900px;
  padding:0;
  border:0;
  background:transparent;
}
.manhj-about-dialog::backdrop,
.legal-document-dialog::backdrop,
.account-deletion-dialog::backdrop{
  background:rgba(4,8,16,.78);
  backdrop-filter:blur(9px);
}
.manhj-about-card,
.legal-document-card,
.account-deletion-card{
  width:min(92vw,760px);
  margin:auto;
  border-radius:26px;
}
.manhj-about-menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.manhj-about-menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:94px;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--border) 92%,transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface) 96%,var(--primary) 4%);
  color:var(--text);
  text-align:inherit;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.manhj-about-menu-item:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--primary) 26%,var(--border));
}
.manhj-about-menu-item>span{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  color:var(--primary);
}
.manhj-about-menu-item b{
  display:block;
  margin-bottom:4px;
  font-size:.96rem;
}
.manhj-about-menu-item small{
  display:block;
  color:var(--muted);
  line-height:1.55;
}
.manhj-about-menu-item.danger{
  border-color:color-mix(in srgb,#ef4444 20%,var(--border));
}
.manhj-about-menu-item.danger>span{
  background:color-mix(in srgb,#ef4444 9%,var(--surface));
}
.legal-document-card{
  max-height:min(90dvh,880px);
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}
.legal-document-body{
  max-height:64dvh;
}
.account-delete-warning{
  padding:14px 15px;
  border:1px solid color-mix(in srgb,#f59e0b 24%,var(--border));
  border-radius:16px;
  background:color-mix(in srgb,#f59e0b 7%,var(--surface));
}
.account-delete-warning b{
  display:block;
  margin-bottom:5px;
}
.account-delete-warning p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:.88rem;
}
.account-delete-confirm{
  margin-top:4px;
}
.account-deletion-management-card .account-user-list{
  margin-top:12px;
}
.account-deletion-request-row .account-user-main small{
  white-space:normal;
  line-height:1.55;
}
.account-deletion-request-row .account-user-actions{
  align-items:center;
}
#accountDeletionExistingStatus{
  display:flex;
  flex-direction:column;
  gap:5px;
}
#accountDeletionExistingStatus small{
  line-height:1.65;
}
@media(max-width:620px){
  .manhj-about-card,
  .legal-document-card,
  .account-deletion-card{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 24px);
    border-radius:22px;
  }
  .manhj-about-menu{
    grid-template-columns:1fr;
  }
  .manhj-about-menu-item{
    min-height:82px;
    padding:14px;
  }
  .legal-document-body{
    max-height:60dvh;
  }
}


/* v32.15 — pin quick actions above the structural bottom dock */
.quick-add-fab{
  position:fixed!important;
  z-index:2147483641!important;
}
@media(max-width:699px){
  .quick-add-fab{
    inset-inline-start:max(18px,env(safe-area-inset-left))!important;
    bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }
  .quick-add-menu{
    z-index:2147483641!important;
    inset-inline-start:max(18px,env(safe-area-inset-left))!important;
    bottom:calc(176px + env(safe-area-inset-bottom))!important;
  }
}


/* =========================================================
   v32.16 — Developer Control Center
   ========================================================= */
body[data-role="developer"] .quick-add-fab,
body[data-role="developer"] .quick-add-menu{display:none!important}

body[data-role="developer"] #homePage>:not(#developerHomePanel),
body[data-role="developer"] #studentsPage>:not(#developerSchoolsPanel),
body[data-role="developer"] #staffPage>:not(#developerInvestorsPanel),
body[data-role="developer"] #recordsPage>:not(#developerAccountsPanel),
body[data-role="developer"] #reportsPage>:not(#developerSystemPanel){display:none!important}

body[data-role="developer"] #morePage #contextBar,
body[data-role="developer"] #morePage #dailyWorkTitle,
body[data-role="developer"] #morePage #dailyWorkGrid,
body[data-role="developer"] #morePage #communicationToolsTitle,
body[data-role="developer"] #morePage #communicationToolsGrid,
body[data-role="developer"] #morePage #schoolStructureTitle,
body[data-role="developer"] #morePage #schoolStructureGrid,
body[data-role="developer"] #morePage #teacherAssignmentTitle,
body[data-role="developer"] #morePage #teacherAssignmentGrid,
body[data-role="developer"] #morePage #guardianManagementTitle,
body[data-role="developer"] #morePage #guardianManagementGrid,
body[data-role="developer"] #morePage #studentAccountLinkTitle,
body[data-role="developer"] #morePage #studentAccountLinkGrid,
body[data-role="developer"] #morePage #archiveYearCard{display:none!important}

.developer-bottom-nav{
  --visible-nav-count:6!important;
  grid-template-columns:repeat(6,minmax(70px,1fr))!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.developer-bottom-nav::-webkit-scrollbar{display:none}
.developer-bottom-nav .developer-nav-slot{min-width:70px}

.developer-page-panel{display:grid;gap:14px;padding:2px 0 18px}
.developer-hero{
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
  padding:20px;border:1px solid var(--border);border-radius:26px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));
  box-shadow:var(--shadow-soft);position:relative;overflow:hidden;
}
.developer-hero:after{
  content:"";position:absolute;width:160px;height:160px;border-radius:50%;
  background:var(--accent-soft);inset:auto -54px -82px auto;pointer-events:none;
}
.developer-hero h2{margin:5px 0 7px;font-size:1.65rem}
.developer-hero p{margin:0;color:var(--muted);max-width:620px;line-height:1.8}
.developer-env-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
  background:color-mix(in srgb,#16a34a 12%,var(--surface));color:#15803d;
  border:1px solid color-mix(in srgb,#16a34a 28%,transparent);font-size:.66rem;font-weight:900;letter-spacing:.08em
}
.developer-release{
  min-width:126px;padding:12px 13px;border:1px solid var(--border);border-radius:18px;background:var(--surface);
  display:grid;gap:2px;text-align:center;position:relative;z-index:1
}
.developer-release small,.developer-release span{color:var(--muted);font-size:.68rem}
.developer-release strong{font-size:1.15rem;color:var(--primary)}

.developer-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.developer-kpi-grid article{
  min-height:108px;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-soft);display:grid;align-content:center;gap:3px
}
.developer-kpi-grid span{font-size:.77rem;color:var(--muted);font-weight:800}
.developer-kpi-grid strong{font-size:1.65rem;line-height:1.15}
.developer-kpi-grid small{font-size:.68rem;color:var(--muted)}

.developer-command-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.developer-command-grid button{
  border:1px solid var(--border);background:var(--surface);color:inherit;border-radius:22px;padding:15px;
  display:flex;gap:12px;align-items:center;text-align:right;box-shadow:var(--shadow-soft)
}
.developer-command-grid button>span:last-child{display:grid;gap:3px}
.developer-command-grid b{font-size:.94rem}
.developer-command-grid small{font-size:.72rem;color:var(--muted);line-height:1.55}
.developer-command-icon{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:14px;
  background:var(--accent-soft);color:var(--primary)
}
.developer-command-icon .g-icon{width:23px;height:23px}

.developer-health-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;
  border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-soft)
}
.developer-health-card>div{display:flex;align-items:center;gap:10px}
.developer-health-card b,.developer-health-card small{display:block}
.developer-health-card small{margin-top:3px;color:var(--muted);font-size:.7rem}
.developer-status-dot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px color-mix(in srgb,#16a34a 12%,transparent);flex:0 0 10px}
.developer-status-dot.checking{background:#eab308;box-shadow:0 0 0 5px color-mix(in srgb,#eab308 12%,transparent)}
.developer-status-dot.error,.developer-health-warning .developer-status-dot{background:#dc2626;box-shadow:0 0 0 5px color-mix(in srgb,#dc2626 12%,transparent)}
.developer-last-activity,.developer-audit-card{
  padding:15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-soft)
}
.developer-activity-line{padding:11px 12px;border-radius:14px;background:var(--surface-2);font-size:.8rem;color:var(--muted)}

.developer-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.developer-section-head h2{margin:3px 0 5px}
.developer-section-head p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.7;max-width:620px}
.developer-counter{min-width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--accent-soft);color:var(--primary);font-weight:900}
.developer-filter-bar,.developer-account-filters{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center}
.developer-account-filters{grid-template-columns:minmax(220px,1fr) minmax(140px,.5fr) minmax(130px,.45fr)}
.developer-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:5px 10px}
.developer-search .developer-command-icon{width:32px;height:32px;flex-basis:32px;border-radius:10px;background:transparent}
.developer-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:8px 2px!important;width:100%;min-width:0}
.developer-list{display:grid;gap:9px}
.developer-list-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:13px 14px;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:var(--shadow-soft)
}
.developer-list-card.selected{border-color:color-mix(in srgb,var(--primary) 42%,var(--border));background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
.developer-list-main{display:flex;align-items:center;gap:11px;min-width:0}
.developer-list-main>div:last-child{min-width:0}
.developer-list-main strong,.developer-list-main small{display:block;overflow:hidden;text-overflow:ellipsis}
.developer-list-main small{margin-top:3px;color:var(--muted);font-size:.72rem;white-space:nowrap}
.developer-list-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.developer-list-state{display:flex;align-items:center}
.developer-status-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:.67rem;font-weight:900}
.developer-status-pill.ok{background:color-mix(in srgb,#16a34a 10%,var(--surface));color:#15803d}
.developer-status-pill.off{background:color-mix(in srgb,#dc2626 10%,var(--surface));color:#b91c1c}
.developer-empty{padding:28px 16px;text-align:center;border:1px dashed var(--border);border-radius:18px;color:var(--muted);background:var(--surface)}
.developer-load-more{width:100%}

.developer-system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.developer-system-grid article{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-soft)}
.developer-system-grid small,.developer-system-grid strong,.developer-system-grid em{display:block}
.developer-system-grid small{color:var(--muted);font-size:.68rem}
.developer-system-grid strong{font-size:.84rem;margin:2px 0}
.developer-system-grid em{font-style:normal;color:var(--muted);font-size:.64rem}
.developer-audit-list{display:grid;gap:7px}
.developer-audit-list article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border-radius:14px;background:var(--surface-2)}
.developer-audit-list strong,.developer-audit-list small{display:block}
.developer-audit-list small{margin-top:2px;color:var(--muted);font-size:.68rem}
.developer-audit-list time{font-size:.66rem;color:var(--muted);white-space:nowrap}

@media(max-width:760px){
  .developer-kpi-grid,.developer-system-grid{grid-template-columns:repeat(2,1fr)}
  .developer-account-filters{grid-template-columns:1fr 1fr}
  .developer-account-filters .developer-search{grid-column:1/-1}
}
@media(max-width:520px){
  .developer-page-panel{gap:11px}
  .developer-hero{padding:16px;border-radius:22px;display:grid}
  .developer-release{grid-template-columns:auto auto;align-items:center;min-width:0;text-align:right}
  .developer-release span{grid-column:1/-1}
  .developer-kpi-grid{gap:7px}
  .developer-kpi-grid article{min-height:94px;padding:12px}
  .developer-kpi-grid strong{font-size:1.4rem}
  .developer-command-grid{grid-template-columns:1fr}
  .developer-section-head{display:grid}
  .developer-section-head>.btn{width:100%}
  .developer-filter-bar{grid-template-columns:1fr}
  .developer-account-filters{grid-template-columns:1fr}
  .developer-account-filters .developer-search{grid-column:auto}
  .developer-list-card{grid-template-columns:1fr auto}
  .developer-list-main{grid-column:1/-1}
  .developer-list-actions{justify-content:flex-start}
  .developer-system-grid{grid-template-columns:1fr 1fr}
  .developer-audit-list article{align-items:flex-start}
  .developer-audit-list time{white-space:normal;text-align:left;max-width:100px}
  .developer-bottom-nav{grid-template-columns:repeat(6,72px)!important;justify-content:flex-start!important}
}


/* =========================================================
   v32.17 — Developer role cleanup
   ========================================================= */
body[data-role="developer"] .app-shell{
  padding-bottom:calc(156px + var(--safe-bottom))!important;
}
body[data-role="developer"] .page.active{
  padding-bottom:32px;
}
body[data-role="developer"] .topbar{
  background:color-mix(in srgb,var(--surface) 96%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.08)!important;
  backdrop-filter:blur(22px) saturate(1.08)!important;
  box-shadow:0 1px 0 var(--border),0 8px 28px rgba(15,23,42,.04);
}

body[data-role="developer"] #morePage>.settings-sections{
  display:none!important;
}
body[data-role="developer"] #morePage>#manhjAboutHubEntry{
  display:block!important;
}
body[data-role="developer"] #developerMorePanel{
  display:grid!important;
}

.developer-bottom-nav{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  overflow:visible!important;
}
.developer-bottom-nav .developer-nav-slot{
  min-width:0!important;
}
.developer-bottom-nav .nav-item{
  min-width:0;
  padding:7px 2px;
}
.developer-bottom-nav .nav-item>.g-icon-wrap{
  display:grid!important;
  place-items:center;
  width:26px;
  height:26px;
  color:currentColor;
}
.developer-bottom-nav .nav-item .g-icon{
  width:23px;
  height:23px;
}
.developer-bottom-nav .nav-item small{
  max-width:100%;
  font-size:.64rem;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.developer-more-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.developer-more-grid>button{
  border:1px solid var(--border);
  background:var(--surface);
  color:inherit;
  border-radius:20px;
  padding:14px;
  display:flex;
  gap:11px;
  align-items:center;
  text-align:right;
  box-shadow:var(--shadow-soft);
}
.developer-more-grid>button>span:last-child{display:grid;gap:3px;min-width:0}
.developer-more-grid b{font-size:.92rem}
.developer-more-grid small{color:var(--muted);font-size:.72rem;line-height:1.55}
.developer-more-note{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px 14px;
  border:1px dashed var(--border);
  border-radius:18px;
  background:var(--surface-2);
}
.developer-more-note>span{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
  color:var(--primary);
}
.developer-more-note .g-icon{width:22px;height:22px}
.developer-more-note p{margin:0;display:grid;gap:3px}
.developer-more-note small{color:var(--muted);line-height:1.55}

.developer-tool-dialog{
  width:min(94vw,760px)!important;
  max-width:760px!important;
}
.developer-tool-card{
  max-height:min(88dvh,900px);
  overflow:auto;
  padding:16px;
}
.developer-tool-head{
  position:sticky;
  top:-16px;
  z-index:8;
  margin:-16px -16px 8px;
  padding:15px 16px 12px;
  background:color-mix(in srgb,var(--surface) 97%,transparent);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.developer-tool-body{
  display:grid;
  gap:10px;
}
.developer-tool-body>.settings-card{
  margin:0;
  overflow:visible!important;
}
.developer-tool-body>.settings-card>summary{
  display:none;
}
.developer-tool-body>.settings-card>form,
.developer-tool-body>.settings-card>.stack{
  padding-top:2px;
}

@media(max-width:520px){
  body[data-role="developer"] .app-shell{
    padding-bottom:calc(170px + var(--safe-bottom))!important;
  }
  .developer-bottom-nav{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    width:100%!important;
  }
  .developer-bottom-nav .nav-item small{font-size:.6rem}
  .developer-more-grid{grid-template-columns:1fr}
  .developer-tool-dialog{width:calc(100vw - 18px)!important}
  .developer-tool-card{max-height:calc(100dvh - 26px)}
}


/* =========================================================
   v32.18 — Developer polish
   ========================================================= */
body[data-role="developer"] #developerHomePanel{
  padding-top:2px;
}
.developer-home-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.developer-home-actions>button{
  border:1px solid var(--border);
  background:var(--surface);
  color:inherit;
  border-radius:19px;
  padding:13px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:start;
  box-shadow:var(--shadow-soft);
}
.developer-home-actions>button>span:last-child{display:grid;gap:2px;min-width:0}
.developer-home-actions b{font-size:.88rem}
.developer-home-actions small{color:var(--muted);font-size:.7rem;line-height:1.5}

#developerToolDialog[data-tool="developerInvestorCard"] #developerInvestorCard>.account-list-head,
#developerToolDialog[data-tool="developerInvestorCard"] #investorAccountsList{
  display:none!important;
}
#developerToolDialog[data-tool="developerInvestorCard"] #developerInvestorCard{
  padding-bottom:2px;
}
body[data-role="developer"] #openDeleteAccountRequestButton{
  display:none!important;
}

html[data-theme="dark"] body[data-role="developer"]{
  --muted:#b8c1d1;
  --border:#344056;
  --border-strong:#43516a;
}
html[data-theme="dark"] body[data-role="developer"] .developer-list-card,
html[data-theme="dark"] body[data-role="developer"] .developer-system-grid article,
html[data-theme="dark"] body[data-role="developer"] .developer-audit-card,
html[data-theme="dark"] body[data-role="developer"] .developer-health-card,
html[data-theme="dark"] body[data-role="developer"] .developer-last-activity,
html[data-theme="dark"] body[data-role="developer"] .developer-home-actions>button,
html[data-theme="dark"] body[data-role="developer"] .developer-more-grid>button{
  border-color:var(--border-strong);
}
html[data-theme="dark"] body[data-role="developer"] .developer-audit-list small,
html[data-theme="dark"] body[data-role="developer"] .developer-audit-list time,
html[data-theme="dark"] body[data-role="developer"] .developer-list-main small,
html[data-theme="dark"] body[data-role="developer"] .developer-system-grid small,
html[data-theme="dark"] body[data-role="developer"] .developer-system-grid em{
  color:#c2cada;
}

@media(max-width:520px){
  .developer-home-actions{grid-template-columns:1fr}
}


/* =========================================================
   v32.19 — Developer English & UX final polish
   ========================================================= */
body[data-role="developer"] #morePage>.page-toolbar{
  display:none!important;
}
#developerToolDialog[data-tool="appAccountCard"] #teacherDisplayNameField{
  display:none!important;
}
#developerToolDialog[data-tool="appAccountCard"] #appPreferencesForm{
  padding-top:4px;
}
#developerToolDialog .developer-demo-row>div{
  display:grid;
  gap:3px;
  min-width:0;
}
#developerToolDialog .developer-demo-row b,
#developerToolDialog .developer-demo-row small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
#developerToolDialog .developer-demo-row small{
  color:var(--muted);
  font-size:.72rem;
}

/* =========================================================
   v32.38.2 — Developer demo account cards
   ========================================================= */
body[data-role="developer"] #demoWorkspaceList{
  gap:12px;
}
body[data-role="developer"] .developer-demo-workspace-card,
#developerToolDialog .developer-demo-workspace-card{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:13px!important;
  width:100%;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow-soft);
}
body[data-role="developer"] .developer-demo-card-head,
#developerToolDialog .developer-demo-card-head{
  display:flex!important;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
body[data-role="developer"] .developer-demo-card-title,
#developerToolDialog .developer-demo-card-title{
  display:grid!important;
  gap:4px!important;
  min-width:0;
}
body[data-role="developer"] .developer-demo-card-title>small,
#developerToolDialog .developer-demo-card-title>small{
  color:var(--muted);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.04em;
}
body[data-role="developer"] .developer-demo-card-title>b,
#developerToolDialog .developer-demo-card-title>b{
  font-size:.94rem;
  line-height:1.35;
  white-space:normal!important;
  overflow:visible!important;
}
body[data-role="developer"] .developer-demo-card-head>.account-status,
#developerToolDialog .developer-demo-card-head>.account-status{
  flex:0 0 auto;
}
body[data-role="developer"] .developer-demo-credential-grid,
#developerToolDialog .developer-demo-credential-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px!important;
}
body[data-role="developer"] .developer-demo-credential-field,
#developerToolDialog .developer-demo-credential-field{
  display:grid!important;
  gap:6px!important;
  min-width:0;
}
body[data-role="developer"] .developer-demo-field-label,
#developerToolDialog .developer-demo-field-label{
  color:var(--muted);
  font-size:.7rem;
  font-weight:800;
}
body[data-role="developer"] .developer-demo-field-value,
#developerToolDialog .developer-demo-field-value{
  display:flex!important;
  align-items:center;
  gap:8px!important;
  min-width:0;
  min-height:44px;
  padding:6px 7px 6px 10px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
}
body[data-role="developer"] .developer-demo-field-value code,
#developerToolDialog .developer-demo-field-value code{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;
  font-weight:800;
  direction:ltr;
  text-align:left;
}
body[data-role="developer"] .developer-demo-copy-btn,
#developerToolDialog .developer-demo-copy-btn{
  flex:0 0 auto;
  min-height:32px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:.7rem;
  font-weight:800;
  cursor:pointer;
}
body[data-role="developer"] .developer-demo-copy-btn:active,
#developerToolDialog .developer-demo-copy-btn:active{
  transform:translateY(1px);
}
body[data-role="developer"] .developer-demo-card-foot,
#developerToolDialog .developer-demo-card-foot{
  display:block!important;
  padding-top:1px;
}
body[data-role="developer"] .developer-demo-card-foot small,
#developerToolDialog .developer-demo-card-foot small{
  color:var(--muted);
  font-size:.68rem;
  line-height:1.55;
  white-space:normal!important;
  overflow:visible!important;
}
@media(max-width:580px){
  body[data-role="developer"] .developer-demo-credential-grid,
  #developerToolDialog .developer-demo-credential-grid{
    grid-template-columns:1fr;
  }
}
body[data-role="developer"] .page.active,
body[data-role="developer"] .page.active.cinematic-page-in,
body[data-role="developer"] .cinematic-page-in{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
body[data-role="developer"] #appView,
body[data-role="developer"] .content,
body[data-role="developer"] .page.active{
  min-height:100%;
}
html[data-theme="dark"] body[data-role="developer"] #appView{
  background:var(--bg);
}


/* =========================================================
   v32.21 — Manager final polish
   ========================================================= */
.manager-more-panel{margin-bottom:16px}
.manager-more-groups{display:grid;gap:12px}
.manager-more-group{border:1px solid var(--border);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-soft)}
.manager-more-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}
.manager-more-group>summary::-webkit-details-marker{display:none}
.manager-more-group>summary>div{display:grid;gap:3px}
.manager-more-group>summary b{font-size:.92rem}
.manager-more-group>summary small{font-size:.7rem;color:var(--muted);line-height:1.45}
.manager-more-group[open]>summary{border-bottom:1px solid var(--border)}
.manager-more-group .role-more-grid{padding:12px}
.manager-clean-settings #morePage>.settings-sections{display:none!important}
.manager-clean-settings #contextBar{margin-top:14px}

.manager-tool-dialog{width:min(96vw,820px);max-height:92dvh}
.manager-tool-card{width:100%;max-width:none;max-height:90dvh;overflow:auto;padding:18px}
.manager-tool-body{display:grid;gap:12px}
.manager-tool-body>.settings-card{margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;overflow:visible}
.manager-tool-body>.settings-card>summary{display:none!important}
.manager-tool-body>.settings-card[open]{padding:0!important}
.manager-tool-body .settings-grid{grid-template-columns:1fr}
.manager-tool-body .account-user-list,.manager-tool-body .guardian-link-list,.manager-tool-body .guardian-managed-request-list{max-height:52dvh;overflow:auto;padding-inline-end:2px}

.manager-account-tools{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(150px,.6fr);gap:10px;margin:10px 0 12px}
.manager-account-tools label{display:grid;gap:6px}
.manager-account-tools label>span{font-size:.7rem;color:var(--muted);font-weight:800}
.manager-account-tools input,.manager-account-tools select{min-height:42px}
.manager-list-more{width:100%;margin-top:8px}

body[data-role="admin"] #reportsPage .report-actions{display:flex;gap:8px;flex-wrap:wrap}
body[data-role="admin"] #reportsPage .report-actions .btn{min-width:0}
body[data-role="admin"] #reportsPage .report-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-role="admin"] #reportsPage .report-kpi{min-height:100px;display:grid;align-content:center;gap:6px}
body[data-role="admin"] #reportsPage .report-kpi strong{font-size:1.4rem}

@media(max-width:720px){
  .manager-more-group .role-more-grid{grid-template-columns:1fr!important}
  .manager-account-tools{grid-template-columns:1fr}
  .manager-tool-dialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .manager-tool-card{min-height:100dvh;max-height:100dvh;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}
  .manager-tool-body .account-user-card{grid-template-columns:1fr}
  .manager-tool-body .account-user-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  body[data-role="admin"] #reportsPage .report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-role="admin"] #reportsPage .report-actions{display:grid;grid-template-columns:1fr 1fr}
  body[data-role="admin"] #reportsPage .report-actions .btn{width:100%}
}


/* v32.21.1 — electronic teacher book belongs to teachers only */
body:not([data-role="teacher"]) #teacherBookButton,
body:not([data-role="teacher"]) #teacherBookPreview{
  display:none!important;
}


/* v32.21.2 — direct add student dialog */
.direct-school-user-dialog{width:min(96vw,720px);max-height:92dvh}
.direct-school-user-card{width:100%;max-width:none;max-height:90dvh;overflow:auto}
.direct-school-user-body{display:grid;gap:12px}
.direct-school-user-body #createSchoolUserForm{margin:0}
@media(max-width:720px){
  .direct-school-user-dialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .direct-school-user-card{min-height:100dvh;max-height:100dvh;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))}
}

/* v32.21.4 — About Al Nakhlah Private Schools is the final item in More */
.manhj-about-entry-bottom{margin-top:18px;margin-bottom:calc(96px + env(safe-area-inset-bottom));}


/* v32.23 — Student Experience */
.student-experience{
  display:grid;
  gap:14px;
  margin:6px 0 20px;
}
.student-experience-hero{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 34%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,var(--primary) 6%),var(--surface));
  box-shadow:0 18px 46px rgba(15,23,42,.08);
}
.student-experience-hero::after{
  content:"";
  position:absolute;
  width:130px;height:130px;
  inset-inline-end:-54px;top:-50px;
  border-radius:42% 58% 55% 45%;
  border:18px solid color-mix(in srgb,var(--primary) 8%,transparent);
  transform:rotate(19deg);
  pointer-events:none;
}
.student-hero-top{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.student-hero-top h2{margin:3px 0 5px;font-size:1.32rem}
.student-home-meta{margin:0;color:var(--muted);font-size:.78rem;line-height:1.65}
.student-day-badge{
  flex:0 0 auto;
  min-height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--primary);
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  font-size:.68rem;font-weight:900;
}
.student-next-lesson-card{
  position:relative;z-index:1;
  margin-top:15px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:92px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:21px;
  background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%);
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.student-next-lesson-card.is-now{
  border-color:color-mix(in srgb,#10b981 44%,var(--border));
  background:color-mix(in srgb,var(--surface) 91%,#10b981 9%);
}
.student-next-lesson-card.is-finished{opacity:.92}
.student-next-icon{
  width:46px;height:46px;border-radius:15px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--primary);
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
}
.student-next-icon .g-icon{width:24px;height:24px}
.student-next-copy{min-width:0;display:grid;gap:3px}
.student-next-copy h3{margin:0;font-size:1rem;line-height:1.4}
.student-next-copy p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.55}
.student-next-kicker{font-size:.62rem;font-weight:950;color:var(--primary)}
.student-inline-action,.student-text-action{
  border:0;
  background:transparent;
  color:var(--primary);
  font:inherit;
  font-size:.7rem;
  font-weight:900;
  cursor:pointer;
}
.student-inline-action{
  min-height:36px;padding:0 10px;border-radius:11px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));
}
.student-home-section{
  padding:15px;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.student-home-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  margin-bottom:11px;
}
.student-home-section-head h3{margin:2px 0 0;font-size:1rem}
.student-home-section-head .eyebrow{margin:0}
.student-count-badge{
  min-width:28px;height:28px;padding:0 8px;
  border-radius:999px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  color:var(--primary);
  font-size:.72rem;font-weight:950;
}
.student-required-list{display:grid;gap:8px}
.student-required-item{
  width:100%;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:70px;
  padding:10px;
  text-align:inherit;
  border:1px solid var(--border);
  border-radius:17px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  cursor:pointer;
}
.student-required-item:active{transform:scale(.992)}
.student-required-icon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--surface);
  color:var(--primary);
  border:1px solid var(--border);
}
.student-required-icon .g-icon{width:22px;height:22px}
.student-required-copy{min-width:0;display:grid;gap:2px}
.student-required-copy small{font-size:.61rem;color:var(--muted)}
.student-required-copy b{font-size:.78rem;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-required-copy em{font-size:.61rem;color:var(--muted);font-style:normal}
.student-status-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;padding:3px 8px;
  border-radius:999px;
  font-size:.59rem;font-weight:950;
  white-space:nowrap;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--muted);
}
.student-status-badge.new{background:color-mix(in srgb,#0ea5e9 11%,var(--surface));color:#0284c7;border-color:color-mix(in srgb,#0ea5e9 24%,var(--border))}
.student-status-badge.warning{background:color-mix(in srgb,#f59e0b 11%,var(--surface));color:#d97706;border-color:color-mix(in srgb,#f59e0b 25%,var(--border))}
.student-status-badge.danger{background:color-mix(in srgb,#ef4444 10%,var(--surface));color:#dc2626;border-color:color-mix(in srgb,#ef4444 24%,var(--border))}
.student-status-badge.done{background:color-mix(in srgb,#10b981 11%,var(--surface));color:#059669;border-color:color-mix(in srgb,#10b981 25%,var(--border))}
.student-announcement-highlight{overflow:hidden}
.student-highlight-card{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:11px;
  align-items:flex-start;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--accent-soft) 45%,var(--surface)));
  border:1px solid var(--border);
}
.student-highlight-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--surface);
  color:var(--primary);
  border:1px solid var(--border);
}
.student-highlight-icon .g-icon{width:23px;height:23px}
.student-highlight-card>div:last-child{min-width:0;display:grid;gap:4px}
.student-highlight-card span{font-size:.6rem;color:var(--primary);font-weight:900}
.student-highlight-card h4{margin:0;font-size:.86rem;line-height:1.45}
.student-highlight-card p{
  margin:0;color:var(--muted);font-size:.7rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.student-highlight-card small{font-size:.58rem;color:var(--muted)}
.student-insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.student-insight-card{
  min-height:122px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:12px;
  text-align:inherit;
  border:1px solid var(--border);
  border-radius:19px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  cursor:pointer;
}
.student-insight-icon{
  width:40px;height:40px;border-radius:13px;
  display:grid;place-items:center;
  color:var(--primary);
  background:var(--surface);
  border:1px solid var(--border);
}
.student-insight-icon .g-icon{width:21px;height:21px}
.student-insight-card>div{min-width:0;display:grid;gap:4px}
.student-insight-card small{font-size:.61rem;color:var(--muted)}
.student-insight-card strong{font-size:1.25rem}
.student-insight-card span:last-child{font-size:.61rem;color:var(--muted);line-height:1.45}
.student-home-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.student-home-quick-grid button{
  min-height:92px;
  display:grid;place-items:center;align-content:center;
  gap:4px;padding:9px 6px;
  border:1px solid var(--border);
  border-radius:17px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  cursor:pointer;
  text-align:center;
}
.student-home-quick-grid button>span{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  color:var(--primary);
  background:var(--surface);
  border:1px solid var(--border);
}
.student-home-quick-grid .g-icon{width:20px;height:20px}
.student-home-quick-grid b{font-size:.7rem}
.student-home-quick-grid small{font-size:.55rem;color:var(--muted);line-height:1.35}
#studentDashboard .student-search-panel{
  margin:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
#studentDashboard .student-search-heading>span{
  width:38px;height:38px;
  color:var(--primary);
}
.student-skeleton-card,.student-skeleton-row{
  position:relative;overflow:hidden;background:var(--surface-2)!important;
}
.student-skeleton-card::after,.student-skeleton-row::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.14) 45%,transparent 75%);
  transform:translateX(-100%);
  animation:studentShimmer 1.25s infinite;
}
.student-skeleton-line{height:12px;width:48%;border-radius:999px;background:var(--border)}
.student-skeleton-line.wide{width:72%;height:16px}
.student-skeleton-row{height:64px;border-radius:16px;border:1px solid var(--border)}
@keyframes studentShimmer{to{transform:translateX(100%)}}
.student-empty-state{
  grid-column:1/-1;
  min-height:78px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;
  color:var(--muted);
  padding:14px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:var(--surface-2);
}
.student-empty-state b{color:var(--text);font-size:.78rem}
.student-empty-state small{font-size:.63rem;line-height:1.5}
.student-empty-state.compact{min-height:72px}
.student-assignment-toggle{
  width:100%;min-height:38px;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--primary);
  font:inherit;font-size:.7rem;font-weight:900;
  cursor:pointer;
}
.student-assignment-toggle.done{
  background:color-mix(in srgb,#10b981 10%,var(--surface));
  color:#059669;
  border-color:color-mix(in srgb,#10b981 25%,var(--border));
}
.assignment-feed-card.is-done,.assignment-card.is-done{opacity:.72}
.assignment-feed-card.is-done h3,.assignment-card.is-done p{text-decoration:line-through}
.assignment-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.week-tab.is-today{position:relative}
.week-tab.is-today::after{
  content:"";
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:var(--primary);
  inset-inline-start:50%;bottom:3px;transform:translateX(-50%);
}
.week-tab.is-today.active::after{background:currentColor}
.schedule-card.student-schedule-now{
  border-color:color-mix(in srgb,#10b981 42%,var(--border));
  box-shadow:0 10px 28px color-mix(in srgb,#10b981 13%,transparent);
}
.schedule-card.student-schedule-next{
  border-color:color-mix(in srgb,var(--primary) 34%,var(--border));
}
.schedule-student-tag{
  min-height:24px;padding:3px 8px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--primary);
  font-size:.58rem;font-weight:950;
}
.schedule-student-tag.now{background:color-mix(in srgb,#10b981 12%,var(--surface));color:#059669}
.student-progress-page{max-width:760px;margin-inline:auto}
.student-progress-toolbar{margin-bottom:10px}
.student-progress-tabs{
  position:sticky;top:0;z-index:9;
  display:flex;gap:7px;overflow-x:auto;
  padding:7px;margin-bottom:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(14px);
}
.student-progress-tabs button{
  flex:1;min-width:95px;
  border:0;border-radius:11px;
  background:transparent;color:var(--muted);
  padding:9px 10px;
  font:inherit;font-size:.72rem;font-weight:900;
  cursor:pointer;
}
.student-progress-tabs button.active{background:var(--text);color:var(--surface)}
.student-progress-panel{display:none}
.student-progress-panel.active{display:grid;gap:12px}
.student-progress-overview{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}
.student-progress-overview article{
  min-height:112px;padding:13px;
  border:1px solid var(--border);border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  display:grid;align-content:center;gap:5px;
}
.student-progress-overview small{font-size:.62rem;color:var(--muted)}
.student-progress-overview strong{font-size:1.25rem;overflow-wrap:anywhere}
.student-progress-overview span{font-size:.61rem;color:var(--muted);line-height:1.45}
.student-progress-section{
  padding:15px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.student-progress-list{display:grid;gap:8px}
.student-progress-row{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;
  min-height:68px;padding:10px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface-2);
}
.student-progress-row>span{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface);color:var(--primary);border:1px solid var(--border);
}
.student-progress-row>span .g-icon{width:21px;height:21px}
.student-progress-row>div{min-width:0;display:grid;gap:2px}
.student-progress-row small{font-size:.59rem;color:var(--muted)}
.student-progress-row b{font-size:.76rem;line-height:1.4}
.student-progress-row em{font-style:normal;font-size:.6rem;color:var(--muted)}
.student-progress-row.grade{grid-template-columns:40px minmax(0,1fr) auto}
.student-progress-row.grade>strong{text-align:end;font-size:.8rem}
.student-progress-row.grade>strong small{display:block;margin-top:2px}
.student-attendance-details{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
}
.student-attendance-details article{
  min-height:86px;padding:10px 6px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface-2);
  display:grid;place-items:center;align-content:center;gap:5px;text-align:center;
}
.student-attendance-details small{font-size:.58rem;color:var(--muted)}
.student-attendance-details strong{font-size:1rem}
.student-account-overview{
  margin-bottom:14px;padding:15px;
  border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));
  border-radius:24px;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-soft) 32%,var(--surface)));
  box-shadow:var(--shadow-soft);
}
.student-account-head{display:flex;align-items:center;gap:12px}
.student-account-avatar{
  width:52px;height:52px;flex:0 0 auto;border-radius:17px;
  display:grid;place-items:center;background:var(--accent-soft);color:var(--primary);
  border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));
}
.student-account-avatar .g-icon{width:27px;height:27px}
.student-account-head>div{min-width:0;display:grid;gap:2px}
.student-account-head h3{margin:0;font-size:1rem}
.student-account-head p{margin:0;color:var(--muted);font-size:.67rem}
.student-account-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.student-account-meta>div{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);display:grid;gap:3px}
.student-account-meta small{font-size:.58rem;color:var(--muted)}
.student-account-meta b{font-size:.72rem}
.student-account-progress-button{
  width:100%;margin-top:10px;min-height:58px;
  display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;
  padding:9px;text-align:inherit;
  border:1px solid var(--border);border-radius:15px;background:var(--surface);
  color:var(--text);font:inherit;cursor:pointer;
}
.student-account-progress-button>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--primary)}
.student-account-progress-button .g-icon{width:20px;height:20px}
.student-account-progress-button>div{display:grid;gap:2px}
.student-account-progress-button b{font-size:.74rem}
.student-account-progress-button small{font-size:.59rem;color:var(--muted)}

@media(max-width:620px){
  .student-experience{gap:11px;margin-top:0}
  .student-experience-hero,.student-home-section{border-radius:21px;padding:13px}
  .student-hero-top{align-items:flex-start}
  .student-hero-top h2{font-size:1.15rem}
  .student-day-badge{font-size:.6rem;max-width:118px;text-align:center}
  .student-next-lesson-card{grid-template-columns:42px minmax(0,1fr);gap:9px;padding:11px;min-height:86px;border-radius:17px}
  .student-next-icon{width:42px;height:42px;border-radius:13px}
  .student-inline-action{grid-column:1/-1;width:100%;min-height:34px}
  .student-insight-grid{grid-template-columns:1fr 1fr}
  .student-insight-card{grid-template-columns:36px minmax(0,1fr);min-height:112px;padding:10px;gap:8px}
  .student-insight-icon{width:36px;height:36px}
  .student-home-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .student-home-quick-grid button{min-height:82px}
  .student-required-item{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:9px}
  .student-required-icon{width:38px;height:38px}
  .student-progress-tabs{top:4px}
  .student-attendance-details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .student-attendance-details article:first-child{grid-column:1/-1}
}
@media(max-width:390px){
  .student-insight-grid{grid-template-columns:1fr}
  .student-day-badge{display:none}
  .student-progress-overview{grid-template-columns:1fr}
}


/* v32.23.1 — Student UI polish */
.theme-state-icon.g-icon-wrap{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
}
.theme-state-icon.g-icon-wrap::after{display:none!important}
.theme-state-icon .g-icon{width:22px!important;height:22px!important}
#publicThemeIcon,#loginThemeIcon,#themeQuickIcon{place-items:center}
#publicThemeIcon{display:grid;width:24px;height:24px}

.student-clean-ui #progressPage>.student-progress-toolbar .eyebrow,
.student-clean-ui #progressPage>.student-progress-toolbar h2{
  display:none!important;
}
.student-clean-ui #progressPage>.student-progress-toolbar{
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.student-clean-ui #progressPage>.student-progress-toolbar #studentProgressMeta{
  margin:0!important;
}
.student-clean-ui #morePage>.page-toolbar{
  display:none!important;
}

.week-tabs{
  overscroll-behavior-inline:contain;
  scroll-padding-inline:8px;
}
html[dir="ltr"] .week-tabs{
  direction:ltr!important;
  justify-content:flex-start;
  padding-inline:2px 10px;
  scroll-snap-type:x proximity;
}
html[dir="rtl"] .week-tabs{
  direction:rtl!important;
  justify-content:flex-start;
  padding-inline:10px 2px;
}
.week-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
}
.student-clean-ui #scheduleEmpty>div:first-child.g-icon-wrap{
  margin:0 auto 8px;
}

/* v32.24 Professional voice messages */
#chatsPage .chat-composer{grid-template-columns:auto minmax(0,1fr) auto}
.chat-voice-button{width:46px;height:46px;border:1px solid var(--chat-border);border-radius:15px;display:grid;place-items:center;background:var(--surface-2);color:var(--primary);cursor:pointer;transition:transform .16s ease,background .16s ease}
.chat-voice-button:active{transform:scale(.92)}.chat-voice-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chat-voice-recorder,.chat-voice-preview{grid-column:1/-1;min-height:50px;display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--chat-border);border-radius:17px;background:var(--surface-2)}
.chat-voice-recorder.hidden,.chat-voice-preview.hidden{display:none!important}
.chat-composer.voice-active>.chat-voice-button,.chat-composer.voice-active>.chat-composer-field,.chat-composer.voice-active>.chat-send-button{display:none!important}
.chat-voice-cancel,.chat-voice-preview-play,.chat-voice-stop,.chat-voice-send{border:0;font:inherit;cursor:pointer}
.chat-voice-cancel{width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,#ef4444 10%,var(--surface));color:#dc2626;font-weight:900}
.chat-recording-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.10);animation:voicePulse 1.2s ease infinite}
@keyframes voicePulse{50%{box-shadow:0 0 0 9px rgba(239,68,68,0);opacity:.7}}
.chat-voice-recording-copy{display:grid;gap:1px;min-width:76px}.chat-voice-recording-copy b{font-size:.69rem}.chat-voice-recording-copy small{font-size:.6rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chat-voice-levels{height:30px;flex:1;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.chat-voice-levels i{width:3px;height:8px;border-radius:4px;background:var(--primary);animation:voiceLevel .75s ease-in-out infinite alternate;opacity:.75}
.chat-voice-levels i:nth-child(2n){animation-delay:-.25s;height:17px}.chat-voice-levels i:nth-child(3n){animation-delay:-.5s;height:25px}
@keyframes voiceLevel{to{height:6px;opacity:.35}}
.chat-voice-stop{width:40px;height:40px;border-radius:14px;background:#ef4444;display:grid;place-items:center}.chat-voice-stop span{width:13px;height:13px;border-radius:3px;background:#fff}
.chat-voice-preview-play{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;padding-inline-start:2px}
.chat-voice-preview-track{height:5px;flex:1;border-radius:999px;background:color-mix(in srgb,var(--muted) 18%,transparent);overflow:hidden}.chat-voice-preview-track span{display:block;width:0;height:100%;background:var(--primary);border-radius:inherit}
.chat-voice-preview>small{font-size:.58rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px}
.chat-voice-send{min-height:38px;padding:0 13px;border-radius:12px;background:var(--primary);color:#fff;font-size:.67rem;font-weight:900}.chat-voice-send:disabled{opacity:.55}
.chat-voice-message{min-width:210px;display:flex;align-items:center;gap:9px;padding:2px 0}
.chat-voice-play{width:38px;height:38px;min-width:38px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;cursor:pointer;font-size:.72rem}
.chat-voice-wave{height:32px;flex:1;display:flex;align-items:center;gap:2px;cursor:pointer;overflow:hidden}.chat-voice-wave i{width:2px;border-radius:3px;background:color-mix(in srgb,var(--primary) 48%,var(--muted));opacity:.65}
.chat-voice-wave i.played{background:var(--primary);opacity:1}.chat-voice-meta{display:grid;justify-items:end;gap:1px;min-width:38px}.chat-voice-meta small{font-size:.54rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chat-voice-speed{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.52rem;font-weight:900;cursor:pointer;padding:0}
.chat-voice-loading{font-size:.62rem;color:var(--muted)}
@media(max-width:700px){.chat-voice-message{min-width:190px}.chat-voice-levels{gap:2px}#chatsPage .chat-composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}}

/* v32.25 Professional teacher experience */
.teacher-command-card{padding:18px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface));box-shadow:var(--shadow)}
.teacher-command-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.teacher-command-head h3{margin:3px 0 4px;font-size:1.15rem}.teacher-command-head p{margin:0}
.teacher-command-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.teacher-command-action{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:13px;display:flex;align-items:center;gap:10px;text-align:start;color:inherit;cursor:pointer}.teacher-command-action.primary{background:var(--primary);color:#fff;border-color:transparent}.teacher-command-action span{width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,currentColor 12%,transparent)}.teacher-command-action div{display:grid;gap:2px}.teacher-command-action b{font-size:.76rem}.teacher-command-action small{font-size:.6rem;opacity:.72}
.tp-shell{max-width:980px;margin:auto;display:grid;gap:14px}.tp-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}.tp-head span{font-size:.62rem;font-weight:900;color:var(--primary)}.tp-head h2{margin:3px 0;font-size:1.35rem}.tp-head p{margin:0;color:var(--muted);font-size:.7rem}.tp-head>button,.tp-lesson>button,.tp-editor-bar>button,.tp-savebar>button,.tp-archive button{border:0;border-radius:13px;padding:10px 14px;background:var(--primary);color:#fff;font:inherit;font-size:.65rem;font-weight:900;cursor:pointer}
.tp-tabs{display:flex;gap:6px;padding:4px;background:var(--surface-2);border-radius:15px;width:max-content}.tp-tabs button{border:0;background:transparent;padding:9px 18px;border-radius:11px;font:inherit;font-size:.66rem;font-weight:850;color:var(--muted)}.tp-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 2px 9px rgba(0,0,0,.06)}
.tp-date{display:flex;align-items:end;justify-content:center;gap:8px}.tp-date label{display:grid;gap:5px;font-size:.6rem;font-weight:800}.tp-date input{min-height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:0 12px}.tp-date button{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-size:1.2rem}
.tp-day-list,.tp-archive{display:grid;gap:9px}.tp-lesson,.tp-archive article{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.tp-lesson.ready{border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}.tp-period{width:48px;height:48px;border-radius:15px;background:var(--surface-2);display:grid;place-items:center;align-content:center}.tp-period b{font-size:1rem}.tp-period small{font-size:.52rem;color:var(--muted)}.tp-lesson-main{flex:1;display:grid;gap:2px}.tp-lesson-main span{font-size:.58rem;color:var(--primary);font-weight:900}.tp-lesson-main h3{font-size:.78rem;margin:0}.tp-lesson-main small{font-size:.58rem;color:var(--muted)}
.tp-empty{padding:28px;border:1px dashed var(--line);border-radius:20px;text-align:center;color:var(--muted);display:grid;gap:5px}.tp-editor{display:grid;gap:14px}.tp-editor-bar{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.tp-editor-bar>div{flex:1;display:grid}.tp-editor-bar small,.tp-editor-bar>span{font-size:.58rem;color:var(--muted)}.tp-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tp-editor-grid label{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.tp-editor-grid label.wide{grid-column:1/-1}.tp-editor-grid span{font-size:.62rem;font-weight:850}.tp-editor-grid input,.tp-editor-grid textarea,.tp-savebar select{border:0;outline:0;background:var(--surface-2);color:var(--text);border-radius:11px;padding:10px;font:inherit;font-size:.68rem;resize:vertical}.tp-savebar{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:flex-end;gap:10px;padding:10px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);z-index:5}.tp-savebar label{display:grid;gap:4px;font-size:.58rem}.tp-archive article>div:first-child{flex:1;display:grid;gap:3px}.tp-archive small{font-size:.57rem;color:var(--muted)}.tp-archive article>div:last-child{display:flex;align-items:center;gap:6px}.tp-status{font-size:.55rem;padding:5px 8px;border-radius:999px;background:var(--surface-2)}
@media(max-width:760px){.teacher-command-actions{grid-template-columns:1fr 1fr}.teacher-command-head{align-items:center}.teacher-command-action{padding:11px}.teacher-command-action small{display:none}.tp-head{align-items:flex-start}.tp-head p{max-width:230px}.tp-editor-grid{grid-template-columns:1fr}.tp-editor-grid label.wide{grid-column:auto}.tp-lesson{padding:11px}.tp-archive article{align-items:flex-start;flex-direction:column}.tp-archive article>div:last-child{width:100%;justify-content:flex-end}}

/* v32.25.1 iOS viewport guard — prevent public/teacher horizontal drift */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.public-shell,.public-stage,.public-nav,.public-hero-grid,.public-hero-card,.public-showcase,.public-secondary-grid,
.app-shell,.content,.page,.teacher-command-card,.teacher-command-actions,.tp-shell,.tp-head,.tp-editor,.tp-editor-grid{min-width:0;max-width:100%}
.public-shell{width:100%;max-width:100vw}
.public-stage{box-sizing:border-box}
.public-nav>*{min-width:0}
.public-nav-actions{flex:0 0 auto}
.public-hero-grid>*{min-width:0}
@media(max-width:860px){
 .public-hero-grid{display:block}
 .public-hero-card,.public-showcase{width:100%;max-width:100%}
 .public-showcase{margin-top:28px}
}
@media(max-width:520px){
 .public-shell{width:100%;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .public-nav{width:100%;gap:8px}
 .public-nav-actions{gap:6px}
 .public-round-action{min-width:42px;max-width:112px;padding-inline:9px}
 .public-brand-lockup,.public-cta,.public-links,.public-feature-grid,.public-role-orbit,.public-footer{max-width:100%}
 .public-hero-card h1,.public-lead,.public-feature-grid b,.public-feature-grid small{overflow-wrap:anywhere}
 .teacher-command-actions{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
 .teacher-command-action{min-width:0}
 .teacher-command-action div{min-width:0}
 .tp-head{width:100%;flex-wrap:wrap}
 .tp-editor-grid>*{min-width:0}
}

/* v32.26 Teacher Cleanup & Lesson Flow */
body[data-role="teacher"] .teacher-focus-home{display:grid;gap:16px}
.teacher-focus-home .daily-hub-head{margin:0}
.teacher-next-lesson{margin:0}
.teacher-day-section{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}
.teacher-today-timeline{display:grid;gap:8px}
.teacher-day-row{width:100%;min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface-2);color:var(--text);padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;text-align:start}
.teacher-day-row>span{width:42px;height:42px;border-radius:13px;background:var(--surface);display:grid;place-items:center;align-content:center;border:1px solid var(--border)}
.teacher-day-row>span b{font-size:.8rem}.teacher-day-row>span small{font-size:.52rem;color:var(--muted)}
.teacher-day-row>div{min-width:0;display:grid;gap:2px}.teacher-day-row strong{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teacher-day-row>div small{font-size:.58rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher-day-row em{font-style:normal;font-size:.54rem;font-weight:900;color:var(--muted);padding:5px 8px;border-radius:999px;background:var(--surface)}
.teacher-day-row em.ready{color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.teacher-home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.teacher-home-action{min-width:0;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);padding:12px;display:flex;align-items:center;gap:10px;text-align:start}
.teacher-home-action>span{width:36px;height:36px;flex:0 0 36px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center}
.teacher-home-action>div{min-width:0;display:grid;gap:2px}.teacher-home-action b{font-size:.7rem}.teacher-home-action small{font-size:.56rem;color:var(--muted);line-height:1.45}

.teacher-lessons-page{display:none}.teacher-lessons-page.active{display:grid;gap:14px}
.teacher-today-lessons-panel,.teacher-history-panel{margin:0}
.teacher-lesson-list{display:grid;gap:9px}
.teacher-lesson-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.teacher-lesson-period{width:48px;height:48px;border-radius:15px;background:var(--surface-2);display:grid;place-items:center;align-content:center}
.teacher-lesson-period b{font-size:.95rem}.teacher-lesson-period small{font-size:.52rem;color:var(--muted)}
.teacher-lesson-copy{min-width:0;display:grid;gap:2px}.teacher-lesson-copy span{font-size:.57rem;font-weight:900;color:var(--primary)}.teacher-lesson-copy h3{margin:0;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teacher-lesson-copy small{font-size:.56rem;color:var(--muted)}
.teacher-lesson-actions{display:flex;align-items:center;gap:6px}.teacher-lesson-actions button{border:0;border-radius:11px;padding:8px 10px;font:inherit;font-size:.58rem;font-weight:900;cursor:pointer}.teacher-lesson-actions .plan{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.teacher-lesson-actions .start{background:var(--primary);color:#fff}
.teacher-history-more{position:relative}.teacher-history-more>summary{list-style:none;cursor:pointer}.teacher-history-more>summary::-webkit-details-marker{display:none}.teacher-history-more-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:12;min-width:150px;padding:7px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:5px}
.teacher-lesson-filters{grid-template-columns:minmax(120px,1fr) repeat(2,minmax(110px,.7fr)) minmax(150px,1fr)}
.teacher-grade-context{margin-bottom:10px;padding:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);display:grid;gap:6px}.teacher-grade-context small{font-size:.58rem;color:var(--muted)}
.teacher-secondary-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.teacher-lesson-dialog-actions{display:flex;align-items:center;gap:8px}.dialog-more-actions{position:relative}.dialog-more-actions>summary{list-style:none;cursor:pointer}.dialog-more-actions>summary::-webkit-details-marker{display:none}.dialog-more-actions>div{position:absolute;bottom:calc(100% + 7px);inset-inline-end:0;z-index:15;min-width:180px;padding:8px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:6px}
.chat-voice-cancel.text-action{width:auto;min-width:54px;padding:0 10px;font-size:.58rem;font-weight:900}
.chat-voice-recorder{gap:9px}.chat-voice-recording-copy{min-width:88px}.chat-voice-recording-copy b{font-size:.72rem}.chat-voice-recording-copy small{font-size:.65rem}
body[data-role="teacher"] #publicHomeButton{display:none!important}

@media(max-width:700px){
  .teacher-home-actions{grid-template-columns:1fr}
  .teacher-home-action small{display:block}
  .teacher-day-row{grid-template-columns:auto minmax(0,1fr)}
  .teacher-day-row em{grid-column:2;justify-self:start}
  .teacher-lesson-card{grid-template-columns:auto minmax(0,1fr)}
  .teacher-lesson-actions{grid-column:1/-1;justify-content:flex-end}
  .teacher-lesson-filters{grid-template-columns:1fr 1fr}
  .teacher-lesson-filters input:last-child,.teacher-lesson-filters select{grid-column:1/-1}
  .teacher-secondary-tools{grid-template-columns:1fr}
  .teacher-lesson-dialog-actions{flex-wrap:wrap}
  .chat-voice-cancel.text-action{min-width:50px}
}


/* v32.27 — Guardian Family Hub + mobile chat hardening */
@media(max-width:700px){
  body:has(#chatsPage.chat-thread-open-page) .bottom-nav{display:none!important}
  body:has(#chatsPage.chat-thread-open-page) .guardian-child-bar{display:none!important}
  #chatsPage.chat-thread-open-page .chat-layout{
    height:calc(var(--vv-height,100dvh) - 112px)!important;
    max-height:none!important;
    margin-bottom:0!important;
  }
  #chatsPage.chat-thread-open-page .chat-thread{padding-bottom:max(6px,env(safe-area-inset-bottom))}
}
body[data-role="guardian"] .guardian-child-bar:has(select:empty){display:none!important}
body[data-role="guardian"] .topbar{z-index:60}
@media(max-width:560px){
  html[data-language="en"] body[data-role="guardian"] .topbar{gap:6px;padding-inline:11px}
  html[data-language="en"] body[data-role="guardian"] .topbar-brand .eyebrow{display:none}
  html[data-language="en"] body[data-role="guardian"] #pageTitle{font-size:1.15rem;white-space:nowrap}
  html[data-language="en"] body[data-role="guardian"] .topbar-actions{gap:5px}
  html[data-language="en"] body[data-role="guardian"] .topbar-actions .icon-button{width:38px;height:38px;border-radius:12px}
}

/* v32.27.1 guardian child switcher mobile fix */
@media(max-width:640px){
 body[data-role="guardian"] .guardian-child-bar{position:relative;top:auto;width:calc(100% - 24px);min-height:0;margin:8px auto 10px;padding:10px;grid-template-columns:42px minmax(0,1fr) minmax(118px,36%);gap:8px;border-radius:18px}
 body[data-role="guardian"] .guardian-child-bar-icon{width:42px;height:42px;border-radius:13px}
 body[data-role="guardian"] .guardian-child-bar-copy{min-width:0;align-self:center}
 body[data-role="guardian"] .guardian-child-bar-copy small{font-size:.53rem;line-height:1.2}
 body[data-role="guardian"] .guardian-child-bar-copy b{font-size:.73rem;line-height:1.35;max-width:100%}
 body[data-role="guardian"] .guardian-child-bar-copy span{font-size:.53rem;line-height:1.35;max-width:100%}
 body[data-role="guardian"] .guardian-child-bar-select{grid-column:auto!important;min-width:0;width:100%;margin:0}
 body[data-role="guardian"] .guardian-child-bar-select select{display:block;width:100%;min-width:0;height:42px!important;margin:0;padding:0 28px 0 9px;border-radius:12px;font-size:.62rem;line-height:1.2;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 html[dir="rtl"] body[data-role="guardian"] .guardian-child-bar-select select{padding:0 9px 0 28px}
}
@media(max-width:430px){
 body[data-role="guardian"] .guardian-child-bar{width:calc(100% - 20px);grid-template-columns:38px minmax(0,1fr) 116px;padding:8px;gap:7px}
 body[data-role="guardian"] .guardian-child-bar-icon{width:38px;height:38px}
 body[data-role="guardian"] .guardian-child-bar-copy b{font-size:.69rem}
 body[data-role="guardian"] .guardian-child-bar-copy span{font-size:.49rem}
 body[data-role="guardian"] .guardian-child-bar-select select{height:38px!important;font-size:.58rem}
}

/* v32.27.2 — guardian child carousel */
body[data-role="guardian"] .guardian-child-switcher{
  display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:8px;
  width:min(760px,calc(100% - 24px));padding:8px 10px;margin:8px auto 12px;border-radius:20px;
}
body[data-role="guardian"] .guardian-child-switch-main{
  min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;
  border:0;background:transparent;color:inherit;text-align:start;padding:3px;cursor:pointer;
}
body[data-role="guardian"] .guardian-child-switch-avatar{
  width:44px;height:44px;display:grid;place-items:center;border-radius:14px;font-size:1.05rem;
  background:linear-gradient(145deg,var(--accent),var(--accent-2));color:white;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 24%,transparent);
}
body[data-role="guardian"] .guardian-child-switch-arrow{
  width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--accent);font-size:1.65rem;line-height:1;display:grid;place-items:center;cursor:pointer;
}
body[data-role="guardian"] .guardian-child-switch-arrow:active{transform:scale(.94)}
body[data-role="guardian"] .guardian-child-native-select{
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  opacity:.001!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;
}
@media(max-width:640px){
 body[data-role="guardian"] .guardian-child-switcher{
   position:relative;top:auto;grid-template-columns:40px minmax(0,1fr) 40px!important;
   width:calc(100% - 20px);padding:7px 8px;gap:6px;min-height:62px;margin:7px auto 10px;
 }
 body[data-role="guardian"] .guardian-child-switch-main{grid-template-columns:40px minmax(0,1fr);gap:8px;padding:0}
 body[data-role="guardian"] .guardian-child-switch-avatar{width:40px;height:40px;border-radius:13px}
 body[data-role="guardian"] .guardian-child-switch-arrow{width:38px;height:38px;border-radius:12px;font-size:1.4rem}
 body[data-role="guardian"] .guardian-child-switcher .guardian-child-bar-copy small{font-size:.52rem}
 body[data-role="guardian"] .guardian-child-switcher .guardian-child-bar-copy b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body[data-role="guardian"] .guardian-child-switcher .guardian-child-bar-copy span{font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* v32.28 Driver Cockpit */
.driver-cockpit{display:grid;gap:14px;margin-bottom:18px}
.driver-cockpit-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px;border:1px solid var(--border);border-radius:26px;background:linear-gradient(135deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}
.driver-cockpit-hero h2{margin:3px 0 5px;font-size:1.28rem}.driver-cockpit-hero p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.65}
.driver-cockpit-status{flex:0 0 auto;padding:8px 11px;border-radius:999px;background:var(--accent-soft);color:var(--primary);font-size:.68rem;font-weight:900}
.driver-cockpit-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.driver-cockpit-kpis article{display:grid;gap:4px;min-height:78px;padding:13px;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:var(--shadow-soft)}
.driver-cockpit-kpis small{color:var(--muted);font-size:.58rem}.driver-cockpit-kpis strong{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.driver-next-trip-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:23px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));box-shadow:var(--shadow-soft)}
.driver-next-trip-card h3{margin:2px 0 4px}.driver-next-trip-card p{margin:0;color:var(--muted);font-size:.65rem;line-height:1.6}
.driver-home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.driver-home-actions button{min-width:0;min-height:88px;padding:12px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);font:inherit;display:grid;justify-items:start;gap:3px;text-align:start;box-shadow:var(--shadow-soft)}
.driver-home-actions button>span{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--primary)}.driver-home-actions b{font-size:.75rem}.driver-home-actions small{font-size:.55rem;color:var(--muted)}
.driver-transport-hero-badge{grid-column:1/-1;width:max-content;max-width:100%;padding:7px 10px;border-radius:999px;background:var(--accent-soft);color:var(--primary);font-size:.62rem;font-weight:900}
.driver-transport-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.driver-transport-head h2{margin:2px 0}.driver-transport-head small{color:var(--muted);font-size:.6rem}
body.transport-driver-mode #transportPage{gap:12px}
body.transport-driver-mode #transportPage .transport-hero{padding:17px}
body.transport-driver-mode #transportPage .transport-hero h2{font-size:1.15rem}
body.transport-driver-mode #transportPage .transport-hero>div:not(.driver-transport-hero-badge) p:last-child{max-width:520px}
body.transport-driver-mode #transportSharedPanel .transport-section-head{margin-top:4px}
body.transport-driver-mode #morePage #schoolStructureTitle,
body.transport-driver-mode #morePage #schoolStructureGrid,
body.transport-driver-mode #morePage #schoolManagementTitle,
body.transport-driver-mode #morePage #accountManagementGrid,
body.transport-driver-mode #morePage #guardianManagementTitle,
body.transport-driver-mode #morePage #guardianManagementGrid,
body.transport-driver-mode #morePage #teacherAssignmentTitle,
body.transport-driver-mode #morePage #teacherAssignmentGrid,
body.transport-driver-mode #morePage #communicationToolsTitle,
body.transport-driver-mode #morePage #communicationToolsGrid,
body.transport-driver-mode #morePage #dailyWorkTitle,
body.transport-driver-mode #morePage #dailyWorkGrid{display:none!important}
@media(max-width:600px){
 .driver-cockpit-hero{padding:16px;border-radius:22px}.driver-cockpit-kpis{grid-template-columns:1fr 1fr}.driver-cockpit-kpis article:last-child{grid-column:1/-1}
 .driver-next-trip-card{display:grid}.driver-next-trip-card .btn{width:100%}
 .driver-home-actions{grid-template-columns:1fr 1fr}.driver-home-actions button:first-child{grid-column:1/-1}
 .driver-transport-head{align-items:stretch;display:grid}.driver-transport-head .btn{width:100%}
 body.transport-driver-mode #transportPage .transport-shared-grid{gap:9px}
}


/* v32.29 — stable unread badge: never changes bottom-nav item height */
.bottom-nav .nav-item[data-page="chats"]{position:relative!important}
.bottom-nav .nav-item[data-page="chats"]>.chat-nav-badge{
  position:absolute!important;
  top:4px!important;
  inset-inline-end:calc(50% - 25px)!important;
  z-index:3!important;
  min-width:18px!important;
  width:auto!important;
  height:18px!important;
  padding:0 5px!important;
  line-height:18px!important;
  font-size:.62rem!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}
.bottom-nav .nav-item[data-page="chats"]>.chat-nav-badge.hidden{display:none!important}


/* v32.30 — live trip flow */
.driver-student-card{position:relative}
.driver-student-card.is-current{outline:2px solid color-mix(in srgb,var(--accent,#6d5dfc) 70%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.driver-route-order{position:absolute;top:10px;inset-inline-start:10px;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:.72rem;font-weight:900;background:var(--surface-2,#222);border:1px solid var(--border)}
.driver-coming-response,.driver-waiting-response,.passenger-arrival-callout{margin-top:10px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--accent,#6d5dfc) 12%,var(--surface,#111));border:1px solid color-mix(in srgb,var(--accent,#6d5dfc) 28%,var(--border))}
.driver-coming-response,.passenger-arrival-callout{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.driver-coming-response span,.driver-waiting-response,.passenger-arrival-callout span{font-size:.78rem;opacity:.78}
.driver-arrived-btn{min-width:120px}


/* v32.31 — Smart Route Foundations */
.transport-location-box{border:1px solid var(--border);border-radius:16px;padding:12px;display:grid;gap:10px;background:color-mix(in srgb,var(--surface-2,#eef2f7) 72%,transparent)}
.transport-location-box.compact{margin-block:2px 8px}
.transport-location-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.transport-location-head>div{display:grid;gap:2px;min-width:0}
.transport-location-head small{color:var(--muted);font-size:.76rem}
.driver-route-map-panel{display:grid;gap:12px;overflow:hidden}
.driver-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.driver-map-head>div:first-child{min-width:0}
.driver-map-actions{display:flex;gap:8px;flex-wrap:wrap}
.driver-route-map{width:100%;min-height:300px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.driver-map-note{color:var(--muted);line-height:1.6}
.driver-route-map .leaflet-control-attribution{font-size:9px}
[dir="rtl"] .driver-route-map .leaflet-control-zoom{margin-left:10px;margin-right:0}
@media(max-width:640px){
  .driver-route-map{min-height:250px}
  .driver-map-actions{width:100%}
  .driver-map-actions .btn{flex:1}
}


/* v32.32 — Live Routing & Tracking */
.transport-live-panel{display:grid;gap:12px}
.transport-live-map{width:100%;min-height:300px;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.transport-live-badge{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--border);font-size:.78rem;font-weight:900;white-space:nowrap}
.transport-live-badge[data-state="live"]{background:color-mix(in srgb,var(--accent,#6d5dfc) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent,#6d5dfc) 40%,var(--border))}
.transport-live-badge[data-state="pending"]{opacity:.82}
.transport-live-badge[data-state="error"]{background:color-mix(in srgb,#b3261e 10%,var(--surface))}
.transport-live-map .leaflet-control-attribution{font-size:9px}
@media(max-width:640px){
  .transport-live-map{min-height:250px}
  .transport-live-badge{width:100%}
}

/* v32.40 — Transport Observer Lockdown */
.transport-observer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-top:2px}
.transport-observer-head>div{display:grid;gap:3px}
.transport-observer-head b{font-size:.9rem}
.transport-observer-head small,.transport-observer-head>span{color:var(--muted);font-size:.7rem;font-weight:700}
.transport-observer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.transport-observer-trip{display:grid;gap:11px;padding:13px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2)}
.transport-observer-trip-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.transport-observer-trip-head>div{display:grid;gap:2px;min-width:0}
.transport-observer-trip-head small,.transport-observer-trip-head span{color:var(--muted);font-size:.7rem}
.transport-observer-trip-head strong{font-size:.92rem}
.transport-observer-live{flex:0 0 auto;padding:5px 8px;border-radius:999px;font-size:.62rem!important;font-weight:900;color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border))}
.transport-observer-driver{display:flex;align-items:center;gap:9px}
.transport-observer-driver>span{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--primary)}
.transport-observer-driver .g-icon{width:19px;height:19px}
.transport-observer-driver>div{display:grid;gap:2px}
.transport-observer-driver small{color:var(--muted);font-size:.66rem}
.transport-observer-driver b{font-size:.82rem}
.transport-observer-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.transport-observer-stats span{display:grid;place-items:center;gap:3px;padding:8px 4px;border-radius:12px;background:var(--surface);border:1px solid var(--border);text-align:center}
.transport-observer-stats small{font-size:.6rem;color:var(--muted);white-space:nowrap}
.transport-observer-stats b{font-size:.92rem}
.transport-observer-readonly{color:var(--muted);font-size:.66rem;line-height:1.55;padding-top:1px}
.transport-observer-empty{display:grid;gap:4px;padding:14px;border:1px dashed var(--border);border-radius:16px;text-align:center;color:var(--muted)}
.transport-observer-empty b{color:var(--text)}
.transport-observer-empty small{font-size:.72rem}
@media(max-width:640px){.transport-observer-head{display:grid}.transport-observer-grid{grid-template-columns:1fr}.transport-observer-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* v32.33 multi-school teachers */
.multi-school-teacher-dialog{width:min(94%,720px)}
.multi-school-teacher-card{max-height:min(88dvh,820px);overflow:auto;align-content:start}
.multi-school-target{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)
}
.multi-school-target small{color:var(--muted);font-weight:700}
.multi-school-target strong{font-size:.92rem;text-align:end}
.multi-school-teacher-search{margin:0}
.multi-school-teacher-list{display:grid;gap:9px;min-height:72px}
.multi-school-teacher-candidate{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 12px;border:1px solid var(--border);border-radius:16px;background:var(--surface)
}
.multi-school-teacher-candidate .account-user-main{min-width:0}
.multi-school-teacher-candidate .account-user-main>div:last-child{min-width:0}
.multi-school-teacher-candidate strong,.multi-school-teacher-candidate small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi-school-teacher-candidate small{margin-top:3px;color:var(--muted)}
.multi-school-selected{
  display:grid;gap:13px;padding:14px;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));
  border-radius:18px;background:color-mix(in srgb,var(--primary) 4%,var(--surface))
}
.multi-school-selected-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.multi-school-selected-head>div{display:grid;gap:3px;min-width:0}
.multi-school-selected-head small{color:var(--muted)}
.multi-school-selected-head strong{font-size:1rem}
.multi-school-selected-head span.muted{display:block}
.teacher-link-context{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:9px;align-items:end}
.teacher-link-context .btn{min-height:46px;white-space:nowrap}
.staff-school-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:2px}
.staff-school-tags span{
  padding:6px 9px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);font-size:.74rem;font-weight:800
}
.staff-school-tags span.current{
  border-color:color-mix(in srgb,var(--primary) 42%,var(--border));
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)
}
@media(max-width:640px){
  .multi-school-teacher-dialog{width:calc(100% - 18px)}
  .multi-school-teacher-card{padding:15px;border-radius:20px}
  .multi-school-target{align-items:flex-start;flex-direction:column}
  .multi-school-target strong{text-align:start}
  .multi-school-teacher-candidate{grid-template-columns:minmax(0,1fr)}
  .multi-school-teacher-candidate .btn{width:100%}
  .teacher-link-context{grid-template-columns:1fr}
  .teacher-link-context .btn{width:100%}
  .multi-school-selected-head{align-items:flex-start}
}


/* v32.35 Driver Navigation Mode */
body.transport-driver-mode #transportPage>.transport-hero,
body.transport-driver-mode #transportPage>#transportKpis{display:none!important}
body.transport-driver-mode #transportDriverPanel{
  width:min(860px,100%);margin-inline:auto;display:grid;gap:12px
}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head{
  margin:0;padding:8px 2px;background:transparent;border:0
}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head>div{
  display:flex;align-items:center;gap:8px
}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head .eyebrow,
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head h2,
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head small{display:none}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head::before{
  content:"رحلة مباشرة";font-size:.72rem;font-weight:950;letter-spacing:.02em
}
body.transport-driver-mode #transportDriverPanel.is-live-navigation #driverTripCards{display:none!important}
body.transport-driver-mode #transportDriverPanel.is-live-navigation #driverLiveFocus{order:1}
body.transport-driver-mode #transportDriverPanel.is-live-navigation #driverRouteMapPanel{order:2}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-roster-panel{order:3}
.driver-nav-student{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center
}
.driver-nav-avatar-wrap{position:relative;width:68px;height:68px;flex:0 0 auto}
.driver-nav-avatar{
  width:68px;height:68px;border-radius:22px;display:grid;place-items:center;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));
  box-shadow:0 10px 24px rgba(15,23,42,.08)
}
.driver-nav-avatar .student-avatar-unified,
.driver-nav-avatar .transport-student-photo{width:100%;height:100%}
.driver-nav-avatar .transport-student-photo{object-fit:cover}
.driver-nav-avatar .g-icon{width:30px;height:30px}
.driver-nav-order{
  position:absolute;inset-inline-end:-5px;bottom:-4px;min-width:26px;height:26px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;background:#2563eb;color:white;border:3px solid var(--surface);
  font-size:.72rem;font-weight:950;box-shadow:0 6px 16px rgba(37,99,235,.25)
}
.driver-nav-student-copy{min-width:0}
.driver-nav-student-copy small{display:block;color:var(--muted);font-size:.66rem;font-weight:850}
.driver-nav-student-copy h2{margin:3px 0;font-size:1.22rem;line-height:1.25}
.driver-nav-student-copy p{margin:0;color:var(--muted);font-size:.74rem;line-height:1.55;overflow-wrap:anywhere}
.driver-phase-icon{width:100%;height:100%;display:grid;place-items:center}
.driver-nav-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.driver-nav-stats>span{
  display:grid;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:15px;background:var(--surface)
}
.driver-nav-stats small{font-size:.58rem;color:var(--muted);font-weight:800}
.driver-nav-stats b{font-size:.86rem}
.driver-proximity-note{
  padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--muted);font-size:.72rem;font-weight:800;text-align:center
}
.driver-proximity-note.is-near{
  background:color-mix(in srgb,#16a34a 10%,var(--surface));
  border-color:color-mix(in srgb,#16a34a 34%,var(--border));color:#15803d
}
.driver-live-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.driver-live-actions .driver-live-nav{grid-column:1/-1}
.driver-action-success,
.driver-action-danger,
.driver-action-neutral,
.driver-action-finish{
  border:0!important;box-shadow:none!important;font-weight:950!important;min-height:58px!important;border-radius:18px!important
}
.driver-action-success{background:#16a34a!important;color:#fff!important}
.driver-action-danger{background:color-mix(in srgb,#dc2626 8%,var(--surface))!important;color:#dc2626!important;border:1px solid color-mix(in srgb,#dc2626 28%,var(--border))!important}
.driver-action-neutral{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--border)!important}
.driver-action-finish{background:#151515!important;color:#fff!important}
.driver-route-map-panel{
  padding:14px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-soft)
}
.driver-route-map-panel .driver-map-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px
}
.driver-route-map-panel .driver-map-head h3{font-size:1rem;margin:2px 0}
.driver-route-map-panel .driver-map-head small{font-size:.66rem;line-height:1.45;color:var(--muted)}
.driver-route-map-panel .driver-map-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:6px
}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-map-actions #driverMapToggle{display:none!important}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-route-map{
  min-height:430px;border-radius:20px;border:0;background:#f5f7f8
}
body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-map-note{display:none}
.driver-map-bus-icon,
.driver-map-student-icon,
.driver-map-origin-icon{background:transparent!important;border:0!important}
.driver-map-bus-icon>span{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;
  border:4px solid #fff;box-shadow:0 8px 22px rgba(15,23,42,.28)
}
.driver-map-bus-icon .g-icon{width:24px;height:24px}
.driver-map-student-icon>span{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2563eb;
  border:2px solid #2563eb;font-size:.72rem;font-weight:950;box-shadow:0 5px 14px rgba(37,99,235,.2)
}
.driver-map-student-icon.is-current>span{
  width:42px;height:42px;background:#2563eb;color:#fff;border:4px solid #fff;box-shadow:0 8px 20px rgba(37,99,235,.34)
}
.driver-map-origin-icon>span{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#111;color:#fff;border:3px solid #fff;
  box-shadow:0 5px 14px rgba(15,23,42,.18)
}
.driver-map-origin-icon .g-icon{width:18px;height:18px}
.driver-route-map .leaflet-tile{filter:saturate(.78) contrast(.93) brightness(1.03)}
.driver-route-map .leaflet-control-zoom{
  border:0!important;box-shadow:0 8px 22px rgba(15,23,42,.12)!important;border-radius:14px!important;overflow:hidden
}
.driver-roster-panel{
  padding:14px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-soft)
}
.driver-roster-details>summary{min-height:56px}
.driver-roster-details>summary>span{background:transparent;border-color:var(--border)}
.driver-safety-close{display:none}
body.transport-driver-mode #transportSharedPanel{display:none!important}
body.transport-driver-mode #transportSharedPanel.driver-safety-open{
  display:block!important;position:fixed;z-index:1200;
  inset:clamp(12px,5vh,54px) max(12px,calc((100vw - 760px)/2)) max(12px,calc(76px + var(--safe-bottom)));
  overflow:auto;padding:18px;border:1px solid var(--border);border-radius:28px;
  background:var(--surface);box-shadow:0 28px 80px rgba(15,23,42,.34)
}
body.transport-driver-mode #transportSharedPanel.driver-safety-open::before{
  content:"";position:fixed;inset:0;z-index:-1;background:rgba(15,23,42,.34);backdrop-filter:blur(5px);pointer-events:none
}
body.transport-driver-mode #transportSharedPanel .driver-safety-close{
  display:grid;place-items:center;position:sticky;top:0;margin-inline-start:auto;z-index:3;
  width:42px;height:42px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);color:var(--text);font:inherit;font-size:1rem;box-shadow:var(--shadow-soft)
}
body.transport-driver-mode #transportSharedPanel .transport-shared-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
body.transport-driver-mode #transportSharedPanel .transport-panel-card{box-shadow:none}
body.transport-driver-mode #transportSharedPanel .transport-shared-grid>section{display:none}

@media(max-width:640px){
  body.transport-driver-mode #transportSharedPanel.driver-safety-open{
    inset:10px 8px max(8px,calc(72px + var(--safe-bottom)));padding:14px;border-radius:24px
  }
  body.transport-driver-mode #transportSharedPanel .transport-shared-grid{grid-template-columns:1fr}
  body.transport-driver-mode #transportPage{padding-inline:10px}
  body.transport-driver-mode #transportDriverPanel{gap:10px}
  body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head{display:flex;align-items:center}
  body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-transport-head .btn{width:auto;margin-inline-start:auto}
  .driver-live-focus{padding:13px;border-radius:22px;gap:11px}
  .driver-nav-student{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .driver-nav-avatar-wrap,.driver-nav-avatar{width:58px;height:58px}
  .driver-nav-avatar{border-radius:18px}
  .driver-nav-order{min-width:24px;height:24px;font-size:.65rem}
  .driver-nav-student-copy h2{font-size:1.05rem}
  .driver-nav-student-copy p{font-size:.67rem}
  .driver-nav-student>.driver-live-dot{min-height:27px;padding:0 7px;font-size:.58rem}
  .driver-nav-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .driver-nav-stats>span{padding:8px;border-radius:13px}
  .driver-nav-stats small{font-size:.51rem}.driver-nav-stats b{font-size:.76rem}
  .driver-live-actions{grid-template-columns:1.45fr .75fr;gap:8px}
  .driver-live-actions .driver-live-nav{grid-column:1/-1;min-height:44px!important}
  .driver-action-success,.driver-action-danger,.driver-action-neutral,.driver-action-finish{min-height:54px!important}
  .driver-route-map-panel{padding:10px;border-radius:22px}
  .driver-route-map-panel .driver-map-head{grid-template-columns:minmax(0,1fr)}
  .driver-route-map-panel .driver-map-actions{justify-content:stretch;display:grid;grid-template-columns:auto 1fr}
  .driver-route-map-panel .driver-map-actions .btn{width:100%}
  .driver-route-map-panel .driver-map-actions #driverNavigateCurrent{grid-column:auto}
  body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-route-map{min-height:390px;border-radius:18px}
  .driver-roster-panel{padding:11px}
}
@media(max-width:390px){
  .driver-nav-student{grid-template-columns:auto minmax(0,1fr)}
  .driver-nav-student>.driver-live-dot{grid-column:1/-1;justify-self:start}
  .driver-nav-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .driver-nav-stats>span:last-child:nth-child(odd){grid-column:1/-1}
  .driver-live-actions{grid-template-columns:1fr}
  .driver-live-actions .driver-live-nav{grid-column:auto}
  body.transport-driver-mode #transportDriverPanel.is-live-navigation .driver-route-map{min-height:340px}
}

/* v32.34 Driver Live Mode & Transport Hardening */
body.transport-driver-mode .bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
body.transport-driver-mode #transportPage{
  padding-bottom:calc(118px + var(--safe-bottom) + var(--vv-bottom,0px));
  scroll-padding-bottom:calc(126px + var(--safe-bottom) + var(--vv-bottom,0px));
}
body.transport-driver-mode #transportPage button,
body.transport-driver-mode #transportPage summary,
body.transport-driver-mode #transportPage textarea,
body.transport-driver-mode #transportPage select{
  scroll-margin-bottom:calc(126px + var(--safe-bottom) + var(--vv-bottom,0px));
}
.driver-trip-card.is-blocked{opacity:.68}
.driver-trip-card.is-blocked .btn:disabled{opacity:.72;cursor:not-allowed}
.driver-test-note{grid-column:1/-1;color:var(--muted);font-size:.58rem;line-height:1.45;margin-top:2px}
.driver-trip-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.driver-trip-card.is-active{
  border-color:color-mix(in srgb,var(--primary) 42%,var(--border));
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));
}
.driver-live-dot{
  display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 9px;
  border-radius:999px;background:color-mix(in srgb,#16a34a 12%,var(--surface));color:#15803d;
  border:1px solid color-mix(in srgb,#16a34a 32%,var(--border));font-size:.65rem;font-weight:950;letter-spacing:.05em
}
.driver-live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#16a34a;margin-inline-end:6px;box-shadow:0 0 0 5px color-mix(in srgb,#16a34a 14%,transparent)}
.driver-live-focus{
  display:grid;gap:14px;padding:18px;border-radius:24px;
  border:1px solid color-mix(in srgb,var(--primary) 38%,var(--border));
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 38%),
    linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 88%,var(--primary) 4%));
  box-shadow:var(--shadow)
}
.driver-live-focus.hidden{display:none!important}
.driver-live-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.driver-live-head>div:first-child{min-width:0}
.driver-live-head h2{margin:3px 0 4px;font-size:1.22rem;line-height:1.25}
.driver-live-head small{display:block;color:var(--muted);font-size:.72rem;line-height:1.55;overflow-wrap:anywhere}
.driver-live-head-status{
  flex:0 0 auto;min-width:74px;padding:9px 10px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface);display:grid;justify-items:center;gap:2px
}
.driver-live-head-status span{font-size:.62rem;color:var(--muted);font-weight:850}
.driver-live-head-status b{font-size:1rem}
.driver-live-progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border)}
.driver-live-progress i{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .3s ease}
.driver-live-eta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.driver-live-eta>span{display:grid;gap:3px;padding:11px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.driver-live-eta small{font-size:.6rem;color:var(--muted)}.driver-live-eta b{font-size:.82rem}
.driver-live-response{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:15px;background:color-mix(in srgb,#16a34a 9%,var(--surface));border:1px solid color-mix(in srgb,#16a34a 26%,var(--border))}
.driver-live-response b{color:#15803d}.driver-live-response span{font-size:.7rem;color:var(--muted)}
.driver-live-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.driver-live-actions>.btn:only-child{grid-column:1/-1}
.driver-live-actions .btn.large{min-height:52px;font-size:.86rem}
.driver-live-nav{min-height:52px}
.driver-arrive-school{font-size:.92rem!important}
.driver-map-body{display:grid;gap:10px}
.driver-map-body.hidden{display:none!important}
.driver-route-map-panel .driver-map-head{margin:0}
.driver-roster-details{display:grid;gap:10px}
.driver-roster-details>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:3px 1px
}
.driver-roster-details>summary::-webkit-details-marker{display:none}
.driver-roster-details>summary>div{min-width:0}
.driver-roster-details>summary h3{margin:2px 0}.driver-roster-details>summary small{color:var(--muted);font-size:.62rem}
.driver-roster-details>summary>span{flex:0 0 auto;padding:7px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.63rem;font-weight:850}
.driver-roster-details[open]>summary{padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:9px}
body.transport-driver-mode .driver-route-map{min-height:260px}
body.transport-driver-mode #transportSharedPanel{margin-bottom:18px}

@media(max-width:640px){
  body.transport-driver-mode #transportPage{gap:10px}
  body.transport-driver-mode #transportPage .transport-hero{padding:14px}
  body.transport-driver-mode #transportPage .transport-hero>div>p:last-child{display:none}
  .driver-live-focus{padding:15px;border-radius:20px;gap:12px}
  .driver-live-head{align-items:flex-start}
  .driver-live-head h2{font-size:1.08rem}
  .driver-live-head-status{min-width:68px;padding:8px}
  .driver-live-actions{grid-template-columns:1fr}
  .driver-live-actions>.btn:only-child{grid-column:auto}
  .driver-live-eta{grid-template-columns:1fr 1fr}
  .driver-map-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .driver-map-actions .transport-live-badge{grid-column:1/-1}
  .driver-map-actions .btn{width:100%;min-width:0}
  .driver-map-actions #driverNavigateCurrent{grid-column:1/-1}
  body.transport-driver-mode .driver-route-map{min-height:230px}
  .driver-roster-panel{margin-bottom:8px}
  .driver-student-card{padding:10px}
}
@media(max-width:390px){
  .driver-live-head{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .driver-live-eta{grid-template-columns:1fr}
  .driver-map-actions{grid-template-columns:1fr}
  .driver-map-actions .transport-live-badge,
  .driver-map-actions #driverNavigateCurrent{grid-column:auto}
}


/* v32.36.1 — Leaflet/iPhone hardening */
.driver-route-map.leaflet-container,
.transport-live-map.leaflet-container{
  direction:ltr!important;
  isolation:isolate;
  background:#e6ecef!important;
}
.driver-route-map .leaflet-map-pane,
.transport-live-map .leaflet-map-pane{
  direction:ltr!important;
}
.driver-route-map img.leaflet-tile,
.transport-live-map img.leaflet-tile{
  width:256px!important;
  height:256px!important;
  min-width:256px!important;
  min-height:256px!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  object-fit:fill!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  opacity:1!important;
  image-rendering:auto!important;
}
.driver-route-map .leaflet-tile-container,
.transport-live-map .leaflet-tile-container{
  transform-origin:0 0!important;
}
.driver-route-map .leaflet-pane,
.transport-live-map .leaflet-pane{
  max-width:none!important;
}

/* v32.37 — Guardian live journey tracking */
.guardian-live-track{
  position:relative;
  margin:18px 0;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  border-radius:28px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,#16a34a 4%),var(--surface));
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  overflow:hidden;
}
.guardian-live-track[data-state="live"]{box-shadow:0 20px 60px rgba(22,163,74,.12)}
.guardian-live-top,.guardian-live-title,.guardian-live-status{display:flex;align-items:center}
.guardian-live-top{justify-content:space-between;gap:14px;margin-bottom:14px}
.guardian-live-title{gap:11px;min-width:0}
.guardian-live-title>div{min-width:0}
.guardian-live-title small{display:block;color:var(--muted);font-weight:800;margin-bottom:3px}
.guardian-live-title h3{margin:0;font-size:1.18rem;line-height:1.35}
.guardian-live-title p{margin:3px 0 0;color:var(--muted);font-size:.83rem;line-height:1.5}
.guardian-live-pulse{width:13px;height:13px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 7px rgba(22,163,74,.13);flex:0 0 auto}
.guardian-live-track[data-state="waiting"] .guardian-live-pulse,.guardian-live-track[data-state="idle"] .guardian-live-pulse{background:#64748b;box-shadow:0 0 0 7px rgba(100,116,139,.12)}
.guardian-live-track[data-state="done"] .guardian-live-pulse{background:#2563eb;box-shadow:0 0 0 7px rgba(37,99,235,.12)}
.guardian-live-badge{padding:7px 10px;border-radius:999px;background:rgba(22,163,74,.11);border:1px solid rgba(22,163,74,.25);color:#16a34a;font-size:.72rem;font-weight:950;letter-spacing:.06em}
.guardian-live-badge[data-state="waiting"],.guardian-live-badge[data-state="idle"]{color:#64748b;background:rgba(100,116,139,.1);border-color:rgba(100,116,139,.2)}
.guardian-live-badge[data-state="done"]{color:#2563eb;background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.2)}
.guardian-tracking-children{display:flex;gap:8px;overflow:auto;padding:2px 0 12px;scrollbar-width:none}
.guardian-tracking-children::-webkit-scrollbar{display:none}
.guardian-tracking-children button{white-space:nowrap;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 13px;font-weight:850}
.guardian-tracking-children button.active{background:var(--text);color:var(--surface);border-color:var(--text)}
.guardian-live-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
.guardian-live-metrics>div{padding:11px 8px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);text-align:center}
.guardian-live-metrics small{display:block;color:var(--muted);font-size:.68rem;font-weight:750;margin-bottom:4px}
.guardian-live-metrics b{font-size:.95rem}
.guardian-live-map,.guardian-live-fallback{width:100%;height:clamp(340px,54vh,520px);border-radius:24px!important;overflow:hidden;border:1px solid var(--border);background:#e7ecef}
.guardian-live-map{position:relative!important;direction:ltr!important}
.guardian-live-map .driver-raster-canvas{position:absolute!important;inset:0!important;overflow:hidden!important;direction:ltr!important}
.guardian-live-map .driver-raster-tile{position:absolute!important;width:256px!important;height:256px!important;max-width:none!important;border-radius:0!important;transform:none!important;-webkit-transform:none!important;z-index:1!important}
.guardian-live-map .driver-raster-route,.guardian-live-map .driver-raster-radius,.guardian-live-map .driver-raster-marker,.guardian-live-map .driver-raster-credit{position:absolute!important}
.guardian-route-line polyline,.guardian-route-line line{stroke:#2563eb!important;stroke-width:6!important;opacity:.9!important;filter:drop-shadow(0 2px 3px rgba(37,99,235,.25))}
.guardian-live-fallback{display:grid;place-items:center;align-content:center;text-align:center;padding:30px 24px;color:var(--text)}
.guardian-live-fallback.hidden{display:none}
.guardian-fallback-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(37,99,235,.1);color:#2563eb;margin-bottom:12px}
.guardian-fallback-icon .g-icon{width:29px;height:29px}
.guardian-live-fallback b{font-size:1rem;margin-bottom:6px}
.guardian-live-fallback small{max-width:330px;color:var(--muted);line-height:1.65}
.guardian-live-status{gap:10px;margin-top:13px;padding:12px 14px;border:1px solid var(--border);border-radius:17px;background:color-mix(in srgb,var(--surface) 96%,transparent)}
.guardian-status-dot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.1);flex:0 0 auto}
.guardian-live-status div{display:grid;gap:2px}.guardian-live-status small{color:var(--muted);font-size:.76rem}
.guardian-live-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:16px;direction:rtl}
.guardian-live-timeline>div{position:relative;display:grid;justify-items:center;gap:7px;text-align:center;color:var(--muted);font-size:.68rem;font-weight:750}
.guardian-live-timeline>div:after{content:"";position:absolute;top:6px;inset-inline-start:50%;width:100%;height:2px;background:var(--border);z-index:0}
.guardian-live-timeline>div:last-child:after{display:none}
.guardian-live-timeline i{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;background:var(--surface);border:2px solid var(--border)}
.guardian-live-timeline .done i,.guardian-live-timeline .active i{border-color:#16a34a;background:#16a34a}
.guardian-live-timeline .done:after{background:#16a34a}
.guardian-live-timeline .active span{color:var(--text);font-weight:900}
@media(max-width:560px){
  .guardian-live-track{margin-inline:-2px;padding:14px;border-radius:24px}
  .guardian-live-map,.guardian-live-fallback{height:min(52vh,440px);min-height:330px;border-radius:21px!important}
  .guardian-live-metrics{gap:6px}.guardian-live-metrics>div{padding:10px 5px}
  .guardian-live-title h3{font-size:1.08rem}
  .guardian-live-timeline>div{font-size:.61rem}
}

/* v32.36.3 — deterministic driver raster map (no Leaflet transforms) */
.driver-route-map{
  position:relative!important;
  overflow:hidden!important;
  direction:ltr!important;
  background:#e7ecef!important;
  touch-action:pan-y!important;
}
.driver-route-map .driver-raster-canvas{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  direction:ltr!important;
}
.driver-route-map .driver-raster-tile{
  position:absolute!important;
  width:256px!important;
  height:256px!important;
  min-width:256px!important;
  min-height:256px!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:fill!important;
  transform:none!important;
  -webkit-transform:none!important;
  filter:none!important;
  opacity:1!important;
  z-index:1!important;
  pointer-events:none!important;
}
.driver-raster-route{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:3!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.driver-raster-route polyline,.driver-raster-route line{
  fill:none;
  stroke:#2563eb;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.78;
}
.driver-raster-radius{
  position:absolute!important;
  z-index:4!important;
  border:2px solid rgba(34,197,94,.8)!important;
  border-radius:50%!important;
  background:rgba(34,197,94,.10)!important;
  pointer-events:none!important;
}
.driver-raster-marker{
  position:absolute!important;
  z-index:6!important;
  display:grid!important;
  place-items:center!important;
  transform:none!important;
  -webkit-transform:none!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}
.driver-raster-marker.student{
  border:3px solid #fff!important;
  border-radius:50%!important;
  background:#2563eb!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:950!important;
  box-shadow:0 5px 16px rgba(15,23,42,.28)!important;
}
.driver-raster-marker.student.current{
  background:#16a34a!important;
  box-shadow:0 0 0 6px rgba(34,197,94,.18),0 5px 18px rgba(15,23,42,.28)!important;
}
.driver-raster-marker.bus{
  z-index:8!important;
  border:3px solid #fff!important;
  border-radius:15px!important;
  background:#111827!important;
  color:#fff!important;
  box-shadow:0 7px 20px rgba(15,23,42,.35)!important;
}
.driver-raster-marker.bus .g-icon{width:25px!important;height:25px!important}
.driver-raster-credit{
  position:absolute!important;
  z-index:20!important;
  inset-inline-end:6px!important;
  bottom:5px!important;
  padding:2px 5px!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.82)!important;
  color:#334155!important;
  font:600 9px/1.3 system-ui,sans-serif!important;
  direction:ltr!important;
  pointer-events:none!important;
}

/* v32.41 — Interactive driver map */
.driver-route-map{
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  cursor:grab;
}
.driver-route-map:active{cursor:grabbing}
.driver-raster-marker.student{
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  padding:0!important;
  line-height:1!important;
}
.driver-raster-marker.student.selected{
  box-shadow:0 0 0 7px rgba(37,99,235,.22),0 7px 22px rgba(15,23,42,.32)!important;
}
.driver-raster-marker.student.current.selected{
  box-shadow:0 0 0 7px rgba(22,163,74,.22),0 7px 22px rgba(15,23,42,.32)!important;
}
.driver-raster-marker.bus{pointer-events:none!important}
.driver-raster-controls{
  position:absolute!important;
  z-index:30!important;
  top:12px!important;
  left:12px!important;
  display:grid!important;
  gap:7px!important;
  direction:ltr!important;
}
.driver-raster-controls button{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(15,23,42,.14)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.95)!important;
  color:#0f172a!important;
  box-shadow:0 8px 22px rgba(15,23,42,.14)!important;
  font:900 1.25rem/1 system-ui,sans-serif!important;
  touch-action:manipulation!important;
}
.driver-raster-controls button:last-child{font-size:1.08rem!important}
.driver-raster-follow-note{
  position:absolute!important;
  z-index:29!important;
  top:12px!important;
  left:64px!important;
  max-width:190px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  background:rgba(15,23,42,.86)!important;
  color:#fff!important;
  font-size:.64rem!important;
  font-weight:850!important;
  line-height:1.35!important;
  box-shadow:0 8px 22px rgba(15,23,42,.18)!important;
  pointer-events:none!important;
}
.driver-raster-student-popover{
  position:absolute!important;
  z-index:32!important;
  left:12px!important;
  right:12px!important;
  bottom:12px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 11px!important;
  border:1px solid rgba(15,23,42,.12)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.96)!important;
  color:#0f172a!important;
  box-shadow:0 14px 34px rgba(15,23,42,.22)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  touch-action:manipulation!important;
}
.driver-raster-student-popover>div{display:grid!important;gap:2px!important;min-width:0!important}
.driver-raster-student-popover small{font-size:.61rem!important;color:#64748b!important;font-weight:800!important}
.driver-raster-student-popover b{font-size:.84rem!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.driver-raster-student-popover span{font-size:.64rem!important;color:#64748b!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.driver-raster-popover-close,
.driver-raster-popover-nav{
  border:0!important;
  font:inherit!important;
  touch-action:manipulation!important;
}
.driver-raster-popover-close{
  width:34px!important;height:34px!important;border-radius:11px!important;
  background:#f1f5f9!important;color:#0f172a!important;font-size:1.1rem!important;font-weight:900!important
}
.driver-raster-popover-nav{
  min-height:36px!important;padding:0 10px!important;border-radius:11px!important;
  background:#0f172a!important;color:#fff!important;font-size:.68rem!important;font-weight:900!important;white-space:nowrap!important
}
.driver-raster-credit{
  top:5px!important;
  bottom:auto!important;
}
@media(max-width:520px){
  .driver-raster-controls{top:10px!important;left:10px!important;gap:6px!important}
  .driver-raster-controls button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .driver-raster-follow-note{top:10px!important;left:58px!important;max-width:160px!important;font-size:.6rem!important}
  .driver-raster-student-popover{left:10px!important;right:10px!important;bottom:10px!important;grid-template-columns:auto minmax(0,1fr)!important}
  .driver-raster-popover-nav{grid-column:1/-1!important;width:100%!important}
}

/* v32.36 — Simple Driver Live Trip */
body.driver-live-trip-active{
  overscroll-behavior:none;
  background:var(--bg);
}
body.driver-live-trip-active #appView{
  min-height:100dvh;
  padding-bottom:0!important;
}
body.driver-live-trip-active .topbar,
body.driver-live-trip-active .bottom-nav,
body.driver-live-trip-active #contextBar,
body.driver-live-trip-active #demoModeBanner,
body.driver-live-trip-active #transportPage>.transport-hero,
body.driver-live-trip-active #transportPage>#transportKpis,
body.driver-live-trip-active #transportDriverPanel>.driver-transport-head,
body.driver-live-trip-active #driverTripCards{
  display:none!important;
}
body.driver-live-trip-active .content{
  width:100%;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.driver-live-trip-active #transportPage{
  width:100%;
  max-width:none;
  min-height:100dvh;
  padding:0!important;
  overflow:visible;
}
body.driver-live-trip-active #transportDriverPanel{
  width:min(760px,100%);
  max-width:760px;
  min-height:100dvh;
  margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
  display:grid;
  gap:10px;
}
body.driver-live-trip-active #driverLiveFocus{
  order:1;
  display:grid;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.driver-live-trip-active #driverRouteMapPanel{
  order:2;
  display:grid;
  gap:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body.driver-live-trip-active #driverLiveFooter{order:3}
body.driver-live-trip-active .driver-roster-panel{
  order:4;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.driver-simple-topbar{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  min-height:52px;
}
.driver-simple-topbar>div{
  display:grid;
  justify-items:center;
  gap:1px;
  min-width:0;
  text-align:center;
}
.driver-simple-topbar b{font-size:.88rem}
.driver-simple-topbar small{font-size:.62rem;color:var(--muted)}
.driver-simple-back,
.driver-simple-emergency{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  font:inherit;
  font-size:1.55rem;
  font-weight:900;
  box-shadow:0 6px 18px rgba(15,23,42,.06)
}
.driver-simple-emergency{
  color:#dc2626;
  font-size:1rem;
}
.driver-simple-student{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 10px 28px rgba(15,23,42,.07);
}
.driver-simple-avatar{
  position:relative;
  width:62px;
  height:62px;
  border-radius:19px;
  overflow:visible;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  border:1px solid var(--border);
}
.driver-simple-avatar>.student-avatar-unified,
.driver-simple-avatar>.transport-student-photo{
  width:100%;
  height:100%;
  border-radius:18px;
}
.driver-simple-avatar>.transport-student-photo{object-fit:cover}
.driver-simple-avatar>.g-icon,
.driver-simple-avatar .g-icon{width:28px;height:28px}
.driver-simple-avatar>span:last-child:not(.driver-phase-icon){
  position:absolute;
  inset-inline-end:-5px;
  bottom:-5px;
  min-width:25px;
  height:25px;
  padding-inline:5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#2563eb;
  color:#fff;
  border:3px solid var(--surface);
  font-size:.65rem;
  font-weight:950;
}
.driver-simple-student-copy{min-width:0}
.driver-simple-student-copy small{
  display:block;
  margin-bottom:2px;
  color:var(--muted);
  font-size:.6rem;
  font-weight:850;
}
.driver-simple-student-copy h2{
  margin:0 0 3px;
  font-size:1.05rem;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.driver-simple-student-copy p{
  margin:0;
  color:var(--muted);
  font-size:.68rem;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.driver-simple-live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(22,163,74,.10);
  color:#16a34a;
  border:1px solid rgba(22,163,74,.22);
  font-size:.56rem;
  font-weight:950;
}
.driver-simple-live::before{
  content:"";
  width:6px;height:6px;border-radius:50%;background:#16a34a
}
.driver-simple-distance{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:13px;
  background:var(--surface-2);
  color:var(--muted);
  border:1px solid var(--border);
  font-size:.7rem;
  font-weight:850;
  text-align:center;
}
.driver-simple-distance.is-near{
  background:rgba(22,163,74,.10);
  color:#16a34a;
  border-color:rgba(22,163,74,.24);
}
.driver-simple-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:8px;
}
.driver-simple-action{
  min-height:56px;
  border-radius:17px;
  border:0;
  font:inherit;
  font-size:.82rem;
  font-weight:950;
}
.driver-simple-action.success{background:#16a34a;color:#fff}
.driver-simple-action.danger{
  background:rgba(220,38,38,.08);
  color:#dc2626;
  border:1px solid rgba(220,38,38,.2);
}
.driver-simple-action.is-wide{grid-column:1/-1}
.driver-simple-link{
  grid-column:1/-1;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:.68rem;
  font-weight:850;
}
body.driver-live-trip-active .driver-map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 2px;
}
body.driver-live-trip-active .driver-map-head .eyebrow,
body.driver-live-trip-active #driverMapMeta,
body.driver-live-trip-active #driverLiveStatus,
body.driver-live-trip-active #driverMapToggle,
body.driver-live-trip-active [data-driver-locate]{
  display:none!important;
}
body.driver-live-trip-active .driver-map-head h3{
  margin:0;
  font-size:.94rem;
}
body.driver-live-trip-active .driver-map-actions{
  width:auto;
  display:block;
}
body.driver-live-trip-active #driverNavigateCurrent{
  display:inline-flex!important;
  min-height:36px;
  padding:0 11px;
  border-radius:12px;
  font-size:.63rem;
}
body.driver-live-trip-active #driverNavigateCurrent.hidden{display:none!important}
body.driver-live-trip-active .driver-map-body{
  display:block!important;
}
body.driver-live-trip-active .driver-route-map{
  width:100%;
  height:min(54dvh,480px);
  min-height:340px;
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  background:#e9eef2;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}
body.driver-live-trip-active .driver-map-note{display:none!important}
.driver-route-map.driver-map-tile-error{
  position:relative;
}
.driver-route-map.driver-map-tile-error::after{
  content:"جاري إعادة تحميل الخريطة…";
  position:absolute;
  inset:auto 12px 12px 12px;
  z-index:650;
  padding:9px 11px;
  border-radius:12px;
  background:rgba(17,24,39,.78);
  color:#fff;
  text-align:center;
  font-size:.66rem;
  font-weight:850;
  pointer-events:none;
}
.driver-live-footer{
  position:sticky;
  bottom:max(8px,env(safe-area-inset-bottom));
  z-index:500;
  padding-top:2px;
}
.driver-live-footer.hidden{display:none!important}
.driver-simple-final{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:18px;
  background:#111;
  color:#fff;
  font:inherit;
  font-size:.86rem;
  font-weight:950;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
[data-theme="dark"] .driver-simple-final{background:#f8fafc;color:#0f172a}
body.driver-live-trip-active .driver-roster-details{
  border:0;
  background:transparent;
}
body.driver-live-trip-active .driver-roster-details>summary{
  min-height:46px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
body.driver-live-trip-active .driver-roster-details>summary .eyebrow{display:none}
body.driver-live-trip-active .driver-roster-details>summary h3{font-size:.72rem}
body.driver-live-trip-active .driver-roster-details>summary small{display:none}
body.driver-live-trip-active .driver-roster-details>summary>span{
  border:0;
  background:transparent;
  font-size:.6rem;
}
body.driver-live-trip-active .driver-roster-list{
  margin-top:8px;
  max-height:42dvh;
  overflow:auto;
  padding-bottom:8px;
}
@media(max-width:420px){
  body.driver-live-trip-active #transportDriverPanel{
    padding-inline:9px;
  }
  .driver-simple-student{padding:11px;gap:9px}
  .driver-simple-avatar{width:56px;height:56px;border-radius:17px}
  .driver-simple-avatar>.student-avatar-unified,
  .driver-simple-avatar>.transport-student-photo{border-radius:16px}
  .driver-simple-student-copy h2{font-size:.96rem}
  .driver-simple-student-copy p{font-size:.63rem}
  .driver-simple-live{padding-inline:6px;font-size:.52rem}
  .driver-simple-actions{grid-template-columns:minmax(0,1fr) minmax(86px,.42fr)}
  body.driver-live-trip-active .driver-route-map{
    height:50dvh;
    min-height:320px;
  }
}


/* v32.42 — native interactive driver map (Leaflet, iPhone safe) */
body.transport-driver-mode .driver-route-map.leaflet-container{
  position:relative!important;
  overflow:hidden!important;
  direction:ltr!important;
  isolation:isolate!important;
  background:#e7ecef!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
}
body.transport-driver-mode .driver-route-map.leaflet-container *,
body.transport-driver-mode .driver-route-map.leaflet-container *::before,
body.transport-driver-mode .driver-route-map.leaflet-container *::after{
  -webkit-touch-callout:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
body.transport-driver-mode .driver-route-map .leaflet-control-zoom{
  margin-top:12px!important;
  margin-left:12px!important;
  border:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
  box-shadow:0 8px 24px rgba(15,23,42,.16)!important;
}
body.transport-driver-mode .driver-route-map .leaflet-control-zoom a{
  width:42px!important;
  height:42px!important;
  line-height:42px!important;
  background:rgba(255,255,255,.96)!important;
  color:#0f172a!important;
  border-color:rgba(15,23,42,.10)!important;
  font-size:1.35rem!important;
  touch-action:manipulation!important;
}
body.transport-driver-mode .driver-route-map .leaflet-top.leaflet-left{
  display:grid!important;
  gap:8px!important;
}
.driver-leaflet-recenter{
  width:42px!important;
  height:42px!important;
  margin-left:12px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(15,23,42,.10)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.96)!important;
  color:#0f172a!important;
  box-shadow:0 8px 24px rgba(15,23,42,.16)!important;
  font:900 1.15rem/1 system-ui,sans-serif!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
.driver-map-student-icon,
.driver-map-bus-icon,
.driver-map-origin-icon{
  -webkit-touch-callout:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.driver-map-student-icon>span{
  width:34px!important;
  height:34px!important;
  background:#2563eb!important;
  color:#fff!important;
  border:3px solid #fff!important;
  box-shadow:0 6px 18px rgba(37,99,235,.30)!important;
}
.driver-map-student-icon.is-current>span{
  width:42px!important;
  height:42px!important;
  background:#16a34a!important;
  color:#fff!important;
  border:4px solid #fff!important;
  box-shadow:0 0 0 6px rgba(22,163,74,.18),0 7px 20px rgba(15,23,42,.28)!important;
}
.driver-map-bus-icon>span{border-radius:15px!important}
.driver-leaflet-student-popup{
  display:grid;
  gap:4px;
  min-width:175px;
  text-align:right;
  color:#0f172a;
}
.driver-leaflet-student-popup small{font-size:.68rem;color:#64748b;font-weight:800}
.driver-leaflet-student-popup b{font-size:.9rem}
.driver-leaflet-student-popup span{font-size:.7rem;color:#64748b;line-height:1.45}
body.transport-driver-mode .driver-route-map .leaflet-popup-content-wrapper{
  border-radius:16px!important;
  box-shadow:0 16px 42px rgba(15,23,42,.22)!important;
}
body.transport-driver-mode .driver-route-map .leaflet-popup-content{margin:12px 14px!important}
body.transport-driver-mode .driver-route-map .leaflet-control-attribution{
  font-size:8px!important;
  background:rgba(255,255,255,.76)!important;
}
@media(max-width:520px){
  body.transport-driver-mode .driver-route-map .leaflet-control-zoom a,
  .driver-leaflet-recenter{
    width:40px!important;
    height:40px!important;
    line-height:40px!important;
  }
  body.transport-driver-mode .driver-route-map .leaflet-control-zoom{
    margin-top:10px!important;
    margin-left:10px!important;
  }
  .driver-leaflet-recenter{margin-left:10px!important}
}


/* v32.42.2 — isolate Leaflet from global UI motion on iPhone */
body.transport-driver-mode .driver-route-map.leaflet-container{
  touch-action:none!important;
  overscroll-behavior:contain!important;
}
body.transport-driver-mode .driver-route-map.leaflet-container .leaflet-map-pane,
body.transport-driver-mode .driver-route-map.leaflet-container .leaflet-tile-pane,
body.transport-driver-mode .driver-route-map.leaflet-container .leaflet-tile-container{
  animation:none!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.transport-driver-mode .driver-route-map.leaflet-container .leaflet-tile{
  animation:none!important;
  max-width:none!important;
  max-height:none!important;
}
@media(max-width:640px){
  body.transport-driver-mode .driver-route-map.leaflet-container{
    -webkit-tap-highlight-color:transparent!important;
  }
}

/* v32.43 fixed student home transport location */
.passenger-home-card{margin-top:14px;padding:16px;border:1px solid var(--mp-line,#e5eaf2);border-radius:20px;background:linear-gradient(145deg,var(--mp-surface,#fff),var(--mp-surface-soft,#f7f9fc));box-shadow:0 10px 28px rgba(25,40,65,.055)}
.passenger-home-head{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center}.passenger-home-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#edf6ff;color:#2f6df6;font-size:1.35rem;font-weight:900}
.passenger-home-head h3{margin:2px 0 1px}.passenger-home-head small{color:var(--mp-muted,#738096);font-size:.66rem;line-height:1.6}.passenger-home-badge{padding:5px 8px;border-radius:999px;background:#fff3e1;color:#bb7410;font-size:.6rem;font-weight:900;white-space:nowrap}
.passenger-home-badge[data-state="home"]{background:#e8faf2;color:#168b5d}.passenger-home-badge[data-state="today"]{background:#f0edff;color:#6b54db}.passenger-home-student-row{margin-top:12px;max-width:360px}.passenger-home-student-row label{display:grid;gap:4px}.passenger-home-student-row span{font-size:.62rem;color:var(--mp-muted,#738096);font-weight:800}
.passenger-home-preview{margin-top:12px;overflow:hidden;border:1px solid var(--mp-line,#e5eaf2);border-radius:16px;background:var(--mp-surface,#fff)}.passenger-home-preview-map{height:190px;width:100%;background:#eef2f7}.passenger-home-preview-meta{padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.passenger-home-preview-meta>div{display:grid;gap:2px}.passenger-home-preview-meta small,.passenger-home-preview-meta span{font-size:.58rem;color:var(--mp-muted,#738096)}.passenger-home-preview-meta b{font-size:.74rem}.passenger-home-note{margin:0 12px 12px;padding:8px 9px;border-radius:10px;background:var(--mp-surface-soft,#f7f9fc);color:var(--mp-muted,#738096);font-size:.64rem}
.passenger-home-empty{margin-top:12px;padding:15px;border:1px dashed var(--mp-line,#e5eaf2);border-radius:15px;background:var(--mp-surface-soft,#f7f9fc);display:grid;justify-items:start;gap:5px}.passenger-home-empty b{font-size:.76rem}.passenger-home-empty span{font-size:.64rem;color:var(--mp-muted,#738096);line-height:1.6}.passenger-home-empty .btn{margin-top:5px}
.passenger-home-dialog{width:min(94vw,620px)!important}.passenger-home-dialog-card{padding:16px!important;display:grid;gap:12px}.passenger-home-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.passenger-home-dialog-head h3{margin:2px 0}.passenger-home-dialog-head small{display:block;color:var(--mp-muted,#738096);font-size:.64rem;line-height:1.55}
.passenger-home-dialog-student{display:grid;gap:4px}.passenger-home-dialog-student>span,.passenger-home-dialog-card>label>span{font-size:.62rem;color:var(--mp-muted,#738096);font-weight:800}.passenger-home-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}.passenger-home-mode label{padding:10px;border:1px solid var(--mp-line,#e5eaf2);border-radius:13px;background:var(--mp-surface-soft,#f7f9fc);display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.passenger-home-mode label:has(input:checked){border-color:#7b6cff;background:#f2efff;box-shadow:0 0 0 3px rgba(116,87,246,.07)}.passenger-home-mode span{display:grid;gap:1px}.passenger-home-mode b{font-size:.68rem}.passenger-home-mode small{font-size:.55rem;color:var(--mp-muted,#738096)}
.passenger-home-map-shell{position:relative;height:360px;border-radius:17px;overflow:hidden;border:1px solid var(--mp-line,#e5eaf2);background:#eef2f7}.passenger-home-picker-map{position:absolute;inset:0;z-index:1}.passenger-home-center-pin{position:absolute;left:50%;top:50%;z-index:650;transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 7px 10px rgba(25,40,65,.2))}
.passenger-home-center-pin::before{content:"";width:42px;height:42px;border-radius:50% 50% 50% 0;background:linear-gradient(145deg,#765cff,#2f6df6);display:block;transform:rotate(-45deg);border:4px solid #fff}.passenger-home-center-pin span{position:absolute;left:50%;top:18px;width:11px;height:11px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.passenger-home-locate{position:absolute;z-index:700;inset-inline-start:12px;bottom:12px;min-height:38px;padding:0 12px;border:1px solid var(--mp-line,#e5eaf2);border-radius:11px;background:rgba(255,255,255,.94);color:#2f6df6;font-weight:900;box-shadow:0 8px 20px rgba(25,40,65,.13)}
.passenger-home-coordinates{display:grid;grid-template-columns:1fr 1fr;gap:8px}.passenger-home-coordinates>span{padding:8px 10px;border:1px solid var(--mp-line,#e5eaf2);border-radius:11px;background:var(--mp-surface-soft,#f7f9fc);display:grid;gap:1px}.passenger-home-coordinates small{font-size:.54rem;color:var(--mp-muted,#738096)}.passenger-home-coordinates b{font-size:.64rem}.passenger-home-warning{padding:8px 10px;border-radius:10px;background:#fff3df;color:#a86d10;font-size:.62rem;font-weight:800}
.passenger-home-copy{padding:10px;border:1px solid var(--mp-line,#e5eaf2);border-radius:12px;background:var(--mp-surface-soft,#f7f9fc);display:flex!important;gap:9px!important;align-items:flex-start}.passenger-home-copy span{display:grid;gap:2px}.passenger-home-copy b{font-size:.66rem}.passenger-home-copy small{font-size:.55rem;color:var(--mp-muted,#738096)}.passenger-home-current-trip-note{padding:8px 10px;border-radius:10px;background:#edf6ff;color:#3267aa;font-size:.6rem;line-height:1.6}
html[data-theme="dark"] .passenger-home-mode label:has(input:checked){background:#211e42}html[data-theme="dark"] .passenger-home-locate{background:rgba(17,27,43,.94)}
@media(max-width:699px){.passenger-home-card{padding:12px;border-radius:16px}.passenger-home-head{grid-template-columns:38px 1fr;align-items:start}.passenger-home-icon{width:38px;height:38px;border-radius:11px}.passenger-home-badge{grid-column:1/-1;justify-self:start}.passenger-home-preview-map{height:160px}.passenger-home-map-shell{height:min(52vh,390px)}.passenger-home-mode{grid-template-columns:1fr}.passenger-home-coordinates{grid-template-columns:1fr}.passenger-home-preview-meta{align-items:flex-start;flex-direction:column}.passenger-home-preview-meta .btn{width:100%}}


/* v32.43.2 — home location iPhone/mobile rebuild */
#passengerHomeLocationDialog{
  box-sizing:border-box!important;
  border:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:var(--mp-surface,#fff)!important;
}
#passengerHomeLocationDialog::backdrop{
  background:rgba(15,23,42,.56)!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
#passengerHomeLocationDialog .passenger-home-dialog-card{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:0!important;
  box-shadow:none!important;
  background:var(--mp-surface,#fff)!important;
  overflow-x:hidden!important;
}
#passengerHomeLocationDialog .passenger-home-dialog-head{
  position:relative!important;
  padding-inline-end:48px!important;
}
#passengerHomeLocationDialog #closePassengerHomeLocation{
  all:unset!important;
  box-sizing:border-box!important;
  position:absolute!important;
  inset-inline-end:0!important;
  top:0!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--mp-line,#e5eaf2)!important;
  border-radius:13px!important;
  background:var(--mp-surface-soft,#f7f9fc)!important;
  color:var(--mp-text,#111827)!important;
  font-size:1.35rem!important;
  font-weight:700!important;
  line-height:1!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
#passengerHomeLocationDialog .passenger-home-dialog-student,
#passengerHomeLocationDialog .passenger-home-dialog-card>label{
  width:100%!important;
  min-width:0!important;
}
#passengerHomeLocationDialog .passenger-home-dialog-student select,
#passengerHomeLocationDialog #passengerHomePickupNote{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
}
#passengerHomeLocationDialog .passenger-home-mode{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
#passengerHomeLocationDialog .passenger-home-mode label{
  position:relative!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:64px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  overflow:hidden!important;
}
#passengerHomeLocationDialog .passenger-home-mode label::before{
  content:""!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  border:2px solid #9aa5b5!important;
  background:var(--mp-surface,#fff)!important;
  box-shadow:inset 0 0 0 4px var(--mp-surface,#fff)!important;
}
#passengerHomeLocationDialog .passenger-home-mode label:has(input:checked)::before{
  border-color:#5d55f5!important;
  background:#5d55f5!important;
}
#passengerHomeLocationDialog .passenger-home-mode input[type="radio"]{
  position:absolute!important;
  inline-size:1px!important;
  block-size:1px!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  pointer-events:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#passengerHomeLocationDialog .passenger-home-mode span{
  min-width:0!important;
  display:grid!important;
  gap:2px!important;
  text-align:start!important;
}
#passengerHomeLocationDialog .passenger-home-mode b{
  font-size:.79rem!important;
  line-height:1.35!important;
  white-space:normal!important;
}
#passengerHomeLocationDialog .passenger-home-mode small{
  font-size:.61rem!important;
  line-height:1.45!important;
  white-space:normal!important;
}
#passengerHomeLocationDialog .passenger-home-map-shell{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:contain!important;
  background:#e6ecef!important;
}
#passengerHomeLocationDialog .passenger-home-picker-map.leaflet-container,
.passenger-home-preview-map.leaflet-container{
  direction:ltr!important;
  isolation:isolate!important;
  background:#e6ecef!important;
  touch-action:none!important;
  overscroll-behavior:contain!important;
}
#passengerHomeLocationDialog .passenger-home-picker-map .leaflet-map-pane,
.passenger-home-preview-map .leaflet-map-pane{
  direction:ltr!important;
}
#passengerHomeLocationDialog .passenger-home-picker-map img.leaflet-tile,
.passenger-home-preview-map img.leaflet-tile{
  width:256px!important;
  height:256px!important;
  min-width:256px!important;
  min-height:256px!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  object-fit:fill!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  opacity:1!important;
  image-rendering:auto!important;
  animation:none!important;
}
#passengerHomeLocationDialog .passenger-home-picker-map .leaflet-tile-container,
.passenger-home-preview-map .leaflet-tile-container{
  transform-origin:0 0!important;
  animation:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
#passengerHomeLocationDialog .passenger-home-picker-map .leaflet-pane,
.passenger-home-preview-map .leaflet-pane{
  max-width:none!important;
}
#passengerHomeLocationDialog .passenger-home-locate{
  inset-inline-start:50%!important;
  transform:translateX(-50%)!important;
  bottom:12px!important;
  white-space:nowrap!important;
  max-width:calc(100% - 90px)!important;
}
[dir="rtl"] #passengerHomeLocationDialog .passenger-home-locate{
  transform:translateX(50%)!important;
}
#passengerHomeLocationDialog .passenger-home-coordinates{
  grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)!important;
}
#passengerHomeLocationDialog .passenger-home-coordinates>span{
  min-width:0!important;
}
#passengerHomeLocationDialog .passenger-home-coordinates b{
  min-width:0!important;
  overflow-wrap:anywhere!important;
  font-variant-numeric:tabular-nums!important;
}
#passengerHomeLocationDialog .passenger-home-copy input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  flex:0 0 18px!important;
  margin:1px 0 0!important;
  padding:0!important;
}
#passengerHomeLocationDialog .modal-actions{
  display:grid!important;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr)!important;
  gap:9px!important;
  margin:0!important;
  padding-top:4px!important;
}
#passengerHomeLocationDialog .modal-actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
}
html[data-theme="dark"] #passengerHomeLocationDialog{
  background:var(--mp-surface,#111b2b)!important;
}
html[data-theme="dark"] #passengerHomeLocationDialog .passenger-home-mode label::before{
  background:var(--mp-surface,#111b2b)!important;
  box-shadow:inset 0 0 0 4px var(--mp-surface,#111b2b)!important;
}
html[data-theme="dark"] #passengerHomeLocationDialog .passenger-home-mode label:has(input:checked)::before{
  background:#776fff!important;
  border-color:#776fff!important;
}

@media(max-width:699px){
  #passengerHomeLocationDialog[open]{
    display:block!important;
    position:fixed!important;
    top:calc(8px + env(safe-area-inset-top))!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    left:10px!important;
    inset-inline:10px!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    border-radius:24px!important;
  }
  #passengerHomeLocationDialog .passenger-home-dialog-card{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    padding:14px!important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
  }
  #passengerHomeLocationDialog .passenger-home-dialog-head{
    flex:0 0 auto!important;
  }
  #passengerHomeLocationDialog .passenger-home-dialog-head h3{
    font-size:1.35rem!important;
  }
  #passengerHomeLocationDialog .passenger-home-dialog-head small{
    max-width:29rem!important;
    font-size:.69rem!important;
  }
  #passengerHomeLocationDialog .passenger-home-mode{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #passengerHomeLocationDialog .passenger-home-mode label{
    min-height:62px!important;
    padding:9px 10px!important;
    gap:7px!important;
  }
  #passengerHomeLocationDialog .passenger-home-mode b{
    font-size:.75rem!important;
  }
  #passengerHomeLocationDialog .passenger-home-mode small{
    font-size:.57rem!important;
  }
  #passengerHomeLocationDialog .passenger-home-map-shell{
    flex:1 0 250px!important;
    height:clamp(250px,38dvh,350px)!important;
    min-height:250px!important;
    max-height:350px!important;
    border-radius:16px!important;
  }
  #passengerHomeLocationDialog .passenger-home-coordinates{
    grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)!important;
  }
  #passengerHomeLocationDialog .passenger-home-current-trip-note{
    font-size:.61rem!important;
    padding:7px 9px!important;
  }
  #passengerHomeLocationDialog .modal-actions{
    position:sticky!important;
    bottom:calc(-14px - env(safe-area-inset-bottom))!important;
    z-index:900!important;
    margin-inline:-14px!important;
    margin-bottom:calc(-14px - env(safe-area-inset-bottom))!important;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top,var(--mp-surface,#fff) 78%,color-mix(in srgb,var(--mp-surface,#fff) 92%,transparent))!important;
    border-top:1px solid var(--mp-line,#e5eaf2)!important;
    box-shadow:0 -8px 22px rgba(15,23,42,.06)!important;
  }
}
@media(max-width:380px){
  #passengerHomeLocationDialog .passenger-home-mode{
    grid-template-columns:1fr!important;
  }
  #passengerHomeLocationDialog .passenger-home-map-shell{
    height:280px!important;
    min-height:240px!important;
  }
}

/* v32.43.2 driver/passenger transport isolation */
body.transport-driver-mode #guardianTransportPanel,
body.transport-driver-mode #transportGuardianIntro,
body.transport-driver-mode #passengerHomeLocationCard,
body.transport-driver-mode #guardianTransportLivePanel,
body.transport-driver-mode .transport-guardian-forms{
  display:none!important;
}
body.transport-driver-mode #passengerHomeLocationDialog[open]{
  display:none!important;
}


/* v32.43.6 driver route switching */
.driver-current-route-line{stroke:#2563eb!important;stroke-width:8!important;stroke-opacity:1!important;filter:drop-shadow(0 1px 2px rgba(37,99,235,.32));}
.driver-current-route-fallback{stroke-dasharray:12 8!important;}
.driver-student-card.is-route-selectable{cursor:pointer;border-color:rgba(37,99,235,.28);background:linear-gradient(180deg,var(--surface-2),rgba(37,99,235,.035));}
.driver-student-card.is-route-selectable:active{transform:scale(.992);}
.driver-route-select-hint{display:block!important;color:#2563eb!important;font-weight:850;margin-top:2px;}
.driver-route-switch-confirm{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:22px;background:rgba(15,23,42,.48);backdrop-filter:blur(7px);}
.driver-route-switch-confirm.hidden{display:none!important;}
.driver-route-switch-card{width:min(100%,390px);background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:22px;box-shadow:0 24px 70px rgba(15,23,42,.28);text-align:center;direction:rtl;}
.driver-route-switch-icon{width:58px;height:58px;border-radius:19px;margin:0 auto 12px;display:grid;place-items:center;background:rgba(37,99,235,.1);color:#2563eb;font-size:1.9rem;font-weight:900;}
.driver-route-switch-card h3{font-size:1.05rem;margin:0 0 8px;}
.driver-route-switch-card p{font-size:.78rem;line-height:1.8;color:var(--text);margin:0 0 16px;}
.driver-route-switch-card>small{display:block;color:var(--muted);font-size:.62rem;line-height:1.7;margin-top:12px;}
.driver-route-switch-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.driver-route-switch-actions button{min-height:48px;border:0;border-radius:15px;font-weight:900;}
.driver-route-switch-approve{background:#16a34a;color:#fff;}
.driver-route-switch-cancel{background:rgba(239,68,68,.08);color:#dc2626;border:1px solid rgba(239,68,68,.22)!important;}
.driver-route-switch-actions button:disabled{opacity:.55;cursor:wait;}

/* Accountant finance identity and A4 two-copy receipt */
.student-account-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;font-size:10px;font-weight:800;border:1px solid var(--border);border-radius:999px;padding:3px 8px;margin-top:4px;color:var(--muted);background:var(--surface-2)}
.receipt-split-preview{min-width:620px;max-width:100%;min-height:420px;background:#fff;border:1px solid #d0d5dd;box-shadow:0 12px 28px rgba(15,23,42,.12)}
.receipt-split-preview>.receipt-sheet{min-height:420px!important;padding:18px!important;font-size:10px!important;box-shadow:none!important;border-radius:0!important}
.receipt-split-preview>.receipt-sheet:first-of-type{border-right:1px dashed #777}
.receipt-split-preview .receipt-info-row{padding:5px 0!important}
.receipt-split-preview .receipt-amount-box{margin:9px 0!important;padding:9px!important}
.receipt-split-preview .receipt-balance{margin-top:8px!important}
.receipt-split-preview .receipt-sign-row{margin-top:16px!important}
#accountantStudentDialog .modal-card{width:min(94vw,560px)}
#accountantStudentStatus{padding:10px;border-radius:10px}
@media(max-width:620px){.receipt-split-preview{min-width:580px}.receipt-split-preview>.receipt-sheet{padding:12px!important}}

.student-credentials-card{width:min(94vw,520px)}
.student-credentials-card textarea{direction:ltr;text-align:left;font-family:ui-monospace,monospace;white-space:pre-wrap;user-select:all}

/* Dedicated accountant home workspace */
.accountant-dashboard{display:grid;gap:16px;margin:14px 0 22px}
.accountant-dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:clamp(20px,4vw,32px);border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));box-shadow:0 14px 35px rgba(15,23,42,.06)}
.accountant-dashboard-hero h2{font-size:clamp(22px,3vw,30px);margin:6px 0}
.accountant-dashboard-hero p:last-child{margin:0;color:var(--muted);max-width:620px;line-height:1.8}
.accountant-dashboard-mark{display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;border-radius:22px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));background:color-mix(in srgb,var(--primary) 10%,var(--surface));font-size:22px;font-weight:1000;color:var(--primary)}
.accountant-dashboard-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.accountant-action-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:right;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);min-height:170px;cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.accountant-action-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
.accountant-action-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);font-size:22px;font-weight:900}
.accountant-action-card b{font-size:16px}.accountant-action-card small{color:var(--muted);line-height:1.6}.accountant-action-link{margin-top:auto;font-size:12px;font-weight:900;color:var(--primary)}
.accountant-dashboard-note{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);line-height:1.7}
.accountant-dashboard-note span{font-weight:900;color:var(--primary)}.accountant-dashboard-note p{margin:0}
@media(max-width:720px){.accountant-dashboard-actions{grid-template-columns:1fr}.accountant-action-card{min-height:0}.accountant-dashboard-mark{flex-basis:58px;width:58px;height:58px;border-radius:18px}.accountant-dashboard-hero{align-items:flex-start}}


/* Al Nakhlah Private Schools receipt ledger */
.accountant-receipt-ledger{margin-top:18px;padding:16px;border:1px solid var(--border-color,rgba(120,130,150,.24));border-radius:18px;background:var(--surface,rgba(120,130,150,.04))}
.receipt-ledger-results{display:grid;gap:8px;margin-top:12px}
.receipt-ledger-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border-color,rgba(120,130,150,.2));border-radius:12px;background:var(--card-bg,rgba(120,130,150,.04))}
.receipt-ledger-row>div{display:grid;gap:5px;min-width:0}
.receipt-ledger-row small{font-size:12px;opacity:.72}
.receipt-ledger-row .btn{flex-shrink:0}
.receipt-sign-box{display:block;height:18mm;border:1px solid #333;margin:3mm auto 0;max-width:42mm;background:#fff}
.receipt-sign-row span{flex:1}
@media(max-width:520px){.receipt-ledger-row{align-items:flex-start;flex-direction:column}.receipt-ledger-row .btn{width:100%}}

/* Paired receipt preview: A4 landscape sheet with two portrait receipts side by side. Scoped to this template only. */
.payment-receipt-preview[data-template="a4_pair"]{display:block;overflow:auto}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:446px;grid-auto-flow:column;gap:4px;width:669px;height:446px;direction:rtl;position:relative;background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.16);break-inside:avoid;page-break-inside:avoid}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed #555;transform:translateX(-50%);pointer-events:none}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page>.receipt-pair-recipient{grid-column:1;grid-row:1;min-width:0}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page>.receipt-pair-admin{grid-column:2;grid-row:1;min-width:0}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page>.receipt-sheet{box-sizing:border-box;width:100%!important;height:446px!important;min-width:0;min-height:0;max-width:none;margin:0;padding:8px;border:4px double #3a2923;border-radius:12px;outline:1px solid #3a2923;outline-offset:-3px;position:relative;overflow:hidden;direction:rtl;font-size:10px;box-shadow:none;break-before:auto!important;page-break-before:auto!important;break-after:auto!important;page-break-after:auto!important;break-inside:avoid!important;page-break-inside:avoid!important}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-head{padding-bottom:4px;margin-bottom:4px}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-logo{max-height:40px}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-amount-box{padding:8px;margin:8px 0}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-info-row{padding:5px 0;font-size:10px}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-balance{margin-top:6px}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-sign-row{margin-top:10px}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-sign-box{height:34px;margin-top:6px}
.payment-receipt-preview[data-template="a4_pair"] .receipt-pair-page .receipt-footer{margin-top:8px}


/* Desktop fix: fit payment receipt dialog to viewport; scope changes to this dialog only. */
.payment-receipt-dialog{width:min(96vw,800px)!important;max-width:96vw!important;box-sizing:border-box}
.payment-receipt-dialog .payment-receipt-modal-card{width:100%!important;max-width:760px!important;box-sizing:border-box;margin-inline:auto}
@media(min-width:721px){.payment-receipt-dialog .receipt-control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-receipt-dialog .receipt-toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-receipt-dialog .payment-receipt-preview{max-width:100%;box-sizing:border-box}}
@media(max-width:720px){.payment-receipt-dialog{width:96vw!important;max-width:96vw!important}.payment-receipt-dialog .payment-receipt-modal-card{width:100%!important;max-height:92dvh!important;padding:14px}.payment-receipt-dialog .receipt-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-receipt-dialog .receipt-control-grid .receipt-payer-field{grid-column:1/-1}}


/* Al Nakhlah Private Schools brand — long Arabic wordmark stays readable on phones. */
.public-wordmark,.manhj-wordmark,.topbar-brand>div{min-width:0}
.public-wordmark strong{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.3;letter-spacing:normal;overflow-wrap:anywhere}
.public-wordmark span{font-size:.75rem;letter-spacing:.07em;white-space:normal;overflow-wrap:anywhere}
.public-brand-mini{letter-spacing:normal}
html[data-language="en"] .public-wordmark span{font-size:clamp(.95rem,2.5vw,1.35rem);letter-spacing:.025em;line-height:1.4}
#loginView .manhj-wordmark h1{font-size:clamp(1.38rem,3vw,1.8rem);line-height:1.4}
#loginView .manhj-wordmark small{overflow-wrap:anywhere;letter-spacing:normal}
@media(max-width:700px){.public-brand-lockup{align-items:flex-start}.public-wordmark strong{font-size:1.45rem}.public-wordmark span{font-size:.64rem;letter-spacing:.025em}}


/* Official Al Nakhlah roundel: preserve the complete palm emblem at every screen size. */
.public-logo-halo img,.public-brand-mini img,.manhj-logo-image,
.topbar-brand-logo,.about-logo img{border-radius:50%!important;object-fit:contain!important}
.public-logo-halo img{width:min(78px,100%)}
@media(max-width:700px){
  .public-nav .public-brand-mini{min-width:0;letter-spacing:0;font-size:.67rem;gap:7px}
  .public-nav .public-brand-mini span{display:inline!important;max-width:135px;white-space:normal;line-height:1.35;overflow-wrap:anywhere}
  .public-nav-actions{gap:5px}
}

/* Teacher announcements is a sixth primary action; keep every destination visible on small iPhones. */
body[data-role="teacher"] .bottom-nav{gap:3px;overflow-x:hidden}
body[data-role="teacher"] .bottom-nav>.nav-item:not(.hidden){min-width:0;flex:1 1 0;padding-inline:2px}
body[data-role="teacher"] .bottom-nav>.nav-item small{max-width:100%;white-space:nowrap;font-size:clamp(.52rem,2.2vw,.62rem)}


/* Al Nakhlah — notification drawer clarity on Android and narrow phones.
   Scope to the bell popover; do not change actual notification data or roles. */
#notificationPopover > .notification-popover-card{
  background:var(--surface-solid,#ffffff)!important;
  color:var(--text)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  isolation:isolate;
}
#notificationPopover .smart-notification{
  overflow-wrap:anywhere;
  line-height:1.55;
}
#notificationPopover .smart-notification small{
  line-height:1.65;
  overflow-wrap:anywhere;
}
#notificationPopover .notification-actions{
  flex-wrap:wrap;
}
@media(max-width:700px){
  /* Anchor the drawer to the full header, not the tiny bell button.
     This avoids clipping the 340px popover against narrow screens. */
  #appView .topbar:has(#notificationPopover[open]){
    z-index:120!important;
    overflow:visible!important;
  }
  #appView .topbar:has(#notificationPopover[open]) .topbar-actions{
    position:static!important;
  }
  #notificationPopover{
    position:static!important;
  }
  #notificationPopover > .notification-popover-card{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    /* In RTL the logical inset aliases override physical sides when declared
       later; keep both safe-area bounds authoritative in Android WebView. */
    inset-inline-start:12px!important;
    inset-inline-end:12px!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:min(68dvh,calc(100dvh - 175px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    margin:0!important;
    padding:14px!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    animation:none!important;
    border-radius:18px;
    box-shadow:0 20px 54px rgba(10,25,52,.25)!important;
  }
  #notificationPopover .section-head.compact-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:9px;
    align-items:stretch;
    margin:0 0 11px;
    min-width:0;
  }
  #notificationPopover .section-head.compact-head > div{
    min-width:0;
  }
  #notificationPopover .section-head.compact-head > .btn{
    width:100%;
    text-align:center;
    max-width:100%;
    white-space:normal;
    flex-shrink:0;
  }
  #notificationPopover .notification-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  #notificationPopover .notification-actions > .btn{
    min-width:0;
    width:100%;
    overflow-wrap:anywhere;
    font-size:.73rem;
    line-height:1.45;
    white-space:normal;
  }
}


/* Android native WebView: lightweight compositing for reliable low-end phones.
   Change only cosmetic effects; leave tap targets, permissions and all pages intact. */
html.nakhlah-android-lightweight #appView :is(
  .topbar,.bottom-nav,.header-popover-card,.notification-center-card,
  .context-card,.modal-card,.quick-add-menu,.toast,.hero,.record-card,
  .stat-card,.quick-card,.section-card
){
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html.nakhlah-android-lightweight #appView :is(.topbar,.bottom-nav,.header-popover-card,.notification-center-card){
  background:var(--surface-solid,#ffffff)!important;
}
html.nakhlah-android-lightweight #appView :is(.topbar,.bottom-nav){
  box-shadow:0 1px 6px rgba(15,23,42,.07)!important;
}
html.nakhlah-android-lightweight #appView .page.active{
  will-change:auto!important;
}


/* Android fast-scroll compositor v2 (25 Oct 2026).
   Avoid full-page blur/repainting and skip layout/paint for offscreen records.
   Scope to the signed school Android WebView; desktop/iOS remain unchanged. */
html.nakhlah-android-lightweight,
html.nakhlah-android-lightweight body,
html.nakhlah-android-lightweight #appView{
  scroll-behavior:auto!important;
}
html.nakhlah-android-lightweight #appView *,
html.nakhlah-android-lightweight #appView *::before,
html.nakhlah-android-lightweight #appView *::after,
html.nakhlah-android-lightweight dialog::backdrop{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html.nakhlah-android-lightweight #appView :is(
  .record-card,.stat-card,.quick-card,.section-card,.settings-card,
  .student-row,.manager-attendance-card,.context-card,.hero,
  .topbar,.bottom-nav,.role-more-card,.header-popover-card
){
  box-shadow:none!important;
  filter:none!important;
}
html.nakhlah-android-lightweight #appView :is(
  .record-card,.student-row,.manager-attendance-card
){
  content-visibility:auto;
  contain-intrinsic-size:auto 112px;
}
html.nakhlah-android-lightweight #appView :is(
  .bottom-nav .nav-item,.quick-card,.daily-action,.role-more-card
){
  touch-action:manipulation;
}


/* Android WebView: repair Arabic native date placeholders (RTL reversed segments).
   Force the date control only to numeric, LTR day/month/year. Keep the whole
   application and non-date inputs in Arabic RTL. */
html.nakhlah-android-lightweight input[type="date"],
html.nakhlah-android-lightweight input[type="date"]::-webkit-datetime-edit,
html.nakhlah-android-lightweight input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  direction:ltr!important;
  text-align:left!important;
  unicode-bidi:isolate!important;
}
/* Keep the class/day date box compact instead of stretching to the headline. */
@media (max-width:700px){
  html.nakhlah-android-lightweight #lessonPage .lesson-page-head{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:12px!important;
  }
  html.nakhlah-android-lightweight #lessonPage .lesson-page-head>div{
    flex:1 1 100%;
    min-width:0;
  }
  html.nakhlah-android-lightweight #lessonPage #lessonWorkDate{
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    width:min(100%,190px)!important;
    min-width:0!important;
    max-width:190px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    align-self:flex-start!important;
  }
  html.nakhlah-android-lightweight #lessonPage .teacher-lesson-filters input[type="date"]{
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
}
/* The popover itself is static on narrow phones. Anchor the red counter to
   the actual bell summary, never the entire sticky header. */
html.nakhlah-android-lightweight #notificationPopover>summary{
  position:relative!important;
  overflow:visible!important;
}
html.nakhlah-android-lightweight #notificationPopover>summary #notificationUnreadBadge{
  position:absolute!important;
  top:-4px!important;
  right:-4px!important;
  left:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  z-index:8!important;
  transform:none!important;
  animation:none!important;
}

/* Teacher workflow v1 — focused academic UI; no financial metadata in teacher cards. */
body[data-role="teacher"] .teacher-student-quick-toggle{font-weight:800}
body[data-role="teacher"] .student-compact-card .teacher-student-quick-panel{
  grid-column:1/-1;width:100%;padding:11px 12px;border:1px solid var(--border);
  background:var(--surface-2);border-radius:14px;display:grid;gap:10px
}
body[data-role="teacher"] .teacher-student-quick-panel.hidden{display:none!important}
.teacher-student-quick-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.teacher-student-quick-stats>span{display:grid;gap:3px;padding:9px 5px;text-align:center;
  border-radius:11px;border:1px solid var(--border);background:var(--surface)}
.teacher-student-quick-stats small{font-size:.68rem;color:var(--muted)}
.teacher-student-quick-stats strong{font-size:1.02rem;color:var(--text)}
.teacher-activity-ledger{display:grid;gap:11px}
.teacher-activity-ledger .section-head{margin-bottom:0}
.teacher-activity-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.teacher-activity-filters label{display:grid;gap:4px;min-width:0;font-size:.74rem;font-weight:700;color:var(--muted)}
.teacher-activity-filters :is(input,select){box-sizing:border-box;min-width:0;width:100%;min-height:43px;padding:9px 10px;
  color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px}
.teacher-activity-search{grid-column:1/-1}
.teacher-activity-list{display:grid;gap:9px}
.teacher-activity-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 10px;
  padding:12px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}
.teacher-activity-entry-copy{min-width:0;display:grid;gap:4px}
.teacher-activity-entry-copy b{font-size:.87rem;overflow-wrap:anywhere}
.teacher-activity-entry-copy small{color:var(--muted);font-size:.72rem;line-height:1.6;overflow-wrap:anywhere}
.teacher-activity-status{font-size:.68rem;font-weight:800;padding:5px 9px;border-radius:99px;
  color:var(--primary);background:var(--surface-2);white-space:nowrap}
.teacher-activity-entry>button{grid-column:1/-1;justify-self:start}
#awGradeRoster .aw-grade-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin:10px 0;padding:9px 11px;border-radius:12px;background:var(--surface-2,#f1f5f9)}
#awGradeRoster .aw-grade-tools strong{font-size:.78rem}
#awGradeRoster .aw-grade-save-status{flex-basis:100%;font-size:.72rem;color:var(--muted,#64748b);padding:4px 0}
#awGradeRoster .aw-grade-row.aw-ungraded{border-inline-start:3px solid #d97706;background:color-mix(in srgb,#f59e0b 5%,var(--surface,#fff))}
#awGradeRoster .aw-grade-row.aw-filtered{display:none!important}
@media(max-width:520px){
 .teacher-activity-entry{grid-template-columns:1fr}
 .teacher-activity-status{justify-self:start}
 .teacher-student-quick-stats{gap:4px}
 .teacher-student-quick-stats>span{padding:7px 3px}
}

body[data-role="teacher"] .teacher-student-quick-academic{display:grid;gap:5px}
body[data-role="teacher"] .teacher-student-quick-academic p{margin:0;font-size:.75rem;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}


/* Teacher quick roll call: absentees are the only required manual action. */
.attendance-quick-panel{display:grid;gap:15px;padding:15px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.attendance-quick-panel.hidden{display:none!important}
.attendance-quick-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.attendance-quick-head>div{display:grid;gap:4px;min-width:0}
.attendance-quick-head h3{margin:0;font-size:1.12rem}
.attendance-quick-head small{font-size:.77rem;line-height:1.8;color:var(--muted)}
.attendance-quick-pill{display:inline-flex;border-radius:99px;padding:8px 12px;color:#b91c1c;background:rgba(239,68,68,.09);font-size:.83rem;font-weight:850}
.attendance-quick-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.attendance-quick-summary>span{display:grid;gap:4px;text-align:center;padding:10px 4px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}
.attendance-quick-summary strong{font-size:1.12rem;font-variant-numeric:tabular-nums}
.attendance-quick-summary small{font-size:.7rem;line-height:1.4;color:var(--muted)}
.attendance-quick-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,.43fr);gap:10px}
.attendance-quick-toolbar label{min-width:0;display:grid;gap:5px;font-weight:750;font-size:.72rem;color:var(--muted)}
.attendance-quick-toolbar :is(input,select){width:100%;box-sizing:border-box;min-width:0;min-height:47px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--input-bg,var(--surface));color:var(--text);font-size:.85rem}
.attendance-quick-roster{display:grid;gap:7px;max-height:58vh;overflow-y:auto;overscroll-behavior:contain}
.attendance-quick-student{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:13px;padding:10px 11px;background:var(--surface);min-width:0}
.attendance-quick-student.is-absent{border-color:rgba(220,38,38,.45);background:rgba(220,38,38,.045)}
.attendance-quick-student-info{min-width:0;display:grid;gap:3px}
.attendance-quick-student-info b{font-size:.84rem;overflow-wrap:anywhere}
.attendance-quick-student-info small{color:var(--muted);font-size:.7rem}
.attendance-quick-toggle{min-height:44px;flex:0 0 auto;border:1px solid var(--border);border-radius:12px;padding:8px 12px;font:inherit;font-size:.78rem;font-weight:850;background:var(--surface-2);color:var(--text);cursor:pointer}
.attendance-quick-toggle.is-absent{color:#b91c1c;border-color:#f87171;background:rgba(239,68,68,.08)}
.attendance-quick-toggle:disabled{opacity:.58;cursor:not-allowed}
.attendance-quick-empty{text-align:center;padding:18px 12px;color:var(--muted);font-size:.83rem}
.attendance-quick-footer{border-top:1px solid var(--border);padding-top:13px;display:grid;gap:9px}
.attendance-quick-footer p{font-size:.76rem;line-height:1.7;margin:0}
.attendance-quick-footer button{width:100%;min-height:48px}
@media(max-width:520px){
 .attendance-quick-toolbar{grid-template-columns:minmax(0,1fr) 112px;gap:7px}
 .attendance-quick-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
 .attendance-quick-roster{max-height:min(56vh,500px)}
 .attendance-quick-student{padding:9px;gap:7px}
 .attendance-quick-toggle{padding:7px 9px;font-size:.73rem}
}

.attendance-quick-special{position:relative;flex:0 0 auto}
.attendance-quick-special>summary{list-style:none;cursor:pointer;min-width:38px;min-height:43px;border:1px solid var(--border);border-radius:11px;display:grid;place-items:center;font-size:1.2rem;color:var(--text);background:var(--surface-2)}
.attendance-quick-special>summary::-webkit-details-marker{display:none}
.attendance-quick-special>div{position:absolute;z-index:9;top:calc(100% + 5px);inset-inline-end:0;width:110px;padding:5px;display:grid;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.attendance-quick-special>div button{min-height:35px;border:0;border-radius:8px;padding:6px 8px;background:transparent;color:var(--text);font:inherit;font-size:.75rem;text-align:start;cursor:pointer}
.attendance-quick-special>div button[aria-pressed="true"]{font-weight:800;background:var(--surface-2)}
.attendance-quick-special>div button:disabled{opacity:.5;cursor:not-allowed}