/* ============================================================
   Baysly — two-panel live demo
   Left: dark recovery console · Right: real storefront card
   ============================================================ */

:root {
  /* console (dark) */
  --c-bg:      #141009;
  --c-surface: #1E1810;
  --c-surface2:#251E14;
  --c-inset:   #15110A;
  --c-line:    rgba(240,228,206,0.10);
  --c-line2:   rgba(240,228,206,0.16);
  --c-text:    #EFE8D9;
  --c-soft:    #B6AC93;
  --c-faint:   #847B66;
  --red:       #E0552F;
  --red-soft:  #F0A488;
  --gold:      #E0AB4C;
  --green:     #6FBF8A;

  /* storefront (light) */
  --s-bg:      #FFFFFF;
  --s-wash:    #FBF7F1;
  --s-line:    #EDE6DB;
  --s-line2:   #E2D9CB;
  --ink:       #221C15;
  --s-soft:    #6E6557;
  --s-faint:   #A89D8B;
  --rose:      #D06A5E;
  --rose-deep: #B8493C;
  --rose-wash: #FBEDEA;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "DM Sans", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(224,85,47,.3); }

.app {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 clamp(12px, 1.8vw, 26px);
}

/* ============================================================
   TOP STRIP
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 6px 11px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.logo-mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  flex: none;
}
.wordmark .tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-faint);
  border: 1px solid var(--c-line2);
  border-radius: 999px;
  padding: 4px 10px;
  margin-left: 4px;
  white-space: nowrap;
}
.topbar-spacer { flex: 1; }
.controls { display: flex; align-items: center; gap: 12px; }

/* uplift engine toggle — lives in the nav bar */
.nav-engine { display: inline-flex; align-items: center; gap: 10px; }
.nav-engine .ne-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line2);
  border-radius: 999px;
  padding: 3px;
  background: var(--c-surface);
}
.nav-toggle button {
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-faint);
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-toggle button:hover { color: var(--c-text); }
.nav-toggle button.on[data-b="on"] { background: var(--red); color: #fff; }
.nav-toggle button.on[data-b="on"]:hover { color: #fff; }
.nav-toggle button.on[data-b="off"] { background: var(--c-text); color: var(--c-bg); }
.nav-toggle button.on[data-b="off"]:hover { color: var(--c-bg); }
.nav-div { width: 1px; height: 24px; background: var(--c-line2); }

.toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line2);
  border-radius: 999px;
  padding: 3px;
  background: var(--c-surface);
}
.toggle button {
  border: none; background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-faint);
  padding: 8px 13px;
  border-radius: 999px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.toggle button.on { background: var(--c-text); color: var(--c-bg); }
.toggle.off button.on { background: var(--red); color: #fff; }

.replay {
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: transform .15s, opacity .2s, background .2s;
}
.replay:hover { transform: translateY(-1px); }
.replay:disabled { opacity: .5; cursor: default; transform: none; background: var(--c-surface2); border-color: var(--c-line2); color: var(--c-soft); }
.replay .tri { font-size: 8px; }

/* ============================================================
   SPLIT
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.12fr);
  gap: clamp(12px, 1.4vw, 20px);
  padding: 2px 6px 14px;
  min-height: 0;
}

/* ============================================================
   LEFT — CONSOLE
   ============================================================ */
.console {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

.con-header {
  display: flex;
  align-items: center;
  gap: 13px;
}
.con-header .ch-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.ch-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-soft); display: flex; flex-direction: column; gap: 4px; }
.ch-sub { font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--c-faint); }
.con-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.con-header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-soft);
}
.con-header .live-pill {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-faint);
  border: 1px solid var(--c-line2);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.con-header .live-pill .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--c-faint); transition: background .3s; }
.con-header.live .live-pill { color: var(--red-soft); border-color: rgba(224,85,47,.4); }
.con-header.live .live-pill .ld { background: var(--red); animation: blink 1.3s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* stage stack */
.stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
}
.stages::-webkit-scrollbar { width: 6px; }
.stages::-webkit-scrollbar-thumb { background: var(--c-line2); border-radius: 3px; }

