@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/Ubuntu-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/Ubuntu-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/Ubuntu-Bold.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --bg: #f4efe7;
  --bg-accent: #e7dece;
  --surface: rgba(255, 252, 247, 0.94);
  --surface-strong: #fffdf9;
  --surface-alt: #f7f1e8;
  --line: rgba(75, 57, 33, 0.12);
  --line-strong: rgba(75, 57, 33, 0.22);
  --text: #2b2014;
  --muted: #6f6253;
  --accent: #9b6c2f;
  --accent-strong: #734b18;
  --accent-soft: rgba(155, 108, 47, 0.12);
  --danger: #c4544a;
  --danger-soft: rgba(196, 84, 74, 0.12);
  --success: #19805f;
  --success-soft: rgba(25, 128, 95, 0.12);
  --warning: #c5851e;
  --shadow: 0 18px 40px rgba(55, 39, 21, 0.12);
  --body-background:
    radial-gradient(circle at top left, rgba(155, 108, 47, 0.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(89, 58, 17, 0.1), transparent 22%),
    linear-gradient(135deg, #faf5ee 0%, #f0e6d7 52%, #faf7f1 100%);
  --sidebar-background: linear-gradient(180deg, rgba(36, 24, 11, 0.98), rgba(71, 48, 21, 0.95));
  --sidebar-text: #fff8ef;
  --sidebar-link-bg: rgba(255, 247, 233, 0.05);
  --sidebar-link-border: rgba(234, 203, 150, 0.12);
  --sidebar-link-text: rgba(255, 240, 214, 0.84);
  --hero-background: linear-gradient(135deg, rgba(42, 28, 13, 0.98), rgba(123, 84, 29, 0.92));
  --brand-background: linear-gradient(135deg, #f4d19a, #c4893a);
  --brand-text: #3a240d;
  --radius-xl: 6px;
  --radius-lg: 6px;
  --radius-md: 6px;
  --radius-sm: 6px;
  --font-body: "Ubuntu", "Trebuchet MS", sans-serif;
  --font-heading: "Ubuntu", "Trebuchet MS", sans-serif;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #0e141b;
  --bg-accent: #18222e;
  --surface: rgba(18, 27, 36, 0.94);
  --surface-strong: #10171f;
  --surface-alt: #15212d;
  --line: rgba(126, 149, 172, 0.16);
  --line-strong: rgba(126, 149, 172, 0.28);
  --text: #e9eff5;
  --muted: #95a6b7;
  --accent: #4e94d8;
  --accent-strong: #3274b7;
  --accent-soft: rgba(78, 148, 216, 0.14);
  --danger: #e06f66;
  --danger-soft: rgba(224, 111, 102, 0.14);
  --success: #3db78d;
  --success-soft: rgba(61, 183, 141, 0.14);
  --warning: #e5a94f;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.34);
  --body-background:
    radial-gradient(circle at top left, rgba(78, 148, 216, 0.15), transparent 24%),
    radial-gradient(circle at bottom right, rgba(61, 183, 141, 0.12), transparent 22%),
    linear-gradient(135deg, #091018 0%, #101922 52%, #0b1218 100%);
  --sidebar-background: linear-gradient(180deg, rgba(7, 11, 17, 0.99), rgba(14, 21, 31, 0.97));
  --sidebar-text: #ecf6ff;
  --sidebar-link-bg: rgba(239, 248, 255, 0.04);
  --sidebar-link-border: rgba(126, 149, 172, 0.1);
  --sidebar-link-text: rgba(229, 239, 249, 0.84);
  --hero-background: linear-gradient(135deg, rgba(9, 17, 25, 0.98), rgba(35, 57, 79, 0.94));
  --brand-background: linear-gradient(135deg, #19334b, #4e94d8);
  --brand-text: #eef8ff;
}

:root[data-theme="emerald"] {
  --bg: #eef7f2;
  --bg-accent: #d8ede4;
  --surface: rgba(251, 255, 253, 0.95);
  --surface-strong: #ffffff;
  --surface-alt: #f0faf5;
  --line: rgba(24, 83, 63, 0.12);
  --line-strong: rgba(24, 83, 63, 0.22);
  --text: #17392d;
  --muted: #628176;
  --accent: #19805f;
  --accent-strong: #11674c;
  --accent-soft: rgba(25, 128, 95, 0.12);
  --danger: #c15454;
  --danger-soft: rgba(193, 84, 84, 0.12);
  --success: #19805f;
  --success-soft: rgba(25, 128, 95, 0.12);
  --warning: #ca8b2d;
  --shadow: 0 18px 38px rgba(22, 69, 53, 0.1);
  --body-background:
    radial-gradient(circle at top left, rgba(25, 128, 95, 0.18), transparent 26%),
    radial-gradient(circle at bottom right, rgba(89, 170, 141, 0.13), transparent 24%),
    linear-gradient(135deg, #f7fcf9 0%, #e9f5ef 50%, #f8fcfa 100%);
  --sidebar-background: linear-gradient(180deg, rgba(12, 53, 39, 0.99), rgba(23, 96, 70, 0.96));
  --sidebar-text: #eefef7;
  --sidebar-link-bg: rgba(244, 255, 249, 0.05);
  --sidebar-link-border: rgba(148, 225, 197, 0.14);
  --sidebar-link-text: rgba(235, 255, 246, 0.86);
  --hero-background: linear-gradient(135deg, rgba(10, 53, 40, 0.98), rgba(26, 128, 96, 0.92));
  --brand-background: linear-gradient(135deg, #c7f0de, #1f9d75);
  --brand-text: #11382b;
}

:root[data-theme="executive"] {
  --bg: #eff2f8;
  --bg-accent: #dee6f0;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-strong: #ffffff;
  --surface-alt: #f5f8fc;
  --line: rgba(20, 40, 72, 0.12);
  --line-strong: rgba(20, 40, 72, 0.22);
  --text: #192c47;
  --muted: #64778d;
  --accent: #2f63c7;
  --accent-strong: #1f4aa0;
  --accent-soft: rgba(47, 99, 199, 0.12);
  --danger: #c75652;
  --danger-soft: rgba(199, 86, 82, 0.12);
  --success: #207b69;
  --success-soft: rgba(32, 123, 105, 0.12);
  --warning: #d08a28;
  --shadow: 0 18px 38px rgba(26, 47, 79, 0.1);
  --body-background:
    radial-gradient(circle at top right, rgba(47, 99, 199, 0.16), transparent 26%),
    radial-gradient(circle at bottom left, rgba(32, 123, 105, 0.12), transparent 24%),
    linear-gradient(135deg, #f7faff 0%, #edf3f8 52%, #f9fbfe 100%);
  --sidebar-background: linear-gradient(180deg, rgba(15, 30, 54, 0.99), rgba(24, 52, 88, 0.96));
  --sidebar-text: #eef5ff;
  --sidebar-link-bg: rgba(243, 248, 255, 0.05);
  --sidebar-link-border: rgba(130, 167, 233, 0.13);
  --sidebar-link-text: rgba(234, 244, 255, 0.86);
  --hero-background: linear-gradient(135deg, rgba(17, 34, 61, 0.98), rgba(47, 99, 199, 0.9));
  --brand-background: linear-gradient(135deg, #dce9ff, #5f90e4);
  --brand-text: #19365b;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--body-background);
  color: var(--text);
  font-family: var(--font-body);
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.hidden { display: none !important; }
.text-right { text-align: right; }

.app-shell { min-height: 100vh; padding: 20px; }
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--accent);
}

.login-view {
  min-height: calc(100vh - 40px);
  display: grid;
  grid-template-columns: minmax(340px, 470px) minmax(420px, 1fr);
  gap: 24px;
}

.login-panel, .login-art, .panel-card, .hero-panel, .metric-card, .workspace-header, .modal-dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.login-panel {
  background: var(--surface);
  padding: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.login-panel h1, h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
}

.login-panel h1 {
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.05;
}

.lead, .workspace-copy, .panel-head p, .hero-panel p, .summary-note {
  color: var(--muted);
  line-height: 1.65;
}

.login-art {
  background:
    linear-gradient(180deg, rgba(9, 13, 18, 0.16), rgba(9, 13, 18, 0.5)),
    var(--hero-background);
  color: #fff7ec;
  padding: 32px;
  display: grid;
  gap: 18px;
  align-content: end;
}

.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.preview-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: grid;
  gap: 8px;
}
.preview-hero { min-height: 220px; align-content: end; }
.preview-tag {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.12);
}

.auth-form, .field, .compact-field { display: grid; gap: 8px; }
.field span, .compact-field span, .connection-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 700;
}
.input-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.input-action-btn {
  min-width: 74px;
  padding-inline: 14px;
}
.login-meta-row {
  display: flex;
  justify-content: flex-end;
}
.text-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-strong);
}
input, select, textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  padding: 13px 14px;
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.connection-card, .status-card, .panel-pill, .mini-stat-card, .summary-card, .detail-block, .detail-summary, .detail-stat-grid > article {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.connection-card, .status-card { padding: 14px; }
.connection-card code { font-size: 13px; word-break: break-all; }
.status-card.error { border-color: rgba(196,84,74,.34); color: var(--danger); }
.api-config-card { display: grid; gap: 14px; }
.api-config-card summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  font-weight: 800;
}
.api-config-card summary::marker { color: var(--accent); }
.api-config-card summary small {
  color: var(--muted);
  font-weight: 500;
}
.api-config-card[open] summary { margin-bottom: 14px; }
.api-config-grid { margin-bottom: 14px; }
.api-config-actions { margin-bottom: 8px; }
.error-text { color: var(--danger); }

.login-actions, .workspace-actions, .hero-actions, .detail-actions, .modal-actions, .pager-actions, .toolbar-row, .section-head, .panel-head, .summary-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.login-actions, .modal-actions { justify-content: flex-start; }
.workspace-actions, .toolbar-row, .panel-head, .section-head { flex-wrap: wrap; }

.primary-btn, .ghost-btn, .danger-btn, .anchor-btn {
  border-radius: 6px;
  padding: 12px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
}
.primary-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fffdf8;
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
}
.ghost-btn, .anchor-btn {
  background: rgba(255,255,255,.42);
  border-color: var(--line-strong);
  color: var(--text);
}
.danger-btn {
  background: var(--danger-soft);
  border-color: rgba(196,84,74,.26);
  color: var(--danger);
}

.workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  min-height: calc(100vh - 40px);
  align-items: start;
}

