/* ===========================================================================
   The product-research UI replica that lives inside the demo window.

   WHAT THIS IS. A replica of the real app at localhost:3000, not an
   impression of it. The tokens below are the running app's own computed
   custom properties with data-theme="dark", read off the page rather than
   guessed, and the feed's column widths are measured off a 1440 capture of
   /feed. When the app's UI changes, this goes stale and must be re-measured;
   `review/app-feed-dark.png` is the frame it was matched to.

   TWO CANVASES, NOT ONE. Everything is authored at a fixed pixel size and
   scaled by demo.js to whatever the window is:

     desktop   1440 x 900   the real app's own proportions
     compact    560 x 560   a square, for a phone

   A single canvas cannot do both. Scaling 1440 down into a 358px phone stage
   gives a 0.25 factor and 3px type — which is what the previous build did and
   why the mock was unreadable on a phone. `.app.compact` is a genuinely
   different arrangement: no filter rail, four columns instead of ten, one
   column on the product page, and the storefront stacked.

   The product data is PLACEHOLDER — everyday items, invented figures. Nothing
   here is a listing and no number beside it is a measurement.
   =========================================================================== */

.app {
  --paper:#0d0727; --surface:#161036; --sunken:#1e1747; --well:#2a2160;
  --ink:#eeebff; --ink2:#b9b3e8; --ink3:#8d86c2;
  --rule:#eeebff1f; --rule-s:#eeebff3d;
  --signal:#a68aff; --signal-hi:#baa3ff; --signal-wash:#a68aff24; --signal-edge:#a68aff5c;
  --flag:#ff5cc0; --up:#2fe0a5; --down:#ff6f92;
  --mono:'DM Mono', ui-monospace, 'SF Mono', monospace;
  width: 1440px; height: 900px;
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.app * { box-sizing: border-box; }
.app .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.app svg { display: block; }

/* the landing's global heading rule (lowercase, fw500, -0.05em) must not reach
   inside the product UI — the real app is sentence case */
.app h1, .app h2, .app h3 {
  text-transform: none; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.2; color: var(--ink); margin: 0;
}

/* ---- app chrome ---------------------------------------------------------- */

.a-nav {
  height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 24px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  position: relative; z-index: 20;
}
.a-logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-0.04em; }
.a-logo .d { width:10px; height:10px; border-radius:2px; background:var(--signal); transform:rotate(45deg); }
.a-tabs { display:flex; gap:6px; }
.a-tab { font-size:14px; font-weight:600; color:var(--ink3); padding:7px 16px; border-radius:999px; }
.a-tab.on { background:var(--signal-wash); color:var(--signal); }
.a-nav-r { margin-left:auto; display:flex; gap:14px; align-items:center; color:var(--ink2); }
.a-icon { width:20px; height:20px; }
.a-icon svg { width:100%; height:100%; }

/* ---- screens ------------------------------------------------------------- */

.a-screen {
  position: absolute; inset: 60px 0 0 0;
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease;
}
.a-screen.on { opacity: 1; visibility: visible; }

/* =========================== SCREEN 1 · FEED =============================== */

.f-wrap { display: flex; height: 100%; }

.f-side {
  width: 280px; flex: 0 0 280px; padding: 18px 20px 0;
  border-right: 1px solid var(--rule); display: flex; flex-direction: column;
}
.f-collapse { width:18px; height:18px; color:var(--ink3); margin-bottom:16px; }
.f-collapse svg { width:100%; height:100%; }
.f-views {
  height:40px; border-radius:10px; box-shadow: inset 0 0 0 1px var(--rule-s);
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:22px;
}
.f-views span { display:flex; align-items:center; gap:9px; }
.f-views svg { width:15px; height:15px; color:var(--ink2); }
.chev { width:8px; height:8px; border-right:1.4px solid var(--ink3); border-bottom:1.4px solid var(--ink3); transform:rotate(45deg) translateY(-2px); }
.f-grp { font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink3); margin:14px 0 6px; }
.f-filter {
  height:44px; display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; color:var(--ink); border-bottom:1px solid var(--rule);
}
.f-apply { margin-top:auto; padding:18px 0; display:flex; align-items:center; gap:16px; }
.f-apply span { font-size:13px; color:var(--ink3); }
.f-apply b {
  flex:1; height:40px; border-radius:999px; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:13.5px; font-weight:700;
}

.f-main { flex:1; min-width:0; padding: 16px 24px 0; display:flex; flex-direction:column; }

.f-tools { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.f-search {
  flex:1; max-width:380px; height:42px; border-radius:10px;
  box-shadow: inset 0 0 0 1px var(--rule-s);
  display:flex; align-items:center; gap:10px; padding:0 14px;
  font-size:14px; color:var(--ink3);
}
.f-search svg { width:15px; height:15px; }
.f-seg, .d-seg { display:flex; gap:2px; padding:3px; border-radius:999px; box-shadow: inset 0 0 0 1px var(--rule); }
.f-seg span, .d-seg span {
  padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink2);
}
.f-seg span.on, .d-seg span.on { background:var(--signal); color:var(--paper); }
.f-dates {
  height:40px; border-radius:999px; box-shadow: inset 0 0 0 1px var(--rule-s);
  display:flex; align-items:center; gap:9px; padding:0 16px; font-size:13.5px; font-weight:600;
}
.f-dates svg { width:15px; height:15px; color:var(--ink2); }
.f-count { margin-left:auto; font-size:13px; color:var(--ink3); }
.f-count b { font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-0.03em; margin-right:5px; }

/* Column widths measured off a 1440 capture of the running /feed. */
.f-head, .f-row {
  display:grid;
  grid-template-columns: 50px 324px 104px 74px 92px 150px 78px 92px 92px 1fr;
  align-items:center;
}
.f-head {
  height:40px; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink3);
  border-bottom:1px solid var(--rule);
}
.f-head .c-rev { color:var(--ink); display:flex; align-items:center; gap:6px; }
.caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--ink2); }

