/* ═══════════════════════════════════════════════════════════════
   Playloudr · Create Smart Link wizard — v3 branding.
   Loads AFTER playloudr-v3.css; reuses its tokens & components
   (.btn, .fp-input, .fp-label, .tag …). Adds the step rail, service
   rows, option cards, switch, and the fan-page preview panel.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page shell: wizard column + preview column ── */
.sl-wrap { flex: 1; min-width: 0; display: flex; align-items: stretch; }
.wz {
  flex: 1; min-width: 0; position: relative;
  padding: 30px 40px 108px; /* bottom space for sticky footer */
}
.wz-head { margin-bottom: 24px; }
.wz-head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.022em; color: var(--ink);
  margin: 0 0 6px; line-height: 1.1;
}
.wz-head p { font-size: 14.5px; color: var(--gray-500); margin: 0; }

/* ── Step rail ── */
.wz-rail {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-full); box-shadow: var(--sh-card);
  padding: 16px 26px; margin-bottom: 30px;
}
.wz-step { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
button.wz-step {
  padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer;
}
button.wz-step:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 4px; }
button.wz-step:hover .wz-dot {
  background: var(--blue-tint); border-color: var(--blue-400); color: var(--blue-600);
}
button.wz-step:active .wz-dot { transform: scale(0.93); }
.wz-dot {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 700; font-size: 14px;
  background: #fff; color: var(--gray-400);
  border: 2px solid var(--gray-300);
  transition: all .2s ease;
}
.wz-step.done .wz-dot { border-color: var(--blue-500); color: var(--blue-600); }
button.wz-step.done:hover .wz-dot {
  background: var(--blue-tint); border-color: var(--blue-600); color: var(--blue-700);
}
.wz-step.active .wz-dot {
  background: var(--blue-grad); color: #fff; border-color: transparent;
  box-shadow: var(--sh-blue);
}
.wz-step .wz-label { display: none; }
.wz-step.active .wz-label { display: block; }
.wz-label .k {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600);
}
.wz-label .t {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.012em; color: var(--ink); margin-top: 2px; line-height: 1.05;
}
.wz-line {
  flex: 1; height: 2px; min-width: 24px; border-radius: 2px;
  background: var(--gray-200); transition: background .2s ease;
}
.wz-line.done { background: var(--blue-500); }

/* ── Step panels ── */
.wz-panel { display: none; opacity: 1; }
.wz-panel.active { display: block; }

.wz-block { margin-bottom: 26px; }
.wz-h3 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.016em; color: var(--ink); margin: 0 0 4px;
}
.wz-sub { font-size: 13.5px; color: var(--gray-500); margin: 0 0 16px; line-height: 1.5; }
.wz-field { margin-bottom: 16px; }
.wz-help {
  width: 16px; height: 16px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; vertical-align: middle;
  background: var(--gray-100); color: var(--gray-500);
  font-size: 10px; font-weight: 700; margin-left: 6px; cursor: help;
}
.wz-source-label {
  color: var(--ink); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em; text-transform: none;
}
.wz-lookup-row { display: flex; gap: 12px; align-items: stretch; }
.wz-lookup-row .fp-input { flex: 1; }
.wz-lookup-row .btn { height: 44px; flex-shrink: 0; }
.wz-source-label + .wz-lookup-row { margin-top: 10px; }
.wz-source-note { margin-top: 12px; }
.wz-spin { animation: fp-spin .8s linear infinite; }