.sidebar {
  background: var(--sidebar-background);
  color: var(--sidebar-text);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.08);
  padding: 22px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
}

.brand-lockup { display: flex; gap: 14px; align-items: center; }
.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  background: var(--brand-background);
  color: var(--brand-text);
  font-size: 22px;
  font-weight: 700;
}

.premium-badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sidebar-nav, .stack-list, .line-items, .dynamic-list {
  display: grid;
  gap: 12px;
}

.nav-btn, .sidebar-link {
  border-radius: var(--radius-md);
  background: var(--sidebar-link-bg);
  border: 1px solid var(--sidebar-link-border);
  color: var(--sidebar-link-text);
}

.nav-btn {
  width: 100%;
  padding: 14px 15px;
  text-align: left;
  display: grid;
  gap: 4px;
}
.nav-btn-featured {
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  color: #fffefb;
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
}
.nav-btn.active {
  background: rgba(255,255,255,.12);
  color: #fffefb;
  border-color: rgba(255,255,255,.18);
}
.nav-label { font-weight: 700; font-size: 15px; }
.sidebar-link {
  display: block;
  padding: 12px 14px;
}
.sidebar-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.64);
  margin-bottom: 10px;
}

.workspace-main { display: grid; gap: 20px; min-width: 0; }
.workspace-header {
  background: var(--surface);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.notice {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.notice.error { color: var(--danger); border-color: rgba(196,84,74,.26); background: var(--danger-soft); }
.notice.success { color: var(--success); border-color: rgba(25,128,95,.24); background: var(--success-soft); }

.page-section { display: grid; gap: 18px; }
.hero-panel, .panel-card, .metric-card {
  background: var(--surface);
  padding: 22px;
}
.hero-panel {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    var(--surface);
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.metric-card {
  display: grid;
  gap: 8px;
}
.metric-card span, .mini-stat-card span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 700;
}
.metric-card strong, .mini-stat-card strong { font-size: 28px; line-height: 1; }
.accent-card {
  background: var(--hero-background);
  color: #fffaf4;
}
.accent-card span, .accent-card small { color: rgba(255,255,255,.76); }

.widget-grid, .split-shell, .collection-grid, .detail-stat-grid, .form-grid, .theme-grid {
  display: grid;
  gap: 16px;
}
.widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-shell { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr); }
.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.field-wide { grid-column: 1 / -1; }
.panel-head { justify-content: space-between; }
.panel-head h4 { font-size: 20px; }
.panel-pill {
  padding: 8px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table th, .data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--surface-alt);
}

