/* Pro theme (Settings › Appearance › Pro): the dark premium look of the App Store screenshots – near-black with a
   soft brand-yellow glow, quiet glass panels instead of outlines and hard shadows, bold Inter instead of Bungee,
   yellow kept for what you press. Only applies with <html data-skin="pro"> (set together with data-theme="dark"),
   loaded after cb.css so it overrides the sticker look; switching back to Light/Dark brings that back untouched. */

:root[data-skin=pro] {
  --bg: #0b0b0e; --panel: #16161b; --panel2: #202026; --ink: #f5f5f7; --muted: #8e8e98; --line: #26262d;
  --sep: rgba(255, 255, 255, .07); --seg: #202026; --seg-on: var(--brand);
  --edge: rgba(255, 255, 255, .09); --shade: transparent; --card-shade: rgba(0, 0, 0, .45);
  --good: #34d17f; --bad: #ff5f57; --accent: #f9af17;
  --cb-border: 1px solid rgba(255, 255, 255, .08); --cb-shadow: 0 14px 34px rgba(0, 0, 0, .5); --cb-shadow-s: 0 4px 14px rgba(0, 0, 0, .35);
  --display: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --glass: rgba(14, 14, 18, .82);
  color-scheme: dark;
}
:root[data-skin=pro] body {
  background: radial-gradient(130% 55% at 50% -12%, rgba(249, 175, 23, .17), rgba(249, 175, 23, 0) 62%),
              radial-gradient(90% 40% at 50% 112%, rgba(120, 80, 255, .10), rgba(0, 0, 0, 0) 70%), var(--bg);
  background-attachment: fixed;
}

/* ---------- type: bold Inter, mixed case ---------- */
:root[data-skin=pro] :is(.ptitle, .sheet h2, #pfV, .hit .pr, .price-big, .pf-v, .ss-total b, .cd-price b, .ss-h, .gr-big b, .auth h1,
  .scan-hero .hero-tx > span, .pf-tiles b, .gr-est, .howto .hw-n, .opts-head b, .rc-top b, .welcome h3, .goals h3, .cd-h) {
  font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: -.025em !important;
}
:root[data-skin=pro] :is(.ptitle, .sheet h2) { text-transform: none !important; }
:root[data-skin=pro] .ptitle { font-size: 26px !important; }
:root[data-skin=pro] .ptitle.long { font-size: 21px !important; }
:root[data-skin=pro] #pfV { font-size: clamp(32px, 11vw, 48px); }
/* section labels: small, spaced, quiet – a yellow dot instead of the sticker diamond */
:root[data-skin=pro] .sec-h { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; color: var(--muted); }
:root[data-skin=pro] .sec-h::before { width: 6px; height: 6px; border: 0; border-radius: 50%; transform: none; box-shadow: 0 0 10px rgba(249, 175, 23, .7); }
:root[data-skin=pro] .sec-h > :is(button, .sec-link, a) { letter-spacing: 0; color: var(--accent); }

/* ---------- presses: a soft squeeze instead of the sticker's push-in ---------- */
:root[data-skin=pro] :is(.btn, .pf-more, .chip.ichip, .coll-bar > .ichip, #filtBtn, .hdr-gear, .addbtn, .tile .plus, #statsBack, #mkBack, #toolBack, .mk-jp):active {
  transform: scale(.97) !important; box-shadow: var(--cb-shadow-s) !important;
}
:root[data-skin=pro] :is(.btn.primary, .addbtn, .tile .plus, .pk .plus, .sell-main, #sellSum #sellMany, .pf-more, .hdr-gear) {
  border-color: transparent !important; box-shadow: 0 6px 20px rgba(249, 175, 23, .28) !important;
}
:root[data-skin=pro] .hdr-gear.on { box-shadow: 0 6px 20px rgba(249, 175, 23, .35) !important; }
:root[data-skin=pro] .btn { border-radius: 12px; }

/* ---------- surfaces and pictures: no outlines, soft depth ---------- */
:root[data-skin=pro] :is(.item img, .cv img, .hit img, .carousel img, .pk img) { border: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
:root[data-skin=pro] #collList.list > .item img { box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
:root[data-skin=pro] .ctile img { box-shadow: 0 8px 22px rgba(0, 0, 0, .55) !important; }
:root[data-skin=pro] :is(.tico, .welcome .wl-ico) { border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
:root[data-skin=pro] .scan-hero { border: 0 !important; box-shadow: 0 18px 44px rgba(249, 175, 23, .25) !important;
  background: linear-gradient(150deg, #ffc53d, #f9af17 55%, #e99500) !important; }
:root[data-skin=pro] .hit { box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(249, 175, 23, .25) !important; }

/* game tags and change pills: flat labels, not tilted stickers */
:root[data-skin=pro] .tag { transform: none; border: 0; box-shadow: none; border-radius: 6px; font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
:root[data-skin=pro] .pill { border: 0; box-shadow: none; }
:root[data-skin=pro] .tile .own-badge { border: 0; box-shadow: none; }
:root[data-skin=pro] .prog { border: 0; }
:root[data-skin=pro] .prog i { border-right: 0; box-shadow: 0 0 10px rgba(249, 175, 23, .5); }

/* ---------- header, sheets, toast: glass ---------- */
:root[data-skin=pro] header.top { background: var(--glass) !important; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
:root[data-skin=pro] body.scrolled header.top { box-shadow: 0 1px 0 rgba(255, 255, 255, .07) !important; }
:root[data-skin=pro] :is(.sheet .sheet-body, #sheet) { border-top: 1px solid rgba(255, 255, 255, .1); }
:root[data-skin=pro] .sheet-actions { border-top: 1px solid rgba(255, 255, 255, .08) !important; background: var(--glass); }
:root[data-skin=pro] .toast { background: rgba(28, 28, 33, .92) !important; border: 1px solid rgba(249, 175, 23, .45) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important; backdrop-filter: blur(16px); }
:root[data-skin=pro] #shinePanel { box-shadow: 0 -10px 40px rgba(0, 0, 0, .6); }

/* ---------- tab bar: dark glass, glowing yellow circles ---------- */
:root[data-skin=pro] .tabs { background: var(--glass) !important; border-top: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: 0 240px 0 0 #0e0e12 !important; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
:root[data-skin=pro] .tabs button { color: #7c7c86 !important; }
:root[data-skin=pro] .tabs.atb .atb-bump { fill: #0e0e12; }
:root[data-skin=pro] .tabs.atb button.on i, :root[data-skin=pro] .tabs.atb .scan-fab i {
  border-color: transparent !important; box-shadow: 0 8px 24px rgba(249, 175, 23, .45) !important; }
:root[data-skin=pro] .tabs.atb .scan-fab:active i { transform: scale(.94) !important; }
/* "Details ›" next to the value is a plain link, not a glowing button */
:root[data-skin=pro] .pf-hero .pf-l .pf-more { box-shadow: none !important; }