@font-face{font-family:'Letter Calibri';src:url('fonts/carlito.ttf')}
:root{--card:#fff;--background:#f5f8f6;--foreground:#283831;--primary:#226047;--primary-foreground:#fff;--secondary:#e5f0e9;--muted:#f2f5f3;--muted-foreground:#79837e;--border:#dce3de;--input:#cfd9d2;--destructive:#b3261e;--workspace:#e9eeeb;--document-ink:#000;--paper-shadow:0 5px 30px #263c3012;--status-dot:#379d65;}*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',Arial,sans-serif;background:var(--background);color:var(--foreground)}button,a,input{font:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;border-radius:5px;background:var(--primary);color:var(--primary-foreground);font-size:12px;padding:11px 18px;font-weight:600;text-decoration:none}.btn:hover{opacity:.88}.btn.outline{background:var(--card);color:var(--foreground);border-color:var(--border)}.icon-btn{border:0;background:none;color:var(--muted-foreground);cursor:pointer;font-size:18px}.source-link a{color:var(--primary)}
.app-header { height: 80px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; background: var(--card); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 38px; height: 42px; border-radius: 7px; background: var(--secondary); color: var(--primary); display: grid; place-items: center; }
.brand-name { font-weight: 700; font-size: 17px; }
.brand-name span { font-weight: 400; color: var(--muted-foreground); margin-left: 7px; }
.brand-subtitle { font-size: 10px; color: var(--muted-foreground); margin-top: 3px; }
.header-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground); }
.app-main { max-width: 1504px; margin: auto; padding: 34px 40px 26px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; gap: 16px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.page-heading h1 { font-size: 30px; line-height: 1.2; font-weight: 600; margin: 0; }
.page-heading p { margin: 9px 0 0; font-size: 13px; color: var(--muted-foreground); }
.template-tag { display: flex; gap: 7px; align-items: center; font-size: 11px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); white-space: nowrap; color: var(--muted-foreground); }
.editor-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.form-panel { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.panel-heading { padding: 22px 22px 19px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
.panel-heading h2 { font-size: 14px; margin: 0; font-weight: 600; }
.panel-heading svg { color: var(--primary); width: 17px; height: 17px; }
.letter-form { padding: 23px 22px; }
.field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.field-label span { color: var(--destructive); }
.name-input-wrap { position: relative; }
.name-input-wrap svg { position: absolute; left: 13px; top: 14px; width: 16px; height: 16px; color: var(--muted-foreground); }
.name-input { height: 44px; padding: 0 12px 0 39px; border: 1px solid var(--input); border-radius: 5px; width: 100%; background: var(--card); color: var(--foreground); font: inherit; font-size: 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.name-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--secondary); }
.name-input[aria-invalid=true] { border-color: var(--destructive); }
.field-error { color: var(--destructive); font-size: 11px; margin-top: 7px; }
.date-field { margin-top: 24px; }
.date-value { display: flex; justify-content: space-between; align-items: center; height: 43px; padding: 0 12px; border: 1px solid var(--border); background: var(--muted); border-radius: 5px; font-size: 13px; }
.date-value > span { display: flex; align-items: center; gap: 9px; }
.date-value svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.automatic { font-size: 9px; color: var(--primary); background: var(--secondary); padding: 4px 7px; border-radius: 4px; font-weight: 600; }
.bank-section { margin-top: 27px; padding-top: 21px; border-top: 1px solid var(--border); }
.section-label { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--muted-foreground); }
.section-label svg { width: 12px; height: 12px; }
.bank-item { margin-top: 18px; }
.bank-item dt { color: var(--muted-foreground); font-size: 11px; margin-bottom: 6px; }
.bank-item dd { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.65; }
.bank-item dd.code { font-family: 'DM Mono', monospace; font-size: 12px; }
.form-actions { padding-top: 25px; display: grid; gap: 10px; }
.form-actions > button { width: 100%; height: 43px; font-size: 12px; }
.privacy-note { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; color: var(--muted-foreground); }
.privacy-note svg { width: 12px; height: 12px; }
.source-link { display: flex; align-items: center; justify-content: space-between; padding: 17px 4px; font-size: 11px; color: var(--muted-foreground); }
.source-link a { font-size: 11px; gap: 5px; }
.source-link a svg { width: 13px; height: 13px; }
.preview-panel { background: var(--workspace); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.preview-toolbar { height: 54px; background: var(--card); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border); }
.preview-title { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.preview-title > svg { width: 15px; height: 15px; color: var(--muted-foreground); }
.live-badge { font-size: 9px; display: flex; align-items: center; gap: 5px; color: var(--primary); margin-left: 4px; background: var(--secondary); padding: 4px 6px; border-radius: 4px; font-weight: 400; }
.live-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--status-dot); }
.preview-tools { display: flex; align-items: center; gap: 4px; color: var(--muted-foreground); }
.preview-tools button { width: 27px; height: 27px; }
.preview-tools span { font-size: 10px; min-width: 39px; text-align: center; }
.tool-divider { height: 16px; width: 1px; background: var(--border); margin: 0 7px; }
.preview-scroll { padding: 25px; max-height: 850px; overflow: auto; display: grid; justify-items: center; }
.paper { width: 100%; max-width: 650px; aspect-ratio: 612 / 792; background: var(--card); box-shadow: var(--paper-shadow); flex-shrink: 0; }
.paper.zoomed { width: 820px; max-width: none; }
.paper svg { width: 100%; height: 100%; display: block; color: var(--document-ink); }
.paper text { font-family: 'Letter Calibri', Calibri, Arial, sans-serif; font-weight: 700; }
.preview-footer { height: 36px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding: 0 20px; font-size: 10px; color: var(--muted-foreground); }
.app-footer { display: flex; justify-content: space-between; margin-top: 23px; font-size: 10px; color: var(--muted-foreground); gap: 14px; }
.toast-message { margin: 12px 0 0; font-size: 11px; color: var(--primary); }
@media (min-width: 1500px) { .editor-layout { grid-template-columns: 370px minmax(0, 1fr); gap: 36px; } }
@media (max-width: 900px) { .app-header { padding: 0 22px; } .app-main { padding: 27px 22px; } .editor-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 18px; } .preview-scroll { padding: 17px; } .brand-subtitle { font-size: 9px; } }
@media (max-width: 680px) { .app-header { height: 68px; padding: 0 18px; } .header-label { display: none; } .app-main { padding: 25px 18px; } .page-heading h1 { font-size: 25px; } .template-tag { display: none; } .editor-layout { grid-template-columns: 1fr; gap: 12px; } .source-link { padding-bottom: 8px; } .preview-scroll { padding: 14px; } .preview-toolbar { padding: 0 13px; } .preview-tools { gap: 0; } .app-footer { line-height: 1.6; } .brand-name { font-size: 16px; } .brand-subtitle { max-width: 240px; } }
@media print { body { background: var(--card); } .app-header, .page-heading, .form-column, .preview-toolbar, .preview-footer, .app-footer { display: none; } .app-main { padding: 0; max-width: none; } .editor-layout { display: block; } .preview-panel { border: none; background: none; } .preview-scroll { padding: 0; max-height: none; overflow: visible; display: block; } .paper, .paper.zoomed { width: 100%; max-width: none; box-shadow: none; } @page { size: letter; margin: 0; } }