/* ── Service rows ── */
.svc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-card); padding: 16px 18px; margin-bottom: 12px;
}
.svc-top { display: flex; align-items: center; gap: 12px; }
.svc-grip { color: var(--gray-300); cursor: grab; display: inline-flex; flex-shrink: 0; }
.svc-name { font-size: 14.5px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.svc-ico {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.svc-ico svg { width: 14px; height: 14px; }
.svc-reorder { display: inline-flex; gap: 2px; }
.svc-reorder button {
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent;
  color: var(--gray-400); display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.svc-reorder button:hover { background: var(--gray-100); color: var(--ink); }
.svc-link { margin-top: 12px; }
.svc-link .fp-label { margin-bottom: 6px; }
.svc.off { opacity: .55; }
.svc.off .svc-link { display: none; }

/* ── Branded checkbox ── */
.cbx {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--gray-300); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s, border-color .14s; color: #fff;
}
.cbx svg { width: 13px; height: 13px; opacity: 0; transition: opacity .14s; }
.cbx.on { background: var(--blue-500); border-color: var(--blue-500); }
.cbx.on svg { opacity: 1; }

/* ── Option (radio) cards ── */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt {
  text-align: left; cursor: pointer; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px; transition: border-color .14s, background .14s, box-shadow .14s;
  display: flex; gap: 13px; align-items: flex-start;
}
.opt:hover { border-color: var(--gray-300); }
.opt.sel { border-color: var(--blue-500); background: var(--blue-tint); box-shadow: 0 0 0 3px var(--blue-soft); }
.opt .radio {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--gray-300); background: #fff; position: relative;
}
.opt.sel .radio { border-color: var(--blue-500); }
.opt.sel .radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--blue-500);
}
.opt .ttl { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.opt .dsc { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 4px; line-height: 1.5; }

/* ── Cover artwork ── */
.art-row { display: flex; align-items: center; gap: 16px; }
.art-thumb {
  width: 74px; height: 74px; border-radius: var(--r-md); flex-shrink: 0;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 32% 34%, #FFB1CC 0%, transparent 42%),
    linear-gradient(160deg, #FF8A4C 0%, #FF5C8A 55%, #6E82FF 120%);
}

/* ── Slug field ── */
.slug-wrap { position: relative; }
.slug-wrap .fp-input { padding-right: 64px; }
.slug-count {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11.5px; color: var(--gray-400);
}
.share-line { font-size: 12.5px; color: var(--gray-500); margin-top: 9px; }
.share-line .cell-mono { color: var(--blue-600); }

/* ── Review rows ── */
.rev-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.rev-row:last-of-type { border-bottom: 0; }
.rev-k {
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500);
  margin-bottom: 5px;
}
.rev-v { font-size: 14.5px; color: var(--ink); }
.rev-v.mono { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.rev-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Switch ── */
.sw-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.sw-track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--gray-300);
  position: relative; transition: background .18s; flex-shrink: 0;
}
.sw-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s;
}
.sw-toggle.on .sw-track { background: var(--blue-500); }
.sw-toggle.on .sw-track::after { transform: translateX(18px); }
.sw-label { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ── Sticky footer action bar ── */
.wz-foot {
  position: fixed; left: 248px; right: 0; bottom: 0; z-index: 40;
  margin: 0; padding: 15px 40px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(17,20,43,.06);
  display: flex; align-items: center; gap: 12px;
}
.wz-foot .spacer { flex: 1; }
html:has(.app-shell-collapsed) .wz-foot { left: 64px; }
@media (min-width: 761px) and (max-width: 900px) {
  html:not(:has(.app-shell-collapsed)) .wz-foot { left: 216px; }
}
@media (max-width: 760px) {
  .wz-foot {
    left: 0; right: 0; padding: 12px 16px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
  }
}
.btn-ghost {
  background: transparent; border: 0; color: var(--gray-500);
  font-family: var(--ui); font-weight: 600; font-size: 14px;
  padding: 0 8px; height: 42px; cursor: pointer;
}
.btn-ghost:hover { color: var(--ink); }
.btn[disabled], .btn.is-disabled {
  opacity: .5; pointer-events: none; box-shadow: none;
}

/* ═══════ Fan-page preview panel ═══════ */
.sl-preview {
  width: 408px; flex-shrink: 0;
  padding: 30px 34px 30px 24px;
  position: sticky; top: 0; align-self: flex-start;
}
.sl-preview .pv-cap {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray-400);
  margin: 0 0 16px;
}
.phone {
  border-radius: 22px; overflow: hidden; background: #0C0D12;
  box-shadow: 0 18px 50px rgba(17,20,43,.22), 0 2px 8px rgba(17,20,43,.10);
  border: 1px solid rgba(255,255,255,.06);
}
.pv-cover { aspect-ratio: 1/1; width: 100%; position: relative; }
.pv-cover.default {
  background: linear-gradient(160deg, #3656E6 0%, #2D7FE6 60%, #4D86F0 100%);
  display: flex; align-items: center; justify-content: center;
}
.pv-cover.default svg { width: 78px; height: 78px; color: rgba(255,255,255,.92); }
.pv-cover.art {
  background:
    radial-gradient(circle at 30% 30%, #FFCBA6 0%, transparent 45%),
    linear-gradient(165deg, #F3D9B5 0%, #C98F6A 40%, #4A5A74 78%, #2A3550 100%);
}
.pv-cover .pv-arttag {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.78); background: rgba(0,0,0,.32);
  padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px);
}
.pv-body {
  background: linear-gradient(180deg, #15161C 0%, #0A0B0E 100%);
  padding: 26px 24px 30px; color: #fff; text-align: center;
}
.pv-msg {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55);
  line-height: 1.5; margin: 0 0 12px;
}
.pv-title {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 8px;
}
.pv-artist {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 22px;
}
.pv-btn {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 11px;
}
.pv-btn .pv-svc-ico {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.pv-btn .pv-svc-ico svg { width: 16px; height: 16px; }
.pv-btn .pv-svc-name { font-size: 14px; font-weight: 700; color: #fff; flex: 1; text-align: left; }
.pv-btn .pv-chev { color: rgba(255,255,255,.5); display: inline-flex; }
.pv-mail .pv-svc-ico { background: rgba(255,255,255,.12); }

@media (max-width: 1180px){ .sl-preview { display: none; } }
@media (max-width: 680px) {
  .wz-rail { padding: 14px 18px; }
  .wz-lookup-row { flex-direction: column; }
  .wz-lookup-row .btn { width: 100%; }
}