@import './color-palette.css';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.text-right { text-align: right !important; }

:root {
    /* All color vars are defined in color-palette.css.          */
    /* Add non-color design tokens here (typography, spacing…).  */
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Chakra Petch", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", "Consolas", "Monaco", "Courier New", monospace;
    --label-scale: 1;   /* overridden dynamically by MapsView per zoom level */
}

html {
    font-size: 20px;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    /* Fallback for browsers without dynamic viewport units, then dvh so the layout
       tracks the visible viewport as the mobile address bar shows/hides. */
    height: 100vh;
    height: 100dvh;
    /* Keep content clear of the home indicator on notched devices (0 elsewhere). */
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#app {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* Tooltips */
.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    max-width: 220px;
    padding: 0.25rem 0.5rem;
    background: var(--color-elevated);
    color: var(--text);
    font-size: 0.6rem;
    line-height: 1.4;
    border-radius: 6px;
    border: 1px solid var(--border);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.12s, transform 0.12s;
    white-space: normal;
    word-wrap: break-word;
}
.tooltip.visible {
    opacity: 1;
    transform: scale(1);
}
.tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-elevated);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: rotate(45deg);
}
.tooltip.tooltip-ammo-card {
    max-width: 360px;
    padding: 0.4rem;
}
.ammo-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ammo-tooltip-image-wrap {
    width: 100%;
    background: var(--color-map-bg);
    border-radius: 6px;
    border: 1px solid var(--color-map-elevated-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.65rem;
    min-height: 70px;
    box-sizing: border-box;
}
.ammo-tooltip-image {
    max-width: 100%;
    min-height: 70px;
    max-height: 70px;
    object-fit: contain;
    display: block;
}
.ammo-tooltip-body {
    min-width: 0;
}
.ammo-tooltip-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-map-text-bright);
    line-height: 1.2;
}
.ammo-tooltip-desc {
    margin-top: 0.15rem;
    color: var(--color-text-bright);
    font-size: 0.6rem;
    line-height: 1.35;
}
.ammo-tooltip-highlights {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.ammo-tooltip-chip {
    display: inline-block;
    border: 1px solid var(--color-map-elevated);
    border-radius: 3px;
    background: var(--color-map-surface);
    color: var(--color-map-text-light);
    font-size: 0.62rem;
    line-height: 1.2;
    padding: 0.12rem 0.4rem;
    font-weight: 600;
}
.ammo-tooltip-chip-br {
    border-color: var(--color-blue-muted);
    background: var(--color-blue-muted-tint-20);
    color: var(--color-blue-pale);
    font-size: 0.68rem;
    font-weight: 700;
}
.ammo-tooltip-chip-dmg {
    border-color: var(--color-orange-muted);
    background: var(--color-orange-muted-tint-20);
    color: var(--color-orange-pale);
    font-size: 0.68rem;
    font-weight: 700;
}
.ammo-tooltip-chip-acc {
    border-color: var(--color-green-muted);
    background: var(--color-green-muted-tint-20);
    color: var(--color-green-pastel);
}
.ammo-tooltip-chip-cost {
    border-color: var(--color-accent-dark);
    background: var(--color-accent-dark-tint-20);
    color: var(--color-accent-light);
}

/* Addon (scope / silencer / launcher) tooltip */
.tooltip.tooltip-addon-card {
    max-width: 240px;
    padding: 0.4rem;
}
.addon-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.addon-tooltip-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-map-text-bright);
    line-height: 1.2;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-map-border);
}
.addon-tooltip-stats {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.addon-tt-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.64rem;
    line-height: 1.3;
}
.addon-tt-key {
    color: var(--color-blue-grey-soft);
    flex-shrink: 0;
}
.addon-tt-val {
    color: var(--color-map-text-light);
    font-weight: 600;
    text-align: right;
}
.addon-tt-yes { color: var(--color-green-light); }
.addon-tt-no  { color: var(--color-red-soft); }

/* Compatible weapons tooltip (scope / silencer / launcher tile hover) */
.tooltip.tooltip-addon-weapons-card {
    max-width: 380px;
    padding: 0.4rem;
}
.addon-compat-tooltip {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.addon-compat-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-map-text-bright);
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--color-map-border);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.addon-compat-count {
    font-weight: 400;
    color: var(--color-blue-grey-soft);
    font-size: 0.62rem;
}
.addon-compat-list {
    columns: 2;
    column-gap: 0.5rem;
}
.addon-compat-weapon {
    font-size: 0.63rem;
    color: var(--color-map-text);
    line-height: 1.35;
    padding: 0.05rem 0;
}
.addon-compat-none {
    font-size: 0.63rem;
    color: var(--color-blue-grey-soft);
    font-style: italic;
}
.addon-compat-more {
    font-size: 0.6rem;
    color: var(--color-map-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
    padding-top: 0.2rem;
    border-top: 1px solid var(--color-map-border);
}

/* Compatible weapons badge (clickable count in table/grid) */
.badge-flag.compat-weapons-badge {
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-flag.compat-weapons-badge svg { flex-shrink: 0; opacity: 0.5; }
.badge-flag.compat-weapons-badge:hover {
    background: var(--color-blue-tint-20);
}
.badge-flag.compat-weapons-badge:hover svg { opacity: 0.8; }

/* Compatible weapons click popover */
.weapon-list-popover {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 4px 16px var(--color-overlay-black-50);
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
}
.weapon-list-popover-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    padding-bottom: 0.35rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
.weapon-list-popover-count {
    font-weight: 400;
    color: var(--text-secondary);
}
.weapon-list-popover-items {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.weapon-list-popover-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0.3rem;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.1s;
}
.weapon-list-popover-item:hover {
    background: var(--color-overlay-white-5);
}
.weapon-list-popover-name {
    color: var(--text);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weapon-list-popover-item .badge-flag {
    font-size: 0.55rem;
    flex-shrink: 0;
    margin-left: 0;
}

.site-header {
    position: relative;
    background:
        radial-gradient(ellipse 45% 130% at 6% 55%,
            color-mix(in srgb, var(--accent) 20%, transparent) 0%,
            transparent 70%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-surface-3) 100%, black 14%) 0%,
            var(--color-surface-3) 60%,
            color-mix(in srgb, var(--color-surface-3) 100%, black 6%) 100%);
    padding: 0.3rem 1.5rem 0.3rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 10%,
        color-mix(in srgb, var(--accent) 50%, transparent) 25%,
        transparent 35%);
    pointer-events: none;
}
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border) 12%,
        var(--border) 88%,
        transparent 100%);
    pointer-events: none;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    position: relative;
}
.site-logo {
    height: 2.2rem;
    width: auto;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.header-brand:hover .site-logo {
    opacity: 1;
    filter: brightness(1.08);
}
.header-title-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.15;
}
.header-pack-label {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.header-pack-label .pack-status-badge {
    margin-left: 0.4rem;
}
.header-pack-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--accent);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: inherit;
    transition: opacity 0.15s;
}
.header-pack-switcher:hover .pack-chevron {
    opacity: 0.7;
}
.header-pack-switcher .pack-chevron {
    opacity: 0.4;
    flex-shrink: 0;
}
.site-header h1 {
    font-family: var(--font-display);
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Nav bar (link bar below header) */
.nav-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    background:
        linear-gradient(180deg,
            var(--color-surface-3) 0%,
            color-mix(in srgb, var(--color-surface-3) 100%, black 12%) 100%);
    padding: 0 0.75rem;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 12%, transparent),
        0 4px 12px -8px color-mix(in srgb, black 80%, transparent);
}
.nav-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border) 12%,
        var(--border) 88%,
        transparent 100%);
    pointer-events: none;
}
.nav-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.nav-bar-item:hover {
    color: var(--text);
}
.nav-bar-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.nav-bar-tools-label { cursor: pointer; }
.nav-bar-tools-caret {
    opacity: 0.6;
    margin-left: 0.05rem;
    transition: transform 0.15s;
}
.nav-bar-tools-caret.open { transform: rotate(180deg); }
.nav-bar-tools-menu {
    min-width: 15rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: 11px;
    padding: 0.4rem;
    box-shadow: 0 14px 34px var(--color-overlay-black-55);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.nav-bar-tools-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 7px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.8rem;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.nav-bar-tools-item:hover { background: var(--color-card); color: var(--text); }
.nav-bar-tools-item.active { color: var(--accent); }
.nav-bar-tools-item svg { color: var(--text-secondary); flex: 0 0 auto; }
.nav-bar-tools-item:hover svg,
.nav-bar-tools-item.active svg { color: var(--accent); }
.nav-bar-tools-all {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.72rem;
}
.nav-bar-tools-all span { margin-right: auto; }
.nav-bar-tools-all svg { color: var(--text-secondary); opacity: 0.6; }
.nav-bar-spacer {
    flex: 1;
}
.nav-bar .settings-wrap {
    position: relative;
}
.nav-bar .settings-menu {
    right: 0;
    left: auto;
}

/* Pack selector */
.pack-chevron {
    transition: transform 0.15s;
    opacity: 0.5;
}
.pack-chevron.open {
    transform: rotate(180deg);
}
.pack-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.25rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
    min-width: 8rem;
}
.pack-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.pack-menu-item:hover {
    color: var(--text);
    background: var(--color-overlay-white-6);
}
.pack-menu-item.active {
    color: var(--accent);
}
.pack-status-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.35rem;
    margin-left: auto;
    border-radius: 3px;
    background: var(--color-overlay-white-10);
    color: var(--color-text-tertiary);
    vertical-align: middle;
    line-height: 1;
}

.locale-wrap {
    position: relative;
    flex-shrink: 0;
}
.locale-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.locale-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
    background: var(--color-overlay-white-5);
}
.locale-chevron {
    transition: transform 0.15s;
    opacity: 0.5;
}
.locale-chevron.open {
    transform: rotate(180deg);
}
.locale-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.25rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
    min-width: 8rem;
}
.locale-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.locale-menu-item:hover {
    color: var(--text);
    background: var(--color-overlay-white-6);
}
.locale-menu-item.active {
    color: var(--accent);
}
.locale-menu-code {
    font-weight: 600;
    letter-spacing: 0.03em;
}
.locale-menu-label {
    opacity: 0.7;
}
.header-divider {
    width: 1px;
    height: 1.4rem;
    background: var(--border);
    flex-shrink: 0;
}
.header-utils {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Header links */
.header-links {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.header-links .header-link {
    border: none;
    border-radius: 0;
}
.header-links .header-link + .header-link {
    border-left: 1px solid var(--border);
}
.header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.header-link:hover {
    color: var(--text);
    border-color: var(--accent-dim);
    background: var(--color-overlay-white-5);
}
.header-link:active {
    border-color: var(--accent);
    background: var(--color-overlay-white-8);
}
button.header-link {
    background: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

/* Header drawer + mobile search styles are in HeaderBar.vue <style> block */

/* Responsive: header overflow toggle */
.header-mobile-items { display: none; }
@media (max-width: 1100px) {
    .header-desktop-items.header-links,
    .header-utils .shortcut-help-btn,
    .header-utils .release-notes-btn { display: none !important; }
    .header-mobile-items { display: flex; }
    .header-search-btn { display: none; }
}
@media (max-width: 900px) {
    .header-utils.header-desktop-items { display: none !important; }
    .global-search.header-desktop-items { display: none !important; }
    .header-search-btn { display: flex; margin-left: auto; }
    /* Hide the online counter before the nav tab strip gets crowded enough to
       squeeze it (it's still hidden at the <=768px scroll breakpoint too). */
    .nav-bar-online { display: none; }
}

/* Global search */
.global-search {
    position: relative;
    flex: 1;
    max-width: 28rem;
    margin-left: auto;
}
.global-search input {
    width: 100%;
    padding: 0.375rem 0.75rem;
    background: var(--color-surface-1);
    border: 1px solid var(--color-bg);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.875rem;
    outline: none;
    box-shadow: inset 0 2px 4px var(--color-overlay-black-60);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.global-search input:hover {
    border-color: var(--accent-dim);
}
.global-search input:focus {
    border-color: var(--accent);
    background: var(--color-surface-2);
    box-shadow:
        inset 0 2px 4px var(--color-overlay-black-60),
        0 0 0 3px var(--color-accent-tint-20);
}
.global-search input::placeholder {
    color: var(--text-secondary);
}
.search-hint {
    position: absolute;
    inset: 1px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: text;
    border-radius: 3px;
}
.search-hint svg {
    flex-shrink: 0;
}
.search-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin: 0 0.15rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    font-family: inherit;
    line-height: 1;
    color: var(--text-secondary);
    background: var(--color-border);
    border: 1px solid var(--color-elevated-3);
    border-radius: 4px;
    box-sizing: border-box;
}
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px var(--color-overlay-black-40);
    max-height: 20rem;
    overflow-y: auto;
    z-index: 50;
}
.search-dropdown a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--accent);
    text-decoration: none;
    transition: background 0.15s;
}
.search-dropdown a:hover,
.search-dropdown a.search-active {
    background: var(--color-overlay-border-50);
    text-decoration: none;
}
.search-dropdown .no-results {
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 0.75rem;
}
.search-id-hint {
    color: var(--text-secondary);
    font-size: 0.7em;
    margin-left: 0.25em;
}
.search-result-left {
    display: flex;
    align-items: baseline;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.search-cat-badge {
    font-size: 0.65rem;
    color: var(--text-secondary);
    background: var(--border);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.search-cat-badge--crafting {
    color: var(--accent);
    background: var(--color-accent-tint-15);
}
.search-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0.2rem 0;
}
.search-crafting-result {
    opacity: 0.92;
}
.crafting-card-highlighted {
    animation: crafting-highlight-flash 2.2s ease forwards;
}
@keyframes crafting-highlight-flash {
    0%   { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
    60%  { box-shadow: 0 0 0 2px var(--accent); border-radius: 6px; }
    100% { box-shadow: none; }
}
.srch-hl {
    background: transparent;
    color: var(--color-red-bright);
    font-weight: 600;
}

/* Layout */
.layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    transition: grid-template-columns 0.2s ease;
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    overflow: hidden;
    min-width: 0;
}
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.sidebar-group {
    margin-bottom: 0.25rem;
}
.sidebar-group-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent-dim);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.5rem 0.75rem 0.15rem;
    cursor: pointer;
    user-select: none;
}
.sidebar-group-label:hover {
    color: var(--accent);
}
.sidebar-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.sidebar-chevron.collapsed {
    transform: rotate(-90deg);
}
.sidebar button,
.sidebar .sidebar-group-items a {
    display: flex;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.sidebar button:hover,
.sidebar .sidebar-group-items a:hover {
    color: var(--text);
    background: var(--border);
}
.sidebar button.active,
.sidebar .sidebar-group-items a.active {
    color: var(--accent);
    background: var(--color-accent-tint-8);
    border-left: 2px solid var(--accent);
    padding-left: calc(0.75rem - 2px);
}
.cat-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-count {
    flex-shrink: 0;
    margin-left: 0.35rem;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--color-overlay-white-6);
    padding: 0.05rem 0.4rem;
    border-radius: 9999px;
    min-width: 1.6em;
    text-align: center;
}
.sidebar-collapse-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.sidebar-collapse-btn:hover {
    color: var(--text);
    background: var(--border);
}

/* Desktop sidebar collapse */
.layout.sidebar-collapsed {
    grid-template-columns: 0px 1fr;
}
.layout.sidebar-collapsed .sidebar {
    border-right: none;
    overflow: hidden;
    visibility: hidden;
}
.layout.sidebar-collapsed .content {
    padding-left: 0.75rem;
}

