:root {
  --invoice-ink: #102a43;
  --invoice-muted: #62768a;
  --invoice-orange: #ed502e;
  --invoice-orange-dark: #c93d20;
  --invoice-surface: #ffffff;
  --invoice-soft: #f4f7fa;
  --invoice-line: #dce5ec;
  --invoice-success: #087443;
}

.invoice-main { background: #f6f8fa; color: var(--invoice-ink); }
.invoice-shell { width: min(1380px, 100%); margin: 0 auto; }
.invoice-intro { padding: 142px 5% 52px; color: #fff; background: radial-gradient(circle at 75% -10%, rgba(255,255,255,.18), transparent 32%), radial-gradient(circle at 0 120%, rgba(237,80,46,.55), transparent 36%), linear-gradient(116deg, #0a2136, #153a58); }
.invoice-intro-copy { max-width: 780px; }
.invoice-kicker { display: inline-flex; gap: 9px; align-items: center; margin-bottom: 18px; color: #ffd0c3; font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.invoice-intro h1 { max-width: 800px; margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: .98; letter-spacing: -.055em; font-weight: 900; }
.invoice-intro p { max-width: 680px; margin: 23px 0 0; color: #d8e3eb; font-size: 18px; line-height: 1.7; }
.invoice-privacy-note { display: inline-flex; gap: 10px; align-items: flex-start; margin-top: 28px; padding: 13px 16px; color: #d8e3eb; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; font-size: 13px; line-height: 1.45; }
.invoice-privacy-note i { color: #ff9b7c; margin-top: 2px; }
.invoice-workspace { padding: 48px 5% 96px; }
.invoice-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr); align-items: start; gap: 34px; }
.invoice-form { display: grid; gap: 18px; }
.invoice-form-section, .invoice-preview-panel { background: var(--invoice-surface); border: 1px solid var(--invoice-line); border-radius: 22px; box-shadow: 0 18px 50px rgba(16,42,67,.06); }
.invoice-form-section { padding: 30px; }
.invoice-section-heading { display: grid; grid-template-columns: 34px 1fr; gap: 12px; margin-bottom: 24px; }
.invoice-section-heading > span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--invoice-orange); background: #fff1ed; border-radius: 50%; font-size: 12px; font-weight: 900; }
.invoice-section-heading h2 { margin: 0 0 5px; color: var(--invoice-ink); font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.invoice-section-heading p { margin: 0; color: var(--invoice-muted); font-size: 13px; line-height: 1.55; }
.entity-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.entity-choice { display: grid; gap: 8px; min-height: 150px; padding: 19px; text-align: left; color: var(--invoice-ink); background: #fff; border: 1px solid var(--invoice-line); border-radius: 16px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.entity-choice:hover, .entity-choice:focus-visible { border-color: var(--invoice-orange); box-shadow: 0 0 0 4px rgba(237,80,46,.12); outline: none; transform: translateY(-1px); }
.entity-choice[aria-checked="true"] { border-color: var(--invoice-orange); background: linear-gradient(150deg,#fff5f1,#fff); box-shadow: inset 0 0 0 1px var(--invoice-orange), 0 9px 22px rgba(237,80,46,.12); }
.entity-choice-location { color: var(--invoice-orange); font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.entity-choice strong { font-size: 16px; line-height: 1.25; }
.entity-choice > span:last-child { color: var(--invoice-muted); font-size: 13px; }
.issuer-type, .invoice-toggle-row { display: flex; flex-wrap: wrap; gap: 10px; margin: -3px 0 19px; }
.issuer-type label, .invoice-toggle-row label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #3d5061; font-size: 13px; font-weight: 800; }
.issuer-type input, .invoice-toggle-row input { accent-color: var(--invoice-orange); }
.issuer-type label { padding: 10px 13px; border: 1px solid var(--invoice-line); border-radius: 10px; }
.invoice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.invoice-fields label, .invoice-notes-section > label { display: grid; gap: 7px; color: #3c4c5e; font-size: 12px; font-weight: 850; letter-spacing: .01em; }
.invoice-fields input, .invoice-fields select, .invoice-notes-section textarea { width: 100%; min-height: 46px; padding: 11px 12px; color: #132b41; background: #fff; border: 1px solid #cfdbe4; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; transition: border-color .15s ease, box-shadow .15s ease; }
.invoice-notes-section textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
.invoice-fields input:focus, .invoice-fields select:focus, .invoice-notes-section textarea:focus { border-color: var(--invoice-orange); box-shadow: 0 0 0 3px rgba(237,80,46,.13); outline: 0; }
.invoice-fields input:disabled { color: #8795a3; background: #e9eef2; border-color: #d5dee6; cursor: not-allowed; box-shadow: none; }
.country-field.is-disabled > span { color: #8795a3; }
.invoice-fields output { display: flex; align-items: center; min-height: 46px; padding: 11px 12px; color: #536779; background: #f4f7fa; border: 1px dashed #cfdbe4; border-radius: 10px; font-size: 14px; font-weight: 800; }
.field-full { grid-column: 1 / -1; }
.field-span-2 { grid-column: span 2; }
.invoice-fields small { margin-top: -2px; color: var(--invoice-muted); font-size: 10px; font-weight: 650; line-height: 1.35; }
.invoice-from-section { padding: 25px 30px; }
.invoice-from-section .invoice-section-heading { margin-bottom: 17px; }
.invoice-from-section .issuer-type { margin-bottom: 14px; }
.invoice-from-section .invoice-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 12px; }
.invoice-details-section { padding: 25px 30px; }
.invoice-details-section .invoice-section-heading { margin-bottom: 17px; }
.invoice-details-section .invoice-fields { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.tax-fields { margin-bottom: 15px; }
.invoice-items-editor { display: grid; gap: 11px; }
.invoice-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 120px 38px; gap: 9px; align-items: end; padding: 14px; background: #f8fafc; border: 1px solid #e4ebf0; border-radius: 14px; }
.invoice-item-row label { display: grid; gap: 6px; color: #607387; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.invoice-item-row input { width: 100%; min-height: 41px; padding: 9px 10px; color: var(--invoice-ink); border: 1px solid #ccd9e2; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 650; }
.invoice-remove-item { display: grid; width: 38px; height: 41px; place-items: center; color: #bd321e; background: #fff0ed; border: 0; border-radius: 8px; cursor: pointer; }
.invoice-remove-item:hover, .invoice-remove-item:focus-visible { background: #ffe0d7; outline: 2px solid var(--invoice-orange); outline-offset: 2px; }
.invoice-add-item, .invoice-text-button { width: fit-content; padding: 0; color: var(--invoice-orange-dark); background: transparent; border: 0; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.invoice-add-item { margin-top: 15px; }
.invoice-add-item i, .invoice-text-button i { margin-right: 6px; }
.invoice-disclaimer { margin: 3px 0 0; padding: 14px 16px; color: #735b16; background: #fff9e8; border: 1px solid #f2e4b2; border-radius: 12px; font-size: 12px; line-height: 1.55; }
.invoice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 0; }
.invoice-primary, .invoice-secondary { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 48px; padding: 12px 17px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.invoice-primary { color: #fff; background: var(--invoice-orange); border: 1px solid var(--invoice-orange); box-shadow: 0 10px 22px rgba(237,80,46,.24); }
.invoice-primary:hover, .invoice-primary:focus-visible { background: var(--invoice-orange-dark); border-color: var(--invoice-orange-dark); outline: none; }
.invoice-secondary { color: var(--invoice-ink); background: #fff; border: 1px solid #bdcad4; }
.invoice-secondary:not(:disabled):hover, .invoice-secondary:not(:disabled):focus-visible { border-color: var(--invoice-orange); color: var(--invoice-orange-dark); outline: none; }
.invoice-secondary:disabled { cursor: not-allowed; color: #9aa8b4; background: #f5f7f9; }
.invoice-form-status { padding: 14px 16px; color: #a62d1e; background: #fff1ee; border: 1px solid #f6c8c0; border-radius: 12px; font-size: 14px; font-weight: 750; line-height: 1.5; }
.invoice-form-status.success { color: var(--invoice-success); background: #ecfdf3; border-color: #a9e8bf; }
.invoice-preview-panel { position: sticky; top: 25px; overflow: hidden; }
.invoice-preview-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 19px; color: #5b6c7d; background: #f8fafc; border-bottom: 1px solid var(--invoice-line); font-size: 12px; font-weight: 850; }
.invoice-preview-toolbar span:first-child { color: var(--invoice-orange-dark); }
.invoice-preview { width: 100%; min-height: 670px; padding: 38px; background: #fff; color: #1d2d3d; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.invoice-preview-header { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 25px; border-bottom: 2px solid var(--invoice-orange); }
.invoice-preview-header--minimal { justify-content: flex-end; }
.invoice-preview-title { display: grid; justify-items: end; gap: 4px; }
.invoice-preview-title span { color: var(--invoice-ink); font-size: 26px; font-weight: 900; letter-spacing: .05em; }
.invoice-preview-title strong { color: var(--invoice-orange); font-size: 13px; }
.invoice-preview-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 21px 0; }
.invoice-preview-meta div { display: grid; gap: 4px; }
.invoice-preview-meta span, .invoice-preview-parties > div > span, .invoice-preview-payment > span, .invoice-preview-notes > span { color: #758596; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.invoice-preview-meta strong { font-size: 11px; }
.invoice-preview-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 20px; background: #f7f9fb; border-radius: 10px; }
.invoice-preview-parties > div { min-width: 0; }
.invoice-preview-parties strong { display: block; margin-top: 7px; color: var(--invoice-ink); font-size: 12px; line-height: 1.3; }
.invoice-preview-parties p, .invoice-preview-payment p, .invoice-preview-notes p { margin: 6px 0 0; color: #586a7a; white-space: pre-line; font-size: 10px; line-height: 1.55; }
.invoice-preview-items { margin-top: 28px; }
.invoice-preview-items table { width: 100%; border-collapse: collapse; font-size: 10px; }
.invoice-preview-items th { padding: 9px 8px; color: #fff; background: var(--invoice-ink); text-align: left; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.invoice-preview-items th:not(:first-child), .invoice-preview-items td:not(:first-child) { text-align: right; }
.invoice-preview-items td { padding: 11px 8px; border-bottom: 1px solid #e3e9ed; vertical-align: top; line-height: 1.45; }
.preview-empty { color: #8594a1; text-align: center !important; font-style: italic; }
.invoice-preview-lower { display: grid; grid-template-columns: 1fr minmax(180px, .8fr); gap: 20px; padding-top: 26px; }
.invoice-preview-payment { padding-top: 5px; }
.invoice-preview-totals { margin: 0; }
.invoice-preview-totals div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; color: #536473; font-size: 11px; }
.invoice-preview-totals dt, .invoice-preview-totals dd { margin: 0; }
.invoice-preview-totals dd { color: var(--invoice-ink); font-weight: 800; }
.invoice-preview-totals .preview-total { margin-top: 6px; padding: 11px 0 0; color: var(--invoice-ink); border-top: 2px solid var(--invoice-orange); font-size: 15px; font-weight: 900; }
.invoice-preview-totals .preview-total dd { color: var(--invoice-orange-dark); }
.invoice-preview-notes { margin-top: 26px; padding: 14px; background: #fff9f7; border-left: 3px solid var(--invoice-orange); }
.invoice-preview footer { margin-top: 35px; padding-top: 13px; color: #8694a2; border-top: 1px solid #e4e9ed; font-size: 9px; text-align: center; }

@media (max-width: 1100px) { .invoice-workspace-grid { grid-template-columns: 1fr; } .invoice-preview-panel { position: static; max-width: 850px; margin: 0 auto; } }
@media (max-width: 820px) { .invoice-details-section .invoice-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .invoice-intro { padding: 124px 6% 37px; } .invoice-intro p { font-size: 16px; } .invoice-workspace { padding: 28px 4% 64px; } .invoice-form-section { padding: 22px 17px; border-radius: 17px; } .entity-choice-grid, .invoice-fields, .invoice-from-section .invoice-fields, .invoice-details-section .invoice-fields, .invoice-preview-parties, .invoice-preview-lower { grid-template-columns: 1fr; } .field-span-2 { grid-column: auto; } .invoice-item-row { grid-template-columns: 1fr 1fr 38px; } .invoice-item-row label:first-child { grid-column: 1 / -1; } .invoice-item-row label:nth-child(2), .invoice-item-row label:nth-child(3) { grid-column: auto; } .invoice-remove-item { grid-column: 3; grid-row: 2; } .invoice-preview { min-height: 0; padding: 24px 18px; } .invoice-preview-header { flex-direction: column; } .invoice-preview-header--minimal { align-items: flex-end; } .invoice-preview-title { justify-items: start; } .invoice-preview-header--minimal .invoice-preview-title { justify-items: end; } .invoice-preview-meta { grid-template-columns: 1fr 1fr; } .invoice-actions > * { width: 100%; } .invoice-text-button { text-align: left; } }

@media print { body * { visibility: hidden !important; } .invoice-preview-panel, .invoice-preview-panel * { visibility: visible !important; } .invoice-preview-panel { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; border: 0 !important; box-shadow: none !important; } .invoice-preview-toolbar { display: none !important; } .invoice-preview { min-height: 0 !important; padding: 14mm !important; } @page { size: A4; margin: 0; } }