.table-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.table-btn, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.chip.success { color: var(--success); background: var(--success-soft); border-color: rgba(25,128,95,.24); }
.chip.warning { color: var(--warning); background: rgba(197,133,30,.12); border-color: rgba(197,133,30,.24); }
.chip.danger { color: var(--danger); background: var(--danger-soft); border-color: rgba(196,84,74,.24); }
.chip.info { color: var(--accent); background: var(--accent-soft); border-color: rgba(155,108,47,.24); }

.empty-state, .detail-empty {
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  text-align: center;
}

.pager-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.stack-row, .line-item {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.stack-row small, .stack-meta { color: var(--muted); display: block; margin-top: 4px; line-height: 1.55; }

.detail-panel { align-self: start; }
.detail-content { display: grid; gap: 14px; }
.detail-summary {
  padding: 16px;
  display: grid;
  gap: 8px;
}
.detail-summary strong { font-size: 22px; }
.detail-block {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.detail-block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail-actions { flex-wrap: wrap; }

.mini-stat-card, .detail-stat-grid > article {
  padding: 16px;
  display: grid;
  gap: 8px;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 22, 0.58);
}
.modal-dialog {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--surface);
  padding: 22px;
}
.modal-wide { width: min(1040px, calc(100vw - 32px)); }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}
.modal-body { display: grid; gap: 18px; }
.workspace-form-body { display: grid; gap: 18px; }
.form-section { display: grid; gap: 14px; }
.dynamic-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  padding: 16px;
  display: grid;
  gap: 12px;
}
.dynamic-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
.payment-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
.summary-card {
  padding: 18px;
  display: grid;
  gap: 10px;
}
.summary-row { justify-content: space-between; }
.summary-row.total { padding-top: 10px; border-top: 1px solid var(--line); }

