/* =========================================================================
   LISTLEY EXTENSION MOCKUP — faithful recreation of the real popup
   Always dark (mirrors the extension). Rendered into [data-ext].
   ========================================================================= */

/* ---- floating popup frame ---- */
.ext-pop {
  width: 384px; max-width: 100%; margin-inline: auto;
  background: #0f0f12; color: #f4f4f7;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-xl);
  overflow: hidden; position: relative;
  font-family: var(--font);
  display: flex; flex-direction: column;
}
.ext-pop * { box-sizing: border-box; }
.ext-pop .xp-brand { flex: 0 0 auto; }
.ext-pop .xp-screens { min-height: 0; }

/* height-capped contexts (pinned story panel + takeover modal):
   keep the popup inside the viewport and let its body scroll internally */
[data-story] .story-mock .ext-pop,
.ov-mock .ext-pop {
  max-height: calc(100dvh - 150px);
}
[data-story] .story-mock .ext-pop .xp-screens,
.ov-mock .ext-pop .xp-screens {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
}
/* scroll, but never show a scrollbar (looks tacky in the popup) */
.ext-pop .xp-screens { scrollbar-width: none; -ms-overflow-style: none; }
.ext-pop .xp-screens::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* brand bar */
.xp-brand { display:flex; align-items:center; gap:12px; padding:18px 18px; background:#161618; border-bottom:1px solid rgba(255,255,255,.05); }
.xp-mark { width:38px; height:38px; border-radius:10px; background:var(--brand-red); display:grid; place-items:center; flex:none; box-shadow:0 5px 14px rgba(230,57,70,.4); }
.xp-mark img { width:74%; height:74%; object-fit:contain; }
.xp-word { line-height:1; }
.xp-word .n { font-weight:800; font-size:1.12rem; letter-spacing:-.01em; }
.xp-word .n .ai { color:#c9ccd4; font-weight:600; }
.xp-word .sub { font-size:.56rem; font-weight:700; letter-spacing:.18em; color:var(--brand-red); margin-top:3px; }
.xp-globe { margin-left:auto; color:#7c828e; } .xp-globe svg{ width:20px; height:20px; }

/* greeting row */
.xp-greet { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-size:.86rem; background:#191920; border-bottom:1px solid rgba(255,255,255,.05); }
.xp-greet .hi { color:#e6e7ea; } .xp-greet .plan { color:#9a9aa3; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* body scroll-ish */
.xp-body { padding:8px 18px 20px; }

/* store card */
.xp-store { display:flex; align-items:center; gap:13px; padding:14px; border-radius:14px; background:#1b1b1f; border:1px solid rgba(255,255,255,.06); }
.xp-ava { width:48px; height:48px; border-radius:50%; flex:none; background:linear-gradient(135deg,#e8e8ec,#cfd2da); display:grid; place-items:center; color:#1b2a4a; font-weight:800; font-size:.7rem; overflow:hidden; }
.xp-ava.dep { background:#ff2300; color:#fff; font-size:1.9rem; font-weight:800; line-height:1; padding-bottom:3px; font-family:var(--font); }
.xp-store .meta { flex:1; min-width:0; }
.xp-store .meta .nm { font-weight:700; font-size:1.04rem; }
.xp-store .meta .s { font-size:.8rem; color:#9a9aa3; margin-top:2px; }
.xp-store .meta .s .act { color:#22c55e; font-weight:600; }
.xp-store .meta .s .dot { color:#22c55e; }
.xp-ring2 { width:34px; height:34px; flex:none; }
.xp-ring2 svg { transform:rotate(-90deg); }

/* icon nav */
.xp-nav { display:flex; align-items:center; justify-content:space-around; padding:13px 18px; margin:16px -18px 18px; background:#191920; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.xp-nav button { color:#6f757f; transition:color .2s; } .xp-nav button:hover{ color:#c9ccd4; }
.xp-nav svg { width:19px; height:19px; }

/* toolkit grid */
.xp-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.xp-tool { position:relative; border-radius:15px; padding:22px 14px; text-align:center; background:#26262b; border:1px solid rgba(255,255,255,.05);
  display:flex; flex-direction:column; align-items:center; gap:11px; cursor:pointer; transition:transform .2s var(--ease-out), background .2s, box-shadow .2s; overflow:hidden; }
.xp-tool:hover { transform:translateY(-3px); background:#2d2d33; box-shadow:0 10px 26px rgba(0,0,0,.4); }
.xp-tool .ti { width:26px; height:26px; color:#fff; } .xp-tool .ti svg{ width:26px; height:26px; }
.xp-tool .tl { font-weight:700; font-size:1rem; }
.xp-tool .pro { position:absolute; top:0; right:0; bottom:0; width:22px; background:var(--pro-blue); display:grid; place-items:center; }
.xp-tool .pro span { font-size:.52rem; font-weight:800; letter-spacing:.06em; color:#fff; writing-mode:vertical-rl; transform:rotate(180deg); }

/* big red CTA cards */
.xp-cta { display:flex; flex-direction:column; align-items:center; gap:9px; width:100%; padding:22px; border-radius:15px; margin-top:13px;
  background:linear-gradient(180deg,#ec4b54,#e0353f); color:#fff; font-weight:700; font-size:1.04rem; box-shadow:0 10px 24px rgba(230,57,70,.34); cursor:pointer; transition:transform .2s; }
.xp-cta:hover { transform:translateY(-2px); }
.xp-cta svg { width:24px; height:24px; }

/* footer tagline */
.xp-foot { text-align:center; padding:18px 0 6px; color:#8b8f99; font-size:.86rem; }
.xp-foot .ul { display:inline-block; width:42px; height:3px; border-radius:3px; background:var(--brand-red); margin-top:8px; }

/* ---- sub-tool screens ---- */
.xp-sub-head { display:flex; align-items:center; gap:12px; padding:18px 2px 16px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:22px; }
.xp-back { color:var(--brand-red); display:grid; place-items:center; } .xp-back svg{ width:20px; height:20px; }
.xp-sub-head .ht { font-size:.82rem; font-weight:700; letter-spacing:.13em; color:#c9ccd4; }
.xp-sub-head .sp { margin-left:auto; color:#7c828e; } .xp-sub-head .sp svg{ width:18px; height:18px; }

/* sell sub-tool colorful grid */
.xp-subgrid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.xp-sub { border-radius:15px; padding:24px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:11px; cursor:pointer; transition:transform .2s var(--ease-out), box-shadow .2s; font-weight:700; }
.xp-sub:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.4); }
.xp-sub svg { width:26px; height:26px; }
.xp-sub .lbl { font-size:1rem; }
.s-red    { background:linear-gradient(160deg,#ee4d56,#df343e); color:#fff; }
.s-white  { background:#ededee; color:#1c1c20; }
.s-purple { background:linear-gradient(150deg,#9a4ef5,#6d28d9); color:#fff; }
.s-blue   { background:linear-gradient(150deg,#5570f3,#3a5de0); color:#fff; }

/* segmented control */
.xp-seg { display:flex; gap:0; background:#202024; border-radius:11px; padding:5px; margin-bottom:14px; }
.xp-seg button { flex:1; padding:9px 6px; border-radius:8px; font-size:.8rem; font-weight:600; color:#8b8f99; transition:all .2s; }
.xp-seg button.on { background:#3a3a42; color:#fff; }
.xp-seg.hot button[data-k="hot"].on{ color:#ff6b73; } .xp-seg.hot button[data-k="warm"].on{ color:#fbbf24; } .xp-seg.hot button[data-k="cold"].on{ color:#60a5fa; }
.xp-seg.hot button[data-k="hot"]{ color:#ff6b73; } .xp-seg.hot button[data-k="warm"]{ color:#fbbf24; } .xp-seg.hot button[data-k="cold"]{ color:#60a5fa; }

/* white load button */
.xp-load { width:100%; padding:14px; border-radius:12px; background:#ededee; color:#1c1c20; font-weight:600; font-size:.92rem; margin-bottom:12px; }
/* primary count button (disabled-look red gradient) */
.xp-run { width:100%; padding:15px; border-radius:12px; font-weight:700; font-size:.96rem; background:linear-gradient(180deg,rgba(120,40,46,.9),rgba(90,28,33,.9)); color:#c98b8f; }
.xp-run.green { background:linear-gradient(180deg,#28c46a,#1f9e54); color:#fff; box-shadow:0 10px 24px rgba(34,197,94,.3); }
.xp-run.purple { background:linear-gradient(150deg,#9a4ef5,#6d28d9); color:#fff; box-shadow:0 10px 24px rgba(124,58,237,.3); }

/* edit radio list */
.xp-radios { background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:8px; margin-bottom:14px; }
.xp-radio { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:9px; font-size:.88rem; color:#c9ccd4; }
.xp-radio.on { background:#26262b; color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--brand-red); }
.xp-radio .rb { width:18px; height:18px; border-radius:50%; border:2px solid #4a4a52; flex:none; }
.xp-radio.on .rb { border-color:var(--brand-red); box-shadow:inset 0 0 0 3px var(--brand-red); }
.xp-input { width:100%; background:#26262b; border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:11px 13px; color:#fff; font-size:.86rem; margin:4px 0 6px; }

/* toggle row (relist) */
.xp-tgrow { display:flex; align-items:center; gap:11px; margin-bottom:14px; font-size:.9rem; font-weight:600; }
.xp-tg { width:42px; height:24px; border-radius:13px; background:#3a3a42; position:relative; flex:none; }
.xp-tg.on { background:var(--brand-red); } .xp-tg::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; } .xp-tg.on::after{ transform:translateX(18px); }
.xp-tg.on.blue { background:var(--pro-blue); }

/* profit calculator breakdown */
.xp-break { background:#f2f2f4; color:#1c1c20; border-radius:14px; padding:16px 18px; margin-top:6px; }
.xp-break .bk-h { font-size:.66rem; font-weight:700; letter-spacing:.12em; color:#9aa0aa; margin-bottom:12px; }
.xp-break .bk-row { display:flex; align-items:center; justify-content:space-between; font-size:.86rem; padding:7px 0; color:#4a4f5a; }
.xp-break .bk-row b { font-weight:700; color:#1c1c20; }
.xp-break .bk-row b.neg { color:#e0353f; } .xp-break .bk-row b.pos { color:#1f9e54; }
.xp-break .bk-row.total { border-top:1px solid rgba(13,16,23,.12); margin-top:6px; padding-top:12px; font-weight:700; font-size:1rem; }
.xp-break .bk-row.total span { font-weight:700; color:#1c1c20; }
.xp-break .bk-margin { text-align:right; font-size:.72rem; color:#9aa0aa; margin-top:4px; }

/* hashtag pills */
.xp-tags { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:8px; }
.xp-tag { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:#e8e9ec; color:#1c1c20; font-size:.82rem; font-weight:600; }
.xp-tag .ct { color:#8b8f99; font-weight:600; font-size:.72rem; }
.xp-hashsub { font-size:.78rem; color:#8b8f99; margin-bottom:14px; } .xp-hashsub b{ color:#c9ccd4; }

/* analytics / believable screens reuse */
.xp-stats { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:14px; }
.xp-stat { background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:13px; padding:14px; }
.xp-stat .n { font-size:1.5rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.xp-stat .l { font-size:.7rem; color:#8b8f99; margin-top:6px; text-transform:uppercase; letter-spacing:.05em; }
.xp-stat .d { font-size:.68rem; font-weight:700; margin-top:6px; } .xp-stat .d.up{ color:#22c55e; } .xp-stat .d.down{ color:#ff6b73; }
.xp-chart { height:118px; display:flex; align-items:flex-end; gap:7px; padding:14px; background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:13px; margin-bottom:12px; }
.xp-chart .bar { flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#ff7480,#E63946); transition:height .6s var(--ease-out); }
.xp-chart .bar.b{ background:linear-gradient(180deg,#7aa2ff,#2563EB); } .xp-chart .bar.g{ background:linear-gradient(180deg,#4ade80,#16a34a); }
.xp-listrow { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background:#1b1b1f; border:1px solid rgba(255,255,255,.06); margin-bottom:9px; }
.xp-listrow .ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; } .xp-listrow .ic svg{ width:18px; height:18px; }
.xp-listrow .tx{ flex:1; min-width:0; } .xp-listrow .tx .t{ display:block; font-size:.88rem; font-weight:600; } .xp-listrow .tx .s{ display:block; font-size:.74rem; color:#8b8f99; margin-top:2px; }
.xp-listrow .v{ font-size:.85rem; font-weight:700; }
.xp-av { width:36px; height:36px; border-radius:50%; flex:none; }
.av1{ background:linear-gradient(135deg,#E63946,#7C3AED);} .av2{ background:linear-gradient(135deg,#2563EB,#22c55e);} .av3{ background:linear-gradient(135deg,#f59e0b,#E63946);} .av4{ background:linear-gradient(135deg,#7C3AED,#2563EB);}

/* screen transition */
.ext-screen { display:none; }
.ext-screen.active { display:block; animation: extIn .45s var(--ease-out); }
@keyframes extIn { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
[data-motion="off"] .ext-screen.active { animation:none; }

/* big safety ring reused on safety page (dark card already) */
.ring-wrap { display:grid; place-items:center; padding:6px 0 14px; }
.ring { position: relative; width: 180px; height: 180px; }
.ring svg { transform: rotate(-90deg); }
.ring .center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:2px; }
.ring .center .pts { font-size:2.1rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:#fff; }
.ring .center .of { font-size:.74rem; color:#8b92a0; }
.ring .center .zone { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-top:4px; }
.zone-row { display:flex; gap:7px; }
.zone-chip { flex:1; text-align:center; padding:8px 4px; border-radius:8px; font-size:.68rem; font-weight:600; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:#8b92a0; }
.zone-chip.active { color:#fff; }
.zone-chip .d { width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle;}
.safety-ring-card .ring .center .pts { color:#fff; }

/* glow pad behind popup */
.ext-stagewrap { position:relative; display:grid; place-items:center; padding:20px 0; }

/* ---- Grow sub-tool colors + PRO tab on sub cards ---- */
.xp-sub { position:relative; overflow:hidden; }
.s-green  { background:linear-gradient(150deg,#1ec08b,#0c9a60); color:#fff; }
.s-yellow { background:linear-gradient(120deg,#fbbf24,#f59e0b); color:#1c1c20; }
.xp-sub .pro { position:absolute; top:0; right:0; bottom:0; width:22px; background:var(--pro-blue); display:grid; place-items:center; }
.xp-sub .pro span { font-size:.5rem; font-weight:800; letter-spacing:.06em; color:#fff; writing-mode:vertical-rl; transform:rotate(180deg); }

/* speed segmented (blue active label) */
.xp-seg.speed { flex:1; } .xp-seg.speed button.on { color:#60a5fa; }

/* labels / notes / hints */
.xp-splabel { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:#8b8f99; display:block; margin-bottom:8px; }
.xp-note { font-style:italic; text-align:center; color:#7c828e; font-size:.82rem; margin-top:16px; line-height:1.5; }
.xp-hint { color:#8b8f99; font-size:.82rem; margin:9px 0 0; line-height:1.45; }

/* white info cards */
.xp-wcard { background:#f2f2f4; color:#1c1c20; border-radius:13px; padding:16px; }
.xp-wcard.center { text-align:center; font-size:.92rem; }
.xp-wrow { display:flex; align-items:center; justify-content:space-between; }
.xp-wlabel { font-size:.74rem; font-weight:700; letter-spacing:.08em; color:#6b7280; }
.xp-wval { font-weight:700; font-size:.98rem; }
.xp-wmuted { font-size:.78rem; color:#9aa0aa; }
.xp-link { font-size:.78rem; font-weight:600; color:var(--pro-blue); }
.xp-bar { height:7px; border-radius:4px; background:#e1e1e5; margin-top:11px; overflow:hidden; }
.xp-bar span { display:block; height:100%; background:var(--brand-red); border-radius:4px; }

/* blacklist add/clear */
.xp-addbtn { padding:0 18px; border-radius:10px; background:#ededee; color:#1c1c20; font-weight:700; font-size:.86rem; }
.xp-empty { background:#f2f2f4; color:#5f6570; border-radius:13px; padding:22px 18px; text-align:center; font-size:.88rem; font-weight:600; }
.xp-empty span { display:block; font-weight:400; font-size:.8rem; margin-top:7px; color:#9aa0aa; line-height:1.45; }
.xp-clear { width:100%; padding:14px; border-radius:12px; background:#f2f2f4; color:var(--brand-red); font-weight:600; font-size:.9rem; margin-top:12px; }

/* message screen */
.xp-textarea { width:100%; min-height:92px; resize:none; background:#26262b; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:12px; color:#fff; font-size:.86rem; font-family:inherit; }
.xp-seg2 { display:flex; gap:0; background:#202024; border-radius:11px; padding:5px; }
.xp-seg2 button { flex:1; padding:11px 8px; border-radius:8px; font-size:.88rem; font-weight:600; color:#8b8f99; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .2s; }
.xp-seg2 button.on { background:#3a3a42; color:#fff; }
.pro-pill { font-size:.56rem; font-weight:800; color:#fff; background:var(--pro-blue); padding:2px 6px; border-radius:5px; letter-spacing:.04em; }
.rec-badge { position:absolute; top:-9px; right:16px; font-size:.56rem; font-weight:800; color:#fff; background:#22c55e; padding:2px 8px; border-radius:6px; letter-spacing:.04em; }
.xp-estcard { display:flex; align-items:center; gap:8px; justify-content:center; background:#f2f2f4; color:#1c1c20; border-radius:11px; padding:13px; margin:13px 0; font-size:.84rem; font-weight:600; }
.xp-stepnum { background:#1c1c20; color:#fff; border-radius:7px; padding:4px 13px; font-weight:700; }

/* ---- Messages: presets ---- */
.xp-presub { color:#8b8f99; font-size:.82rem; margin:-2px 0 16px; line-height:1.45; }
.xp-preset { display:flex; gap:10px; align-items:flex-start; background:#f2f2f4; color:#1c1c20; border-radius:14px; padding:15px 16px; margin-bottom:12px; cursor:pointer; transition:transform .15s, box-shadow .2s; }
.xp-preset:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.xp-preset .pp-tx { flex:1; min-width:0; }
.xp-preset .pp-t { font-weight:700; font-size:.96rem; }
.xp-preset .pp-b { font-size:.8rem; color:#6b7280; margin-top:5px; line-height:1.4; }
.xp-preset .pp-act { display:flex; align-items:center; gap:10px; flex:none; color:#9aa0aa; }
.xp-preset .pp-edit svg { width:16px; height:16px; } .xp-preset .pp-edit:hover, .xp-preset .pp-x:hover { color:#1c1c20; }
.xp-preset .pp-x { font-size:.85rem; }
.xp-newpreset { background:#f2f2f4; border-radius:14px; padding:16px; margin-top:4px; }
.xp-pinput, .xp-ptext { width:100%; background:#2a2a30; border:none; border-radius:10px; padding:13px; color:#fff; font-size:.86rem; font-family:inherit; margin-top:10px; }
.xp-pinput::placeholder, .xp-ptext::placeholder { color:#8b8f99; }
.xp-ptext { min-height:86px; resize:none; }
.xp-savebtn { width:100%; padding:14px; border-radius:11px; background:#17171a; color:#fff; font-weight:700; font-size:.9rem; margin-top:12px; }

/* ---- Messages: blacklist rows ---- */
.xp-blrow { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:#1b1b1f; border:1px solid rgba(255,255,255,.06); margin-bottom:9px; }
.xp-blav { width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:.82rem; color:#fff; background:linear-gradient(135deg,#9a4ef5,#6d28d9); }
.xp-blname { flex:1; font-size:.9rem; font-weight:600; }

/* in-console primary/secondary buttons (safety etc.) */
.ext-btn { width:100%; padding:13px; border-radius:11px; font-weight:700; font-size:.88rem; color:#fff; background:var(--brand-red); border:none; cursor:pointer; }
.ext-btn.blue { background:var(--pro-blue); box-shadow:0 8px 20px rgba(37,99,235,.3); }
.ext-btn.ghost { background:#26262b; color:#e8ebf2; }
.ext-pop.is-light .ext-btn.ghost { background:#e7e9ee; color:#1a1c22; }
.xp-blx { color:#7c828e; font-size:.85rem; } .xp-blx:hover{ color:#ff7480; }

/* ===================================================================
   v2 REBUILD — components from the real console (96 reference screens)
   =================================================================== */

/* store card avatar + faint ring + blue highlight */
.xp-store { border:1.5px solid rgba(79,125,240,.55); }
.xp-ava2 { width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#e9eaee,#c3c7d0); color:#4a4f5a; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.xp-ava2 svg { width:23px; height:23px; }
.xp-ava2 img { width:100%; height:100%; object-fit:cover; }
.xp-ring3 { width:34px; height:34px; flex:none; border-radius:50%; border:2px solid rgba(255,255,255,.18); }
.ext-pop.is-light .xp-ring3 { border-color:rgba(13,16,23,.16); }

/* speed row (label + segmented) */
.xp-speedrow { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.xp-speedrow .xp-seg { flex:1; margin:0; }

/* listing tabs (Newest / Oldest / Popularity) */
.xp-tabs { display:flex; gap:6px; background:#202024; border-radius:11px; padding:5px; margin-bottom:14px; }
.xp-tabs button { flex:1; padding:9px 6px; border-radius:8px; font-size:.82rem; font-weight:600; color:#8b8f99; transition:all .2s; }
.xp-tabs button.on { background:#3a3a42; color:#fff; }

/* select-all row */
.xp-selrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:.84rem; }
.xp-selrow .sel { font-weight:700; }
.xp-selrow .cnt { color:#8b8f99; } .xp-selrow .cnt b { color:#c9ccd4; }

/* photo grid */
.xp-photogrid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:14px; }
.xp-photo { position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -40px 60px rgba(0,0,0,.18); }
.xp-heart { position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:4px; background:#fff; color:#1c1c20; font-size:.74rem; font-weight:700; padding:3px 8px 3px 6px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.xp-heart svg { width:13px; height:13px; }

/* run buttons — enabled variants */
.xp-run.red { background:linear-gradient(180deg,#ef5b63,#e0353f); color:#fff; box-shadow:0 10px 24px rgba(230,57,70,.3); }
.xp-run.amber { background:linear-gradient(180deg,#f6a623,#ef8e0a); color:#fff; box-shadow:0 8px 18px rgba(245,158,11,.3); }
.xp-run.blue { background:linear-gradient(180deg,#3a72f0,#2257db); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.3); }
.xp-run.blue.pro, .xp-run.pro { position:relative; padding-right:34px; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.xp-run svg { width:19px; height:19px; }
.xp-run .vpro { position:absolute; top:0; right:0; bottom:0; width:24px; background:rgba(0,0,0,.18); display:grid; place-items:center; font-size:.5rem; font-weight:800; color:#fff; writing-mode:vertical-rl; transform:rotate(180deg); border-radius:0 12px 12px 0; }
.xp-btnrow { display:flex; gap:10px; }

/* input variants + rows */
.xp-input.sm { max-width:150px; }
.xp-input.big { text-align:center; font-size:1.05rem; font-weight:700; }
.xp-input.ind { margin-left:30px; width:calc(100% - 30px); }
.xp-input.sm2 { width:84px; margin:0; }
.xp-inrow { display:flex; gap:10px; align-items:center; }
.xp-inrow .xp-input { margin:0; flex:1; }
.xp-inrow.noflex .xp-input { flex:none; }
.xp-suffixtx { font-size:.86rem; color:#c9ccd4; font-weight:600; }
.xp-inputwrap { position:relative; }
.xp-inputwrap .suffix { position:absolute; right:13px; top:calc(50% - 2px); transform:translateY(-50%); color:#8b8f99; }
.xp-inputwrap .suffix svg { width:18px; height:18px; }
.xp-inputwrap .suffix.red { color:#e0353f; font-weight:800; font-size:1.05rem; }
.xp-addbtn.dark { background:#26262b; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.xp-load.dark { background:#26262b; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }

/* compose: recommended badge + dropdown */
.xp-segwrap { position:relative; }
.xp-select { display:flex; align-items:center; justify-content:space-between; background:#26262b; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:13px; color:#fff; font-size:.9rem; font-weight:600; cursor:pointer; }
.xp-select svg { width:18px; height:18px; color:#8b8f99; }

/* review bot */
.xp-revdesc { font-size:.92rem; color:#a9adb6; line-height:1.55; margin:2px 0 18px; }
.xp-pilltabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.xp-pilltabs button { padding:9px 16px; border-radius:999px; font-size:.86rem; font-weight:700; color:#c9ccd4; border:1px solid rgba(255,255,255,.14); transition:all .2s; }
.xp-pilltabs button.on { background:linear-gradient(180deg,#28c46a,#1f9e54); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(34,197,94,.3); }
.xp-msgbox { background:#f2f2f4; color:#1c1c20; border-radius:13px; padding:15px 16px; font-size:.92rem; line-height:1.5; min-height:96px; margin-bottom:14px; }

/* status list */
.xp-status { margin:16px 0 14px; }
.st-row { display:flex; align-items:center; gap:9px; padding:9px 2px; font-size:.84rem; color:#c9ccd4; border-bottom:1px solid rgba(255,255,255,.06); }
.st-row:last-child { border-bottom:none; }
.st-ic { flex:none; width:16px; text-align:center; }
.st-ic.ok { color:#5b8def; } .st-ic.warn { color:#f6a623; }

/* spinner (scanning / loading) */
.xp-spinwrap { display:grid; place-items:center; padding:14px 0; }
.xp-spin { position:relative; width:150px; height:150px; }
.xp-spin svg { width:150px; height:150px; animation:spin 1.1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
[data-motion="off"] .xp-spin svg { animation:none; }
.sp-c { position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:6px; }
.sp-big { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
.sp-cap { font-size:.66rem; font-weight:700; letter-spacing:.18em; color:#8b8f99; }
.xp-spintitle { text-align:center; font-weight:600; font-size:1.05rem; margin:10px 0 4px; }
.xp-spincap { text-align:center; color:#8b8f99; font-size:.88rem; margin:6px 0 18px; }
.xp-spincap.link { color:var(--pro-blue); }

/* competitor tracker card */
.xp-compcard { background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; margin-bottom:16px; }
.cc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cc-nm { font-size:1.04rem; font-weight:700; }
.cc-x { color:#7c828e; font-size:.9rem; } .cc-x:hover { color:#ff7480; }
.cc-stats { display:flex; justify-content:space-between; text-align:center; margin-bottom:14px; }
.cc-stats div b { display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; }
.cc-stats div span { font-size:.74rem; color:#8b8f99; }
.cc-data { background:#f2f2f4; color:#1c1c20; border-radius:12px; padding:13px 14px; }
.cc-drow { display:flex; align-items:center; justify-content:space-between; font-size:.86rem; font-weight:600; }
.cc-pct { color:#e0353f; font-weight:800; }
.cc-bar { height:8px; border-radius:5px; background:#e1e1e5; margin:9px 0; overflow:hidden; }
.cc-bar span { display:block; height:100%; background:linear-gradient(90deg,#f6a623,#e0353f); border-radius:5px; }
.cc-ins { font-size:.78rem; color:#9aa0aa; text-align:center; }
.cc-foot { text-align:center; font-size:.82rem; color:#8b8f99; margin-top:13px; }

/* big stat boxes (listing/store stats) */
.xp-bigstats { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:8px; }
.xp-bigstat { background:#202024; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:22px 14px; text-align:center; }
.xp-bigstat .n { font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.xp-bigstat .l { font-size:.66rem; font-weight:700; letter-spacing:.08em; color:#8b8f99; margin-top:9px; }
.xp-bigstats.lite .xp-litestat { background:linear-gradient(160deg,#212126,#1a1a1f); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px; text-align:left; }
.xp-litestat .l { font-size:.66rem; font-weight:700; letter-spacing:.08em; color:#8b8f99; }
.xp-litestat .n { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin-top:6px; }

/* section titles */
.xp-secttl { font-size:1.02rem; font-weight:800; margin:18px 0 10px; }
.xp-secttl.small { font-size:.72rem; font-weight:700; letter-spacing:.1em; color:#8b8f99; text-transform:uppercase; margin:18px 0 12px; }
.xp-secttl .sub { color:#8b8f99; font-weight:600; font-size:.82rem; }
.xp-secttl.small .sub { font-size:.7rem; letter-spacing:.04em; }

/* performer rows */
.xp-perf { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; }
.xp-perf .rk { width:24px; height:24px; flex:none; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; font-size:.74rem; font-weight:700; color:#8b8f99; }
.xp-perf .nm { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xp-perf .lk { flex:none; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px; }
.xp-perf .lk.hi { color:#22c55e; background:rgba(34,197,94,.14); }
.xp-perf .lk.lo { color:#ff7480; background:rgba(230,57,70,.14); }
.xp-perf .pr { flex:none; font-weight:800; font-size:.92rem; }
.xp-totalrow { display:flex; align-items:center; justify-content:space-between; padding-top:8px; font-size:.92rem; }
.xp-totalrow b { font-size:1.05rem; font-weight:800; }

/* pricing pills */
.xp-pricerow { display:flex; gap:9px; }
.xp-pricepill { flex:1; text-align:center; background:#202024; border:1px solid rgba(255,255,255,.07); border-radius:11px; padding:11px 4px; font-size:.82rem; color:#8b8f99; }
.xp-pricepill b { color:#fff; font-weight:800; display:block; font-size:.92rem; }

/* distribution / category bars */
.xp-dist { display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:11px; margin-bottom:11px; }
.xp-dist.cat { grid-template-columns:90px 1fr auto; }
.xp-dist .dl { font-size:.82rem; color:#c9ccd4; font-weight:600; }
.xp-dist .db { height:9px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden; }
.xp-dist .db span { display:block; height:100%; background:linear-gradient(90deg,#1fb574,#16a34a); border-radius:5px; }
.xp-dist .dv { font-size:.86rem; font-weight:700; min-width:34px; text-align:right; }
.xp-discount { background:#202024; border:1px solid rgba(255,255,255,.07); border-radius:11px; padding:14px; font-size:.88rem; color:#c9ccd4; }
.xp-discount::first-letter { font-weight:800; color:#fff; }

/* watchlist items */
.xp-watch { display:flex; align-items:center; gap:13px; padding:11px; border-radius:14px; background:#1b1b1f; border:1px solid rgba(255,255,255,.06); margin-bottom:11px; }
.wt-thumb { position:relative; width:56px; height:56px; flex:none; border-radius:12px; overflow:hidden; }
.wt-badge { position:absolute; top:4px; left:4px; background:#16a34a; color:#fff; font-size:.6rem; font-weight:800; padding:2px 5px; border-radius:5px; }
.wt-meta { flex:1; min-width:0; }
.wt-t { font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wt-price { font-size:.92rem; margin-top:3px; } .wt-price s { color:#8b8f99; } .wt-price b { color:#fff; font-weight:800; }
.wt-u { font-size:.78rem; color:#8b8f99; margin-top:2px; }
.wt-x { color:#7c828e; font-size:.9rem; flex:none; } .wt-x:hover { color:#ff7480; }

/* send offers config */
.xp-offcfg { background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; margin-bottom:16px; }
.xp-radio2 { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; font-size:.96rem; font-weight:600; color:#c9ccd4; }
.xp-radio2.on { background:rgba(230,57,70,.1); color:#fff; box-shadow:inset 3px 0 0 var(--brand-red); }
.xp-radio2 .rb { width:20px; height:20px; border-radius:50%; border:2px solid #4a4a52; flex:none; }
.xp-radio2.on .rb { border-color:var(--brand-red); box-shadow:inset 0 0 0 4px var(--brand-red); }
.xp-cfgdiv { height:1px; background:rgba(255,255,255,.08); margin:12px 0; }

/* accept offers — mode cards */
.xp-offcards { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.xp-offcard { position:relative; border-radius:16px; padding:24px 16px; min-height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; overflow:hidden; transition:transform .2s; color:#fff; }
.xp-offcard:hover { transform:translateY(-3px); }
.xp-offcard svg { width:30px; height:30px; margin-bottom:5px; }
.xp-offcard .t { font-weight:800; font-size:1.04rem; }
.xp-offcard .s { font-size:.78rem; opacity:.85; }
.xp-offcard.red { background:linear-gradient(160deg,#e8454e,#c92730); }
.xp-offcard.green { background:linear-gradient(160deg,#1fc080,#0c9a60); }
.xp-offcard .pro { position:absolute; top:0; right:0; bottom:0; width:22px; background:var(--pro-blue); display:grid; place-items:center; }
.xp-offcard .pro span { font-size:.5rem; font-weight:800; color:#fff; writing-mode:vertical-rl; transform:rotate(180deg); }
.xp-eg { text-align:center; font-size:.84rem; color:#8b8f99; margin:12px 0 0; } .xp-eg b { color:#c9ccd4; }
.xp-splabel.center { text-align:center; }

/* 24/7 monitor */
.xp-eyewrap { display:grid; place-items:center; gap:14px; padding:16px 0 10px; }
.xp-eye { width:120px; height:120px; border-radius:50%; border:2px solid rgba(255,255,255,.12); display:grid; place-items:center; color:#8b8f99; }
.xp-eye svg { width:46px; height:46px; }
.xp-idle { font-size:.92rem; color:#8b8f99; }
.xp-monstats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; margin:6px 0 4px; }
.xp-monstat { background:#202024; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px 6px; text-align:center; }
.xp-monstat .n { font-size:1.4rem; font-weight:800; }
.xp-monstat .l { font-size:.62rem; font-weight:700; letter-spacing:.08em; color:#8b8f99; margin-top:5px; }

/* demand score (shark store) */
.xp-demand { background:linear-gradient(150deg,rgba(246,166,35,.18),rgba(224,53,63,.1)); border:1px solid rgba(246,166,35,.25); border-radius:16px; padding:18px; margin-bottom:16px; }
.ext-pop.is-light .xp-demand { background:linear-gradient(150deg,#fdeedd,#fbe6e2); border-color:rgba(246,166,35,.3); }
.dm-top { display:flex; align-items:center; justify-content:space-between; }
.dm-l { font-size:.78rem; font-weight:800; letter-spacing:.06em; color:#e08a1e; }
.dm-v { font-size:2rem; font-weight:800; color:#e0721e; line-height:1; }
.dm-bar { height:9px; border-radius:5px; background:rgba(246,166,35,.22); overflow:hidden; margin:12px 0; }
.dm-bar span { display:block; height:100%; background:linear-gradient(90deg,#f6a623,#ef7d12); border-radius:5px; }
.dm-foot { display:flex; justify-content:space-between; font-size:.8rem; color:#c98a3a; }
.ext-pop.is-light .dm-foot { color:#b9772a; }

/* big action buttons (competitor profile) */
.xp-bigbtn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; border-radius:14px; font-weight:800; font-size:1.02rem; color:#fff; margin-bottom:13px; position:relative; overflow:hidden; transition:transform .2s; }
.xp-bigbtn:hover { transform:translateY(-2px); }
.xp-bigbtn svg { width:22px; height:22px; }
.xp-bigbtn.dark { background:#1c1c20; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.xp-bigbtn.green { background:linear-gradient(160deg,#1fc080,#0c9a60); }
.xp-bigbtn.blue { background:linear-gradient(160deg,#3a72f0,#2257db); }
.xp-bigbtn.pro::after { content:"PRO"; position:absolute; top:0; right:0; bottom:0; width:24px; background:var(--pro-blue); writing-mode:vertical-rl; transform:rotate(180deg); display:grid; place-items:center; font-size:.52rem; font-weight:800; }
.ext-pop.is-light .xp-bigbtn.dark { background:#1c1c20; }

/* shark result rows */
.xp-sharkrow { display:flex; align-items:center; gap:13px; padding:10px; border-radius:14px; background:#1b1b1f; border:1px solid rgba(255,255,255,.06); margin-bottom:11px; }
.sk-thumb { width:58px; height:58px; flex:none; border-radius:12px; overflow:hidden; }
.sk-heart { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:.92rem; font-weight:700; color:#ff7480; }
.sk-heart svg { width:16px; height:16px; }

/* help & features */
.xp-helpcard { background:#1b1b1f; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; margin-bottom:18px; }
.xp-helpcard h4 { font-size:1.1rem; font-weight:800; margin:0 0 7px; }
.xp-helpcard p { font-size:.86rem; color:#9aa0aa; line-height:1.5; margin:0 0 15px; }
.xp-acc { border-top:1px solid rgba(255,255,255,.08); }
.xp-accrow { display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; }
.xp-accrow .ac-l { font-size:1rem; font-weight:700; display:flex; align-items:center; gap:9px; }
.xp-accrow .ac-c { width:18px; height:18px; color:#8b8f99; transition:transform .2s; }
.xp-accrow.open .ac-c { transform:rotate(180deg); }
.xp-accrow.open { background:linear-gradient(90deg,rgba(37,99,235,.16),rgba(37,99,235,.04)); border-radius:10px; margin:0 -4px; padding:16px 8px; }
.xp-accrow.open .ac-l, .xp-accrow.open .ac-c { color:#5b8def; }
.xp-appearance { margin-top:20px; text-align:center; }
.xp-applabel { font-size:.7rem; font-weight:700; letter-spacing:.14em; color:#8b8f99; margin-bottom:12px; }
.xp-appearance .xp-seg2 { max-width:300px; margin:0 auto; }
.xp-ver { text-align:center; font-size:.72rem; color:#6f757f; margin-top:18px; }

/* analytics sub cards (dark on both themes) */
.s-dark { background:#1c1c20; color:#fff; }
.s-dark svg { color:#fff; }
.s-dark .dollar { font-size:1.7rem; font-weight:800; }
.ext-pop.is-light .s-dark { background:#1c1c20; color:#fff; }