:root{
    --green-dark:#0A5C1E; --green:#43A047; --band:#E4F2D8; --ink:#1c2b1a;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;}
  .wrap{max-width:520px;margin:0 auto;padding:16px 14px 28px;}
  h1{color:var(--green-dark);font-size:20px;margin:2px 0 2px;text-align:center;}
  .sub{text-align:center;font-size:13px;color:#4a5a48;margin:0 0 10px;}
  .doors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
  .doors button{padding:12px 6px;font-size:15px;font-weight:700;border:2px solid #cfe0c2;background:#fff;border-radius:10px;cursor:pointer;color:var(--ink);}
  .doors button.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  /* ---- v26.1: preamble collapse (studio-intro.js) ----
     The intro exists to ORIENT a first-time visitor. FRESH: a compact
     title + subtitle, the door tabs, and ONE slim account line beside
     them — the fat sign-in CARD that used to sit between the title and
     the doors is gone (its flow still opens from the slim line; the
     pitch lives at the save moment). IN PROGRESS (html.jt-inprog —
     a step touched, a door chosen, a design restored): the title block
     hides entirely and the tabs + slim line + stage strip are the
     whole header, so a late step has no preamble mountain above it. */
  .studiotop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:14px;}
  .studiotop .doors{flex:1 1 280px;margin-bottom:0;}
  .studiotop .jtacct{flex:0 1 auto;margin:0 0 0 auto;padding:0;border:none;border-radius:0;
    background:transparent;font-size:13.5px;line-height:1.4;}
  .studiotop .jtacct .jtacct-row{gap:2px 7px;justify-content:flex-end;}
  .studiotop .jtacct-form{margin-top:8px;}
  .studiotop .jtacct-msg{margin-top:6px;text-align:left;}
  /* An opened sign-in form or a showing message takes the full row —
     the slim one-liner must never squeeze the flow it opens. */
  .studiotop:has(.jtacct-form:not(.hidden)) .jtacct,
  .studiotop:has(.jtacct-msg:not(.hidden)) .jtacct{flex:1 1 100%;margin-left:0;}
  html.jt-inprog #introHead{display:none;}
  .stage{position:relative;border-radius:16px;padding:16px;text-align:center;perspective:1000px;
    background:radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef6e2 52%, #d8eac2 100%);
    box-shadow:inset 0 1px 0 #ffffff, inset 0 -18px 30px -22px rgba(10,60,20,.35);}
  .stage::after{content:"";position:absolute;left:14%;right:14%;bottom:5px;height:22px;border-radius:50%;
    background:radial-gradient(50% 100% at 50% 50%, rgba(8,42,15,.38), transparent 70%);filter:blur(6px);pointer-events:none;}
  canvas#stage{position:relative;z-index:1;width:100%;height:auto;border-radius:10px;background:#f4f4f2;display:block;
    box-shadow:0 2px 4px rgba(10,50,18,.14), 0 22px 38px -16px rgba(10,50,18,.45);
    transition:transform .25s ease-out;will-change:transform;}
  .showchip{position:absolute;z-index:2;top:24px;left:24px;display:inline-flex;align-items:center;gap:7px;
    background:rgba(10,40,16,.78);color:#eaffd0;font-size:11.5px;font-weight:700;letter-spacing:.05em;
    padding:6px 11px;border-radius:20px;pointer-events:none;text-transform:uppercase;}
  .showchip .dot{width:8px;height:8px;border-radius:50%;background:#96EB0D;animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.8);}}
  .showchip.off{display:none;}
  /* Desktop: stage left, controls right — gallery layout. */
  .d1grid{display:block;}
  @media (min-width:880px){
    .wrap{max-width:1080px;}
    .d1grid{display:grid;grid-template-columns:1.02fr .98fr;gap:18px;align-items:start;}
    #door2{max-width:580px;margin:0 auto;}
  }
  .group{background:#fff;border:1px solid #dce8d2;border-radius:12px;padding:12px 12px 10px;margin-top:12px;}
  .group h2{color:var(--green-dark);font-size:14px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em;}
  .sports{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
  .sports button{padding:9px 1px;font-size:12px;font-weight:600;border:2px solid #cfe0c2;background:#fff;border-radius:9px;cursor:pointer;color:var(--ink);}
  .sports button.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  .patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
  #patterns2{grid-template-columns:repeat(3,1fr);}
  .patterns button{padding:8px 1px;font-size:11px;font-weight:600;border:2px solid #cfe0c2;background:#fff;border-radius:9px;cursor:pointer;color:var(--ink);}
  .patterns button.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  /* v25 Latest drops: registry-built featured row (studio-extras.js).
     The NEW tag is pure CSS so button text stays the plain name. */
  .patterns .drophead{grid-column:1/-1;font-size:10.5px;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--green-dark);margin:1px 0 -1px;}
  .patterns button.dropnew{position:relative;border-color:#8fbf6a;background:#f6fbf0;}
  .patterns button.dropnew::after{content:"NEW";position:absolute;top:-7px;right:-3px;
    background:#96EB0D;color:#12240F;font-size:7.5px;font-weight:800;letter-spacing:.05em;
    padding:1.5px 4px;border-radius:6px;box-shadow:0 1px 2px rgba(10,50,18,.25);pointer-events:none;}
  .patterns button.dropnew.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;}
  .row label{font-size:13px;font-weight:600;width:74px;}
  .swatches{display:flex;gap:5px;flex-wrap:wrap;flex:1;}
  .sw{width:24px;height:24px;border-radius:50%;border:2px solid #d5d5d5;cursor:pointer;padding:0;}
  .sw.on{border-color:var(--green-dark);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--green);}
  input[type=color]{width:40px;height:28px;border:1px solid #c9c9c9;border-radius:6px;padding:1px;background:#fff;cursor:pointer;}
  .hex{font-size:12px;color:#5a6a57;font-family:monospace;}
  input[type=text]{flex:1;min-width:120px;padding:9px 10px;font-size:15px;border:1px solid #c9d6c2;border-radius:8px;}
  input[type=file]{font-size:13px;max-width:100%;}
  .extracted{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;}
  .chip{width:30px;height:30px;border-radius:8px;border:2px solid #d5d5d5;padding:0;display:inline-block;}
  .small{font-size:12px;color:#5a6a57;}
  .btn{display:block;width:100%;padding:13px;font-size:16px;font-weight:700;color:#fff;background:var(--green);border:none;border-radius:10px;cursor:pointer;margin-top:14px;}
  .btn:active{background:var(--green-dark);}
  .btn.bplocked{background:#7d8c74;cursor:default;}
  .btn.bplocked:active{background:#7d8c74;}
  .note{font-size:12px;color:#5a6a57;text-align:center;margin-top:14px;line-height:1.45;}
  .hidden{display:none;}
  /* ---- Door 2 / gate ---- */
  .rules{background:var(--band);border-radius:12px;padding:13px 14px;margin-top:12px;font-size:14px;line-height:1.55;}
  .rules strong{color:var(--green-dark);}
  .flag{background:#fdecec;border:1px solid #e0a3a3;color:#7a1f1f;border-radius:8px;padding:9px 11px;font-size:13px;line-height:1.5;margin-top:10px;}
  .info{background:#eef6e4;border:1px solid #cfe0c2;border-radius:8px;padding:9px 11px;font-size:13px;line-height:1.5;margin-top:10px;}
  .record{font-size:12px;color:#5a6a57;font-family:monospace;margin-top:9px;word-break:break-all;line-height:1.5;}
  .cls label{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;margin:9px 0;cursor:pointer;font-weight:400;width:auto;}
  .cls input{width:19px;height:19px;margin-top:1px;flex:none;}
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
  @media (max-width:600px){.tiles{grid-template-columns:1fr;}}
  .tile{border:2px solid #dce8d2;border-radius:12px;padding:10px;background:#fff;cursor:pointer;}
  .tile.sel{border-color:var(--green-dark);box-shadow:0 0 0 2px var(--green);}
  .tile h3{margin:0 0 6px;color:var(--green-dark);font-size:15px;}
  .tile canvas{width:100%;height:auto;border-radius:8px;background:#f4f4f2;display:block;}
  .tilewrap{position:relative;}
  .veil{position:absolute;inset:0;background:rgba(18,28,16,0.58);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;font-weight:700;font-size:19px;text-align:center;padding:12px;line-height:1.4;}
  .veil .vsmall{font-size:12.5px;font-weight:600;margin-top:4px;}
  .badge{display:inline-block;font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;margin-top:8px;background:var(--band);color:var(--green-dark);}
  .badge.lock{background:#f6d5d5;color:#7a1f1f;}
  .badge.ready{background:var(--green);color:#fff;}
  .lockcopy{font-size:13px;line-height:1.55;margin-top:9px;}
  .attest{display:flex;gap:9px;align-items:flex-start;margin-top:10px;font-size:13px;line-height:1.55;background:#f6faf2;border:1px solid #dce8d2;border-radius:8px;padding:10px;cursor:pointer;}
  .attest input{width:20px;height:20px;margin-top:1px;flex:none;}
  .payline{font-size:13px;text-align:center;color:#4a5a48;margin-top:14px;line-height:1.55;}
  .choice{font-size:14px;font-weight:700;color:var(--green-dark);text-align:center;margin-top:10px;min-height:18px;}
  .hidden{display:none !important;}
  /* ---- Cricket details ---- */
  .chk{display:flex;gap:9px;align-items:flex-start;margin-top:10px;font-size:13px;line-height:1.5;cursor:pointer;font-weight:400;width:auto;}
  .chk input{width:19px;height:19px;margin-top:1px;flex:none;}
  .mini{font-size:12px;padding:5px 10px;border:1.5px solid #cfe0c2;background:#fff;border-radius:7px;cursor:pointer;font-weight:600;color:var(--ink);flex:none;}
  .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;}
  .seg button{padding:8px 1px;font-size:12px;font-weight:600;border:2px solid #cfe0c2;background:#fff;border-radius:9px;cursor:pointer;color:var(--ink);}
  .seg button.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  .seg.two{grid-template-columns:repeat(2,1fr);}
  .seg.four{grid-template-columns:repeat(4,1fr);}
  .sizes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
  .sizes button{padding:9px 1px;font-size:12.5px;font-weight:700;border:2px solid #cfe0c2;background:#fff;border-radius:9px;cursor:pointer;color:var(--ink);}
  .sizes button.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  /* ---- Front/back view toggle (Door 1 stage) ---- */
  .viewrow{display:flex;align-items:center;gap:8px;margin-top:10px;}
  .viewrow label{font-size:13px;font-weight:600;width:74px;}
  /* ---- v13 Door-2 single mock + production-path options + promo extras ---- */
  .mockwrap{max-width:430px;margin:0 auto;}
  .mockwrap canvas{width:100%;height:auto;border-radius:10px;background:#f4f4f2;display:block;}
  .refrow{display:flex;gap:10px;align-items:flex-start;margin-top:12px;background:#fbfdf8;border:1px dashed #b9d2a8;border-radius:10px;padding:9px;}
  .refrow img{width:74px;height:74px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid #e2ecd8;flex:none;}
  .refrow p{margin:0;}
  .pathopt{border:2px solid #dce8d2;border-radius:12px;padding:11px;margin-top:9px;background:#fff;}
  .pathopt.on{border-color:var(--green-dark);box-shadow:0 0 0 2px var(--green);}
  .pathopt .badge{margin-top:8px;}
  .pathrow{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.5;}
  .pathrow input{width:20px;height:20px;margin-top:2px;flex:none;}
  .pathrow input:disabled{cursor:not-allowed;}
  .costnote{font-size:12.5px;line-height:1.5;color:#5c4a12;background:#fdf6dd;border:1px solid #e8d98a;border-radius:8px;padding:7px 10px;margin:6px 0 2px;}

/* ---- v15: styled file pickers (audit polish) — every file field gets
   the same treatment: a styled label button + the native input kept
   functional but visually hidden (1px, opacity 0 — never display:none,
   so programmatic file assignment keeps working). ---- */
.jt-file{display:inline-flex;align-items:center;gap:9px;cursor:pointer;max-width:100%;margin:2px 0;}
.row label.jt-file{width:auto;}
.jt-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.jt-file-btn{flex:none;font-size:13px;font-weight:700;color:var(--green-dark);background:var(--band);border:2px solid var(--green);border-radius:9px;padding:8px 13px;}
.jt-file:active .jt-file-btn{background:#d2e8bd;}
.jt-file-input:focus-visible + .jt-file-btn{outline:3px solid var(--green-dark);outline-offset:2px;}
.jt-file-name{font-size:12.5px;color:#5a6a57;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

/* v16: one-time entry highlight (persona funnels, ?focus=upload) — a
   soft pulse on the upload button so the eye lands where the funnel
   promised. Applied by studio-entry.js, removed after ~3 s. */
@keyframes jtPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(67,160,71,0); }
  35% { box-shadow: 0 0 0 7px rgba(67,160,71,.45); }
}
.jt-file.jt-pulse .jt-file-btn { animation: jtPulse .9s ease-in-out 5; border-color: var(--green-dark); background: #d9efc6; }
@media (prefers-reduced-motion: reduce) {
  .jt-file.jt-pulse .jt-file-btn { animation: none; outline: 3px solid var(--green-dark); outline-offset: 2px; }
}

/* v17: the promo extras live in one collapsible section per door, and
   every extra carries a placement-slot picker (Top / Center / Lower). */
.extrasbox { border: 2px solid #cfe0c2; border-radius: 12px; background: #fbfdf7; margin: 10px 0; overflow: hidden; }
.extrashead { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 12px; background: #eef6e3; border: 0; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--green-dark); text-align: left; }
.extrashead .chev { font-size: 13px; transition: transform .18s ease; }
.extrasbox.open .extrashead .chev { transform: rotate(180deg); }
.extrasbody { padding: 4px 12px 12px; }
.seg button:disabled { opacity: .38; cursor: not-allowed; }
.slothint { color: #7a5b12; }

/* v18: stepped flow (studio-wizard.js) — one step open at a time under
   the stage; completed steps collapse to one-line summaries. */
.wiz-progress { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5a6a57; margin: 14px 2px 0; }
.wiz-step { border: 1px solid #dce8d2; border-radius: 12px; background: #fff; margin-top: 10px; overflow: hidden; }
.wiz-step.off { display: none; }
.wiz-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; background: #fff; border: 0; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); text-align: left; }
.wiz-step.open .wiz-head { background: var(--band); color: var(--green-dark); }
.wiz-step.locked .wiz-head { opacity: .55; cursor: default; }
.wiz-tick { color: var(--green); font-weight: 900; flex: none; visibility: hidden; }
.wiz-name { flex: none; }
.wiz-sum { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #5a6a57; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-chev { flex: none; transition: transform .18s ease; color: #5a6a57; }
.wiz-step.open .wiz-chev { transform: rotate(180deg); }
.wiz-body { display: none; padding: 4px 12px 12px; }
.wiz-step.open .wiz-body { display: block; }
.wiz-body > .group { background: transparent; border: none; border-radius: 0; padding: 0; margin-top: 0; }
.wiz-body > .group + .group { margin-top: 12px; border-top: 1px dashed #dce8d2; padding-top: 12px; }
.wiz-body > .group > h2 { display: none; }
.wiz-foot { display: flex; gap: 8px; margin-top: 12px; }
.wiz-cont { flex: 1; padding: 11px; font-size: 15px; font-weight: 700; color: #fff; background: var(--green); border: none; border-radius: 10px; cursor: pointer; }
.wiz-cont:active { background: var(--green-dark); }
.wiz-skip { padding: 11px 14px; font-size: 14px; font-weight: 600; background: #fff; border: 2px solid #cfe0c2; border-radius: 10px; cursor: pointer; color: var(--ink); }
.wiz-cta { margin-top: 14px; border: 2px solid transparent; border-radius: 14px; padding: 2px 8px 10px; }
.wiz-cta.ready { border-color: #b9d2a8; background: #fbfdf7; box-shadow: 0 0 0 3px rgba(150, 235, 13, .22); }
.wiz-flash { outline: 3px solid #e8a33d; outline-offset: 2px; border-radius: 8px; }
/* Start-over (by the stage, both doors) + save-link controls. */
.wiz-reset { display: block; margin: 12px auto 0; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #7a1f1f; background: #fff; border: 2px solid #e0a3a3; border-radius: 20px; cursor: pointer; }
.wiz-reset.armed { background: #fdecec; border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }
#door2 > .wiz-reset { margin-left: 0; }
.wiz-save { background: #fff; color: var(--green-dark); border: 2px solid var(--green); }
.wiz-save:active { background: var(--band); }
/* Share | Save side-by-side row (v20): the wizard moves #ctaRow1/#ctaRow2
   into each door's CTA block as one unit; the two buttons split the row. */
.cta-row { display: flex; gap: 8px; margin-top: 8px; }
.cta-row .btn { flex: 1 1 0; width: auto; min-width: 0; margin-top: 0; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.linkout input { width: 100%; padding: 9px 10px; font-size: 12.5px; border: 1px solid #c9d6c2; border-radius: 8px; background: #f7faf1; color: #4a5a48; }
#d2stage { background: #fff; border: 1px solid #dce8d2; border-radius: 12px; padding: 12px; margin-top: 12px; }

/* ---- v21: pinned compact stage (owner phone review 2026-10-15) ----
   Editing a late wizard step pushed the jersey a full screen away.
   On phone widths the stage becomes a compact STRIP (canvas left at
   ~230px tall, View + Start over in a right rail) and stays pinned to
   the top of the Studio while the steps scroll beneath it:
   - embedded in the site iframe, studio-pin.js shifts the strip with
     transform: translateY driven by parent scroll telemetry (the
     frame is full-height and never scrolls internally, so sticky
     cannot engage there); transforms never change layout, so the
     reported iframe height stays exact in every pin state.
   - standalone, .jt-solo position:sticky does the same job natively.
   On wide screens Door 1 keeps its two-column grid (stage left, steps
   right) with the same pin, and Door 2 gains the same two columns. */
.stagecol, .d2strip { position: relative; z-index: 6; }
.jt-embed .stagecol, .jt-embed .d2strip { will-change: transform; }
.jt-solo .stagecol, .jt-solo .d2strip { position: sticky; top: 10px; }
/* ---- v25.1: keyboard-open guard (studio-kb.js toggles .kb-open) ----
   While a text field has focus (phone keyboard open), the pin is
   FULLY suspended — the strip returns to plain flow (transform
   neutralized when embedded; sticky released when standalone) so the
   browser's native focus-scroll can keep the field above the
   keyboard instead of the strip floating over it. Outside this state
   the v21 pin is exactly as specced. */
html.kb-open .stagecol, html.kb-open .d2strip { transform: none !important; }
html.kb-open.jt-solo .stagecol, html.kb-open.jt-solo .d2strip { position: static; }
/* Air between a field and the keyboard when focus-scroll lands it. */
input, textarea, select { scroll-margin-bottom: 28px; }
.d2strip .wiz-reset { margin-left: 0; }
/* The wizard scrolls an opened step's head into view; the margin
   (kept current by studio-pin.js) lands it below the pinned strip
   and the parent header instead of behind them. */
.wiz-step, .wiz-head, .wiz-cta { scroll-margin-top: var(--jt-scrollmg, 10px); }

@media (max-width: 899px) {
  /* Door 1 — compact stage strip: jersey left, controls right. */
  .stagecol { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 10px; align-items: start; background: #fff; border: 1px solid #dce8d2;
    border-radius: 16px; padding: 8px; box-shadow: 0 8px 20px -12px rgba(10, 50, 18, .28); }
  .stagecol .stage { grid-row: 1 / span 2; width: 180px; padding: 8px; border-radius: 12px; }
  .stagecol .showchip { top: 14px; left: 14px; font-size: 10px; padding: 5px 8px; gap: 5px; }
  .stagecol .showchip .dot { width: 6px; height: 6px; }
  .stagecol .viewrow { grid-column: 2; grid-row: 1; margin-top: 0; flex-direction: column; align-items: stretch; gap: 5px; }
  .stagecol .viewrow label { width: auto; font-size: 12px; }
  .stagecol .viewrow .seg { flex: none; }
  .stagecol .wiz-reset { grid-column: 2; grid-row: 2; margin: 8px 0 0; width: 100%; }
  /* Door 2 — compact mock strip, same treatment. Pre-upload (mock
     hidden) the wrapper goes bare so Start over reads as before. */
  .d2strip { background: #fff; border: 1px solid #dce8d2; border-radius: 16px; padding: 8px;
    box-shadow: 0 8px 20px -12px rgba(10, 50, 18, .28); margin-top: 12px; }
  .d2strip .wiz-reset { margin: 0 0 8px; }
  .d2strip:has(> #d2stage.hidden) { background: transparent; border-color: transparent; box-shadow: none; padding: 0; }
  .d2strip:has(> #d2stage.hidden) .wiz-reset { margin: 12px auto 0 0; }
  #d2stage { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start;
    background: transparent; border: none; border-radius: 0; padding: 0; margin-top: 0; }
  #d2stage .mockwrap { width: 164px; max-width: none; margin: 0; }
  #d2stage .row { margin-top: 0 !important; flex-direction: column; align-items: stretch; gap: 5px; flex-wrap: nowrap; }
  #d2stage .row label { width: auto; font-size: 12px; }
  #d2stage .row .seg { flex: none; }
  /* Slimmer wizard Continue / Skip on phones (still >= 40px targets). */
  .wiz-cont { padding: 12px; font-size: 14.5px; }
  .wiz-skip { padding: 11px; font-size: 13.5px; }
  .wiz-foot { margin-top: 10px; }
}

@media (min-width: 900px) {
  /* Door 2 — wide: stage column left (rules + pinned mock strip),
     steps column right, mirroring Door 1's grid. */
  #door2 { max-width: 1080px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    column-gap: 18px; align-items: start; }
  #door2 > * { grid-column: 2; }
  #door2 > .rules { grid-column: 1; grid-row: 1; }
  #door2 > .d2strip { grid-column: 1; grid-row: 2 / span 98; align-self: start; }
}

  /* ---- v27: ready-made badge picker (studio-badge.js) ---- */
  .badge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0 4px;}
  .badge-grid button{padding:6px 2px 5px;font-size:10px;font-weight:600;border:2px solid #cfe0c2;
    background:#fff;border-radius:9px;cursor:pointer;color:var(--ink);line-height:1.15;}
  .badge-grid button canvas{width:100%;height:auto;display:block;}
  .badge-grid button span{display:block;margin-top:3px;}
  .badge-grid button.on{border-color:var(--green);background:var(--band);color:var(--green-dark);}
  #badgeStatus{color:var(--green-dark);font-weight:600;}