*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }

:root {
  --bg: #FFFCF9;
  --surface: #F5F0E8;
  --surface-hover: #EDE6DA;
  --border: #E5DDD0;
  --text: #171717;
  --text-muted: #6B6359;
  --accent: #C2A580;
  --accent-hover: #A88A65;
  --accent-soft: rgba(194, 165, 128, 0.12);
  --radius: 4px;
  --shadow: 0 2px 12px rgba(23, 23, 23, 0.04);
  --shadow-lg: 0 8px 40px rgba(23, 23, 23, 0.08);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1 span, .accent { color: var(--accent); }
h1 span, .app-header .brand span { font-weight: 600; }

/* --- Top navigation bar (public landing + dashboard) --- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 252, 249, 0.85);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-brand {
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}

.topbar-brand span { color: var(--accent); font-weight: 600; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-link {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.topbar-link:hover { color: var(--text); }

.btn-primary.btn-sm {
  background: var(--text);
  color: var(--bg);
  padding: 8px 18px;
  font-size: 0.85rem;
  border-radius: var(--radius);
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.02em;
  font-family: inherit;
}
.btn-primary.btn-sm:hover { background: var(--accent-hover); }

@media (max-width: 600px) {
  .topbar { padding: 12px 20px; }
  .topbar-brand { font-size: 1rem; }
}

/* --- Project options (brand + markup) on /new --- */

.project-options {
  max-width: 540px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.project-options .btn-create { align-self: center; }

/* Full-width preview area (sits outside the project-options card) */
.preview-area {
  width: 100%;
  margin: 32px 0 0;
}
.preview-area .size-hint { max-width: none; margin: 0 auto 16px; }

.opt-field { display: flex; flex-direction: column; }

.opt-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.opt-field-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 8px;
}

.opt-field-row .opt-field-label { margin-bottom: 0; }

.opt-field-value {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* --- Cameo photo + 3-crop picker on /new --- */
.cameo-section {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cameo-section-title {
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cameo-field { margin-top: 8px; }
.cameo-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.cameo-upload-btn:hover { border-color: var(--accent); color: var(--text); }
.cameo-upload-icon { flex-shrink: 0; }
.cameo-crops { margin-top: 14px; }
.cameo-crops-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.cameo-crop-wrap { display: flex; flex-direction: column; gap: 6px; }
.cameo-crop {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.cameo-crop:active { cursor: grabbing; }
.cameo-crop[data-shape="square"]     { aspect-ratio: 1 / 1; }
.cameo-crop[data-shape="horizontal"] { aspect-ratio: 3 / 2; }
.cameo-crop[data-shape="vertical"]   { aspect-ratio: 2 / 3; }
.cameo-crop img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  display: block;
  pointer-events: none;
}
/* Safe-area frame — area outside this red rectangle is wrapped under the
   cover edge on the physical album (~2-3 mm fold). Keep important content
   (faces) INSIDE this frame. */
.cameo-crop::after {
  content: '';
  position: absolute;
  inset: 4%;
  border: 1px dashed rgba(220, 50, 50, 0.5);
  background:
    /* tiny inner shade so the safe area reads as the "kept" part */
    radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 2;
}
.cameo-zoom {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.cameo-crop-label {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  padding: 2px 0;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.wedding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
  align-items: stretch;
}
.wedding-grid > .settings-input,
.wedding-grid > .material-select-wrap { margin: 0; }
.wedding-grid > .material-select-wrap { position: relative; display: flex; }
.wedding-grid .settings-input,
.wedding-grid .material-select {
  height: 44px;
  box-sizing: border-box;
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0;
}
.wedding-grid input[type="date"].settings-input {
  font-family: inherit;
  color: var(--text);
}
@media (max-width: 520px) {
  .wedding-grid { grid-template-columns: 1fr; }
}

.markup-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 100px;
  outline: none;
  margin: 8px 0 10px;
}

.markup-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s;
}

.markup-range::-webkit-slider-thumb:hover { transform: scale(1.1); }

.markup-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg);
}

.markup-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  padding: 0 4px;
  margin-bottom: 8px;
}

/* --- Auth pages (login + verify) --- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.auth-card h1 {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.auth-lead {
  font-size: 1.6rem;
  font-weight: 300;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.auth-sub {
  color: var(--text-muted);
  font-weight: 300;
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.auth-sub strong { color: var(--text); font-weight: 500; }

.auth-sub-small {
  font-size: 0.85rem;
  margin-top: 18px;
  margin-bottom: 0;
}

.auth-sub-small a { color: var(--accent); text-decoration: none; }
.auth-sub-small a:hover { color: var(--accent-hover); text-decoration: underline; }

.auth-form {
  text-align: left;
}

.auth-form input[type="email"],
.auth-form input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 18px;
  transition: border-color 0.15s;
}

.auth-form input:focus { outline: none; border-color: var(--accent); }

.code-input {
  text-align: center;
  font-size: 1.6rem !important;
  letter-spacing: 0.5em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  padding-left: 0 !important;
}

.auth-submit {
  width: 100%;
  padding: 14px;
  font-size: 0.95rem;
}

.auth-error {
  margin-top: 14px;
  color: #c0392b;
  font-size: 0.88rem;
  text-align: center;
}

/* --- Settings --- */

.saved-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 24px;
  color: var(--accent-hover);
  font-size: 0.9rem;
  font-weight: 500;
}
.saved-banner.error {
  background: rgba(192, 57, 43, 0.08);
  border-color: #c0392b;
  color: #c0392b;
}

.settings-form {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Settings sub-page tab navigation (Usage / My Brand / Interface).
   Sits between the page header and the first settings-block. */
.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 28px;
  max-width: 700px;
}
.settings-tab {
  padding: 10px 18px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Usage page — storage progress bar + breakdown list. */
.usage-progress { margin-bottom: 20px; }
.usage-progress-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.usage-progress-label strong { font-size: 1.4rem; font-weight: 500; color: var(--text); }
.usage-progress-label span { color: var(--muted); }
.usage-progress-pct { margin-left: auto; font-variant-numeric: tabular-nums; }
.usage-progress-bar {
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
}
.usage-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.usage-progress-fill.is-warning { background: #f59e0b; }
.usage-progress-fill.is-exceeded { background: #dc2626; }

.usage-quota-msg {
  margin: 16px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.4;
}
.usage-quota-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #78350f;
}
.usage-quota-exceeded {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #7f1d1d;
}

.usage-breakdown-title {
  font-size: 0.92rem;
  font-weight: 500;
  margin: 24px 0 8px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.usage-breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.usage-breakdown-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.usage-breakdown-label { color: var(--muted); }
.usage-breakdown-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.settings-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.settings-block-title {
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--text);
}

.settings-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 8px;
}
.settings-input:focus { outline: none; border-color: var(--accent); }

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-card {
  display: block;
  padding: 18px 20px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.payment-card:hover { border-color: var(--text-muted); }

.payment-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.payment-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.payment-card input[type="radio"] {
  display: none;
}

.payment-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.payment-card-name {
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
}

.payment-card-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text-muted);
}
.payment-card-tag.soon { background: rgba(192, 57, 43, 0.06); color: #c0392b; }

.payment-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.55;
  margin: 0;
}

