:root{
  --blue:#1d4ed8; --blue-d:#1e40af; --ink:#0f172a; --sub:#475569; --line:#e2e8f0; --bg:#f1f5f9; --card:#fff;
  --green:#15803d; --red:#b91c1c; --amber:#b45309; --r:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (max-width:700px){html{scrollbar-width:none}html::-webkit-scrollbar{display:none}}
body{margin:0;font:18px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);
  padding-bottom:calc(92px + var(--safe-b));letter-spacing:.01em}
body.editing{padding-bottom:calc(110px + var(--safe-b))}
a{color:var(--blue)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));
  background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.top h1{margin:0;font-size:21px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.back{font:inherit;font-weight:700;font-size:18px;color:var(--blue);background:none;border:0;padding:10px 8px 10px 0;min-height:48px;cursor:pointer}
main{max-width:720px;margin:0 auto;padding:16px;outline:none}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tabs[hidden]{display:none}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:68px;font-size:13px;font-weight:700;color:var(--sub);text-decoration:none}
.tabs a span{font-size:24px;line-height:1}
.tabs a.on{color:var(--blue)}
.tabs a.on span{transform:scale(1.1)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:12px 16px;border-radius:14px;border:2px solid transparent;
  font:inherit;font-weight:800;font-size:18px;text-decoration:none;cursor:pointer;text-align:center;margin:0 0 12px;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn-xl{min-height:64px;font-size:20px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:active{background:var(--blue-d)}
.btn-secondary{background:#fff;color:var(--ink);border-color:#cbd5e1}
.btn-green{background:var(--green);color:#fff}
.btn-ghost{background:transparent;color:var(--sub)}
.btn-danger-ghost{background:transparent;color:var(--red);border-color:#fecaca;margin-top:8px}
.link-btn{font:inherit;font-size:16px;font-weight:700;color:var(--blue);background:none;border:0;padding:8px 0;min-height:44px;cursor:pointer}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:100px}

.big-actions{display:grid;grid-template-columns:1fr;gap:0}
.notice{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fef3c7;color:#78350f;border-radius:14px;padding:14px 16px;margin:0 0 14px;font-weight:700;text-decoration:none}
.notice.soft{background:#e0f2fe;color:#0c4a6e}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}
.stat{font:inherit;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;color:var(--ink)}
.stat span{display:block;font-size:15px;color:var(--sub);font-weight:700}
.stat b{display:block;font-size:24px;line-height:1.2;margin:4px 0;word-break:break-word}
.stat small{color:var(--sub);font-size:14px}
.stat-red{border-color:#fecaca;background:#fff5f5}.stat-red b{color:var(--red)}
.search input,.sheet-search{width:100%;font:inherit;font-size:18px;min-height:54px;border:2px solid var(--line);border-radius:14px;padding:10px 14px;background:#fff;margin:0 0 12px;-webkit-appearance:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font:inherit;font-size:16px;font-weight:700;white-space:nowrap;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid #cbd5e1;background:#fff;color:var(--ink);cursor:pointer}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chips.small{padding-top:0}.chips.small .chip{font-size:15px;min-height:42px;padding:6px 12px}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 10px;
  text-decoration:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:72px}
.row[hidden]{display:none}
.row-main{min-width:0;flex:1}
.row-main b{display:block;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-main small{display:block;color:var(--sub);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.row-side b{font-size:18px}
.row-side small{color:var(--sub);font-size:13px}
.pill{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.pill-paid{background:#dcfce7;color:#14532d}
.pill-unpaid{background:#fef3c7;color:#78350f}
.pill-overdue{background:#fee2e2;color:#7f1d1d}
.pill-estimate{background:#e0e7ff;color:#312e81}
.pill-invoiced{background:#e2e8f0;color:#334155}
.empty{text-align:center;color:var(--sub);padding:32px 12px}
.muted{color:var(--sub)}.small{font-size:14px}.center{text-align:center}
.h{font-size:18px;margin:20px 0 10px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px}
.card h2{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px;font-size:19px}
.fld{display:block;margin:0 0 12px;min-width:0}
.fld>span{display:block;font-size:15px;font-weight:700;color:var(--sub);margin:0 0 4px}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:18px;min-height:52px;border:2px solid #cbd5e1;border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.fld input[type=date]{min-height:52px;display:block}
.fld select{background-image:linear-gradient(45deg,transparent 50%,#475569 50%),linear-gradient(135deg,#475569 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.fld textarea{min-height:auto;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus,.search input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.fld output{display:flex;align-items:center;justify-content:flex-end;min-height:52px;font-weight:800;font-size:18px;white-space:nowrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two>.btn{margin-bottom:0}
.three{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid #cbd5e1;border-radius:12px;overflow:hidden;min-height:52px}
.seg button{font:inherit;font-weight:800;font-size:20px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
details summary{cursor:pointer;font-weight:700;color:var(--blue);padding:8px 0 12px;font-size:16px;min-height:44px}
.check{display:flex;align-items:center;gap:12px;font-weight:700;margin:0 0 14px;min-height:48px}
.check input{width:28px;height:28px}

.line{border:2px dashed var(--line);border-radius:14px;padding:12px 12px 0;margin:0 0 12px;background:#f8fafc}
.line-top{display:flex;gap:8px;align-items:flex-end}
.grow{flex:1}
.x{font:inherit;font-size:20px;width:52px;height:52px;flex-shrink:0;border-radius:12px;border:2px solid #fecaca;background:#fff;color:var(--red);cursor:pointer;margin-bottom:12px}

.savebar{position:fixed;left:0;right:0;bottom:0;z-index:12;display:flex;align-items:center;gap:12px;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + var(--safe-b));box-shadow:0 -6px 20px rgba(15,23,42,.06)}
.savebar>div{flex:1;min-width:0}
.savebar small{display:block;font-size:14px;color:var(--sub);font-weight:700}
.savebar b{display:block;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-save{width:auto;min-width:150px;margin:0;font-size:20px;min-height:58px}

.doc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}
.doc-head small{display:block;color:var(--sub);font-size:16px;font-weight:700}
.doc-head b{display:block;font-size:34px;line-height:1.1}
.warn{background:#fee2e2;color:#7f1d1d;border-radius:12px;padding:10px 14px;font-weight:700;margin:0 0 14px}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.act-grid .btn{margin:0;font-size:17px;padding:10px}
.act-grid .span2{grid-column:span 2}
.tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.tpl-btn{font:inherit;font-size:15px;font-weight:800;min-height:48px;border-radius:12px;border:2px solid #cbd5e1;background:#fff;color:var(--ink);cursor:pointer;padding:4px}
.tpl-btn.on{border-color:var(--ink);background:var(--ink);color:#fff}
.colors{display:flex;flex-wrap:wrap;gap:10px}
.dot{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #cbd5e1;cursor:pointer;padding:0}
.dot.on{box-shadow:0 0 0 3px var(--ink)}
.dot.custom{position:relative;background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#ec4899,#ef4444)}
.dot.custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.look{padding-bottom:12px}

.logo-row{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.logo-box{width:110px;height:80px;flex-shrink:0;border:2px dashed #cbd5e1;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f8fafc;overflow:hidden;color:var(--sub);font-size:14px}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.logo-btns{flex:1;min-width:0}.logo-btns .btn{margin:0}

.sheet{position:fixed;inset:0;z-index:30;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-card{background:#fff;width:100%;max-width:720px;max-height:85vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;padding-bottom:var(--safe-b)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font-size:20px}.sheet-head .x{margin:0;border-color:var(--line);color:var(--ink)}
.sheet-body{overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}

.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translate(-50%,20px);background:var(--ink);color:#fff;font-weight:700;padding:12px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:40;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- paper preview (mirrors the PDF) ---------- */
.paper-wrap{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 4px 24px rgba(15,23,42,.14);margin:0 0 20px;background:#fff}
.paper-scale{width:612px;transform-origin:0 0;position:absolute;left:0;top:0}
.paper{--c:#1d4ed8;width:612px;min-height:792px;background:#fff;color:#111827;font:9.5px/1.35 Helvetica,Arial,sans-serif;padding:44px;position:relative;letter-spacing:0}
.paper .muted{color:#94a3b8}
.p-head{display:flex;justify-content:space-between;gap:20px;margin:0 0 22px}
.p-biz{color:#646e7d;font-size:9px;line-height:1.35}
.p-logo{display:block;max-width:150px;max-height:64px;margin:0 0 12px}
.p-name{font-size:14px;font-weight:700;color:#111827;margin:0 0 4px}
.p-meta{text-align:right;font-size:10px}
.p-meta div{display:flex;justify-content:flex-end;gap:12px;margin:0 0 3px}
.p-meta span{color:#646e7d;font-size:9px}
.p-title{font-size:26px;font-weight:700;color:var(--c);display:block!important;margin:0 0 8px!important;letter-spacing:.02em}
.p-bal{margin-top:6px!important}.p-bal b{font-size:12px}
.p-label{font-size:8px;font-weight:700;color:var(--c);letter-spacing:.05em;margin:0 0 4px}
.p-to{margin:0 0 18px;color:#646e7d}.p-to b{display:block;font-size:11px;color:#111827;margin:0 0 2px}
.p-items{width:100%;border-collapse:collapse;margin:0 0 14px}
.p-items th{font-size:9px;text-align:right;padding:6px;color:var(--c)}
.p-items th:first-child,.p-items td:first-child{text-align:left}
.p-items td{text-align:right;padding:6px;font-size:10px;vertical-align:top;border-bottom:.6px solid #dee2e8}
.p-items td b{font-size:10px}.p-items td small{display:block;color:#646e7d;font-size:8.8px;margin-top:2px}
.p-bottom{display:flex;gap:30px;justify-content:space-between}
.p-notes{flex:1;min-width:0;font-size:9.5px}.p-notes p{margin:0 0 10px}
.p-totals{width:220px;flex-shrink:0}
.p-totals table{width:100%;border-collapse:collapse}
.p-totals td{padding:3px 0;font-size:10px;color:#646e7d}.p-totals td+td{text-align:right;color:#111827}
.p-totals tr.strong td{font-weight:700;color:#111827;font-size:11px}
.p-total{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12px;padding:8px 10px;margin:6px -6px 8px -10px;background:var(--c);color:#fff}
.p-stamp{display:inline-block;border:2.5px solid #16a34a;color:#16a34a;font-weight:700;font-size:28px;border-radius:6px;padding:4px 22px;margin:4px 0 12px 20px}
.p-foot{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#646e7d;font-size:8.5px}
.tpl-classic::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--c)}
.tpl-classic .p-items th{background:var(--c);color:#fff}
.tpl-classic .p-items td{border-bottom:0}.tpl-classic .p-items tr:nth-child(even) td{background:#f6f7f9}
.tpl-modern{padding-left:58px}
.tpl-modern::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:var(--c)}
.tpl-modern .p-items th{border-bottom:1.6px solid var(--c)}
.tpl-modern .p-total{background:none;color:var(--c);border-top:1.2px solid var(--c);font-size:13px;margin-left:-10px;padding-left:10px}
.tpl-bold .p-head{background:var(--c);margin:-44px -44px 22px;padding:44px 44px 18px;min-height:150px;color:#fff}
.tpl-bold .p-biz,.tpl-bold .p-meta span{color:rgba(255,255,255,.8)}.tpl-bold .p-name,.tpl-bold .p-title,.tpl-bold .p-meta b{color:#fff}
.tpl-bold .p-logo{background:#fff;border-radius:6px;padding:6px}
.tpl-bold .p-items th{background:color-mix(in srgb,var(--c) 10%,#fff);color:#111827}
.tpl-minimal .p-title{color:#111827;font-size:22px}
.tpl-minimal .p-label,.tpl-minimal .p-items th{color:#646e7d}
.tpl-minimal .p-items th{border-bottom:.8px solid #111827}
.tpl-minimal .p-total{background:none;color:#111827;border-top:1.2px solid #111827;font-size:13px}

@media (min-width:700px){
  .big-actions{grid-template-columns:1fr 1fr;gap:12px}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:360px){
  body{font-size:17px}
  .three{grid-template-columns:1fr 1fr}.three .fld:last-child{grid-column:span 2}
}

.amt-row{display:flex;gap:10px;align-items:flex-end}.amt-row .link-btn{margin-bottom:16px;white-space:nowrap}
.cols-simple .c-q{display:none}
.tpl-simple{padding:50px;font-size:10px;color:#111}
.s-head{display:flex;justify-content:space-between;align-items:flex-start;min-height:120px;line-height:1.4}
.s-name{font-size:16px;font-weight:700;margin:0 0 8px}
.s-title{font-size:17px;font-weight:700}
.s-mid{display:flex;justify-content:space-between;margin:20px 0 26px;line-height:1.4}
.s-mid b{display:block;margin:0 0 4px}
.s-meta th{text-align:right;padding:0 14px 3px 0;font-weight:700}.s-meta td{text-align:right;padding:0 0 3px;min-width:90px}
.s-items{width:100%;border-collapse:collapse}
.s-items th{background:#f5f5f5;border:.7px solid #cdcdcd;padding:7px;font-size:9.5px;text-align:center}
.s-items td{border:.7px solid #cdcdcd;padding:6px 8px;vertical-align:top;line-height:1.3}
.s-items td small{display:block;color:#5a5a5a;font-size:9px}
.s-items .r{text-align:right;width:85px}
.s-bottom{display:flex;justify-content:space-between}
.s-tot{border-collapse:collapse}
.s-tot th{text-align:right;padding:0 12px;font-weight:400;color:#5a5a5a}
.s-tot td{text-align:right;width:85px;padding:5px 8px;border:.7px solid #cdcdcd;border-top:0}
.s-tot .s-total th{font-size:14px;font-weight:700;color:#111}.s-tot .s-total td{font-size:14px;font-weight:700;background:#f5f5f5;padding:8px}
.s-tot .s-plain td{border:0}.s-tot .strong th,.s-tot .strong td{font-weight:700;color:#111}
.s-note{margin-top:22px}.s-note p{margin:4px 0 0}
.s-tot .s-sub td:first-child{border:0;width:auto;color:#5a5a5a;padding-right:12px}
@media (min-width:760px){.tabs,.savebar{max-width:720px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:16px 16px 0 0}}

/* ---- accounts + sync ---- */
.sync{flex:none;font-size:14px;font-weight:800;padding:6px 10px;border-radius:999px;background:#ecfdf5;color:var(--green);white-space:nowrap}
.sync-saving{background:#eff6ff;color:var(--blue)}
.sync-offline{background:#fef3c7;color:#78350f}
.auth{max-width:440px;margin:8px auto 0}
.auth-mark{font-size:56px;text-align:center;line-height:1;margin:8px 0 4px}
.auth-h{text-align:center;font-size:28px;font-weight:800;margin:4px 0 6px}
.auth .card{margin-top:14px}
.auth-msg{background:#eff6ff;color:var(--blue-d);border-radius:12px;padding:12px 14px;font-weight:700;text-align:center}
.auth-err{background:#fef2f2;color:var(--red);border-radius:12px;padding:12px 14px;font-weight:700;margin:0 0 12px}
.auth-forgot{display:block;margin:4px auto 0}
.fld .pw-row{display:flex;gap:8px;align-items:stretch;margin:0;font-weight:inherit;color:inherit;font-size:18px}
.fld .pw-row input{flex:1;min-width:0;width:auto}
.pw-eye{flex:none;font:inherit;font-weight:800;font-size:16px;color:var(--blue);background:#fff;border:2px solid #cbd5e1;border-radius:12px;padding:0 14px;min-height:52px;cursor:pointer}
.fld span small{font-weight:600}
.acct-email{margin:0 0 6px;word-break:break-all}
.btn-danger{background:var(--red);color:#fff}
.danger-link{display:block;margin:0 auto 8px;color:var(--red)}
body.logged-out{padding-bottom:24px}
.btn:disabled{opacity:.6;cursor:default}