:root {
  --bg: #F5F3EE; --text: #1A1815; --muted: #6B675F; --card-bg: #FFFFFF;
  --border: #D3CFC3; --dashed: #C2BCAE; --accent: #5A4FCF; --danger: #C0392B;
}
html, body { height: 100%; margin: 0; }
body {
  font-family: sans-serif; max-width: 1120px; margin: 0 auto; padding: 0 1rem;
  background: var(--bg); color: var(--text); box-sizing: border-box;
  display: flex; flex-direction: column; height: 100vh;
}
.page-wrap { flex: 1; min-height: 0; overflow: hidden; padding: 1rem 0; position: relative; z-index: 2; }
.view-track {
  display: flex; height: 100%; width: 600%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.view-panel { flex: 0 0 calc(100% / 6); width: calc(100% / 6); height: 100%; overflow-y: auto; box-sizing: border-box; }

.pile-banner {
  position: relative; height: 150px; margin: 2rem 0 -45px; flex-shrink: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.pile-card {
  position: absolute; width: 50px; height: 50px; background: var(--card-bg);
  background-size: cover; background-position: center;
  border: 1px solid var(--border); border-radius: 6px;
}
.pile-title {
  position: relative; z-index: 2; font-size: 34px; font-weight: 700; color: var(--text);
  margin: 0; padding: 0 0.3em; pointer-events: none;
}

.switch {
  position: relative; display: inline-flex; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-bg); overflow: hidden;
}
.switch input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-thumb {
  position: absolute; inset: 0; width: 50%; background: var(--accent); border-radius: 4px;
  margin: 2px; height: calc(100% - 4px); transition: transform 0.2s cubic-bezier(.4,0,.2,1); z-index: 0;
}
.switch:has(input:last-of-type:checked) .switch-thumb { transform: translateX(calc(100% - 4px)); }
.switch label {
  position: relative; z-index: 1; padding: 0.45rem 1rem; font-size: 0.8rem; cursor: pointer;
  color: var(--muted); transition: color 0.15s ease; user-select: none; text-align: center;
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.switch input:checked + label { color: #fff; }
.switch input:focus-visible + label { outline: 1px solid var(--accent); outline-offset: -1px; }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.stepper-btn {
  width: 28px; border: none; background: var(--card-bg); color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.stepper-btn:hover { background: var(--bg); color: var(--text); }
.stepper-btn:active { background: var(--border); }
.stepper input[type=number] {
  width: 2.6rem; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; padding: 0.15rem 0; background: var(--card-bg); color: var(--text);
  -moz-appearance: textfield; font-size: 0.8rem;
}
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper-section { display: flex; align-items: center; justify-content: center; width: 112px; height: 100px; }
.stepper-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.stepper-slot-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stepper-label {
  font-size: 0.58rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; background: var(--bg); line-height: 1.3;
}

.upload-and-mode { display: flex; align-items: center; }
.switches-stack { display: flex; flex-direction: column; gap: 6px; width: fit-content; justify-content: space-between; }
.switches-stack .switch { height: 47px; }

.upload-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; cursor: pointer; height: 100px; width: 108px; padding: 0 0.5rem; border-radius: 8px; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  font-size: 0.85rem; font-weight: 500; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-btn:hover { border-color: var(--muted); }
#fileInput { position: absolute; opacity: 0; width: 0; height: 0; }

.generate-btn {
  border-color: var(--accent) !important; background: var(--accent) !important; color: #fff !important;
}
.generate-btn:hover { filter: brightness(1.08); }

.reset-btn {
  height: 100px; width: 27px; padding: 0; border-radius: 8px; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--muted);
  font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.reset-btn:hover { border-color: var(--danger); color: var(--danger); }

/* The app workspace owns the horizontal margins. This makes the controls
   and the preview area share exactly the same left/right edges and center. */
#view-app {
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

.controls-panel {
  border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem;
  background: var(--card-bg); margin: 0 0 1rem; position: relative;
  width: 100%; box-sizing: border-box;
}
.top-panels-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 1rem; overflow-x: auto; padding-bottom: 2px; }
.top-panels-row > * { flex-shrink: 0; }
.control-divider { width: 1px; height: 100px; background: var(--border); flex-shrink: 0; align-self: center; }
.bg-picker-row { display: flex; gap: 1rem; align-items: stretch; }

/* Below this width, the controls panel's natural content (~850px) can no
   longer fit as one horizontal strip — and since the SPA's sliding-panel
   navigation needs overflow:hidden on its container, there's no scroll
   fallback to reach anything cut off. So instead of scrolling, the row
   wraps onto multiple lines, and dividers (which only make sense as
   separators within a single row) are hidden. */
@media (max-width: 700px) {
  #view-app { padding-left: 0; padding-right: 0; }
  .controls-panel { width: 100%; box-sizing: border-box; }
  .top-panels-row { flex-wrap: wrap; overflow-x: visible; justify-content: flex-start; }
  .control-divider { display: none; }
}

#imageList {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;
  width: 100%; padding-left: 0; box-sizing: border-box;
}

.page-block {
  background: #fff; border: 1px solid var(--border); border-radius: 2px;
  width: 230px; box-sizing: border-box;
  padding: 12px; display: flex; flex-direction: column;
  overflow: hidden; /* hard backstop: content can never visually escape the page boundary */
}
.page-block.landscape { width: 320px; }

.add-page-btn {
  width: 230px; box-sizing: border-box; border: 1.5px dashed var(--dashed); border-radius: 2px;
  background: none; color: var(--muted); font-size: 2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.12s ease, color 0.12s ease;
}
.add-page-btn.landscape { width: 320px; }
.add-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-label { font-size: 0.65rem; color: var(--muted); margin-bottom: 0.3rem; flex-shrink: 0; }
.grid { flex: 1; display: grid; gap: 0.3rem; min-height: 0; overflow: hidden; }

.grid-item {
  position: relative; width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card-bg); cursor: grab; box-sizing: border-box; overflow: hidden;
  transition: transform 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.grid-item.dragging { opacity: 0.35; transform: scale(0.95); }
.grid-item.drag-over { border-color: var(--accent); border-width: 1.5px; }
.drag-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  opacity: 0.85; box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transform: rotate(-2deg) scale(1.03);
}
.grid-item img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
.item-top {
  position: absolute; top: 4px; left: 4px; right: 4px; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; font-size: 0.65rem;
  background: rgba(255,255,255,0.9); border-radius: 4px; padding: 2px 4px;
}
.drag-catcher { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; touch-action: none; }
.item-top .handle {
  color: var(--muted); user-select: none; cursor: grab; touch-action: none;
  padding: 4px 6px; margin: -4px -6px; /* enlarges the actual tap target without shifting visible layout */
}
.icon-btn { background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 0; color: var(--muted); }
.icon-btn.remove { color: var(--danger); }
.caption-preview {
  position: absolute; bottom: 4px; left: 4px; right: 4px; z-index: 1;
  font-size: 0.6rem; color: var(--text); background: rgba(255,255,255,0.9); border-radius: 4px;
  padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.empty-cell {
  width: 100%; height: 100%; border: 1.5px dashed var(--dashed); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); box-sizing: border-box; background: none;
  transition: border-color 0.12s ease; font-family: inherit; padding: 0.3rem;
}
.empty-cell.drag-over { border-color: var(--accent); }
.empty-cell .plus-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 1.6rem; line-height: 1; padding: 0.2rem;
}
.empty-cell .plus-btn:hover { color: var(--accent); }
.empty-cell .choices { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.empty-cell .choices button {
  font-size: 0.6rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card-bg); color: var(--text); cursor: pointer;
}
.empty-cell .choices button:hover { border-color: var(--accent); color: var(--accent); }

