/* Marketplace Design - how it works, then one Input card, then the Result,
   dressed in the studio shell. One accent per studio: this one takes lime. */

body.studio-sig.md-body{--su-accent:#c8f542;--su-accent-soft:rgba(200,245,66,.12)}
.md-body [hidden]{display:none!important}

.md-stage{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:22px;
  max-width:1180px;margin:0 auto;padding:22px 20px 60px;align-items:start}
.md-col{display:grid;gap:22px;min-width:0}

/* ── how it works ───────────────────────────────────────────────────── */
.md-how h2{margin:0 0 8px;color:#f4f7ff;font-size:26px;font-weight:900;letter-spacing:-.04em;
  text-transform:uppercase;line-height:1}
.md-how > p{margin:0;color:#8e9ab5;font-size:14px;line-height:1.5}
.md-steps{list-style:none;margin:26px 0 4px;padding:0;display:grid;justify-items:center;gap:14px}
.md-stepPill{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 20px;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);
  color:#dbe3f3;font-size:15px;font-weight:700;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.md-stepPill svg{width:20px;height:20px;flex:none;color:#8e9ab5}
/* Ready wears the brand's green frame, the same one a selected choice gets. */
.md-stepPill.md-ready{border:1.5px solid #22c55e;border-left:4px solid #22c55e;
  background:rgba(34,197,94,.10);color:#fff}
.md-stepPill.md-ready svg{color:#22c55e}
.md-stepPill.is-live{border-color:var(--su-accent);background:var(--su-accent-soft);color:#fff}
.md-stepPill.is-live svg{color:var(--su-accent)}
.md-stepPill.is-done{border-color:rgba(34,197,94,.45)}

/* ── the cards ──────────────────────────────────────────────────────── */
.md-card{display:grid;gap:14px;padding:18px;border-radius:12px;background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.09);min-width:0}
.md-cardTitle{margin:0 0 2px;color:#f4f7ff;font-size:14px;font-weight:800;letter-spacing:-.01em}

.md-prompt{display:grid;gap:6px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);transition:border-color .15s ease}
.md-prompt > span{color:#8e9ab5;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.md-prompt i,.md-inline i{color:#ef4444;font-style:normal}
.md-prompt textarea{width:100%;min-height:96px;max-height:260px;resize:vertical;border:0;padding:0;
  background:transparent;color:#f4f7ff;font:inherit;font-size:14px;line-height:1.55}
.md-prompt textarea::placeholder{color:#5f6a82}
.md-prompt textarea:focus{outline:none}
.md-prompt:focus-within{border-color:var(--su-accent)}

.md-drop{display:grid;justify-items:center;gap:6px;padding:22px 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.18);
  text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.md-drop:hover,.md-drop:focus-visible{border-color:var(--su-accent);background:var(--su-accent-soft);outline:none}
.md-dropIcon{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--su-accent-soft);border:1px solid rgba(255,255,255,.12);color:var(--su-accent);margin-bottom:4px}
.md-dropIcon svg{width:20px;height:20px}
.md-drop strong{color:#f4f7ff;font-size:14px;font-weight:800}
.md-drop p{margin:0;color:#8e9ab5;font-size:12px}

.md-link{display:flex;align-items:center;gap:10px;height:48px;padding:0 5px 0 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);margin:0;transition:border-color .15s ease}
.md-link:focus-within{border-color:var(--su-accent)}
.md-link svg{width:17px;height:17px;flex:none;color:#8e9ab5}
.md-link input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#f4f7ff;
  font:inherit;font-size:14px}
.md-link input::placeholder{color:#8e9ab5}
.md-link input:focus{outline:none}
.md-link button{flex:none;height:36px;padding:0 16px;border:1px solid var(--su-accent);border-radius:8px;
  background:var(--su-accent);color:#0b0f1c;font:inherit;font-size:13px;font-weight:800;cursor:pointer;
  transition:filter .15s ease}
.md-link button:hover:not(:disabled){filter:brightness(1.08)}
.md-link button:disabled{opacity:.5;cursor:default}

.md-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.md-media:empty{display:none}
.md-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#0b0b12;
  border:1px solid rgba(255,255,255,.10)}
.md-item img{width:100%;height:100%;object-fit:cover;display:block}
.md-item.is-busy::after{content:"";position:absolute;inset:0;background:rgba(8,8,14,.62)}
.md-tag{position:absolute;left:4px;bottom:4px;padding:1px 5px;border-radius:5px;
  background:rgba(8,8,14,.78);color:#dbe3f3;font-size:10px;font-weight:700}
.md-x{position:absolute;top:4px;right:4px;width:22px;height:22px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(8,8,14,.78);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.md-x:hover{background:#ef4444}

/* ── the three chips: each one IS a select, so a phone opens its own picker */
.md-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.md-chip{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);
  color:#f4f7ff;cursor:pointer;min-width:0;transition:border-color .15s ease,background .15s ease}
.md-chip:hover{border-color:var(--su-accent);background:var(--su-accent-soft)}
.md-chip:focus-within{border-color:var(--su-accent)}
.md-chip svg{width:17px;height:17px;flex:none;color:var(--su-accent)}
.md-chip b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-chip select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.md-chip.is-locked{opacity:.6;cursor:not-allowed}
.md-chip.is-locked select{pointer-events:none}

/* ── advanced settings ──────────────────────────────────────────────── */
.md-adv > summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;
  list-style:none;cursor:pointer;color:#f4f7ff;font-size:14px;font-weight:800}
.md-adv > summary::-webkit-details-marker{display:none}
.md-adv > summary svg{width:18px;height:18px;color:#8e9ab5;flex:none}
.md-caret{margin-left:auto;transition:transform .15s ease}
.md-adv[open] .md-caret{transform:rotate(180deg)}
.md-advBody{display:grid;gap:8px;padding-top:8px}
.md-row{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);
  color:#dbe3f3;font-size:13.5px;font-weight:700;transition:border-color .15s ease}
.md-toggle{justify-content:space-between;cursor:pointer}
.md-toggle input{position:absolute;opacity:0;pointer-events:none}
.md-switch{position:relative;width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.14);
  transition:background .15s ease;flex:none}
.md-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:transform .15s ease}
.md-toggle input:checked + .md-switch{background:#22c55e}
.md-toggle input:checked + .md-switch::after{transform:translateX(18px)}
.md-toggle input:focus-visible + .md-switch{outline:2px solid var(--su-accent);outline-offset:2px}
.md-inline > span{flex:none}
.md-row select{flex:1;min-width:0;height:42px;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e9ab5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center/16px;
  padding-right:24px;color:#f4f7ff;font:inherit;font-size:13.5px;font-weight:600;appearance:none;-webkit-appearance:none;
  cursor:pointer;text-overflow:ellipsis}
.md-row select:focus{outline:none}
.md-row select option{background:#12121a;color:#f4f7ff}
.md-row:focus-within{border-color:var(--su-accent)}
.md-stack{display:grid;gap:0;padding:8px 14px 4px;min-height:60px}
.md-small{color:#8e9ab5;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.md-stack select{height:30px}
.md-inline.is-off{opacity:.45}

/* ── generate: the signature button (solid accent, from studio-signature.css),
   full width, with the price on it ──────────────────────────────────────── */
body.studio-sig .md-go{display:flex;gap:10px;width:100%}
body.studio-sig .md-go svg{width:18px;height:18px;flex:none}
.md-go .md-cost{margin-left:2px;padding:2px 9px;border-radius:999px;background:rgba(11,15,28,.14);
  color:#0b0f1c;font-size:12.5px;font-weight:800}
.md-go:disabled .md-cost{background:rgba(255,255,255,.06);color:#8b93a8}
.md-say{min-height:0;text-align:center}
.md-say:empty{display:none}

/* ── the result ─────────────────────────────────────────────────────── */
.md-result{position:sticky;top:18px}
.md-outBox{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;
  border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#12160c 0%,#0b0c0e 60%,#07070c 100%);
  border:1px solid rgba(255,255,255,.09)}
.md-outBox img{width:100%;height:100%;object-fit:contain;display:block;background:#07070c}
.md-placeholder{display:grid;justify-items:center;gap:10px;color:#6f7a8f;padding:22px;text-align:center}
.md-placeholder svg{width:40px;height:40px}
.md-placeholder p{margin:0;font-size:13px}
.md-outBox.is-working{border-color:rgba(200,245,66,.44)}
.md-outBox.is-working::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--su-accent),transparent);animation:mdScan 1.6s linear infinite}
@keyframes mdScan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.md-outBox.is-working::after{animation:none;opacity:.7}}
.md-save{justify-self:stretch;text-align:center;text-decoration:none}

.md-offline{margin:0;padding:12px 14px;border-radius:12px;border:1px solid rgba(251,191,36,.42);
  background:rgba(251,191,36,.10);color:#fde68a;font-size:12.5px;line-height:1.45}

/* ── phone: one column, the result under the input ─────────────────── */
@media (max-width:900px){
  .md-stage{grid-template-columns:minmax(0,1fr);padding:16px 16px 48px;gap:18px}
  .md-result{position:static}
  .md-how h2{font-size:24px}
  .md-stepPill{font-size:15.5px;min-height:50px;padding:0 18px}
  .md-chip{padding:0 12px}
}
@media (max-width:360px){ .md-chip svg{display:none} }