/* /Components/BreedingView.razor.rz.scp.css */
.bv-status[b-rkkyl1ixo7], .bv-empty[b-rkkyl1ixo7] { color: var(--text-mute); font-size: 14px; }
.bv-mirror[b-rkkyl1ixo7] { font-size: 12px; color: var(--text-mute); background: var(--surface-2);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.bv-move[b-rkkyl1ixo7] { margin-bottom: 14px; }
.bv-move-name[b-rkkyl1ixo7] { font-family: var(--font-display); font-size: 14px; color: var(--text); margin: 0 0 6px; }
.bv-nosource[b-rkkyl1ixo7] { font-size: 13px; color: var(--text-mute); }
.bv-sources[b-rkkyl1ixo7] { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.bv-cell[b-rkkyl1ixo7] { position: relative; background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 9px; padding: 4px; text-align: center; }
.bv-cell.owned[b-rkkyl1ixo7] { border-color: var(--red); }
.bv-cell.indirect[b-rkkyl1ixo7] { opacity: .72; }
.bv-cell img[b-rkkyl1ixo7] { width: 46px; height: 46px; object-fit: contain; }
.bv-cell-tag[b-rkkyl1ixo7] { display: block; font-size: 9px; color: var(--text-mute); }
.bv-owned-dot[b-rkkyl1ixo7] { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--red); }
.bv-modes[b-rkkyl1ixo7] { display: flex; gap: 6px; margin-bottom: 12px; }
.bv-mode[b-rkkyl1ixo7] { font-size: 12px; color: var(--text-dim); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.bv-mode.on[b-rkkyl1ixo7] { color: #fff; background: rgba(238, 90, 71, .16); border-color: var(--red); }
.bv-chain[b-rkkyl1ixo7] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bv-chain-step[b-rkkyl1ixo7] { display: flex; align-items: center; gap: 8px; background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 9px; padding: 6px 10px; }
.bv-parent[b-rkkyl1ixo7] { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-mute); }
.bv-parent img[b-rkkyl1ixo7] { width: 38px; height: 38px; object-fit: contain; }
.bv-x[b-rkkyl1ixo7] { color: var(--text-mute); }
.bv-step-note[b-rkkyl1ixo7] { font-size: 11px; color: var(--text-mute); margin-left: auto; }
.bv.compact .bv-move[b-rkkyl1ixo7] { margin-bottom: 10px; }
.bv.compact .bv-sources[b-rkkyl1ixo7] { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.bv.compact .bv-cell img[b-rkkyl1ixo7] { width: 36px; height: 36px; }
.bv-more[b-rkkyl1ixo7] { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--text-mute); }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-ij5md5h64z] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header[b-ij5md5h64z] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 26px;
    background: var(--surface-blur);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(238, 90, 71, 0.18);
}

.brand[b-ij5md5h64z] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}
.brand:hover[b-ij5md5h64z] { color: var(--text); }

.wordmark[b-ij5md5h64z] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1.5px;
    line-height: 1;
}
.wordmark .accent[b-ij5md5h64z] { color: var(--red); }

.tagline[b-ij5md5h64z] {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-mute);
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid var(--line-soft);
    align-self: center;
}

/* The header nav (Boxes/Dashboard + Dexes/Tools dropdowns) is rendered by the interactive
   <HeaderNav> island, so its styles live in global app.css — scoped CSS here couldn't reach
   across the component boundary. */

.header-actions[b-ij5md5h64z] { display: flex; align-items: center; gap: 14px; }

.dex-chip[b-ij5md5h64z] {
    font-family: var(--font-display);
    font-size: 13px; letter-spacing: .3px;
    color: var(--text-dim);
    padding: 6px 13px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-soft);
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dex-chip:hover[b-ij5md5h64z] { color: var(--text); border-color: var(--red); }

.trainer-slot[b-ij5md5h64z] {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    padding: 6px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--surface);
}

/* ---------- Trainer dropdown (Account / Log out) ----------
   CSS-only via <details>/<summary> — no JS, no @onclick. The <summary> keeps the
   existing .trainer-slot chip look; its native disclosure marker is hidden and
   replaced with the same ▾ caret used by the header-nav dropdowns. */
.trainer-menu[b-ij5md5h64z] { position: relative; }

.trainer-menu > summary.trainer-trigger[b-ij5md5h64z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.trainer-menu > summary.trainer-trigger[b-ij5md5h64z]::-webkit-details-marker,
.trainer-menu > summary.trainer-trigger[b-ij5md5h64z]::marker {
    display: none;
    content: "";
}
.trainer-menu > summary.trainer-trigger:hover[b-ij5md5h64z] { color: var(--text); border-color: var(--red); }
.trainer-menu[open] > summary.trainer-trigger[b-ij5md5h64z] { color: var(--text); background: var(--surface-2); border-color: var(--red); }

.trainer-trigger .caret[b-ij5md5h64z] { font-size: 9px; transition: transform .15s ease; display: inline-block; }
.trainer-menu[open] .trainer-trigger .caret[b-ij5md5h64z] { transform: rotate(180deg); }

.trainer-panel[b-ij5md5h64z] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.trainer-item[b-ij5md5h64z],
.trainer-panel .logout-btn[b-ij5md5h64z] {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: .3px;
    color: var(--text-dim);
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    background: transparent;
    border: none;
    cursor: pointer;
}
.trainer-item:hover[b-ij5md5h64z],
.trainer-panel .logout-btn:hover[b-ij5md5h64z] { color: var(--text); background: var(--surface); }

.trainer-item-form[b-ij5md5h64z] { margin: 0; }

.app-main[b-ij5md5h64z] {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 26px 60px;
}

.app-footer[b-ij5md5h64z] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    color: var(--text-mute);
    font-size: 13px;
}
.app-footer a[b-ij5md5h64z] { color: var(--text-dim); }
.app-footer a:hover[b-ij5md5h64z] { color: var(--text); }
.foot-support[b-ij5md5h64z] {
    font-family: var(--font-display);
    letter-spacing: .3px;
    padding: 6px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--surface);
}
.foot-support:hover[b-ij5md5h64z] { border-color: var(--red); color: var(--text); }

.app-toast[b-ij5md5h64z] {
    background: rgba(62, 207, 142, 0.14); border: 1px solid var(--caught); color: var(--text);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
    animation: toast-in-b-ij5md5h64z .2s ease;
}
@keyframes toast-in-b-ij5md5h64z { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .tagline[b-ij5md5h64z] { display: none; }
    /* Wrap the header so the nav drops to its own full-width row instead of
       pushing Tools / settings / login off-screen. */
    .app-header[b-ij5md5h64z] { padding: 10px 14px; flex-wrap: wrap; gap: 10px 12px; }
    /* .header-nav wrapping is handled in global app.css (it's an interactive island). */
    .app-main[b-ij5md5h64z] { padding: 16px 14px 48px; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yj60el8k14],
.components-reconnect-repeated-attempt-visible[b-yj60el8k14],
.components-reconnect-failed-visible[b-yj60el8k14],
.components-pause-visible[b-yj60el8k14],
.components-resume-failed-visible[b-yj60el8k14],
.components-rejoining-animation[b-yj60el8k14] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-retrying[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-failed[b-yj60el8k14],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yj60el8k14] {
    display: block;
}


#components-reconnect-modal[b-yj60el8k14] {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yj60el8k14 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yj60el8k14 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yj60el8k14 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yj60el8k14]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yj60el8k14 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yj60el8k14 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yj60el8k14 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yj60el8k14 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yj60el8k14] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-yj60el8k14] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yj60el8k14] {
    border: 0;
    background-color: var(--red);
    color: #fff;
    padding: 4px 24px;
    border-radius: 4px;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-yj60el8k14] {
        background-color: var(--red-deep);
    }

    #components-reconnect-modal button:active[b-yj60el8k14] {
        background-color: var(--red);
    }

.components-rejoining-animation[b-yj60el8k14] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-yj60el8k14] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yj60el8k14 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yj60el8k14] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yj60el8k14 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SettingsModal.razor.rz.scp.css */
.set-gear[b-yzrj7a0rlx] { font-size: 16px; line-height: 1; }

.set-overlay[b-yzrj7a0rlx] {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 16px 20px;
    background: rgba(8, 9, 13, 0.72); backdrop-filter: blur(6px);
    animation: set-fade-b-yzrj7a0rlx .14s ease;
}
@keyframes set-fade-b-yzrj7a0rlx { from { opacity: 0; } to { opacity: 1; } }

.set-modal[b-yzrj7a0rlx] {
    width: 100%; max-width: 540px; max-height: 84vh; overflow-y: auto;
    background: var(--bg); border: 1px solid var(--line-soft);
    border-radius: 16px; padding: 18px 20px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: set-pop-b-yzrj7a0rlx .16s ease;
}
@keyframes set-pop-b-yzrj7a0rlx { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }

.set-modal-head[b-yzrj7a0rlx] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.set-modal-head h2[b-yzrj7a0rlx] { margin: 0; font-size: 20px; }
.set-close[b-yzrj7a0rlx] {
    background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim);
    border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; line-height: 1;
}
.set-close:hover[b-yzrj7a0rlx] { color: var(--text); border-color: var(--red); }

.set-card[b-yzrj7a0rlx] {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.set-card:last-child[b-yzrj7a0rlx] { margin-bottom: 0; }
.set-card h3[b-yzrj7a0rlx] { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.set-note[b-yzrj7a0rlx] { color: var(--text-dim); font-size: 13px; margin: 0 0 12px; }
.set-row[b-yzrj7a0rlx] { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.set-row:first-of-type[b-yzrj7a0rlx] { border-top: none; }
.set-row span[b-yzrj7a0rlx] { color: var(--text); }
.set-row select[b-yzrj7a0rlx] { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 10px; }
.set-file[b-yzrj7a0rlx] { color: var(--text-dim); font-size: 13px; min-width: 0; }

.btn[b-yzrj7a0rlx] { border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: 14px; text-decoration: none; white-space: nowrap; }
.btn:hover[b-yzrj7a0rlx] { background: var(--surface); }
.btn.primary[b-yzrj7a0rlx] { background: linear-gradient(180deg, var(--red), var(--red-deep)); color: #fff; border: none; }
/* /Components/Pages/Berries.razor.rz.scp.css */
.br-head[b-vr7xo79ipl] { margin: 4px 0 22px; }
.br-head h1[b-vr7xo79ipl] { font-family: var(--font-display); font-size: 30px; margin: 0 0 6px; color: var(--text); }
.br-sub[b-vr7xo79ipl] { color: var(--text-dim); max-width: 680px; line-height: 1.5; margin: 0; }
.br-sub a[b-vr7xo79ipl] { color: var(--red); text-decoration: none; }
.br-sub a:hover[b-vr7xo79ipl] { text-decoration: underline; }
.br-sub strong[b-vr7xo79ipl] { color: var(--text); }
.br-legend[b-vr7xo79ipl] { margin: 8px 0 0; font-size: 12.5px; color: var(--text-mute); }
.br-legend b[b-vr7xo79ipl] { color: var(--text-dim); font-weight: 600; }

.br-loading[b-vr7xo79ipl] { color: var(--text-mute); padding: 30px 0; }

.br-filters[b-vr7xo79ipl] { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.br-filters label[b-vr7xo79ipl] { display: flex; flex-direction: column; gap: 6px; }
.br-filters label > span[b-vr7xo79ipl] { font-family: var(--font-display); font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-dim); }
.br-filters select[b-vr7xo79ipl] { padding: 9px 11px; font-size: 14px; border-radius: 9px;
    background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.br-count[b-vr7xo79ipl] { color: var(--text-mute); font-size: 13px; margin-left: auto; }

.br-grid[b-vr7xo79ipl] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }

.br-card[b-vr7xo79ipl] {
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.br-name[b-vr7xo79ipl] { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text); }

.br-chart[b-vr7xo79ipl] { width: 130px; height: 130px; overflow: visible; }
.br-grid-poly[b-vr7xo79ipl] { fill: none; stroke: var(--line); stroke-width: 0.6; }
.br-axis[b-vr7xo79ipl] { stroke: var(--line-soft); stroke-width: 0.5; }
.br-shape[b-vr7xo79ipl] { fill: rgba(225, 60, 60, .28); stroke: var(--red); stroke-width: 1.4;
    stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.br-axis-label[b-vr7xo79ipl] { fill: var(--text-mute); font-size: 6px; text-anchor: middle; dominant-baseline: middle;
    font-family: var(--font-display); }

.br-ng[b-vr7xo79ipl] { display: flex; align-items: center; gap: 7px; }
.ng-label[b-vr7xo79ipl] { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); }
.ng-power[b-vr7xo79ipl] { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums; }

.br-meta[b-vr7xo79ipl] { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
    font-size: 11.5px; color: var(--text-mute); }
/* /Components/Pages/Box.razor.rz.scp.css */
.box-toolbar[b-j6edwk6cte] {
    position: sticky;
    top: 124px; /* sits just under the sticky header (57) + frozen dex-tabs (59) */
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 -8px 18px;
    background: var(--surface-blur);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

/* A single horizontal band within the toolbar. */
.tb-row[b-j6edwk6cte] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Primary row: search grows to fill, render controls sit at the right. */
.tb-primary .search[b-j6edwk6cte] { flex: 1 1 240px; min-width: 200px; }
.tb-primary .render-controls[b-j6edwk6cte] { margin-left: auto; }

/* A faint divider between control groups in the secondary row. */
.tb-sep[b-j6edwk6cte] {
    width: 1px; height: 24px;
    background: var(--line-soft);
    margin: 0 2px;
}

.toolbar-label[b-j6edwk6cte] {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: auto;
}

.region-select[b-j6edwk6cte] {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px;
    font-family: var(--font-display); font-size: 13px; letter-spacing: .5px;
}
.region-select:focus[b-j6edwk6cte] { border-color: var(--red); }

.search[b-j6edwk6cte] { position: relative; }
.search > input[b-j6edwk6cte] {
    width: 100%; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 13px;
    font-family: var(--font-body); font-size: 14px;
}
.search > input:focus[b-j6edwk6cte] { border-color: var(--red); }
.search-results[b-j6edwk6cte] {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    list-style: none; margin: 0; padding: 5px;
    background: var(--surface-2); border: 1px solid var(--line-soft);
    border-radius: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    max-height: 320px; overflow-y: auto;
}
.search-results li[b-j6edwk6cte] {
    display: flex; align-items: baseline; gap: 10px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.search-results li:hover[b-j6edwk6cte] { background: rgba(238, 90, 71, 0.16); }
.search-results .r-num[b-j6edwk6cte] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.search-results .r-name[b-j6edwk6cte] { text-transform: capitalize; color: var(--text); }

.jump[b-j6edwk6cte] { display: flex; gap: 6px; }
.jump input[b-j6edwk6cte] {
    width: 96px; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 10px;
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
}

.render-controls[b-j6edwk6cte] {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-dim); font-size: 14px;
    flex-wrap: wrap;
}
.tb-field[b-j6edwk6cte] {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-mute);
}
.render-controls select[b-j6edwk6cte] {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px;
    font-family: var(--font-body); font-size: 13px;
}
.render-controls select:focus[b-j6edwk6cte] { border-color: var(--red); }

.btn[b-j6edwk6cte] {
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim);
    border-radius: 8px; padding: 6px 13px; cursor: pointer; font-size: 14px;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover[b-j6edwk6cte] { background: var(--surface-2); color: var(--text); }
.btn.toggle.active[b-j6edwk6cte] { background: rgba(238, 90, 71, 0.16); border-color: var(--red); color: var(--red-soft); }

/* Disclosure buttons (Filters ▾ / Bulk ▾). */
.btn.disclosure[b-j6edwk6cte] {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-size: 13px; letter-spacing: .5px;
}
.btn.disclosure .caret[b-j6edwk6cte] { font-size: 10px; color: var(--text-mute); }
.btn.disclosure.active[b-j6edwk6cte] { background: var(--surface-2); color: var(--text); border-color: var(--line-soft); }
.btn.disclosure.active .caret[b-j6edwk6cte] { color: var(--text-dim); }
/* Subtle accent when filters are active so the collapsed state still signals it. */
.btn.disclosure.flagged[b-j6edwk6cte] { border-color: var(--red); color: var(--red-soft); }

/* Collapsible panels drop below the toolbar rows, visually inset. */
.tb-panel[b-j6edwk6cte] {
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 10px 12px;
}

.filter-bar[b-j6edwk6cte] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.filter-bar select[b-j6edwk6cte] {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 9px; font-size: 13px;
}
.filter-bar select:focus[b-j6edwk6cte] { border-color: var(--red); }
.filter-count[b-j6edwk6cte] { color: var(--text-mute); font-family: var(--font-display); font-size: 13px; margin: 0 0 12px; letter-spacing: .5px; }

.bulk-bar[b-j6edwk6cte] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-label[b-j6edwk6cte] { font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; color: var(--text-mute); margin-right: 4px; }
.bulk-div[b-j6edwk6cte] { width: 1px; height: 22px; background: var(--line-soft); margin: 0 4px; }

.boxes[b-j6edwk6cte] { display: flex; flex-direction: column; gap: 26px; }

.scan-bar[b-j6edwk6cte] {
    position: relative; height: 30px; border-radius: 9px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line-soft); margin-bottom: 18px;
}
.scan-fill[b-j6edwk6cte] { height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); transition: width .3s ease; }
.scan-text[b-j6edwk6cte] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; color: var(--text);
}
.box-section[b-j6edwk6cte] { scroll-margin-top: 128px; }

.box-heading[b-j6edwk6cte] {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text); margin: 0 0 10px;
}
.box-heading[b-j6edwk6cte]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 10px var(--red-glow); align-self: center; flex: none;
}

.box-range[b-j6edwk6cte] { font-family: var(--font-display); font-size: 13px; color: var(--text-mute); font-weight: 500; letter-spacing: .5px; }

.pkbox[b-j6edwk6cte] {
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.pkgrid[b-j6edwk6cte] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }

