/* Trustworthy-financial palette. Deep navy ink, one confident blue, and
     statement green/red -- the colours people already read as "money", rather
     than the startup indigo this started with. Shadows are shallow and tight:
     a ledger should look printed, not floating. */
  :root{--bg:#f3f6fa;--card:#fff;--ink:#0b1f33;--muted:#5a6b80;--line:#dde3ec;
    --brand:#1656c7;--brand-deep:#0b3b8c;--brand-ink:#0f3d91;--brand-wash:#eaf1fc;
    --ok:#0f7a4a;--red:#b4232a;--amber:#b45309;--wash:#edf1f7;
    --shadow:0 1px 2px rgba(11,31,51,.05),0 6px 18px rgba(11,31,51,.06);
    --shadow-lg:0 2px 4px rgba(11,31,51,.06),0 18px 40px rgba(11,31,51,.10);
    --radius:14px;--radius-sm:10px}
  *{box-sizing:border-box}
  body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 18px}
  .hidden{display:none!important}
  button{font-family:inherit}
  label{display:block;font-size:12px;font-weight:600;color:#45566b;margin:10px 0 5px}
  input,select,textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
  textarea{min-height:60px;resize:vertical}

  /* auth */
  .auth-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#0b1f33,#0b3b8c 60%,#1656c7)}
  .auth{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:100%;max-width:430px;padding:30px;margin:24px}
  .auth .logo{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#1656c7,#2c6fd1);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:14px}
  .auth h1{margin:0 0 3px;font-size:21px}.auth p.sub{margin:0 0 18px;color:var(--muted);font-size:13px}
  .tabs{display:flex;gap:6px;background:#edf1f7;border-radius:12px;padding:4px;margin-bottom:12px}
  .tabs button{flex:1;border:none;background:none;padding:9px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;color:#45566b}
  .tabs button.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .planpick{display:grid;gap:8px;margin-top:6px}
  .planopt{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font-size:12.5px}
  .planopt.sel{border-color:var(--brand);background:#eef4fd;box-shadow:0 0 0 3px rgba(22,86,199,.14)}
  .planopt b{font-size:13px}.planopt .pr{color:var(--brand);font-weight:700;float:right}.planopt .bl{color:var(--muted);display:block;margin-top:3px}
  .cta{width:100%;margin-top:16px;background:var(--brand);color:#fff;border:none;border-radius:12px;padding:12px;font-weight:700;font-size:14px;cursor:pointer}
  .err{color:#b4232a;font-size:12.5px;margin-top:10px;min-height:16px}.demoflag{text-align:center;font-size:11.5px;color:var(--muted);margin-top:12px}

  /* header */
  header.bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .bar-in{display:flex;align-items:center;gap:12px;padding:12px 0}
  .blogo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#1656c7,#2c6fd1);color:#fff;display:grid;place-items:center;font-size:18px;cursor:pointer}
  .biz{font-weight:700;font-size:15px}.planbadge{font-size:11px;font-weight:700;color:#0f3d91;background:#eaf1fc;padding:4px 10px;border-radius:999px}
  .right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .who{font-size:12.5px;color:var(--muted)}
  .btn-ghost{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;color:#45566b}
  .demopill{font-size:11px;font-weight:700;background:#fef3c7;color:#92400e;padding:4px 10px;border-radius:999px}
  .back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--brand);font-weight:600;font-size:13.5px;cursor:pointer;padding:0}

  /* launcher */
  h2.sec{margin:26px 0 4px;font-size:18px}.sub2{color:var(--muted);font-size:13px;margin:0 0 18px}
  .launch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .lcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:8px}
  .lcard.locked{opacity:.6;filter:grayscale(.4)}
  .lic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;color:#fff}
  .lcard h3{margin:6px 0 0;font-size:16px}.lcard p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.4;flex:1}
  .lbtn{margin-top:8px;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px;font-weight:700;font-size:13.5px;cursor:pointer}
  .lbtn.lock{background:#edf1f7;color:#8fa0b3;cursor:not-allowed}

  /* generic module page */
  .modhead{display:flex;align-items:center;gap:14px;margin:20px 0 16px}
  .modhead .lic{width:44px;height:44px;font-size:22px;border-radius:12px}
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
  .actbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
  .tab{font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:9px;cursor:pointer;background:#edf1f7;color:#45566b;border:none}
  .tab.sel{background:var(--brand);color:#fff}
  .form{display:none}.form.show{display:block}.form .desc{color:var(--muted);font-size:12px;margin:2px 0 8px}
  .run{margin-top:12px;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-weight:600;font-size:13.5px;cursor:pointer}
  .out{margin-top:12px;background:#0b1f33;color:#dde3ec;border-radius:12px;padding:13px 14px;font:12.5px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;display:none;max-height:420px;overflow:auto}
  .out.show{display:block}.out .meta{color:#7dd3fc;font-size:11px;margin-top:8px;display:block}

  /* buku kas */
  .bnav{display:flex;gap:8px;margin:18px 0 16px;background:#fff;padding:6px;border-radius:14px;box-shadow:var(--shadow);position:sticky;top:60px;z-index:10}
  .bnav button{flex:1;border:none;background:none;padding:10px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;color:#45566b}
  .bnav button.on{background:var(--brand);color:#fff}
  .bv{display:none}.bv.show{display:block}
  .balance{background:linear-gradient(135deg,#0b1f33,#0b2b5c);color:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
  .balance .bl{font-size:11px;letter-spacing:1px;opacity:.7}.balance .bv2{font-size:30px;font-weight:800;margin-top:4px}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
  .stat{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px}
  .stat .sl{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.4px}.stat .sv{font-size:18px;font-weight:800;margin-top:3px}
  .s-in .sv{color:var(--ok)}.s-out .sv{color:var(--red)}.s-piu .sv{color:var(--amber)}.s-utg .sv{color:#123e86}.s-prv .sv{color:#5a6b80}
  .fc-card{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px;margin:14px 0}
  .fc-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:10px}
  .fc-spark{display:flex;align-items:flex-end;gap:3px;height:60px;margin:10px 0}
  .fc-bar{flex:1;border-radius:3px 3px 0 0;min-height:2px}
  .fc-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px;white-space:pre-wrap}
  .fc-runway{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
  .chips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}
  .chip{border:1.4px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600;color:#45566b;cursor:pointer}
  .chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
  .krow{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:9px;cursor:pointer}
  .krow .kt{display:flex;align-items:center;gap:10px}
  .kamt{margin-left:auto;font-weight:800;font-size:14px}.kamt.in{color:var(--ok)}.kamt.out{color:var(--red)}
  .kmeta{font-size:11.5px;color:var(--muted);margin-top:3px}
  .kbadge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:#edf1f7;color:#5a6b80}
  .kbadge.kredit{background:#fef3c7;color:#92400e}
  .kedit{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;display:none}
  .kedit.show{display:block}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .kbtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .mini{border:none;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}
  .mini.save{background:var(--brand);color:#fff}.mini.pay{background:var(--ok);color:#fff}.mini.del{background:#fee2e2;color:#b91c1c}
  .rep-table{width:100%;border-collapse:collapse;font-size:13px}
  .rep-table td,.rep-table th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
  .rep-table td.n,.rep-table th.n{text-align:right;font-variant-numeric:tabular-nums}
  .rep-table tr.total td{font-weight:800;border-top:2px solid var(--ink)}
  .modebtns{display:flex;gap:8px;margin-bottom:12px}
  .modebtns button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px;font-weight:600;font-size:12.5px;cursor:pointer;color:#45566b}
  .modebtns button.on{background:var(--brand);color:#fff;border-color:var(--brand)}

  /* dompetku */
  .budrow,.goalrow{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px}
  .budrow .bh,.goalrow .gh{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
  .budrow .bh .n,.goalrow .gh .n{margin-left:auto;font-weight:600;color:var(--muted);font-size:12px}
  .pbar-track{background:#edf1f7;border-radius:999px;height:9px;overflow:hidden;margin-top:8px}
  .pbar-fill{height:100%;border-radius:999px;background:var(--ok)}
  .pbar-fill.over{background:var(--red)}
  .catrow{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
  .catrow .n{margin-left:auto;font-weight:700}

  /* kasirku */
  /* whatsapp */
  .wa-thread{background:#efe7de;border-radius:14px;padding:14px;min-height:120px;max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:8px}
  .wa-msg{max-width:80%;padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.5;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.08)}
  .wa-msg.wa-in{align-self:flex-start;background:#fff}
  .wa-msg.wa-out{align-self:flex-end;background:#d9fdd3}
  .wa-msg .who{display:block;font-size:10.5px;font-weight:700;color:#667781;margin-bottom:2px}
  .wa-pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:#dde3ec;color:#45566b}
  .wa-pill.live{background:#dff3e6;color:#0f7a4a}
  .wa-seg{border:1.5px solid var(--line);background:var(--card);color:var(--muted);border-radius:9px;padding:8px 11px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
  .wa-seg.seg-on{border-color:#128C7E;background:#128C7E;color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(18,140,126,.3)}
  .kasir-total{background:linear-gradient(135deg,#0b1f33,#0b3b8c);color:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);text-align:center}
  .kasir-total .kl{font-size:11px;letter-spacing:1px;opacity:.75}
  .kasir-total .kv{font-size:34px;font-weight:800;margin-top:4px}
  .cart-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
  .cart-row .nm{font-weight:700}.cart-row .sub{color:var(--muted);font-size:11.5px}
  .cart-row .amt{margin-left:auto;font-weight:800}
  .paybtns{display:flex;gap:8px;margin:10px 0}
  .paybtns button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:11px;font-weight:700;font-size:13px;cursor:pointer;color:#45566b}
  .paybtns button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
  .receipt{font:12.5px/1.6 ui-monospace,Menlo,monospace;white-space:pre-wrap;background:#fff;border:1.5px dashed var(--line);border-radius:12px;padding:16px}
  @media print{body *{visibility:hidden}#receiptPrintArea,#receiptPrintArea *{visibility:visible}
    #receiptPrintArea{position:absolute;left:0;top:0;width:100%}}

  /* ---- demo shell only (index.html: plan switcher + master chat) ---- */
  header.top{background:linear-gradient(120deg,#0b3b8c,#123e86 55%,#1b5fb8);color:#fff;padding:22px 0 70px;position:relative;overflow:hidden}
  header.top:after{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 80% -20%,rgba(255,255,255,.25),transparent)}
  .brand{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
  .logo{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:21px}
  .brand h1{font-size:19px;margin:0;font-weight:750}
  .demo-badge{margin-left:auto;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.18);padding:6px 12px;border-radius:999px}
  .panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:-46px;position:relative;z-index:2;padding:18px}
  .panel h3{margin:0 0 3px;font-size:14px}
  .plans{display:flex;gap:9px;flex-wrap:wrap}
  .plan{flex:1;min-width:150px;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;cursor:pointer;transition:.15s;background:#fff;text-align:left}
  .plan:hover{border-color:#c7cbf0}
  .plan .pname{font-weight:700;font-size:13px}
  .active-bar{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
  .chip2{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:#eaf1fc;color:#0f3d91}
  .master-card{background:linear-gradient(180deg,#0b1f33,#1e1b4b);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;color:#e5e7eb;margin-top:20px}
  .master-card h3{margin:0 0 3px;font-size:15px;color:#fff}
  .thread{background:rgba(255,255,255,.04);border-radius:12px;padding:12px;min-height:70px;max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:9px}
  .msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:12.5px;line-height:1.5;white-space:pre-wrap}
  .msg.u{align-self:flex-end;background:var(--brand);color:#fff}
  .used{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .composer{display:flex;gap:9px;margin-top:12px}
  .composer button{background:var(--brand);color:#fff;border:none;border-radius:11px;padding:0 20px;font-weight:600;cursor:pointer}

  /* ---- Setup Bisnis wizard ---- */
  .su-prog{font-size:12px;font-weight:700;color:var(--brand);background:#eaf1fc;padding:6px 12px;border-radius:999px}
  .su-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
  .su-type{display:flex;gap:11px;align-items:flex-start;text-align:left;border:1.6px solid var(--line);
    background:#fff;border-radius:13px;padding:12px;cursor:pointer;font-family:inherit}
  .su-type:hover{border-color:#bed4f2}
  .su-type.sel{border-color:var(--brand);background:var(--brand-wash);box-shadow:0 0 0 3px rgba(22,86,199,.14)}
  .su-type .ic{font-size:22px;line-height:1}
  .su-type b{display:block;font-size:13.5px;color:var(--ink)}
  .su-type span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
  .su-conf{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
  .su-conf.ok{background:#dff3e6;color:#0f7a4a}
  .su-conf.warn{background:#fef3c7;color:#b45309}
  .su-conf.low{background:#fee2e2;color:#b91c1c}
  .su-watch{margin-top:12px;background:#fffbeb;border:1.4px solid #fde68a;color:#92400e;
    border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45}
  .su-guess{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#fef3c7;color:#b45309}
  .su-scroll{overflow-x:auto}
  .su-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
  .su-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
    color:var(--muted);padding:0 6px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
  .su-table td{padding:5px 6px;border-bottom:1px solid #edf1f7}
  .su-table tr.guess{background:#fffdf5}
  .su-table input,.su-table select{padding:7px 8px;font-size:12.5px}
  .su-table input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand)}
  .su-table input[type=number]{max-width:110px}
  .su-step{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
  .su-step:last-child{border-bottom:none}
  .su-step .mk{font-size:16px;line-height:1.2}
  .su-step b{font-size:13.5px}
  .su-step span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .su-step.done b{color:var(--muted);font-weight:600}

  /* ---- Akurasi laba (profit trust) ---- */
  .ak{border-left:5px solid var(--ok)}
  .ak.warn{border-left-color:var(--amber)} .ak.bad{border-left-color:var(--red)}
  .ak-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .ak-score{font-size:24px;font-weight:800;white-space:nowrap}
  .ak.warn .ak-score{color:var(--amber)} .ak.bad .ak-score{color:var(--red)} .ak.ok .ak-score{color:var(--ok)}
  .ak-lbl b{display:block;font-size:13.5px}
  .ak-lbl span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
  .ak-nums{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
  .ak-nums b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
  .ak-bar{height:7px;border-radius:5px;background:#eef2f7;overflow:hidden;margin:12px 0 4px}
  .ak-bar i{display:block;height:100%;background:var(--ok)}
  .ak.warn .ak-bar i{background:var(--amber)} .ak.bad .ak-bar i{background:var(--red)}
  .ak-warn{background:#fef2f2;border:1.4px solid #fecaca;color:#991b1b;border-radius:10px;
    padding:10px 12px;font-size:12.5px;margin-top:10px;line-height:1.45}
  .ak-good{background:#f0fdf4;border:1.4px solid #bbf7d0;color:#166534;border-radius:10px;
    padding:10px 12px;font-size:12.5px;margin-top:10px}
  .ak-issue{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
  .ak-issue:last-child{border-bottom:none;padding-bottom:0}
  .ak-issue .ak-ic{font-size:15px;line-height:1.3}
  .ak-issue b{font-size:13px}
  .ak-issue span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
  .ak-issue .ak-fix{color:var(--brand);font-weight:600;margin-top:4px}
  .ak-recalc{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;
    background:#eaf1fc;border:1.4px solid #bed4f2;border-radius:10px;padding:11px 12px}
  .ak-recalc b{font-size:12.5px;display:block}
  .ak-recalc span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}

  /* ---- PIN pad ---- */
  .pin-dots{display:flex;gap:11px;justify-content:center;margin:6px 0 20px}
  .pin-dots i{width:13px;height:13px;border-radius:50%;background:#dde3ec;transition:background .12s}
  .pin-dots i.on{background:var(--brand)}
  .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
  .pin-pad button{border:none;background:#edf1f7;color:var(--ink);font-size:22px;font-weight:600;
    padding:16px 0;border-radius:14px;cursor:pointer;font-family:inherit}
  .pin-pad button:active{background:#dde3ec}
  .linkbtn{display:block;width:100%;margin-top:16px;border:none;background:none;color:var(--brand);
    font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:8px}

  /* ---- show/hide password ---- */
  .pwwrap{position:relative}
  .pwwrap input{padding-right:44px}
  .pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;
    font-size:17px;line-height:1;cursor:pointer;padding:7px 8px;border-radius:8px;opacity:.65}
  .pweye:hover{opacity:1;background:#edf1f7}

  /* ---- setup: the next step after saving the catalogue ---- */
  .su-next-card{border:1.8px solid var(--brand);background:linear-gradient(180deg,#eaf1fc,#fff)}
  .su-next-card h3{margin:0 0 6px;font-size:15.5px}
  .su-next-card p{margin:0 0 12px;font-size:13px;line-height:1.5;color:#334155}
  .su-next-btns{display:flex;gap:8px;flex-wrap:wrap}
  .su-next-note{margin:12px 0 0!important;font-size:12px!important;color:var(--muted)!important}
  #su-want-msg{display:inline-block;margin-top:10px;font-size:12.5px}

  /* ---- editable stock list ---- */
  .stok-head{font-size:13.5px;font-weight:700;margin:0 0 8px;color:var(--ink)}
  .stok-head span{font-weight:500;color:var(--muted);font-size:12.5px}
  .stok-row{cursor:pointer}
  .stok-row:hover{background:#f8fafc}
  .stok-edit{opacity:0;margin-left:6px;font-size:12px}
  .stok-row:hover .stok-edit{opacity:.7}

  /* ---- report a problem ---- */
  .fb-btn{position:fixed;right:16px;bottom:16px;z-index:60;border:none;cursor:pointer;
    background:#0b1f33;color:#fff;font-family:inherit;font-size:13px;font-weight:600;
    padding:11px 16px;border-radius:999px;box-shadow:0 8px 24px rgba(15,23,42,.28)}
  .fb-btn:hover{background:#1e293b}
  .fb-sheet{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.45);
    display:grid;place-items:center;padding:18px}
  .fb-card{background:#fff;border-radius:18px;padding:20px;width:100%;max-width:430px;
    box-shadow:0 30px 60px rgba(0,0,0,.3)}
  .fb-card p{margin:6px 0 12px;font-size:12.5px;color:var(--muted);line-height:1.5}
  .fb-card textarea{min-height:110px}
  .fb-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
  #fb-msg{margin-top:8px;font-size:12.5px;text-align:right}
  .se-in{margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line)}
  .se-in p{margin:4px 0 10px;font-size:12px;color:var(--muted);line-height:1.45}
  .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  @media(max-width:620px){.row3{grid-template-columns:1fr}}

  /* ---- hub beranda: Setup in the middle, the working apps around it ---- */
  .hub-grid{display:grid;gap:12px;grid-template-columns:1fr 1.15fr 1fr;
    grid-template-areas:'a hub b' 'c hub d' '. e .';align-items:stretch;margin-bottom:8px}
  .hub-center{grid-area:hub;background:linear-gradient(180deg,#eaf1fc,#fff);
    border:2px solid var(--brand);border-radius:18px;padding:22px 18px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .hub-center:hover{box-shadow:0 2px 4px rgba(11,31,51,.06),0 14px 34px rgba(22,86,199,.16)}
  .hub-badge{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--brand-ink);
    background:var(--brand-wash);padding:4px 12px;border-radius:999px}
  .hub-badge.done{background:#dff3e6;color:#0f7a4a}
  .hub-ic{font-size:38px;line-height:1;margin:12px 0 6px}
  .hub-center h3{margin:0;font-size:19px;font-weight:800;color:var(--ink)}
  .hub-center p{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:230px}
  .hub-cta{margin-top:14px;font-size:12.5px;font-weight:700;color:#0f3d91;
    border:1.5px solid #bed4f2;border-radius:10px;padding:8px 16px}

  .hub-app{background:var(--card);border:1.5px solid var(--line);border-radius:14px;
    padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:8px;
    box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
  .hub-app:hover{border-color:var(--acc);transform:translateY(-2px)}
  .hub-app-ic{font-size:26px;line-height:1}
  .hub-app b{display:block;font-size:15px;color:var(--ink)}
  .hub-app span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
  .hub-app.locked{opacity:.5;cursor:not-allowed}
  .hub-app[style*='--acc']{border-left:4px solid var(--acc)}

  /* On a phone the ring becomes a stack: Setup first, then the apps in pairs. */
  @media(max-width:720px){
    .hub-grid{grid-template-columns:1fr 1fr;
      grid-template-areas:'hub hub' 'a b' 'c d' 'e e'}
    .hub-center{padding:18px 14px}
    .hub-ic{font-size:32px}
  }

  /* ---- cross-module hand-off notice ---- */
  .link-note{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;z-index:65;
    max-width:min(560px,calc(100vw - 32px));display:flex;align-items:flex-start;gap:10px;
    background:#0b1f33;color:#dde3ec;font-size:13px;line-height:1.5;
    padding:12px 14px;border-radius:14px;box-shadow:0 12px 34px rgba(15,23,42,.34)}
  .link-note .link-ic{font-size:15px;line-height:1.4}
  .link-note button{border:none;background:none;color:#8fa0b3;font-size:15px;
    cursor:pointer;padding:0 2px;line-height:1.3;font-family:inherit}
  .link-note button:hover{color:#fff}

  /* ---- recipes: one at a time, with the next one handed over ---- */
  .resep-how{background:#f8fafc;border:1.4px solid var(--line);border-radius:12px;
    padding:12px 14px;margin-top:12px;font-size:12.5px;color:#334155}
  .resep-how b{display:block;font-size:13px;color:var(--ink);margin-bottom:6px}
  .resep-how ol{margin:0;padding-left:18px;line-height:1.7}
  .resep-how span{display:block;margin-top:8px;color:var(--muted);font-size:12px}
  .resep-todo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
    background:#fffbeb;border:1.4px solid #fde68a;border-radius:12px;padding:11px 13px}
  .resep-todo b{font-size:13px;color:#92400e}
  .resep-todo span{flex:1;min-width:180px;font-size:12px;color:#a16207}
  .resep-next{margin-top:14px;background:var(--brand-wash);border:1.6px solid var(--brand);
    border-radius:12px;padding:13px 15px}
  .resep-next b{font-size:13.5px;color:#0f3d91}
  .resep-next p{margin:6px 0 0;font-size:12.5px;color:#45566b;line-height:1.55}
  .rn-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
  .pin-pad button.pin-ok{background:var(--brand);color:#fff}
  .pin-pad button.pin-ok:active{background:#0b3b8c}

  /* ---- Buku.Ai brand ---- */
  .auth h1 span{color:var(--brand)}
  .auth .tagline{margin:-10px 0 18px;font-size:12.5px;color:var(--muted)}
  .wordmark{font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--ink);
    cursor:pointer;margin-right:4px;white-space:nowrap}
  .wordmark span{color:var(--brand)}
  @media(max-width:560px){.wordmark{display:none}}

  /* ---- financial polish -------------------------------------------------
     Money must line up. Proportional digits make a column of rupiah look
     ragged and, worse, make two different numbers look the same length, so
     every figure in the app uses tabular numerals. */
  .kamt,.amt,.sv,.bv2,.kv,.n,.rep-table td.n,.rep-table th.n,.balance .bv2,
  .stat .sv,.kasir-total .kv,.cart-row .amt{font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1}

  /* Hairline rules and a flatter surface read as a statement, not a dashboard. */
  .card,.krow,.stat,.fc-card,.budrow,.goalrow{border:1px solid var(--line)}

  /* Keyboard and screen-reader users need to see where they are -- there was no
     focus style at all before, which also makes the app hard to test on a
     phone with a keyboard attached. */
  a:focus-visible,button:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);
    outline-offset:2px;border-radius:var(--radius-sm)}
  input:focus,select:focus,textarea:focus{border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(22,86,199,.12);outline:none}

  /* A shop owner uses this one-handed, standing up, often with wet hands.
     Anything tappable gets a 44px target on a phone. */
  @media (max-width:640px){
    .mini,.chip,.tab,.btn-ghost,.bnav button,.tabs button,.modebtns button,
    .paybtns button{min-height:44px}
    .cta,.run,.lbtn{min-height:48px;font-size:15px}
    input,select,textarea{font-size:16px;padding:12px 13px}  /* 16px stops iOS zooming on focus */
    .wrap{padding:0 14px}
    .balance .bv2{font-size:27px}.kasir-total .kv{font-size:30px}

    /* The header carries a business name, two badges, an email and five
       buttons. That fits a laptop and overflows a 375px phone, pushing Keluar
       off the edge. The email is the one thing already known to whoever is
       holding the phone, so it goes first, and the row is allowed to wrap. */
    .bar-in{flex-wrap:wrap;gap:8px;padding:10px 0}
    .who{display:none}
    .biz{font-size:14px}
    .planbadge{font-size:10px;padding:3px 8px}
    .btn-ghost{padding:8px 11px;font-size:12px}
    .right{gap:6px}
  }