.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; }

/* Build planner */
.planner-hero,
.planner-actions,
.planner-grid,
.planner-utility,
.planner-dialog { font-family: var(--font-ui); }
.planner-hero {
  --page-accent: #c49459;
  min-height: 224px;
  padding-block: clamp(30px, 4vw, 48px);
  border-color: color-mix(in srgb, var(--page-accent) 46%, var(--line));
  background:
    radial-gradient(circle at 86% 28%, rgba(226, 183, 97, .16), transparent 22rem),
    linear-gradient(118deg, #211d17 0%, #15181d 49%, #181713 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 232, 183, .05);
}
.planner-hero::before { background: radial-gradient(circle at 81% 58%, rgba(196, 148, 89, .22), transparent 38%); }
.planner-hero::after { width: 58%; background: linear-gradient(90deg, #e2b96b, rgba(196, 148, 89, .12), transparent); }
.planner-hero .lede { max-width: 720px; }
.planner-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.planner-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(214, 179, 106, .22);
  border-radius: 999px;
  background: rgba(8, 10, 13, .34);
  color: #bdb4a3;
  font-size: 11px;
  backdrop-filter: blur(8px);
}
.planner-hero-stats strong { color: #f1d18e; font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1; }
.planner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 10px;
  border: 1px solid rgba(76, 73, 66, .72);
  border-radius: 11px;
  background: rgba(20, 23, 28, .76);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(12px);
}
.planner-actions button { min-height: 38px; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.planner-actions button:hover { transform: translateY(-1px); }
.planner-actions [data-action="reset"] { border-color: rgba(153, 94, 94, .48); color: #c99a9a; }
.planner-actions [data-action="reset"]:hover { border-color: #9f6262; background: rgba(156, 87, 87, .1); }
.planner-primary { border-color: #9b7940; background: linear-gradient(180deg, rgba(214,179,106,.23), rgba(151,112,50,.14)); color: #f3d69b; box-shadow: inset 0 1px rgba(255, 240, 203, .08); }
.planner-primary:hover { border-color: #c39b53; background: linear-gradient(180deg, rgba(214,179,106,.3), rgba(151,112,50,.18)); }
.planner-status { min-height: 1.5em; margin-left: auto; padding-inline: 7px; color: var(--good); font-size: 12px; }
.planner-status.error { color: var(--danger); }
.planner-grid { display: grid; grid-template-columns: minmax(245px,.72fr) minmax(350px,1.2fr) minmax(310px,1fr); gap: 16px; margin-top: 18px; align-items: start; }
.planner-grid > .panel {
  position: relative;
  overflow: hidden;
  border-color: #383d46;
  background: linear-gradient(155deg, rgba(29, 33, 39, .98), rgba(19, 22, 27, .98) 46%);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .02);
}
.planner-grid > .panel::before { content: ""; position: absolute; inset: 0 14% auto; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 185, 107, .32), transparent); pointer-events: none; }
.planner-panel-head { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border-bottom: 1px solid rgba(67, 72, 82, .72); background: linear-gradient(90deg,rgba(214,179,106,.09),rgba(214,179,106,.015) 62%,transparent); }
.planner-panel-head h2 { margin: 0; color: #eee7d8; font-size: 22px; letter-spacing: -.01em; }
.planner-panel-head > .muted { padding: 3px 8px; border: 1px solid rgba(94, 92, 85, .5); border-radius: 999px; background: rgba(10, 12, 15, .22); font-size: 11px; }
.planner-panel-head label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.planner-panel-head input { width: 68px; padding: 5px 7px; border-color: #55503f; background: rgba(9, 11, 14, .48); color: #f0d396; text-align: center; }
.planner-loadouts { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(52,58,69,.72); background: rgba(8,10,13,.18); }
.planner-loadouts > span { color: var(--muted); font-size: 12px; }
.planner-loadouts > div { display: flex; gap: 5px; }
.planner-loadouts button { min-height: 32px; padding: 4px 9px; color: #999da5; font-size: 12px; }
.planner-loadouts button.active { border-color: #9b7940; background: rgba(214,179,106,.14); color: #efd094; box-shadow: inset 0 1px rgba(255,240,203,.06); }
.planner-utility { margin: 12px 14px 0; overflow: hidden; border: 1px solid rgba(63,68,77,.76); border-radius: 9px; background: rgba(9,11,14,.22); }
.planner-utility > summary { padding: 9px 11px; color: #c8b98f; font-size: 14px; cursor: pointer; background: linear-gradient(90deg,rgba(214,179,106,.055),transparent); }
.planner-utility .planner-option-list { grid-template-columns: 1fr; max-height: 290px; }
.planner-points { display: flex; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid rgba(52,58,69,.72); background: rgba(7, 9, 12, .18); color: var(--muted); font-size: 12px; }
.planner-points strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.planner-attribute { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 8px 15px; border-bottom: 1px solid rgba(52,58,69,.5); }
.planner-attribute:last-child { border-bottom: 0; }
.planner-attribute > span { color: #c9c4ba; }
.planner-attribute > div { display: grid; grid-template-columns: 36px 47px 36px; align-items: center; text-align: center; }
.planner-attribute button { width: 36px; height: 36px; padding: 0; border-color: #3b414b; background: #171b20; color: #c8b88f; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.planner-attribute button:hover { border-color: #8a7245; background: rgba(214,179,106,.1); transform: scale(1.04); }
.planner-attribute button:disabled { border-color: #30353d; color: #555b64; background: #13161a; cursor: not-allowed; transform: none; }
.planner-attribute output { color: #e5d2a8; font-size: 14px; font-variant-numeric: tabular-nums; }
.planner-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.planner-slot {
  --slot-accent: #6d6658;
  position: relative;
  min-width: 0;
  min-height: 105px;
  padding: 10px;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  overflow: hidden;
  border-style: dashed;
  border-color: #414752;
  text-align: left;
  background: linear-gradient(145deg, rgba(20,23,28,.92), rgba(13,16,20,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.planner-slot::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 2px; background: linear-gradient(transparent, var(--slot-accent), transparent); opacity: 0; transition: opacity .18s ease; }
.planner-slot:hover { border-color: #766544; background: linear-gradient(145deg, rgba(31,31,29,.96), rgba(18,20,23,.96)); box-shadow: 0 10px 25px rgba(0,0,0,.22), inset 0 0 26px rgba(214,179,106,.03); transform: translateY(-1px); }
.planner-slot:hover::after,.planner-slot.equipped::after { opacity: .72; }
.planner-slot.equipped { border-style: solid; border-color: color-mix(in srgb, var(--slot-accent) 52%, #343a45); }
.planner-slot.rarity-normal { --slot-accent: #9aa3b1; }
.planner-slot.rarity-magic { --slot-accent: var(--magic); }
.planner-slot.rarity-plagued { --slot-accent: var(--plague); }
.planner-slot.rarity-unique { --slot-accent: var(--gold); }
.planner-slot-icon { width: 58px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--slot-accent) 45%, #3e4147); border-radius: 9px; color: #8c7b5a; font-size: 25px; background: radial-gradient(circle at 50% 38%, rgba(64,61,47,.76),#111317 72%); box-shadow: inset 0 0 18px rgba(0,0,0,.26), 0 5px 14px rgba(0,0,0,.22); }
.planner-slot-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0,0,0,.45)); }
.planner-slot-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.planner-slot-copy > small { color: #858a94; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.planner-slot-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #e7d6b1;
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.planner-slot-badges,.planner-slot-meta { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.planner-slot-badges { margin-top: 3px; }
.planner-slot-badges b { padding: 1px 5px; border: 1px solid #4a4f58; border-radius: 4px; background: rgba(10,12,15,.34); color: #adb2bb; font-size: 11px; font-weight: 560; line-height: 1.5; }
.planner-slot-badges .rarity-magic { border-color: color-mix(in srgb, var(--magic) 52%, transparent); color: #a9cbff; }
.planner-slot-badges .rarity-plagued { border-color: color-mix(in srgb, var(--plague) 52%, transparent); color: #ddb2f3; }
.planner-slot-badges .rarity-unique { border-color: rgba(214,179,106,.52); color: #f0ce88; }
.planner-slot-badges .planner-incomplete { border-color: rgba(213,134,134,.5); color: #dfa4a4; }
.planner-slot-meta { margin-top: 2px; }
.planner-slot-meta i { overflow: hidden; color: #898e97; font-size: 11px; font-style: normal; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.planner-slot-meta i + i::before { content: "·"; margin-right: 4px; color: #565c66; }
.planner-slot.blocked { --slot-accent: #555a63; border-style: dashed; opacity: .52; cursor: not-allowed; filter: saturate(.35); transform: none; }
.planner-slot.blocked .planner-slot-icon { box-shadow: inset 0 0 18px rgba(0,0,0,.48); }
.planner-slot.blocked strong { color: #858992; white-space: normal; }
.planner-slot.inactive-loadout { opacity: .62; filter: saturate(.72); }
.planner-slot.inactive-loadout:hover { opacity: .9; filter: saturate(.95); }
.planner-slot.active-loadout[DATA-SLOT*="Hand" i] { box-shadow: inset 0 0 24px rgba(214,179,106,.035), 0 8px 20px rgba(0,0,0,.16); }
.planner-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 12px 12px 4px; }
.planner-summary-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border: 1px solid rgba(61,66,76,.72); border-radius: 8px; background: linear-gradient(145deg,rgba(10,12,15,.34),rgba(26,29,34,.3)); }
.planner-summary-grid span { overflow: hidden; color: #92969e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.planner-summary-grid strong { overflow: hidden; color: #e1c994; font-size: 14px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.planner-summary h3 { margin: 17px 14px 8px; font-size: 14px; }
.planner-requirements { margin: 0 14px 14px; overflow: hidden; border: 1px solid rgba(58,64,74,.8); border-radius: 8px; background: rgba(9,11,14,.2); }
.planner-requirements > div { display: grid; grid-template-columns: minmax(105px,1fr) 1.4fr; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.planner-requirements > div:last-child { border-bottom: 0; }
.planner-requirements > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-requirement { display: inline-block; margin-right: 6px; color: var(--good); }
.planner-requirement.unmet { color: var(--danger); }
.planner-caveat { margin: 14px; padding: 10px 11px; border: 1px solid rgba(121,100,61,.4); border-left: 2px solid #927541; border-radius: 0 7px 7px 0; background: rgba(214,179,106,.055); color: #9f9a90; font-size: 10px; }
.planner-config-counts { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 0 14px 14px; }
.planner-config-counts span { display: flex; flex-direction: column-reverse; gap: 1px; padding: 8px 5px; border: 1px solid rgba(58,64,74,.76); border-radius: 8px; background: rgba(8,10,13,.25); color: #8f949d; font-size: 11px; text-align: center; }
.planner-config-counts strong { color: var(--gold); font-size: 18px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.planner-summary-details { margin: 10px 14px; overflow: hidden; border: 1px solid rgba(58,64,74,.8); border-radius: 8px; background: rgba(10,12,15,.44); }
.planner-summary-details summary { padding: 9px 11px; color: #dbc58f; cursor: pointer; background: rgba(255,255,255,.012); font-size: 14px; }
.planner-summary-details--facets { border-color: rgba(91, 199, 184, .46); }
.planner-summary-details--facets summary { color: #8fe0d4; background: linear-gradient(90deg, rgba(71, 184, 169, .11), transparent 74%); }
.planner-summary-details--gems { border-color: rgba(177, 139, 220, .43); }
.planner-summary-details--gems summary { color: #d0afea; background: linear-gradient(90deg, rgba(177, 139, 220, .1), transparent 74%); }
.planner-summary-details--enchantments { border-color: rgba(113, 158, 213, .42); }
.planner-summary-details--enchantments summary { color: #a9c9ed; background: linear-gradient(90deg, rgba(90, 139, 200, .1), transparent 74%); }
.planner-summary-details[open] summary { border-bottom: 1px solid rgba(52,58,69,.64); }
.planner-summary-list,.planner-effect-list { padding: 0 10px 10px; }
.planner-summary-list > div { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.planner-summary-list > div:first-child,.planner-effect-list > div:first-child { border-top: 0; }
.planner-summary-list img { width: 38px; height: 38px; object-fit: contain; }
.planner-summary-list span { min-width: 0; display: flex; flex-direction: column; }
.planner-summary-list small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.planner-effect-list > div { display: grid; grid-template-columns: minmax(100px,.7fr) 2fr; gap: 7px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.planner-effect-list small { grid-column: 2; color: var(--good); }
body:has(.planner-dialog[open]) { overflow: hidden; }
.planner-dialog { width: min(760px,calc(100% - 24px)); max-height: min(790px,calc(100dvh - 36px)); padding: 0; overflow-x: hidden; border: 1px solid #6b5a39; border-radius: 14px; background: linear-gradient(155deg,#171a1f,#101318 56%); color: var(--text); box-shadow: 0 34px 110px rgba(0,0,0,.92), inset 0 1px rgba(255,232,183,.045); }
.planner-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.planner-editor-dialog[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
.planner-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(4px); }
.planner-dialog-head { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; border-bottom: 1px solid rgba(72,66,54,.82); background: rgba(20,23,28,.96); backdrop-filter: blur(14px); }
.planner-dialog-head h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.planner-dialog-head button { width: 44px; height: 44px; padding: 0; border-radius: 50%; color: #b8ad98; font-size: 22px; }
.planner-picker-controls { position: relative; z-index: 3; max-height: min(48dvh, 500px); padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line); background: rgba(20,23,28,.96); backdrop-filter: blur(14px); }
.planner-picker-controls input { width: 100%; border-color: #464d58; background: #0f1216; font-size: 14px; }
.planner-category-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.planner-category-tabs button { padding: 5px 9px; font-size: 12px; }
.planner-category-tabs button.active { border-color: #927746; color: var(--gold); background: rgba(214,179,106,.12); }
.planner-filter-bar {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(64, 70, 80, .82);
  border-radius: 9px;
  background: rgba(10, 12, 16, .42);
}
.planner-filter-bar > input { width: 100%; min-width: 0; font-size: 14px; }
.planner-filter-group { display: grid; grid-template-columns: minmax(68px, auto) minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.planner-filter-label { color: #a8adb6; font-size: 12px; line-height: 1.4; }
.planner-filter-chips,
.planner-editor-filter-tabs,
.planner-editor-category-tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.planner-filter-chip,
.planner-editor-filter-button,
.planner-editor-category-button {
  min-height: 32px;
  padding: 5px 10px;
  border-color: #424954;
  color: #aeb3bc;
  font-size: 12px;
  line-height: 1.35;
}
.planner-filter-chip:hover,
.planner-editor-filter-button:hover,
.planner-editor-category-button:hover { border-color: #786943; color: #e2d6bc; }
.planner-filter-chip.active,
.planner-filter-chip[aria-pressed="true"],
.planner-editor-filter-button.active,
.planner-editor-filter-button[aria-pressed="true"],
.planner-editor-category-button.active,
.planner-editor-category-button[aria-pressed="true"] { border-color: #9a7b45; background: rgba(214,179,106,.13); color: #f0d39a; }
.planner-filter-selects,
.planner-picker-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 8px; min-width: 0; }
.planner-filter-select,
.planner-picker-filter { width: 100%; min-width: 0; font-size: 12px; }
label.planner-filter-select,
label.planner-picker-filter { display: grid; gap: 4px; padding: 0; border: 0; background: transparent; color: #a8adb6; }
.planner-filter-select select,
.planner-picker-filter select { width: 100%; min-width: 0; }
.planner-filter-summary,
.planner-picker-meta { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.planner-picker-meta { grid-column: 1 / -1; padding-top: 2px; }
.planner-result-count { min-width: 0; color: #b9bdc5; font-variant-numeric: tabular-nums; }
.planner-filter-reset { min-height: 30px; padding: 4px 9px; border-color: rgba(177, 136, 79, .44); color: #d5b77d; font-size: 11px; white-space: nowrap; }
.planner-filter-reset:hover { border-color: #a68149; background: rgba(214,179,106,.1); }
.planner-picker-list { min-height: 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: auto; overscroll-behavior: contain; }
.planner-picker-item { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: center; border-color: #353b45; text-align: left; background: rgba(17,20,25,.78); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.planner-picker-item:hover { border-color: #806c46; background: rgba(35,33,28,.9); transform: translateY(-1px); }
.planner-picker-item.clear { grid-column: 1/-1; min-height: 40px; display: block; color: var(--danger); text-align: center; }
.planner-picker-item img { width: 52px; height: 52px; object-fit: contain; }
.planner-picker-item:not(.clear):not(:has(> img)) { grid-template-columns: minmax(0, 1fr); }
.planner-picker-item span { min-width: 0; display: flex; flex-direction: column; }
.planner-picker-item strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.planner-picker-item small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.planner-empty { grid-column: 1/-1; padding: 30px; color: var(--muted); text-align: center; }
.planner-editor-dialog { width: min(820px,calc(100% - 24px)); }
.planner-editor { min-height: 0; padding: 14px 14px 4px; overflow: auto; overscroll-behavior: contain; }
.planner-editor-item { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 13px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.planner-editor-item img { width: 76px; height: 76px; object-fit: contain; border: 1px solid #57503d; border-radius: 10px; background: radial-gradient(circle,#302d22,#111317 72%); box-shadow: inset 0 0 20px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.22); }
.planner-editor-item h2 { margin: 0 0 3px; font-size: 22px; line-height: 1.35; }
.planner-editor-item span { color: var(--muted); }
.planner-editor-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 13px; }
.planner-editor-basics label { display: grid; grid-template-columns: minmax(90px,1fr) 130px; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid rgba(58,64,74,.76); border-radius: 8px; background: rgba(8,10,13,.24); color: var(--muted); }
.planner-editor-basics input,.planner-editor-basics select { width: 100%; min-width: 0; }
.planner-editor-note { margin: 8px 0; color: var(--muted); font-size: 12px; }
.planner-editor-note.warning { margin: 8px 9px; padding: 8px 9px; border: 1px solid rgba(213,134,134,.36); border-radius: 6px; background: rgba(154,75,75,.08); color: #dca4a4; }
.planner-editor-search { position: relative; margin: 12px 0 2px; }
.planner-editor-search span { position: absolute; top: 50%; left: 12px; z-index: 1; color: #8b806b; font-size: 19px; line-height: 1; transform: translateY(-52%); pointer-events: none; }
.planner-editor-search input { width: 100%; padding: 10px 12px 10px 39px; border-color: #4b4e4c; background: rgba(9,11,14,.68); box-shadow: inset 0 1px 7px rgba(0,0,0,.2); font-size: 14px; }
.planner-editor-filter-tabs,
.planner-editor-category-tabs { margin: 10px 0 2px; }
.planner-editor [hidden] { display: none !important; }
.planner-editor-filter-empty,
.planner-editor-empty,
.planner-filter-empty { grid-column: 1 / -1; margin: 0; padding: 24px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.planner-editor details { margin-top: 10px; overflow: hidden; border: 1px solid rgba(57,63,73,.88); border-radius: 9px; background: rgba(17,20,25,.84); }
.planner-editor details[open] { border-color: rgba(93,81,57,.88); }
.planner-editor details > summary { padding: 10px 12px; color: #dbc58f; cursor: pointer; background: linear-gradient(90deg,rgba(214,179,106,.055),transparent); font-size: 14px; }
.planner-option-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; max-height: 310px; padding: 9px; overflow: auto; border-top: 1px solid var(--line); }
.planner-editor .planner-option-list { max-height: none; overflow: visible; }
.planner-option-list.compact { grid-template-columns: 1fr; }
.planner-option { min-width: 0; min-height: 64px; display: grid; grid-template-columns: auto 42px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px; border: 1px solid #313742; border-radius: 8px; background: #111419; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.planner-option:not(:has(> img)) { grid-template-columns: auto minmax(0,1fr) auto; }
.planner-option:hover { border-color: #5f594b; background: #171a1f; }
.planner-option:has(input:checked) { border-color: #917541; background: linear-gradient(135deg,rgba(214,179,106,.12),rgba(17,20,25,.92)); box-shadow: inset 2px 0 #a5864a; }
.planner-option.selected { border-color: #917541; background: linear-gradient(135deg,rgba(214,179,106,.12),rgba(17,20,25,.92)); box-shadow: inset 2px 0 #a5864a; }
.planner-option.locked { border-color: rgba(126,104,61,.55); cursor: default; }
.planner-option input { accent-color: #c39b54; }
.planner-option img { width: 42px; height: 42px; object-fit: contain; }
.planner-option > span { min-width: 0; display: flex; flex-direction: column; }
.planner-option strong { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.planner-option small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.planner-option em { padding: 2px 5px; border: 1px solid rgba(214,179,106,.34); border-radius: 4px; color: var(--gold); font-size: 11px; font-style: normal; white-space: nowrap; }
.planner-option--facet { border-color: rgba(84, 181, 169, .52); background: linear-gradient(135deg, rgba(53, 139, 127, .11), #111419 66%); }
.planner-option--facet:hover { border-color: #68cbbb; background: linear-gradient(135deg, rgba(53, 139, 127, .18), #171a1f 70%); }
.planner-option--facet:has(input:checked),
.planner-option--facet.selected { border-color: #68cbbb; background: linear-gradient(135deg, rgba(53, 159, 144, .23), rgba(17,20,25,.94)); box-shadow: inset 2px 0 #69cdbd; }
.planner-option--facet input { accent-color: #61c6b7; }
.planner-option--facet em { border-color: rgba(104,203,187,.5); color: #91ded3; }
.planner-option--enchant { border-left-color: rgba(113,158,213,.72); }
.planner-option--gem { border-left-color: rgba(177,139,220,.72); }
.planner-gem-option { grid-template-columns: 42px minmax(0,1fr) auto; }
.planner-gem-option:not(:has(> img)) { grid-template-columns: minmax(0,1fr) auto; }
.planner-gem-stepper { display: grid; grid-template-columns: 28px 24px 28px; align-items: center; text-align: center; }
.planner-gem-stepper button { width: 28px; height: 30px; padding: 0; border-color: #444a54; color: #d5c08f; }
.planner-gem-stepper button:disabled { color: #50555e; cursor: not-allowed; }
.planner-gem-stepper output { color: #e7d3a5; font-size: 11px; font-variant-numeric: tabular-nums; }
.planner-enchant-option { border-bottom: 1px solid rgba(52,58,69,.55); }
.planner-enchant-option:last-child { border-bottom: 0; }
.planner-roll { display: grid; grid-template-columns: 70px minmax(100px,1fr) minmax(150px,1.5fr); gap: 8px; align-items: center; padding: 8px 9px 10px 35px; color: var(--muted); font-size: 12px; }
.planner-roll input { width: 100%; padding: 0; }
.planner-roll output { min-width: 0; overflow-wrap: anywhere; color: #8bc69b; }
.planner-exalt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 9px 10px; color: #bca8d2; font-size: 12px; }
.planner-exalt input { width: 62px; padding: 4px 6px; border-color: rgba(187,131,220,.42); color: #d9b3ee; text-align: center; }
.planner-editor-actions { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: 8px; padding: 11px 14px; border-top: 1px solid rgba(72,66,54,.82); background: rgba(17,20,25,.96); box-shadow: 0 -12px 30px rgba(0,0,0,.22); backdrop-filter: blur(14px); }
.planner-editor-actions button:disabled { border-color: #343943; background: #171a1f; color: #5f646d; cursor: not-allowed; box-shadow: none; }

@media (max-width: 1120px) {
  .planner-grid { grid-template-columns: minmax(245px,.7fr) minmax(360px,1.3fr); }
  .planner-summary { grid-column: 1/-1; }
}
@media (max-width: 740px) {
  .planner-hero { min-height: 0; }
  .planner-hero .lede { max-width: none; }
  .planner-hero-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 19px; }
  .planner-hero-stats span { min-width: 0; border-radius: 8px; }
  .planner-hero-stats span:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .planner-actions button { flex: 1 1 calc(50% - 9px); }
  .planner-actions .planner-primary { flex-basis: 100%; }
  .planner-status { width: 100%; margin-left: 0; text-align: center; }
  .planner-grid { grid-template-columns: 1fr; }
  .planner-summary { grid-column: auto; }
  .planner-slots,.planner-picker-list { grid-template-columns: 1fr; }
  .planner-utility .planner-option-list { grid-template-columns: 1fr; }
  .planner-slot { min-height: 94px; }
  .planner-attribute > div { grid-template-columns: 44px 47px 44px; }
  .planner-attribute button { width: 44px; height: 44px; }
  .planner-picker-item.clear { grid-column: auto; }
  .planner-filter-group { grid-template-columns: 1fr; gap: 5px; }
  .planner-filter-selects,.planner-picker-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-picker-meta { padding-inline: 10px; }
  .planner-option-list,.planner-editor-basics { grid-template-columns: 1fr; }
  .planner-editor-basics { gap: 8px; }
  .planner-editor-basics label { grid-template-columns: 1fr minmax(96px, 118px); }
  .planner-effect-list > div { grid-template-columns: 1fr; }
  .planner-effect-list small { grid-column: auto; }
  .planner-roll { grid-template-columns: 55px 1fr; padding-left: 9px; }
  .planner-roll output { grid-column: 1/-1; }
  .planner-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .planner-dialog-head { padding-inline: 13px; }
  .planner-picker-controls { max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; }
  .planner-picker-list { min-height: 150px; }
  .planner-editor { padding-inline: 10px; }
  .planner-editor-actions { flex-wrap: wrap; padding-inline: 10px; }
  .planner-editor-actions button { flex: 1 1 calc(33.333% - 6px); min-width: 0; padding-inline: 7px; }
}
@media (max-width: 420px) {
  .planner-loadouts { align-items: flex-start; flex-direction: column; }
  .planner-loadouts > div { width: 100%; }
  .planner-loadouts button { flex: 1; padding-inline: 5px; }
  .planner-summary-grid { grid-template-columns: 1fr 1fr; padding-inline: 10px; }
  .planner-summary-grid > div { padding-inline: 8px; }
  .planner-config-counts { grid-template-columns: 1fr 1fr; }
  .planner-editor-item { grid-template-columns: 62px minmax(0,1fr); }
  .planner-editor-item img { width: 62px; height: 62px; }
  .planner-filter-selects,.planner-picker-filters { grid-template-columns: 1fr; }
  .planner-filter-summary,.planner-picker-meta { align-items: flex-start; flex-direction: column; }
  .planner-filter-reset { width: 100%; }
  .planner-option { grid-template-columns: auto 36px minmax(0,1fr) auto; }
  .planner-option img { width: 36px; height: 36px; }
  .planner-gem-option { grid-template-columns: 36px minmax(0,1fr); }
  .planner-gem-stepper { grid-column: 1/-1; justify-content: end; }
  .planner-editor-actions button { flex-basis: calc(50% - 4px); }
  .planner-editor-actions .planner-primary { flex-basis: 100%; }
}
.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; }
.home-card-damage, .hero-damage { --page-accent: #d98268; }
.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); }
.damage-toc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 11px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  scrollbar-width: none;
}
.damage-toc > span { margin-right: 5px; color: #d9c8a3; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.damage-toc a { padding: 5px 8px; border-radius: 6px; color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.damage-toc a:hover { background: var(--surface-2); color: var(--text); }
.damage-spec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 4px 0; }
.damage-spec-meta > div span, .damage-spec-meta > div strong { display: block; }
.damage-spec-meta > div span { color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.damage-spec-meta > div strong { color: #e2d5b9; font-size: 13px; font-variant-numeric: tabular-nums; }
.damage-spec-meta p { flex: 1 1 520px; margin: 0; color: var(--muted); font-size: 12px; }
.damage-build-warning { flex: 1 1 100%; padding: 8px 10px; border-left: 2px solid var(--danger); background: rgba(213, 134, 134, .08); color: #e5adad; font-size: 12px; }
.damage-section { scroll-margin-top: 108px; }
.damage-section-head { max-width: 960px; margin-bottom: 17px; }
.damage-section-head p { margin-bottom: 0; color: var(--muted); }
.damage-confidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.damage-confidence article { min-width: 0; padding: 18px clamp(14px, 2vw, 22px); }
.damage-confidence article + article { border-left: 1px solid var(--line); }
.damage-confidence strong { display: block; margin-top: 10px; color: #e7dfcf; font-size: 14px; }
.damage-confidence p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.damage-status { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font: 11px/1.4 var(--font-ui); white-space: nowrap; }
.damage-status-verified { color: #8fc9a2; background: rgba(119, 184, 138, .08); }
.damage-status-partial { color: #d9b96f; background: rgba(214, 179, 106, .08); }
.damage-status-unknown { color: #d99898; background: rgba(213, 134, 134, .08); }
.damage-calculator-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.damage-calculator { min-width: 0; padding: clamp(17px, 2vw, 23px); border-color: #414650; background: linear-gradient(145deg, rgba(33, 37, 44, .92), rgba(19, 22, 27, .96)); }
.damage-calculator-layer { grid-column: span 4; }
.damage-calculator-stat { grid-column: span 8; }
.damage-calculator-armor, .damage-calculator-resource { grid-column: 1 / -1; }
.damage-calculator-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.damage-calculator-head h3 { margin-bottom: 5px; color: #eadfc8; font-size: 18px; }
.damage-calculator-head p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12px; }
.damage-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.damage-fields-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.damage-field { min-width: 0; }
.damage-field > span:first-child { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.damage-input { display: flex; align-items: stretch; }
.damage-input input { min-width: 0; width: 100%; border-radius: 7px 0 0 7px; font-variant-numeric: tabular-nums; }
.damage-input input:only-child { border-radius: 7px; }
.damage-input i { display: grid; place-items: center; min-width: 34px; padding: 0 8px; border: 1px solid var(--line); border-left: 0; border-radius: 0 7px 7px 0; background: #111419; color: var(--muted); font: normal 12px/1 var(--font-ui); }
.damage-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.damage-metrics-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.damage-metrics-armor { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.damage-metrics-resource { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.damage-formula { display: block; margin-top: 13px; padding: 9px 11px; overflow-x: auto; border-left: 2px solid #826d42; background: rgba(214, 179, 106, .045); color: #dfc68e; font: 12px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: nowrap; }
.damage-formula-block { margin-top: 10px; white-space: normal; }
.damage-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.damage-reference-grid, .damage-curve-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 52px); }
.damage-reference-grid > article, .damage-curve-grid > article, .damage-reference-block { min-width: 0; }
.damage-reference-grid p { color: var(--muted); }
.damage-reference-block { margin-top: 28px; }
.damage-table-wrap { max-width: 100%; overflow: auto; border-top: 1px solid var(--line); }
.damage-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.damage-table th, .damage-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.damage-table th { background: rgba(35, 40, 50, .72); color: var(--muted); font-weight: 560; white-space: nowrap; }
.damage-table td { color: #d8d4cc; }
.damage-layer-table td:nth-child(1), .damage-stat-table td:nth-child(1), .damage-stat-table td:nth-child(2) { color: #e5c984; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; white-space: nowrap; }
.damage-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 30px; padding: 1px; list-style: none; background: var(--line); counter-reset: damage-step; }
.damage-pipeline li { position: relative; min-height: 108px; padding: 36px 15px 14px; background: var(--surface); color: #d5d1c9; font-size: 12px; counter-increment: damage-step; }
.damage-pipeline li::before { content: counter(damage-step, decimal-leading-zero); position: absolute; top: 10px; left: 15px; color: #a88c50; font: 11px/1 var(--font-ui); letter-spacing: .08em; }
.damage-curve-grid { align-items: start; }
.damage-boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.damage-boundary-grid > article { min-width: 0; padding: 19px 20px 20px 0; border-bottom: 1px solid var(--line); }
.damage-boundary-grid > article:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.damage-boundary-grid h3 { margin-top: 10px; }
.damage-boundary-grid p, .damage-boundary-grid li { color: var(--muted); font-size: 12px; }
.damage-boundary-grid ul { margin: 9px 0 0; padding-left: 20px; }
.damage-boundary-grid li + li { margin-top: 5px; }
.damage-reference-link { display: inline-flex; margin-top: 4px; color: var(--gold); font-size: 12px; text-underline-offset: 3px; }
.damage-evidence { margin-top: 22px; padding-left: 14px; border-left: 2px solid #665a40; }
.damage-evidence p { max-width: 1050px; margin: 0; color: var(--muted); font-size: 12px; }
.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; }
  .damage-calculator-layer, .damage-calculator-stat { grid-column: 1 / -1; }
  .damage-fields-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .damage-metrics-armor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .damage-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@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)); }
  .damage-confidence, .damage-reference-grid, .damage-curve-grid, .damage-boundary-grid { grid-template-columns: 1fr; }
  .damage-confidence article + article { border-top: 1px solid var(--line); border-left: 0; }
  .damage-fields-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .damage-metrics-four, .damage-metrics-armor, .damage-metrics-resource { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .damage-boundary-grid > article, .damage-boundary-grid > article:nth-child(even) { padding: 17px 0; border-left: 0; }
}
@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; }
  .damage-fields, .damage-fields-five, .damage-metrics, .damage-metrics-four, .damage-metrics-armor, .damage-metrics-resource, .damage-pipeline { grid-template-columns: 1fr; }
  .damage-calculator-head { display: block; }
  .damage-calculator-head .damage-status { margin-top: 8px; }
}