.cell[b-j6edwk6cte] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 12px 6px 8px;
    text-align: center;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.cell:hover[b-j6edwk6cte] {
    transform: translateY(-2px);
    border-color: #4a4f68;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.cell[b-j6edwk6cte] { scroll-margin-top: 132px; cursor: default; user-select: none; }
.cell.flash[b-j6edwk6cte] { animation: cell-flash-b-j6edwk6cte 1.8s ease; }
@keyframes cell-flash-b-j6edwk6cte {
    0%, 100% { box-shadow: none; border-color: var(--line-soft); }
    15% { box-shadow: 0 0 0 3px var(--red), 0 0 22px var(--red-glow); border-color: var(--red); }
    60% { box-shadow: 0 0 0 2px var(--red), 0 0 14px var(--red-glow); border-color: var(--red); }
}

.cell .num[b-j6edwk6cte] {
    position: absolute; top: 6px; left: 9px;
    font-family: var(--font-display); font-size: 10px; color: var(--text-mute);
    font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.cell img[b-j6edwk6cte] { width: 74px; height: 74px; object-fit: contain; image-rendering: auto; }
.cell .nm[b-j6edwk6cte] { font-size: 11px; color: var(--text-dim); margin-top: 2px; text-transform: capitalize; }

.uncaught img[b-j6edwk6cte] { filter: brightness(0) opacity(0.32); }
.uncaught .nm[b-j6edwk6cte] { color: var(--text-mute); }

/* Owned state — caught cells get a green accent + corner check so progress reads at a
   glance (uncaught cells stay neutral, so the gaps are what stand out). */
.cell.caught[b-j6edwk6cte] {
    border-color: rgba(62, 207, 142, .45);
    background: linear-gradient(180deg, rgba(62, 207, 142, .08), var(--surface) 55%);
}

/* Top-right badge cluster — surfaces caught + the per-entry metadata (want / spare / note)
   that was previously only visible inside the detail modal. */
.cell-badges[b-j6edwk6cte] { position: absolute; top: 5px; right: 7px; display: flex; gap: 3px; align-items: center; line-height: 1; }
.cb[b-j6edwk6cte] { font-size: 10px; font-weight: 800; line-height: 1; }
.cb-caught[b-j6edwk6cte] { color: var(--caught); }
.cb-want[b-j6edwk6cte] { color: var(--shiny); }
.cb-spare[b-j6edwk6cte] { color: #36c5c0; }
.cb-note[b-j6edwk6cte] { font-size: 9px; }
/* Caught nature, shown under the name when recorded. */
.cell-nature[b-j6edwk6cte] {
    font-family: var(--font-display); font-size: 9px; letter-spacing: .3px;
    color: var(--text-mute); text-transform: capitalize; margin-top: 1px;
}

.pips[b-j6edwk6cte] { display: flex; gap: 5px; justify-content: center; margin-top: 7px; }
.pip[b-j6edwk6cte] {
    border: none; font: inherit; line-height: 1;
    font-family: var(--font-display);
    font-size: 9px; letter-spacing: .5px; padding: 2px 7px;
    border-radius: 6px; background: var(--pip-bg); color: var(--pip-fg);
    font-weight: 700; cursor: pointer; user-select: none;
    transition: transform .1s ease;
}
.pip:hover[b-j6edwk6cte] { transform: scale(1.12); }
.pip:focus-visible[b-j6edwk6cte] { outline: 2px solid var(--red); outline-offset: 1px; }
.pip.on-c[b-j6edwk6cte] { background: var(--caught); color: #06281a; }
.pip.on-s[b-j6edwk6cte] { background: var(--shiny); color: #3a2d00; }
.pip.on-h[b-j6edwk6cte] { background: var(--ha); color: #fff; }

.cell .sprite:focus-visible[b-j6edwk6cte], .form-cell .sprite:focus-visible[b-j6edwk6cte] { outline: 2px solid var(--red); outline-offset: 2px; }

.sentinel[b-j6edwk6cte] { height: 1px; }
.status[b-j6edwk6cte] { color: var(--text-mute); padding: 18px 4px; }
.end-note[b-j6edwk6cte] {
    text-align: center; color: var(--text-mute); margin: 22px 0 4px;
    font-family: var(--font-display); letter-spacing: .5px;
}
.hint[b-j6edwk6cte] { color: var(--text-mute); font-size: 12px; margin-top: 6px; }

@media (max-width: 640px) {
    .pkgrid[b-j6edwk6cte] { grid-template-columns: repeat(3, 1fr); }
    /* Header wraps to two rows on mobile, so a sticky toolbar would overlap it — keep it inline. */
    .box-toolbar[b-j6edwk6cte] { position: static; }
    .toolbar-label[b-j6edwk6cte] { width: 100%; margin-right: 0; }
    /* On narrow screens let the render controls drop to their own line. */
    .tb-primary .render-controls[b-j6edwk6cte] { margin-left: 0; width: 100%; }
    .tb-primary .search[b-j6edwk6cte] { flex-basis: 100%; }
    .jump input[b-j6edwk6cte] { flex: 1; width: auto; }
}
/* /Components/Pages/Breeding.razor.rz.scp.css */
.brd-head h1[b-6tkhpfnvny] { margin: 0 0 4px; font-size: 26px; }
.brd-sub[b-6tkhpfnvny] { color: var(--text-mute); margin: 0 0 18px; max-width: 640px; }
.brd-status[b-6tkhpfnvny], .brd-progress[b-6tkhpfnvny] { color: var(--text-mute); }
.brd-build[b-6tkhpfnvny] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
    padding: 16px 18px; max-width: 620px; }
.btn[b-6tkhpfnvny] { border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text);
    border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.btn.primary[b-6tkhpfnvny] { background: linear-gradient(180deg, var(--red), var(--red-deep)); color: #fff; border: none; }
.brd-picker[b-6tkhpfnvny] { position: relative; max-width: 420px; margin-bottom: 18px; }
.brd-input[b-6tkhpfnvny] { width: 100%; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 9px 12px; }
.brd-results[b-6tkhpfnvny] { position: absolute; z-index: 5; left: 0; right: 0; margin-top: 4px; background: var(--surface-2);
    border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.brd-result[b-6tkhpfnvny] { display: block; width: 100%; text-align: left; background: transparent; border: none;
    color: var(--text-dim); padding: 8px 12px; cursor: pointer; font-size: 14px; }
.brd-result:hover[b-6tkhpfnvny] { background: var(--surface); color: var(--text); }

/* Selected-Pokémon header — confirms what you're planning for, above the egg-move breakdown. */
.brd-selected[b-6tkhpfnvny] {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line-soft); border-radius: 12px;
    padding: 10px 16px; margin-bottom: 16px;
}
.brd-selected-img[b-6tkhpfnvny] { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.brd-selected-info[b-6tkhpfnvny] { display: flex; flex-direction: column; gap: 2px; }
.brd-selected-name[b-6tkhpfnvny] { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: capitalize; color: var(--text); }
.brd-selected-num[b-6tkhpfnvny] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.brd-clear[b-6tkhpfnvny] {
    margin-left: auto; font-family: var(--font-display); font-size: 13px;
    background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim);
    border-radius: 8px; padding: 7px 13px; cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.brd-clear:hover[b-6tkhpfnvny] { color: var(--text); border-color: var(--line); }

/* Empty state — shown when the index is ready but no Pokémon is picked yet. */
.brd-empty[b-6tkhpfnvny] {
    margin-top: 8px; padding: 44px 24px; text-align: center;
    background: var(--surface); border: 1px dashed var(--line-soft); border-radius: var(--radius);
}
.brd-empty-ico[b-6tkhpfnvny] { font-size: 40px; line-height: 1; }
.brd-empty h2[b-6tkhpfnvny] { margin: 14px 0 6px; font-size: 19px; }
.brd-empty p[b-6tkhpfnvny] { margin: 0 auto; max-width: 460px; color: var(--text-dim); font-size: 14px; }
.brd-examples[b-6tkhpfnvny] { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.brd-examples-label[b-6tkhpfnvny] { color: var(--text-mute); font-size: 13px; }
.brd-chip[b-6tkhpfnvny] {
    background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text);
    border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: all .12s ease;
}
.brd-chip:hover[b-6tkhpfnvny] { border-color: var(--red); color: #fff; transform: translateY(-1px); }
/* /Components/Pages/Card.razor.rz.scp.css */
.tc-wrap[b-hjnj010o2q] { display: grid; place-items: center; padding: 30px 16px; }
.tc-status[b-hjnj010o2q] { color: var(--text-mute); }
.tc-empty[b-hjnj010o2q] { text-align: center; padding: 60px 20px; }
.tc-empty h1[b-hjnj010o2q] { font-family: var(--font-display); color: var(--text); margin: 0 0 8px; }
.tc-empty p[b-hjnj010o2q] { color: var(--text-dim); margin: 0 0 18px; }

.tc-card[b-hjnj010o2q] {
    width: 100%; max-width: 460px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(238,90,71,.14), transparent 55%), var(--surface-2, var(--surface));
    border: 1px solid var(--line); border-radius: 20px;
    padding: 26px 26px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.tc-top[b-hjnj010o2q] { text-align: center; margin-bottom: 18px; }
.tc-kicker[b-hjnj010o2q] { font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.tc-name[b-hjnj010o2q] { font-family: var(--font-display); font-size: 26px; color: var(--text); margin: 6px 0 4px; }
.tc-title[b-hjnj010o2q] { font-family: var(--font-display); font-size: 13px; color: var(--shiny); letter-spacing: .04em; }

.tc-body[b-hjnj010o2q] { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.tc-ring[b-hjnj010o2q] {
    width: 120px; height: 120px; flex: none; border-radius: 50%;
    background: conic-gradient(var(--caught) calc(var(--pct)*1%), var(--bg-2, var(--bg)) 0);
    display: grid; place-items: center;
}
.tc-ring-in[b-hjnj010o2q] { width: 92px; height: 92px; border-radius: 50%; background: var(--surface-2, var(--surface));
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tc-ring-pct[b-hjnj010o2q] { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--text); }
.tc-ring-cap[b-hjnj010o2q] { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }

.tc-stats[b-hjnj010o2q] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; flex: 1; }
.tc-stat[b-hjnj010o2q] { display: flex; flex-direction: column; }
.tc-v[b-hjnj010o2q] { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tc-of[b-hjnj010o2q] { font-size: 13px; color: var(--text-mute); font-weight: 500; }
.tc-k[b-hjnj010o2q] { font-size: 11px; color: var(--text-dim); letter-spacing: .02em; }

.tc-chips[b-hjnj010o2q] { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.tc-chip[b-hjnj010o2q] { font-family: var(--font-display); font-size: 11px; padding: 4px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line-soft); color: var(--text-dim); }
.tc-chip.gold[b-hjnj010o2q] { background: rgba(245,197,24,.16); border-color: var(--shiny); color: var(--shiny-soft); }
.tc-chip.shiny[b-hjnj010o2q] { background: rgba(245,197,24,.10); border-color: rgba(245,197,24,.4); color: var(--shiny-soft); }
.tc-chip.region[b-hjnj010o2q] { background: rgba(238,90,71,.12); border-color: rgba(238,90,71,.4); color: var(--red-soft); }

.tc-foot[b-hjnj010o2q] { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.tc-brand[b-hjnj010o2q] { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; color: var(--text-mute); }
.tc-accent[b-hjnj010o2q] { color: var(--red); }
.tc-link[b-hjnj010o2q] { font-family: var(--font-display); font-size: 12px; color: var(--red); text-decoration: none; }
.tc-link:hover[b-hjnj010o2q] { text-decoration: underline; }
/* /Components/Pages/Challenges.razor.rz.scp.css */
.ch-head[b-oym32xorxl] { margin-bottom: 18px; }
.ch-head h1[b-oym32xorxl] { margin: 0; font-size: 28px; }
.ch-sub[b-oym32xorxl] { margin: 4px 0 0; color: var(--text-dim); }

.ch-section[b-oym32xorxl] { margin-bottom: 28px; }
.ch-h2[b-oym32xorxl] { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; }
.ch-grid[b-oym32xorxl] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.ch-card[b-oym32xorxl] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.ch-card.done[b-oym32xorxl] { border-color: var(--shiny); background: linear-gradient(180deg, rgba(245,197,24,.10), var(--surface)); }
.ch-top[b-oym32xorxl] { display: flex; align-items: center; gap: 8px; }
.ch-icon[b-oym32xorxl] { font-size: 16px; color: var(--text-mute); }
.ch-card.done .ch-icon[b-oym32xorxl] { color: var(--shiny); }
.ch-name[b-oym32xorxl] { font-family: var(--font-display); font-size: 14px; color: var(--text); letter-spacing: .3px; }
.ch-desc[b-oym32xorxl] { font-size: 12px; color: var(--text-dim); margin-top: 3px; min-height: 30px; }
.ch-bar[b-oym32xorxl] { height: 6px; border-radius: 4px; background: var(--bg-2); margin-top: 8px; overflow: hidden; }
.ch-fill[b-oym32xorxl] { height: 100%; border-radius: 4px; background: var(--caught); }
.ch-prog[b-oym32xorxl] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); margin-top: 5px; text-align: right; font-variant-numeric: tabular-nums; }

.status[b-oym32xorxl] { color: var(--text-mute); padding: 16px 4px; }
/* /Components/Pages/Collection.razor.rz.scp.css */
.coll-head[b-imwz0u66rw] { margin-bottom: 18px; }
.coll-back[b-imwz0u66rw] { display: inline-block; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); }
.coll-back:hover[b-imwz0u66rw] { color: var(--text); }
.coll-head h1[b-imwz0u66rw] { font-family: var(--font-display); margin: 0 0 6px; }
.coll-sub[b-imwz0u66rw] { color: var(--text-mute); font-size: 14px; margin: 0; max-width: 660px; line-height: 1.5; }
.coll-muted[b-imwz0u66rw] { color: var(--text-mute); }

.coll-card[b-imwz0u66rw] {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.coll-card h2[b-imwz0u66rw] {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.coll-count[b-imwz0u66rw] { font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.coll-grid[b-imwz0u66rw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 10px; }
.coll-grid.marks[b-imwz0u66rw] { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

.coll-cell[b-imwz0u66rw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 11px 6px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--bg);
    opacity: .4;
    filter: grayscale(.75);
    transition: opacity .15s ease, filter .15s ease;
}
.coll-cell.owned[b-imwz0u66rw] { opacity: 1; filter: none; border-color: var(--red); background: var(--surface-2); }
.coll-cell.mark[b-imwz0u66rw] { flex-direction: row; justify-content: center; min-height: 40px; }

.coll-ball[b-imwz0u66rw] { width: 34px; height: 34px; image-rendering: pixelated; }
.coll-name[b-imwz0u66rw] { font-size: 12px; color: var(--text-dim); text-align: center; }
.coll-cell.owned .coll-name[b-imwz0u66rw] { color: var(--text); }
.coll-have[b-imwz0u66rw] {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Compare.razor.rz.scp.css */
.cmp-head[b-fg4n2wcczx] { margin: 4px 0 18px; }
.cmp-head h1[b-fg4n2wcczx] { font-family: var(--font-display); font-size: 30px; color: var(--text); margin: 0 0 6px; }
.cmp-sub[b-fg4n2wcczx] { color: var(--text-dim); max-width: 660px; line-height: 1.5; margin: 0; }
.cmp-sub strong[b-fg4n2wcczx] { color: var(--text); }
.cmp-note[b-fg4n2wcczx] { color: var(--text-dim); }
.cmp-note a[b-fg4n2wcczx] { color: var(--red); }

.cmp-form[b-fg4n2wcczx] { display: flex; gap: 10px; margin-bottom: 18px; max-width: 640px; }
.cmp-input[b-fg4n2wcczx] { flex: 1; background: var(--surface); color: var(--text); border: 1px solid var(--line-soft);
    border-radius: 9px; padding: 10px 12px; font-size: 14px; }
.cmp-input:focus[b-fg4n2wcczx] { border-color: var(--red); outline: none; }
.btn.primary[b-fg4n2wcczx] { background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 9px; padding: 10px 18px; cursor: pointer; font-family: var(--font-display); }
.btn.primary:disabled[b-fg4n2wcczx] { opacity: .5; cursor: default; }
.cmp-err[b-fg4n2wcczx] { color: var(--red); font-size: 14px; }

.cmp-summary[b-fg4n2wcczx] { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 24px; }
.cmp-stat[b-fg4n2wcczx] { background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 20px; min-width: 150px; text-align: center; }
.cmp-n[b-fg4n2wcczx] { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text); }
.cmp-l[b-fg4n2wcczx] { font-size: 12px; color: var(--text-dim); letter-spacing: .03em; text-transform: uppercase; }

.cmp-trades[b-fg4n2wcczx] { margin-bottom: 26px; }
.cmp-trades h2[b-fg4n2wcczx] { font-family: var(--font-display); font-size: 18px; color: var(--text); margin: 0 0 12px; }
.cmp-trade-row[b-fg4n2wcczx] { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.cmp-trade-row.get[b-fg4n2wcczx] { border-color: rgba(245,197,24,.4); }
.cmp-trade-row.give[b-fg4n2wcczx] { border-color: rgba(80,200,120,.4); }
.cmp-trade-h[b-fg4n2wcczx] { display: block; font-family: var(--font-display); font-size: 13px; margin-bottom: 10px; color: var(--text); }

.cmp-cols[b-fg4n2wcczx] { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cmp-col h3[b-fg4n2wcczx] { font-family: var(--font-display); font-size: 15px; color: var(--text); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.cmp-count[b-fg4n2wcczx] { font-size: 12px; color: var(--text-mute); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 9px; }
.cmp-more[b-fg4n2wcczx] { font-size: 12px; color: var(--text-mute); margin: 8px 0 0; text-align: center; }

.cmp-grid[b-fg4n2wcczx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 7px; }
.cmp-cell[b-fg4n2wcczx] { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; padding: 6px 3px 3px; text-align: center; }
.cmp-cell.hl[b-fg4n2wcczx] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cmp-num[b-fg4n2wcczx] { position: absolute; top: 2px; left: 5px; font-family: var(--font-display); font-size: 8px; color: var(--text-mute); }
.cmp-cell img[b-fg4n2wcczx] { width: 50px; height: 50px; object-fit: contain; }

@media (max-width: 720px) {
    .cmp-cols[b-fg4n2wcczx] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Completeness.razor.rz.scp.css */
.cp-head[b-60y8erbgf9] { margin-bottom: 18px; }
.cp-head h1[b-60y8erbgf9] { margin: 0; font-size: 28px; }
.cp-sub[b-60y8erbgf9] { margin: 6px 0 0; color: var(--text-dim); max-width: 760px; }
.cp-note[b-60y8erbgf9] { color: var(--text-mute); }

/* ruleset rings */
.cp-rings[b-60y8erbgf9] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px; margin-bottom: 28px;
}
.cp-ring-wrap[b-60y8erbgf9] {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 12px 14px;
}
.cp-ring[b-60y8erbgf9] {
    --col: var(--caught);
    width: 104px; height: 104px; border-radius: 50%;
    background: conic-gradient(var(--col) calc(var(--pct) * 1%), rgba(255, 255, 255, .14) 0);
    display: grid; place-items: center; margin-bottom: 12px;
}
.cp-ring.shiny[b-60y8erbgf9] { --col: var(--shiny); }
.cp-ring.ha[b-60y8erbgf9] { --col: var(--ha); }
.cp-ring.perfect[b-60y8erbgf9] { --col: var(--red); }
.cp-ring.gender[b-60y8erbgf9] { --col: #e07aa6; }
.cp-ring-in[b-60y8erbgf9] {
    width: 78px; height: 78px; border-radius: 50%; background: var(--surface);
    display: grid; place-items: center;
}
.cp-ring-pct[b-60y8erbgf9] { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); }
.cp-ring-label[b-60y8erbgf9] { font-family: var(--font-display); font-size: 14px; color: var(--text); }
.cp-ring-sub[b-60y8erbgf9] { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.cp-ring-val[b-60y8erbgf9] { font-size: 12px; color: var(--text-dim); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* breakdown blocks */
.cp-block[b-60y8erbgf9] { margin-bottom: 24px; }
.cp-block h2[b-60y8erbgf9] { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin: 0 0 12px; }
.cp-bars[b-60y8erbgf9] { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.cp-bar-row[b-60y8erbgf9] { display: grid; grid-template-columns: 110px 1fr 150px; align-items: center; gap: 12px; }
.cp-bar-label[b-60y8erbgf9] { font-family: var(--font-display); font-size: 13px; color: var(--text-dim); }
.cp-bar[b-60y8erbgf9] { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.cp-fill[b-60y8erbgf9] { height: 100%; border-radius: 5px; background: var(--caught); }
.cp-fill.leg[b-60y8erbgf9] { background: var(--shiny); }
.cp-fill.myth[b-60y8erbgf9] { background: var(--ha); }
.cp-fill.baby[b-60y8erbgf9] { background: #e07aa6; }
.cp-bar-val[b-60y8erbgf9] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); text-align: right; font-variant-numeric: tabular-nums; }

.cp-foot[b-60y8erbgf9] { margin-top: 8px; color: var(--text-mute); font-size: 13px; max-width: 760px; }
.cp-foot strong[b-60y8erbgf9] { color: var(--text-dim); }
.status[b-60y8erbgf9] { color: var(--text-mute); padding: 16px 4px; }

@media (max-width: 620px) {
    .cp-bar-row[b-60y8erbgf9] { grid-template-columns: 80px 1fr; }
    .cp-bar-val[b-60y8erbgf9] { display: none; }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dash-head[b-bw9ccky3m6] { margin-bottom: 24px; }
.dash-head h1[b-bw9ccky3m6] { margin: 0; font-size: 28px; }
.dash-sub[b-bw9ccky3m6] { margin: 4px 0 0; color: var(--text-dim); }

.dash-section[b-bw9ccky3m6] { margin-bottom: 34px; }
.dash-spec[b-bw9ccky3m6] { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--text-dim); }
.dash-spec b[b-bw9ccky3m6] { color: var(--text); font-variant-numeric: tabular-nums; }
.dash-link[b-bw9ccky3m6] { margin-left: 8px; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.dash-link:hover[b-bw9ccky3m6] { color: var(--red); }
.dash-h2[b-bw9ccky3m6] {
    font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); margin: 0 0 16px;
}

/* ---- Rings (each metric is a self-contained stat card so it reads even at low %) ---- */
.rings[b-bw9ccky3m6] { display: flex; flex-wrap: wrap; gap: 14px; }
.ring-wrap[b-bw9ccky3m6] {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 14px; padding: 18px 26px;
}
.ring[b-bw9ccky3m6] {
    width: 120px; height: 120px; border-radius: 50%;
    /* Visible track (var(--line)) so the donut shape reads against the card, not just the text. */
    background: conic-gradient(var(--ring-c) calc(var(--pct) * 1%), var(--line) 0);
    display: grid; place-items: center;
    transition: background .4s ease;
}
.ring.caught[b-bw9ccky3m6] { --ring-c: var(--caught); }
.ring.shiny[b-bw9ccky3m6]  { --ring-c: var(--shiny); }
.ring.ha[b-bw9ccky3m6]     { --ring-c: var(--ha); }
.ring.special[b-bw9ccky3m6] { --ring-c: #ff8e3c; }
.ring-inner[b-bw9ccky3m6] {
    width: 92px; height: 92px; border-radius: 50%;
    background: var(--surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ring-val[b-bw9ccky3m6] { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--text); }
.ring-cap[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.ring-label[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }

/* ---- Region cards ---- */
.region-grid[b-bw9ccky3m6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.region-card[b-bw9ccky3m6] {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 12px; padding: 14px 16px;
}
.rc-top[b-bw9ccky3m6] { display: flex; align-items: baseline; justify-content: space-between; }
.rc-label[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; color: var(--text); }
.rc-pct[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 14px; color: var(--caught); }
.rc-bar[b-bw9ccky3m6] { height: 8px; border-radius: 5px; background: var(--line); margin: 10px 0 8px; overflow: hidden; }
.rc-fill[b-bw9ccky3m6] { height: 100%; border-radius: 5px; background: var(--caught); transition: width .3s ease; }
.rc-sub[b-bw9ccky3m6] { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.status[b-bw9ccky3m6] { color: var(--text-mute); padding: 12px 4px; }
.dash-note[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); letter-spacing: .5px; }

/* ---- Achievements ---- */
.milestone[b-bw9ccky3m6] {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
    background: linear-gradient(180deg, rgba(238, 90, 71, .10), var(--surface));
    border: 1px solid var(--red); border-radius: var(--radius); padding: 12px 16px;
}
.milestone-ico[b-bw9ccky3m6] { font-size: 22px; line-height: 1; }
.milestone-body[b-bw9ccky3m6] { flex: 1; min-width: 0; }
.milestone-text[b-bw9ccky3m6] { font-size: 14px; color: var(--text); }
.milestone-text strong[b-bw9ccky3m6] { color: #fff; }
.milestone-bar[b-bw9ccky3m6] { height: 6px; border-radius: 4px; background: var(--line); margin-top: 7px; overflow: hidden; }
.milestone-fill[b-bw9ccky3m6] { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--shiny)); }
.milestone-count[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge-grid[b-bw9ccky3m6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.badge[b-bw9ccky3m6] {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 12px; padding: 12px 14px;
}
.badge.locked[b-bw9ccky3m6] { opacity: .62; }
.badge.earned[b-bw9ccky3m6] { border-color: var(--shiny); background: linear-gradient(180deg, rgba(245,197,24,.10), var(--surface)); }
.badge-top[b-bw9ccky3m6] { display: flex; align-items: center; gap: 8px; }
.badge-icon[b-bw9ccky3m6] { font-size: 16px; color: var(--text-mute); }
.badge.earned .badge-icon[b-bw9ccky3m6] { color: var(--shiny); }
.badge-name[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 14px; color: var(--text); letter-spacing: .3px; }
.badge-desc[b-bw9ccky3m6] { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.badge-bar[b-bw9ccky3m6] { height: 5px; border-radius: 4px; background: var(--line); margin-top: 9px; overflow: hidden; }
.badge-fill[b-bw9ccky3m6] { height: 100%; border-radius: 4px; background: var(--caught); }
.badge-prog[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 10px; color: var(--text-mute); margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Catch history ---- */
.history-chart[b-bw9ccky3m6] {
    width: 100%; height: 120px; display: block;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 6px;
}
.history-chart rect[b-bw9ccky3m6] { fill: var(--caught); }
.history-foot[b-bw9ccky3m6] { display: flex; justify-content: space-between; color: var(--text-mute); font-size: 12px; margin-top: 6px; font-family: var(--font-display); letter-spacing: .3px; }

.recent-h3[b-bw9ccky3m6] { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin: 18px 0 10px; }
.recent-list[b-bw9ccky3m6] { display: flex; flex-direction: column; gap: 6px; }
.recent-row[b-bw9ccky3m6] { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 5px 12px;
    text-decoration: none; color: var(--text); transition: border-color .12s ease, transform .12s ease, background .12s ease; }
.recent-row:hover[b-bw9ccky3m6] { border-color: var(--red); background: var(--surface-2); transform: translateX(2px); }
.recent-row img[b-bw9ccky3m6] { width: 36px; height: 36px; image-rendering: pixelated; }
.recent-id[b-bw9ccky3m6] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.recent-kind[b-bw9ccky3m6] { font-size: 13px; color: var(--text); text-transform: capitalize; }
.recent-kind.k-1[b-bw9ccky3m6] { color: var(--shiny); }
.recent-kind.k-2[b-bw9ccky3m6] { color: var(--ha); }
.recent-time[b-bw9ccky3m6] { margin-left: auto; font-size: 12px; color: var(--text-mute); }
/* /Components/Pages/DexBrowser.razor.rz.scp.css */
.bw-head[b-qamx5okkh3] { margin-bottom: 16px; }
.bw-head h1[b-qamx5okkh3] { margin: 0; font-size: 28px; }
.bw-sub[b-qamx5okkh3] { margin: 6px 0 0; color: var(--text-dim); max-width: 720px; }

/* facet tabs */
.bw-facets[b-qamx5okkh3] { display: flex; gap: 8px; margin-bottom: 12px; }
.bw-facet[b-qamx5okkh3] {
    font-family: var(--font-display); font-size: 14px; letter-spacing: .5px;
    color: var(--text-dim); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 18px; cursor: pointer;
}
.bw-facet:hover[b-qamx5okkh3] { color: var(--text); }
.bw-facet.on[b-qamx5okkh3] { color: #fff; background: linear-gradient(180deg, var(--red), var(--red-deep)); border-color: transparent; }

/* value chips */
.bw-values[b-qamx5okkh3] { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.bw-val[b-qamx5okkh3] {
    font-family: var(--font-display); font-size: 13px; letter-spacing: .3px;
    color: var(--text-dim); background: var(--bg-2);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.bw-val:hover[b-qamx5okkh3] { color: var(--text); border-color: var(--line); }
.bw-val.on[b-qamx5okkh3] { box-shadow: 0 0 0 2px var(--text); color: var(--text); }

/* colour chips get their actual colour */
.bw-val.c-black[b-qamx5okkh3] { background: #2a2d3a; color: #cfd3e6; }
.bw-val.c-blue[b-qamx5okkh3] { background: #3b6fd4; color: #fff; }
.bw-val.c-brown[b-qamx5okkh3] { background: #7a5230; color: #fff; }
.bw-val.c-gray[b-qamx5okkh3] { background: #6b7088; color: #fff; }
.bw-val.c-green[b-qamx5okkh3] { background: #3c9d5e; color: #fff; }
.bw-val.c-pink[b-qamx5okkh3] { background: #e07aa6; color: #2a0d1a; }
.bw-val.c-purple[b-qamx5okkh3] { background: #8a6dff; color: #fff; }
.bw-val.c-red[b-qamx5okkh3] { background: #d8463a; color: #fff; }
.bw-val.c-white[b-qamx5okkh3] { background: #e9ebf5; color: #1a1c25; }
.bw-val.c-yellow[b-qamx5okkh3] { background: #e8c020; color: #2a2300; }

/* empty state */
.bw-empty[b-qamx5okkh3] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; color: var(--text-mute); min-height: 32vh;
    border: 1px dashed var(--line-soft); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .015);
}
.bw-ico[b-qamx5okkh3] { font-size: 40px; opacity: .9; }

/* count + toggle bar */
.bw-bar[b-qamx5okkh3] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bw-count[b-qamx5okkh3] { font-family: var(--font-display); font-size: 14px; color: var(--text-dim); letter-spacing: .3px; }
.bw-count strong[b-qamx5okkh3] { color: var(--caught); }
.bw-toggle[b-qamx5okkh3] {
    margin-left: auto; font-family: var(--font-display); font-size: 13px;
    color: var(--text-dim); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 13px; cursor: pointer;
}
.bw-toggle.on[b-qamx5okkh3] { background: rgba(238, 90, 71, .16); border-color: var(--red); color: var(--red-soft); }

/* tile grid (display-only lookup) */
.bw-grid[b-qamx5okkh3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bw-tile[b-qamx5okkh3] {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
    padding: 8px 4px 6px; transition: border-color .12s ease;
}
.bw-tile:hover[b-qamx5okkh3] { border-color: var(--line); }
.bw-tile img[b-qamx5okkh3] { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.bw-name[b-qamx5okkh3] { font-size: 11px; color: var(--text-dim); text-transform: capitalize; text-align: center; line-height: 1.2; }
.bw-num[b-qamx5okkh3] { font-family: var(--font-display); font-size: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.status[b-qamx5okkh3] { color: var(--text-mute); padding: 16px 4px; }
/* /Components/Pages/Dexes.razor.rz.scp.css */
.dx-h1[b-o1cbybilic] { margin: 0 0 16px; font-size: 28px; }
.dx-note[b-o1cbybilic] { color: var(--text-dim); }

/* Signed-out empty state. */
.dx-empty[b-o1cbybilic] {
    margin-top: 8px; padding: 48px 24px; text-align: center; max-width: 620px;
    background: var(--surface); border: 1px dashed var(--line-soft); border-radius: 12px;
}
.dx-empty-ico[b-o1cbybilic] { font-size: 42px; line-height: 1; }
.dx-empty h2[b-o1cbybilic] { margin: 14px 0 6px; font-size: 19px; }
.dx-empty p[b-o1cbybilic] { margin: 0 auto; max-width: 440px; color: var(--text-dim); font-size: 14px; }
.dx-empty-actions[b-o1cbybilic] { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
.dx-empty-actions .btn[b-o1cbybilic] { text-decoration: none; }

.dx-list[b-o1cbybilic] { display: flex; flex-direction: column; gap: 10px; max-width: 620px; margin-bottom: 28px; }
.dx-card[b-o1cbybilic] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px;
}
.dx-card.active[b-o1cbybilic] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-glow); }
.dx-name[b-o1cbybilic] { font-family: var(--font-display); font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.dx-badge[b-o1cbybilic] { font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; background: rgba(238,90,71,.16); color: var(--red); border-radius: 6px; padding: 2px 7px; }
.dx-scope[b-o1cbybilic] { font-size: 13px; color: var(--text-mute); margin-top: 3px; }
.dx-prog[b-o1cbybilic] { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 320px; }
.dx-prog-bar[b-o1cbybilic] { flex: 1; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.dx-prog-fill[b-o1cbybilic] { height: 100%; border-radius: 4px; background: var(--caught); transition: width .3s ease; }
.dx-prog-txt[b-o1cbybilic] { font-family: var(--font-display); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-vis[b-o1cbybilic] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); cursor: pointer; user-select: none; }
.dx-vis input[b-o1cbybilic] { accent-color: var(--red); cursor: pointer; }
.dx-rename[b-o1cbybilic] { display: flex; gap: 8px; align-items: center; }
.dx-rename .dx-input[b-o1cbybilic] { min-width: 160px; padding: 6px 10px; }
.dx-actions[b-o1cbybilic] { display: flex; gap: 8px; }

.dx-new[b-o1cbybilic] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; max-width: 620px; }
.dx-new h2[b-o1cbybilic] { margin: 0 0 12px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.dx-form[b-o1cbybilic] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-input[b-o1cbybilic] { flex: 1; min-width: 200px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 12px; }
.dx-form select[b-o1cbybilic] { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; }

.btn[b-o1cbybilic] { border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 7px 13px; cursor: pointer; font-size: 14px; }
.btn:hover[b-o1cbybilic] { background: var(--surface); }
.btn.primary[b-o1cbybilic] { background: linear-gradient(180deg, var(--red), var(--red-deep)); color: #fff; border: none; }
.btn.primary:disabled[b-o1cbybilic] { opacity: .4; cursor: default; }
.btn.del:hover[b-o1cbybilic] { background: var(--red); color: #fff; border-color: var(--red); }
.btn.del:disabled[b-o1cbybilic] { opacity: .4; cursor: default; }
.status[b-o1cbybilic] { color: var(--text-mute); }

.dx-share[b-o1cbybilic] { flex-basis: 100%; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.dx-share-label[b-o1cbybilic] { font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.dx-share-link[b-o1cbybilic] { flex: 1; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-family: var(--font-display); }
/* /Components/Pages/EggGroupBrowser.razor.rz.scp.css */
.eg-head[b-1b4rqyc21o] { margin-bottom: 16px; }
.eg-head h1[b-1b4rqyc21o] { margin: 0; font-size: 28px; }
.eg-sub[b-1b4rqyc21o] { margin: 6px 0 0; color: var(--text-dim); max-width: 760px; }

.eg-groups[b-1b4rqyc21o] { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.eg-group[b-1b4rqyc21o] {
    font-family: var(--font-display); font-size: 13px; letter-spacing: .3px;
    color: var(--text-dim); background: var(--bg-2);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 15px; cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}
.eg-group:hover[b-1b4rqyc21o] { color: var(--text); border-color: var(--line); }
.eg-group.on[b-1b4rqyc21o] {
    color: #fff; background: linear-gradient(180deg, var(--red), var(--red-deep));
    border-color: transparent; box-shadow: 0 4px 14px var(--red-glow);
}

.eg-empty[b-1b4rqyc21o] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; color: var(--text-mute); min-height: 34vh;
    border: 1px dashed var(--line-soft); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .015);
}
.eg-ico[b-1b4rqyc21o] { font-size: 42px; opacity: .9; }

.eg-bar[b-1b4rqyc21o] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.eg-count[b-1b4rqyc21o] { font-family: var(--font-display); font-size: 14px; color: var(--text-dim); letter-spacing: .3px; }
.eg-count strong[b-1b4rqyc21o] { color: var(--caught); }
.eg-toggle[b-1b4rqyc21o] {
    margin-left: auto; font-family: var(--font-display); font-size: 13px;
    color: var(--text-dim); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 13px; cursor: pointer;
}
.eg-toggle.on[b-1b4rqyc21o] { background: rgba(238, 90, 71, .16); border-color: var(--red); color: var(--red-soft); }

.eg-grid[b-1b4rqyc21o] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.eg-tile[b-1b4rqyc21o] {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
    padding: 8px 4px 6px; transition: border-color .12s ease;
}
.eg-tile:hover[b-1b4rqyc21o] { border-color: var(--line); }
.eg-tile img[b-1b4rqyc21o] { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.eg-name[b-1b4rqyc21o] { font-size: 11px; color: var(--text-dim); text-transform: capitalize; text-align: center; line-height: 1.2; }
.eg-num[b-1b4rqyc21o] { font-family: var(--font-display); font-size: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.status[b-1b4rqyc21o] { color: var(--text-mute); padding: 16px 4px; }
/* /Components/Pages/Encounters.razor.rz.scp.css */
.enc-head[b-t77ek381py] { margin-bottom: 14px; }
.enc-head h1[b-t77ek381py] { margin: 0; font-size: 28px; }
.enc-sub[b-t77ek381py] { margin: 6px 0 0; color: var(--text-dim); max-width: 720px; }
.enc-sub strong[b-t77ek381py] { color: var(--text); }

/* tabs */
.enc-tabs[b-t77ek381py] {
    display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
}
.enc-tab[b-t77ek381py] {
    font-family: var(--font-display); font-size: 14px; letter-spacing: .4px;
    color: var(--text-dim); padding: 8px 18px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; cursor: pointer; transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.enc-tab:hover[b-t77ek381py] { color: var(--text); background: var(--surface-2); }
.enc-tab.on[b-t77ek381py] { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 2px 10px var(--red-glow); }

/* shared game select */
.enc-game[b-t77ek381py] {
    background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 7px 10px; font-size: 14px;
}
.enc-game:focus[b-t77ek381py] { border-color: var(--red); outline: none; }
.enc-gamefield[b-t77ek381py] { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.enc-sep[b-t77ek381py] { width: 1px; align-self: stretch; background: var(--line-soft); margin: 2px 4px; }

.enc-empty[b-t77ek381py] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; color: var(--text-mute); padding: 36px 16px;
}
.enc-ico[b-t77ek381py] { font-size: 40px; opacity: .9; }

/* ===== By EV stat ===== */
.ev-picker[b-t77ek381py] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.ev-stat[b-t77ek381py] {
    background: var(--surface); color: var(--text-dim); cursor: pointer;
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 16px;
    font-family: var(--font-display); font-size: 13px; letter-spacing: .04em;
}
.ev-stat:hover[b-t77ek381py] { color: var(--text); border-color: var(--line); }
.ev-stat.active[b-t77ek381py] { color: #fff; border-color: transparent; background: linear-gradient(90deg, var(--red-deep), var(--red)); }

.scan-bar[b-t77ek381py] { position: relative; height: 30px; border-radius: 9px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); margin-bottom: 18px; }
.scan-fill[b-t77ek381py] { height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); transition: width .3s ease; }
.scan-text[b-t77ek381py] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; color: var(--text); }

.ev-count[b-t77ek381py] { color: var(--text-mute); font-family: var(--font-display); font-size: 13px; letter-spacing: .5px; margin: 0 0 14px; }
.ev-count em[b-t77ek381py] { color: var(--text-dim); font-style: normal; }

.ev-list[b-t77ek381py] { display: flex; flex-direction: column; gap: 6px; }
.ev-row[b-t77ek381py] {
    background: var(--surface-2, var(--surface)); border: 1px solid var(--line);
    border-radius: 12px; padding: 6px 14px;
}
.ev-row:hover[b-t77ek381py] { border-color: var(--line-soft); }
.ev-row.with-locs[b-t77ek381py] { padding: 8px 14px 10px; }
.ev-top[b-t77ek381py] { display: flex; align-items: center; gap: 12px; }
.ev-dex[b-t77ek381py] { font-family: var(--font-display); color: var(--text-mute); font-variant-numeric: tabular-nums; font-size: 12px; min-width: 34px; }
.ev-sprite[b-t77ek381py] { width: 44px; height: 44px; image-rendering: pixelated; }
.ev-name[b-t77ek381py] { text-transform: capitalize; color: var(--text); font-weight: 600; min-width: 130px; }
.ev-types[b-t77ek381py] { display: flex; gap: 4px; }
.ev-owned[b-t77ek381py] { color: var(--text-mute); font-size: 11px; font-family: var(--font-display); letter-spacing: .04em; opacity: .7; }
.ev-badge[b-t77ek381py] {
    margin-left: auto; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
    background: linear-gradient(90deg, var(--red-deep), var(--red)); padding: 5px 12px; border-radius: 8px; white-space: nowrap;
}
.ev-row.owned .ev-name[b-t77ek381py] { color: var(--caught, var(--text)); }

/* per-game location chips */
.ev-locs[b-t77ek381py] { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 46px; }
.ev-loc[b-t77ek381py] {
    font-size: 11px; color: var(--text-dim); background: var(--bg-2);
    border: 1px solid var(--line-soft); border-radius: 7px; padding: 3px 9px;
}
.ev-loc small[b-t77ek381py] { color: var(--shiny); margin-left: 5px; }
.ev-loc.more[b-t77ek381py] { color: var(--text-mute); background: transparent; border-style: dashed; }

/* ===== By route ===== */
.rp-controls[b-t77ek381py] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.rp-regions[b-t77ek381py] { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-region[b-t77ek381py] {
    font-family: var(--font-display); font-size: 13px; letter-spacing: .5px;
    color: var(--text-dim); background: var(--bg-2);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 15px; cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.rp-region:hover[b-t77ek381py] { color: var(--text); border-color: var(--line); }
.rp-region.on[b-t77ek381py] { color: #fff; background: linear-gradient(180deg, var(--red), var(--red-deep)); border-color: transparent; box-shadow: 0 4px 14px var(--red-glow); }

.rp-locrow[b-t77ek381py] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rp-loc[b-t77ek381py] { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 11px; font-size: 14px; min-width: 220px; }
.rp-loc:disabled[b-t77ek381py] { opacity: .55; }
.rp-toggle[b-t77ek381py] { font-family: var(--font-display); font-size: 13px; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 13px; cursor: pointer; }
.rp-toggle.on[b-t77ek381py] { background: rgba(238, 90, 71, .16); border-color: var(--red); color: var(--red-soft); }
.rp-count[b-t77ek381py] { font-family: var(--font-display); font-size: 13px; color: var(--text-mute); letter-spacing: .5px; margin-left: auto; }
.rp-count strong[b-t77ek381py] { color: var(--red); }

.rp-body[b-t77ek381py] { min-height: 46vh; }
.rp-empty[b-t77ek381py] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-mute); padding: 40px 16px; }
.rp-empty.big[b-t77ek381py] { min-height: 44vh; }
.rp-ico[b-t77ek381py] { font-size: 46px; line-height: 1; filter: grayscale(.2) drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); opacity: .9; }
.rp-empty h2[b-t77ek381py] { margin: 4px 0 0; font-size: 22px; color: var(--text); }
.rp-empty p[b-t77ek381py] { margin: 0; max-width: 380px; }

.rp-group[b-t77ek381py] { background: rgba(255, 255, 255, .02); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.rp-group-head[b-t77ek381py] { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.rp-group-ico[b-t77ek381py] { font-size: 18px; line-height: 1; }
.rp-group-label[b-t77ek381py] { font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; color: var(--text); }
.rp-group-count[b-t77ek381py] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 9px; }

.rp-list[b-t77ek381py] { display: flex; flex-direction: column; gap: 6px; }
.rp-row[b-t77ek381py] { display: grid; grid-template-columns: 44px 52px 1fr auto auto; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; transition: border-color .12s ease; }
.rp-row:hover[b-t77ek381py] { border-color: var(--line-soft); }
.rp-row.caught[b-t77ek381py] { opacity: .6; }
.rp-row img[b-t77ek381py] { width: 40px; height: 40px; image-rendering: pixelated; }
.rp-num[b-t77ek381py] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.rp-name[b-t77ek381py] { color: var(--text); text-transform: capitalize; }
.rp-meta[b-t77ek381py] { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text-mute); }
.rp-lv[b-t77ek381py] { font-family: var(--font-display); color: var(--text-dim); }
.rp-method[b-t77ek381py] { text-transform: capitalize; }
.rp-cond[b-t77ek381py] { color: var(--shiny); }

.rp-pips[b-t77ek381py] { display: flex; gap: 5px; }
.rp-pips .pip[b-t77ek381py] { font-family: var(--font-display); font-size: 9px; letter-spacing: .5px; padding: 2px 7px; border: 0; appearance: none; border-radius: 6px; background: var(--pip-bg); color: var(--pip-fg); font-weight: 700; cursor: pointer; user-select: none; }
.rp-pips .pip:focus-visible[b-t77ek381py] { outline: 2px solid var(--shiny); outline-offset: 1px; }
.rp-pips .pip.on-c[b-t77ek381py] { background: var(--caught); color: #06281a; }
.rp-pips .pip.on-s[b-t77ek381py] { background: var(--shiny); color: #3a2d00; }
.rp-pips .pip.on-h[b-t77ek381py] { background: var(--ha); color: #fff; }

@media (max-width: 720px) {
    .rp-row[b-t77ek381py] { grid-template-columns: 40px 1fr auto; }
    .rp-num[b-t77ek381py], .rp-meta[b-t77ek381py] { display: none; }
    .rp-loc[b-t77ek381py] { min-width: 0; flex: 1; }
    .rp-count[b-t77ek381py] { margin-left: 0; }
    .ev-locs[b-t77ek381py] { margin-left: 0; }
}
/* /Components/Pages/Forms.razor.rz.scp.css */
.forms-toolbar[b-913qtmk25t] {
    position: sticky;
    top: 124px; /* under the sticky header (57) + frozen dex-tabs (59) */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 -8px 18px;
    background: var(--surface-blur);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.forms-title[b-913qtmk25t] { display: flex; flex-direction: column; gap: 2px; }
.forms-label[b-913qtmk25t] {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--shiny);
}
.forms-count[b-913qtmk25t] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); letter-spacing: .5px; }

.render-controls[b-913qtmk25t] { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; }
.render-controls select[b-913qtmk25t] {
    margin-left: 6px; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px;
}
.btn[b-913qtmk25t] { border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim); border-radius: 8px; padding: 6px 13px; cursor: pointer; font-size: 14px; }
.btn:hover[b-913qtmk25t] { background: var(--surface-2); color: var(--text); }
.btn.toggle.active[b-913qtmk25t] { background: rgba(245, 197, 24, 0.16); border-color: var(--shiny); color: var(--shiny-soft); }

.scan-bar[b-913qtmk25t] {
    position: relative;
    height: 30px; border-radius: 9px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line-soft);
    margin-bottom: 22px;
}
.scan-fill[b-913qtmk25t] { height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); transition: width .3s ease; }
.scan-text[b-913qtmk25t] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; color: var(--text);
}

.form-box[b-913qtmk25t] { margin-bottom: 26px; }
.form-box-head[b-913qtmk25t] {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text); margin: 0 0 12px;
}
.form-box-head[b-913qtmk25t]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--shiny); box-shadow: 0 0 10px rgba(245, 197, 24, 0.4);
}
.form-box-count[b-913qtmk25t] {
    font-family: var(--font-display); font-size: 12px; color: var(--text-mute);
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 10px;
}

.forms-gridwrap[b-913qtmk25t] {
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.forms-grid[b-913qtmk25t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}

.form-cell[b-913qtmk25t] {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 8px 10px;
    cursor: default; user-select: none;
    scroll-margin-top: 130px;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.form-cell:hover[b-913qtmk25t] { transform: translateY(-2px); border-color: #4a4f68; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.form-cell.uncaught img[b-913qtmk25t] { filter: brightness(0) opacity(0.32); }
.form-cell.uncaught .nm[b-913qtmk25t] { color: var(--text-mute); }

/* Owned state — matches the Boxes grid: caught forms get a green accent + corner check. */
.form-cell.caught[b-913qtmk25t] {
    border-color: rgba(62, 207, 142, .45);
    background: linear-gradient(180deg, rgba(62, 207, 142, .08), var(--surface) 55%);
}
.form-cell.caught[b-913qtmk25t]::after {
    content: "✓"; position: absolute; top: 7px; right: 9px;
    font-size: 11px; font-weight: 800; color: var(--caught); line-height: 1;
}

.form-cell .num[b-913qtmk25t] {
    position: absolute; top: 6px; left: 9px;
    font-family: var(--font-display); font-size: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.form-cell img[b-913qtmk25t] { width: 80px; height: 80px; object-fit: contain; }
.form-cell .nm[b-913qtmk25t] { font-size: 12px; color: var(--text-dim); text-transform: capitalize; margin: 3px 0 8px; text-align: center; line-height: 1.25; min-height: 30px; }

.pips[b-913qtmk25t] { display: flex; gap: 5px; justify-content: center; }
.pip[b-913qtmk25t] {
    border: none; font: inherit; line-height: 1;
    font-family: var(--font-display); font-size: 9px; letter-spacing: .5px; padding: 2px 7px;
    border-radius: 6px; background: var(--pip-bg); color: var(--pip-fg); font-weight: 700; cursor: pointer; user-select: none;
}
.pip:hover[b-913qtmk25t] { transform: scale(1.12); }
.pip:focus-visible[b-913qtmk25t] { outline: 2px solid var(--red); outline-offset: 1px; }
.pip.on-c[b-913qtmk25t] { background: var(--caught); color: #06281a; }
.pip.on-s[b-913qtmk25t] { background: var(--shiny); color: #3a2d00; }
.pip.on-h[b-913qtmk25t] { background: var(--ha); color: #fff; }

.cell .sprite:focus-visible[b-913qtmk25t], .form-cell .sprite:focus-visible[b-913qtmk25t] { outline: 2px solid var(--red); outline-offset: 2px; }

.sentinel[b-913qtmk25t] { height: 1px; }
.status[b-913qtmk25t] { color: var(--text-mute); padding: 12px 4px; }
.end-note[b-913qtmk25t] { text-align: center; color: var(--text-mute); margin: 22px 0 4px; font-family: var(--font-display); letter-spacing: .5px; }

@media (max-width: 640px) {
    .forms-toolbar[b-913qtmk25t] { position: static; }
    .forms-grid[b-913qtmk25t] { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}
/* /Components/Pages/GenderDex.razor.rz.scp.css */
/* Gender tab — same chrome as the Hidden / Forms tabs, with pink as its accent
   (the way Hidden uses purple and Boxes uses green). */
.gd-toolbar[b-8j3h0fovrz] {
    position: sticky;
    top: 124px; /* under the sticky header (57) + frozen dex-tabs (59) */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 -8px 18px;
    background: var(--surface-blur);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.gd-title[b-8j3h0fovrz] { display: flex; flex-direction: column; gap: 2px; }
.gd-label[b-8j3h0fovrz] {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: #e58bb4;
}
.gd-count[b-8j3h0fovrz] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); letter-spacing: .5px; }
.gd-count a[b-8j3h0fovrz] { color: var(--text-dim); }

.render-controls[b-8j3h0fovrz] { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; }

.btn[b-8j3h0fovrz] {
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim);
    border-radius: 8px; padding: 6px 13px; cursor: pointer; font-size: 14px;
}
.btn:hover[b-8j3h0fovrz] { background: var(--surface-2); color: var(--text); }
.btn.toggle.active[b-8j3h0fovrz] { background: rgba(224, 122, 166, .18); border-color: #e07aa6; color: #e58bb4; }

/* Generation boxes — mirror the Forms tab's category boxes (header + gradient gridwrap). */
.gd-box[b-8j3h0fovrz] { margin-bottom: 26px; }
.gd-box-head[b-8j3h0fovrz] {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text); margin: 0 0 12px;
}
.gd-box-head[b-8j3h0fovrz]::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #e07aa6; box-shadow: 0 0 10px rgba(224, 122, 166, 0.4);
}
.gd-box-count[b-8j3h0fovrz] {
    font-family: var(--font-display); font-size: 12px; color: var(--text-mute);
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 10px;
}
.gd-gridwrap[b-8j3h0fovrz] {
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.gd-grid[b-8j3h0fovrz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}

/* Standard cell chrome at the same size as Boxes/Forms (those rules are scoped to Box, so restated here). */
.cell[b-8j3h0fovrz] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 8px 10px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    user-select: none;
}
.cell:hover[b-8j3h0fovrz] { transform: translateY(-2px); border-color: #4a4f68; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.cell .num[b-8j3h0fovrz] {
    position: absolute; top: 6px; left: 9px;
    font-family: var(--font-display); font-size: 10px; color: var(--text-mute);
    font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.cell .sprite[b-8j3h0fovrz] { width: 80px; height: 80px; object-fit: contain; }
.cell .sprite:focus-visible[b-8j3h0fovrz] { outline: 2px solid var(--red); outline-offset: 2px; }
.cell .nm[b-8j3h0fovrz] { font-size: 12px; color: var(--text-dim); margin: 3px 0 6px; text-transform: capitalize; }

/* Owned (♀ caught) — pink accent + corner check, the gender sibling of Boxes' green caught. */
.gd-cell.got[b-8j3h0fovrz] {
    border-color: rgba(224, 122, 166, .5);
    background: linear-gradient(180deg, rgba(224, 122, 166, .10), var(--surface) 55%);
}
.cell-badges[b-8j3h0fovrz] { position: absolute; top: 5px; right: 7px; display: flex; gap: 3px; align-items: center; line-height: 1; }
.cb[b-8j3h0fovrz] { font-size: 10px; font-weight: 800; line-height: 1; }
.cb-f[b-8j3h0fovrz] { color: #e58bb4; }

.pips[b-8j3h0fovrz] { display: flex; gap: 5px; justify-content: center; margin-top: 7px; }
.pip[b-8j3h0fovrz] {
    border: none; font: inherit; line-height: 1;
    font-family: var(--font-display);
    font-size: 11px; letter-spacing: .5px; padding: 2px 9px;
    border-radius: 6px; background: var(--pip-bg); color: var(--pip-fg);
    font-weight: 700; cursor: pointer; user-select: none;
    transition: transform .1s ease;
}
.pip:hover[b-8j3h0fovrz] { transform: scale(1.12); }
.pip:focus-visible[b-8j3h0fovrz] { outline: 2px solid var(--red); outline-offset: 1px; }
.pip.on-m[b-8j3h0fovrz] { background: #6db3ff; color: #06243a; }
.pip.on-f[b-8j3h0fovrz] { background: #e07aa6; color: #3a0820; }

.status[b-8j3h0fovrz] { color: var(--text-mute); padding: 16px 4px; }

@media (max-width: 640px) {
    .gd-toolbar[b-8j3h0fovrz] { top: 49px; }
    .gd-grid[b-8j3h0fovrz] { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .cell .sprite[b-8j3h0fovrz] { width: 64px; height: 64px; }
}
/* /Components/Pages/Generations.razor.rz.scp.css */
.gen-head[b-zcf7r3hskk] { margin: 4px 0 24px; }
.gen-head h1[b-zcf7r3hskk] { font-family: var(--font-display); font-size: 30px; margin: 0 0 6px; color: var(--text); }
.gen-sub[b-zcf7r3hskk] { color: var(--text-dim); max-width: 660px; line-height: 1.5; margin: 0; }

.gen-grid[b-zcf7r3hskk] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.gen-card[b-zcf7r3hskk] {
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.gen-card-top[b-zcf7r3hskk] { text-align: center; }
.gen-num[b-zcf7r3hskk] { font-family: var(--font-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.gen-region[b-zcf7r3hskk] { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text); }

.gen-ring[b-zcf7r3hskk] {
    width: 112px; height: 112px; border-radius: 50%;
    background: conic-gradient(var(--caught) calc(var(--pct) * 1%), var(--bg-2, var(--bg)) 0);
    display: grid; place-items: center;
}
.gen-ring-inner[b-zcf7r3hskk] {
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--surface-2, var(--surface));
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.gen-ring-pct[b-zcf7r3hskk] { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }
.gen-ring-cap[b-zcf7r3hskk] { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }

.gen-counts[b-zcf7r3hskk] { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.gen-pill[b-zcf7r3hskk] { background: var(--bg); border: 1px solid var(--line); color: var(--text-dim);
    font-size: 12px; padding: 4px 9px; border-radius: 8px; font-variant-numeric: tabular-nums; }

.gen-stats[b-zcf7r3hskk] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.gen-intro[b-zcf7r3hskk] { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    font-size: 12px; color: var(--text-mute); padding-top: 10px; border-top: 1px solid var(--line-soft);
    width: 100%; box-sizing: border-box; }
.gen-intro-item b[b-zcf7r3hskk] { color: var(--text); font-variant-numeric: tabular-nums; }
.gen-intro-loading[b-zcf7r3hskk] { color: var(--text-mute); font-style: italic; }

.gen-games[b-zcf7r3hskk] { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.gen-game[b-zcf7r3hskk] { background: var(--bg); border: 1px solid var(--line-soft); color: var(--text-mute);
    font-size: 10.5px; padding: 3px 7px; border-radius: 6px; }

.gen-jump[b-zcf7r3hskk] { margin-top: auto; font-family: var(--font-display); font-size: 13px; color: var(--red);
    text-decoration: none; padding-top: 6px; }
.gen-jump:hover[b-zcf7r3hskk] { text-decoration: underline; }
/* /Components/Pages/GrowthCurves.razor.rz.scp.css */
.gr-head[b-7604nmv831] { margin-bottom: 16px; }
.gr-head h1[b-7604nmv831] { margin: 0; font-size: 28px; }
.gr-sub[b-7604nmv831] { margin: 6px 0 0; color: var(--text-dim); max-width: 720px; }

.gr-chart-wrap[b-7604nmv831] {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 16px 16px 10px;
}
.gr-chart[b-7604nmv831] { width: 100%; height: 340px; display: block; }
.gr-grid[b-7604nmv831] { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; }
.gr-line[b-7604nmv831] { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gr-axis[b-7604nmv831] {
    display: flex; justify-content: space-between; margin-top: 8px;
    font-family: var(--font-display); font-size: 12px; color: var(--text-mute);
}

.gr-legend[b-7604nmv831] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px; margin-top: 16px;
}
.gr-leg[b-7604nmv831] {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 13px;
}
.gr-swatch[b-7604nmv831] { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; box-shadow: 0 0 8px rgba(0, 0, 0, .3); }
.gr-name[b-7604nmv831] { font-family: var(--font-display); color: var(--text); font-size: 14px; }
.gr-total[b-7604nmv831] { margin-left: auto; color: var(--text-mute); font-size: 12px; font-variant-numeric: tabular-nums; }

.status[b-7604nmv831] { color: var(--text-mute); padding: 16px 4px; }
/* /Components/Pages/HaDex.razor.rz.scp.css */
.ha-toolbar[b-0d4v5uppzl] {
    position: sticky;
    top: 124px; /* under the sticky header (57) + frozen dex-tabs (59) */
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 14px;
    margin: 0 -8px 18px;
    background: var(--surface-blur);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.ha-title[b-0d4v5uppzl] { display: flex; flex-direction: column; gap: 2px; }
.ha-label[b-0d4v5uppzl] {
    font-family: var(--font-display); font-size: 15px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--ha);
}
.ha-count[b-0d4v5uppzl] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); letter-spacing: .5px; }

.render-controls[b-0d4v5uppzl] { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; }
.render-controls select[b-0d4v5uppzl] {
    margin-left: 6px; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px;
}

.btn[b-0d4v5uppzl] {
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim);
    border-radius: 8px; padding: 6px 13px; cursor: pointer; font-size: 14px;
}
.btn:hover[b-0d4v5uppzl] { background: var(--surface-2); color: var(--text); }
.btn.toggle.active[b-0d4v5uppzl] { background: rgba(138, 109, 255, 0.18); border-color: var(--ha); color: var(--ha-soft); }

.scan-bar[b-0d4v5uppzl] {
    position: relative;
    height: 30px; border-radius: 9px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line-soft);
    margin-bottom: 22px;
}
.scan-fill[b-0d4v5uppzl] { height: 100%; background: linear-gradient(90deg, #5a3fb0, var(--ha)); transition: width .3s ease; }
.scan-text[b-0d4v5uppzl] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; color: var(--text);
}

.ha-grid[b-0d4v5uppzl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}

.ha-cell[b-0d4v5uppzl] {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 14px 8px 10px;
    cursor: pointer;
    scroll-margin-top: 130px;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ha-cell:hover[b-0d4v5uppzl] { transform: translateY(-2px); border-color: #4a4f68; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); }
.ha-cell.got[b-0d4v5uppzl] { border-color: var(--ha); background: linear-gradient(180deg, rgba(138, 109, 255, 0.10), var(--surface)); }

.ha-cell .num[b-0d4v5uppzl] {
    position: absolute; top: 6px; left: 9px;
    font-family: var(--font-display); font-size: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.ha-cell img[b-0d4v5uppzl] { width: 78px; height: 78px; object-fit: contain; }
.ha-cell .nm[b-0d4v5uppzl] { font-size: 12px; color: var(--text-dim); text-transform: capitalize; margin-top: 2px; }
.ha-name[b-0d4v5uppzl] {
    font-family: var(--font-display); font-size: 11px; color: var(--ha);
    text-align: center; margin: 4px 0 8px; min-height: 26px; display: flex; align-items: center; line-height: 1.2;
}

.ha-tick[b-0d4v5uppzl] {
    font-family: var(--font-display); font-size: 11px; letter-spacing: .5px;
    border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text-mute);
    padding: 5px 12px; border-radius: 8px; cursor: pointer; width: 100%;
}
.ha-tick:hover[b-0d4v5uppzl] { color: var(--text); }
.ha-tick.on[b-0d4v5uppzl] { background: var(--ha); color: #fff; border-color: var(--ha); }

.sentinel[b-0d4v5uppzl] { height: 1px; }
.end-note[b-0d4v5uppzl] { text-align: center; color: var(--text-mute); margin: 22px 0 4px; font-family: var(--font-display); letter-spacing: .5px; }

@media (max-width: 640px) {
    .ha-toolbar[b-0d4v5uppzl] { top: 49px; }
    .ha-grid[b-0d4v5uppzl] { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Shared shell for the tabbed collection page (Boxes / Gender / Hidden / Forms). */
.dex-tabs[b-3u0m8867i1] {
    /* Frozen under the app header so Style/Shiny + tab switching stay reachable while
       scrolling a long list. Sits ABOVE each tab's own toolbar (which sticks below it). */
    position: sticky;
    top: 57px;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 -8px 0;
    padding: 11px 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
}

.dt-tabs[b-3u0m8867i1] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
}

.dt-tab[b-3u0m8867i1] {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: .4px;
    color: var(--text-dim);
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}

.dt-tab:hover[b-3u0m8867i1] { color: var(--text); background: var(--surface-2); }

.dt-tab.active[b-3u0m8867i1] {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
    box-shadow: 0 2px 10px var(--red-glow);
}

/* Shared render controls (Style + Shiny), pushed to the right. Mirrors Box's
   .render-controls styling (which is scoped to Box, so it's restated here). */
.dt-style[b-3u0m8867i1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--text-dim);
}

.tb-field[b-3u0m8867i1] {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px;
    text-transform: uppercase; color: var(--text-mute);
}
.tb-field select[b-3u0m8867i1] {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px;
    font-family: var(--font-body); font-size: 13px;
}
.tb-field select:focus[b-3u0m8867i1] { border-color: var(--red); }

.btn[b-3u0m8867i1] {
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim);
    border-radius: 8px; padding: 6px 13px; cursor: pointer; font-size: 14px;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover[b-3u0m8867i1] { background: var(--surface-2); color: var(--text); }
.btn.toggle.active[b-3u0m8867i1] { background: rgba(238, 90, 71, 0.16); border-color: var(--red); color: var(--red-soft); }

@media (max-width: 640px) {
    /* The header wraps taller on mobile, so don't freeze the tabs there (tab toolbars also go static). */
    .dex-tabs[b-3u0m8867i1] { position: static; }
}
@media (max-width: 560px) {
    .dt-style[b-3u0m8867i1] { margin-left: 0; width: 100%; }
}
/* /Components/Pages/Hunts.razor.rz.scp.css */
/* ---- "Log this shiny as a specimen" prompt after a hunt completes ---- */
.log-prompt[b-7pa20u4p16] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--shiny); border-radius: 12px; background: rgba(245, 197, 24, .12); }
.lp-txt[b-7pa20u4p16] { flex: 1; min-width: 200px; font-size: 14px; color: var(--text); }
.lp-go[b-7pa20u4p16] { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; font-family: var(--font-display); font-size: 13px; }
.lp-go:hover[b-7pa20u4p16] { background: var(--red-deep); }
.lp-x[b-7pa20u4p16] { background: none; border: none; color: var(--text-mute); font-size: 16px; cursor: pointer; padding: 4px 8px; line-height: 1; }
.lp-x:hover[b-7pa20u4p16] { color: var(--red); }

/* ---- Broadcast stage ---- */
.hunt-stage-wrap[b-7pa20u4p16] {
    position: relative;
    overflow: hidden;
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(245, 197, 24, 0.10), transparent 60%),
        radial-gradient(120% 120% at 50% 110%, rgba(238, 90, 71, 0.14), transparent 60%),
        linear-gradient(180deg, var(--bg-2, #101119), var(--bg, #0c0d13) 70%);
}

/* Top control bar (layout · sprite style · fullscreen), pinned to the top-right of the stage. */
.stage-toolbar[b-7pa20u4p16] {
    position: relative; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    align-self: flex-end;
    padding: 12px 14px 0;
}
.stage-layout[b-7pa20u4p16] {
    display: inline-flex; gap: 2px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 2px;
}
.sl[b-7pa20u4p16] {
    font-family: var(--font-display); font-size: 13px; line-height: 1; letter-spacing: 1px;
    color: var(--text-mute); background: transparent; border: none;
    border-radius: 6px; padding: 5px 9px; cursor: pointer; transition: color .12s ease, background .12s ease;
}
.sl:hover[b-7pa20u4p16] { color: var(--text-dim); }
.sl.on[b-7pa20u4p16] { color: #2a2300; background: var(--shiny); }

/* The grid that holds 1, 2 or 4 hunt cells. */
.stage-grid[b-7pa20u4p16] { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.grid-2 .stage-grid[b-7pa20u4p16], .grid-4 .stage-grid[b-7pa20u4p16] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    align-content: center; padding: 4px 14px 16px;
}
.grid-4 .stage-grid[b-7pa20u4p16] { grid-auto-rows: 1fr; }
.hunt-stage-wrap:fullscreen[b-7pa20u4p16] {
    border: none;
    border-radius: 0;
    min-height: 100vh;
}

/* sparkles */
.sparkles[b-7pa20u4p16] { position: absolute; inset: 0; pointer-events: none; }
.spark[b-7pa20u4p16] {
    position: absolute;
    width: var(--sz); height: var(--sz);
    border-radius: 50%;
    background: var(--shiny);
    box-shadow: 0 0 8px 1px rgba(245, 197, 24, 0.7);
    opacity: 0;
    animation: spark-twinkle-b-7pa20u4p16 var(--dur) ease-in-out var(--dl) infinite;
}
@keyframes spark-twinkle-b-7pa20u4p16 {
    0%, 100% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 0.85; transform: scale(1); }
}
.hunt-stage-wrap.celebrate .spark[b-7pa20u4p16] { animation-duration: 0.7s; }
.hunt-stage-wrap.celebrate[b-7pa20u4p16]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 50% at 50% 45%, rgba(245, 197, 24, 0.25), transparent 70%);
    animation: flash-b-7pa20u4p16 1.5s ease-out forwards;
}
@keyframes flash-b-7pa20u4p16 { 0% { opacity: 1; } 100% { opacity: 0; } }

/* stage column */
.stage[b-7pa20u4p16] {
    position: relative; z-index: 2;
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding: 26px 20px 34px;
    text-align: center;
}
.stage-top[b-7pa20u4p16] {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 6px;
}
.stage-kicker[b-7pa20u4p16] {
    font-family: var(--font-display); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--shiny);
}
.stage-method[b-7pa20u4p16] {
    font-family: var(--font-display); font-size: 12px; letter-spacing: 1px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
    border-radius: 999px; padding: 4px 12px;
}
.stage-fs[b-7pa20u4p16] {
    background: transparent; border: 1px solid var(--line-soft); color: var(--text-dim);
    border-radius: 8px; width: 30px; height: 28px; cursor: pointer; font-size: 14px;
}
.stage-fs:hover[b-7pa20u4p16] { color: var(--text); border-color: var(--shiny); }

/* Sprite-style picker (Sprite / 3D / Showdown) — sits at the right of the stage header. */
.stage-style[b-7pa20u4p16] {
    display: inline-flex; gap: 2px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 2px;
}
.ss[b-7pa20u4p16] {
    font-family: var(--font-display); font-size: 11px; letter-spacing: .5px;
    color: var(--text-mute); background: transparent; border: none;
    border-radius: 6px; padding: 4px 9px; cursor: pointer; transition: color .12s ease, background .12s ease;
}
.ss:hover[b-7pa20u4p16] { color: var(--text-dim); }
.ss.on[b-7pa20u4p16] { color: #2a2300; background: var(--shiny); font-weight: 700; }

/* sprite + aura */
.stage-mon[b-7pa20u4p16] { position: relative; display: grid; place-items: center; margin: 4px 0 2px; }
.stage-aura[b-7pa20u4p16] {
    position: absolute; width: 230px; height: 230px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 197, 24, 0.28), rgba(238, 90, 71, 0.10) 45%, transparent 70%);
    filter: blur(4px);
    animation: aura-pulse-b-7pa20u4p16 3.4s ease-in-out infinite;
}
@keyframes aura-pulse-b-7pa20u4p16 {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}
.stage-sprite[b-7pa20u4p16] {
    position: relative;
    width: 200px; height: 200px; object-fit: contain;
    image-rendering: pixelated;          /* crisp upscaling of the Gen-5 gif */
    animation: bob-b-7pa20u4p16 2.6s ease-in-out infinite;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
@keyframes bob-b-7pa20u4p16 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.stage-name[b-7pa20u4p16] {
    font-family: var(--font-display); font-weight: 700;
    font-size: 22px; letter-spacing: 1px; color: var(--text);
    margin-top: 6px;
}

/* the big counter */
.stage-counter[b-7pa20u4p16] {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(58px, 12vw, 132px); line-height: 1;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #ffe27a, var(--shiny) 55%, #d99a08);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 18px rgba(245, 197, 24, 0.3));
    margin: 2px 0 10px;
}

/* odds */
.stage-odds[b-7pa20u4p16] { display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 13px; }
.odds-ring[b-7pa20u4p16] {
    width: 20px; height: 20px; border-radius: 50%;
    background: conic-gradient(var(--shiny) calc(var(--p) * 1%), rgba(255, 255, 255, 0.10) 0);
    -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
    mask: radial-gradient(circle, transparent 5px, #000 6px);
}

/* COUNT button */
.count-btn[b-7pa20u4p16] {
    margin-top: 18px;
    font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 1.5px;
    color: #fff; border: none; cursor: pointer;
    padding: 16px 44px; border-radius: 14px;
    background: linear-gradient(180deg, var(--red), var(--red-deep));
    box-shadow: 0 10px 26px rgba(238, 90, 71, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: inline-flex; align-items: center; gap: 10px;
    transition: transform 0.06s ease, box-shadow 0.15s ease;
}
.count-btn:hover[b-7pa20u4p16] { box-shadow: 0 12px 30px rgba(238, 90, 71, 0.5); }
.count-btn:active[b-7pa20u4p16] { transform: translateY(2px); box-shadow: 0 5px 16px rgba(238, 90, 71, 0.4); }
.count-btn .cb-plus[b-7pa20u4p16] { font-size: 22px; }
.count-btn kbd[b-7pa20u4p16] {
    font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px; padding: 2px 7px; color: rgba(255, 255, 255, 0.9);
}

/* secondary actions */
.stage-actions[b-7pa20u4p16] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.sa[b-7pa20u4p16] {
    font-family: var(--font-display); font-size: 13px;
    color: var(--text-dim); background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 14px; cursor: pointer;
}
.sa:hover[b-7pa20u4p16] { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.sa.found[b-7pa20u4p16] { color: var(--caught); border-color: rgba(62, 207, 142, 0.5); }
.sa.found:hover[b-7pa20u4p16] { background: var(--caught); color: #08130d; border-color: var(--caught); }
.sa.del:hover[b-7pa20u4p16] { background: var(--red); color: #fff; border-color: var(--red); }

/* ---- Grid mode: cards + scaled-down contents so 2–4 hunts fit at once ---- */
.grid-2 .stage[b-7pa20u4p16], .grid-4 .stage[b-7pa20u4p16] {
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.015);
    padding: 14px 14px 20px;
}
.stage.sel[b-7pa20u4p16] { border-color: var(--shiny); box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.4); }

/* 1×2 */
.grid-2 .stage-aura[b-7pa20u4p16] { width: 150px; height: 150px; }
.grid-2 .stage-sprite[b-7pa20u4p16] { width: 132px; height: 132px; }
.grid-2 .stage-counter[b-7pa20u4p16] { font-size: clamp(40px, 6vw, 80px); margin: 2px 0 8px; }
.grid-2 .stage-name[b-7pa20u4p16] { font-size: 18px; }
.grid-2 .count-btn[b-7pa20u4p16] { font-size: 15px; padding: 12px 30px; margin-top: 14px; }

/* 2×2 */
.grid-4 .stage-aura[b-7pa20u4p16] { width: 116px; height: 116px; }
.grid-4 .stage-sprite[b-7pa20u4p16] { width: 104px; height: 104px; }
.grid-4 .stage-counter[b-7pa20u4p16] { font-size: clamp(32px, 4.4vw, 58px); margin: 0 0 6px; }
.grid-4 .stage-name[b-7pa20u4p16] { font-size: 16px; margin-top: 2px; }
.grid-4 .stage-odds[b-7pa20u4p16] { font-size: 12px; }
.grid-4 .count-btn[b-7pa20u4p16] { font-size: 14px; padding: 10px 24px; margin-top: 10px; }
.grid-4 .stage-actions[b-7pa20u4p16] { gap: 6px; margin-top: 10px; }
.grid-4 .sa[b-7pa20u4p16] { font-size: 12px; padding: 6px 10px; }

/* Blank slot (e.g. 3 hunts in a 2×2). */
.stage.blank[b-7pa20u4p16] {
    border: 1px dashed var(--line-soft); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    min-height: 220px; background: rgba(255, 255, 255, 0.01);
}
.blank-inner[b-7pa20u4p16] {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--text-mute); width: 100%; max-width: 300px; padding: 16px;
}
.blank-ico[b-7pa20u4p16] { font-size: 28px; opacity: .5; }
.blank-txt[b-7pa20u4p16] { font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; }
/* The new-hunt picker, sized to fit inside a slot. */
.stage.blank .newhunt[b-7pa20u4p16] { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; margin-top: 2px; }
.stage.blank .nh-search[b-7pa20u4p16] { width: 100%; }
.stage.blank .newhunt input[b-7pa20u4p16], .stage.blank .newhunt select[b-7pa20u4p16] { width: 100%; box-sizing: border-box; }

/* On narrow screens, stack the grid into one column. */
@media (max-width: 760px) {
    .grid-2 .stage-grid[b-7pa20u4p16], .grid-4 .stage-grid[b-7pa20u4p16] { grid-template-columns: 1fr; }
}

/* empty / start state */
.stage.empty .empty-h1[b-7pa20u4p16] { font-size: 30px; margin: 8px 0 4px; color: var(--text); }
.stage.empty .empty-sub[b-7pa20u4p16] { color: var(--text-mute); margin: 0 0 18px; }
.signin-note[b-7pa20u4p16] { margin-top: 14px; color: var(--text-mute); font-size: 13px; }

/* shared new-hunt form */
.newhunt[b-7pa20u4p16] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: flex-start; }
.nh-search[b-7pa20u4p16] { position: relative; }
.newhunt input[b-7pa20u4p16] {
    width: 260px; background: var(--bg-2); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px 13px;
}
.newhunt select[b-7pa20u4p16] {
    background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft);
    border-radius: 9px; padding: 10px 12px;
}
.nh-results[b-7pa20u4p16] {
    position: absolute; z-index: 6; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
    background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 9px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); text-align: left;
}
.nh-results li[b-7pa20u4p16] { padding: 8px 10px; border-radius: 7px; cursor: pointer; display: flex; gap: 8px; }
.nh-results li:hover[b-7pa20u4p16] { background: var(--surface); }
.nh-results .r-num[b-7pa20u4p16] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); }
.btn.primary[b-7pa20u4p16] {
    background: linear-gradient(180deg, var(--red), var(--red-deep)); color: #fff; border: none;
    border-radius: 9px; padding: 10px 18px; cursor: pointer; font-size: 14px;
}
.btn.primary:disabled[b-7pa20u4p16] { opacity: 0.4; cursor: default; }

/* rail of other active hunts */
.rail[b-7pa20u4p16] { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.rail-card[b-7pa20u4p16] {
    display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
    padding: 7px 13px 7px 8px; cursor: pointer; color: var(--text-dim);
}
.rail-card:hover[b-7pa20u4p16] { border-color: var(--line); }
.rail-card.on[b-7pa20u4p16] { border-color: var(--shiny); box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.4); }
.rail-card img[b-7pa20u4p16] { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.rail-meta[b-7pa20u4p16] { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.rail-name[b-7pa20u4p16] { font-family: var(--font-display); font-size: 13px; color: var(--text); }
.rail-count[b-7pa20u4p16] { font-size: 12px; color: var(--shiny); font-variant-numeric: tabular-nums; }
.rail-new[b-7pa20u4p16] {
    flex: 0 0 auto; align-self: stretch;
    font-family: var(--font-display); font-size: 13px; color: var(--text-dim);
    background: transparent; border: 1px dashed var(--line-soft); border-radius: 12px;
    padding: 0 16px; cursor: pointer;
}
.rail-new:hover[b-7pa20u4p16], .rail-new.on[b-7pa20u4p16] { color: var(--text); border-color: var(--red); }

.newhunt-panel[b-7pa20u4p16] {
    margin-top: 10px; padding: 14px; border: 1px solid var(--line-soft);
    border-radius: 12px; background: var(--surface);
}

/* completed */
.done-toggle[b-7pa20u4p16] {
    margin-top: 18px; background: transparent; border: none; cursor: pointer;
    font-family: var(--font-display); font-size: 14px; color: var(--text-dim);
    display: inline-flex; align-items: center; gap: 7px;
}
.done-toggle:hover[b-7pa20u4p16] { color: var(--text); }
.done-check[b-7pa20u4p16] { color: var(--caught); }
.done-n[b-7pa20u4p16] {
    font-size: 12px; color: var(--text-mute); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 9px;
}
.done-list[b-7pa20u4p16] { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.done-row[b-7pa20u4p16] {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px;
}
.done-row img[b-7pa20u4p16] { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.done-name[b-7pa20u4p16] { font-family: var(--font-display); color: var(--text); }
.done-meta[b-7pa20u4p16] { color: var(--text-mute); font-size: 13px; margin-left: auto; margin-right: 10px; }

@media (max-width: 640px) {
    .hunt-stage-wrap[b-7pa20u4p16] { min-height: 68vh; }
    .stage-sprite[b-7pa20u4p16], .stage-aura[b-7pa20u4p16] { width: 150px; height: 150px; }
    .newhunt input[b-7pa20u4p16] { width: 200px; }
}
/* /Components/Pages/Import.razor.rz.scp.css */
.imp-head[b-0u62e7js1p] { margin-bottom: 18px; }
.imp-back[b-0u62e7js1p] { display: inline-block; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); }
.imp-back:hover[b-0u62e7js1p] { color: var(--text); }
.imp-head h1[b-0u62e7js1p] { font-family: var(--font-display); margin: 0 0 6px; }
.imp-sub[b-0u62e7js1p] { color: var(--text-mute); font-size: 14px; margin: 0; max-width: 660px; line-height: 1.5; }
.imp-muted[b-0u62e7js1p] { color: var(--text-mute); }
.imp-muted a[b-0u62e7js1p], .imp-sub a[b-0u62e7js1p] { color: var(--red); }

.imp-card[b-0u62e7js1p] {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

/* tabs */
.imp-tabs[b-0u62e7js1p] { display: flex; gap: 6px; margin-bottom: 14px; }
.imp-tab[b-0u62e7js1p] {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.imp-tab:hover[b-0u62e7js1p] { color: var(--text); }
.imp-tab.on[b-0u62e7js1p] { color: var(--text); border-color: var(--red); background: var(--surface-2); }

.imp-help[b-0u62e7js1p] { color: var(--text-mute); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.imp-help code[b-0u62e7js1p] {
    font-size: 12px; padding: 1px 5px; border-radius: 5px;
    background: var(--bg); border: 1px solid var(--line-soft); color: var(--text-dim);
}

.imp-paste[b-0u62e7js1p] {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    box-sizing: border-box;
}
.imp-paste:focus[b-0u62e7js1p] { outline: none; border-color: var(--red); }

.imp-file[b-0u62e7js1p] { display: block; margin-bottom: 10px; color: var(--text-dim); font-size: 13px; }
.imp-filename[b-0u62e7js1p] { font-size: 13px; color: var(--text); margin: 0 0 10px; }

.imp-opt[b-0u62e7js1p] {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-dim); margin-top: 12px; cursor: pointer;
}
.imp-opt input[b-0u62e7js1p] { accent-color: var(--red); }
.imp-shiny[b-0u62e7js1p] { color: var(--shiny); font-weight: 600; }

.imp-go[b-0u62e7js1p] {
    margin-top: 14px;
    padding: 9px 18px;
    border: none;
    border-radius: 10px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .15s ease, opacity .15s ease;
}
.imp-go:hover[b-0u62e7js1p] { background: var(--red-deep); }
.imp-go:disabled[b-0u62e7js1p] { opacity: .45; cursor: not-allowed; }

.imp-cancel[b-0u62e7js1p] {
    margin-top: 14px;
    padding: 9px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
}
.imp-cancel:hover[b-0u62e7js1p] { color: var(--text); border-color: var(--text-mute); }

.imp-error[b-0u62e7js1p] { color: var(--red); font-size: 13px; margin: 12px 0 0; }

/* review summary */
.imp-summary[b-0u62e7js1p] { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 6px; }
.imp-stat[b-0u62e7js1p] { display: flex; flex-direction: column; }
.imp-num[b-0u62e7js1p] { font-family: var(--font-display); font-size: 26px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.imp-lbl[b-0u62e7js1p] { font-size: 12px; color: var(--text-mute); }
.imp-stat.warn .imp-num[b-0u62e7js1p] { color: var(--shiny); }
.imp-target[b-0u62e7js1p] { font-size: 13px; color: var(--text-mute); margin: 10px 0 0; }
.imp-target strong[b-0u62e7js1p] { color: var(--text); }

.imp-h2[b-0u62e7js1p] { font-family: var(--font-display); font-size: 17px; margin: 18px 0 6px; }

/* export */
.imp-export[b-0u62e7js1p] { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.imp-exrow[b-0u62e7js1p] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imp-exlbl[b-0u62e7js1p] { flex: 1 1 220px; font-size: 14px; color: var(--text); }
.imp-exlbl small[b-0u62e7js1p] { color: var(--text-mute); font-size: 12px; }
.imp-exmsg[b-0u62e7js1p] { font-size: 13px; color: var(--caught, var(--red)); margin: 12px 0 0; }

.imp-review[b-0u62e7js1p] { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.imp-row[b-0u62e7js1p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--bg);
}
.imp-row.skip[b-0u62e7js1p] { opacity: .5; }
.imp-src[b-0u62e7js1p] { flex: 0 0 200px; font-size: 13px; color: var(--text); word-break: break-word; }
.imp-pick[b-0u62e7js1p] { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.imp-chosen[b-0u62e7js1p] { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.imp-spr[b-0u62e7js1p] { width: 38px; height: 38px; image-rendering: pixelated; }
.imp-flag[b-0u62e7js1p] { font-size: 11px; color: var(--shiny); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 6px; }

.imp-sug[b-0u62e7js1p] {
    padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 8px;
    background: var(--surface-2); color: var(--text); font-size: 13px; cursor: pointer;
}
.imp-sug:hover[b-0u62e7js1p] { border-color: var(--red); }
.imp-manual[b-0u62e7js1p] {
    padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 8px;
    background: var(--surface); color: var(--text); font-size: 13px; width: 150px;
}
.imp-manual:focus[b-0u62e7js1p] { outline: none; border-color: var(--red); }

.imp-toggle[b-0u62e7js1p] {
    flex: 0 0 auto;
    padding: 5px 10px; border: 1px solid var(--line-soft); border-radius: 8px;
    background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer;
}
.imp-toggle:hover[b-0u62e7js1p] { color: var(--text); }

.imp-actions[b-0u62e7js1p] { display: flex; gap: 10px; align-items: center; }

/* done */
.imp-done[b-0u62e7js1p] { text-align: center; padding: 30px 18px; }
.imp-done-mark[b-0u62e7js1p] {
    width: 56px; height: 56px; margin: 0 auto 12px;
    border-radius: 50%; background: var(--caught, var(--red)); color: #fff;
    font-size: 30px; line-height: 56px; font-weight: 700;
}
.imp-done h2[b-0u62e7js1p] { font-family: var(--font-display); margin: 0 0 6px; }
.imp-done .imp-actions[b-0u62e7js1p] { justify-content: center; margin-top: 16px; }

@media (max-width: 560px) {
    .imp-row[b-0u62e7js1p] { flex-wrap: wrap; }
    .imp-src[b-0u62e7js1p] { flex-basis: 100%; }
}
/* /Components/Pages/IvDecoder.razor.rz.scp.css */
.iv-head[b-c0rna932ki] { margin: 4px 0 22px; }
.iv-head h1[b-c0rna932ki] { font-family: var(--font-display); font-size: 30px; margin: 0 0 6px; color: var(--text); }
.iv-sub[b-c0rna932ki] { color: var(--text-dim); max-width: 640px; line-height: 1.5; margin: 0; }
.iv-sub em[b-c0rna932ki] { color: var(--text); font-style: normal; font-weight: 600; }

.iv-loading[b-c0rna932ki] { color: var(--text-mute); padding: 30px 0; }

.iv-panel[b-c0rna932ki] {
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 30px;
}

.iv-field[b-c0rna932ki] { display: block; max-width: 460px; }
.iv-field > span[b-c0rna932ki] { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.iv-field select[b-c0rna932ki] { width: 100%; padding: 11px 12px; font-size: 15px; border-radius: 10px;
    background: var(--bg); color: var(--text); border: 1px solid var(--line); }

.iv-result[b-c0rna932ki] { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.iv-stat-row[b-c0rna932ki] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.iv-label[b-c0rna932ki] { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-dim); }
.iv-stat-pill[b-c0rna932ki] { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff;
    background: linear-gradient(90deg, var(--red-deep), var(--red)); padding: 6px 16px; border-radius: 10px; }

.iv-values[b-c0rna932ki] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iv-chips[b-c0rna932ki] { display: flex; gap: 7px; flex-wrap: wrap; }
.iv-chip[b-c0rna932ki] { font-variant-numeric: tabular-nums; min-width: 30px; text-align: center;
    background: var(--bg); border: 1px solid var(--line); color: var(--text);
    padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.iv-chip.perfect[b-c0rna932ki] { background: rgba(80, 200, 120, .16); border-color: rgba(80, 200, 120, .55);
    color: #5fd17f; font-weight: 700; }

.iv-note[b-c0rna932ki] { margin: 16px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.iv-note strong[b-c0rna932ki] { color: #5fd17f; }

.iv-reference h2[b-c0rna932ki] { font-family: var(--font-display); font-size: 18px; color: var(--text); margin: 0 0 16px; }
.iv-grid[b-c0rna932ki] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.iv-col h3[b-c0rna932ki] { font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--red); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.iv-ref-row[b-c0rna932ki] { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; }
.iv-ref-desc[b-c0rna932ki] { color: var(--text); font-size: 14px; }
.iv-ref-mod[b-c0rna932ki] { color: var(--text-mute); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* /Components/Pages/Megas.razor.rz.scp.css */
.mg-head[b-mkih7iqknx] { margin-bottom: 14px; }
.mg-head h1[b-mkih7iqknx] { margin: 0; font-size: 28px; }
.mg-sub[b-mkih7iqknx] { margin: 6px 0 0; color: var(--text-dim); max-width: 760px; }

.mg-bar[b-mkih7iqknx] { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mg-meta[b-mkih7iqknx] { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); }

.mg-grid[b-mkih7iqknx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mg-card[b-mkih7iqknx] {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
    padding: 12px 10px 14px; text-align: center;
    transition: border-color .12s ease, transform .12s ease;
}
.mg-card:hover[b-mkih7iqknx] { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.mg-card img[b-mkih7iqknx] { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); }
.mg-name[b-mkih7iqknx] { font-family: var(--font-display); font-size: 13px; color: var(--text); letter-spacing: .3px; }
.mg-types[b-mkih7iqknx] { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.status[b-mkih7iqknx] { color: var(--text-mute); padding: 16px 4px; }
/* /Components/Pages/Natures.razor.rz.scp.css */
.nt-head[b-5fgbeapgym] { margin-bottom: 16px; }
.nt-head h1[b-5fgbeapgym] { margin: 0; font-size: 28px; }
.nt-sub[b-5fgbeapgym] { margin: 6px 0 0; color: var(--text-dim); max-width: 720px; }

.nt-scroll[b-5fgbeapgym] { overflow-x: auto; padding-bottom: 4px; }

/* 1 label column + 5 stat columns */
.nt-chart[b-5fgbeapgym] {
    display: grid;
    grid-template-columns: 92px repeat(5, minmax(118px, 1fr));
    gap: 6px;
    min-width: 680px;
}

.nt-corner[b-5fgbeapgym] {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 6px 8px; border-radius: 8px; background: var(--bg-2);
    font-family: var(--font-display); font-size: 10px; line-height: 1.5;
}
.cn-up[b-5fgbeapgym] { color: var(--caught); }
.cn-down[b-5fgbeapgym] { color: var(--red); }

.nt-col-head[b-5fgbeapgym], .nt-row-head[b-5fgbeapgym] {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 13px; letter-spacing: .5px;
    border-radius: 8px; padding: 9px 6px;
}
.nt-col-head[b-5fgbeapgym] { background: rgba(238, 90, 71, .12); color: #ff9d8f; border: 1px solid rgba(238, 90, 71, .25); }
.nt-row-head[b-5fgbeapgym] { background: rgba(62, 207, 142, .12); color: var(--caught); border: 1px solid rgba(62, 207, 142, .25); }

.nt-cell[b-5fgbeapgym] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px;
    padding: 9px 6px; text-align: center; min-height: 56px;
    transition: border-color .12s ease, transform .12s ease;
}
.nt-cell:hover[b-5fgbeapgym] { border-color: var(--line); transform: translateY(-1px); }
.nt-cell.neutral[b-5fgbeapgym] { background: var(--bg-2); border-style: dashed; }
.nt-name[b-5fgbeapgym] { font-family: var(--font-display); font-size: 14px; color: var(--text); letter-spacing: .3px; }
.nt-cell.neutral .nt-name[b-5fgbeapgym] { color: var(--text-mute); }
.nt-tags[b-5fgbeapgym] { display: flex; gap: 5px; font-size: 9px; font-family: var(--font-display); }
.nt-up[b-5fgbeapgym] { color: var(--caught); }
.nt-down[b-5fgbeapgym] { color: #ff9d8f; }

.nt-legend[b-5fgbeapgym] { margin-top: 14px; }
.nt-flavor[b-5fgbeapgym] { font-size: 13px; color: var(--text-mute); }
.nt-flavor strong[b-5fgbeapgym] { color: var(--text-dim); }

.status[b-5fgbeapgym] { color: var(--text-mute); padding: 16px 4px; }

/* Phones: shrink the matrix to fit the viewport instead of forcing a 680px side-scroll. */
@media (max-width: 640px) {
    .nt-chart[b-5fgbeapgym] { min-width: 0; grid-template-columns: 40px repeat(5, minmax(0, 1fr)); gap: 4px; }
    .nt-corner[b-5fgbeapgym] { font-size: 8px; padding: 4px 5px; }
    .nt-col-head[b-5fgbeapgym], .nt-row-head[b-5fgbeapgym] { font-size: 10px; padding: 7px 2px; }
    .nt-cell[b-5fgbeapgym] { padding: 6px 3px; min-height: 46px; }
    .nt-name[b-5fgbeapgym] { font-size: 11px; word-break: break-word; }
    .nt-tags[b-5fgbeapgym] { gap: 3px; font-size: 8px; }
}
/* /Components/Pages/SharedDex.razor.rz.scp.css */
.sd-wrap[b-t948iihaka] { max-width: 1100px; margin: 0 auto; }
.sd-status[b-t948iihaka] { color: var(--text-mute); padding: 40px 4px; }

.sd-empty[b-t948iihaka] { text-align: center; padding: 70px 20px; }
.sd-empty h1[b-t948iihaka] { font-family: var(--font-display); font-size: 26px; color: var(--text); margin: 0 0 10px; }
.sd-empty p[b-t948iihaka] { color: var(--text-dim); margin: 0 0 20px; }

.sd-head[b-t948iihaka] { text-align: center; margin: 6px 0 26px; }
.sd-kicker[b-t948iihaka] { font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.sd-head h1[b-t948iihaka] { font-family: var(--font-display); font-size: 32px; color: var(--text); margin: 6px 0 4px; }
.sd-sub[b-t948iihaka] { color: var(--text-mute); margin: 0; font-size: 14px; }

.sd-rings[b-t948iihaka] { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin-bottom: 30px; }
.sd-ring-wrap[b-t948iihaka] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sd-ring[b-t948iihaka] {
    width: 104px; height: 104px; border-radius: 50%;
    background: conic-gradient(var(--ring-c) calc(var(--pct) * 1%), var(--bg-2, var(--bg)) 0);
    display: grid; place-items: center;
}
.sd-ring.caught[b-t948iihaka] { --ring-c: var(--caught); }
.sd-ring.shiny[b-t948iihaka]  { --ring-c: var(--shiny); }
.sd-ring.ha[b-t948iihaka]     { --ring-c: var(--ha); }
.sd-ring-inner[b-t948iihaka] {
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--surface-2, var(--surface)); display: grid; place-items: center;
}
.sd-ring-pct[b-t948iihaka] { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text); }
.sd-ring-label[b-t948iihaka] { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.sd-ring-val[b-t948iihaka] { font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }

.sd-grid[b-t948iihaka] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px;
    background: linear-gradient(180deg, var(--surface), var(--bg-2));
    border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px;
}
.sd-cell[b-t948iihaka] { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 4px 4px; text-align: center; }
.sd-cell.missing img[b-t948iihaka] { filter: brightness(0) opacity(0.28); }
.sd-num[b-t948iihaka] { position: absolute; top: 3px; left: 6px; font-family: var(--font-display); font-size: 9px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.sd-cell img[b-t948iihaka] { width: 56px; height: 56px; object-fit: contain; }
.sd-badges[b-t948iihaka] { position: absolute; top: 3px; right: 4px; display: flex; flex-direction: column; gap: 2px; }
.sd-b[b-t948iihaka] { font-size: 9px; border-radius: 4px; padding: 0 3px; font-family: var(--font-display); font-weight: 700; }
.sd-b.s[b-t948iihaka] { background: rgba(245,197,24,.2); color: var(--shiny); }
.sd-b.h[b-t948iihaka] { background: rgba(124,92,255,.22); color: var(--ha); }

.sd-foot[b-t948iihaka] { text-align: center; margin: 26px 0 8px; }
.sd-home[b-t948iihaka] { font-family: var(--font-display); color: var(--red); text-decoration: none; }
.sd-home:hover[b-t948iihaka] { text-decoration: underline; }
/* /Components/Pages/ShinyOdds.razor.rz.scp.css */
.so-head[b-inivbjl1dj] { margin-bottom: 16px; }
.so-head h1[b-inivbjl1dj] { margin: 0; font-size: 28px; }
.so-sub[b-inivbjl1dj] { margin: 6px 0 0; color: var(--text-dim); max-width: 720px; }
.so-sub em[b-inivbjl1dj] { color: var(--shiny); font-style: normal; }

.so-chart-wrap[b-inivbjl1dj] {
    position: relative;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 16px 16px 8px 44px;
}
.so-chart[b-inivbjl1dj] { width: 100%; height: 300px; display: block; }
.so-grid[b-inivbjl1dj] { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; }
.so-line[b-inivbjl1dj] { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.so-yaxis[b-inivbjl1dj] {
    position: absolute; left: 8px; top: 12px; bottom: 30px;
    display: flex; flex-direction: column; justify-content: space-between;
    font-family: var(--font-display); font-size: 11px; color: var(--text-mute);
}
.so-xaxis[b-inivbjl1dj] {
    display: flex; justify-content: space-between; margin-top: 6px; padding-left: 0;
    font-family: var(--font-display); font-size: 12px; color: var(--text-mute);
}

.so-table[b-inivbjl1dj] {
    margin-top: 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
}
.so-row[b-inivbjl1dj] {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
}
.so-row:last-child[b-inivbjl1dj] { border-bottom: none; }
.so-thead[b-inivbjl1dj] { background: var(--bg-2); }
.so-thead .so-c[b-inivbjl1dj] { font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.so-c[b-inivbjl1dj] { font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.so-c.name[b-inivbjl1dj] { display: flex; align-items: center; gap: 9px; color: var(--text); font-family: var(--font-display); }
.so-swatch[b-inivbjl1dj] { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

.so-note[b-inivbjl1dj] { margin-top: 12px; color: var(--text-mute); font-size: 13px; max-width: 760px; }

@media (max-width: 720px) {
    .so-row[b-inivbjl1dj] { grid-template-columns: 1.4fr 1fr 1fr; }
    .so-row .so-c:nth-child(4)[b-inivbjl1dj], .so-row .so-c:nth-child(5)[b-inivbjl1dj] { display: none; }
}
@media (max-width: 380px) {
    .so-row[b-inivbjl1dj] { padding: 10px; }
    .so-c[b-inivbjl1dj] { font-size: 12px; }
    .so-thead .so-c[b-inivbjl1dj] { font-size: 10px; }
    .so-chart-wrap[b-inivbjl1dj] { padding: 12px 10px 6px 36px; }
}
/* /Components/Pages/Specimens.razor.rz.scp.css */
.col-head[b-pa19u7rwzo] { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.col-head h1[b-pa19u7rwzo] { font-family: var(--font-display); margin: 0 0 4px; }
.col-sub-txt[b-pa19u7rwzo] { color: var(--text-mute); font-size: 13.5px; margin: 0; max-width: 560px; }
.col-xlink[b-pa19u7rwzo] { font-family: var(--font-display); font-size: 13px; color: var(--text-dim); padding: 7px 13px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface); white-space: nowrap; }
.col-xlink:hover[b-pa19u7rwzo] { color: var(--text); border-color: var(--red); }
.col-muted[b-pa19u7rwzo] { color: var(--text-mute); }

.col-head-actions[b-pa19u7rwzo] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.col-add[b-pa19u7rwzo] { position: relative; }
.col-add-backdrop[b-pa19u7rwzo] { position: fixed; inset: 0; z-index: 25; }
.col-add-btn[b-pa19u7rwzo] { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; font-family: var(--font-display); font-size: 13px; letter-spacing: .3px; }
.col-add-btn:hover[b-pa19u7rwzo] { background: var(--red-deep); }
.col-add-pop[b-pa19u7rwzo] { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .55); padding: 10px; }
.col-add-search[b-pa19u7rwzo] { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.col-add-search:focus[b-pa19u7rwzo] { border-color: var(--red); outline: none; }
.col-add-list[b-pa19u7rwzo] { list-style: none; margin: 8px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.col-add-list li[b-pa19u7rwzo] { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.col-add-list li:hover[b-pa19u7rwzo] { background: var(--surface-2); }
.col-add-list img[b-pa19u7rwzo] { width: 34px; height: 34px; image-rendering: pixelated; flex-shrink: 0; }
.col-add-num[b-pa19u7rwzo] { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.col-add-nm[b-pa19u7rwzo] { font-size: 13px; color: var(--text); text-transform: capitalize; }

.col-stats[b-pa19u7rwzo] { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-dim); }
.col-stats b[b-pa19u7rwzo] { color: var(--text); font-variant-numeric: tabular-nums; }

.col-controls[b-pa19u7rwzo] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.col-controls select[b-pa19u7rwzo], .col-search[b-pa19u7rwzo] { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 11px; font-size: 13px; }
.col-controls select:focus[b-pa19u7rwzo], .col-search:focus[b-pa19u7rwzo] { border-color: var(--red); outline: none; }
.col-search[b-pa19u7rwzo] { flex: 1; min-width: 180px; }
.col-chk[b-pa19u7rwzo] { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.col-clear[b-pa19u7rwzo] { background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }

.col-group[b-pa19u7rwzo] { margin-bottom: 18px; }
.col-group-head[b-pa19u7rwzo] { font-family: var(--font-display); font-size: 15px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.col-group-n[b-pa19u7rwzo] { font-size: 12px; color: var(--text-mute); }

.col-grid[b-pa19u7rwzo] { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }

.col-card[b-pa19u7rwzo] { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg); cursor: pointer; text-align: center; transition: border-color .12s; font-family: inherit; }
.col-card:hover[b-pa19u7rwzo] { border-color: var(--red); }
.col-card.shiny[b-pa19u7rwzo] { box-shadow: inset 0 0 0 1px var(--shiny); }
.col-art[b-pa19u7rwzo] { position: relative; width: 72px; height: 72px; }
.col-spr[b-pa19u7rwzo] { width: 72px; height: 72px; image-rendering: pixelated; }
.col-ball[b-pa19u7rwzo] { position: absolute; bottom: -1px; right: -1px; width: 18px; height: 18px; image-rendering: pixelated; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.col-qty[b-pa19u7rwzo] { position: absolute; bottom: 0; left: 0; font-size: 10px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 6px; padding: 0 4px; font-variant-numeric: tabular-nums; }
.col-spark[b-pa19u7rwzo] { position: absolute; top: -2px; left: -2px; font-size: 12px; }
.col-cname[b-pa19u7rwzo] { font-size: 12.5px; color: var(--text); font-weight: 600; }
.col-csub[b-pa19u7rwzo] { font-size: 11px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (max-width: 640px) {
    .col-grid[b-pa19u7rwzo] { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
/* /Components/Pages/Stats.razor.rz.scp.css */
.st-head[b-vruo6wsws5] { margin-bottom: 14px; }
.st-head h1[b-vruo6wsws5] { margin: 0; font-size: 28px; }
.st-sub[b-vruo6wsws5] { margin: 4px 0 0; color: var(--text-dim); }

.st-filters[b-vruo6wsws5] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.st-filters select[b-vruo6wsws5] { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.st-count[b-vruo6wsws5] { color: var(--text-mute); font-family: var(--font-display); font-size: 13px; letter-spacing: .5px; }

.scan-bar[b-vruo6wsws5] { position: relative; height: 30px; border-radius: 9px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); margin-bottom: 18px; }
.scan-fill[b-vruo6wsws5] { height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red)); transition: width .3s ease; }
.scan-text[b-vruo6wsws5] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; color: var(--text); }

.stat-table[b-vruo6wsws5] { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table thead th[b-vruo6wsws5] {
    position: sticky; top: 57px; z-index: 5;
    background: var(--bg-2); color: var(--text-dim);
    font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap;
}
.stat-table thead th.num[b-vruo6wsws5] { text-align: right; }
.stat-table thead th:hover[b-vruo6wsws5] { color: var(--text); }
.stat-table thead th.sorted[b-vruo6wsws5] { color: var(--red); }
.stat-table tbody td[b-vruo6wsws5] { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--text); }
.stat-table tbody tr:hover[b-vruo6wsws5] { background: var(--surface); }
.stat-table tr.owned .c-name[b-vruo6wsws5] { color: var(--caught); }
.stat-table .c-dex[b-vruo6wsws5] { font-family: var(--font-display); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.stat-table .c-name[b-vruo6wsws5] { text-transform: capitalize; white-space: nowrap; }
.stat-table td img[b-vruo6wsws5] { width: 36px; height: 36px; image-rendering: pixelated; vertical-align: middle; }
.stat-table .num[b-vruo6wsws5] { text-align: right; font-variant-numeric: tabular-nums; }
.st-types[b-vruo6wsws5] { display: flex; gap: 4px; }

/* ---- Per-stat colours (canonical-ish), used for both the header + the in-cell value bars ---- */
.stat-table .s-hp[b-vruo6wsws5]  { --sc: #5cc879; }
.stat-table .s-atk[b-vruo6wsws5] { --sc: #f0913f; }
.stat-table .s-def[b-vruo6wsws5] { --sc: #e6c23f; }
.stat-table .s-spa[b-vruo6wsws5] { --sc: #5f9bf0; }
.stat-table .s-spd[b-vruo6wsws5] { --sc: #46c2a8; }
.stat-table .s-spe[b-vruo6wsws5] { --sc: #ef6aa0; }

/* Coloured column headers (a tinted label + underline). Sorted state still wins (red). */
.stat-table thead th.statcol[b-vruo6wsws5] { color: var(--sc); border-bottom: 2px solid var(--sc); }
.stat-table thead th.statcol.sorted[b-vruo6wsws5] { color: var(--red); border-bottom-color: var(--red); }

/* Each stat cell gets a value bar (base stat scaled to ~200) in its column colour. */
.stat-table tbody td.statcell[b-vruo6wsws5] {
    position: relative;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--sc) 24%, transparent),
        color-mix(in srgb, var(--sc) 24%, transparent)) left center / calc(min(var(--v), 200) / 200 * 100%) 100% no-repeat;
    font-weight: 600;
}

/* BST column — set apart with a divider + a bold red-accent track (scaled to ~720). */
.stat-table th.c-bst[b-vruo6wsws5], .stat-table td.bst[b-vruo6wsws5] { border-left: 1px solid var(--line); }
.stat-table tbody td.num.bst[b-vruo6wsws5] {
    font-weight: 800; color: var(--text);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--red) 20%, transparent),
        color-mix(in srgb, var(--red) 20%, transparent)) left center / calc(min(var(--v), 720) / 720 * 100%) 100% no-repeat;
}

/* Desktop: no wrapper overflow so the sticky header keeps working against the page. */
.st-table-wrap[b-vruo6wsws5] { width: 100%; }

/* Phones: let the wide stat table scroll horizontally instead of overflowing the page,
   and drop the (header-height-dependent, brittle) sticky header. */
@media (max-width: 760px) {
    .st-table-wrap[b-vruo6wsws5] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .stat-table[b-vruo6wsws5] { min-width: 620px; }
    .stat-table thead th[b-vruo6wsws5] { position: static; }
}
/* /Components/Pages/Team.razor.rz.scp.css */
.tm-head[b-jnwldgj4z3] { margin-bottom: 14px; }
.tm-head h1[b-jnwldgj4z3] { margin: 0; font-size: 28px; }
.tm-sub[b-jnwldgj4z3] { margin: 4px 0 0; color: var(--text-dim); }

/* guided empty state (no team yet) */
.tm-empty[b-jnwldgj4z3] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px; min-height: 30vh; margin-top: 18px;
    border: 1px dashed var(--line-soft); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .015); color: var(--text-mute); padding: 30px 20px;
}
.tm-empty-ico[b-jnwldgj4z3] { font-size: 42px; line-height: 1; opacity: .9; }
.tm-empty h2[b-jnwldgj4z3] { margin: 2px 0 0; font-size: 20px; color: var(--text); }
.tm-empty p[b-jnwldgj4z3] { margin: 0; max-width: 440px; }

.tm-add[b-jnwldgj4z3] { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tm-add .search[b-jnwldgj4z3] { position: relative; }
.tm-add .search > input[b-jnwldgj4z3] {
    width: 260px; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 12px; font-size: 14px;
}
.tm-add .search > input:focus[b-jnwldgj4z3] { border-color: var(--red); }
.search-results[b-jnwldgj4z3] {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 5px;
    background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.5);
    max-height: 320px; overflow-y: auto;
}
.search-results li[b-jnwldgj4z3] { display: flex; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.search-results li:hover[b-jnwldgj4z3] { background: rgba(238,90,71,.16); }
.search-results .r-num[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); }
.search-results .r-name[b-jnwldgj4z3] { text-transform: capitalize; color: var(--text); }
.btn[b-jnwldgj4z3] { border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.btn:hover[b-jnwldgj4z3] { background: var(--surface); }
.btn.ghost[b-jnwldgj4z3] { background: transparent; }
.btn.danger[b-jnwldgj4z3] { border-color: rgba(238,90,71,.5); color: var(--red); }
.btn.danger:hover[b-jnwldgj4z3] { background: rgba(238,90,71,.14); }
.tm-saved[b-jnwldgj4z3] { color: var(--caught); font-size: 13px; }
.tm-note[b-jnwldgj4z3] { color: var(--text-dim); font-size: 13px; }
.tm-teambar[b-jnwldgj4z3] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-select[b-jnwldgj4z3] {
    background: var(--surface); color: var(--text); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 8px 10px; font-size: 14px; max-width: 200px;
}
.tm-nameinput[b-jnwldgj4z3] {
    background: var(--surface); color: var(--text); border: 1px solid var(--line-soft);
    border-radius: 8px; padding: 8px 12px; font-size: 14px; width: 180px;
}
.tm-nameinput:focus[b-jnwldgj4z3], .tm-select:focus[b-jnwldgj4z3] { border-color: var(--red); outline: none; }
.tm-gamesel[b-jnwldgj4z3] { display: inline-flex; align-items: center; gap: 7px; }
.tm-gamesel-k[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }

.tm-slots[b-jnwldgj4z3] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.tm-slot[b-jnwldgj4z3] {
    position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
    min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 8px;
}
.tm-slot.empty[b-jnwldgj4z3] { color: var(--text-mute); border-style: dashed; cursor: pointer; font-family: var(--font-body); }
.tm-slot.empty .plus[b-jnwldgj4z3] { font-size: 28px; line-height: 1; }
.tm-slot.empty small[b-jnwldgj4z3] { font-size: 12px; letter-spacing: .5px; }
.tm-slot.empty:hover[b-jnwldgj4z3] { color: var(--text); border-color: var(--red); }
.tm-slot.filled[b-jnwldgj4z3] { cursor: pointer; }
.tm-slot.filled:hover[b-jnwldgj4z3] { border-color: var(--red); }
.tm-slot img[b-jnwldgj4z3] { width: 84px; height: 84px; object-fit: contain; }
.tm-name[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 13px; color: var(--text); text-transform: capitalize; text-align: center; }
.tm-types[b-jnwldgj4z3] { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tm-bst[b-jnwldgj4z3] { font-size: 11px; color: var(--text-mute); font-family: var(--font-display); }
.tm-remove[b-jnwldgj4z3] { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text-mute); cursor: pointer; font-size: 11px; }
.tm-remove:hover[b-jnwldgj4z3] { background: var(--red); color: #fff; border-color: var(--red); }

.tm-cols[b-jnwldgj4z3] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tm-card[b-jnwldgj4z3] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; }
.tm-card h2[b-jnwldgj4z3] { margin: 0 0 4px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.tm-card h2.tm-mt[b-jnwldgj4z3] { margin-top: 22px; }
.tm-hint[b-jnwldgj4z3] { color: var(--text-mute); font-size: 12px; margin: 0 0 12px; }
.cov-count[b-jnwldgj4z3] { color: var(--caught); font-family: var(--font-display); }

.cov-grid[b-jnwldgj4z3] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.cov-row[b-jnwldgj4z3] { display: flex; align-items: center; gap: 8px; }
.cov-row .type-badge[b-jnwldgj4z3] { min-width: 64px; text-align: center; }
.cov-n[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 13px; width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.cov-n.weak[b-jnwldgj4z3] { color: var(--red); }
.cov-n.weak.danger[b-jnwldgj4z3] { background: var(--red); color: #fff; border-radius: 5px; }
.cov-n.res[b-jnwldgj4z3] { color: var(--caught); }
.cov-n.imm[b-jnwldgj4z3] { color: var(--text-mute); }
.cov-legend[b-jnwldgj4z3] { margin-top: 12px; font-size: 12px; color: var(--text-mute); display: flex; gap: 14px; }
.cov-legend .weak[b-jnwldgj4z3] { color: var(--red); } .cov-legend .res[b-jnwldgj4z3] { color: var(--caught); } .cov-legend .imm[b-jnwldgj4z3] { color: var(--text-mute); }

.off-grid[b-jnwldgj4z3] { display: flex; flex-wrap: wrap; gap: 6px; }
.off-dim[b-jnwldgj4z3] { opacity: .28; }

.avg-stats[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 7px; }
.avg-row[b-jnwldgj4z3] { display: grid; grid-template-columns: 64px 36px 1fr; align-items: center; gap: 10px; }
.avg-label[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 12px; color: var(--text-dim); }
.avg-num[b-jnwldgj4z3] { font-variant-numeric: tabular-nums; color: var(--text); font-size: 13px; text-align: right; }
.avg-bar[b-jnwldgj4z3] { height: 8px; background: var(--bg-2); border-radius: 6px; overflow: hidden; }
.avg-fill[b-jnwldgj4z3] { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--red-deep), var(--red)); }
.avg-row.total[b-jnwldgj4z3] { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 3px; }
.avg-row.total .avg-label[b-jnwldgj4z3], .avg-row.total .avg-num[b-jnwldgj4z3] { color: var(--text); font-weight: 700; }

.tm-suggest[b-jnwldgj4z3] { margin-top: 16px; }
.sug-block[b-jnwldgj4z3] { margin-bottom: 16px; }
.sug-block:last-child[b-jnwldgj4z3] { margin-bottom: 0; }
.sug-title[b-jnwldgj4z3] { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.sug-rec[b-jnwldgj4z3] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sug-lead[b-jnwldgj4z3] { font-size: 13px; color: var(--text-mute); }
.sug-pill[b-jnwldgj4z3] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 10px 3px 4px; }

/* ---- Showdown import / export modal ---- */
.io-modal[b-jnwldgj4z3] {
    width: min(560px, 94vw); max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
    background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
    border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); padding: 16px;
}
.io-head[b-jnwldgj4z3] { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 15px; }
.io-hint[b-jnwldgj4z3] { font-size: 13px; color: var(--text-mute); margin: 0; }
.io-text[b-jnwldgj4z3] {
    width: 100%; min-height: 280px; resize: vertical; box-sizing: border-box;
    background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 10px;
    padding: 12px; font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 13px; line-height: 1.5;
}
.io-text:focus[b-jnwldgj4z3] { border-color: var(--red); outline: none; }
.io-actions[b-jnwldgj4z3] { display: flex; align-items: center; gap: 10px; }
.io-msg[b-jnwldgj4z3] { font-size: 13px; color: var(--shiny-soft); }

/* ---- Picker modal ---- */
.picker-overlay[b-jnwldgj4z3] {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center;
    padding: 8vh 20px 20px; background: rgba(8, 9, 13, 0.72); backdrop-filter: blur(6px);
}
.picker[b-jnwldgj4z3] {
    width: min(560px, 94vw); max-height: 76vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
    border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); overflow: hidden;
}
.picker-head[b-jnwldgj4z3] { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.picker-search[b-jnwldgj4z3] { flex: 1; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px 13px; font-size: 15px; }
.picker-search:focus[b-jnwldgj4z3] { border-color: var(--red); }
.picker-close[b-jnwldgj4z3] { width: 38px; border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim); border-radius: 9px; cursor: pointer; }
.picker-close:hover[b-jnwldgj4z3] { background: var(--red); color: #fff; border-color: var(--red); }
.picker-results[b-jnwldgj4z3] { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.picker-results .muted[b-jnwldgj4z3] { color: var(--text-mute); padding: 16px; text-align: center; }
.picker-card[b-jnwldgj4z3] {
    display: grid; grid-template-columns: 48px 50px 1fr; align-items: center; gap: 10px;
    background: none; border: 1px solid transparent; border-radius: 10px; padding: 4px 10px; cursor: pointer; text-align: left;
}
.picker-card:hover[b-jnwldgj4z3] { background: var(--surface); border-color: var(--line-soft); }
.picker-card img[b-jnwldgj4z3] { width: 44px; height: 44px; image-rendering: pixelated; }
.pc-num[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.pc-name[b-jnwldgj4z3] { font-size: 14px; color: var(--text); text-transform: capitalize; }
.pc-types[b-jnwldgj4z3] { display: flex; gap: 5px; }

/* ---- Selected slot + per-member editor ---- */
.tm-slot.sel[b-jnwldgj4z3] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.tm-tera[b-jnwldgj4z3] { font-size: 10px; color: var(--text-mute); font-family: var(--font-display); display: flex; align-items: center; gap: 4px; }
.tm-tera .type-badge[b-jnwldgj4z3] { font-size: 9px; padding: 1px 6px; }

.tm-editor[b-jnwldgj4z3] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; margin-bottom: 24px; }
.ed-head[b-jnwldgj4z3] { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ed-img[b-jnwldgj4z3] { width: 64px; height: 64px; object-fit: contain; }
.ed-id[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 4px; }
.ed-name[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.ed-types[b-jnwldgj4z3] { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ed-tag[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.ed-tag.mega[b-jnwldgj4z3] { background: rgba(138, 109, 255, .2); color: #b9a7ff; }
.ed-tag.gmax[b-jnwldgj4z3] { background: rgba(238, 90, 71, .18); color: var(--red-soft); }
.ed-suggest[b-jnwldgj4z3] { margin-left: auto; text-align: right; }
.ed-role[b-jnwldgj4z3] { font-size: 12px; color: var(--text-dim); font-family: var(--font-display); }

.ed-grid[b-jnwldgj4z3] { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 18px; }
.ed-col[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 9px; }
.ed-col-h[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-lv[b-jnwldgj4z3] { color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.ed-field[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.ed-field input[b-jnwldgj4z3], .ed-field select[b-jnwldgj4z3], .ed-move[b-jnwldgj4z3] { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: var(--font-body); }
.ed-field input:focus[b-jnwldgj4z3], .ed-field select:focus[b-jnwldgj4z3], .ed-move:focus[b-jnwldgj4z3] { border-color: var(--red); outline: none; }
.ed-check[b-jnwldgj4z3] { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); cursor: pointer; text-transform: none; letter-spacing: 0; }
.ed-mini[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.ed-mini:hover[b-jnwldgj4z3] { color: var(--text); border-color: var(--red); }
.ed-move[b-jnwldgj4z3] { width: 100%; }

.ed-stats[b-jnwldgj4z3] { gap: 6px; }
.stat-line[b-jnwldgj4z3] { display: grid; grid-template-columns: 34px 28px 40px 1fr 44px 50px; align-items: center; gap: 7px; }
.sl-label[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 11px; color: var(--text-dim); }
.sl-base[b-jnwldgj4z3] { font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; text-align: right; }
.sl-final[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.sl-final.up[b-jnwldgj4z3] { color: #ff8a6e; }
.sl-final.down[b-jnwldgj4z3] { color: #6db3ff; }
.sl-final.item[b-jnwldgj4z3] { color: #b9a7ff; font-weight: 700; }
.item-note[b-jnwldgj4z3] { font-size: 11px; color: #b9a7ff; font-family: var(--font-display); margin-top: 8px; }
.sl-bar[b-jnwldgj4z3] { height: 6px; background: var(--bg-2); border-radius: 5px; overflow: hidden; }
.sl-fill[b-jnwldgj4z3] { height: 100%; border-radius: 5px; }
.sl-fill.s-hp[b-jnwldgj4z3] { background: #5cc879; } .sl-fill.s-atk[b-jnwldgj4z3] { background: #f0913f; } .sl-fill.s-def[b-jnwldgj4z3] { background: #e6c23f; }
.sl-fill.s-spa[b-jnwldgj4z3] { background: #5f9bf0; } .sl-fill.s-spd[b-jnwldgj4z3] { background: #46c2a8; } .sl-fill.s-spe[b-jnwldgj4z3] { background: #ef6aa0; }
.sl-iv[b-jnwldgj4z3], .sl-ev[b-jnwldgj4z3] { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 4px; font-size: 12px; width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; text-align: center; }
.sl-iv:focus[b-jnwldgj4z3], .sl-ev:focus[b-jnwldgj4z3] { border-color: var(--red); outline: none; }
.ev-foot[b-jnwldgj4z3] { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ev-total[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); }
.ev-total.over[b-jnwldgj4z3] { color: var(--red); }

/* ---- Member config modal ---- */
.cfg-overlay[b-jnwldgj4z3] { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px 24px; background: rgba(8, 9, 13, .72); backdrop-filter: blur(6px); overflow-y: auto; }
.cfg[b-jnwldgj4z3] { position: relative; width: min(840px, 96vw); background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); padding: 18px 20px 20px; }
.cfg-x[b-jnwldgj4z3] { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim); cursor: pointer; z-index: 2; }
.cfg-x:hover[b-jnwldgj4z3] { background: var(--red); color: #fff; border-color: var(--red); }
.cfg-head[b-jnwldgj4z3] { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; padding-right: 36px; }
.cfg-img[b-jnwldgj4z3] { width: 72px; height: 72px; object-fit: contain; }
.cfg-id[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 5px; }
.cfg-name[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 20px; font-weight: 700; text-transform: capitalize; color: var(--text); }
.cfg-types[b-jnwldgj4z3] { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ed-tag.tera[b-jnwldgj4z3] { background: rgba(245, 197, 24, .18); color: var(--shiny-soft); }
.ed-tag.warn[b-jnwldgj4z3] { background: rgba(245, 197, 24, .18); color: var(--shiny-soft); }
.cfg-role[b-jnwldgj4z3] { margin-left: auto; font-family: var(--font-display); font-size: 12px; color: var(--text-dim); }

.cfg-body[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 14px; }
.cfg-loadout[b-jnwldgj4z3] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; }
.lo-btn[b-jnwldgj4z3] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 12px; cursor: pointer; text-align: left; min-height: 48px; }
.lo-btn:hover[b-jnwldgj4z3] { border-color: var(--red); }
.lo-k[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.lo-v[b-jnwldgj4z3] { font-size: 14px; color: var(--text); }
.lo-ico[b-jnwldgj4z3] { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; image-rendering: pixelated; }
.lo-check[b-jnwldgj4z3] { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); cursor: pointer; white-space: nowrap; }

.cfg-section[b-jnwldgj4z3] { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.cfg-sec-h[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cfg-lv[b-jnwldgj4z3] { color: var(--text-dim); text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 6px; }
.lv-in[b-jnwldgj4z3] { width: 56px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-soft); border-radius: 7px; padding: 4px 6px; font-size: 13px; }

.cfg-moves[b-jnwldgj4z3] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv-btn[b-jnwldgj4z3] { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 10px; cursor: pointer; text-align: left; min-height: 38px; }
.mv-btn:hover[b-jnwldgj4z3] { border-color: var(--red); }
.mv-btn.empty[b-jnwldgj4z3] { color: var(--text-mute); border-style: dashed; }
.mv-btn.illegal[b-jnwldgj4z3] { border-color: rgba(245, 197, 24, .55); background: rgba(245, 197, 24, .08); }
.mv-warn[b-jnwldgj4z3] { color: var(--shiny-soft); font-size: 13px; line-height: 1; }
.mv-name[b-jnwldgj4z3] { font-size: 13px; color: var(--text); text-transform: capitalize; flex: 1; }
.mv-pow[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mv-empty[b-jnwldgj4z3] { font-size: 13px; }
.move-empty[b-jnwldgj4z3] { color: var(--text-mute); padding: 14px; text-align: center; font-size: 13px; }

.stat-head[b-jnwldgj4z3] { display: grid; grid-template-columns: 34px 28px 40px 1fr 44px 50px; gap: 7px; font-family: var(--font-display); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); margin-bottom: 5px; }
.stat-head span[b-jnwldgj4z3] { text-align: center; }

/* ---- Sub-pickers (move / nature / item / tera) ---- */
.sub-overlay[b-jnwldgj4z3] { position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: rgba(8, 9, 13, .55); }
.sub[b-jnwldgj4z3] { width: min(440px, 94vw); max-height: 76vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); overflow: hidden; }
.sub.wide[b-jnwldgj4z3] { width: min(640px, 95vw); }
.sub-h[b-jnwldgj4z3] { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 13px; color: var(--text); }
.sub-h .picker-close[b-jnwldgj4z3] { margin-left: auto; width: 30px; }
.sub-h .ed-mini[b-jnwldgj4z3] { margin-left: auto; }
.sub-body[b-jnwldgj4z3] { overflow-y: auto; padding: 10px; }
.sub-note[b-jnwldgj4z3] { padding: 8px 14px; font-size: 11px; color: var(--text-mute); border-bottom: 1px solid var(--line); background: rgba(245, 197, 24, .05); }
.sub-loading[b-jnwldgj4z3] { font-size: 11px; color: var(--text-mute); margin-left: 10px; }
.pc-on[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--caught); margin-left: 8px; }
.picker-card.on-team[b-jnwldgj4z3] { opacity: .55; cursor: default; }
.picker-card.on-team:hover[b-jnwldgj4z3] { background: none; border-color: transparent; }

.ability-list[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 5px; }
.ability-card[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 3px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 11px; cursor: pointer; text-align: left; }
.ability-card:hover[b-jnwldgj4z3] { border-color: var(--red); }
.ability-card.on[b-jnwldgj4z3] { border-color: var(--red); background: rgba(238, 90, 71, .12); }
.ability-name[b-jnwldgj4z3] { font-size: 14px; color: var(--text); text-transform: capitalize; }
.ability-eff[b-jnwldgj4z3] { font-size: 11px; color: var(--text-mute); line-height: 1.35; }
.ha-tag[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 8px; letter-spacing: .5px; background: var(--ha); color: #fff; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

.nat-grid[b-jnwldgj4z3] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nat-card[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left; }
.nat-card:hover[b-jnwldgj4z3] { border-color: var(--red); }
.nat-card.on[b-jnwldgj4z3] { border-color: var(--red); background: rgba(238, 90, 71, .12); }
.nat-name[b-jnwldgj4z3] { font-size: 13px; color: var(--text); }
.nat-eff[b-jnwldgj4z3] { font-size: 10px; color: var(--text-mute); font-family: var(--font-display); }

.tera-grid[b-jnwldgj4z3] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tera-card[b-jnwldgj4z3] { display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 4px; cursor: pointer; color: var(--text-dim); font-size: 13px; }
.tera-card:hover[b-jnwldgj4z3] { border-color: var(--red); }
.tera-card.on[b-jnwldgj4z3] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }

.item-list[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 4px; }
.item-card[b-jnwldgj4z3] { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 9px; padding: 6px 10px; cursor: pointer; text-align: left; }
.item-card:hover[b-jnwldgj4z3] { background: var(--surface); border-color: var(--line-soft); }
.item-card.on[b-jnwldgj4z3] { background: rgba(238, 90, 71, .12); border-color: var(--red); }
.item-ico[b-jnwldgj4z3] { width: 30px; height: 30px; image-rendering: pixelated; flex: none; }
.item-no[b-jnwldgj4z3] { width: 30px; text-align: center; color: var(--text-mute); flex: none; }
.item-info[b-jnwldgj4z3] { display: flex; flex-direction: column; }
.item-name[b-jnwldgj4z3] { font-size: 13px; color: var(--text); }
.item-tag[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 9px; text-transform: uppercase; color: #b9a7ff; margin-left: 5px; }
.item-desc[b-jnwldgj4z3] { font-size: 11px; color: var(--text-mute); }

.move-list[b-jnwldgj4z3] { display: flex; flex-direction: column; gap: 3px; }
.move-card[b-jnwldgj4z3] { display: grid; grid-template-columns: 70px 1fr auto 14px 38px 44px 46px; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; cursor: pointer; text-align: left; }
.move-card:hover[b-jnwldgj4z3] { background: var(--surface); border-color: var(--line-soft); }
.move-card.on[b-jnwldgj4z3] { background: rgba(238, 90, 71, .12); border-color: var(--red); }
.move-card .type-badge[b-jnwldgj4z3] { min-width: 64px; text-align: center; }
.mv-load[b-jnwldgj4z3] { background: var(--bg-2); color: var(--text-mute); }
.move-name[b-jnwldgj4z3] { font-size: 13px; color: var(--text); text-transform: capitalize; }
.move-src[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); }
.move-class[b-jnwldgj4z3] { width: 12px; height: 12px; border-radius: 3px; justify-self: center; }
.mc-physical[b-jnwldgj4z3] { background: #f0843c; } .mc-special[b-jnwldgj4z3] { background: #6a8ff0; } .mc-status[b-jnwldgj4z3] { background: #8a8d99; }
.move-stat[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.stab-tag[b-jnwldgj4z3] { font-family: var(--font-display); font-size: 8px; letter-spacing: .5px; background: var(--shiny); color: #2a2300; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.stab-pow[b-jnwldgj4z3] { color: var(--shiny); font-weight: 700; }
.move-card.stab[b-jnwldgj4z3] { background: rgba(245, 197, 24, .06); }
.move-card.stab.on[b-jnwldgj4z3] { background: rgba(238, 90, 71, .12); }

@media (max-width: 760px) {
    .tm-slots[b-jnwldgj4z3] { grid-template-columns: repeat(3, 1fr); }
    .tm-cols[b-jnwldgj4z3] { grid-template-columns: 1fr; }
    .cfg-loadout[b-jnwldgj4z3] { grid-template-columns: 1fr 1fr; }
    .cfg-moves[b-jnwldgj4z3] { grid-template-columns: 1fr; }
    .move-card[b-jnwldgj4z3] { grid-template-columns: 64px 1fr auto; }
    .move-card .move-class[b-jnwldgj4z3], .move-card .move-stat[b-jnwldgj4z3] { display: none; }
}
/* /Components/Pages/TypeCalculator.razor.rz.scp.css */
.tc-head[b-uwesc4pq68] { margin-bottom: 16px; }
.tc-head h1[b-uwesc4pq68] { margin: 0; font-size: 28px; }
.tc-sub[b-uwesc4pq68] { margin: 6px 0 0; color: var(--text-dim); max-width: 720px; }
.tc-sub strong[b-uwesc4pq68] { color: var(--text); }

/* preset-from-a-Pokémon picker */
.tc-preset[b-uwesc4pq68] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tc-search[b-uwesc4pq68] { position: relative; flex: 0 1 320px; }
.tc-search > input[b-uwesc4pq68] {
    width: 100%; background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 13px;
    font-family: var(--font-body); font-size: 14px;
}
.tc-search > input:focus[b-uwesc4pq68] { border-color: var(--red); outline: none; }
.tc-results[b-uwesc4pq68] {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    list-style: none; margin: 0; padding: 5px;
    background: var(--surface-2); border: 1px solid var(--line-soft);
    border-radius: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    max-height: 320px; overflow-y: auto;
}
.tc-results li[b-uwesc4pq68] {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 9px; border-radius: 7px; cursor: pointer;
}
.tc-results li:hover[b-uwesc4pq68] { background: rgba(238, 90, 71, 0.16); }
.tc-results img[b-uwesc4pq68] { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.tc-results .r-num[b-uwesc4pq68] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.tc-results .r-name[b-uwesc4pq68] { text-transform: capitalize; color: var(--text); }
.tc-loaded[b-uwesc4pq68] {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-size: 13px; color: var(--text-dim);
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 6px 4px 4px;
}
.tc-loaded img[b-uwesc4pq68] { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.tc-loaded-x[b-uwesc4pq68] {
    background: transparent; border: none; color: var(--text-mute); cursor: pointer;
    font-size: 12px; padding: 2px 4px; border-radius: 6px;
}
.tc-loaded-x:hover[b-uwesc4pq68] { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* mode toggle */
.tc-modes[b-uwesc4pq68] { display: flex; gap: 8px; margin-bottom: 14px; }
.tc-mode[b-uwesc4pq68] {
    font-family: var(--font-display); font-size: 14px; letter-spacing: .5px;
    color: var(--text-dim); background: var(--surface);
    border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 18px; cursor: pointer;
}
.tc-mode:hover[b-uwesc4pq68] { color: var(--text); }
.tc-mode.on[b-uwesc4pq68] { color: #fff; background: linear-gradient(180deg, var(--red), var(--red-deep)); border-color: transparent; }

/* type picker */
.tc-pick[b-uwesc4pq68] {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 14px; margin-bottom: 18px;
}
.tc-pick-top[b-uwesc4pq68] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tc-pick-hint[b-uwesc4pq68] { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); }
.tc-clear[b-uwesc4pq68] { background: transparent; border: 1px solid var(--line-soft); color: var(--text-dim); border-radius: 8px; padding: 5px 11px; cursor: pointer; font-size: 12px; }
.tc-clear:hover[b-uwesc4pq68] { color: var(--text); border-color: var(--red); }

.tc-types[b-uwesc4pq68] { display: flex; flex-wrap: wrap; gap: 7px; }
.tc-types.pick[b-uwesc4pq68] { gap: 8px; }
.tc-chip[b-uwesc4pq68] {
    appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
    opacity: .5; transition: opacity .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tc-chip:hover[b-uwesc4pq68] { opacity: .85; }
.tc-chip.sel[b-uwesc4pq68] {
    opacity: 1; transform: translateY(-1px);
    box-shadow: 0 0 0 2px var(--text), 0 3px 12px rgba(0, 0, 0, .45);
}

/* empty state */
.tc-empty[b-uwesc4pq68] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; color: var(--text-mute); min-height: 32vh;
    border: 1px dashed var(--line-soft); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .015);
}
.tc-empty-ico[b-uwesc4pq68] { font-size: 40px; opacity: .9; }

/* results */
.tc-result[b-uwesc4pq68] { display: flex; flex-direction: column; gap: 10px; }
.tc-bucket[b-uwesc4pq68] {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-left-width: 3px; border-radius: 10px; padding: 11px 14px;
}
.tc-bucket.b-weak[b-uwesc4pq68] { border-left-color: var(--red); }
.tc-bucket.b-resist[b-uwesc4pq68] { border-left-color: var(--caught); }
.tc-bucket.b-immune[b-uwesc4pq68] { border-left-color: var(--text-mute); }
.tc-bucket.b-neutral[b-uwesc4pq68] { border-left-color: var(--line); }

.tc-bucket-head[b-uwesc4pq68] { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tc-mult[b-uwesc4pq68] {
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    border-radius: 7px; padding: 2px 9px; min-width: 34px; text-align: center;
}
.tc-mult.m-weak[b-uwesc4pq68] { background: rgba(238, 90, 71, .18); color: #ff9d8f; }
.tc-mult.m-resist[b-uwesc4pq68] { background: rgba(62, 207, 142, .16); color: var(--caught); }
.tc-mult.m-immune[b-uwesc4pq68] { background: rgba(107, 112, 136, .22); color: var(--text-dim); }
.tc-mult.m-neutral[b-uwesc4pq68] { background: var(--bg-2); color: var(--text-mute); }
.tc-bucket-label[b-uwesc4pq68] { font-family: var(--font-display); font-size: 14px; color: var(--text); }
.tc-bucket-n[b-uwesc4pq68] { margin-left: auto; font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* /Components/PokemonModal.razor.rz.scp.css */
.modal-overlay[b-9hx71e3b55] {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(8, 9, 13, 0.72);
    backdrop-filter: blur(6px);
    animation: fade-in-b-9hx71e3b55 .18s ease;
}
@keyframes fade-in-b-9hx71e3b55 { from { opacity: 0; } to { opacity: 1; } }

.modal-card[b-9hx71e3b55] {
    position: relative;
    width: min(1000px, 94vw);
    height: min(86vh, 780px);   /* fixed — tabs scroll internally, card never resizes */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    animation: pop-in-b-9hx71e3b55 .2s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop-in-b-9hx71e3b55 { from { transform: scale(.96) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close[b-9hx71e3b55] {
    position: absolute; top: 14px; right: 16px; z-index: 3;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim);
    font-size: 15px; cursor: pointer;
}
.modal-close:hover[b-9hx71e3b55] { background: var(--red); color: #fff; border-color: var(--red); }

.modal-loading[b-9hx71e3b55] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; color: var(--text-dim); }
.pokeball.spin[b-9hx71e3b55] { animation: spin-b-9hx71e3b55 0.9s linear infinite; }
@keyframes spin-b-9hx71e3b55 { to { transform: rotate(360deg); } }

.modal-grid[b-9hx71e3b55] { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 4px; }

/* ---- Hero ---- */
.hero[b-9hx71e3b55] {
    position: relative;
    min-height: 0; overflow: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 40px 24px 28px;
    background:
        radial-gradient(360px 360px at 50% 30%, rgba(238, 90, 71, 0.14), transparent 70%),
        var(--bg-2);
    border-right: 1px solid var(--line);
    border-radius: 20px 0 0 20px;
}
.hero.legendary[b-9hx71e3b55] { background: radial-gradient(360px 360px at 50% 30%, rgba(245, 197, 24, 0.16), transparent 70%), var(--bg-2); }
.hero.mythical[b-9hx71e3b55]  { background: radial-gradient(360px 360px at 50% 30%, rgba(138, 109, 255, 0.18), transparent 70%), var(--bg-2); }
.hero-num[b-9hx71e3b55] { font-family: var(--font-display); font-size: 13px; color: var(--text-mute); letter-spacing: 1px; }
.hero img[b-9hx71e3b55] { width: 230px; height: 230px; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.5)); }

.hero-shiny[b-9hx71e3b55] {
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-dim);
    padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.hero-shiny.on[b-9hx71e3b55] { background: rgba(245, 197, 24, 0.18); border-color: var(--shiny); color: var(--shiny-soft); }

.hero-buttons[b-9hx71e3b55] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero-style[b-9hx71e3b55] {
    background: var(--surface); color: var(--text-dim);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px;
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; cursor: pointer;
}
.hero-style:focus[b-9hx71e3b55] { border-color: var(--red); }
.catch-row[b-9hx71e3b55] { display: flex; gap: 8px; margin-top: 4px; }
.tick[b-9hx71e3b55] {
    font-family: var(--font-display); font-size: 12px; letter-spacing: .5px;
    border: 1px solid var(--line-soft); background: var(--surface); color: var(--text-mute);
    padding: 7px 12px; border-radius: 9px; cursor: pointer;
}
.tick.on-c[b-9hx71e3b55] { background: var(--caught); color: #06281a; border-color: var(--caught); }
.tick.on-s[b-9hx71e3b55] { background: var(--shiny); color: #3a2d00; border-color: var(--shiny); }
.tick.on-h[b-9hx71e3b55] { background: var(--ha); color: #fff; border-color: var(--ha); }

/* ---- Info ---- */
.info[b-9hx71e3b55] { min-height: 0; display: flex; flex-direction: column; padding: 34px 32px 14px; }
.info-head h2[b-9hx71e3b55] { margin: 0; font-size: 30px; text-transform: capitalize; letter-spacing: .5px; }
.genus[b-9hx71e3b55] { margin: 4px 0 12px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.rarity[b-9hx71e3b55] { font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.rarity.leg[b-9hx71e3b55] { background: rgba(245, 197, 24, 0.2); color: var(--shiny); }
.rarity.myth[b-9hx71e3b55] { background: rgba(138, 109, 255, 0.2); color: var(--ha); }

.types[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 8px; }
/* .type-badge base + .t-* colour classes live in wwwroot/app.css (global, non-scoped)
   so they apply to header badges, matchup badges and the selected-move badge alike. */

/* ---- Tabs ---- */
.tabs[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 4px; border-bottom: 1px solid var(--line); }
.tab[b-9hx71e3b55] {
    font-family: var(--font-display); font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
    background: none; border: none; color: var(--text-mute); cursor: pointer;
    padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover[b-9hx71e3b55] { color: var(--text-dim); }
.tab.active[b-9hx71e3b55] { color: var(--red); border-bottom-color: var(--red); }
.tab-body[b-9hx71e3b55] { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 16px 0; }

.flavor[b-9hx71e3b55] { color: var(--text); line-height: 1.55; margin: 0 0 14px; font-size: 15px; }
.flavor-pick[b-9hx71e3b55] { margin-bottom: 8px; }
.flavor-pick select[b-9hx71e3b55] { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 7px; padding: 5px 9px; font-size: 13px; }

/* Forms switcher */
.forms-switch[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.form-chip[b-9hx71e3b55] { font-size: 12px; text-transform: capitalize; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text-dim); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.form-chip:hover[b-9hx71e3b55] { color: var(--text); }
.form-chip.active[b-9hx71e3b55] { background: rgba(238,90,71,.16); border-color: var(--red); color: var(--text); cursor: default; }

.hint-sm[b-9hx71e3b55] { font-family: var(--font-body); font-size: 11px; color: var(--text-mute); text-transform: none; letter-spacing: 0; font-weight: 400; }
.ability[b-9hx71e3b55] { cursor: pointer; }
.ability.open[b-9hx71e3b55] { border-color: var(--red); }
.ability-effect[b-9hx71e3b55] { font-size: 13px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.5; }

/* Clickable moves */
.move-clk[b-9hx71e3b55] { cursor: pointer; }
.move-table tr.move-clk:hover td[b-9hx71e3b55] { background: rgba(238,90,71,.08); }
.move-table tr.move-clk.sel td[b-9hx71e3b55] { background: rgba(238,90,71,.14); color: var(--text); }
.chip.move-clk:hover[b-9hx71e3b55] { border-color: var(--red); color: var(--text); }
.chip.move-clk.sel[b-9hx71e3b55] { background: rgba(238,90,71,.16); border-color: var(--red); color: var(--text); }

/* Selected-move detail panel */
.move-hint[b-9hx71e3b55] { color: var(--text-mute); font-size: 13px; margin: 0 0 14px; padding: 11px 14px; background: var(--surface); border: 1px dashed var(--line-soft); border-radius: 10px; }
.move-detail[b-9hx71e3b55] {
    display: flex; flex-direction: column; gap: 12px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-soft); border-left: 3px solid var(--red);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.move-detail.mt-physical[b-9hx71e3b55] { border-left-color: var(--red); }
.move-detail.mt-special[b-9hx71e3b55]  { border-left-color: var(--ha); }
.move-detail.mt-status[b-9hx71e3b55]   { border-left-color: var(--text-mute); }
.md-loading[b-9hx71e3b55] { color: var(--text-mute); font-size: 14px; }
.md-head[b-9hx71e3b55] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.md-name[b-9hx71e3b55] { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.md-class[b-9hx71e3b55] { font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); background: var(--bg-2); border-radius: 6px; padding: 2px 9px; }
.md-stats[b-9hx71e3b55] { display: flex; gap: 10px; flex-wrap: wrap; }
.md-stat[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 2px; min-width: 70px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; }
.md-stat .md-k[b-9hx71e3b55] { font-family: var(--font-display); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-mute); }
.md-stat .md-v[b-9hx71e3b55] { font-variant-numeric: tabular-nums; font-size: 16px; color: var(--text); }
.cap[b-9hx71e3b55] { text-transform: capitalize; }

/* ---- Key/value grids (training, breeding) ---- */
.kv-grid[b-9hx71e3b55] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 22px; }
.kv[b-9hx71e3b55] { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv .label[b-9hx71e3b55] { font-family: var(--font-display); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.kv .val[b-9hx71e3b55] { color: var(--text); font-size: 14px; text-align: right; }
.catch-tag[b-9hx71e3b55] { font-family: var(--font-display); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; margin-left: 6px; }
.catch-tag.c-ve[b-9hx71e3b55] { background: rgba(62,207,142,.2); color: var(--caught); }
.catch-tag.c-e[b-9hx71e3b55]  { background: rgba(62,207,142,.16); color: var(--caught); }
.catch-tag.c-m[b-9hx71e3b55]  { background: rgba(245,197,24,.18); color: var(--shiny); }
.catch-tag.c-h[b-9hx71e3b55]  { background: rgba(238,90,71,.16); color: var(--red); }
.catch-tag.c-vh[b-9hx71e3b55] { background: rgba(238,90,71,.24); color: #ff8e7e; }

.stat.total[b-9hx71e3b55] { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.stat.total .stat-name[b-9hx71e3b55], .stat.total .stat-num[b-9hx71e3b55] { color: var(--text); font-weight: 700; }

/* ---- Moves ---- */
.moves-wrap[b-9hx71e3b55] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.move-col h3[b-9hx71e3b55] {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim);
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.move-col h3.mt[b-9hx71e3b55] { margin-top: 22px; }
.count[b-9hx71e3b55] { font-family: var(--font-display); font-size: 11px; color: var(--text-mute); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 1px 9px; margin-left: auto; }
.move-table[b-9hx71e3b55] { width: 100%; border-collapse: separate; border-spacing: 0; }
.move-table td[b-9hx71e3b55] { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13.5px; }
.move-table tr:last-child td[b-9hx71e3b55] { border-bottom: none; }
.move-table td.mv-name[b-9hx71e3b55] { text-transform: capitalize; }
.move-table td.lvl[b-9hx71e3b55] {
    width: 46px; white-space: nowrap; text-align: center;
    font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12px;
    color: var(--text-dim); background: var(--surface); border-right: 1px solid var(--line);
}
.move-table tr:first-child td.lvl[b-9hx71e3b55] { border-top-left-radius: 7px; }
.move-table tr:last-child td.lvl[b-9hx71e3b55] { border-bottom-left-radius: 7px; }
.chips[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 7px; }
.chip[b-9hx71e3b55] { background: var(--surface); border: 1px solid var(--line-soft); color: var(--text-dim); font-size: 12.5px; padding: 5px 11px; border-radius: 999px; text-transform: capitalize; transition: border-color .12s, color .12s; }

/* ---- Locations by game ---- */
.loc-games[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 16px; }
.loc-gens[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 18px; }
.loc-gen-h[b-9hx71e3b55] {
    margin: 0 0 10px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--red); border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.loc-game[b-9hx71e3b55] { margin-bottom: 10px; }
.loc-game-name[b-9hx71e3b55] {
    display: block; margin-bottom: 6px;
    font-family: var(--font-display); font-size: 13px; color: var(--text); text-transform: capitalize; letter-spacing: .3px;
}
.loc-note[b-9hx71e3b55] { margin-top: 16px; font-size: 11.5px; color: var(--text-mute); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }

/* ---- Matchups ---- */
.matchups[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 10px; }
.matchup-row[b-9hx71e3b55] {
    display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 16px;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-left: 3px solid var(--line-soft);
    border-radius: 10px; padding: 12px 14px;
}
.matchup-row.mr-weak[b-9hx71e3b55]   { border-left-color: var(--red); }
.matchup-row.mr-resist[b-9hx71e3b55] { border-left-color: var(--caught); }
.matchup-row.mr-immune[b-9hx71e3b55] { border-left-color: var(--text-mute); }
.matchup-label[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 4px; }
.matchup-label .mr-name[b-9hx71e3b55] { font-family: var(--font-display); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.matchup-label .mr-mult[b-9hx71e3b55] {
    align-self: flex-start;
    font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700;
    padding: 1px 9px; border-radius: 999px;
}
.mr-mult.mm-weak[b-9hx71e3b55]   { background: rgba(238,90,71,.16); color: #ff8e7e; }
.mr-mult.mm-resist[b-9hx71e3b55] { background: rgba(62,207,142,.16); color: var(--caught); }
.mr-mult.mm-immune[b-9hx71e3b55] { background: var(--bg-2); color: var(--text-mute); }
.matchup-row .types[b-9hx71e3b55] { gap: 7px; }

/* ---- Evolution ---- */
.evo-list[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 10px; }
.evo-step[b-9hx71e3b55] { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 14px; }
.evo-mon[b-9hx71e3b55] { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--text); }
.evo-mon img[b-9hx71e3b55] { width: 64px; height: 64px; image-rendering: pixelated; }
.evo-mon span[b-9hx71e3b55] { font-size: 12px; text-transform: capitalize; }
.evo-mon:hover[b-9hx71e3b55] { color: var(--red); }
.evo-mid[b-9hx71e3b55] { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.evo-arrow[b-9hx71e3b55] { color: var(--red); font-size: 20px; }
.evo-trigger[b-9hx71e3b55] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); background: var(--bg-2); border-radius: 6px; padding: 3px 9px; }

.meta-row[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 26px; margin: 16px 0 8px; }
.meta[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 2px; }
.meta .label[b-9hx71e3b55] { font-family: var(--font-display); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); }
.meta .val[b-9hx71e3b55] { color: var(--text); font-size: 15px; text-transform: capitalize; }

.block[b-9hx71e3b55] { margin-top: 22px; }
.block h3[b-9hx71e3b55] { margin: 0 0 10px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }

.abilities[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 8px; }
.ability[b-9hx71e3b55] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--line-soft);
    padding: 6px 12px; border-radius: 9px; color: var(--text); font-size: 14px;
}
.nature-select[b-9hx71e3b55] { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 11px; font-size: 14px; }
.nature-select:focus[b-9hx71e3b55] { border-color: var(--red); }

.spec-row[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flag-btn[b-9hx71e3b55] {
    font-family: var(--font-display); font-size: 13px; cursor: pointer;
    background: var(--surface); color: var(--text-dim);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 12px;
    transition: color .12s, border-color .12s, background .12s;
}
.flag-btn:hover[b-9hx71e3b55] { color: var(--text); }
.flag-btn.want.on[b-9hx71e3b55] { background: rgba(245, 197, 24, .16); border-color: var(--shiny); color: var(--shiny-soft); }
.flag-btn.spare.on[b-9hx71e3b55] { background: rgba(80, 200, 120, .16); border-color: #5fd17f; color: #8be6a6; }
.spec-nick[b-9hx71e3b55], .spec-note[b-9hx71e3b55] {
    width: 100%; box-sizing: border-box; margin-top: 8px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 11px; font-size: 14px;
    font-family: inherit;
}
.spec-nick:focus[b-9hx71e3b55], .spec-note:focus[b-9hx71e3b55] { border-color: var(--red); outline: none; }
.spec-note[b-9hx71e3b55] { resize: vertical; }

.spec-hint[b-9hx71e3b55] { font-size: 12.5px; margin: 10px 0 0; }
.linklike[b-9hx71e3b55] { background: none; border: none; color: var(--red); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Specimens tab */
.spec-sum[b-9hx71e3b55] { font-family: var(--font-display); font-size: 12px; color: var(--text-mute); font-weight: 500; margin-left: 8px; }
.spec-list[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 14px; }
.spec-item[b-9hx71e3b55] { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 9px; padding: 8px 10px; }
.spec-item.shiny[b-9hx71e3b55] { border-color: rgba(245,197,24,.4); }
.spec-qty[b-9hx71e3b55] { font-family: var(--font-display); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-width: 34px; }
.spec-tags[b-9hx71e3b55] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.spec-tag[b-9hx71e3b55] { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-soft); color: var(--text-dim); }
.spec-tag.s[b-9hx71e3b55] { background: rgba(245,197,24,.16); border-color: var(--shiny); color: var(--shiny-soft); }
.spec-tag.t[b-9hx71e3b55] { background: rgba(80,200,120,.14); border-color: #5fd17f; color: #8be6a6; }
.spec-note-txt[b-9hx71e3b55] { font-size: 12px; color: var(--text-mute); font-style: italic; }
.spec-tag.prov[b-9hx71e3b55] { background: var(--surface-2); border-color: var(--line); display: inline-flex; align-items: center; }
.spec-ball[b-9hx71e3b55] { width: 16px; height: 16px; margin-right: 4px; image-rendering: pixelated; }
.spec-del[b-9hx71e3b55] { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.spec-del:hover[b-9hx71e3b55] { color: var(--red); background: var(--surface-2); }

.spec-add[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.spec-add select[b-9hx71e3b55], .spec-add input[b-9hx71e3b55] { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.spec-add select:focus[b-9hx71e3b55], .spec-add input:focus[b-9hx71e3b55] { border-color: var(--red); outline: none; }
.spec-qtyin[b-9hx71e3b55] { width: 64px; }
.spec-otin[b-9hx71e3b55] { width: 80px; }
.spec-notein[b-9hx71e3b55] { flex: 1; min-width: 120px; }
.spec-chk[b-9hx71e3b55] { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.spec-add .btn.primary[b-9hx71e3b55] { background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 8px; padding: 7px 16px; cursor: pointer; font-family: var(--font-display); }
.held-items[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 6px; }
.held-item[b-9hx71e3b55] { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 9px; padding: 6px 12px; color: var(--text); font-size: 14px; }
.held-rarity[b-9hx71e3b55] { font-family: var(--font-display); font-size: 11px; color: var(--shiny); }
.held-games[b-9hx71e3b55] { color: var(--text-mute); font-size: 11px; }

.ability.hidden[b-9hx71e3b55] { border-color: var(--ha); }
.ha-tag[b-9hx71e3b55] { font-family: var(--font-display); font-size: 9px; background: var(--ha); color: #fff; padding: 1px 5px; border-radius: 4px; letter-spacing: .5px; }

.stats[b-9hx71e3b55] { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.stat[b-9hx71e3b55] { display: grid; grid-template-columns: 64px 36px 1fr; align-items: center; gap: 10px; }
.stat-name[b-9hx71e3b55] { font-family: var(--font-display); font-size: 12px; color: var(--text-dim); }
.stat-num[b-9hx71e3b55] { font-variant-numeric: tabular-nums; color: var(--text); font-size: 13px; text-align: right; }
.stat-bar[b-9hx71e3b55] { height: 8px; background: var(--surface); border-radius: 6px; overflow: hidden; }
.stat-fill[b-9hx71e3b55] { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--red-deep), var(--red)); }

.locations[b-9hx71e3b55] { display: flex; flex-wrap: wrap; gap: 7px; }
.loc-chip[b-9hx71e3b55] { background: var(--surface); border: 1px solid var(--line-soft); color: var(--text-dim); font-size: 13px; padding: 5px 11px; border-radius: 8px; }
.loc-cond[b-9hx71e3b55] { display: block; font-size: 10.5px; color: var(--text-mute); margin-top: 2px; }
.muted[b-9hx71e3b55] { color: var(--text-mute); font-size: 14px; }

.growth[b-9hx71e3b55] { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.growth-cap[b-9hx71e3b55] {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 8px;
}
.growth-cap-sub[b-9hx71e3b55] { font-size: 10px; letter-spacing: .3px; text-transform: none; color: var(--text-mute); }
.growth-chart[b-9hx71e3b55] { width: 100%; height: 64px; display: block; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px; box-sizing: border-box; }
.growth-chart polyline[b-9hx71e3b55] { fill: none; stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.growth-foot[b-9hx71e3b55] { margin-top: 5px; font-size: 11px; color: var(--text-mute); text-align: center; }
/* Type colours (.t-*) moved to wwwroot/app.css — see note above. */

@media (max-width: 720px) {
    .modal-card[b-9hx71e3b55] { height: auto; max-height: 92vh; overflow-y: auto; }
    .modal-grid[b-9hx71e3b55] { grid-template-columns: 1fr; }
    .hero[b-9hx71e3b55] { overflow: visible; border-right: none; border-bottom: 1px solid var(--line); border-radius: 20px 20px 0 0; }
    .info[b-9hx71e3b55] { display: block; padding: 24px 20px; }
    .tab-body[b-9hx71e3b55] { overflow: visible; padding: 16px 0; }
    .moves-wrap[b-9hx71e3b55] { grid-template-columns: 1fr; gap: 18px; }
}
.breed-planner[b-9hx71e3b55] { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.breed-planner .breed-full[b-9hx71e3b55] { font-size: 12px; }
/* /Components/SpecimenModal.razor.rz.scp.css */
.sm-overlay[b-9crrolxxvc] {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sm-modal[b-9crrolxxvc] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 16px;
    width: min(920px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, .6);
}

.sm-head[b-9crrolxxvc] { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.sm-spr[b-9crrolxxvc] { width: 52px; height: 52px; image-rendering: pixelated; }
.sm-head-txt[b-9crrolxxvc] { flex: 1; min-width: 0; }
.sm-head h2[b-9crrolxxvc] { font-family: var(--font-display); font-size: 18px; margin: 0; }
.sm-sum[b-9crrolxxvc] { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sm-close[b-9crrolxxvc] { background: none; border: none; color: var(--text-mute); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.sm-close:hover[b-9crrolxxvc] { color: var(--red); background: var(--surface-2); }

.sm-body[b-9crrolxxvc] { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; flex: 1; overflow: hidden; }
.sm-list[b-9crrolxxvc] { overflow-y: auto; padding: 14px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.sm-editor[b-9crrolxxvc] { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.sm-muted[b-9crrolxxvc] { color: var(--text-mute); font-size: 13px; }

/* specimen cards */
.sm-card[b-9crrolxxvc] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); cursor: pointer; transition: border-color .12s; }
.sm-card:hover[b-9crrolxxvc] { border-color: var(--red); }
.sm-card.editing[b-9crrolxxvc] { border-color: var(--red); background: var(--surface-2); }
.sm-card.shiny[b-9crrolxxvc] { box-shadow: inset 0 0 0 1px var(--shiny); }
.sm-card-art[b-9crrolxxvc] { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.sm-card-spr[b-9crrolxxvc] { width: 44px; height: 44px; image-rendering: pixelated; }
.sm-card-ball[b-9crrolxxvc] { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; image-rendering: pixelated; }
.sm-card-main[b-9crrolxxvc] { flex: 1; min-width: 0; }
.sm-card-tags[b-9crrolxxvc] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.sm-chip[b-9crrolxxvc] { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim); }
.sm-chip.s[b-9crrolxxvc] { background: rgba(245, 197, 24, .16); border-color: var(--shiny); color: var(--shiny-soft); }
.sm-chip.t[b-9crrolxxvc] { color: var(--caught); border-color: var(--caught); }
.sm-card-prov[b-9crrolxxvc] { font-size: 11.5px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-card-actions[b-9crrolxxvc] { display: flex; gap: 2px; flex-shrink: 0; }
.sm-card-actions button[b-9crrolxxvc] { background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.sm-card-actions button:hover[b-9crrolxxvc] { color: var(--red); background: var(--surface-2); }

/* live preview catch-card */
.sm-prev[b-9crrolxxvc] { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line-soft); }
.sm-prev.shiny[b-9crrolxxvc] { border-color: var(--shiny); box-shadow: 0 0 0 1px var(--shiny), 0 0 22px -8px var(--shiny); }
.sm-prev-spr[b-9crrolxxvc] { width: 86px; height: 86px; image-rendering: pixelated; flex-shrink: 0; }
.sm-prev-body[b-9crrolxxvc] { flex: 1; min-width: 0; }
.sm-prev-name[b-9crrolxxvc] { font-family: var(--font-display); font-size: 16px; color: var(--text); }
.sm-spark[b-9crrolxxvc] { color: var(--shiny-soft); }
.sm-prev-ball[b-9crrolxxvc] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); margin: 3px 0 6px; }
.sm-prev-ball img[b-9crrolxxvc] { width: 22px; height: 22px; image-rendering: pixelated; }
.sm-prev-grid[b-9crrolxxvc] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0; }
.sm-prev-grid div[b-9crrolxxvc] { min-width: 0; }
.sm-prev-grid dt[b-9crrolxxvc] { font-family: var(--font-display); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-mute); }
.sm-prev-grid dd[b-9crrolxxvc] { margin: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* form */
.sm-form[b-9crrolxxvc] { display: flex; flex-direction: column; gap: 10px; }
.sm-lbl[b-9crrolxxvc] { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-mute); }
.sm-balls[b-9crrolxxvc] { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; }
.sm-ball[b-9crrolxxvc] { padding: 4px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg); cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; opacity: .7; }
.sm-ball:hover[b-9crrolxxvc] { opacity: 1; border-color: var(--line); }
.sm-ball.on[b-9crrolxxvc] { opacity: 1; border-color: var(--red); background: var(--surface-2); box-shadow: 0 0 0 1px var(--red); }
.sm-ball img[b-9crrolxxvc] { width: 26px; height: 26px; image-rendering: pixelated; }
.sm-grid2[b-9crrolxxvc] { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-grid2 select[b-9crrolxxvc], .sm-grid2 input[b-9crrolxxvc] { flex: 1; min-width: 110px; background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.sm-qty[b-9crrolxxvc] { max-width: 70px; flex: 0 0 auto !important; }
/* shiny / for-trade pill toggles (replace the bare browser checkboxes) */
.sm-toggles[b-9crrolxxvc] { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-chk[b-9crrolxxvc] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); cursor: pointer;
    padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--surface); user-select: none;
    transition: border-color .12s, background .12s, color .12s, box-shadow .12s; }
.sm-chk input[b-9crrolxxvc] { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-tgl-ic[b-9crrolxxvc] { font-size: 13px; opacity: .5; transition: opacity .12s; }
.sm-chk:hover[b-9crrolxxvc] { border-color: var(--line); color: var(--text); }
.sm-chk:has(input:checked)[b-9crrolxxvc] { font-weight: 600; }
.sm-chk:has(input:checked) .sm-tgl-ic[b-9crrolxxvc] { opacity: 1; }
.sm-chk.shiny:has(input:checked)[b-9crrolxxvc] { background: rgba(245, 197, 24, .16); border-color: var(--shiny); color: var(--shiny-soft);
    box-shadow: 0 0 0 1px var(--shiny), 0 0 16px -7px var(--shiny); }
.sm-chk.trade:has(input:checked)[b-9crrolxxvc] { background: var(--surface-2); border-color: var(--caught); color: var(--caught);
    box-shadow: 0 0 0 1px var(--caught); }
/* nickname chip + preview subtitle */
.sm-chip.nick[b-9crrolxxvc] { background: var(--surface-2); border-color: var(--line); color: var(--text); font-weight: 600; }
.sm-prev-species[b-9crrolxxvc] { font-size: 11px; color: var(--text-mute); margin-top: 1px; }
.sm-note[b-9crrolxxvc] { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.sm-actions[b-9crrolxxvc] { display: flex; justify-content: flex-end; gap: 8px; }
.sm-actions .btn[b-9crrolxxvc] { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--surface-2); color: var(--text); cursor: pointer; font-family: var(--font-display); }
.sm-actions .btn.primary[b-9crrolxxvc] { background: var(--red); color: #fff; border-color: var(--red); }

@media (max-width: 720px) {
    .sm-body[b-9crrolxxvc] { grid-template-columns: 1fr; }
    .sm-list[b-9crrolxxvc] { border-right: none; border-bottom: 1px solid var(--line-soft); max-height: 32vh; }
}