.stage {
  border: 1px solid var(--c-line);
  border-radius: 11px;
  background: var(--c-surface);
  padding: 14px 16px;
  opacity: 0.42;
  transition: opacity .45s, border-color .45s, background .45s, box-shadow .45s;
}
.stage.active {
  opacity: 1;
  border-color: var(--c-line2);
  background: var(--c-surface2);
  box-shadow: 0 14px 40px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
.stage.done { opacity: 1; }
.stage[data-accent="red"].active { border-color: rgba(224,85,47,.45); box-shadow: 0 0 0 1px rgba(224,85,47,.14), 0 16px 44px -26px rgba(224,85,47,.6); }
.stage[data-accent="gold"].active { border-color: rgba(224,171,76,.45); box-shadow: 0 0 0 1px rgba(224,171,76,.14), 0 16px 44px -26px rgba(224,171,76,.55); }

.stage-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.snum {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex: none;
  background: var(--c-faint);
  transition: background .4s;
}
.stage[data-accent="red"].active .snum, .stage[data-accent="red"].done .snum { background: var(--red); }
.stage[data-accent="gold"].active .snum, .stage[data-accent="gold"].done .snum { background: var(--gold); color: #2A2008; }
.stage-titles { min-width: 0; }
.stage-name { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.stage-sub { font-size: 11.5px; color: var(--c-soft); margin-top: 1px; }
.stage-flag {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-faint);
  border: 1px solid var(--c-line2);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
  transition: color .3s, border-color .3s, opacity .3s;
}
.stage-flag .fdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stage-flag.hot { color: var(--red); border-color: rgba(224,85,47,.4); }
.stage-flag.hot .fdot { animation: blink 1.3s infinite; }
.chev { margin-left: 10px; font-size: 9px; color: var(--c-faint); transition: transform .25s; flex: none; }
.stage.open .chev { transform: rotate(180deg); }

/* body reveal */
.stage-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s cubic-bezier(.4,0,.2,1), opacity .45s, margin .45s;
}
.stage.active .stage-body, .stage.done .stage-body { max-height: 340px; opacity: 1; margin-top: 13px; }

/* DETECT — signal chips */
.signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sigchip {
  display: flex; align-items: center; gap: 9px;
  background: var(--c-inset);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--c-text);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .35s, transform .35s, border-color .35s;
}
.sigchip.in { opacity: 1; transform: none; }
.sigchip.span2 { grid-column: 1 / -1; }
.sigchip .si { width: 15px; height: 15px; flex: none; color: var(--red); display: grid; place-items: center; }
.sigchip.warn { border-color: rgba(224,85,47,.35); }
.sigchip b { font-weight: 600; }

/* ARCHETYPE */
.arch { display: flex; align-items: center; gap: 14px; }
.arch-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  border: 1px solid rgba(224,171,76,.5);
  background: radial-gradient(circle at 35% 30%, rgba(224,171,76,.28), rgba(224,171,76,.06));
  display: grid; place-items: center;
  color: var(--gold);
}
.arch-main { min-width: 0; flex: 1; }
.arch-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.arch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.atag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-soft);
  border: 1px solid var(--c-line2);
  border-radius: 999px;
  padding: 4px 9px;
}
.conf {
  flex: none;
  width: 76px; height: 64px;
  border-radius: 9px;
  border: 1px solid rgba(224,171,76,.45);
  background: linear-gradient(160deg, rgba(224,171,76,.16), rgba(224,171,76,.04));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.conf .cv { font-family: var(--serif); font-size: 27px; font-weight: 600; color: var(--gold); line-height: 1; }
.conf .cl { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: 4px; opacity: .85; }

/* DIAGNOSE / RECOVER shared */
.causa { display: flex; gap: 13px; align-items: flex-start; }
.causa-ic {
  width: 40px; height: 40px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--c-line2);
  background: var(--c-inset);
}
.stage[data-accent="gold"] .causa-ic { color: var(--gold); border-color: rgba(224,171,76,.3); }
.stage[data-accent="red"] .causa-ic { color: var(--red); border-color: rgba(224,85,47,.3); }
.causa-txt { font-size: 14.5px; line-height: 1.42; color: var(--c-text); }
.causa-txt .em-red { color: var(--red); font-weight: 600; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.dtag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--c-line2); border-radius: 999px; padding: 5px 10px; color: var(--c-soft);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.dtag.in { opacity: 1; transform: none; }
.stage[data-accent="gold"] .dtag.in { border-color: rgba(224,171,76,.4); color: var(--gold); }

/* RECOVER uplift box */
.uplift {
  margin-top: 12px;
  border: 1px solid rgba(224,85,47,.4);
  border-radius: 9px;
  background: linear-gradient(120deg, rgba(224,85,47,.12), rgba(224,85,47,.03));
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  opacity: 0; transform: translateY(5px);
  transition: opacity .4s, transform .4s;
}
.uplift.in { opacity: 1; transform: none; }
.uplift .ul { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-soft); }
.uplift .uv { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--red); line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.uplift .uv .uarrow { font-size: 16px; }

/* under-the-hood detail */
.stage-detail { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .3s, margin .3s; }
.stage.open .stage-detail { max-height: 300px; opacity: 1; margin-top: 13px; }
.detail-inner { border-top: 1px solid var(--c-line); padding-top: 12px; }
.detail-k { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 9px; }
.sig-grid { display: flex; flex-direction: column; gap: 6px; }
.sg { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--c-soft); }
.sg b { color: var(--c-text); font-weight: 500; }
.sg .hot { color: var(--red); }
.detail-note { font-size: 11.5px; color: var(--c-soft); line-height: 1.5; margin-top: 10px; }
.holdout { display: flex; gap: 4px; margin-top: 4px; }
.holdout .seg { height: 22px; border-radius: 4px; }

