:root {
  --ink:#182235;
  --muted:#78818f;
  --blue:#2458cf;
  --line:#e5e8ee;
  --surface:#f7f8fa;
  --danger:#b42318;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--surface);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select,textarea {
  font:inherit;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.4;
}

button,input,select,textarea,a {
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,a:focus-visible {
  outline:3px solid #a6bcf3;
  outline-offset:3px;
}

input:focus,select:focus,textarea:focus {
  outline:0;
  border-color:var(--blue);
  box-shadow:0 0 0 3px #2458cf12;
}

button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

button {
  transition:background .15s,border-color .15s;
}

.app-header {
  height:80px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink);
  font-size:21px;
  font-weight:750;
  letter-spacing:-.7px;
}

.brand-mark {
  display:block;
  width:37px;
  height:37px;
  object-fit:contain;
  flex-shrink:0;
}

.brand small {
  display:block;
  font-size:8px;
  font-weight:600;
  letter-spacing:2.1px;
  margin-top:5px;
  color:var(--muted);
}

.header-label {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#3e8e70;
  flex-shrink:0;
}

.workspace {
  max-width:1560px;
  margin:0 auto;
  padding:38px 40px 48px;
}

.workspace-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:33px;
}

.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
}

h1 {
  font-size:32px;
  letter-spacing:-1.2px;
  line-height:1.2;
  margin:0 0 10px;
  font-weight:650;
}

h1 span {
  color:var(--blue);
}

.workspace-heading p {
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.main-actions {
  display:flex;
  gap:10px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:11px 17px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.button.primary {
  background:var(--blue);
  color:white;
  box-shadow:0 2px 3px #2458cf12;
}

.button.primary:hover {
  background:#1948b4;
}

.button.secondary {
  background:#fff;
  border-color:#dce0e7;
  color:#475366;
}

.button.secondary:hover {
  background:#f0f2f6;
}

.workspace-grid {
  display:grid;
  grid-template-columns:minmax(360px,440px) minmax(0,1fr);
  align-items:start;
  gap:32px;
}

.editor {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.form-section {
  padding:22px 23px 19px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:21px;
}

.section-heading h2 {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:14px;
  font-weight:650;
  letter-spacing:-.15px;
}

.section-number {
  font-size:9px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f3f5f8;
  border:1px solid #e9edf2;
  color:#738199;
  width:24px;
  height:24px;
  border-radius:6px;
}

.section-caption {
  font-size:10px;
  color:#88909d;
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:15px;
  min-width:0;
}

.field label {
  font-size:11px;
  font-weight:600;
  color:#536073;
}

.required {
  color:var(--blue);
}

.optional {
  font-size:9px;
  font-weight:400;
  color:#949ba6;
  margin-left:4px;
}

.field input,.field select,.field textarea {
  width:100%;
  min-width:0;
  background:#fff;
  border:1px solid #dfe3e9;
  border-radius:5px;
  min-height:39px;
  padding:10px 11px;
  color:var(--ink);
  font-size:12px;
  line-height:1.45;
}

.field textarea {
  resize:vertical;
}

.field input::placeholder,.field textarea::placeholder {
  color:#a1a7b1;
}

.field input[type=date] {
  padding-right:7px;
}

.field select {
  font-size:11px;
  padding-right:5px;
}

.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.form-section>.field:last-child {
  margin-bottom:0;
}

.checkbox-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#667184;
  line-height:1.5;
  cursor:pointer;
}

.checkbox-label input {
  margin:0;
  width:14px;
  height:14px;
  accent-color:var(--blue);
  flex-shrink:0;
}

.input-prefix {
  position:relative;
}

.input-prefix>span {
  position:absolute;
  left:12px;
  top:12px;
  font-size:11px;
  color:#8490a3;
}

.input-prefix input {
  padding-left:49px;
}

.editor-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:19px -23px -19px;
  padding:16px 23px;
  border-top:1px solid var(--line);
  background:#fafbfd;
  border-radius:0 0 9px 9px;
  font-size:11px;
  color:#67748a;
}

.editor-total strong {
  font-size:18px;
  color:var(--ink);
  letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}

.field-help {
  font-size:10px;
  color:#949ba6;
  line-height:1.6;
  margin:8px 0 0;
}

.item-card {
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
  padding-bottom:3px;
}

.item-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  font-size:10px;
  font-weight:600;
  color:#6e798c;
}