/* Hide sidebar for tool views (Build Planner, Version Compare) */
.layout.sidebar-hidden {
    grid-template-columns: 0px 1fr;
}
.layout.sidebar-hidden .sidebar {
    border-right: none;
    overflow: hidden;
    visibility: hidden;
}
.layout.sidebar-hidden .content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
/* Player inventory manages its own right edge — the inspector rail
   must sit flush against the viewport */
.layout.sidebar-hidden .content.content-inventory {
    padding-right: 0;
}
.hamburger-btn.show-desktop {
    display: flex;
}

.sidebar button.active .cat-count,
.sidebar .sidebar-group-items a.active .cat-count {
    color: var(--accent);
    background: var(--color-accent-tint-12);
}

/* Content */
.content {
    padding: 1rem 0 0 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: padding-left 0.2s ease;
}
.content.content-maps {
    padding: 0;
}
.content-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Category filter bar */
.filter-bar-wrapper {
    position: relative;
    margin: -1rem 0 1rem -1.5rem;
    padding: 0.55rem 0 0.55rem 1.5rem;
    background:
        linear-gradient(180deg,
            var(--color-surface-3) 0%,
            color-mix(in srgb, var(--color-surface-3) 100%, black 8%) 100%);
    box-shadow: 0 4px 12px -8px color-mix(in srgb, black 80%, transparent);
}
.filter-bar-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--border) 12%,
        var(--border) 88%,
        transparent 100%);
    pointer-events: none;
}
.filter-bar {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding-right: calc(1rem + 8px);
}
.filter-input-group {
    display: flex;
    align-items: center;
    /* Fixed basis (not 100%) so enabling wrap doesn't force the controls onto a
       second row on wide screens; the mobile rule overrides this to full width. */
    flex: 0 1 14rem;
    max-width: 14rem;
    height: 1.75rem;
    background: var(--color-surface-1);
    border: 1px solid var(--color-bg);
    border-radius: 4px;
    box-shadow: inset 0 2px 4px var(--color-overlay-black-60);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    position: relative;
}
.filter-input-group:hover {
    border-color: var(--accent-dim);
}
.filter-input-group:focus-within {
    border-color: var(--accent);
    background: var(--color-surface-2);
    box-shadow:
        inset 0 2px 4px var(--color-overlay-black-60),
        0 0 0 3px var(--color-accent-tint-20);
}
.filter-input-icon {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: var(--text-secondary);
    opacity: 0.5;
}
.filter-input-group input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 0.5rem;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.75rem;
    outline: none;
}
.filter-input-group input::placeholder {
    color: var(--text-secondary);
}
.filter-input-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0.35rem;
    flex-shrink: 0;
}
.filter-input-clear:hover {
    color: var(--text);
}
.item-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Secondary-controls wrapper: transparent on desktop (children flow into the
   filter bar exactly as before); becomes a collapsible second row on mobile. */
.filter-controls {
    display: contents;
}
/* Mobile-only toggle that expands/collapses .filter-controls */
.filter-expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.filter-expand-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}
.filter-expand-btn svg {
    transition: transform 0.2s ease;
}
.filter-expand-btn.expanded svg {
    transform: rotate(180deg);
}

/* View toggle */
/* Spacer: takes all leftover flex space on desktop, pushing right-side controls to the edge */
.filter-bar-spacer {
    flex: 1;
    min-width: 0;
}
.view-toggle {
    display: flex;
    flex-shrink: 0;
}
.view-toggle button {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
}
.view-toggle button:first-child {
    border-radius: 4px 0 0 4px;
}
.view-toggle button + button {
    margin-left: -1px;
}
.view-toggle button:last-child {
    border-radius: 0 4px 4px 0;
}
.view-toggle button:hover {
    color: var(--text);
    border-color: var(--accent-dim);
    z-index: 1;
}
.view-toggle button.active {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--color-accent-tint-8);
    z-index: 2;
}
.view-toggle-label {
    font-size: 0.75rem;
    font-family: inherit;
}
.view-toggle button:has(.view-toggle-label) {
    width: auto;
    padding: 0 0.5rem;
    gap: 0.3rem;
}

/* Tile grid */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
    padding-right: 1rem;
    padding-bottom: 1rem;
    align-content: start;
}
/* Infinite scroll */
.infinite-scroll-sentinel {
    grid-column: 1 / -1;
    height: 1px;
    width: 100%;
    pointer-events: none;
}
.tile-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.tile-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    /* Skip layout/paint for off-screen cards so scrolling stays smooth on
       weaker (mobile) GPUs. Intrinsic size is a placeholder height for
       not-yet-rendered cards; keep it near a typical card height to minimise
       scrollbar drift. */
    content-visibility: auto;
    contain-intrinsic-size: auto 140px;
}
.tile-card:hover {
    border-color: var(--accent-dim);
    background: var(--color-card-mid);
}
.recipe-card, .exchange-card, .crafting-tree-card {
    cursor: default;
}
.tile-card-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border);
}
.tile-card.tile-card-compact .tile-card-header {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.tile-card-header .pin-icon {
    font-size: 0.6rem;
}
.tile-card-header .badge-flag {
    font-size: 0.55rem;
    padding: 0.05rem 0.3rem;
}
.tile-card-name {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--accent);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
a.tile-card-name:hover {
    text-decoration: underline;
}
.tile-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 0.75rem;
}
/* Icon row inside tile cards for addon category pages (scopes / silencers / launchers) */
.tile-card-icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem 0 0.25rem;
    margin: 0 15% 0.25rem;
    border-bottom: 1px solid var(--color-overlay-white-6);
}
.tile-card-icon-row .addon-img-tile-icon {
    max-width: 200px;
    height: 2.5rem;
}
.tile-card-icon-row.tile-icon-large .addon-img-tile-icon {
    height: 4rem;
}
.tile-stat-row:has(.tile-ammo-list) {
    grid-column: 1 / -1;
}
.tile-ammo-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem;
    min-width: 0;
}
.tile-ammo-list .badge-ammo {
    white-space: nowrap;
}
.table-ammo-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}
.tile-stat-row .badge,
.tile-stat-row .badge-ammo,
.tile-stat-row .badge-firemode,
.tile-stat-row .badge-flag {
    font-size: 0.6rem;
    padding: 0 0.35rem;
    line-height: 1.3;
}
.tile-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}
.tile-stat-row .stat-label {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tile-stat-row .stat-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "calt" 0;
    font-size: 0.68rem;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}
.stat-positive {
    color: var(--color-green-positive);
}
.stat-negative {
    color: var(--color-red-warm-soft);
}
.stat-warning {
    color: var(--color-accent);
}
.stat-radiation-restore {
    color: var(--color-blue-soft);
}

/* Heal dots */
.modal-heal-row .stat-label {
    min-width: 5.5rem;
}
.modal-heal-grid .modal-heal-row {
    gap: 0.75rem;
}
.heal-cell .heal-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.heal-cell .heal-row + .heal-row {
    margin-top: 0.15rem;
}
.heal-row-label {
    font-size: 0.55rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 5.5rem;
}
.heal-parts {
    display: flex;
    gap: 0.5rem;
}
.heal-part {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.heal-part.heal-active {
    color: var(--text);
}
.heal-dots {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.05em;
    vertical-align: -0.05em;
}
.dot.filled {
    color: var(--color-green-positive);
}
.dot.empty {
    color: var(--border);
}

/* Item table */
.table-wrap {
    flex: 1;
    overflow: auto;
}
.item-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.item-table th,
.item-table td {
    text-align: left;
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.item-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    border-bottom: none;
    box-shadow: inset 0 -2px 0 var(--border);
    user-select: none;
    cursor: pointer;
}
.item-table thead th:hover {
    color: var(--accent);
}
.sort-icon {
    font-size: 0.65rem;
    margin-left: 0.125rem;
    color: var(--accent);
}
.item-table td {
    font-family: var(--mono);
    font-size: 0.8rem;
}
.item-table td a {
    font-family: var(--mono);
    color: var(--accent);
    text-decoration: none;
}
.item-table td a:hover {
    text-decoration: underline;
}
.clickable-row {
    cursor: pointer;
    transition: background 0.1s;
}
.clickable-row:hover {
    background: var(--card);
}

/* Badges */
.badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--border);
    color: var(--text);
}
.badge-faction {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.badge-ammo {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    background: var(--color-grey-blue-tint-12);
    color: var(--color-blue-grey);
}
.badge-ammo-alt {
    background: var(--color-accent-tan-tint-12);
    color: var(--color-accent-tan-alt);
}
/* Settings menu */
.settings-wrap {
    position: relative;
}
.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.settings-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}
.release-notes-btn {
    position: relative;
    text-decoration: none;
}
.release-notes-btn.has-unseen,
.header-mobile-items.has-unseen {
    color: var(--accent);
}
/* Anchor the unseen-notes dot to the mobile overflow button — .header-link isn't
   positioned by default, so the absolute badge would otherwise float to the header
   (appearing where the now-hidden release-notes button used to be). */
.header-mobile-items {
    position: relative;
}
.release-notes-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 9px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-surface-3);
    animation: release-notes-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes release-notes-pulse {
    0% {
        box-shadow:
            0 0 0 2px var(--color-surface-3),
            0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
    }
    70% {
        box-shadow:
            0 0 0 2px var(--color-surface-3),
            0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent);
    }
    100% {
        box-shadow:
            0 0 0 2px var(--color-surface-3),
            0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
}
/* Suppress pulse for the inline drawer-list variant — user is already engaged */
.header-drawer-item .release-notes-badge {
    animation: none;
    box-shadow: none;
    width: 8px;
    height: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .release-notes-badge {
        animation: none;
    }
}
/* Invisible full-screen catcher for the Teleported settings menu's outside clicks */
.settings-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
}
.settings-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 13rem;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
}
.settings-header {
    padding: 0.35rem 0.75rem 0.25rem;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.settings-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.7rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
    user-select: none;
}
.settings-item:hover {
    background: var(--color-overlay-white-6);
}
/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 1.75rem;
    height: 1rem;
    background: var(--color-elevated-3);
    border-radius: 0.5rem;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch.on {
    background: var(--accent);
}
.toggle-knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--color-white);
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch.on .toggle-knob {
    transform: translateX(0.75rem);
}
/* Sub-heading inside a settings menu (e.g. a radio group's title) */
.settings-subhead {
    padding: 0.4rem 0.75rem 0.15rem;
    margin-top: 0.15rem;
    border-top: 1px solid var(--color-overlay-white-6);
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
/* Radio indicator for single-select settings rows */
.settings-radio {
    position: relative;
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1.5px solid var(--color-elevated-3);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.settings-radio.on {
    border-color: var(--accent);
}
.settings-radio.on::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
}
/* Filter button & panel */
.filter-wrap {
    position: relative; /* positioning context for mobile; desktop uses Floating UI */
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: calc(100% - 4px);
    margin: 2px;
    border-radius: 3px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.filter-btn:hover {
    background: var(--color-overlay-white-8);
    color: var(--text);
}
.weapon-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 3px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.weapon-help-btn:hover {
    background: var(--color-overlay-white-8);
    color: var(--color-accent);
}
.filter-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    background: var(--accent);
    color: var(--color-black);
    font-size: 0.5rem;
    font-weight: 700;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.filter-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    min-width: 20rem;
    max-width: min(27rem, calc(100vw - 1rem));
    max-height: 28rem;
    overflow-y: auto;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
    font-size: 0.75rem;
}
.filter-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.filter-clear {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--accent);
    text-decoration: none;
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
}
.filter-clear:hover {
    text-decoration: underline;
}
.filter-group {
    padding: 0.4rem 0.75rem;
}
.filter-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.filter-group-collapse-link {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent);
    text-decoration: underline;
    opacity: 0.75;
    flex-shrink: 0;
    transition: color 0.15s;
}
.filter-group-collapse-link:hover {
    color: var(--accent);
    text-decoration: underline;
    opacity: 1;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: var(--color-accent-tint-6);
    border: 1px solid var(--accent-dim);
    border-radius: 4px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.filter-chip:hover {
    background: var(--color-accent-tint-14);
    border-color: var(--accent);
}
.filter-chip.active {
    color: #0d0d0d;
    border-color: var(--color-accent-lighter);
    background: var(--color-accent-lighter);
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--color-accent);
}
/* Slide-toggle for 'present'-type filters (Has Launcher / Can Switch Ammo) */
.filter-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.5rem 0.3rem 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.filter-toggle-wrap:hover {
    background: var(--color-overlay-white-8);
}
.filter-toggle-wrap.active .toggle-switch {
    box-shadow: 0 0 0 2px var(--color-accent);
}
.filter-chip-alt {    border-style: dashed;
    border-color: var(--color-blue-bright);
    color: var(--color-blue-bright);
}
.filter-chip-alt:hover {
    background: var(--color-blue-bright-tint-14);
    border-color: var(--color-blue-bright);
}
.filter-chip-alt.active {
    background: var(--color-blue-bright);
    border-color: var(--color-blue-bright);
    color: var(--color-black);
}
/* Range filter inputs */
.range-filters-grid {
    display: flex;
    padding: 0.4rem 0;
}
.range-filters-col {
    flex: 1;
    min-width: 0;
}
.range-filters-divider {
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
}
.range-filter-cell {
    min-width: 0;
    padding: 0 0.75rem;
}
.range-filter-cell .filter-group-label {
    padding: 0.35rem 0 0.15rem;
}
.range-inputs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
input.range-input {
    flex: 1;
    min-width: 0;
    height: 1.2rem;
    padding: 0 0.3rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.6rem;
    line-height: 1.2;
    font-family: var(--mono);
    outline: none;
    transition: border-color 0.15s;
}
.range-input:focus {
    border-color: var(--accent);
}
.range-input::-webkit-inner-spin-button,
.range-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.range-input[type="number"] {
    -moz-appearance: textfield;
}
.range-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    position: relative;
}
.range-input-wrap .range-input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.range-spinners {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.range-spin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.9rem;
    flex: 1;
    padding: 0;
    background: var(--border);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.range-spin-btn:first-child {
    border-top-right-radius: 4px;
    border-bottom: none;
}
.range-spin-btn:last-child {
    border-bottom-right-radius: 4px;
}
.range-spin-btn:hover {
    background: var(--accent-dim);
    color: var(--text);
}
.range-spin-btn:active {
    background: var(--accent);
    color: var(--color-black);
}
.range-sep {
    color: var(--text-secondary);
    font-size: 0.65rem;
    text-align: center;
}
.range-unit {
    display: inline-block;
    width: 1.6rem;
    color: var(--text-secondary);
    font-size: 0.6rem;
    text-align: left;
    flex-shrink: 0;
}

/* Sort controls */
.sort-wrap {
    position: relative;
    flex-shrink: 0;
}
.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.sort-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.sort-btn-label {
    color: var(--text);
}
.sort-btn-dir {
    font-size: 0.5rem;
    color: var(--accent);
}
.sort-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 10rem;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
}
.sort-menu-header {
    padding: 0.35rem 0.75rem 0.25rem;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.sort-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    font-size: 0.7rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
    text-align: left;
}
.sort-menu-item:hover {
    background: var(--color-overlay-white-6);
}
.sort-menu-item.active {
    color: var(--accent);
}
.sort-menu-check {
    width: 0.85rem;
    text-align: center;
    font-size: 0.6rem;
    flex-shrink: 0;
    color: var(--accent);
}
.sort-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 0.5rem;
}
.sort-menu-scroll {
    max-height: 16rem;
    overflow-y: auto;
}

