/* InvoiceYa v0.1 — design system (from the approved mockup) */
:root{
  --navy:#0e2439; --navy2:#16324e; --amber:#ffb300; --amber-dark:#e09a00;
  --green:#1db954; --red:#e5484d; --ink:#12181f; --mut:#5b6b7b;
  --bg:#f4f6f8; --card:#ffffff; --line:#e3e8ee; --radius:16px;
  --bar:#3d7fc1; --bar-sel:#b87700;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,'Segoe UI',Roboto,Inter,sans-serif;}
html,body{height:100%;}
body{background:#dfe6ec;}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;
  box-shadow:0 0 40px rgba(10,21,32,.15);display:flex;flex-direction:column;overflow-x:hidden;}
.screen{display:none;flex-direction:column;min-height:100vh;}
.screen.active{display:flex;animation:screenIn .26s ease;}
@keyframes screenIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ .screen.active{animation:none;} }

/* ---------- preloader ---------- */
#preloader{position:fixed;inset:0;background:var(--navy);z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;transition:opacity .45s ease, visibility .45s;}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none;}
.pl-mark{width:84px;height:84px;border-radius:22px;background:var(--amber);display:grid;place-items:center;
  animation:plPop .7s cubic-bezier(.2,1.6,.4,1) both, plFloat 2.2s ease-in-out .7s infinite;box-shadow:0 18px 50px rgba(255,179,0,.35);}
@keyframes plPop{0%{transform:scale(.3);opacity:0;}60%{transform:scale(1.08);}100%{transform:scale(1);opacity:1;}}
@keyframes plFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.pl-name{color:#fff;font-size:30px;font-weight:900;letter-spacing:.3px;animation:plFade .6s ease .25s both;}
.pl-name span{color:var(--amber);}
.pl-tag{color:#8fa6ba;font-size:13.5px;animation:plFade .6s ease .45s both;}
@keyframes plFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.pl-bar{width:130px;height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;animation:plFade .5s ease .6s both;}
.pl-bar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--amber);animation:plSlide 1s ease-in-out infinite;}
@keyframes plSlide{0%{transform:translateX(-100%);}100%{transform:translateX(350%);}}

