/* ============================================================================
   BOOSTING PAGE — v24.6 redesign layer
   Loaded after professional-pages so it wins. Additive polish over the existing
   kb36-* structure: smoother card surfaces, accent numbered steps, refined
   option cards, tidier metrics — no layout changes, works dark + light.
   ============================================================================ */

/* Cards: crisper radius, subtle gradient surface, gentle hover */
.kb36-shell .kb36-card{border-radius:16px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.kb36-shell .kb36-request:hover,
.kb36-shell .kb36-side-card:hover{border-color:color-mix(in srgb,var(--gold) 24%,var(--border,rgba(255,255,255,.08)));box-shadow:0 16px 40px -28px rgba(0,0,0,.7)}

/* Hero: warm accent glow */
.kb36-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(130% 150% at 100% 0%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 55%),
    var(--panel,var(--surface,#11161d))}

/* Eyebrows consistent gold */
.kb36-shell .kb36-eyebrow{color:var(--gold);font-weight:800;letter-spacing:.11em;text-transform:uppercase;font-size:10.5px}

/* Numbered step / section chips → gradient accent tokens */
.kb36-form-section-num,.kb36-step-num{
  background:linear-gradient(140deg,var(--gold),var(--accent,var(--gold)));
  color:#17120a;font-weight:850;border:0;
  box-shadow:0 4px 12px -6px color-mix(in srgb,var(--gold) 60%,transparent)}

/* Form sections: soft separated blocks */
.kb36-form-section{border-radius:12px;transition:border-color .16s ease,background .16s ease}
.kb36-form-section:focus-within{border-color:color-mix(in srgb,var(--gold) 34%,var(--border,rgba(255,255,255,.1)))}
.kb36-form-section-title{font-weight:800;letter-spacing:-.01em}

/* Completion / play-mode option cards */
.kb36-play-card{border-radius:12px;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.kb36-play-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 34%,var(--border,rgba(255,255,255,.12)))}
.kb36-play-card.selected{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent)}

/* Metrics list: aligned rows with a divider rhythm */
.kb36-metric{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.kb36-metric + .kb36-metric{border-top:1px solid var(--border)}
.kb36-metric span{color:var(--text3);font-size:12.5px}
.kb36-metric strong{font-weight:800;font-size:13px}

/* Pills */
.kb36-pill{border-radius:999px;font-weight:800;letter-spacing:.02em}
.kb36-pill.green{background:color-mix(in srgb,var(--green) 14%,transparent);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);color:var(--green)}

/* Safety note: soft green callout */
.kb36-safe-note{border-radius:11px;background:color-mix(in srgb,var(--green) 8%,transparent);border:1px solid color-mix(in srgb,var(--green) 22%,transparent)}

/* Booster job request cards: accent spine */
.kb36-request{position:relative}
.kb36-request::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--accent,var(--gold)));opacity:.6}

/* Empty + auth cards centred and calm */
.kb36-empty,.kb36-auth-card{text-align:center}

/* color-mix fallback keeps base look on old browsers */
@supports not (color: color-mix(in srgb, red, blue)){
  .kb36-hero{background:var(--panel,var(--surface,#11161d))}
  .kb36-form-section-num,.kb36-step-num{background:var(--gold);color:#17120a}
  .kb36-play-card.selected{border-color:var(--gold)}
}

/* V24.26 — keep purchased boost requests visible to all boosters */
.page-boosting .kb36-request.is-purchased{border-color:color-mix(in srgb,var(--green) 24%,var(--border2));}
.page-boosting .kb36-request.is-purchased .kb36-request-top{background:color-mix(in srgb,var(--green) 5%,transparent)}
.page-boosting .kb58-purchased-pill{white-space:nowrap}
.page-boosting .kb58-purchased-action{
  cursor:default!important;
  opacity:1!important;
  color:var(--green)!important;
  border-color:color-mix(in srgb,var(--green) 34%,var(--border2))!important;
  background:color-mix(in srgb,var(--green) 8%,transparent)!important;
  white-space:normal;
  text-align:center;
  line-height:1.35;
}
@media(max-width:700px){
  .page-boosting .kb58-purchased-action{width:100%;justify-content:center;min-height:42px}
}