/* RightGifting personaliser: styles for the design page and the staff page.
   The tokens, editor and action bar come from the approved prototype.
   The state screens, upload box and staff page are new and use the same tokens. */

/* Without this, a class that sets "display" (grid, flex) shows an element that has the hidden attribute. */
[hidden] { display: none !important; }

:root {
  --bg: #f2f3f8;          /* cool off-white page */
  --surface: #ffffff;     /* panels and bars */
  --surface-2: #eceef6;   /* second neutral layer: inputs, tab track */
  --ink: #1c2340;         /* deep indigo text */
  --muted: #545b7a;
  --line: #d8dbea;
  --accent: #e39b12;      /* marigold: primary action, selection, current state */
  --accent-soft: #fbefd4;
  --on-accent: #1c2340;
  --keyline: #12a866;     /* the print line */
  --ok: #17703f;   --ok-bg: #e2f3e9;
  --warn: #8a5a00; --warn-bg: #fbf0d6;
  --bad: #b0302f;  --bad-bg: #fbe4e3;
  --photo: #ffffff;       /* the product is shot on white in both themes */
  --shadow: 0 1px 2px rgba(28,35,64,.06), 0 8px 24px rgba(28,35,64,.08);
  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-ui: "Hind", "Segoe UI", Roboto, sans-serif;
  --fs-xs: .8125rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --radius: 14px;
  --bar-h: 68px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #10132a; --surface: #191d39; --surface-2: #232849; --ink: #eef0fa; --muted: #a9aecd; --line: #2e3459;
  --accent: #f1b53a; --accent-soft: #3a3220; --on-accent: #1c2340; --keyline: #34d399;
  --ok: #5fe39a; --ok-bg: #16362a; --warn: #fbc94d; --warn-bg: #3b311a; --bad: #ff8a8a; --bad-bg: #3d1e24;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #10132a; --surface: #191d39; --surface-2: #232849; --ink: #eef0fa; --muted: #a9aecd; --line: #2e3459;
  --accent: #f1b53a; --accent-soft: #3a3220; --on-accent: #1c2340; --keyline: #34d399;
  --ok: #5fe39a; --ok-bg: #16362a; --warn: #fbc94d; --warn-bg: #3b311a; --bad: #ff8a8a; --bad-bg: #3d1e24;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  color-scheme: dark }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.45; caret-color: var(--accent); scrollbar-color: var(--line) transparent; }
::selection { background: var(--accent-soft); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app { min-height: 100%; display: grid; gap: 14px; align-content: start; padding-inline: 16px; padding-block: 10px calc(var(--bar-h) + 20px + env(safe-area-inset-bottom, 0px)); }
header.top { display: flex; align-items: center; gap: 8px; }
header.top h1 { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.15; text-wrap: balance; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; color: var(--ink); transition: background .15s, border-color .15s; }
.iconbtn:hover:not(:disabled) { background: var(--surface-2); }
.iconbtn:active:not(:disabled) { transform: translateY(1px); }
.iconbtn[aria-pressed="true"] { border-color: var(--keyline); color: var(--keyline); }
.iconbtn:disabled { opacity: .38; cursor: default; }

.stage-wrap { display: grid; gap: 10px; width: 100%; max-width: 640px; justify-self: center; }
.stage { position: relative; width: 100%; max-width: 640px; justify-self: center; aspect-ratio: 1 / 1; background: var(--photo) center / cover no-repeat; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.stage canvas { display: block; }
.name-stepper { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.name-stepper button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); }
.name-stepper button:hover { background: var(--surface-2); }
.name-stepper span { font-size: var(--fs-sm); padding-inline: 4px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 5; background: rgba(28,35,64,.88); color: #fff; font-size: var(--fs-sm); padding: 6px 12px; border-radius: 999px; width: max-content; max-width: calc(100% - 20px); text-align: center; pointer-events: none; }
.spec { justify-self: center; max-width: 640px; width: 100%; color: var(--muted); font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.spec b { color: var(--ink); font-weight: 600; }
.spec .line { display: inline-flex; align-items: center; gap: 6px; }
.spec .line i { width: 18px; border-top: 2px dashed var(--keyline); }

/* The side tabs above the design area (Front | Back, or one tab for each item of a pack), and the note under them. .seg is the same kind of switch (one person | bulk). */
.side-switch, .seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.side-switch button, .seg button { min-height: 48px; padding: 6px 8px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: var(--fs-md); font-weight: 600; line-height: 1.2; }
.side-switch button:hover, .seg button:hover { color: var(--ink); background: var(--surface); }
.side-switch button[aria-pressed="true"], .seg button[aria-pressed="true"] { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }
/* Three or more tabs sit in one row. A row that is too wide scrolls inside itself; the page never scrolls sideways. */
.side-switch { min-width: 0; max-width: 100%; box-sizing: border-box; }
.side-switch:not([data-count="2"]) { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.side-switch:not([data-count="2"]) button { flex: 1 0 auto; min-width: 84px; padding-inline: 14px; white-space: nowrap; }
.side-count { margin: -4px 0 0; text-align: center; color: var(--muted); font-size: var(--fs-xs); }

/* One person | Bulk / group, the two bulk choices and the bulk discount */
.mode-bar { display: grid; gap: 8px; }
.mode-help { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.discount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; background: var(--accent-soft); border-radius: 12px; padding: 8px 12px; font-size: var(--fs-sm); }
.discount b { font-weight: 600; }
.discount span { color: var(--muted); }
.discount span:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips:empty { display: none; }
.chips > span:not(.chip) { background: var(--surface-2); border-radius: 999px; padding: 3px 10px; font-size: var(--fs-sm); }
.bulk-part { display: grid; gap: 12px; }
.bulk-part p { margin: 0; }
.bulk-part p:empty, #namesNotes:empty, #namesFix:empty { display: none; }
#namesNotes { display: grid; gap: 6px; }
.fix-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; font-size: var(--fs-sm); color: var(--bad); }
.fix-all { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; }
.fix-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fix-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 1px solid var(--bad); background: var(--bad-bg); border-radius: 12px; padding: 6px 8px 6px 12px; }
.fix-list .nm { flex: 1 1 110px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink); }
.fix-list .why { flex: 1 1 130px; min-width: 0; color: var(--bad); font-size: var(--fs-xs); }
.fix-list select, .fix-all select { height: 44px; min-width: 120px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0 8px; font-size: var(--fs-sm); }
.qty-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qty-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 12px; }
.qty-row .qn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.qty-row .qp { color: var(--muted); font-size: var(--fs-xs); }
.stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.stepper button { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; font-size: 1.25rem; line-height: 1; color: var(--ink); }
.stepper button:hover:not(:disabled) { background: var(--surface-2); }
.stepper button:disabled, .stepper input:disabled { opacity: .45; cursor: default; }
.stepper input { width: 76px; height: 44px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: var(--fs-md); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.side-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.side-note p { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.side-note .btn { min-height: 44px; }

/* Panel with tabs */
.panel { justify-self: center; width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; scroll-margin-top: 12px; }
.tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--accent-soft); }
.tabs .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: .75rem; display: inline-grid; place-items: center; }
.tabpanel { padding: 14px; display: grid; gap: 12px; }
.tabpanel p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.group.split { justify-content: space-between; }
.cluster { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cluster button { width: 42px; height: 40px; border: 0; border-right: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); }
.cluster button:last-child { border-right: 0; }
.cluster button:hover { background: var(--surface-2); }
.cluster button.danger { color: var(--bad); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; color: var(--ink); transition: background .15s, border-color .15s; }
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.05); background: var(--accent); }
.btn.danger { color: var(--bad); }
.btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.btn:disabled { opacity: .45; cursor: default; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.q-ok { color: var(--ok); background: var(--ok-bg); } .q-warn { color: var(--warn); background: var(--warn-bg); } .q-bad { color: var(--bad); background: var(--bad-bg); }
.quality { display: grid; gap: 4px; justify-items: start; }
.quality small { color: var(--muted); font-size: var(--fs-xs); }
label.field { display: grid; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); min-width: 0; flex: 1 1 170px; }
.field input[type="text"], .field select, textarea { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 0 12px; font-size: var(--fs-md); color: var(--ink); }
.field input[type="text"]:focus, .field select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { height: auto; min-height: 132px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
input[type="color"] { width: 34px; height: 34px; border: 0; padding: 0; background: none; border-radius: 50%; }
.badge-name { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 6px; }
.skeleton { height: 92px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state { display: grid; gap: 10px; }
.empty-state h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.layer-list li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 8px; min-width: 0; }
.layer-list li.sel { border-color: var(--accent); background: var(--accent-soft); }
.layer-list .lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; text-align: left; height: 36px; font-size: var(--fs-sm); color: var(--ink); }
.layer-list .kind { color: var(--muted); display: grid; place-items: center; }
.confirm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bad-bg); border-radius: 12px; padding: 8px 12px; font-size: var(--fs-sm); }
.confirm-row span { flex: 1; min-width: 0; }
.banner { justify-self: center; width: 100%; max-width: 640px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--accent-soft); border-radius: 12px; padding: 8px 12px; font-size: var(--fs-sm); }
.banner span { flex: 1; min-width: 0; }