/* Active filter chips row */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    margin-bottom: 0;
    padding-right: 1rem;
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.15rem 0.1rem 0.45rem;
    background: var(--color-accent-tint-8);
    border: 1px solid var(--accent-dim);
    border-radius: 999px;
    font-size: 0.6rem;
    color: var(--accent);
}
.active-filter-label {
    white-space: nowrap;
}
.active-filter-remove {
    background: none;
    border: none;
    color: var(--accent-dim);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
}
.active-filter-remove:hover {
    color: var(--color-red-strong);
}
.filter-clear-inline {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}
.filter-clear-inline:hover {
    color: var(--accent);
}

.badge-no-drop {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-red-soft-tint-18);
    color: var(--color-red-mid);
    margin-left: 0.35rem;
    vertical-align: middle;
}
.badge-no-drop s {
    text-decoration: line-through;
}
.badge-tactical-kit {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-blue-tint-18);
    color: var(--color-blue-soft);
    margin-left: 0.35rem;
    vertical-align: middle;
}
.badge-unused {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-accent-alt-tint-18);
    color: var(--color-accent-alt);
    margin-left: 0.35rem;
    vertical-align: middle;
}
.ammo-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.badge-hands {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-hands[data-hands="1"] {
    background: var(--color-green-mid-tint-15);
    color: var(--color-green-positive);
}
.badge-hands[data-hands="2"] {
    background: var(--color-blue-tint-15);
    color: var(--color-blue-soft);
}
/* Fire modes — same thin chip as .badge-ammo, tinted per mode */
.fire-mode-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}
/* In a tile the label/value row is space-between, so the chips wrap right-aligned
   against the tile edge — matching .tile-ammo-list directly above it. */
.tile-stat-row .fire-mode-list {
    justify-content: flex-end;
    min-width: 0;
}
.fire-mode-list .badge-firemode {
    white-space: nowrap;
}
.badge-firemode {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    cursor: help;
}
.badge-firemode[data-mode="single"] {
    background: var(--color-grey-blue-tint-12);
    color: var(--color-blue-grey);
}
.badge-firemode[data-mode="burst"] {
    background: var(--color-accent-alt-tint-18);
    color: var(--color-accent-alt);
}
.badge-firemode[data-mode="auto"] {
    background: var(--color-green-mid-tint-15);
    color: var(--color-green-positive);
}
.modal-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}
.modal-desc-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.35rem 0 0.25rem;
}
.desc-chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.desc-chip {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: var(--color-grey-blue-tint-12);
    color: var(--text-secondary);
}
.desc-chip-warning {
    background: var(--color-red-tint-18);
    color: var(--color-red-warm);
}
.desc-chip-scope {
    background: var(--color-teal-tint-14);
    color: var(--text-secondary);
    font-family: var(--mono);
    font-size: 0.63rem;
    cursor: pointer;
    text-decoration: none;
}
.desc-chip-scope:hover {
    background: var(--color-teal-tint-28);
    color: var(--text-primary);
}
.desc-chip-silencer {
    background: var(--color-blue-tint-14);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
}
.desc-chip-silencer:hover {
    background: var(--color-blue-tint-28);
    color: var(--text-primary);
}
.desc-chip-launcher {
    background: var(--color-orange-warm-tint-14);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
}
.desc-chip-launcher:hover {
    background: var(--color-orange-warm-tint-28);
    color: var(--text-primary);
}

/* ── Addon image tiles ─────────────────────────────────────────────────────
   Used in:
     • Gun detail modal: Compatible Scopes / Silencers / Launchers sections
     • Scope / Silencer / Launcher detail modal header (via .modal-addon-img-box)
   ────────────────────────────────────────────────────────────────────────── */
.addon-tile-group {
    align-items: flex-start;
}
.desc-chip-label.addon-tile-section-label {
    width: 100%;
    display: block;
    font-size: 15px;
    opacity: 1;
    color: var(--color-text-secondary);
    padding-top: 0.35rem;
    margin-bottom: 0.1rem;
}
.addon-img-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0.45rem 0.35rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    gap: 0.2rem;
    min-width: 3.2rem;
    max-width: 6rem;
    transition: background 0.15s;
    vertical-align: top;
    position: relative;
}
/* The icon sits on a soft, rounded "specimen plate" that hugs just the artwork —
   gives each item a distinct footprint without boxing the whole tile. */
.addon-img-tile-fig {
    position: relative;
    display: inline-flex;
}
/* Stat overlay on a compatible tile — scope magnification ("4×") or magazine capacity ("30").
   Anchored to the plate's top-right corner so it tracks the icon, not the tile. */
.addon-img-tile-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.12rem 0.26rem;
    border-radius: 3px;
    background: var(--color-teal-tint-30);
    color: var(--text-primary);
    pointer-events: none;
}
/* "Int." tag on a built-in (permanent) addon — anchored bottom-right. Signals the addon ships
   fixed to the weapon and isn't separately fitted. */
.addon-img-tile-integral {
    position: absolute;
    bottom: 0.2rem;
    right: -0.3rem;
    z-index: 1;
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.12rem 0.26rem;
    border-radius: 3px;
    background: var(--color-accent-tint-30, rgba(200, 168, 78, 0.30));
    color: var(--text-primary);
    pointer-events: auto;
}
.addon-img-tile-icon {
    width: auto;
    height: 2rem;
    max-width: 4.5rem;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}
/* Soft pool of light under the artwork — scoped to the modal's compatible-section
   tiles only (the same class is reused bare for main-grid icons). Fades to transparent
   so there are no box edges; gives each item a visible footprint without reading as a card. */
.addon-img-tile .addon-img-tile-icon {
    box-sizing: content-box;
    padding: 0.5rem 0.7rem;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.05) 48%,
        transparent 72%);
    transition: background 0.15s;
}
.addon-img-tile:hover .addon-img-tile-icon {
    background: radial-gradient(ellipse at center,
        rgba(200, 168, 78, 0.30) 0%,
        rgba(200, 168, 78, 0.10) 50%,
        transparent 74%);
}
.addon-img-tile-name {
    font-size: 0.55rem;
    text-align: center;
    word-break: break-word;
    line-height: 1.25;
    color: var(--text-secondary);
    max-width: 5.5rem;
    transition: color 0.15s;
}
/* The whole tile responds to hover together: drop the stray link underline (from
   the global a:hover rule) and brighten the label to match the icon's gold glow. */
.addon-img-tile:hover {
    text-decoration: none;
}
.addon-img-tile:hover .addon-img-tile-name {
    color: var(--accent);
}
.addon-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: flex-start;
}

/* Replaces the addon tile grid when a slot is unlocked by an upgrade rather
   than filled by a known addon (e.g. the AK underbarrel GL mount). */
.addon-upgrade-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.desc-chip-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.65;
    margin-right: 0.1rem;
}
.modal-badges {
    margin: 0 0 0.5rem 0;
    display: flex;
    flex-wrap: wrap;
    /* The badges here are two sizes (.badge-flag is larger than .badge-no-drop and
       friends); without this they stretch to the row height and their text sits at
       the top of the box instead of lining up with the taller badges. */
    align-items: center;
    gap: 0.35rem;
}
/* Spacing comes from the flex gap — drop the inline-context margin every badge
   carries, not just .badge-flag. The size normalisation is scoped to the modal
   because .badge-no-drop / .badge-tactical-kit / .badge-unused are standalone
   rules a size smaller than .badge-flag, which suits the dense list and table
   rows but reads as a mismatch next to them in this row. */
.modal-badges > * {
    margin-left: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
}
.name-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}
.name-tags .badge-flag {
    margin-left: 0;
}
.badge-flag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.badge-nimble { background: var(--color-purple-tint-18); color: var(--color-purple-light); }
.badge-integral-only { background: var(--color-grey-blue-tint-12); color: var(--color-blue-grey-soft); }
.badge-perk { background: var(--color-accent-tint-18); color: var(--color-accent-gold); }
.badge-junk { background: var(--color-grey-tint-12); color: var(--color-text-tertiary); }
.badge-craftable { background: var(--color-green-mid-tint-15); color: var(--color-green-positive); }
.badge-powered { background: var(--color-blue-tint-15); color: var(--color-blue-soft); }
.badge-cookable { background: var(--color-orange-warm-tint-18); color: var(--color-accent-orange); }
.badge-ingredient { background: var(--color-accent-tan-tint-18); color: var(--color-accent-tan); }
.badge-craft-mat { background: var(--color-purple-tint-18); color: var(--color-purple-light); }
.badge-thick-skin { background: var(--color-red-tint-15); color: var(--color-red-warm-soft); }
.badge-type { background: var(--color-blue-tint-18); color: var(--color-blue-light); }
.badge-compat { background: var(--color-blue-tint-14); color: var(--color-blue-soft); }
.badge-origin-nato { background: var(--color-teal-tint-20); color: var(--color-teal); }
.badge-origin-wp { background: var(--color-warm-brown-tint-20); color: var(--color-accent-tan); }
.badge-origin-other { background: var(--color-olive-tint-20); color: var(--color-olive); }
.badge-origin-mixed { background: var(--color-grey-blue-tint-12); color: var(--color-blue-grey-soft); }

/* Preloader (pre-Vue) */
#app-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.preloader-card {
    animation: fadeIn 0.3s ease 500ms both;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 2.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.preloader-logo {
    height: 40px;
    opacity: 0.8;
}

.preloader-title {
    font-family: var(--font-display);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    margin: 0 0 0.75rem 0;
}

.preloader-text {
    color: var(--text-secondary);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.preloader-footer {
    animation: fadeIn 0.3s ease 500ms both;
    position: absolute;
    bottom: 2rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    opacity: 0.5;
}

/* Loading (in-page, Vue-managed) */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 0;
    gap: 1.25rem;
}

.loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.error-msg {
    color: var(--color-red-strong);
    padding: 2rem 0;
}

/* Item detail page */
.item-detail {
    max-width: 48rem;
}
.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.item-detail h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.item-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.item-toolbar {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.item-toolbar .compare-wrap .copy-link-btn {
    border-radius: 4px;
}
.item-meta .cat-badge {
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--color-accent-tint-10);
    border: 1px solid var(--accent-dim);
    padding: 0.125rem 0.625rem;
    border-radius: 3px;
}
.item-meta .item-id {
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.copy-id-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-family: var(--mono);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.copy-id-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.copy-id-btn.copied {
    color: var(--color-green-mid);
    border-color: var(--color-green-tint-30);
}
.copy-id-btn .copy-id-text {
    font-family: var(--mono);
}

/* Copy Link button — matches view-toggle buttons */
/* Utility button group */
.utility-group {
    display: flex;
    flex-shrink: 0;
}
.utility-group > *:first-child > button,
.utility-group > button:first-child {
    border-radius: 4px 0 0 4px;
}
.utility-group > *:last-child > button,
.utility-group > button:last-child {
    border-radius: 0 4px 4px 0;
}
.utility-group > * + * > button,
.utility-group > * + button,
.utility-group > button + * > button {
    margin-left: -1px;
}
.utility-group > button:hover,
.utility-group > *:has(> button:hover) {
    z-index: 1;
}
.copy-link-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.copy-link-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.copy-link-btn.copied {
    color: var(--color-green-mid);
    border-color: var(--color-green-tint-30);
    z-index: 2;
}
.copy-link-btn.favorited {
    color: var(--accent);
    border-color: var(--accent-dim);
    z-index: 2;
}
.copy-link-btn.pinned {
    color: var(--accent);
    border-color: var(--accent-dim);
    z-index: 2;
}

/* Download button & menu */
.download-wrap {
    position: relative;
}
.download-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.download-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.download-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 10rem;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
}
.download-menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0.45rem 0.75rem;
    font-size: 0.7rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.12s;
}
.download-menu-item:hover {
    background: var(--color-overlay-white-6);
}

/* Stat grid (detail page / modal) */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
}
@media (min-width: 1400px) {
    .stat-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
@media (min-width: 900px) and (max-width: 1399px) {
    .stat-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.stat-grid .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}
.stat-grid .stat-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.info-hint {
    width: 1.1em;
    height: 1.1em;
    margin-left: 0.3em;
    vertical-align: middle;
    margin-top: -0.2em;
    margin-bottom: -0.2em;
    opacity: 0.55;
    cursor: help;
    color: var(--color-blue);
}
.stat-grid .stat-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "calt" 0;
    font-size: 0.78rem;
    text-align: right;
}
.stat-grid .stat-section {
    grid-column: 1 / -1;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--accent-dim);
}

/* Cross-pack comparison */
.compare-wrap {
    position: relative;
}
.compare-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 10rem;
    background: var(--color-card-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0;
    z-index: 50;
    box-shadow: 0 8px 24px var(--color-overlay-black-50);
}
.copy-link-btn.active {
    color: var(--accent);
    border-color: var(--accent-dim);
}
.cross-pack-no-changes {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    margin: 0;
}
.diff-values {
    display: inline-flex;
    gap: 0.4rem;
    align-items: baseline;
}
.diff-old {
    color: var(--text-secondary);
}
.diff-arrow {
    color: var(--text);
    opacity: 0.7;
}
.diff-new {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}
.diff-up {
    color: var(--color-green-positive);
    background: var(--color-green-tint-15);
}
.diff-down {
    color: var(--color-red-warm-soft);
    background: var(--color-red-warm-soft-tint-15);
}

/* Legacy stat table (item.html standalone) */
.stat-table {
    width: 100%;
    border-collapse: collapse;
}
.stat-table th,
.stat-table td {
    text-align: left;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.stat-table th {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.875rem;
    width: 40%;
}
.stat-table td {
    font-family: var(--mono);
    font-size: 0.875rem;
}
.stat-table .section-header td {
    color: var(--accent);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 1rem;
    border-bottom: 1px solid var(--accent-dim);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-black-70);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
}
.modal {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    max-width: calc(100vw - 16rem);
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 25px 50px -12px var(--color-overlay-black-50);
}
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--color-overlay-white-8);
    border: 1px solid var(--color-overlay-white-15);
    color: var(--color-overlay-white-50);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    z-index: 101;
    transition: background 0.15s, color 0.15s;
}
.modal-close:hover {
    background: var(--color-overlay-white-15);
    color: var(--color-overlay-white-90);
}
.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-overlay-white-8);
    border: 1px solid var(--color-overlay-white-15);
    color: var(--color-overlay-white-50);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    z-index: 101;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-nav:hover {
    background: var(--color-overlay-white-15);
    color: var(--color-overlay-white-90);
}
.modal-nav-prev { left: 0.5rem; }
.modal-nav-next { right: 0.5rem; }
.modal-description-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.modal-description-content {
    flex: 1;
    min-width: 0;
}
.modal-faction-row {
    margin-bottom: 0.35rem;
}
.modal-faction-icon {
    width: 2rem;
    height: 2rem;
    opacity: 0.8;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.modal-faction-icon:hover {
    opacity: 1;
}
.modal-body {
    padding: 0.75rem 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg);
}
.modal-body::-webkit-scrollbar {
    width: 8px;
}
.modal-body::-webkit-scrollbar-track {
    background: var(--bg);
}
.modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}
/* Modal header: two columns — left: title+meta+toolbar, right: image */
.modal-header-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
    animation: fade-in 0.25s ease;
}