.f-rows { flex:1; overflow:hidden; }
.f-row { height:120px; border-bottom:1px solid var(--rule); position:relative; }
.f-row.hot { background:var(--signal-wash); }
.f-row .c-rank { font-size:13px; color:var(--ink3); }

.f-p { display:flex; gap:16px; align-items:flex-start; padding-right:16px; }
.f-thumb { width:72px; height:72px; flex:0 0 72px; border-radius:10px; overflow:hidden; background:#fff; }
.f-thumb img { width:100%; height:100%; object-fit:cover; }
.f-meta { min-width:0; }
.f-title {
  font-size:14.5px; font-weight:700; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.f-line2 { margin-top:6px; font-size:13px; color:var(--ink2); display:flex; gap:8px; align-items:baseline; }
.f-line2 b { font-family:var(--mono); font-weight:500; color:var(--ink); }
.f-ship { font-size:12px; color:var(--ink3); }
.f-line3 { margin-top:5px; font-size:12px; color:var(--ink3); display:flex; gap:7px; align-items:center; }
.f-line3 .star { color:var(--ink2); }

.f-trend { position:absolute; top:22px; right:0; font-size:12px; font-weight:600; white-space:nowrap; }
.f-trend.up { color:var(--up); } .f-trend.down { color:var(--down); } .f-trend.flat { color:var(--ink2); }

.f-rev { font-family:var(--mono); font-size:22px; font-weight:500; color:var(--signal); letter-spacing:-0.02em; }
.f-rev i { display:block; height:2px; margin-top:7px; background:var(--signal); border-radius:2px; }
.f-rev i.part { background:repeating-linear-gradient(90deg,var(--signal) 0 5px,transparent 5px 10px); }
.f-num { font-family:var(--mono); font-size:15px; color:var(--ink); }
.f-num.dim { color:var(--ink2); font-size:14px; }
.f-num.up { color:var(--up); }
.f-spark { display:flex; align-items:flex-end; gap:1.5px; height:44px; padding-right:24px; }
.f-spark i { flex:1; background:var(--signal); opacity:.62; border-radius:1px; }
.f-vt { display:flex; gap:3px; }
.f-vt i { width:22px; height:30px; border-radius:3px; background:var(--well); overflow:hidden; }
.f-vt img { width:100%; height:100%; object-fit:cover; opacity:.85; }

/* ====================== SCREEN 2 · PRODUCT PAGE ============================ */

/* the script scrolls this; `hidden` still allows programmatic scrollTop and
   keeps the scrollbar out of the shot */
.d-scroll { position:absolute; inset:0; overflow:hidden; padding: 22px 28px 40px; }
.d-scroll > * { max-width: 1384px; }

.d-top { display:flex; align-items:center; margin-bottom:22px; }
.d-back { font-size:14.5px; font-weight:600; color:var(--ink2); display:flex; align-items:center; gap:10px; }
.arw { width:14px; height:9px; border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:skewX(-20deg) rotate(0deg); }
.d-actions { margin-left:auto; display:flex; gap:12px; }
.d-actions .ghost {
  height:40px; padding:0 20px; border-radius:999px; box-shadow: inset 0 0 0 1px var(--rule-s);
  display:flex; align-items:center; font-size:13.5px; font-weight:600; color:var(--ink);
}

.d-hero { display:grid; grid-template-columns: 300px 1fr 300px; gap:34px; margin-bottom:38px; }
.d-shot { position:relative; width:300px; height:300px; border-radius:16px; overflow:hidden; background:var(--well); }
.d-shot img { width:100%; height:100%; object-fit:cover; }
.d-count {
  position:absolute; right:10px; bottom:10px; padding:3px 9px; border-radius:999px;
  background:rgba(13,7,39,.78); font-size:11.5px; font-family:var(--mono); color:var(--ink);
}
.d-thumbs { display:flex; gap:9px; margin-top:12px; }
.d-thumbs i { width:52px; height:52px; border-radius:9px; overflow:hidden; background:var(--well); box-shadow: inset 0 0 0 1px var(--rule); }
.d-thumbs i.on { box-shadow: 0 0 0 2px var(--signal); }
.d-thumbs img { width:100%; height:100%; object-fit:cover; }

.d-crumb { font-size:13px; color:var(--ink2); margin:0 0 12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.d-crumb .up { color:var(--up); font-style:normal; font-weight:600; }
.d-crumb span { color:var(--ink3); }
.d-info h1 { font-size:31px; line-height:1.22; letter-spacing:-0.035em; margin-bottom:24px; }
.d-facts { display:flex; gap:56px; margin-bottom:22px; }
.d-facts label, .d-vids label, .d-cost label, .d-stat label, .sb-card label, .am-card label {
  display:block; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink3); margin-bottom:8px;
}
.d-facts b, .d-vids b { font-size:26px; font-weight:800; letter-spacing:-0.03em; display:flex; align-items:baseline; gap:8px; }
.d-facts em, .d-vids em { font-size:15px; font-weight:500; font-style:normal; color:var(--ink3); }
.d-facts small { display:block; font-size:12.5px; color:var(--ink3); margin-top:6px; }
.d-facts .star { color:var(--signal); font-size:20px; font-style:normal; }
.d-vids { margin-bottom:20px; }
.d-chips { display:flex; gap:10px; flex-wrap:wrap; }
.d-chips span {
  font-size:12.5px; padding:7px 14px; border-radius:999px; color:var(--ink2);
  box-shadow: inset 0 0 0 1px var(--signal-edge);
}

.d-cost { border-radius:18px; padding:22px; box-shadow: inset 0 0 0 1px var(--rule); background:var(--surface); align-self:start; }
.d-cost h2.cheap { font-size:25px; color:var(--up); letter-spacing:-0.035em; margin-bottom:12px; }
.d-bars { display:flex; gap:6px; margin-bottom:16px; }
.d-bars i { flex:1; height:4px; border-radius:2px; background:var(--well); }
.d-bars i.on { background:var(--up); }
.d-cost p { font-size:12.5px; line-height:1.55; color:var(--ink2); margin:0 0 12px; }
.d-cost p.muted { color:var(--ink3); }
.d-ship { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; color:var(--ink); }
.d-ship b { font-size:19px; font-weight:500; }
.d-ship.sub { font-size:11.5px; color:var(--ink3); margin-top:2px; }
.d-find {
  margin-top:18px; height:44px; border-radius:999px; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}

.d-sec { margin-bottom:40px; }
.d-sec h2 { font-size:25px; letter-spacing:-0.035em; }
.d-sec-h { display:flex; align-items:flex-start; gap:24px; margin-bottom:18px; }
.d-sec-h p { font-size:13.5px; line-height:1.55; color:var(--ink2); margin:10px 0 0; max-width:760px; }
.d-sec-h .d-seg { margin-left:auto; flex:0 0 auto; }
.d-vcount { margin-left:auto; font-size:16px; font-weight:700; color:var(--ink); }
.d-lede { font-size:13.5px; line-height:1.55; color:var(--ink2); margin:10px 0 18px; max-width:820px; }

.d-panel { border-radius:20px; padding:24px; box-shadow: inset 0 0 0 1px var(--rule); background:var(--surface); }
#secPerf .d-panel { display:grid; grid-template-columns: 1fr 600px; gap:32px; }
.d-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px 20px; align-content:start; }
.d-stat { }
.d-stat b { display:block; font-size:30px; font-weight:800; letter-spacing:-0.035em; line-height:1; }
.d-stat b sub { font-size:17px; font-weight:700; vertical-align:baseline; }
.d-stat small { display:block; font-size:12.5px; color:var(--ink3); margin-top:8px; }
.d-stat .ul { display:block; height:2px; margin-top:10px; width:100%; background:linear-gradient(90deg,var(--signal) 0 32%,var(--rule-s) 32%); border-radius:2px; }
.d-stat .ul.short { background:linear-gradient(90deg,var(--signal) 0 16%,var(--rule-s) 16%); }
.d-stat .ul.dot { background:repeating-linear-gradient(90deg,var(--rule-s) 0 4px,transparent 4px 8px); }
.d-stat.lead {
  grid-column: span 2; border-radius:14px; padding:18px;
  box-shadow: inset 0 0 0 1px var(--signal-edge); margin:-18px 0 0 -18px;
}
.d-stat.lead b { font-size:42px; color:var(--signal); }

.d-chart { }
.d-chart-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; font-size:14px; }
.d-chart-h b { font-weight:700; } .d-chart-h span { color:var(--ink3); font-size:13px; }
.d-chart svg { width:100%; height:150px; }
.d-chart-f { display:flex; justify-content:space-between; margin-top:10px; font-size:11.5px; color:var(--ink3); }
.d-chart-f em { font-style:normal; }

