/* CLF Document Desk — self-contained static invoice/receipt builder */
*,*::before,*::after{box-sizing:border-box}
:root{
  --navy:#101a46;--navy-2:#1c2b69;--navy-3:#080f31;--ink:#16204b;--ink-soft:#4f5878;
  --paper:#fff;--canvas:#e8ebef;--canvas-2:#dfe4e8;--cream:#f5f3ee;--cream-2:#ebe8e0;
  --gold:#ca9343;--gold-soft:#f4e3c2;--gold-pale:#fff8eb;--red:#bf3535;--teal:#276b68;
  --line:rgba(16,26,70,.12);--line-strong:rgba(16,26,70,.24);--muted:#747b94;
  --success:#237a57;--danger:#b43d3d;
  --shadow-xs:0 1px 2px rgba(8,15,49,.06),0 8px 20px -14px rgba(8,15,49,.28);
  --shadow-sm:0 2px 5px rgba(8,15,49,.06),0 18px 44px -28px rgba(8,15,49,.42);
  --shadow-paper:0 2px 4px rgba(8,15,49,.1),0 28px 52px -28px rgba(8,15,49,.48);
  --radius:18px;--radius-sm:11px;--ease:cubic-bezier(.22,1,.36,1);--preview-h:38px;--header-h:66px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang HK","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --display:Georgia,"Songti TC","Noto Serif TC","Times New Roman",serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
html{height:100%}
body{margin:0;min-height:100%;overflow-x:hidden;background:var(--canvas);color:var(--ink);font:14px/1.55 var(--font);letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
body.is-preview-hidden{--preview-h:0px}
body.has-dialog{overflow:hidden}
h1,h2,h3,h4,p,dl,dd,dt{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:#eed3a2;color:var(--navy-3)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:10px;top:10px;z-index:1000;padding:9px 13px;border-radius:8px;background:#fff;color:var(--navy);transform:translateY(-160%);transition:.2s;box-shadow:var(--shadow-xs)}
.skip-link:focus{transform:none}

/* Preview flag */
.preview-strip{position:fixed;inset:0 0 auto;z-index:300;height:var(--preview-h);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 54px;background:var(--navy-3);color:rgba(255,255,255,.72);font-size:11px;border-bottom:1px solid rgba(255,255,255,.08)}
.preview-strip strong{color:#fff;font-size:11px;letter-spacing:.02em}
.preview-strip__dot{width:6px;height:6px;flex:none;border-radius:50%;background:#e5bd6b;box-shadow:0 0 0 4px rgba(229,189,107,.13)}
.preview-strip button{position:absolute;right:13px;top:5px;width:28px;height:28px;color:rgba(255,255,255,.62);font-size:18px;line-height:1}
.preview-strip button:hover{color:#fff}

/* App header */
.app-header{position:fixed;inset:var(--preview-h) 0 auto;z-index:200;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 clamp(16px,2.8vw,40px);background:rgba(16,26,70,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 12px 30px -25px rgba(0,0,0,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.app-brand{display:flex;align-items:center;gap:12px;min-width:0}
.app-brand img{width:76px;height:40px;object-fit:contain;padding:4px;border-radius:9px;background:#fff}
.app-brand span{display:grid;gap:3px;min-width:0}
.app-brand b{font-size:14px;letter-spacing:.025em}
.app-brand small{color:rgba(255,255,255,.42);font:700 8px var(--mono);letter-spacing:.14em}
.app-header__status{display:flex;align-items:center;gap:10px}
.save-state,.privacy-badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;border-radius:999px;color:rgba(255,255,255,.68);font-size:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.privacy-badge i{width:6px;height:6px;border-radius:50%;background:#61d4a4;box-shadow:0 0 0 3px rgba(97,212,164,.13)}
.language-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);flex:none}
.language-switch button{display:grid;place-items:center;min-width:29px;height:25px;padding:0 6px;border-radius:999px;color:rgba(255,255,255,.65);font-size:10px;font-weight:750;letter-spacing:.01em;transition:.18s}
.language-switch button:hover{color:#fff;background:rgba(255,255,255,.08)}
.language-switch button.is-active{color:var(--navy);background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.18)}
.icon-button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.75);font:700 12px var(--mono);transition:.2s}
.icon-button:hover{background:rgba(255,255,255,.1);color:#fff}

/* Workspace */
.workspace{height:100dvh;padding-top:calc(var(--preview-h) + var(--header-h));display:grid;grid-template-columns:minmax(430px,520px) minmax(560px,1fr);gap:16px;overflow:hidden;background:var(--canvas)}
.editor,.preview-panel{min-width:0;min-height:0;background:var(--cream);border:1px solid rgba(16,26,70,.1);box-shadow:var(--shadow-sm)}
.editor{margin:16px 0 16px 16px;border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
.preview-panel{margin:16px 16px 16px 0;border-radius:var(--radius);background:linear-gradient(152deg,#eef0f3 0%,var(--canvas) 58%,#dde2e7 100%);display:flex;flex-direction:column;overflow:hidden}
.editor__topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);flex:none}
.type-switch{display:flex;align-items:center;gap:3px;padding:3px;border-radius:11px;background:var(--cream-2);border:1px solid rgba(16,26,70,.07)}
.type-switch__button{display:inline-flex;align-items:center;gap:6px;min-height:33px;padding:0 12px;border-radius:8px;color:var(--muted);font:750 9px var(--mono);letter-spacing:.06em;transition:.22s var(--ease)}
.type-switch__button small{font:600 9px var(--font);letter-spacing:0}
.type-switch__button.is-active{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(16,26,70,.09)}
.editor__quick-actions,.preview-toolbar__actions,.editor__footer-actions{display:flex;align-items:center;gap:7px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;transition:.22s var(--ease)}
.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.button--primary{background:var(--navy);color:#fff;box-shadow:0 9px 18px -12px rgba(16,26,70,.95)}
.button--primary:hover{background:var(--navy-2);transform:translateY(-1px)}
.button--gold{background:var(--gold);color:#fff;box-shadow:0 10px 20px -14px rgba(116,73,21,.9)}
.button--gold:hover{background:#b98235;transform:translateY(-1px)}
.button--outline{border:1px solid var(--line-strong);color:var(--navy);background:#fff}
.button--outline:hover{border-color:var(--navy);background:#f7f8fb}
.button--ghost{border:1px solid transparent;color:var(--ink-soft)}
.button--ghost:hover{background:rgba(16,26,70,.06);color:var(--navy)}
.button--full{width:100%}
.button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.editor__scroll{flex:1;min-height:0;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-gutter:stable;padding:15px}
.editor__scroll::-webkit-scrollbar,.paper-stage::-webkit-scrollbar{width:9px}
.editor__scroll::-webkit-scrollbar-thumb,.paper-stage::-webkit-scrollbar-thumb{background:rgba(16,26,70,.18);border-radius:99px;border:2px solid transparent;background-clip:content-box}

/* Capture card */
.capture-card{padding:19px;border:1px solid rgba(202,147,67,.32);border-radius:15px;background:linear-gradient(150deg,#fffdf8 0%,#fff 65%);box-shadow:var(--shadow-xs)}
.section-heading{display:flex;align-items:flex-start;gap:11px}
.section-heading__number{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--navy);color:#fff;font:750 9px var(--mono)}
.section-heading h1,.section-heading h2{font-size:16px;line-height:1.25;color:var(--navy);letter-spacing:-.015em}
.section-heading p{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.55}
.section-heading--compact .section-heading__number{width:24px;height:24px;border-radius:7px;background:var(--cream-2);color:var(--navy)}
.section-heading--compact h2{font-size:15px}
#messageInput{width:100%;min-height:100px;margin-top:15px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;line-height:1.7;resize:vertical;transition:.2s}
#messageInput::placeholder{color:#a4a9ba}
#messageInput:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(202,147,67,.11);outline:0}
.sample-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:9px}
.sample-row>span{color:var(--muted);font-size:10px}
.sample-chip{padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font-size:10px;background:#fff;transition:.2s}
.sample-chip:hover{border-color:var(--gold);color:var(--navy);background:var(--gold-pale)}
.capture-card__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}
.parse-hint{display:flex;gap:6px;color:var(--muted);font-size:10px;line-height:1.5}
.parse-hint span{color:var(--gold);font-weight:800}
.parse-feedback{min-height:0;margin-top:10px;padding:0;color:var(--success);font-size:11px;line-height:1.5}
.parse-feedback:not(:empty){min-height:32px;padding:8px 10px;border-radius:8px;background:rgba(35,122,87,.08)}
.parse-feedback.is-error{color:var(--danger);background:rgba(180,61,61,.08)}

/* Form */
.form-section{margin-top:12px;padding:17px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.92);box-shadow:0 1px 1px rgba(16,26,70,.02)}
.field-grid{display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px}
.field-grid--two{grid-template-columns:1fr 1fr}
.field-grid--nested{margin-top:0}
.field{position:relative;display:grid;gap:6px;min-width:0}
.field--span2{grid-column:1/-1}
.field>span{color:var(--ink-soft);font-size:10.5px;font-weight:700;letter-spacing:.015em}
.field input,.field select,.field textarea{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12.5px;transition:.2s}
.field textarea{resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(28,43,105,.08);outline:0}
.field input::placeholder,.field textarea::placeholder{color:#a9adbc}
.field__inline-action{position:absolute;right:7px;bottom:7px;padding:3px 5px;border-radius:5px;color:var(--gold);font-size:9.5px;font-weight:700;background:#fff}
.field__inline-action:hover{background:var(--gold-pale)}

/* Item editor */
.items-table{display:grid;gap:7px;margin-top:14px}
.items-table__head,.item-row{display:grid;grid-template-columns:minmax(150px,1fr) 58px 86px 78px 27px;align-items:center;gap:7px}
.items-table__head{padding:0 1px;color:var(--muted);font:700 8px var(--mono);letter-spacing:.03em}
.items-table__head span:nth-child(n+2){text-align:center}
.item-row{position:relative;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fbfbfc}
.item-row textarea,.item-row input{width:100%;min-width:0;min-height:36px;padding:7px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:11.5px;resize:vertical}
.item-row textarea:focus,.item-row input:focus{border-color:var(--navy-2);outline:0;box-shadow:0 0 0 3px rgba(28,43,105,.07)}
.item-row .item-qty,.item-row .item-unit-price{text-align:right}
.item-total{min-width:0;text-align:right;color:var(--navy);font:730 10px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-remove{width:27px;height:27px;border-radius:7px;color:var(--muted);font-size:16px;line-height:1}
.row-remove:hover{background:#faeaea;color:var(--danger)}
.total-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 13px;border-radius:10px;background:var(--navy);color:#fff}
.total-row span{font-size:11px;color:rgba(255,255,255,.62)}
.total-row strong{font:700 16px var(--mono);letter-spacing:-.03em}

/* Payment and stamp */
.toggle-field{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-top:14px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfbfc;cursor:pointer}
.toggle-field>span{display:grid;gap:2px}
.toggle-field b{font-size:11.5px;color:var(--ink)}
.toggle-field small{color:var(--muted);font-size:10px}
.toggle-field input{position:absolute;opacity:0;pointer-events:none}
.toggle-field i{position:relative;width:36px;height:21px;border-radius:999px;background:#c7cad4;transition:.2s}
.toggle-field i::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(8,15,49,.25);transition:.2s}
.toggle-field input:checked+i{background:var(--success)}
.toggle-field input:checked+i::after{transform:translateX(15px)}
.bank-fields{transition:.2s}
.bank-fields.is-disabled{opacity:.48}
.stamp-upload{position:relative;display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.stamp-upload__copy{display:grid;gap:2px;flex:1;min-width:0}
.stamp-upload__copy b{font-size:11.5px}
.stamp-upload__copy small{color:var(--muted);font-size:10px;line-height:1.45}
#stampInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.advanced-settings{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.68)}
.advanced-settings summary{padding:13px 15px;color:var(--ink-soft);font-size:11px;font-weight:720;cursor:pointer;list-style:none}
.advanced-settings summary::-webkit-details-marker{display:none}
.advanced-settings summary::after{content:"＋";float:right;color:var(--gold)}
.advanced-settings[open] summary::after{content:"−"}
.advanced-settings .field-grid{padding:0 15px 15px}

/* Editor footer */
.editor__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:11px 15px;background:rgba(255,255,255,.92);border-top:1px solid var(--line)}
.recent-documents{display:flex;align-items:center;gap:7px;min-width:0}
.recent-documents label{flex:none;color:var(--muted);font-size:10px}
.recent-documents select{min-width:130px;max-width:210px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11px}

/* Preview panel */
.preview-toolbar{height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 17px;background:rgba(255,255,255,.87);border-bottom:1px solid var(--line);flex:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.preview-toolbar>div:first-child{display:grid;gap:2px}
.preview-toolbar b{color:var(--navy);font-size:12px}
.preview-toolbar span{color:var(--muted);font:650 9.5px var(--mono);letter-spacing:.04em}
.preview-button{min-height:32px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-soft);font-size:10.5px;font-weight:700}
.preview-button:hover{border-color:var(--navy);color:var(--navy)}
.preview-button--accent{display:none;border-color:var(--navy);background:var(--navy);color:#fff}
.paper-stage{flex:1;min-height:0;overflow:auto;overflow-anchor:none;padding:22px;scrollbar-gutter:stable}
.paper-stage.is-fitting{padding-left:0;padding-right:0}
.document{--doc-font:"Helvetica Neue","PingFang HK","PingFang TC","Noto Sans TC",Arial,sans-serif;position:relative;display:flex;flex-direction:column;width:210mm;min-height:297mm;padding:14mm 15mm 13mm;background:#fff;color:#20243a;box-shadow:var(--shadow-paper);transform-origin:top left;overflow:hidden;font-family:var(--doc-font);font-size:10.5pt;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"kern" 1;letter-spacing:0;-webkit-font-smoothing:antialiased}
.document>*{flex:none}
.document::before{content:"";position:absolute;inset:0 0 auto;height:4.2px;background:linear-gradient(90deg,var(--navy) 0 58%,var(--gold) 58% 100%)}
.doc__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12mm;padding-bottom:4.5mm;border-bottom:1px solid #e2e4ea}
.doc__logo{width:72mm;max-height:30mm;object-fit:contain;object-position:left top}
.doc__itok-logo{width:15mm;max-height:9mm;object-fit:contain;object-position:right top;margin-top:.6mm}
.doc__issuer{margin-top:3mm;color:#6f5a34;font-size:9pt;line-height:1.5;letter-spacing:.008em}
.doc__issuer b{color:#20243a;font-weight:650;letter-spacing:.005em}
.doc__issuer p{max-width:130mm;color:#5f6579;font-size:8.6pt}
.doc__title{position:relative;margin:9mm 0 7mm;text-align:center;font-size:21pt;font-weight:600;line-height:1.05;letter-spacing:.13em;color:var(--navy)}
.doc__title::after{content:"";display:block;width:13mm;height:1.2px;margin:3.2mm auto 0;background:var(--gold)}
.doc__meta{margin-left:auto;width:68mm;display:grid;gap:0;padding:3.2mm 4mm;border:1px solid #e1e4eb;border-left:2px solid var(--gold);border-radius:1.5mm;background:#fafaf8;color:#30354d;font-size:9.8pt}
.doc__meta p{display:grid;grid-template-columns:26mm 1fr;align-items:baseline;gap:3mm;min-height:5.3mm}
.doc__meta p + p{border-top:1px solid #e8e9ed}
.doc__meta span{color:#777d90;font-size:7.8pt;font-weight:650;letter-spacing:.075em;text-transform:uppercase}
.doc__meta b{font-weight:600;text-align:right;white-space:nowrap}
.doc__bill-to{margin-top:7mm;min-height:14mm;font-size:10.5pt}
.doc__bill-to>b{display:block;margin-bottom:2.5mm;color:#777d90;font-size:7.8pt;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
#previewBillTo{padding-left:0;display:grid;gap:.8mm;color:#30354d}
#previewBillTo p{line-height:1.38}
#previewBillTo p:first-child{font-weight:650}
#previewBillTo .doc__empty{color:#8a8f9e;font-style:italic;font-weight:400}
.doc__table{width:100%;margin-top:4.2mm;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:10pt}
.doc__table .col-no{width:13%}
.doc__table .col-item{width:63%}
.doc__table .col-total{width:24%}
.doc__table th,.doc__table td{border-right:1px solid #d9dce4;border-bottom:1px solid #d9dce4}
.doc__table th:first-child,.doc__table td:first-child{border-left:1px solid #d9dce4}
.doc__table th{height:13mm;padding:2.4mm 3mm;border-top:1px solid var(--navy);border-bottom-color:var(--navy);background:var(--navy);color:#fff;font-size:8.3pt;font-weight:650;letter-spacing:.08em;text-align:center;text-transform:uppercase;vertical-align:middle}
.doc__table th:first-child{border-top-left-radius:1.2mm}
.doc__table th:last-child{border-top-right-radius:1.2mm}
.doc__table td{height:17mm;padding:3mm 3.6mm;color:#30354d;vertical-align:middle;overflow-wrap:anywhere}
.doc__table tbody tr:nth-child(even) td{background:#fafaf8}
.doc__table td:first-child{text-align:center}
.doc__table td:last-child{text-align:center;white-space:nowrap}
.doc__table .doc__item-description{text-align:left;line-height:1.45}
.doc__grand-total{display:flex;justify-content:flex-end;align-items:baseline;gap:8mm;margin-top:3.5mm;padding:3mm 3.5mm;border:1px solid #d9dce4;border-top:2px solid var(--gold);background:#fafaf8;font-size:10pt}
.doc__grand-total span{color:#747a8d;font-size:7.8pt;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.doc__grand-total b{color:var(--navy);font-size:12pt;font-weight:700}
.doc__bank{margin-top:6.5mm;padding:4mm 4.5mm;border:1px solid #e1e4eb;border-left:2px solid var(--navy);border-radius:1.5mm;background:#fafaf8;font-size:9.5pt;line-height:1.58}
.doc__bank h3,.doc__notes h3{margin:0;color:var(--navy);font-size:8.2pt;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.doc__bank dl{margin-top:2.3mm}
.doc__bank dl>div{display:grid;grid-template-columns:67mm 1fr;gap:3mm;min-height:5mm}
.doc__bank dt{color:#6c7285;font-size:8.6pt;font-weight:600}
.doc__bank dd{color:#30354d;font-weight:500}
.doc__settlement{display:grid;grid-template-columns:minmax(0,1fr) 38mm;align-items:start;gap:6mm;min-height:36mm;margin-top:4mm}
.doc__notes{grid-column:1;grid-row:1;margin-top:0;font-size:9.5pt;line-height:1.5}
.doc__notes p{margin-top:2mm;white-space:pre-wrap}
.doc__stamp{grid-column:2;grid-row:1;width:34mm;height:34mm;margin:0 3mm 0 auto;display:grid;place-items:center;pointer-events:none;opacity:.92;break-inside:avoid}
.doc__stamp[hidden]{display:none!important}
.doc__stamp:empty{display:none}
.doc__stamp img:not([src]),.doc__stamp img[src=""]{display:none}
.doc__stamp img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.doc__footer{position:static;margin-top:auto;padding-top:3mm;border-top:1px solid #e2e4ea;text-align:center;color:#70768a;font-size:8pt;line-height:1.55}
.doc__footer p:first-child{color:#50566c;font-weight:550}
.doc__footer i{font-style:normal}
.print-warning{padding:0 18px 12px;text-align:center;color:var(--muted);font-size:9.5px;line-height:1.5;flex:none}

/* Help dialog */
.help-dialog{width:min(520px,calc(100% - 28px));padding:30px;border:0;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 40px 100px -35px rgba(8,15,49,.65)}
.help-dialog::backdrop{background:rgba(8,15,49,.72);backdrop-filter:blur(6px)}
.help-dialog h2{margin-top:7px;font-size:24px;letter-spacing:-.035em;color:var(--navy)}
.dialog-kicker{color:var(--gold);font:750 9px var(--mono);letter-spacing:.13em}
.dialog-close{position:absolute;right:13px;top:13px;width:31px;height:31px;border-radius:50%;color:var(--muted);font-size:20px;background:var(--cream)}
.dialog-close:hover{color:var(--navy)}
.help-steps{display:grid;gap:11px;margin:23px 0;padding:0;list-style:none;counter-reset:step}
.help-steps li{display:grid;grid-template-columns:29px 1fr;column-gap:10px;align-items:start}
.help-steps li::before{counter-increment:step;content:counter(step);grid-row:1/3;display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:var(--navy);color:#fff;font:750 10px var(--mono)}
.help-steps b{font-size:11px}
.help-steps span{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.55}
.help-note{margin-bottom:18px;padding:13px;border-radius:11px;background:var(--gold-pale);border-left:3px solid var(--gold)}
.help-note b{font-size:10px}.help-note p{margin-top:4px;color:var(--ink-soft);font-size:9.5px;line-height:1.6}

/* Toast */
.toast{position:fixed;left:50%;bottom:25px;z-index:600;display:flex;align-items:center;gap:9px;max-width:calc(100% - 28px);padding:10px 14px;border-radius:11px;background:var(--navy);color:#fff;box-shadow:0 20px 45px -22px rgba(8,15,49,.8);transform:translate(-50%,25px);opacity:0;pointer-events:none;transition:.28s var(--ease)}
.toast.is-visible{transform:translate(-50%,0);opacity:1}
.toast span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--gold);font-size:10px;font-weight:800}
.toast p{font-size:11px;line-height:1.45}

/* Access gate */
body.is-auth-locked .app-shell{display:none!important}
.auth-gate{position:fixed;inset:0;z-index:500;display:grid;place-items:center;overflow:auto;padding:24px;background:
  radial-gradient(circle at 16% 12%,rgba(202,147,67,.2),transparent 30%),
  radial-gradient(circle at 84% 88%,rgba(39,107,104,.18),transparent 30%),
  linear-gradient(145deg,#080f31 0%,#101a46 52%,#1c2b69 100%);color:#fff}
.auth-card{position:relative;width:min(440px,100%);padding:31px;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:rgba(255,255,255,.075);box-shadow:0 35px 90px -35px rgba(0,0,0,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.language-switch--auth{position:absolute;right:24px;top:27px}
.language-switch--auth button.is-active{color:var(--navy);background:#e5bd6b}
.auth-card__brand{display:flex;align-items:center;gap:13px;padding-bottom:21px;border-bottom:1px solid rgba(255,255,255,.11)}
.auth-card__brand img{width:78px;height:44px;padding:4px;border-radius:10px;object-fit:contain;background:#fff}
.auth-card__brand span{display:grid;gap:4px}
.auth-card__brand b{font-size:16px;letter-spacing:.02em}
.auth-card__brand small{color:rgba(255,255,255,.47);font:700 8px var(--mono);letter-spacing:.13em}
.auth-card__kicker{margin-top:24px;color:#e5bd6b;font:750 9px var(--mono);letter-spacing:.14em}
.auth-card h1{margin-top:7px;font-size:27px;line-height:1.2;letter-spacing:-.035em}
.auth-card__intro{margin-top:10px;color:rgba(255,255,255,.68);font-size:12px;line-height:1.65}
.auth-card form{display:grid;gap:9px;margin-top:23px}
.auth-card label{color:rgba(255,255,255,.82);font-size:11.5px;font-weight:700}
.auth-card input{width:100%;height:47px;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;outline:0;transition:.2s}
.auth-card input::placeholder{color:rgba(255,255,255,.38)}
.auth-card input:focus{border-color:#e5bd6b;box-shadow:0 0 0 3px rgba(229,189,107,.14)}
.auth-card__error{min-height:0;color:#ffc3c3;font-size:11px;line-height:1.45}
.auth-card__error:not(:empty){min-height:20px;padding-top:2px}
.auth-card .button--primary{margin-top:3px;min-height:46px;background:#e5bd6b;color:#101a46;box-shadow:0 12px 24px -15px rgba(229,189,107,.8)}
.auth-card .button--primary:hover{background:#ecc983}
.auth-card__footnote{display:block;margin-top:17px;color:rgba(255,255,255,.42);font-size:10px;line-height:1.55}
.icon-button--text{width:auto;min-width:54px;padding:0 11px;border-radius:999px;font:700 11px var(--font);letter-spacing:.02em}

/* Payment proof upload */
.proof-upload{position:relative;display:flex;align-items:center;gap:9px;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fbfbfc}
.proof-upload__copy{display:grid;gap:3px;flex:1;min-width:0}
.proof-upload__copy b{font-size:12px}
.proof-upload__copy small{color:var(--muted);font-size:10.5px;line-height:1.45}
#proofInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.proof-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.proof-preview__empty{grid-column:1/-1;padding:13px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);font-size:11px;line-height:1.5;background:rgba(255,255,255,.6)}
.proof-preview__item{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:9px;min-width:0;margin:0;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.proof-preview__item img{width:62px;height:54px;border-radius:7px;object-fit:cover;background:var(--cream-2)}
.proof-preview__item figcaption{display:grid;grid-template-columns:1fr auto;gap:3px 7px;min-width:0}
.proof-preview__item figcaption span{grid-column:1/-1;overflow:hidden;color:var(--ink);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.proof-preview__item figcaption small{color:var(--muted);font-size:10px}
.proof-preview__remove{justify-self:end;padding:3px 5px;border-radius:5px;color:var(--danger);font-size:10px;font-weight:700}
.proof-preview__remove:hover{background:#faeaea}
.proof-print-toggle{margin-top:12px}
.proof-sheet{display:grid;gap:22px;margin-top:22px}
.proof-page{display:flex;flex-direction:column;width:210mm;height:296.5mm;padding:14mm 15mm 12mm;background:#fff;color:#1b1b1b;box-shadow:var(--shadow-paper);overflow:hidden;font-family:"Helvetica Neue",Arial,"PingFang HK","PingFang TC",sans-serif}
.proof-page__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex:none;padding-bottom:4mm;border-bottom:1px solid #252525;font-size:10pt}
.proof-page__header b{font-weight:600}
.proof-page__header span{color:#666;font:600 9pt var(--mono)}
.proof-page img{display:block;flex:1;min-height:0;width:100%;height:auto;margin-top:5mm;object-fit:contain;background:#f8f8f8}

@media(max-width:650px){
  .auth-card{padding:24px}
  .auth-card h1{font-size:23px}
  .language-switch--auth{right:19px;top:23px}
  .proof-upload{align-items:stretch;flex-wrap:wrap}
  .proof-upload__copy{flex-basis:100%}
  .proof-preview{grid-template-columns:1fr}
  .proof-page{max-width:100%;height:auto;aspect-ratio:210/297}
}

/* Responsive */
@media(max-width:1180px){
  .workspace{grid-template-columns:minmax(390px,470px) minmax(500px,1fr)}
  .items-table__head,.item-row{grid-template-columns:minmax(120px,1fr) 52px 75px 68px 27px}
}
@media(max-width:980px){
  body{overflow:auto;padding-top:var(--preview-h)}
  .app-header{position:sticky;top:var(--preview-h)}
  .workspace{height:auto;min-height:100dvh;padding-top:0;display:flex;flex-direction:column;gap:0;overflow:visible}
  .editor,.preview-panel{margin:0;border-radius:0;box-shadow:none;border-left:0;border-right:0}
  .editor{overflow:visible}
  .editor__scroll{overflow:visible;padding:14px}
  .preview-panel{min-height:760px;border-top:9px solid var(--navy-3)}
  .paper-stage{min-height:690px;overflow:auto}
  .preview-button--accent{display:inline-flex}
  .editor__footer{position:sticky;bottom:0;z-index:30;box-shadow:0 -12px 30px -24px rgba(8,15,49,.8)}
}
@media(max-width:650px){
  :root{--header-h:60px}
  .preview-strip{justify-content:flex-start;padding-left:15px;font-size:9px}
  .preview-strip span:not(.preview-strip__dot){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-header{padding:0 12px;gap:10px}
  .app-header__status{gap:6px}
  .app-brand img{width:63px;height:35px}
  .app-brand small,.privacy-badge{display:none}
  .editor__topbar{align-items:stretch;flex-direction:column}
  .editor__quick-actions{justify-content:space-between}
  .editor__quick-actions .button{flex:1}
  .field-grid--two{grid-template-columns:1fr}
  .field--span2{grid-column:auto}
  .capture-card__actions{align-items:flex-end;flex-direction:column}
  .capture-card__actions .button{width:100%}
  .parse-hint{width:100%}
  .items-table__head{display:none}
  .item-row{grid-template-columns:1fr 1fr 1fr 27px;gap:6px;padding:9px}
  .item-row label:first-child{grid-column:1/-1}
  .item-row .item-total{grid-column:1/4;text-align:right;align-self:center}
  .item-row .row-remove{grid-column:4;grid-row:3}
  .editor__footer{align-items:stretch;flex-direction:column}
  .recent-documents{justify-content:space-between}
  .recent-documents select{max-width:none;flex:1}
  .editor__footer-actions .button{flex:1}
  .preview-toolbar{padding:0 12px}
  .preview-toolbar__actions{gap:4px}
  .paper-stage{padding:11px 7px}
  .print-warning{padding:0 12px 11px}
  .stamp-upload{align-items:stretch;flex-wrap:wrap}
  .stamp-upload__copy{flex-basis:100%}
}
@media(max-width:480px){
  .save-state{display:none}
  .auth-card__brand img{width:66px;height:39px}
  .auth-card__brand b{font-size:14px}
  .auth-card__brand small{display:none}
  .language-switch--auth{right:16px;top:20px}
  .language-switch button{min-width:26px;padding:0 5px}
}
@media(max-width:390px){
  .type-switch__button{padding:0 8px}.editor__scroll{padding:10px}.form-section,.capture-card{padding:14px}
  .preview-button{padding:0 8px}.preview-toolbar span{display:none}
}

@media print{
  @page{size:A4 portrait;margin:0}

  html,body{
    width:210mm!important;height:296.5mm!important;min-height:0!important;
    margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;
  }
  body{-webkit-font-smoothing:auto!important}
  .auth-gate,.skip-link,.preview-strip,.app-header,.editor,.preview-toolbar,.print-warning,.toast,.help-dialog{display:none!important}

  .workspace,.preview-panel,.paper-stage{
    display:block!important;width:210mm!important;height:296.5mm!important;min-height:0!important;
    margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;
  }
  .preview-panel{border:0!important;border-radius:0!important;box-shadow:none!important}

  .document{
    display:flex!important;flex-direction:column!important;width:210mm!important;height:296.5mm!important;
    min-height:0!important;max-height:296.5mm!important;margin:0!important;
    padding:14mm 15mm 13mm!important;overflow:hidden!important;
    box-shadow:none!important;transform:none!important;zoom:1!important;
    break-inside:avoid-page!important;page-break-inside:avoid!important;
    break-after:avoid-page!important;page-break-after:avoid!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  .document::before{display:none!important}

  .doc__table,.doc__bank,.doc__settlement,.doc__notes,.doc__stamp{
    break-inside:avoid!important;page-break-inside:avoid!important;
  }
  .doc__stamp{opacity:1!important}
  .doc__stamp img{mix-blend-mode:normal!important}
  .doc__footer{
    position:static!important;margin-top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    break-inside:avoid!important;page-break-inside:avoid!important;
  }
  .doc__footer p{break-inside:avoid!important;page-break-inside:avoid!important}

  /* When proof pages are enabled, keep the document intact and allow one
     A4 page per uploaded screenshot instead of clipping everything to one page. */
  html.has-proof-print,html.has-proof-print body{
    width:210mm!important;height:auto!important;min-height:0!important;overflow:visible!important;
  }
  html.has-proof-print .workspace,
  html.has-proof-print .preview-panel,
  html.has-proof-print .paper-stage{
    width:210mm!important;height:auto!important;min-height:0!important;overflow:visible!important;
  }
  html.has-proof-print .document{
    break-after:page!important;page-break-after:always!important;
  }
  html.has-proof-print .proof-sheet,
  html.has-proof-print .proof-page{
    zoom:1!important;transform:none!important;
  }
  html.has-proof-print .proof-sheet{
    display:block!important;margin:0!important;padding:0!important;gap:0!important;
  }
  html.has-proof-print .proof-page{
    display:flex!important;width:210mm!important;height:296.5mm!important;min-height:0!important;
    max-height:296.5mm!important;margin:0!important;box-shadow:none!important;
    break-inside:avoid-page!important;page-break-inside:avoid!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  html.has-proof-print .proof-page + .proof-page{
    break-before:page!important;page-break-before:always!important;
  }
}