.invoice-page {
  --invoice-ink: #20231f;
  --invoice-green: #315f4d;
  --invoice-gold: #bd8e47;
  --invoice-line: rgba(32, 35, 31, 0.13);
  --invoice-paper: #fffefb;
  background:
    radial-gradient(circle at 86% 8%, rgba(213, 172, 111, 0.16), transparent 26rem),
    radial-gradient(circle at 7% 42%, rgba(77, 120, 98, 0.08), transparent 30rem),
    #f5f3ee;
  color: var(--invoice-ink);
}

.invoice-page [hidden] {
  display: none !important;
}

.invoice-main {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 58px 0 96px;
}

.invoice-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 72px;
  align-items: center;
  max-width: 1180px;
  margin: 18px auto 62px;
}

.invoice-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--invoice-line);
  border-radius: 999px;
  color: #62665f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.45);
}

.invoice-dot,
.local-note i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #51b884;
  box-shadow: 0 0 0 4px rgba(81, 184, 132, 0.13);
}

.invoice-hero h1 {
  margin: 23px 0 18px;
  font-size: clamp(52px, 6.2vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.invoice-hero h1 em {
  color: var(--invoice-green);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.invoice-hero p {
  max-width: 720px;
  margin: 0;
  color: #666960;
  font-size: 17px;
  line-height: 1.7;
}

.invoice-hero-art {
  position: relative;
  height: 260px;
}

.invoice-hero-art::before,
.invoice-hero-art::after,
.invoice-hero-art > div {
  position: absolute;
  inset: 16px 18px 0 0;
  border: 1px solid rgba(49, 95, 77, 0.16);
  border-radius: 7px;
  background: rgba(255, 254, 251, 0.65);
  box-shadow: 0 28px 70px rgba(49, 55, 45, 0.09);
  content: "";
}

.invoice-hero-art::before { transform: rotate(7deg) translate(14px, 0); }
.invoice-hero-art::after { transform: rotate(-4deg) translate(-8px, 9px); }
.invoice-hero-art > div {
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 38px 34px;
  background: #fffefb;
  transform: rotate(1.5deg);
}

.invoice-hero-art span { color: var(--invoice-green); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.invoice-hero-art b { margin: 16px 0 24px; font-family: Georgia, serif; font-size: 38px; }
.invoice-hero-art i { width: 100%; height: 5px; margin: 6px 0; border-radius: 10px; background: #e6e6e0; }
.invoice-hero-art i:nth-of-type(2) { width: 72%; }
.invoice-hero-art i:nth-of-type(3) { width: 86%; }
.invoice-hero-art em { align-self: flex-end; margin-top: 18px; padding: 5px 10px; border: 1px solid #5c9679; color: #3d785d; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.16em; transform: rotate(-5deg); }

.invoice-workbench {
  overflow: hidden;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 26px;
  background: rgba(250, 249, 245, 0.91);
  box-shadow: 0 30px 100px rgba(45, 47, 39, 0.09);
  backdrop-filter: blur(18px);
}

.invoice-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--invoice-line);
}

.invoice-heading span,
.invoice-check > div:first-child > span,
.preview-toolbar > span {
  color: var(--invoice-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.invoice-heading h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -0.03em; }
.local-note { display: flex; align-items: center; gap: 9px; color: #686b64; font-size: 12px; }

.draft-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 32px;
  border-bottom: 1px solid rgba(189, 142, 71, 0.22);
  background: #fbf4e8;
}

.draft-banner[hidden] { display: none; }
.draft-banner div { display: flex; flex: 1; gap: 8px; font-size: 12px; }
.draft-banner div span { color: #747066; }
.draft-banner button { border: 0; background: transparent; color: var(--invoice-green); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

.invoice-toolbar {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(125px, 0.78fr));
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--invoice-line);
  background: rgba(241, 240, 235, 0.72);
}

.invoice-toolbar label,
.invoice-field-grid label,
.appearance-options label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #686a64;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.invoice-toolbar select,
.invoice-field-grid input,
.invoice-field-grid textarea,
.invoice-field-grid select,
.appearance-options select,
.invoice-item-row input,
.invoice-item-row textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(32, 35, 31, 0.16);
  border-radius: 9px;
  outline: none;
  background: rgba(255, 255, 255, 0.8);
  color: var(--invoice-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.invoice-toolbar select { height: 38px; padding: 0 32px 0 10px; }
.invoice-field-grid input,
.invoice-field-grid select { height: 42px; padding: 0 11px; }
.invoice-field-grid textarea { min-height: 74px; padding: 10px 11px; line-height: 1.45; resize: vertical; }
.invoice-toolbar select:focus,
.invoice-field-grid input:focus,
.invoice-field-grid textarea:focus,
.invoice-field-grid select:focus,
.appearance-options select:focus,
.invoice-item-row input:focus,
.invoice-item-row textarea:focus { border-color: var(--invoice-green); box-shadow: 0 0 0 3px rgba(49, 95, 77, 0.09); background: #fff; }
.invoice-field-grid .invalid { border-color: #b95b47; box-shadow: 0 0 0 3px rgba(185, 91, 71, .08); }

.document-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: end;
  height: 38px;
  padding: 3px;
  border: 1px solid rgba(32, 35, 31, 0.14);
  border-radius: 10px;
  background: #e9e8e3;
}

.document-type-tabs button,
.preview-toolbar button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #72746f;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.document-type-tabs button.active,
.preview-toolbar button.active { background: #fff; color: var(--invoice-ink); box-shadow: 0 2px 8px rgba(35, 37, 33, 0.08); }

.invoice-layout { display: grid; grid-template-columns: minmax(540px, 0.94fr) minmax(540px, 1.06fr); min-height: 850px; }
.invoice-editor { padding: 26px 28px 34px; border-right: 1px solid var(--invoice-line); }

.invoice-form-section { border-bottom: 1px solid var(--invoice-line); }
.invoice-form-section > summary {
  display: grid;
  grid-template-columns: 36px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 20px 2px;
  list-style: none;
  cursor: pointer;
}
.invoice-form-section > summary::-webkit-details-marker { display: none; }
.invoice-form-section > summary::after { content: "+"; justify-self: end; color: #8b8d86; font-size: 18px; }
.invoice-form-section[open] > summary::after { content: "−"; }
.invoice-form-section > summary > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(49, 95, 77, 0.24); border-radius: 50%; color: var(--invoice-green); font-size: 10px; font-weight: 800; }
.invoice-form-section > summary strong { font-size: 14px; }
.invoice-form-section > summary em { color: #888a84; font-size: 11px; font-style: normal; }
.invoice-form-body { padding: 1px 2px 23px; }
.invoice-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 13px; }
.invoice-field-grid .wide { grid-column: 1 / -1; }

.tax-registration { flex-direction: row !important; align-items: center; padding: 11px 12px; border: 1px solid rgba(189, 142, 71, 0.24); border-radius: 9px; background: #fbf6ed; }
.tax-registration input { width: 17px; height: 17px; accent-color: var(--invoice-green); }

.logo-field { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.logo-field > button { display: grid; flex: none; place-items: center; width: 78px; height: 58px; overflow: hidden; border: 1px dashed rgba(49, 95, 77, 0.4); border-radius: 10px; background: rgba(49, 95, 77, 0.04); color: var(--invoice-green); font-size: 24px; cursor: pointer; }
.logo-field img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-field > div { display: flex; flex-direction: column; gap: 3px; }
.logo-field > div strong { font-size: 12px; }
.logo-field > div small { color: #898b85; font-size: 10px; }
.logo-field > div button { align-self: flex-start; padding: 0; border: 0; background: transparent; color: #b25645; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }

.item-column-labels,
.invoice-item-row {
  display: grid;
  grid-template-columns: minmax(160px, 2.3fr) minmax(54px, .55fr) minmax(82px, .8fr) minmax(58px, .55fr) minmax(58px, .55fr) 58px;
  gap: 7px;
}
.item-column-labels { padding: 0 4px 8px; color: #8b8d87; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.item-column-labels span:not(:first-child) { text-align: right; }
.invoice-item-row { align-items: start; padding: 9px 0; border-top: 1px solid rgba(32, 35, 31, 0.08); }
.invoice-item-row:first-child { border-top: 0; }
.invoice-item-row input { height: 38px; padding: 0 8px; text-align: right; }
.invoice-item-row textarea { min-height: 38px; padding: 9px 8px; line-height: 1.35; resize: vertical; }
.invoice-item-row .item-description-field { text-align: left; }
.item-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.item-actions button { height: 18px; padding: 0; border: 1px solid rgba(32,35,31,.13); border-radius: 4px; background: #fff; color: #6f716b; font-size: 10px; cursor: pointer; }
.item-actions .remove-item { grid-column: 1 / -1; color: #b25645; }
.add-invoice-item { width: 100%; margin-top: 10px; padding: 11px; border: 1px dashed rgba(49, 95, 77, .4); border-radius: 9px; background: rgba(49, 95, 77, .035); color: var(--invoice-green); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.rounding-note { margin: 10px 0 0; color: #92938e; font-size: 9px; }

.appearance-options { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.appearance-options input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid var(--invoice-line); border-radius: 9px; background: white; }
.appearance-options select { height: 42px; padding: 0 10px; }

.invoice-check { display: grid; grid-template-columns: 190px 1fr; gap: 20px; margin-top: 24px; padding: 20px; border: 1px solid rgba(32,35,31,.13); border-radius: 13px; background: #f2f1ec; }
.invoice-check h3 { margin: 5px 0 6px; font-size: 17px; }
.invoice-check p { margin: 0; color: #777a73; font-size: 10px; line-height: 1.5; }
.invoice-issues { display: flex; flex-direction: column; gap: 6px; }
.issue-card { display: flex; align-items: flex-start; gap: 7px; padding: 8px 9px; border-radius: 7px; font-size: 10px; line-height: 1.45; }
.issue-card::before { flex: none; content: "!"; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font-size: 8px; font-weight: 900; }
.issue-card.error { background: #f9e9e4; color: #904838; }
.issue-card.error::before { background: #bb5d4a; color: white; }
.issue-card.warning { background: #faf2df; color: #80652f; }
.issue-card.warning::before { background: #c09643; color: white; }
.issue-card.ready { background: #e7f2eb; color: #3d755a; }
.issue-card.ready::before { content: "✓"; background: #4b916c; color: white; }

.invoice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.invoice-actions > button { min-height: 42px; padding: 0 14px; border: 1px solid rgba(32,35,31,.15); border-radius: 9px; background: #fff; color: #545750; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.invoice-actions .invoice-export-button { display: flex; flex: 1 1 240px; justify-content: space-between; align-items: center; padding: 0 17px; border-color: var(--invoice-green); background: var(--invoice-green); color: white; }
.invoice-actions .invoice-export-button b { font-size: 18px; }
.invoice-actions button:disabled { opacity: .45; cursor: not-allowed; }
.invoice-progress { margin-top: 13px; padding: 12px; border-radius: 9px; background: #ecebe6; }
.invoice-progress[hidden] { display: none; }
.invoice-progress > span { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 10px; }
.invoice-progress em { color: var(--invoice-green); font-style: normal; font-weight: 800; }
.invoice-progress > div { height: 4px; overflow: hidden; border-radius: 10px; background: #d6d7d1; }
.invoice-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--invoice-green); transition: width .25s ease; }
.invoice-message { min-height: 16px; margin: 9px 0 0; color: #3e785d; font-size: 10px; }
.invoice-message.error { color: #a04c3c; }
.legal-note { margin: 10px 0 0; color: #94958f; font-size: 9px; line-height: 1.5; }

.invoice-preview-panel { min-width: 0; padding: 24px; background: #e7e6e0; }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; max-width: 680px; margin: 0 auto 13px; }
.preview-toolbar > div { display: flex; gap: 4px; padding: 3px; border-radius: 7px; background: rgba(0,0,0,.06); }
.preview-toolbar button { padding: 5px 9px; }
.invoice-paper-wrap { position: sticky; top: 18px; max-width: 680px; margin: auto; overflow: auto; border-radius: 4px; }
.invoice-paper {
  --preview-accent: #315f4d;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 210 / 297;
  min-height: 860px;
  padding: 54px 50px 38px;
  overflow: hidden;
  background: var(--invoice-paper);
  color: #242622;
  box-shadow: 0 18px 55px rgba(35,38,32,.16);
}
.invoice-paper.actual-scale { width: 794px; }
.preview-accent { position: absolute; inset: 0 0 auto; height: 7px; background: var(--preview-accent); }
.preview-document-header { display: flex; justify-content: space-between; gap: 25px; align-items: center; }
.preview-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.preview-brand > div { display: grid; flex: none; place-items: center; width: 34px; height: 34px; background: var(--preview-accent); color: white; font-family: Georgia, serif; font-size: 16px; }
.preview-brand img { flex: none; max-width: 80px; max-height: 45px; object-fit: contain; }
.preview-brand strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.preview-document-header > div:last-child { text-align: right; }
.preview-document-header h3 { margin: 0; color: var(--preview-accent); font-family: Georgia, serif; font-size: 27px; font-weight: 400; letter-spacing: .02em; }
.preview-document-header span { color: #777971; font-size: 9px; }
.preview-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 32px 0 29px; padding: 13px 0; border-top: 1px solid #e2e1dc; border-bottom: 1px solid #e2e1dc; }
.preview-meta div { min-width: 0; }
.preview-meta span,
.preview-addresses span { display: block; margin-bottom: 5px; color: #8a8c85; font-size: 6.5px; font-weight: 800; letter-spacing: .1em; }
.preview-meta b { display: block; overflow: hidden; font-size: 8.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.preview-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 25px; }
.preview-addresses p { min-height: 62px; margin: 0; color: #42453f; font-size: 8px; line-height: 1.55; white-space: pre-line; }
.preview-tax-mode { margin: 0 0 8px; color: #8b8d86; font-size: 7px; }
.preview-items-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.preview-items-table th { padding: 8px 6px; background: var(--preview-accent); color: white; font-size: 6px; letter-spacing: .06em; text-align: right; }
.preview-items-table th:first-child { width: 45%; text-align: left; }
.preview-items-table td { padding: 9px 6px; border-bottom: 1px solid #e8e7e2; color: #44463f; font-size: 7.2px; line-height: 1.35; text-align: right; vertical-align: top; }
.preview-items-table td:first-child { text-align: left; overflow-wrap: anywhere; }
.preview-items-table tr:nth-child(even) td { background: #f7f7f3; }
.preview-items-table small { display: block; margin-top: 3px; color: #999b94; font-size: 5.7px; }
.preview-summary { width: 47%; margin: 19px 0 25px auto; }
.preview-summary-row { display: flex; justify-content: space-between; gap: 18px; padding: 4px 7px; color: #666960; font-size: 7.5px; }
.preview-summary-row strong { color: #2c2f2a; font-weight: 600; }
.preview-summary-row.total { margin-top: 4px; padding-block: 7px; background: #efefeb; font-size: 9px; font-weight: 800; }
.preview-summary-row.balance { padding-block: 8px; background: var(--preview-accent); color: white; font-size: 9px; font-weight: 800; }
.preview-summary-row.balance strong { color: white; }
.preview-copy-sections { display: grid; gap: 13px; }
.preview-copy-section span { color: var(--preview-accent); font-size: 6.5px; font-weight: 800; letter-spacing: .1em; }
.preview-copy-section p { margin: 5px 0 0; color: #555850; font-size: 7px; line-height: 1.5; white-space: pre-line; }
.invoice-paper footer { position: absolute; inset: auto 50px 24px; display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px solid #e2e1dc; color: #999b95; font-size: 5.8px; }
.invoice-paper.classic .preview-accent { height: 2px; }
.invoice-paper.classic .preview-document-header h3 { color: #242622; font-family: Georgia, serif; font-style: italic; }
.invoice-paper.classic .preview-items-table th { border-top: 1px solid var(--preview-accent); border-bottom: 1px solid var(--preview-accent); background: transparent; color: #2d302b; }

.invoice-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 24px; }
.invoice-benefits article { padding: 25px; border: 1px solid var(--invoice-line); border-radius: 16px; background: rgba(255,255,255,.46); }
.invoice-benefits span { color: var(--invoice-gold); font-family: Georgia, serif; font-size: 20px; }
.invoice-benefits strong { display: block; margin: 19px 0 8px; font-size: 14px; }
.invoice-benefits p { margin: 0; color: #71746c; font-size: 11px; line-height: 1.65; }

@media (max-width: 1180px) {
  .invoice-toolbar { grid-template-columns: repeat(3, 1fr); }
  .document-type-tabs { grid-column: span 2; }
  .invoice-layout { grid-template-columns: 1fr; }
  .invoice-editor { border-right: 0; border-bottom: 1px solid var(--invoice-line); }
  .invoice-preview-panel { padding-bottom: 50px; }
  .invoice-paper-wrap { position: static; }
}

@media (max-width: 760px) {
  .invoice-main { width: min(100% - 24px, 1440px); padding-top: 26px; }
  .invoice-hero { grid-template-columns: 1fr; gap: 15px; margin-bottom: 35px; }
  .invoice-hero h1 { font-size: clamp(46px, 15vw, 68px); }
  .invoice-hero p { font-size: 14px; }
  .invoice-hero-art { display: none; }
  .invoice-workbench { border-radius: 17px; }
  .invoice-heading { align-items: flex-start; padding: 21px 18px 16px; }
  .local-note { margin-top: 5px; font-size: 10px; }
  .draft-banner { align-items: flex-start; padding: 12px 18px; }
  .draft-banner div { flex-direction: column; gap: 2px; }
  .invoice-toolbar { grid-template-columns: 1fr 1fr; padding: 13px; }
  .document-type-tabs { grid-column: 1 / -1; }
  .invoice-editor { padding: 14px 16px 26px; }
  .invoice-form-section > summary { grid-template-columns: 32px auto 1fr; }
  .invoice-form-section > summary em { display: none; }
  .invoice-field-grid { grid-template-columns: 1fr; }
  .invoice-field-grid .wide { grid-column: auto; }
  .item-column-labels { display: none; }
  .invoice-item-row { grid-template-columns: 1fr 1fr 1fr; padding: 14px 0; }
  .invoice-item-row .item-description-field { grid-column: 1 / -1; }
  .item-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .item-actions .remove-item { grid-column: auto; }
  .invoice-check { grid-template-columns: 1fr; }
  .invoice-preview-panel { padding: 18px 8px 30px; }
  .invoice-paper-wrap { overflow-x: auto; }
  .invoice-paper { width: 610px; min-height: 862px; padding-inline: 42px; transform-origin: top left; }
  .invoice-benefits { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .invoice-hero, .invoice-heading, .draft-banner, .invoice-toolbar, .invoice-editor, .preview-toolbar, .invoice-benefits, body > footer { display: none !important; }
  .invoice-main, .invoice-workbench, .invoice-layout, .invoice-preview-panel, .invoice-paper-wrap, .invoice-paper { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: white; }
}