: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) {
  /* Compact phone layout. Keep the controls in three deliberate rows instead
     of allowing the desktop strip to wrap unpredictably. All tap targets stay
     large enough to use comfortably, but the panel occupies much less height. */
  body { padding-left: 0.5rem; padding-right: 0.5rem; }
  #view-app { padding-left: 0; padding-right: 0; }

  .controls-panel {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem;
    margin-bottom: 0.45rem;
    border-radius: 9px;
  }

  .top-panels-row {
    display: grid;
    grid-template-columns: minmax(112px, 0.88fr) minmax(0, 1.12fr);
    grid-template-areas:
      "upload switches"
      "stepper background"
      "reset generate";
    column-gap: 0.5rem;
    row-gap: 0.4rem;
    overflow: visible;
    align-items: center;
  }
  .top-panels-row > * {
    min-width: 0;
    max-width: 100%;
    justify-self: center;
  }
  .control-divider { display: none; }

  .upload-and-mode {
    grid-area: upload;
    width: 100%;
    justify-content: center;
  }
  .upload-btn {
    width: min(100%, 108px);
    height: 58px;
    padding: 0 0.35rem;
    border-radius: 7px;
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .switches-stack {
    grid-area: switches;
    width: 100%;
    max-width: 184px;
    gap: 3px;
  }
  .switches-stack .switch {
    width: 100%;
    height: 27px;
    box-sizing: border-box;
  }
  .switch label {
    padding: 0.18rem 0.25rem;
    font-size: 0.64rem;
    line-height: 1;
  }

  .stepper-section {
    grid-area: stepper;
    width: 100%;
    height: 52px;
  }
  .stepper-btn { width: 23px; font-size: 0.86rem; }
  .stepper input[type=number] {
    width: 2.05rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    font-size: 0.69rem;
  }
  .stepper-label { font-size: 0.49rem; padding: 1px 4px; }
  .stepper-slot-item { gap: 1px; }

  .bg-picker-row {
    grid-area: background;
    width: 100%;
    height: 52px;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
  }
  .bg-swatch-grid {
    grid-template-columns: repeat(3, 21px);
    gap: 3px;
  }
  .bg-swatch {
    width: 21px;
    height: 21px;
    border-radius: 4px;
    border-width: 1.5px;
  }
  .page-preview {
    width: 43px;
    height: 30px;
    padding: 4px;
    gap: 2px;
  }

  .reset-btn {
    grid-area: reset;
    width: 44px;
    height: 46px;
    border-radius: 7px;
    font-size: 0.95rem;
  }
  .generate-btn {
    grid-area: generate;
    width: min(100%, 112px);
    height: 46px;
    font-size: 0.72rem;
  }

  #status { height: 4.8rem; }
  .generating-label { font-size: 0.74rem; }
  .entropy-strip { font-size: 0.74rem; }
}

@media (max-width: 380px) {
  .controls-panel { padding: 0.45rem; }
  .top-panels-row {
    grid-template-columns: minmax(102px, 0.86fr) minmax(0, 1.14fr);
    column-gap: 0.4rem;
    row-gap: 0.32rem;
  }
  .upload-btn { width: min(100%, 102px); height: 54px; }
  .switches-stack .switch { height: 25px; }
  .switch label { font-size: 0.6rem; padding-left: 0.12rem; padding-right: 0.12rem; }
  .stepper-section, .bg-picker-row { height: 48px; }
  .generate-btn { width: min(100%, 106px); height: 44px; }
  .reset-btn { width: 42px; height: 44px; }
}

#imageList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-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; }
/* Permanent loading/status band. Its height never changes, so the page
   previews stay at exactly the same vertical position before, during and
   after PDF generation. */
#status {
  position: relative;
  width: 100%;
  height: 5.2rem;
  box-sizing: border-box;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.generating-label {
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

.entropy-strip {
  width: 100%;
  margin-top: 0.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  white-space: pre;
  overflow: hidden;
}

/* Phase 1: left, matching the normal status position. */
#status.generation-phase-1 .generating-label,
#status.generation-phase-1 .entropy-strip {
  text-align: left;
}

/* Phase 2: exactly centred across the same width as the controls panel. */
#status.generation-phase-2 .generating-label,
#status.generation-phase-2 .entropy-strip {
  text-align: center;
}

/* Phase 3: pulled all the way to the controls panel's right edge. */
#status.generation-phase-3 .generating-label,
#status.generation-phase-3 .entropy-strip {
  text-align: right;
}

/* While the request is in flight, previews are visibly inactive and cannot
   receive mouse/touch interaction. The JS also locks the editing controls. */
#view-app.is-generating #imageList {
  opacity: 0.48;
  filter: grayscale(0.35);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.generate-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

