:root{--p:#1565c0;--onp:#fff;--pc:#d8e2ff;--onpc:#001a41;--bg:#f4f6fc;--sf:#fff;--sf2:#e8ecf5;--tx:#191c20;--tx2:#43474e;--ol:#73777f;--err:#ba1a1a;--ok:#146c2e;--r:16px}
@media(prefers-color-scheme:dark){:root{--p:#aac7ff;--onp:#002f65;--pc:#00458f;--onpc:#d8e2ff;--bg:#111318;--sf:#1a1c22;--sf2:#262a32;--tx:#e2e2e9;--tx2:#c3c6cf;--ol:#8d9199;--err:#ffb4ab;--ok:#7edc92}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.5 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:96px;-webkit-text-size-adjust:100%}
a{color:var(--p);text-decoration:none}
small{color:var(--tx2)}
.ic{width:24px;height:24px;fill:currentColor;flex:none}
.center{text-align:center}.grow{flex:1}.r{text-align:right}
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 8px 0 16px;background:var(--sf);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.appbar .iconbtn:first-child{margin-left:-12px}
.appbar h1{font-size:20px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:0;background:none;color:var(--tx2);cursor:pointer}
.iconbtn:hover{background:var(--sf2)}
.wrap{max-width:760px;margin:0 auto;padding:16px}
.card{background:var(--sf);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.card h2{font-size:16px;font-weight:500;margin:0 0 16px;color:var(--p)}
.auth{max-width:380px;margin:40px auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row form{margin:0}
/* fields */
.field{position:relative;margin-bottom:16px}
.field input:not([type=checkbox]),.field select,.field textarea{width:100%;font:inherit;color:var(--tx);background:transparent;border:1px solid var(--ol);border-radius:8px;padding:14px 12px;outline:0}
.field input{-webkit-appearance:none;appearance:none}
.field select{background:var(--sf)}
.field textarea{resize:vertical;min-height:76px}
.field label{position:absolute;left:10px;top:14px;padding:0 4px;color:var(--tx2);background:var(--sf);pointer-events:none;transition:.15s;border-radius:4px;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field.float label,.field select+label{top:-9px;font-size:12px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--p);box-shadow:0 0 0 1px var(--p)}
.field input:focus+label,.field select:focus+label,.field textarea:focus+label{color:var(--p)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;cursor:pointer}
.sw{-webkit-appearance:none;appearance:none;flex:none;width:52px;height:32px;border-radius:16px;background:var(--sf2);border:2px solid var(--ol);position:relative;transition:.2s;cursor:pointer;margin:0}
.sw::after{content:"";position:absolute;top:6px;left:6px;width:16px;height:16px;border-radius:50%;background:var(--ol);transition:.2s}
.sw:checked{background:var(--p);border-color:var(--p)}
.sw:checked::after{top:2px;left:22px;width:24px;height:24px;background:var(--onp)}
.file{margin-bottom:16px}.file input[type=file]{margin:6px 0;max-width:100%}
.prev{display:block;max-height:80px;max-width:200px;margin:8px 0;background:#fff;border:1px solid var(--sf2);border-radius:8px;padding:4px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:20px;border:0;font:500 14px Roboto,system-ui,sans-serif;cursor:pointer;color:var(--p);background:none}
.btn.filled{background:var(--p);color:var(--onp)}
.btn.tonal{background:var(--pc);color:var(--onpc)}
.btn.text{padding:0 12px}.btn.danger{color:var(--err)}.btn.block{width:100%;height:48px;border-radius:24px}
.btn .ic{width:18px;height:18px}
.chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px}
.chip{flex:none;height:32px;padding:0 14px;border:1px solid var(--ol);border-radius:8px;display:inline-flex;align-items:center;color:var(--tx2);font-size:14px}
.chip.on{background:var(--pc);color:var(--onpc);border-color:transparent}
.li{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--sf);border-radius:var(--r);margin-bottom:8px;color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--pc);color:var(--onpc);display:grid;place-items:center;font-weight:500;flex:none}
.meta{flex:1;min-width:0}.meta b,.meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amt{font-weight:500;text-align:right;white-space:nowrap}
.badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:8px;background:var(--sf2);color:var(--tx2)}
.badge.good{background:var(--ok);color:#fff}
/* items editor */
.item{border:1px solid var(--sf2);border-radius:12px;padding:16px 12px 4px;margin-bottom:12px}
.item-foot{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 8px}
.item-foot .amt{font-size:16px}
.sumrow{display:flex;justify-content:space-between;padding:10px 0 0}
.no-gst .gst-only{display:none}
/* chrome */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;height:72px;background:var(--sf2);padding-bottom:env(safe-area-inset-bottom)}
.nav a,.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:500 12px Roboto,system-ui,sans-serif;color:var(--tx2);background:none;border:0;cursor:pointer;width:100%;height:100%}
.nav form{flex:1;margin:0}
.pill{width:64px;height:32px;border-radius:16px;display:grid;place-items:center}
.nav .on{color:var(--tx)}.nav .on .pill{background:var(--pc);color:var(--onpc)}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--sf2);box-shadow:0 -1px 3px rgba(0,0,0,.18)}
.savebar b{font-size:20px}
.fab{position:fixed;right:16px;bottom:88px;z-index:15}
.fab summary{list-style:none;width:56px;height:56px;border-radius:16px;background:var(--pc);color:var(--onpc);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.3)}
.fab summary::-webkit-details-marker{display:none}
.fab .menu{position:absolute;right:0;bottom:68px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fab .menu a{white-space:nowrap;padding:12px 20px;border-radius:16px;background:var(--p);color:var(--onp);font-weight:500;box-shadow:0 3px 6px rgba(0,0,0,.3)}
.snack{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:50;background:#2f3033;color:#f1f0f4;padding:12px 16px;border-radius:8px;max-width:90%;box-shadow:0 3px 6px rgba(0,0,0,.3)}
@media(max-width:480px){.grid2{gap:8px}.p-meta{grid-template-columns:1fr}.p-title{text-align:left}}
@media print{@page{size:A4;margin:12mm}body{background:#fff;padding:0}.appbar,.nav,.noprint,.snack,.fab,.savebar{display:none!important}.wrap{padding:0;max-width:none}.paper{box-shadow:none;padding:0;border-radius:0}}

.appbar form{margin:0}
.plus{flex:1;display:flex;justify-content:center;align-items:center;position:relative}
.plus summary{list-style:none;width:56px;height:56px;margin-top:-14px;border-radius:50%;background:var(--p);color:var(--onp);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.plus summary::-webkit-details-marker{display:none}
.plus .ic{width:28px;height:28px;transition:transform .2s}
.plus[open] .ic{transform:rotate(45deg)}
.plus .menu{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:stretch}
.plus .menu a{white-space:nowrap;text-align:center;padding:12px 22px;border-radius:16px;background:var(--pc);color:var(--onpc);font-weight:500;box-shadow:0 3px 6px rgba(0,0,0,.3)}
.nav a{min-width:0}

.sec-head{display:flex;align-items:center;justify-content:space-between;margin:-8px -8px 8px 0}
.sec-head h2{margin:0}
.kv{margin-bottom:12px}.kv small{display:block}
.big{font-size:18px;font-weight:500;margin-bottom:12px}

.otp input{text-align:center;letter-spacing:.4em;font-size:22px}
.btn:disabled{opacity:.5;cursor:default}

/* navigation drawer */
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(300px,84vw);z-index:40;background:var(--sf);transform:translateX(-100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;display:flex;flex-direction:column;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.drawer-open .drawer{transform:none;visibility:visible;transition:transform .25s ease;box-shadow:2px 0 12px rgba(0,0,0,.3)}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-open .scrim{opacity:1;pointer-events:auto}
.d-head{display:flex;flex-direction:column;gap:2px;padding:calc(24px + env(safe-area-inset-top)) 16px 16px;background:var(--pc);color:var(--onpc)}
.d-head img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:12px;padding:4px;margin-bottom:10px}
.d-av{width:56px;height:56px;border-radius:50%;background:var(--p);color:var(--onp);display:grid;place-items:center;font-size:24px;font-weight:500;margin-bottom:10px}
.d-head b{font-size:16px;font-weight:500}
.d-head small{color:inherit;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-actions{display:flex;flex-direction:column;gap:8px;padding:12px}
.d-actions .btn{width:100%}
.d-list{padding:4px 12px}
.d-item{display:flex;align-items:center;gap:14px;height:48px;padding:0 16px;border-radius:24px;color:var(--tx2);font:500 14px Roboto,system-ui,sans-serif;background:none;border:0;width:100%;cursor:pointer;text-align:left}
.d-item:hover{background:var(--sf2)}
.d-item.on{background:var(--pc);color:var(--onpc)}
.d-bottom{margin-top:auto;padding:8px 12px;border-top:1px solid var(--sf2)}
.d-bottom form{margin:0}
.faq details{border-bottom:1px solid var(--sf2);padding:12px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:500}
.faq p{margin:8px 0 0;color:var(--tx2)}
@media(min-width:960px){
  .has-drawer{padding-left:300px;padding-bottom:24px}
  .has-drawer .drawer{transform:none;visibility:visible;box-shadow:none;border-right:1px solid var(--sf2);width:300px}
  .scrim,.burger{display:none!important}
  .has-drawer .nav{display:none}
  .has-drawer .savebar{left:300px}
  .has-drawer .appbar>:first-child:not(h1){margin-left:0}
}

.btn.wa{background:#1fa855;color:#fff}
.sub{font-size:12px;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 10px}
.card>.field+.sub{margin-top:4px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

[hidden]{display:none!important}
body{-webkit-tap-highlight-color:transparent}
@media print{
  .drawer,.scrim,.appbar,.nav,.noprint,.snack,.savebar{display:none!important}
  body.has-drawer,body{padding:0!important;background:#fff!important}
}