.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { min-height: 34px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .86rem; }
.tabs button.on { background: var(--accent); color: #fff; border-color: transparent; }

.inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.lines { display: grid; gap: 6px; }
.line { display: grid; grid-template-columns: 2.4fr .7fr .9fr .7fr .7fr auto; gap: 6px; align-items: center; }
.line input { min-height: 34px; padding: 5px 8px; }
.line-head span { font-size: .7rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.icon-x { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--bad); font-size: 1.1rem; line-height: 1; }

.preview {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: .86rem;
}
.pv-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pv-head h2 { margin: 0; font-size: 1.1rem; }
.pv-meta { text-align: right; }
.pv-meta strong { letter-spacing: .12em; color: var(--text-2); font-size: .78rem; }
.pv-bill { margin-bottom: 14px; }
.pv-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pv-table th { text-align: left; border-bottom: 1px solid var(--text); padding: 6px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.pv-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pv-table th:not(:first-child), .pv-table td:not(:first-child) { text-align: right; }
.pv-tot { margin-left: auto; width: 260px; }
.pv-tot > div { display: flex; justify-content: space-between; padding: 3px 0; font-variant-numeric: tabular-nums; }
.pv-grand { border-top: 1px solid var(--text); margin-top: 4px; padding-top: 6px !important; font-weight: 700; }
.pv-pay, .pv-notes { margin-top: 16px; font-size: .82rem; }

@media (max-width: 860px) {
  .inv-grid { grid-template-columns: 1fr; }
  .line { grid-template-columns: 1fr 1fr; }
  .line input[data-k="description"] { grid-column: 1 / -1; }
  .line .icon-x { grid-column: 2; justify-self: end; }
}

@media print {
  .shell-bar, .shell-notice, .tabs, h1, #edit { display: none !important; }
  .shell-frame { padding: 0; max-width: none; }
  .inv-grid { display: block; }
  .preview { border: 0; padding: 0; }
  @page { margin: 18mm; }
}