:root{color-scheme:light;--navy:#122232;--navy2:#1c3247;--gold:#dbac56;--gold2:#f7e6b9;--bg:#f4f6f8;--ink:#172738;--muted:#748092;--line:#dfe5ea;--red:#ba4044;--green:#238664;--amber:#a56d13;--shadow:0 8px 28px #0b192714;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans SC","Microsoft YaHei",sans-serif;font-size:15px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}input,textarea,select{background:#fff;color:var(--ink)}input,textarea,select{max-width:100%}img{max-width:100%}#app{max-width:900px;min-height:100vh;margin:auto;background:var(--bg);padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.header{background:linear-gradient(145deg,#101c29,#213348 81%,#6e572f);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 18px 19px;border-radius:0 0 26px 26px;box-shadow:0 8px 20px #15253722}.brand-row{display:flex;align-items:center;gap:11px}.brand-image{width:78px;height:62px;object-fit:contain;object-position:center;border-radius:12px;background:#223140}.brand-words{min-width:0;flex:1}.brand-title{font-size:16px;font-weight:850;letter-spacing:.25px;line-height:1.2}.brand-small{color:#dfc994;font-size:10px;letter-spacing:1.5px}.head-actions{display:flex;gap:7px}.icon-btn,.lang-btn{background:#ffffff18;border:1px solid #ffffff2c;color:white;border-radius:11px;min-height:39px;padding:7px 10px}.header-title{font-size:26px;font-weight:820;margin:20px 0 3px}.header-sub{font-size:12px;color:#d4dce4}.layout{padding:16px 15px}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:15px}.stat{background:#fff;border:1px solid #ecedef;border-radius:15px;padding:14px;box-shadow:0 2px 12px #13283b07}.stat b{display:block;font-size:19px;margin-top:7px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.stat small{color:var(--muted);font-size:12px}.stat.gold{background:linear-gradient(130deg,var(--navy),#29415a);color:#fff}.stat.gold small{color:#d5dfed}.panel{background:#fff;border:1px solid #e4e9ed;border-radius:17px;box-shadow:var(--shadow);margin:0 0 14px;overflow:hidden}.panel-pad{padding:16px}.section-title{font-size:16px;font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 13px}.section-title small{font-size:12px;color:var(--muted);font-weight:500}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar>*{flex:1;min-width:125px}.field{display:flex;flex-direction:column;gap:6px;margin:0 0 13px}.field label{font-size:12px;font-weight:740;color:#40546a}.input{width:100%;border:1px solid #d6dfe7;border-radius:10px;padding:11px 12px;min-height:43px;outline-color:var(--gold);background:#fff}.input:focus{border-color:#be9654;box-shadow:0 0 0 3px #dbac5630}.input[readonly]{background:#f4f6f8;color:#536274}textarea.input{min-height:70px;resize:vertical}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}.row{display:flex;align-items:center;gap:10px}.row.between{justify-content:space-between}.muted{color:var(--muted)}.tiny{font-size:12px}.btn{border:0;border-radius:11px;padding:11px 14px;font-weight:760;min-height:42px}.btn-gold{color:#1c2937;background:linear-gradient(125deg,#f9dfa1,#d7a443);box-shadow:0 4px 12px #d7a4432c}.btn-dark{background:var(--navy);color:white}.btn-ghost{color:var(--navy);background:#f2f5f7;border:1px solid #dce4e9}.btn-danger{color:var(--red);background:#fff0f0;border:1px solid #f1c4c4}.btn-sm{min-height:32px;padding:7px 10px;font-size:12px}.full{width:100%}.wrap{flex-wrap:wrap}.gap6{gap:6px}.filters{display:flex;gap:7px;overflow:auto;padding:3px 0 11px;scrollbar-width:none}.filter{border:1px solid #e1e6eb;border-radius:11px;background:#fff;min-width:76px;padding:10px 9px;white-space:nowrap;text-align:center;color:#46566b;font-size:12px;font-weight:720}.filter.active{background:var(--navy);color:#f6d58b;border-color:var(--navy)}.filter small{display:block;margin-top:3px;color:inherit;opacity:.75}.month-heading{display:flex;align-items:center;justify-content:space-between;background:#e8edf1;padding:12px 13px;font-weight:800;color:#5c6878;font-size:13px}.invoice-row{padding:13px 12px;border-bottom:1px solid #e9edf1;display:flex;gap:11px;align-items:center;cursor:pointer}.invoice-row:active{background:#f4f7fa}.invoice-row:last-child{border-bottom:0}.datebox{text-align:center;min-width:41px;color:#7c8898;font-size:10px}.datebox b{display:block;font-size:20px;font-weight:800;color:var(--navy)}.invoice-main{flex:1;min-width:0}.invoice-client{font-size:14px;font-weight:780;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.invoice-meta{margin-top:5px;color:#667487;font-size:12px}.invoice-sum{text-align:right;min-width:100px}.invoice-sum b{display:block;font-size:14px;white-space:nowrap}.invoice-sum small{display:block;color:#7b8795;margin-top:5px;font-size:11px}.chip{font-size:10px;font-weight:800;border-radius:6px;padding:3px 6px;margin-left:4px;display:inline-block;vertical-align:middle}.unpaid{background:#fbe7e8;color:#b03c45}.partial{background:#fff2d3;color:#98630d}.paid{background:#dff5ea;color:#207951}.empty{text-align:center;padding:36px 15px;color:#788597}.empty .symbol{font-size:35px;margin-bottom:8px}.fab{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));right:max(18px,calc((100vw - 880px)/2));z-index:5;box-shadow:0 9px 20px #9d702c50}.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:900px;background:#fff;box-shadow:0 -7px 20px #1b293516;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:11;border-top:1px solid #e4e6e9}.navitem{background:none;border:0;color:#8090a2;display:flex;align-items:center;flex-direction:column;gap:3px;font-size:11px;padding:3px}.navitem span{font-size:21px}.navitem.active{color:#ad7e32;font-weight:850}.subhead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px}.back{background:none;border:0;color:#445b73;font-size:14px;padding:8px 0}.linecard{background:#f8fafb;border:1px solid #dfe6eb;border-radius:12px;padding:12px;margin:0 0 10px}.itemgrid{display:grid;grid-template-columns:minmax(0,1fr) 78px 104px;gap:8px}.amount-strip{display:flex;justify-content:space-between;padding:14px 16px;background:var(--navy);color:white;font-size:18px;font-weight:850}.totals-list{padding:12px 16px}.totals-line{display:flex;justify-content:space-between;padding:7px 0;font-size:13px}.totals-line.strong{font-weight:850;font-size:18px;border-top:1px solid #d8e0e5;margin-top:6px;padding-top:12px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions>*{flex:1}.bank-card{background:linear-gradient(140deg,#132334,#2a3f54);border-radius:12px;padding:14px;color:#fff;margin-bottom:10px}.bank-card div{margin-top:4px}.bank-card strong{color:#f0cc7b}.status-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.status-option{padding:12px 5px;border:1px solid #d9e2e7;border-radius:11px;background:#fff;color:#41556a;text-align:center;font-size:12px;font-weight:750}.status-option.selected{border-color:#d3a348;background:#fff1d2;color:#79510e}.receipt-item{border-bottom:1px solid #e8ebef;padding:13px 2px}.receipt-item:last-child{border:0}.help{background:#fffaf0;border:1px solid #f0dfb5;color:#82612b;border-radius:10px;padding:11px;font-size:12px;margin-bottom:12px;line-height:1.55}.notice{padding:11px;border-radius:10px;background:#e8f4ed;color:#27634a;font-size:12px;margin-bottom:12px}#toaster{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);z-index:110;pointer-events:none}.toast{background:#152735;color:white;padding:11px 17px;border-radius:12px;box-shadow:0 8px 30px #2234;min-width:180px;text-align:center}.receipt-badge{display:inline-block;background:#e4f5ec;color:#16744d;border-radius:6px;padding:3px 7px;font-size:10px;font-weight:820;margin-left:6px}
/* Document preview and A4 printing */
.document-shell{background:#fff;border:1px solid #e2e5e9;border-radius:9px;box-shadow:0 2px 18px #12243115;padding:17px 15px;color:#18222e;font-family:Arial,"Noto Sans SC",sans-serif;font-size:11px;overflow-wrap:anywhere}.doc-top{display:flex;gap:14px;align-items:flex-start;border-bottom:2px solid #a99161;padding-bottom:12px}.doc-logo{width:130px;height:104px;object-fit:contain;object-position:center;background:#273440;border-radius:4px}.doc-company{flex:1;font-size:10px;line-height:1.55}.doc-company b{font-size:15px}.doc-heading{text-align:center;font-size:22px;font-weight:850;margin:15px 0}.doc-contacts{display:flex;justify-content:space-between;gap:12px;margin:12px 0 16px}.doc-contacts>div{flex:1;min-width:0}.doc-contacts>div:last-child{text-align:right}.doc-table{width:100%;border-collapse:collapse;font-size:10px;table-layout:fixed}.doc-table th{background:#e9edf0}.doc-table th,.doc-table td{border:1px solid #d6dce0;padding:7px 5px;text-align:left;vertical-align:top;word-wrap:break-word;white-space:pre-line}.doc-table th:nth-child(1){width:6%}.doc-table th:nth-child(3){width:10%}.doc-table th:nth-child(4){width:16%}.doc-table th:nth-child(5){width:18%}.doc-table td:nth-child(n+3),.doc-table th:nth-child(n+3){text-align:right}.doc-footer{margin:16px 0 8px;display:flex;gap:18px;align-items:flex-start}.doc-footer-left{flex:1;font-size:10px;white-space:pre-line;line-height:1.6}.doc-footer-right{width:200px;max-width:50%}.doc-line{display:flex;justify-content:space-between;gap:6px;padding:5px;border-bottom:1px solid #ddd}.doc-line.bold{font-weight:850;background:#e8edf0}.doc-payment{margin-top:15px;border:1px solid #dfe3e5;padding:10px;line-height:1.6;font-size:10px}.print-area{margin-bottom:18px}.settings-divider{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#9a7233;font-weight:850;margin:20px 0 12px}.settings-divider:first-child{margin-top:0}hr{border:0;border-top:1px solid #e4e8eb;margin:14px 0}.overflow{overflow:auto}.client-row{padding:12px 2px;border-bottom:1px solid #e6ebef}.client-row:last-child{border:0}.client-row b{font-size:14px}.client-row p{font-size:12px;line-height:1.45;color:#6b7785;margin:5px 0}.footer-hint{font-size:11px;color:#8995a2;margin:12px 2px}.hidden{display:none!important}
@media(min-width:720px){.layout{padding:23px 27px}.stats{grid-template-columns:repeat(4,1fr)}.header{padding-left:27px;padding-right:27px}.document-shell{padding:33px 38px;font-size:12px}.doc-table{font-size:11px}.doc-logo{width:170px;height:115px}}
@media(max-width:390px){.itemgrid{grid-template-columns:minmax(0,1fr) 64px 85px;gap:5px}.linecard{padding:9px}.input{padding:10px 8px}.doc-logo{width:98px;height:88px}.doc-company b{font-size:12px}.doc-table{font-size:9px}.doc-contacts{font-size:10px}.doc-footer{gap:7px}}
@page{size:A4;margin:14mm 12mm}
@media print{html,body{background:#fff!important;font-size:12px;print-color-adjust:exact;-webkit-print-color-adjust:exact}#app{max-width:none;padding:0!important;background:white}.header,.bottomnav,.no-print,.fab,#toaster{display:none!important}.layout{padding:0!important}.panel{border:0;box-shadow:none;margin:0;overflow:visible}.document-shell{border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible;font-size:11px}.doc-table{font-size:10px}.doc-table tr{break-inside:avoid}.doc-top,.doc-heading,.doc-contacts{break-inside:avoid}.doc-footer{break-inside:avoid}.doc-logo{width:150px;height:110px}.print-area{display:block!important}}

/* Optional transport reference and move-upstairs note fields */
.reference-card{background:#eef2f5;border:1px solid #e0e7ec;border-radius:10px;padding:10px;margin:9px 0 12px}.reference-card .field:last-of-type{margin-bottom:4px}.reference-card .tiny{line-height:1.5}.checkbox-row{display:flex;gap:9px;align-items:flex-start;font-size:12px;font-weight:700;color:#33485e;margin:3px 0 9px}.checkbox-row input{width:17px;height:17px;accent-color:#ad8134;flex-shrink:0}.invoice-item .lineAmount{font-variant-numeric:tabular-nums}
/* CloudSync v3, printable white invoice, original supplied logo */
:root{--bg:#fff}
body,#app{background:#fff}
.layout{background:#fff}
.document-shell{background:#fff;border:1px solid #e5e6e8;box-shadow:0 3px 12px #14263513;border-radius:9px;color:#111;padding:19px 19px 25px}
.doc-top{border-bottom:2px solid #222;gap:13px;align-items:center}
.doc-logo{width:74px;height:74px;object-fit:contain;background:transparent;border-radius:0;flex:none}
.doc-company{font-size:10px;line-height:1.55}.doc-company b{font-size:14px}
.doc-heading{font-size:23px;letter-spacing:1px;margin:17px auto 10px}
.doc-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;border-bottom:1px solid #d7dbe0;padding:10px 0}
.doc-contacts{margin:14px 0 15px}.doc-contacts>div:last-child{text-align:left}
.doc-table th{background:#edf0f2;color:#1a232c}
.doc-table th,.doc-table td{padding:7px 6px;line-height:1.4;border-color:#dadcde}
.doc-table th:nth-child(1){width:8%}.doc-table th:nth-child(3){width:10%}.doc-table th:nth-child(4){width:17%}.doc-table th:nth-child(5){width:18%}
.doc-group td{font-weight:750!important;text-align:left!important;background:#f5f6f6!important;padding:8px 9px!important;border-top:1.2px solid #aeb7bd!important}
.doc-subtotal td{text-align:right!important;font-weight:bold;background:#fafafa}
.doc-table .subdesc{font-size:9px;color:#434a50;padding-top:3px}
.doc-footer{margin:14px 0 10px}.doc-footer-left{font-size:11px}
.doc-line.bold{background:#ededee;color:#151e26}
.doc-thanks{text-align:center;border-top:1px solid #d2d4d6;margin-top:21px;padding-top:14px;font-size:11px;line-height:1.65}
.doc-thanks span{display:block;font-size:10px}
.doc-payment{border:1px solid #aeb4ba;border-radius:3px;padding:10px 13px;line-height:1.6;background:#fff;color:#17222c}
.reference-card{background:#f4f6f8;border-radius:11px;padding:13px 11px;margin:8px 0 13px}
.do-ref{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:8px}.do-ref .field{margin:0 0 10px;min-width:0}.do-ref .input{min-width:0}
.extra-charge{display:grid;grid-template-columns:1fr 122px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #dce2e6}
.extra-charge .field{margin:0}.extra-charge .checkbox-row{font-weight:600;color:#263c50;font-size:13px}
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 18px;background:linear-gradient(140deg,#162638,#253d4c 70%,#4f432d)}
.login-card{width:min(100%,400px);padding:28px 23px 24px;background:#fff;border-radius:22px;box-shadow:0 15px 50px #080d1538;text-align:center}
.login-logo{width:112px;height:112px;object-fit:contain;margin:0 auto 7px}.login-card h1{font-size:18px;margin:7px 0}.login-card p{line-height:1.6;color:#667281;font-size:13px}
.login-card form{text-align:left;margin:22px 0 4px}.login-card label{display:block;font-size:12px;font-weight:700;margin-bottom:7px;color:#36475b}
.login-card .btn{margin-top:14px}.login-error{color:#b12634;font-size:12px;min-height:18px;margin-top:10px}
.sync-indicator{font-size:10px;color:#e8d5a7;display:inline-block;margin-top:2px}
@media(max-width:440px){.document-shell{padding:13px 10px}.doc-table{font-size:9px}.doc-logo{width:60px;height:64px}.doc-company b{font-size:12px}.doc-meta{font-size:10px}.extra-charge{grid-template-columns:1fr 95px}}
@media print{html,body,#app,.layout{background:#fff!important} .document-shell{border:0;box-shadow:none;page-break-inside:auto;padding:5mm 3mm!important}.doc-table tbody tr{page-break-inside:avoid}.doc-top{border-color:#222!important}.doc-thanks,.doc-payment{break-inside:avoid}.doc-table th{background:#eee!important} .doc-group td{background:#f5f5f5!important}}

/* Login password show/hide control — CloudSync v3.1 */
.password-control{position:relative;display:flex;align-items:center}
.password-control>.input{padding-right:56px;min-width:0;width:100%;font-size:16px;letter-spacing:.1px}
.password-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:46px;height:44px;border:0;border-radius:9px;background:#f6f7f8;color:#48596b;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.password-eye:focus-visible{outline:2px solid #cf9f40;outline-offset:2px}
.password-eye:active{background:#f3e8c9}
.password-help{font-size:11px;color:#727d88;margin-top:7px}
.login-error{line-height:1.65;white-space:normal;word-wrap:break-word}