.wizard-shell {
  display: grid;
  gap: 18px;
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--text);
  text-align: left;
}

.wizard-step.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.wizard-step.complete {
  background: rgba(25, 128, 95, 0.08);
  border-color: rgba(25, 128, 95, 0.24);
}

.wizard-step-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  font-weight: 700;
}

.wizard-step-copy {
  display: grid;
  gap: 4px;
}

.wizard-step-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.wizard-panel {
  display: grid;
  gap: 16px;
}

.wizard-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.settings-shell {
  align-items: start;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.logo-settings-shell {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.logo-preview-card {
  min-height: 180px;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  padding: 18px;
}

.logo-preview-empty {
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.logo-settings-actions {
  display: grid;
  gap: 14px;
}

#settingsLogoPreviewImage {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.template-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.template-choice-card {
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  padding: 14px;
  display: grid;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.template-choice-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.template-choice-swatch {
  height: 118px;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 10px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.template-swatch-bar {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}

.template-swatch-panel {
  display: block;
  width: 48%;
  height: 28px;
  border-radius: 6px;
  border: 1px solid currentColor;
  opacity: .5;
}

.template-swatch-lines {
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 6px;
  border: 1px dashed currentColor;
  opacity: .35;
}

.template-choice-classic {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #2563eb;
}

.template-choice-executive {
  background: linear-gradient(180deg, #0f172a, #1f2937);
  color: #dbeafe;
}

.template-choice-studio {
  background: linear-gradient(180deg, #fffdf8, #f7efe2);
  color: #b45309;
}

.wizard-aside {
  align-self: start;
}

.compact-summary-grid {
  grid-template-columns: 1fr;
  margin-bottom: 8px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.review-card span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 700;
}

.invoice-review-shell {
  display: grid;
  gap: 18px;
}

.invoice-review-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 16px;
  align-items: start;
}

.invoice-review-summary {
  align-self: stretch;
}

.invoice-review-summary .summary-row {
  padding-block: 4px;
}

.invoice-review-preview {
  padding: 20px;
  gap: 18px;
}

.invoice-preview-toolbar {
  display: grid;
  gap: 8px;
}

.native-preview-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  padding: 16px;
  display: grid;
  gap: 14px;
}

.native-invoice-preview {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.92));
  padding: 28px;
  overflow: auto;
  display: flex;
  justify-content: center;
}

.native-invoice-sheet {
  display: grid;
  gap: 18px;
  width: min(100%, 1120px);
  min-width: 860px;
  margin: 0 auto;
  padding: 28px;
  color: var(--text);
  border: 1px var(--border-style, solid) var(--line);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98)),
    var(--sheet);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .08);
}

