/* Shop billing — "school copy" identity: copy-cover navy, pencil yellow, notebook margin red, ruled paper for the bill.
   Mobile-first: one view at a time, bottom tab bar, sticky save bar; tablets show today's bills beside the form. */
:root{
  --bg:#f1f3f8; --panel:#ffffff; --ink:#15213d; --muted:#586480; --line:#d8deea;
  --navy:#1b2f66; --navy-ink:#ffffff; --pencil:#f4b400; --margin:#d4483b;
  --accent:#1b2f66; --accent-ink:#ffffff; --accent-soft:#e4e9f6; --mark:#f4b400; --mark-soft:#fdf3d6;
  --danger:#b3261e; --danger-soft:#fbe8e6; --good:#1d7a47; --good-soft:#e3f4ea;
  --paper:#fffef8; --paper-ink:#1b2440; --paper-red:#c23b2f; --paper-line:#cfd6e4; --paper-rule:#e3eaf6;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Nirmala UI",sans-serif;
  --f-num:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  --f-hi:"Noto Sans Devanagari","Nirmala UI","Mangal",var(--f-body);
  --r:10px; --tab-h:62px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0d1220; --panel:#151c2e; --ink:#e6eaf3; --muted:#98a3bb; --line:#2a3349;
  --navy:#16244d; --navy-ink:#ffffff; --pencil:#f4c02e; --margin:#e0685c;
  --accent:#8fb0f5; --accent-ink:#0d1220; --accent-soft:#1c2a47; --mark:#f4c02e; --mark-soft:#3a2f14;
  --danger:#f08a80; --danger-soft:#3b1d1b; --good:#6fd29b; --good-soft:#15301f; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--f-body);min-height:100%;padding-top:env(safe-area-inset-top,0px)}
.splash{display:grid;place-items:center;min-height:80vh;color:var(--muted)}

.top{background:var(--navy);color:var(--navy-ink);border-bottom:3px solid var(--pencil);padding-inline:16px;padding-block:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:34px;height:34px;border-radius:8px;flex:none}
.brand > div{min-width:0}
.top h1{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .sub{font-size:12px;color:var(--navy-ink);opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.net{font-size:12px;font-weight:700;border-radius:999px;padding:5px 10px;white-space:nowrap;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;gap:6px}
.net::before{content:"";width:8px;height:8px;border-radius:50%;background:#5fd394}
.net.off::before{background:var(--pencil)}
.net.err{background:#fff;color:var(--danger);border-color:#fff}
.net.err::before{background:var(--danger)}
main{max-width:1100px;margin:0 auto;padding-inline:16px;padding-block:14px calc(var(--tab-h) + 28px + env(safe-area-inset-bottom,0px))}
.view{display:grid;gap:14px}
.notice{padding:10px 14px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:14px}
.notice.warn{background:var(--mark-soft);border-color:var(--mark)}
.notice.bad{background:var(--danger-soft);border-color:var(--danger)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;min-width:0;display:grid;gap:10px}
h2{font-size:18px;font-weight:700;margin:0}
h3{font-size:15px;font-weight:700;margin:0}
.head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.muted{color:var(--muted)} .small{font-size:13px}
form{display:grid;gap:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
input,select,textarea{font:16px var(--f-body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;width:100%;min-width:0;min-height:46px}
input[type=number]{font-family:var(--f-num);font-variant-numeric:tabular-nums}
input[readonly]{font-family:var(--f-num);background:var(--accent-soft);border-style:dashed}
textarea{resize:vertical;min-height:60px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 12px;margin:0;display:grid;gap:10px;min-width:0;background:var(--panel)}
legend{font-size:15px;font-weight:700;padding:0 6px;color:var(--ink)}
.hi{font-family:var(--f-hi);font-weight:400;color:var(--muted);margin-left:6px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;opacity:0;inset:0;margin:0;min-height:0;width:100%;cursor:pointer}
.opt span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);background:var(--bg);user-select:none}
.opt input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.classes .opt span{min-width:54px}
.toggle{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);font-weight:600;min-height:40px}
.toggle input{width:22px;height:22px;min-height:0;accent-color:var(--accent)}
.inline{display:grid;grid-template-columns:1fr auto;gap:8px}
.savebar{position:sticky;bottom:calc(var(--tab-h) + 8px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 10px 10px 16px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.savebar .lbl{font-size:12px;opacity:.8;display:block}
.savebar b{font:500 22px/1.1 var(--f-num)}
.savebar button{background:var(--mark);border-color:var(--mark);color:#1b1400;font-size:16px;min-height:48px;padding:0 22px}
button,.btn{font:600 15px var(--f-body);border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.danger{color:var(--danger);border-color:var(--danger)}
button.danger.armed{background:var(--danger);color:var(--panel)}
button.ghost{background:transparent}
button.sm,.btn.sm{min-height:36px;padding:6px 12px;font-size:14px}
button:disabled{opacity:.5;cursor:not-allowed}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.msg{font-size:14px;min-height:1.2em}
.msg.err{color:var(--danger)} .msg.ok{color:var(--good)}
.hint{font-size:13px;color:var(--muted);font-weight:400;margin:0}

.list{display:grid;gap:8px}
.bill{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-align:left;width:100%;font-weight:400;min-height:0}
.bill .no{font:500 13px var(--f-num);color:var(--muted)}
.bill .nm{font-weight:700;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill .meta{font-size:13px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill .amt{font:500 17px var(--f-num);grid-row:1/span 2;grid-column:2;text-align:right}
.bill.cancel{opacity:.6}.bill.cancel .amt{text-decoration:line-through}
.bill.pending{border-style:dashed;border-color:var(--mark)}
.tag{display:inline-block;font:700 11px var(--f-body);padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px}
.tag.p{background:var(--mark-soft);border:1px solid var(--mark);color:var(--ink)}
.tag.c{background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger)}
.tag.e{background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink)}
.empty{padding:24px 10px;text-align:center;color:var(--muted);font-size:15px}
.daynav{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center}
.daysum{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.daysum b{color:var(--ink);font-family:var(--f-num);font-weight:500}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.tile .l{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.tile .v{font:500 22px/1.2 var(--f-num);font-variant-numeric:tabular-nums;margin-top:2px}
.tile.hero{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tile.hero .l{color:var(--accent-ink);opacity:.85}
.scroll{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:var(--bg)}
.n{text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none}
tr.zero td{color:var(--muted)}
.ranges{display:flex;gap:8px;flex-wrap:wrap}
.ranges button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}

.rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 12px;min-height:48px}
.rows li .who{min-width:0}
.rows li .who small{display:block;color:var(--muted);font-size:12px}
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.set{border:1px solid var(--line);border-radius:8px;padding:8px;display:grid;gap:6px}
.set b{font-size:14px}
.set .row2{gap:6px}
.log{font-size:13px;display:grid;gap:6px;max-height:420px;overflow:auto}
.log div{border-bottom:1px solid var(--line);padding-bottom:6px}

.login{max-width:400px;margin:0 auto;padding-inline:16px;padding-block:8vh 40px;display:grid;gap:16px}
.login .mast{display:grid;justify-items:center;text-align:center;gap:8px}
.login .mast img{width:72px;height:72px;border-radius:18px;box-shadow:0 6px 18px rgba(27,47,102,.25)}
.login h1{font-size:24px;font-weight:800;margin:0;color:var(--ink);text-wrap:balance}
.login .rule{height:3px;width:56px;background:var(--pencil);border-radius:2px}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--panel);border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar button{border:none;border-radius:0;background:transparent;min-height:var(--tab-h);display:grid;place-items:center;align-content:center;gap:2px;font-size:12px;color:var(--muted);padding:6px 4px}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-selected="true"]{color:var(--accent)}
.tabbar button[aria-selected="true"] svg{stroke-width:2.3}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 86px + env(safe-area-inset-bottom,0px));z-index:8;background:var(--good);color:var(--panel);border-radius:10px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 28px rgba(0,0,0,.3);width:max-content;max-width:calc(100vw - 32px);font-weight:600}
.toast.warn{background:var(--mark);color:#1b1400}
.toast button{background:var(--panel);color:var(--ink);border:none;min-height:36px;padding:6px 12px}

dialog{border:none;padding:0;background:transparent;max-width:min(520px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:auto}
dialog::backdrop{background:rgba(10,14,25,.6)}
.sheet{background:var(--panel);color:var(--ink);border-radius:12px;padding:16px;display:grid;gap:12px}
/* The bill looks like a page from a school copy: ruled lines and a red margin. */
.slip{background-color:var(--paper);background-image:repeating-linear-gradient(to bottom,transparent 0 27px,var(--paper-rule) 27px 28px);color:var(--paper-ink);border-radius:10px;padding:0 18px 14px 34px;display:grid;gap:10px;position:relative;overflow:hidden;border-top:6px solid var(--navy)}
.slip::before{content:"";position:absolute;top:0;bottom:0;left:22px;width:2px;background:var(--paper-red);opacity:.55}
.slip .memo{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--paper-red);padding-top:12px}
.slip .memo span:last-child{font-family:var(--f-hi);letter-spacing:0;font-size:13px}
.slip h3{font-size:22px;font-weight:800;text-align:center;margin:0;text-wrap:balance;color:var(--navy)}
.slip .addr{text-align:center;font-size:13px;color:#56607a;margin-top:-6px}
.slip .m{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;font-size:14px}
.slip .m b{font-family:var(--f-num);font-weight:500}
.slip th,.slip td{border-bottom:1px solid var(--paper-line);background:transparent;color:var(--paper-ink);white-space:normal}
.slip th{color:var(--paper-red)}
.slip td.n{white-space:nowrap}
.slip .it{display:block;font-size:12px;color:#5a6178}
.slip tfoot td{border-top:2px solid var(--paper-ink);font-size:17px}
.slip .note{font-family:var(--f-hi);font-size:18px;font-weight:800;line-height:1.35;color:var(--paper-red);text-align:center;border:2px solid var(--paper-red);border-radius:8px;padding:8px 10px;background:#fff5f3;text-wrap:balance}
.slip .audit{font-size:12px;color:#5a6178;text-align:center}
.slip .void{border:2px solid var(--paper-red);color:var(--paper-red);text-align:center;font-weight:700;border-radius:6px;padding:4px}
.slip .pend{border:2px dashed #b07a00;color:#7a5400;text-align:center;font-weight:700;border-radius:6px;padding:4px;font-size:14px}
.slip button{background:#fff;color:var(--paper-ink);border-color:var(--paper-line)}
.slip button.primary{background:#1f4fa8;border-color:#1f4fa8;color:#fff}
.slip button.danger{color:#b3261e;border-color:#b3261e}
.slip button.danger.armed{background:#b3261e;color:#fff}
.slip input{background:#fff;color:var(--paper-ink);border-color:var(--paper-line)}
.slip .msg.err{color:#b3261e}
.side{display:none}

@media (min-width:820px){
  .newgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
  .side{display:grid;gap:10px;position:sticky;top:76px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
}
@media (min-width:1100px){.tabbar{max-width:640px;left:50%;transform:translateX(-50%);border:1px solid var(--line);border-bottom:none;border-radius:14px 14px 0 0}}
@media (max-width:380px){.row2{grid-template-columns:1fr}.slip .m{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media print{
  body{background:#fff;padding:0}
  body > *:not(dialog), .top, .tabbar, .toast, main{display:none!important}
  dialog{position:static;max-width:none;max-height:none;overflow:visible}
  dialog::backdrop{display:none}
  .slip{box-shadow:none;padding:0;background:#fff}
  .slip .btns,.slip .msg,.slip .noprint{display:none!important}
}