.item-actions {
  display:flex;
  gap:5px;
}

.icon-button {
  border:0;
  background:transparent;
  border-radius:4px;
  color:#8490a3;
  width:24px;
  height:24px;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.icon-button:hover {
  background:#eef2f8;
  color:var(--blue);
}

.icon-button.delete:hover {
  background:#fff0ed;
  color:var(--danger);
}

.item-numbers {
  display:grid;
  grid-template-columns:.6fr 1fr 1fr;
  gap:10px;
}

.item-amount {
  font-size:12px;
  font-weight:600;
  padding-top:11px;
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.item-numbers .field:last-child label {
  text-align:right;
}

.add-item {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  background:#fff;
  border:1px dashed #cad3e2;
  border-radius:6px;
  min-height:38px;
  color:var(--blue);
  font-size:11px;
  font-weight:600;
}

.add-item:hover {
  background:#f5f8ff;
  border-color:var(--blue);
}

.editor-footnote {
  font-size:10px;
  line-height:1.7;
  color:#8b93a0;
  padding:0 4px;
  margin:0;
}

.preview-sticky {
  position:sticky;
  top:24px;
}

.preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:42px;
  margin-bottom:15px;
}

.preview-toolbar>div:first-child {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
}

.preview-toolbar strong {
  font-weight:600;
}

.paper-label {
  font-size:10px;
  color:#939aa5;
  border-left:1px solid #d9dfe8;
  margin-left:7px;
  padding-left:13px;
}

.preview-actions {
  display:flex;
  gap:14px;
}

.text-button {
  display:flex;
  align-items:center;
  gap:6px;
  border:0;
  background:transparent;
  font-size:11px;
  color:#63718a;
  padding:6px 0;
}

.text-button:hover {
  color:var(--blue);
}

#invoice-preview {
  display:flex;
  flex-direction:column;
  gap:22px;
  outline:0;
}

.invoice-page {
  background:#fff;
  box-shadow:0 3px 18px #18223508,0 0 0 1px #e7eaf0;
  width:100%;
  aspect-ratio:210/297;
}

.invoice-page svg {
  display:block;
  width:100%;
  height:100%;
  font-family:Arial,Helvetica,sans-serif;
}

.preview-footnote {
  text-align:center;
  color:#949ba8;
  font-size:10px;
  line-height:1.7;
  margin:18px 0;
}

.preview-footnote span {
  padding:0 8px;
}

.notification,.validation {
  padding:13px 16px;
  border:1px solid #ccdafa;
  border-radius:7px;
  background:#f0f5ff;
  margin-bottom:20px;
  font-size:12px;
  line-height:1.6;
}

.validation {
  background:#fff5f4;
  border-color:#f3cac6;
  color:#9d231b;
}

.validation ul {
  margin:5px 0 0;
  padding-left:20px;
}

.notification[hidden],.validation[hidden] {
  display:none;
}

input[aria-invalid=true],textarea[aria-invalid=true] {
  border-color:#d2645b;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

dialog {
  max-width:430px;
  width:calc(100% - 32px);
  border:1px solid #e3e8f0;
  border-radius:12px;
  padding:0;
  box-shadow:0 15px 70px #18223530;
  color:var(--ink);
}

dialog::backdrop {
  background:#14213d55;
}

.dialog-content {
  padding:30px;
}

.dialog-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:9px;
  background:#edf3ff;
  color:var(--blue);
  font-size:23px;
}