/* event stream */
.stream {
  border: 1px solid var(--c-line);
  border-radius: 11px;
  background: #0E0B07;
  overflow: hidden;
}
.stream-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-line);
}
.stream-head .sd { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }
.stream-head .sk { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-soft); }
.stream-head .scount { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--c-faint); }
.stream-body {
  height: 80px;
  overflow: hidden;
  padding: 8px 14px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
}
.log-line { display: grid; grid-template-columns: 64px 96px 1fr; gap: 8px; color: #9A917C; white-space: nowrap; }
.log-line .lt { color: #5F5849; }
.log-line .le { color: #C7BEAA; }
.log-line.flag .le { color: var(--red); font-weight: 600; }
.log-line.flag .lt { color: #8a4a32; }
.log-line.good .le { color: var(--green); }

/* ============================================================
   RIGHT — STOREFRONT CARD
   ============================================================ */
.store {
  background: var(--s-bg);
  border-radius: 14px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
}
.store-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  color: var(--ink);
}
.store-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* nav */
.s-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--s-line);
  position: sticky; top: 0; background: var(--s-bg); z-index: 5;
}
.s-brand { font-family: var(--serif); line-height: 1; }
.s-brand .bn { font-size: 27px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink); }
.s-brand .bs { font-family: var(--sans); font-size: 9px; letter-spacing: 0.42em; color: var(--s-faint); text-transform: uppercase; margin-top: 4px; padding-left: 3px; }
.s-nav-links { display: flex; gap: 26px; margin-left: auto; }
.s-nav-links a {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--s-soft); text-decoration: none; transition: color .2s;
}
.s-nav-links a:hover { color: var(--ink); }
.s-cart { position: relative; width: 26px; height: 26px; color: var(--ink); }
.s-cart .badge {
  position: absolute; top: -6px; right: -7px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}

/* body grid */
.s-body { display: grid; grid-template-columns: 1.32fr 1fr; }
.s-cart-col { padding: 20px 24px 22px; border-right: 1px solid var(--s-line); }
.s-summary-col { padding: 20px 24px 22px; background: var(--s-wash); }

.s-h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); margin: 0 0 13px; letter-spacing: 0.01em; }