.native-invoice-header,
.native-parties-grid,
.native-bottom-grid {
  display: grid;
  gap: 14px;
}

.native-invoice-header,
.native-bottom-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr);
  align-items: start;
}

.native-bottom-grid-totals-only {
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .8fr);
}

.native-bottom-grid-totals-only .native-total-card {
  grid-column: 2;
}

.native-parties-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.native-invoice-brand {
  display: grid;
  gap: 8px;
}

.native-brand-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.native-brand-copy-block {
  display: grid;
  gap: 6px;
}

.native-logo-box {
  width: 92px;
  height: 92px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--sheet);
  display: grid;
  place-items: center;
  padding: 10px;
}

.native-logo-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.native-brand-kicker,
.native-party-card span,
.native-summary-card span,
.native-copy-card span,
.native-payment-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
}

.native-brand-copy {
  color: var(--muted);
  line-height: 1.6;
}

.native-invoice-brand h3,
.native-meta-number,
.native-grand-total,
.native-grand-total strong {
  color: var(--title);
}

.native-meta-card,
.native-party-card,
.native-summary-card,
.native-line-card,
.native-copy-card,
.native-total-card,
.native-payment-card {
  border: 1px var(--border-style, solid) var(--line);
  border-radius: 6px;
  background: var(--sheet);
}

.native-meta-card,
.native-party-card,
.native-summary-card,
.native-copy-card,
.native-total-card,
.native-payment-card {
  padding: 16px;
}

.native-meta-card {
  display: grid;
  gap: 10px;
  text-align: right;
}