/* --- validation: THREE separate sections -------------------------------
   It used to be a row of four rings (the fourth, Margin, has been dropped)
   with three unrelated cards underneath, and the checks read as an afterthought
   to the performance figures. Each check is now its own block carrying its own
   score, verdict and evidence, because validating before you spend is the
   thing the tool is for. */

.d-lab { display:block; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink3); margin-bottom:9px; }
.d-run-row { display:flex; gap:14px; }
.d-input {
  flex:1; height:48px; border-radius:12px; box-shadow: inset 0 0 0 1px var(--rule-s);
  display:flex; align-items:center; padding:0 16px; font-size:14.5px; color:var(--ink);
}
.d-input::after { content:''; width:1.5px; height:19px; background:var(--signal); margin-left:2px; animation: cbl 1s steps(1) infinite; }
@keyframes cbl { 50% { opacity:0; } }
.d-run {
  height:48px; padding:0 26px; border-radius:999px; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; white-space:nowrap;
}
.d-run.armed { box-shadow: 0 0 0 4px var(--signal-wash); }
.d-run .spin { display:none; width:15px; height:15px; border-radius:50%; border:2px solid rgba(13,7,39,.3); border-top-color:var(--paper); animation: sp .7s linear infinite; }
.d-run.busy .spin { display:block; }
@keyframes sp { to { transform: rotate(360deg); } }
.d-note { font-size:12px; color:var(--ink3); margin:10px 0 20px; }