/* Item image box — same visual language as .ammo-tooltip-image-wrap */
.modal-item-img-box {
    flex-shrink: 0;
    position: relative;
    background: var(--color-map-bg);
    border: 1px solid var(--color-map-elevated-2);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    min-width: 100px;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.modal-item-img {
    max-width: 160px;
    min-height: 68px;
    max-height: 68px;
    object-fit: contain;
    display: block;
}
/* Faction badge pinned to the bottom-right of the image box */
.modal-item-faction-badge {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    width: 1.75rem;
    height: 1.75rem;
    z-index: 1;
}
/* Placeholder shown when the image fails to load */
.modal-item-img-box .modal-item-img-placeholder {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    opacity: 0.35;
    pointer-events: none;
}
.modal-item-img-box.no-icon .modal-item-img-placeholder {
    display: flex;
}
.modal-item-img-box .item-icon-placeholder-x {
    width: 60px;
    height: 28px;
}
.modal-item-img-box .item-icon-placeholder-text {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Header content — natural width so image sits right next to it */
.modal-header-content {
    min-width: 0;
}

/* Collapse image below content on very small screens */
@media (max-width: 500px) {
    .modal-header-layout {
        flex-direction: column;
    }
    .modal-item-img-box {
        display: none;
    }
}

/* Small image for addon items (scopes / silencers / launchers) in detail modal */
.modal-addon-img-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.5rem;
    background: var(--color-map-bg);
    border: 1px solid var(--color-map-elevated-2);
    border-radius: 6px;
}
.modal-addon-img-box .modal-addon-img {
    height: 2.5rem;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}
@media (max-width: 500px) {
    .modal-addon-img-box {
        display: none;
    }
}

.modal-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-pin-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.modal-pin-icon:hover {
    opacity: 0.8 !important;
}
.modal-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    margin: 0 0 0.25rem 0;
}

/* Item icons */
.item-icon {
    vertical-align: middle;
    object-fit: contain;
    flex-shrink: 0;
}
.item-icon-sm {
    width: 20px;
    height: 20px;
    margin-right: 0.35rem;
}
.item-icon-float {
    float: right;
    position: relative;
    margin: 0 0 0.5rem 1rem;
    animation: fade-in 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.item-icon-float-faction {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 1;
}
.item-icon-float .item-icon-lg {
    display: block;
    vertical-align: top;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.item-icon-float .item-icon-lg.item-icon-landscape {
    transform: translateY(0.75rem);
    opacity: 1;
}
.item-icon-float .item-icon-lg.item-icon-portrait {
    opacity: 1;
}
.item-icon-float .item-icon-placeholder {
    position: relative;
    width: 120px;
    height: 60px;
    inset: auto;
}
.item-icon-float.no-icon .item-icon-placeholder {
    display: flex;
}
.item-icon-banner {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    animation: fade-in 0.3s ease;
    padding: 0.75rem;
    overflow: hidden;
}
.item-icon-banner:has(.item-icon-ammo) {
    background: var(--color-overlay-white-7);
}
.item-icon-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    max-width: 180px;
    min-height: 60px;
}
.item-icon-ammo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    overflow: hidden;
    min-width: 0;
}
.item-icon-ammo-divider {
    width: 1px;
    height: 60px;
    background: var(--color-overlay-white-15);
    flex-shrink: 0;
}
.item-icon-ammo-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.15rem;
    overflow: hidden;
    align-items: center;
}
.item-icon-ammo-img {
    width: 100px;
    height: auto;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.item-icon-ammo-img:hover {
    opacity: 1;
}
.item-icon-ammo-img.ammo-alt {
    opacity: 0.5;
}
.item-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-icon-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.3;
    border: 1px solid var(--text-secondary);
    border-radius: 4px;
    box-sizing: border-box;
}
.item-icon-main.no-icon .item-icon-placeholder,
.item-icon-wrapper.no-icon .item-icon-placeholder {
    display: flex;
    animation: fade-in 0.3s ease;
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.item-icon-placeholder-x {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.item-icon-placeholder-text {
    position: relative;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.item-icon-lg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.item-icon-hidden {
    display: none;
}

/* Drop sources */
.drop-sources {
    margin-top: 1.25rem;
}
.drop-sources h2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--accent-dim);
}
.drop-sources h2.section-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    user-select: none;
}
.drop-sources h2.section-toggle:hover {
    color: var(--color-accent-light);
}
.drop-sources h2.section-toggle .section-title-link {
    color: inherit;
    text-decoration: none;
}
.drop-sources h2.section-toggle .section-title-link:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
}
.section-chevron {
    transition: transform 0.2s;
    transform: rotate(90deg);
    flex-shrink: 0;
}
.drop-sources.collapsed .section-chevron {
    transform: rotate(0deg);
}
.drop-sources.collapsed > *:not(h2) {
    display: none;
}
.drop-sources.collapsed h2 {
    margin-bottom: 0;
    padding-bottom: 0.3rem;
    border-bottom-style: dashed;
}
.drop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

/* ── Ammo compare table in gun detail modal ─────────────── */
.ammo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ammo-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    color: var(--color-text);
}
.ammo-compare-table th {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.ammo-compare-table td {
    padding: 0.28rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.ammo-compare-table tr:last-child td {
    border-bottom: none;
}
.ammo-compare-table .ammo-alt-row td {
    color: var(--color-text-secondary);
}
.ammo-stat-cell {
    font-family: var(--mono);
    text-align: right;
    white-space: nowrap;
}
.ammo-stat-cell.ammo-best {
    color: var(--color-green-positive);
    font-weight: 600;
}
.ammo-variant-link {
    color: var(--color-accent);
    text-decoration: none;
}
.ammo-variant-link:hover {
    text-decoration: underline;
}
.ammo-alt-tag {
    margin-left: 0.3rem;
    vertical-align: middle;
}
.ammo-arrow {
    margin-left: 0.2rem;
    font-size: 0.55rem;
    vertical-align: middle;
}
.arrow-up   { color: var(--color-green-positive); }
.arrow-down { color: var(--color-red-soft); }
.arrow-neutral { color: var(--color-text-secondary); }
.drop-faction {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.drop-faction-icon {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 0.1rem;
    opacity: 0.85;
}
.drop-faction-body {
    flex: 1;
    min-width: 0;
}
.drop-faction-name {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    color: var(--text);
}
.drop-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.drop-rank {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: var(--color-accent-tint-10);
    color: var(--accent);
}

/* Stash drop locations */
.stash-drop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}
.stash-drop-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    text-align: center;
}
.stash-drop-map {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stash-drop-chances {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
}
.stash-chance-common {
    color: var(--color-white);
}
.stash-chance-rare {
    color: var(--color-accent);
}
.stash-drop-ecos {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    font-size: 0.6rem;
    color: var(--text-secondary);
}

/* Toolkit rates heatmap table */
.toolkit-rates-view {
    padding: 0;
    overflow-x: auto;
    min-width: 0;
}
.toolkit-rates-table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 0.7rem;
}
.toolkit-rates-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.toolkit-rates-table th {
    background: var(--card);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.toolkit-rates-table th:hover {
    color: var(--text);
}
.toolkit-rates-table td {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--border);
}
.toolkit-rates-table tbody tr:hover {
    background: var(--card-raised);
}
.toolkit-map-col {
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}
.toolkit-rate-col {
    text-align: right;
    font-family: var(--mono);
    color: var(--text);
}
.toolkit-rates-table td.toolkit-rate-col {
    transition: background 0.15s;
}

/* Pin column */
.pin-col-header {
    width: 1.2rem;
    min-width: 1.2rem;
    max-width: 1.2rem;
    cursor: default !important;
}
.pin-col-header:hover {
    color: var(--text-secondary) !important;
}
.pin-col {
    width: 1.2rem;
    min-width: 1.2rem;
    max-width: 1.2rem;
    text-align: center;
    padding: 0.1rem !important;
    cursor: pointer;
}
.pin-icon {
    font-size: 0.75rem;
    opacity: 0.25;
    filter: grayscale(1);
    transition: opacity 0.15s, filter 0.15s;
    cursor: pointer;
}
.pin-icon.pinned {
    opacity: 1;
    filter: none;
}
.clickable-row:hover .pin-icon {
    opacity: 0.55;
}
.clickable-row:hover .pin-icon.pinned {
    opacity: 1;
}
.pin-icon.pin-disabled {
    opacity: 0.1;
    cursor: not-allowed;
}

/* Favorite icon */
.fav-col-header {
    width: 1.2rem;
    min-width: 1.2rem;
    max-width: 1.2rem;
    cursor: default !important;
}
.fav-col {
    width: 1.2rem;
    min-width: 1.2rem;
    max-width: 1.2rem;
    text-align: center;
    padding: 0.1rem !important;
    cursor: pointer;
}
.fav-icon {
    font-size: 0.85rem;
    opacity: 0.25;
    color: var(--text-secondary);
    transition: opacity 0.15s, color 0.15s;
    cursor: pointer;
}
.fav-icon.favorited {
    opacity: 1;
    color: var(--accent);
}
.fav-icon:hover {
    opacity: 0.7;
}
.fav-icon.favorited:hover {
    opacity: 0.85;
}
.clickable-row:hover .fav-icon {
    opacity: 0.55;
}
.clickable-row:hover .fav-icon.favorited {
    opacity: 1;
}
.tile-card-header .fav-icon {
    font-size: 0.7rem;
}
.modal-fav-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.modal-fav-icon:hover {
    opacity: 0.8 !important;
}

.badge-category {
    margin-left: auto;
    background: var(--color-accent-tint-15);
    color: var(--accent);
}

/* Favorites toolbar toggle */
.fav-filter-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1;
    transition: all 0.15s;
}
.fav-filter-btn:hover {
    border-color: var(--accent-dim);
    color: var(--accent);
}
.fav-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-black);
}
.fav-filter-star {
    font-size: 0.8rem;
}

/* Favorites empty state */
.favorites-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.fav-icon-inline {
    color: var(--accent);
    font-size: 0.9rem;
}

/* Compare bar */
.compare-bar {
    background: var(--color-surface-4);
    border-top: 1px solid var(--border);
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
}
.compare-bar-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--accent-dim);
}
.compare-bar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}
.compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    color: var(--text);
    max-width: 200px;
}
.compare-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compare-chip-cat {
    font-size: 0.55rem;
    color: var(--text-secondary);
    background: var(--border);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    flex-shrink: 0;
}
.compare-chip-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
}
.compare-chip-remove:hover {
    color: var(--color-red-strong);
}
.compare-bar-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.compare-btn {
    background: var(--accent);
    color: var(--color-black);
    border: none;
    border-radius: 4px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.compare-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.compare-btn:not(:disabled):hover {
    opacity: 0.85;
}
.compare-clear-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.compare-clear-btn:hover {
    color: var(--color-red-strong);
    border-color: var(--color-red-strong);
}

/* Compare modal */
.compare-modal {
    width: 100%;
    max-width: 60rem;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
}
.compare-header {
    padding: 1.5rem 2rem 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.compare-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.compare-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 1rem 2rem 2rem;
    display: flex;
    flex-direction: column;
}
.compare-view-toggle {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.compare-view-toggle button {
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: all 0.15s;
}
.compare-view-toggle button:hover {
    border-color: var(--accent-dim);
}
.compare-view-toggle button.active {
    background: var(--border);
    color: var(--text);
    border-color: var(--accent-dim);
}
.compare-chart-wrap {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.build-radar-section {
    grid-column: 1 / -1;
}
.build-radar-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.25rem;
}
.build-radar-wrap {
    max-width: 350px;
    margin: 0 auto;
}
.compare-table-wrap {
    overflow: auto;
    flex: 1;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.compare-table {
    border-collapse: collapse;
    font-size: 0.8rem;
    table-layout: fixed;
    width: 100%;
}
.compare-table th,
.compare-table td {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
}
.compare-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg);
    font-weight: 500;
    font-size: 0.75rem;
    border-bottom: 2px solid var(--border);
    vertical-align: bottom;
}
.compare-label-col {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 2;
    color: var(--text-secondary);
    width: 8rem;
    border-right: 1px solid var(--border);
}
.compare-item-col {
    text-align: center;
}
.compare-item-name {
    display: block;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.8rem;
}
.compare-item-cat {
    display: block;
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.compare-label {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 1;
    color: var(--text-secondary);
    font-size: 0.75rem;
    border-right: 1px solid var(--border);
}
.compare-value {
    text-align: center;
    font-family: var(--mono);
}

/* Compare highlighting */
.compare-icon {
    font-size: 0.6rem;
    margin-right: 0.2rem;
}
.stat-best {
    color: var(--color-green-positive);
}
.stat-best .compare-icon {
    color: var(--color-green-positive);
}
.stat-worst {
    color: var(--color-red-warm-soft);
}
.stat-worst .compare-icon {
    color: var(--color-red-warm-soft);
}

/* Hamburger + backdrop (hidden on desktop) */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}
.hamburger-btn span {
    display: block; width: 22px; height: 2px;
    background: var(--text-secondary); border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sidebar-backdrop { display: none; }
.filter-panel-backdrop { display: none; }
.filter-panel-close { display: none; }

/* Full-screen overlay (added by JS when panel won't fit as dropdown) */
.filter-panel-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: auto;
    min-width: unset;
    max-width: none;
    max-height: none;
    border-radius: 0;
    z-index: 160;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Remove overflow clipping from ancestors so fixed panel can cover full viewport */
.filter-fullscreen-active .content,
.filter-fullscreen-active .layout,
.filter-fullscreen-active #app {
    overflow: visible;
}
.filter-fullscreen-active .filter-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 155;
    background: var(--color-overlay-black-50);
}
.filter-panel-fullscreen .filter-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
}

/* ── Site Footer ────────────────────────────────────────── */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    gap: 0.75rem;
}
.footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.footer-center {
    flex: 1;
    text-align: center;
}
.footer-credit-short {
    display: none;
}
.footer-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    text-decoration: none;
}
.footer-right:hover {
    color: var(--color-text);
    text-decoration: none;
}
.footer-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--color-text);
    text-decoration: none;
}
.site-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.site-footer a:hover {
    color: var(--accent);
}
.footer-sep {
    color: var(--text-secondary);
}

/* Outfit Exchange */
.exchange-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Direction / view controls sit above the two faction axes. */
.exchange-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    padding-right: 1rem;
}
.exchange-dir .exchange-dir-btn {
    gap: 0.3rem;
    padding: 0 0.55rem;
}
.exchange-dir-glyph {
    opacity: 0.75;
}
.exchange-view-toggle {
    margin-left: auto;
}
.exchange-faction-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 0.4rem;
    padding-right: 1rem;
}
.exchange-axis-label {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 6.5rem;
}
.exchange-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.exchange-chip:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.exchange-chip.active {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--color-accent-tint-8);
}
.exchange-chip-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.85;
}

/* Exchange cards vary from 1 to 12 trades, so let each keep its own height
   instead of stretching to the tallest card in its row. */
.exchange-view .tile-grid {
    align-items: start;
}

/* Card: a trade slip. The outfit handed in reads as body text, everything
   received is accent-coloured, and an arrow gutter separates the two. */