.payment-card-field {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.payment-card:not(.is-active) .payment-card-field { display: none; }

.logo-preview-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}
.logo-preview {
  display: inline-block;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.logo-preview img {
  max-height: 56px;
  max-width: 220px;
  display: block;
}
.logo-remove-form {
  position: absolute;
  top: -8px;
  right: -8px;
  margin: 0;
}
.logo-remove-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  border: 2px solid var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.logo-remove-btn:hover {
  transform: scale(1.1);
  background: var(--accent-hover, var(--accent));
}

.logo-upload-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.logo-file-input {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.logo-file-input:hover { border-color: var(--accent); color: var(--text); }
.logo-file-input input { display: none; }
.logo-file-input span { font-weight: 400; }

/* Photographer-branded logo in client-facing album header (replaces "AlbumDrafter") */
.app-header .brand-logo {
  height: 28px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  transition: filter 0.2s ease;
}
/* Set by inline script when logo's average luminance is below threshold
   — flips dark logos to white on the dark navy app-header background. */
.app-header .brand-logo.is-inverted {
  filter: invert(1) brightness(1.05);
}
.app-header .brand-studio {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #f5f0e8;
}

/* --- Dashboard --- */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.dashboard-header h1 {
  font-size: 1.6rem;
  font-weight: 300;
}

.dashboard-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboard-email {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 400;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 0;
}

a.btn-secondary.btn-sm {
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}

.dashboard-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.dashboard-actions .section-title {
  margin: 0;
  text-align: left;
  font-size: 1.4rem;
}

.dashboard-actions .btn-primary {
  padding: 10px 22px;
  font-size: 0.88rem;
}

.empty-state {
  text-align: center;
  padding: 60px 24px;
  /* --accent-soft jest nadpisywane w _brand_style.ejs gdy user ma własny accent,
     więc empty state automatycznie reaguje na user brand colors (zamiast fixed --surface). */
  background: var(--accent-soft);
  border-radius: var(--radius);
  color: var(--text-muted);
}

.empty-state a { color: var(--accent); text-decoration: none; }

.album-list {
  display: grid;
  /* min 320px (down from 365px) — utrzymuje 2 kolumny przy ~700px content area
     (typowy laptop viewport po sidebar 240px) zamiast spadać do 1 kolumny. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 365px));
  justify-content: start;
  gap: 16px;
}

.album-card {
  display: block;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
  overflow: hidden;
}

/* Language switcher (topbar + auth pages) — flag-icon buttons */
.lang-switcher {
  display: inline-flex;
  align-items: stretch;        /* Match flag-button height to neighbouring nav buttons. */
  gap: 4px;
  margin-right: 4px;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius, 6px);
  transition: border-color 0.15s, background 0.15s, transform 0.1s, opacity 0.15s;
  line-height: 0;            /* SVG sits flush, no extra baseline space */
  opacity: 0.55;
  min-height: 100%;          /* Stretch to match topbar button height (.btn-sm padding+border). */
}
.lang-btn:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.lang-btn.is-active { opacity: 1; border-color: var(--accent); }
.lang-flag {
  display: block;
  border-radius: 2px;
}

.auth-page-topbar {
  position: absolute;
  top: 18px;
  right: 24px;
}

.dashboard-usage {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 400;
}
.dashboard-usage strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

.dashboard-usage-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-projects-count {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.usage-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.usage-pill-bar {
  position: relative;
  width: 120px;
  height: 6px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.usage-pill-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.usage-pill-text strong { font-weight: 500; }
.usage-pill-pct { color: var(--text-muted); }
.usage-pill.is-warn { border-color: rgba(210, 130, 40, 0.45); }
.usage-pill.is-warn .usage-pill-fill { background: #D2822E; }
.usage-pill.is-critical { border-color: rgba(193, 60, 60, 0.55); background: rgba(193, 60, 60, 0.06); }
.usage-pill.is-critical .usage-pill-fill { background: #C13C3C; }

.album-card-thumb {
  width: auto;
  aspect-ratio: 2 / 1;
  background: var(--surface, #f6f3ee);
  overflow: hidden;
  margin: -20px -20px 16px -20px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-card-thumb-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Duplicate albums — one row per size with its own quantity buttons */
.duplicate-rows { display: flex; flex-direction: column; gap: 10px; }
.dup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.dup-row-label { font-size: 0.92rem; color: var(--text); }
.dup-row-label strong { font-weight: 600; margin-right: 6px; }
.dup-row-cm { color: var(--text-muted); font-size: 0.82rem; }
.dup-qty-row { gap: 4px; }
.dup-qty-row .opt-btn {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 6px 10px;
  font-size: 0.82rem;
}
.dup-row.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.dup-row.is-disabled .dup-row-label::after {
  content: ' · not available for this main album size';
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 480px) {
  .dup-row { grid-template-columns: 1fr; }
  .dup-qty-row { justify-content: flex-start; }
}

/* Legacy — replaced by .album-card-name (kept here in case templates revert) */
.album-card-wedding {
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 6px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.album-card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Designs listing — thumb is now its own link (Edit-by-click), body is plain,
   actions row at bottom (Edit/View + Share). Card itself is a <div>. */
.album-card-thumb-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.album-card-thumb-link:hover .album-card-thumb { filter: brightness(0.97); }
.album-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Sklep — product catalog grid (R-extra: /shop). Cards are clickable buttons
   that pop a "Coming soon" modal on click (MVP). Hover lifts + brand accent
   border so the affordance is obvious. */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.shop-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  font: inherit;
  color: var(--text);
}
.shop-category-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.shop-category-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.shop-category-emoji {
  font-size: 2rem;
  line-height: 1;
}
.shop-category-name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.shop-category-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.album-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* Left-side group: Edit (+ Share when finalized). Right-side: Delete only.
   Flex `gap` between group and delete is the natural separation; group is
   pushed left, delete uses margin-left:auto to take the right edge. */
.album-card-actions-group {
  display: flex;
  gap: 6px;
  align-items: center;
}
.album-card-actions .btn-primary,
.album-card-actions .btn-secondary {
  margin-top: 0;
  flex: 0 0 auto;
}
/* Inline trash button — overrides the absolute-positioned variant used on
   dashboard cards (top-right corner over thumbnail). On /designs we want it
   visually identical to the Edit/Share icon buttons (rounded square 32×32,
   transparent), just pushed to the right edge of the actions row. */
.album-card-actions .album-card-delete {
  position: static;
  opacity: 1;
  margin-left: auto;
  /* Match .btn-icon-only shape — overrides the circular overlay variant. */
  width: 32px;
  height: 32px;
  border-radius: var(--radius, 6px);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: none;
}
/* Icon-only buttons used in card action rows. Square 32×32 with consistent
   border + neutral hover by default. Three variants:
     .btn-icon-only          — neutral (hover: darker border, fill bg)
     .btn-icon-only.is-primary — brand accent (hover: filled with accent)
     .album-card-delete.btn-icon-only — destructive (hover: red fill) */
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-icon-only:hover {
  background: var(--surface, #f6f3ee);
  color: var(--text);
  border-color: var(--borderStrong, #d1d5db);
}
.btn-icon-only.is-primary {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-icon-only.is-primary:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Destructive override — only applies when the icon button is also the delete affordance. */
.album-card-delete.btn-icon-only:hover {
  background: #C13C3C;
  color: #fff;
  border-color: #C13C3C;
}

/* Toast — lightweight flash for share-copy success/error.
   Floats bottom-center, fades after ~2s via the .is-visible toggle. */
.designs-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 8px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: var(--radius, 8px);
  font-size: 0.88rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.2s, transform 0.2s;
}
.designs-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.designs-toast.is-error {
  background: var(--danger, #c2410c);
}

.album-card-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.album-card-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.album-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 300;
}

.album-card-brand {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 500;
}

.album-card-status {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.album-card-status.done { color: var(--accent-hover); }

/* Green "DESIGN CONFIRMED" status pill on dashboard cards */
.album-card-status.confirmed-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #1f7a48;
  background: rgba(60, 160, 100, 0.10);
  border: 1px solid rgba(60, 160, 100, 0.35);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  width: max-content;
  border-top: 1px solid rgba(60, 160, 100, 0.35); /* override generic border-top */
}
.album-card-status.confirmed-pill .confirmed-check { flex-shrink: 0; }

.album-card.is-confirmed { cursor: pointer; }

/* Per-card delete button (top-right of thumbnail) */
.album-card-wrap { position: relative; }
.album-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #555;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.album-card-wrap:hover .album-card-delete { opacity: 1; }
.album-card-delete:hover {
  background: #C13C3C;
  color: #fff;
  transform: scale(1.05);
}

/* Smaller modal panel variant for short confirmations */
.order-modal-panel-small { max-width: 420px; padding: 26px 28px 18px; }
.delete-modal-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  margin: 4px 0 4px;
}
.delete-modal-body strong { font-weight: 600; }

/* Danger button (delete confirmation) */
.btn-danger {
  background: #C13C3C;
  color: #fff;
  border: none;
  padding: 9px 22px;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.btn-danger:hover:not(:disabled) { background: #A22F2F; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-danger.btn-sm { padding: 7px 16px; font-size: 0.85rem; }

/* --- Order details modal --- */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.order-modal[hidden] { display: none; }
.order-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 42, 51, 0.55);
  backdrop-filter: blur(2px);
}
.order-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 28px 30px 22px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 24px 60px -16px rgba(31,42,51,0.4);
}
.order-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 10px;
}
.order-modal-close:hover { color: var(--text); }
.order-modal-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.order-modal-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}
.order-meta-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text);
}
.order-modal-body { display: flex; flex-direction: column; gap: 10px; }
.order-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.order-row:last-child { border-bottom: none; }
.order-row-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 400;
}
.order-row-value { color: var(--text); }
.order-row-value .muted { color: var(--text-muted); font-style: italic; }
.emboss-preview {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.4;
}
.order-modal-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 520px) {
  .order-row { grid-template-columns: 1fr; gap: 4px; }
}

/* --- Upload Page --- */

.upload-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 32px;
}

/* Two-column layout: uploader/previews on the left, project options on the right.
   Stacks on narrow screens. */
.upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 16px;
}
.upload-left  { min-width: 0; }
.upload-right { min-width: 0; }

/* Tweaks so the right-column form keeps reasonable look inside grid cell */
.upload-layout .project-options {
  margin: 0;            /* was: 32px auto 0 */
  max-width: none;      /* fill column */
  width: 100%;
}

/* Preview area lives inside its grid column — limit grid cols accordingly */
.upload-layout .preview-area { margin-top: 24px; }
.upload-layout .preview-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
  .upload-layout .preview-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Stack columns on narrower screens */
@media (max-width: 1000px) {
  .upload-layout {
    grid-template-columns: 1fr;
  }
}

.upload-page .hero {
  text-align: center;
  margin-bottom: 48px;
  padding-top: 40px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.upload-page h1 {
  font-size: 2.2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.hero-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 14px;
}

.hero-lead {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 16px;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

.hero-cta {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta .btn-primary { padding: 14px 36px; font-size: 1rem; }

.hero-cta .btn-secondary {
  padding: 14px 36px;
  font-size: 1rem;
  margin-top: 0;
  text-decoration: none;
  display: inline-block;
}

/* --- One-page sections --- */

.section-title {
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  margin: 80px 0 32px;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
}

.how-steps li {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
}

.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.how-steps h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--text);
}

.how-steps p {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.55;
}

.how-steps code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.85rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.feature-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 6px;
}

.feature-value {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
}

.feature p {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.55;
}

.page-footer {
  text-align: center;
  margin-top: 80px;
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
}

