/* =====================================================================
   Resources (/resources …): plugins, configs, maps, kits and RexOS products.
   Uses the main site's look: its fonts, colours, green band and cards.
   ===================================================================== */
.rx-body {
  --rx-bg: var(--bg, #eef2ef);
  --rx-surface: var(--sv-card, #fff);
  --rx-ink: var(--sv-ink, #1d2a25);
  --rx-ink-2: var(--ink-2, #44524c);
  --rx-muted: var(--sv-muted, #5e6c65);
  --rx-line: var(--sv-line, #dbe3de);
  --rx-line-2: var(--sv-line-2, #e9eeeb);
  --rx-acc: var(--sv-ok, #17803f);
  --rx-acc-hi: #106a33;
  --rx-acc-soft: var(--sv-ok-soft, #e7f4ec);
  --rx-ok: var(--sv-ok, #17803f);
  --rx-ok-soft: var(--sv-ok-soft, #e7f4ec);
  --rx-gold: #e3a71b;
  --rx-bad: var(--sv-bad, #c0392b);
  --rx-display: var(--sv-head, "Red Hat Display", sans-serif);
  --rx-body: inherit;
  --rx-mono: var(--mono, ui-monospace, Consolas, monospace);
  --rx-shadow: var(--sv-shadow, 0 1px 2px rgba(20,40,30,.05), 0 12px 32px -18px rgba(20,60,40,.22));
}
.rx-body :focus-visible { outline: 2.5px solid var(--rx-acc); outline-offset: 2px; border-radius: 6px; }
.rx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rx-mono { font-family: var(--rx-mono); font-size: .92em; letter-spacing: -.01em; }
.rx-muted { color: var(--rx-muted); } .rx-small { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .rx-body * { transition: none !important; animation: none !important; } }

/* buttons: the gold one is the site's main button */
.rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rx-line); background: var(--rx-surface); color: var(--rx-ink) !important; font: 700 14.5px var(--rx-display); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.rx-btn:hover { border-color: #c3cec8; }
.rx-btn-acc { background: var(--sv-gold, #c9a24a); border-color: transparent; color: var(--sv-gold-ink, #2a1e05) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.rx-btn-acc:hover { background: var(--sv-gold-hi, #d8b45f); border-color: transparent; }
.rx-btn-ink { background: var(--rx-acc); border-color: var(--rx-acc); color: #fff !important; }
.rx-btn-ink:hover { background: var(--rx-acc-hi); }
.rx-btn-lg { width: 100%; height: 52px; font-size: 16px; border-radius: 12px; }
.rx-btn[disabled], .rx-btn[aria-disabled] { opacity: .5; pointer-events: none; }
.rx-body .note { border-radius: 12px; }

/* ---------- hub hero: the site's green band ---------- */
.rx-hero { position: relative; color: #fff; padding: 30px 0 100px; background: radial-gradient(ellipse 55% 130% at 92% -10%, rgba(201,162,74,.22), transparent 62%), radial-gradient(ellipse 45% 120% at -5% 110%, rgba(52,193,114,.16), transparent 60%), var(--sv-band, #0e3b2c); }
.rx-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1120px; }
.rx-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--sv-band-muted, #a9cbb9); margin-bottom: 14px; }
.rx-crumbs a { color: var(--sv-band-muted, #a9cbb9); text-decoration: none; }
.rx-crumbs a:hover { color: #fff; }
.rx-crumbs [aria-current] { color: #fff; }
.rx-hero h1 { margin: 0 0 12px; font: 800 clamp(30px, 4.4vw, 46px)/1.06 var(--rx-display); letter-spacing: -.025em; color: #fff; max-width: 18ch; }
.rx-hero-tx > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--sv-band-muted, #a9cbb9); max-width: 58ch; }
.rx-bigsearch { display: flex; align-items: center; gap: 10px; margin-top: 24px; max-width: 600px; height: 56px; padding: 0 6px 0 16px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); color: var(--sv-band-muted, #a9cbb9); }
.rx-bigsearch:focus-within { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.13); }
.rx-bigsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: #fff; }
.rx-bigsearch input::placeholder { color: var(--sv-band-muted, #a9cbb9); }
.rx-bigsearch .rx-btn { height: 44px; padding: 0 20px; }
.rx-hero-n { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 20px 0 0; }
.rx-hero-n div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 7px; }
.rx-hero-n dt { font-size: 14px; color: var(--sv-band-muted, #a9cbb9); }
.rx-hero-n dd { margin: 0; font: 800 20px var(--rx-display); color: #fff; font-variant-numeric: tabular-nums; }
.rx-hero-n .live dd { color: #7fe0a6; }

/* the icon wall: real resources, the thing people come for */
.rx-wall { display: grid; grid-template-columns: repeat(4, 84px); gap: 16px; justify-content: end; padding: 20px 0 30px; }
.rx-wall a { display: block; line-height: 0; border-radius: 22px; transition: transform .2s; }
.rx-wall a:nth-child(4n+2), .rx-wall a:nth-child(4n+4) { transform: translateY(26px); }
.rx-wall a:hover { transform: translateY(-4px); }
.rx-wall a:nth-child(4n+2):hover, .rx-wall a:nth-child(4n+4):hover { transform: translateY(22px); }
.rx-wall .rs-ico { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 16px 32px -14px rgba(0,0,0,.55); background: #fff; }
.rx-wall .rs-ico-gen { font-size: 28px !important; }

/* ---------- hub body ---------- */
.rx-hub { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 36px; padding-top: 32px; padding-bottom: 64px; }
.rx-side form { position: sticky; top: 84px; display: grid; gap: 26px; }
.rx-fg h2 { margin: 0 0 10px; font: 700 13.5px var(--rx-body); color: var(--rx-ink); }
.rx-fl { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--rx-ink-2) !important; text-decoration: none !important; }
.rx-fl:hover { background: var(--rx-line-2); }
.rx-fl i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.rx-fl span { flex: 1; }
.rx-fl em { font-style: normal; font-size: 12.5px; color: var(--rx-muted); font-variant-numeric: tabular-nums; }
.rx-fl.on { background: var(--rx-ink); color: #fff !important; }
.rx-fl.on em { color: rgba(255, 255, 255, .65); }
.rx-fl.on i { background: rgba(255, 255, 255, .14); color: #fff; }
.rx-radio { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; cursor: pointer; }
.rx-radio input { width: 17px; height: 17px; margin: 0; accent-color: var(--rx-acc); }
.rx-vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-vchip input { position: absolute; opacity: 0; }
.rx-vchip span { display: inline-block; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--rx-line); background: #fff; font: 500 12.5px var(--rx-mono); cursor: pointer; }
.rx-vchip input:checked + span { background: var(--rx-acc); border-color: var(--rx-acc); color: #fff; }
.rx-vchip input:focus-visible + span { outline: 2.5px solid var(--rx-acc); outline-offset: 2px; }
.rx-fg select { width: 100%; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--rx-line); background: #fff; font-size: 14.5px; }
.rx-clear { font-size: 13.5px; font-weight: 600; }

.rx-results { min-width: 0; display: grid; gap: 28px; align-content: start; }
.rx-sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rx-sh h2 { margin: 0; font: 700 21px var(--rx-display); letter-spacing: -.02em; }
.rx-sh p { margin: 0; font-size: 14px; color: var(--rx-muted); }
.rx-sh a { margin-left: auto; font-weight: 600; font-size: 14px; }

.rx-kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rx-kit { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--rx-surface); border: 1px solid var(--rx-line); box-shadow: var(--rx-shadow); transition: border-color .15s, transform .15s; }
.rx-kit:hover { border-color: #cbc2ff; transform: translateY(-2px); }
.rx-kit-top { display: flex; gap: 12px; align-items: center; }
.rx-kit-top .rs-ico { border-radius: 14px; }
.rx-kit-mode { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #fff4d6; color: #7c5300; font-size: 12px; font-weight: 600; }
.rx-kit h3 { margin: 4px 0 0; font: 700 17px/1.2 var(--rx-display); letter-spacing: -.01em; }
.rx-kit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; }
.rx-kit li { display: flex; gap: 8px; font-size: 13.5px; color: var(--rx-ink-2); }
.rx-kit li svg { flex: none; margin-top: 3px; color: var(--rx-ok); }
.rx-kit footer { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--rx-line-2); font-size: 13.5px; font-weight: 600; }
.rx-kit footer span:last-child { color: var(--rx-muted); font-weight: 500; }

.rx-trend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rx-trend-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--rx-surface); border: 1px solid var(--rx-line); color: var(--rx-ink) !important; text-decoration: none !important; }
.rx-trend-list a:hover { border-color: #cbc2ff; }
.rx-trend-list b { width: 18px; font: 700 15px var(--rx-display); color: var(--rx-muted); text-align: center; }
.rx-trend-list .rs-ico { border-radius: 10px; }
.rx-trend-list span { display: flex; flex-direction: column; min-width: 0; }
.rx-trend-list strong { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-trend-list small { font-size: 12.5px; color: var(--rx-muted); }

.rx-rh { display: flex; align-items: center; justify-content: space-between; gap: 12px; scroll-margin-top: 90px; }
.rx-rh h2 { margin: 0; font: 700 21px var(--rx-display); letter-spacing: -.02em; }
.rx-rh h2 span { margin-left: 6px; font: 500 15px var(--rx-body); color: var(--rx-muted); }
.rx-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rx-muted); }
.rx-sort select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--rx-line); background: #fff; font-weight: 600; font-size: 14px; color: var(--rx-ink); }

/* result rows */
.rx-list { display: grid; gap: 10px; }
.rx-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 170px; gap: 18px; align-items: start; padding: 18px; border-radius: 16px; background: var(--rx-surface); border: 1px solid var(--rx-line); transition: border-color .15s, box-shadow .15s; }
.rx-row:hover { border-color: #cbc2ff; box-shadow: var(--rx-shadow); }
.rx-row-a { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rx-row-ico .rs-ico { width: 72px; height: 72px; border-radius: 16px; }
.rx-row-ico .rs-ico-gen { font-size: 24px !important; }
.rx-row h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 18.5px/1.25 var(--rx-display); letter-spacing: -.015em; }
.rx-row h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-row:hover h3 span { color: var(--rx-acc); }
.rx-pick { flex: none; padding: 2px 8px; border-radius: 6px; background: #fff4d6; color: #7c5300; font: 600 11.5px var(--rx-body); font-style: normal; }
.rx-row-by { margin: 2px 0 0; font-size: 13.5px; color: var(--rx-muted); }
.rx-row-by b { color: var(--rx-ink-2); font-weight: 600; }
.rx-from { margin-left: 6px; }
.rx-row-tag { margin: 8px 0 0; font-size: 14.5px; color: var(--rx-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; background: var(--rx-line-2); color: var(--rx-ink-2); font-size: 12.5px; font-weight: 500; }
.rx-chip-cat { color: color-mix(in srgb, var(--c, #555) 85%, #000); background: color-mix(in srgb, var(--c, #888) 11%, #fff); font-weight: 600; }
.rx-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font-size: 13px; color: var(--rx-muted); }
.rx-price { padding: 3px 10px; border-radius: 8px; background: var(--rx-ok-soft); color: #0b6b3f; font-weight: 700; font-size: 13px; }
.rx-price.paid { background: var(--rx-acc-soft); color: var(--rx-acc); }
.rx-dl b { color: var(--rx-ink); font: 700 16px var(--rx-display); font-variant-numeric: tabular-nums; }
.rx-rt { display: inline-flex; align-items: center; gap: 5px; } .rx-rt b { color: var(--rx-ink); }
.rx-upd { font-size: 12.5px; }
.rs-stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.rs-stars svg { fill: #dcdfe8; } .rs-stars svg.on { fill: var(--rx-gold); }
.rs-ico { flex: none; display: block; object-fit: cover; background: var(--rx-line-2); border-radius: 12px; }
.rs-ico-gen { display: grid; place-items: center; color: #fff; font: 800 20px var(--rx-display); letter-spacing: -.03em; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000)); }

.rx-pager .pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rx-pager .pager a, .rx-pager .pager span { min-width: 38px; height: 38px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--rx-line); background: #fff; color: var(--rx-ink) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.rx-pager .pager .cur { background: var(--rx-ink); border-color: var(--rx-ink); color: #fff !important; }
.rx-pager .pager .gap { border: 0; background: none; }
.rx-empty { padding: 48px 24px; border-radius: 18px; border: 1.5px dashed var(--rx-line); text-align: center; background: var(--rx-surface); }
.rx-empty h3, .rx-empty h1 { margin: 0; font: 700 22px var(--rx-display); }
.rx-empty p { margin: 6px 0 18px; color: var(--rx-muted); }
.rx-404 { margin: 60px 0; }
.rx-creator { display: flex; align-items: center; gap: 24px; padding: 26px 28px; border-radius: 18px; background: var(--rx-acc-soft); border: 1px solid #ddd5ff; }
.rx-creator h2 { margin: 0 0 4px; font: 700 21px var(--rx-display); letter-spacing: -.02em; }
.rx-creator p { margin: 0; color: var(--rx-ink-2); max-width: 60ch; }
.rx-creator .rx-btn { margin-left: auto; flex: none; }

/* ---------- one resource ---------- */
.rx-head { background: var(--rx-surface); border-bottom: 1px solid var(--rx-line); padding: 26px 0 30px; }
.rx-head-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.rx-head-ico .rs-ico { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(20, 23, 43, .06), 0 18px 34px -18px rgba(20, 23, 43, .45); }
.rx-head-ico .rs-ico-gen { font-size: 40px !important; }
.rx-head h1 { margin: 2px 0 0; font: 800 clamp(30px, 3.8vw, 44px)/1.05 var(--rx-display); letter-spacing: -.035em; }
.rx-head-tag { margin: 10px 0 0; font-size: 17.5px; color: var(--rx-ink-2); max-width: 60ch; }
.rx-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; font-size: 14px; color: var(--rx-muted); }
.rx-author { display: inline-flex; align-items: center; gap: 8px; }
.rx-author i, .rx-cr i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--rx-ink); color: #fff; font: 700 12px var(--rx-display); font-style: normal; }
.rx-author b { color: var(--rx-ink); }
.rx-head-rt { display: inline-flex; align-items: center; gap: 6px; color: var(--rx-muted) !important; text-decoration: none !important; }
.rx-head-rt b { color: var(--rx-ink); }
.rx-src { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.rx-src i { width: 9px; height: 9px; border-radius: 3px; background: var(--s); }

.rx-buy { padding: 18px; border-radius: 18px; border: 1px solid var(--rx-line); background: var(--rx-surface); box-shadow: 0 1px 2px rgba(20, 23, 43, .04), 0 22px 44px -26px rgba(20, 23, 43, .35); }
.rx-buy form { margin: 0; }
.rx-buy-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.rx-buy-price b { font: 800 30px/1 var(--rx-display); letter-spacing: -.03em; }
.rx-buy-price span { font-size: 13px; color: var(--rx-muted); }
.rx-buy-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--rx-muted); }
.rx-buy-n { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rx-line-2); }
.rx-buy-n div { text-align: center; }
.rx-buy-n div + div { border-left: 1px solid var(--rx-line-2); }
.rx-buy-n dt { font-size: 12px; color: var(--rx-muted); }
.rx-buy-n dd { margin: 2px 0 0; font: 700 18px var(--rx-display); font-variant-numeric: tabular-nums; }
.rx-buy-edit { display: block; margin-top: 14px; text-align: center; font-size: 13.5px; font-weight: 600; }

.rx-tabs { position: sticky; top: 64px; z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rx-line); }
.rx-tabs .rx-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rx-tabs a { position: relative; padding: 15px 12px 14px; font-weight: 600; font-size: 14.5px; color: var(--rx-muted) !important; text-decoration: none !important; white-space: nowrap; }
.rx-tabs a:hover { color: var(--rx-ink) !important; }
.rx-tabs a.on { color: var(--rx-ink) !important; }
.rx-tabs a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--rx-acc); }
.rx-tabs em { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--rx-line-2); font-size: 12px; color: var(--rx-muted); }

.rx-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; padding-top: 30px; padding-bottom: 72px; }
.rx-dmain { min-width: 0; display: grid; gap: 20px; align-content: start; }
.rx-panel { min-width: 0; padding: 26px 28px; border-radius: 18px; background: var(--rx-surface); border: 1px solid var(--rx-line); scroll-margin-top: 130px; }
.rx-panel[hidden] { display: none; }
.rx-ph { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 18px; font: 700 22px var(--rx-display); letter-spacing: -.02em; }
.rx-ph small { font: 500 13px var(--rx-body); color: var(--rx-muted); }
.rx-ph a { margin-left: auto; font: 600 14px var(--rx-body); }
.rx-ph3 { margin: 24px 0 12px; font: 700 16px var(--rx-display); }
.rx-note { padding: 14px 18px; border-radius: 14px; background: #fff7e0; border: 1px solid #f0dc9c; color: #6b4b00; }
.rx-note.ok { background: var(--rx-ok-soft); border-color: #bfe6cf; color: #0b6b3f; }
.rx-note.bad { background: #fdecea; border-color: #f5c6c0; color: var(--rx-bad); }

.rx-gal { margin: -8px -10px 22px; }
.rx-gal-main { display: block; line-height: 0; border-radius: 14px; overflow: hidden; background: var(--rx-line-2); cursor: zoom-in; }
.rx-gal-main img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s; }
.rx-gal-main:hover img { transform: scale(1.015); }
.rx-gal-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.rx-gal-thumbs a { display: block; line-height: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in; outline: 1px solid var(--rx-line); }
.rx-gal-thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rx-gal-thumbs a:hover { outline: 2px solid var(--rx-acc); }

.rx-prose { font-size: 16px; line-height: 1.7; color: var(--rx-ink-2); max-width: 74ch; }
.rx-prose h2 { margin: 1.6em 0 .5em; font: 700 21px var(--rx-display); letter-spacing: -.02em; color: var(--rx-ink); }
.rx-prose h3 { margin: 1.4em 0 .4em; font: 700 17px var(--rx-display); color: var(--rx-ink); }
.rx-prose > :first-child { margin-top: 0; }
.rx-prose p { margin: 0 0 1em; }
.rx-prose ul, .rx-prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.rx-prose li { margin: .25em 0; }
.rx-prose li::marker { color: var(--rx-acc); }
.rx-prose strong, .rx-prose b { color: var(--rx-ink); }
.rx-prose code { padding: 2px 6px; border-radius: 6px; background: var(--rx-line-2); font: 500 .88em var(--rx-mono); }
.rx-prose blockquote { margin: 0 0 1em; padding: 4px 0 4px 16px; border-left: 3px solid var(--rx-acc); color: var(--rx-muted); }
.rx-prose hr { border: 0; border-top: 1px solid var(--rx-line); margin: 1.6em 0; }
.rx-prose .desc-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1em; border-radius: 12px; overflow: hidden; background: #000; }
.rx-prose .desc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.rx-inside { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.rx-inside li { display: flex; gap: 10px; font-size: 15px; }
.rx-inside svg { flex: none; margin-top: 4px; color: var(--rx-ok); }

.rx-vers { list-style: none; margin: 0; padding: 0; }
.rx-vers li { padding: 16px 0; border-top: 1px solid var(--rx-line-2); }
.rx-vers li:first-child { border-top: 0; padding-top: 0; }
.rx-ver-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rx-ver-h b { font-size: 16px; font-weight: 600; }
.rx-tag-new { padding: 2px 8px; border-radius: 6px; background: var(--rx-ok-soft); color: #0b6b3f; font-size: 12px; font-weight: 700; }
.rx-ver-m { font-size: 13.5px; color: var(--rx-muted); }
.rx-ver-dl { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--rx-line); color: var(--rx-ink) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; }
.rx-ver-dl:hover { border-color: var(--rx-acc); color: var(--rx-acc) !important; }
.rx-ver-log { margin-top: 8px; font-size: 14.5px; }

.rx-rv-sum { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: center; padding: 18px; border-radius: 14px; background: var(--rx-bg); margin-bottom: 18px; }
.rx-rv-big { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rx-rv-big b { font: 800 44px/1 var(--rx-display); letter-spacing: -.03em; }
.rx-rv-big span { font-size: 13px; color: var(--rx-muted); }
.rx-bars-h { display: grid; gap: 7px; }
.rx-bars-h > div { display: grid; grid-template-columns: 40px 1fr 48px; gap: 12px; align-items: center; font-size: 13.5px; }
.rx-bars-h i { height: 8px; border-radius: 99px; background: var(--rx-line); overflow: hidden; }
.rx-bars-h i b { display: block; height: 100%; border-radius: 99px; background: var(--rx-gold); }
.rx-bars-h em { font-style: normal; text-align: right; color: var(--rx-muted); font-variant-numeric: tabular-nums; }
.rx-bars-v > div { grid-template-columns: 110px 1fr 60px; }
.rx-bars-v i b { background: var(--rx-acc); }
.rx-rv-form { display: grid; gap: 12px; padding: 18px; border-radius: 14px; border: 1px solid var(--rx-line); margin-bottom: 8px; }
.rx-rv-form textarea, .rx-reply-f textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rx-line); background: #fff; resize: vertical; }
.rx-rv-form textarea:focus, .rx-reply-f textarea:focus { outline: none; border-color: var(--rx-acc); box-shadow: 0 0 0 3px var(--rx-acc-soft); }
.rx-rv-form .rx-btn, .rx-reply-f .rx-btn { justify-self: start; }
.rx-pick-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; margin: 0; padding: 0; }
.rx-pick-stars legend { float: left; margin-right: 12px; font-weight: 600; line-height: 26px; }
.rx-pick-stars input { position: absolute; opacity: 0; }
.rx-pick-stars label { cursor: pointer; line-height: 0; }
.rx-pick-stars svg { fill: #dcdfe8; transition: fill .1s; }
.rx-pick-stars label:hover svg, .rx-pick-stars label:hover ~ label svg, .rx-pick-stars input:checked ~ label svg { fill: var(--rx-gold); }
.rx-pick-stars input:focus-visible + label svg { outline: 2px solid var(--rx-acc); border-radius: 4px; }
.rx-rvs { list-style: none; margin: 0; padding: 0; }
.rx-rvs > li { padding: 18px 0; border-top: 1px solid var(--rx-line-2); }
.rx-rv-h { display: flex; align-items: center; gap: 12px; }
.rx-rv-h img { border-radius: 9px; image-rendering: pixelated; }
.rx-rv-h div { display: flex; flex-direction: column; }
.rx-rv-h span { display: flex; align-items: center; gap: 8px; }
.rx-rv-h small { font-size: 12.5px; color: var(--rx-muted); }
.rx-rvs p { margin: 10px 0 0; color: var(--rx-ink-2); }
.rx-reply { margin: 12px 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--rx-acc); border-radius: 0 12px 12px 0; background: var(--rx-bg); font-size: 14.5px; }
.rx-reply p { margin: 4px 0 0; }
.rx-reply-f { margin-top: 8px; font-size: 14px; } .rx-reply-f summary { cursor: pointer; color: var(--rx-muted); }
.rx-reply-f form { display: grid; gap: 8px; margin-top: 8px; }

.rx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rx-tiles > div { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 14px; background: var(--rx-bg); }
.rx-tiles span { font-size: 13px; color: var(--rx-muted); }
.rx-tiles b { margin: 2px 0; font: 700 28px/1.15 var(--rx-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rx-tiles small { font-size: 12.5px; color: var(--rx-muted); }
.rx-tiles small.up { color: var(--rx-ok); font-weight: 600; } .rx-tiles small.down { color: var(--rx-bad); font-weight: 600; }
.rx-chart { margin: 22px 0 0; }
.rx-chart figcaption { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font-size: 13px; color: var(--rx-muted); }
.rx-chart figcaption span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.rx-chart .k-d::before { background: var(--rx-acc); } .rx-chart .k-v::before { background: #d9d2ff; }
.rx-chart figcaption em { margin-left: auto; font-style: normal; }
.rx-cbars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; align-items: end; height: 160px; border-bottom: 1px solid var(--rx-line); }
.rx-cbars span { position: relative; height: 100%; }
.rx-cbars i { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px; border-radius: 4px 4px 0 0; }
.rx-cbars i.v { background: #e4deff; }
.rx-cbars i.d { left: 20%; right: 20%; background: var(--rx-acc); }
.rx-cbars span:hover i.v { background: #d0c6ff; }
.rx-cx { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--rx-muted); }

.rx-dside { display: grid; gap: 16px; align-content: start; }
.rx-card { padding: 20px; border-radius: 18px; background: var(--rx-surface); border: 1px solid var(--rx-line); }
.rx-card h2 { margin: 0 0 14px; font: 700 16px var(--rx-display); letter-spacing: -.01em; }
.rx-vgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.rx-vgrid span { padding: 6px 0; border-radius: 8px; text-align: center; font: 500 12px var(--rx-mono); color: #a9adbf; background: var(--rx-bg); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .15); }
.rx-vgrid span.ok { color: #0b6b3f; background: var(--rx-ok-soft); text-decoration: none; font-weight: 600; }
.rx-dl { margin: 0; display: grid; }
.rx-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rx-line-2); font-size: 14px; }
.rx-dl div:first-child { border-top: 0; }
.rx-dl dt { color: var(--rx-muted); } .rx-dl dd { margin: 0; text-align: right; font-weight: 600; }
.rx-sha { margin: 12px 0 0; font-size: 12px; color: var(--rx-muted); }
.rx-sha code { font: 500 11.5px var(--rx-mono); }
.rx-cr { display: flex; align-items: center; gap: 12px; }
.rx-cr i { width: 42px; height: 42px; font-size: 17px; border-radius: 12px; background: linear-gradient(150deg, #7a62ff, var(--rx-acc) 60%, #3a20c4); }
.rx-cr div { display: flex; flex-direction: column; } .rx-cr b { font-size: 15.5px; } .rx-cr span { font-size: 13px; color: var(--rx-muted); }
.rx-creator-card ul { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rx-line-2); display: grid; gap: 4px; }
.rx-creator-card a { display: flex; align-items: center; gap: 10px; padding: 7px; margin: 0 -7px; border-radius: 10px; color: var(--rx-ink) !important; text-decoration: none !important; }
.rx-creator-card a:hover { background: var(--rx-bg); }
.rx-creator-card a > span:not(.rs-ico) { display: flex; flex-direction: column; min-width: 0; }
.rx-creator-card a b { font-size: 14px; } .rx-creator-card a small { font-size: 12.5px; color: var(--rx-muted); }
.rx-creator-card .rs-ico { border-radius: 9px; }
.rx-creator-card .rs-ico-gen { font-size: 13px !important; }

/* screenshot viewer */
.rx-lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center; background: rgba(12, 13, 26, .94); }
.rx-lb[hidden] { display: none; }
.rx-lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 56px 0 24px; }
.rx-lb img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.rx-lb figcaption { font: 600 13.5px var(--rx-mono); color: rgba(255, 255, 255, .7); }
.rx-lb button { display: grid; place-items: center; border: 0; color: #fff; background: rgba(255, 255, 255, .1); cursor: pointer; }
.rx-lb button:hover { background: rgba(255, 255, 255, .2); }
.rx-lb-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 12px; }
.rx-lb-nav { justify-self: center; width: 52px; height: 52px; border-radius: 50%; }
.rx-lb.one .rx-lb-nav, .rx-lb.one figcaption { visibility: hidden; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .rx-nav { display: none; }
  .rx-find { margin-left: auto; }
}
@media (max-width: 1000px) {
  .rx-hero-in { grid-template-columns: 1fr; }
  .rx-wall { justify-content: start; grid-template-columns: repeat(6, 64px); gap: 12px; padding: 0 0 18px; }
  .rx-wall .rs-ico { width: 64px; height: 64px; border-radius: 17px; }
  .rx-wall a:nth-child(n+7) { display: none; }
  .rx-hub { grid-template-columns: 1fr; gap: 20px; }
  .rx-side form { position: static; display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 16px; border-radius: 16px; background: var(--rx-surface); border: 1px solid var(--rx-line); }
  .rx-side .rx-fg:first-child { display: none; }
  .rx-fg { min-width: 180px; }
  .rx-head-grid { grid-template-columns: 88px minmax(0, 1fr); }
  .rx-head-ico .rs-ico { width: 88px; height: 88px; border-radius: 22px; }
  .rx-buy { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; align-items: center; }
  .rx-buy-price { margin: 0; } .rx-buy > a.rx-btn, .rx-buy > form, .rx-buy > span.rx-btn { grid-column: 2; }
  .rx-buy-note, .rx-buy-n, .rx-buy-edit { grid-column: 1 / -1; }
  .rx-detail { grid-template-columns: minmax(0, 1fr); }
  .rx-dside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-kit-grid, .rx-trend-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rx-wrap { padding: 0 16px; }
  .rx-find, .rx-acts { display: none; }
  .rx-burger { display: flex; margin-left: auto; }
  .rx-top-in { height: 58px; }
  .rx-tabs { top: 58px; }
  .rx-hero-in { padding-top: 26px; padding-bottom: 30px; gap: 22px; }
  .rx-bigsearch { height: 52px; }
  .rx-bigsearch .rx-btn { display: none; }
  .rx-wall { grid-template-columns: repeat(5, 52px); gap: 10px; }
  .rx-wall .rs-ico { width: 52px; height: 52px; border-radius: 14px; }
  .rx-wall a:nth-child(n+6) { display: none; }
  .rx-wall a:nth-child(4n+2), .rx-wall a:nth-child(4n+4) { transform: none; }
  .rx-row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .rx-row-ico .rs-ico { width: 56px; height: 56px; border-radius: 13px; }
  .rx-row-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; text-align: left; padding-top: 10px; border-top: 1px solid var(--rx-line-2); }
  .rx-row-side .rx-upd { margin-left: auto; }
  .rx-kit-grid, .rx-trend-list { grid-template-columns: 1fr; }
  .rx-rh { flex-wrap: wrap; }
  .rx-creator { flex-direction: column; align-items: flex-start; padding: 22px; }
  .rx-creator .rx-btn { margin-left: 0; }
  .rx-head { padding: 18px 0 22px; }
  .rx-head-grid { grid-template-columns: 64px minmax(0, 1fr); gap: 14px 16px; }
  .rx-head-ico .rs-ico { width: 64px; height: 64px; border-radius: 17px; }
  .rx-head-ico .rs-ico-gen { font-size: 24px !important; }
  .rx-head-tag { font-size: 16px; }
  .rx-head-meta { grid-column: 1 / -1; }
  .rx-head-tx { display: contents; }
  .rx-head-tx h1 { grid-column: 2; align-self: center; }
  .rx-head-tag, .rx-head-meta { grid-column: 1 / -1; margin-top: 0; }
  .rx-buy { display: block; }
  .rx-panel { padding: 20px 16px; border-radius: 16px; }
  .rx-gal { margin: -4px -4px 18px; }
  .rx-gal-thumbs { grid-template-columns: repeat(3, 1fr); }
  .rx-inside { grid-template-columns: 1fr; }
  .rx-rv-sum { grid-template-columns: 1fr; gap: 14px; }
  .rx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-tiles b { font-size: 23px; }
  .rx-cbars { gap: 2px; height: 120px; }
  .rx-dside { grid-template-columns: 1fr; }
  .rx-foot-in { grid-template-columns: 1fr 1fr; }
  .rx-foot-brand { grid-column: 1 / -1; }
  .rx-lb { grid-template-columns: 1fr; }
  .rx-lb figure { padding: 64px 10px 84px; }
  .rx-lb-nav { position: absolute; bottom: 18px; } .rx-lb-nav.prev { left: 22%; } .rx-lb-nav.next { right: 22%; }
}

.rx-fdet > summary { display: none; }
@media (max-width: 1000px) {
  .rx-fdet > summary { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--rx-line); background: var(--rx-surface); font-weight: 600; cursor: pointer; list-style: none; }
  .rx-fdet > summary::-webkit-details-marker { display: none; }
  .rx-fdet > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border: solid var(--rx-muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
  .rx-fdet[open] > summary::after { transform: rotate(-135deg); }
  .rx-fdet > summary em { font-style: normal; padding: 1px 8px; border-radius: 99px; background: var(--rx-acc); color: #fff; font-size: 12px; }
  .rx-fdet[open] > summary { margin-bottom: 8px; }
}
@media (max-width: 720px) {
  .rx-sh { flex-wrap: wrap; row-gap: 2px; }
  .rx-sh p { order: 3; width: 100%; }
}

/* ---------- RexOS store ---------- */
.rx-rex { padding: 22px; border-radius: 20px; background: linear-gradient(180deg, #fff6ef, var(--rx-surface) 70%); border: 1px solid #f6d9c3; }
.rx-rex-h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rx-rex-h img { flex: none; border-radius: 12px; }
.rx-rex-h h2 { margin: 0; font: 700 21px var(--rx-display); letter-spacing: -.02em; }
.rx-rex-h p { margin: 2px 0 0; font-size: 14px; color: var(--rx-ink-2); max-width: 64ch; }
.rx-rex-h a { margin-left: auto; flex: none; font-weight: 600; font-size: 14px; color: #c2541a; }
.rx-rex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rx-rex-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #f0dccd; transition: border-color .15s, transform .15s; }
.rx-rex-card:hover { border-color: #e8702a; transform: translateY(-2px); }
.rx-rex-card.rx-rex-best { border-color: #e8702a; box-shadow: 0 0 0 3px #fde3d2; }
.rx-rex-top { display: flex; align-items: center; justify-content: space-between; }
.rx-rex-top .rs-ico { border-radius: 12px; }
.rx-rex-kind { padding: 2px 9px; border-radius: 6px; background: #fdeadd; color: #a8460f; font-size: 12px; font-weight: 700; }
.rx-rex-card h3 { margin: 4px 0 0; font: 700 17px/1.25 var(--rx-display); letter-spacing: -.01em; }
.rx-rex-card p { margin: 0; font-size: 13.5px; color: var(--rx-ink-2); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-rex-card footer { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid #f6e6da; }
.rx-rex-card footer b { font: 800 19px var(--rx-display); }
.rx-rex-card footer span { font-size: 12.5px; color: var(--rx-muted); text-align: right; }
.rx-chip-rex { background: #fdeadd; color: #a8460f; font-weight: 600; }

.rx-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; padding: 12px 14px; border-radius: 12px; background: #fff6ef; border: 1.5px dashed #eda877; }
.rx-code span { grid-column: 1 / -1; font-size: 12.5px; color: #a8460f; font-weight: 600; }
.rx-code code { font: 600 15px var(--rx-mono); letter-spacing: .03em; color: var(--rx-ink); white-space: nowrap; }
.rx-code.used { background: var(--rx-bg); border-color: var(--rx-line); }
.rx-code.used span { color: var(--rx-muted); }
.rx-code.used code { color: var(--rx-muted); text-decoration: line-through; }
.rx-copy { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #eda877; background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.rx-copy:hover { background: #fdeadd; }

.rx-rexhow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; margin-bottom: 24px; padding: 18px; border-radius: 16px; background: #fff6ef; border: 1px solid #f6d9c3; }
.rx-rexhow img { border-radius: 12px; }
.rx-rexhow > div b { display: block; font: 700 16px var(--rx-display); }
.rx-rexhow > div span { font-size: 13.5px; color: var(--rx-ink-2); }
.rx-rexhow ol { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: st; }
.rx-rexhow li { counter-increment: st; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 46px; position: relative; border-radius: 12px; background: #fff; border: 1px solid #f6e6da; }
.rx-rexhow li::before { content: counter(st); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e8702a; color: #fff; font: 700 12px var(--rx-display); }
.rx-rexhow li b { font-size: 14px; } .rx-rexhow li span { font-size: 12.5px; color: var(--rx-muted); }
@media (max-width: 1000px) { .rx-rex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .rx-rex { padding: 16px; }
  .rx-rex-h { flex-wrap: wrap; } .rx-rex-h a { margin-left: 0; }
  .rx-rex-grid, .rx-rexhow ol { grid-template-columns: 1fr; }
}


/* ---------- in the site layout ---------- */
.rx-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 40px; }
.rx-hub { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; padding: 0 0 40px; }
.rx-side form { position: sticky; top: 12px; padding: 18px; border-radius: 18px; background: var(--rx-surface); border: 1px solid var(--rx-line); box-shadow: var(--rx-shadow); gap: 22px; }
.rx-fl.on { background: var(--rx-ink); }
.rx-vchip input:checked + span { background: var(--rx-acc); border-color: var(--rx-acc); }
.rx-kits, .rx-trend { padding: 20px; border-radius: 20px; background: var(--rx-surface); border: 1px solid var(--rx-line); box-shadow: var(--rx-shadow); }
.rx-kit { box-shadow: none; background: var(--rx-bg); border-color: var(--rx-line-2); }
.rx-kit:hover, .rx-row:hover, .rx-trend-list a:hover { border-color: color-mix(in srgb, var(--rx-acc) 45%, var(--rx-line)); }
.rx-trend-list a { background: var(--rx-bg); border-color: var(--rx-line-2); }
.rx-rh { padding: 12px 12px 12px 20px; border-radius: 16px; background: var(--rx-surface); border: 1px solid var(--rx-line); box-shadow: var(--rx-shadow); }
.rx-row { box-shadow: var(--rx-shadow); }
.rx-row:hover h3 span { color: var(--rx-acc); }
.rx-price.paid { background: var(--sv-gold-soft, #f8f1df); color: #7a5410; }
.rx-creator { background: radial-gradient(ellipse 60% 140% at 100% 0, rgba(201,162,74,.25), transparent 60%), var(--sv-band, #0e3b2c); border: 0; color: #fff; }
.rx-creator h2 { color: #fff; } .rx-creator p { color: var(--sv-band-muted, #a9cbb9); }
.rx-creator .rx-btn-ink { background: var(--sv-gold, #c9a24a); border-color: transparent; color: var(--sv-gold-ink, #2a1e05) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }

/* one resource: band on top, white buy card on the right */
.rx-head { position: relative; color: #fff; padding: 30px 0 90px; border: 0; background: radial-gradient(ellipse 55% 130% at 92% -10%, rgba(201,162,74,.22), transparent 62%), radial-gradient(ellipse 45% 120% at -5% 110%, rgba(52,193,114,.16), transparent 60%), var(--sv-band, #0e3b2c); }
.rx-head > .wrap { position: relative; z-index: 1; max-width: 1120px; }
.rx-head .rx-crumbs { margin-bottom: 18px; }
.rx-head-grid { grid-template-columns: 112px minmax(0, 1fr) 330px; }
.rx-head-ico .rs-ico { box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 18px 34px -16px rgba(0,0,0,.6); }
.rx-head h1 { color: #fff; }
.rx-head-tag { color: var(--sv-band-muted, #a9cbb9); }
.rx-head-meta { color: var(--sv-band-muted, #a9cbb9); }
.rx-author b, .rx-head-rt b { color: #fff; }
.rx-author i { background: rgba(255,255,255,.14); }
.rx-head-rt { color: var(--sv-band-muted, #a9cbb9) !important; }
.rx-head-rt .rs-stars svg { fill: rgba(255,255,255,.22); } .rx-head-rt .rs-stars svg.on { fill: #f2c14e; }
.rx-head .rx-chip { background: rgba(255,255,255,.1); color: #fff; }
.rx-head .rx-chip-cat { color: color-mix(in srgb, var(--c) 40%, #fff); }
.rx-head .rx-pick { background: rgba(242,193,78,.18); color: #ffd977; }
.rx-buy { position: relative; z-index: 3; color: var(--rx-ink); border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 26px 50px -24px rgba(0,0,0,.45); }
.rx-buy-edit { color: var(--rx-acc); }
.rx-tabs { position: sticky; top: 8px; z-index: 20; padding: 5px; border: 1px solid var(--rx-line); border-radius: 14px; background: var(--rx-surface); box-shadow: var(--rx-shadow); backdrop-filter: none; margin-right: 366px; }
.rx-tabs-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rx-tabs a { padding: 9px 14px; border-radius: 10px; font: 700 14px var(--rx-display); }
.rx-tabs a:hover { background: var(--rx-line-2); }
.rx-tabs a.on { background: var(--rx-ink); color: #fff !important; }
.rx-tabs a.on::after { display: none; }
.rx-tabs a.on em { background: rgba(255,255,255,.18); color: #fff; }
.rx-detail { grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; padding: 0; }
.rx-buy-m { display: none; }
.rx-buy-d { margin-top: -290px; position: relative; z-index: 3; }
.rx-head-grid { grid-template-columns: 112px minmax(0, 1fr); padding-right: 366px; min-height: 150px; }
.rx-sort span { white-space: nowrap; }
.rx-panel { box-shadow: var(--rx-shadow); scroll-margin-top: 80px; }
.rx-prose li::marker { color: var(--rx-acc); }
.rx-reply { border-left-color: var(--rx-acc); }
.rx-cr i { background: linear-gradient(150deg, #2a7a52, var(--sv-band, #0e3b2c)); }
.rx-card { box-shadow: var(--rx-shadow); }
.rx-chart .k-d::before, .rx-cbars i.d { background: var(--rx-acc); }
.rx-chart .k-v::before, .rx-cbars i.v { background: color-mix(in srgb, var(--rx-acc) 18%, var(--rx-bg)); }
.rx-cbars span:hover i.v { background: color-mix(in srgb, var(--rx-acc) 30%, var(--rx-bg)); }
.rx-bars-v i b { background: var(--rx-acc); }
.rx-lb { background: rgba(6, 22, 16, .94); }
@media (max-width: 1000px) {
  .rx-hub { grid-template-columns: 1fr; gap: 16px; }
  .rx-side form { position: static; }
  .rx-head-grid { grid-template-columns: 88px minmax(0, 1fr); }
  .rx-head { padding-bottom: 80px; }
  .rx-head-grid { padding-right: 0; min-height: 0; }
  .rx-buy-m { display: block; grid-column: 1 / -1; }
  .rx-buy-d { display: none; }
  .rx-tabs { margin-right: 0; }
}
@media (max-width: 720px) {
  .rx-hero { padding-bottom: 84px; }
  .rx-hero-in { grid-template-columns: 1fr; gap: 20px; }
  .rx-head-grid { grid-template-columns: 64px minmax(0, 1fr); }
  .rx-bigsearch .rx-btn { display: none; }
}
@media (max-width: 1000px) { .rx-detail { grid-template-columns: minmax(0, 1fr); } .rx-hub > * { min-width: 0; } }