.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); }
/* -------------------------------------------------------------------------
   Final mobile polish
   Kept at the END of the stylesheet deliberately: the desktop background
   swatch rules are defined later than the original mobile block, so those
   desktop rules were winning the cascade and making the colour grid overflow.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Shorter illustrated masthead on phones. */
  .pile-banner {
    height: 105px;
    margin: 0.45rem 0 -18px;
  }
  .pile-card {
    width: 42px;
    height: 42px;
    border-radius: 5px;
  }
  .pile-title {
    font-size: 29px;
    padding-inline: 0.22em;
  }

  /* Use the phone width instead of stacking everything vertically.
     Row 1: upload | switches | background
     Row 2: count  | reset    | generate
     Each control has its own grid cell, so the colour picker can never sit
     underneath another control. */
  .controls-panel {
    padding: 0.55rem 0.6rem;
  }
  .top-panels-row {
    display: grid;
    grid-template-columns: minmax(96px, 0.9fr) minmax(136px, 1.27fr) minmax(102px, 0.96fr);
    grid-template-areas:
      "upload switches background"
      "stepper reset generate";
    column-gap: 0.42rem;
    row-gap: 0.48rem;
    align-items: center;
    overflow: visible;
  }
  .top-panels-row > * {
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }

  .upload-and-mode {
    grid-area: upload;
    width: 100%;
  }
  .upload-btn {
    width: 100%;
    height: 64px;
    padding: 0 0.3rem;
    font-size: 0.7rem;
  }

  .switches-stack {
    grid-area: switches;
    width: 100%;
    max-width: none;
    gap: 4px;
  }
  .switches-stack .switch {
    width: 100%;
    height: 30px;
  }
  .switch label {
    padding: 0.16rem 0.18rem;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .bg-picker-row {
    grid-area: background;
    width: 100%;
    height: 64px;
    display: flex;
    gap: 0.28rem;
    align-items: center;
    justify-content: center;
  }
  .bg-swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 19px);
    gap: 2px;
  }
  .bg-swatch {
    width: 19px;
    height: 19px;
    border-radius: 4px;
    border-width: 1.5px;
  }
  .page-preview {
    width: 34px;
    height: 34px;
    padding: 4px;
    gap: 2px;
    flex: 0 0 auto;
  }

  .stepper-section {
    grid-area: stepper;
    width: 100%;
    height: 48px;
    justify-content: center;
  }
  .stepper-slot {
    width: 100%;
  }
  #manualModeControls {
    flex-direction: row;
    justify-content: center;
    gap: 3px;
  }
  #manualModeControls .stepper-slot-item {
    min-width: 0;
  }
  .stepper-btn {
    width: 22px;
    font-size: 0.82rem;
  }
  .stepper input[type=number] {
    width: 1.85rem;
    font-size: 0.66rem;
  }
  .stepper-label {
    font-size: 0.46rem;
    padding: 1px 3px;
  }

  .reset-btn {
    grid-area: reset;
    justify-self: center;
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }
  .generate-btn {
    grid-area: generate;
    width: 100%;
    height: 42px;
    padding-inline: 0.25rem;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  /* The desktop footer uses button-like navigation. On a phone those buttons
     use more vertical space than the whole app toolbar, so turn them into a
     compact line of ordinary navigation links instead. */
  .site-footer {
    padding: 0.65rem 0 0.55rem;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
  }
  .footer-links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.72rem;
    row-gap: 0.22rem;
  }
  .site-footer .footer-links a {
    border: 0;
    border-radius: 0;
    padding: 0.08rem 0;
    font-size: 0.69rem;
    color: var(--muted);
  }
  .site-footer .footer-links a:hover {
    color: var(--accent);
  }
  .coffee-btn {
    flex-direction: row;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.68rem;
  }
  .coffee-icon {
    font-size: 0.8rem;
  }

  /* Compact, styled analytics choice. It remains part of normal page flow so
     it never covers the generator or navigation. */
  .consent-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.5rem 0 0.65rem;
    border-top: 1px solid var(--border);
    font-size: 0.69rem;
    line-height: 1.28;
  }
  .consent-banner[hidden] {
    display: none;
  }
  .consent-banner__text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .consent-banner__text strong {
    margin-right: 0.25em;
  }
  .consent-banner__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.28rem;
  }
  .consent-btn {
    min-height: 28px;
    padding: 0.18rem 0.48rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.65rem;
    cursor: pointer;
  }
  .consent-btn--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }
  .consent-btn--secondary {
    color: var(--muted);
  }
}

@media (max-width: 380px) {
  .pile-banner {
    height: 98px;
    margin-top: 0.3rem;
    margin-bottom: -16px;
  }
  .pile-card { width: 39px; height: 39px; }
  .pile-title { font-size: 26px; }

  .controls-panel { padding: 0.48rem; }
  .top-panels-row {
    grid-template-columns: minmax(88px, 0.88fr) minmax(124px, 1.24fr) minmax(94px, 0.94fr);
    column-gap: 0.32rem;
    row-gap: 0.4rem;
  }
  .upload-btn { height: 60px; font-size: 0.65rem; }
  .switches-stack .switch { height: 28px; }
  .switch label { font-size: 0.57rem; }
  .bg-picker-row { height: 60px; gap: 0.2rem; }
  .bg-swatch-grid { grid-template-columns: repeat(3, 18px); }
  .bg-swatch { width: 18px; height: 18px; }
  .page-preview { width: 30px; height: 32px; padding: 3px; }
  .generate-btn { font-size: 0.61rem; }

  .footer-links { column-gap: 0.55rem; }
  .site-footer .footer-links a { font-size: 0.64rem; }
  .consent-banner {
    align-items: flex-start;
    font-size: 0.64rem;
    gap: 0.4rem;
  }
  .consent-btn { font-size: 0.61rem; padding-inline: 0.4rem; }
}