.catalog-controls { padding: 14px; }
.catalog-toolbar { display: flex; align-items: center; gap: 9px; }
.catalog-toolbar input { flex: 1 1 320px; min-width: 180px; }
.catalog-toolbar-actions { display: flex; gap: 7px; margin-left: auto; }
.filter-list { display: grid; gap: 10px; margin-top: 13px; }
.filter-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; }
.filter-label { padding-top: 7px; color: var(--muted); font-size: 12px; }
.filter-buttons, .layout-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-button, .layout-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px; color: var(--muted); }
.filter-button img { width: 18px; height: 18px; object-fit: contain; }
.filter-button.active, .layout-button.active { border-color: var(--gold); background: rgba(214, 179, 106, .13); color: var(--text); }
.filter-button.filter-all { color: #ddd8ce; border-color: #555b66; }
.filter-button.filter-all.active { border-color: #d8d0c1; background: rgba(216, 208, 193, .13); color: #fff; }
.filter-button.type-0 { color: var(--magic); border-color: color-mix(in srgb, var(--magic) 48%, var(--line)); }
.filter-button.type-0.active { background: rgba(121, 169, 244, .18); color: #b9d4ff; }
.filter-button.type-1 { color: var(--plague); border-color: color-mix(in srgb, var(--plague) 48%, var(--line)); }
.filter-button.type-1.active { background: rgba(187, 131, 220, .18); color: #dfb8f2; }
.filter-button.type-2 { color: #dc9999; border-color: #7a5053; }
.filter-button.type-2.active { background: rgba(210, 115, 120, .18); color: #f1b3b6; }
.filter-button.type-3, .filter-button.rarity-unique { color: var(--gold); border-color: #77643c; }
.filter-button.type-3.active, .filter-button.rarity-unique.active { background: rgba(214, 179, 106, .18); color: #f1cf86; }
.filter-button.type-4 { color: #8fc8a1; border-color: #4e715a; }
.filter-button.type-4.active { background: rgba(143, 200, 161, .17); color: #b7dfc3; }
.filter-button.rarity-normal { color: #9ebbe8; border-color: #4f607a; }
.filter-button.rarity-normal.active { background: rgba(121, 155, 211, .17); color: #c5d8f5; }
.filter-button.damage-0 { --filter-accent: #9ca2ac; }
.filter-button.damage-1 { --filter-accent: #dc777d; }
.filter-button.damage-4 { --filter-accent: var(--fire); }
.filter-button.damage-5 { --filter-accent: var(--ice); }
.filter-button.damage-6 { --filter-accent: var(--lightning); }
.filter-button.damage-7 { --filter-accent: var(--plague); }
.filter-button.damage-9 { --filter-accent: var(--physical); }
.filter-button[class*="damage-"] { color: var(--filter-accent); border-color: color-mix(in srgb, var(--filter-accent) 48%, var(--line)); }
.filter-button[class*="damage-"].active { background: color-mix(in srgb, var(--filter-accent) 18%, transparent); color: color-mix(in srgb, var(--filter-accent) 78%, white); }
.filter-button.item-kind-generic { --filter-accent: #c1b58f; }
.filter-button.item-kind-food { --filter-accent: #8fc78f; }
.filter-button.item-kind-quick { --filter-accent: #78b6d8; }
.filter-button.item-kind-throwable { --filter-accent: #dc8a70; }
.filter-button.item-kind-tool { --filter-accent: #b8a17a; }
.filter-button.item-kind-ember { --filter-accent: #df9b55; }
.filter-button.item-kind-fuel { --filter-accent: #d7c064; }
.filter-button.item-kind-housing { --filter-accent: #b58ac8; }
.filter-button[class*="item-kind-"] { color: var(--filter-accent); border-color: color-mix(in srgb, var(--filter-accent) 48%, var(--line)); }
.filter-button[class*="item-kind-"].active { background: color-mix(in srgb, var(--filter-accent) 18%, transparent); color: color-mix(in srgb, var(--filter-accent) 78%, white); }
.layout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.layout-toolbar .muted { font-size: 12px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.rune-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.item-card:hover { border-color: #605842; }
.game-item-card {
  position: relative;
  isolation: isolate;
  border-color: #5d5138;
  background:
    linear-gradient(112deg, rgba(158, 112, 40, .16), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(214, 179, 106, .12), transparent 32%),
    linear-gradient(180deg, #1b1916, #111317 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, .025), 0 16px 36px rgba(0, 0, 0, .18);
}
.game-item-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(135deg, transparent 0 38px, rgba(214, 179, 106, .018) 39px 40px);
  pointer-events: none;
}
.game-item-card:hover { border-color: #927743; box-shadow: inset 0 0 0 1px rgba(255, 224, 160, .04), 0 20px 44px rgba(0, 0, 0, .28); }
.unique-item-card { border-color: #94743a; background: linear-gradient(112deg, rgba(190, 130, 35, .24), transparent 45%), radial-gradient(circle at 86% 12%, rgba(236, 197, 101, .16), transparent 34%), linear-gradient(180deg, #201b14, #111317 72%); }
.item-head { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 15px; padding: 17px 17px 12px; align-items: start; }
.item-icon-shell { position: relative; width: 82px; height: 82px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle, #30343d, #171a1f 72%); overflow: hidden; }
.item-icon { width: 76px; height: 76px; object-fit: contain; }
.item-icon-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #746f65; font-size: 11px; text-align: center; }
.item-title { margin: 1px 0 6px; font-size: 19px; line-height: 1.25; font-weight: 580; }
.item-subtitle { color: var(--muted); font-size: 12px; line-height: 1.3; }
.meta-row, .chip-list, .link-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.meta-row { margin-top: 9px; }
.chip, .slot-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: #d8d5cd; font-size: 11px; }
.chip.unique { border-color: #9b7a3d; color: #e3c37b; }
.badge { display: inline-flex; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.type-0 { color: var(--magic); background: rgba(121, 169, 244, .08); }
.type-1 { color: var(--plague); background: rgba(187, 131, 220, .08); }
.type-2 { color: #d29b9b; background: rgba(210, 155, 155, .08); }
.type-3 { color: var(--gold); background: rgba(214, 179, 106, .08); }
.type-4 { color: #8fc8a1; background: rgba(143, 200, 161, .08); }
.weapon-profile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 17px 12px; border: 1px solid rgba(190, 156, 84, .25); border-radius: 7px; background: rgba(190, 156, 84, .16); overflow: hidden; }
.weapon-profile > div { min-width: 0; padding: 8px 9px; background: rgba(17, 19, 23, .9); }
.weapon-profile span, .weapon-profile strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weapon-profile span { margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.weapon-profile strong { color: #e9dfc8; font-size: 12px; font-weight: 560; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 17px 14px; }
.stat-cell { min-width: 0; padding: 8px 9px; border-radius: 7px; background: var(--surface-2); }
.stat-cell span { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-cell strong { display: block; margin-top: 1px; color: #f0e5cb; font-size: 15px; font-weight: 560; font-variant-numeric: tabular-nums; }
.item-extra { padding: 0 17px 16px; }
.related-line { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.related-line strong { color: var(--text); }
.item-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #5d5138; border-radius: 6px; background: rgba(214, 179, 106, .08); color: #e1c17f; text-decoration: none; font-size: 12px; }
.intrinsic-skills { margin-top: 8px; }
.intrinsic-skill-link { padding: 3px 7px 3px 4px; }
.intrinsic-skill-link img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.table-item .intrinsic-skills { margin: 5px 0 0; }
.table-item .intrinsic-skills > span { display: none; }
.table-item .intrinsic-skill-link { font-size: 11px; }
.fixed-enchantments { display: grid; gap: 7px; margin-top: 10px; }
.fixed-enchantment { padding: 8px 9px; border-left: 2px solid #745f35; border-radius: 0 6px 6px 0; background: rgba(214, 179, 106, .055); font-size: 12px; }
.fixed-enchantment .badge { margin-right: 7px; }
.trait-effect { display: block; margin-top: 3px; color: #e5d8ba; }
.item-details { border-top: 1px solid var(--line); }
.item-details summary { padding: 10px 17px; color: var(--muted); cursor: pointer; font-size: 12px; }
.item-description { padding: 0 17px 16px; color: #d3d0c9; font-size: 13px; }
.rune-description { padding: 0 17px 14px; color: #d5d1c8; font-size: 13px; }
.rune-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 0 17px 14px; }
.item-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 17px 14px; }
.metric { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.metric span { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric strong { display: block; margin-top: 2px; font-size: 15px; font-weight: 570; font-variant-numeric: tabular-nums; }
.metric.primary { border-color: #6b5c3b; background: rgba(214, 179, 106, .08); }
.metric.primary strong { color: var(--gold); }
.breakdown { margin: 0 17px 14px; padding: 10px 11px; border-left: 2px solid #62583f; background: rgba(214, 179, 106, .045); color: var(--muted); font-size: 12px; }
.catalog-table-wrap { overflow: auto; }
.catalog-table { width: 100%; min-width: 980px; border-collapse: collapse; }
.catalog-table th, .catalog-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.catalog-table th { padding: 0; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 560; }
.catalog-table tbody tr:last-child td { border-bottom: 0; }
.catalog-table tbody tr:hover { background: rgba(255, 255, 255, .018); }
.sort-button { width: 100%; padding: 11px 12px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; white-space: nowrap; }
.sort-button::after { content: "↕"; margin-left: 6px; color: #676b73; }
.sort-button[data-direction="asc"]::after { content: "↑"; color: var(--gold); }
.sort-button[data-direction="desc"]::after { content: "↓"; color: var(--gold); }
.table-item { display: grid; grid-template-columns: 48px minmax(150px, 1fr); gap: 10px; align-items: center; }
.table-item .item-icon-shell { width: 48px; height: 48px; border-radius: 7px; }
.table-item .item-icon { width: 44px; height: 44px; }
.table-title { font-weight: 580; }
.table-subtitle { color: var(--muted); font-size: 11px; }
.table-stat-list { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 240px; font-size: 12px; }
.table-stat-list strong { color: #eee2c8; font-weight: 560; }
.table-stat-value { min-width: 88px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-stat-value strong { color: #eee2c8; font-weight: 560; }
.table-related { min-width: 230px; font-size: 12px; }
.table-empty, .catalog-empty { padding: 42px !important; color: var(--muted); text-align: center; }
.enchant-card { padding: 16px; }
.enchant-card .effect { margin-top: 13px; }
.source-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.source-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; text-decoration: none; font-size: 10px; line-height: 1.35; }
.source-random { color: #c8d2df; border-color: #556171; background: rgba(112, 139, 173, .08); }
.source-equipment { color: #e2bf74; border-color: #786235; background: rgba(214, 179, 106, .08); }
.source-gem { color: #bba2e9; border-color: #675687; background: rgba(155, 123, 216, .1); }
.filter-button.source-random { color: #b9c7d8; border-color: #556171; }
.filter-button.source-equipment { color: #e2bf74; border-color: #786235; }
.filter-button.source-gem { color: #c1a9ef; border-color: #675687; }
.filter-button.source-random.active { background: rgba(112, 139, 173, .18); }
.filter-button.source-equipment.active { background: rgba(214, 179, 106, .18); }
.filter-button.source-gem.active { background: rgba(155, 123, 216, .2); }
.effect b { color: #fff; font-weight: 580; }
.effect-icon { width: 26px; height: 26px; object-fit: contain; }
.category-label { display: inline-flex; align-items: center; gap: 6px; }
.category-label img { width: 20px; height: 20px; object-fit: contain; }
.gem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gem-card { border-color: #615079; }
.gem-effects { display: grid; gap: 1px; padding: 0 16px 16px; }
.gem-effect { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding: 7px 8px; border-top: 1px solid rgba(119, 103, 79, .35); font-size: 12px; }
.gem-effect > span { color: var(--muted); }
.gem-effect-value { color: #eee2ca; outline: none; }
.gem-effect-value:hover, .gem-effect-value:focus-visible { color: var(--gold); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.gem-effect-table { min-width: 430px; }
.gem-effect-table .gem-effect { grid-template-columns: 72px minmax(260px, 1fr); padding: 5px 0; }
.catalog-item-description { margin: 0 17px 14px; padding: 11px 12px; border-left: 2px solid #73633e; border-radius: 0 7px 7px 0; background: rgba(214, 179, 106, .05); color: #d4cfc2; font-size: 12px; line-height: 1.55; }
.recipe-block > strong { display: block; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 500; }
.recipe-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ingredient-link { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 7px 3px 4px; border: 1px solid #514a3b; border-radius: 6px; background: rgba(214, 179, 106, .055); color: #dbc58f; text-decoration: none; font-size: 11px; }
.ingredient-link img { width: 24px; height: 24px; object-fit: contain; }
.ingredient-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-link strong { margin-left: 2px; color: #eee0bb; font-variant-numeric: tabular-nums; }
.table-related .recipe-list { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); }
.table-related .ingredient-link { width: 100%; }
.table-recipe summary { width: max-content; color: var(--gold); cursor: pointer; }
.table-recipe[open] summary { margin-bottom: 7px; }
.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.catalog-pagination button { width: 38px; height: 34px; padding: 0; color: var(--gold); }
.catalog-pagination button:disabled { opacity: .35; cursor: default; }
.entity-preview {
  position: fixed;
  z-index: 120;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #856d3d;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(43, 37, 27, .98), rgba(15, 17, 21, .99));
  box-shadow: 0 22px 58px rgba(0,0,0,.65), inset 0 0 28px rgba(214,179,106,.055);
  pointer-events: auto;
  scrollbar-color: #79643b #17191d;
  scrollbar-width: thin;
}
.entity-preview-head { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 11px; align-items: center; }
.entity-preview-head img, .entity-preview-placeholder { width: 64px; height: 64px; object-fit: contain; border: 1px solid #554a36; border-radius: 6px; background: radial-gradient(circle, #30343d, #171a1f 72%); }
.entity-preview-placeholder { display: grid; place-items: center; color: var(--muted); }
.entity-preview-head strong { display: block; color: #f2dfb8; font-size: 17px; line-height: 1.2; }
.entity-preview-head small { display: block; margin-top: 4px; color: var(--muted); }
.entity-preview-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.entity-preview-meta span { padding: 3px 6px; border: 1px solid #4b4a46; border-radius: 4px; color: #d6d1c7; font-size: 10px; }
.entity-preview-effect, .entity-preview-description { margin-top: 11px; padding-top: 10px; border-top: 1px solid #4d4638; color: #d7d1c7; font-size: 12px; }
.entity-preview-content { display: grid; gap: 7px; margin-top: 11px; }
.entity-preview-section { padding-top: 8px; border-top: 1px solid #4d4638; }
.entity-preview-section > h3 { margin: 0 0 6px; color: #cdbb91; font-size: 10px; font-weight: 620; letter-spacing: .06em; text-transform: uppercase; }
.entity-preview-grid, .entity-preview-stat-grid { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 5px; }
.entity-preview-field, .entity-preview-stat { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; padding: 0; white-space: nowrap; }
.entity-preview-field span, .entity-preview-stat span { color: var(--muted); font-size: 9px; }
.entity-preview-field strong, .entity-preview-stat strong { color: #eee2c7; font-size: 11px; font-weight: 580; }
.entity-preview-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.entity-preview-chips span { padding: 4px 7px; border: 1px solid #4b4a46; border-radius: 999px; background: rgba(8, 10, 13, .28); color: #ddd5c5; font-size: 10px; }
.entity-preview-richtext { color: #d8d2c6; font-size: 12px; line-height: 1.55; }
.entity-preview-related-list { display: grid; }
.entity-preview-related { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 6px 0; }
.entity-preview-related + .entity-preview-related { border-top: 1px solid rgba(116, 104, 78, .22); }
.entity-preview-related img, .entity-preview-related-placeholder { width: 38px; height: 38px; object-fit: contain; border-radius: 5px; background: radial-gradient(circle, #30343d, #171a1f 72%); }
.entity-preview-related-placeholder { display: grid; place-items: center; color: var(--muted); }
.entity-preview-related strong, .entity-preview-related small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-preview-related strong { color: #eadbbd; font-size: 11px; font-weight: 590; }
.entity-preview-related small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.entity-preview-related b { padding-right: 3px; color: #eedcae; font-size: 11px; font-weight: 600; }
.entity-preview-rune-summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 5px 0; }
.entity-preview-rune-summary.no-icon { grid-template-columns: minmax(0, 1fr) auto; }
.entity-preview-rune-summary + .entity-preview-rune-summary { border-top: 1px solid rgba(116, 104, 78, .22); }
.entity-preview-rune-summary > img { width: 38px; height: 38px; object-fit: contain; }
.entity-preview-rune-name { min-width: 0; }
.entity-preview-rune-name strong, .entity-preview-rune-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-preview-rune-name strong { color: #f0deb7; font-size: 11px; }
.entity-preview-rune-name small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.entity-preview-rune-facts { display: flex; align-items: center; justify-content: flex-end; color: #d8cfbc; font-size: 9px; white-space: nowrap; }
.entity-preview-rune-facts span + span::before { content: "·"; margin: 0 6px; color: #776c57; }
.entity-preview-breakdown { color: #d7d0c1; font-size: 11px; line-height: 1.45; }
.entity-preview-breakdown small { display: block; margin-top: 5px; color: var(--muted); }
.entity-preview-enchantment { padding: 3px 0 1px; }
.entity-preview-enchantment + .entity-preview-enchantment { margin-top: 8px; padding-top: 9px; border-top: 1px solid rgba(116, 104, 78, .24); }
.entity-preview-enchantment .entity-preview-effect { display: flex; align-items: flex-start; gap: 7px; margin-top: 0; padding-top: 0; border-top: 0; font-size: 11px; line-height: 1.45; }
.entity-preview-enchantment .entity-preview-effect img { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.entity-preview-effect-copy { min-width: 0; }
.entity-preview-socket-effects { display: grid; }
.entity-preview-socket-effect { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
.entity-preview-socket-effect + .entity-preview-socket-effect { border-top: 1px solid rgba(116, 104, 78, .22); }
.entity-preview-socket-effect span { color: var(--muted); font-size: 10px; }
.entity-preview-socket-effect strong { color: #e6dcc6; font-size: 11px; font-weight: 520; line-height: 1.4; }
.help-row { display: flex; align-items: center; gap: 7px; }
.catalog-table th .help-row { padding-right: 8px; }
.catalog-table th .help-row .sort-button { flex: 1; }
.help-button { width: 22px; height: 22px; padding: 0; border-radius: 50%; color: var(--gold); font-size: 12px; }
.help-dialog { width: min(500px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0, 0, 0, .6); }
.help-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.help-dialog form { padding: 22px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.home-card {
  --page-accent: var(--gold);
  position: relative;
  isolation: isolate;
  display: flex;
  grid-column: span 4;
  min-height: 228px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--page-accent) 30%, var(--line));
  border-radius: 16px;
  background: var(--surface);
  background: linear-gradient(118deg, color-mix(in srgb, var(--page-accent) 12%, var(--surface)) 0%, var(--surface) 54%, color-mix(in srgb, var(--page-accent) 6%, var(--surface)) 100%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.home-card-wide { grid-column: span 6; min-height: 254px; }
.home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 82% 44%, color-mix(in srgb, var(--page-accent) 20%, transparent), transparent 43%);
  opacity: .8;
}
.home-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--page-accent), transparent);
  opacity: .7;
}
.home-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--page-accent) 66%, var(--line)); box-shadow: 0 24px 62px rgba(0, 0, 0, .25); }
.home-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(74%, 34rem); min-height: 100%; }
.home-card h2 { margin-bottom: 10px; font-size: clamp(25px, 2.6vw, 36px); line-height: 1.18; }
.home-card p { max-width: 34rem; margin-bottom: 0; color: color-mix(in srgb, var(--page-accent) 18%, var(--muted)); font-size: 14px; }
.home-card-action { display: inline-flex; align-items: center; gap: 10px; width: max-content; margin-top: auto; padding-top: 26px; color: color-mix(in srgb, var(--page-accent) 74%, white); font-size: 13px; letter-spacing: .04em; }
.home-card-action span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid color-mix(in srgb, var(--page-accent) 52%, transparent); border-radius: 50%; transition: transform .22s ease, background .22s ease; }
.home-card:hover .home-card-action span { transform: translate(2px, -2px); background: color-mix(in srgb, var(--page-accent) 15%, transparent); }
.home-card-art { position: absolute; z-index: 1; top: 50%; right: clamp(-10px, 1vw, 18px); width: clamp(132px, 15vw, 210px); height: clamp(132px, 15vw, 210px); object-fit: contain; transform: translateY(-50%) rotate(-5deg); opacity: .17; filter: saturate(.72) contrast(1.08) drop-shadow(0 20px 34px color-mix(in srgb, var(--page-accent) 38%, transparent)); transition: transform .3s ease, opacity .3s ease; }
.home-card:hover .home-card-art { transform: translateY(-50%) rotate(-2deg) scale(1.06); opacity: .25; }
.home-card-enchants, .hero-enchants { --page-accent: #a89adf; }
.home-card-weapons, .hero-weapons { --page-accent: #dc9a70; }
.home-card-armor, .hero-armor { --page-accent: #c8b178; }
.home-card-shields, .hero-shields { --page-accent: #8faabd; }
.home-card-trinkets, .hero-trinkets { --page-accent: #bd8fc9; }
.home-card-runes, .hero-runes { --page-accent: #d3bd67; }
.home-card-items, .hero-items { --page-accent: #c49a62; }
.home-card-durability, .hero-durability { --page-accent: #83b894; }
.calc-grid { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); gap: 16px; }
.calc-panel { padding: 20px; }
.calc-field { margin-bottom: 14px; }
.calc-field label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.calc-field input { width: 100%; }
.calc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.formula { margin-top: 16px; padding: 16px; }
.formula code { color: var(--gold); }
.game-fire { color: var(--fire); }
.game-ice { color: var(--ice); }
.game-lightning { color: var(--lightning); }
.game-plague { color: var(--plague); }
.game-physical { color: var(--physical); }
.game-bleed { color: #dc777d; }
@media (max-width: 1120px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-card, .home-card-wide { grid-column: span 1; min-height: 224px; }
  .home-card-durability { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .catalog-toolbar, .layout-toolbar { align-items: stretch; flex-direction: column; }
  .catalog-toolbar-actions { margin-left: 0; }
  .filter-row { grid-template-columns: 1fr; gap: 4px; }
  .filter-label { padding-top: 0; }
  .catalog-grid, .rune-grid, .home-grid, .calc-grid { grid-template-columns: 1fr; }
  .home-card, .home-card-wide, .home-card-durability { grid-column: span 1; min-height: 190px; }
  .home-card-content { width: 76%; }
  .home-card-art { right: -10px; width: 145px; height: 145px; }
  .rune-metrics, .item-metrics, .calc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .item-head { grid-template-columns: 66px minmax(0, 1fr); }
  .item-icon-shell { width: 66px; height: 66px; }
  .item-icon { width: 62px; height: 62px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .entity-preview-rune-summary { grid-template-columns: 32px minmax(0, 1fr); }
  .entity-preview-rune-summary.no-icon { grid-template-columns: 1fr; }
  .entity-preview-rune-summary > img { width: 32px; height: 32px; }
  .entity-preview-rune-facts { grid-column: 2; justify-content: flex-start; }
  .entity-preview-rune-summary.no-icon .entity-preview-rune-facts { grid-column: 1; }
}