:root{
  --ink:#1C2536; --ink-2:#4A5568; --ink-3:#6B7686;
  --paper:#F3F6F4; --surface:#FFFFFF; --line:#D5DCD8; --line-2:#E6EBE8;
  --green:#0B6E4F; --green-2:#0A5C42; --green-wash:#E5F1EC;
  --red:#A8322D; --red-wash:#FBEDEC; --amber:#8A5A00; --amber-wash:#FDF3DF; --blue:#2C5C8F; --blue-wash:#E8F0F8;
  --r:8px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;color:var(--ink);background:var(--paper)}
a{color:var(--green)}
a:hover{color:var(--green-2)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{line-height:1.25;margin:0}
h2{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}

/* Shell */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:linear-gradient(to right,var(--surface) 247px,var(--line) 247px,var(--line) 248px,var(--paper) 248px)}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 16px}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px}
.brand strong{display:block;font-size:16px}
.brand small{display:block;color:var(--ink-3);font-size:12.5px}
.passbook{display:block;text-decoration:none;color:var(--ink);margin:0 0 16px;padding:14px 14px 12px;border:1px solid #C9DDD3;border-radius:var(--r);
  background:repeating-linear-gradient(to bottom,#F7FBF9 0,#F7FBF9 23px,#DCEBE3 23px,#DCEBE3 24px);}
.passbook:hover{border-color:var(--green)}
.pb-label{display:block;font-size:12.5px;color:var(--ink-2)}
.pb-amount{display:block;font-size:24px;font-weight:700;color:var(--green-2);line-height:1.4}
.pb-foot{display:block;font-size:12.5px;color:var(--ink-3)}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:6px;color:var(--ink-2);text-decoration:none;font-weight:500}
.side nav a:hover{background:var(--paper);color:var(--ink)}
.side nav a.on{background:var(--green-wash);color:var(--green-2)}
.count{background:var(--amber);color:#fff;font-size:12px;border-radius:10px;padding:0 7px;line-height:19px}
.side-foot{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-2)}
.main{min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:18px 28px 0}
.topbar h1{font-size:1.4rem;font-weight:600}
.menu-btn{display:none}
.content{padding:18px 28px 40px;max-width:1180px}

/* Panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.panel-head h2{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.stat span{display:block;font-size:13px;color:var(--ink-2)}
.stat strong{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.right{text-align:right}

/* Tables: bordered columns, numbers right-aligned, widths controlled per column */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.t{border-collapse:collapse;width:100%;font-size:14px}
table.t th,table.t td{border:1px solid var(--line-2);padding:8px 10px;text-align:left;vertical-align:top}
table.t thead th{background:#F7F9F8;font-weight:600;color:var(--ink-2);white-space:nowrap;border-top:0}
table.t tr>*:first-child{border-left:0} table.t tr>*:last-child{border-right:0}
table.t tbody tr:last-child td{border-bottom:0}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t td.c,table.t th.c{text-align:center;white-space:nowrap}
table.t td.nw{white-space:nowrap}
table.t tbody tr:hover td{background:#FAFCFB}
table.t tfoot td{font-weight:600;background:#F7F9F8}
.w-no{width:150px}.w-date{width:110px}.w-amt{width:120px}.w-st{width:110px}.w-act{width:90px}.w-sm{width:80px}
.empty{padding:28px;text-align:center;color:var(--ink-2)}

/* Detail list */
dl.kv{display:grid;grid-template-columns:170px 1fr;gap:6px 16px;margin:0}
dl.kv dt{color:var(--ink-2)} dl.kv dd{margin:0}

/* Badges, alerts */
.badge{display:inline-block;font-size:12.5px;font-weight:500;padding:1px 9px;border-radius:12px;white-space:nowrap}
.badge-ok{background:var(--green-wash);color:var(--green-2)}
.badge-bad{background:var(--red-wash);color:var(--red)}
.badge-warn{background:var(--amber-wash);color:var(--amber)}
.badge-info{background:var(--blue-wash);color:var(--blue)}
.badge-muted{background:#EEF1F0;color:var(--ink-2)}
.alert{padding:10px 14px;border-radius:var(--r);margin-bottom:14px;border:1px solid}
.alert-ok{background:var(--green-wash);border-color:#B7D8C9;color:var(--green-2)}
.alert-bad{background:var(--red-wash);border-color:#EBC3C1;color:var(--red)}
.alert-warn{background:var(--amber-wash);border-color:#EED8A8;color:var(--amber)}
.alert-info{background:var(--blue-wash);border-color:#C3D5EA;color:var(--blue)}

/* Forms */
.form{max-width:640px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:500;font-size:14px;margin-bottom:4px}
.req{color:var(--red)}
.hint{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=date],input[type=file],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #C3CCC7;border-radius:6px;padding:8px 10px}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:2px solid var(--green-wash);outline-offset:0}
input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.check{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.check input{margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:500;border:1px solid var(--green);background:var(--green);color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--green-2);color:#fff}
.btn-ghost{background:#fff;color:var(--green)}
.btn-ghost:hover{background:var(--green-wash);color:var(--green-2)}
.btn-danger{background:#fff;color:var(--red);border-color:#DDB0AD}
.btn-danger:hover{background:var(--red-wash);color:var(--red)}
.btn-sm{padding:4px 10px;font-size:13.5px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{margin:0}
.filters select,.filters input{width:auto;min-width:150px}

/* Sum box for top-up */
.sum{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;background:#FAFCFB;max-width:360px}
.sum div{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.sum .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:700}
.qr{width:180px;height:180px;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.qr img,.qr canvas{width:100%!important;height:auto!important}

/* Auth */
.auth{min-height:100vh;display:grid;place-content:center;padding:24px}
.auth-card{width:min(400px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}
.auth-card h1{font-size:1.35rem;margin-bottom:4px}
.auth-card p.lead{color:var(--ink-2);margin:0 0 18px}
.auth-card .btn{width:100%;justify-content:center}
.auth-foot{text-align:center;font-size:13px;color:var(--ink-3);margin-top:16px}
.code-input{letter-spacing:.4em;text-align:center;font-size:20px!important}

/* Receipt (print) */
.receipt{background:#fff;max-width:780px;margin:24px auto;border:1px solid var(--line);padding:32px}
.receipt h1{font-size:1.25rem}
.receipt table.t td,.receipt table.t th{border:1px solid #CFD6D2}
@media print{ .noprint{display:none!important} body{background:#fff} .receipt{border:0;margin:0;padding:0} }

/* Mobile */
@media (max-width:900px){
  .shell{grid-template-columns:1fr;background:var(--paper)}
  .side{position:fixed;inset:0 auto 0 0;width:260px;transform:translateX(-100%);transition:transform .2s;z-index:20;box-shadow:0 0 0 100vmax rgba(0,0,0,0)}
  body.nav-open .side{transform:none;box-shadow:0 0 0 100vmax rgba(20,30,25,.35)}
  .menu-btn{display:inline-block;font:inherit;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 10px}
  .topbar,.content{padding-left:16px;padding-right:16px}
  .grid-2,.form-row{grid-template-columns:1fr}
  dl.kv{grid-template-columns:1fr} dl.kv dt{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}