*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:14.5px;line-height:1.55;color:var(--text);
     background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:600;line-height:1.3}
::selection{background:var(--red-200)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--gray-400);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
*{scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}

.flex{display:flex}.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.min-w-0{min-width:0}
.muted{color:var(--text-2)}
.small{font-size:12.5px}
.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.center{text-align:center}

.page{padding:24px 28px 48px;max-width:var(--content-max);margin:0 auto}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px}
.page-head h1{font-size:clamp(18px,4vw,22px);font-weight:700;letter-spacing:.2px}
.page-head .sub{color:var(--text-2);font-size:13px;margin-top:2px}
.head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.section-title{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;flex-wrap:wrap}
.section-title h2{font-size:clamp(14px,3vw,16px);font-weight:600;display:inline-flex;
  align-items:center;gap:8px}
.center-empty{text-align:center;padding:48px 20px;color:var(--text-3)}

/* ── Responsive ── */
@media (max-width:1024px){
  .page{padding:20px 20px 48px}
}
@media (max-width:768px){
  body{font-size:14px}
  .page{padding:16px 14px 60px}
  .page-head{margin-bottom:14px}
  .page-head .sub{font-size:12px}
  .head-actions{width:100%}
  .head-actions .btn{flex:1;min-width:120px}
}
.pin-mask{-webkit-text-security:disc}
.page-loading{padding:8px 0;color:var(--text-2)}
/* Shared page hierarchy: the same spacing, filters and readable tables on every screen. */
body:not([data-page="login"]) .page {padding-top:28px}
.page-head {align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border)}
.page-head h1 {line-height:1.4;letter-spacing:0}
.page-head .sub {max-width:760px;line-height:1.8;margin-top:6px}
.head-actions {gap:8px}
.card {border-color:var(--border);box-shadow:var(--shadow-xs)}
.card-pad {padding:22px}
.section-title h2 {line-height:1.6}
.filter-bar {align-items:flex-end;gap:12px;padding-bottom:16px!important;border-bottom:1px solid var(--border)}
.filter-bar .field {margin:0;min-width:150px}
.filter-bar .select {min-height:40px;max-width:100%}
.table-wrap {overscroll-behavior-inline:contain}
.tbl th {background:var(--gray-50);font-weight:600;white-space:nowrap;padding-top:14px;padding-bottom:14px}
.tbl td {vertical-align:middle;line-height:1.65;padding-top:14px;padding-bottom:14px}
.tbl tbody tr:hover {background:var(--surface-2)}
.tbl .cell-main {font-weight:500}
.settings-grid {align-items:start;gap:20px}
.settings-grid .card {min-width:0}
.field>span,.field>label {line-height:1.6}
.admin-record-actions {display:grid;gap:12px;margin-top:20px}
.attendance-card-actions {display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border);margin-top:12px}
.report-pagination {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px;border-top:1px solid var(--border)}
.data-tabs {display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.data-tabs .chip {min-height:42px;padding:10px 16px}
.data-section-fold {margin-top:24px;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:18px}
.data-section-fold>summary {cursor:pointer;font-weight:600;line-height:1.7}
.data-section-fold>summary small {display:block;color:var(--text-2);font-weight:400;margin:4px 0 0 18px}
.data-key-value {display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;font-size:13px;align-items:start}
.data-key-value>span {color:var(--text-2)}
.data-key-value>b {font-weight:500;overflow-wrap:anywhere}
[hidden] {display:none!important}
@media(max-width:768px){
  body:not([data-page="login"]) .page {padding-top:16px}
  .page-head {gap:12px;padding-bottom:14px}
  .card-pad {padding:16px}
  .filter-bar {gap:10px;padding:14px!important}
  .filter-bar>.field,.filter-bar>.select {flex:1 1 145px;min-width:0}
  .filter-bar>.chips {flex-basis:100%}
  .filter-bar .chip {flex:1}
  .settings-grid {grid-template-columns:minmax(0,1fr)}
}
.page-loading h1{font-size:24px;color:var(--text);margin-bottom:6px}
.page-loading p{font-size:13px;margin-bottom:22px}
.loading-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.loading-stats>div,.loading-panel{background:var(--surface,#fff);border:1px solid var(--border,#e0e4eb);border-radius:14px;padding:22px}
.loading-stats>div{height:112px}
.loading-panel{min-height:270px}
.loading-panel>div{height:24px;border-radius:6px;background:var(--surface-2,#eef0f4);margin:18px 0}
.loading-panel>div:first-child{width:55%}
.loading-brand{padding:30px 22px;color:white;font-size:19px;font-weight:600}
.loading-nav{padding:10px 22px;display:grid;gap:24px}
.loading-nav i{display:block;height:17px;width:75%;background:rgba(255,255,255,.15);border-radius:5px}
@media(max-width:600px){.loading-stats{gap:8px}.loading-stats>div{height:85px;padding:12px}.loading-panel{padding:14px}}
.help-request { padding:16px 0; border-bottom:1px solid #e1e5ee; }
.help-request:last-child { border-bottom:0; }
.help-form label { display:block; margin:16px 0 8px; }
.help-form input,.help-form select,.help-form textarea { display:block; width:100%; margin-top:6px; border:1px solid var(--gray-300); border-radius:8px; padding:10px; background:var(--surface); font-size:16px; }
.help-form select[size] option { padding:10px; }
.help-form textarea { resize:vertical; }
.help-request p { margin:8px 0; overflow-wrap:anywhere; }
#attendance-help details summary { cursor:pointer; color:#a8141a; }
#attendance-help .row-actions { flex-wrap:wrap; gap:10px; }