:root {
  --green: #2f7a3a;
  --green-dark: #1f5527;
  --grass: #6cbf6c;
  --sky: #e8f3ec;
  --ink: #1a2419;
  --paper: #fbfaf5;
  --line: #d6d3c4;
  --accent: #d94b2b;
  --shadow: 0 2px 10px rgba(0,0,0,.08);
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
a { color: var(--green-dark); }

.site-header { display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 1.5rem; background: var(--green); color: #fff; box-shadow: var(--shadow); }
.site-header--manager { background: #1a4a8a; }
.btn.danger { background: #c0392b; color: #fff; border-color: #a93226; }
.btn.danger:hover { background: #a93226; }
.site-header a { color:#fff; text-decoration:none; margin-left: 1.2rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.15rem; margin:0; }
.brand-mark { width:22px; height:22px; background:#fff; border-radius:3px;
  box-shadow: inset 0 0 0 3px var(--green); position:relative; }
.brand-mark::after { content:""; position:absolute; left:9px; top:22px; width:4px; height:10px;
  background:#fff; box-shadow: inset 0 0 0 1px var(--green); }
nav a:hover { text-decoration: underline; }

/* Nav dropdowns */
.nav-drop { position: relative; display: inline-block; margin-left: 1.2rem;
  padding-bottom: .6rem; }
.nav-drop-label { color: #fff; cursor: default; user-select: none; font: inherit;
  white-space: nowrap; }
.nav-drop-label::after { content: ' ▾'; font-size: .7em; opacity: .75; }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: 0;
  background: var(--green-dark); border-radius: 5px; min-width: 170px;
  padding: .3rem 0; z-index: 200; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; color: #fff; text-decoration: none;
  padding: .45rem .9rem; margin: 0; white-space: nowrap; font-size: .92rem; }
.nav-drop-menu a:hover { background: rgba(255,255,255,.15); text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 1.8rem 1.5rem 3rem; }
.site-footer { text-align:center; color:#777; padding: 2rem 1rem; font-size:.9rem; }
.site-footer-copy { font-size:.72rem; color:#aaa; margin-top:.25rem; }

h1, h2, h3 { color: var(--green-dark); margin-top: 0; }
h1 { font-size: 2rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.btn, button {
  display:inline-block; padding: .55rem 1.1rem; border-radius: var(--radius);
  background: var(--green); color:#fff; border:0; cursor:pointer; font-size:1rem;
  text-decoration:none; font-weight:600;
}
.btn:hover, button:hover { background: var(--green-dark); }
.btn.secondary { background:#fff; color: var(--green-dark); border:1px solid var(--green); }
.btn.accent    { background: var(--accent); }
.btn.small     { padding:.3rem .7rem; font-size:.85rem; }
.btn[disabled], button[disabled] { background:#aaa; cursor:not-allowed; }

input[type=text], input[type=email], input[type=password],
input[type=number], textarea, select {
  width:100%; padding:.55rem .7rem; border:1px solid var(--line);
  border-radius: var(--radius); background:#fff; font-size:1rem; font-family:inherit;
}
label { display:block; margin: .8rem 0 .25rem; font-weight:600; font-size:.92rem; }
.field { margin-bottom: 1rem; }

/* Password show/hide toggle */
.pw-wrap { position:relative; display:block; }
.pw-wrap input[type=password],
.pw-wrap input[type=text] { padding-right: 2.4rem; width: 100%; box-sizing: border-box; }
.pw-toggle {
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:.25rem; cursor:pointer;
  color:#777; line-height:1; display:flex; align-items:center;
}
.pw-toggle:hover { color:#333; }
.pw-toggle--on { color: var(--green, #2d5a1b); }
.muted { color:#777; font-size:.9rem; }
.pb-spinner {
  display:inline-block; width:1.1em; height:1.1em;
  border:3px solid #ccc; border-top-color: var(--green-dark, #2d5a1b);
  border-radius:50%; animation: pb-spin .8s linear infinite;
  vertical-align:middle; flex-shrink:0;
}
@keyframes pb-spin { to { transform: rotate(360deg); } }
.pb-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.pb-modal-box {
  background: #fff; padding: 1.6rem 2.2rem; border-radius: var(--radius, 8px);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); text-align: center; max-width: 90vw;
}
.pb-modal-box p { margin: 0; color: #444; }
.pb-spinner-lg { width: 2.4em; height: 2.4em; border-width: 4px; }
.flash { padding:.7rem 1rem; border-radius: var(--radius); margin-bottom:1rem; }
.flash.ok    { background:#e3f3e1; color: var(--green-dark); }
.flash.err   { background:#fbe1dc; color: #8a2e1a; }
.flash.warn  { background:#fff8e1; color: #7a5200; border-left:3px solid #f9a825; }

.grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.1rem;
}
.poster-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:.6rem; text-align:center; box-shadow: var(--shadow); }
.poster-card img { width:150px; height:150px; object-fit:contain; background:#f4f2ea; border-radius:6px; }
.poster-card .name { font-weight:600; margin:.5rem 0 .15rem; font-size:.92rem; }
.poster-card .meta { font-size:.78rem; color:#777; }
.poster-card .actions { margin-top:.5rem; display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap; }

.category-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin: 1rem 0 1.5rem; }
.category-pills a { background:#fff; border:1px solid var(--green); color:var(--green-dark);
  padding:.4rem .9rem; border-radius:999px; text-decoration:none; font-size:.92rem; }
.category-pills a:hover, .category-pills a.active { background: var(--green); color:#fff; }

table { width:100%; border-collapse: collapse; background:#fff; box-shadow: var(--shadow);
  border-radius: var(--radius); overflow:hidden; }
th, td { padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; }
th { background: var(--sky); color: var(--green-dark); }

.toolbar { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.toolbar .spacer { flex:1; }

/* Order cart inline next to thumbnails */
.batch-control { display:flex; align-items:center; gap:.25rem; margin-top:.4rem; justify-content:center; }
.batch-control button { padding:.15rem .55rem; font-size:1rem; }
.batch-control input { width:48px; text-align:center; padding:.2rem; }

/* Home page hero */
.hero {
  background: linear-gradient(160deg, var(--sky) 0%, #fff 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1.5rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.hero h1 { margin-top:0; font-size: 2.3rem; }
.hero p { font-size: 1.05rem; }

/* Poster marquee */
.poster-marquee {
  display: flex; align-items: stretch;
  height: 120px; background: var(--grass);
  border-radius: var(--radius); overflow: hidden;
}
.mrq-viewport {
  flex: 1; overflow: hidden; height: 120px; cursor: default;
}
.mrq-track {
  display: flex; align-items: center;
  height: 100%; will-change: transform; user-select: none;
}
.mrq-item {
  flex-shrink: 0;
  width: 108px; height: 108px; margin: 0 6px;
  border-radius: 7px; overflow: hidden; background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.mrq-item img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; pointer-events: none;
}
.mrq-btn {
  flex-shrink: 0; width: 36px; height: 120px;
  background: rgba(0,0,0,.18); border: 0; color: #fff;
  font-size: 1.2rem; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0; transition: background .15s;
}
.mrq-btn:hover { background: rgba(0,0,0,.38); }
.mrq-left  { border-radius: var(--radius) 0 0 var(--radius); }
.mrq-right { border-radius: 0 var(--radius) var(--radius) 0; }

/* WackySlider CAPTCHA */
.wacky {
  position: relative; height: 90px; background: linear-gradient(#bfe6ff, #e8f3ec 60%, var(--grass) 60%);
  border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; user-select:none;
  margin: 1rem 0;
}
.wacky .lawn-zone {
  position:absolute; right:6px; top:55%; bottom:6px; width:90px;
  border:2px dashed var(--green-dark); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--green-dark);
  font-size:.78rem; text-align:center; padding:.2rem;
}
.wacky .sign {
  position:absolute; left:6px; top:18px; width:62px; height:62px; cursor:grab;
  touch-action: none;
}
.wacky .sign.dragging { cursor:grabbing; }
.wacky.solved { background: linear-gradient(#bfe6ff, var(--grass) 60%); }
.wacky .hint { position:absolute; left:80px; top:8px; font-size:.78rem; color:#555; }
.wacky.solved .hint { color: var(--green-dark); font-weight:600; }

/* admin layout */
.admin-grid { display:grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-nav { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:.8rem; }
.admin-nav a { display:block; padding:.4rem .6rem; border-radius:6px; text-decoration:none; color: var(--ink); }
.admin-nav a.active, .admin-nav a:hover { background: var(--sky); color: var(--green-dark); }

.tag { display:inline-block; background: var(--sky); color: var(--green-dark);
  padding:.15rem .55rem; border-radius:999px; font-size:.78rem; margin: 0 .2rem .2rem 0; }

.summary-box { background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:1rem 1.2rem; margin: 1rem 0; }
.summary-box .row { display:flex; justify-content:space-between; padding: .2rem 0; }
.summary-box .row.total { font-weight:700; border-top:1px solid var(--line); margin-top:.3rem; padding-top:.5rem; }

/* Packing slip */
.ps-toolbar { max-width: 7.5in; margin: 1rem auto; display:flex; gap:.5rem; }
.btn.secondary { background:#eee; color: var(--ink); }
.ps-sheet {
  max-width: 7.5in; margin: 0 auto 2rem; background:#fff;
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 0.6in 0.6in;
}
.ps-head { display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom: 2px solid var(--ink); padding-bottom: .6rem; margin-bottom: 1rem; }
.ps-head h1 { margin: 0; font-size: 1.4rem; }
.ps-order div { font-size: .9rem; }
.ps-parties { display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1rem 0; }
.ps-parties h2, .ps-notes h2 { font-size: .85rem; text-transform: uppercase;
  letter-spacing: .05em; color: #555; margin: 0 0 .3rem; }
.ps-notes { margin: 1rem 0; }
.ps-items { width:100%; border-collapse: collapse; margin-top: 1rem; }
.ps-items th, .ps-items td { padding: .5rem .4rem; border-bottom:1px solid var(--line);
  vertical-align: middle; text-align:left; }
.ps-items th { font-size:.8rem; text-transform: uppercase; letter-spacing: .04em; color:#555; }
.ps-thumb { width: 70px; }
.ps-thumb img { width: 60px; height: 60px; object-fit: contain;
  background:#f4f2ea; border-radius: 4px; }
.ps-foot { display:flex; gap: 2rem; margin-top: 2.5rem; }
.ps-sign { flex:1; }
.ps-sign-line { border-bottom:1px solid var(--ink); height: 1.6rem; margin-bottom: .25rem; }

@media print {
  body.packing-slip { background:#fff; }
  .no-print, .site-header, .container > h1, .container > p { display: none !important; }
  .ps-sheet { border: none; padding: 0; margin: 0; max-width: none; box-shadow: none; }
  @page { size: letter; margin: 0.5in; }
}

/* ── Multi-size batch pickers (poster cards) ─────────────────────────────── */
.size-rows { border:1px solid var(--line); border-radius:var(--radius);
             overflow:hidden; margin:.5rem 0 .25rem; }
.size-row  { display:flex; align-items:center; gap:.3rem; padding:.3rem .4rem;
             border-bottom:1px solid var(--line); font-size:.79rem; }
.size-row:last-child { border-bottom:0; }
.size-row .sr-label { flex:1; text-align:left; line-height:1.25; }
.size-row .sr-label strong { display:block; font-size:.82rem; }
.size-row .sr-label .muted { font-size:.71rem; }
.size-row .batch-control { margin:0; flex-shrink:0; }
.size-row .batch-control button { padding:.1rem .35rem; font-size:.85rem; }
.size-row .batch-control input  { width:2.2rem; font-size:.82rem; text-align:center; padding:.1rem .2rem; }
.size-row .sr-price { color:#777; font-size:.71rem; white-space:nowrap; }

/* ── Size-table + proportion demos (sizes.php) ──────────────────────────────── */
.ss-sizes-wrap   { display:flex; gap:2.5rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:.25rem; }
.ss-sizes-demos  { display:flex; flex-direction:column; gap:.9rem; padding-top:.25rem; }
.ss-ratio-demo   { display:flex; align-items:center; gap:.65rem; }
.ss-ratio-box    { background:#ede9e1; border:1px solid #ccc5b5; border-radius:3px;
                   overflow:hidden; flex-shrink:0; display:flex; align-items:center;
                   justify-content:center; }
.ss-ratio-box img { width:100%; height:100%; object-fit:cover; display:block; }
.ss-ratio-label  { font-size:.8rem; color:#666; font-family:monospace; white-space:nowrap; }

/* ── Sheet-combination visualizer (sizes.php) ─────────────────────────────── */
.sheet-combos  { display:flex; flex-wrap:wrap; gap:2rem; margin:1.5rem 0; }
.sheet-diagram { text-align:center; }
.sheet-diagram figcaption { font-size:.78rem; color:#555; margin-top:.45rem;
                             line-height:1.35; max-width:110px; }
.sheet { position:relative; display:inline-block;
         background:#f9f7f0; border:2px solid #555; vertical-align:top; }
.sign-xs, .sign-s, .sign-m, .sign-l,
.sign-sq12, .sign-sq16, .sign-sq24, .sign-sq48,
.sign-l24, .sign-l16, .sign-8x12 { position:absolute; box-sizing:border-box;
                                    border:1px solid rgba(255,255,255,.65); }
.sign-8x12 { border-color:rgba(0,0,0,.55); }
.sign-xs   { background:#b57bee; }
.sign-s    { background:#6cbf6c; }
.sign-m    { background:#5b9fd6; }
.sign-l    { background:#e8a84c; }
.sign-sq12 { background:#c47a5a; }
.sign-sq16 { background:#8da84c; }
.sign-sq24 { background:#e85c8a; }
.sign-sq48 { background:#4ecac9; }
.sign-l24  { background:#d46a3e; }
.sign-8x12 { background:#a07ab5; }
.sign-l16  { background:#c4a235; }
.sign-bumper { background:#e8a020; }
.sheet-legend { display:flex; gap:1.2rem; flex-wrap:wrap; margin:.5rem 0 1.5rem;
                font-size:.85rem; align-items:center; }
.sheet-legend span { display:flex; align-items:center; gap:.35rem; }
.sheet-legend .swatch { display:inline-block; width:14px; height:14px;
                         border-radius:2px; flex-shrink:0; }

/* ---- BatchBuilder ---- */
.bb-reopen { margin:1rem 0 1.5rem; border:1px solid #ddd; border-radius:6px; padding:.4rem .8rem; }
.bb-reopen summary { cursor:pointer; font-weight:600; }
.bb-reopen-form { display:flex; gap:.5rem; max-width:420px; margin-top:.7rem; }
.bb-reopen-form input { flex:1; }

.bb-reopen-trigger { margin: 1rem 0 1.5rem; }

/* ── BatchBuilder: "Open a Saved Sheet" picker modal ──── */
.bb-sheet-modal-box {
  align-items: stretch; text-align: left; max-width: 640px; width: 90vw;
  max-height: 85vh; overflow-y: auto;
}
.bb-sheet-modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.bb-sheet-modal-head h3 { margin:0; }
.bb-modal-close {
  background:none; border:0; color:#777; font-size:1.6rem; line-height:1;
  padding:0 .2rem; cursor:pointer;
}
.bb-modal-close:hover { color:#333; background:none; }
.bb-sheet-pick-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .9rem; margin: .8rem 0;
}
.bb-sheet-pick-card {
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:.6rem; text-align:center; text-decoration:none; color:inherit;
  box-shadow: var(--shadow);
}
.bb-sheet-pick-card:hover { border-color: var(--green); }
.bb-sheet-pick-card img {
  width:100px; height:100px; object-fit:contain; background:#f4f2ea; border-radius:6px;
}
.bb-sheet-pick-ph {
  width:100px; height:100px; display:flex; align-items:center; justify-content:center;
  background:#f4f2ea; border-radius:6px; color:#999; font-size:.8rem;
}
.bb-sheet-pick-name { font-weight:600; font-size:.9rem; }
.bb-sheet-pick-meta { font-size:.78rem; }
body.ss-modal-open { overflow: hidden; }

/* ── PosterBuilder: publish-to-listings panel ─────────── */
.pb-publish-panel {
    flex: 0 1 280px;
    background: #f4f8f2;
    border: 1px solid #c8d9c0;
    border-radius: 8px;
    padding: .9rem 1rem 1rem;
}
.pb-publish-head {
    margin: 0 0 .5rem;
    font-size: 1rem;
    color: var(--green);
}
.pb-publish-hint { margin: 0 0 .7rem; font-size: .83rem; }
.pb-publish-listed {
    font-weight: 600;
    color: #2a6a2a;
    margin: 0 0 .6rem;
}
.pb-publish-form .field { margin-bottom: .6rem; }
.pb-publish-form .field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .2rem;
}
.pb-publish-form .field input[type=text],
.pb-publish-form .field textarea,
.pb-publish-form .field select {
    width: 100%;
    box-sizing: border-box;
    padding: .3rem .45rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: .88rem;
    font-family: inherit;
    background: #fff;
}
.pb-publish-form .field select[multiple] { resize: vertical; }
.pb-publish-form > .btn { margin-top: .3rem; }

.bb-result { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start;
  background:#f7f6f0; border:1px solid #e3e0d4; border-radius:8px; padding:1.2rem; margin-bottom:2rem; }
.bb-result-info { flex:1 1 320px; }
.bb-result-info h2 { margin:.2rem 0; }
.bb-result-info code { background:#fff; padding:.1rem .4rem; border-radius:4px; border:1px solid #ddd; }
.bb-result-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0; }
.bb-result-prev img { width:150px; height:300px; object-fit:contain; background:#fff;
  border:1px solid #ddd; border-radius:4px; }

/* Compact result bar used by PosterBuilder in edit mode */
.bb-result-bar {
  background: #f7f6f0; border: 1px solid #e3e0d4; border-radius: 8px;
  padding: .55rem .9rem; margin-bottom: 1rem;
}
.bb-result-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem;
}
.bb-result-meta {
  flex: 1 1 160px; min-width: 0;
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
}
.bb-result-name {
  font-size: .95rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 260px;
}
.bb-listings-toggle > summary {
  cursor: pointer; font-size: .83rem; color: var(--green-dark);
  border: 1px solid var(--green); border-radius: var(--radius);
  padding: .25rem .65rem; display: inline-block; background: #fff;
  font-weight: 600; list-style: none; user-select: none;
}
.bb-listings-toggle > summary::-webkit-details-marker { display: none; }
.bb-listings-toggle > summary::after  { content: " ▾"; font-size: .65rem; }
.bb-listings-toggle[open] > summary::after { content: " ▴"; }
.bb-listings-toggle > summary:hover { background: var(--sky); }
.bb-listings-body {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: .8rem; margin-top: .3rem; max-width: 380px;
  box-shadow: 0 4px 16px rgba(0,0,0,.11);
}

.bb-templates { display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0 1.5rem; }
.bb-tpl { background:#fff; border:2px solid #ddd; border-radius:8px; padding:.5rem .5rem .3rem;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--ink); }
.bb-tpl:hover { border-color:var(--green); background:#fff; }
.bb-tpl.selected { border-color:var(--green); box-shadow:0 0 0 2px rgba(108,191,108,.35); }
.bb-mini { width:48px; } /* height set inline per template (1px per inch) */
.bb-tpl-cap { font-size:.7rem; color:#555; text-align:center; max-width:90px; line-height:1.2; }
.bb-tpl-ratios { display:block; font-size:.6rem; color:#888; text-align:center; margin-top:.1rem; font-style:italic; }

.bb-help { margin:.2rem 0 1rem; }
.bb-layout { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start; }
.bb-tray { flex:1 1 320px; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:.6rem; max-height:640px; overflow:auto; padding:.4rem; border:1px solid #e3e0d4;
  border-radius:8px; background:#faf9f4; }
.bb-poster { position:relative; border:2px solid transparent; border-radius:6px; background:#fff; padding:.3rem;
  cursor:grab; text-align:center; }
.bb-poster:hover { border-color:#ccc; }
.bb-poster.active { border-color:var(--green); box-shadow:0 0 0 2px rgba(108,191,108,.35); }
.bb-poster.bb-poster-is-fav { border-color:#f5c6d0; }
.bb-poster img { width:100%; height:80px; object-fit:contain; background:#f4f2ea; border-radius:4px; }
.bb-poster-name { display:block; font-size:.68rem; color:#555; margin-top:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-poster-ratio { display:block; font-size:.6rem; color:#111; text-align:center; line-height:1.3; margin-top:.05rem; letter-spacing:.02em; font-weight:600; }
.bb-poster-fav-badge { display:none; position:absolute; top:2px; right:3px; font-size:.7rem; color:#c04060; line-height:1; }
.bb-poster.bb-poster-is-fav .bb-poster-fav-badge { display:block; }
.bb-tray-section-head { grid-column:1/-1; font-size:.7rem; font-weight:600; color:#999;
  padding:.35rem 0 .1rem; border-top:1px solid #e5e0d5; margin-top:.15rem; }

.bb-editor { flex:0 0 auto; position:sticky; top:1rem; }
.bb-sheet { width:280px; background:#fff; border:1px solid #bbb; } /* height set by JS per template */
.bb-sheet-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#888; font-size:.85rem; padding:1rem; margin:0; }
.bb-cell { position:absolute; box-sizing:border-box; border:1px solid rgba(255,255,255,.7);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bb-cell .bb-ph { position:relative; z-index:1; color:rgba(0,0,0,.45); font-size:1.4rem; line-height:1; }
.bb-cell.filled .bb-ph { display:none; }
.bb-cell.bb-blank { background-color:rgba(0,0,0,.07); }
.bb-cell.bb-blank .bb-ph { font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(0,0,0,.3); user-select:none; }
.bb-cell .bb-ph-ratio { position:relative; z-index:1; font-size:.58rem; font-weight:700;
  color:rgba(0,0,0,.38); line-height:1.2; margin-top:.2rem; letter-spacing:.04em; pointer-events:none; }
.bb-cell.filled .bb-ph-ratio,
.bb-cell.bb-blank .bb-ph-ratio { display:none; }

/* Ratio filter pills above the poster tray */
.bb-ratio-pill { font-size:.68rem; padding:.2rem .6rem; border-radius:999px;
  border:1px solid #ccc; background:#f4f2ea; color:#555; cursor:pointer;
  font-weight:700; letter-spacing:.04em; line-height:1.5; transition:background .12s, color .12s; }
.bb-ratio-pill:hover { border-color:#aaa; background:#e8e3d8; }
.bb-ratio-pill.active { background:var(--green); border-color:var(--green); color:#fff; }
.bb-ratio-pill.active:hover { background:#4da34d; border-color:#4da34d; }
.bb-cell.over { outline:3px solid var(--accent); outline-offset:-3px; }

/* Image wrapper is sized/positioned in JS (px, centred on the cell) so it can
   be rotated in 90° steps while still cover-filling the cell with no gaps. */
.bb-cell-imgwrap { position:absolute; top:50%; left:50%; pointer-events:none; }
.bb-cell-img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.bb-cell-img:not([src]) { display:none; }
.bb-cell.filled { background:#fff; }

.bb-rotate {
  position:absolute; top:3px; right:3px; z-index:2;
  width:42px; height:42px; padding:0; border:none; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.25rem; line-height:1;
  cursor:pointer; display:none; align-items:center; justify-content:center;
}
.bb-cell.filled .bb-rotate { display:flex; }
.bb-rotate:hover { background:rgba(0,0,0,.8); }

.bb-savebar { display:flex; flex-direction:column; gap:.6rem; margin-top:.8rem; width:280px; }
.bb-savebar input { width:100%; }
.bb-count { font-size:.8rem; color:#555; }

/* ── PosterBuilder ─────────────────────────────────────────────────────────── */
.pb-size-toolbar {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin: 1rem 0 1.2rem; padding: .6rem .8rem;
  background: #f7f6f0; border: 1px solid var(--line); border-radius: var(--radius);
}
.pb-toolbar-label { font-weight: 600; font-size: .88rem; color: #555; margin-right: .2rem; }
.pb-size-btn {
  background: #fff; border: 2px solid #ddd; border-radius: 6px;
  padding: .3rem .75rem; font-size: .82rem; font-weight: 600; color: var(--ink);
  cursor: pointer; line-height: 1.3; white-space: nowrap;
}
.pb-size-btn:hover    { border-color: var(--green); background: #fff; }
.pb-size-btn.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(108,191,108,.35); background: #fff; }

.pb-size-toolbar-grouped { align-items: flex-start; }
.pb-size-picker { display: flex; flex-direction: column; gap: .5rem; }
.pb-size-step { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pb-size-step-scale::before,
.pb-size-step-orientation::before {
  content: '↳'; color: #999; font-size: .85rem; margin-right: .1rem;
}
.pb-size-pill {
  background: #fff; border: 2px solid #ddd; border-radius: 999px;
  padding: .28rem .8rem; font-size: .8rem; font-weight: 600; color: var(--ink);
  cursor: pointer; line-height: 1.3; white-space: nowrap;
}
.pb-size-pill:hover    { border-color: var(--green); }
.pb-size-pill.selected { border-color: var(--green); background: var(--green); color: #fff; }

.pb-editor-wrap {
  display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: flex-start;
  margin-bottom: 2rem;
}

/* Canvas column */
.pb-canvas-outer { flex: 0 0 auto; position: sticky; top: 1rem; }
.pb-canvas-tip   { margin: .35rem 0 0; font-size: .78rem; }

.pb-canvas {
  position: relative; overflow: hidden;
  border: 2px solid #888; border-radius: 4px;
  /* dimensions set by JS */
}
.pb-half {
  position: absolute;
  display: flex; align-items: flex-start; gap: .3rem;
  padding: .3rem .4rem;
}
.pb-half-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255,255,255,.7); pointer-events: none; user-select: none;
}
.pb-color-swatch {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.6);
  cursor: pointer; flex-shrink: 0; outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.pb-color-swatch:hover { transform: scale(1.15); }
.pb-color-hidden {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

/* Sidebar column */
.pb-sidebar { flex: 1 1 360px; }
.pb-sidebar-head {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem;
}

/* Block item */
.pb-block-item {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .7rem; margin-bottom: .55rem;
}
.pb-bi-hdr {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem;
}
.pb-bi-num {
  flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pb-bi-text {
  flex: 1; padding: .35rem .55rem; border: 1px solid var(--line);
  border-radius: 6px; font-size: .92rem; font-family: inherit;
}
.pb-bi-btns { display: flex; gap: .25rem; flex-shrink: 0; }

.pb-bi-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  margin-top: .35rem;
}
.pb-lbl { font-size: .78rem; font-weight: 600; color: #555; flex-shrink: 0; }
.pb-vert-lbl { display: flex; align-items: center; gap: .2rem; cursor: pointer; }

.pb-bi-half, .pb-bi-font {
  padding: .25rem .4rem; font-size: .8rem; border: 1px solid var(--line);
  border-radius: 6px; background: #fff;
}
.pb-bi-width { flex: 1 1 80px; min-width: 60px; cursor: pointer; accent-color: var(--green); }
.pb-bi-color { width: 2rem; height: 1.6rem; border: 1px solid var(--line); border-radius: 4px;
               cursor: pointer; padding: 0; background: none; }
.pb-bi-vert  { accent-color: var(--green); cursor: pointer; }

/* Bring to Front / Send to Back — always visible on every block's sidebar panel */
.pb-layer-btns {
  display: flex; gap: .4rem; margin-top: .45rem; padding-top: .4rem;
  border-top: 1px solid var(--line);
}
.pb-layer-btns .btn { flex: 1; font-size: .78rem; }

/* Split-half toggle in canvas overlay */
.pb-split-toggle {
  display: flex; align-items: center; gap: .18rem;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.pb-split-toggle input[type=checkbox] {
  width: 11px; height: 11px; margin: 0; cursor: pointer;
  accent-color: #111;
}
.pb-split-icon {
  font-size: .65rem; color: #111; font-weight: 700; line-height: 1;
}

/* Font picker dropdown */
.pb-fp-row {
  padding: .3rem 0 .25rem; margin: .25rem 0 .1rem;
}
.pb-fp-dropdown { position: relative; display: block; }
.pb-fp-trigger {
  width: 100%; text-align: left; padding: .28rem .55rem;
  font-size: .9rem; line-height: 1.3;
  border: 1.5px solid var(--line); border-radius: 5px;
  background: #fff; color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  white-space: nowrap; overflow: hidden;
  transition: border-color .12s, background .12s;
}
.pb-fp-trigger:hover { border-color: var(--green); background: #f4f9f4; }
.pb-fp-trigger-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.pb-fp-caret { font-size: .6rem; color: #888; flex-shrink: 0; margin-left: .35rem; }
.pb-fp-list {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 999;
  background: #fff; border: 1.5px solid var(--green); border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
  list-style: none; margin: 0; padding: .25rem 0;
  max-height: 260px; overflow-y: auto;
}
.pb-fp-opt {
  padding: .3rem .7rem; font-size: .9rem; line-height: 1.45;
  cursor: pointer; white-space: nowrap;
}
.pb-fp-opt:hover { background: #f0f7f0; color: var(--green); }
.pb-fp-opt.pb-fp-opt-active { background: var(--green); color: #fff; }

/* Style (R / B / I / BI) toggle buttons */
.pb-style-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.pb-style-btn {
  min-width: 2rem; padding: .2rem .5rem;
  border: 1px solid var(--line); border-radius: 5px;
  background: #fff; color: var(--ink);
  font-size: .85rem; line-height: 1.4; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pb-style-btn:hover { border-color: var(--green); background: #f4f9f4; }
.pb-style-btn.pb-style-active {
  background: var(--green); color: #fff; border-color: var(--green);
}

.pb-add-btn { margin-top: .6rem; width: 100%; }

.pb-savebar {
  display: flex; flex-direction: column; gap: .6rem;
  margin-top: 1.2rem; padding-top: .8rem; padding-bottom: .4rem;
  border-top: 2px solid var(--green);
  position: sticky; bottom: 0;
  background: #fff; z-index: 10;
  box-shadow: 0 -3px 10px rgba(0,0,0,.07);
}
.pb-savebar input { width: 100%; }
.pb-savebar-dirty { font-size: .78rem; color: #b36000; font-style: italic; }
.pb-save-dirty { outline: 2px solid #e07000; outline-offset: 2px; }

.pb-canvas-block { pointer-events: none; user-select: none; line-height: 1; }

/* ── PosterBuilder v2: free-form block handles ─────────────────────────────── */

/* Interactive block on the canvas */
.pb-block {
    box-sizing: border-box;
    position: absolute;
    overflow: visible;
    pointer-events: auto;
    touch-action: none;
}
.pb-block-sel {
    outline: 2px dashed rgba(255,255,255,.85);
    outline-offset: 8px;
}
.pb-block-text { display: block; pointer-events: none; }

/* Generic handle style */
.pb-handle {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #444;
    box-shadow: 0 1px 5px rgba(0,0,0,.45);
    pointer-events: all;
    touch-action: none;
    z-index: 10;
}

/* Corner resize handles — sit at the four corners of the block div */
.pb-resize-nw { top: 0; left: 0;  transform: translate(-50%,-50%); cursor: nw-resize; }
.pb-resize-ne { top: 0; right: 0; transform: translate(50%,-50%);  cursor: ne-resize; }
.pb-resize-sw { bottom: 0; left: 0;  transform: translate(-50%,50%);  cursor: sw-resize; }
.pb-resize-se { bottom: 0; right: 0; transform: translate(50%,50%);   cursor: se-resize; }

/* Rotation stem — thin line connecting block top to the rotate handle */
.pb-rotate-stem {
    position: absolute;
    top: -44px; left: calc(50% - 1px);
    width: 2px; height: 44px;
    background: rgba(255,255,255,.7);
    pointer-events: none;
}

/* Rotation handle — green dot sitting above the stem */
.pb-rotate-handle {
    position: absolute;
    top: -58px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    background: var(--green);
    border-color: #fff;
    cursor: grab;
    z-index: 11;
}
.pb-rotate-handle:active { cursor: grabbing; }

/* Sidebar: active (selected) block item */
.pb-item-active {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(108,191,108,.3);
}

/* Sidebar position/rotation readout row */
.pb-bi-pos-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
    margin-top: .3rem; padding-top: .3rem;
    border-top: 1px solid var(--line);
    font-size: .78rem; color: #666;
}
.pb-pos-pill {
    display: inline-flex; align-items: center; gap: .15rem;
    white-space: nowrap;
}
.pb-pos-pill strong { color: var(--ink); min-width: 1.6rem; text-align: right; }

/* DPI warning shown below a low-resolution image block in the sidebar */
.pb-img-note {
  margin:.35rem 0 0; padding:.3rem .5rem; border-radius:4px; font-size:.78rem;
  background:#e8f4fd; color:#1a4a6e; border:1px solid #b8d9f0;
}
.pb-dpi-warn {
    font-size: .78rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 4px;
    padding: .2rem .4rem;
    margin-top: .3rem;
    line-height: 1.35;
}

/* Background image overlay container — kept empty; bg renders inside #pb-blocks-canvas */
#pb-bg-wrap {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* Image block element on canvas (background image and image blocks both use this) */
.pb-img-block {
    box-sizing: border-box;
    position: absolute;
    overflow: visible;
    pointer-events: auto;
    touch-action: none;
}
.pb-img-block img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Position/rotation readout in bg section (hidden when no bg image) */
#pb-bg-pos {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem .6rem;
    margin-top: .4rem; padding-top: .4rem;
    border-top: 1px solid var(--line);
    font-size: .78rem; color: #666;
}

/* Image block section heading row */
.pb-img-section-head {
    display: flex; align-items: baseline; gap: .6rem;
    margin: .8rem 0 .4rem;
}

/* Sidebar: background image upload section */
.pb-bg-section {
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    padding: .55rem .7rem; margin-bottom: .8rem;
}
.pb-bg-head {
    font-weight: 600; font-size: .85rem; margin-bottom: .45rem;
    display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}
.pb-bg-hint { font-weight: 400; font-size: .78rem; }
.pb-bg-row  { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pb-bg-choose-lbl {
    cursor: pointer; white-space: nowrap;
}
.pb-bg-filename {
    font-size: .8rem; max-width: 14rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* ── Submit-to-admin modal ──────────────────────────────────────────────── */
.ss-modal-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
body.ss-modal-open { overflow:hidden; }
.ss-modal {
  background:#fff; border-radius:var(--radius); padding:1.5rem 1.75rem;
  max-width:560px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
.ss-email-preview {
  background:#f5f5f0; border:1px solid #ddd; border-radius:4px;
  padding:.75rem 1rem; font-size:.82rem; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
  max-height:260px; overflow-y:auto; margin:.5rem 0 0;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
}
.ss-copy-confirm { color:var(--green); margin:.4rem 0 0; font-size:.88rem; }

/* ── Popular badge ──────────────────────────────────────────────────────── */
.poster-card { position:relative; }
.ss-popular-badge {
  position:absolute; top:.45rem; left:.45rem; z-index:1;
  background:#2d6a2d; color:#fff; font-size:.7rem; font-weight:700;
  padding:.18em .55em; border-radius:3px; letter-spacing:.02em;
  pointer-events:none;
}

/* ── Favorites ──────────────────────────────────────────────────────────── */
.ss-fav-btn { background:#fff; color:#888; border:1px solid #ddd; font-size:.78rem;
  padding:.25rem .6rem; line-height:1.2; }
.ss-fav-btn:hover { background:#fff4f4; border-color:#e09090; color:#b02020; }
.ss-fav-btn.ss-fav-active { background:#fff0f0; border-color:#d04040; color:#c02020; }
.ss-fav-icon { font-size:1rem; vertical-align:middle; }

/* Favourite button positioned above the thumbnail */
.ss-fav-btn--top {
  display: block; width: 100%; margin-bottom: .45rem;
  background: #fff; color: #222;
  border: 1.5px solid #111; border-radius: 999px;
  font-size: .82rem; padding: .3rem .7rem; line-height: 1.3;
  font-weight: 600; cursor: pointer;
}
.ss-fav-btn--top:hover { background: #fff4f4; border-color: #c02020; color: #b02020; }
.ss-fav-btn--top.ss-fav-active { background: #fff0f0; border-color: #c02020; color: #c02020; }
.ss-fav-empty { margin: .25rem 0 0; font-style: italic; }

/* ── Request-printing callout ───────────────────────────────────────────── */
.ss-print-cta {
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap; background:#e3f3e1; border:1px solid var(--green);
  border-radius:var(--radius); padding:.85rem 1.2rem; margin-bottom:1.5rem;
}
.ss-print-cta p { margin:0; font-size:.95rem; color: var(--green-dark); }

/* ── BatchBuilder tray: favorites-only state ────────────────────────────── */
.bb-tray-header { font-size:.78rem; color:#666; margin:.4rem 0 .2rem; font-weight:600; }
.bb-tray-empty  { grid-column:1/-1; padding:1.5rem .5rem; text-align:center;
  color:#777; font-size:.88rem; line-height:1.7; }
.ss-poster-ratio { font-size:.72rem; color:#aaa; margin:.05rem 0 .3rem; text-align:center; }

/* ── BatchBuilder: sequence-design tray ─────────────────────────────────── */
.bb-seq-section { margin-bottom:.75rem; }
.bb-seq-tray    { display:flex; flex-direction:column; gap:.35rem; }
.bb-seq-card {
  border:1.5px solid var(--line); border-radius:6px;
  padding:.4rem .5rem; cursor:pointer; background:#fff;
  transition:border-color .15s, opacity .2s;
  user-select:none;
}
.bb-seq-card:hover:not(.bb-seq-dim) { border-color:var(--green); }
.bb-seq-card:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.bb-seq-card.bb-seq-dim   { opacity:.32; cursor:not-allowed; pointer-events:none; }
.bb-seq-thumbs { display:flex; gap:2px; margin-bottom:.25rem; flex-wrap:nowrap; }
.bb-seq-thumbs img {
  height:30px; width:auto; max-width:54px;
  object-fit:contain; border-radius:2px; background:#f4f2ea; flex-shrink:0;
}
.bb-seq-thumb-ph {
  width:40px; height:30px; background:#eee; display:flex;
  align-items:center; justify-content:center;
  font-size:.65rem; color:#aaa; border-radius:2px; flex-shrink:0;
}
.bb-seq-label { font-size:.79rem; font-weight:600; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bb-seq-meta  { font-size:.7rem; color:#888; }
.bb-seq-hint  { font-size:.72rem !important; color:#aaa !important; margin:.1rem 0 .5rem; }

/* ── Sign Sequence cards (Browse grid) ──────────────────────────────────── */
.ss-seq-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem; text-align:center; box-shadow:var(--shadow); position:relative;
}
.ss-seq-badge {
  display:inline-block; margin-top:.55rem;
  background:var(--green-dark); color:#fff; font-size:.68rem; font-weight:700;
  padding:.18em .55em; border-radius:3px; letter-spacing:.02em;
  pointer-events:none;
}
.ss-seq-card .name  { font-weight:600; margin:.5rem 0 .1rem; font-size:.92rem; }
.ss-seq-card .name a { color:inherit; text-decoration:none; }
.ss-seq-card .name a:hover { text-decoration:underline; }
.ss-seq-card .meta  { font-size:.78rem; color:#777; margin-bottom:.5rem; }
.ss-seq-card .actions { display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap; }

/* ── Poker-hand fan ──────────────────────────────────────────────────────── */
.ss-seq-fan-wrap {
  position:relative;
  width:100%;
  height:130px;
  margin-bottom:.65rem;
  cursor:pointer;
  outline:none;
}
.ss-seq-fan-wrap:focus-visible { outline:2px solid var(--green); border-radius:4px; }
.ss-seq-fan-card {
  position:absolute;
  bottom:0;
  left:50%;
  width:114px;
  height:76px;
  margin-left:-57px;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12);
  transform-origin:bottom center;
  transition:transform .25s ease, box-shadow .2s;
}
.ss-seq-fan-card img {
  width:100%; height:100%; object-fit:cover;
  display:block; background:#f4f2ea; pointer-events:none;
}
.ss-seq-fan-empty {
  display:flex; align-items:center; justify-content:center;
  background:#f4f2ea; font-size:.75rem; color:#bbb;
}
.ss-seq-fan-card .bb-seq-thumb-ph { width:100%; height:100%; }
/* resting fan */
.ss-seq-fan-card:nth-child(1) { z-index:5; transform:rotate(0deg); }
.ss-seq-fan-card:nth-child(2) { z-index:4; transform:rotate(11deg); }
.ss-seq-fan-card:nth-child(3) { z-index:3; transform:rotate(21deg); }
.ss-seq-fan-card:nth-child(4) { z-index:2; transform:rotate(30deg); }
.ss-seq-fan-card:nth-child(5) { z-index:1; transform:rotate(38deg); }
/* hover: spread wider so all cards become more visible */
.ss-seq-fan-wrap:hover .ss-seq-fan-card:nth-child(1),
.ss-seq-fan-wrap:focus-visible .ss-seq-fan-card:nth-child(1) { transform:rotate(-7deg); }
.ss-seq-fan-wrap:hover .ss-seq-fan-card:nth-child(2),
.ss-seq-fan-wrap:focus-visible .ss-seq-fan-card:nth-child(2) { transform:rotate(4deg); }
.ss-seq-fan-wrap:hover .ss-seq-fan-card:nth-child(3),
.ss-seq-fan-wrap:focus-visible .ss-seq-fan-card:nth-child(3) { transform:rotate(16deg); }
.ss-seq-fan-wrap:hover .ss-seq-fan-card:nth-child(4),
.ss-seq-fan-wrap:focus-visible .ss-seq-fan-card:nth-child(4) { transform:rotate(28deg); }
.ss-seq-fan-wrap:hover .ss-seq-fan-card:nth-child(5),
.ss-seq-fan-wrap:focus-visible .ss-seq-fan-card:nth-child(5) { transform:rotate(39deg); }
.ss-seq-fan-wrap:hover .ss-seq-fan-card { box-shadow:0 4px 14px rgba(0,0,0,.35); }

/* ── Slideshow modal ────────────────────────────────────────────────────── */
.ss-slide-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.88);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.8rem; padding:1rem;
}
.ss-slide-close {
  position:absolute; top:.8rem; right:1rem;
  background:transparent; border:none; color:#fff;
  font-size:1.6rem; cursor:pointer; line-height:1;
  padding:.15em .4em; border-radius:4px;
}
.ss-slide-close:hover { background:rgba(255,255,255,.15); }
.ss-slide-img {
  max-width:90vw; max-height:68vh;
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  object-fit:contain; display:block;
}
.ss-slide-caption { text-align:center; }
.ss-slide-title { color:#fff; font-size:1rem; font-weight:600; margin-bottom:.4rem; }
.ss-slide-rdots { display:flex; gap:6px; align-items:center; justify-content:center; }
.ss-slide-rdot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.35); cursor:pointer;
  transition:background .15s, transform .15s;
}
.ss-slide-rdot.active { background:#fff; transform:scale(1.25); }
.ss-slide-controls { display:flex; gap:.6rem; align-items:center; }
.ss-slide-btn {
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:5px;
  padding:.35em .8em; cursor:pointer; font-size:1rem;
  transition:background .15s;
}
.ss-slide-btn:hover { background:rgba(255,255,255,.28); }
.ss-slide-counter { color:rgba(255,255,255,.65); font-size:.88rem; min-width:3rem; text-align:center; }

/* ── Sequence builder (admin) ────────────────────────────────────────────── */
.sqb-item {
  background:#fff; border:2px solid transparent; border-radius:6px;
  padding:.3rem; cursor:pointer; text-align:center;
}
.sqb-item:hover { border-color:#ccc; }
.sqb-item img {
  width:100%; height:80px; object-fit:contain;
  background:#f4f2ea; border-radius:4px; pointer-events:none; display:block;
}
.sqb-item-name {
  font-size:.68rem; color:#555; margin-top:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sqb-slot {
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.4rem; padding:.4rem .5rem;
  border:1px solid #ccc; border-radius:6px; min-height:52px;
}
.sqb-slot-empty { border-style:dashed; background:#faf9f4; }
.sqb-slot-filled { border-color:var(--green); background:#f4f9f2; }
.sqb-slot-num { font-size:.75rem; color:#999; flex-shrink:0; width:14px; text-align:center; }
.sqb-slot-body { flex:1; display:flex; align-items:center; gap:.4rem; min-height:38px; }
.sqb-slot-body img { width:38px; height:38px; object-fit:contain; background:#f4f2ea; border-radius:3px; flex-shrink:0; }
.sqb-slot-title { font-size:.7rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sqb-slot-ph { font-size:.78rem; color:#bbb; }
.sqb-remove {
  background:none; border:none; cursor:pointer; color:#aaa;
  font-size:1.1rem; padding:0 .15rem; flex-shrink:0; line-height:1;
}
.sqb-remove:hover { color:#c0392b; background:none; }

/* ── Sequence detail: share row ─────────────────────────────────────── */
.ss-share-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.ss-share-url {
  font-size: .78rem;
  color: #666;
  background: #f0ede2;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .25rem .55rem;
  word-break: break-all;
  user-select: all;
  cursor: text;
}
.ss-copy-btn .ss-copy-icon { font-style: normal; }

/* ── Sequence card: share button ────────────────────────────────────── */
.ss-card-share-btn {
  padding: .2rem .45rem;
  font-size: .85rem;
  line-height: 1;
  min-width: unset;
}

/* ── SequenceBuilder ────────────────────────────────────────────────── */

/* Dashboard */
.sb-dashboard-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.sb-dashboard-row  { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.sb-dash-thumbs    { display:flex; gap:.35rem; flex-shrink:0; }
.sb-dash-thumbs img { width:60px; height:40px; object-fit:contain; background:#f4f2ea; border-radius:4px; border:1px solid var(--line); }
.sb-dash-thumb-empty { width:60px; height:40px; display:flex; align-items:center; justify-content:center; background:#f4f2ea; border:1px dashed #ccc; border-radius:4px; color:#bbb; font-size:.75rem; }
.sb-dash-thumb-css  { width:60px; height:40px; border-radius:4px; border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-dash-thumb-css span { font-size:4.5px; text-align:center; padding:0 3px; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; word-break:break-word; font-weight:700; text-shadow:0 0 1px rgba(0,0,0,.25); }
.sb-dash-info      { flex:1; min-width:160px; }
.sb-dash-title     { font-weight:600; margin-bottom:.25rem; }

/* New sequence form */
.sb-new-form { max-width:520px; }

/* Editor outer: strip + canvas side by side */
.sb-editor-wrap { display:flex; gap:1.25rem; align-items:flex-start; margin-top:.75rem; }

/* Sign strip (left sidebar) */
.sb-strip       { flex-shrink:0; width:130px; }
.sb-strip-head  { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#888; margin-bottom:.6rem; }
.sb-strip-sign  { margin-bottom:.75rem; }
.sb-strip-num   { font-size:.72rem; color:#999; margin-bottom:.25rem; }
.sb-strip-img   { width:100%; display:block; border-radius:4px; border:2px solid var(--line); }
.sb-strip-thumb-link { display:block; position:relative; }
.sb-strip-thumb-link:hover .sb-strip-edit-btn { opacity:1; }
.sb-strip-edit-btn  { position:absolute; bottom:4px; right:4px; font-size:.65rem; background:rgba(0,0,0,.55); color:#fff; border-radius:3px; padding:.1rem .35rem; opacity:0; transition:opacity .15s; pointer-events:none; }
.sb-strip-current .sb-strip-img { border-color:var(--green); }
.sb-strip-empty-current { font-size:.75rem; color:#bbb; padding:.5rem 0; font-style:italic; }
.sb-strip-empty-link    { display:block; font-size:.75rem; color:var(--green); padding:.4rem 0; }
.sb-strip-empty-link:hover { text-decoration:underline; }
.sb-strip-empty-locked  { font-size:.72rem; color:#ccc; padding:.4rem 0; }

/* Canvas area */
.sb-canvas-area   { flex:1; min-width:0; }
.sb-clone-bar     { margin-bottom:.8rem; padding:.5rem .6rem; background:#f7fbf7; border:1px solid var(--line); border-radius:6px; }
.sb-clone-label   { font-size:.78rem; margin-bottom:.4rem; }
.sb-canvas-label  { margin:.2rem 0 .6rem; font-size:.85rem; }

/* Size locked label */
.sb-size-locked { pointer-events:none; opacity:.75; }

/* Header: title form + step nav */
.sb-header        { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:.75rem; }
.sb-header-meta   { flex:1; min-width:200px; }
.sb-title-form    { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.35rem; }
.sb-title-input   { flex:1; min-width:180px; font-size:1rem; padding:.35rem .55rem;
                    border:1px solid var(--line); border-radius:5px; background:#fff; }
.sb-step-nav      { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; flex-shrink:0; }
.sb-step          { display:inline-flex; align-items:center; justify-content:center;
                    width:2.1rem; height:2.1rem; border-radius:50%; font-size:.85rem; font-weight:600;
                    background:#f4f2ea; border:2px solid var(--line); color:#555; text-decoration:none; }
.sb-step-current  { border-color:var(--green); background:#eaf4e8; color:var(--green); }
.sb-step-saved    { background:#eaf4e8; color:var(--green); }
.sb-step-locked   { opacity:.4; cursor:default; }
a.sb-step:hover   { border-color:#888; }
.sb-construct-btn { margin-left:.4rem; white-space:nowrap; }

/* Sign navigation (prev/next inside sidebar) */
.sb-sign-nav { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }

/* Admin review: sign grid */
.sb-admin-signs    { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; }
.sb-admin-sign     { display:flex; flex-direction:column; align-items:center; gap:.25rem; min-width:90px; }
.sb-admin-sign-num { font-size:.72rem; color:#888; }
.sb-admin-sign-thumb { width:90px; height:auto; border-radius:4px; border:1px solid var(--line); }
.sb-admin-sign-nothumb { width:90px; height:58px; display:flex; align-items:center; justify-content:center;
                          background:#f4f2ea; border:1px dashed #ccc; border-radius:4px;
                          font-size:.7rem; color:#bbb; }

@media (max-width: 680px) {
  .sb-editor-wrap  { flex-direction:column; }
  .sb-strip        { width:100%; display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start; }
  .sb-strip-head   { width:100%; }
  .sb-strip-sign   { width:80px; margin-bottom:0; }
  .sb-header       { flex-direction:column; }
}

/* Browse page: Favourites info card */
.ss-fav-card {
  background: #fff8f0;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.3rem 1.1rem;
  margin-bottom: 1.5rem;
}
.ss-fav-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.ss-fav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ss-fav-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem 0;
  border-bottom: 1px solid #f0ddd0;
  font-size: .88rem;
  line-height: 1.35;
}
.ss-fav-row:last-child { border-bottom: none; }
.ss-fav-num    { flex-shrink: 0; min-width: 1.6rem; text-align: right; }
.ss-fav-thumb  { width: 50px; height: 50px; object-fit: contain; border-radius: 3px;
                 background: #f4f2ea; flex-shrink: 0; }
.ss-fav-thumb-ph { width: 50px; height: 50px; background: #ede9e0; border-radius: 3px; flex-shrink: 0; }
.ss-fav-info   { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .35rem; min-width: 0; }
.ss-fav-name   { font-weight: 600; }
.ss-fav-id     { font-family: monospace; font-size: .85em; }
.ss-fav-ratio  { font-size: .85em; }

/* ── Browse page header ────────────────────────────────────────────────── */
.ss-browse-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.ss-browse-head h1 { margin: 0; }

/* ── Filter toolbar ────────────────────────────────────────────────────── */
.ss-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  background: #faf8f4;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  margin-bottom: 1.2rem;
}
.ss-ft-label {
  font-weight: 700;
  font-size: .78rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ss-ft-group {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.ss-ft-group label {
  font-size: .78rem;
  color: #666;
  font-weight: 600;
  white-space: nowrap;
}
.ss-ft-select {
  font-family: inherit;
  font-size: .83rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .26rem .45rem;
  cursor: pointer;
  height: 1.9rem;
  min-width: 110px;
}
.ss-ft-select:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}
@media (max-width: 600px) {
  .ss-filter-toolbar { gap: .35rem .5rem; padding: .5rem .7rem; }
  .ss-ft-select      { min-width: 90px; font-size: .79rem; }
}

/* ── BumperSheetBuilder: 3-stack cell bands ────────────────────────────── */
.bsb-cell {
  background: #e8a020;  /* orange, same as sign-bumper */
}
/* Each of the three sticker bands inside a slot */
.bsb-band {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
}
.bsb-band-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bsb-band-img:not([src]),
.bsb-band-img[src=""] {
  display: none;
}
/* Thin border represents the cut line between bands */
.bsb-band-sep {
  border-top: 1px solid rgba(0, 0, 0, .45);
}
/* Placeholder: centred + in front of bands */
.bsb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(0, 0, 0, .45);
  pointer-events: none;
  z-index: 1;
}
.bb-cell.filled .bsb-ph    { display: none; }
.bb-cell.bb-blank .bsb-ph  { display: flex; font-size: .75rem; }

/* Mini-template picker: bumper slot squares keep the orange background */
.bb-mini .sign-bumper {
  background: #e8a020;
}