.exchange-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    /* clip, not hidden: `overflow: hidden` makes this grid item a scroll
       container, which zeroes its automatic minimum size — the grid row then
       collapses to a 2px sliver. `clip` keeps the header gradient inside the
       card radius without that side effect. For the same reason, never give
       this card `min-height: min-content`: .tile-card is size-contained while
       content-visibility skips it, so min-content resolves to 0. */
    overflow: clip;
    /* Placeholder height while the card is off-screen; exchange cards run
       taller than the .tile-card default, so this keeps scrolling steadier. */
    contain-intrinsic-size: auto 200px;
}
.exchange-give {
    position: relative;
    padding: 0.45rem 0.6rem 0.4rem;
    background: linear-gradient(180deg, var(--color-card-alt), var(--card));
    border-bottom: 1px solid var(--border);
}
.exchange-give::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--exchange-faction-color, var(--color-border-strong));
}
.exchange-give-emblem {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    object-fit: contain;
    /* Since the kicker no longer names the faction, this emblem carries it —
       so it reads at the same weight as the faction icons in the rows below. */
    opacity: 0.85;
    pointer-events: none;
}
.exchange-kicker {
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    position: relative;
}
.exchange-give-name {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    position: relative;
}
.exchange-give-name a {
    color: var(--text);
}
.exchange-give-name a:hover {
    color: var(--color-accent-light);
    text-decoration: none;
}
.exchange-give-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    font-family: var(--mono);
    font-size: 0.5rem;
    color: var(--text-secondary);
    margin-top: 0.05rem;
    position: relative;
}
/* Middot separators between whichever stats an outfit actually has. */
.exchange-give-stats span + span::before {
    content: "·";
    margin-right: 0.35rem;
    color: var(--text-secondary);
    opacity: 0.6;
}
.exchange-give-stats span {
    white-space: nowrap;
}
.exchange-results-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem 0.15rem;
    font-family: var(--mono);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.exchange-results-count {
    letter-spacing: 0.04em;
}
/* Sits over the delta column so the sign has a stated reference. */
.exchange-delta-head {
    margin-left: auto;
    letter-spacing: 0.04em;
    cursor: help;
}
.exchange-card .exchange-results {
    display: flex;
    flex-direction: column;
    padding: 0 0.3rem 0.4rem;
}
.exchange-result-row {
    display: grid;
    grid-template-columns: 4.8rem 0.9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.3rem;
    border-radius: 3px;
}
.exchange-result-row:hover {
    background: var(--color-accent-tint-6);
}
.exchange-result-faction {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    min-width: 0;
    font-size: 0.63rem;
}
.exchange-result-faction span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exchange-result-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
    opacity: 0.85;
    flex-shrink: 0;
}
.exchange-result-arrow {
    justify-self: center;
    color: var(--color-border-strong);
    flex-shrink: 0;
}
.exchange-result-row:hover .exchange-result-arrow {
    color: var(--accent-dim);
}
.exchange-result-name {
    font-family: var(--mono);
    font-size: 0.67rem;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exchange-result-name a {
    color: var(--accent);
    text-decoration: none;
}
.exchange-result-name a:hover {
    text-decoration: underline;
}
.exchange-delta {
    font-family: var(--mono);
    font-size: 0.52rem;
    padding: 0.02rem 0.3rem;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.exchange-delta-up {
    color: var(--color-green-positive);
    background: var(--color-green-tint-15);
}
.exchange-delta-down {
    color: var(--color-red);
    background: var(--color-red-tint-12);
}
.exchange-delta-even {
    color: var(--text-secondary);
}
.exchange-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Matrix: rows are what you hand in, columns who you trade with. */
.exchange-matrix-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
.exchange-matrix-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--card);
}
.exchange-matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}
.exchange-matrix th,
.exchange-matrix td {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
    text-align: left;
}
.exchange-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-card-alt);
    font-family: var(--mono);
    font-weight: 400;
    font-size: 0.54rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.exchange-matrix thead th .exchange-result-icon {
    vertical-align: -3px;
    margin-right: 0.2rem;
}
.exchange-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-card-alt);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.64rem;
    color: var(--text);
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exchange-matrix thead th:first-child {
    left: 0;
    z-index: 3;
}
.exchange-matrix tbody th a {
    color: var(--text);
}
.exchange-matrix tbody th a:hover {
    color: var(--color-accent-light);
    text-decoration: none;
}
.exchange-matrix td {
    font-family: var(--mono);
    font-size: 0.57rem;
    color: var(--accent);
}
.exchange-matrix td a {
    color: var(--accent);
}
.exchange-matrix-empty {
    color: var(--color-elevated);
}
.exchange-matrix tbody tr:hover td {
    background: var(--color-accent-tint-6);
}
.exchange-matrix-legend {
    font-family: var(--mono);
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

/* Quick Navigation Modal */
.quick-nav-modal {
    max-width: 26rem;
    width: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.quick-nav-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.quick-nav-search-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.quick-nav-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
}
.quick-nav-input::placeholder {
    color: var(--text-secondary);
}
.quick-nav-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0;
}
.quick-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text);
    transition: background 0.1s;
}
.quick-nav-item:hover,
.quick-nav-item.active {
    background: var(--border);
}
.quick-nav-item.active {
    color: var(--accent);
}
.quick-nav-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quick-nav-item-group {
    font-size: 0.72rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.quick-nav-item.active .quick-nav-item-group {
    color: var(--accent);
    opacity: 0.7;
}
.quick-nav-empty {
    padding: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
}
.quick-nav-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.quick-nav-footer kbd {
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
}

/* Keyboard Shortcuts Modal */
.shortcut-modal {
    max-width: 40rem;
    height: auto;
}
.shortcut-modal-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text);
}
.shortcut-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.shortcut-group h3 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    margin-top: 0;
}
.shortcut-group h3:not(:first-child) {
    margin-top: 1rem;
}
.shortcut-list {
    margin: 0;
    padding: 0;
}
.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    gap: 0.75rem;
}
.shortcut-row dt {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.shortcut-row dd {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text);
    text-align: right;
}
.shortcut-or {
    font-size: 0.72rem;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.7;
    margin: 0 0.05rem;
}
.shortcut-row--highlight {
    background: var(--color-accent-tint-8);
    border-radius: 4px;
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.shortcut-row--highlight dt,
.shortcut-row--highlight dd {
    color: var(--accent);
}
.shortcut-row--highlight kbd {
    color: var(--accent);
    background: var(--color-accent-tint-15);
    border-color: var(--color-accent-tint-35);
}
.shortcut-row--touch {
    opacity: 0.7;
}
.shortcut-row--touch dt {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}
/* On non-touch devices: dim the swipe row since it doesn't apply */
@media (hover: hover) and (pointer: fine) {
    .shortcut-row--touch-highlight {
        opacity: 0.45;
        background: transparent;
    }
    .shortcut-row--touch-highlight dt,
    .shortcut-row--touch-highlight dd {
        color: var(--text-secondary);
    }
}
kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text);
    background: var(--color-overlay-white-8);
    border: 1px solid var(--color-overlay-white-15);
    border-radius: 4px;
    min-width: 1.4rem;
    text-align: center;
}

/* Hover "drawer" for touch devices: a non-navigating hover popover (the upgrade
   tree, whose nodes have no tap action) becomes a full-width card docked to the
   bottom edge behind a dismissable backdrop. Hovers whose triggers navigate on
   tap are suppressed on touch instead. Applied generically — the popover's
   positioned root gets .hover-sheet and its direct child is the card. */
.hover-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 400;
    display: flex;
    align-items: flex-end;
    /* !important so the backdrop captures the tap (closing the drawer) and clicks
       don't fall through to the controls underneath — the popover's own scoped
       `pointer-events: none` would otherwise win on specificity. */
    pointer-events: auto !important;
    max-height: none;
    overflow: visible;
    background: var(--color-overlay-black-50);
}
.hover-sheet > * {
    pointer-events: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
}

/* Vue transitions */
/* Fade (backdrops) */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
/* Modal (scale + fade) */
.modal-enter-active,
.modal-leave-active {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.modal-enter-from,
.modal-leave-to {
    opacity: 0;
    transform: scale(0.95);
}
/* Slide-up (compare bar) */
.slide-up-enter-active,
.slide-up-leave-active {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.slide-up-enter-from,
.slide-up-leave-to {
    transform: translateY(100%);
    opacity: 0;
}

/* Filter bar: collapse the secondary controls into an expandable second row
   before the single-line layout would otherwise wrap. The wrap point depends on
   the sidebar (220px) plus the control widths, so this triggers wider than the
   768px mobile breakpoint. */
@media (max-width: 960px) {
    .filter-bar { flex-wrap: wrap; gap: 0 0.5rem; }
    .filter-input-group { flex: 1 1 auto; max-width: none; min-width: 0; order: 1; }
    /* height:auto lets align-self:stretch match the button to the search input
       height across breakpoints (35px base, 44px touch target on mobile);
       a definite height would otherwise defeat the stretch. */
    .filter-expand-btn { display: inline-flex; order: 2; align-self: stretch; height: auto; width: 2.25rem; }
    .filter-bar .item-count { display: none; }
    .filter-bar-spacer { display: none; }

    /* Collapsible second row holding the secondary controls */
    .filter-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        flex: 1 1 100%;
        order: 3;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.28s ease, opacity 0.18s ease, margin-top 0.28s ease;
    }
    .filter-controls.expanded {
        max-height: 12rem;
        opacity: 1;
        margin-top: 0.5rem;
    }
    /* Within the controls row: sort sits left, the rest is pushed to the right edge */
    .filter-controls .weapon-help-btn { order: 3; margin-left: auto; }
    .filter-controls .view-toggle { order: 4; margin-left: auto; }
    .filter-controls .weapon-help-btn + .view-toggle { margin-left: 0; }
    .filter-controls .utility-group { order: 5; }
}

/* Mobile */
@media (max-width: 768px) {
    /* Hamburger visible */
    .hamburger-btn { display: flex; }
    /* ...except in full-width tool sections, where the sidebar drawer is empty */
    .hamburger-btn.hamburger-hidden { display: none; }

    /* Header: compact */
    .site-header { padding: 0.5rem 0.75rem; gap: 0.5rem; }
    .site-logo { display: none; }
    .header-pack-label { font-size: 0.8rem; }
    .header-desktop-items { display: none !important; }
    .nav-bar.header-desktop-items { display: flex !important; }
    .header-mobile-items { display: flex; }
    .header-search-btn { margin-left: auto; }

    /* Nav bar: horizontal scroll, hide non-tab chrome, pin settings on the right */
    .nav-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-right: 0;
    }
    .nav-bar::-webkit-scrollbar { display: none; }
    .nav-bar .nav-bar-item { flex-shrink: 0; }
    .nav-bar-spacer,
    .nav-bar-online { display: none; }
    .nav-bar .settings-wrap {
        position: sticky;
        right: 0;
        margin-left: auto;
        flex-shrink: 0;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 0 0.5rem 0 1.75rem;
        background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--color-surface-3) 100%, black 8%) 60%,
            color-mix(in srgb, var(--color-surface-3) 100%, black 12%) 100%);
        pointer-events: auto;
    }
    .nav-bar .settings-wrap .settings-menu { right: 0.25rem; }
    /* Compact gear in the nav tab strip (smaller than the 44px touch target default) */
    .nav-bar .settings-btn { width: 1.5rem; height: 1.5rem; }

    /* What's New banner: center horizontally */
    .whats-new-banner { left: 0.75rem; right: 0.75rem; width: auto; max-width: none; }

    /* Layout: single column, sidebar out of flow */
    .layout, .layout.sidebar-hidden, .layout.sidebar-collapsed { grid-template-columns: 1fr; grid-template-rows: 1fr; }

    /* Sidebar: fixed drawer from left */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 260px; max-width: 80vw; z-index: 150;
        background: var(--bg); border-right: 1px solid var(--border);
        transform: translateX(-100%); transition: transform 0.25s ease;
        overflow-y: auto; padding: 0.5rem 0;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop {
        display: block; position: fixed; inset: 0;
        z-index: 140; background: var(--color-overlay-black-50);
    }
    .sidebar button, .sidebar .sidebar-group-items a { min-height: 44px; font-size: 0.85rem; }
    .sidebar-collapse-btn { display: none; }
    .layout.sidebar-collapsed { grid-template-columns: 1fr; }
    .layout.sidebar-collapsed .sidebar { display: none; }

    /* Content: reduce padding */
    .content { padding: 0.75rem 0 0 0.75rem; }

    /* Filter bar wrapper: re-anchor to edges at mobile padding */
    .filter-bar-wrapper { margin: -0.75rem 0 0.75rem -0.75rem; padding: 0.5rem 0 0.5rem 0.75rem; }

    /* Filter-bar single-row + collapsible controls live in their own wider
       breakpoint (see @media max-width: 960px) so the toggle appears before the
       bar would wrap. Only the edge-padding tweak is mobile-specific here. */
    .filter-bar { padding-right: 0.75rem; }

    /* Tile grid: single-column on small screens */
    .tile-grid {
        grid-template-columns: 1fr;
        padding-right: 0.75rem;
    }
    /* Let the card shrink to its column (grid items default to min-width:auto) and
       wrap the header badges, so a heavily-flagged item can't force the grid wider
       than the viewport and trigger horizontal scrolling. */
    .tile-card { min-width: 0; }
    .tile-card-header { flex-wrap: wrap; }

    /* Active filters / exchange chips: reduce right padding */
    .active-filters { padding-right: 0.75rem; }
    .exchange-faction-chips { padding-right: 0.75rem; }
    .exchange-controls { padding-right: 0.75rem; }
    .exchange-matrix-wrap { padding-right: 0.75rem; }
    /* Axis labels stack above their chips rather than squeezing them. */
    .exchange-axis-label { flex-basis: 100%; min-width: 0; }
    .exchange-result-row { grid-template-columns: 4.4rem 0.8rem minmax(0, 1fr) auto; }
    .crafting-trees-toolbar { padding-right: 0.75rem; }

    /* Table */
    .item-table { font-size: 0.7rem; }

    /* Modals: near full-screen — fill height too (base height is 100dvh-4rem),
       leaving only the 0.5rem backdrop padding as top/bottom spacing. */
    .modal-backdrop { padding: 0.5rem; }
    .modal { max-width: none; height: calc(100vh - 1rem); height: calc(100dvh - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); border-radius: 6px; }
    .modal-nav { display: none; }
    .modal-body { padding: 1rem; }
    .modal-title { font-size: 1.15rem; }
    .compare-modal { height: calc(100vh - 1rem); height: calc(100dvh - 1rem); max-width: none; border-radius: 6px; }
    .compare-header { padding: 0.75rem 1rem 0; flex-wrap: wrap; gap: 0.5rem; }
    .compare-content { padding: 0.5rem 0.5rem 1rem; }
    .compare-title { font-size: 0.95rem; }
    .compare-table { font-size: 0.7rem; min-width: 500px; }
    .compare-label-col { width: 5.5rem; }
    .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .compare-chart-wrap { max-width: 100%; }
    .stat-grid { grid-template-columns: 1fr; }

    /* Compare bar: wrap */
    .compare-bar { flex-wrap: wrap; padding: 0.5rem 0.75rem; }
    .compare-bar-icon { display: none; }
    .compare-bar-chips { flex: 1 1 100%; overflow-x: auto; }
    .compare-bar-actions { flex: 1 1 100%; justify-content: flex-end; }

    /* Footer: single row, icon-only links */
    .site-footer { padding: 0.1rem 0.5rem; }
    .footer-label { display: none; }
    .footer-center .footer-credit-full { display: none; }
    .footer-center .footer-credit-short { display: inline; }
    .footer-left, .footer-right { flex: none; }
    .footer-center { flex: 1; text-align: center; }
    .site-footer a svg { margin-right: 0; }

    /* Touch targets: 44px minimum */
    .sort-btn, .filter-input-group,
    .view-toggle button, .copy-link-btn, .download-btn, .header-link { min-width: 44px; min-height: 44px; }
    .compare-btn, .compare-clear-btn { min-height: 44px; padding-left: 1rem; padding-right: 1rem; }

    /* Filter panel: full-screen overlay at mobile */
    .filter-panel {
        position: fixed !important;
        inset: 0 !important;
        width: auto;
        min-width: unset;
        max-width: none;
        max-height: none;
        border-radius: 0;
        z-index: 160;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .filter-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 155;
        background: var(--color-overlay-black-50);
    }
    .filter-panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        background: none;
        border: none;
        color: var(--text);
        font-size: 1.25rem;
        cursor: pointer;
    }

    /* Range filters: single column */
    .range-filters-grid { flex-direction: column; }
    .range-filters-divider { width: auto; height: 1px; margin: 0.25rem 0.5rem; }

    /* Touch-friendly sizing */
    .filter-chip { min-height: 44px; padding: 0.4rem 0.85rem; font-size: 0.75rem; }
    .filter-chips { gap: 0.4rem; }
    .range-input { min-height: 36px; font-size: 0.75rem; padding: 0.2rem 0.5rem; }
    .range-spin-btn { width: 1.5rem; font-size: 0.45rem; }
    .filter-group { padding: 0.5rem 1rem; }
    .filter-group-label { font-size: 0.75rem; }
    .range-filter-cell .filter-group-label { font-size: 0.75rem; }
}