.page-footer-sep { margin: 0 10px; }

@media (max-width: 760px) {
  .how-steps, .feature-grid { grid-template-columns: 1fr; }
  .section-title { margin-top: 56px; font-size: 1.5rem; }
  .hero-sub { font-size: 0.95rem; }
}

.upload-zone {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 80px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.upload-icon {
  display: block;
  margin: 0 auto 24px;
  color: var(--accent);
  transition: transform 0.2s, color 0.2s;
}

.upload-zone:hover .upload-icon { transform: translateY(-4px); color: var(--accent-hover); }
.upload-zone.drag-over .upload-icon { transform: translateY(-6px) scale(1.05); }

.upload-zone p:first-of-type {
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: 6px;
}

.hint { color: var(--text-muted); font-size: 0.82rem; margin-top: 6px; font-weight: 300; letter-spacing: 0.02em; }

/* Preview grid */

.preview-area { text-align: center; }
.preview-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.size-hint {
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;
  background: var(--bg);
  color: var(--text);
}
.size-hint.is-loading {
  color: var(--text-muted);
  font-style: italic;
}
.size-hint.is-ok {
  background: rgba(60, 160, 100, 0.08);
  border-color: rgba(60, 160, 100, 0.35);
  color: #2e7a4d;
}
.size-hint.is-ok strong { color: #1f5a37; }
.size-hint.is-warn {
  background: rgba(210, 130, 40, 0.08);
  border-color: rgba(210, 130, 40, 0.4);
  color: #8a5418;
}
.size-hint.is-warn strong { color: #6e3f0c; }

.preview-area h2 {
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.preview-area h2 span {
  color: var(--text-muted);
  font-weight: 300;
  font-size: 0.9rem;
  margin-left: 8px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 20px 0 32px;
}

.preview-item {
  position: relative;
  aspect-ratio: 2/1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  transition: border-color 0.15s, transform 0.15s;
  box-shadow: var(--shadow);
}

.preview-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.preview-item.dragging { opacity: 0.4; }

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1100px) { .preview-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .preview-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .preview-grid { grid-template-columns: repeat(2, 1fr); } }

.preview-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 252, 249, 0.95);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 2px;
  letter-spacing: 0.03em;
}

.preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(23, 23, 23, 0.85);
  color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: none;
}

.preview-item:hover .preview-remove { display: block; }

/* Per-file invalid badge — shows on tiles flagged by EXIF or aspect ratio */
.preview-item.is-invalid { border-color: rgba(193, 60, 60, 0.55); box-shadow: 0 0 0 2px rgba(193, 60, 60, 0.15); }
.preview-item.is-invalid img { opacity: 0.65; }
.preview-invalid {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  pointer-events: auto;
  z-index: 3;
}

/* Buttons */

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 14px 40px;
  font-size: 0.95rem;
  font-weight: 400;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.03em;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-secondary {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  margin-top: 16px;
  padding: 12px 24px;
  border: 1px solid var(--text);
  border-radius: var(--radius);
  transition: all 0.2s;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
}

.btn-secondary:hover { background: var(--text); color: var(--bg); }

/* Result */

.result-area {
  text-align: center;
  padding: 60px 0;
}

.result-area h2 {
  font-weight: 300;
  font-size: 1.6rem;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.link-box {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 0 auto;
}

.link-box input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 14px 18px;
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 400;
}

.link-box input:focus { outline: none; border-color: var(--accent); }

.btn-copy {
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: 14px 26px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 400;
  font-size: 0.9rem;
  transition: background 0.2s;
  font-family: inherit;
  letter-spacing: 0.03em;
}

.btn-copy:hover { background: var(--accent-hover); }

/* Loading */

.loading {
  text-align: center;
  padding: 60px 0;
  max-width: 720px;
  margin: 0 auto;
}

