:root {
  color-scheme: dark;
  --bg: #0d0d0c;
  --panel: #151513;
  --panel-2: #1b1b18;
  --line: #30302b;
  --line-soft: #242421;
  --text: #ece9df;
  --muted: #99978e;
  --gold: #d5b96f;
  --gold-soft: #a89563;
  --focus-line: rgba(255,255,255,.58);
  --interaction-white: #fff;
  --danger: #d88579;
  --sidebar: 220px;
  --content-max: 1600px;
}

* { box-sizing: border-box; }
html { min-width: 300px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, select, input { border-radius: 0; }
img { display: block; max-width: 100%; }

.skip-link { position: fixed; z-index: 100; top: -60px; left: 12px; padding: 9px 12px; background: var(--text); color: #111; }
.skip-link:focus { top: 10px; }
.shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: var(--sidebar); display: flex; flex-direction: column; padding: 30px 22px; border-right: 1px solid var(--line); background: #10100f; }
.brand { display: flex; align-items: center; gap: 9px; width: fit-content; }
.sidebar > .brand { width: 100%; flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
.brand-mark { display: block; flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; }
.brand strong { color: #f0ede4; font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: .17em; white-space: nowrap; }
.nav-list { display: grid; gap: 5px; margin-top: 56px; }
.nav-list a { display: flex; align-items: center; gap: 13px; padding: 12px; border-left: 2px solid transparent; color: var(--muted); }
.nav-list img { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; opacity: .72; }
.nav-list a:hover img, .nav-list a.active img { opacity: 1; }
.nav-list a:hover, .nav-list a.active { background: rgba(255,255,255,.035); color: var(--text); }
.nav-list a.active { border-left-color: var(--gold); }
.language-switcher { position: relative; margin-top: auto; }
.catalog-version { min-height: 16px; margin: 10px 0 0; color: var(--text); font-size: 11px; letter-spacing: .04em; text-align: center; visibility: hidden; }
.catalog-version.is-ready { visibility: visible; }
.language-trigger { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 11px; border: 1px solid var(--line); background: #151513; color: var(--text); text-align: left; }
.language-trigger:hover, .language-trigger[aria-expanded="true"] { border-color: var(--focus-line); background: #1a1a18; }
.language-trigger strong { margin-left: auto; color: var(--gold); font-size: 11px; letter-spacing: .1em; }
.language-current-flag, .language-menu img { width: 24px; height: 16px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.18); object-fit: cover; }
.language-menu { position: absolute; inset: auto 0 calc(100% + 7px); z-index: 30; display: grid; gap: 3px; padding: 6px; border: 1px solid #3a382f; background: #11110f; box-shadow: 0 16px 38px rgba(0,0,0,.58); }
.language-menu[hidden],
.search-clear[hidden],
.rarity-menu[hidden],
.sort-menu[hidden],
.collection-paste-fallback[hidden],
.chinese-filter-menu[hidden],
.chinese-filter-empty[hidden],
.chinese-filter-option[hidden] { display: none; }
.language-menu button { appearance: none; width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; background: transparent; padding: 9px 10px; color: #aaa79e; cursor: pointer; text-align: left; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.language-menu button:hover, .language-menu button:focus-visible { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.065); color: #fff; outline: none; }
.language-menu button:active { background: rgba(255,255,255,.11); }
.language-menu button.active { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); color: #fff; }
.language-switcher-mobile { display: none; }
.mobile-header { display: none; }
.content {
  position: relative;
  width: calc(100% - var(--sidebar));
  max-width: var(--content-max);
  min-height: 100vh;
  margin-left: calc(var(--sidebar) + max(0px, (100vw - var(--sidebar) - var(--content-max)) / 2));
  padding: 46px clamp(32px, 4vw, 68px) 90px;
}

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--line); padding-bottom: 21px; }
.eyebrow { margin: 0 0 6px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 500 clamp(34px, 3vw, 48px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
h2 { font-size: 20px; }
.page-subtitle, .muted { color: var(--muted); }
.page-subtitle { max-width: 760px; margin: 9px 0 0; font-size: 15px; }
.catalog-description { max-width: none; white-space: normal; }
.page-subtitle a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255,255,255,.42); text-underline-offset: 3px; }
.page-subtitle a:hover, .page-subtitle a:focus { text-decoration-color: var(--focus-line); outline: none; }

.chinese-loading { pointer-events: none; }
.catalog-initial-loading { min-height: calc(100vh - 136px); }
.catalog-loading-heading { max-width: 100%; }
.catalog-loading-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.catalog-loading-square-card { pointer-events: none; }
.catalog-loading-card-copy { position: absolute; z-index: 2; right: 11px; bottom: 12px; left: 11px; }
.catalog-loading-card-copy > span { display: block; }
.catalog-loading-card-title { width: 72%; height: 14px; margin-bottom: 10px; }
.catalog-loading-card-meta { width: 48%; height: 9px; }
.catalog-loading-action { width: 92px; height: 40px; border: 1px solid rgba(255,255,255,.035); }
.catalog-loading-section-head { min-height: 37px; align-items: center; }
.catalog-loading-section-title { width: min(220px, 50vw); height: 28px; }
.catalog-loading-section-count { width: 76px; height: 11px; }
.catalog-loading-line-card { pointer-events: none; }
.catalog-loading-line-copy > span { display: block; }
.catalog-loading-line-card-title { width: 64%; height: 50px; margin-bottom: 20px; }
.catalog-loading-line-card-description { width: 100%; height: 13px; margin-bottom: 10px; }
.catalog-loading-line-card-description-short { width: 82%; }
.catalog-loading-line-card-fact { width: 35%; height: 30px; margin-top: 20px; }
.catalog-loading-collection-summary { min-height: 118px; }
.catalog-loading-main-metric > span { display: block; }
.catalog-loading-metric-value { width: 72%; height: 31px; margin-bottom: 9px; }
.catalog-loading-metric-label { width: 54%; height: 9px; }
.catalog-loading-rarity-icon { width: 22px; height: 22px; border-radius: 50%; }
.catalog-loading-rarity-value { width: 32px; height: 9px; }
.catalog-loading-settings-heading { display: block; width: 180px; height: 29px; margin-bottom: 16px; }
.catalog-loading-settings-copy { width: min(680px, 78%); }
.catalog-loading-settings-copy > span { display: block; }
.catalog-loading-settings-title { width: min(280px, 72%); height: 16px; margin-bottom: 10px; }
.catalog-loading-settings-description { width: 100%; height: 11px; }
.catalog-loading-settings-description-short { width: 72%; }
.catalog-loading-toggle { flex: 0 0 auto; width: 48px; height: 26px; }
.catalog-loading-source-action { width: 112px; height: 34px; }
.catalog-loading-detail-panel > span { display: block; }
.catalog-loading-detail-eyebrow { width: 72px; height: 10px; margin-bottom: 15px; }
.catalog-loading-detail-title { width: 76%; height: 45px; margin-bottom: 13px; }
.catalog-loading-detail-subtitle { width: 48%; height: 20px; margin-bottom: 27px; }
.catalog-loading-detail-row { width: 68%; height: 13px; margin-bottom: 14px; }
.catalog-loading-detail-row-short { width: 52%; }
.catalog-loading-detail-description { width: 94%; height: 52px; margin-top: 8px; }
.chinese-loading-heading { width: min(520px, 72vw); }
.chinese-loading-shimmer { position: relative; display: block; overflow: hidden; background: #171715; }
.chinese-loading-shimmer::after, .image-loading.is-loading::after { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.075) 50%, transparent 100%); content: ""; transform: translateX(-105%); animation: chinese-loading-shimmer 1.3s linear infinite; }
.image-loading { position: relative; overflow: hidden; }
.image-loading.is-loading { background: #171715; }
.image-loading > img { position: relative; z-index: 1; opacity: 1; transition: opacity .16s ease; }
.image-loading.is-loading > img { visibility: hidden; opacity: 0; }
.chinese-loading-line-title { width: 78%; height: 43px; margin-bottom: 12px; }
.chinese-loading-line-description { width: 100%; height: 14px; }
.chinese-loading-toolbar, .chinese-chroma-controls { margin-bottom: 30px; }
.chinese-loading-control { width: 100%; height: 46px; border: 1px solid rgba(255,255,255,.035); }
.chinese-loading-card { min-width: 0; border-bottom: 1px solid var(--line-soft); }
.chinese-loading-media { aspect-ratio: 13 / 20; }
.chinese-loading-copy { padding: 14px 7px 18px; }
.chinese-loading-copy span:first-child { width: 72%; height: 14px; margin-bottom: 11px; }
.chinese-loading-copy span:last-child { width: 42%; height: 10px; }
.chinese-loading-breadcrumb { width: min(290px, 60vw); height: 12px; margin-bottom: 24px; }
.chinese-loading-detail-image { aspect-ratio: 2110 / 1289; }
.chinese-loading-detail-head { padding: 20px; }
.chinese-loading-detail-title { width: 62%; height: 25px; margin-bottom: 10px; }
.chinese-loading-detail-count { width: 43%; height: 11px; }
.chinese-loading-detail-list { min-height: 0; flex: 1 1 auto; overflow: hidden; border-top: 1px solid var(--line); }
.chinese-loading-detail-row { display: grid; min-height: 108px; grid-template-columns: 58px minmax(0, 1fr) 17px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); padding: 9px 12px; }
.chinese-loading-detail-thumb { width: 58px; height: 89px; }
.chinese-loading-detail-copy span:first-child { width: 78%; height: 12px; margin-bottom: 9px; }
.chinese-loading-detail-copy span:last-child { width: 48%; height: 9px; }
.chinese-loading-detail-swatch { width: 17px; height: 17px; border-radius: 50%; }
@keyframes chinese-loading-shimmer { to { transform: translateX(105%); } }

@media (prefers-reduced-motion: reduce) {
  .chinese-loading-shimmer::after, .image-loading.is-loading::after { animation: none; }
}

.filters { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(0, 250px)); gap: 11px; margin-bottom: 30px; }
.field { position: relative; }
.field label { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }
.field input, .field select { width: 100%; height: 46px; border: 1px solid var(--line); background: var(--panel); color: var(--text); outline: none; padding: 0 14px; }
.field input { padding-right: 50px; padding-left: 59px; }
.field input[type="search"]::-webkit-search-cancel-button { display: none; appearance: none; }
.field input[type="search"]::-ms-clear { display: none; }
.field .search-icon { position: absolute; top: 7px; left: 14px; width: 32px; height: 32px; object-fit: contain; opacity: .95; }
.search-clear { position: absolute; top: 7px; right: 8px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; background: transparent; padding: 0; cursor: pointer; opacity: .68; transition: background-color .15s ease, border-color .15s ease, opacity .15s ease; }
.search-clear img { width: 20px; height: 20px; pointer-events: none; }
.search-clear:hover, .search-clear:focus { border-color: var(--focus-line); background: rgba(255,255,255,.07); outline: none; opacity: 1; }
.search-clear:active { background: rgba(255,255,255,.13); transform: translateY(1px); }
.filter-results-status { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.field input:focus, .field select:focus { border-color: var(--focus-line); }
.rarity-field { z-index: 8; min-width: 0; }
.rarity-label { display: flex; align-items: center; gap: 11px; }
.rarity-option, .rarity-option-label { display: flex; align-items: center; gap: 11px; }
.rarity-filter-icon { width: 23px; height: 23px; object-fit: contain; }
.rarity-selection-text, .sort-selection-text, .chinese-filter-selection-text, .chinese-filter-option-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rarity-selection .rarity-icon { width: 22px; height: 22px; }
.rarity-menu { position: absolute; top: calc(100% + 7px); left: 0; z-index: 40; overflow-y: auto; width: 100%; max-height: 390px; border: 1px solid var(--line); background: #1a1a18; padding: 6px 0; box-shadow: 0 16px 38px rgba(0,0,0,.55); }
.rarity-option { justify-content: space-between; width: 100%; min-height: 46px; border: 0; background: transparent; color: var(--text); padding: 7px 14px; font-size: 15px; text-align: left; cursor: pointer; }
.rarity-option:hover, .rarity-option:focus, .rarity-option.active,
.sort-option:hover, .sort-option:focus, .sort-option.active,
.chinese-filter-option:hover, .chinese-filter-option:focus, .chinese-filter-option.active { background: rgba(255,255,255,.06); outline: none; }
.rarity-icon { display: inline-block; flex: 0 0 auto; width: 25px; height: 25px; object-fit: contain; }
.rarity-icon-empty { display: inline-grid; place-items: center; color: var(--muted); font-size: 17px; }
.skin-grid, .champion-grid, .chinese-chroma-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 18px; }
.skin-card, .champion-card { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--panel); box-shadow: 0 8px 22px rgba(0,0,0,.2); transition: border-color .16s ease; }
.skin-card:hover, .skin-card:focus-visible, .champion-card:hover, .champion-card:focus-visible { border-color: var(--focus-line); outline: none; }
.card-image, .champion-card-image { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.card-image { background: #1b1b19; }
.champion-card-image { background: var(--panel); }
.card-image::after, .champion-card-image::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 32%, rgba(7,7,7,.22) 52%, rgba(7,7,7,.96) 100%); content: ''; pointer-events: none; }
.card-image img, .champion-card-image img { width: 100%; height: 100%; object-fit: cover; }
.rarity-tag { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; color: #f0ead9; font-size: 10px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.rarity-tag .rarity-icon { width: 19px; height: 19px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)); }
.sort-field { z-index: 7; min-width: 0; }
.sort-label { display: flex; min-width: 0; align-items: center; gap: 9px; }
.sort-option, .sort-option-label { display: flex; min-width: 0; align-items: center; gap: 9px; }

.sort-icon { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }
.sort-selection .sort-icon { width: 22px; height: 22px; }

.sort-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 40; width: max(100%, 220px); border: 1px solid var(--line); background: #1a1a18; padding: 6px 0; box-shadow: 0 16px 38px rgba(0,0,0,.55); }
.sort-option { justify-content: space-between; width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--text); padding: 7px 12px; font-size: 14px; text-align: left; cursor: pointer; }
.card-body, .champion-card-body { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 42px 11px 11px; text-align: left; text-shadow: 0 2px 5px rgba(0,0,0,.95); }
.card-body h2 { display: -webkit-box; overflow: hidden; margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.18; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.card-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; color: #d1cec5; font-size: 10px; }
.card-facts { display: flex; min-width: 0; align-items: center; gap: 7px; white-space: nowrap; }
.card-facts > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.card-price { color: var(--gold); font-weight: 650; }
.sentinel { height: 2px; }
.empty-state, .error-state { display: grid; min-height: 55vh; place-content: center; justify-items: center; padding: 40px; text-align: center; }
.skin-grid > .empty-state, .line-grid > .empty-state, .champion-grid > .empty-state, .chinese-chroma-grid > .empty-state { grid-column: 1 / -1; width: 100%; min-height: clamp(280px, 45vh, 520px); color: var(--muted); }
.skin-grid > .empty-state, .line-grid > .empty-state { font-size: 16px; }
.skin-grid > .empty-state p, .line-grid > .empty-state p { margin-bottom: 9px; }
.collection-header-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.collection-import-open { flex: 0 0 auto; min-height: 40px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.04); color: #fff; padding: 9px 13px; font-size: 12px; font-weight: 650; cursor: pointer; }
.collection-import-open:hover, .collection-import-open:focus-visible { border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.08); outline: none; }
.collection-import-open:disabled { opacity: .65; cursor: wait; }
.collection-empty-state { gap: 11px; }
.collection-empty-state h2 { margin: 0; color: var(--text); font-size: 20px; }
.collection-empty-exporter { color: #f2efe7; font-size: 13px; text-decoration: underline; text-decoration-color: rgba(255,255,255,.48); text-underline-offset: 4px; }
.collection-empty-exporter:hover, .collection-empty-exporter:focus-visible { color: #fff; text-decoration-color: #fff; outline: none; }
.collection-paste-fallback { overflow: auto; min-height: 48px; max-height: 110px; margin: -9px 0 28px; border: 1px solid rgba(255,255,255,.28); background: #11110f; color: #fff; padding: 13px 15px; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.collection-paste-fallback:empty::before { color: var(--muted); content: attr(data-placeholder); }
.collection-paste-fallback:focus { border-color: rgba(255,255,255,.65); }
.collection-paste-fallback.is-error { border-color: rgba(216,133,121,.7); }
.collection-summary { display: grid; overflow: hidden; grid-template-columns: minmax(210px, .9fr) minmax(330px, 1.2fr) minmax(640px, 3fr); align-items: stretch; margin: -8px 0 28px; border: 1px solid var(--line); background: #141419; }
.collection-main-metric { display: grid; min-width: 0; min-height: 132px; grid-template-rows: auto 15px 13px; align-content: center; border-right: 1px solid var(--line); padding: 20px 26px; }
.collection-price-metric { border-right: 0; }
.collection-metric-value { display: flex; min-width: 0; align-items: baseline; gap: 4px; margin: 0; white-space: nowrap; }
.collection-metric-value strong { color: #f4f1e9; font-size: clamp(28px, 2.2vw, 38px); font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.collection-metric-value span { color: #a8a5ae; font-size: 13px; font-weight: 600; }
.collection-main-metric small { align-self: end; margin: 0; color: #a9a6b0; font-size: 10px; }
.collection-main-metric em { align-self: start; margin: 0; color: #77747d; font-size: 9px; font-style: normal; }
.collection-metric-value .collection-rp-mark { flex: 0 0 auto; width: 18px; height: 18px; align-self: center; margin: 0 3px 0 2px; object-fit: contain; }
.collection-rarity-summary { display: grid; min-width: 0; grid-template-columns: repeat(8, minmax(72px, 1fr)); align-items: stretch; border-left: 1px solid var(--line); }
.collection-rarity-metric { display: grid; min-width: 0; min-height: 132px; grid-template-rows: 28px 12px 17px; align-content: center; justify-items: center; gap: 4px; padding: 14px 6px; }
.collection-rarity-metric p { margin: 0; line-height: 17px; white-space: nowrap; }
.collection-rarity-metric strong { color: #f2efe7; font-size: 13px; font-weight: 750; }
.collection-rarity-metric p span { color: #77747d; font-size: 10px; }
.collection-rarity-metric .rarity-icon { width: 26px; height: 26px; }
.collection-rarity-label { overflow: hidden; width: 100%; color: #77747d; font-size: 8px; font-weight: 700; letter-spacing: .07em; line-height: 12px; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.collection-card-status { position: absolute; top: 10px; right: 10px; z-index: 3; border: 1px solid rgba(255,255,255,.28); background: rgba(10,10,9,.82); color: #fff; padding: 4px 7px; font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.collection-skin-card.is-missing .card-image > img { filter: grayscale(1); opacity: .32; }
.collection-skin-card.is-missing .card-image::after { background: linear-gradient(180deg, rgba(5,5,5,.28), rgba(5,5,5,.96)); }
.collection-acquired { color: #e2ded3; font-weight: 600; }
.reset-filters { border: 0; background: transparent; color: var(--text); padding: 2px 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.reset-filters:hover, .reset-filters:focus { color: var(--text); outline: none; }
.error-state h1 { margin-top: 18px; }
.error-state p { max-width: 560px; color: var(--muted); }
.button { min-height: 44px; border: 1px solid var(--gold-soft); background: transparent; color: var(--text); padding: 9px 18px; cursor: pointer; }
.button:hover, .button:focus-visible { border-color: var(--focus-line); background: rgba(255,255,255,.055); outline: none; }
.error-code { color: var(--danger); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; color: var(--muted); font-size: 13px; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--text); outline: none; }
.detail-hero {
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.35fr) minmax(410px, .85fr);
  min-height: 560px;
  border: 1px solid #37352e;
  background: var(--panel);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
.detail-splash { position: relative; min-height: 560px; overflow: hidden; background: #0d0d0c; }
.detail-splash::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 65%, rgba(15,15,14,.28) 88%, rgba(15,15,14,.65)),
    linear-gradient(0deg, rgba(8,8,8,.2), transparent 36%);
  content: '';
  pointer-events: none;
}
.detail-splash img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-panel {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #37352e;
  background:
    radial-gradient(circle at 100% 0, rgba(200,170,92,.08), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 42%),
    var(--panel);
  padding: clamp(34px, 3.5vw, 58px);
}
.detail-panel-header { margin-bottom: 28px; }
.detail-panel-header .eyebrow { margin-bottom: 9px; }
.detail-panel h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(38px, 3.1vw, 54px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.detail-panel-sections {
  --detail-label: #a8a49a;
  --detail-value: #f1eee6;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  column-gap: clamp(22px, 3vw, 42px);
}
.detail-panel-section { min-width: 0; margin: 0; border-bottom: 1px solid var(--line); padding: 17px 0 18px; }
.detail-panel-label {
  margin: 0 0 6px;
  color: var(--detail-label);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .11em;
  line-height: 1.35;
  text-transform: uppercase;
}
.detail-panel-value { margin: 0; color: var(--detail-value); font-size: 15px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.detail-panel-description { grid-column: 1 / -1; border-bottom: 0; padding-top: 22px; }
.skin-detail-description { max-width: 62ch; margin: 0; color: #bbb7ad; font-size: 15px; font-weight: 400; line-height: 1.72; }
.detail-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 27px; color: var(--muted); font-size: 14px; }
.detail-facts strong { color: var(--text); }
.description { color: #c6c2b7; font-size: 15px; line-height: 1.75; }
.detail-section { margin-top: 46px; border-top: 1px solid var(--line); padding-top: 31px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font: 500 30px Georgia, serif; }

.champion-detail-hero { display: grid; min-height: 380px; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); border: 1px solid var(--line); background: var(--panel); }
.champion-detail-image { overflow: hidden; aspect-ratio: 1 / 1; border-right: 1px solid var(--line); background: #11110f; }
.champion-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.champion-detail-panel { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 58px); }
.champion-detail-panel h1 { margin-bottom: 10px; }
.champion-detail-title { margin: 0 0 24px; color: #c9c6bd; font: 500 clamp(18px, 2vw, 25px)/1.3 Georgia, serif; }
.champion-detail-facts { margin-bottom: 0; }

.chroma-layout { display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; }
.chroma-feature { display: grid; overflow: hidden; min-width: 0; min-height: 280px; grid-column: 1 / -1; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); border: 1px solid var(--line); background: linear-gradient(135deg, #171715, #111110); }
.chroma-preview { display: grid; min-height: 280px; place-items: center; border-right: 1px solid var(--line); background: #10100f; }
.chroma-preview img { width: 80%; height: 80%; object-fit: contain; }
.chroma-info { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 54px); }
.chroma-info h3 { margin: 0 0 10px; color: var(--text); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.chroma-description { overflow: hidden; max-width: 100%; margin: 0; color: #b6b2a8; font-size: 14px; line-height: 1.65; text-overflow: ellipsis; white-space: nowrap; }
.chroma-grid { min-width: 0; }
.generated-chroma-card { display: grid; min-width: 0; aspect-ratio: 5 / 6; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 9px; border: 1px solid rgba(255,255,255,.09); background: #111; color: var(--interaction-white); padding: 12px; text-align: left; cursor: pointer; }
.generated-chroma-card:focus-visible { border-color: var(--focus-line); outline: none; }
.generated-chroma-card.is-selected { border-color: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.generated-chroma-card-media { display: grid; overflow: hidden; min-height: 0; place-items: center; border: 1px solid rgba(255,255,255,.07); background: #080808; padding: 8px; }
.generated-chroma-card-media img { width: 100%; height: 100%; object-fit: contain; }
.generated-chroma-card-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.generated-chroma-card-meta strong { overflow: hidden; min-width: 0; color: var(--interaction-white); font-size: 12px; font-weight: 850; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.generated-chroma-swatches { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 4px; }
.generated-chroma-swatch { display: block; flex: 0 0 22px; width: 22px; height: 22px; border: 3px solid #1a1a1a; background: var(--chroma-color, #777); box-shadow: 0 0 0 1px rgba(255,255,255,.22); }

.skinline-detail-page-head .catalog-description { max-width: 960px; white-space: normal; }
.line-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.line-card { position: relative; display: grid; overflow: hidden; min-width: 0; min-height: clamp(390px, 30vw, 480px); grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); border: 1px solid var(--line); background: var(--panel); box-shadow: 0 12px 32px rgba(0,0,0,.22); content-visibility: auto; contain-intrinsic-size: auto 450px; transition: border-color .16s ease, box-shadow .16s ease; }
.line-card:hover, .line-card:focus-visible { border-color: var(--focus-line); box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08); outline: none; }
.line-card-media { position: relative; display: block; overflow: hidden; min-width: 0; background: #10100f; }
.line-card-media::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(16,16,15,.34) 70%, #151513 100%), linear-gradient(0deg, rgba(8,8,8,.25), transparent 38%); content: ''; pointer-events: none; }
.line-card-media > img, .line-card-media > .image-fallback { width: 100%; height: 100%; object-fit: cover; }
.line-card-count { position: absolute; z-index: 1; top: 20px; left: 20px; border: 1px solid rgba(255,255,255,.17); background: rgba(12,12,11,.82); color: var(--text); padding: 6px 11px; font-size: 12px; font-weight: 750; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.line-card-content { display: flex; min-width: 0; flex-direction: column; justify-content: center; background: linear-gradient(135deg, #171715, #121513); padding: clamp(30px, 4vw, 58px); }
.line-card h2 { max-width: 18ch; margin: 0 0 13px; font: 800 clamp(34px, 3.2vw, 54px)/1.02 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.045em; overflow-wrap: anywhere; }
.line-card-description { display: block; max-width: 58ch; margin: 0; color: #b7b4aa; font-size: 14px; line-height: 1.65; }
.line-card-facts { margin: 24px 0 0; }
.line-card-fact { min-width: 0; }
.line-card-fact dt { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.line-card-fact dd { margin: 4px 0 0; color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.35; }
.filters.champion-filters .champion-role-filter .chinese-filter-menu, .filters.champion-filters .champion-position-filter .chinese-filter-menu { right: 0; left: auto; width: 100%; min-width: 0; }
.filters.skinline-filters { grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(0, 250px)); }
.champion-card h2 { display: -webkit-box; overflow: hidden; margin: 0 0 3px; font-size: 15px; font-weight: 700; line-height: 1.15; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.champion-card-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; }
.champion-roles { display: flex; min-width: 0; align-items: center; overflow: hidden; color: #dedbd2; font-size: 10px; white-space: nowrap; }
.champion-roles span { overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.champion-roles span + span::before { margin: 0 4px; color: #aaa69b; content: '·'; }
.champion-skin-count { flex: 0 0 auto; margin: 0; color: var(--gold); font-size: 10px; font-weight: 650; white-space: nowrap; }

.chinese-chroma-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(0, 250px)); gap: 11px; }
.chinese-chroma-search { min-width: 0; }
.chinese-filter-field { min-width: 0; }
.chinese-filter-field:nth-child(2) { z-index: 9; }
.chinese-filter-field:nth-child(3) { z-index: 8; }
.chinese-chroma-toolbar .sort-field { z-index: 7; }
.chinese-filter-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 40; overflow: hidden; width: 100%; border: 1px solid var(--line); background: #1a1a18; box-shadow: 0 16px 38px rgba(0,0,0,.55); }
.chinese-filter-field:nth-child(2) .chinese-filter-menu { right: auto; left: 0; width: 100%; }
.skin-champion-filter, .skinline-champion-filter { z-index: 9; }
.skin-champion-filter .chinese-filter-menu { right: 0; left: auto; width: 100%; }
.skinline-champion-filter.chinese-filter-field .chinese-filter-menu { right: 0; left: auto; width: 100%; min-width: 0; }
.chinese-filter-options { overflow-y: auto; max-height: 342px; padding: 6px 0; }
.chinese-filter-search { position: relative; border-bottom: 1px solid var(--line); background: #20201e; }
.field .chinese-filter-search-input { height: 47px; border: 0; background: transparent; padding: 0 13px 0 44px; }
.field .chinese-filter-search-input:focus { border: 0; box-shadow: inset 0 -1px var(--focus-line); }
.chinese-filter-search-icon { position: absolute; top: 13px; left: 14px; width: 20px; height: 20px; object-fit: contain; pointer-events: none; opacity: .9; }
.chinese-filter-empty { margin: 0; padding: 18px 14px 20px; color: var(--muted); font-size: 13px; text-align: center; }
.chinese-filter-option { display: flex; width: 100%; min-height: 47px; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: var(--text); padding: 7px 12px; font-size: 14px; text-align: left; cursor: pointer; }
.chinese-filter-option-label { display: flex; min-width: 0; align-items: center; gap: 10px; }
.chinese-filter-champion-image { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #10100f; object-fit: cover; }
.chinese-filter-selection .chinese-filter-champion-image { width: 24px; height: 24px; }
.rarity-check, .chinese-filter-check, .sort-check { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; opacity: 0; }
.rarity-option.active .rarity-check, .chinese-filter-option.active .chinese-filter-check, .sort-option.active .sort-check { opacity: 1; }
.catalog-filter { min-width: 0; }
.filters > .catalog-filter:not(:first-child), .chinese-chroma-toolbar > .catalog-filter:not(:first-child) { width: 100%; max-width: 250px; }
.catalog-filter-control { width: 100%; height: 46px; }
.catalog-filter-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 0 13px; cursor: pointer; }
.catalog-filter-trigger:hover, .catalog-filter-trigger:focus, .catalog-filter-trigger[aria-expanded="true"] { border-color: var(--focus-line); outline: none; }
.catalog-filter-label { flex: 0 0 auto; font-size: 15px; font-weight: 650; }
.catalog-filter-selection { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 9px; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; }
.catalog-filter-menu { width: 100%; min-width: 0; }
.catalog-filter-option { min-height: 46px; padding: 7px 13px; font-size: 14px; }
.catalog-filter-option-icon { flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; }
.catalog-filter-selection .catalog-filter-option-icon { width: 22px; height: 22px; }
.chroma-color-circle { display: inline-block; flex: 0 0 auto; width: 19px; height: 19px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.45); }
.chinese-chroma-card { min-width: 0; border-bottom: 1px solid var(--line-soft); transition: background-color .16s ease, border-color .16s ease; }
.chinese-chroma-card:hover, .chinese-chroma-card:focus { border-color: var(--focus-line); background: rgba(255,255,255,.028); outline: none; }
.chinese-chroma-image { overflow: hidden; aspect-ratio: 13 / 20; background: var(--panel); }
.chinese-chroma-image img { width: 100%; height: 100%; object-fit: contain; transition: filter .2s ease; }
.chinese-chroma-card:hover .chinese-chroma-image img { filter: brightness(1.045); }
.chinese-chroma-body { min-height: 100px; padding: 13px 7px 14px; }
.chinese-chroma-body h2 { display: -webkit-box; overflow: hidden; margin: 0 0 7px; font-size: 15px; font-weight: 600; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.chinese-chroma-body p { margin: 0; color: var(--muted); font-size: 12px; }
.chinese-chroma-meta { display: flex; align-items: center; gap: 8px; }
.chinese-chroma-meta .chroma-color-circle { width: 16px; height: 16px; }

.chinese-chroma-detail-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); align-items: stretch; gap: 24px; }
.chinese-chroma-detail { min-width: 0; width: 100%; overflow: hidden; aspect-ratio: 2110 / 1289; border: 1px solid var(--line); background: var(--panel); }
.chinese-chroma-detail-image { background: #11110f; }
.chinese-chroma-detail-image img { width: 100%; height: 100%; object-fit: contain; }
.champion-chroma-selector-slot { position: relative; min-width: 0; min-height: 0; }
.champion-chroma-selector { position: absolute; inset: 0; display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--line); background: var(--panel); }
.champion-chroma-selector > h2 { margin: 0; padding: 20px 20px 3px; font: 500 24px Georgia, serif; }
.champion-chroma-count { margin: 0; padding: 0 20px 17px; color: var(--muted); font-size: 12px; }
.champion-chroma-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; border-top: 1px solid var(--line); }
.champion-chroma-option { display: grid; grid-template-columns: 58px minmax(0, 1fr) 18px; min-height: 108px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); padding: 9px 12px; color: var(--muted); }
.champion-chroma-option:hover, .champion-chroma-option:focus { background: var(--panel-2); color: var(--text); outline: none; }
.champion-chroma-option.active { border-left: 2px solid var(--focus-line); background: rgba(255,255,255,.065); color: var(--text); padding-left: 10px; }
.champion-chroma-option-image { display: grid; width: 58px; height: 89px; place-items: center; }
.champion-chroma-option-image img { width: 100%; height: 100%; object-fit: contain; }
.champion-chroma-option > span { min-width: 0; }
.champion-chroma-option strong, .champion-chroma-option small { display: block; }
.champion-chroma-option strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.champion-chroma-option small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.champion-chroma-option .chroma-color-circle { width: 17px; height: 17px; }

.settings-page-head { width: 100%; max-width: 980px; margin-inline: auto; justify-content: center; text-align: center; }
.settings-page-head .page-subtitle { margin-inline: auto; }
.settings-section { width: 100%; max-width: 980px; margin-inline: auto; }
.settings-section + .settings-section { margin-top: 62px; }
.settings-section-title { margin: 0 0 16px; font: 500 27px Georgia, serif; }
.settings-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 16px; }
.settings-section-heading .settings-section-title { margin-bottom: 0; }
.settings-section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-list, .data-source-list { border-top: 1px solid var(--line); }
.setting-row { display: flex; min-height: 112px; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); padding: 22px 4px; }
.setting-row h2 { margin: 0 0 5px; font-size: 16px; }
.setting-row p { margin: 0; color: var(--muted); font-size: 14px; }
.setting-toggle { position: relative; flex: 0 0 auto; width: 48px; height: 26px; border: 1px solid #45433c; background: #1a1a18; padding: 0; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.setting-toggle::before { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background: #77746c; content: ''; transition: transform .18s ease, background-color .18s ease; }
.setting-toggle[aria-pressed="true"] { border-color: rgba(198,166,86,.7); background: rgba(198,166,86,.14); }
.setting-toggle[aria-pressed="true"]::before { background: var(--gold); transform: translateX(22px); }
.setting-toggle:hover, .setting-toggle:focus-visible { border-color: var(--focus-line); outline: none; }
.data-source-row { display: grid; min-height: 96px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); padding: 18px 4px; }
.data-source-text { min-width: 0; }
.data-source-text strong, .data-source-text small { display: block; }
.data-source-text strong { margin-bottom: 5px; color: var(--text); font-size: 17px; font-weight: 600; }
.data-source-text small { color: var(--muted); font-size: 13px; }
.data-source-action { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.035); color: #fff !important; font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; transition: border-color .15s ease, background-color .15s ease; }
.external-arrow { display: grid; width: 15px; height: 15px; place-items: center; color: #fff; font-size: 13px; line-height: 1; }
.data-source-action:hover, .data-source-action:focus-visible { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.075); color: #fff !important; outline: none; }

.image-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: #65635c; font-size: 11px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}