/* Recipe cards */
.recipe-card {
    cursor: pointer;
}
.recipe-ingredients {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.recipe-ingredient {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}
.recipe-ingredient a {
    color: var(--accent);
    text-decoration: none;
}
.recipe-ingredient a:hover {
    text-decoration: underline;
}
.recipe-base {
    color: var(--accent);
    font-weight: 600;
}
.recipe-plus {
    color: var(--text-secondary);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.recipe-ing-amount {
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: var(--color-grey-blue-tint-12);
    color: var(--color-blue-grey);
    flex-shrink: 0;
}
.recipe-ingredients-modal {
    gap: 0.35rem;
}
.recipe-ingredients-modal .recipe-ingredient {
    font-size: 0.85rem;
}
.recipe-ingredients-modal .recipe-ing-amount {
    font-size: 0.7rem;
}
.recipe-used-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.recipe-used-item {
    font-size: 0.85rem;
}
.recipe-used-item a {
    color: var(--accent);
}
.material-sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.75rem;
}
.material-source {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.75rem;
}
.material-source .recipe-ing-amount {
    flex-shrink: 0;
    font-size: 0.75rem;
}
.material-source .material-from {
    flex-shrink: 0;
}
.material-from {
    color: var(--text-secondary);
    font-size: 0.7rem;
}
.material-source a {
    color: var(--accent);
    text-decoration: none;
}
.material-source a:hover {
    text-decoration: underline;
}
.recipe-used-item a:hover {
    text-decoration: underline;
}

/* Crafting Trees */
.crafting-trees-view {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.25rem 0;
    flex: 1;
    min-height: 0;
}
.crafting-trees-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.crafting-trees-toolbar .view-toggle {
    margin-left: 0;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.icon-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
    background: var(--color-overlay-white-5);
}
.crafting-tree-card .tile-card-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
}
.crafting-tree-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.tree-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    line-height: 1.6;
    border-left: 1px solid var(--border);
}
.tree-toggle {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.55rem;
    user-select: none;
    width: 0.8rem;
    text-align: center;
    flex-shrink: 0;
}
.tree-toggle:hover {
    color: var(--accent);
}
.tree-leaf-dot {
    color: var(--text-secondary);
    font-size: 0.55rem;
    width: 0.8rem;
    text-align: center;
    flex-shrink: 0;
}
.tree-raw {
    color: var(--text-secondary);
}
.tree-row .recipe-ing-amount {
    margin-left: auto;
}

.crafting-graph-view {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.25rem 0;
    flex: 1;
    min-height: 0;
}
.crafting-expand-toggle-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    height: 1.75rem;
    padding: 0 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.15s, border-color 0.15s;
}
.crafting-expand-toggle-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.crafting-graph-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.crafting-graph-title {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 700;
}
.crafting-graph-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.crafting-graph-list {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--color-overlay-white-1);
    overflow: auto;
    min-height: 0;
    padding: 0.45rem;
}
.crafting-graph-collapsible {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--color-surface-3);
}
.crafting-graph-collapsible + .crafting-graph-collapsible {
    margin-top: 0.45rem;
}
.crafting-graph-collapsible-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    background: transparent;
    color: var(--text);
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    text-align: left;
    font-size: 0.74rem;
    border-bottom: 1px solid var(--color-overlay-white-3);
}
.crafting-graph-collapsible-head:hover {
    background: var(--color-overlay-white-3);
}
.crafting-graph-caret {
    color: var(--accent);
    width: 0.75rem;
    flex-shrink: 0;
    text-align: center;
}
.crafting-graph-collapsible-name {
    font-weight: 600;
}
.crafting-graph-body {
    padding: 0.65rem;
    overflow: auto;
}
.crafting-graph-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}
.crafting-graph-root-wrap {
    flex: 0 0 17rem;
    width: 17rem;
    align-self: center;
}
/* Right column: contains horizontal root→spine bridge + vertical spine + ingredient rows */
.crafting-graph-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    /* left margin = gap between root and spine */
    margin-left: 1.5rem;
    /* left padding = room for vertical spine drawn via ::after */
    padding-left: 1.6rem;
}
/* Horizontal bridge: root right-edge → spine (at vertical centre of this column) */
.crafting-graph-right::before {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 50%;
    width: 1.5rem;
    height: 2px;
    background: var(--color-accent);
    transform: translateY(-50%);
    border-radius: 2px;
}
.crafting-graph-ingredients-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 0 0 auto;
    position: relative;
}
/* Vertical spine: drawn on the ingredients-wrap, full height then clipped by first/last child */
.crafting-graph-ingredients-wrap::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border-strong);
    border-radius: 2px;
}
/* Clip spine above the first branch midpoint */
.crafting-graph-ingredient-row:first-child::after {
    content: "";
    position: absolute;
    left: -1.7rem;
    top: 0;
    width: 4px;
    height: 50%;
    /* must match .ctree-recipe-body background */
    background: var(--color-surface-3);
    z-index: 1;
}

/* Clip spine below the last branch midpoint */
.crafting-graph-ingredient-row:last-child::after {
    content: "";
    position: absolute;
    left: -1.7rem;
    top: 50%;
    width: 4px;
    height: calc(50% + 1px);
    /* must match .ctree-recipe-body background */
    background: var(--color-surface-3);
    z-index: 1;
}

.crafting-graph-ingredient-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding-left: 1.4rem;
}
/* Horizontal branch: spine → ingredient node */
.crafting-graph-ingredient-row::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 50%;
    width: calc(1.6rem + 1.4rem);
    height: 2px;
    background: linear-gradient(to right, var(--color-accent), var(--color-blue-mid));
    transform: translateY(-50%);
    border-radius: 2px;
}
.crafting-graph-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--color-elevated-4);
    border-radius: 3px;
    background: var(--color-surface-5);
    padding: 0.45rem;
}
.crafting-graph-node--root {
    width: 100%;
}
.crafting-graph-node--ingredient {
    width: 15rem;
}
.crafting-graph-node.clickable {
    cursor: pointer;
}
.crafting-graph-node.clickable:hover {
    border-color: var(--accent-dim);
    background: var(--color-card);
}
.crafting-graph-node-main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.45rem;
}
.crafting-graph-node-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
}
.crafting-graph-node-text {
    flex: 1;
    min-width: 0;
}
.crafting-graph-node-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
}
.crafting-graph-node-amount {
    margin-top: 0.2rem;
    font-size: 0.62rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.crafting-graph-amount-label {
    color: var(--text-secondary);
}
.crafting-graph-amount-value {
    font-family: var(--mono);
    color: var(--text);
    font-weight: 600;
}
.crafting-graph-stats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--color-elevated-4);
    margin: 0;
    padding-left: 0;
}
.crafting-graph-stat {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.6rem;
}
.crafting-graph-stat-label {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.crafting-graph-stat-value {
    font-family: var(--mono);
    font-weight: 600;
    text-align: right;
}
.crafting-graph-stat.stat-positive .crafting-graph-stat-value { color: var(--color-green-positive); }
.crafting-graph-stat.stat-negative .crafting-graph-stat-value { color: var(--color-red-warm-soft); }

/* ============================================================
   Crafting Inner Tree View  (.ctree-*)
   ============================================================ */

/* Recipe card wrapper */
.ctree-recipe-wrap {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-3);
    overflow: hidden;
    flex-shrink: 0;
}

/* Scrollable tree body – horizontal scroll for wide trees */
.ctree-recipe-body {
    padding: 0.7rem 0.9rem;
    overflow-x: auto;
}

/* ── Node layout: node box + optional right-side children column ── */
.ctree-node-layout {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

/* ── Node box ── */
.ctree-node {
    border: 1px solid var(--color-elevated-4);
    border-radius: 5px;
    background: var(--color-surface-5);
    padding: 0.45rem 0.6rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 9rem;
    max-width: 16rem;
}

.ctree-node--root {
    min-width: 12rem;
    border-color: var(--color-accent-dim);
    background: var(--color-accent-tint-5);
}

.ctree-node--clickable {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ctree-node--clickable:hover {
    border-color: var(--color-accent-dim);
    background: var(--color-card);
}

/* Expandable craftable ingredient nodes */
.ctree-node--expandable {
    cursor: pointer;
    border-left: 3px solid var(--color-accent-dim);
    background: var(--color-accent-tint-5);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ctree-node--expandable:hover {
    border-color: var(--color-accent);
    border-left-color: var(--color-accent);
    background: var(--color-accent-tint-8);
    box-shadow: 0 0 0 1px var(--color-accent-dim) inset;
}
.ctree-node--sub-expanded {
    border-left-color: var(--color-accent);
    border-color: var(--color-accent-dim);
    background: var(--color-accent-tint-10);
}
.ctree-node--sub-expanded:hover {
    border-color: var(--color-accent);
}

/* Expand toggle indicator — pill-style button */
.ctree-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.45rem 0.15rem 0.3rem;
    border-radius: 4px;
    background: var(--color-accent-tint-8);
    border: 1px solid var(--color-accent-dim);
    align-self: flex-start;
    transition: background 0.15s, border-color 0.15s;
}
.ctree-node--expandable:hover .ctree-expand-toggle,
.ctree-node--sub-expanded .ctree-expand-toggle {
    background: var(--color-accent-tint-12);
    border-color: var(--color-accent);
}
.ctree-expand-arrow {
    display: inline-block;
    font-size: 0.6rem;
    color: var(--color-accent);
    transition: transform 0.18s ease;
    line-height: 1;
}
.ctree-expand-arrow--open {
    transform: rotate(90deg);
}
.ctree-expand-count {
    font-size: 0.62rem;
    color: var(--color-accent-tan);
    font-family: var(--mono);
    white-space: nowrap;
}

/* Node icon */
.ctree-node-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    margin-bottom: 0.15rem;
}

/* Node name */
.ctree-node-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}
.ctree-node--root .ctree-node-name a,
.ctree-node--root .ctree-node-name a:hover {
    color: var(--color-accent);
    text-decoration: none;
}
.ctree-node--root .ctree-node-name a:hover {
    text-decoration: underline;
}
.ctree-node--child .ctree-node-name a {
    color: var(--color-accent);
    text-decoration: none;
}
.ctree-node--child .ctree-node-name a:hover {
    text-decoration: underline;
}
.ctree-node-raw {
    color: var(--color-text-secondary);
}

/* Amount badge (x2, x4…) */
.ctree-node-amount {
    font-size: 0.63rem;
    color: var(--color-text-secondary);
    font-family: var(--mono);
}

/* Toolkit tier badge */
.ctree-node-tier {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    font-family: var(--mono);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-top: 0.1rem;
    background: var(--color-accent-tint-8);
    color: var(--color-accent);
    align-self: flex-start;
}
.ctree-tier-1 { color: #7ab85c; background: rgba(122, 184, 92, 0.12); }
.ctree-tier-2 { color: var(--color-blue-mid); background: var(--color-blue-tint-12); }
.ctree-tier-3 { color: var(--color-accent); background: var(--color-accent-tint-8); }
.ctree-tier-4 { color: #b85c8a; background: rgba(184, 92, 138, 0.12); }
.ctree-tier-5 { color: var(--color-red-soft); background: var(--color-red-tint-12); }
.ctree-tier-6 { color: var(--color-purple-mid); background: var(--color-purple-tint-12); }

/* Recipe requirement label */
.ctree-node-req {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    margin-top: 0.05rem;
}

/* ── Right column (horizontal bridge + vertical spine + child rows) ── */
.ctree-right {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    /* gap between node box and spine */
    margin-left: 1.4rem;
    /* room for vertical spine */
    padding-left: 1.6rem;
}

/* Horizontal bridge: node right-edge → vertical spine */
.ctree-right::before {
    content: "";
    position: absolute;
    left: -1.4rem;
    top: 50%;
    width: 1.4rem;
    height: 2px;
    background: var(--color-border-strong);
    transform: translateY(-50%);
    border-radius: 2px;
}

/* Vertical spine spanning all child rows */
.ctree-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.ctree-rows::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border-strong);
    border-radius: 2px;
}

/* Clip spine above the first child's midpoint */
.ctree-row:first-child::after {
    content: "";
    position: absolute;
    left: -1.7rem;
    top: 0;
    width: 4px;
    height: 50%;
    /* must match .ctree-recipe-body background */
    background: var(--color-surface-3);
    z-index: 1;
}

/* Clip spine below the last child's midpoint */
.ctree-row:last-child::after {
    content: "";
    position: absolute;
    left: -1.7rem;
    top: 50%;
    width: 4px;
    height: calc(50% + 1px);
    /* must match .ctree-recipe-body background */
    background: var(--color-surface-3);
    z-index: 1;
}

/* Individual child row */
.ctree-row {
    position: relative;
    padding-left: 1.4rem;
}

/* Horizontal branch: spine → child node */
.ctree-row::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 50%;
    width: calc(1.6rem + 1.4rem);
    height: 2px;
    background: var(--color-border-strong);
    transform: translateY(-50%);
    border-radius: 2px;
}


/* ================================
   Build Planner
   (restored from pre-274b6d6 style.css)
   ================================ */
