/* Premium dark – the one look of the app since v147 (the "card-first premium dark" redesign). Loaded last, on top of style.css → cb.css → pro.css (index.html always sets data-theme=dark + data-skin=pro). Near-black ground, one yellow accent for what you press, green/red only for price moves, Geist for text and tabular figures for money. Card pictures carry the screens; panels are quiet hairline boxes without shadows. */ @font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; src: url("/fonts/geist-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root[data-skin=pro] { --bg: #0a0a0c; --panel: #141418; --panel2: #1c1c21; --ink: #f4f4f6; --muted: #a1a1aa; --line: rgba(255, 255, 255, .08); --sep: rgba(255, 255, 255, .06); --seg: rgba(255, 255, 255, .04); --seg-on: #26262c; --brand: #ffd23f; --brand-2: #ffe27a; --on-brand: #141414; --accent: #ffd23f; --good: #4ade80; --bad: #ff7a7a; --edge: rgba(255, 255, 255, .08); --cb-border: 1px solid rgba(255, 255, 255, .07); --cb-shadow: none; --cb-shadow-s: none; --display: "Geist", system-ui, -apple-system, sans-serif; --mono: "Geist", system-ui, sans-serif; /* money: Geist with tabular figures (a monospace face made "€2,94" look gappy) */ --glass: rgba(14, 14, 17, .86); --radius: 14px; } :root[data-skin=pro] html, :root[data-skin=pro] body, :root[data-skin=pro] :is(button, input, select, textarea) { font-family: "Geist", system-ui, -apple-system, sans-serif; } :root[data-skin=pro] body { background: radial-gradient(120% 340px at 50% 0, rgba(255, 210, 63, .08), rgba(255, 210, 63, 0) 75%), var(--bg); background-attachment: scroll; color: var(--ink); } /* ---------- money: one mono face, tabular ---------- */ :root[data-skin=pro] :is(#pfV, .pf-v, .hit .pr, .price-big, #shPrice, .item .rt b, .item .rt span, .cap b, .cv b, .cv .p, .kpi b, .ss-total b, .cd-price b, .pf-tiles b, .cm-price, .session .sum b, #hdrTotal, .sell-stats b) { font-family: var(--mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em !important; } :root[data-skin=pro] :is(#pfV, .pf-v, .price-big, #shPrice) { font-family: "Geist", sans-serif !important; font-weight: 600 !important; letter-spacing: -.035em !important; } :root[data-skin=pro] #pfV { font-size: clamp(38px, 12vw, 48px) !important; line-height: 1.05; } /* ---------- header: big plain title, no gear (Profile is a tab now) ---------- */ :root[data-skin=pro] header.top { background: rgba(10, 10, 12, .88) !important; box-shadow: none !important; } :root[data-skin=pro] .ptitle { font-family: "Geist", sans-serif !important; font-weight: 700 !important; font-size: 32px !important; letter-spacing: -.035em !important; text-transform: none !important; } :root[data-skin=pro] .hdr-gear { display: none !important; } :root[data-skin=pro] header.top .total { display: none; } /* ---------- section titles: plain words, no dot or diamond ---------- */ :root[data-skin=pro] .sec-h { font-family: "Geist", sans-serif !important; font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ink) !important; margin: 26px 2px 10px; } :root[data-skin=pro] .sec-h::before { display: none !important; } :root[data-skin=pro] .sec-h small { font-size: 13px; font-weight: 400; color: var(--muted); } :root[data-skin=pro] .sec-h > :is(button, .sec-link, a) { font-size: 14px; font-weight: 500; color: var(--brand) !important; letter-spacing: 0 !important; } /* ---------- segmented controls + ranges: dark pill, lit = raised grey (yellow is for actions) ---------- */ :root[data-skin=pro] .seg, :root[data-skin=pro] .ranges { background: var(--seg) !important; border: 1px solid var(--sep) !important; border-radius: 12px !important; padding: 3px !important; gap: 4px; box-shadow: none !important; } :root[data-skin=pro] :is(.seg, .ranges) button { border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--muted) !important; font: 500 13px "Geist", sans-serif !important; box-shadow: none !important; min-height: 32px; } :root[data-skin=pro] :is(.seg, .ranges) button.on { background: var(--seg-on) !important; color: var(--ink) !important; font-weight: 600 !important; } /* ---------- buttons ---------- */ :root[data-skin=pro] .btn { border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .14) !important; background: rgba(255, 255, 255, .04) !important; color: var(--ink) !important; box-shadow: none !important; font-weight: 600; } :root[data-skin=pro] :is(.btn.primary, .addbtn, .sell-main) { background: var(--brand) !important; color: var(--on-brand) !important; border-color: transparent !important; box-shadow: none !important; } :root[data-skin=pro] .btn.danger { color: var(--bad) !important; border-color: rgba(255, 122, 122, .35) !important; } :root[data-skin=pro] .btn.ghost { background: transparent !important; } :root[data-skin=pro] :is(.btn, .chip, .seg button, .tile, .cv, .ctile, .scanbtn):active { transform: scale(.97) !important; } /* ---------- panels and lists: hairline, no shadow ---------- */ :root[data-skin=pro] :is(.glist, .card-box, .list:not(.pick), .kpis, .session, .scan-alt, .scan-pack, .shopbtn, .coll-tools .ctool, .sell-stats > *) { background: var(--panel) !important; border: 1px solid var(--sep) !important; box-shadow: none !important; border-radius: 16px !important; } :root[data-skin=pro] #collList.list, :root[data-skin=pro] #moversList.list { background: transparent !important; border: 0 !important; } :root[data-skin=pro] :is(#collList, #moversList) > .item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--sep) !important; border-radius: 0 !important; padding-left: 0; padding-right: 0; } :root[data-skin=pro] .item img { border-radius: 5px !important; box-shadow: none !important; } :root[data-skin=pro] .item .rt .up { color: var(--good) !important; } :root[data-skin=pro] .item .rt .down { color: var(--bad) !important; } /* no glow anywhere: flat yellow is enough */ :root[data-skin=pro] :is(#sellSum #sellMany, .sell-main, .pf-more, .scan-hero, .btn.primary, .addbtn, .tile .plus, .pk .plus) { box-shadow: none !important; } /* Collection is just cards: Binder · Inventory · Decks moved to Profile */ :root[data-skin=pro] #collTools { display: none !important; } :root[data-skin=pro] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-skin=pro] select, :root[data-skin=pro] textarea { background-color: #16161a !important; border: 1px solid var(--sep) !important; border-radius: 12px !important; color: var(--ink) !important; box-shadow: none !important; } :root[data-skin=pro] :is(input, select, textarea):focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 1px; } /* game tags + pills: small flat labels */ :root[data-skin=pro] .tag { border: 0 !important; box-shadow: none !important; transform: none !important; border-radius: 5px !important; font: 600 10.5px "Geist", sans-serif !important; letter-spacing: .03em !important; } :root[data-skin=pro] .pill { border: 0 !important; box-shadow: none !important; } /* chips: outlined, lit = yellow tint */ :root[data-skin=pro] :is(.chip, .fchips select, .fchips .chip, #collChips select) { border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .1) !important; background-color: transparent !important; color: var(--muted) !important; box-shadow: none !important; } :root[data-skin=pro] :is(.chip.on, .fchips select.on, #collChips select.on) { border-color: rgba(255, 210, 63, .5) !important; background-color: rgba(255, 210, 63, .12) !important; color: var(--brand) !important; } /* ---------- pictures: the cards are the design ---------- */ :root[data-skin=pro] :is(.cv img, .carousel img, .ctile img, .tile img, .hit img, .pk img) { border: 0 !important; border-radius: 7px !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .55) !important; } :root[data-skin=pro] .cgrid { gap: 16px 10px !important; } :root[data-skin=pro] .ctile { background: none !important; border: 0 !important; box-shadow: none !important; } :root[data-skin=pro] .ctile .cap b { font-size: 14px; font-weight: 600; } :root[data-skin=pro] .ctile :is(.qty, .shiny, .grade) { background: rgba(10, 10, 12, .82) !important; color: var(--ink) !important; border: 0 !important; box-shadow: none !important; transform: none !important; backdrop-filter: blur(8px); border-radius: 999px !important; font-weight: 600; } /* ---------- Home ---------- */ :root[data-skin=pro] .pf-hero { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 2px 0 !important; } :root[data-skin=pro] .pf-hero .pf-l { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } :root[data-skin=pro] .pf-ch { font-family: var(--mono); font-size: 13px; font-weight: 600; } :root[data-skin=pro] .pf-ch.up { color: var(--good); } :root[data-skin=pro] .pf-ch.down { color: var(--bad); } :root[data-skin=pro] .pf-ch span { font-family: "Geist", sans-serif; font-weight: 400; color: var(--muted); } :root[data-skin=pro] #tab-stats #topList .cv { width: 124px; } :root[data-skin=pro] #tab-stats .kpis { margin-bottom: 18px; } /* ---------- Market: Selling | Community on top ---------- */ :root[data-skin=pro] .mk-top { display: grid !important; grid-template-columns: 1fr 1fr; margin: 4px 0 14px; } :root[data-skin=pro] .mk-top .mk-n:empty { display: none; } :root[data-skin=pro] .mk-top .mk-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--on-brand); font: 600 11px var(--mono); font-style: normal; } /* ---------- tab bar: flat glass, five equal tabs, yellow = where you are ---------- */ :root[data-skin=pro] .tabs { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--glass) !important; border-top: 1px solid rgba(255, 255, 255, .07) !important; box-shadow: none !important; backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); } :root[data-skin=pro] .tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 10px !important; background: none !important; border: 0 !important; box-shadow: none !important; color: #8a8a93 !important; font: 500 11px "Geist", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; } :root[data-skin=pro] .tabs button svg { width: 24px !important; height: 24px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round; stroke-linejoin: round; transform: none !important; } :root[data-skin=pro] .tabs button.on { color: var(--brand) !important; font-weight: 600 !important; } :root[data-skin=pro] .tabs button::before, :root[data-skin=pro] .tabs button::after { display: none !important; } :root[data-skin=pro] .tabs button[data-n]:not([data-n=""])::after { content: attr(data-n); display: grid !important; place-items: center; position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font: 600 10px var(--mono); } :root[data-skin=pro] .tabs .dot { background: var(--brand) !important; color: var(--on-brand) !important; } /* ---------- Scan home ---------- */ :root[data-skin=pro] .scan-hero { background: var(--brand) !important; color: var(--on-brand) !important; border: 0 !important; box-shadow: none !important; border-radius: 20px !important; } :root[data-skin=pro] .scan-hero .hero-tx > span { font-family: "Geist", sans-serif !important; font-weight: 700 !important; letter-spacing: -.03em !important; } :root[data-skin=pro] .scan-hero em { background: #141414 !important; color: var(--brand) !important; } /* ---------- Scan, camera on: the whole screen is the camera ---------- */ :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) :is(header.top, .tabs) { display: none !important; } :root[data-skin=pro] body[data-tab=scan] #live:not([hidden]) { position: fixed !important; inset: 0 !important; z-index: 40; width: 100% !important; height: 100dvh !important; max-height: none !important; max-width: none !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } :root[data-skin=pro] #live .guide i { height: auto !important; width: min(68vw, 46dvh * 63 / 88) !important; margin-bottom: 14dvh; --c: var(--brand); } :root[data-skin=pro] #live .guide.ok i { --c: var(--good); } :root[data-skin=pro] #live :is(.live-close, .live-gear, .live-torch) { width: 44px !important; height: 44px !important; border-radius: 22px !important; background: rgba(20, 20, 24, .6) !important; border: 1px solid rgba(255, 255, 255, .12) !important; backdrop-filter: blur(16px); color: #fff; } :root[data-skin=pro] #live .live-close { top: calc(12px + env(safe-area-inset-top)) !important; left: 16px !important; right: auto !important; bottom: auto !important; } :root[data-skin=pro] #live .live-torch { top: calc(12px + env(safe-area-inset-top)) !important; right: 16px !important; left: auto !important; } :root[data-skin=pro] #live .live-gear { top: auto !important; bottom: calc(26px + env(safe-area-inset-bottom)) !important; right: 16px !important; left: auto !important; } :root[data-skin=pro] #live .live-status { bottom: auto !important; top: calc(50% + 18dvh) !important; background: rgba(20, 20, 24, .6) !important; border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(16px); } /* what the camera found, the session, Language/Version float over the picture */ :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #hit:not([hidden]) { position: fixed; left: 12px; right: 12px; z-index: 45; bottom: calc(88px + env(safe-area-inset-bottom)); margin: 0; background: rgba(22, 22, 26, .86) !important; border: 1px solid rgba(255, 255, 255, .1) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 18px !important; max-height: 46dvh; overflow: auto; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session:not([hidden]) { position: fixed; left: 76px; right: 76px; z-index: 45; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; min-height: 52px; border-radius: 26px !important; background: var(--brand) !important; color: var(--on-brand) !important; border: 0 !important; padding: 6px 8px 6px 16px; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session :is(.last, .sum, b, span) { color: var(--on-brand) !important; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session .sum > b:first-child { background: #141414 !important; color: var(--brand) !important; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session button { background: rgba(20, 20, 20, .12) !important; border: 0 !important; color: #141414 !important; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #scanPick { position: fixed; z-index: 45; left: 72px; right: 72px; top: calc(12px + env(safe-area-inset-top)); margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #scanPick .spk { min-height: 44px; padding: 4px 10px; border-radius: 22px !important; background: rgba(20, 20, 24, .6) !important; border: 1px solid rgba(255, 255, 255, .12) !important; backdrop-filter: blur(16px); } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #scanPick .spk span { font-size: 10px; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #scanPick select { background: transparent !important; border: 0 !important; padding: 0 !important; min-height: 0; font-size: 13px; font-weight: 600; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) :is(#searchForm, #results, #recent, #howto, #scanHome) { display: none !important; } :root[data-skin=pro] #shinePanel { z-index: 60 !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; background: rgba(22, 22, 26, .94) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 20px !important; backdrop-filter: blur(24px); box-shadow: 0 -10px 40px rgba(0, 0, 0, .6) !important; } /* ---------- card page ---------- */ :root[data-skin=pro] #sheet .sheet-body { background: var(--bg) !important; } :root[data-skin=pro] #sheet .sheet-head img { border-radius: 10px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06) !important; } :root[data-skin=pro] #sheet h2 { font-family: "Geist", sans-serif !important; font-weight: 700 !important; letter-spacing: -.02em !important; } :root[data-skin=pro] .cd-h { font-family: "Geist", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; } :root[data-skin=pro] .sheet-actions { background: linear-gradient(to top, var(--bg) 72%, rgba(10, 10, 12, 0)) !important; border-top: 0 !important; } :root[data-skin=pro] .sheet-actions .btn { min-height: 50px; } /* Trend | Cheapest | 30-day avg sit side by side: dividers go between them, not across the top */ :root[data-skin=pro] .cd-stats .kpi + .kpi { border-top: 0 !important; border-left: 1px solid rgba(255, 255, 255, .06) !important; } /* Versions: the selected finish is a tinted row with a ✓, not a box of its own (its border shifted the row) */ :root[data-skin=pro] .list .item.cd-row.on { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: rgba(255, 210, 63, .06) !important; } /* More ways to sell: plain list rows inside the group, not pills inside a box */ :root[data-skin=pro] .sell-links > .btn.item { border: 0 !important; border-radius: 0 !important; background: none !important; min-height: 52px; } :root[data-skin=pro] :is(.sell-more, .cd-more)[open] > summary::after { content: "›"; display: inline-block; margin-left: 6px; transform: rotate(90deg); } /* ---------- toast ---------- */ :root[data-skin=pro] .toast { background: rgba(28, 28, 33, .94) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 16px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important; color: var(--ink) !important; } :root[data-skin=pro] .toast button { color: var(--brand) !important; } /* ---------- settings rows ---------- */ :root[data-skin=pro] .tico { box-shadow: none !important; border: 0 !important; border-radius: 8px !important; } :root[data-skin=pro] input.gchk:checked, :root[data-skin=pro] .gsw[aria-pressed=true] { background: var(--brand) !important; } /* change pills: tinted, coloured text (never a solid green/red block) */ :root[data-skin=pro] .pill { border-radius: 7px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; } :root[data-skin=pro] .pill.up, :root[data-skin=pro] .item .rt .pill.up { background: rgba(74, 222, 128, .12) !important; color: var(--good) !important; } :root[data-skin=pro] .pill.down, :root[data-skin=pro] .item .rt .pill.down { background: rgba(255, 122, 122, .12) !important; color: var(--bad) !important; } /* sign-in wordmark: Foilsight */ :root[data-skin=pro] .fs-mark { display: inline-block; font: 700 40px "Geist", sans-serif; letter-spacing: -.045em; color: var(--ink); } :root[data-skin=pro] .fs-mark b { font-weight: 700; color: var(--brand); } /* session pill over the camera: narrow, so "37 · €125,06" without "added", and nothing runs under Review / Undo */ :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session .grow { min-width: 0; overflow: hidden; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session .sum { overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session .sum .sw { display: none; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session button { flex: none; padding: 8px 12px; } :root[data-skin=pro] body[data-tab=scan]:has(#live:not([hidden])) #session:not([hidden]) { left: 12px; } /* ---------- v158 Scan page: one premium scanner card (start + Turbo), three tools under it ---------- */ :root[data-skin=pro] .sx { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 20px; } :root[data-skin=pro] .sx[hidden] { display: none; } :root[data-skin=pro] .sx-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 22px 18px 16px; background: radial-gradient(130% 110% at 100% 0, rgba(255, 210, 63, .2), rgba(255, 210, 63, 0) 58%), linear-gradient(165deg, #1c1c22, #111114 70%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .9); } :root[data-skin=pro] .sx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .05) 48%, transparent 58%); } :root[data-skin=pro] .sx-hero:has(#liveBtn[hidden]) { display: none; } /* no live camera (plain http): Photo leads */ :root[data-skin=pro] .sx-top { display: flex; align-items: center; gap: 14px; } :root[data-skin=pro] .sx-tx { flex: 1; min-width: 0; } :root[data-skin=pro] .sx-kicker { display: inline-flex; align-items: center; gap: 7px; font: 600 11px "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } :root[data-skin=pro] .sx-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); animation: sxPulse 2.2s ease-in-out infinite; } :root[data-skin=pro] .sx-tx h2 { margin: 10px 0 6px; font: 700 31px/1.02 "Geist", sans-serif; letter-spacing: -.04em; color: var(--ink); } :root[data-skin=pro] .sx-tx p { margin: 0; font-size: 14.5px; line-height: 1.42; color: var(--muted); } /* the little scanner: a yellow card in corner brackets, a light sweeping over it */ :root[data-skin=pro] .sx-vf { flex: none; position: relative; width: 86px; height: 112px; --k: rgba(255, 255, 255, .85); background: linear-gradient(var(--k), var(--k)) top left / 18px 2px, linear-gradient(var(--k), var(--k)) top left / 2px 18px, linear-gradient(var(--k), var(--k)) top right / 18px 2px, linear-gradient(var(--k), var(--k)) top right / 2px 18px, linear-gradient(var(--k), var(--k)) bottom left / 18px 2px, linear-gradient(var(--k), var(--k)) bottom left / 2px 18px, linear-gradient(var(--k), var(--k)) bottom right / 18px 2px, linear-gradient(var(--k), var(--k)) bottom right / 2px 18px; background-repeat: no-repeat; } :root[data-skin=pro] .sx-vf i { position: absolute; inset: 11px 14px; border-radius: 7px; transform: rotate(-5deg); background: linear-gradient(150deg, #ffe89a, #ffd23f 45%, #e3a600); box-shadow: 0 12px 26px -6px rgba(255, 196, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .35); } :root[data-skin=pro] .sx-vf i::after { content: ""; position: absolute; inset: 6px; border-radius: 4px; border: 1px solid rgba(20, 20, 20, .18); } :root[data-skin=pro] .sx-vf b { position: absolute; left: 6px; right: 6px; top: 14%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 14px 2px rgba(255, 255, 255, .7); animation: sxScan 2.6s ease-in-out infinite alternate; } @keyframes sxScan { to { top: 84%; } } @keyframes sxPulse { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } } :root[data-skin=pro] .sx-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 20px; border: 0; border-radius: 17px; background: linear-gradient(180deg, #ffdc5c, var(--brand)); color: var(--on-brand); cursor: pointer; font: 650 17px "Geist", sans-serif; letter-spacing: -.01em; box-shadow: 0 14px 28px -12px rgba(255, 210, 63, .65), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .1s; } :root[data-skin=pro] .sx-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin=pro] .sx-cta:active { transform: scale(.98); } :root[data-skin=pro] .sx-turbo { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 17px; cursor: pointer; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); transition: background .2s, border-color .2s; } :root[data-skin=pro] .sx-turbo:has(:checked) { background: rgba(255, 210, 63, .08); border-color: rgba(255, 210, 63, .3); } :root[data-skin=pro] .sx-bolt { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 210, 63, .12); color: var(--brand); transition: background .2s, color .2s; } :root[data-skin=pro] .sx-turbo:has(:checked) .sx-bolt { background: var(--brand); color: var(--on-brand); } :root[data-skin=pro] .sx-bolt svg { width: 18px; height: 18px; fill: currentColor; } :root[data-skin=pro] .sx-ttx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } :root[data-skin=pro] .sx-ttx b { font: 600 15.5px "Geist", sans-serif; color: var(--ink); } :root[data-skin=pro] .sx-ttx small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .sx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } :root[data-skin=pro] .sx-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 14px 12px 13px; border-radius: 19px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .06); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .1s, background .15s; } :root[data-skin=pro] .sx-tile:active { transform: scale(.97); background: var(--panel2); } :root[data-skin=pro] .sx-ti { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 12px; background: rgba(255, 210, 63, .1); color: var(--brand); } :root[data-skin=pro] .sx-ti svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin=pro] .sx-tile b { max-width: 100%; font: 600 14.5px "Geist", sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .sx-tile small { max-width: 100%; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Shop check: only shown while it's on, so it can be switched off from here */ :root[data-skin=pro] .sx-shop[aria-pressed=false] { display: none; } :root[data-skin=pro] .sx-shop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 17px; cursor: pointer; background: rgba(249, 115, 22, .08); border: 1px solid rgba(249, 115, 22, .32); color: var(--ink); font: inherit; text-align: left; } :root[data-skin=pro] .sx-shop .sh-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #f97316; color: #fff; } :root[data-skin=pro] .sx-shop .sh-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin=pro] .sx-shop .sh-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } :root[data-skin=pro] .sx-shop .sh-tx b { font: 600 15px "Geist", sans-serif; } :root[data-skin=pro] .sx-shop .sh-tx small { font-size: 12.5px; color: var(--muted); } :root[data-skin=pro] .sx-shop .sx-off { flex: none; font: 600 14px "Geist", sans-serif; color: var(--brand); } /* ---------- v158 Scan settings sheet (camera gear): grouped rows with icons, like the phone's own settings ---------- */ :root[data-skin=pro] #shinePanel.sxo { left: 8px !important; right: 8px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; padding: 6px 0 16px !important; border-radius: 28px !important; background: rgba(17, 17, 21, .9) !important; -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid rgba(255, 255, 255, .09) !important; box-shadow: 0 -18px 50px rgba(0, 0, 0, .65) !important; } :root[data-skin=pro] .sxo-grab { width: 38px; height: 5px; margin: 3px auto 2px; border-radius: 3px; background: rgba(255, 255, 255, .2); } :root[data-skin=pro] .sxo-head { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px 20px; background: rgba(17, 17, 21, .96); } :root[data-skin=pro] .sxo-head b { font: 700 21px "Geist", sans-serif; letter-spacing: -.025em; color: var(--ink); } :root[data-skin=pro] .sxo-done { border: 0; border-radius: 999px; padding: 8px 18px; background: var(--brand); color: var(--on-brand); font: 600 15px "Geist", sans-serif; cursor: pointer; } :root[data-skin=pro] .sxo-done:active { transform: scale(.96); } :root[data-skin=pro] .sxo-sec { padding: 18px 24px 7px; font: 600 12px "Geist", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } :root[data-skin=pro] .sxo-group { margin: 0 12px; overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); } :root[data-skin=pro] .sxo-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 12px; } :root[data-skin=pro] .sxo-games > * { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: 16px; text-align: left; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); transition: background .15s, border-color .15s, transform .12s; } :root[data-skin=pro] .sxo-games > :active { transform: scale(.97); } :root[data-skin=pro] .sxo-games i { grid-row: 1 / 3; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g) 18%, transparent); } :root[data-skin=pro] .sxo-games i:has(svg) { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; color: #111; } :root[data-skin=pro] .sxo-more i { background: rgba(255, 255, 255, .1); color: var(--ink) !important; } :root[data-skin=pro] .sxo-games svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin=pro] .sxo-games b { grid-column: 2; font: 600 15px "Geist", sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .sxo-games small { grid-column: 2; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .sxo-games b:only-of-type:not(:has(+ small)) { grid-row: 1 / 3; } :root[data-skin=pro] .sxo-games .on { background: color-mix(in srgb, var(--g, var(--brand)) 14%, rgba(255, 255, 255, .03)); border-color: color-mix(in srgb, var(--g, var(--brand)) 70%, transparent); } :root[data-skin=pro] .sxo-games .on::after { content: ""; grid-column: 3; grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; background: var(--g, var(--brand)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } :root[data-skin=pro] .sxo-more { grid-column: 1 / -1; } :root[data-skin=pro] .sxo-more em { grid-column: 3; grid-row: 1 / 3; font: 400 22px/1 "Geist", sans-serif; font-style: normal; color: var(--muted); } :root[data-skin=pro] .sxo-more.on em { display: none; } :root[data-skin=pro] .sxo-more.on i { background: var(--g); color: #111 !important; } :root[data-skin=pro] .sxo-more select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; } :root[data-skin=pro] .sxo-row { display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 11px 14px; cursor: pointer; } :root[data-skin=pro] .sxo-group > :not(:first-child) { border-top: 1px solid rgba(255, 255, 255, .06); } :root[data-skin=pro] .sxo-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c); color: #fff; } :root[data-skin=pro] .sxo-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin=pro] .sxo-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } :root[data-skin=pro] .sxo-tx b { font: 600 15.5px "Geist", sans-serif; color: var(--ink); } :root[data-skin=pro] .sxo-tx small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .sxo .sxo-sel { flex: none; max-width: 44%; min-height: 0 !important; padding: 8px 28px 8px 12px !important; border: 0 !important; border-radius: 10px !important; font: 500 14px "Geist", sans-serif; color: var(--ink) !important; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center !important; } :root[data-skin=pro] .sxo-rig[hidden] { display: none; } :root[data-skin=pro] .sxo-rig { padding: 0 14px 14px 59px; border-top: 0 !important; } :root[data-skin=pro] .sxo-rig p { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: var(--muted); } /* ---------- v158 Turbo on the camera: a pill under Language / Version ---------- */ :root[data-skin=pro] #live .live-auto { display: inline-flex !important; align-items: center; gap: 6px; position: absolute; z-index: 46; top: calc(66px + env(safe-area-inset-top)) !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%); height: 36px; padding: 0 14px 0 11px; border-radius: 18px; background: rgba(20, 20, 24, .6) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .14) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 600 13px "Geist", sans-serif; } :root[data-skin=pro] #live .live-auto .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; } :root[data-skin=pro] #live .live-auto[aria-pressed=true] { background: var(--brand) !important; color: var(--on-brand) !important; border-color: transparent !important; } :root[data-skin=pro] #live .live-auto[aria-pressed=true] .ic { fill: currentColor; } :root[data-skin=pro] #live .live-auto:active { transform: translateX(-50%) scale(.95); } :root[data-skin=pro] body.shop-on #live .live-auto { display: none !important; } :root[data-skin=pro] #live[data-game]:not([data-game=""])::after { top: calc(110px + env(safe-area-inset-top)); left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; font: 600 12px "Geist", sans-serif; } /* "Magic only" under the Turbo pill, clear of the Language/Version buttons */ @media (prefers-reduced-motion: reduce) { :root[data-skin=pro] :is(.sx-vf b, .sx-kicker i) { animation: none; } } :root[data-skin=pro] .sxo-rig input[type=range] { accent-color: var(--brand); } /* ---------- v161 Home: value hero card, game mix bars, one-panel lists, compact monthly report ---------- */ :root[data-skin=pro] #tab-stats .pf-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px !important; padding: 20px 18px 14px !important; background: radial-gradient(120% 90% at 100% 0, rgba(255, 210, 63, .16), rgba(255, 210, 63, 0) 55%), linear-gradient(165deg, #1c1c22, #111114 70%) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .9) !important; margin-bottom: 8px; } :root[data-skin=pro] #tab-stats .pf-hero .pf-l { display: inline-flex; align-items: center; gap: 7px; font: 600 11px "Geist", sans-serif; letter-spacing: .14em; color: var(--brand); } :root[data-skin=pro] #tab-stats .pf-hero .pf-l i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(255, 210, 63, .18); } :root[data-skin=pro] #tab-stats #pfV { margin-top: 6px; } /* the change as a pill, its period beside it */ :root[data-skin=pro] #tab-stats .pf-ch:is(.up, .down) { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; margin-top: 4px; } :root[data-skin=pro] #tab-stats .pf-ch.up { background: rgba(74, 222, 128, .12); } :root[data-skin=pro] #tab-stats .pf-ch.down { background: rgba(248, 113, 113, .12); } :root[data-skin=pro] #tab-stats .pf-ch span { font-size: 12.5px; } :root[data-skin=pro] #tab-stats .pf-meta:empty { display: none; } :root[data-skin=pro] #tab-stats .chart { margin: 6px -4px 0; } /* cards · unique · games */ :root[data-skin=pro] .pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); } :root[data-skin=pro] .pf-stats:empty { display: none; } :root[data-skin=pro] .pf-stats div { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; } :root[data-skin=pro] .pf-stats div:first-child { padding-left: 0; } :root[data-skin=pro] .pf-stats div + div { border-left: 1px solid rgba(255, 255, 255, .07); } :root[data-skin=pro] .pf-stats b { font: 600 19px "Geist", sans-serif; letter-spacing: -.02em; color: var(--ink); } :root[data-skin=pro] .pf-stats span { font-size: 12px; color: var(--muted); } /* top cards: rank badge on the picture */ :root[data-skin=pro] #topList .cv { position: relative; } :root[data-skin=pro] #topList .cv .rk { position: absolute; z-index: 1; top: 7px; left: 7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font: 700 12px "Geist", sans-serif; font-style: normal; color: var(--ink); background: rgba(10, 10, 12, .78); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); } :root[data-skin=pro] #topList .cv:first-child .rk { background: var(--brand); color: var(--on-brand); border-color: transparent; } /* movers: one panel, hairlines between rows */ :root[data-skin=pro] #moversList.list { background: var(--panel) !important; border: 1px solid var(--sep) !important; border-radius: 18px !important; padding: 2px 14px !important; } :root[data-skin=pro] #moversList > .item { border-bottom: 1px solid rgba(255, 255, 255, .06) !important; padding-top: 11px; padding-bottom: 11px; } :root[data-skin=pro] #moversList > .item:last-of-type { border-bottom: 0 !important; } :root[data-skin=pro] :is(#moversList, #reportBox .list) > .item + .item::before { display: none; } /* the border above is the only line */ :root[data-skin=pro] #moversList .item img { width: 38px; height: 53px; object-fit: cover; } :root[data-skin=pro] #moversList .show-all { display: block; width: 100%; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .06); } /* game mix: colour dot, share, value, a bar of the share */ :root[data-skin=pro] .gmix { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--sep); border-radius: 18px; } :root[data-skin=pro] .gmix:empty { display: none; } :root[data-skin=pro] .gm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 9px; row-gap: 8px; } :root[data-skin=pro] .gm i { grid-row: 1; width: 9px; height: 9px; border-radius: 3px; background: var(--gc); } :root[data-skin=pro] .gm span { font-size: 15px; font-weight: 500; color: var(--ink); } :root[data-skin=pro] .gm small { display: none; } :root[data-skin=pro] .gm b { font: 600 15px "Geist", sans-serif; color: var(--ink); } :root[data-skin=pro] .gm em { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; } :root[data-skin=pro] .gm em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--gc); } :root[data-skin=pro] .gmix .kpi.skel { height: 28px; } :root[data-skin=pro] #tab-stats .kpis:empty { display: none; } :root[data-skin=pro] #tab-stats .kpis { margin-top: 10px; } /* monthly report */ :root[data-skin=pro] #reportBox { border-radius: 18px !important; padding: 16px !important; } :root[data-skin=pro] #reportBox .rp-h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px; font: 600 17px "Geist", sans-serif; } :root[data-skin=pro] #reportBox .rp-h select { width: auto; padding: 6px 30px 6px 12px; font-size: 13px; border-radius: 999px !important; } :root[data-skin=pro] #reportBox .report-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; } :root[data-skin=pro] #reportBox .report-grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 0; font-size: 12px; color: var(--muted); } :root[data-skin=pro] #reportBox .report-grid b { font: 600 clamp(14px, 4.3vw, 18px) "Geist", sans-serif; letter-spacing: -.02em; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] #reportBox .report-grid .up { color: var(--good); } :root[data-skin=pro] #reportBox .report-grid .down { color: var(--bad); } :root[data-skin=pro] #reportBox .rp-sub { margin: 16px 0 4px; font: 600 11px "Geist", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } :root[data-skin=pro] #reportBox .list { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; } :root[data-skin=pro] #reportBox .list > .item { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important; border-radius: 0 !important; padding: 10px 0 !important; } :root[data-skin=pro] #reportBox .list > .item:last-child { border-bottom: 0 !important; } :root[data-skin=pro] #reportBox .list .item img { width: 34px; height: 47px; object-fit: cover; } /* ---------- v162 Collection: wishlist + sealed in one panel, game-coloured set bars, empty states ---------- */ :root[data-skin=pro] #collList.list:has(> .item) { background: var(--panel) !important; border: 1px solid var(--sep) !important; border-radius: 18px !important; padding: 2px 14px !important; } :root[data-skin=pro] #collList > .item { border-bottom: 1px solid rgba(255, 255, 255, .06) !important; padding-top: 12px; padding-bottom: 12px; } :root[data-skin=pro] #collList > .item:last-child { border-bottom: 0 !important; } :root[data-skin=pro] #collList > .item + .item::before { display: none; } :root[data-skin=pro] #collList > .item img { width: 44px; height: 61px; object-fit: cover; } :root[data-skin=pro] #collList > .item .st { margin-top: 3px; } :root[data-skin=pro] #collList > .item .tgt { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); } :root[data-skin=pro] #collList > .item.hit .tgt { color: var(--good); } :root[data-skin=pro] #sealedRes:empty { display: none; } /* sets: thin bar in the game's colour, small logos so rows stay even */ :root[data-skin=pro] .setrow .prog { height: 5px !important; border: 0 !important; background: rgba(255, 255, 255, .06) !important; } :root[data-skin=pro] .setrow .prog i { background: var(--gc, var(--brand)) !important; border: 0 !important; box-shadow: none !important; } :root[data-skin=pro] .setrow .prog.done i { background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important; } :root[data-skin=pro] .setrow .nm .set-logo { height: 24px; max-width: 96px; margin-bottom: 6px; } /* a friendly empty page instead of a bare sentence */ :root[data-skin=pro] .empty-x { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin: 18px 0; padding: 30px 22px; border-radius: 22px; border: 1px dashed rgba(255, 255, 255, .12); background: radial-gradient(90% 70% at 50% 0, rgba(255, 210, 63, .08), transparent 70%); } :root[data-skin=pro] .empty-x .ic { width: 34px; height: 34px; padding: 12px; box-sizing: content-box; border-radius: 16px; color: var(--brand); background: rgba(255, 210, 63, .1); fill: none; stroke: currentColor; stroke-width: 1.7; margin-bottom: 4px; } :root[data-skin=pro] .empty-x b { font: 600 17px "Geist", sans-serif; color: var(--ink); } :root[data-skin=pro] .empty-x span { font-size: 14px; line-height: 1.45; color: var(--muted); max-width: 290px; } /* ---------- v163 everywhere: one soft hairline between list rows (the 1.5px lines read as double) ---------- */ :root[data-skin=pro] :is(.list:not(.pick) > .item + .item, .glist .gr + .gr, .glist > * + *, .setlist .setrow + .setrow, .setlist .goalrow + .goalrow)::before { height: 1px !important; background: rgba(255, 255, 255, .07) !important; transform: none !important; } :root[data-skin=pro] .list:has(> .empty-x) { background: transparent !important; border: 0 !important; padding: 0 !important; } :root[data-skin=pro] .empty-x.sm { margin: 0; padding: 22px 18px; } :root[data-skin=pro] .empty-x.sm .ic { width: 26px; height: 26px; padding: 10px; border-radius: 13px; } :root[data-skin=pro] .empty-x.sm b { font-size: 15.5px; } /* ---------- v163 Market › Selling: one hero card (kicker, two numbers, the button) ---------- */ :root[data-skin=pro] #sellSum.sell-stats { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 18px 18px 16px !important; border-radius: 26px !important; margin: 4px 0 8px; background: radial-gradient(120% 90% at 100% 0, rgba(255, 210, 63, .16), rgba(255, 210, 63, 0) 55%), linear-gradient(165deg, #1c1c22, #111114 70%) !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .9) !important; } :root[data-skin=pro] #sellSum > * { background: none !important; border: 0 !important; box-shadow: none !important; } :root[data-skin=pro] #sellSum .ss-k { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; font: 600 11px "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } :root[data-skin=pro] #sellSum .ss-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(255, 210, 63, .18); } :root[data-skin=pro] #sellSum .sstat { padding: 0 !important; border-radius: 0 !important; } :root[data-skin=pro] #sellSum .sstat + .sstat { padding-left: 16px !important; border-left: 1px solid rgba(255, 255, 255, .08) !important; } :root[data-skin=pro] #sellSum .sstat small { font-size: 12.5px; font-weight: 500; } :root[data-skin=pro] #sellSum .sstat b { font: 600 26px "Geist", sans-serif; letter-spacing: -.03em; margin: 2px 0; } :root[data-skin=pro] #sellSum #sellMany { margin-top: 16px; border-radius: 16px !important; padding: 14px; font-weight: 600; background: var(--brand) !important; } /* ---------- v163 Community: light second tab row, badges in one colour ---------- */ :root[data-skin=pro] #cmSeg.seg { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 8px; margin: 2px 0 14px; } :root[data-skin=pro] #cmSeg.seg button { flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1) !important; background: transparent !important; color: var(--muted); font-weight: 500; } :root[data-skin=pro] #cmSeg.seg button.on { background: rgba(255, 210, 63, .12) !important; border-color: rgba(255, 210, 63, .5) !important; color: var(--brand); box-shadow: none !important; } :root[data-skin=pro] .cm-n { background: var(--brand) !important; color: var(--on-brand) !important; } :root[data-skin=pro] .cm-av { background: radial-gradient(120% 120% at 25% 20%, hsl(var(--h) 70% 62%), hsl(var(--h) 55% 38%)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); font-weight: 700; } :root[data-skin=pro] .cm-chats.list { border-radius: 18px !important; padding: 2px 14px !important; } :root[data-skin=pro] .cm-chats .item { padding-top: 12px; padding-bottom: 12px; } :root[data-skin=pro] .cm-chats .item + .item::before { left: 54px !important; } /* a conversation: whole screen, slim glass header, bubbles with a tail, round icon buttons */ :root[data-skin=pro] body.cm-chatting #tab-community .mk-top { display: none !important; } :root[data-skin=pro] #cmSeg.seg button.on { color: var(--brand) !important; } :root[data-skin=pro] .cm-chathead { gap: 10px; margin: 0 -16px; padding: 6px 16px 10px; background: rgba(10, 10, 12, .82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(255, 255, 255, .06); } :root[data-skin=pro] .cm-chathead .cm-back { width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; font-size: 24px; line-height: 1; display: grid; place-items: center; } :root[data-skin=pro] .cm-chathead .cm-back span { display: none; } :root[data-skin=pro] .cm-chathead .cm-av { width: 40px; height: 40px; font-size: 16px; } :root[data-skin=pro] .cm-who-btn b { font: 600 16px "Geist", sans-serif; } :root[data-skin=pro] .cm-who-btn small { font-size: 12.5px; } :root[data-skin=pro] .cm-chathead .cm-more { width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; font-size: 13px; letter-spacing: 1px; } :root[data-skin=pro] .cm-msgs { gap: 6px; padding-top: 14px; } :root[data-skin=pro] .cm-msg { max-width: 78%; padding: 9px 13px 7px; border-radius: 20px 20px 20px 6px; background: #1f1f25; font-size: 15.5px; line-height: 1.38; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } :root[data-skin=pro] .cm-msg.me { border-radius: 20px 20px 6px 20px; background: linear-gradient(160deg, var(--brand-2), var(--brand)); color: #17140a; } :root[data-skin=pro] .cm-msg > small { margin-top: 2px; text-align: right; font-size: 10.5px; opacity: .55; } :root[data-skin=pro] .cm-msg.offer { border-radius: 20px; background: var(--panel); } :root[data-skin=pro] .cm-compose { align-items: center; gap: 8px; padding: 8px 12px; background: rgba(10, 10, 12, .86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid rgba(255, 255, 255, .06); } :root[data-skin=pro] .cm-compose textarea { min-height: 42px; padding: 10px 16px; border-radius: 21px !important; font-size: 15.5px; } :root[data-skin=pro] .cm-compose :is(#cmTrade, #cmSend) { width: 42px; height: 42px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; } :root[data-skin=pro] .cm-compose :is(#cmTrade, #cmSend) .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-skin=pro] .cm-compose #cmTrade { color: var(--muted); } :root[data-skin=pro] .cm-compose #cmSend { background: var(--brand) !important; color: var(--on-brand) !important; border: 0 !important; } /* ---------- v164 Profile: you + your collection in one hero card, quieter footer ---------- */ :root[data-skin=pro] .pf-me { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 18px; margin: 4px 0 14px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .9); background: radial-gradient(120% 90% at 100% 0, rgba(255, 210, 63, .16), rgba(255, 210, 63, 0) 55%), linear-gradient(165deg, #1c1c22, #111114 70%); } :root[data-skin=pro] .pf-id { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); } :root[data-skin=pro] .pf-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 20px "Geist", sans-serif; color: var(--on-brand); background: radial-gradient(120% 120% at 25% 20%, var(--brand-2), #e0a800); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px -6px rgba(255, 210, 63, .5); } :root[data-skin=pro] .pf-who { display: flex; flex-direction: column; min-width: 0; } :root[data-skin=pro] .pf-who b { font: 600 17px "Geist", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .pf-who small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .pf-k { display: inline-flex; align-items: center; gap: 7px; font: 600 11px "Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); } :root[data-skin=pro] .pf-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(255, 210, 63, .18); } :root[data-skin=pro] .pf-worth { margin: 4px 0 14px; font: 600 40px/1.05 "Geist", sans-serif; letter-spacing: -.04em; color: var(--ink); } :root[data-skin=pro] .pf-row { display: grid; grid-template-columns: repeat(3, 1fr); } :root[data-skin=pro] .pf-row div { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; } :root[data-skin=pro] .pf-row div:first-child { padding-left: 0; } :root[data-skin=pro] .pf-row div + div { border-left: 1px solid rgba(255, 255, 255, .07); } :root[data-skin=pro] .pf-row b { font: 600 19px "Geist", sans-serif; color: var(--ink); } :root[data-skin=pro] .pf-row span { font-size: 12px; color: var(--muted); } :root[data-skin=pro] #toolsHome .linkbtn#weekNow { font-size: inherit; font-weight: 600; } :root[data-skin=pro] #toolsHome .legal-links { font-size: 13px; } :root[data-skin=pro] #toolsHome .legal-note { font-size: 11px; line-height: 1.5; color: rgba(161, 161, 170, .7); max-width: 340px; margin-left: auto; margin-right: auto; } :root[data-skin=pro] #toolsHome .gfoot { font-size: 12.5px; } /* ---------- v165 flat: no gradients anywhere in the app (user, 2026-10-20) – one solid colour per surface ---------- (the corner brackets drawn with linear-gradient(c, c) are solid lines, not gradients, and stay) */ :root[data-skin=pro] body { background: var(--bg) !important; } :root[data-skin=pro] :is(.sx-hero, #tab-stats .pf-hero, #sellSum.sell-stats, .pf-me) { background: #16161a !important; } :root[data-skin=pro] .sx-hero::before { display: none !important; } :root[data-skin=pro] .sx-vf i { background: var(--brand) !important; } /* the little card */ :root[data-skin=pro] .sx-vf b { background: #fff !important; } /* the scan line */ :root[data-skin=pro] .sx-cta { background: var(--brand) !important; } :root[data-skin=pro] :is(.prog.done i, .setrow .prog.done i) { background: var(--brand) !important; } :root[data-skin=pro] .empty-x { background: none !important; } :root[data-skin=pro] .cm-av { background: hsl(var(--h) 55% 48%) !important; } :root[data-skin=pro] .cm-msg.me:not(.offer) { background: var(--brand) !important; } /* trade offers stay dark cards on both sides (yellow made "You give / You get" unreadable), full width */ :root[data-skin=pro] .cm-msg.offer { max-width: 94%; width: 94%; color: var(--ink); border-radius: 20px; } :root[data-skin=pro] .pf-av { background: var(--brand) !important; } :root[data-skin=pro] .sheet-actions { background: var(--bg) !important; } :root[data-skin=pro] .sheet-body:has(#shDelete[hidden]) > .row.end:last-child { background: var(--bg) !important; } :root[data-skin=pro] .scan-hero { background: var(--brand) !important; } :root[data-skin=pro] :is(.ctile .shiny, .live-foil[aria-pressed=true], .shine-meter.hot i) { background: #c4b5fd !important; color: #1a1530 !important; } :root[data-skin=pro] :is(.tile .ph-card, .ph-mini) { background: var(--panel2) !important; } :root[data-skin=pro] .auth { background: var(--bg) !important; } :root[data-skin=pro] :is(.skel i, .skel b, .skel span, .skel-box b, .skel-box span, .skel-card, .skel-wide, .skel-v, .skel-chart, .item.skel i, .item.skel b, .item.skel span) { background: var(--panel2) !important; } /* v169: landscape cards (Riftbound battlefields) are turned a quarter left so they fill the portrait tile like every other card (laid out as tile-height × tile-width, rotated about the top-left corner back into the tile; margin makes up the height) */ .ctile img.land { width: calc(100% * 88 / 63); aspect-ratio: 88 / 63; object-fit: cover; transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%); margin-bottom: calc(100% * 25 / 63); } /* same for the card page picture (its width is fixed, not 100 %, so the sizes are spelled out; the negative margin keeps the slot W wide) */ #shImg.land { --w: min(58vw, 240px); width: calc(var(--w) * 88 / 63); aspect-ratio: 88 / 63; object-fit: cover; transform-origin: 0 0; transform: rotate(-90deg) translateX(-100%); margin: 0 calc(var(--w) * -25 / 63) calc(var(--w) * 25 / 63) 0; } /* v173 wishlist: swipe a row left → red Remove slides in from the right */ #collList > .item[data-wid] { position: relative; overflow: hidden; touch-action: pan-y; } #collList > .item[data-wid] > :not(.wdel) { transform: translateX(var(--dx, 0px)); transition: transform .22s ease; } #collList > .item[data-wid].wdrag > :not(.wdel), #collList > .item[data-wid].wdrag > .wdel { transition: none; } #collList > .item[data-wid] > .wdel { position: absolute; top: 6px; right: 6px; bottom: 6px; width: max(80px, calc(-1 * var(--dx, 0px) - 12px)); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 14px; background: #ff453a !important; color: #fff !important; opacity: 1; font: 600 13px "Geist", sans-serif; box-shadow: 0 4px 14px rgba(255, 69, 58, .25); transform: translateX(calc(100% + 12px + var(--dx, 0px))); transition: transform .22s ease; } #collList > .item[data-wid] > .wdel .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #collList > .item[data-wid].wopen > :not(.wdel) { opacity: .55; transition: transform .22s ease, opacity .22s; } #collList > .item[data-wid].wgone { opacity: 0; transition: opacity .2s; pointer-events: none; } /* v177 sell picker: the list scrolls inside the sheet (its wrapper grew to the whole list, so nothing could scroll) */ .sell-sheet.picking #ssBody { min-height: 0; } .sell-sheet.picking .pick-list { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } /* v178 sign-in: centred with auto margins instead of align-items – when the form is taller than the screen (iPhone keyboard up) the top was pushed above the screen where no scroll could reach it */ .auth { align-items: flex-start !important; } .auth > * { margin-top: auto !important; margin-bottom: auto !important; } /* v179 add: a count per version row (2 foil + 1 normal in one go) */ .cd-q { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; border-radius: 999px; background: var(--panel2, #222); padding: 2px; } .cd-q button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 600 18px/1 inherit; padding: 0; } .cd-q b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); } .cd-row.has .cd-q { background: rgba(255, 210, 63, .14); } .cd-row.has .cd-q b { color: var(--brand); } /* ---------- v181 card page polish (user: "polish the card detail page") ---------- */ /* game label: quiet text with the game's colour dot, not a loud coloured badge */ :root[data-skin=pro] #shGame.tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .06) !important; color: var(--muted) !important; padding: 4px 10px 4px 9px; border-radius: 999px !important; font: 600 11px "Geist", sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase; } #shGame.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gc, var(--brand)); } #shGame.pokemon { --gc: #ef5350; } #shGame.riftbound { --gc: #9b8cff; } #shGame.cyberpunk { --gc: #2fd8e6; } #shGame.magic { --gc: #f0a35e; } #shGame.yugioh { --gc: #c38b4a; } #shGame.onepiece { --gc: #e8505b; } #shGame.lorcana { --gc: #7fb2ff; } :root[data-skin=pro] #sheet #shSet { font-size: 15px; } :root[data-skin=pro] #sheet .cd .cd-note { font-size: 12.5px; color: var(--muted); opacity: .75; text-align: center; margin-top: 6px; } :root[data-skin=pro] #sheet .cd-h { margin: 30px 4px 10px !important; color: var(--ink) !important; } /* "More details" is a
: an old button rule made everything inside bold + yellow */ :root[data-skin=pro] details.cd-more { color: var(--ink) !important; font-weight: 400 !important; margin-top: 4px; } :root[data-skin=pro] details.cd-more > summary, :root[data-skin=pro] details.sell-more > summary { color: var(--brand); font: 600 15px "Geist", sans-serif; padding: 14px 4px; } :root[data-skin=pro] details.cd-more .cd-h { margin-top: 26px !important; } /* form rows: plain right-aligned values with a chevron (iOS settings style), no boxes inside the grouped list */ :root[data-skin=pro] #sheet .form > label { font-size: 16px !important; font-weight: 400 !important; color: var(--ink) !important; min-height: 50px; } :root[data-skin=pro] #sheet .form > label > :is(select, input:not([type=checkbox])), :root[data-skin=pro] #sheet .form .pl-field :is(input, button) { background-color: transparent !important; border: 0 !important; border-radius: 8px !important; padding: 8px 0 8px 8px !important; color: var(--muted) !important; font: 400 16px "Geist", sans-serif !important; text-align: right; text-align-last: right; } :root[data-skin=pro] #sheet .form > label { white-space: nowrap; } :root[data-skin=pro] #sheet .form > label > :is(select, input:not([type=checkbox])) { width: auto !important; flex: 1 1 auto !important; min-width: 0; max-width: 62% !important; } :root[data-skin=pro] #sheet .form > label > input::-webkit-calendar-picker-indicator { display: none !important; } :root[data-skin=pro] #sheet .form > label > select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 22px !important; background-repeat: no-repeat; background-position: right 2px center; background-size: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } :root[data-skin=pro] #sheet .form > label > input::placeholder { color: rgba(142, 142, 147, .6) !important; font-weight: 400; } :root[data-skin=pro] #sheet .form > label > :is(select, input):focus { color: var(--ink) !important; } /* quantity: one round stepper like the Versions rows */ :root[data-skin=pro] #sheet .form .qty { width: auto !important; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .07); } :root[data-skin=pro] #sheet .form .qty button { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: none !important; font-size: 19px; } :root[data-skin=pro] #sheet .form .qty input { width: 36px !important; height: 34px !important; padding: 0 !important; background: none !important; border: 0 !important; font: 600 16px "Geist", sans-serif !important; color: var(--ink) !important; text-align: center; } /* wishlist: a grouped panel like the rest – label, price field and button on one line */ :root[data-skin=pro] #sheet .wishbox { background: var(--panel) !important; border: 0 !important; border-radius: 14px !important; padding: 14px 16px !important; margin-top: 14px !important; flex-wrap: wrap; align-items: center; gap: 10px; } :root[data-skin=pro] #sheet .wishbox label { font: 400 13px "Geist", sans-serif !important; color: var(--muted) !important; } :root[data-skin=pro] #sheet .wishbox .btn { flex: none; min-height: 42px; padding: 0 18px; } :root[data-skin=pro] #sheet .wishbox label { flex: 1 1 0 !important; min-width: 0; } :root[data-skin=pro] #sheet .wishbox label input { margin-top: 8px; } :root[data-skin=pro] #sheet .wishbox { align-items: flex-end !important; } :root[data-skin=pro] #sheet .wishbox .btn { min-height: 46px; } :root[data-skin=pro] #sheet .cd-h span { font-weight: 500 !important; } /* Check this card: the two checks in one grouped list */ :root[data-skin=pro] #shReal { margin-bottom: 0 !important; border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } :root[data-skin=pro] #shReal + #shGrade2 { margin-top: 0 !important; border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important; } :root[data-skin=pro] #shRealWrap .item .nm { color: var(--ink) !important; font-weight: 600 !important; } :root[data-skin=pro] #shRealWrap .item .st { color: var(--muted) !important; font-weight: 400 !important; } /* bottom bar: Save leads, Remove is a quiet secondary button */ :root[data-skin=pro] .sheet-actions > .btn.danger:not([hidden]) { flex: 0 0 auto !important; padding: 0 24px !important; border: 0 !important; background: rgba(255, 69, 58, .12) !important; } :root[data-skin=pro] .sheet-actions > .btn.primary:not([hidden]) { flex: 1 1 auto !important; } :root[data-skin=pro] #shUS :is(.us-verdict, .us-warn, .gfoot) { margin-left: 4px !important; margin-right: 4px !important; padding-left: 0 !important; } :root[data-skin=pro] #shUS .gfoot { font-size: 12.5px; color: var(--muted); margin-top: 4px; } :root[data-skin=pro] #shUS .us-verdict { font-weight: 600 !important; } /* ---- v185 set page header: hero + ring, 3 stats, equal action buttons ---- */ :root[data-skin=pro] #setHead { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } :root[data-skin=pro] #setHead .back { display: inline-block; margin: 0 0 10px; padding: 2px 0; font: 600 15px "Geist", sans-serif; color: var(--brand); } :root[data-skin=pro] #setHead .sh-hero { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-radius: 22px 22px 0 0; background: radial-gradient(120% 140% at 100% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%), rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); border-bottom: 0; } :root[data-skin=pro] #setHead .sh-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } :root[data-skin=pro] #setHead .sh-title b { font: 700 21px/1.18 "Geist", sans-serif; letter-spacing: -.02em; color: var(--ink); } :root[data-skin=pro] #setHead .sh-ring { position: relative; flex: none; width: 64px; height: 64px; } :root[data-skin=pro] #setHead .sh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } :root[data-skin=pro] #setHead .sh-ring circle { fill: none; stroke-width: 6; stroke: rgba(255, 255, 255, .08); } :root[data-skin=pro] #setHead .sh-ring circle + circle { stroke: var(--brand); stroke-linecap: round; transition: stroke-dasharray .5s ease; } :root[data-skin=pro] #setHead .sh-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 16px "Geist", sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; } :root[data-skin=pro] #setHead .sh-ring b small { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 1px; } :root[data-skin=pro] #setHead .sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 0 0 22px 22px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); } :root[data-skin=pro] #setHead .sh-stats > div { min-width: 0; padding: 12px 10px 13px 18px; display: flex; flex-direction: column; gap: 2px; } :root[data-skin=pro] #setHead .sh-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .06); padding-left: 14px; } :root[data-skin=pro] #setHead .sh-stats b { font: 700 16px "Geist", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } :root[data-skin=pro] #setHead .sh-stats b small { font-size: 13px; font-weight: 500; color: var(--muted); } :root[data-skin=pro] #setHead .sh-stats span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] #setHead .seg { margin: 12px 0 0 !important; } :root[data-skin=pro] #setHead .sh-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 10px; } :root[data-skin=pro] #setHead .sh-acts button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 62px; padding: 9px 4px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .045); color: var(--ink); font: 500 12px "Geist", sans-serif; cursor: pointer; transition: transform .12s, background .15s; } :root[data-skin=pro] #setHead .sh-acts button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] #setHead .sh-acts button:active { transform: scale(.96); } :root[data-skin=pro] #setHead .sh-acts .ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--brand); } :root[data-skin=pro] #setHead .sh-acts [aria-pressed=true] { background: color-mix(in srgb, var(--brand) 16%, transparent); border-color: color-mix(in srgb, var(--brand) 60%, transparent); color: var(--brand); } :root[data-skin=pro] #setHead .sh-acts .ask { border-color: var(--brand); color: var(--brand); } :root[data-skin=pro] #setHead .sh-acts button:disabled { opacity: .6; } /* v186 wishlist Select mode: same bar as Collection, only Remove */ #bulkBar.wish .bulk-fields, #bulkBar.wish #bkApply, #bulkBar.wish #bkSell { display: none; } #bulkBar.wish .bulk-acts { margin-top: 10px; } body.selecting #collList .item[data-wid] > :not(.wdel) { transform: none; opacity: 1; } body.selecting #collList .item[data-wid] > .wdel { display: none; } #bulkBar.wish #bkDel { white-space: nowrap; } /* v186 Community: Buy · Chats · Friends as an even tab bar, compact shop card, search + game pill */ :root[data-skin=pro] #cmSeg.seg { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 14px; padding: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important; } :root[data-skin=pro] #cmSeg.seg button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--muted) !important; font: 500 15px "Geist", sans-serif; box-shadow: inset 0 -2px 0 transparent !important; transition: color .15s, box-shadow .15s; } :root[data-skin=pro] #cmSeg.seg button.on { color: var(--ink) !important; font-weight: 600; background: none !important; border: 0 !important; box-shadow: inset 0 -2px 0 var(--brand) !important; } :root[data-skin=pro] #cmSeg .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } :root[data-skin=pro] #cmSeg button.on .ic { color: var(--brand); } :root[data-skin=pro] .cm-shop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); } :root[data-skin=pro] .cm-shop.on { background: color-mix(in srgb, #ff9f0a 8%, rgba(255, 255, 255, .03)); border-color: color-mix(in srgb, #ff9f0a 35%, transparent); } :root[data-skin=pro] .cm-shop-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } :root[data-skin=pro] .cm-shop-tx b { display: flex; align-items: center; gap: 8px; font: 600 15.5px "Geist", sans-serif; color: var(--ink); } :root[data-skin=pro] .cm-shop-tx em { font: 600 11px "Geist", sans-serif; font-style: normal; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); } :root[data-skin=pro] .cm-shop.on .cm-shop-tx em { background: rgba(48, 209, 88, .16); color: #30d158; } :root[data-skin=pro] .cm-shop-tx small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .cm-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0 14px; } :root[data-skin=pro] .cm-search select { max-width: 150px; height: 46px; padding: 0 30px 0 14px !important; border-radius: 999px !important; font: 500 14px "Geist", sans-serif; } /* v186 Market tools: three even tiles instead of a long list */ :root[data-skin=pro] .mk-tiles { display: flex; gap: 10px; } :root[data-skin=pro] .mk-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 13px 13px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .045); color: var(--ink); text-align: left; cursor: pointer; transition: transform .12s, background .15s; } :root[data-skin=pro] .mk-tile:active { transform: scale(.97); background: rgba(255, 255, 255, .07); } :root[data-skin=pro] .mk-tile .tico { margin-bottom: 9px; } :root[data-skin=pro] .mk-tile b { font: 600 15px "Geist", sans-serif; letter-spacing: -.01em; } :root[data-skin=pro] .mk-tile small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* v187 Sell on eBay: list tabs, card rows with a price box, lot summary */ :root[data-skin=pro] .eb-tabs { margin: 4px 0 12px !important; } :root[data-skin=pro] .eb-tabs button { font-size: 13px !important; padding: 0 4px !important; white-space: nowrap; } :root[data-skin=pro] .eb-rows .rt input { width: 84px; padding: 6px 8px !important; text-align: right; font-variant-numeric: tabular-nums; } :root[data-skin=pro] .eb-rows .st { white-space: normal; } :root[data-skin=pro] .eb-rows input[type=checkbox] { flex: none; width: 20px; height: 20px; accent-color: var(--brand); } :root[data-skin=pro] .eb-lotsum { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 12px 0 6px; } :root[data-skin=pro] .eb-lotsum input { width: 110px; } :root[data-skin=pro] .eb-live .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } :root[data-skin=pro] .eb-live .rt .btn { padding: 4px 10px; font-size: 13px; } /* v187 trade card in chat: status pill, You give ⇄ You get side by side, small card pictures */ :root[data-skin=pro] .cm-msg.offer { padding: 14px !important; border-radius: 20px !important; background: rgba(255, 255, 255, .045) !important; border: 1px solid rgba(255, 255, 255, .08) !important; } :root[data-skin=pro] .cm-ohead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } :root[data-skin=pro] .cm-ohead .ic { width: 18px; height: 18px; fill: none; stroke: var(--brand); stroke-width: 2.2; } :root[data-skin=pro] .cm-ohead b { flex: 1; font: 600 16px "Geist", sans-serif; } :root[data-skin=pro] .cm-pill { font: 600 12px "Geist", sans-serif; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); } :root[data-skin=pro] .cm-pill.ok { background: rgba(48, 209, 88, .15); color: #30d158; } :root[data-skin=pro] .cm-pill.new { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); } :root[data-skin=pro] .cm-pill.no { background: rgba(255, 69, 58, .14); color: #ff6961; } :root[data-skin=pro] .cm-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; } :root[data-skin=pro] .cm-side { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .25); } :root[data-skin=pro] .cm-side > small { font-size: 12px; color: var(--muted); } :root[data-skin=pro] .cm-side > b { font: 700 17px "Geist", sans-serif; font-variant-numeric: tabular-nums; margin-top: -4px; } :root[data-skin=pro] .cm-thumbs { display: flex; gap: 4px; } :root[data-skin=pro] .cm-th { position: relative; flex: none; width: 34px; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .06); display: grid; place-items: center; font: 600 11px "Geist", sans-serif; color: var(--muted); } :root[data-skin=pro] .cm-th img { width: 100%; height: 100%; object-fit: cover; } :root[data-skin=pro] .cm-th i { position: absolute; right: 1px; bottom: 1px; font: 700 9px/1 "Geist", sans-serif; font-style: normal; padding: 2px 3px; border-radius: 3px; background: rgba(0, 0, 0, .7); color: #fff; } :root[data-skin=pro] .cm-names { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-skin=pro] .cm-swap { align-self: center; color: var(--muted); font-size: 16px; } :root[data-skin=pro] .cm-cash { margin: 10px 0 0 !important; font: 500 14px "Geist", sans-serif !important; color: var(--muted); } :root[data-skin=pro] .cm-cash b { color: var(--ink); } :root[data-skin=pro] .cm-st { margin: 10px 0 0 !important; font: 500 12.5px "Geist", sans-serif !important; color: var(--muted) !important; } :root[data-skin=pro] .cm-acts { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 12px; } :root[data-skin=pro] .cm-acts .btn { padding: 9px 6px; font-size: 14px; } /* ---------------- Trade checker (trade.js) ---------------- */ .tr-hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 12px; padding: 18px; border-radius: 22px; margin-bottom: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), var(--panel); border: 1px solid var(--line); } .tr-tot small { display: block; color: var(--muted); font-size: 12.5px; margin-bottom: 2px; } .tr-tot b { font: 600 28px/1.05 "Geist", sans-serif; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .tr-tot:nth-child(3) { text-align: right; } .tr-swap { width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--muted); } .tr-swap .ic { width: 18px; height: 18px; } .tr-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; position: relative; } .tr-bar i { display: block; height: 100%; background: #6b6b75; transition: width .25s; } .tr-bar::after { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--bg); } .tr-verdict { grid-column: 1 / -1; text-align: center; font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--muted); } .tr-hero.fair .tr-verdict { color: var(--good); } .tr-hero.fair .tr-bar { background: var(--good); } .tr-hero.ahead .tr-verdict { color: var(--brand); } .tr-hero.ahead .tr-bar { background: var(--brand); } .tr-hero.behind .tr-verdict { color: var(--bad); } .tr-hero.behind .tr-bar { background: var(--bad); } .tr-hero.fair { border-color: rgba(74, 222, 128, .35); } .tr-even { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); color: var(--ink); font: inherit; font-size: 13.5px; text-align: center; } button.tr-even { cursor: pointer; } .tr-even .ic { width: 14px; height: 14px; } .tr-side { margin-bottom: 18px; } .tr-head { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 8px; } .tr-head h3 { margin: 0; font-size: 18px; } .tr-head small { color: var(--muted); } .tr-head .sp { flex: 1; } .tr-head b { font: 600 16px "Geist", sans-serif; font-variant-numeric: tabular-nums; } .tr-line .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .tr-qty { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; } .tr-qty button { width: 28px; height: 28px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; } .tr-opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } :root[data-skin=pro] #toolBody .tr-opts select, .tr-opts select { min-height: 0 !important; line-height: 1.3 !important; width: auto !important; max-width: 140px; font-weight: 600; min-width: 0 !important; height: auto !important; padding: 3px 24px 3px 9px !important; border-radius: 99px !important; font-size: 12.5px !important; background-color: var(--panel2) !important; border: 1px solid var(--line) !important; color: var(--ink); margin: 0 !important; } .tr-empty { padding: 18px 14px; text-align: center; } .tr-add { display: flex; gap: 8px; margin-top: 8px; } .tr-add .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .tr-find { margin-top: 8px; } .tr-find input { width: 100%; margin-bottom: 6px; } .tr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; } .tr-actions .primary { flex: 1 1 100%; padding: 15px; font-size: 15.5px; } .tr-actions .btn:not(.primary) { flex: 1; } /* the camera scanner (scanlite.js, shared with the Shop) */ .scanbox { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .82); display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); } .scanbox .scanpanel { background: var(--panel); border-radius: 18px; padding: 14px; width: min(720px, 100%); max-height: 100%; overflow: auto; } .scanbox .row { display: flex; align-items: center; gap: 8px; } .scanbox .spacer { flex: 1; } .scanbox .sg { padding: 6px 8px; border-radius: 10px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); } .scanbox .scanview { position: relative; margin-top: 10px; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; width: 100%; } .scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; } .scanbox .guide { position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 63 / 88; transform: translate(-50%, -50%); border: 3px solid var(--brand); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); } .scanbox .scanmsg { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #fff; font-weight: 600; text-shadow: 0 1px 3px #000; } .scanbox .scanres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; min-height: 40px; } .scanbox .card { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; color: var(--ink); text-align: left; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font: inherit; } .scanbox .card img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 8px; } .scanbox .card .nm { font-weight: 600; font-size: 12px; line-height: 1.2; } .scanbox .card .meta { font-size: 11px; color: var(--muted); } .scanbox .card .pr { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; } .scanbox .card.picked { outline: 3px solid var(--good); } @media (max-width: 560px) { .scanbox .scanres { grid-template-columns: repeat(2, 1fr); } } /* wishlist: the card is for sale on the Community Market */ .item .wm { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 10px 3px 8px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item .wm .ic { width: 13px; height: 13px; flex: none; } .item .wm.deal { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); color: var(--good); } .tr-wish { display: inline-block; font-size: 11px; font-weight: 700; color: var(--brand); background: rgba(255, 210, 63, .12); border-radius: 99px; padding: 1px 7px; vertical-align: 2px; } /* set milestone banner (app.js celebrate) */ .celebrate { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 99px; background: rgba(24, 24, 28, .96); border: 1px solid rgba(255, 210, 63, .35); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); animation: cel-in .35s cubic-bezier(.2, 1.4, .4, 1); max-width: calc(100vw - 24px); cursor: pointer; } .celebrate.full { border-color: var(--brand); background: linear-gradient(135deg, rgba(255, 210, 63, .2), rgba(24, 24, 28, .97) 60%); } .celebrate.out { opacity: 0; transform: translate(-50%, -10px); transition: all .45s; } .cel-ring { width: 44px; height: 44px; border-radius: 99px; flex: none; display: grid; place-items: center; background: conic-gradient(var(--brand) var(--deg), rgba(255, 255, 255, .1) 0); } .cel-ring b { width: 34px; height: 34px; border-radius: 99px; background: #18181c; display: grid; place-items: center; font: 700 11px "Geist", sans-serif; } .cel-txt b { display: block; font-size: 15px; } .cel-txt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .celebrate i { position: absolute; left: 30px; top: 50%; width: 7px; height: 7px; border-radius: 2px; background: var(--c); pointer-events: none; animation: cel-pop 1.1s ease-out forwards; transform: rotate(var(--d)); z-index: -1; } @keyframes cel-in { from { opacity: 0; transform: translate(-50%, -16px) scale(.9); } } @keyframes cel-pop { to { opacity: 0; transform: translate(calc(var(--x) * 160px), calc(-60px + var(--x) * var(--x) * 120px)) rotate(calc(var(--d) + 220deg)); } } @media (prefers-reduced-motion: reduce) { .celebrate, .celebrate i { animation: none; } .celebrate i { display: none; } } /* set checklist: a missing card well under its 30-day average */ .ctile.missing { position: relative; } .ctile .deal-b { position: absolute; top: 6px; left: 6px; z-index: 2; font: 700 11px "Geist", sans-serif; color: #052e14; background: var(--good); border-radius: 99px; padding: 2px 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } /* deck lists (decks.js) */ .dl-top { display: flex; align-items: center; margin-bottom: 10px; } .dl-top .sp { flex: 1; } .dl-meta { display: flex; gap: 8px; margin-bottom: 14px; } #dlText { width: 100%; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 12px; border-radius: 14px; resize: vertical; } .dl-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; margin-bottom: 12px; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), var(--panel); border: 1px solid var(--line); } .dl-ring { width: 72px; height: 72px; } .dl-ring b { width: 58px; height: 58px; font-size: 16px; } .dl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .dl-stats b { display: block; font: 600 19px "Geist", sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dl-stats span { color: var(--muted); font-size: 12px; } .dl-note { grid-column: 1 / -1; margin: 0; color: var(--brand); font-size: 13px; } .dl-acts { display: flex; gap: 8px; margin-bottom: 14px; } .dl-acts .btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .dl-done { flex: 1 1 100%; color: var(--good); font-weight: 700; padding: 6px 2px; } .dl-unres { border-color: rgba(255, 122, 122, .35) !important; } .dl-sec { margin: 16px 4px 8px; font-size: 16px; } .dl-sec small { color: var(--muted); font-weight: 500; } .dl-row .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .dl-own { font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 2px 8px; white-space: nowrap; } .dl-own.ok { color: var(--good); background: rgba(74, 222, 128, .12); } .dl-own.no { color: var(--bad); background: rgba(255, 122, 122, .12); } .dl-ph { width: 40px; height: 56px; border-radius: 6px; display: grid; place-items: center; background: var(--panel2); color: var(--muted); font-weight: 700; flex: none; } /* AI (ai.js) */ .ai-btn { background: linear-gradient(135deg, rgba(168, 85, 247, .25), rgba(255, 210, 63, .2)) !important; border-color: rgba(168, 85, 247, .5) !important; margin-right: 6px; } .ai-form label { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); } .ai-form label > select, .ai-form label > input:not([type=checkbox]), .ai-form textarea { width: 100%; margin-top: 4px; color: var(--ink); } .ai-guide h4 { margin: 14px 0 4px; font-size: 14px; color: var(--brand); } .ai-guide p { margin: 0 0 6px; line-height: 1.5; } .ai-guide ul { margin: 0; padding-left: 18px; line-height: 1.5; } .ai-arch { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 10px; background: rgba(168, 85, 247, .18); color: #d8b4fe; margin-bottom: 6px; } .ai-tile .sx-ti { font-size: 20px; } /* graded slabs (slabs.js) */ .slab-wrap { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .65); display: flex; align-items: flex-end; justify-content: center; } .slab-sheet { background: var(--panel); width: min(560px, 100%); max-height: 92vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border: 1px solid var(--line); } .slab-top { display: flex; gap: 12px; margin-top: 10px; } .slab-top img { width: 96px; border-radius: 10px; object-fit: cover; max-height: 150px; } .slab-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; } .slab-fields select, .slab-fields input { width: 100%; } .slab-cards .item { cursor: pointer; border-radius: 12px; } .slab-cards .item.on { outline: 2px solid var(--brand); background: rgba(255, 210, 63, .08); } .slab-info { margin: 4px 0 6px; line-height: 1.5; } .ai-grade { border-color: rgba(168, 85, 247, .4) !important; margin: 12px 0; } .ai-grade-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ai-grade-head span { color: #d8b4fe; font-weight: 700; } .ai-grade-head b { font: 600 24px "Geist", sans-serif; } .ai-worth { font-style: normal; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: rgba(255, 255, 255, .08); } .ai-worth.yes { color: var(--good); background: rgba(74, 222, 128, .12); } .ai-worth.no { color: var(--bad); background: rgba(255, 122, 122, .12); } .ai-grade .item .st { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block !important; -webkit-line-clamp: unset !important; } /* Community › Events */ .ev-row { align-items: flex-start !important; } .ev-date { width: 46px; flex: none; text-align: center; border-radius: 12px; background: rgba(255, 210, 63, .1); padding: 6px 0; } .ev-date b { display: block; font: 700 19px "Geist", sans-serif; color: var(--brand); line-height: 1.1; } .ev-date span { font-size: 11px; color: var(--muted); text-transform: uppercase; } .ev-row .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .ev-in { color: var(--good); font-weight: 700; font-size: 13px; white-space: nowrap; } /* Settings › AI key */ .ai-key { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .ai-key-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ai-key-head b { font-size: 16px; } .ai-key-st { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; background: rgba(255, 255, 255, .08); color: var(--muted); white-space: nowrap; } .ai-key-st.on { color: var(--good); background: rgba(74, 222, 128, .12); } .ai-key p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .ai-key-row { display: flex; gap: 8px; } .ai-key-row input { flex: 1; min-width: 0; } .ai-key-row .btn { flex: none; } .ai-key .linkbtn { align-self: flex-start; color: var(--bad); } :root[data-skin=pro] .ai-key-row input { padding: 12px 14px !important; } /* Community: Buy · Chats · Friends · Events on one row */ :root[data-skin=pro] #cmSeg.seg { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; flex-wrap: nowrap !important; } :root[data-skin=pro] #cmSeg.seg button { min-width: 0 !important; padding: 10px 2px !important; font-size: 14px !important; gap: 4px !important; white-space: nowrap; } :root[data-skin=pro] #cmSeg.seg button .ic { width: 17px; height: 17px; flex: none; } .ev-row .st { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* best place to sell (sellwhere.js) */ .sw-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 4px; } .sw-head small { color: var(--muted); } .sw-row { text-decoration: none; color: inherit; } .sw-row.best { background: rgba(74, 222, 128, .07); } .sw-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .06); } .sw-ic .ic { width: 18px; height: 18px; } .sw-ic.shop { background: rgba(255, 210, 63, .12); color: var(--brand); } .sw-best { font-size: 11px; font-weight: 700; color: #052e14; background: var(--good); border-radius: 99px; padding: 1px 7px; vertical-align: 2px; } .sw-row .rt { display: flex; flex-direction: column; align-items: flex-end; } .sw-row .rt .down { font-size: 12px; } .sw-foot { padding: 4px 14px 10px; font-size: 12px; color: var(--muted); } .sw-row .st { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } :root[data-skin=pro] .pf-ch.flat { color: var(--muted); } :root[data-skin=pro] #tab-stats .pf-ch.flat { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; margin-top: 4px; background: rgba(255, 255, 255, .06); } /* keyboard up (body.typing): the tab bar really goes away – the pro skin forced it to stay (display: grid !important), so it covered the chat bar: you could not see what you typed, and Send was under the Profile tab */ :root[data-skin=pro] body.typing .tabs, body.typing .tabs { display: none !important; }