.text-cell {
  position: relative; width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card-bg); box-sizing: border-box; padding: 0.3rem;
  display: flex; flex-direction: column; gap: 0.2rem; cursor: grab;
  transition: border-color 0.12s ease, opacity 0.12s ease;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.text-cell.drag-over { border-color: var(--accent); }
.text-cell.dragging { opacity: 0.35; transform: scale(0.95); cursor: grab; }
.text-cell-body {
  flex: 1; font-size: 0.6rem; overflow: hidden; color: var(--text); overflow-wrap: anywhere; word-break: break-word; line-height: 1.15;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

textarea {
  width: 100%; padding: 0.4rem; margin-bottom: 0.5rem; box-sizing: border-box;
  background: var(--card-bg); color: var(--text); border: 1px solid var(--border);
}
button.action { padding: 0.5rem 1rem; cursor: pointer; background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
#status { margin-top: 1rem; color: var(--muted); }

.bg-swatch-grid { display: grid; grid-template-columns: repeat(3, 30px); gap: 5px; }
.bg-swatch {
  width: 30px; height: 30px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0;
}
.bg-swatch.selected { border-color: var(--text); }
.bg-swatch.white-swatch { box-shadow: inset 0 0 0 1px var(--border); }
.page-preview {
  width: 60px; border-radius: 4px; border: 1px solid var(--border);
  padding: 6px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 3px; transition: background 0.15s ease;
}
.page-preview div { background: rgba(0,0,0,0.15); border-radius: 2px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-box {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem; width: min(90vw, 480px); box-sizing: border-box;
}
.modal-box h3 { margin: 0 0 0.6rem 0; font-size: 0.95rem; color: var(--text); }
.modal-box textarea {
  width: 100%; height: 220px; resize: vertical; font-family: inherit; font-size: 0.9rem;
  padding: 0.6rem; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.modal-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; }
.modal-charcount { font-size: 0.75rem; color: var(--muted); }
.modal-buttons { display: flex; gap: 0.5rem; }
.modal-buttons button {
  padding: 0.4rem 0.9rem; border-radius: 4px; cursor: pointer; font-size: 0.85rem;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.modal-buttons button.save { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Shared across every page: site footer nav (real buttons, not plain
   text links — matches the calm, hairline-bordered language used
   throughout the rest of the app), and the plain content pages (Privacy,
   Terms, About, Contact, How It Works). --- */
.site-footer {
  margin-top: 0; padding: 1.5rem 0; border-top: 1px solid var(--border); flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;
}
.footer-links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.site-footer .footer-links a {
  color: var(--text); text-decoration: none; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.8rem;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.site-footer .footer-links a:hover { border-color: var(--accent); color: var(--accent); }

.coffee-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  text-decoration: none; font-size: 0.8rem; font-weight: 500; color: #fff;
  background: #DD8347; border: 1px solid #C87038; border-radius: 8px;
  padding: 0.5rem 1rem; transition: background 0.12s ease;
}
.coffee-btn:hover { background: #C87038; }
.coffee-icon { font-size: 1.1rem; line-height: 1; }


.content-page {
  max-width: 720px;
  background: linear-gradient(120deg, rgba(237,233,251,0.65), rgba(251,234,240,0.65));
  border-radius: 14px; padding: 2rem 2.2rem;
}
.content-page h1 {
  font-size: 1.8rem; font-weight: 700; margin-bottom: 0.3rem;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.content-page h2 { font-size: 1.15rem; margin: 1.8rem 0 0.5rem; color: var(--text); }
.content-page p, .content-page li { line-height: 1.6; color: var(--text); margin: 0 0 0.7rem 0; }
.content-page ul { padding-left: 1.3rem; margin: 0.8rem 0; }
.content-page .updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 1.5rem; }
.content-page a { color: var(--accent); }