.build-planner {
    padding: 0 0.75rem 0.5rem 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
@media (max-width: 768px) {
    .build-planner { padding-right: 0.75rem; }
}
.build-columns {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
    align-items: stretch;
}
.build-col-left {
    min-width: 0;
}
.build-col-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.build-col-right .build-inventory {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.build-col-right .build-inventory-body {
    flex: 1;
}
.build-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.build-toolbar-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
}
.build-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.75rem;
    padding: 0 0.55rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.build-toolbar-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.build-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.build-toolbar-btn.copied {
    color: var(--color-green);
    border-color: var(--color-green);
}
.build-toolbar-badge {
    background: var(--accent);
    color: var(--color-black);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border-radius: 8px;
    line-height: 1.2;
}
/* ── Build planner player / faction header ── */
.build-player-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.5rem 0.15rem 0.35rem;
    margin-bottom: 0.75rem;
}
.build-player-faction {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 0.2rem;
    transition: background 0.15s;
}
.build-player-faction:hover {
    background: var(--card-raised);
}
.build-player-faction-icon {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
    filter: brightness(0.9);
    transition: filter 0.15s, opacity 0.15s;
    display: block;
}
.build-player-faction:hover .build-player-faction-icon {
    filter: brightness(1.1);
    opacity: 0.5;
}
.build-player-faction-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.build-player-faction:hover .build-player-faction-overlay {
    opacity: 1;
}
.build-faction-picker {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.3rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    z-index: 100;
    min-width: 16rem;
}
.build-faction-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.build-faction-option:hover {
    background: var(--color-overlay-white-5);
    color: var(--text);
}
.build-faction-option.active {
    background: var(--color-accent-tint-15);
    color: var(--accent);
}
.build-faction-option-icon {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
}
.build-player-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.build-player-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.4rem 0.15rem 0;
    border-radius: 4px;
    transition: background 0.15s;
}
.build-player-name-wrap:hover {
    background: var(--card-raised);
}
.build-player-name-edit {
    color: var(--text-secondary);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.build-player-name-wrap:hover .build-player-name-edit,
.build-player-name:focus ~ .build-player-name-edit {
    opacity: 1;
}
.build-player-name {
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--mono);
    padding: 0;
    outline: none;
    width: 10rem;
}
.build-player-faction-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Saved builds dropdown */
.build-saved-dropdown {
    position: relative;
}
.build-saved-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem;
    z-index: 120;
    box-shadow: 0 4px 12px var(--color-overlay-black-40);
}
/* Save modal */
.build-save-modal {
    max-width: 340px;
    height: auto;
}
.build-save-modal .build-save-form {
    display: flex;
    gap: 0.4rem;
}
.build-save-modal .build-save-input {
    flex: 1;
    height: 1.75rem;
    padding: 0 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.7rem;
    outline: none;
}
.build-save-modal .build-save-input:focus {
    border-color: var(--accent-dim);
}
.build-save-modal .build-save-input::placeholder {
    color: var(--text-secondary);
}

/* Save Import modal */
.save-import-modal {
    max-width: 720px;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow: hidden;
}
.save-import-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.save-import-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    border-radius: 4px;
}
.save-import-close:hover {
    color: var(--text);
    background: var(--color-overlay-white-8);
}
.save-import-modal > .modal-body {
    overflow-y: auto;
    padding-bottom: 0.75rem;
}
.save-import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.save-import-dropzone:hover,
.save-import-dragover {
    border-color: var(--accent-dim);
    background: var(--color-overlay-white-2);
}
.save-import-icon {
    color: var(--text-secondary);
    opacity: 0.6;
}
.save-import-dropzone-label {
    color: var(--text);
    font-size: 0.8rem;
    margin: 0;
}
.save-import-browse-btn {
    cursor: pointer;
}
.save-import-hint {
    color: var(--text-secondary);
    font-size: 0.65rem;
    margin: 0;
    opacity: 0.7;
}
.save-import-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.save-import-error-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}
.save-import-error-msg {
    color: var(--color-red-light);
    font-size: 0.75rem;
    margin: 0;
}
.save-import-warning {
    background: var(--color-orange-tint-12);
    border: 1px solid var(--color-orange-tint-35);
    color: var(--color-orange-bright);
    font-size: 0.72rem;
    padding: 0.4rem 0.65rem;
    border-radius: 4px;
}
.save-import-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.save-import-summary {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.save-import-filename {
    color: var(--text);
    font-size: 0.75rem;
}
.save-import-stats {
    color: var(--text-secondary);
    font-size: 0.65rem;
}
.save-import-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0.75rem 0 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.save-import-section-label:first-child {
    margin-top: 0;
}
.save-import-options {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    font-size: 0.65rem;
}
.save-import-stash-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    color: var(--text-secondary);
}
.save-import-stash-toggle input {
    accent-color: var(--accent-dim);
    cursor: pointer;
}
.save-import-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.save-import-col {
    min-width: 0;
}
.save-import-slots {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 280px;
    overflow-y: auto;
}
.save-import-slot {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.7rem;
}
.save-import-slot-label {
    flex-shrink: 0;
    width: 80px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding-top: 0.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.save-import-slot-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.save-import-slot-item {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 0.65rem;
    color: var(--text);
    cursor: default;
}
.save-import-slot-item:hover {
    border-color: var(--accent-dim);
}
.save-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.save-import-confirm {
    background: var(--accent-dim) !important;
    border-color: var(--accent-dim) !important;
    color: var(--color-card) !important;
    font-weight: 600;
}
.save-import-confirm:hover {
    filter: brightness(1.15);
}
.save-import-cancel {
    opacity: 0.7;
}


.build-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.6rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.build-action-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
}
.build-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.build-action-btn.copied {
    color: var(--color-green);
    border-color: var(--color-green);
}

/* Loadout area: weapon columns flanking center loadout */
.build-loadout-area {
    margin-bottom: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.build-loadout-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: flex-start;
}
.build-weapon-col {
    flex: 0 0 9rem;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.build-weapon-col .build-slot-group {
    padding: 0.35rem 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.build-weapon-col .build-slot {
    min-height: 2.4rem;
}
.build-weapon-col .build-slot-label {
    margin-bottom: -0.3rem;
}
.build-slot-ammo-row { margin-top: -0.25rem; }.build-loadout-box {
    flex: 1;
    min-width: 9rem;
}
.build-slot-ammo .build-slot-name { white-space: normal; word-break: break-word; }
.build-loadout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.build-loadout-toggle {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}
.build-loadout-header-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.build-loadout-summary {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
}
.build-loadout-summary:hover {
    background: var(--color-overlay-white-3);
}
.build-loadout-summary-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.build-loadout-summary-empty .build-loadout-summary-text {
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.5;
}
/* Equipment Slots */
.build-slots {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.5rem;
}
.build-slot-group {
    min-width: 0;
}
.build-slot-group-multi {
    min-width: 0;
}
.build-slot-label {
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.build-slot-counter {
    color: var(--accent);
    font-weight: 600;
}
.build-slot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.build-slot-row > .build-slot {
    flex: 1 1 calc(20% - 0.3rem);
    min-width: 0;
}
.build-slot {
    position: relative;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-width: 7rem;
    min-height: 2.4rem;
    box-sizing: border-box;
}
.build-slot.filled {
    background: var(--card-raised);
    border: 2px solid var(--border);
}
.build-slot.filled:hover {
    border-color: var(--accent-dim);
    background: var(--color-accent-tint-5);
}
.build-slot.empty {
    border: 2px dashed var(--color-overlay-white-15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.build-slot.empty:hover {
    border-color: var(--accent-dim);
    background: var(--color-accent-tint-5);
}
.build-slot-sm {
    padding: 0.2rem 0.5rem;
    min-height: 1.8rem;
}
.build-slot-sm .build-slot-name {
    font-size: 0.65rem;
}
.build-slot-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
    color: var(--text-secondary);
}
.build-slot-name {
    display: block;
    font-size: 0.65rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.8rem;
}
.build-slot-meta {
    display: block;
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}
.build-slot-remove {
    position: absolute;
    top: 0.15rem;
    right: 0.3rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.build-slot-remove:hover {
    color: var(--color-red-vibrant);
    background: var(--color-red-vibrant-tint-10);
}
.build-slot-add {
    font-size: 0.65rem;
    color: var(--text-secondary);
    line-height: 1;
    white-space: nowrap;
}
.build-slot-hint {
    font-size: 0.5rem;
    color: var(--text-secondary);
}
.build-slot-type-tag {
    display: inline-block;
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
}
.build-slot-tag-belt {
    color: var(--color-accent-warm);
    background: var(--color-accent-warm-tint-20);
}
.build-slot-tag-artifact {
    color: var(--color-purple-mid);
    background: var(--color-purple-tint-20);
}
.build-slot-outfit.filled { border-left: 3px solid var(--color-blue-mid); }
.build-slot-helmet.filled { border-left: 3px solid var(--color-teal); }
.build-slot-backpack.filled { border-left: 3px solid var(--color-green-soft); }
.build-slot-belt.filled { border-left: 3px solid var(--color-accent-warm); }
.build-slot-artifact.filled { border-left: 3px solid var(--color-purple-mid); }
.build-slot-weapon.filled { border-left: 3px solid var(--color-red-muted); }
.build-slot-grenade.filled { border-left: 3px solid var(--color-warm-brown); }
.build-slot-ammo.filled { border-left: 3px solid var(--color-olive); display: flex; align-items: center; }

/* Combined Stats */
.build-stats {
    margin-bottom: 0;
}
.build-stats-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.build-stats-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 0;
    font-size: 0.7rem;
}
.build-stats-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.build-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.25rem;
}
.build-stats-header-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.build-expand-all-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.5rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.build-expand-all-btn:hover {
    color: var(--accent);
}
.build-expand-all-btn.active {
    color: var(--accent);
    background: var(--color-accent-tint-10);
}
.build-stats-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0;
    row-gap: 0.1rem;
    padding: 0.35rem 0.6rem 0.5rem;
}
.build-stats-body > .build-tile-wrap {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-left: 1px solid var(--border);
}
.build-stats-body > .build-tile-wrap:nth-child(3n+1) {
    border-left: none;
    padding-left: 0;
}
.build-stats-col {
    min-width: 0;
}
/* Tile-style stat rows */
.build-tile-wrap {
    min-width: 0;
}
.build-tile-stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0;
    cursor: default;
}
.build-tile-bar {
    flex: 1;
    height: 3px;
    background: var(--color-overlay-white-6);
    border-radius: 1.5px;
    overflow: hidden;
    opacity: 0.75;
    min-width: 1.5rem;
}
.build-tile-bar-fill {
    display: flex;
    height: 100%;
    border-radius: 1px;
    transition: width 0.2s ease;
}
.build-tile-stat.build-prot-expandable {
    cursor: pointer;
}
.build-tile-stat.build-prot-expandable:hover {
    background: var(--color-overlay-white-2);
}
.build-tile-label {
    color: var(--text-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.build-tile-value {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.build-stat-section-label {
    font-size: 0.55rem;
    color: var(--accent-dim);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.build-stat-section-label-spaced {
    margin-top: 0.5rem;
}
.build-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    cursor: pointer;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--color-overlay-border-50);
    font-size: 0.65rem;
}
.build-stat-row:last-child {
    border-bottom: none;
}
.build-stat-row:hover {
    background: var(--color-overlay-white-2);
}
.build-stat-row .stat-label {
    color: var(--text-secondary);
    font-size: 0.65rem;
}
.build-stat-row .stat-value {
    font-size: 0.65rem;
    font-family: var(--mono);
    text-align: right;
}
.build-stat-breakdown {
    padding: 0.1rem 0 0.2rem 0.8rem;
    margin: 0 0 0.15rem 0.4rem;
}
.build-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    color: var(--text-secondary);
    padding: 0.05rem 0;
}
.build-breakdown-arrow {
    font-size: 0.4rem;
    margin-left: 0.15rem;
}
.build-breakdown-none {
    font-style: italic;
    opacity: 0.5;
}
/* An off-zone piece still lists so the tile doesn't look like it dropped the
   item, but reads as not counting toward the total. */
.build-breakdown-inactive {
    opacity: 0.4;
}
.build-breakdown-inactive > span:last-child {
    font-style: italic;
    text-transform: lowercase;
}

/* Hit zone selector */
.build-hitzone-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.25rem 0 0.3rem;
    border-bottom: 1px solid var(--color-overlay-border-50);
}
.build-hitzone-label {
    color: var(--text-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: help;
}
.build-hitzone-btns {
    display: flex;
    gap: 2px;
}
.build-hitzone-btn {
    font-family: var(--mono);
    font-size: 0.55rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 2px;
    cursor: pointer;
}
.build-hitzone-btn:hover {
    background: var(--color-overlay-white-2);
}
.build-hitzone-btn.active {
    background: var(--color-overlay-white-2);
    border-color: var(--accent);
    color: var(--text-primary);
}
/* Marks a tile whose value depends on the selected hit zone. */
.build-zone-tag {
    font-size: 0.45rem;
    opacity: 0.6;
    margin-left: 0.25rem;
    letter-spacing: 0;
}
/* Stacked bar segments */
.build-stat-row-wrap {
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--color-overlay-border-50);
}
.build-stat-row-wrap:last-child {
    border-bottom: none;
}
.build-stat-row-wrap .build-stat-row {
    border-bottom: none;
    padding-bottom: 0;
}
.build-bar {
    display: flex;
    height: 3px;
    border-radius: 1.5px;
    overflow: hidden;
    background: var(--color-overlay-border-50);
    margin-top: 0.15rem;
}
.build-bar-seg {
    height: 100%;
    min-width: 2px;
    transition: width 0.2s ease;
}
/* Protection horizontal bar rows */
.build-prot-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    border-bottom: 1px solid var(--color-overlay-border-50);
    cursor: default;
    font-size: 0.65rem;
}
.build-prot-row:last-child {
    border-bottom: none;
}
.build-prot-row.build-prot-expandable {
    cursor: pointer;
}
.build-prot-row.build-prot-expandable:hover {
    background: var(--color-overlay-white-2);
}
.build-prot-low .build-tile-value,
.build-prot-low .build-prot-value {
    opacity: 0.45;
}
.build-prot-row:not(.build-prot-expandable) {
    cursor: default;
}
.build-prot-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid var(--text-secondary);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.build-prot-chevron-open {
    transform: rotate(90deg);
}
.build-prot-chevron-hidden {
    opacity: 0.35;
}
.build-prot-label {
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 5.5rem;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.build-prot-bar-track {
    flex: 1;
    height: 6px;
    background: var(--color-overlay-border-50);
    border-radius: 3px;
    overflow: hidden;
}
.build-prot-bar-fill {
    display: flex;
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}
.build-prot-value {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-align: right;
    white-space: nowrap;
    min-width: 3.5rem;
}
.build-prot-negative {
    color: var(--color-red);
}
/* Inline breakdown color dots */
.build-breakdown-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.build-capped-badge {
    display: inline-block;
    font-size: 0.4rem;
    background: var(--color-red-vibrant-tint-20);
    color: var(--color-red-vibrant);
    padding: 0 0.2rem;
    border-radius: 2px;
    margin-left: 0.3rem;
    vertical-align: middle;
    font-weight: 600;
}

/* Inventory Staging Area */
.build-inventory {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    flex: 1;
    container-type: inline-size;
}
.build-inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.25rem;
}
.build-inventory-sort-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.55rem;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.build-inventory-sort-btn:hover {
    color: var(--text);
    border-color: var(--border);
}
.build-inventory-sort-btn.active {
    color: var(--accent);
    border-color: var(--border);
}
.build-compare-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border);
}
.build-compare-toggle-label {
    font-size: 0.5rem;
    color: var(--text-secondary);
    opacity: 0.5;
    text-transform: uppercase;
    margin-right: 0.15rem;
}
.build-compare-toggle-btn {
    padding: 0.1rem 0.4rem;
    background: var(--color-overlay-white-4);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.55rem;
    transition: background 0.15s, color 0.15s;
}
.build-compare-toggle-btn:hover {
    background: var(--color-overlay-white-6);
}
.build-compare-toggle-btn.active {
    background: var(--color-overlay-white-8);
    color: var(--text);
    border-color: var(--accent-dim);
}
.build-inventory-body {
    padding: 0.35rem 0.5rem 0.5rem;
    min-height: 2rem;
    transition: background 0.15s;
}
.build-inventory-body.drag-over {
    background: var(--color-accent-tint-8);
    outline: 1px dashed var(--accent-dim);
    outline-offset: -2px;
}
.build-inventory-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
    position: relative;
}
.build-inventory-buttons::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
}
.build-inventory-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: var(--color-overlay-white-3);
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.build-inventory-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
    background: var(--color-overlay-white-5);
}
.build-inventory-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.build-inventory-btn-fav {
    border-style: solid;
}
.build-inventory-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
@container (min-width: 20rem) {
    .build-inventory-items {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container (min-width: 35rem) {
    .build-inventory-items {
        grid-template-columns: repeat(3, 1fr);
    }
}
.build-inventory-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.4rem 1.4rem 0.4rem 0.5rem;
    border-radius: 4px;
    background: var(--card-raised);
    border: 1px solid var(--border);
    cursor: grab;
    min-width: 0;
    transition: border-color 0.15s, background 0.15s;
}
.build-inventory-item:active {
    cursor: grabbing;
}
.build-inventory-item:hover {
    border-color: var(--accent-dim);
    background: var(--color-accent-tint-5);
}
.build-inv-outfit .build-inventory-item-type { background: var(--color-blue-tint-20); color: var(--color-blue-mid); }
.build-inv-helmet .build-inventory-item-type { background: var(--color-teal-tint-20); color: var(--color-teal); }
.build-inv-backpack .build-inventory-item-type { background: var(--color-green-tint-20); color: var(--color-green-soft); }
.build-inv-belt .build-inventory-item-type { background: var(--color-accent-warm-tint-20); color: var(--color-accent-warm); }
.build-inv-artifact .build-inventory-item-type { background: var(--color-purple-tint-20); color: var(--color-purple-mid); }
.build-inv-weapon .build-inventory-item-type { background: var(--color-red-tint-20); color: var(--color-red-muted); }
.build-inv-ammo .build-inventory-item-type { background: var(--color-olive-tint-20); color: var(--color-olive); }
.build-inv-sidearm .build-inventory-item-type { background: var(--color-red-tint-20); color: var(--color-red-muted); }
.build-inv-grenade .build-inventory-item-type { background: var(--color-warm-brown-tint-20); color: var(--color-warm-brown); }

/* Weapon stats panel */
.build-stats-divider {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    margin: 0.25rem 0;
}
.build-stats-divider ~ .build-tile-wrap {
    border-left: none;
    padding-left: 0;
}
.build-stats-section-label {
    grid-column: 1 / -1;
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.15rem;
}
.build-weapon-toggle {
    grid-column: 1 / -1;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.build-weapon-toggle-btn {
    padding: 0.2rem 0.6rem;
    background: var(--color-overlay-white-4);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.6rem;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.build-weapon-toggle-btn:hover {
    background: var(--color-overlay-white-6);
}
.build-weapon-toggle-btn.active {
    background: var(--color-overlay-white-8);
    color: var(--text);
    border-color: var(--accent-dim);
}
.build-weapon-toggle-with {
    color: var(--text-secondary);
    opacity: 0.5;
    margin: 0 0.2em 0 0.3em;
}

.build-inventory-item-name {
    font-size: 0.7rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.build-inventory-item-type {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    width: fit-content;
    margin-top: 0.3rem;
}
.build-inventory-item-remove {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.15rem 0.25rem;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.build-inventory-item-remove:hover {
    color: var(--color-red-vibrant);
    background: var(--color-red-vibrant-tint-10);
}
.build-inventory-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 2rem 1rem;
    text-align: center;
    flex: 1;
}
.build-inventory-empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.15;
}

/* Item hover popover */
.build-hover-popover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 220;
    pointer-events: none;
    max-height: 80vh;
    overflow-y: auto;
}
.build-hover-tile {
    box-shadow: 0 4px 16px var(--color-overlay-black-50);
    min-width: 18rem;
    max-width: 24rem;
    overflow: hidden;
}
.build-hover-desc {
    padding: 0.4rem 0 0;
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-overlay-white-8);
}
.build-hover-icon {
    float: right;
    margin: 0 0 0.25rem 0.5rem;
    opacity: 0.85;
}
.build-hover-icon:only-child {
    float: none;
    display: block;
    margin: 0 auto;
}
.build-hover-desc .modal-desc-meta {
    margin-top: 0.25rem;
}
.build-hover-tile--compare {
    min-width: 18rem;
    max-width: 26rem;
}
.build-compare-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 0.1rem 0.5rem;
}
.build-compare-header {
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.build-compare-vs {
    color: var(--text);
    font-weight: 400;
    font-style: italic;
}
.build-compare-sublabel {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.45;
    text-align: right;
    padding-bottom: 0.15rem;
}
.build-compare-sublabel:first-child {
    text-align: left;
}
.build-compare-grid .stat-label {
    color: var(--text-secondary);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 0;
    word-break: break-word;
}
.build-compare-val {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-align: right;
}
.build-compare-diff {
    font-family: var(--mono);
    text-align: right;
    font-size: 0.6rem;
    font-weight: 600;
}
.diff-positive { color: var(--color-green-positive); }
.diff-negative { color: var(--color-red-danger); }
.diff-zero { opacity: 0.35; }
.diff-dash { opacity: 0.25; }

/* Drag feedback on slots */
.build-slot.drag-over {
    border-color: var(--accent) !important;
    background: var(--color-accent-tint-10) !important;
}
.build-slot-row.drag-over {
    outline: 1px dashed var(--accent-dim);
    outline-offset: 2px;
    background: var(--color-accent-tint-5);
    border-radius: 4px;
}

/* Picker slot-type badge */
.build-picker-item-type {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    flex-shrink: 0;
}
.build-picker-type-outfit { color: var(--color-blue-mid); background: var(--color-blue-tint-12); }
.build-picker-type-helmet { color: var(--color-teal); background: var(--color-teal-tint-12); }
.build-picker-type-backpack { color: var(--color-green-soft); background: var(--color-green-tint-12); }
.build-picker-type-belt { color: var(--color-accent-warm); background: var(--color-accent-warm-tint-12); }
.build-picker-type-artifact { color: var(--color-purple-mid); background: var(--color-purple-tint-12); }
.build-picker-type-weapon { color: var(--color-red-muted); background: var(--color-red-tint-12); }
.build-picker-type-ammo { color: var(--color-olive); background: var(--color-olive-tint-12); }
.build-picker-type-sidearm { color: var(--color-red-muted); background: var(--color-red-tint-12); }
.build-picker-type-grenade { color: var(--color-warm-brown); background: var(--color-warm-brown-tint-12); }

/* Saved Builds (dropdown items) */
.build-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.build-saved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    transition: background 0.1s;
}
.build-saved-item:hover {
    background: var(--color-overlay-white-4);
}
.build-saved-name {
    font-size: 0.65rem;
    color: var(--accent);
    cursor: pointer;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.build-saved-name:hover {
    text-decoration: underline;
}
.build-saved-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0 0.15rem;
    flex-shrink: 0;
}
.build-saved-delete:hover {
    color: var(--color-red-vibrant);
}
.build-saved-empty {
    font-size: 0.6rem;
    color: var(--text-secondary);
    padding: 0.3rem 0.2rem;
}