@font-face { font-family: 'Letter Calibri'; src: url('fonts/carlito-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
.paper text.letter-regular { font-weight: 400; }
.paper .letter-rule { stroke: var(--document-ink); }

/* Reference-matched letter input desk; document styles stay unchanged. */
:root {
 --desk-blue: oklch(0.59 0.22 255); --desk-green: oklch(0.58 0.15 166); --desk-green-end: oklch(0.46 0.12 170);
 --desk-ink: oklch(0.23 0.07 264); --desk-icon: oklch(0.46 0.04 264); --desk-border: oklch(0.88 0.024 255);
 --desk-wash: oklch(0.97 0.016 242); --desk-tint: oklch(0.94 0.04 168); --desk-field: oklch(0.97 0.008 252);
 --desk-shadow: 0 8px 32px oklch(0.59 0.16 255 / .09);
 --desk-download: linear-gradient(120deg, var(--desk-green), var(--desk-green-end));
}
.app-main { max-width: 1200px; }
.editor-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
.form-column { min-width: 0; }
.form-banner { position: relative; isolation: isolate; min-height: 145px; padding: 24px 36px; margin-bottom: 0; overflow: hidden; border-radius: 8px 8px 0 0; background: var(--desk-wash); justify-content: flex-start; }
.form-banner-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.heading-document { position: relative; width: 72px; height: 82px; flex-shrink: 0; color: var(--desk-blue); }
.heading-document > svg:first-child { width: 65px; height: 78px; fill: var(--card); filter: drop-shadow(0 3px 4px var(--desk-border)); }
.heading-document > svg:last-child { position: absolute; width: 38px; height: 42px; right: 0; bottom: 0; fill: var(--desk-green); color: var(--card); }
.heading-copy { min-width: 0; }
.form-banner h1 { font-size: 40px; font-weight: 750; color: var(--desk-ink); }
.form-banner h1 span { color: var(--desk-blue); }
.form-banner p { font-size: 15px; color: var(--desk-icon); max-width: 600px; line-height: 1.5; }
.heading-underline { width: 72px; height: 4px; border-radius: 2px; background: var(--desk-blue); margin-top: 10px; }
.form-panel { border-color: var(--card); box-shadow: var(--desk-shadow); color: var(--desk-ink); }
.panel-heading { margin: 0 32px; padding: 20px 0; border-color: var(--desk-border); gap: 18px; }
.panel-heading h2 { font-size: 21px; font-weight: 700; }
.details-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--desk-blue); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--desk-shadow); }
.details-icon svg { color: var(--card); width: 24px; height: 24px; }
.details-icon span, .details-document { display: none; }
.letter-form { padding: 20px 32px 16px; }
.primary-fields, .bank-section { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 28px; }
.primary-fields > *, .bank-item { min-width: 0; }
.date-field, .bank-item { margin-top: 0; }
.bank-section { margin-top: 20px; padding-top: 0; border: 0; }
.bank-section .section-label { display: none; }
.field-days { grid-column: 1 / -1; }
.field-label { font-size: 13px; margin-bottom: 8px; font-weight: 650; }
.name-input, .date-value { height: 44px; border-color: var(--desk-border); background: var(--card); color: var(--desk-ink); border-radius: 6px; font-size: 13px; }
.name-input { padding-left: 68px; min-width: 0; }
.name-input::placeholder { color: var(--desk-icon); opacity: .85; }
.name-input-wrap svg { top: 1px; left: 1px; width: 52px; height: 42px; padding: 12px 16px; background: var(--desk-field); border-right: 1px solid var(--desk-border); border-radius: 5px 0 0 5px; color: var(--desk-icon); }
.date-value { position: relative; padding-left: 68px; padding-right: 12px; }
.date-value > span { min-width: 0; }
.date-value svg { position: absolute; top: 1px; left: 1px; width: 52px; height: 42px; padding: 12px 16px; background: var(--desk-field); border-right: 1px solid var(--desk-border); color: var(--desk-icon); }
.automatic { font-size: 10px; color: var(--desk-green-end); background: var(--desk-tint); padding: 5px 9px; }
.form-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; padding-top: 16px; }
.form-actions > button { height: 56px; font-size: 16px; font-weight: 700; border-radius: 6px; background: var(--desk-download); color: var(--card); border: 0; }
.form-actions > button svg { width: 23px; height: 23px; }
.form-actions > button:last-child { background: var(--desk-blue); color: var(--card); }
.form-actions > button:hover { opacity: .9; }
@media (max-width: 680px) {
 .app-main { padding: 18px 14px; }
 .form-banner { padding: 16px 10px 26px; gap: 14px; min-height: 135px; background: var(--desk-tint); }
 .form-banner-art { opacity: .22; }
 .heading-document { width: 50px; height: 65px; color: var(--desk-green); }
 .heading-document > svg:first-child { width: 48px; height: 62px; }
 .heading-document > svg:last-child { width: 29px; height: 33px; }
 .form-banner h1 { font-size: 28px; line-height: 1.1; }
 .form-banner h1 span { color: var(--desk-ink); }
 .form-banner p { font-size: 12px; margin-top: 8px; }
 .heading-underline { background: var(--desk-green); width: 48px; height: 3px; }
 .panel-heading { margin: 0 20px; padding: 22px 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; }
 .panel-heading h2 { font-size: 21px; }
 .details-icon { background: var(--desk-green); width: 44px; height: 44px; outline: 5px solid var(--desk-tint); }
 .details-icon svg { display: none; }
 .details-icon span { display: block; color: var(--card); font-size: 24px; font-weight: 700; }
 .panel-heading > .details-document { display: block; width: 43px; height: 43px; padding: 10px; background: var(--desk-tint); border-radius: 50%; color: var(--desk-green-end); }
 .letter-form { padding: 22px 20px 16px; }
 .primary-fields, .bank-section { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .field-label { font-size: 14px; }
 .name-input, .date-value { height: 46px; font-size: 14px; }
 .name-input { padding-left: 58px; padding-right: 9px; }
 .name-input-wrap svg, .date-value svg { width: 43px; height: 44px; padding: 12px; }
 .date-value { padding-left: 58px; }
 .bank-section { margin-top: 26px; }
 .bank-section .section-label { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-start; gap: 10px; color: var(--desk-green-end); font-size: 13px; }
 .section-label svg { width: 20px; height: 20px; }
 .section-label::after { content: ''; height: 1px; background: var(--desk-border); flex: 1; margin-left: 8px; }
 .form-actions { grid-template-columns: minmax(0,1fr); gap: 10px; }
 .form-actions > button { height: 52px; font-size: 16px; }
 .form-actions > button:last-child, .form-actions > button:last-child:hover { background: var(--card); color: var(--desk-green-end); border: 1px solid var(--desk-green); }
 .field-branch .name-input { font-size: 12px; }
}
@media print { .form-banner { display: none; } }

.form-actions .btn svg { width:23px;height:23px; }