.debug-log-wrap {
  margin-top: 32px;
  text-align: left;
  background: var(--surface, #f6f3ee);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.debug-log-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.debug-log-head .hint-tiny { text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.debug-log {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  background: #1d1d1f;
  color: #e2e2e2;
  border-radius: 6px;
  padding: 12px;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: var(--surface);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 100px;
  transition: width 0.15s ease;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.progress-meta #progressPercent { color: var(--text); font-weight: 500; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Album page: 2-column layout --- */

.album-body {
  background: #EAE6DE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Loading overlay — blocks viewer until all spreads are decoded */
.album-loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #EAE6DE;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}
.album-loading.is-hidden { opacity: 0; pointer-events: none; }

.album-loading-inner {
  width: min(360px, 80vw);
  text-align: center;
}

.album-loading-label {
  color: var(--text);
  font-weight: 400;
  font-size: 0.95rem;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.album-loading-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}

.album-loading-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 100px;
  transition: width 0.18s ease;
}

.album-loading-count {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.app-header {
  background: #1F2A33;
  color: #F5F0E8;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.app-header .brand {
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.app-header .brand span { color: var(--accent); }

.app-header .header-title {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.7);
  white-space: nowrap;
}

.header-sep {
  color: rgba(245, 240, 232, 0.35);
  margin: 0 10px;
  font-weight: 300;
}

.header-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(245, 240, 232, 0.9);
  font-size: 0.78rem;
}

.app-header .header-actions {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.header-confirm-text {
  color: rgba(245, 240, 232, 0.7);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.header-confirm-btn {
  padding: 9px 24px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.03em;
  background: #E07A2C;
  color: #fff;
  transition: background 0.15s;
}

.header-confirm-btn:hover:not(:disabled) {
  background: #C7691F;
}

.header-confirm-btn:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 240, 232, 0.4);
  cursor: not-allowed;
}
/* .is-pending kept for JS state but no visual dimming —
   button stays fully visible; clicking it without a cover selection
   surfaces the inline material-hint instead. */
.header-confirm-btn.is-pending { opacity: 1; }

.material-hint {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(224, 122, 44, 0.08);
  border: 1px solid rgba(224, 122, 44, 0.35);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.material-hint strong { color: #C7691F; font-weight: 600; }

.status-pill {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  color: rgba(245, 240, 232, 0.7);
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.status-pill.done {
  background: rgba(194, 165, 128, 0.18);
  color: var(--accent);
}

.album-layout {
  flex: 1;
  position: relative;
  display: grid;
  /* Right (sidebar) column width is a variable so it can be (a) overridden per
     breakpoint and (b) dragged by the user via .sidebar-resizer. */
  grid-template-columns: 1fr var(--album-sidebar-w, 530px);
  min-height: 0;
}

/* Draggable divider sitting exactly on the viewer↔sidebar boundary. Positioned
   by `right: var(--album-sidebar-w)` so it tracks the sidebar's left edge. */
.sidebar-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--album-sidebar-w, 530px);
  width: 12px;
  transform: translateX(50%);
  cursor: col-resize;
  z-index: 30;
  touch-action: none;            /* let JS own the drag on touch */
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-resizer::before {       /* thin visible line */
  content: "";
  width: 2px;
  height: 100%;
  background: var(--border, #e7e2da);
  transition: background 0.12s ease;
}
.sidebar-resizer::after {        /* grip pill in the middle */
  content: "";
  position: absolute;
  width: 4px;
  height: 36px;
  border-radius: 3px;
  background: var(--border, #cfc8bd);
  transition: background 0.12s ease;
}
.sidebar-resizer:hover::before,
.sidebar-resizer.is-dragging::before,
.sidebar-resizer:hover::after,
.sidebar-resizer.is-dragging::after {
  background: var(--brand-primary, #8a6d4b);
}

/* --- Viewer (left) --- */

.viewer {
  background: #EAE6DE;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.viewer-inner {
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

/* Cover frame around spread — mimics actual album cover */
.cover-frame {
  --frame-color: #C2A580;
  --frame-texture: none;
  /* Spine offset used by cameo (left) and emboss text (padding).
     Scales with viewport width so it stays visually consistent
     between full desktop, half-screen and mobile. */
  --spine-offset: clamp(4px, 1vw, 14px);
  /* Establish a container so embossing font-size can scale to the
     actual cover width rather than the viewport. */
  container-type: inline-size;
  width: 100%;
  /* Faza 8E: open/inside view = SPREAD aspect (square 2:1, portrait 1.33, landscape 3). */
  aspect-ratio: var(--album-ratio, 2) / 1;
  max-height: calc(100vh - 230px);
  background-color: var(--frame-color);
  background-image: var(--frame-texture);
  background-size: cover;
  background-position: center;
  padding: 11px;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 -1px 0 rgba(0,0,0,0.1) inset,
    0 24px 60px -16px rgba(31, 42, 51, 0.35),
    0 8px 20px -8px rgba(31, 42, 51, 0.2);
  transition: background-color 0.35s ease;
  overflow: hidden; /* clip any absolute child that doesn't belong here */
  position: relative;
}

/* Cover-only view: closed album look.
   Width = half of Inside view width − 11px margin, so total layout height
   (square cover + margin) equals Inside view height (2:1 ratio).
   This prevents the bottom toolbar from jumping when switching views. */
/* Size mockup shown over the cover when the Sizes step is active.
   Replaces the cover visually; cover-display stays in the DOM untouched. */
.size-mockup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 50;
  pointer-events: none;
  background: transparent;
}
.size-mockup-img[hidden] { display: none !important; }

/* --- Cover type selector (Personalize step) --- */
.cover-type-row { display: flex; gap: 8px; }
.cover-type-opt {
  flex: 1;
  aspect-ratio: 1 / 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-type-icon {
  position: relative;
  display: block;
  width: 60%;
  height: 60%;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
  /* Fill with the currently chosen cover color + texture */
  background-color: var(--frame-color, transparent);
  background-image: var(--frame-texture, none);
  background-size: cover;
  background-position: center;
}
/* Cover-type icons: lines + optional cameo cutout, all tinted with foil color */
.cti-line {
  position: absolute;
  height: 2px;
  background: var(--foil-color, currentColor);
  border-radius: 1px;
}
.cti-line-long  { left: 22%; right: 22%; }
.cti-line-short { left: 32%; right: 32%; }
.cti-box {
  position: absolute;
  border: 1.5px solid var(--foil-color, currentColor);
  border-radius: 1px;
}

/* Foil color mapping on each cover-type icon */
.cover-type-icon[data-foil="gold"]      { --foil-color: rgba(201, 166, 104, 1); }
.cover-type-icon[data-foil="silver"]    { --foil-color: rgba(170, 175, 180, 1); }
.cover-type-icon[data-foil="rose-gold"] { --foil-color: rgba(185, 122, 110, 1); }
.cover-type-icon[data-foil="white"]     { --foil-color: rgba(245, 240, 232, 1); }
.cover-type-icon[data-foil="blind"]     { --foil-color: rgba(0, 0, 0, 0.32); }

/* Embossing only — two stacked lines, close together */
.ct-emboss .cti-line-long  { top: 49%; }
.ct-emboss .cti-line-short { top: 57%; }

/* Cameo only — centered square cutout */
.ct-cameo .cti-box { left: 30%; right: 30%; top: 30%; bottom: 30%; }

/* Cameo + embossing — cutout up top, two text rows close together below */
.ct-cameo-emboss .cti-box-top    { left: 30%; right: 30%; top: 18%; height: 38%; }
.ct-cameo-emboss .cti-line-long  { top: 68%; }
.ct-cameo-emboss .cti-line-short { top: 78%; }

/* Real cameo photo inside cover-type icons (replaces the abstract box) */
.cti-cameo-img {
  position: absolute;
  object-fit: cover;
  border-radius: 1px;
  /* tiny inset shadow so it reads as a recessed window like on the real cover */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.ct-cameo .cti-cameo-img { left: 30%; right: 30%; top: 30%; bottom: 30%; }
.ct-cameo-emboss .cti-cameo-img-top { left: 30%; right: 30%; top: 18%; height: 38%; }
/* When the photo is showing, hide the abstract box sibling */
.cti-cameo-img:not([hidden]) + .cti-box { display: none; }
.cover-type-opt.is-active .cover-type-icon { opacity: 1; }

/* Summary step: virtual table with all ordered albums laid out proportionally */
.cover-frame.is-summary-step {
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 200px);
  aspect-ratio: 1 / 1;
  padding: 0;
  background-color: #5b4630;
  background-image: url('/textures/table-bg.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: none;
  border-radius: 4px;
  container-type: inline-size;
}
.cover-frame.is-summary-step .cover-display { display: none; }
.summary-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 4cqw;
}
.summary-stage[hidden] { display: none !important; }
.summary-tile {
  position: relative;
  width: var(--tile-w, 30cqw);
  aspect-ratio: 1 / 1;
  transform: rotate(var(--tile-rot, 0deg));
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45)) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  container-type: inline-size;
}
.summary-tile .cover-display {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.summary-tile .cover-display::before,
.summary-tile .cover-display::after { display: none; }
.summary-tile-label {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.06em;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Sizes step: enlarge frame to fill left panel, drop cover styling. */
.cover-frame.is-sizes-step {
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 200px);
  aspect-ratio: 1 / 1;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.cover-frame.is-sizes-step .cover-display,
.cover-frame.is-sizes-step .cover-display::before {
  box-shadow: none;
}
.cover-frame.is-sizes-step .size-mockup-img {
  transform: scale(1.5);
  transform-origin: center center;
  box-shadow: none;
}
.cover-frame.is-sizes-step,
.viewer-inner { overflow: visible; }

.cover-frame.is-cover {
  /* Faza 8E: closed cover = PAGE aspect (square 1:1, portrait 0.67, landscape 1.5).
     Page = ½ spread width in every orientation, but a tall portrait cover is
     height-bound: cap width at (available height × cover-ratio) so the aspect is
     preserved instead of the height clamp squashing it. Square → min(½, h) = ½ = unchanged. */
  aspect-ratio: var(--cover-ratio, 1) / 1;
  width: min(calc(50% - 11px), calc((100vh - 241px) * var(--cover-ratio, 1)));
  max-width: 639px;
  max-height: calc(100vh - 241px);
  margin: 0 auto 11px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* Faza 8E: in the embedded-review layout the viewer reserves a tall bottom band
   (palette + OK/Corrections, ~260px) that the cover view doesn't use. That smaller
   vertical budget would clamp a tall portrait cover and break its aspect, so cap the
   cover to the REAL available height (~100vh − 350) — the min() then trims width to
   keep the page ratio. Square stays width-bound (½ < budget) so it's unchanged. */
.album-layout.has-fd-review .cover-frame.is-cover {
  max-height: calc(100vh - 350px);
  width: min(calc(50% - 11px), calc((100vh - 350px) * var(--cover-ratio, 1)));
}

.cover-display {
  --cover-texture: none;
  width: 100%;
  height: 100%;
  background-color: var(--frame-color);
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.35s ease;
  /* Drop shadow — album resting on the panel */
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.32),
    0 8px 16px -8px rgba(0, 0, 0, 0.18);
}

/* CSS overlay replicating the KISS mask:
   - white edge highlights on top/right/bottom (cover catches light)
   - dark gradient on left (album spine curve)              */
.cover-display::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
}

.cover-display::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 3px;
  opacity: 0.75;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.12) 2.5%,
    rgba(0, 0, 0, 0.32) 5%,
    rgba(255, 255, 255, 0.06) 8%,
    rgba(0, 0, 0, 0.06) 14%,
    transparent 24%
  );
}

.cover-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background:
    linear-gradient(to right, rgba(0,0,0,0.25), transparent 60%, rgba(255,255,255,0.06) 90%, rgba(0,0,0,0.15));
}

.cover-texture {
  position: absolute;
  inset: 0;
  background-image: var(--cover-texture);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
}

/* Embossed text on cover — positioned by [data-position] on .cover-display */
.cover-emboss {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  /* Asymmetric padding shifts the centered text right by --spine-offset
     so it aligns with the cameo and clears the spine on the left. */
  padding: 0 calc(8% - var(--spine-offset, 14px)) 0 calc(8% + var(--spine-offset, 14px));
  white-space: pre-line;
  user-select: none;
  pointer-events: none;
  z-index: 3;
  /* Foil tint is set by [data-foil] below */
  color: var(--foil-color, rgba(0, 0, 0, 0.35));
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 -1px 0 rgba(0, 0, 0, 0.25),
    0 0 1px rgba(0, 0, 0, 0.15);
  line-height: 1.3;
  /* Font-size relative to the cover container width (cqi) rather than the
     viewport, so the embossing stays the same physical proportion on the
     cover regardless of how the cover is rendered (full desktop / Sizes
     step mockup / mobile / half-screen). */
  font-size: clamp(0.55rem, 4.2cqi, 1.6rem);
  letter-spacing: 0.04em;
}

/* Position presets */
.cover-display[data-position="center"]  .cover-emboss { top: 50%; transform: translateY(-50%); }
.cover-display[data-position="upper"]   .cover-emboss { top: 18%; }
.cover-display[data-position="lower"]   .cover-emboss { bottom: 18%; }
.cover-display[data-position="right-corner"] .cover-emboss {
  bottom: 8%; right: 6%; left: auto;
  text-align: right;
  padding: 0;
  /* Keep the same typography as other positions — only the
     placement changes, never the text rendering. */
}

/* Foil colors */
.cover-display[data-foil="gold"]      .cover-emboss { --foil-color: rgba(201, 166, 104, 0.85); }
.cover-display[data-foil="silver"]    .cover-emboss { --foil-color: rgba(201, 202, 204, 0.9); }
.cover-display[data-foil="rose-gold"] .cover-emboss { --foil-color: rgba(185, 122, 110, 0.9); }
.cover-display[data-foil="white"]     .cover-emboss { --foil-color: rgba(242, 237, 227, 0.95); }
.cover-display[data-foil="blind"]     .cover-emboss {
  --foil-color: rgba(0, 0, 0, 0.30);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Font families — applied per emboss-line by its data-font attribute */
.cover-emboss { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em; line-height: 1.2; }
.emboss-line { display: block; }
.emboss-line[data-font="acumin"]         { font-family: 'DM Sans', 'Helvetica Neue', sans-serif; font-weight: 400; letter-spacing: 0.04em; }
.emboss-line[data-font="orpheus"]        { font-family: 'Cormorant Garamond', 'Georgia', serif; font-weight: 400; }
.emboss-line[data-font="paralucent"]     { font-family: 'Work Sans', sans-serif; font-weight: 500; letter-spacing: 0.06em; }
.emboss-line[data-font="mrs-eaves"]      { font-family: 'EB Garamond', 'Garamond', serif; font-style: italic; font-weight: 400; }
.emboss-line[data-font="cardo"]          { font-family: 'Cardo', 'Georgia', serif; font-weight: 400; }
.emboss-line[data-font="arial-bold"]     { font-family: Arial, sans-serif; font-weight: 700; letter-spacing: 0.06em; }
.emboss-line[data-font="impact"]         { font-family: Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; }
.emboss-line[data-font="alex-brush"]     { font-family: 'Alex Brush', cursive; font-weight: 400; letter-spacing: 0; }
.emboss-line[data-font="roboto"]         { font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: 0.04em; }
.emboss-line[data-font="helvetica-neue"] { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0.04em; }
.emboss-line[data-font="rochester"]      { font-family: 'Rochester', cursive; font-weight: 400; letter-spacing: 0.02em; }

/* Cameo photo window — real KISS covers have cameo offset 2cm right of true center.
   Scale 2cm against album width: 2/10 = 20% (4x4), 2/15 = 13.33% (6x6),
   2/20 = 10% (8x8), 2/25 = 8% (10x10), 2/30 = 6.67% (12x12). */
.cover-cameo {
  position: absolute;
  top: 50%;
  /* Centered on the cover with a small offset right
     to clear the spine shadow on the left edge */
  left: calc(50% + var(--spine-offset, 14px));
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
  display: none;
  /* Outer hairline so the recessed window has a visible edge
     against the cover material */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.35);
  overflow: hidden;
}
/* Inner-shadow overlay — sits ABOVE the cameo photo (if any) so the
   "physical recess" effect reads regardless of whether the window is
   white/blank or filled with a client photo. */
.cover-cameo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 4;
  /* Top: strong cast shadow from cover surface, fading down.
     Bottom: thin reflective rim where light skims the lower lip.
     Sides: subtle wall shadows. */
  box-shadow:
    inset 0  8px 14px -4px rgba(0, 0, 0, 0.55),
    inset 0 -3px  6px -3px rgba(0, 0, 0, 0.20),
    inset  5px 0 10px -5px rgba(0, 0, 0, 0.35),
    inset -5px 0 10px -5px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.cover-cameo[data-shape="square"]     { display: block; width: 35%; aspect-ratio: 1/1; }
.cover-cameo[data-shape="horizontal"] { display: block; width: 50%; aspect-ratio: 3/2; }
.cover-cameo[data-shape="vertical"]   { display: block; width: 32%; aspect-ratio: 2/3; }
.cameo-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.cameo-photo[hidden] { display: none !important; }

/* When cameo + embossing combo is chosen, shift cameo up and place text
   directly below it (~1 cm gap). Position is per cameo shape because each
   shape has different height — text follows the bottom edge + a small gap. */
.cover-display[data-cover-type="cameo-emboss"] .cover-cameo {
  top: 38%;
}
.cover-display[data-cover-type="cameo-emboss"] .cover-emboss {
  bottom: auto;
  transform: none;
}
/* square cameo  : center 38%, height ~35% → bottom ~55.5% → text at ~59% */
.cover-display[data-cover-type="cameo-emboss"][data-cameo-shape="square"] .cover-emboss {
  top: 59%;
}
/* horizontal cameo: center 38%, height ~33% (50% × 2/3) → bottom ~54.5% → text at ~58% */
.cover-display[data-cover-type="cameo-emboss"][data-cameo-shape="horizontal"] .cover-emboss {
  top: 58%;
}
/* vertical cameo : center 38%, height ~48% (32% × 3/2) → bottom ~62% → text at ~66% */
.cover-display[data-cover-type="cameo-emboss"][data-cameo-shape="vertical"] .cover-emboss {
  top: 66%;
}

.cover-inner {
  position: absolute;
  inset: 11px;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
}

/* Hair-thin paper crease down the middle (album binding) */
.cover-inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
  box-shadow:
    -1px 0 1.5px rgba(0, 0, 0, 0.08),
     1px 0 1.5px rgba(0, 0, 0, 0.08);
  opacity: 0.5;
}

.cover-frame.is-cover .cover-inner { display: none; }
.cover-display[hidden] { display: none; }

.flipbook {
  width: 100%;
  height: 100%;
  position: relative;
}

.spread-page {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.spread-page.active {
  display: flex;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.spread-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom controls */

.viewer-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  padding: 8px 22px;
  border-radius: 100px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.view-toggle, .nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-toggle {
  border-right: 1px solid var(--border);
  padding-right: 14px;
}

.tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.tool-btn:hover { color: var(--text); background: var(--surface); }
.tool-btn[hidden] { display: none; }

.view-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.view-btn[hidden] { display: none; }

.view-btn:hover { color: var(--text); background: var(--surface); }

.view-btn.active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.view-btn-label {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.view-tile {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
  position: relative;
}

.view-tile-cover {
  background-color: var(--frame-color, var(--accent));
  background-image: var(--frame-texture, none);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0,0,0,0.12);
}

.view-tile-interior {
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 2px;
}

.view-tile-interior span {
  background: var(--text-muted);
  opacity: 0.5;
  border-radius: 1px;
}

.view-btn.active .view-tile-interior span { background: var(--text); opacity: 0.7; }

.nav-group {
  padding: 0 14px;
}

.nav-group:has(~ :not([hidden])) {
  border-right: 1px solid var(--border);
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.nav-btn:hover:not(:disabled) {
  background: var(--surface);
  color: var(--text);
}

.nav-btn:disabled { opacity: 0.25; cursor: default; }

/* Right-side divider before the zoom button (matches view-toggle's border-right). */
.nav-group-with-zoom {
  border-right: 1px solid var(--border);
  padding-right: 14px;
}
.nav-zoom-btn {
  color: var(--text-muted);
  margin-left: 14px;   /* matches view-toggle padding-right so spacing is symmetric */
}
.nav-zoom-btn:hover { color: var(--text); }

/* Fullscreen zoom modal — dark backdrop, image centered, prev/next at bottom */
.zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(20, 22, 25, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-modal[hidden] { display: none; }
.zoom-modal-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 60px 100px;
  min-height: 0;
  min-width: 0;
}
.zoom-modal-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.zoom-modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.zoom-modal-close:hover { background: rgba(255, 255, 255, 0.18); }
.zoom-modal-nav {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
}
.zoom-modal-nav .nav-btn { color: #fff; }
.zoom-modal-nav .nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); }
.zoom-modal-nav .page-info { color: #fff; min-width: 56px; text-align: center; }

.page-info {
  color: var(--text);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  min-width: 52px;
  text-align: center;
  letter-spacing: 0.04em;
}

.tool-btn { margin-right: 4px; }

/* --- Sidebar (right) --- */

.sidebar {
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kiss-logo {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.kiss-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* --- Sidebar step indicator --- */

.step-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 24px 16px;
}

.step-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.step-link:hover:not(:disabled) { color: var(--text); background: var(--surface); }
.step-link:disabled { cursor: not-allowed; opacity: 0.45; }
.step-link.is-active { color: var(--text); font-weight: 500; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.step-link.is-active .step-num { background: var(--accent); color: #fff; }

.step-sep { color: var(--text-muted); font-weight: 300; }

.sidebar-step[hidden] { display: none; }

/* --- Personalization options --- */

.emboss-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  resize: vertical;
  min-height: 70px;
}
.emboss-textarea:focus { outline: none; border-color: var(--accent); }

.hint-tiny {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 6px 0 22px;
  font-weight: 300;
}

.opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}

.opt-btn {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}

.opt-btn:hover:not(:disabled) { border-color: var(--text-muted); }
.opt-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

/* Font picker — grid that lets each option render in its own typeface */
.font-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.font-grid .opt-btn { font-size: 0.95rem; }

.font-opt[data-font="acumin"]         { font-family: 'DM Sans', 'Helvetica Neue', sans-serif; }
.font-opt[data-font="orpheus"]        { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-opt[data-font="paralucent"]     { font-family: 'Work Sans', sans-serif; font-weight: 500; }
.font-opt[data-font="mrs-eaves"]      { font-family: 'EB Garamond', Garamond, serif; font-style: italic; }
.font-opt[data-font="cardo"]          { font-family: 'Cardo', Georgia, serif; }
.font-opt[data-font="arial-bold"]     { font-family: Arial, sans-serif; font-weight: 700; }
.font-opt[data-font="impact"]         { font-family: Impact, 'Haettenschweiler', sans-serif; letter-spacing: 0.04em; }
.font-opt[data-font="alex-brush"]     { font-family: 'Alex Brush', cursive; font-size: 1.2rem; }
.font-opt[data-font="roboto"]         { font-family: 'Roboto', sans-serif; }
.font-opt[data-font="helvetica-neue"] { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.font-opt[data-font="rochester"]      { font-family: 'Rochester', cursive; font-size: 1.15rem; }

/* Position icons */
.pos-icon {
  display: block;
  width: 28px;
  height: 18px;
  border: 1px solid var(--text-muted);
  border-radius: 1px;
  position: relative;
}
.pos-icon::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  width: 60%;
  height: 2px;
  left: 20%;
}
.pos-center::after       { top: 50%; transform: translateY(-50%); }
.pos-upper::after        { top: 22%; }
.pos-lower::after        { bottom: 22%; }
.pos-right-corner::after { bottom: 18%; right: 8%; left: auto; width: 40%; }
.opt-btn.is-active .pos-icon { border-color: var(--accent); }
.opt-btn.is-active .pos-icon::after { background: var(--accent); }

/* Foil swatches */
.foil-row { gap: 12px; }
.foil-swatch {
  width: 48px;
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--foil);
  border: 1px solid rgba(0, 0, 0, 0.12);
  position: relative;
}
/* Keep the native foil color on the active swatch — only add the ring. */
.foil-swatch.is-active,
.foil-swatch.is-active:hover {
  background: var(--foil);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.foil-blind {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.foil-swatch.foil-blind.is-active,
.foil-swatch.foil-blind.is-active:hover {
  background: var(--surface);
}

/* Size cards — visual size picker for main album */
.size-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.size-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}

.size-card:hover { border-color: var(--text-muted); }

.size-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.size-card-photo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
  background: var(--surface);
}

.size-card-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.size-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 300;
  margin-left: 8px;
}

/* Cameo icons */
.cameo-icon {
  display: block;
  border: 1px solid var(--text-muted);
  border-radius: 1px;
  background: transparent;
}
.cameo-square     { width: 18px; height: 18px; }
.cameo-horizontal { width: 22px; height: 14px; }
.cameo-vertical   { width: 14px; height: 22px; }
.opt-btn.is-active .cameo-icon { border-color: var(--accent); background: var(--accent-soft); }

/* Actual cameo crop thumbnail inside the shape buttons */
.cameo-shape-btn { padding: 8px 10px; }
.cameo-thumb {
  display: block;
  border-radius: 2px;
  border: 1px solid var(--border);
  object-fit: cover;
}
.cameo-thumb[hidden] { display: none; }
.cameo-shape-btn[data-cameo="square"]     .cameo-thumb { width: 36px; height: 36px; }
.cameo-shape-btn[data-cameo="horizontal"] .cameo-thumb { width: 48px; height: 32px; }
.cameo-shape-btn[data-cameo="vertical"]   .cameo-thumb { width: 28px; height: 42px; }
.opt-btn.is-active .cameo-thumb { box-shadow: 0 0 0 2px var(--accent); }

/* Summary panel (after confirmation) */
.summary-panel {
  padding-top: 24px !important;
}

.cover-final-emboss {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.cover-final-emboss-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cover-final-emboss-text {
  white-space: pre-line;
  font-size: 1rem;
  color: var(--text);
  font-weight: 400;
  line-height: 1.4;
}
.cover-final-emboss-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
  text-transform: capitalize;
}

.panel {
  border-bottom: 1px solid var(--border);
}

.panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  letter-spacing: -0.005em;
}

.panel > summary::-webkit-details-marker { display: none; }

.panel > summary .chev {
  color: var(--text-muted);
  transition: transform 0.2s;
}

.panel[open] > summary .chev { transform: rotate(180deg); }

.panel-body {
  padding: 0 24px 24px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}

.info-row:last-child { border-bottom: none; }

.info-label {
  color: var(--text-muted);
  font-weight: 300;
}

.info-value {
  color: var(--text);
  font-weight: 400;
}

.info-value.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.82rem;
}

/* Material select */

.select-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 400;
}

/* Per-line embossing rows */
.emboss-line-row {
  display: grid;
  grid-template-columns: 1fr 110px 60px;
  gap: 6px;
  margin-bottom: 6px;
}
.emboss-line-row .emboss-line-text,
.emboss-line-row .emboss-line-font,
.emboss-line-row .emboss-line-size {
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
}
.emboss-line-row .emboss-line-text:focus,
.emboss-line-row .emboss-line-font:focus,
.emboss-line-row .emboss-line-size:focus {
  outline: none;
  border-color: var(--text-muted);
}
@media (max-width: 480px) {
  .emboss-line-row { grid-template-columns: 1fr 1fr 70px; }
}

/* Breathing room between Personalize sub-blocks
   (Cover type / Embossing text / Font / Position / Foil / Cameo shape). */
.personalize-emboss-block,
.personalize-font-block,
.personalize-position-block,
.personalize-foil-block,
.personalize-cameo-block { margin-top: 22px; }

.material-select-wrap {
  position: relative;
  margin-bottom: 24px;
}

.material-select {
  width: 100%;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 36px 11px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}

.material-select:hover, .material-select:focus {
  border-color: var(--text);
  outline: none;
}

.select-chev {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}

/* Swatch grid */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.swatch-grid[hidden] { display: none; }

.swatch {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.swatch-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.15s, box-shadow 0.15s;
}

.swatch:hover .swatch-tile {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.swatch-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  padding: 6px;
  width: 26px;
  height: 26px;
  opacity: 0;
  transition: opacity 0.15s;
}

.swatch.selected .swatch-check { opacity: 1; }
.swatch.selected .swatch-tile {
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--accent),
    0 4px 12px rgba(0,0,0,0.12);
}

.swatch-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

.swatch:hover .swatch-label { color: var(--text); }
.swatch.selected .swatch-label { color: var(--text); font-weight: 500; }

/* Confirm bar */

.confirm-bar {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.confirm-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.confirm-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.confirm-info strong {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-bar .btn-primary {
  padding: 10px 22px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Final cover display (after selection) */

.cover-final {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}

.cover-final-swatch {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.08);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.cover-final-name {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}

.cover-final-mat {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.cover-thanks-msg {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.5;
}

/* Responsive */

/* Tighter sidebar between 760-980px so landscape phones still fit desktop layout */
@media (max-width: 980px) and (min-width: 761px) {
  /* Default narrower sidebar for this range (user can still drag — inline var wins). */
  .album-layout { --album-sidebar-w: 300px; }
  .swatch-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .size-card-photo { width: 56px; height: 56px; }
  .app-header .header-title { font-size: 0.72rem; letter-spacing: 0.03em; }
}

/* Below 760px (portrait phones): stack sidebar under viewer */
@media (max-width: 760px) {
  .album-layout {
    grid-template-columns: 1fr;
  }
  .sidebar-resizer { display: none; }  /* no side-by-side to resize when stacked */
  .sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;
  }
  .viewer { padding: 20px; }
  .viewer-controls { flex-wrap: wrap; }
  .app-header {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }
  .app-header .header-title { display: none; }
}

/* Thinner cover border under the spread on tablets + phones. */
@media (max-width: 900px) {
  .cover-frame { padding: 4px !important; }
}

@media (max-width: 600px) {
  .cover-frame { padding: 5px; }
  .swatch-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .sidebar-brand, .panel > summary, .panel-body { padding-left: 18px; padding-right: 18px; }
}


/* ============================================================
   FlexDesigner Phase 2 — shop settings, designs, banners
   ============================================================ */

/* Dashboard "CTA cluster" — primary "+ New gallery" next to optional legacy button */
.dashboard-actions-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Legacy upload page — banner steering toward designer flow */
.designer-promo-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #fdf6ec 0%, #faedd5 100%);
  border: 1px solid #e8d4a9;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 24px 0 8px;
}
.designer-promo-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.designer-promo-banner-text strong {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 4px;
  color: #6e4810;
}
.designer-promo-banner-text p {
  margin: 0;
  font-size: 0.85rem;
  color: #7a5b2a;
  line-height: 1.45;
}
.designer-promo-banner .btn-primary { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
  .designer-promo-banner { flex-direction: column; align-items: stretch; }
}

/* Shop settings — accent color row */
.shop-accent-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.shop-accent-input {
  width: 56px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.shop-accent-input::-webkit-color-swatch-wrapper { padding: 4px; }
.shop-accent-input::-webkit-color-swatch { border-radius: 6px; border: none; }
.shop-accent-hex {
  width: 130px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.5px;
}

/* Shop preview mock — uses --shop-accent CSS var */
.shop-preview {
  --shop-accent: #C2A580;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.shop-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.shop-preview-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shop-preview-logo img {
  max-height: 36px;
  max-width: 180px;
  object-fit: contain;
}
.shop-preview-studio {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
}
.shop-preview-placeholder {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.shop-preview-cta {
  background: var(--shop-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s ease;
}
.shop-preview-cta:hover { filter: brightness(0.95); }
.shop-preview-body {
  padding: 28px 22px 36px;
  text-align: center;
  background: linear-gradient(180deg, #fafafa 0%, #f4f0e9 100%);
}
.shop-preview-tagline {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
}

/* --- App layout with left sidebar (photographer pages + designer) ---
   New layout convention: <body> → .app-layout (flex row) → .app-sidebar + .app-content.
   The .app-sidebar partial lives in views/_sidebar.ejs and stays fixed-width on the left.
   .app-content scrolls independently and contains the page body.
   NOTE: prefixed with `app-` to avoid collision with legacy `.sidebar` from album.ejs
   (cover-type wizard) — see line ~2660 where the legacy rules live. */

.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: stretch;
}

.app-sidebar {
  --app-sidebar-bg: #1F2A33;
  --app-sidebar-text: #E8EAED;
  --app-sidebar-text-muted: #9AA5AE;
  --app-sidebar-hover: rgba(255, 255, 255, 0.06);
  --app-sidebar-active-bg: #FFFFFF;
  --app-sidebar-active-text: #1F2A33;
  --app-sidebar-border: rgba(255, 255, 255, 0.08);

  width: 240px;
  flex-shrink: 0;
  background: var(--app-sidebar-bg);
  color: var(--app-sidebar-text);
  border-right: 1px solid var(--app-sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}

.app-sidebar-header {
  padding: 0 8px 18px;
  border-bottom: 1px solid var(--app-sidebar-border);
  margin-bottom: 18px;
}

.app-sidebar-brand-link {
  text-decoration: none;
  color: var(--app-sidebar-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.app-sidebar-brand {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--app-sidebar-text);
  display: block;
}
.app-sidebar-brand span { color: var(--accent); font-weight: 600; }

.app-sidebar-brand-logo {
  max-width: 100%;
  max-height: 48px;
  display: block;
  object-fit: contain;
  /* Auto-invert kicks in via JS gdy logo jest ciemne na ciemnym tle sidebara.
     Adds .is-inverted class which applies filter:invert(1) brightness(1.05). */
  transition: filter 0.2s;
}
.app-sidebar-brand-logo.is-inverted {
  filter: invert(1) brightness(1.05);
}

.app-sidebar-brand-sublabel {
  font-size: 0.62rem;
  color: var(--app-sidebar-text-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}
.app-sidebar-brand-sublabel-tiny {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.app-sidebar-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--app-sidebar-text-muted);
  font-weight: 500;
  padding: 14px 10px 6px;
  margin-top: 4px;
}
.app-sidebar-section-label:first-child { margin-top: 0; padding-top: 4px; }

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--app-sidebar-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.app-sidebar-link:hover {
  background: var(--app-sidebar-hover);
  color: var(--app-sidebar-text);
}
.app-sidebar-link.is-active {
  background: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-text);
  font-weight: 500;
}
.app-sidebar-link.is-active:hover {
  background: var(--app-sidebar-active-bg);
  color: var(--app-sidebar-active-text);
}

.app-sidebar-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.app-sidebar-footer {
  padding-top: 14px;
  border-top: 1px solid var(--app-sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-sidebar-footer .lang-switcher {
  /* Override FD bundle CSS (index-*.css) which makes .lang-switcher
     position:fixed top-right — collides with our sidebar-footer usage. */
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px;
  border-radius: 0 !important;
  z-index: auto !important;
}
.app-sidebar-footer .lang-btn:hover { background: var(--app-sidebar-hover); }
.app-sidebar-footer .lang-btn.is-active { border-color: rgba(255, 255, 255, 0.3); }

.app-sidebar-logout-form { margin: 0; }
.app-sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--app-sidebar-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.app-sidebar-logout:hover {
  background: var(--app-sidebar-hover);
  color: var(--app-sidebar-text);
}

/* ─── Collapse-to-icons (Marcin 2026-06-04) — maximise the working area ─────── */
.app-sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--app-sidebar-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.app-sidebar-collapse:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-text); }
.app-sidebar-chevron { transition: transform 0.2s ease; }

/* Width animates only after the initial (persisted) state is applied — no load flash. */
.app-sidebar.app-sidebar-anim { transition: width 0.18s ease, padding 0.18s ease; }

.app-sidebar.is-collapsed {
  width: 68px;
  padding-left: 10px;
  padding-right: 10px;
}
.app-sidebar.is-collapsed .app-sidebar-header { display: none; }
.app-sidebar.is-collapsed .app-sidebar-link span,
.app-sidebar.is-collapsed .app-sidebar-logout span,
.app-sidebar.is-collapsed .app-sidebar-collapse span,
.app-sidebar.is-collapsed .app-sidebar-section-label,
.app-sidebar.is-collapsed .lang-switcher { display: none; }
.app-sidebar.is-collapsed .app-sidebar-link,
.app-sidebar.is-collapsed .app-sidebar-logout,
.app-sidebar.is-collapsed .app-sidebar-collapse {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.app-sidebar.is-collapsed .app-sidebar-chevron { transform: rotate(180deg); }

.app-content {
  flex: 1;
  min-width: 0;
}

/* Designer-specific: .app-content gets flex column to expand #flex-root
   (without this, .upload-page on photographer pages shrinks to content size
   because margin:auto inside a flex column triggers shrink-to-fit). */
.design-shell-main {
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.design-shell-main #flex-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.design-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 252, 249, 0.85);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
/* Hide header before user uploads/restores anything — nothing to Save & Exit yet.
   FD sets body[data-album-active="true"] when hasInitialAlbum flips true
   (App.tsx ~565). Empty-state landing renders without our chrome bar. */
body.design-body[data-album-active="false"] .design-header,
body.design-body:not([data-album-active]) .design-header { display: none; }

/* Tray panel (FD floating photo tray) constrained do .app-content w embed mode.
   FD-side ustawia tray jako position:fixed z left:0/right:0 (full viewport).
   W AD sidebar layout to wychodzi pod sidebar 240px po lewej. Offset lewej
   krawędzi do szerokości sidebara — tray siedzi tylko w prawym panelu. */
body.design-body .tray-panel[data-position="bottom"] { left: 240px !important; }
body.design-body .tray-panel[data-position="left"]   { left: 240px !important; }

/* Sidebar manually collapsed to 68px (#sidebarToggle) — keep the tray flush with the
   collapsed rail instead of leaving a ~172px gap from the expanded-width offset.
   Sibling combinator: .app-content (tray's container) follows .app-sidebar in .app-layout. */
body.design-body .app-sidebar.is-collapsed ~ .app-content .tray-panel[data-position="bottom"],
body.design-body .app-sidebar.is-collapsed ~ .app-content .tray-panel[data-position="left"] { left: 68px !important; }

@media (max-width: 900px) {
  /* Sidebar collapse do 64px */
  body.design-body .tray-panel[data-position="bottom"],
  body.design-body .tray-panel[data-position="left"] { left: 64px !important; }
}
.design-header-title {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.design-header-title code {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  opacity: 0.7;
  margin-left: 8px;
}

@media (max-width: 900px) {
  /* Collapse to icons-only at narrow widths so the designer still has room. */
  .app-sidebar { width: 64px; padding: 18px 8px; }
  .app-sidebar-header { padding: 0 4px 12px; margin-bottom: 12px; }
  .app-sidebar-brand,
  .app-sidebar-link span,
  .app-sidebar-section-label,
  .app-sidebar-logout span,
  .app-sidebar-footer .lang-switcher,
  .app-sidebar-collapse { display: none; }  /* auto-collapsed here → manual toggle is moot */
  .app-sidebar-link,
  .app-sidebar-logout { justify-content: center; padding: 12px 0; }
}

/* Save & Exit — text on desktop, icon-only on phones (set in the ≤640 block). */
.design-save-exit { display: inline-flex; align-items: center; gap: 6px; }
.design-save-exit-icon { display: none; }

/* ── Phone (≤640px): on the DESIGNER swap the icon-rail for an off-canvas drawer
   so spreads get the full screen width (Marcin 2026-06-06 — mobile/iPhone). ─── */
@media (max-width: 640px) {
  body.design-body .app-sidebar {
    position: fixed; left: 0; top: 0;
    width: 250px; max-width: 84vw;
    padding: 22px 14px 18px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.34);
    z-index: 60;
  }
  body.design-body .app-sidebar.is-open { transform: translateX(0); }
  /* The drawer shows full labels — undo the ≤900 icon-rail hiding. */
  body.design-body .app-sidebar-header { padding: 0 8px 18px; margin-bottom: 18px; }
  body.design-body .app-sidebar-brand,
  body.design-body .app-sidebar-link span,
  body.design-body .app-sidebar-logout span { display: inline; }
  body.design-body .app-sidebar-section-label { display: block; }
  body.design-body .app-sidebar-link,
  body.design-body .app-sidebar-logout { justify-content: flex-start; padding: 12px 14px; }
  /* Hamburger trigger + backdrop appear only here. */
  body.design-body .app-mobile-hamburger { display: inline-flex; }
  body.design-body .app-sidebar-backdrop.is-open { display: block; }
  /* Make room for the fixed hamburger so it doesn't sit on the title. */
  body.design-body .design-header { padding-left: 62px; }
  /* Save & Exit collapses to an icon-only button to reclaim header space. */
  body.design-body .design-save-exit-label { display: none; }
  body.design-body .design-save-exit-icon { display: inline-flex; }
  body.design-body .design-header .design-save-exit { padding: 9px 11px; }
  /* Sidebar is off-canvas → tray spans the full width. */
  body.design-body .tray-panel[data-position="bottom"],
  body.design-body .tray-panel[data-position="left"] { left: 0 !important; }
}

/* Mobile hamburger + backdrop — hidden until the ≤640 designer media reveals them. */
.app-mobile-hamburger {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 61;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: #1F2A33; color: #fff; border: none; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); cursor: pointer;
}
.app-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 55; }

/* Rotate-to-landscape gate — ONLY for the fullscreen spread modal (the manual
   per-spread editor opened by tapping a spread). The grid behind stays usable in
   portrait; only the cramped per-spread editing needs the width. iOS Safari can't
   lock orientation, so we cover the modal with a "turn your device" prompt that
   clears the moment the phone is in landscape. (Marcin 2026-06-06) */
@media (orientation: portrait) and (max-width: 640px) {
  /* Hide the modal's real children (spread, nav arrows, toolbar) so only the
     gate shows — robust against their z-index without guessing values. */
  body.design-body .modal-backdrop > * { visibility: hidden; }
  body.design-body .modal-backdrop::after {
    content: "📱\A Rotate your phone to landscape\A to edit this spread";
    white-space: pre-line;
    position: absolute; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: #1F2A33; color: #E8EAED;
    font-size: 1.14rem; line-height: 1.9; font-weight: 400;
    text-align: center; padding: 40px;
  }
  html[lang="pl"] body.design-body .modal-backdrop::after {
    content: "📱\A Obróć telefon na poziomo,\A aby edytować rozkładówkę";
  }
  html[lang="de"] body.design-body .modal-backdrop::after {
    content: "📱\A Drehe dein Telefon ins Querformat,\A um die Doppelseite zu bearbeiten";
  }
}

/* Landscape phone: the spread modal IS the editing surface. Two coupled fixes so
   the spread is bigger WITHOUT distorting (Marcin 2026-06-06):
   1) the modal-content default caps height at 100vh-80px → on a short phone that
      squeezes the column flex and the spread (flex-shrink) loses height while
      keeping its set width = stretched ratio. Give it almost the full height.
   2) size the spread so its height (width/ratio) + chrome FITS that height, so the
      flex never has to shrink it (reserve ≈ 24px content margin + ~96px chrome). */
@media (orientation: landscape) and (max-width: 960px) {
  body.design-body .modal-content { max-height: calc(100vh - 24px); }
  body.design-body .modal-spread {
    width: min(calc(100vw - 24px), calc((100vh - 120px) * var(--canvas-ratio, 2)));
  }
  body.design-body .modal-bar { flex-wrap: nowrap; overflow-x: auto; }
  /* Prev/next arrows: the default positions them against the OLD spread-width
     formula (240/220) which no longer matches the resized spread, so they landed
     on top of it. Pin them to the viewport edges instead — clear of the spread. */
  body.design-body .modal-prev { left: 6px; }
  body.design-body .modal-next { right: 6px; }
}

/* --- Input with leading icon (used in wedding-grid: bride/groom name fields) --- */

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.input-with-icon .settings-input {
  padding-left: 36px;
  width: 100%;
}

/* --- Brand colors picker (settings) --- */

.brand-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.brand-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  font-size: 0.88rem;
}
.brand-preset-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.brand-preset-card.is-active {
  border-color: var(--text);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--text) inset;
}
.brand-preset-swatch {
  display: flex;
  width: 72px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.brand-preset-swatch-color {
  flex: 1;
  display: block;
}
.brand-preset-name {
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

.brand-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--radius);
}
.brand-color-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-color-picker-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.brand-color-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-color-input-group input[type="color"] {
  width: 38px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 2px;
  background: #fff;
}
.brand-color-hex {
  width: 100px;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* --- New design modal: album-type cards (dropdown → icon grid) --- */

.album-type-grid {
  display: grid;
  /* 5 typów (Wedding/Portrait/Family/School/Christening) — auto-fit minmax
     zwija się płynnie do 3 lub 2 kolumn na węższych modal'ach, max 5 w rzędzie. */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

/* Faza 8F: proportion sub-picker is only 2 cards — don't let them stretch full-width. */
.proportion-grid { grid-template-columns: repeat(2, minmax(120px, 170px)); justify-content: start; }
.proportion-grid + .proportion-grid { margin-top: 0; }

/* Faza 8F: proportional closed-album format pictograms (bottom-aligned, like books on
   a shelf at their relative heights; the family's design BASE is highlighted ★). */
.fmt-pictos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  padding: 14px 4px 4px;
}
/* display:flex/grid above override the UA `[hidden]{display:none}`, so re-assert it
   for the toggled groups (attribute selector out-specifies the plain class). */
.fmt-pictos[hidden], .proportion-grid[hidden] { display: none; }
.fmt-picto { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* Faza 8F (Marcin 2026-06-04): these are an INFORMATIONAL size chart, not a picker —
   style them as a flat neutral diagram (NOT brand-tinted tiles, which read as
   selectable like the orientation/proportion cards above). pointer-events:none so they
   don't even feel hoverable. Only the design base gets a subtle accent + the ★ glyph. */
.fmt-picto-shape {
  display: block;
  background: #f4f5f6;
  border: 1px solid #dcdfe3;
  border-radius: 2px;
  pointer-events: none;
}
.fmt-picto.is-base .fmt-picto-shape {
  background: color-mix(in srgb, var(--accent, #C2A580) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #C2A580) 55%, #cfd2d6);
}
.fmt-picto-code { font-size: 11px; font-weight: 600; color: #374151; white-space: nowrap; }
.fmt-picto.is-base .fmt-picto-code { color: var(--brand-primary, #2563eb); }
.fmt-picto-cm { font-size: 10px; color: #9ca3af; white-space: nowrap; }
.fmt-base-note {
  margin: 12px 2px 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}
.fmt-base-note::first-letter { color: var(--brand-primary, #2563eb); font-weight: 700; }

/* Faza 8F: new-design wizard stepper (Client → Type → Format). */
.nd-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 20px; }
.nd-step-dot {
  display: inline-flex; align-items: center; gap: 7px;
  color: #9ca3af; font-size: 13px;
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; cursor: default;
}
.nd-step-dot.is-clickable { cursor: pointer; }
.nd-step-dot.is-clickable:hover { color: var(--brand-primary, #2563eb); }
.nd-step-dot i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid currentColor; font-style: normal; font-size: 12px; font-weight: 600;
}
.nd-step-dot b { font-weight: 500; }
.nd-step-dot.is-active { color: var(--brand-primary, #2563eb); }
.nd-step-dot.is-active i { background: var(--brand-primary, #2563eb); color: #fff; border-color: var(--brand-primary, #2563eb); }
.nd-step-dot.is-done { color: #6b7280; }
.nd-step-dot.is-done i { background: #6b7280; color: #fff; border-color: #6b7280; }
.nd-step-sep { width: 22px; height: 1px; background: #e5e7eb; flex: none; }
@media (max-width: 480px) { .nd-step-dot b { display: none; } }
/* .btn-primary/.btn-secondary set display, overriding the UA [hidden] — re-assert it
   for the wizard nav buttons (ID selector out-specifies the class). */
#ndBack[hidden], #ndNext[hidden], #ndSubmitBtn[hidden] { display: none; }

/* Faza 8F (Marcin 2026-06-04): keep the wizard footer (Back / Next / Start Designing)
   ALWAYS visible — make the panel a flex column where only .nd-scroll (the active step's
   body) scrolls; stepper + footer + error stay pinned. Scoped to #newDesignModal so
   every other modal keeps its plain overflow-y:auto behaviour. */
#newDesignModal .order-modal-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#newDesignModal #newDesignForm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
#newDesignModal .nd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -30px;        /* scrollbar sits at the panel edge */
  padding: 2px 30px;
}
#newDesignModal .nd-steps,
#newDesignModal .order-modal-footer,
#newDesignModal #ndError { flex-shrink: 0; }
/* Trim the steps a touch so they usually fit without scrolling at all. */
#newDesignModal .settings-block { margin-bottom: 12px !important; }
/* The "Sizes in this family" block is informational (a size chart) — strip the card
   framing the picker blocks use, so it reads as a note below the orientation/proportion
   choices, not a third thing to pick. */
#newDesignModal #ndFormatPreview { background: transparent; border: none; padding: 2px 2px 0; }
#newDesignModal .nd-steps { margin: 2px 0 14px; }
#newDesignModal .order-modal-title { margin-bottom: 2px; }
#newDesignModal .fmt-pictos { gap: 13px; padding: 8px 4px 2px; }
#newDesignModal .fmt-base-note { margin-top: 8px; font-size: 11.5px; }

.album-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}
.album-type-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.album-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.album-type-card:has(input[type="radio"]:checked) {
  border-color: var(--text);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--text) inset;
}
.album-type-icon {
  width: 23px;
  height: 23px;
  color: var(--text);
  flex-shrink: 0;
}
.album-type-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

@media (max-width: 520px) {
  .album-type-grid { grid-template-columns: 1fr; }
  .album-type-card { flex-direction: row; padding: 14px 16px; justify-content: flex-start; gap: 16px; }
  .album-type-icon { width: 18px; height: 18px; }
}



/* ─── CRM: client list (Marcin 2026-05-28) ─────────────────────────────────── */
.client-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.client-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border, #e7e2da);
  border-radius: 12px;
}
.client-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: var(--brand-primary, #2563eb);
}
.client-main { flex: 1 1 auto; min-width: 0; }
.client-name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-meta {
  font-size: 13px;
  opacity: 0.65;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.client-dot { opacity: 0.5; }
.client-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.client-albums {
  font-size: 12px;
  opacity: 0.6;
  white-space: nowrap;
  margin-right: 4px;
}
.client-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* `display:grid` overrides the UA `[hidden]{display:none}` rule (higher
   specificity), so the inline "new client" fields stayed visible even when the
   `hidden` attribute was set. This restores hide-ability. (Marcin 2026-05-28) */
.client-form-grid[hidden] { display: none; }
@media (max-width: 560px) {
  .client-form-grid { grid-template-columns: 1fr; }
  .client-row { flex-wrap: wrap; }
  .client-albums { display: none; }
}

/* ─── Flipbook client review bar (Spread OK / corrections) — Marcin 2026-05-28 ─── */
.review-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  width: 100%;
}
.review-action {
  flex: 0 1 240px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 2px solid;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px; /* comfortable mobile tap target */
  transition: background .12s ease, color .12s ease, filter .12s ease;
}
.review-action.review-ok   { border-color: #16a34a; color: #15803d; }
.review-action.review-corr { border-color: #dc2626; color: #b91c1c; }
.review-action.review-ok.is-active   { background: #16a34a; color: #fff; }
.review-action.review-corr.is-active { background: #dc2626; color: #fff; }
.review-action:hover { filter: brightness(.97); }
.review-ok-check { font-weight: 700; }
@media (max-width: 640px) {
  .review-action { flex: 1 1 0; padding: 14px 10px; font-size: 14px; }
}