/* Action bar */
nav.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
nav.bar button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; border: 0; background: none; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); border-radius: 12px; }
nav.bar button svg { width: 24px; height: 24px; color: var(--ink); }
nav.bar button:hover { background: var(--surface-2); }
nav.bar button.go { background: var(--accent); color: var(--on-accent); font-weight: 600; }
nav.bar button.go svg { color: var(--on-accent); }
nav.bar button:disabled { opacity: .45; }
nav.bar.no-bulk { grid-template-columns: repeat(4, 1fr); }

/* Final check: the one overlay (a protected confirm step) */
.scrim { position: fixed; inset: 0; z-index: 25; background: rgba(10,12,28,.45); }
.review { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 88%; overflow: auto; background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2); padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; }
.review header { display: flex; align-items: center; gap: 8px; }
.review h2 { margin: 0; flex: 1; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); }
.review p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.review-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.review-imgs figure { margin: 0; display: grid; gap: 4px; min-width: 0; align-content: start; }
.review-imgs img { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--photo); }
.review-imgs figcaption { font-size: var(--fs-xs); color: var(--muted); }
.side-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.side-status b { color: var(--ink); }
.side-status:empty, #revMore:empty { display: none; }
.review-imgs .checker { background-color: #f5f6fa; background-image: linear-gradient(45deg,#e4e6ef 25%,transparent 25%),linear-gradient(-45deg,#e4e6ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e6ef 75%),linear-gradient(-45deg,transparent 75%,#e4e6ef 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.done-box { border: 1px solid var(--keyline); background: var(--ok-bg); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.done-box h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.done-box p { color: var(--ink); }
.names-out { display: flex; flex-wrap: wrap; gap: 6px; }
.names-out span { background: var(--surface-2); border-radius: 999px; padding: 3px 10px; font-size: var(--fs-sm); }
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 12px; font-size: var(--fs-sm); width: max-content; max-width: calc(100% - 32px); box-shadow: var(--shadow); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (min-width: 960px) {
  .app { grid-template-columns: minmax(0, 640px) minmax(340px, 400px); column-gap: 24px; justify-content: center; padding-bottom: 24px; align-items: start; }
  header.top { grid-column: 1 / -1; }
  .banner { grid-column: 1; }
  .stage-wrap { grid-column: 1; grid-row: 2 / span 2; align-self: start; }
  .spec { grid-column: 1; grid-row: 4; }
  nav.bar, nav.bar.no-bulk { position: static; grid-column: 2; grid-row: 2; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; grid-template-columns: repeat(3, 1fr); }
  nav.bar .tab-shortcut { display: none; }
  .panel { grid-column: 2; grid-row: 3 / span 2; position: sticky; top: 12px; }
  .review { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 48px)); border-radius: 18px; max-height: calc(100% - 48px); padding: 20px; }
  .toast { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- New: state screens (loading and friendly errors) ---------- */
.state-screen { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.state-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 20px; display: grid; gap: 12px; justify-items: start; }
.state-card h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.15; text-wrap: balance; }
.state-card p { margin: 0; color: var(--muted); }
.state-card .group { margin-top: 4px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
a.btn { text-decoration: none; }
.stage.is-loading { background-color: var(--surface-2); }

/* ---------- New: upload and confirm messages inside the final check ---------- */
.upload-box { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.upload-box h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.upload-box p { color: var(--ink); }
.upload-box progress { width: 100%; height: 10px; accent-color: var(--accent); }
.upload-box.err { border-color: var(--bad); background: var(--bad-bg); }
.upload-box.err h3 { color: var(--bad); }
.done-box .group a.btn { height: 40px; }
.note { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.checker { background-color: #f5f6fa; background-image: linear-gradient(45deg,#e4e6ef 25%,transparent 25%),linear-gradient(-45deg,#e4e6ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e6ef 75%),linear-gradient(-45deg,transparent 75%,#e4e6ef 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; }

/* ---------- New: staff page ---------- */
.staff { max-width: 960px; margin: 0 auto; padding: 14px 16px 40px; display: grid; gap: 18px; align-content: start; }
.staff h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.staff p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.facts > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.facts dt { font-size: var(--fs-xs); color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.staff section { display: grid; gap: 10px; align-content: start; }
.cover-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.cover-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.cover-card h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.cover-card img { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); }
.cover-card .group { flex-direction: column; align-items: stretch; }
.side-block { display: grid; gap: 10px; align-content: start; min-width: 0; }
.side-block + .side-block { border-top: 1px solid var(--line); padding-top: 12px; }
.side-block h4 { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.staff .side-original { color: var(--ink); background: var(--surface-2); border-radius: 10px; padding: 8px 12px; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.file-list .fname { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.file-list .fsize { color: var(--muted); font-size: var(--fs-xs); }
.bulk-body { display: grid; gap: 12px; align-content: start; }
.bulk-body h3 { margin: 4px 0 0; font-size: var(--fs-md); font-weight: 600; }
.bulk-body .chip { justify-self: start; }
.file-list b.num { font-size: var(--fs-md); }
.names-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 4px 16px; max-height: 420px; overflow: auto; }
.names-list li { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); min-width: 0; }
.names-list .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.names-list .sz { color: var(--muted); }
.names-list .no { color: var(--muted); min-width: 3ch; text-align: right; }

/* ---------- New: "Your design on more gifts" (after Done, before the check dialog) ---------- */
.btn.big { height: 48px; font-size: var(--fs-md); }
.gifts-sheet { display: flex; flex-direction: column; gap: 10px; overflow: hidden; max-height: 94%; padding-bottom: 0; }
.gifts-sheet header { flex: none; }
.gifts-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; gap: 12px; align-content: start; padding-bottom: 6px; }
.gifts-intro { margin: 0; }
.gifts-foot { flex: none; display: grid; gap: 8px; padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
.gift-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gift-card { border: 2px solid var(--line); border-radius: 14px; background: var(--surface); padding: 8px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.gift-card.on { border-color: var(--accent); background: var(--accent-soft); }
.gift-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.gift-card p { margin: 0; }
.gift-title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gift-price { font-size: var(--fs-sm); color: var(--muted); }
.gift-add { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: var(--fs-md); cursor: pointer; }
.gift-add input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.gift-size select { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 0 8px; font-size: var(--fs-sm); }
.gift-card .btn { min-height: 44px; height: auto; padding-block: 6px; text-align: center; }
.gift-card.loading .gift-img, .gift-line { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.gift-line { height: 14px; border-radius: 7px; } .gift-line.short { width: 60%; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.order-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; min-width: 0; min-height: 44px; }
.order-list img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); flex: none; margin-left: -4px; }
.order-list .ol-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: var(--fs-sm); }
.order-list .ol-note { color: var(--muted); font-size: var(--fs-xs); flex: none; }
@media (min-width: 560px) { .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .gifts-sheet { width: min(900px, calc(100% - 48px)); } }

/* Adjust: the full editor of one gift, in a frame over the page. In the frame itself the bulk switch and the saved-design banner are hidden. */
.adjust-layer { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; }
.adjust-layer header { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.adjust-layer header b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }
.adjust-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--bg); }
.adjust-wait { position: absolute; left: 16px; right: 16px; top: 72px; z-index: 2; margin: 0; padding: 10px 14px; text-align: center; background: var(--warn-bg); color: var(--warn); border-radius: 12px; font-size: var(--fs-sm); }
body.adjusting #modeBar, body.adjusting #draftBanner { display: none !important; }
body.adjusting header.top h1 { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* In the layer over the store's product page (embed mode): the question "Leave without saving your design?" */
.leave-sheet .group .btn { flex: 1 1 140px; }
@media (max-width: 959px) { body.embedded header.top h1 { font-size: var(--fs-lg); } }      /* the header also holds Close, so the title is a little smaller on a phone */
@media (min-width: 960px) { .leave-sheet { width: min(460px, calc(100% - 48px)); } }

/* ---------- New: the "Upload once" page (gifts.html) ---------- */
.up { max-width: 980px; margin: 0 auto; padding: 18px 16px 48px; display: grid; gap: 16px; align-content: start; }
.up h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; text-wrap: balance; }
.up-lead { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.picker { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 180px; padding: 20px; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); text-align: center; cursor: pointer; font-weight: 600; font-size: var(--fs-lg); }
.picker:focus-within, .picker.over { border-style: solid; outline: 3px solid var(--accent); outline-offset: 2px; }
.picker svg.i { width: 44px; height: 44px; }
.picker small { font-weight: 400; font-size: var(--fs-sm); color: var(--muted); }
.up-mine { display: flex; align-items: center; gap: 12px; }
.up-mine img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: #fff; flex: none; }
.up-mine p { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.up-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 900px) { .up .gift-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .up h1 { font-size: 2.25rem; } }