.d-vchecks { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.d-vcheck {
  border-radius:18px; padding:22px; background:var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .4s ease;
}
.d-vcheck.done { box-shadow: inset 0 0 0 1px var(--signal-edge); }
.d-vc-h { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.d-vc-ring { position:relative; width:64px; height:64px; flex:0 0 64px; }
.d-vc-ring svg { width:64px; height:64px; }
.d-vc-ring .arc { stroke-dasharray:170; stroke-dashoffset:170; transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.d-vc-ring .rv { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:17px; color:var(--ink); }
.d-vc-t b { display:block; font-size:17px; font-weight:800; letter-spacing:-0.02em; }
.d-vc-t em { display:block; font-style:normal; font-size:12.5px; font-weight:800; letter-spacing:.07em; color:var(--up); margin-top:4px; }
.d-vcheck > p { font-size:12.5px; line-height:1.5; color:var(--ink3); margin:0 0 14px; }
.d-vc-body { opacity:0; transition: opacity .5s ease; }
.d-vc-body.in { opacity:1; }
.ck-row { display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid var(--rule); font-size:13px; color:var(--ink2); }
.ck-row b { font-size:15px; color:var(--ink); }
.ck-row b.up { color:var(--up); }

.d-vtable { padding:0; overflow:hidden; }
.v-head, .v-row { display:grid; grid-template-columns: 54px 1fr 160px 140px 110px 90px 120px; align-items:center; }
.v-head { height:48px; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink3); border-bottom:1px solid var(--rule); padding:0 22px; }
.v-row { height:96px; border-bottom:1px solid var(--rule); padding:0 22px; font-size:14px; }
.v-row:last-child { border-bottom:0; }
.v-clip { display:flex; gap:16px; align-items:center; }
.v-clip .th { width:54px; height:72px; border-radius:8px; overflow:hidden; background:var(--well); position:relative; flex:0 0 54px; }
.v-clip .th img { width:100%; height:100%; object-fit:cover; opacity:.9; }
.v-clip .th em { position:absolute; right:3px; bottom:3px; font-style:normal; font-size:9.5px; font-family:var(--mono); background:rgba(13,7,39,.8); padding:1px 4px; border-radius:4px; }
.v-clip b { display:block; font-size:14.5px; font-weight:700; }
.v-clip i { display:block; font-style:normal; font-size:13px; color:var(--signal); margin-top:3px; }
.v-clip small { display:block; font-size:12.5px; color:var(--ink3); margin-top:5px; max-width:460px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-rev { font-family:var(--mono); font-size:19px; color:var(--signal); }
.v-rev u { display:block; text-decoration:none; height:1px; margin-top:5px; background:repeating-linear-gradient(90deg,var(--signal) 0 4px,transparent 4px 8px); }
.v-n { font-family:var(--mono); font-size:16px; }
.v-d { font-size:13.5px; color:var(--ink2); }

.d-build-card {
  border-radius:20px; padding:26px 28px; display:flex; align-items:center; gap:30px;
  box-shadow: inset 0 0 0 1px var(--signal-edge); background:var(--surface);
}
.d-build-card h2 { font-size:23px; margin-bottom:8px; }
.d-build-card p { font-size:13.5px; line-height:1.55; color:var(--ink2); margin:0; max-width:700px; }
.d-build {
  margin-left:auto; height:50px; padding:0 30px; border-radius:999px; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; font-size:15px; font-weight:700; white-space:nowrap;
}

/* ============ SCREENS 3 & 4 · STORE BUILDER + ADS MANAGER ================== */
/* Neither exists in the app yet. They are built in the app's own tokens so
   the three stages read as one product rather than three pastiches. */

.sb-wrap { display:flex; height:100%; }
.sb-rail { width:224px; flex:0 0 224px; padding:22px 16px; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:6px; }
.sb-step { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; font-size:14px; font-weight:600; color:var(--ink3); }
.sb-step i { width:22px; height:22px; border-radius:50%; background:var(--well); color:var(--ink2); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:11.5px; font-weight:700; }
.sb-step.on { background:var(--signal-wash); color:var(--ink); }
.sb-step.on i { background:var(--signal); color:var(--paper); }
.sb-step.done i { background:var(--up); color:var(--paper); }
.sb-step.done { color:var(--ink2); }
.sb-rail-f { margin-top:auto; padding-top:18px; border-top:1px solid var(--rule); }
.sb-rail-f label { display:block; font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--ink3); margin-bottom:10px; }
.sb-rail-f span { display:block; font-size:12.5px; color:var(--ink2); margin-bottom:7px; }

.sb-main { flex:1; min-width:0; min-height:0; padding:22px 28px; display:flex; flex-direction:column; }
.sb-head { display:flex; align-items:flex-start; gap:20px; margin-bottom:18px; }
.sb-head h2 { font-size:25px; letter-spacing:-0.035em; }
.sb-head p { font-size:13.5px; color:var(--ink2); margin:8px 0 0; }
.sb-domain, .am-obj {
  margin-left:auto; height:36px; padding:0 16px; border-radius:999px; display:flex; align-items:center; gap:9px;
  box-shadow: inset 0 0 0 1px var(--rule-s); font-size:13px; color:var(--ink2); flex:0 0 auto;
}
.am-obj i { width:9px; height:9px; border-radius:50%; background:var(--up); }

.sb-themes { display:flex; gap:12px; margin-bottom:16px; }
.sb-theme {
  display:flex; align-items:center; gap:10px; height:40px; padding:0 16px; border-radius:999px;
  box-shadow: inset 0 0 0 1px var(--rule-s); font-size:13.5px; font-weight:700; color:var(--ink2);
}
.sb-theme i { width:16px; height:16px; border-radius:5px; }
.sb-theme em { font-style:normal; font-weight:500; font-size:12px; color:var(--ink3); }
.sb-theme.on { box-shadow: inset 0 0 0 1.5px var(--signal); color:var(--ink); }

/* --- the storefront preview. Shaped after the reference build in
       ~/Documents/Velora Perfect Example: announcement bar, marquee, centred
       wordmark, gallery with badges, offer ladder, perks row, sticky ATC. --- */
.sb-canvas {
  flex:1 1 0; min-height:0; border-radius:16px; overflow:hidden; background:#fbfbfd; color:#14131c;
  box-shadow: inset 0 0 0 1px var(--rule); font-size:12px; letter-spacing:0; min-height:0;
}
.sb-canvas h3 { color:#14131c; }
.st-bar { height:34px; background:#5b4ae0; color:#fff; display:flex; align-items:center; gap:12px; padding:0 16px; font-size:10.5px; }
.st-off { font-weight:800; letter-spacing:.09em; opacity:.85; }
.st-off-sub { opacity:.92; }
.st-clock { margin-left:auto; font-weight:700; letter-spacing:.06em; }
.st-marq { height:26px; background:#6b5bf0; color:#fff; display:flex; align-items:center; overflow:hidden; font-size:10px; font-weight:800; letter-spacing:.12em; }
.st-marq span { white-space:nowrap; padding-left:16px; }
.st-nav { height:44px; display:flex; align-items:center; gap:16px; padding:0 18px; border-bottom:1px solid #e7e7ef; }
.st-link { font-size:11px; font-weight:600; color:#4a4860; }
.st-logo { margin:0 auto; font-size:17px; font-weight:900; letter-spacing:.14em; color:#14131c; }
.st-ico { width:13px; height:13px; border-radius:3px; background:#dcdce8; }
.st-body { display:grid; grid-template-columns: 1fr 1fr; gap:20px; padding:16px 18px; }
.st-gal { min-width:0; }
.st-photo { position:relative; }
.st-photo > img { width:100%; height:296px; object-fit:cover; border-radius:10px; display:block; }
.st-badge {
  position:absolute; left:10px; bottom:10px; width:62px; height:62px; border-radius:50%;
  background:#1d1b3a; color:#fff; font-size:7.5px; font-weight:800; line-height:1.3;
  display:flex; align-items:center; justify-content:center; text-align:center; letter-spacing:.04em;
}
.st-revcard {
  position:absolute; right:10px; bottom:10px; background:#fff; border-radius:8px; padding:7px 11px;
  box-shadow:0 4px 14px rgba(20,19,28,.16); text-align:center;
}
.st-revcard b { display:block; font-size:10px; color:#f0a02a; letter-spacing:.06em; }
.st-revcard em { font-style:normal; font-size:9px; color:#6a687e; }
.st-strip { display:flex; gap:6px; margin-top:8px; }
.st-strip img { width:100%; height:44px; object-fit:cover; border-radius:6px; flex:1; min-width:0; }
.st-buy { min-width:0; }
.st-trust { display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:999px; background:#efedff; color:#4a3fd0; font-size:9px; font-weight:700; }
.st-stars { display:block; margin:9px 0 5px; font-size:10.5px; color:#f0a02a; }
.st-stars b { color:#14131c; }
.st-buy h3 { font-size:19px; font-weight:800; letter-spacing:-0.025em; line-height:1.15; margin-bottom:9px; }
.st-bul { list-style:none; margin:0 0 10px; padding:0; }
.st-bul li { position:relative; padding-left:16px; font-size:10.5px; line-height:1.75; color:#3b3950; }
.st-bul li::before { content:''; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:50%; background:#5b4ae0; }
.st-tiers { display:flex; flex-direction:column; gap:7px; margin-bottom:9px; }
.st-tier { position:relative; border-radius:9px; padding:10px 12px; box-shadow: inset 0 0 0 1px #e2e1ee; }
.st-tier.on { box-shadow: inset 0 0 0 2px #5b4ae0; background:#f7f6ff; }
.st-tag { position:absolute; right:8px; top:-7px; background:#5b4ae0; color:#fff; font-size:7.5px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border-radius:5px; }
.st-tag.alt { background:#9a97b4; }
.st-tier b { display:block; font-size:12px; font-weight:800; }
.st-tier em { display:block; font-style:normal; font-size:9.5px; color:#6a687e; margin-top:2px; }
.st-price { display:flex; align-items:baseline; gap:8px; margin-top:5px; }
.st-price b { font-size:15px; color:#5b4ae0; }
.st-price s { font-size:10px; color:#9a97b4; }
.st-price i { margin-left:auto; font-style:normal; font-size:9.5px; color:#6a687e; }
.st-perks { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:9px; }
.st-perks span { border-radius:7px; background:#f2f1f9; padding:8px 4px; text-align:center; font-size:8.5px; font-weight:700; color:#4a4860; line-height:1.3; }
.st-atc { height:36px; border-radius:8px; background:#5b4ae0; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.07em; }
.st-atc.hit { background:#4a3fd0; transform: scale(.985); }
.st-quote { display:flex; gap:9px; margin-top:10px; }
.st-quote i { width:24px; height:24px; border-radius:50%; background:linear-gradient(140deg,#d9d5ff,#a99fe8); flex:0 0 24px; }
.st-quote p { margin:0; font-size:9.5px; line-height:1.55; color:#4a4860; }

.sb-foot { display:flex; align-items:center; gap:16px; margin-top:16px; }
.sb-cards { display:flex; gap:12px; }
.sb-card { border-radius:12px; padding:11px 16px; box-shadow: inset 0 0 0 1px var(--rule); min-width:150px; }
.sb-card b { display:block; font-size:21px; font-weight:500; letter-spacing:-0.02em; }
.sb-card small { display:block; font-size:11px; color:var(--ink3); margin-top:4px; }
.sb-publish, .am-launch {
  margin-left:auto; height:48px; padding:0 30px; border-radius:999px; background:var(--signal); color:var(--paper);
  display:flex; align-items:center; font-size:15px; font-weight:700; white-space:nowrap; flex:0 0 auto;
}
.sb-publish.hit, .am-launch.hit, .d-build.hit, .d-find.hit { filter: brightness(.9); transform: scale(.98); }

/* --- ads manager ---------------------------------------------------------- */
.am-grid { flex:1; display:grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto 1fr; gap:14px; min-height:0; }
.am-card { border-radius:16px; padding:18px 20px; box-shadow: inset 0 0 0 1px var(--rule); background:var(--surface); min-width:0; }
.am-name { font-size:16px; color:var(--ink); margin-bottom:14px; }
.am-rows { display:flex; flex-direction:column; }
.am-row { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-top:1px solid var(--rule); font-size:13px; color:var(--ink3); }
.am-row b { font-weight:600; color:var(--ink); text-align:right; }
.am-budget { display:flex; align-items:baseline; gap:8px; }
.am-budget b { font-size:40px; font-weight:500; letter-spacing:-0.03em; color:var(--signal); }
.am-budget span { font-size:14px; color:var(--ink3); }
.am-slider { height:6px; border-radius:3px; background:var(--well); margin:16px 0 18px; position:relative; }
.am-slider i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:3px; background:var(--signal); }
.am-slider i::after { content:''; position:absolute; right:-9px; top:50%; width:18px; height:18px; border-radius:50%; background:var(--signal-hi); transform:translateY(-50%); box-shadow:0 2px 8px rgba(0,0,0,.45); }
.am-tgt { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--rule); font-size:13px; color:var(--ink3); }
.am-tgt b { font-size:15px; color:var(--ink); }
.am-tgt b.up { color:var(--up); }
.am-clips { display:flex; gap:12px; }
.am-clip {
  flex:1; min-width:0; border-radius:12px; padding:10px; position:relative;
  display:flex; gap:12px; align-items:center;
  box-shadow: inset 0 0 0 1px var(--rule); opacity:.45;
  transition: opacity .3s ease, box-shadow .3s ease;
}
.am-clip.in { opacity:1; box-shadow: inset 0 0 0 1px var(--signal-edge); }
.am-clip > span:last-of-type { min-width:0; }
.am-thumb { display:block; position:relative; width:54px; height:76px; flex:0 0 54px; border-radius:8px; overflow:hidden; background:var(--well); }
.am-thumb img { width:100%; height:100%; object-fit:cover; opacity:.9; }
.am-thumb em { position:absolute; right:4px; bottom:4px; font-style:normal; font-size:9px; font-family:var(--mono); background:rgba(13,7,39,.8); padding:1px 4px; border-radius:4px; color:var(--ink); }
.am-clip b { display:block; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.am-clip small { display:block; font-size:11px; color:var(--ink3); margin-top:3px; }
.am-clip .tick { position:absolute; right:9px; top:9px; width:16px; height:16px; border-radius:50%; background:var(--up); opacity:0; transition: opacity .3s ease; }
.am-clip.in .tick { opacity:1; }
.am-clip .tick::after { content:''; position:absolute; left:5px; top:4px; width:4px; height:8px; border-right:2px solid var(--paper); border-bottom:2px solid var(--paper); transform:rotate(42deg); }
.am-creative { grid-column: 1 / -1; }
.am-proj { grid-column: 1 / -1; display:flex; flex-direction:column; min-height:0; }
.am-sub { font-size:12.5px; color:var(--ink3); margin:0 0 10px; }
.am-chart { width:100%; flex:1; min-height:0; }
.am-legend { display:flex; gap:20px; margin-top:10px; font-size:11.5px; color:var(--ink3); }
.am-legend span { display:flex; align-items:center; gap:7px; }
.am-legend i { width:16px; height:2px; background:var(--up); }
.am-legend i.dash { background:repeating-linear-gradient(90deg,var(--ink3) 0 3px,transparent 3px 6px); }

/* ---- the cursor ---------------------------------------------------------- */

.cursor {
  position:absolute; left:0; top:0; width:26px; height:26px; z-index:60;
  pointer-events:none; opacity:0;
  transition: transform .6s cubic-bezier(.33,.9,.3,1), opacity .3s ease;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.5));
}
.cursor.on { opacity:1; }
.cursor.press { transform-origin: 6px 4px; }
.cursor svg { width:100%; height:100%; }
.ripple {
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--signal); opacity:0; z-index:59; pointer-events:none;
}
.ripple.go { animation: rip .55s ease-out; }
@keyframes rip {
  0%   { opacity:.65; transform: scale(.5); }
  100% { opacity:0;   transform: scale(4.6); }
}

/* ======================= COMPACT · the mock on a phone =====================
   A 640x640 square, not the desktop canvas shrunk. At a phone's ~358px stage
   the desktop canvas scales to 0.25 and its 14px type lands at 3.5px, which
   is what made the old mock unreadable there. So the arrangement changes:
   the filter rail goes, the feed drops to three columns, the product page and
   the storefront become one column, and the ads cards stack. Every screen is
   sized so it FITS the square without the window having to grow.
   ========================================================================= */

.app.compact { width:560px; height:560px; font-size:13px; }

.app.compact .a-nav { height:44px; padding:0 14px; gap:12px; }
.app.compact .a-logo { font-size:15px; }
.app.compact .a-tab { font-size:12px; padding:5px 12px; }
.app.compact .a-nav-r { gap:10px; }
.app.compact .a-icon { width:17px; height:17px; }
.app.compact .a-screen { inset:44px 0 0 0; }

/* --- feed --- */
.app.compact .f-side { display:none; }
.app.compact .f-main { padding:12px 14px 0; }
.app.compact .f-tools { gap:8px; margin-bottom:12px; }
.app.compact .f-search { height:34px; font-size:12px; max-width:none; padding:0 11px; gap:8px; }
.app.compact .f-search svg { width:13px; height:13px; }
.app.compact .f-seg span { padding:5px 11px; font-size:11.5px; }
.app.compact .f-dates, .app.compact .f-count { display:none; }
.app.compact .f-head, .app.compact .f-row { grid-template-columns: 1fr 78px 66px; }
.app.compact .f-head { height:30px; font-size:9.5px; }
.app.compact .c-units, .app.compact .c-price, .app.compact .c-views,
.app.compact .c-rpm, .app.compact .c-vid, .app.compact .c-listed, .app.compact .c-rank { display:none; }
.app.compact .f-row { height:92px; }
.app.compact .f-row > .c-units, .app.compact .f-row > .c-price, .app.compact .f-row > .c-views,
.app.compact .f-row > .c-rpm, .app.compact .f-row > .c-vid, .app.compact .f-row > .c-listed,
.app.compact .f-row > .c-rank { display:none; }
.app.compact .f-p { gap:11px; padding-right:8px; }
.app.compact .f-thumb { width:56px; height:56px; flex-basis:56px; border-radius:8px; }
.app.compact .f-title { font-size:12.5px; }
.app.compact .f-line2 { font-size:11.5px; margin-top:4px; }
.app.compact .f-line3 { display:none; }
.app.compact .f-trend { top:10px; font-size:10px; }
.app.compact .f-rev { font-size:17px; }
.app.compact .f-spark { height:30px; padding-right:0; }

/* --- product --- */
.app.compact .d-scroll { padding:14px 14px 30px; }
.app.compact .d-top { margin-bottom:14px; }
.app.compact .d-back { font-size:12.5px; }
.app.compact .d-actions .ghost { height:30px; padding:0 13px; font-size:11.5px; }
.app.compact .d-actions .ghost:first-child { display:none; }
.app.compact .d-hero { grid-template-columns: 1fr; gap:16px; margin-bottom:22px; }
/* the gallery frame is square on the desktop canvas and wide here, so a
   square photo has to be CONTAINED or the product loses its top and bottom.
   The cut-outs sit on white, so the plate behind them is seamless. */
.app.compact .d-shot { width:100%; height:196px; background:#fff; }
.app.compact .d-shot img { object-fit:contain; }
.app.compact .d-thumbs i { width:44px; height:44px; }
.app.compact .d-info h1 { font-size:20px; margin-bottom:16px; }
.app.compact .d-crumb { font-size:11px; margin-bottom:8px; }
.app.compact .d-facts { gap:26px; margin-bottom:16px; }
.app.compact .d-facts b, .app.compact .d-vids b { font-size:19px; }
.app.compact .d-facts em, .app.compact .d-vids em { font-size:12px; }
.app.compact .d-chips span { font-size:10.5px; padding:5px 10px; }
.app.compact .d-cost { padding:16px; }
.app.compact .d-cost h2.cheap { font-size:19px; }
.app.compact .d-sec { margin-bottom:24px; }
.app.compact .d-sec h2 { font-size:19px; }
.app.compact .d-sec-h { flex-direction:column; gap:10px; }
.app.compact .d-sec-h .d-seg { margin-left:0; }
.app.compact .d-sec-h p, .app.compact .d-lede { font-size:11.5px; }
.app.compact .d-panel { padding:16px; border-radius:14px; }
.app.compact #secPerf .d-panel { grid-template-columns:1fr; gap:20px; }
.app.compact .d-stats { grid-template-columns:repeat(2,1fr); gap:16px 14px; }
.app.compact .d-stat b { font-size:21px; }
.app.compact .d-stat.lead { grid-column:span 2; margin:-12px 0 0 -12px; padding:12px; }
.app.compact .d-stat.lead b { font-size:28px; }
.app.compact .d-chart svg { height:110px; }
.app.compact .d-run-row { gap:9px; }
.app.compact .d-input { height:40px; font-size:12.5px; }
.app.compact .d-run { height:40px; padding:0 16px; font-size:12.5px; }
.app.compact .d-note { margin-bottom:14px; }
.app.compact .d-vchecks { grid-template-columns:1fr; gap:10px; }
.app.compact .d-vcheck { padding:14px; border-radius:13px; }
.app.compact .d-vc-h { gap:12px; margin-bottom:9px; }
.app.compact .d-vc-ring, .app.compact .d-vc-ring svg { width:46px; height:46px; }
.app.compact .d-vc-ring { flex-basis:46px; }
.app.compact .d-vc-ring .rv { font-size:13px; }
.app.compact .d-vc-t b { font-size:14px; }
.app.compact .d-vc-t em { font-size:11px; }
.app.compact .d-vcheck > p { font-size:11px; margin-bottom:8px; }
.app.compact .ck-row { font-size:11.5px; padding:6px 0; }
.app.compact .ck-row b { font-size:13px; }
.app.compact .v-head, .app.compact .v-row { grid-template-columns: 1fr 92px; padding:0 14px; }
.app.compact .v-head span:nth-child(n+4), .app.compact .v-row > *:nth-child(n+4) { display:none; }
.app.compact .v-head span:first-child, .app.compact .v-row > span:first-child { display:none; }
.app.compact .v-row { height:74px; }
.app.compact .v-clip .th { width:42px; height:56px; flex-basis:42px; }
.app.compact .v-clip small { display:none; }
.app.compact .v-rev { font-size:15px; }
.app.compact .d-build-card { flex-direction:column; align-items:stretch; gap:14px; padding:18px; }
.app.compact .d-build-card h2 { font-size:17px; }
.app.compact .d-build-card p { font-size:11.5px; }
.app.compact .d-build { margin-left:0; justify-content:center; height:44px; font-size:13.5px; }

/* --- store builder + ads ---
   Both screens have to fit the 560px square with nothing clipped, so the
   compact rules DROP content rather than shrink it. The storefront keeps the
   four things that make it a storefront — photo, name, offer, add to cart —
   and loses the marquee, the perks row, the thumbnail strip and the review
   quote. Measured: at full content the buy column ran 180px past the canvas
   and the add-to-cart button was never on screen. */
.app.compact .sb-rail { display:none; }
.app.compact .sb-main { padding:13px; }
.app.compact .sb-head { flex-direction:column; gap:6px; }
.app.compact .sb-head h2 { font-size:18px; }
.app.compact .sb-head p { font-size:11px; }
.app.compact .sb-domain, .app.compact .am-obj { margin-left:0; height:25px; font-size:10.5px; padding:0 12px; }
.app.compact .sb-themes { gap:6px; margin:9px 0; }
.app.compact .sb-theme { height:27px; padding:0 10px; font-size:10.5px; gap:6px; }
.app.compact .sb-theme i { width:11px; height:11px; }
.app.compact .sb-theme em { display:none; }

.app.compact .st-bar { height:20px; font-size:7.5px; padding:0 9px; gap:7px; }
.app.compact .st-marq, .app.compact .st-strip, .app.compact .st-perks,
.app.compact .st-quote, .app.compact .st-bul, .app.compact .st-trust,
.app.compact .st-link, .app.compact .st-ico, .app.compact .st-badge { display:none; }
.app.compact .st-nav { height:26px; padding:0 9px; }
.app.compact .st-logo { font-size:11.5px; }
.app.compact .st-body { grid-template-columns:1fr 1fr; gap:10px; padding:9px; }
.app.compact .st-photo > img { height:118px; }
.app.compact .st-revcard { padding:4px 7px; right:6px; bottom:6px; }
.app.compact .st-revcard b { font-size:8px; }
.app.compact .st-revcard em { font-size:7px; }
.app.compact .st-stars { font-size:8.5px; margin:0 0 4px; }
.app.compact .st-buy h3 { font-size:12px; margin-bottom:7px; }
.app.compact .st-tiers { gap:5px; margin-bottom:7px; }
.app.compact .st-tier:not(.on) { display:none; }
.app.compact .st-tier { padding:7px 9px; }
.app.compact .st-tier b { font-size:10px; }
.app.compact .st-tier em { display:none; }
.app.compact .st-price b { font-size:12.5px; }
.app.compact .st-price s, .app.compact .st-price i { font-size:8.5px; }
.app.compact .st-tag { font-size:6.5px; padding:2px 5px; }
.app.compact .st-atc { height:28px; font-size:10px; }

.app.compact .sb-foot { flex-direction:column; align-items:stretch; gap:8px; margin-top:10px; }
.app.compact .sb-cards { gap:7px; }
.app.compact .sb-card { padding:7px 9px; min-width:0; flex:1; }
.app.compact .sb-card b { font-size:14px; }
.app.compact .sb-card small { display:none; }
.app.compact .sb-publish, .app.compact .am-launch { margin-left:0; justify-content:center; height:38px; font-size:13px; }

.app.compact .am-grid { grid-template-columns:1fr; grid-template-rows:auto auto; gap:8px; min-height:0; overflow:hidden; }
/* Measured at 560: budget + creative + projection need 332px and the grid has
   316. The projection card is the one that goes, because the footer already
   carries its conclusion — PROJECTED ROAS 1.82, above break-even. */
.app.compact .am-proj { display:none; }
.app.compact .am-card { padding:11px 12px; border-radius:11px; min-height:0; }
.app.compact .am-camp { display:none; }
.app.compact .am-creative, .app.compact .am-proj { grid-column:auto; }
.app.compact .am-budget b { font-size:26px; }
.app.compact .am-slider { margin:10px 0 12px; }
.app.compact .am-tgt { font-size:11px; padding:6px 0; }
.app.compact .am-tgt b { font-size:13px; }
.app.compact .am-clips { gap:7px; }
.app.compact .am-clip { padding:7px; gap:8px; }
.app.compact .am-thumb { width:34px; height:48px; flex-basis:34px; }
.app.compact .am-thumb em { font-size:7px; }
.app.compact .am-clip b { font-size:10px; }
.app.compact .am-clip small { font-size:8.5px; }
.app.compact .am-clip .tick { width:13px; height:13px; right:6px; top:6px; }
.app.compact .am-clip .tick::after { left:4px; top:3px; width:3px; height:6px; }
.app.compact .am-sub { font-size:10.5px; margin-bottom:6px; }
.app.compact .am-legend { font-size:9px; gap:10px; margin-top:6px; }

/* ---- no-JS / failed-JS fallback -----------------------------------------
   The mock is built and sized by demo.js. With scripting off, blocked, or if
   demo.js throws, .app never gets .ready and the poster stays — so the window
   shows the real product instead of collapsing to an empty strip. */
.win-poster { display:block; width:100%; height:auto; }
.js .app { opacity:0; transition: opacity .4s ease; }
.js .app.ready { opacity:1; }
.js .app.ready ~ .win-poster, .js .win-body.live .win-poster { display:none; }


/* The theme chips actually reskin the preview — a swatch that changes nothing
   is worse than no swatch, because the click in the demo then reads as broken.
   Only the two the script touches are defined; Quiet is the default sheet. */
.sb-canvas.t-court { background:#101014; color:#f2f2f5; }
.sb-canvas.t-court .st-bar { background:#f2f2f5; color:#101014; }
.sb-canvas.t-court .st-marq { background:#1c1c22; color:#f2f2f5; }
.sb-canvas.t-court .st-nav { border-bottom-color:#26262e; }
.sb-canvas.t-court .st-logo, .sb-canvas.t-court .st-buy h3, .sb-canvas.t-court h3 { color:#f2f2f5; }
.sb-canvas.t-court .st-link { color:#a0a0ae; }
.sb-canvas.t-court .st-ico { background:#2a2a33; }
.sb-canvas.t-court .st-trust { background:#22222a; color:#d8d8e2; }
.sb-canvas.t-court .st-bul li { color:#c4c4d0; }
.sb-canvas.t-court .st-bul li::before { background:#f2f2f5; }
.sb-canvas.t-court .st-tier { box-shadow: inset 0 0 0 1px #2c2c36; }
.sb-canvas.t-court .st-tier.on { box-shadow: inset 0 0 0 2px #f2f2f5; background:#1a1a20; }
.sb-canvas.t-court .st-tag { background:#f2f2f5; color:#101014; }
.sb-canvas.t-court .st-tag.alt { background:#3a3a46; color:#d8d8e2; }
.sb-canvas.t-court .st-tier b { color:#f2f2f5; }
.sb-canvas.t-court .st-tier em, .sb-canvas.t-court .st-price i { color:#9a9aa8; }
.sb-canvas.t-court .st-price b { color:#f2f2f5; }
.sb-canvas.t-court .st-price s { color:#6a6a78; }
.sb-canvas.t-court .st-perks span { background:#1c1c22; color:#c4c4d0; }
.sb-canvas.t-court .st-atc { background:#f2f2f5; color:#101014; }
.sb-canvas.t-court .st-atc.hit { background:#d8d8e2; }
.sb-canvas.t-court .st-quote p { color:#a0a0ae; }
.sb-canvas.t-court .st-revcard { background:#1c1c22; }
.sb-canvas.t-court .st-revcard em { color:#9a9aa8; }