:root {
  color-scheme: light;
  --navy: #102a43;
  --navy-2: #183f5d;
  --blue: #176b87;
  --teal: #087f8c;
  --teal-dark: #05616b;
  --ink: #17212b;
  --muted: #5c6b77;
  --line: #cfdae2;
  --paper: #fff;
  --wash: #f3f7f9;
  --selected: #c9f0ec;
  --danger: #a32929;
  --focus: #ffbf47;
  --radius: 16px;
  --shadow: 0 12px 34px rgba(16, 42, 67, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wash); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: .6rem 1rem; background: white; color: var(--navy); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.page-shell { width: min(1380px, calc(100% - 2rem)); margin: 1rem auto 4rem; }

.campaign-header, .card-panel, .summary-panel, .sample-panel, .form-panel, .confirmation { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.campaign-header { padding: clamp(1.2rem, 3vw, 2.2rem); background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: white; }
.campaign-header h1 { margin: .2rem 0 .55rem; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.08; }
.campaign-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.campaign-meta div { padding: .8rem; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; }
.campaign-meta dt { font-size: .73rem; text-transform: uppercase; letter-spacing: .09em; color: #bcd9e3; }
.campaign-meta dd { margin: .18rem 0 0; font-weight: 720; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr); gap: 1.25rem; margin-top: 1.25rem; align-items: start; }
.card-panel, .summary-panel, .sample-panel, .form-panel, .confirmation { padding: clamp(1rem, 2.4vw, 1.8rem); }
.right-rail { display: grid; gap: 1.25rem; min-width: 0; }
.summary-panel { position: sticky; top: 1rem; }
.sample-panel { min-width: 0; }
.sample-heading { display: grid; gap: .6rem; }
.sample-heading h2 { margin-bottom: .35rem; font-size: clamp(1.08rem, 1.8vw, 1.35rem); }
.sample-switcher { display: inline-flex; justify-self: start; padding: 3px; background: #e8eff3; border-radius: 9px; }
.sample-tab { padding: .42rem .75rem; border: 0; border-radius: 6px; background: transparent; color: var(--navy); font-size: .78rem; font-weight: 750; }
.sample-tab.is-active { background: white; box-shadow: 0 2px 7px rgba(16,42,67,.14); }
.sample-card { margin: .75rem 0 0; }
.sample-card img { display: block; width: 100%; aspect-ratio: 12 / 6.5; object-fit: contain; border: 1px solid var(--line); border-radius: 7px; background: #f7f8f9; }
.sample-card figcaption { margin-top: .45rem; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
h2 { margin: .12rem 0 1rem; color: var(--navy); font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.size-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; max-width: 920px; margin: -.55rem 0 1rem; color: var(--ink); font-size: .9rem; line-height: 1.45; }
.size-guide span { padding: .48rem .6rem; border: 1px solid #222; border-radius: 5px; background: #fff; }
.size-guide strong { color: var(--navy); }
.eyebrow { margin: 0; color: var(--teal-dark); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-switcher { display: inline-flex; padding: 4px; background: #e8eff3; border-radius: 10px; }
.side-tab { padding: .58rem 1rem; border: 0; border-radius: 7px; background: transparent; color: var(--navy); font-weight: 750; }
.side-tab.is-active { background: white; box-shadow: 0 2px 8px rgba(16,42,67,.14); }

.legend { display: flex; flex-wrap: wrap; gap: .5rem .85rem; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; font-size: .76rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-swatch { display: inline-block; flex: 0 0 .8rem; width: .8rem; height: .8rem; border: 1px solid #687b87; border-radius: 3px; }
.legend-swatch.available { background: white; }
.legend-swatch.selected { background: var(--selected); border-color: var(--teal-dark); }
.legend-swatch.reserved { background: #fff4cc; border-color: #d9a514; }
.legend-swatch.sold { background: #d6dce0; }
.legend-swatch.pending { background: #e7dff4; }
.legend-completed { font-weight: 700; color: #365f3c; }
.selection-message { min-height: 2.5rem; margin: .8rem 0; padding: .55rem .7rem; background: #edf7f8; border-left: 4px solid var(--teal); color: var(--navy); font-size: .9rem; }
.selection-message.is-error { background: #fff0f0; border-color: var(--danger); color: #751d1d; }

.mailer-card { position: relative; aspect-ratio: 12 / 6.5; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: minmax(0, 1fr) 13% minmax(0, 1fr); gap: .45rem; padding: .45rem; background: #0a91a8; border: 2px solid #08768a; border-radius: 8px; overflow: hidden; }
.slot { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 4px; overflow: hidden; background: #f9fafb; border: 2px solid rgba(255,255,255,.7); }
.slot.is-selected { border-color: #044f58; box-shadow: inset 0 0 0 3px #6fe0d8; }
.slot-id { position: absolute; z-index: 2; top: .35rem; left: .4rem; padding: .12rem .32rem; border-radius: 4px; background: rgba(16,42,67,.92); color: white; font-size: clamp(.56rem, 1.15vw, .78rem); font-weight: 800; pointer-events: none; }
.slot-status { position: absolute; z-index: 2; bottom: .3rem; left: .35rem; right: .35rem; font-size: clamp(.5rem, .85vw, .66rem); font-weight: 750; text-align: center; pointer-events: none; }
.slot-actions { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 100%; }
.slot-action { display: grid; place-content: center; min-width: 0; padding: .8rem .12rem .35rem; border: 0; background: transparent; color: var(--navy); font-size: clamp(.52rem, .9vw, .72rem); font-weight: 720; }
.slot-action + .slot-action { border-left: 1px solid var(--line); }
.slot-action small { display: block; font-size: clamp(.46rem, .76vw, .63rem); font-weight: 750; }
.slot-action em { display: block; color: var(--teal-dark); font-size: clamp(.44rem, .72vw, .6rem); font-style: normal; font-weight: 850; }
.slot-action:hover:not(:disabled) { background: #e6f5f5; }
.slot-action.is-selected { background: var(--selected); }
.slot-action:disabled { color: #5d6770; opacity: .78; }
.slot-full-action { grid-column: 1 / -1; padding: .28rem .1rem; border-top: 1px solid var(--line) !important; border-left: 0 !important; font-size: clamp(.5rem, .8vw, .65rem); }
.slot.is-split .slot-actions { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.slot.is-split .slot-action + .slot-action { border-top: 1px solid var(--line); border-left: 0; }
.slot.status-temporarily-reserved { background: #fff4cc; }
.slot.status-sold { background: #d6dce0; }
.slot.status-artwork-pending { background: #e7dff4; }
.slot.status-completed { background: #dcebdc; }
.center-band { grid-column: 1 / -1; grid-row: 2; min-height: 0; overflow: hidden; background: white; border-radius: 3px; }
.center-band img { display: block; width: 100%; height: 100%; object-fit: fill; }
.reserved-state, .combined-slot { display: grid; place-content: center; gap: .2rem; padding: .75rem; background: var(--selected); color: var(--navy); text-align: center; }
.reserved-state { height: 100%; }
.reserved-state strong, .combined-slot strong { font-size: clamp(.65rem, 1.2vw, 1rem); }
.reserved-state span, .combined-slot span { font-size: clamp(.5rem, .9vw, .75rem); }
.reserved-state em, .combined-slot em { color: var(--teal-dark); font-size: clamp(.48rem, .8vw, .68rem); font-style: normal; font-weight: 850; }
.combined-slot { z-index: 3; align-self: stretch; justify-self: stretch; border: 3px solid var(--teal-dark); border-radius: 5px; box-shadow: inset 0 0 0 2px white; }
.artwork-slot { background: #fff; }
.artwork-slot img { width: 100%; height: 100%; object-fit: cover; }
.artwork-slot-label { position: absolute; left: .25rem; bottom: .25rem; padding: .12rem .3rem; border-radius: 3px; background: rgba(16,42,67,.88); color: white; font-size: clamp(.45rem,.75vw,.62rem); font-weight: 800; }
.artwork-manager { margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.artwork-manager summary { color: var(--navy); font-weight: 800; cursor: pointer; }
.artwork-manager p, .artwork-message { color: var(--muted); font-size: .8rem; }
.artwork-controls { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .7rem; align-items: end; }
.artwork-controls label { display: grid; gap: .25rem; color: var(--navy); font-size: .8rem; font-weight: 700; }
.secondary-button { padding: .7rem .85rem; border: 1px solid var(--teal-dark); border-radius: 7px; background: white; color: var(--teal-dark); font-weight: 800; }
.card-help { margin: .75rem 0 .45rem; color: var(--muted); font-size: .85rem; }
.combination-choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.combo-button { padding: .52rem .7rem; border: 1px solid #9ab0bd; border-radius: 8px; background: white; color: var(--navy); font-size: .77rem; font-weight: 700; }
.combo-button:hover:not(:disabled) { border-color: var(--teal); background: #edfafa; }
.combo-button.is-selected { background: var(--selected); border-color: var(--teal-dark); }
.combo-button:disabled { background: #edf0f2; color: #69757d; }

.equivalent-meter { margin-bottom: 1rem; }
.meter-copy { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; font-weight: 700; }
.meter-track { height: 9px; margin-top: .4rem; overflow: hidden; background: #e4ebef; border-radius: 99px; }
.meter-fill { height: 100%; background: linear-gradient(90deg,var(--blue),var(--teal)); }
.empty-summary { padding: 1rem; border: 1px dashed #a9bac4; border-radius: 10px; color: var(--muted); text-align: center; }
.summary-item { display: grid; grid-template-columns: 1fr auto; gap: .3rem .7rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.summary-item:first-child { border-top: 0; }
.summary-item strong { color: var(--navy); }
.summary-item p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .78rem; }
.remove-button { grid-column: 2; padding: .2rem; border: 0; background: transparent; color: var(--danger); font-size: .78rem; text-decoration: underline; }
.summary-total { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; margin-top: .5rem; border-top: 2px solid var(--navy); color: var(--navy); font-size: 1.12rem; }
.primary-button { width: 100%; padding: .78rem 1rem; border: 0; border-radius: 9px; background: var(--teal-dark); color: white; font-weight: 800; }
.primary-button:hover:not(:disabled) { background: #034b53; }
.primary-button:disabled { background: #aab6bd; color: #edf0f2; }
.prototype-note { color: var(--muted); font-size: .74rem; text-align: center; }
.payment-notice { padding: .7rem; margin: .8rem 0 0; border: 1px solid #9bb7c2; border-radius: 8px; background: #edf7f8; color: var(--navy); font-size: .78rem; line-height: 1.5; }
.invoice-notice { padding: .7rem; margin: .6rem 0 0; border: 1px solid #d3b36a; border-radius: 8px; background: #fff8e8; color: var(--navy); font-size: .78rem; line-height: 1.5; }

.form-panel, .confirmation { margin-top: 1.25rem; }
.text-button { border: 0; background: transparent; color: var(--blue); text-decoration: underline; }
.reservation-review { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; padding: 1rem; margin-bottom: 1.2rem; background: #edf7f8; border-radius: 10px; }
.reservation-review span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.reservation-review strong { color: var(--navy); font-size: .88rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid label { display: grid; gap: .3rem; color: var(--navy); font-size: .86rem; font-weight: 700; }
.form-grid .full-width { grid-column: 1 / -1; }
input, select, textarea { width: 100%; padding: .68rem .72rem; border: 1px solid #8ca0ad; border-radius: 7px; background: white; color: var(--ink); }
textarea { resize: vertical; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.agreement { display: flex; gap: .65rem; margin: 1.2rem 0; color: var(--navy); font-weight: 650; }
.agreement input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.form-errors { margin-bottom: .8rem; color: var(--danger); font-weight: 700; }
.form-panel .primary-button { width: auto; }
.confirmation { text-align: center; padding: clamp(2rem, 6vw, 4rem); }
.confirmation-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; background: var(--selected); color: var(--teal-dark); font-size: 2rem; font-weight: 900; }
.confirmation-icon.test { background: #fff4cc; color: #725300; }
.test-confirmation-banner { max-width: 850px; margin-inline: auto; color: #7a251f; }
.test-mode-warning { max-width: 760px; padding: .8rem; margin: 0 auto 1rem; border: 2px solid #d9a514; border-radius: 8px; background: #fff4cc; color: #5e4500; font-weight: 850; }
.confirmation-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 760px; margin: 1rem auto; text-align: left; }
.confirmation-details div { padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.confirmation-details dt { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.confirmation-details dd { margin: .2rem 0 0; color: var(--navy); font-weight: 750; overflow-wrap: anywhere; }
.reservation-number { display: inline-block; padding: .7rem 1rem; margin: .7rem 0 1rem; border: 2px solid var(--teal); border-radius: 8px; color: var(--navy); font-size: 1.2rem; font-weight: 850; letter-spacing: .04em; }
.confirmation-payment-notice { max-width: 760px; padding: 1rem; margin: .6rem auto 1rem; border: 1px solid #9bb7c2; border-radius: 10px; background: #edf7f8; color: var(--navy); }
.app-error, .noscript { padding: 1rem; margin: 1rem 0; border: 2px solid var(--danger); background: #fff0f0; color: #751d1d; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .summary-panel { position: static; }
  .right-rail { grid-template-columns: minmax(0, 1fr); }
  .campaign-meta, .reservation-review { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-shell { width: min(100% - 1rem, 1380px); margin-top: .5rem; }
  .campaign-meta, .reservation-review, .form-grid { grid-template-columns: 1fr; }
  .size-guide { grid-template-columns: 1fr; font-size: .86rem; }
  .artwork-controls { grid-template-columns: 1fr; }
  .confirmation-details { grid-template-columns: 1fr; }
  .form-grid .full-width { grid-column: auto; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .side-switcher { align-self: stretch; }
  .side-tab { flex: 1; }
  .mailer-card { gap: .2rem; padding: .2rem; }
  .slot-id { top: .15rem; left: .15rem; }
  .slot-status { bottom: .12rem; }
  .slot-action { padding: .45rem .02rem .22rem; }
  .slot-full-action { padding: .08rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }