/* Village Details page styles — moved out of Views/Village/Details.cshtml so the browser caches them. */
    .level-progress-stack {
        display: flex;
        width: 100%;
        height: 10px;
        overflow: hidden;
        border-radius: 3px;
        background-color: #f5f5f5;
        box-shadow: none;
    }

    .level-progress-segment {
        height: 100%;
        transition: width .2s ease;
        background-size: 40px 40px;
        background-image: linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent );
    }

    .level-progress-current {
        background-color: #64DD17;
    }

    .level-progress-cap {
        background-color: rgba(100, 221, 23, .35);
    }

    .level-progress-max {
        background-color: #f5f5f5;
        background-image: none;
    }

    .progress-group {
        display: flex;
        flex-direction: column;
        gap: .45rem;
    }

    .unlock-overview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
    }

    .unlock-group-card {
        border: 1px solid rgba(32, 107, 196, .12);
        border-radius: .9rem;
        padding: 1rem;
        background: var(--app-surface);
        display: flex;
        flex-direction: column;
        gap: .8rem;
        min-height: 180px;
    }

    .unlock-group-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .unlock-group-list {
        display: flex;
        flex-direction: column;
        gap: .45rem;
    }

    .unlock-group-list-item {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        align-items: flex-start;
        font-size: .92rem;
    }

    .unlock-card-action {
        display: flex;
        justify-content: flex-end;
        margin-top: .35rem;
    }

    .unlock-modal-list {
        display: flex;
        flex-direction: column;
        gap: .85rem;
    }

    .unlock-modal-section {
        border: 1px solid var(--tblr-border-color);
        border-radius: .85rem;
        padding: .9rem 1rem;
        background: var(--tblr-bg-surface);
    }

    .unlock-modal-items {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        margin-top: .75rem;
    }

    .unlock-modal-item {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        align-items: flex-start;
        padding-bottom: .55rem;
        border-bottom: 1px dashed var(--tblr-border-color);
    }

    .unlock-modal-item-main {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .unlock-modal-thumb,
    .unlock-modal-thumb-fallback {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: .8rem;
        border: 1px solid rgba(98, 105, 118, .14);
        background: rgba(241, 245, 249, .95);
        object-fit: contain;
        padding: .22rem;
        flex: 0 0 auto;
    }

    .unlock-modal-thumb-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1rem;
        line-height: 1;
    }

    .unlock-modal-item:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .item-info-button {
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        font-weight: 700;
    }

    .item-info-section {
        border: 1px solid var(--tblr-border-color);
        border-radius: .75rem;
        padding: .75rem .85rem;
        background: var(--tblr-bg-surface);
    }

    .item-info-list {
        display: flex;
        flex-direction: column;
        gap: .45rem;
        margin-top: .55rem;
    }

    .item-info-row {
        display: flex;
        justify-content: space-between;
        gap: .6rem;
        align-items: flex-start;
        padding-bottom: .45rem;
        border-bottom: 1px dashed var(--tblr-border-color);
    }

    .item-info-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .item-info-header {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        margin-top: .55rem;
    }

    .level-bucket-wrap {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        margin-top: .5rem;
        padding: .65rem .7rem;
        border: 1px solid rgba(98, 105, 118, .14);
        border-radius: 12px;
        background: rgba(248, 250, 252, .88);
    }

    .level-bucket-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        padding-bottom: .1rem;
    }

    .level-bucket-row {
        padding: 0;
    }

        .level-bucket-row + .level-bucket-row {
            padding-top: .5rem;
            border-top: 1px solid rgba(98, 105, 118, .10);
        }

    .count-status-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
    }

    .item-card,
    .progress-timer-card {
        position: relative;
        overflow: hidden;
        height: 100%;
        border: 1px solid rgba(98, 105, 118, .16);
        background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 250, 252, .94) 100%);
        box-shadow: 0 .45rem 1.1rem rgba(15, 23, 42, .08), 0 .12rem .35rem rgba(15, 23, 42, .04);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        --card-top-accent: linear-gradient(90deg, rgba(32, 107, 196, .88) 0%, rgba(59, 130, 246, .78) 100%);
    }

        .item-card::before,
        .progress-timer-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: var(--card-top-accent);
            pointer-events: none;
        }

    .card-accent-primary {
        --card-top-accent: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
    }

    .card-accent-info {
        --card-top-accent: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%);
    }

    .card-accent-violet {
        --card-top-accent: linear-gradient(90deg, var(--app-accent) 0%, var(--app-accent-soft) 100%);
    }

    .card-accent-good {
        --card-top-accent: linear-gradient(90deg, #65a30d 0%, #a3e635 100%);
    }

    .card-accent-success {
        --card-top-accent: linear-gradient(90deg, #15803d 0%, #4ade80 100%);
    }

    .card-accent-warning {
        --card-top-accent: linear-gradient(90deg, #ea580c 0%, #facc15 100%);
    }

    .card-accent-danger {
        --card-top-accent: linear-gradient(90deg, #dc2626 0%, #fb7185 100%);
    }

    .item-card .card-body,
    .progress-timer-card .card-body {
        position: relative;
        z-index: 1;
        padding: .75rem;
    }

    .item-card:hover,
    .progress-timer-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .85rem 1.65rem rgba(15, 23, 42, .12), 0 .25rem .55rem rgba(15, 23, 42, .06);
    }

    .item-card .fw-bold.fs-3,
    .progress-timer-card .fw-bold.fs-3,
    .progress-timer-card .fw-bold.fs-4 {
        font-size: 1rem !important;
        line-height: 1.25;
    }

    .item-card .badge,
    .progress-timer-card .badge,
    .compact-card .badge {
        font-size: .64rem;
    }

    .item-card .text-secondary.small,
    .progress-timer-card .text-secondary.small,
    .compact-card .text-secondary.small {
        font-size: .72rem;
    }

    .section-heading {
        margin-bottom: 0;
    }

    .countdown-value {
        font-variant-numeric: tabular-nums;
    }

    .compact-card > .card-header {
        padding: .65rem .9rem;
        background: rgba(232, 240, 255, .82);
        border-bottom: 1px solid rgba(32, 107, 196, .10);
        color: var(--tblr-body-color);
    }

        .compact-card > .card-header .card-title,
        .compact-card > .card-header .text-secondary {
            color: var(--tblr-body-color) !important;
        }

    .section-card > .card-header {
        padding: .7rem .9rem;
        background: transparent;
        border-bottom: 1px solid rgba(98, 105, 118, .14);
        color: var(--tblr-body-color);
    }

        .section-card > .card-header .card-title,
        .section-card > .card-header .text-secondary {
            color: inherit !important;
        }

    .compact-card > .card-body,
    .section-card > .card-body {
        padding: .8rem;
    }

    .detail-search-toolbar {
        position: sticky;
        top: 1rem;
        z-index: 25;
    }

    .detail-search-row.is-filtered-out,
    .detail-card-col.is-filtered-out {
        display: none;
    }

    .row.row-cards {
        --tblr-gutter-x: 1rem;
        --tblr-gutter-y: 1rem;
    }

    .section-card,
    .village-profile-card {
        box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .05);
    }

    @media (min-width: 1400px) {
        .detail-card-col {
            min-width: 15.34em;
            flex: 1 1 15.34em;
            display: flex;
        }
    }

    .suggestion-note {
        font-size: .72rem;
        color: var(--tblr-secondary);
    }

    .summary-stat-card .card-body {
        padding: .8rem .9rem;
    }

    .summary-stat-card .display-6 {
        font-size: 1.65rem;
        line-height: 1.1;
    }

    .summary-stat-card .text-secondary.text-uppercase {
        font-size: .72rem;
        letter-spacing: .04em;
    }

    .village-hero-card {
        border: 0;
    }

    .village-hero {
        padding: 1rem 1.1rem;
        color: #fff;
        background: linear-gradient(135deg, rgba(32, 107, 196, .96) 0%, rgba(112, 72, 232, .94) 100%);
    }

        .village-hero .badge.bg-white {
            background: rgba(255, 255, 255, .92) !important;
        }

    .village-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
        justify-content: flex-end;
    }

        .village-hero-actions .btn {
            --tblr-btn-padding-y: .35rem;
            --tblr-btn-padding-x: .65rem;
            --tblr-btn-font-size: .78rem;
        }

        .village-hero-actions .btn-icon {
            width: 2.65rem;
            height: 2.65rem;
            padding: 0;
        }

    .village-hero-avatar {
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.65rem;
        border-radius: .75rem;
    }

    .village-hero-name {
        font-size: 1.85rem;
        line-height: 1.08;
    }

    .village-hero-subtle {
        color: rgba(255, 255, 255, .78);
    }

    .village-hero-capabilities {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
        margin-top: .85rem;
    }

        .village-hero-capabilities .badge {
            font-size: .72rem;
            box-shadow: 0 .125rem .25rem rgba(15, 23, 42, .12);
        }

    @media (max-width: 991.98px) {
        .village-hero-actions {
            width: 100%;
            justify-content: flex-start;
        }

        .village-hero-name {
            font-size: 1.45rem;
        }
    }

    .village-profile-card {
        border: 1px solid rgba(98, 105, 118, .12);
        border-radius: 1.5rem;
        overflow: hidden;
        background: var(--app-surface);
    }

    .village-top-main {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        border-bottom: 1px solid rgba(98, 105, 118, .10);
    }

    .top-main-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
        gap: 1.25rem;
        align-items: center;
    }

    .league-icon, .clan-badge-icon {
        width: 5rem;
        height: 5rem;
        object-fit: contain;
        border-radius: 1rem;
        background: var(--app-surface);
        box-shadow: 0 .25rem .75rem rgba(15, 23, 42, .08);
        border: 1px solid rgba(98,105,118,.12);
        padding: .25rem;
    }

    .player-heading {
        font-size: 2rem;
        line-height: 1.05;
        margin: 0;
    }

    .player-subtle {
        color: var(--tblr-secondary);
    }

    .top-stat-grid {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 1px;
        background: rgba(98, 105, 118, .10);
    }

        .top-stat-grid > div {
            background: var(--app-surface);
            padding: 1rem 1.1rem;
            text-align: center;
        }

    .village-overview-grid {
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
        align-items: stretch;
    }
    @media (max-width: 1199px) {
        .village-overview-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .village-overview-card {
        position: relative;
        border: 1px solid rgba(0, 0, 0, .05);
        border-radius: 20px;
        background: var(--app-surface);
        box-shadow: 0 10px 25px rgba(0,0,0,.10);
        padding: 1.15rem;
        min-height: 100%;
        overflow: hidden;
    }

    .village-overview-card.is-soft {
        background: var(--app-surface);
    }

    .village-pulse-card {
        width: 100%;
        max-width: 245px;
        min-height: 0;
        padding: 1.15rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .village-overview-top {
        display: flex;
        align-items: flex-start;
        gap: .8rem;
        margin-bottom: 1rem;
    }

    .village-overview-thumb {
        width: 108px;
        height: 108px;
        border-radius: 18px;
        border: 1px solid #eee;
        background: var(--app-surface);
        object-fit: contain;
        padding: .35rem;
        flex: 0 0 auto;
    }

    .village-overview-thumb-fallback {
        width: 108px;
        height: 108px;
        border-radius: 18px;
        border: 1px solid #eee;
        background: var(--app-surface);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 2.3rem;
        color: var(--app-fade);
        flex: 0 0 auto;
    }

    .village-overview-title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: #333;
        line-height: 1.08;
    }

    .village-overview-badges {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        margin-top: .45rem;
        align-items: center;
    }

    .village-overview-pill {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 28px;
        padding: .28rem .65rem;
        border-radius: 7px;
        background: #e9ecef;
        color: #212529;
        font-size: .68rem;
        font-weight: 700;
        white-space: nowrap;
        line-height: 1;
    }

    .village-overview-pill.is-green {
        background: #2ecc71;
        color: #fff;
    }

    .village-overview-meta {
        margin-top: .7rem;
        color: #212529;
        font-size: .8rem;
        line-height: 1.18;
    }

    .village-overview-meta strong {
        font-weight: 700;
    }

    .village-overview-meta > div + div {
        margin-top: .15rem;
    }

    .village-overview-info-icon {
        color: #2ecc71;
        font-size: .78rem;
        margin-left: .3rem;
    }

    .village-overview-status {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 32px;
        min-width: 112px;
        padding: .35rem .8rem;
        border-radius: 7px;
        background: #e9ecef;
        color: #212529;
        font-weight: 700;
        font-size: .72rem;
        margin: .05rem 0 .8rem;
    }

    .village-overview-status.is-active {
        background: #e9ecef;
        color: #212529;
    }

    .village-overview-queue {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
        margin-top: 0;
    }

    .village-overview-queue-single {
        grid-template-columns: 1fr;
    }

    .village-overview-queue-item {
        display: flex;
        align-items: center;
        gap: .45rem;
        min-width: 0;
    }

    .village-overview-queue-thumb {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 0;
        background: var(--app-surface);
        object-fit: contain;
        padding: .05rem;
        flex: 0 0 auto;
    }

    .village-overview-queue-fallback {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 0;
        background: var(--app-surface);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--app-mute);
        font-size: 1rem;
        flex: 0 0 auto;
    }

    .village-overview-queue-level {
        color: #212529;
        font-size: .8rem;
        font-weight: 700;
        line-height: 1.15;
    }

    .village-overview-queue-time {
        color: #212529;
        font-size: .76rem;
        font-weight: 700;
        line-height: 1.15;
        margin-top: .15rem;
    }

    .village-overview-footer {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: .55rem;
        align-items: center;
        margin-top: auto;
        padding-top: .55rem;
    }

    .village-overview-progress {
        position: relative;
        height: 8px;
        border-radius: 4px;
        background: #e9ecef;
        overflow: hidden;
    }

    .village-overview-progress > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #2ecc71;
        position: relative;
    }

    .village-overview-progress > span::after {
        content: "";
        position: absolute;
        right: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 3px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
    }

    .village-overview-caption {
        margin-top: .45rem;
        color: #2ecc71;
        font-size: .8rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .village-pulse-card .village-overview-empty {
        display: none;
    }

    .village-pulse-card .village-overview-meta:empty {
        display: none;
    }

    .village-pulse-card .village-overview-queue:empty {
        display: none;
    }

    :root {
        --coc-green: #2ecc71;
        --coc-gray-badge: #e9ecef;
    }

    .lab-card {
        --base-font: 16px;
        --scale: 1;
        font-size: calc(var(--base-font) * var(--scale));
        background: var(--app-surface);
        border-radius: 1.25em;
        box-shadow: 0 0.625em 1.56em rgba(0,0,0,0.1);
        width: 15.34em;
        height: 16em;
        padding: 1.2em;
        border: 0.0625em solid rgba(0,0,0,0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .lab-header {
        display: flex;
        align-items: center;
        gap: 0.8em;
        margin-bottom: 1.2em;
    }

    .lab-image-container {
        width: 4.5em;
        height: 4.5em;
        border-radius: 0.8em;
        background: var(--app-surface);
        border: 0.0625em solid #eee;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.3em;
    }

    .lab-image-container img {
        max-width: 100%;
        height: auto;
        border-radius: 0.6em;
    }

    .lab-image-blank {
        width: 100%;
        height: 100%;
        border-radius: 0.6em;
        background: var(--app-canvas);
    }

    .header-title-container {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .header-title {
        font-size: 1em;
        font-weight: 700;
        color: #333;
        margin: 0;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .header-title-container:hover .header-title {
        animation: marquee 5s linear infinite alternate;
    }

    @keyframes marquee {
        0% { transform: translateX(0); }
        10% { transform: translateX(0); }
        90% { transform: translateX(calc(-100% + 10em)); }
        100% { transform: translateX(calc(-100% + 10em)); }
    }

    .badge-pill-custom {
        border-radius: 0.4em;
        padding: 0.25em 0.6em;
        font-weight: 700;
        font-size: 0.65em;
        display: inline-block;
    }

    .badge-home { background-color: var(--coc-gray-badge); color: #212529; }
    .badge-level { background-color: var(--coc-green); color: white; }

    .badge-info {
        background-color: var(--coc-green);
        color: white;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        transition: opacity 0.2s;
        flex-shrink: 0;
        font-weight: bold;
        font-family: "Georgia", serif;
        font-size: 0.7em;
        line-height: 1;
        padding-bottom: 0.1em;
    }

    .badge-info:hover { opacity: 0.8; }

    .upgrading-badge {
        background-color: var(--coc-gray-badge);
        color: #212529;
        display: inline-block;
        padding: 0.3em 0.8em;
        border-radius: 0.4em;
        font-weight: 700;
        font-size: 0.65em;
        margin-bottom: 0.8em;
    }

    .upgrade-row {
        display: flex;
        gap: 0.6em;
        margin-bottom: 1em;
        min-height: 2.2em;
    }

    .upgrade-item {
        display: flex;
        align-items: center;
        gap: 0.4em;
        flex: 1;
        min-width: 0;
    }

    .upgrade-item.is-hidden {
        visibility: hidden;
    }

    .unit-thumb {
        width: 2.2em;
        height: 2.2em;
        border-radius: 0.4em;
        object-fit: cover;
    }

    .unit-thumb-blank {
        width: 2.2em;
        height: 2.2em;
        border-radius: 0.4em;
        background: #f3f4f6;
        border: 0.0625em dashed #d1d5db;
        flex: 0 0 auto;
    }

    .upgrade-lvl { font-weight: 700; font-size: 0.65em; color: #212529; line-height: 1.2; }
    .upgrade-time { font-weight: 700; font-size: 0.6em; color: #6c757d; line-height: 1.2; }

    .footer-stats {
        display: flex;
        align-items: center;
        gap: 0.6em;
        margin-top: auto;
        padding-bottom: 0.3em;
    }

    .stat-pill {
        background-color: var(--coc-gray-badge);
        padding: 0.25em 0.7em;
        border-radius: 0.4em;
        font-weight: 700;
        font-size: 0.65em;
        color: #212529;
    }

    .lab-card-progress {
        height: 0.4em;
        border-radius: 0.2em;
        flex: 1 1 auto;
        min-width: 0;
        background-color: #e9ecef;
        overflow: hidden;
    }

    .lab-card-progress-bar {
        display: block;
        height: 100%;
        background-color: var(--coc-green);
        border-radius: 0.2em;
    }

    .cap-text {
        color: var(--coc-green);
        font-weight: 700;
        font-size: 0.8em;
        text-align: center;
        margin-top: 0.3em;
    }

    .d-flex { display: flex; }
    .flex-column { flex-direction: column; }
    .gap-1 { gap: 0.25em; }
    .gap-2 { gap: 0.5em; }
    .align-items-center { align-items: center; }

    .village-overview-panel-title {
        margin: 0 0 .5rem;
        font-size: 1rem;
        font-weight: 800;
        color: var(--app-ink);
    }

    .village-overview-panel-copy {
        color: var(--app-mute);
        font-size: .84rem;
        line-height: 1.5;
        margin-bottom: .9rem;
    }

    .village-overview-builder-list {
        display: grid;
        gap: .8rem;
    }

    .village-overview-builder-item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: .75rem;
        align-items: center;
        padding: .65rem 0;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }

    .village-overview-builder-item:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .village-overview-builder-meta {
        color: var(--app-ink);
        font-size: .78rem;
        line-height: 1.35;
    }

    .village-overview-tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem;
        margin-top: .9rem;
    }

    .village-overview-chip {
        border: 1px solid rgba(148, 163, 184, .18);
        border-radius: 999px;
        padding: .28rem .7rem;
        color: var(--app-ink-soft);
        font-size: .75rem;
        font-weight: 700;
        background: var(--app-surface);
    }

    .village-overview-empty {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 180px;
        border: 1px dashed rgba(148, 163, 184, .28);
        border-radius: 12px;
        color: var(--app-mute);
        font-size: .86rem;
        font-weight: 600;
        text-align: center;
        background: rgba(248, 250, 252, .7);
        padding: 1rem;
    }

    .village-overview-offense-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .75rem;
        margin-bottom: 1rem;
    }

    .village-overview-offense-tile {
        display: flex;
        align-items: center;
        gap: .65rem;
        min-width: 0;
    }

    .village-overview-offense-thumb,
    .village-overview-offense-fallback {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, .16);
        background: var(--app-surface);
        object-fit: contain;
        padding: .35rem;
        flex: 0 0 auto;
    }

    .village-overview-offense-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.2rem;
        color: var(--app-fade);
    }

    .village-overview-offense-copy {
        min-width: 0;
        font-size: .78rem;
        line-height: 1.25;
        color: var(--app-ink);
    }

    .village-overview-offense-copy strong {
        display: block;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .village-overview-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
        margin-top: auto;
    }

    .village-overview-summary-item {
        padding: .8rem .9rem;
        border: 1px solid rgba(148, 163, 184, .16);
        border-radius: 12px;
        background: rgba(255,255,255,.92);
    }

    .village-overview-summary-label {
        color: var(--app-mute);
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .25rem;
    }

    .village-overview-summary-value {
        color: var(--app-ink);
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.15;
    }

    .details-tab-nav .nav-link {
        border-radius: 999px;
        font-weight: 600;
        padding: .6rem 1rem;
        color: var(--tblr-body-color);
    }

        .details-tab-nav .nav-link.active {
            background: rgba(112, 72, 232, .12);
            color: #5f3dc4;
        }

    .filter-chip.active {
        background: rgba(32, 107, 196, .12);
        border-color: rgba(32, 107, 196, .35);
        color: #206bc4;
    }

    .village-tab-section.d-none-force {
        display: none !important;
    }

    .equipment-group-title {
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--tblr-secondary);
        margin-bottom: .75rem;
    }

    .equipment-group-row {
        width: 100%;
    }

    @media (max-width: 1199.98px) {
        .top-stat-grid {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .village-overview-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .village-overview-top {
            flex-direction: column;
        }

        .village-overview-thumb,
        .village-overview-thumb-fallback {
            width: 120px;
            height: 120px;
        }

        .village-overview-offense-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .top-main-grid {
            grid-template-columns: 1fr;
        }

        .top-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .village-overview-grid {
            grid-template-columns: 1fr;
        }

        .village-overview-thumb,
        .village-overview-thumb-fallback {
            width: 100%;
            max-width: 160px;
            height: 160px;
        }

        .village-overview-queue,
        .village-overview-offense-grid,
        .village-overview-summary-grid {
            grid-template-columns: 1fr;
        }

        .top-stat-grid {
            grid-template-columns: 1fr;
        }
    }

    .village-preference-group {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .village-pref-btn {
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: var(--tblr-border-radius);
        box-shadow: none;
    }

        .village-pref-btn:hover {
            transform: none;
            box-shadow: none;
        }

        .village-pref-btn i {
            font-size: 1.15rem;
            line-height: 1;
            display: inline-block;
        }

    .village-pref-btn-preferred {
        color: #eab308;
    }

        .village-pref-btn-preferred.is-active {
            background: #fefce8;
            border-color: #eab308;
            color: #ca8a04;
        }

    .village-pref-btn-exclude {
        color: #ef4444;
    }

        .village-pref-btn-exclude.is-active {
            background: #fee2e2;
            border-color: #ef4444;
            color: #b91c1c;
        }

    .village-pref-btn-reset {
        color: var(--app-mute);
    }

        .village-pref-btn-reset:hover {
            background: var(--app-line-soft);
        }

    .item-identity {
        display: flex;
        align-items: flex-start;
        gap: .85rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .item-title-block {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: .18rem;
        padding-top: .15rem;
    }

        .item-title-block .fw-bold.fs-3 {
            font-weight: 700;
            letter-spacing: -.01em;
            line-height: 1.15;
            margin-bottom: 0;
        }

    .item-title-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        margin-top: .25rem;
    }

    .item-thumb,
    .item-thumb-fallback {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        border: 1px solid rgba(98, 105, 118, .14);
        background: rgba(241, 245, 249, .95);
        box-shadow: 0 .15rem .45rem rgba(15, 23, 42, .06);
        flex: 0 0 auto;
    }

    .item-thumb {
        object-fit: contain;
        object-position: center;
        padding: .4rem;
    }

    .item-thumb-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.9rem;
        line-height: 1;
    }

    .item-card-host .item-thumb,
    .item-card-host .item-thumb-fallback {
        width: 5rem;
        height: 5rem;
        border-radius: 1.15rem;
    }

    .item-host-upgrade-panel {
        display: flex;
        flex-direction: column;
        gap: .7rem;
        margin: 0 0 .85rem;
        padding: .8rem;
        border: 1px solid rgba(32, 107, 196, .12);
        border-radius: 1rem;
        background: linear-gradient(180deg, rgba(248, 250, 252, .98) 0%, rgba(241, 245, 249, .94) 100%);
    }

    .item-host-upgrade-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .75rem;
    }

    .item-host-upgrade-kicker {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .28rem .6rem;
        border-radius: .7rem;
        background: rgba(15, 23, 42, .06);
        font-size: .72rem;
        font-weight: 700;
        color: var(--app-ink);
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    .item-host-upgrade-route {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        margin-top: .4rem;
    }

    .item-host-upgrade-summary {
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    .item-host-upgrade-summary-line {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        align-items: center;
        font-size: .82rem;
    }

    .item-host-upgrade-strip {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        padding-bottom: .1rem;
        scrollbar-width: thin;
    }

    .host-unlock-tile {
        position: relative;
        flex: 0 0 auto;
        width: 3.65rem;
        min-width: 3.65rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .28rem;
    }

    .host-unlock-thumb-wrap {
        position: relative;
        width: 3.65rem;
        height: 3.65rem;
        border-radius: 1rem;
        border: 1px solid rgba(98, 105, 118, .16);
        background: rgba(255, 255, 255, .98);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
        overflow: hidden;
    }

    .host-unlock-thumb,
    .host-unlock-thumb-fallback {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: .38rem;
    }

    .host-unlock-thumb-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.45rem;
        line-height: 1;
    }

    .host-unlock-tile.is-locked .host-unlock-thumb-wrap {
        background: rgba(241, 245, 249, .96);
    }

    .host-unlock-tile.is-locked .host-unlock-thumb {
        filter: grayscale(1);
        opacity: .48;
    }

    .host-unlock-tile.is-locked .host-unlock-thumb-fallback {
        opacity: .42;
    }

    .host-unlock-target {
        position: absolute;
        inset: auto .35rem .3rem .35rem;
        padding: .1rem .25rem;
        border-radius: .45rem;
        background: rgba(15, 23, 42, .78);
        color: #fff;
        font-size: .62rem;
        line-height: 1.2;
        text-align: center;
    }

    .host-unlock-caption {
        width: 100%;
        font-size: .67rem;
        line-height: 1.2;
        text-align: center;
        color: var(--tblr-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .host-unlock-more {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 3.65rem;
        min-width: 3.65rem;
        border-radius: 1rem;
        border: 1px dashed rgba(98, 105, 118, .22);
        background: rgba(248, 250, 252, .92);
        color: var(--tblr-secondary);
        font-size: .78rem;
        font-weight: 700;
    }

    .item-level-list {
        display: flex;
        flex-direction: column;
        gap: .45rem;
    }

    .item-level-inline {
        display: flex;
        align-items: center;
        gap: .55rem;
    }

        .item-level-inline .level-progress-stack {
            flex: 1 1 auto;
            min-width: 0;
        }

    .item-card-footer {
        margin-top: .7rem;
        padding-top: .7rem;
        border-top: 1px solid rgba(98, 105, 118, .12);
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .item-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
    }

    .level-bucket-wrap {
        display: flex;
        flex-direction: column;
        gap: .45rem;
        margin-top: 0;
        padding: .55rem .6rem;
        border: 1px solid rgba(98, 105, 118, .12);
        border-radius: 12px;
        background: rgba(248, 250, 252, .7);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 .18rem .45rem rgba(15, 23, 42, .04);
    }

    .level-bucket-row + .level-bucket-row {
        padding-top: .45rem;
        border-top: 1px solid rgba(98, 105, 118, .08);
    }

    @media (max-width: 575.98px) {
        .item-level-inline {
            gap: .45rem;
        }

        .item-identity {
            gap: .7rem;
        }

        .item-thumb,
        .item-thumb-fallback {
            width: 5.2rem;
            height: 5.2rem;
            border-radius: .95rem;
        }

        .item-thumb-fallback {
            font-size: 1.55rem;
        }

        .item-host-upgrade-head {
            flex-direction: column;
        }
    }

    .stat-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 1;
    }

    .stat-icon {
        font-size: 16px;
        opacity: 0.85;
    }

    .item-card {
        --base-font: 16px;
        --scale: 1;
        font-size: calc(var(--base-font) * var(--scale));
        background: var(--app-surface);
        border-radius: 1.25em;
        box-shadow: 0 0.625em 1.56em rgba(0, 0, 0, 0.1);
        width: 100%;
        min-height: 18em;
        padding: 1.2em;
        border: 0.0625em solid rgba(0, 0, 0, 0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .cards-container .item-card::before {
        content: none;
        display: none;
    }

    .detail-card-col > .item-card {
        width: 100%;
        min-width: 15.34em;
        flex: 1 1 auto;
    }

    .item-header {
        display: flex;
        align-items: center;
        gap: 0.8em;
        margin-bottom: 1.2em;
        min-width: 0;
    }

    .item-header > .d-flex {
        min-width: 0;
        flex: 1 1 auto;
    }

    .item-image-container {
        width: 4.5em;
        height: 4.5em;
        border-radius: 0.8em;
        background: var(--app-surface);
        border: 0.0625em solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3em;
        flex: 0 0 auto;
    }

    .item-image-container img {
        max-width: 100%;
        height: auto;
        border-radius: 0.6em;
    }

    .item-copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    .pulse-item-card {
        --base-font: 16px;
        --scale: 1;
        font-size: calc(var(--base-font) * var(--scale));
        background: var(--app-surface);
        border-radius: 1.25em;
        box-shadow: 0 0.625em 1.56em rgba(0,0,0,0.1) !important;
        border: 0.0625em solid rgba(0,0,0,0.05) !important;
        overflow: hidden;
        text-align: left;
    }

    .detail-card-col > .lab-card {
        width: 100%;
        min-width: 15.34em;
        flex: 1 1 auto;
    }

    .item-lab-card-shell {
        position: relative;
        --card-top-accent: linear-gradient(90deg, rgba(32, 107, 196, .88) 0%, rgba(59, 130, 246, .78) 100%);
    }

    .item-lab-card-shell::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 0.28em;
        background: var(--card-top-accent);
        pointer-events: none;
    }

    .item-lab-card-shell .lab-header {
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.8em;
        margin-bottom: 0.9em;
    }

    .item-lab-card-shell .lab-header-main {
        display: flex;
        align-items: center;
        gap: 0.8em;
        min-width: 0;
        flex: 1 1 auto;
    }

    .item-lab-card-shell .lab-header-copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    .item-lab-card-shell .header-title-container {
        min-width: 0;
    }

    .item-lab-card-shell .header-title {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .item-lab-card-shell .item-state-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }

    .item-lab-card-shell .item-state-pill {
        border-radius: 0.55em;
        padding: 0.34em 0.72em;
        font-size: 0.68em !important;
        font-weight: 700;
        line-height: 1.15;
    }

    .item-lab-card-shell .badge-info.item-info-button {
        border: 0;
        box-shadow: none;
        padding: 0 0 0.1em;
    }

    .item-lab-card-shell .item-card-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: .2rem;
        display: flex;
        flex-direction: column;
        gap: .7rem;
    }

    .item-lab-card-shell .item-card-scroll::-webkit-scrollbar {
        width: .35rem;
    }

    .item-lab-card-shell .item-card-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, .55);
        border-radius: 999px;
    }

    .item-lab-card-shell .item-title-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        margin-top: 0.32em;
    }

    .item-lab-card-shell .item-title-meta .badge {
        border-radius: 0.4em;
        padding: 0.25em 0.6em;
        font-weight: 700;
        font-size: 0.65em !important;
    }

    .item-lab-card-shell .cap-text {
        text-align: left;
        margin-top: 0.15em;
    }

    .item-lab-card-shell .cap-text.is-warning {
        color: #f97316;
    }

    .item-lab-card-shell .cap-text.is-info {
        color: #2563eb;
    }

    .pulse-item-card::before {
        height: 0.28em !important;
    }

    .pulse-item-card .card-body {
        padding: 1.2em;
    }

    .pulse-item-card .item-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.8em;
        margin-bottom: 0.9em;
    }

    .pulse-item-card .item-card-header-main {
        display: flex;
        align-items: center;
        gap: 0.8em;
        min-width: 0;
        flex: 1 1 auto;
    }

    .pulse-item-card .item-card-header-copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    .pulse-item-card .lab-image-container {
        flex: 0 0 auto;
    }

    .pulse-item-card .item-thumb-fallback {
        width: 100%;
        height: 100%;
        border-radius: 0.6em;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--app-mute);
        font-size: 1.6em;
        background: var(--app-canvas);
    }

    .pulse-item-card .item-card-header-copy .text-secondary.small {
        font-size: 0.8em !important;
        color: #4b5563 !important;
    }

    .pulse-item-card .item-title-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        margin-top: 0.32em;
    }

    .pulse-item-card .item-title-meta .badge {
        border-radius: 0.4em;
        padding: 0.25em 0.6em;
        font-weight: 700;
        font-size: 0.65em !important;
    }

    .pulse-item-card .item-state-pill {
        border-radius: 0.55em;
        padding: 0.34em 0.72em;
        font-size: 0.68em !important;
        font-weight: 700;
        line-height: 1.15;
    }

    .pulse-item-card .item-info-button {
        width: 1.5em;
        height: 1.5em;
        min-width: 1.5em;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        font-weight: 700;
        font-size: 0.7em;
        line-height: 1;
        padding-bottom: 0.1em;
        background-color: var(--coc-green);
        color: white;
        border: 0;
    }

    .pulse-item-card .item-card-scroll {
        gap: 0.65em;
    }

    .pulse-item-card .level-bucket-wrap {
        border-radius: 0.8em;
        padding: 0.7em;
    }

    .pulse-item-card .item-card-footer {
        margin-top: auto;
        padding-top: 0.55em;
        border-top: 0;
        gap: 0.3em;
    }

    .pulse-item-card .item-meta-row {
        display: flex;
        align-items: center;
        gap: 0.6em;
    }

    .pulse-item-card .item-meta-row .badge {
        background-color: var(--coc-gray-badge);
        color: #212529;
        padding: 0.25em 0.7em;
        border-radius: 0.4em;
        font-weight: 700;
        font-size: 0.65em !important;
        border: 0;
    }

    .pulse-item-card .item-card-footer .cap-text {
        text-align: left;
        margin-top: 0.15em;
    }

    .pulse-item-card .item-card-footer .cap-text.is-warning {
        color: #f97316;
    }

    .pulse-item-card .item-card-footer .cap-text.is-info {
        color: #2563eb;
    }

    .item-card-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: .2rem;
        display: flex;
        flex-direction: column;
        gap: .7rem;
    }

    .item-card-scroll::-webkit-scrollbar {
        width: .35rem;
    }

    .item-card-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, .55);
        border-radius: 999px;
    }

.item-card:hover,
.progress-timer-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.22);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.08),
        0 14px 32px rgba(15, 23, 42, 0.14);
}

    .level-bucket-wrap {
        border: 1px solid rgba(148, 163, 184, 0.16);
        background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-canvas) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
        border-radius:8px;
      
    }

  

    :root {
        --coc-green: #2ecc71;
        --coc-gray-badge: #e9ecef;
    }

    .cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(17em, 100%), 1fr));
        gap: 15px;
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .cards-container > .item-card {
        min-width: 0;
        width: auto;
        max-width: none;
        margin: 0;
    }
    .item-type-group {
        border: 1px solid rgba(98, 105, 118, .14);
        border-radius: .85rem;
        background: rgba(255, 255, 255, .65);
        padding: .9rem 1rem 1rem;
    }

    .item-type-group + .item-type-group {
        margin-top: 1rem;
    }
    .item-type-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .9rem;
    }

    .item-type-panel {
        padding-top: .1rem;
    }


    .item-card {
        --base-font: 16px;
        --scale: 1;
        font-size: calc(var(--base-font) * var(--scale));
        background: var(--app-surface);
        border-radius: 1.25em;
        box-shadow: 0 0.625em 1.56em rgba(0,0,0,0.1);
        width: 15.34em;
        height: 16em;
        padding: 1.2em;
        border: 0.0625em solid rgba(0,0,0,0.05);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .item-header {
        display: flex;
        align-items: center;
        gap: 0.8em;
        margin-bottom: 1.2em;
        min-width: 0;
    }

    .item-header > .d-flex {
        min-width: 0;
        flex: 1 1 auto;
    }

    .item-image-container {
        width: 4.5em;
        height: 4.5em;
        border-radius: 0.8em;
        background: var(--app-surface);
        border: 0.0625em solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3em;
        flex: 0 0 auto;
    }

    .item-image-container img {
        max-width: 100%;
        height: auto;
        border-radius: 0.6em;
    }

    .header-title-container {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .header-title {
        font-size: 1em;
        font-weight: 700;
        color: #333;
        margin: 0;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .header-title-container:hover .header-title {
        animation: marquee 5s linear infinite alternate;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

        10% {
            transform: translateX(0);
        }

        90% {
            transform: translateX(calc(-100% + 10em));
        }

        100% {
            transform: translateX(calc(-100% + 10em));
        }
    }

    .badge-pill-custom {
        border-radius: 0.4em;
        padding: 0.25em 0.6em;
        font-weight: 700;
        font-size: 0.65em;
        display: inline-block;
    }

    .badge-home {
        background-color: var(--coc-gray-badge);
        color: #212529;
    }

    .badge-level {
        background-color: var(--coc-green);
        color: white;
    }

    .badge-info {
        background-color: var(--coc-green);
        color: white;
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        transition: opacity 0.2s;
        flex-shrink: 0;
        font-weight: bold;
        font-family: "Georgia", serif;
        font-size: 0.7em;
        line-height: 1;
        padding-bottom: 0.1em;
    }

    .badge-info:hover {
        opacity: 0.8;
    }

    .stat-pill {
        background-color: var(--coc-gray-badge);
        padding: 0.25em 0.7em;
        border-radius: 0.4em;
        font-weight: 700;
        font-size: 0.65em;
        color: #212529;
        white-space: nowrap;
    }

    .item-progress-row {
        display: grid;
        grid-template-columns: 3.35em 2.1em minmax(0, 1fr);
        align-items: center;
        gap: 0.45em;
    }

    .item-progress-pill {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0.22em 0.5em;
    }

    .item-progress-wrap {
        position: relative;
        align-self: center;
    }

    .item-progress-wrap .progress {
        height: 0.8em;
        border-radius: 0.2em;
        background-color: #adb5bd4a;
        overflow: hidden;
        margin: 0;
    }

    .item-progress-wrap .progress-bar {
        height: 100%;
        background-color: #59dc6e !important;
    }

    .progress-marker {
        position: absolute;
        top: 50%;
        width: 0.16em;
        height: 0.8em;
        background: #22c55e;
        border-radius: 999px;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .cap-text {
        color: var(--coc-green);
        font-weight: 700;
        font-size: 0.8em;
        text-align: center;
        margin-top: 0.3em;
    }

    .middle-stats {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    .slim-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
    }

    .slim-scroll::-webkit-scrollbar {
        width: 0.25em;
    }

    .slim-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .slim-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 0.25em;
    }

    .slim-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    .item-image-blank {
        width: 100%;
        height: 100%;
        border-radius: 0.6em;
        background: linear-gradient(180deg, var(--app-canvas) 0%, var(--app-line-soft) 100%);
    }

    /* ===== Item Card v2 (redesign) ===== */
    .item-card-v2 {
        --accent: var(--app-accent);
        --accent-soft: #dbeafe;
        position: relative;
        overflow: hidden;
        padding: 0;
        height: auto;
        min-height: 18em;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .item-card-v2:has(.v2-card-path) { cursor: pointer; }
    /* First open of a level path while all paths load (they come in one request). */
    .v2-path-loading { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 2000; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); border-radius: var(--app-radius-card); }
    .item-card-v2:hover {
        transform: translateY(-.15em);
        box-shadow: 0 .8em 1.8em rgba(15, 23, 42, .12);
    }
    .item-card-v2::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: .25em;
        background: var(--accent);
        z-index: 1;
    }
    .item-card-v2[data-status="capped"]   { --accent: #10b981; --accent-soft: #d1fae5; }
    .item-card-v2[data-status="upgrade"]  { --accent: #f59e0b; --accent-soft: #fef3c7; }
    .item-card-v2[data-status="above"]    { --accent: var(--app-accent); --accent-soft: var(--app-accent-soft); }
    .item-card-v2[data-status="behind"]   { --accent: #ef4444; --accent-soft: #fee2e2; }
    .item-card-v2[data-status="tracking"] { --accent: var(--app-accent); --accent-soft: #dbeafe; }

    .v2-body {
        padding: 1em;
        display: flex;
        flex-direction: column;
        gap: .65em;
        height: 100%;
    }

    .v2-priority-ribbon {
        position: absolute;
        top: .65em;
        right: -.35em;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #fff;
        font-weight: 800;
        font-size: .7em;
        padding: .25em .7em;
        border-radius: .3em 0 0 .3em;
        box-shadow: 0 .2em .4em rgba(245, 158, 11, .4);
        z-index: 3;
    }
    .v2-pending-badge {
        position: absolute;
        top: .55em;
        left: .55em;
        background: #f59e0b;
        color: #fff;
        font-size: .6em;
        padding: .2em .55em;
        border-radius: 1em;
        font-weight: 700;
        z-index: 3;
        animation: v2-pulse 1.8s ease-in-out infinite;
    }
    @keyframes v2-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); }
        50% { box-shadow: 0 0 0 .35em rgba(245, 158, 11, 0); }
    }

    .v2-head {
        display: flex;
        gap: .7em;
        align-items: flex-start;
        min-width: 0;
        padding-top: .15em;
    }
    .v2-img {
        width: 3.2em;
        height: 3.2em;
        flex: 0 0 auto;
        background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
        border-radius: .6em;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .v2-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: .5em;
    }
    .v2-title-block {
        min-width: 0;
        flex: 1;
    }
    .v2-title {
        font-weight: 700;
        font-size: 0.8em;
        line-height: 1.2;
        color: var(--app-ink);
        margin: 0 0 .35em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }
    .v2-chips {
        display: flex;
        gap: .3em;
        flex-wrap: wrap;
    }
    .v2-chip {
        font-size: .69em;
        padding: .2em .55em;
        border-radius: 1em;
        font-weight: 600;
        background: #dbeafe;
        color: var(--app-accent);
    }
    .v2-chip-section { background: #dbeafe; color: var(--app-accent); }
    .v2-chip-hero { background: var(--app-accent-soft); color: var(--app-accent); }
    /* Equipment rarity chips: Common (grey), Rare (blue), Epic (purple). */
    .v2-chip-rarity-common { background: #e2e8f0; color: #475569; }
    .v2-chip-rarity-rare   { background: #dbeafe; color: #1d4ed8; }
    .v2-chip-rarity-epic   { background: #f3e8ff; color: #6b21a8; }
    .v2-chip-thunlock      { background: var(--app-accent-soft); color: var(--app-accent-deep); border: 1px solid var(--app-accent); }
    .v2-chip-cap           { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; font-weight: 700; }
    /* Inline stat strip rendered below the card title chips. One small
       pill per non-null stat. Wraps and stays compact. */
    .v2-inline-stats { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
    .v2-inline-stat {
        display: inline-flex; align-items: center; gap: .15rem;
        padding: .12rem .4rem; border-radius: 999px;
        background: var(--app-line-soft); color: var(--app-ink);
        font-size: .7rem; font-weight: 700; white-space: nowrap;
        font-variant-numeric: tabular-nums;
        border: 1px solid var(--app-line);
    }
    [data-theme-mode="dark"] .v2-inline-stat { background: rgba(255,255,255,.06); }
    [data-theme-mode="dark"] .v2-chip-rarity-common { background: rgba(148,163,184,.15); color: #cbd5e1; }
    [data-theme-mode="dark"] .v2-chip-rarity-rare   { background: rgba(59,130,246,.18); color: #93c5fd; }
    [data-theme-mode="dark"] .v2-chip-rarity-epic   { background: rgba(168,85,247,.18); color: #d8b4fe; }

    .v2-progress-row {
        display: flex;
        align-items: center;
        gap: .7em;
        padding: .55em .65em;
        background: #f9fafb;
        border-radius: .65em;
        border: 1px solid rgba(15, 23, 42, .04);
    }
    .v2-ring {
        width: 2.6em;
        height: 2.6em;
        flex: 0 0 auto;
        position: relative;
    }
    .v2-ring svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }
    .v2-ring .bg { fill: none; stroke: #e5e7eb; stroke-width: 3.5; }
    .v2-ring .fg { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .4s; }
    .v2-ring .num {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .65em;
        font-weight: 700;
        color: var(--app-ink);
    }
    .v2-progress-info { min-width: 0; flex: 1; }
    .v2-label {
        font-size: .65em;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 600;
        margin-bottom: .1em;
    }
    .v2-value {
        font-size: .85em;
        font-weight: 700;
        color: var(--app-ink);
    }
    .v2-muted { font-weight: 500; color: #6b7280; font-size: .85em; }
    .v2-detail {
        font-size: .7em;
        color: #6b7280;
        margin-top: .1em;
    }
    .v2-bucket-chips {
        display: flex;
        gap: .25em;
        overflow-x: auto;
        scrollbar-width: thin;
        padding: .15em 0 .2em;
        margin: .05em 0 .1em;
        scroll-snap-type: x proximity;
    }
    .v2-bucket-chips::-webkit-scrollbar { height: 2px; }
    .v2-bucket-chips::-webkit-scrollbar-track { background: transparent; }
    .v2-bucket-chips::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 999px; }
    .v2-bucket-chips::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
    .v2-bucket-chips { scrollbar-color: #e2e8f0 transparent; }
    .v2-bucket-chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: baseline;
        gap: 0;
        padding: .15em .5em;
        background: var(--app-line-soft);
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        font-size: .68em;
        font-weight: 800;
        color: var(--app-ink);
        line-height: 1.2;
        scroll-snap-align: start;
        white-space: nowrap;
    }
    .v2-bucket-chip-x {
        font-size: .97em;
        font-weight: 800;
        color: var(--app-mute);
        margin-left: .15em;
    }

    .v2-section-label {
        font-size: .65em;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 600;
        margin-bottom: .35em;
    }
    .v2-carousel {
        display: flex;
        gap: .55em;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: .25em;
        scrollbar-width: thin;
        scrollbar-color: rgba(15, 23, 42, .15) transparent;
    }
    .v2-carousel::-webkit-scrollbar { height: .35em; }
    .v2-carousel::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .15); border-radius: 1em; }
    .v2-bucket {
        flex: 0 0 100%;
        scroll-snap-align: start;
        background: #f9fafb;
        border: 1px solid rgba(15, 23, 42, .04);
        border-radius: .55em;
        padding: .45em .55em;
    }
    .v2-bucket-head {
        display: flex;
        gap: .35em;
        margin-bottom: .35em;
    }
    .v2-bucket-pill {
        font-size: .65em;
        padding: .15em .5em;
        border-radius: .3em;
        background: #e5e7eb;
        color: #374151;
        font-weight: 700;
    }
    .v2-bucket-pill-count {
        background: var(--accent-soft);
        color: var(--accent);
    }
    .v2-bucket-progress {
        position: relative;
        height: .6em;
    }
    .v2-bucket-progress .progress {
        height: 100%;
        background: #e5e7eb;
        border-radius: .3em;
    }
    .v2-bucket-progress .progress-marker {
        position: absolute;
        top: -.15em;
        bottom: -.15em;
        width: 2px;
        background: var(--accent);
        border-radius: 1px;
    }

    .v2-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
        gap: .4em;
    }
    .v2-stat {
        background: #f9fafb;
        border-radius: .5em;
        padding: .4em .55em;
        border: 1px solid rgba(15, 23, 42, .04);
    }
    .v2-stat-label {
        font-size: .6em;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 600;
    }
    .v2-stat-value {
        font-size: .85em;
        font-weight: 700;
        color: var(--app-ink);
        margin-top: .1em;
    }

    .v2-next-upgrade {
        margin-top: .35em;
        padding: .35em .45em;
        border-radius: .45em;
        background: var(--app-surface-2);
        border: 1px solid var(--app-line);
        display: flex;
        flex-direction: column;
        gap: .25em;
    }
    .v2-next-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .35em;
    }
    .v2-next-label {
        font-size: .66em;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--app-accent-ink);
    }
    .v2-next-route {
        font-size: .65em;
        font-weight: 700;
        color: var(--app-ink);
    }
    .v2-next-route .v2-next-arrow { color: var(--app-fade); margin: 0 .15em; }
    .v2-next-rows {
        display: flex;
        flex-wrap: wrap;
        gap: .2em;
    }
    .v2-next-row {
        display: inline-flex;
        align-items: center;
        gap: .25em;
        padding: .15em .4em;
        border-radius: 999px;
        font-size: .68em;
        font-weight: 700;
        background: var(--app-surface);
        border: 1px solid var(--app-line);
        color: var(--app-ink);
        line-height: 1.2;
    }
    .v2-next-row svg { color: var(--app-accent); flex-shrink: 0; width: .85em; height: .85em; }
    .v2-next-row-time { color: var(--app-accent-deep); }
    .v2-next-row-cost .v2-next-resource {
        font-size: .95em;
        color: var(--app-mute);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .v2-next-row-cost .v2-next-amount {
        color: var(--app-ink);
        font-weight: 800;
    }
    .v2-cum-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .35em;
        margin-top: .15em;
        padding-top: .25em;
        border-top: 1px dashed #e6ebf2;
    }
    .v2-cum-label {
        font-size: .66em;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: #b45309;
    }
    .v2-levels-btn {
        display: inline-flex;
        align-items: center;
        gap: .2em;
        background: var(--app-surface);
        border: 1px solid var(--app-accent);
        color: var(--app-accent-deep);
        font-size: .55em;
        font-weight: 700;
        padding: .15em .4em;
        border-radius: 999px;
        cursor: pointer;
        transition: background .12s ease, transform .12s ease;
    }
    .v2-levels-btn:hover { background: var(--app-accent-soft); transform: translateY(-1px); }
    .v2-levels-btn svg { width: .9em; height: .9em; }
    .v2-cum-rows .v2-cum-row-time { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
    .v2-cum-rows .v2-cum-row-time svg { color: #f59e0b; }
    .v2-cum-rows .v2-cum-row-cost { background: #fef3c7; border-color: #fde68a; }
    .v2-cum-rows .v2-cum-row-cost .v2-next-amount { color: #78350f; }
    .v2-done-rows .v2-done-row-time { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
    .v2-done-rows .v2-done-row-time svg { color: #10b981; }
    .v2-done-rows .v2-done-row-cost { background: #f0fdf4; border-color: #bbf7d0; }
    .v2-done-rows .v2-done-row-cost .v2-next-amount { color: #14532d; }

    /* ===== Gold Pass boost bar ===== */
    .v2-boost-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .65rem 1rem;
        padding: .55rem .85rem;
        background: linear-gradient(90deg, #fff7ed, #fffbeb);
        border: 1px solid #fed7aa;
        border-radius: 10px;
    }
    .v2-boost-icon {
        display: inline-flex; align-items: center; gap: .35rem;
        font-size: .78rem; font-weight: 800;
        color: #b45309;
        text-transform: uppercase; letter-spacing: .05em;
    }
    .v2-boost-icon svg { color: #f59e0b; }
    .v2-boost-field {
        display: inline-flex; align-items: center; gap: .4rem;
        font-size: .78rem; color: #78350f; font-weight: 700; margin: 0;
    }
    .v2-boost-label { white-space: nowrap; }
    .v2-boost-select {
        min-width: 5.5rem; max-width: 7rem;
        font-weight: 700; color: var(--app-ink);
        border: 1px solid #fcd34d; background: var(--app-surface);
    }
    .v2-boost-status {
        font-size: .72rem; font-weight: 700; color: #6b7280;
        margin-left: auto;
    }
    .v2-boost-status.is-ok { color: #047857; }
    .v2-boost-status.is-err { color: #b91c1c; }

    .boost-pip {
        display: inline-flex; align-items: center;
        margin-left: .25em;
        padding: .05em .3em;
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 999px;
        font-size: .85em;
        font-weight: 800;
        color: #92400e;
        line-height: 1.1;
    }
    .v2-next-row.is-boosted { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .25); }

    /* ===== Level path modal ===== */
    .level-path-modal-backdrop {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .55);
        z-index: 1050;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .level-path-modal-backdrop.show { display: flex; }
    .level-path-modal {
        background: var(--app-surface);
        border-radius: 14px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
        /* Fit the 6-column table without horizontal scroll on desktop;
           cap at 96vw so it never exceeds the viewport. */
        width: min(1040px, 96vw);
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .level-path-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--app-line);
        background: linear-gradient(180deg, var(--app-surface-2), var(--app-line-soft));
    }
    .level-path-modal-title { font-size: 1.05rem; font-weight: 800; color: var(--app-ink); margin: 0; }
    .level-path-modal-sub { font-size: .75rem; color: var(--app-mute); font-weight: 600; }
    .level-path-modal-close {
        background: transparent; border: 0; cursor: pointer;
        width: 2rem; height: 2rem; border-radius: 50%;
        font-size: 1.4rem; color: var(--app-mute);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .level-path-modal-close:hover { background: #eef2f7; color: var(--app-ink); }
    .level-path-modal-body { padding: 1rem 1.25rem; overflow-y: auto; }
    /* Unlocks-by-level tab: one row per host level, thumbs in a scroll strip. */
    .lpu-group { padding: .6rem 0; border-bottom: 1px solid var(--app-line-soft); }
    .lpu-group:last-child { border-bottom: 0; }
    .lpu-group.is-past { opacity: .55; }
    .lpu-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
    .lpu-host-level { font-size: .8rem; font-weight: 800; color: var(--app-ink); }
    .lpu-count {
        background: var(--app-accent-soft); color: var(--app-accent-deep);
        border: 1px solid var(--app-accent); font-size: .65rem; font-weight: 700;
        padding: .05rem .4rem; border-radius: 999px;
    }
    .lpu-strip { display: flex; flex-wrap: wrap; gap: .4rem; }
    .lpu-tile { flex: 0 0 auto; outline: none; }
    .lpu-thumb {
        position: relative; width: 2.4rem; height: 2.4rem;
        background: var(--app-accent-soft); border: 1px solid var(--app-line);
        border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden;
        transition: transform .12s ease, box-shadow .12s ease;
    }
    .lpu-tile:hover .lpu-thumb, .lpu-tile:focus .lpu-thumb {
        transform: translateY(-1px); box-shadow: 0 .2rem .5rem rgba(var(--bs-primary-rgb), .25);
    }
    .lpu-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .15rem; }
    .lpu-fallback { font-size: 1.2rem; }
    .lpu-lvl {
        position: absolute; bottom: -.05rem; right: -.05rem;
        background: var(--app-accent-deep); color: #fff;
        font-size: .5rem; font-weight: 700; line-height: 1; padding: .08rem .18rem; border-radius: 5px;
    }
    .lpu-tile.is-new .lpu-thumb { border-color: var(--app-accent); box-shadow: 0 0 0 2px var(--app-accent-soft); }
    /* Item detail hero: 200px image left, details right. Stacks on mobile. */
    .lpm-hero {
        display: flex; gap: 1.1rem; align-items: flex-start;
        padding: .5rem 0 1rem;
        border-bottom: 1px solid var(--app-line);
        margin-bottom: 1rem;
    }
    .lpm-hero-img {
        flex: 0 0 200px; width: 200px; height: 200px;
        display: flex; align-items: center; justify-content: center;
        background: var(--app-accent-soft);
        border: 1px solid var(--app-line);
        border-radius: 14px; overflow: hidden;
    }
    .lpm-hero-img img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
    .lpm-hero-img .lpm-hero-img-empty { color: var(--app-fade); font-size: 2.5rem; }
    .lpm-hero-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
    .lpm-hero-name { font-size: 1.25rem; font-weight: 800; color: var(--app-ink); line-height: 1.1; }
    .lpm-hero-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
    .lpm-hero-tag {
        display: inline-flex; align-items: center; gap: .2rem;
        padding: .15rem .55rem; border-radius: 999px;
        font-size: .72rem; font-weight: 700;
        background: var(--app-line-soft); color: var(--app-ink-soft);
        border: 1px solid var(--app-line);
    }
    .lpm-hero-tag.is-rarity-rare  { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
    .lpm-hero-tag.is-rarity-epic  { background: #f3e8ff; color: #6b21a8; border-color: #d8b4fe; }
    .lpm-hero-tag.is-th           { background: var(--app-accent-soft); color: var(--app-accent-deep); border-color: var(--app-accent); }
    .lpm-hero-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
        gap: .5rem; margin-top: .25rem;
    }
    .lpm-hero-cell {
        background: var(--app-surface-2); border: 1px solid var(--app-line);
        border-radius: 8px; padding: .4rem .55rem;
    }
    .lpm-hero-cell-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--app-mute); }
    .lpm-hero-cell-value { font-size: .95rem; font-weight: 800; color: var(--app-ink); font-variant-numeric: tabular-nums; }
    .lpm-hero-stats { display: flex; flex-wrap: wrap; gap: .15rem .6rem; margin-top: .15rem; }
    .lpm-hero-stat { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; color: var(--app-ink); font-variant-numeric: tabular-nums; }
    @media (max-width: 560px) {
        .lpm-hero { flex-direction: column; align-items: center; text-align: center; }
        .lpm-hero-img { flex-basis: 160px; width: 160px; height: 160px; }
        .lpm-hero-tags, .lpm-hero-stats { justify-content: center; }
    }
    .level-path-totals {
        display: flex; flex-wrap: wrap; gap: .4rem;
        margin-bottom: .85rem;
    }
    .level-path-total-chip {
        display: inline-flex; align-items: center; gap: .35rem;
        padding: .3rem .65rem;
        border-radius: 999px;
        background: var(--app-accent-soft);
        border: 1px solid var(--app-accent);
        color: var(--app-accent-deep);
        font-size: .75rem;
        font-weight: 700;
    }
    .level-path-total-chip.is-time { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
    .level-path-total-chip b { color: var(--app-ink); }
    .level-path-table {
        width: 100%;
        border-collapse: collapse;
        font-size: .82rem;
    }
    .level-path-table thead th {
        text-align: left;
        font-weight: 700;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--app-mute);
        padding: .55rem .65rem;
        border-bottom: 1px solid var(--app-line);
        background: var(--app-surface-2);
        position: sticky; top: 0;
    }
    .level-path-table tbody td {
        padding: .55rem .65rem;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }
    .level-path-table tbody tr.beyond-hall { background: #fff7ed; }
    .level-path-table tbody tr.beyond-hall td { color: #9a3412; }
    .level-path-table .lvl-cell { font-weight: 800; color: var(--app-ink); }

    /* ---- Responsive: below 720px restack each row as a labeled card ---- */
    @media (max-width: 720px) {
        .level-path-table thead { display: none; }
        .level-path-table,
        .level-path-table tbody,
        .level-path-table tr,
        .level-path-table td { display: block; width: 100%; }
        .level-path-table tbody tr {
            border: 1px solid var(--app-line);
            border-radius: .6rem;
            margin-bottom: .65rem;
            padding: .35rem .15rem;
            background: var(--app-surface);
        }
        .level-path-table tbody td {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: .75rem;
            border-bottom: 1px solid var(--app-line-soft);
            padding: .4rem .65rem;
        }
        .level-path-table tbody td:last-child { border-bottom: 0; }
        .level-path-table tbody td::before {
            content: attr(data-label);
            flex: 0 0 6.5rem;
            font-size: .65rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; color: var(--app-mute);
            text-align: left;          /* keep every label flush-left */
            padding-top: .1rem;
        }
        /* Value content sits on the right; space-between handles the gap so
           the label stays left and the value right for every row. Only the
           value (not the ::before label) is right-aligned. */
        .level-path-table tbody td > div { text-align: right; }
        .level-path-table .cost-list,
        .level-path-table .lpm-req-list,
        .level-path-table .lpm-stat-list { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
    }
    /* Prerequisites column: small status chips, green for met, red for unmet. */
    .level-path-table .lpm-req-list { display: flex; flex-wrap: wrap; gap: .25rem; }
    .level-path-table .lpm-req {
        display: inline-flex; align-items: center; gap: .2rem;
        padding: .1rem .4rem; border-radius: 999px;
        font-size: .72rem; font-weight: 700;
        border: 1px solid var(--app-line);
        white-space: nowrap;
    }
    .level-path-table .lpm-req-ok   { background: #ecfdf5; color: #047857; border-color: #86efac; }
    .level-path-table .lpm-req-miss { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
    .level-path-table .lpm-req-have { font-weight: 600; opacity: .8; margin-left: .1rem; }
    [data-theme-mode="dark"] .level-path-table .lpm-req-ok   { background: rgba(34,197,94,.15); color: #86efac; border-color: rgba(34,197,94,.4); }
    [data-theme-mode="dark"] .level-path-table .lpm-req-miss { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.4); }
    .level-path-table .lpm-hp { font-weight: 700; color: var(--app-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
    /* Inline stat strip: plain text separated by a dot, single row.
       No chip boxes — keeps HP / DPS / etc on one line in the narrow
       Stats column instead of wrapping onto stacked rows. */
    .level-path-table .lpm-stat-list { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; white-space: nowrap; }
    .level-path-table .lpm-stat {
        display: inline-flex; align-items: center; gap: .15rem;
        color: var(--app-ink);
        font-size: .7rem; font-weight: 700; white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .level-path-table .lpm-stat + .lpm-stat::before {
        content: "·"; color: var(--app-fade); margin-right: .35rem; font-weight: 400;
    }

    /* Host-unlock preview on v2 item card: small thumbs of items the host
       building's next level will unlock or upgrade (troops from Lab, spells
       from Spell Factory, equipment from Blacksmith, heroes from Hero Hall,
       pets from Pet House, etc). Image is grabbed via the same resolver as
       the unlock-group cards so the catalog provides the artwork. */
    .v2-host-unlocks {
        margin-top: .55rem; padding: .55rem .65rem;
        border-radius: .55rem;
        background: linear-gradient(180deg, var(--app-accent-soft), transparent);
        border: 1px dashed var(--app-line);
        display: flex; flex-direction: column; gap: .4rem;
    }
    .v2-host-unlocks-head {
        display: flex; align-items: center; gap: .35rem;
        font-size: .8rem; font-weight: 700; color: var(--app-accent-deep);
    }
    .v2-host-unlocks-head i { font-size: .95rem; }
    .v2-host-unlocks-count {
        margin-left: auto;
        background: var(--app-surface); border: 1px solid var(--app-line);
        color: var(--app-ink-soft); font-size: .68rem; font-weight: 700;
        padding: .05rem .4rem; border-radius: 999px;
    }
    /* Thumb-only horizontal scroll strip; tooltip (title) on hover/tap. */
    .v2-host-unlocks-grid {
        display: flex; flex-wrap: nowrap; gap: .4rem;
        overflow-x: auto; overflow-y: hidden;
        padding-bottom: .3rem;
        scrollbar-width: thin;
    }
    .v2-host-unlocks-grid::-webkit-scrollbar { height: .35rem; }
    .v2-host-unlocks-grid::-webkit-scrollbar-thumb { background: var(--app-line); border-radius: 999px; }
    .v2-host-unlock-tile {
        flex: 0 0 auto; cursor: default; outline: none;
    }
    .v2-host-unlock-thumb {
        position: relative; width: 2.2rem; height: 2.2rem;
        background: var(--app-accent-soft);
        border: 1px solid var(--app-line); border-radius: 50%;
        display: flex; align-items: center; justify-content: center; overflow: hidden;
        transition: transform .12s ease, box-shadow .12s ease;
    }
    .v2-host-unlock-tile:hover .v2-host-unlock-thumb,
    .v2-host-unlock-tile:focus .v2-host-unlock-thumb {
        transform: translateY(-1px); box-shadow: 0 .2rem .5rem rgba(var(--bs-primary-rgb), .25);
    }
    .v2-host-unlock-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .12rem; }
    .v2-host-unlock-fallback { font-size: 1.1rem; }
    .v2-host-unlock-target {
        position: absolute; bottom: -.05rem; right: -.05rem;
        background: var(--app-accent-deep); color: #fff;
        font-size: .5rem; font-weight: 700; line-height: 1;
        padding: .08rem .18rem; border-radius: 5px;
    }
    .v2-host-unlock-tile.is-new .v2-host-unlock-thumb {
        border-color: var(--app-accent);
        box-shadow: 0 0 0 2px var(--app-accent-soft);
    }
    .level-path-table .cost-list { display: flex; flex-wrap: wrap; gap: .3rem; }
    .level-path-table .cost-pill {
        display: inline-flex; align-items: center; gap: .25rem;
        padding: .15rem .45rem;
        background: var(--app-line-soft);
        border-radius: 999px;
        font-size: .68rem;
        font-weight: 700;
        color: var(--app-ink);
    }
    .level-path-table .cost-pill .res { color: var(--app-mute); text-transform: uppercase; letter-spacing: .04em; font-size: .9em; }
    .level-path-table .cost-pill .unit-mul,
    .level-path-table .time-cell .unit-mul {
        color: var(--app-fade);
        font-weight: 700;
        font-size: .9em;
        margin-left: .15em;
    }
    .level-path-table .cost-pill .unit-eq,
    .level-path-table .time-cell .unit-eq {
        color: var(--app-ink);
        font-weight: 800;
        margin-left: .15em;
    }
    .level-path-table tr.beyond-hall .cost-pill .unit-eq,
    .level-path-table tr.beyond-hall .time-cell .unit-eq { color: #9a3412; }
    .level-path-table .units-cell { font-weight: 800; color: var(--app-accent-deep); }
    .level-path-table .time-cell { white-space: nowrap; }
    .level-path-table .cost-pill { white-space: nowrap; }
    .level-path-table tr.beyond-hall .units-cell { color: #9a3412; }
    .level-path-tabs {
        display: flex;
        gap: .35rem;
        margin-bottom: .85rem;
        border-bottom: 1px solid var(--app-line);
    }
    .level-path-tab {
        background: transparent;
        border: 0;
        padding: .45rem .9rem;
        font-size: .8rem;
        font-weight: 700;
        color: var(--app-mute);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }
    .level-path-tab:hover { color: var(--app-accent-deep); }
    .level-path-tab.is-active {
        color: var(--app-accent-deep);
        border-bottom-color: var(--app-accent);
    }
    .level-path-pane.is-hidden { display: none; }
    .level-path-mode {
        margin-left: auto;
        display: inline-flex;
        gap: .15rem;
        padding: .15rem;
        background: var(--app-line-soft);
        border-radius: 999px;
        margin-bottom: .15rem;
    }
    .lpm-btn {
        background: transparent;
        border: 0;
        padding: .3rem .7rem;
        font-size: .72rem;
        font-weight: 700;
        color: var(--app-mute);
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
    }
    .lpm-btn.is-active { background: var(--app-accent); color: #fff; box-shadow: 0 1px 3px rgba(var(--bs-primary-rgb),.3); }
    .level-path-table.hide-time-col thead th:nth-child(3),
    .level-path-table.hide-time-col tbody td:nth-child(3) { display: none; }

    .v2-status-line {
        margin-top: auto;
        padding: .45em .6em;
        border-radius: .45em;
        font-size: .7em;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: .4em;
        background: var(--accent-soft);
        color: var(--accent);
    }
    .v2-dot {
        width: .5em; height: .5em;
        border-radius: 50%;
        background: var(--accent);
    }

    /* ===== Toolbar (search + chip filters) ===== */
    /* On a phone the filters wrap to several rows; pinned, they would cover a third of the
       screen, so there they scroll away with the page. */
    @media (max-width: 575.98px) {
        .v2-toolbar, .detail-search-toolbar { position: static !important; }
    }
    .v2-toolbar {
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .85rem;
        padding: .8rem 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        align-items: center;
        box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .04);
        position: sticky;
        top: 0;
        z-index: 20;
    }
    .v2-search-wrap {
        position: relative;
        flex: 1 1 18rem;
        min-width: 14rem;
        display: flex;
        align-items: center;
    }
    .v2-search-icon {
        position: absolute;
        left: .7rem;
        color: #9ca3af;
        pointer-events: none;
    }
    .v2-search-input {
        padding-left: 2.2rem;
        padding-right: 2.2rem;
        border-radius: .65rem;
    }
    .v2-search-clear {
        position: absolute;
        right: .4rem;
        background: transparent;
        border: 0;
        color: #6b7280;
        font-size: 1.3rem;
        line-height: 1;
        padding: 0 .4rem;
        cursor: pointer;
        display: none;
        border-radius: 50%;
    }
    .v2-search-clear:hover { background: #f3f4f6; }
    .v2-search-wrap.has-value .v2-search-clear { display: inline-flex; }

    .v2-searchrow {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        align-items: center;
        width: 100%;
    }
    .v2-toggle-now {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-size: .82em;
        font-weight: 600;
        color: var(--app-ink-soft);
        background: var(--app-canvas);
        border: 1px solid var(--app-line);
        border-radius: .7em;
        padding: .5em .85em;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s, border-color .15s, color .15s;
    }
    .v2-toggle-now .v2-toggle-sw {
        width: 34px;
        height: 19px;
        border-radius: 11px;
        background: #cbd5e1;
        position: relative;
        transition: background .2s;
        flex: none;
    }
    .v2-toggle-now .v2-toggle-sw::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s;
    }
    .v2-toggle-now.active {
        background: var(--app-accent-soft);
        border-color: var(--app-accent);
        color: var(--app-accent-deep);
    }
    .v2-toggle-now.active .v2-toggle-sw { background: var(--app-accent-deep); }
    .v2-toggle-now.active .v2-toggle-sw::after { transform: translateX(15px); }
    .v2-seg {
        display: flex;
        gap: 3px;
        background: var(--app-canvas);
        border: 1px solid var(--app-line);
        border-radius: .7em;
        padding: 3px;
    }
    .v2-seg-btn {
        border: none;
        background: none;
        font-size: .8em;
        font-weight: 600;
        color: var(--app-ink-soft);
        padding: .45em .8em;
        border-radius: .55em;
        cursor: pointer;
    }
    .v2-seg-btn.active {
        background: var(--app-surface);
        color: var(--app-accent-deep);
        box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .18);
    }
    .v2-sort {
        font-size: .8em;
        font-weight: 600;
        padding: .55em .8em;
        border: 1px solid var(--app-line);
        border-radius: .7em;
        background: var(--app-surface);
        color: var(--app-ink);
        cursor: pointer;
    }

    .v2-chip-filters {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        flex: 2 1 auto;
        min-width: 0;
    }
    .v2-chip-filter {
        background: var(--app-surface);
        color: var(--app-ink-soft);
        border: 1px solid var(--app-line);
        font-size: .8em;
        font-weight: 600;
        padding: .42em .9em;
        border-radius: .7em;
        cursor: pointer;
        transition: background .12s, color .12s, border-color .12s;
    }
    .v2-chip-filter:hover { border-color: var(--app-accent); color: var(--app-accent-deep); }
    .v2-chip-filter.active {
        background: linear-gradient(135deg, var(--app-accent), var(--app-accent-deep));
        color: #fff;
        border-color: transparent;
    }
    /* Compact (default) hides the stat strip + host-unlocks; Comfortable shows them. */
    .cards-container .v2-stats,
    .cards-container .v2-host-unlocks { display: none; }
    .cards-container.v2-comfortable .v2-stats { display: grid; }
    .cards-container.v2-comfortable .v2-host-unlocks { display: block; }
    .v2-flatten { margin-left: auto; }

    /* Village-section tabs: only the active section card is shown. */
    .section-card:not(.is-active-section) { display: none; }
    .v2-section-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
    .v2-section-tab {
        display: inline-flex;
        align-items: center;
        gap: .5em;
        font-size: .9em;
        font-weight: 700;
        padding: .55em 1em;
        border-radius: .7em;
        border: 1px solid var(--app-line);
        background: var(--app-surface);
        color: var(--app-ink-soft);
        cursor: pointer;
        transition: background .15s, border-color .15s, color .15s;
    }
    .v2-section-tab:hover { border-color: var(--app-accent); color: var(--app-accent-deep); }
    .v2-section-tab.active {
        background: linear-gradient(135deg, var(--app-accent), var(--app-accent-deep));
        color: #fff;
        border-color: transparent;
    }
    .v2-section-tab-count { font-size: .8em; font-weight: 700; opacity: .8; }
    .v2-chip-filter-clear {
        background: transparent;
        color: #6b7280;
        text-decoration: underline;
        padding-left: .5em;
        padding-right: .5em;
    }
    .v2-chip-filter-clear:hover { background: transparent; color: var(--app-ink); }

    .v2-result-count {
        flex: 0 0 auto;
        font-size: .78em;
        color: #6b7280;
        font-weight: 600;
        white-space: nowrap;
        margin-left: auto;
    }

    /* ===== Collapsible section group ===== */
    details.item-type-group {
        overflow: hidden;
    }
    details.item-type-group > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }
    details.item-type-group > summary::-webkit-details-marker { display: none; }
    details.item-type-group > summary::marker { display: none; content: ""; }
    .v2-summary-text { flex: 1; min-width: 0; }
    .v2-chevron {
        transition: transform .18s ease;
        color: #6b7280;
        flex: 0 0 auto;
    }
    details.item-type-group[open] .v2-chevron {
        transform: rotate(180deg);
    }
    details.item-type-group:not([open]) .item-type-panel { display: none; }

    .item-card-v2.v2-hidden { display: none !important; }
    details.item-type-group.v2-empty { display: none; }

    /* ===== Top Stats Row ===== */
    .top-stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
        gap: .65rem;
        margin-bottom: 1rem;
    }
    .top-stat-tile {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .75em .9em;
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .75em;
        box-shadow: 0 .25em .55em rgba(15, 23, 42, .04);
        border-left: 2px solid var(--accent-soft, #e5e7eb);
        transition: transform .12s ease, box-shadow .12s ease;
        min-width: 0;
    }
    .top-stat-tile:hover {
        transform: translateY(-.1em);
        box-shadow: 0 .45em .9em rgba(15, 23, 42, .08);
    }
    .top-stat-tile-icon {
        width: 2.4em;
        height: 2.4em;
        background: var(--accent-bg, #f1f5f9);
        color: var(--accent, #6b7280);
        border-radius: .55em;
        font-size: 1.05em;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .top-stat-tile-icon i { font-size: 1.4em; }
    .top-stat-tile-body { min-width: 0; flex: 1; }
    .top-stat-tile-num {
        font-size: 1.25em;
        font-weight: 800;
        color: var(--accent-strong, #1f2937);
        line-height: 1.05;
        letter-spacing: -.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .top-stat-tile-label {
        font-size: .62em;
        color: #6b7280;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-top: .3em;
    }
    .top-stat-tile[data-tone="emerald"] { --accent: #10b981; --accent-soft: #a7f3d0; --accent-bg: #ecfdf5; --accent-strong: #065f46; }
    .top-stat-tile[data-tone="rose"]    { --accent: #f43f5e; --accent-soft: #fda4af; --accent-bg: #fff1f2; --accent-strong: #be123c; }
    .top-stat-tile[data-tone="amber"]   { --accent: #f59e0b; --accent-soft: #fcd34d; --accent-bg: #fffbeb; --accent-strong: #b45309; }
    .top-stat-tile[data-tone="orange"]  { --accent: #f97316; --accent-soft: #fdba74; --accent-bg: #fff7ed; --accent-strong: #c2410c; }
    .top-stat-tile[data-tone="red"]     { --accent: #ef4444; --accent-soft: #fca5a5; --accent-bg: #fef2f2; --accent-strong: #b91c1c; }
    .top-stat-tile[data-tone="primary"] { --accent: var(--app-accent); --accent-soft: #93c5fd; --accent-bg: #eff6ff; --accent-strong: #1d4ed8; }
    .top-stat-tile[data-tone="cyan"]    { --accent: #06b6d4; --accent-soft: #67e8f9; --accent-bg: #ecfeff; --accent-strong: #0e7490; }
    .top-stat-tile[data-tone="warning"] { --accent: #eab308; --accent-soft: #fde047; --accent-bg: #fefce8; --accent-strong: #854d0e; }
    .top-stat-tile[data-tone="violet"]  { --accent: var(--app-accent); --accent-soft: #c4b5fd; --accent-bg: #f5f3ff; --accent-strong: var(--app-accent-deep); }
    a.top-stat-tile { text-decoration: none; color: inherit; }
    .top-stat-tile-sub { font-size: .6em; font-weight: 600; color: var(--app-fade); margin-left: .05em; }
    .top-stat-tile-word { font-size: .95em; }

    /* ===== Operations Deck ===== */
    .ops-deck {
        background: linear-gradient(180deg, var(--app-surface), var(--app-surface-2));
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: 1em;
        box-shadow: 0 .5em 1.2em rgba(15, 23, 42, .05);
        padding: 1.1em 1.2em;
        display: flex;
        flex-direction: column;
        gap: .9em;
        overflow: hidden;
    }
    /* Town Hall weapon sub-block — compact two-line block on the TH card.
       Row 1: name + L cur/max + Max chip + thin progress bar (inline).
       Row 2: Next L# + cost icons + time, plus the prereq note. */
    .th-weapon-block {
        margin-top: .5em;
        padding: .4em .55em;
        border: 1px dashed var(--app-line);
        border-radius: .5em;
        background: linear-gradient(180deg, var(--app-accent-soft), transparent);
        display: flex; flex-direction: column; gap: .25em;
        font-size: .78em;
        line-height: 1.25;
    }
    .th-weapon-head { display: flex; align-items: center; gap: .35em; color: var(--app-ink); font-weight: 600; }
    .th-weapon-icon {
        width: 1.1em; height: 1.1em;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--app-surface); color: var(--app-accent-deep);
        border-radius: 50%; font-size: .75em; flex: 0 0 auto;
    }
    .th-weapon-name { color: var(--app-ink); }
    .th-weapon-level { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--app-ink-soft); white-space: nowrap; }
    .th-weapon-level strong { color: var(--app-ink); }
    .th-weapon-max { font-size: .65em !important; padding: 0 .35em !important; }
    .th-weapon-bar { position: relative; height: .3em; background: var(--app-line-soft); border: 1px solid var(--app-line); border-radius: 999px; overflow: hidden; }
    .th-weapon-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--app-accent), var(--app-accent-deep)); border-radius: inherit; transition: width .3s ease; }
    .th-weapon-bar.is-max .th-weapon-fill { background: linear-gradient(90deg, #10b981, #047857); }
    .th-weapon-next { display: flex; flex-wrap: wrap; gap: .25em .55em; align-items: center; color: var(--app-ink-soft); }
    .th-weapon-next-label { font-weight: 700; color: var(--app-ink); }
    .th-weapon-next-stat { display: inline-flex; align-items: center; gap: .15em; font-variant-numeric: tabular-nums; }
    .th-weapon-note { font-size: .72em; color: var(--app-mute); display: flex; align-items: flex-start; gap: .3em; margin-top: .1em; }
    .th-weapon-note i { color: var(--app-accent-deep); flex: 0 0 auto; line-height: 1.25em; }
    .th-weapon-path { margin-top: .25em; }
    .th-weapon-path-summary {
        display: inline-flex; align-items: center; gap: .2em;
        cursor: pointer; user-select: none; list-style: none;
        font-size: .72em; font-weight: 700; color: var(--app-accent-deep);
        padding: .15em .45em; border-radius: 999px;
        background: var(--app-surface); border: 1px solid var(--app-line);
    }
    .th-weapon-path-summary::-webkit-details-marker { display: none; }
    .th-weapon-path-summary:hover { background: var(--app-accent-soft); }
    .th-weapon-path-chev { transition: transform .2s ease; }
    .th-weapon-path[open] .th-weapon-path-chev { transform: rotate(180deg); }
    .th-weapon-path-table {
        margin-top: .35em; width: 100%; border-collapse: collapse;
        font-size: .72em;
        background: var(--app-surface);
        border-radius: .4em;
        overflow: hidden;
        border: 1px solid var(--app-line);
    }
    .th-weapon-path-table th,
    .th-weapon-path-table td {
        padding: .2em .45em; text-align: left;
        border-bottom: 1px solid var(--app-line-soft);
        font-variant-numeric: tabular-nums;
    }
    .th-weapon-path-table th { background: var(--app-line-soft); font-weight: 700; color: var(--app-ink-soft); }
    .th-weapon-path-table tr:last-child td { border-bottom: 0; }
    .th-weapon-path-table tr.is-current td { background: var(--app-accent-soft); color: var(--app-accent-deep); font-weight: 700; }
    .th-weapon-path-table tr.is-next td { background: rgba(245, 158, 11, .12); }
    .th-weapon-path-table td span { margin-right: .35em; white-space: nowrap; }

    /* Missing-buildable v2 item card variant. Reuses .item-card-v2 chrome
       but tags the card as not-yet-built so the chip filter can isolate it. */
    .item-card-v2.is-missing { border-style: dashed; opacity: .92; }
    .item-card-v2.is-missing .v2-img {
        background: var(--app-accent-soft);
    }
    .item-card-v2.is-missing .v2-missing-banner {
        font-size: .68em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        color: var(--app-accent-deep);
        background: var(--app-accent-soft);
        border: 1px solid var(--app-accent);
        padding: .15em .55em; border-radius: 999px;
        display: inline-flex; align-items: center; gap: .25em;
        align-self: flex-start;
    }
    .ops-header {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        align-items: center;
        justify-content: space-between;
        padding-bottom: .75em;
        border-bottom: 1px solid #f1f5f9;
    }
    .ops-title { display: flex; align-items: center; gap: .55em; }
    .ops-icon { font-size: 1.4em; }
    .ops-title-text {
        margin: 0;
        font-size: 1.1em;
        font-weight: 800;
        color: var(--app-ink);
        letter-spacing: -.01em;
    }
    .ops-stat-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
        gap: .5em;
        max-width: 50em;
    }
    .ops-stat {
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .65em;
        padding: .55em .7em;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: .6em;
        min-height: 4em;
        position: relative;
        box-shadow: 0 .15em .35em rgba(15, 23, 42, .03);
        text-align: left;
    }
    .ops-stat-icon {
        font-size: 1.8em;
        line-height: 1;
        flex: 0 0 auto;
        filter: drop-shadow(0 .12em .2em rgba(15, 23, 42, .2));
    }
    .ops-stat-text {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .ops-stat-num {
        font-size: 1.15em;
        font-weight: 800;
        color: var(--app-ink);
        line-height: 1;
        letter-spacing: -.02em;
    }
    .ops-stat-num.ops-stat-word {
        font-size: .9em;
        font-weight: 700;
        letter-spacing: -.01em;
    }
    .ops-stat-total {
        font-weight: 600;
        font-size: .65em;
        color: #cbd5e1;
        margin-left: .05em;
    }
    .ops-stat-label {
        font-size: .58em;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--app-fade);
        font-weight: 700;
        margin-top: .35em;
        line-height: 1;
    }
    .ops-stat-sub {
        font-size: .58em;
        color: var(--app-mute);
        font-weight: 600;
        margin-top: .25em;
        line-height: 1;
        opacity: .85;
    }
    .ops-stat-builder { border-top: 3px solid #f59e0b; }
    .ops-stat-builder .ops-stat-num { color: #b45309; }
    .ops-stat-lab     { border-top: 3px solid #06b6d4; }
    .ops-stat-lab .ops-stat-word { color: #0e7490; }
    .ops-stat-pet     { border-top: 3px solid #ec4899; }
    .ops-stat-pet .ops-stat-word { color: #be185d; }
    .ops-stat-helper  { border-top: 3px solid var(--app-accent); }
    .ops-stat-helper .ops-stat-num { color: var(--app-accent-deep); }
    .ops-stat-saved   {
        border-top: 3px solid #10b981;
        background: linear-gradient(160deg, #d1fae5, #f0fdf4);
        border-color: rgba(16, 185, 129, .25);
    }
    .ops-stat-saved .ops-stat-num { color: #065f46; font-size: 1em; }

    .ops-section-label {
        font-size: .65em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--app-fade);
        margin-bottom: -.3em;
    }
    .ops-queue {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
        gap: .55em;
    }
    .ops-slot {
        display: flex;
        align-items: center;
        gap: .55em;
        padding: .55em .65em;
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .65em;
        border-left: 3px solid #cbd5e1;
        min-width: 0;
    }
    .ops-slot-builder { border-left-color: #f59e0b; }
    .ops-slot-lab     { border-left-color: #06b6d4; }
    .ops-slot-pet     { border-left-color: #ec4899; }
    .ops-slot-idle    { border-left-color: #cbd5e1; background: var(--app-surface-2); opacity: .75; }
    .ops-slot-done    { border-left-color: #34d399; background: #ecfdf5; }
    .ops-done-time    { color: #047857; font-weight: 700; }

    /* Builder Base sub-section — collapsible, collapsed when fully idle. */
    .ops-bb { margin-top: .5rem; }
    .ops-bb-summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; user-select: none; }
    .ops-bb-summary::-webkit-details-marker { display: none; }
    .ops-bb-chev { transition: transform .15s ease; font-size: .8rem; }
    .ops-bb[open] .ops-bb-chev { transform: rotate(90deg); }
    .ops-bb-meta { margin-left: .35rem; font-weight: 600; color: var(--app-text-muted, #6b7280); text-transform: none; letter-spacing: 0; }
    .ops-slot-badge {
        flex: 0 0 auto;
        font-size: 1em;
        width: 1.6em;
        height: 1.6em;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--app-line-soft);
        border-radius: .35em;
    }
    .ops-slot-thumb {
        width: 2.4em;
        height: 2.4em;
        flex: 0 0 auto;
        background: var(--app-surface);
        border: 1px solid var(--app-line);
        border-radius: .4em;
        padding: .15em;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .ops-slot-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .ops-thumb-blank {
        width: 100%; height: 100%;
        background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
        border-radius: .3em;
    }
    .ops-slot-info { flex: 1; min-width: 0; }
    .ops-slot-name {
        font-size: .78em;
        font-weight: 700;
        color: var(--app-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: .35em;
    }
    .ops-slot-lvl { font-size: .68em; font-weight: 600; color: #6b7280; margin-top: .1em; }
    .ops-slot-time {
        font-size: .75em;
        font-weight: 800;
        color: #f59e0b;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .ops-idle-name { color: var(--app-fade) !important; font-weight: 600 !important; }
    .ops-idle-time { color: #cbd5e1 !important; font-style: italic; }
    .ops-helper-tag {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #b45309;
        font-size: .8em;
        font-weight: 700;
        padding: .05em .35em;
        border-radius: .3em;
        display: inline-flex;
        align-items: center;
        gap: .15em;
    }
    .ops-helpers-row { display: flex; flex-wrap: wrap; gap: .5em; }
    .ops-helper-chip {
        display: flex;
        align-items: center;
        gap: .5em;
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .55em;
        padding: .4em .65em;
        min-width: 12em;
        flex: 1 1 12em;
        max-width: 18em;
    }
    .ops-helper-chip.is-on {
        background: linear-gradient(135deg, #f0fdf4, var(--app-surface));
        border-color: rgba(16, 185, 129, .25);
    }
    .ops-helper-chip.is-off { opacity: .8; }
    .ops-helper-icon { font-size: 1.2em; }
    .ops-helper-body { min-width: 0; flex: 1; }
    .ops-helper-name {
        font-size: .78em;
        font-weight: 700;
        color: var(--app-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ops-helper-meta {
        font-size: .68em;
        display: flex;
        gap: .35em;
        margin-top: .1em;
        flex-wrap: wrap;
    }
    .ops-helper-target { color: #065f46; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ops-helper-cd { color: var(--app-accent); font-weight: 700; }
    .ops-helper-idle { color: var(--app-fade); font-weight: 600; }
    .ops-helper-saved { color: #b45309; font-weight: 700; }
    .ops-empty {
        font-size: .85em;
        color: var(--app-fade);
        padding: 1.5em;
        text-align: center;
        grid-column: 1 / -1;
    }

    /* ===== Slim card (lab/pet/builders/helpers) ===== */
    .lab-card.slim-card {
        width: 100%;
        height: auto;
        min-height: 17em;
        max-width: none;
        padding: 1em;
    }
    .slim-card .lab-header {
        margin-bottom: .7em;
    }
    .slim-card .lab-image-container {
        width: 2.8em;
        height: 2.8em;
        padding: 0.2em;
    }
    .slim-card .header-title {
        font-size: 1em;
    }
    .slim-card .slim-subtitle {
        font-size: .7em;
        color: #6b7280;
        font-weight: 600;
    }
    .slim-card .slim-tile-list {
        display: flex;
        flex-direction: column;
        gap: .4em;
        overflow-y: auto;
        max-height: 22em;
        padding-right: .2em;
        scrollbar-width: thin;
    }
    .slim-card .slim-tile-list::-webkit-scrollbar { width: .35em; }
    .slim-card .slim-tile-list::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .15); border-radius: 1em; }
    .slim-tile {
        display: flex;
        align-items: center;
        gap: .5em;
        padding: .4em .5em;
        background: #f9fafb;
        border-radius: .5em;
        border: 1px solid rgba(15, 23, 42, .04);
    }
    .slim-tile-thumb {
        width: 2em;
        height: 2em;
        border-radius: .35em;
        object-fit: contain;
        flex: 0 0 auto;
        background: var(--app-surface);
        padding: .15em;
        border: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1em;
    }
    .slim-tile-thumb-blank {
        background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
    }
    .slim-tile-info { min-width: 0; flex: 1; }
    .slim-tile-name {
        font-size: .78em;
        font-weight: 700;
        color: var(--app-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: .35em;
    }
    .slim-tile-target {
        font-size: .68em;
        color: #6b7280;
        margin-top: .1em;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .slim-tile-meta {
        display: flex;
        gap: .4em;
        font-size: .68em;
        margin-top: .15em;
        flex-wrap: wrap;
    }
    .slim-tile-lvl { font-weight: 700; color: #374151; }
    .slim-tile-time { color: #f59e0b; font-weight: 700; }
    .slim-tile-saved { color: #b45309; font-weight: 700; }
    .slim-tile-cooldown { color: var(--app-accent); font-weight: 700; }
    .slim-tile-status {
        font-size: .85em;
        padding: .05em .4em;
        border-radius: .3em;
        font-weight: 700;
        margin-left: auto;
    }
    .slim-tile-status.status-on { background: #d1fae5; color: #065f46; }
    .slim-tile-status.status-off { background: #e5e7eb; color: #6b7280; }
    .slim-helper-tag {
        background: #fef3c7;
        color: #b45309;
        font-size: .8em;
        font-weight: 700;
        padding: .05em .35em;
        border-radius: .3em;
        display: inline-flex;
        align-items: center;
        gap: .2em;
    }
    .slim-empty, .slim-more {
        font-size: .72em;
        color: #6b7280;
        padding: .35em .25em;
        text-align: center;
    }
    .helper-tile.is-assisting {
        border-color: rgba(16, 185, 129, .3);
        background: linear-gradient(135deg, #f0fdf4, #f9fafb);
    }
    .helper-tile.is-idle {
        opacity: .85;
    }
    .helpers-emoji-container {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .helpers-icon { font-size: 1.7em; }

    /* ===== Builders card legacy classes (kept for fallback) ===== */
    .builders-card.lab-card {
        width: 100%;
        height: auto;
        min-height: 16em;
        max-width: none;
    }
    .builders-card .helper-summary {
        margin-top: .55em;
        padding: .5em .65em;
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border: 1px solid rgba(245, 158, 11, .25);
        border-radius: .55em;
        display: flex;
        align-items: center;
        gap: .55em;
        font-size: .75em;
    }
    .builders-card .helper-summary .helper-icon {
        font-size: 1.1em;
    }
    .builders-card .helper-summary .helper-text {
        color: #92400e;
        font-weight: 600;
        flex: 1;
        min-width: 0;
    }
    .builders-card .helper-summary .helper-saved {
        color: #b45309;
        font-weight: 700;
        font-size: 1em;
        white-space: nowrap;
    }
    .builders-card .builder-helper-badge {
        background: #fef3c7;
        color: #b45309;
        font-size: .65em;
        font-weight: 700;
        padding: .15em .45em;
        border-radius: .3em;
        margin-left: .4em;
        display: inline-flex;
        align-items: center;
        gap: .25em;
    }
    .builders-card .builder-upgrade-list {
        display: flex;
        flex-direction: column;
        gap: .45em;
        margin-top: .5em;
        max-height: 9em;
        overflow-y: auto;
        padding-right: .25em;
        scrollbar-width: thin;
    }
    .builders-card .builder-upgrade-list::-webkit-scrollbar { width: .35em; }
    .builders-card .builder-upgrade-list::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .15); border-radius: 1em; }
    .builders-card .builder-upgrade-row {
        display: flex;
        align-items: center;
        gap: .55em;
        padding: .4em .5em;
        background: #f9fafb;
        border-radius: .5em;
        border: 1px solid rgba(15, 23, 42, .04);
    }
    .builders-card .builder-thumb {
        width: 2em;
        height: 2em;
        border-radius: .35em;
        object-fit: contain;
        flex: 0 0 auto;
        background: var(--app-surface);
        padding: .15em;
        border: 1px solid #eee;
    }
    .builders-card .builder-thumb-blank {
        background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
    }
    .builders-card .builder-upgrade-info { min-width: 0; flex: 1; }
    .builders-card .builder-upgrade-name {
        font-size: .8em;
        font-weight: 700;
        color: var(--app-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .builders-card .builder-upgrade-meta {
        display: flex;
        gap: .5em;
        font-size: .7em;
        color: #6b7280;
        margin-top: .1em;
    }
    .builders-card .builder-lvl {
        font-weight: 700;
        color: #374151;
    }
    .builders-card .builder-time {
        color: #f59e0b;
        font-weight: 700;
    }
    .builders-card .builder-empty,
    .builders-card .builder-more {
        font-size: .75em;
        color: #6b7280;
        padding: .35em .25em;
        text-align: center;
    }

    /* ===== Army card (overview grid cell 4) ===== */
    .army-card {
        background: var(--app-surface);
        border-radius: 1.25em;
        box-shadow: 0 0.625em 1.56em rgba(0, 0, 0, 0.1);
        border: 0.0625em solid rgba(0, 0, 0, 0.05);
        padding: 1em;
        display: flex;
        flex-direction: column;
        gap: .7em;
        overflow: hidden;
        min-height: 16em;
    }
    .army-tabs {
        display: flex;
        gap: .3em;
        flex-wrap: wrap;
        padding-bottom: .4em;
        border-bottom: 1px solid #f3f4f6;
    }
    .army-tab {
        background: transparent;
        border: 0;
        font-size: .8em;
        font-weight: 700;
        color: #6b7280;
        padding: .4em .7em;
        border-radius: .5em;
        cursor: pointer;
        transition: background .12s, color .12s;
    }
    .army-tab span {
        font-weight: 500;
        font-size: .85em;
        opacity: .75;
    }
    .army-tab:hover { background: #f3f4f6; }
    .army-tab.active {
        background: var(--app-accent);
        color: #fff;
    }
    .army-tab.active span { opacity: 1; }

    .army-panels {
        flex: 1;
        position: relative;
        min-height: 0;
    }
    .army-panel {
        display: none;
        grid-template-columns: repeat(auto-fill, minmax(3em, 1fr));
        gap: .35em;
        overflow-y: auto;
        max-height: 16em;
        padding-right: .25em;
        scrollbar-width: thin;
    }
    .army-panel.active { display: grid; }
    .army-panel::-webkit-scrollbar { width: .35em; }
    .army-panel::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .15); border-radius: 1em; }

    .army-item {
        position: relative;
        aspect-ratio: 1;
        background: linear-gradient(135deg, var(--app-canvas), var(--app-line-soft));
        border-radius: .5em;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .15em;
        border: 2px solid transparent;
        cursor: default;
    }
    .army-item img,
    .army-item-blank {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: .35em;
    }
    .army-item-blank {
        background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
    }
    .army-item .army-lvl {
        position: absolute;
        bottom: .1em;
        right: .1em;
        background: rgba(15, 23, 42, .85);
        color: #fff;
        font-size: .65em;
        font-weight: 700;
        padding: 0 .35em;
        border-radius: .3em;
        line-height: 1.4;
        min-width: 1.2em;
        text-align: center;
    }
    .army-item.is-capped { border-color: #a7f3d0; }
    .army-item.is-capped .army-lvl { background: #10b981; }
    .army-item.is-behind { border-color: #fca5a5; }
    .army-item.is-behind .army-lvl { background: #ef4444; }
    .army-item.is-mid { border-color: #fcd34d; }
    .army-item.is-mid .army-lvl { background: #f59e0b; }
    .army-empty {
        font-size: .8em;
        color: #6b7280;
        padding: 1em;
        text-align: center;
        grid-column: 1 / -1;
    }

    /* Heroes panel (with equipped equipment) */
    .army-panel-heroes {
        display: none;
        grid-template-columns: repeat(auto-fill, minmax(3.8em, 1fr));
        gap: .55em;
        overflow-y: auto;
        max-height: 16em;
        padding-right: .25em;
    }
    .army-panel-heroes.active { display: grid; }
    .hero-block {
        display: flex;
        flex-direction: column;
        gap: .3em;
        background: linear-gradient(180deg, var(--app-canvas), var(--app-line-soft));
        border-radius: .55em;
        border: 2px solid transparent;
        padding: .3em;
    }
    .hero-block.is-capped { border-color: #a7f3d0; }
    .hero-block.is-behind { border-color: #fca5a5; }
    .hero-block.is-mid    { border-color: #fcd34d; }
    .hero-block-main {
        position: relative;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--app-surface);
        border-radius: .4em;
        overflow: hidden;
        padding: .15em;
    }
    .hero-block-main img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .hero-block-main .army-lvl {
        position: absolute;
        bottom: .1em;
        right: .1em;
        background: rgba(15, 23, 42, .85);
        color: #fff;
        font-size: .7em;
        font-weight: 700;
        padding: 0 .35em;
        border-radius: .3em;
    }
    .hero-block.is-capped .hero-block-main .army-lvl { background: #10b981; }
    .hero-block.is-behind .hero-block-main .army-lvl { background: #ef4444; }
    .hero-block.is-mid .hero-block-main .army-lvl    { background: #f59e0b; }
    .hero-equipped {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .25em;
    }
    .hero-equipped-slot {
        position: relative;
        aspect-ratio: 1;
        background: var(--app-surface);
        border-radius: .35em;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .1em;
        overflow: hidden;
    }
    .hero-equipped-slot.is-capped { border-color: #a7f3d0; }
    .hero-equipped-slot.is-behind { border-color: #fca5a5; }
    .hero-equipped-slot.is-mid    { border-color: #fcd34d; }
    .hero-equipped-slot img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .hero-equipped-lvl {
        position: absolute;
        bottom: 0;
        right: 0;
        background: rgba(15, 23, 42, .8);
        color: #fff;
        font-size: .72em;
        font-weight: 700;
        padding: 0 .3em;
        border-radius: .2em 0 0 0;
    }
    .hero-equipped-empty {
        background: repeating-linear-gradient(
            45deg,
            #f9fafb,
            #f9fafb 4px,
            #f1f5f9 4px,
            #f1f5f9 8px
        );
        border-style: dashed;
        border-color: #cbd5e1;
    }
    .hero-equipped-empty-icon {
        color: #cbd5e1;
        font-weight: 700;
        font-size: .9em;
    }

    /* Grouped panel (equipment by hero) */
    .army-panel-grouped {
        display: none;
        flex-direction: column;
        gap: .65em;
        overflow-y: auto;
        max-height: 16em;
        padding-right: .25em;
    }
    .army-panel-grouped.active { display: flex; }
    .army-group {
        display: flex;
        flex-direction: column;
        gap: .35em;
    }
    .army-group-head {
        display: flex;
        align-items: center;
        gap: .5em;
        font-size: .72em;
        font-weight: 700;
        color: var(--app-ink-soft);
        text-transform: uppercase;
        letter-spacing: .04em;
        padding-bottom: .25em;
        border-bottom: 1px dashed #e5e7eb;
    }
    .army-group-label { flex: 1; }
    .army-group-count {
        background: var(--app-accent-soft);
        color: var(--app-accent-deep);
        padding: .05em .45em;
        border-radius: 1em;
        font-size: .85em;
    }
    .army-group-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(3em, 1fr));
        gap: .35em;
    }

    /* ===== Refactored Village Hero ===== */
    .vh {
        background: linear-gradient(180deg, var(--app-surface), var(--app-surface-2));
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: 1em;
        padding: 1em 1.2em;
        margin-bottom: 1em;
        box-shadow: 0 .35em .9em rgba(15, 23, 42, .04);
        position: relative;
        overflow: hidden;
    }
    .vh::before {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: .28em;
        background: linear-gradient(180deg, var(--app-accent), var(--app-accent-deep));
    }
    .vh-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .65em;
        padding-bottom: .85em;
        margin-bottom: .9em;
        border-bottom: 1px solid #f1f5f9;
    }
    .vh-status-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .35em;
        flex: 1;
        min-width: 0;
    }
    .vh-status-chips .badge {
        font-size: .68em;
        font-weight: 700;
        padding: .35em .6em;
        border-radius: .4em;
    }
    .vh-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .vh-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        font-weight: 700;
        padding: 9px 14px;
        border-radius: 10px;
        border: 1px solid var(--app-line);
        background: var(--app-surface);
        color: var(--app-ink);
        line-height: 1;
        transition: border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease;
    }
    .vh-actions .btn i { font-size: 16px; line-height: 1; }
    .vh-actions .vh-btn:hover {
        border-color: var(--app-accent);
        color: var(--app-accent-deep);
        background: var(--app-surface);
    }
    .vh-actions .vh-btn-primary {
        border: 1px solid transparent;
        color: #fff;
        background: linear-gradient(135deg, var(--app-accent), var(--app-accent-deep));
        box-shadow: none;
    }
    .vh-actions .vh-btn-primary:hover {
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px -6px rgba(240, 52, 79, .55);
    }
    .vh-actions .btn-icon {
        width: 2.2em;
        height: 2.2em;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .vh-hero {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 1em 1.2em;
        flex-wrap: wrap;
    }
    .vh-hero .vh-actions { justify-content: flex-end; }
    @media (max-width: 768px) {
        .vh-hero { flex-direction: column-reverse; align-items: stretch; }
        .vh-hero .vh-actions { justify-content: flex-start; }
    }
    .vh-hero-mid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .55em;
        padding-left: 1em;
        border-left: 1px solid #e2e8f0;
        min-width: 0;
    }
    @media (max-width: 991px) {
        .vh-hero-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 1199px) {
        .vh-hero-mid { border: 0; padding: 0; padding-top: 1em; border-top: 1px solid #e2e8f0; }
    }
    .vh-ops {
        display: flex;
        align-items: center;
        gap: .7rem;
        padding: .75em .9em;
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .75em;
        box-shadow: 0 .25em .55em rgba(15, 23, 42, .04);
        border-left: 2px solid var(--vh-ops-accent-soft, #e5e7eb);
        transition: transform .12s ease, box-shadow .12s ease;
        text-decoration: none;
        color: inherit;
        min-width: 0;
    }
    .vh-ops:hover {
        transform: translateY(-.1em);
        box-shadow: 0 .45em .9em rgba(15, 23, 42, .08);
        text-decoration: none;
        color: inherit;
    }
    .vh-ops-builder { --vh-ops-accent: #f59e0b; --vh-ops-accent-soft: #fcd34d; --vh-ops-accent-bg: #fffbeb; }
    .vh-ops-helper  { --vh-ops-accent: var(--app-accent); --vh-ops-accent-soft: #c4b5fd; --vh-ops-accent-bg: #f5f3ff; }
    .vh-ops-lab     { --vh-ops-accent: #06b6d4; --vh-ops-accent-soft: #67e8f9; --vh-ops-accent-bg: #ecfeff; }
    .vh-ops-pet     { --vh-ops-accent: #ec4899; --vh-ops-accent-soft: #f9a8d4; --vh-ops-accent-bg: #fdf2f8; }
    .vh-ops-icon {
        width: 3.4em;
        height: 3.4em;
        background: transparent;
        color: var(--vh-ops-accent, #6b7280);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05em;
        flex: 0 0 auto;
        overflow: visible;
    }
    .vh-ops-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 .2em .35em rgba(15, 23, 42, .15));
    }
    .vh-ops-body { min-width: 0; flex: 1; }
    .vh-ops-val {
        font-size: 1.15em;
        font-weight: 800;
        color: var(--vh-ops-accent, #1f2937);
        line-height: 1;
        letter-spacing: -.01em;
    }
    .vh-ops-val small { font-weight: 500; color: var(--app-fade); font-size: .65em; margin-left: .05em; }
    .vh-ops-val.word { font-size: .95em; }
    .vh-ops-val.off { color: var(--app-fade); }

    /* Lab researching + Pet training inline SVG animations */
    .vh-ops-val { display: inline-flex; align-items: center; gap: .35em; }
    .vh-anim { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
    .vh-anim-flask .vh-bubble {
        opacity: 0;
        animation: vh-bubble 1.8s ease-out infinite;
    }
    .vh-anim-flask .vh-bubble.b1 { animation-delay: 0s; }
    .vh-anim-flask .vh-bubble.b2 { animation-delay: 0.45s; }
    .vh-anim-flask .vh-bubble.b3 { animation-delay: 0.9s; }
    @keyframes vh-bubble {
        0%   { transform: translateY(0); opacity: 0; }
        15%  { opacity: 1; }
        100% { transform: translateY(-9px); opacity: 0; }
    }

    .vh-anim-paw .vh-pawdot,
    .vh-anim-paw .vh-pawpad {
        animation: vh-paw-pulse 1.4s ease-in-out infinite;
        transform-origin: center;
        transform-box: fill-box;
    }
    .vh-anim-paw .vh-pawdot.d1 { animation-delay: 0s; }
    .vh-anim-paw .vh-pawdot.d2 { animation-delay: 0.15s; }
    .vh-anim-paw .vh-pawdot.d3 { animation-delay: 0.3s; }
    .vh-anim-paw .vh-pawpad   { animation-delay: 0.45s; }
    @keyframes vh-paw-pulse {
        0%, 100% { transform: scale(1);    opacity: .55; }
        50%      { transform: scale(1.15); opacity: 1; }
    }

    /* Sleeping Zzz animation when Idle */
    .vh-anim-sleep .vh-z {
        opacity: 0;
        transform-origin: center;
        transform-box: fill-box;
        animation: vh-zfloat 2.4s ease-in-out infinite;
    }
    .vh-anim-sleep .vh-z.z1 { animation-delay: 0s;   }
    .vh-anim-sleep .vh-z.z2 { animation-delay: 0.4s; }
    .vh-anim-sleep .vh-z.z3 { animation-delay: 0.8s; }
    @keyframes vh-zfloat {
        0%   { transform: translateY(0)     scale(.85); opacity: 0; }
        25%  { opacity: .9; }
        100% { transform: translateY(-7px)  scale(1.1); opacity: 0; }
    }
    .vh-ops-lbl {
        font-size: .62em;
        color: #6b7280;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-top: .3em;
    }

    .vh-hero-left {
        display: flex;
        align-items: center;
        gap: 20px;
        min-width: 0;
        flex: 1 1 auto;
    }
    .vh-avatar {
        width: 72px;
        height: 72px;
        flex: 0 0 auto;
        background: linear-gradient(135deg, #7C3AED, #5B21B6);
        color: #fff;
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 20px;
        letter-spacing: -.01em;
        border: none;
        position: relative;
        overflow: visible;
    }
    .vh-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
    .vh-avatar-th {
        position: absolute;
        bottom: -6px;
        right: -6px;
        background: linear-gradient(135deg, #FF8A3D 0%, #FF5247 46%, #F0344F 100%);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
        padding: 3px 7px;
        border-radius: 8px;
        border: 2px solid var(--app-surface);
        line-height: 1;
    }

    .vh-id { min-width: 0; flex: 1; }
    .vh-id .vh-name-row {
        display: flex;
        align-items: center;
        gap: .55em;
        flex-wrap: wrap;
        margin-bottom: .2em;
    }
    .vh-id .vh-name {
        font-size: 24px;
        font-weight: 700;
        color: var(--app-ink);
        letter-spacing: -.015em;
        margin: 0;
        line-height: 1.15;
    }
    .vh-id .vh-role {
        background: #d1fae5;
        color: #065f46;
        font-size: .65em;
        font-weight: 700;
        padding: .25em .55em;
        border-radius: .35em;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .vh-id .vh-tag {
        font-size: 13px;
        color: var(--app-mute);
        font-family: ui-monospace, Menlo, monospace;
        margin-top: 2px;
    }
    .vh-meta-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 9px;
    }
    .vh-pill {
        display: inline-flex;
        align-items: center;
        gap: .3em;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 7px;
        border: 1px solid;
    }
    .vh-pill-label {
        font-size: .85em;
        font-weight: 500;
        color: var(--app-mute);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-right: .15em;
    }
    .vh-pill.th    { background: #f5f3ff; color: var(--app-accent-deep); border-color: var(--app-accent-soft); }
    .vh-pill.bh    { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
    .vh-pill.xp    { background: var(--app-canvas); color: var(--app-ink-soft); border-color: #cbd5e1; }
    .vh-pill.lead  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; text-transform: capitalize; }
    .vh-pill.league,
    .vh-pill.clan,
    .vh-pill.api   { background: var(--app-canvas); color: var(--app-ink-soft); border-color: #e2e8f0; font-weight: 600; }

    .vh-clan-inline {
        display: inline-flex;
        align-items: center;
        gap: .45em;
        margin-top: .55em;
        padding: .3em .65em;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: .5em;
        font-size: .8em;
    }
    .vh-clan-inline-badge { width: 1.4em; height: 1.4em; object-fit: contain; }
    .vh-clan-inline-name { font-weight: 800; color: #92400e; }
    .vh-clan-inline-tag { font-family: ui-monospace, Menlo, monospace; font-size: .85em; color: #b45309; opacity: .8; }
    .vh-clan-inline-level {
        font-family: ui-monospace, Menlo, monospace;
        font-weight: 800;
        font-size: .85em;
        color: #fff;
        background: #d97706;
        padding: .1em .4em;
        border-radius: .3em;
    }

    .vh-hero-right {
        display: flex;
        align-items: center;
        gap: .9em;
        padding-left: 1.2em;
        border-left: 1px solid #e2e8f0;
        justify-content: flex-end;
        min-width: 0;
    }
    @media (max-width: 768px) {
        .vh-hero-right { border-left: 0; padding-left: 0; border-top: 1px solid #e2e8f0; padding-top: 1em; justify-content: flex-start; }
    }
    .vh-clan-badge {
        width: 3.6em;
        height: 3.6em;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--app-canvas);
        border-radius: .7em;
        padding: .25em;
        border: 1px solid #e2e8f0;
    }
    .vh-clan-badge img { width: 100%; height: 100%; object-fit: contain; }
    .vh-clan-body { min-width: 0; }
    .vh-clan-name {
        font-size: 1em;
        font-weight: 800;
        color: var(--app-ink);
        line-height: 1.1;
        margin-bottom: .15em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .vh-clan-tag {
        font-size: .72em;
        color: #6b7280;
        font-family: ui-monospace, Menlo, monospace;
        margin-bottom: .25em;
    }
    .vh-clan-level {
        font-size: .68em;
        font-weight: 700;
        color: #b45309;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        padding: .2em .55em;
        border-radius: .35em;
        display: inline-flex;
        align-items: center;
        gap: .35em;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .vh-clan-level .lbl { color: #92400e; font-weight: 600; opacity: .8; }

    /* ===== Village Analytic Cards ===== */
    .va-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));
        gap: 1em;
        margin-bottom: 1em;
    }
    .va-card {
        background: var(--app-surface);
        border: 1px solid rgba(15, 23, 42, .06);
        border-radius: .85em;
        padding: 1em 1.1em;
        box-shadow: 0 .35em .8em rgba(15, 23, 42, .04);
        min-width: 0;
    }
    .va-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .9em;
        flex-wrap: wrap;
        gap: .35em;
    }
    .va-title > span:first-child {
        font-size: .85em;
        font-weight: 800;
        color: var(--app-ink);
        display: inline-flex;
        align-items: center;
        gap: .4em;
    }
    .va-title .ti { color: var(--app-accent); font-size: 1.2em; }
    .va-sub { font-size: .68em; color: var(--app-fade); font-weight: 600; }

    /* Hall (TH/BH) card */
    .va-hall {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 1em;
    }
    .va-hall-img {
        position: relative;
        width: 100%;
        min-height: 10em;
        background: transparent;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 1 / -1;
        margin-top: -.5em;
    }
    .va-hall-img img {
        max-width: 100%;
       
        object-fit: contain;
        filter: drop-shadow(0 .35em .7em rgba(15, 23, 42, .15));
    }
    .va-hall-fallback {
        font-size: 3.5em;
        font-weight: 900;
        color: var(--app-accent-deep);
        letter-spacing: -.02em;
        opacity: .35;
    }
    .va-hall-img-bh .va-hall-fallback { color: #0e7490; }
    .va-hall-ring {
        --p: 0;
        position: absolute;
        bottom: .35em;
        right: .35em;
        width: 3.2em;
        height: 3.2em;
        border-radius: 50%;
        background: conic-gradient(#10b981 calc(var(--p) * 1%), #e2e8f0 0);
        display: grid;
        place-items: center;
        border: 2px solid #fff;
        box-shadow: 0 .35em .8em rgba(15, 23, 42, .15);
    }
    .va-hall-ring-bh {
        background: conic-gradient(#06b6d4 calc(var(--p) * 1%), #e2e8f0 0);
    }
    .va-hall-ring::before {
        content: "";
        position: absolute;
        inset: .35em;
        background: var(--app-surface);
        border-radius: 50%;
    }
    .va-hall-pct {
        position: relative;
        font-size: .8em;
        font-weight: 800;
        color: var(--app-ink);
        letter-spacing: -.02em;
    }
    .va-hall-pct small { font-size: .65em; color: #6b7280; font-weight: 600; }
    .va-hall-detail {
        grid-column: 1 / -1;
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: .55em .75em;
        background: var(--app-canvas);
        border-radius: .55em;
        border: 1px solid #e2e8f0;
    }
    .va-hall-detail .va-readiness-row { font-size: .82em; }

    /* Town Hall weapon row — slots under the Capped / Total summary in the
       TH readiness card. Compact two-line block: name + icon + L cur/max on
       top, full-width progress bar below. */
    .va-weapon-row {
        display: flex;
        flex-direction: column;
        gap: .25em;
        margin-top: .35em;
        padding-top: .5em;
        border-top: 1px dashed var(--app-line);
        font-size: .82em;
    }
    .va-weapon-head {
        display: flex; align-items: center; gap: .4em;
        color: var(--app-ink); font-weight: 600;
    }
    .va-weapon-icon {
        width: 1.5em; height: 1.5em;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--app-accent-soft);
        color: var(--app-accent-deep);
        border-radius: 50%;
        font-size: .9em;
    }
    .va-weapon-name { color: var(--app-ink); }
    .va-weapon-level { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--app-ink-soft); }
    .va-weapon-level strong { color: var(--app-ink); }
    .va-weapon-max { font-size: .7em !important; padding: .1em .45em !important; }
    .va-weapon-bar {
        position: relative;
        height: .45em;
        background: var(--app-line-soft);
        border: 1px solid var(--app-line);
        border-radius: 999px;
        overflow: hidden;
    }
    .va-weapon-fill {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--app-accent), var(--app-accent-deep));
        border-radius: inherit;
        transition: width .3s ease;
    }
    .va-weapon-bar.is-max .va-weapon-fill { background: linear-gradient(90deg, #10b981, #047857); }

    .va-hall-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .35em;
        margin-top: .85em;
        padding-top: .8em;
        border-top: 1px dashed #e2e8f0;
    }
    .va-chip {
        display: inline-flex;
        align-items: center;
        gap: .25em;
        font-size: .72em;
        font-weight: 700;
        color: #334155;
        background: var(--app-canvas);
        border: 1px solid #e2e8f0;
        padding: .25em .55em;
        border-radius: .45em;
    }
    .va-chip:hover { background: var(--app-line-soft); }
    .va-chip-icon { font-size: 1em; }
    .va-chip small { color: var(--app-fade); font-weight: 600; margin-left: .1em; }

    /* Progress chip (with bar) */
    .va-pchip {
        display: flex;
        flex-direction: column;
        gap: .25em;
        padding: .4em .55em;
        background: var(--app-surface);
        border: 1px solid #e2e8f0;
        border-radius: .5em;
        min-width: 4.5em;
        flex: 1 0 4.5em;
    }
    .va-pchip-head { display: flex; align-items: center; gap: .35em; justify-content: space-between; }
    .va-pchip-icon { font-size: 1em; }
    .va-pchip-num {
        font-size: .72em;
        font-weight: 800;
        color: var(--app-ink);
        font-family: ui-monospace, Menlo, monospace;
    }
    .va-pchip-num small { font-weight: 600; color: var(--app-fade); font-size: .85em; }
    .va-pchip-bar {
        height: .3em;
        background: var(--app-line-soft);
        border-radius: 1em;
        overflow: hidden;
    }
    .va-pchip-fill {
        display: block;
        height: 100%;
        border-radius: 1em;
        transition: width .4s ease;
    }
    .va-pchip-bar.good .va-pchip-fill { background: linear-gradient(90deg, #10b981, #84cc16); }
    .va-pchip-bar.mid  .va-pchip-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .va-pchip-bar.low  .va-pchip-fill { background: linear-gradient(90deg, #ef4444, #f97316); }

    /* Readiness ring (legacy) */
    .va-readiness { display: flex; align-items: center; gap: 1em; }
    .va-readiness-ring {
        --p: 0;
        width: 5em; height: 5em;
        border-radius: 50%;
        background: conic-gradient(#10b981 calc(var(--p) * 1%), #e2e8f0 0);
        display: grid;
        place-items: center;
        position: relative;
        flex: 0 0 auto;
    }
    .va-readiness-ring::before {
        content: "";
        position: absolute;
        inset: .5em;
        background: var(--app-surface);
        border-radius: 50%;
    }
    .va-readiness-num {
        position: relative;
        font-size: 1.3em;
        font-weight: 800;
        color: var(--app-ink);
        letter-spacing: -.02em;
    }
    .va-readiness-num small { font-size: .55em; font-weight: 600; color: #6b7280; }
    .va-readiness-detail { display: flex; flex-direction: column; gap: .25em; flex: 1; min-width: 0; }
    .va-readiness-row {
        display: flex;
        align-items: center;
        gap: .4em;
        font-size: .78em;
        color: var(--app-ink-soft);
    }
    .va-readiness-row strong { color: var(--app-ink); font-weight: 800; margin-left: .15em; }
    .va-dot { width: .55em; height: .55em; border-radius: 50%; flex: 0 0 auto; }

    /* Category bars */
    .va-cats { display: flex; flex-direction: column; gap: .45em; }
    .va-cat-row {
        display: grid;
        grid-template-columns: 5.5em 1fr 3em;
        gap: .55em;
        align-items: center;
        font-size: .8em;
    }
    .va-cat-label { font-weight: 700; color: #334155; }
    .va-cat-bar {
        height: .55em;
        background: var(--app-line-soft);
        border-radius: 1em;
        overflow: hidden;
    }
    .va-cat-fill {
        height: 100%;
        border-radius: 1em;
        transition: width .5s ease;
    }
    .va-cat-bar.good .va-cat-fill { background: linear-gradient(90deg, #10b981, #84cc16); }
    .va-cat-bar.mid  .va-cat-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .va-cat-bar.low  .va-cat-fill { background: linear-gradient(90deg, #ef4444, #f97316); }
    .va-cat-frac { font-family: ui-monospace, Menlo, monospace; font-size: .85em; color: var(--app-mute); font-weight: 700; text-align: right; }

    /* Pipeline */
    .va-pipeline { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
    .va-pipe-stat {
        display: flex;
        align-items: center;
        gap: .55em;
        padding: .55em .7em;
        background: var(--app-canvas);
        border-radius: .55em;
        border: 1px solid #e2e8f0;
    }
    .va-pipe-icon {
        width: 2.2em;
        height: 2.2em;
        border-radius: .45em;
        display: flex; align-items: center; justify-content: center;
        font-size: 1em;
        flex: 0 0 auto;
    }
    .va-pipe-num {
        font-size: 1em;
        font-weight: 800;
        color: var(--app-ink);
        line-height: 1;
        letter-spacing: -.02em;
    }
    .va-pipe-lbl { font-size: .62em; color: var(--app-mute); margin-top: .2em; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

    .va-pipe-tabs {
        display: flex;
        gap: .35em;
        margin-bottom: .5em;
        border-bottom: 1px solid var(--app-line);
    }
    .va-pipe-tab {
        background: transparent;
        border: 0;
        padding: .4em .75em;
        font-size: .72em;
        font-weight: 700;
        color: var(--app-mute);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        display: inline-flex;
        align-items: center;
        gap: .35em;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .va-pipe-tab:hover { color: var(--app-accent-deep); }
    .va-pipe-tab.is-active { color: var(--app-accent-deep); border-bottom-color: var(--app-accent); }
    .va-pipe-tab-count {
        font-size: .85em;
        background: var(--app-accent-soft);
        color: var(--app-accent-deep);
        padding: .1em .4em;
        border-radius: 999px;
    }
    .va-pipe-tab.is-active .va-pipe-tab-count { background: var(--app-accent); color: #fff; }
    .va-pipeline-cats { display: flex; flex-direction: column; gap: .5em; }
    .va-pipeline-cats.is-hidden { display: none; }
    .va-pipe-empty { font-size: .8em; color: var(--app-fade); text-align: center; padding: 1em; }
    .va-pipe-cat {
        background: var(--app-surface-2);
        border: 1px solid var(--app-line);
        border-radius: .55em;
        padding: .5em .65em;
        display: flex; flex-direction: column; gap: .35em;
    }
    .va-pipe-cat-head { display: flex; align-items: center; gap: .45em; }
    .va-pipe-cat-icon {
        width: 1.6em; height: 1.6em;
        border-radius: .35em;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: .9em; font-weight: 800;
    }
    .va-pipe-cat-name {
        font-size: .72em; font-weight: 800;
        color: var(--app-ink);
        text-transform: uppercase; letter-spacing: .05em;
    }
    .va-pipe-cat-workers {
        margin-left: .25em;
        font-size: .68em; font-weight: 700; color: var(--app-mute);
    }
    .va-pipe-cat-time {
        margin-left: auto;
        font-size: .78em; font-weight: 800; color: var(--app-ink);
    }
    .va-pipe-cat-res { display: flex; flex-wrap: wrap; gap: .3em; }
    .va-pipe-cat-chip {
        display: inline-flex; align-items: baseline; gap: .25em;
        padding: .22em .55em;
        border-radius: 999px;
        font-size: .7em;
        font-weight: 700;
        line-height: 1.2;
    }
    .va-pipe-cat-chip b { font-weight: 800; font-size: 1em; }
    .va-pipe-cat-chip-lbl { font-size: .85em; opacity: .85; text-transform: uppercase; letter-spacing: .03em; }

    /* Heroes */
    .va-heroes { display: flex; flex-direction: column; gap: .45em; }
    .va-hero-row {
        display: grid;
        grid-template-columns: 2.2em 1fr auto;
        gap: .55em;
        align-items: center;
        padding: .4em .55em;
        background: var(--app-canvas);
        border-radius: .55em;
        border: 1px solid #e2e8f0;
    }
    .va-hero-thumb {
        width: 2.2em;
        height: 2.2em;
        background: linear-gradient(135deg, #f5f3ff, var(--app-accent-soft));
        border-radius: .45em;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: .15em;
    }
    .va-hero-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .va-hero-info { min-width: 0; }
    .va-hero-name {
        font-size: .78em;
        font-weight: 700;
        color: var(--app-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .va-hero-bar {
        height: .35em;
        background: #e2e8f0;
        border-radius: 1em;
        margin-top: .25em;
        overflow: hidden;
    }
    .va-hero-fill {
        height: 100%;
        border-radius: 1em;
    }
    .va-hero-bar.good .va-hero-fill { background: linear-gradient(90deg, #10b981, #84cc16); }
    .va-hero-bar.mid  .va-hero-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .va-hero-bar.low  .va-hero-fill { background: linear-gradient(90deg, #ef4444, #f97316); }
    .va-hero-right { text-align: right; font-family: ui-monospace, Menlo, monospace; }
    .va-hero-lvl { font-size: .78em; font-weight: 800; color: var(--app-ink); }
    .va-hero-lvl small { color: var(--app-fade); font-weight: 600; }
    .va-hero-eq { font-size: .62em; color: var(--app-mute); font-weight: 700; }

    .va-empty {
        text-align: center;
        padding: 1em;
        color: var(--app-fade);
        font-size: .85em;
    }

    /* --- DARK MODE OVERRIDES --- */
    [data-theme-mode="dark"] .item-card,
    [data-theme-mode="dark"] .progress-timer-card {
        background: var(--app-surface) !important;
        border-color: var(--app-line) !important;
    }
    
    [data-theme-mode="dark"] .compact-card > .card-header {
        background: var(--app-surface-2) !important;
        border-bottom-color: var(--app-line) !important;
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .compact-card > .card-header .card-title,
    [data-theme-mode="dark"] .compact-card > .card-header .text-secondary {
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .unlock-modal-thumb,
    [data-theme-mode="dark"] .unlock-modal-thumb-fallback,
    [data-theme-mode="dark"] .level-bucket-wrap {
        background: var(--app-surface-2) !important;
        border-color: var(--app-line) !important;
    }

    [data-theme-mode="dark"] .btn-light {
        background: var(--app-surface-2) !important;
        color: var(--app-ink) !important;
        border-color: var(--app-line) !important;
    }

    [data-theme-mode="dark"] .village-hero .badge.bg-white {
        background: var(--app-surface-2) !important;
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .vh-id .vh-role,
    [data-theme-mode="dark"] .vh-pill {
        background: var(--app-surface-2) !important;
        color: var(--app-ink) !important;
        border: 1px solid var(--app-line) !important;
    }

    [data-theme-mode="dark"] .vh-clan-inline {
        background: var(--app-surface-2) !important;
        border-color: var(--app-line) !important;
    }

    [data-theme-mode="dark"] .vh-clan-level {
        background: var(--app-surface-3) !important;
        border-color: var(--app-line) !important;
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .vh-clan-level .lbl {
        color: var(--app-ink-soft) !important;
    }

    [data-theme-mode="dark"] .top-stat-tile-icon {
        background: var(--app-surface-2) !important;
    }

    [data-theme-mode="dark"] .va-readiness-ring {
        background: conic-gradient(#10b981 calc(var(--p) * 1%), var(--app-line) 0) !important;
    }

    [data-theme-mode="dark"] .va-readiness-ring::before {
        background: var(--app-surface) !important;
    }

    [data-theme-mode="dark"] .va-pipe-cat-chip,
    [data-theme-mode="dark"] .va-pipe-cat-icon {
        background: var(--app-surface-2) !important;
        color: var(--app-ink) !important;
        border: 1px solid var(--app-line) !important;
    }

    [data-theme-mode="dark"] .va-hero-thumb {
        background: var(--app-surface-2) !important;
        border: 1px solid var(--app-line) !important;
    }

    [data-theme-mode="dark"] .va-hero-row {
        background: var(--app-canvas) !important;
        border-color: var(--app-line) !important;
    }

    [data-theme-mode="dark"] .vh-clan-badge,
    [data-theme-mode="dark"] .va-pchip {
        border-color: var(--app-line) !important;
    }

    /* V2 Buildings Accordions & Cards */
    [data-theme-mode="dark"] .item-type-group {
        background: var(--app-surface) !important;
        border-color: var(--app-line) !important;
    }
    
    [data-theme-mode="dark"] .v2-img {
        background: var(--app-surface-3) !important;
    }
    
    [data-theme-mode="dark"] .v2-progress-row,
    [data-theme-mode="dark"] .v2-stat,
    [data-theme-mode="dark"] .v2-bucket {
        background: var(--app-surface-2) !important;
        border-color: var(--app-line) !important;
    }
    
    [data-theme-mode="dark"] .v2-ring .bg {
        stroke: var(--app-line) !important;
    }
    
    [data-theme-mode="dark"] .v2-chip {
        background: var(--app-surface-2) !important;
        border: 1px solid var(--app-line) !important;
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .v2-bucket-pill,
    [data-theme-mode="dark"] .v2-bucket-progress .progress {
        background: var(--app-line) !important;
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .v2-next-upgrade,
    [data-theme-mode="dark"] .v2-next-row {
        background: var(--app-surface-2) !important;
        border-color: var(--app-line) !important;
        color: var(--app-ink) !important;
    }
    
    [data-theme-mode="dark"] .item-card-v2[data-status="capped"]   { --accent-soft: rgba(16, 185, 129, 0.15) !important; }
    [data-theme-mode="dark"] .item-card-v2[data-status="upgrade"]  { --accent-soft: rgba(245, 158, 11, 0.15) !important; }
    [data-theme-mode="dark"] .item-card-v2[data-status="above"]    { --accent-soft: rgba(59, 130, 246, 0.15) !important; }
    [data-theme-mode="dark"] .item-card-v2[data-status="behind"]   { --accent-soft: rgba(239, 68, 68, 0.15) !important; }
    [data-theme-mode="dark"] .item-card-v2[data-status="tracking"] { --accent-soft: rgba(59, 130, 246, 0.15) !important; }

    [data-theme-mode="dark"] .v2-cum-row-time, 
    [data-theme-mode="dark"] .v2-cum-row-cost,
    [data-theme-mode="dark"] .v2-done-row-time, 
    [data-theme-mode="dark"] .v2-done-row-cost {
        background: var(--app-surface-3) !important;
        border-color: var(--app-line) !important;
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .v2-cum-row-cost .v2-next-amount,
    [data-theme-mode="dark"] .v2-done-row-cost .v2-next-amount {
        color: var(--app-ink) !important;
    }

    [data-theme-mode="dark"] .v2-boost-bar {
        background: var(--app-surface-2) !important;
        border-color: var(--app-line) !important;
    }

    [data-theme-mode="dark"] .v2-boost-field {
        color: var(--app-ink) !important;
    }

    /* ===== header: emblem + sync lines ===== */
    .vh-avatar.has-emblem { background: transparent; }
    .vh-avatar.has-emblem img { border-radius: 0; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .18)); }
    .vh-sync { margin-left: auto; display: flex; flex-direction: column; gap: .2rem; align-items: flex-end; font-size: .76rem; color: var(--app-mute); white-space: nowrap; }
    .vh-sync .ti { color: var(--app-accent); }
    @media (max-width: 720px) { .vh-hero-left { flex-wrap: wrap; } .vh-sync { margin-left: 0; align-items: flex-start; } }

    /* ===== workers strip: same dots and words as the Board cards ===== */
    .vw-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: .7rem; margin: .8rem 0 .35rem; }
    .vw-tile { display: block; text-decoration: none; color: inherit; background: var(--app-surface); border: 1px solid var(--app-line);
               border-radius: 14px; padding: .7rem .85rem; transition: transform .15s ease, border-color .15s ease; }
    .vw-tile:hover { transform: translateY(-2px); border-color: var(--app-accent); }
    .vw-l { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--app-mute); display: flex; align-items: center; gap: .3rem; }
    .vw-l .ti { font-size: .95rem; color: var(--app-accent); }
    .vw-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: .5rem 0 .4rem; min-height: 11px; }
    .vw-dots i, .vw-legend i, .ops-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
    .vw-dots i.is-busy, .vw-legend i.is-busy, .ops-dot.is-busy { background: var(--app-accent); }
    .vw-dots i.is-done, .vw-legend i.is-done, .ops-dot.is-done { background: #10B981; box-shadow: 0 0 0 2px rgba(16, 185, 129, .22); }
    .vw-dots i.is-free, .vw-legend i.is-free, .ops-dot.is-free { background: #F59E0B; box-shadow: 0 0 0 2px rgba(245, 158, 11, .22); }
    /* The Goblin Builder / Researcher (hired for gems), while working: a glowing green dot. */
    .vw-dots i.is-goblin, .vw-legend i.is-goblin, .ops-dot.is-goblin { background: #16a34a; animation: vw-goblin 1.6s ease-in-out infinite; }
    @keyframes vw-goblin { 0%, 100% { box-shadow: 0 0 2px 1px rgba(22, 163, 74, .45); } 50% { box-shadow: 0 0 8px 3px rgba(22, 163, 74, .75); } }
    @media (prefers-reduced-motion: reduce) { .vw-dots i.is-goblin, .ops-dot.is-goblin { animation: none; box-shadow: 0 0 4px 2px rgba(22, 163, 74, .6); } }
    .vw-s { font-size: .84rem; font-weight: 700; color: var(--app-ink); }
    .vw-s.is-busy { color: var(--app-accent-deep); }
    .vw-s.is-done { color: #047857; }
    .vw-s.is-free { color: #B45309; }
    .vw-time { font-variant-numeric: tabular-nums; }
    .vw-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .74rem; color: var(--app-mute); margin-bottom: 1rem; }
    .vw-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
    .vw-legend i { width: 9px; height: 9px; }

    /* ===== operations: running rows, one idle line, completed chips ===== */
    .ops-none { font-size: .84rem; color: var(--app-mute); padding: .3rem 0 .5rem; }
    .ops-list { display: flex; flex-direction: column; }
    .ops-row { display: grid; grid-template-columns: auto 32px minmax(0, 1fr) minmax(60px, 140px) auto; align-items: center; gap: .7rem;
               padding: .5rem 0; border-top: 1px solid var(--app-line); }
    .ops-row:first-child { border-top: 0; }
    .ops-row-thumb { width: 32px; height: 32px; }
    .ops-row-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .ops-row-name { font-weight: 800; font-size: .86rem; color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ops-row-name span { font-weight: 600; color: var(--app-mute); font-size: .76rem; margin-left: .25rem; }
    .ops-row-kind { font-size: .72rem; color: var(--app-mute); }
    .ops-row-helper { color: var(--app-accent-deep); }
    .ops-row-bar { height: 5px; border-radius: 999px; background: var(--app-line); overflow: hidden; }
    .ops-row-bar > span { display: block; height: 100%; background: var(--app-accent); border-radius: inherit; }
    .ops-row-time { font-weight: 800; font-size: .8rem; color: var(--app-ink); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
    @media (max-width: 560px) { .ops-row { grid-template-columns: auto 28px minmax(0, 1fr) auto; } .ops-row-bar { display: none; } }
    .ops-idle { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--app-ink-soft, var(--app-mute)); padding: .55rem .7rem;
                margin: .4rem 0 .2rem; background: var(--app-canvas, rgba(15, 23, 42, .03)); border-radius: 10px; }
    .ops-idle > div { display: flex; align-items: center; gap: .45rem; }
    .ops-idle .ops-dot { width: 9px; height: 9px; }
    .ops-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
    .ops-chip { font-size: .74rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; color: #047857; background: rgba(16, 185, 129, .1); white-space: nowrap; }
    .ops-more { display: contents; }
    .ops-more > summary { list-style: none; cursor: pointer; font-size: .74rem; font-weight: 700; color: var(--app-accent-deep); padding: .2rem .4rem; }
    .ops-more > summary::-webkit-details-marker { display: none; }
    .ops-more[open] > summary { display: none; }
    [data-theme-mode="dark"] .vw-s.is-done, [data-theme-mode="dark"] .ops-chip { color: #34D399; }
    [data-theme-mode="dark"] .vw-s.is-free { color: #FBBF24; }
    [data-theme-mode="dark"] .ops-idle { background: rgba(255, 255, 255, .04); }