:root{
  --ink:#16213A; --ink-2:#1D2A46;
  --surface:#F3F5F8; --card:#FFFFFF;
  --border:#E3E6EC; --border-strong:#CBD1DC;
  --text:#1B2233; --text-muted:#68708A;
  --accent:#0E7C7B; --accent-dark:#0A5F5E; --accent-soft:#E3F3F1;
  --positive:#1F9D55; --positive-soft:#E7F7ED;
  --negative:#C4432B; --negative-soft:#FBEAE6;
  --warning:#B8860B; --warning-soft:#FBF3DC;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(22,33,58,.06);
  --shadow-md:0 10px 30px rgba(22,33,58,.12);
  --font-display:-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);background:var(--surface);color:var(--text);font-size:14px;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;}
a{color:var(--accent-dark);}
.app{display:flex;min-height:100vh;}
.sidebar{width:224px;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:20px 14px;position:fixed;top:0;left:0;bottom:0;}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 20px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:14px;}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0;}
.brand-text .name{font-weight:600;font-size:.95rem;}
.brand-text .sub{font-size:.68rem;color:rgba(255,255,255,.5);}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:rgba(255,255,255,.72);font-size:.86rem;font-weight:500;text-decoration:none;margin-bottom:2px;}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:var(--accent);color:#fff;}
.sidebar-foot{margin-top:auto;font-size:.68rem;color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.1);padding-top:12px;}
.main{margin-left:224px;min-height:100vh;width:calc(100% - 224px);}
.topbar{padding:20px 30px 0;display:flex;justify-content:space-between;align-items:flex-start;}
.page-title{font-size:1.28rem;}
.page-sub{color:var(--text-muted);font-size:.82rem;margin-top:3px;}
.content{padding:18px 30px 60px;max-width:1280px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.card-title{font-size:.98rem;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-weight:600;}
.stat-value{font-family:var(--font-mono);font-size:1.4rem;font-weight:600;}
.stat-foot{font-size:.74rem;color:var(--text-muted);margin-top:6px;}
.btn{font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--border-strong);}
.btn-danger{background:var(--negative-soft);color:var(--negative);}
.btn-sm{padding:5px 10px;font-size:.76rem;}
table{width:100%;border-collapse:collapse;font-size:.83rem;}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;}
thead th{text-align:left;padding:10px 13px;background:#F8F9FB;color:var(--text-muted);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td{padding:9px 13px;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.total-row{background:#F8F9FB;font-weight:700;}
.num{font-family:var(--font-mono);text-align:right;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:600;}
.badge-green{background:var(--positive-soft);color:var(--positive);}
.badge-red{background:var(--negative-soft);color:var(--negative);}
.badge-amber{background:var(--warning-soft);color:var(--warning);}
.badge-grey{background:#EEF0F4;color:var(--text-muted);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.form-group label{font-size:.77rem;font-weight:600;}
input,select,textarea{font-family:inherit;font-size:.86rem;padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft);}
.error-text{color:var(--negative);font-size:.74rem;}
input.invalid{border-color:var(--negative);}
.flash{padding:11px 15px;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:14px;}
.flash-success{background:var(--positive-soft);color:var(--positive);}
.flash-error{background:var(--negative-soft);color:var(--negative);}
.flash-info{background:var(--accent-soft);color:var(--accent-dark);}
.section-note{background:var(--accent-soft);border:1px solid #CDE9E6;color:var(--accent-dark);padding:10px 14px;border-radius:var(--radius-sm);font-size:.79rem;margin-bottom:14px;}
.section-note.warn{background:var(--warning-soft);border-color:#EEDBA0;color:#8A6404;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);}
.login-card{background:#fff;border-radius:16px;padding:36px;width:380px;box-shadow:var(--shadow-md);}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px;}
@media print{
  .sidebar,.topbar,.no-print{display:none !important;}
  .main{margin-left:0 !important;width:100% !important;}
  .content{padding:0 !important;}
  body{background:#fff;}
}
.divider{height:1px;background:var(--border);margin:16px 0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-group.span-2{grid-column:1/-1;}
.text-muted{color:var(--text-muted);}
.text-pos{color:var(--positive);font-weight:600;}
.text-neg{color:var(--negative);font-weight:600;}
.avatar-circle{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;}
.editable-cell, .status-toggle{cursor:pointer;}
.editable-cell:hover, .status-toggle:hover{background:var(--accent-soft);}
.editable-cell input{padding:4px 6px;font-size:.83rem;}
tr.row-paid td{background:var(--positive-soft) !important;}
.sticky-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);padding:12px 16px;margin:0 -20px -20px;border-radius:0 0 var(--radius) var(--radius);z-index:5;}
.editable-cell-attendance{cursor:pointer;}
.editable-cell-attendance:hover{background:var(--accent-soft);}
.editable-cell-attendance input{padding:4px 6px;font-size:.83rem;}