.native-meta-title {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.native-meta-number {
  font-size: 28px;
  line-height: 1;
  font-family: var(--font-heading);
}

.native-status-badge {
  justify-self: end;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.native-party-card,
.native-summary-card,
.native-total-card {
  display: grid;
  gap: 10px;
}

.native-summary-card > div,
.native-total-card > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.native-line-card {
  padding: 0;
  overflow: hidden;
}

.native-line-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.native-line-table th,
.native-line-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.native-line-table th {
  background: var(--surface-alt);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: left;
}

.native-line-table col.native-col-index {
  width: 7%;
}

.native-line-table th.native-col-index,
.native-line-table td.native-col-index {
  text-align: center;
}

.native-line-table col.native-col-description {
  width: 43%;
}

.native-line-table th.native-col-description,
.native-line-table td.native-col-description {
  text-align: left;
}

.native-line-table col.native-col-qty {
  width: 12%;
}

.native-line-table th.native-col-qty,
.native-line-table td.native-col-qty {
  text-align: right;
}

.native-line-table col.native-col-unit {
  width: 19%;
}

.native-line-table th.native-col-unit,
.native-line-table td.native-col-unit {
  text-align: right;
}

.native-line-table col.native-col-amount {
  width: 19%;
}

.native-line-table th.native-col-amount,
.native-line-table td.native-col-amount {
  text-align: right;
}

.native-line-table td.native-col-qty,
.native-line-table td.native-col-unit,
.native-line-table td.native-col-amount {
  white-space: nowrap;
}

.native-line-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.native-table-empty {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.native-notes-stack,
.native-payment-grid {
  display: grid;
  gap: 12px;
}

.native-payment-section {
  width: 100%;
}

.native-payment-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.native-payment-card {
  min-width: 0;
}

.native-empty-note {
  color: var(--muted);
}

.native-copy-value {
  line-height: 1.7;
  font-weight: 600;
}

.native-payment-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}

.native-payment-table td {
  padding: 4px 0;
  font-size: 12px;
  vertical-align: top;
}

.native-payment-table td:first-child {
  color: var(--muted);
}

.native-payment-table td:last-child {
  text-align: right;
  font-weight: 700;
}

.native-template-executive .native-invoice-header {
  background: #0f172a;
  border-radius: 6px;
  padding: 18px;
}

.native-template-executive .native-brand-kicker,
.native-template-executive .native-brand-copy,
.native-template-executive .native-invoice-brand h3,
.native-template-executive .native-meta-title,
.native-template-executive .native-meta-number {
  color: #f8fafc;
}

.native-template-executive .native-meta-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.native-template-executive .native-status-badge {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
}

.native-template-executive .native-line-table th {
  background: #e8eef8;
}

.native-invoice-sheet.native-template-studio {
  border-top: 10px solid var(--accent);
}

.native-template-studio .native-invoice-header {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 16px;
}

.native-template-studio .native-line-table th {
  background: #f6efe4;
}

.native-template-studio .native-copy-card,
.native-template-studio .native-payment-card,
.native-template-studio .native-party-card,
.native-template-studio .native-summary-card,
.native-template-studio .native-total-card {
  background: #fffdf8;
}

.native-grand-total {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 18px;
}

.native-invoice-footer {
  padding-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--line);
}

.invoice-review-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.invoice-review-controls > .form-section {
  grid-column: 1 / -1;
}

.toggle-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-alt);
  padding: 16px;
  display: grid;
  gap: 8px;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 700;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.wizard-actions {
  justify-content: flex-end;
}

.invoice-workspace-hero {
  align-items: center;
}

.invoice-workspace-card {
  padding: 24px;
}

.payment-method-row {
  align-items: center;
}

.theme-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  padding: 18px;
  display: grid;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.theme-swatch {
  height: 110px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
}
.theme-linen { background: linear-gradient(135deg, #fff8ef 0%, #d9ba8d 100%); }
.theme-midnight { background: linear-gradient(135deg, #101922 0%, #4282c4 100%); }
.theme-emerald { background: linear-gradient(135deg, #eff9f3 0%, #19805f 100%); }
.theme-executive { background: linear-gradient(135deg, #f6f9ff 0%, #406dcd 100%); }

@media (max-width: 1280px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .workspace { grid-template-columns: 1fr; }
  .split-shell, .widget-grid, .login-view, .wizard-split { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .invoice-review-overview, .invoice-review-controls { grid-template-columns: 1fr; }
  .logo-settings-shell { grid-template-columns: 1fr; }
  .template-choice-grid { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
  .native-invoice-header, .native-parties-grid, .native-bottom-grid { grid-template-columns: 1fr; }
  .native-bottom-grid-totals-only .native-total-card { grid-column: auto; }
  .native-meta-card { text-align: left; }
  .native-status-badge { justify-self: start; }
  .native-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .app-shell { padding: 12px; }
  .workspace-header, .hero-panel, .panel-card, .metric-card, .login-panel, .login-art, .modal-dialog { padding: 18px; }
  .metrics-grid, .form-grid, .detail-stat-grid, .collection-grid, .theme-grid, .review-grid, .wizard-progress { grid-template-columns: 1fr; }
  .dynamic-item-grid, .payment-detail-grid { grid-template-columns: 1fr; }
  .data-table { min-width: 620px; }
  .workspace-actions { align-items: stretch; }
  .native-invoice-preview { padding: 12px; }
  .native-invoice-sheet { min-width: 680px; padding: 18px; }
  .native-brand-head { grid-template-columns: 1fr; }
  .native-payment-grid { grid-template-columns: 1fr; }
}