.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); }
.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; }
.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); }
.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; }
.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; }
.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; }
.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; }
.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-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); }
@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, .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; }
}