/* free shipping progress */
.ship-progress { margin-bottom: 22px; }
.ship-progress .spt { font-size: 12.5px; color: var(--s-soft); margin-bottom: 9px; }
.ship-progress .spt b { color: var(--rose-deep); font-weight: 600; }
.spbar-row { display: flex; align-items: center; gap: 12px; }
.spbar { flex: 1; height: 7px; border-radius: 4px; background: #EFE7DC; overflow: hidden; }
.spbar > i { display: block; height: 100%; width: 70%; border-radius: 4px; background: linear-gradient(90deg, var(--rose), #E59A8B); transition: width .9s cubic-bezier(.4,0,.2,1); }
.spbar-val { font-family: var(--mono); font-size: 10.5px; color: var(--s-faint); white-space: nowrap; }
.ship-progress.unlocked .spt b { color: var(--green); }

/* line items */
.litem {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--s-line);
  align-items: center;
}
.litem:first-of-type { border-top: 1px solid var(--s-line); }
.lthumb { width: 84px; height: 84px; }
image-slot::part(frame) { border-radius: 10px; }
.lt-serum::part(frame)   { background: radial-gradient(120% 110% at 35% 25%, #F6DCC8 0%, #E7B89A 55%, #D49E7E 100%); }
.lt-cleanser::part(frame){ background: radial-gradient(120% 110% at 40% 28%, #FBF7F2 0%, #E9E2D7 60%, #D9D0C2 100%); }
.lt-lip::part(frame)     { background: radial-gradient(120% 110% at 38% 30%, #F8DAD6 0%, #E9AFAC 55%, #D98E8C 100%); }
.li-name { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.li-size { font-size: 12.5px; color: var(--s-faint); margin-top: 3px; }
.qty {
  display: inline-flex; align-items: center;
  margin-top: 11px;
  border: 1px solid var(--s-line2);
  border-radius: 7px;
  overflow: hidden;
}
.qty button { border: none; background: var(--s-bg); width: 28px; height: 28px; color: var(--s-soft); font-size: 15px; display: grid; place-items: center; }
.qty button:hover { background: var(--s-wash); color: var(--ink); }
.qty .qn { width: 34px; text-align: center; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.li-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 40px; height: 84px; justify-content: space-between; }
.li-price { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.li-trash { width: 17px; height: 17px; color: var(--s-faint); cursor: pointer; transition: color .2s; }
.li-trash:hover { color: var(--rose-deep); }

.continue { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--rose-deep); cursor: pointer; }
.continue svg { width: 16px; height: 16px; }

/* summary */
.srow { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 13.5px; color: var(--s-soft); }
.srow .sv { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.srow.ship {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 11px 12px;
  margin: 2px -12px;
  transition: border-color .4s, background .4s;
}
.srow.ship .slabel { display: inline-flex; align-items: center; gap: 9px; }
.srow.ship .slabel svg { width: 18px; height: 18px; color: var(--s-soft); }
.srow.ship.heat { border-color: var(--rose); background: var(--rose-wash); }
.srow.ship.heat .sv { color: var(--rose-deep); }
.srow.ship .sv s { color: var(--s-faint); margin-right: 8px; font-weight: 400; }
.ship-free { color: var(--green); font-weight: 700; }
.sdiv { height: 1px; background: var(--s-line2); margin: 12px 0; }
.srow.total { padding: 4px 0 0; }
.srow.total .tl { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--ink); }
.srow.total .tv { display: flex; align-items: baseline; gap: 8px; }
.srow.total .tv .cur { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--s-faint); }
.srow.total .tv .amt { font-family: var(--serif); font-size: 27px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* promo */
.promo-wrap { margin-top: 20px; }
.promo-label { font-size: 12.5px; color: var(--s-soft); margin-bottom: 8px; }
.promo { display: flex; gap: 8px; }
.promo input {
  flex: 1;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 12px 13px; border: 1px solid var(--s-line2); border-radius: 8px; background: var(--s-bg);
  color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.promo input::placeholder { color: var(--s-faint); letter-spacing: 0.04em; }
.promo input.focusring { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(208,106,94,.14); }
.promo button {
  border: 1px solid var(--ink); background: var(--s-bg); border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink); padding: 0 20px; transition: background .2s, color .2s;
}
.promo button:hover { background: var(--ink); color: #fff; }
.promo-msg {
  font-size: 11.5px; color: var(--rose-deep); margin-top: 9px;
  display: none; align-items: center; gap: 7px;
}
.promo-msg.show { display: flex; }
.promo-msg svg { width: 13px; height: 13px; }

/* nudge banner (injected by recover) */
.nudge {
  margin-top: 16px;
  border: 1px solid rgba(111,191,138,.5);
  background: linear-gradient(100deg, rgba(111,191,138,.14), rgba(111,191,138,.04));
  border-radius: 9px;
  padding: 0 14px;
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .4s, padding .4s, margin .4s;
}
.nudge.show { max-height: 80px; opacity: 1; padding: 13px 14px; }
.nudge .nspark { width: 28px; height: 28px; border-radius: 50%; background: rgba(111,191,138,.18); color: #3F9E63; display: grid; place-items: center; flex: none; }
.nudge .nt { font-size: 13px; font-weight: 600; color: #2F7A4A; }
.nudge .ns { font-size: 11px; color: #4E8A66; margin-top: 2px; }

/* CTA */
.cta {
  margin-top: 16px;
  width: 100%;
  border: none;
  background: var(--rose);
  color: #fff;
  font-size: 15px; font-weight: 600;
  padding: 16px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .35s, transform .15s, opacity .3s;
}
.cta svg { width: 16px; height: 16px; }
.cta:hover { transform: translateY(-1px); background: var(--rose-deep); }
.cta.firing { background: var(--rose-deep); }
.cta.complete { background: #2F7A4A; }
.cta.complete:hover { background: #2F7A4A; }
.cta.abandoned { background: #E7E0D5; color: var(--s-faint); cursor: default; }
.cta.abandoned:hover { transform: none; }

.secure { margin-top: 12px; text-align: center; font-size: 12px; color: var(--s-soft); display: flex; align-items: center; justify-content: center; gap: 7px; }
.secure svg { width: 13px; height: 13px; }

.accept { margin-top: 18px; }
.accept .al { font-size: 11px; color: var(--s-faint); margin-bottom: 9px; }
.pay-row { display: flex; gap: 8px; }
.pay {
  height: 30px; min-width: 44px; padding: 0 9px;
  border: 1px solid var(--s-line2); border-radius: 6px; background: var(--s-bg);
  display: grid; place-items: center;
  font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
}
.pay.visa { color: #1A1F71; font-style: italic; }
.pay.mc { gap: 0; }
.pay.mc .mc-a, .pay.mc .mc-b { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.pay.mc .mc-a { background: #EB001B; }
.pay.mc .mc-b { background: #F79E1B; margin-left: -6px; mix-blend-mode: multiply; }
.pay.amex { color: #fff; background: #2E77BC; border-color: #2E77BC; font-size: 8px; letter-spacing: 0.04em; }
.pay.apple { color: var(--ink); font-weight: 600; font-size: 11px; }
.pay.paypal { color: #003087; font-style: italic; font-size: 11px; }
.pay.paypal .pp2 { color: #009CDE; }

/* lost note for without-baysly */
.lost-note { margin-top: 14px; border: 1px solid var(--s-line2); border-radius: 9px; padding: 13px 15px; background: var(--s-bg); display: none; }
.lost-note.show { display: block; }
.lost-note .ln-t { font-family: var(--serif); font-size: 19px; font-style: italic; color: var(--s-soft); }
.lost-note .ln-s { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-faint); margin-top: 6px; }

/* simulated cursor */
.sim-cursor { position: absolute; top: 0; left: 0; width: 22px; height: 22px; z-index: 60; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(.45,.05,.3,1), opacity .35s; will-change: transform; }
.sim-cursor svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.sim-cursor.show { opacity: 1; }
.sim-cursor .ring { position: absolute; top: -7px; left: -7px; width: 30px; height: 30px; border: 2px solid var(--rose); border-radius: 50%; opacity: 0; }
.sim-cursor.click .ring { animation: clickpulse .5s ease-out; }
@keyframes clickpulse { 0%{opacity:.9; transform: scale(.3);} 100%{opacity:0; transform: scale(1.5);} }

/* engine off */
.stages.engine-off .stage { display: none; }
.engine-off-banner {
  display: none;
  border: 1px dashed var(--c-line2); border-radius: 11px; padding: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-faint); text-align: center; background: var(--c-surface);
}
.stages.engine-off .engine-off-banner { display: block; }

/* ============================================================
   v3 ADDITIONS — multi-page, archetypes, interventions, panel
   ============================================================ */

/* console container — fits the viewport, no internal scroll on the pipeline */
.console-wrap { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 11px; }
.con-header .ch-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-soft); }
.con-tabs { display: flex; gap: 5px; }
.con-tab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); background: transparent; border: 1px solid transparent; padding: 8px 13px; border-radius: 8px; transition: .2s; }
.con-tab:hover { color: var(--c-soft); }
.con-tab.on { color: var(--c-text); background: var(--c-surface2); border-color: var(--c-line2); }
.con-tabbody { min-height: 0; display: flex; flex-direction: column; }
.con-tabbody > [data-tabpane] { display: none; flex: 1; min-height: 0; }
#console[data-tab="diagnosis"] [data-tabpane="diagnosis"] { display: flex; }
#console[data-tab="controls"] [data-tabpane="controls"] { display: flex; }
.controls-pane { flex-direction: column; gap: 14px; overflow-y: auto; padding: 2px 4px 4px 0; }
.controls-pane::-webkit-scrollbar { width: 6px; }
.controls-pane::-webkit-scrollbar-thumb { background: var(--c-line2); border-radius: 3px; }
.logo-mark img, .ch-mark img, .cp-title img { border-radius: 50%; display: block; }
.ch-mark img { box-shadow: 0 0 0 1px var(--c-line2); }

/* ============================================================
   CONTROL DECK  (always visible — this is the control panel)
   ============================================================ */
.deck {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 13px;
  padding: 13px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.deck-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 8px; }
.deck-archs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.da {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: 1px solid var(--c-line); background: var(--c-inset);
  border-radius: 10px; padding: 9px 11px; transition: border-color .18s, background .18s, box-shadow .18s;
}
.da:hover { border-color: var(--c-line2); }
.da.on { border-color: color-mix(in srgb, var(--da-c) 60%, transparent); background: var(--c-surface2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-c) 26%, transparent); }
.da-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.da-main { display: flex; flex-direction: column; min-width: 0; }
.da-label { font-size: 12.5px; font-weight: 600; color: var(--c-soft); line-height: 1.1; }
.da.on .da-label { color: var(--c-text); }
.da-id { font-family: var(--mono); font-size: 9.5px; color: var(--c-faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.deck-rk { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-faint); }
.deck-pages { display: flex; gap: 6px; flex-wrap: wrap; }
.dp { border: 1px solid var(--c-line2); background: var(--c-inset); color: var(--c-soft); border-radius: 8px; padding: 8px 13px; font-size: 11.5px; font-weight: 500; transition: .18s; }
.dp:hover { color: var(--c-text); }
.dp.on { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.dp.off, .dp:disabled { opacity: .38; cursor: not-allowed; border-style: dashed; background: var(--c-inset); color: var(--c-faint); }
.deck .cp-readout { margin-top: 1px; }

/* ============================================================
   PIPELINE  (4 compact steps + one detail panel)
   ============================================================ */
.pipe { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 10px; min-height: 0; }
.pipe-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ps {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: 11px; padding: 11px 11px 10px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.ps:hover { border-color: var(--c-line2); }
.ps-top { display: flex; align-items: center; gap: 8px; }
.ps-n { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: #fff; background: var(--c-faint); flex: none; transition: background .35s; }
.ps-t { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-soft); }
.ps-f { font-family: var(--mono); font-size: 10px; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps.done .ps-n, .ps.live .ps-n { background: var(--psc); color: #1c1407; }
.ps.live { border-color: color-mix(in srgb, var(--psc) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--psc) 22%, transparent); }
.ps.live .ps-f { color: var(--psc); }
.ps.sel { background: var(--c-surface2); border-color: var(--c-line2); }
.ps.sel .ps-t { color: var(--c-text); }

.pipe-detail {
  border: 1px solid var(--c-line2); background: var(--c-surface2);
  border-radius: 13px; padding: 15px 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.pd-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 11px; }
.pd-note { font-size: 11.5px; color: var(--c-soft); line-height: 1.5; margin-top: 13px; }
.pd-cohorts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin-top: 14px; }
.coh { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--c-soft); border-bottom: 1px solid var(--c-line); padding-bottom: 6px; }
.coh b { color: var(--c-text); font-weight: 500; }
.coh b.hot { color: var(--ac); }
.pipe-detail .signals { grid-template-columns: 1fr 1fr; }

/* diagnose differential — direct, per-archetype evidence */
.pd-diff { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.pd-diff-k { font-family: var(--mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 2px; }
.diffrow { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.diffrow .dx { width: 16px; height: 16px; display: grid; place-items: center; color: var(--c-faint); }
.diffrow .dx svg { width: 14px; height: 14px; }
.diffrow .dxo { font-family: var(--mono); font-size: 13px; line-height: 1; color: var(--c-faint); opacity: .7; }
.diffrow .dname { color: var(--c-soft); }
.diffrow .dverdict { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em; color: var(--c-faint); white-space: nowrap; }
.diffrow.on .dx { color: var(--ac); }
.diffrow.on .dname { color: var(--c-text); font-weight: 600; }
.diffrow.on .dverdict { color: var(--ac); }

/* archetype accent (uses --ac inherited from #stages) */
.stage[data-accent="arch"].active { border-color: color-mix(in srgb, var(--ac) 45%, var(--c-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 16%, transparent), 0 16px 44px -26px color-mix(in srgb, var(--ac) 55%, transparent); }
.stage[data-accent="arch"].active .snum, .stage[data-accent="arch"].done .snum { background: var(--ac); color: #1c1407; }
.stage[data-accent="arch"] .causa-ic { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 30%, transparent); }
.stage[data-accent="arch"] .dtag.in { border-color: color-mix(in srgb, var(--ac) 40%, transparent); color: var(--ac); }
.arch-id { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--ac); letter-spacing: 0.01em; word-break: break-all; line-height: 1.05; }
.arch-avatar { border-color: color-mix(in srgb, var(--ac) 50%, transparent); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ac) 28%, transparent), transparent); color: var(--ac); }
.conf { border-color: color-mix(in srgb, var(--ac) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 16%, transparent), transparent); }
.conf .cv, .conf .cl { color: var(--ac); }
.atag.sig { color: var(--ac); border-color: color-mix(in srgb, var(--ac) 40%, transparent); display: inline-flex; align-items: center; gap: 5px; }
.atag.sig svg { width: 11px; height: 11px; }

/* top auto-play button */
.topauto { border: 1px solid var(--c-line2); background: var(--c-surface); color: var(--c-soft); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; padding: 11px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: .2s; }
.topauto:hover { color: var(--c-text); border-color: var(--c-soft); }
.topauto.on { background: var(--red); border-color: var(--red); color: #fff; }
.topauto .ta-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.topauto.on .ta-dot { animation: blink 1.2s infinite; }

/* signal badge on store nav */
.signal-badge { margin-left: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.signal-badge.on { opacity: 1; }
.signal-badge svg { width: 12px; height: 12px; color: var(--rose-deep); }

.anchor:empty { display: none; }
.anchor { display: block; }

/* product tones (shared by image-slot frames + plain swatches) */
image-slot::part(frame) { border-radius: 10px; }
.tone-serum,    image-slot.tone-serum::part(frame)    { background: radial-gradient(120% 110% at 35% 25%, #F6DCC8, #E7B89A 55%, #D49E7E); }
.tone-eye,      image-slot.tone-eye::part(frame)      { background: radial-gradient(120% 110% at 38% 28%, #F4ECDB, #E7D6B0 55%, #D8C290); }
.tone-lip,      image-slot.tone-lip::part(frame)      { background: radial-gradient(120% 110% at 38% 30%, #F8DAD6, #E9AFAC 55%, #D98E8C); }
.tone-cleanser, image-slot.tone-cleanser::part(frame) { background: radial-gradient(120% 110% at 40% 28%, #FBF7F2, #E9E2D7 60%, #D9D0C2); }
.tone-foundation,image-slot.tone-foundation::part(frame){ background: radial-gradient(120% 110% at 38% 28%, #F1E2CF, #E3CBA9 55%, #D2B58A); }
.tone-oil,      image-slot.tone-oil::part(frame)      { background: radial-gradient(120% 110% at 38% 28%, #EAD2A8, #D9A86B 55%, #B9824A); }

/* page padding */
.page-collection, .page-product { padding: 24px 30px 30px; }
.s-pagehead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.s-pagesub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-faint); }

/* collection grid */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pcard { cursor: pointer; }
.pcard-media { position: relative; border-radius: 10px; }
.pcard .prod-img { width: 100%; aspect-ratio: 1 / 1; height: auto; }
.pcard-name { font-size: 14.5px; font-weight: 600; margin-top: 11px; color: var(--ink); }
.pcard-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.pcard-price { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.pcard-sw { display: flex; gap: 5px; }
.pcard-sw .sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--s-line2); }
.pcard-sw .s0 { background: #D49E7E; } .pcard-sw .s1 { background: #C98A8C; } .pcard-sw .s2 { background: #B9824A; }
.pcard.pinned .pcard-media { box-shadow: 0 0 0 2px var(--rose); border-radius: 10px; }
.iv-pinlabel { position: absolute; top: 8px; left: 8px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; z-index: 3; }
.iv-pinlabel svg { width: 11px; height: 11px; }

/* PDP */
.pdp { display: grid; grid-template-columns: 0.9fr 1fr; gap: 26px; }
.pdp-media { aspect-ratio: 1 / 1; height: auto; border-radius: 12px; overflow: hidden; }
.litem .prod-img { width: 84px; height: 84px; }
.pdp-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose-deep); }
.pdp-name { font-family: var(--serif); font-size: 32px; font-weight: 600; margin: 6px 0 8px; color: var(--ink); }
.pdp-rating { display: flex; align-items: center; gap: 7px; color: #E0A23F; font-size: 12px; }
.pdp-rating span { color: var(--s-soft); }
.pdp-price { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 12px 0; position: relative; display: inline-block; color: var(--ink); }
.pdp-price.has-tip { cursor: help; }
.iv-pricetip { position: absolute; left: 0; top: 100%; margin-top: 8px; white-space: nowrap; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 500; padding: 8px 11px; border-radius: 8px; display: inline-flex; gap: 7px; align-items: center; z-index: 5; }
.iv-pricetip b { color: #fff; } .iv-pricetip svg { width: 13px; height: 13px; }
.pdp-vlabel { font-size: 12px; color: var(--s-soft); margin-bottom: 8px; }
.pdp-variants { display: flex; gap: 8px; flex-wrap: wrap; }
.vsw { position: relative; border: 1px solid var(--s-line2); background: var(--s-bg); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.vsw.on { border-color: var(--ink); }
.iv-vbadge { position: absolute; top: -9px; right: -8px; background: #6E40C9; color: #fff; font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 999px; opacity: 0; transform: translateY(3px); transition: .3s; }
.iv-vbadge.in { opacity: 1; transform: none; }
.pdp-atc { margin-top: 18px; width: 100%; border: none; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 15px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.pdp-atc svg { width: 16px; height: 16px; }
.pdp-atc:hover { background: #000; }
.pdp-desc { font-size: 13px; color: var(--s-soft); line-height: 1.5; margin-top: 14px; }
.pdp-reviews { margin-top: 24px; border-top: 1px solid var(--s-line); padding-top: 16px; }
.pdpr-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-faint); margin-bottom: 10px; }
.pdpr-row { font-size: 13px; color: var(--s-soft); display: flex; align-items: center; gap: 8px; }
.pdpr-stars { color: #E0A23F; display: inline-flex; }

/* checkout */
.co-field { margin-bottom: 13px; }
.co-field label { display: block; font-size: 11px; color: var(--s-soft); margin-bottom: 5px; }
.co-field input { width: 100%; padding: 11px 12px; border: 1px solid var(--s-line2); border-radius: 8px; font-size: 13px; color: var(--ink); background: var(--s-bg); font-family: var(--sans); outline: none; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-pay-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-faint); margin: 18px 0 10px; }
.co-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s-line2); border-radius: 8px; padding: 12px; font-size: 13px; color: var(--ink); }
.co-card-i { color: var(--s-soft); display: flex; } .co-card-dots { margin-left: auto; font-family: var(--mono); color: var(--s-soft); }
.co-mini { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.co-mini .li-name { font-size: 13.5px; } .co-mini .li-size { font-size: 12px; }
.co-mini .li-price { margin-left: auto; }
.co-mini-thumb { width: 40px; height: 40px; border-radius: 7px; flex: none; }

/* ---------- interventions ---------- */
.iv { animation: ivIn .45s ease both; }
@keyframes ivIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.iv-shipbar, .iv-meter { background: var(--rose-wash); border: 1px solid color-mix(in srgb, var(--rose) 40%, transparent); border-radius: 9px; padding: 11px 13px; margin: 12px 0; }
.ivsb-top, .ivm-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--s-soft); margin-bottom: 8px; }
.ivsb-top b, .ivm-top b { color: var(--rose-deep); } .ivsb-val, .ivm-val { font-family: var(--mono); font-size: 10.5px; color: var(--s-faint); }
.ivsb-track, .ivm-track { height: 6px; border-radius: 4px; background: #EFE0DA; overflow: hidden; }
.ivsb-track i, .ivm-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), #E59A8B); }
/* ship-hesitant · static demand-pressure bar (warm, ~60%, no countable claim) */
.iv-urgency { background: #FBF1E6; border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent); border-radius: 9px; padding: 10px 13px; margin: 12px 0 2px; }
.ivu-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #9A6516; margin-bottom: 8px; }
.ivu-top svg { width: 14px; height: 14px; color: #C8821E; flex: none; }
.ivu-track { height: 6px; border-radius: 4px; background: #F0E2CE; overflow: hidden; }
.ivu-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--red)); }
.iv-strip, .iv-secbar, .iv-affirm, .iv-counter { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--s-soft); margin: 12px 0; }
.iv-strip svg, .iv-affirm svg, .iv-counter svg { width: 15px; height: 15px; color: var(--rose-deep); flex: none; }
.iv-counter b, .iv-affirm b { color: var(--ink); }
.iv-secbar { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--s-faint); }
.iv-secbar svg { width: 14px; height: 14px; color: var(--green); flex: none; }
.iv-transp { display: flex; gap: 11px; align-items: center; background: var(--rose-wash); border: 1px solid color-mix(in srgb, var(--rose) 35%, transparent); border-radius: 9px; padding: 11px 13px; margin-bottom: 14px; }
.ivt-l { color: var(--green); display: flex; } .ivt-t { font-size: 13px; font-weight: 600; color: var(--ink); } .ivt-s { font-size: 11.5px; color: var(--s-soft); margin-top: 2px; }
.iv-trust { display: flex; gap: 16px; margin: 14px 0; flex-wrap: wrap; }
.ivtc { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--s-soft); }
.ivtc-i { color: var(--green); display: flex; } .ivtc-i svg { width: 15px; height: 15px; }
.iv-review { border: 1px solid var(--s-line2); border-radius: 9px; padding: 12px 14px; margin: 14px 0; background: var(--s-wash); }
.ivrv-stars { color: #E0A23F; display: flex; gap: 1px; } .ivrv-txt { font-size: 13px; color: var(--ink); margin: 7px 0 4px; font-style: italic; } .ivrv-by { font-size: 11px; color: var(--s-faint); }
.iv-rail { margin: 14px 0; }
.ivr-k { font-size: 11px; color: var(--s-soft); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .ivr-k svg { width: 13px; height: 13px; }
.ivr-card { display: flex; align-items: center; gap: 11px; border: 1px solid var(--s-line2); border-radius: 9px; padding: 9px 11px; }
.ivr-thumb { width: 36px; height: 36px; border-radius: 7px; flex: none; } .ivr-name { font-size: 13px; font-weight: 500; } .ivr-price { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.iv-paypanel { display: flex; gap: 10px; align-items: center; background: var(--s-wash); border: 1px solid var(--s-line2); border-radius: 9px; padding: 11px 13px; margin: 12px 0; }
.ivpp-i { color: var(--green); display: flex; } .ivpp-t { font-size: 12.5px; font-weight: 600; color: var(--ink); } .ivpp-s { font-size: 11px; color: var(--s-soft); }
.iv-inactive { display: flex; align-items: center; gap: 10px; background: #EEF3FB; border: 1px solid #CBDBF2; border-radius: 9px; padding: 12px 14px; margin-top: 18px; font-size: 12.5px; color: #3A567E; }
.iv-inactive svg { width: 15px; height: 15px; color: #3B82F6; flex: none; } .iv-inactive b { color: #1f3a63; }
/* inactivity nudge auto-dismisses (it is a strip, never a modal) */
.iv-inactive { animation: ivAutoDismiss 9.5s ease forwards; }
@keyframes ivAutoDismiss { 0% { opacity: 0; transform: translateY(6px); } 6% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); visibility: hidden; } }
.iv-persist { display: flex; align-items: center; gap: 11px; background: #EEF3FB; border: 1px solid #CBDBF2; border-radius: 9px; padding: 11px 13px; margin-bottom: 10px; }
.ivp-thumb { width: 36px; height: 36px; border-radius: 7px; flex: none; } .ivp-t { font-size: 13px; font-weight: 600; color: #1f3a63; } .ivp-s { font-size: 11px; color: #54709A; }
.iv-progress { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; flex-wrap: wrap; }
.ivpg-step { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--s-faint); padding: 6px 10px; border: 1px solid var(--s-line2); border-radius: 999px; }
.ivpg-step.on { color: #fff; background: #3B82F6; border-color: #3B82F6; } .ivpg-arr { color: var(--s-faint); display: flex; } .ivpg-arr svg { width: 13px; height: 13px; }

/* ---------- control panel ---------- */
.control-panel { position: fixed; top: 62px; right: 18px; width: 300px; background: var(--c-surface); border: 1px solid var(--c-line2); border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); z-index: 200; overflow: hidden; }
.cp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--c-line); }
.cp-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--c-text); }
.cp-collapse { width: 24px; height: 24px; border: 1px solid var(--c-line2); background: transparent; color: var(--c-soft); border-radius: 7px; font-size: 14px; line-height: 1; }
.cp-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 13px; max-height: 76vh; overflow-y: auto; }
.control-panel.collapsed .cp-body { display: none; }
.control-panel.playing-min .cp-body { display: none; }
.control-panel.playing-min { width: 220px; opacity: 0.92; }
.cp-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-faint); margin-bottom: 8px; }
.cp-archs { display: grid; gap: 6px; }
.cp-arch { display: flex; align-items: center; gap: 9px; border: 1px solid var(--c-line); background: var(--c-inset); border-radius: 9px; padding: 9px 11px; text-align: left; }
.cp-arch:hover { border-color: var(--c-line2); }
.cp-arch.on { border-color: color-mix(in srgb, var(--c-text) 40%, transparent); background: var(--c-surface2); }
.cpa-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cpa-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cpa-id { font-family: var(--mono); font-size: 10.5px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpa-label { font-size: 11px; color: var(--c-faint); margin-top: 1px; white-space: nowrap; }
.cp-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-page { border: 1px solid var(--c-line); background: var(--c-inset); color: var(--c-soft); border-radius: 8px; padding: 8px; font-size: 11.5px; font-weight: 500; }
.cp-page.on { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }
.cp-page:disabled, .cp-page.off { opacity: .4; cursor: not-allowed; background: var(--c-inset); color: var(--c-faint); border-style: dashed; }
.cp-pagenote { font-family: var(--mono); font-size: 9px; line-height: 1.55; letter-spacing: 0.02em; color: var(--c-faint); margin-top: 9px; }
.cp-toggle { display: flex; border: 1px solid var(--c-line2); border-radius: 999px; padding: 3px; }
.cp-toggle button { flex: 1; border: none; background: transparent; color: var(--c-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px; border-radius: 999px; }
.cp-toggle button.on[data-b="on"] { background: var(--red); color: #fff; }
.cp-toggle button.on[data-b="off"] { background: var(--c-text); color: var(--c-bg); }
.cp-readout { border: 1px solid var(--c-line); border-radius: 9px; padding: 11px 12px; font-size: 11px; line-height: 1.5; color: var(--c-soft); display: flex; flex-direction: column; gap: 2px; background: var(--c-inset); }
.cp-readout .cpr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-faint); margin-bottom: 4px; }
.cp-readout.off, .cp-readout.none { color: var(--c-faint); }
.cp-readout.live { border-color: color-mix(in srgb, var(--c-text) 20%, transparent); }
.cp-readout b { color: var(--c-text); font-weight: 600; }
.cpr-plus { font-size: 9.5px; color: var(--c-faint); margin-top: 5px; font-style: italic; }
.cp-actions { display: flex; gap: 8px; }
.cp-run { flex: 1; border: 1px solid var(--red); background: var(--red); color: #fff; border-radius: 9px; padding: 10px; font-size: 11.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; }
.cp-run svg { width: 14px; height: 14px; } .cp-run:disabled { opacity: .5; }
.cp-auto { border: 1px solid var(--c-line2); background: var(--c-inset); color: var(--c-soft); border-radius: 9px; padding: 10px 12px; font-size: 11.5px; font-weight: 500; }
.cp-auto.on { background: var(--red); border-color: var(--red); color: #fff; }

@media (max-width: 880px) {
  .app { height: auto; }
  .split { grid-template-columns: 1fr; }
  .s-body { grid-template-columns: 1fr; }
  .s-cart-col { border-right: none; border-bottom: 1px solid var(--s-line); }
  .pdp { grid-template-columns: 1fr; }
  .control-panel { position: absolute; }
}