.dialog-content h2 {
  font-size:21px;
  letter-spacing:-.5px;
  margin:19px 0 12px;
}

.dialog-content p {
  font-size:12px;
  color:#7a8392;
  line-height:1.8;
  margin:0 0 25px;
}

.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

@media(min-width:1550px) {
  .workspace-grid {
    grid-template-columns:460px minmax(0,1fr);
  }
}

@media(max-width:1100px) {
  .app-header {
    padding:0 24px;
  }
  .workspace {
    padding:30px 24px;
  }
  .workspace-grid {
    grid-template-columns:minmax(310px,380px) minmax(0,1fr);
    gap:22px;
  }
  .form-section {
    padding:19px 18px;
  }
  .editor-total {
    margin:19px -18px -19px;
    padding:16px 18px;
  }
  .section-caption {
    font-size:9px;
  }
  .workspace-heading h1 {
    font-size:29px;
  }
  .paper-label {
    padding-left:8px;
    margin-left:2px;
  }
  .preview-actions {
    gap:9px;
  }
}

@media(max-width:860px) {
  .workspace-grid {
    grid-template-columns:1fr;
    gap:24px;
    max-width:700px;
    margin:0 auto;
  }
  .preview-sticky {
    position:static;
  }
  .workspace-heading {
    align-items:flex-start;
  }
  .workspace-heading p {
    max-width:230px;
    line-height:1.7;
  }
  .main-actions {
    flex-direction:column;
  }
  .main-actions .button {
    min-height:37px;
    padding:9px 13px;
  }
  .form-section {
    padding:22px;
  }
  .editor-total {
    margin:19px -22px -19px;
    padding:16px 22px;
  }
  .section-caption {
    font-size:10px;
  }
}

@media(max-width:480px) {
  .app-header {
    height:68px;
    padding:0 18px;
  }
  .header-label {
    display:none;
  }
  .workspace {
    padding:27px 16px 30px;
  }
  .workspace-heading {
    flex-direction:column;
    gap:19px;
    margin-bottom:25px;
  }
  .workspace-heading h1 {
    font-size:29px;
  }
  .workspace-heading p {
    max-width:none;
    font-size:12px;
  }
  .main-actions {
    flex-direction:row;
    width:100%;
  }
  .main-actions .button {
    flex:1;
    min-height:42px;
    font-size:11px;
  }
  .form-section {
    padding:20px 16px;
  }
  .editor-total {
    margin:19px -16px -19px;
    padding:16px;
  }
  .field-grid {
    gap:9px;
  }
  .field select {
    font-size:10px;
  }
  .section-caption {
    font-size:9px;
  }
  .preview-toolbar>div:first-child {
    gap:6px;
  }
  .paper-label {
    font-size:9px;
    padding-left:6px;
  }
  .preview-actions {
    gap:10px;
  }
  .preview-footnote {
    font-size:9px;
  }
  .preview-footnote span {
    padding:0 4px;
  }
}

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

@media print {
  html,body {
    background:#fff!important;
    margin:0!important;
    padding:0!important;
    width:210mm;
    color:#182235;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
  .app-header,.workspace-heading,.editor,.preview-toolbar,.preview-footnote,.notification,.validation,dialog,noscript {
    display:none!important;
  }
  .workspace,.workspace-grid,.preview-panel,.preview-sticky,#invoice-preview {
    display:block!important;
    width:210mm!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    gap:0!important;
  }
  .invoice-page {
    display:block;
    width:210mm!important;
    height:297mm!important;
    aspect-ratio:auto;
    box-shadow:none!important;
    margin:0!important;
    break-after:page;
    break-inside:avoid;
    page-break-inside:avoid;
    overflow:hidden;
  }
  .invoice-page:last-child {
    break-after:auto;
    page-break-after:auto;
  }
  .invoice-page svg {
    width:210mm;
    height:297mm;
  }
}