/* Build Picker Modal */
.build-picker-modal {
    width: 500px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}
.build-picker-modal .modal-close {
    font-size: 1rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.build-picker-modal .modal-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.build-picker-title {
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.build-picker-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.build-picker-search {
    position: relative;
}
.build-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.build-picker-search .filter-input-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}
.build-picker-input {
    width: 100%;
    padding: 0.4rem 0.5rem 0.4rem 1.8rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.75rem;
    outline: none;
}
.build-picker-input:focus {
    border-color: var(--accent-dim);
}
.build-picker-input::placeholder {
    color: var(--text-secondary);
}
.build-picker-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.build-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--card-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.build-picker-item:hover {
    border-color: var(--accent-dim);
    background: var(--color-accent-tint-5);
}
.build-picker-item-name {
    font-size: 0.75rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}
.build-picker-item-weight {
    font-size: 0.65rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 0.25rem;
}
.build-picker-empty {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.6rem;
}

/* Tablet: 2-column stats */
@media (max-width: 1200px) {
    .build-stats-body {
        grid-template-columns: 1fr 1fr;
    }
    .build-stats-body > .build-tile-wrap:nth-child(3n+1) {
        border-left: 1px solid var(--border);
        padding-left: 0.75rem;
    }
    .build-stats-body > .build-tile-wrap:nth-child(2n+1) {
        border-left: none;
        padding-left: 0;
    }
}


/* Mobile: single column */
@media (max-width: 768px) {
    .build-columns {
        grid-template-columns: 1fr;
    }
    .build-col-left, .build-col-right {
        grid-column: 1;
        grid-row: auto;
    }
    .build-col-right .build-inventory {
        max-height: none;
    }
    .build-weapon-col {
        flex: 1 1 9rem;
    }
    .build-stats-body {
        grid-template-columns: 1fr;
    }
    .build-stats-body > .build-tile-wrap {
        border-left: none;
        padding-left: 0;
        padding-right: 0;
    }
    .build-stats-box {
        grid-template-columns: 1fr;
        gap: 0.5rem 0;
    }
    .build-slot-name {
        max-width: 100%;
    }
    .build-slot-row > .build-slot {
        flex-basis: calc(50% - 0.3rem);
    }
    .build-toolbar-actions {
        flex-wrap: wrap;
    }
    .build-picker-modal,
    .build-save-modal {
        max-width: 95vw;
    }
}

/* ── Toast notifications ── */
.toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-size: 0.85rem;
    z-index: 10000;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--color-overlay-black-40);
}
.toast--error {
    background: var(--color-red-vibrant);
    color: var(--color-white);
}
.toast-fade-enter-active,
.toast-fade-leave-active {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast-fade-enter-from,
.toast-fade-leave-to {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.5rem);
}

/* ── What's New banner ── */
.whats-new-banner {
    position: fixed;
    bottom: 1.75rem;
    right: 0.75rem;
    z-index: 10001;
    width: 400px;
    max-width: calc(100vw - 2rem);
    background: color-mix(in srgb, var(--card) 85%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--color-white));
    backdrop-filter: blur(12px);
    border-radius: 10px;
    box-shadow: 0 8px 32px var(--color-overlay-black-50), 0 0 0 1px var(--color-overlay-white-5);
    overflow: hidden;
}
.whats-new-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
}
.whats-new-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.15rem;
}
.whats-new-close:hover { color: var(--text); }
.whats-new-entries {
    padding: 0.35rem 0.4rem;
    max-height: 240px;
    overflow-y: auto;
    background: var(--card);
    margin: 0 0.35rem;
    border-radius: 6px;
    border: 2px solid var(--color-overlay-white-25);
}
.whats-new-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    border-radius: 4px;
    transition: background 0.15s ease;
}
.whats-new-entry.clickable { cursor: pointer; }
.whats-new-entry.clickable:hover { background: var(--color-overlay-white-6); }
.whats-new-entry + .whats-new-entry {
    border-top: 1px solid var(--color-overlay-white-6);
}
.whats-new-emoji {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
}
.whats-new-text {
    flex: 1;
    min-width: 0;
}
.whats-new-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}
.whats-new-entry.clickable:hover .whats-new-arrow { opacity: 1; }
.whats-new-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
}
.whats-new-footer a,
.whats-new-footer button {
    font-size: 0.75rem;
    cursor: pointer;
}
.whats-new-footer a {
    color: var(--accent);
    text-decoration: none;
}
.whats-new-footer a:hover { text-decoration: underline; }
.whats-new-dismiss {
    background: var(--color-overlay-white-8);
    border: 1px solid var(--color-overlay-white-15);
    color: var(--text);
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
    font-weight: 500;
}
.whats-new-dismiss:hover { background: var(--color-overlay-white-14); border-color: var(--color-overlay-white-25); }
.whats-new-enter-active { transition: opacity 0.3s ease, transform 0.3s ease; }
.whats-new-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
.whats-new-enter-from,
.whats-new-leave-to { opacity: 0; transform: translateY(1rem); }

@media (max-width: 600px) {
    .whats-new-banner {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
    }
}

/* ── Armor penetration scale (item modal) ─────────────────────────── */
.pen-scale { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.15rem 0 0.1rem; }

.pen-scale-head { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; }
.pen-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pen-stat-grow { margin-left: auto; text-align: right; }
.pen-stat-label { font-family: var(--font-display); font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); }
.pen-stat-val { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--text); line-height: 1; }
.pen-stat-val-sm { font-size: 0.82rem; }

/* Zone headers grow to match their span of the track below */
.pen-zones { display: flex; width: 100%; }
.pen-zone { flex-basis: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.pen-zone b { font-family: var(--mono); font-weight: 600; font-size: 0.6rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.pen-zone-stopped { color: var(--color-green-positive); align-items: flex-start; }
.pen-zone-pen { color: var(--color-red-danger); align-items: flex-end; text-align: right; }

.pen-track { position: relative; display: flex; width: 100%; margin-top: 0.1rem; border-radius: 5px; overflow: hidden; }
.pen-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.12rem; padding: 0.5rem 0.15rem 0.42rem; border-right: 1px solid var(--bg); }
.pen-seg:last-child { border-right: 0; }
.pen-seg-ap { font-family: var(--mono); font-size: 0.84rem; font-weight: 600; line-height: 1; }
.pen-seg-name { font-size: 0.53rem; line-height: 1.1; color: var(--text-secondary); text-align: center; }
.pen-seg-stopped { background: color-mix(in srgb, var(--color-green-positive) 15%, transparent); }
.pen-seg-stopped .pen-seg-ap { color: var(--color-green-positive); }
.pen-seg-pen { background: color-mix(in srgb, var(--color-red-danger) 13%, transparent); }
.pen-seg-pen .pen-seg-ap { color: var(--color-red-danger); }
.pen-seg-max { box-shadow: inset 0 -2px 0 var(--color-green-positive); }

/* Signature: the BR Class threshold sliced through the ammo spectrum */
.pen-blade { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); z-index: 2; pointer-events: none; box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 65%, transparent); }
.pen-blade::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent); }
.pen-blade-edge { box-shadow: none; }

.pen-axis { position: relative; display: flex; align-items: center; gap: 0.5rem; }
.pen-axis-rail { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(to right, color-mix(in srgb, var(--color-green-positive) 60%, transparent), color-mix(in srgb, var(--color-red-danger) 60%, transparent)); }
.pen-axis-label { font-family: var(--font-display); font-size: 0.52rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.pen-axis-label::after { content: " \2192"; }

.pen-scale-caption { font-size: 0.58rem; color: var(--text-secondary); font-style: italic; }

/* ── Ballistics hub (landing → weapons | armor) ───────────────────── */
.ballistics-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ballistics-view > .damage-sim { flex: 1; min-height: 0; }
.ballistics-view > .bl { flex: 1; min-height: 0; overflow-y: auto; }
.ballistics-view > .pm { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem clamp(1rem, 3vw, 2rem); }
.ballistics-header { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0 0.75rem 0 0; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.ballistics-tabs { display: flex; gap: 0.1rem; margin-left: -0.55rem; }
.ballistics-tabs button {
  background: none; border: 0; cursor: pointer; position: relative;
  padding: 0.4rem 0.55rem; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.ballistics-tabs button svg { width: 12px; height: 12px; opacity: 0.75; }
.ballistics-tabs button:hover { color: var(--text); }
.ballistics-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.ballistics-tabs button.active svg { opacity: 1; }
.ballistics-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.ballistics-actions { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.3rem; }
/* the calculator's topbar loses its own action row once actions teleport into the tab bar */
.ballistics-view .damage-sim-topbar { justify-content: flex-start; }