/* ---------- welcome & onboarding ---------- */
.welcome-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center;}
.logo-mark.big{width:76px;height:76px;border-radius:20px;box-shadow:0 16px 44px rgba(255,179,0,.3);animation:plPop .7s cubic-bezier(.2,1.6,.4,1) both;}
.logo-mark.big svg{width:38px;height:38px;}
.ob-dots{display:flex;gap:8px;justify-content:center;margin-bottom:2px;}
.ob-dots i{width:26px;height:6px;border-radius:3px;background:#d5dde5;transition:.25s;}
.ob-dots i.on{background:var(--amber);}
.ob-in{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-size:15px;background:#fff;}
.ob-in:focus{outline:none;border-color:var(--amber);}

/* appbar */
.appbar{background:var(--navy);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;}
.appbar .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;}
.logo-mark{width:30px;height:30px;border-radius:8px;background:var(--amber);display:grid;place-items:center;flex:none;}
.appbar .back{background:none;border:none;color:#cfe0ef;font-size:15px;cursor:pointer;padding:4px 8px 4px 0;}
.appbar h2{font-size:17px;font-weight:700;}
.bizlink{margin-left:auto;background:none;border:none;color:#cfe0ef;font-size:13px;cursor:pointer;}
.bizlink:active{color:var(--amber);}

.pad{padding:16px;display:flex;flex-direction:column;gap:14px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.btn{display:block;width:100%;border:none;border-radius:14px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;text-align:center;}
.btn-amber{background:var(--amber);color:var(--navy);}
.btn-amber:active{background:var(--amber-dark);}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--navy);}
.btn-green{background:var(--green);color:#fff;}
.btn-danger-ghost{background:#fff;color:var(--red);border:2px solid var(--red);}
.muted{color:var(--mut);font-size:13px;}
.pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.4px;}
.pill.sent{background:#e8f1fb;color:#1668c7;}
.pill.overdue{background:#fdebec;color:var(--red);}
.pill.paid{background:#e6f7ec;color:#158441;}
.pill.partially_paid{background:#fff3d6;color:#8a6100;}
.pill.void{background:#f0f2f5;color:var(--mut);}
.rowline{display:flex;justify-content:space-between;align-items:center;}
.linkish{background:none;border:none;color:#1668c7;font-size:13px;font-weight:700;cursor:pointer;}

/* dashboard */
.monthnav{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 10px;}
.monthnav button{border:none;background:#eef2f6;border-radius:10px;width:36px;height:36px;font-size:17px;font-weight:800;color:var(--navy);cursor:pointer;}
.monthnav button:disabled{opacity:.3;cursor:default;}
.monthnav .mn{font-weight:800;font-size:15px;text-align:center;}
.monthnav .mn span{display:block;font-size:11px;font-weight:700;color:var(--mut);}
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;}
.tile .lab{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.4px;text-transform:uppercase;}
.tile .val{font-size:17px;font-weight:800;color:var(--ink);margin-top:4px;}
.tile.warn .val{color:var(--red);}
.tile.good .val{color:#158441;}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.chart-head b{font-size:14.5px;}
.chart-foot{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);margin-top:8px;border-top:1px solid var(--line);padding-top:9px;}
.chart-foot b{color:var(--ink);}
.inv-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 2px;border-bottom:1px solid var(--line);cursor:pointer;}
.inv-row:active{background:#fbfcfd;}
.inv-row:last-child{border-bottom:none;}
.inv-row .who{font-weight:700;font-size:15px;}
.inv-row .sub{font-size:12px;color:var(--mut);margin-top:2px;}
.inv-row .rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.inv-row .amt{font-weight:800;font-size:14.5px;}
.fu-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 2px;border-bottom:1px solid var(--line);}
.fu-row:last-child{border-bottom:none;}
.fu-row .who{font-weight:700;font-size:14.5px;}
.fu-row .sub{font-size:12px;margin-top:2px;color:var(--mut);}
.fu-row .sub.late{color:var(--red);font-weight:700;}
.remind{border:none;background:#eef2f6;color:var(--navy);font-size:12.5px;font-weight:800;border-radius:99px;padding:8px 13px;cursor:pointer;flex:none;}
.remind.hot{background:var(--amber);}
.remind:disabled{background:#e6f7ec;color:#158441;cursor:default;}
.fab{position:sticky;bottom:0;padding:14px 16px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 40%);margin-top:auto;cursor:pointer;z-index:6;}
.fab .btn{position:relative;z-index:1;}
.btn-slim{font-size:14.5px;padding:13px 14px;white-space:nowrap;}

/* bottom sheets */
.sheet-backdrop{position:fixed;inset:0;background:rgba(10,21,32,.55);z-index:20;opacity:0;pointer-events:none;transition:.25s;}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:50%;transform:translate(-50%,105%);bottom:0;width:100%;max-width:480px;background:#fff;border-radius:24px 24px 0 0;padding:22px 18px calc(26px + env(safe-area-inset-bottom));z-index:21;transition:transform .28s ease;max-height:80vh;overflow-y:auto;}
.sheet.open{transform:translate(-50%,0);}
.sheet h3{font-size:18px;margin-bottom:14px;text-align:center;}
.grab{width:44px;height:5px;border-radius:3px;background:#dde4ea;margin:-8px auto 14px;}
.choice{display:flex;align-items:center;gap:14px;width:100%;border:2px solid var(--line);background:#fff;border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;text-align:left;}
.choice:active{border-color:var(--amber);}
.choice .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;flex:none;}
.choice .ic.mic{background:var(--navy);}
.choice .ic.type{background:#eef2f6;}
.choice b{font-size:16px;display:block;}
.choice span{font-size:13px;color:var(--mut);}

/* voice */
.voice-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px 24px;text-align:center;}
.sayit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--mut);text-align:left;line-height:1.6;width:100%;}
.sayit b{color:var(--ink);}
.mic-btn{width:104px;height:104px;border-radius:50%;border:none;background:var(--amber);font-size:42px;cursor:pointer;box-shadow:0 8px 30px rgba(255,179,0,.45);}
.mic-btn.rec{background:var(--red);animation:pulse 1.1s infinite;}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)}}
.transcript{min-height:104px;background:#fff;border:1px dashed #c6d0da;border-radius:14px;padding:14px;font-size:14px;line-height:1.55;color:var(--ink);width:100%;text-align:left;resize:vertical;font-family:inherit;}
.transcript:focus{outline:none;border-color:var(--amber);border-style:solid;}
.transcript::placeholder{color:#9db0c2;font-style:italic;}
.spinner{width:34px;height:34px;border:4px solid #e3e8ee;border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* confirm & manual */
.match{display:flex;align-items:center;gap:10px;}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;}
.badge-match{background:#e6f7ec;color:#158441;font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;text-align:center;}
.item{border-bottom:1px solid var(--line);padding:12px 0;position:relative;}
.item:last-child{border-bottom:none;}
.item input[type=text]{width:100%;border:none;font-size:15px;font-weight:700;color:var(--ink);background:transparent;padding:2px 22px 2px 0;}
.item input[type=text]::placeholder{color:#9db0c2;font-weight:500;}
.item .nums{display:flex;gap:8px;margin-top:8px;align-items:flex-end;}
.item .nums label{font-size:11px;color:var(--mut);display:block;margin-bottom:3px;}
.nfield{flex:1;}
.nfield input{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:8px;font-size:15px;font-weight:700;text-align:right;background:#fbfcfd;}
.nfield input:focus{outline:none;border-color:var(--amber);}
.item .line-total{text-align:right;font-weight:800;font-size:14.5px;padding:9px 0 10px;}
.item .rm{position:absolute;top:10px;right:0;border:none;background:none;color:#c4ced8;font-size:15px;cursor:pointer;padding:2px;}
.totals > div{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:var(--mut);}
.totals .grand{font-size:19px;font-weight:900;color:var(--ink);border-top:2px solid var(--ink);margin-top:6px;padding-top:9px;}
.totals .gst-note{display:block;font-size:11px;color:#9db0c2;}
.switch{position:relative;width:46px;height:26px;flex:none;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:#c9d3dd;border-radius:99px;transition:.2s;cursor:pointer;}
.slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + .slider{background:var(--green);}
.switch input:checked + .slider:before{transform:translateX(20px);}
.edit-hint{background:#fff8e6;border:1px solid #ffe1a1;color:#8a6100;font-size:12.5px;border-radius:12px;padding:10px 12px;}
.addline{background:none;border:2px dashed #c6d0da;color:var(--mut);border-radius:12px;padding:11px;width:100%;font-size:14px;font-weight:700;cursor:pointer;margin-top:10px;}
.dayfield{display:inline-flex;align-items:center;gap:7px;}
.dayfield input{width:58px;border:1.5px solid var(--line);border-radius:9px;padding:7px;font-size:15px;font-weight:800;text-align:center;background:#fbfcfd;}
.dayfield input:focus{outline:none;border-color:var(--amber);}

/* client search */
.csearch input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-size:15px;background:#fff;}
.csearch input:focus{outline:none;border-color:var(--amber);}
.clist{border:1.5px solid var(--line);border-radius:12px;margin-top:8px;max-height:264px;overflow-y:auto;background:#fff;}
.clist .hdr{font-size:11px;font-weight:800;color:var(--mut);letter-spacing:.5px;text-transform:uppercase;padding:9px 12px 5px;background:#fbfcfd;}
.copt{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:none;border-top:1px solid #f0f3f6;padding:10px 12px;cursor:pointer;text-align:left;}
.copt:active{background:#fff8e6;}
.copt .mini{width:30px;height:30px;border-radius:50%;background:#eef2f6;color:var(--navy);font-size:12px;font-weight:800;display:grid;place-items:center;flex:none;}
.copt b{font-size:14px;display:block;}
.copt span{font-size:11.5px;color:var(--mut);}
.copt.seld{background:#e6f7ec;}
.noresult{padding:12px;font-size:13px;color:var(--mut);text-align:center;}
.editpen{margin-left:auto;color:#9db0c2;font-size:14px;flex:none;}

/* filter chips */
.fchips{display:flex;gap:8px;flex-wrap:wrap;}
.fchip{border:1.5px solid var(--line);background:#fff;color:var(--mut);font-size:13px;font-weight:800;border-radius:99px;padding:8px 14px;cursor:pointer;}
.fchip.on{background:var(--navy);border-color:var(--navy);color:#fff;}

/* detail */
.d-amount{font-size:30px;font-weight:900;}
.tl-step{display:flex;gap:12px;}
.tl-dot{width:12px;height:12px;border-radius:50%;background:#c9d3dd;margin-top:3px;flex:none;}
.tl-dot.done{background:var(--green);}
.tl-bar{width:2px;flex:1;background:var(--line);margin:2px 0 2px 5px;}
.tl-step .tx{padding-bottom:16px;font-size:14px;}
.tl-step .tx span{display:block;font-size:12px;color:var(--mut);}

/* settings */
.set-h{font-size:12px;font-weight:800;color:var(--mut);letter-spacing:.6px;text-transform:uppercase;margin:4px 2px -6px;}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 2px;border-bottom:1px solid var(--line);}
.set-row:last-child{border-bottom:none;}
.set-row .k{font-size:14.5px;font-weight:700;}
.set-row .k span{display:block;font-size:12px;color:var(--mut);font-weight:500;margin-top:2px;}
.set-row .v{font-size:14px;color:var(--mut);text-align:right;}
.set-row.danger .k{color:var(--red);}
.set-row.tap{cursor:pointer;}
.set-in{border:none;border-bottom:1.5px dashed #c6d0da;background:transparent;font-size:14px;color:var(--ink);font-weight:700;text-align:right;padding:3px 2px;max-width:170px;}
.set-in:focus{outline:none;border-bottom-color:var(--amber);}
.set-in.sm{max-width:64px;text-align:center;}
.lockrow{background:#f7f9fb;border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--mut);line-height:1.55;margin-top:8px;}
.legal{font-size:13.5px;color:#33414f;line-height:1.65;}
.legal h4{font-size:14px;margin:14px 0 4px;color:var(--ink);}
.legal p{margin-bottom:8px;}
.draftnote{background:#fff8e6;border:1px solid #ffe1a1;color:#8a6100;font-size:12px;border-radius:10px;padding:9px 11px;line-height:1.5;}
.cl-form input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px;font-size:14.5px;background:#fff;margin-bottom:9px;}
.cl-form input:focus{outline:none;border-color:var(--amber);}
.cl-actions{display:flex;gap:9px;}
.cl-actions .btn{padding:12px;font-size:15px;border-radius:11px;}

/* modal / toast */
.modal-bg{position:fixed;inset:0;background:rgba(10,21,32,.6);display:none;place-items:center;z-index:30;padding:24px;}
.modal-bg.open{display:grid;}
.modal{background:#fff;border-radius:18px;padding:22px;text-align:center;max-width:420px;}
.modal .warn-ic{font-size:38px;}
.modal h3{margin:8px 0 8px;font-size:17px;}
.modal p{font-size:14px;color:var(--mut);line-height:1.5;margin-bottom:16px;}
.modal .btn{margin-top:8px;}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:26px;background:var(--ink);color:#fff;font-size:13.5px;padding:11px 18px;border-radius:99px;opacity:0;visibility:hidden;transition:.25s;z-index:40;max-width:92%;pointer-events:none;}
.toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* sent */
.sent-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;}
.check{width:86px;height:86px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:44px;box-shadow:0 10px 30px rgba(29,185,84,.35);}

/* invoice document */
.cv-band{background:#233a52;color:#a9bccd;font-size:12px;text-align:center;padding:8px;}
.doc{background:#fff;margin:14px;border-radius:14px;border:1px solid var(--line);padding:20px;}
.doc .head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.doc .biz{font-weight:900;font-size:17px;color:var(--navy);}
.doc .abn{font-size:12px;color:var(--mut);margin-top:2px;}
.taxinv{font-size:12px;font-weight:900;letter-spacing:1.5px;color:var(--amber-dark);border:2px solid var(--amber);padding:4px 10px;border-radius:8px;white-space:nowrap;}
.doc table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.5px;}
.doc th{text-align:left;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1.5px solid var(--line);padding:6px 0;}
.doc td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.doc td.r,.doc th.r{text-align:right;padding-left:12px;white-space:nowrap;}
.doc .dt{display:flex;justify-content:space-between;font-size:13px;margin-top:12px;color:var(--mut);flex-wrap:wrap;gap:4px;}
.bank{background:#f4f6f8;border-radius:12px;padding:13px;font-size:13.5px;margin-top:14px;line-height:1.7;}
.powered{text-align:center;font-size:11.5px;color:#9db0c2;padding:4px 0 26px;}
.linkbtn{display:block;margin:12px auto 0;background:none;border:none;color:var(--mut);text-decoration:underline;font-size:13.5px;cursor:pointer;}

/* manual form */
.f label{font-size:12px;font-weight:700;color:var(--mut);display:block;margin-bottom:5px;}
.f .terms{display:flex;align-items:center;gap:10px;}
.f .terms input{width:86px;border:1.5px solid var(--line);border-radius:10px;padding:11px;font-size:16px;font-weight:800;text-align:center;background:#fff;}
.f .terms input:focus{outline:none;border-color:var(--amber);}
.hintbar{background:var(--navy2);color:#cfe0ef;font-size:12.5px;padding:9px 14px;text-align:center;}
.hintbar b{color:var(--amber);}
select.selbox{border:1.5px solid var(--line);border-radius:10px;padding:10px;font-size:14px;background:#fff;}