/* /Components/IconRail.razor.rz.scp.css */
/* Icon rail — scoped to the IconRail component. The root <nav class="icon-rail"> and all
   children are this component's own markup, so scoped selectors match directly.

   Collapsed = icons only, current width (52px vertical / 52px bottom bar). Expanded = icon +
   label, with group headers. Default is responsive (desktop expanded / phone collapsed) via
   plain CSS media queries — no JS needed for that, so there's no layout flash. A user override
   (rail-expanded / rail-collapsed class, set from the component after reading localStorage)
   pins one state at any width; on phone that means the expanded rail overlays the board instead
   of becoming a giant horizontal bar. */

.icon-rail[b-a9d8bj8dkk] {
    --ir-w-collapsed: 52px;
    --ir-w-expanded: 220px;
    flex: 0 0 var(--ir-w-collapsed);
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    background: linear-gradient(180deg, #131f18, #101913);
    border-right: 1px solid #25382e;
    z-index: 12;
    /* NOTE: the nav itself must NOT clip — the account dropdown (.ir-user-panel) is an absolutely
       positioned child of the header and needs to spill past the rail's edge into the board.
       Scroll-overflow for a long item list lives on .ir-body instead. */
    overflow: visible;
}

.icon-rail .ir-label[b-a9d8bj8dkk] { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-rail .ir-ghead[b-a9d8bj8dkk] { display: none; }

/* ---------- header: login / account, always first ---------- */
.icon-rail .ir-head[b-a9d8bj8dkk] {
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid #1c2b23;
    display: flex;
    justify-content: center;
}

.icon-rail .ir-user[b-a9d8bj8dkk] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 9px;
    color: #9fc2ae;
    text-decoration: none;
    border: 1px solid #2e463a;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.icon-rail .ir-user svg[b-a9d8bj8dkk] { flex: 0 0 auto; }

.icon-rail .ir-user.on[b-a9d8bj8dkk] { color: #d9f5e4; border-color: #2e9159; background: rgba(46, 145, 89, 0.16); }
.icon-rail a.ir-user:hover[b-a9d8bj8dkk] { background: #1f6f43; color: #fff; border-color: #2e9159; }

.icon-rail .ir-user-menu[b-a9d8bj8dkk] { position: relative; }
.icon-rail .ir-user-menu summary.ir-user[b-a9d8bj8dkk] { list-style: none; }
.icon-rail .ir-user-menu summary.ir-user[b-a9d8bj8dkk]::-webkit-details-marker { display: none; }
.icon-rail .ir-user-menu summary.ir-user:hover[b-a9d8bj8dkk] { background: #1f6f43; color: #fff; }

.icon-rail .ir-user-panel[b-a9d8bj8dkk] {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    padding: 8px;
    background: #101913;
    border: 1px solid #2e463a;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 30;
}

.icon-rail .ir-user-panel a[b-a9d8bj8dkk],
.icon-rail .ir-user-panel button[b-a9d8bj8dkk] {
    color: #e8efe9;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 8px 11px;
    text-decoration: none;
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    text-align: left;
    width: 100%;
    min-height: 38px;
    transition: background 0.12s, border-color 0.12s;
}

.icon-rail .ir-user-panel a:hover[b-a9d8bj8dkk],
.icon-rail .ir-user-panel button:hover[b-a9d8bj8dkk] {
    background: rgba(255, 255, 255, 0.09);
    border-color: #3c5a49;
}

.icon-rail .ir-user-panel form[b-a9d8bj8dkk] { margin: 0; }

/* ---------- collapse / expand toggle ---------- */
.icon-rail .ir-toggle[b-a9d8bj8dkk] {
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 40px;
    height: 30px;
    margin: 0 auto 8px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #7fa08d;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: background 0.12s, color 0.12s;
}

.icon-rail .ir-toggle:hover[b-a9d8bj8dkk] { background: rgba(255, 255, 255, 0.06); color: #cfe; }
.icon-rail .ir-toggle .ir-chevron[b-a9d8bj8dkk] { flex: 0 0 auto; transition: transform 0.16s ease; }
.icon-rail .ir-toggle .ir-chevron.rev[b-a9d8bj8dkk] { transform: rotate(180deg); }

/* ---------- nav groups ---------- */
/* the item list scrolls here (not on the nav) so the header's account menu can escape clipping */
.icon-rail .ir-body[b-a9d8bj8dkk] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.icon-rail .ir-group[b-a9d8bj8dkk] { display: flex; flex-direction: column; gap: 3px; padding: 0 6px; }

.icon-rail .ir-ghead[b-a9d8bj8dkk] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #63836f;
    padding: 3px 7px 4px;
}

.icon-rail .ir-sep[b-a9d8bj8dkk] { height: 1px; margin: 8px 10px; background: #1c2b23; flex: 0 0 auto; }

.icon-rail .ir-btn[b-a9d8bj8dkk] {
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 40px;
    min-height: 40px;
    margin: 0 auto;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #cfe3d7;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.icon-rail .ir-btn svg[b-a9d8bj8dkk] { flex: 0 0 auto; color: inherit; }

.icon-rail .ir-btn:hover[b-a9d8bj8dkk] { background: rgba(255, 255, 255, 0.07); color: #fff; }

.icon-rail .ir-btn:focus-visible[b-a9d8bj8dkk],
.icon-rail .ir-toggle:focus-visible[b-a9d8bj8dkk],
.icon-rail .ir-user:focus-visible[b-a9d8bj8dkk] {
    outline: 2px solid #6fd39a;
    outline-offset: 1px;
}

.icon-rail .ir-btn.on[b-a9d8bj8dkk] {
    background: #2e9159;
    border-color: #6fd39a;
    color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.icon-rail .ir-btn.sub[b-a9d8bj8dkk] { color: #93b3a1; }
.icon-rail .ir-btn.sub .ir-label[b-a9d8bj8dkk] { font-size: 12px; }
.icon-rail .ir-btn.sub.on[b-a9d8bj8dkk] { background: #1f6f43; border-color: #2e9159; color: #fff; }

/* ---------- expanded (labeled) look: "forced expanded" applies at any width; the desktop
   default (nothing forced) is the same look gated by a min-width media query below. ---------- */
.icon-rail.rail-expanded[b-a9d8bj8dkk] {
    flex-basis: var(--ir-w-expanded);
}
.icon-rail.rail-expanded .ir-label[b-a9d8bj8dkk],
.icon-rail.rail-expanded .ir-ghead[b-a9d8bj8dkk] { display: inline-block; }
.icon-rail.rail-expanded .ir-head[b-a9d8bj8dkk] { justify-content: stretch; padding: 0 9px 8px; }
.icon-rail.rail-expanded .ir-user[b-a9d8bj8dkk] { width: 100%; height: auto; padding: 7px 8px; justify-content: flex-start; }
.icon-rail.rail-expanded .ir-toggle[b-a9d8bj8dkk] { width: calc(100% - 12px); height: auto; padding: 7px; justify-content: flex-start; margin: 0 auto 8px; }
.icon-rail.rail-expanded .ir-btn[b-a9d8bj8dkk] { width: 100%; justify-content: flex-start; margin: 0; }

@media (min-width: 1024px) {
    .icon-rail:not(.rail-collapsed)[b-a9d8bj8dkk] { flex-basis: var(--ir-w-expanded); }
    .icon-rail:not(.rail-collapsed) .ir-label[b-a9d8bj8dkk],
    .icon-rail:not(.rail-collapsed) .ir-ghead[b-a9d8bj8dkk] { display: inline-block; }
    .icon-rail:not(.rail-collapsed) .ir-head[b-a9d8bj8dkk] { justify-content: stretch; padding: 0 9px 8px; }
    .icon-rail:not(.rail-collapsed) .ir-user[b-a9d8bj8dkk] { width: 100%; height: auto; padding: 7px 8px; justify-content: flex-start; }
    .icon-rail:not(.rail-collapsed) .ir-toggle[b-a9d8bj8dkk] { width: calc(100% - 12px); height: auto; padding: 7px; justify-content: flex-start; margin: 0 auto 8px; }
    .icon-rail:not(.rail-collapsed) .ir-btn[b-a9d8bj8dkk] { width: 100%; justify-content: flex-start; margin: 0; }
}

/* ---- < 1024px: rail becomes a bottom bar (current behavior) — unless forced-expanded, which
   turns it into a left-edge overlay instead, since ten labeled rows won't fit in a bottom bar. ---- */
@media (max-width: 1023.98px) {
    .icon-rail[b-a9d8bj8dkk] {
        order: 2;
        flex: 0 0 52px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 6px;
        gap: 2px;
        border-right: none;
        border-top: 1px solid #25382e;
    }
    .icon-rail .ir-head[b-a9d8bj8dkk] { border-bottom: none; margin-bottom: 0; padding: 0 6px 0 0; flex: 0 0 auto; }
    .icon-rail .ir-toggle[b-a9d8bj8dkk] { margin: 0 2px 0 0; flex: 0 0 auto; }
    .icon-rail .ir-body[b-a9d8bj8dkk] { flex-direction: row; align-items: center; flex: 0 0 auto; }
    .icon-rail .ir-group[b-a9d8bj8dkk] { flex-direction: row; align-items: center; padding: 0; }
    .icon-rail .ir-sep[b-a9d8bj8dkk] { width: 1px; height: 24px; margin: 0 6px; }
    .icon-rail .ir-ghead[b-a9d8bj8dkk] { display: none !important; }
    /* mini-stats overlay is hidden on small screens (covers the board) — hide its toggle too */
    .icon-rail .ir-btn.sub[b-a9d8bj8dkk] { display: none; }
    /* bigger touch targets on phone */
    .icon-rail .ir-btn[b-a9d8bj8dkk],
    .icon-rail .ir-user[b-a9d8bj8dkk],
    .icon-rail .ir-toggle[b-a9d8bj8dkk] { min-height: 44px; }
    .icon-rail:not(.rail-expanded) .ir-btn[b-a9d8bj8dkk],
    .icon-rail:not(.rail-expanded) .ir-user[b-a9d8bj8dkk],
    .icon-rail:not(.rail-expanded) .ir-toggle[b-a9d8bj8dkk] { width: 44px; }
    /* The bottom bar keeps overflow-x:auto (icons scroll), and the left overlay keeps
       overflow-y:auto — both would clip an absolutely-positioned dropdown. So on phone the
       account panel is viewport-anchored (position: fixed) to escape the container entirely.
       The bar is pinned to the screen bottom and the overlay to the top-left, so fixed
       coordinates are predictable without JS. */
    .icon-rail .ir-user-panel[b-a9d8bj8dkk] {
        position: fixed;
        min-width: 190px;
        max-width: calc(100vw - 16px);
        z-index: 40;
    }
    /* bottom bar: account icon is bottom-left → open the menu just above the bar, left-aligned */
    .icon-rail:not(.rail-expanded) .ir-user-panel[b-a9d8bj8dkk] {
        left: 8px;
        right: auto;
        top: auto;
        bottom: 60px;
    }
    /* left overlay (forced-expanded): account button is top-left → drop the menu just below it */
    .icon-rail.rail-expanded .ir-user-panel[b-a9d8bj8dkk] {
        left: 10px;
        right: auto;
        top: 58px;
        bottom: auto;
    }

    /* forced-expanded on phone: a left-edge overlay above the board, not a wider bottom bar */
    .icon-rail.rail-expanded[b-a9d8bj8dkk] {
        position: absolute;
        inset: 0 auto 0 0;
        order: 0;
        width: var(--ir-w-expanded);
        flex-basis: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        border-top: none;
        border-right: 1px solid #25382e;
        box-shadow: 10px 0 28px rgba(0, 0, 0, 0.5);
        z-index: 35;
    }
    .icon-rail.rail-expanded .ir-head[b-a9d8bj8dkk] { border-bottom: 1px solid #1c2b23; margin-bottom: 6px; padding: 0 9px 8px; }
    .icon-rail.rail-expanded .ir-toggle[b-a9d8bj8dkk] { margin: 0 auto 8px; }
    .icon-rail.rail-expanded .ir-body[b-a9d8bj8dkk] { flex-direction: column; align-items: stretch; flex: 1 1 auto; }
    .icon-rail.rail-expanded .ir-group[b-a9d8bj8dkk] { flex-direction: column; align-items: stretch; padding: 0 6px; }
    .icon-rail.rail-expanded .ir-sep[b-a9d8bj8dkk] { width: auto; height: 1px; margin: 8px 10px; }
    .icon-rail.rail-expanded .ir-ghead[b-a9d8bj8dkk] { display: inline-block !important; }
    .icon-rail.rail-expanded .ir-btn.sub[b-a9d8bj8dkk] { display: flex; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-n7o6wenf79] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-n7o6wenf79] {
    flex: 1;
}

.sidebar[b-n7o6wenf79] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-n7o6wenf79] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-n7o6wenf79]  a, .top-row[b-n7o6wenf79]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-n7o6wenf79]  a:hover, .top-row[b-n7o6wenf79]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-n7o6wenf79]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-n7o6wenf79] {
        justify-content: space-between;
    }

    .top-row[b-n7o6wenf79]  a, .top-row[b-n7o6wenf79]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-n7o6wenf79] {
        flex-direction: row;
    }

    .sidebar[b-n7o6wenf79] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-n7o6wenf79] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-n7o6wenf79]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-n7o6wenf79], article[b-n7o6wenf79] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-n7o6wenf79] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-n7o6wenf79] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-4p4dnovkzi] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-4p4dnovkzi] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-4p4dnovkzi] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-4p4dnovkzi] {
    font-size: 1.1rem;
}

.bi[b-4p4dnovkzi] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-4p4dnovkzi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-4p4dnovkzi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-4p4dnovkzi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-4p4dnovkzi] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-4p4dnovkzi] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-4p4dnovkzi] {
        padding-bottom: 1rem;
    }

    .nav-item[b-4p4dnovkzi]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-4p4dnovkzi]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-4p4dnovkzi]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-4p4dnovkzi] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-4p4dnovkzi] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-4p4dnovkzi] {
        display: none;
    }

    .nav-scrollable[b-4p4dnovkzi] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yf026ionsa],
.components-reconnect-repeated-attempt-visible[b-yf026ionsa],
.components-reconnect-failed-visible[b-yf026ionsa],
.components-pause-visible[b-yf026ionsa],
.components-resume-failed-visible[b-yf026ionsa],
.components-rejoining-animation[b-yf026ionsa] {
    display: none;
}

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


#components-reconnect-modal[b-yf026ionsa] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    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-yf026ionsa 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-yf026ionsa] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yf026ionsa] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yf026ionsa] {
        background-color: #6b9ed2;
    }

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

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

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

@keyframes components-rejoining-animation-b-yf026ionsa {
    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/Mat.razor.rz.scp.css */
.matpage[b-81bcamtwes] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0e1512;
    font-family: system-ui, sans-serif;
    color: #e8efe9;
}

.toolbar[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 14px;
    background: linear-gradient(180deg, #18261e, #111a15);
    border-bottom: 1px solid #25382e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 4px;
}

/* left cluster: exit + title + info */
.toolbar .tb-left[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.toolbar .icon-btn[b-81bcamtwes] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #cfe;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2e463a;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s;
}

.toolbar .icon-btn:hover[b-81bcamtwes] {
    background: #1f6f43;
    border-color: #2e9159;
}

.toolbar .icon-btn.info[b-81bcamtwes] {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.toolbar .tb-title[b-81bcamtwes] {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

/* shortcuts popover (replaces the old inline hint sentence) */
.toolbar .info-wrap[b-81bcamtwes] {
    position: relative;
    display: inline-flex;
}

.toolbar .info-wrap .pop[b-81bcamtwes] {
    position: absolute;
    top: 130%;
    left: 0;
    z-index: 20;
    width: 340px;
    padding: 10px 12px;
    background: #0b120e;
    border: 1px solid #2e463a;
    border-radius: 10px;
    color: #8aa394;
    font-size: 12px;
    line-height: 1.7;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
}

.toolbar .info-wrap .pop b[b-81bcamtwes] {
    color: #e8efe9;
}

.toolbar .info-wrap .pop kbd[b-81bcamtwes] {
    background: #14201a;
    border: 1px solid #2e463a;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 5px;
    color: #cfe;
    font-family: inherit;
    font-size: 11px;
}

.toolbar .info-wrap:hover .pop[b-81bcamtwes],
.toolbar .info-wrap:focus-within .pop[b-81bcamtwes] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* divider between clusters */
.toolbar .vsep[b-81bcamtwes] {
    width: 1px;
    align-self: stretch;
    background: #25382e;
    margin: 2px 0;
}

.toolbar .spacer[b-81bcamtwes] {
    flex: 1 1 auto;
}

/* right cluster: selects + board actions + primary */
.toolbar .tb-right[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar .ghost[b-81bcamtwes] {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.03);
    color: #e8efe9;
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12.5px;
    transition: background 0.12s, border-color 0.12s;
}

.toolbar .ghost:hover[b-81bcamtwes] {
    background: rgba(255, 255, 255, 0.07);
    border-color: #3c5a49;
}

.toolbar .sel[b-81bcamtwes] {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    background: #0c1611 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238aa394' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 9px center;
    color: #e8efe9;
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 6px 26px 6px 10px;
    font-size: 12.5px;
}

.toolbar .primary[b-81bcamtwes] {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(180deg, #2e9159, #1f6f43);
    color: #fff;
    font-weight: 600;
    border: 1px solid #6fd39a;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12.5px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: filter 0.12s;
}

.toolbar .primary:hover[b-81bcamtwes] {
    filter: brightness(1.1);
}

.toolbar .primary.on[b-81bcamtwes] {
    box-shadow: inset 0 0 0 1px #6fd39a, inset 0 0 12px rgba(111, 211, 154, 0.4);
}

/* ---- app shell: body row = icon rail + canvas ---- */
/* (rail styling lives in IconRail.razor.css — Mat's scoped CSS can't reach inside the IconRail component) */
.matbody[b-81bcamtwes] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    position: relative; /* lets the icon rail become an absolutely-positioned overlay on phone when forced-expanded */
}

/* Deck manager */
.deckmgr[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    overflow-y: auto;
}

.deckmgr .dhead[b-81bcamtwes] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-bottom: 4px;
}

.drow[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 6px;
}

.drow.on[b-81bcamtwes] {
    background: rgba(255, 210, 74, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.4);
}

.drow .dsel[b-81bcamtwes] {
    background: none;
    border: 0;
    color: #ffd24a;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
}

.drow .dname[b-81bcamtwes] {
    flex: 1 1 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 5px 7px;
    font-size: 13px;
    font-family: inherit;
    min-width: 0;
}

.drow .dcount[b-81bcamtwes] {
    font-size: 11px;
    color: #8aa394;
    min-width: 22px;
    text-align: right;
}

.drow .dmove[b-81bcamtwes] {
    background: none;
    border: 0;
    color: #8aa394;
    cursor: pointer;
    font-size: 10px;
    padding: 0 1px;
    line-height: 1;
}

.drow .dmove:hover[b-81bcamtwes] {
    color: #cfe;
}

.drow .ddel[b-81bcamtwes] {
    background: none;
    border: 0;
    color: #b56;
    cursor: pointer;
    font-size: 13px;
    padding: 0 4px;
}

.drow .ddel:hover[b-81bcamtwes] {
    color: #e88;
}

.deckmgr .add[b-81bcamtwes] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
}

.deckmgr .add:disabled[b-81bcamtwes] {
    opacity: 0.45;
    cursor: default;
}

/* Commander row (active deck) + new-deck form + picker */
.cmdrow[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 210, 74, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.30);
}

.cmdrow .cmdname[b-81bcamtwes] {
    flex: 1 1 auto;
    font-size: 12px;
    color: #ffd24a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdrow .cmdwarn[b-81bcamtwes] {
    flex: 1 1 auto;
    font-size: 12px;
    color: #e8a;
}

.cmdset[b-81bcamtwes] {
    background: #173a28;
    color: #cfe;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    flex: 0 0 auto;
}

.cmdset:hover[b-81bcamtwes] {
    background: #1f6f43;
}

.newdeck[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #0c1611;
    box-shadow: inset 0 0 0 1px #25382e;
}

.newdeck .cmdname[b-81bcamtwes] {
    font-size: 12px;
    color: #ffd24a;
}

.newdeck .cmdhint[b-81bcamtwes] {
    font-size: 11px;
    color: #8aa394;
    line-height: 1.4;
}

.newdeckbtns[b-81bcamtwes] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.newdeckbtns .add[b-81bcamtwes] {
    flex: 1 1 auto;
    margin-top: 0;
}

.newdeckbtns .cancel[b-81bcamtwes] {
    background: none;
    color: #8aa394;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

.newdeckbtns .cancel:hover[b-81bcamtwes] {
    color: #cfe;
}

.cmdpicker[b-81bcamtwes] {
    margin-top: 8px;
    border-radius: 8px;
    background: #0c1611;
    box-shadow: inset 0 0 0 1px #25382e;
    padding: 4px;
}

.cmdpicker .results[b-81bcamtwes] {
    max-height: 320px;
}

.cifilter[b-81bcamtwes] {
    display: inline-block;
    margin-left: 6px;
    color: #ffd24a;
    background: rgba(255, 210, 74, 0.12);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
}

.mat[b-81bcamtwes] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* .searchpanel geometry lives ONLY in wwwroot/css/panels.css (global) — a scoped copy here
   out-specifies the global <1024px bottom-sheet media override for Mat's inline panels
   (search, deckbar) via the scope-attribute selector. Do not re-add. */

.searchhead[b-81bcamtwes] {
    display: flex;
    gap: 6px;
    padding: 10px;
}

.syncbar[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid #25382e;
    font-size: 11px;
    color: #8aa394;
}

.syncbar .counts[b-81bcamtwes] {
    flex: 1 1 auto;
}

.syncbar button[b-81bcamtwes] {
    background: #173a28;
    color: #cfe;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
}

.searchbox[b-81bcamtwes] {
    flex: 1 1 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.searchhead button[b-81bcamtwes] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 0 12px;
    cursor: pointer;
}

.searchstatus[b-81bcamtwes] {
    padding: 0 12px 8px;
    font-size: 12px;
    color: #8aa394;
}

.searchstatus .err[b-81bcamtwes] {
    color: #e88;
}

.results[b-81bcamtwes] {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    align-content: start;
}

.result[b-81bcamtwes] {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    line-height: 0;
    position: relative;
}

.result img[b-81bcamtwes] {
    width: 100%;
    border-radius: 6px;
    display: block;
    transition: transform 0.08s ease;
}

.result:hover img[b-81bcamtwes] {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Search result "+ Add" (click the card opens the reader; this button adds). Hover-revealed and
   click-through until shown, so it never blocks the card's click-to-open. */
.result .resadd[b-81bcamtwes] {
    position: absolute;
    top: 4px; right: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    background: rgba(31, 111, 67, 0.95);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.result .resadd:hover[b-81bcamtwes] { background: rgba(46, 145, 89, 0.98); }
.result:hover .resadd[b-81bcamtwes] { opacity: 1; pointer-events: auto; }

.result .prints[b-81bcamtwes] {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffd24a;
    border: 0;
    border-radius: 0 0 6px 6px;
    font-size: 10px;
    padding: 2px 0;
    margin-top: -4px;
    cursor: pointer;
    line-height: 1.4;
}

.result .prints:hover[b-81bcamtwes] {
    background: rgba(0, 0, 0, 0.75);
}

.printstrip[b-81bcamtwes] {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 8px;
}

.printstrip img[b-81bcamtwes] {
    height: 86px;
    aspect-ratio: 5 / 7;            /* reserve a card-shaped box BEFORE the (lazy) image loads, so the strip is never 0-width/invisible */
    object-fit: cover;
    background: #0f1a14;            /* placeholder tint while loading */
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
    border: 2px solid transparent;
}

.printstrip img:hover[b-81bcamtwes] {
    border-color: #2e9159;
}

/* Library */
.savedlist[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.savedrow[b-81bcamtwes] {
    display: flex;
    gap: 6px;
}

.savedrow .loadbtn[b-81bcamtwes] {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0c1611;
    color: #e8efe9;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}

.savedrow .loadbtn:hover[b-81bcamtwes] {
    background: #173a28;
    border-color: #2e9159;
}

.savedrow .loadbtn .cc[b-81bcamtwes] {
    color: #8aa394;
    font-size: 11px;
    background: #101814;
    border-radius: 10px;
    padding: 1px 7px;
}

.savedrow .ddel[b-81bcamtwes] {
    background: none;
    border: 0;
    color: #b56;
    cursor: pointer;
    font-size: 13px;
    padding: 0 6px;
}

.savedrow .ddel:hover[b-81bcamtwes] {
    color: #e88;
}

/* Zone breakdown chips (Stats panel) */
.zonebar[b-81bcamtwes] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 8px;
}

.zonebar .zchip[b-81bcamtwes] {
    font-size: 11px;
    color: #cfe;
    background: #101c15;
    border: 1px solid #2e463a;
    border-radius: 10px;
    padding: 2px 9px;
}

.zonebar .zchip.over[b-81bcamtwes] {
    color: #e8a;
    border-color: #7a3b3b;
    background: rgba(200, 80, 80, 0.14);
}

/* Stats panel */
.statspanel[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    overflow-y: auto;
}

.statspanel .dhead[b-81bcamtwes] {
    font-size: 13px;
    font-weight: 600;
    color: #e8efe9;
    margin-bottom: 6px;
}

.legality[b-81bcamtwes] {
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    margin: 4px 0 6px;
}

.legality.ok[b-81bcamtwes] {
    background: rgba(46, 145, 89, 0.18);
    border: 1px solid #2e9159;
    color: #8fe0ad;
}

.legality.bad[b-81bcamtwes] {
    background: rgba(200, 80, 80, 0.16);
    border: 1px solid #7a3b3b;
    color: #e8a;
}

.statspanel .issue[b-81bcamtwes], .statsmodal .issue[b-81bcamtwes] {
    font-size: 12px;
    color: #d9b27a;
    padding: 2px 2px;
}

.statgroup[b-81bcamtwes] {
    margin: 8px 0 4px;
}

.statgroup .gtitle[b-81bcamtwes] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-bottom: 4px;
}

.statrow[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}

.statrow .slabel[b-81bcamtwes] {
    width: 84px;
    font-size: 12px;
    color: #cfe;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.statrow .sbar[b-81bcamtwes] {
    flex: 1 1 auto;
    height: 12px;
    background: #0c1611;
    border-radius: 4px;
    overflow: hidden;
}

.statrow .sfill[b-81bcamtwes] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2e9159, #6fd39a);
    border-radius: 4px;
}

.statrow .scount[b-81bcamtwes] {
    width: 28px;
    text-align: right;
    font-size: 12px;
    color: #e8efe9;
    flex: 0 0 auto;
}

/* Card reader overlay (double-click) */
.reader[b-81bcamtwes] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.readercard[b-81bcamtwes] {
    display: flex;
    gap: 18px;
    max-width: 1060px;
    max-height: 88vh;
    padding: 18px;
    background: #14201a;
    border: 1px solid #2e463a;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.readerimg img[b-81bcamtwes] {
    height: min(74vh, 600px);
    border-radius: 12px;
    display: block;
}

.readerside[b-81bcamtwes] {
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.readername[b-81bcamtwes] {
    font-size: 17px;
    font-weight: 600;
    color: #e8efe9;
}

.readerbtns[b-81bcamtwes] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rbtn[b-81bcamtwes] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
}

.rbtn:hover[b-81bcamtwes] { background: #258050; }
.rbtn.close[b-81bcamtwes] { background: #173a28; color: #cfe; border-color: #2e463a; }
.rbtn.save[b-81bcamtwes] { background: #1f6f43; }

.rlabel[b-81bcamtwes] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.readernote[b-81bcamtwes] {
    flex: 1 1 auto;
    min-height: 160px;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    color: #e8efe9;
    padding: 9px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

.reader:focus[b-81bcamtwes] { outline: none; }

.rtabs[b-81bcamtwes] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #2e463a;
    margin-top: 4px;
}

.rtab[b-81bcamtwes] {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #8aa394;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 12px;
}

.rtab:hover[b-81bcamtwes] { color: #cfe; }

.rtab.on[b-81bcamtwes] {
    color: #e8efe9;
    border-bottom-color: #2e9159;
}

.rtabbody[b-81bcamtwes] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
}

.versions[b-81bcamtwes] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.versions img[b-81bcamtwes] {
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    display: block;
}

.versions img:hover[b-81bcamtwes] { border-color: #2e9159; }

/* Rulings tab (MTG reader) */
.rulings[b-81bcamtwes] { display: flex; flex-direction: column; gap: 10px; }
.ruling-date[b-81bcamtwes] { font-size: 11px; color: #8aa394; }
.ruling-text[b-81bcamtwes] { font-size: 13px; color: #e8efe9; line-height: 1.4; }

/* Synergy badge on search results */
.synbadge[b-81bcamtwes] {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 9px;
    color: #06120b;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
    pointer-events: none;
}

.synbadge.syn-hi[b-81bcamtwes] { background: #58c98a; }
.synbadge.syn-md[b-81bcamtwes] { background: #c9b958; }
.synbadge.syn-lo[b-81bcamtwes] { background: #8aa39a; }

/* Synergy "why" tooltip — shown when hovering the search result (the badge itself stays
   click-through so clicking the card still adds it). */
.syntip[b-81bcamtwes] {
    position: absolute;
    top: 20px;
    left: 3px;
    right: 3px;
    z-index: 30;
    padding: 6px 8px;
    background: rgba(8, 16, 12, 0.97);
    border: 1px solid #2e9159;
    border-radius: 8px;
    color: #c8d8ce;
    font-size: 10.5px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(0,0,0,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
}
.syntip b[b-81bcamtwes] { color: #9fe0bd; display: block; margin-bottom: 2px; }
.result:hover .syntip[b-81bcamtwes] { opacity: 1; }

/* Detected combos */
.combocard[b-81bcamtwes] {
    background: #16241b;
    border: 1px solid #244231;
    border-left: 3px solid #2e9159;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.combocard.near[b-81bcamtwes] { border-left-color: #c9b958; }

.combocard .cmbtn[b-81bcamtwes] {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid #2e9159;
    background: #1b2d21;
    color: #cdebd9;
    cursor: pointer;
}

.combocard .cmbtn:hover[b-81bcamtwes] { background: #244231; }

.combosep[b-81bcamtwes] { border: 0; border-top: 1px solid #1c3225; margin: 14px 0; }

.combocard[b-81bcamtwes] { cursor: pointer; transition: border-color .1s ease, background .1s ease; }
.combocard:hover[b-81bcamtwes] { border-color: #2e9159; background: #1b2d21; }
.comborow[b-81bcamtwes] { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.cmbtn.ghost[b-81bcamtwes] { border-color: #2a3b32; background: transparent; color: #93b3a1; }
.combonote[b-81bcamtwes] { font-size: 12px; margin-left: 4px; }
/* Compact result headline (was the full wall-of-text Produces string) */
.comboresult[b-81bcamtwes] { font-size: 12px; font-weight: 600; color: #cdebd9; margin-top: 7px; display: flex; align-items: center; gap: 4px; line-height: 1.25; }
.cmore[b-81bcamtwes] { font-size: 10px; font-weight: 600; color: #06120b; background: #58c98a; border-radius: 8px; padding: 1px 6px; }
.comboown[b-81bcamtwes] { font-size: 10px; color: #8aa394; margin-left: auto; }

/* Piece thumbnails in the panel */
.combothumbs[b-81bcamtwes] { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 2px; }
.cthumb[b-81bcamtwes] {
    position: relative;
    width: 46px;
    aspect-ratio: 5 / 7;
    border-radius: 4px;
    overflow: hidden;
    background: #0e1813;
    border: 1px solid #244231;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cthumb img[b-81bcamtwes] { width: 100%; height: 100%; object-fit: cover; display: block; }
.cthumb.missing[b-81bcamtwes] { border: 1px dashed #c9b958; opacity: .85; }
.cthumb.missing img[b-81bcamtwes] { filter: grayscale(.7) brightness(.6); }
.cthumbname[b-81bcamtwes] { font-size: 8px; color: #93b3a1; text-align: center; padding: 2px; line-height: 1.1; }
.needtag[b-81bcamtwes] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    background: #c9b958;
    color: #06120b;
}

/* Combo detail modal */
.combomodal[b-81bcamtwes] {
    background: #11201a;
    border: 1px solid #244231;
    border-radius: 10px;
    width: min(680px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 16px 18px;
    color: #e8efe9;
}
.cmprod[b-81bcamtwes] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.prodchip[b-81bcamtwes] { font-size: 12px; font-weight: 600; background: #1b3325; border: 1px solid #2e6f49; color: #9fe0bd; border-radius: 12px; padding: 3px 9px; }
.cmpieces[b-81bcamtwes] { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cmpiece[b-81bcamtwes] { width: 130px; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.cmpiece img[b-81bcamtwes] { width: 100%; border-radius: 7px; display: block; }
.cmpiece.missing img[b-81bcamtwes] { filter: grayscale(.7) brightness(.6); outline: 2px dashed #c9b958; }
.cmpieceph[b-81bcamtwes] { width: 100%; aspect-ratio: 5/7; border-radius: 7px; background: #0e1813; border: 1px solid #244231; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; padding: 6px; color: #93b3a1; }
.cmpiecename[b-81bcamtwes] { font-size: 11px; text-align: center; line-height: 1.2; }
.cmsteps[b-81bcamtwes] { margin-bottom: 14px; }
.cmstep[b-81bcamtwes] { font-size: 12px; color: #c8d8ce; padding: 4px 0; border-bottom: 1px solid #16261d; }
.cmnote[b-81bcamtwes] { margin-bottom: 12px; }
.cmpiece img[b-81bcamtwes] { cursor: zoom-in; }

/* Big single-card lightbox (above the combo modal) */
.lightbox-bg[b-81bcamtwes] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 4, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    cursor: zoom-out;
}
.lightbox-img[b-81bcamtwes] {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}

/* Thesaurus "Similar cards" strip */

/* Thesaurus "Similar cards" strip */
/* Thesaurus "Similar cards" — visual grid + pagination */
.simgrid[b-81bcamtwes] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.simcard[b-81bcamtwes] { cursor: pointer; }
.simcard.evo-warn .simimg[b-81bcamtwes] { border-color: #c9b958; }
.simcard.evo-info .simimg[b-81bcamtwes] { border-color: #5a7a6a; }

/* Budget swaps */
.simhead[b-81bcamtwes] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.budgetbtn[b-81bcamtwes] {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 7px;
    border: 1px solid #2e463a;
    background: rgba(255,255,255,.03);
    color: #93b3a1;
    white-space: nowrap;
}
.budgetbtn:hover[b-81bcamtwes] { color: #cfe; border-color: #3c5a49; }
.budgetbtn.on[b-81bcamtwes] { background: #1f6f43; color: #fff; border-color: #6fd39a; }
.saveflag[b-81bcamtwes] {
    position: absolute;
    top: 4px; right: 4px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    background: #58c98a;
    color: #06120b;
}
.simprice[b-81bcamtwes] { color: #cdebd9; font-weight: 600; margin-right: 4px; }
.budgetcap[b-81bcamtwes] { font-size: 11px; color: #93b3a1; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.budgetcap .fnum[b-81bcamtwes] { width: 56px; background: #0c1611; border: 1px solid #2e463a; border-radius: 6px; color: #e8efe9; padding: 3px 6px; font-size: 11px; font-family: inherit; }

.simimg[b-81bcamtwes] {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #244231;
    aspect-ratio: 5 / 7;
    background: #0e1813;
}

.simcard:hover .simimg[b-81bcamtwes] { border-color: #2e9159; }
.simimg img[b-81bcamtwes] { width: 100%; height: 100%; object-fit: cover; display: block; }
.simph[b-81bcamtwes] { padding: 8px; font-size: 11px; color: #93b3a1; text-align: center; }

.simscore[b-81bcamtwes] {
    position: absolute;
    top: 4px; left: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    color: #06120b;
}
.simscore.syn-hi[b-81bcamtwes] { background: #58c98a; }
.simscore.syn-md[b-81bcamtwes] { background: #c9b958; }
.simscore.syn-lo[b-81bcamtwes] { background: #8aa39a; }

.simadd[b-81bcamtwes] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 0;
    color: #fff;
    background: rgba(31, 111, 67, 0.95);
    border: 0;
    font-family: inherit;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;          /* invisible → don't intercept the card's click-to-open */
    transition: opacity .1s ease;
}
.simadd:hover[b-81bcamtwes] { background: rgba(46, 145, 89, 0.98); }
.simcard:hover .simadd[b-81bcamtwes] { opacity: 1; pointer-events: auto; }

.simcap[b-81bcamtwes] { font-size: 11px; font-weight: 600; color: #e8efe9; margin-top: 3px; line-height: 1.2; }
.simreason[b-81bcamtwes] { font-size: 10px; color: #93b3a1; line-height: 1.2; }

.simpager[b-81bcamtwes] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}
.simpginfo[b-81bcamtwes] { font-size: 12px; color: #8aa394; }
.rbtn:disabled[b-81bcamtwes] { opacity: .4; cursor: default; }

.rlinks[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rlinks a[b-81bcamtwes] {
    text-decoration: none;
    text-align: center;
}

.readermeta[b-81bcamtwes] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.readermeta .mchip[b-81bcamtwes] {
    font-size: 11px;
    color: #cfe;
    background: #101c15;
    border: 1px solid #2e463a;
    border-radius: 10px;
    padding: 2px 9px;
}

.readerimg .textface[b-81bcamtwes] {
    width: 320px;
    min-height: 440px;
    background: #f7f4ec;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #cfc7b5;
}

.readerimg .textface .tfhead[b-81bcamtwes] {
    background: var(--band, #3d6fb4);
    color: #fff;
    font-weight: 600;
    padding: 12px 14px;
    font-size: 16px;
}

.readerimg .textface .tfbody[b-81bcamtwes] {
    color: #222;
    padding: 12px 14px;
    font-size: 14px;
    white-space: pre-wrap;
}

/* MindDeck composer */
.composer[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;       /* the side panel is fixed-height — let its content scroll */
    flex: 1 1 auto;
    min-height: 0;
}

.composer label[b-81bcamtwes] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.composer .body[b-81bcamtwes] {
    min-height: 120px;
    resize: vertical;
}

.composer .swatches[b-81bcamtwes] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.composer .sw[b-81bcamtwes] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.composer .sw.on[b-81bcamtwes] {
    border-color: #fff;
}

.composer .add[b-81bcamtwes] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}

.composer .add:disabled[b-81bcamtwes] {
    opacity: 0.5;
    cursor: default;
}

.composer .cancel[b-81bcamtwes] {
    background: none;
    color: #8aa394;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
}

.composer .cancel:hover[b-81bcamtwes] {
    color: #cfe;
}

.composer code[b-81bcamtwes] {
    background: #0c1611;
    border-radius: 4px;
    padding: 0 4px;
    color: #cfe;
}

.linklist[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.linkrow[b-81bcamtwes] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linkrow .linkends[b-81bcamtwes] {
    font-size: 12px;
    color: #e8efe9;
}

.linkrow .linkends .arrow[b-81bcamtwes] {
    font-weight: 700;
    padding: 0 4px;
}

.linkrow .linkedit[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.linkrow .linkedit .layoutsel[b-81bcamtwes] {
    flex: 0 0 auto;
}

.linkrow .linkedit .dname[b-81bcamtwes] {
    flex: 1 1 auto;
    min-width: 0;
}

.linkrow .linkedit .stepin[b-81bcamtwes] {
    width: 44px;
    flex: 0 0 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 5px 4px;
    font-size: 12px;
    font-family: inherit;
}

.noterow[b-81bcamtwes] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.noterow .noteedit[b-81bcamtwes] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.trayrow[b-81bcamtwes] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.trayrow .dname[b-81bcamtwes] {
    flex: 1 1 auto;
    min-width: 0;
}

.trayrow .swatches[b-81bcamtwes] {
    flex: 0 0 auto;
    gap: 4px;
}

.trayrow .sw[b-81bcamtwes] {
    width: 20px;
    height: 20px;
}

.presetrow[b-81bcamtwes] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset[b-81bcamtwes] {
    background: #173a28;
    color: #cfe;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 11px;
}

.preset:hover[b-81bcamtwes] {
    background: #1f6f43;
}

/* ---- faceted search filters ---- */
.filters[b-81bcamtwes] { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.frow[b-81bcamtwes] { display: flex; gap: 8px; align-items: center; }

/* MTG quick-add (basic lands + common tokens) */
.quickadd[b-81bcamtwes] { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.qa-row[b-81bcamtwes] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.qa-row:last-child[b-81bcamtwes] { margin-bottom: 0; }
.qa-label[b-81bcamtwes] { font-size: 12px; color: #8aa394; font-weight: 600; }
.qa-qty[b-81bcamtwes] { font-size: 12px; color: #cfe; display: inline-flex; align-items: center; gap: 3px; }
.qa-qty input[b-81bcamtwes] { width: 44px; background: #0f1a14; border: 1px solid #2e463a; color: #e8efe9; border-radius: 6px; padding: 3px 5px; font: inherit; }
.qa-btn[b-81bcamtwes] { background: rgba(255, 255, 255, 0.04); border: 1px solid #2e463a; color: #e8efe9; padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.qa-btn:hover[b-81bcamtwes] { background: rgba(255, 255, 255, 0.09); border-color: #3c5a49; }
.qa-tok[b-81bcamtwes] { color: #cdbbe6; }
.qa-status[b-81bcamtwes] { font-size: 11.5px; color: #8aa394; margin-top: 4px; }
.ftoggle[b-81bcamtwes] { background: #1b2a22; color: #cfe7d8; border: 1px solid #2f5e44; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.ftoggle.on[b-81bcamtwes] { background: #245538; border-color: #3f8e5e; }
.fclear[b-81bcamtwes] { background: none; color: #c79; border: none; cursor: pointer; font-size: 12px; }
.fgroup[b-81bcamtwes] { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.flabel[b-81bcamtwes] { color: #8aa595; font-size: 11px; min-width: 42px; text-transform: uppercase; letter-spacing: .5px; }
.fchip[b-81bcamtwes] { background: #15211b; color: #cfe7d8; border: 1px solid #2c4a39; border-radius: 11px; padding: 2px 9px; cursor: pointer; font-size: 12px; }
.fchip:hover[b-81bcamtwes] { border-color: #4f9e6e; }
.fchip.on[b-81bcamtwes] { background: #2f7a4e; border-color: #58c184; color: #fff; }
.cchip[b-81bcamtwes]::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sw); margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0,0,0,.4); }
.fnum[b-81bcamtwes] { width: 50px; background: #101914; color: #e6efe9; border: 1px solid #2c4a39; border-radius: 5px; padding: 2px 5px; font-size: 12px; }
.fdash[b-81bcamtwes] { color: #6f8a7c; }
.ftext[b-81bcamtwes] { flex: 1; min-width: 120px; background: #101914; color: #e6efe9; border: 1px solid #2c4a39; border-radius: 5px; padding: 2px 7px; font-size: 12px; }
.fapply[b-81bcamtwes] { background: #2f7a4e; color: #fff; border: none; border-radius: 5px; padding: 3px 12px; cursor: pointer; font-size: 12px; }

/* ---- deck stats modal ---- */
.fullstats[b-81bcamtwes] { margin-left: 8px; background: #245538; color: #cfe7d8; border: 1px solid #3f8e5e; border-radius: 6px; padding: 2px 9px; cursor: pointer; font-size: 12px; }
.fullstats:hover[b-81bcamtwes] { background: #2f7a4e; }
/* narrower modal for forms (Decks / Library / Create deck) */
.formmodal[b-81bcamtwes] { width: min(480px, 94vw); max-height: 88vh; overflow-y: auto; background: #14201a; border: 1px solid #2f5e44; border-radius: 12px; padding: 16px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
.smhead[b-81bcamtwes] { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #244736; padding-bottom: 10px; margin-bottom: 14px; }
.smtitle[b-81bcamtwes] { font-size: 18px; font-weight: 700; color: #eaf5ee; }
.smsub[b-81bcamtwes] { font-size: 12px; color: #8aa595; margin-top: 2px; }
.smclose[b-81bcamtwes] { background: none; border: none; color: #9fc; color: #8aa595; font-size: 20px; cursor: pointer; line-height: 1; }
.smclose:hover[b-81bcamtwes] { color: #fff; }
.smtiles[b-81bcamtwes] { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.smtile[b-81bcamtwes] { flex: 1; min-width: 120px; background: #1a2b22; border: 1px solid #2c4a39; border-radius: 9px; padding: 10px 12px; }
.smtile.good[b-81bcamtwes] { border-color: #3f8e5e; background: #18301f; }
.smtile.warn[b-81bcamtwes] { border-color: #a98a3a; background: #2c2715; }
.smtile.bad[b-81bcamtwes] { border-color: #a8473a; background: #2e1b18; }
.smval[b-81bcamtwes] { font-size: 22px; font-weight: 800; color: #f2f8f4; }
.smtlabel[b-81bcamtwes] { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #9ab3a4; margin-top: 2px; }
.smtsub[b-81bcamtwes] { font-size: 11px; color: #7e988a; margin-top: 3px; }
.smgrid[b-81bcamtwes] { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px 22px; }
.smgroup[b-81bcamtwes] { break-inside: avoid; }
.smgroup .gtitle[b-81bcamtwes] { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #8fd0a8; margin-bottom: 5px; border-bottom: 1px solid #20382a; padding-bottom: 3px; }

/* ---- building journal panel ---- */
.jhead[b-81bcamtwes] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jhead .dhead[b-81bcamtwes] { margin: 0; }
.jundo[b-81bcamtwes] { margin-top: 0 !important; flex: 0 0 auto; padding: 6px 10px !important; font-size: 12px !important; }
.jlist[b-81bcamtwes] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.jrow[b-81bcamtwes] {
    display: flex; align-items: center; gap: 9px;
    background: #0c1611; border: 1px solid #2e463a; border-radius: 8px;
    padding: 7px 8px; border-left-width: 3px;
}
.jrow.add[b-81bcamtwes] { border-left-color: #2e9159; }
.jrow.remove[b-81bcamtwes] { border-left-color: #c0563f; }
.jrow.move[b-81bcamtwes] { border-left-color: #5a96c8; }
.jthumb[b-81bcamtwes] { width: 30px; height: 42px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: #243b4d; }
.jpair[b-81bcamtwes] { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.jpair .jarrow[b-81bcamtwes] { color: #8aa394; font-size: 13px; }
.jbody[b-81bcamtwes] { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.jlabel[b-81bcamtwes] { font-size: 12px; color: #e8efe9; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.jk[b-81bcamtwes] { font-weight: 600; }
.jk.add[b-81bcamtwes] { color: #8fe0ad; }
.jk.remove[b-81bcamtwes] { color: #e89a88; }
.jk.move[b-81bcamtwes] { color: #9cc8e8; }
.jswap[b-81bcamtwes] { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #cdbb6a; font-weight: 700; }
.jzone[b-81bcamtwes] { font-size: 11px; color: #8aa394; }
.jreason[b-81bcamtwes] {
    background: #091310; border: 1px solid #243a30; border-radius: 6px;
    color: #e8efe9; padding: 4px 7px; font-size: 12px; font-family: inherit; min-width: 0; width: 100%;
}
.jreason[b-81bcamtwes]::placeholder { color: #5c7567; }

/* Always-on legality banner (board overlay) */
.legbanner[b-81bcamtwes] {
    position: absolute;
    left: 16px;
    top: 60px;
    z-index: 15;
    max-width: 520px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    background: rgba(40, 16, 14, 0.92);
    border: 1px solid #7a2f28;
    border-left: 3px solid #e0584a;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.legbanner .legicon[b-81bcamtwes] {
    color: #ff6a5a;
    font-size: 16px;
    line-height: 1.4;
}

.legbanner .legissues[b-81bcamtwes] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legbanner .legissue[b-81bcamtwes] {
    font-size: 12px;
    line-height: 1.4;
}

.legbanner .legissue.err[b-81bcamtwes] {
    color: #f0b3ab;
}

.legbanner .legissue.warn[b-81bcamtwes] {
    color: #e8d9a8;
}

/* Always-on compact stats panel (board overlay, top-right). Sits above the canvas but
   below modal backdrops, so opening a modal dims it rather than fighting it. */
.ministats[b-81bcamtwes] {
    position: absolute;
    right: 16px;
    top: 60px;
    z-index: 14;
    width: 272px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 10px 12px 12px;
    background: rgba(13, 22, 17, 0.94);
    border: 1px solid #2c4a39;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.ministats .mshead[b-81bcamtwes] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ministats .mstitle[b-81bcamtwes] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8fd0a8;
    font-weight: 700;
}

.ministats .msactions[b-81bcamtwes] { display: flex; gap: 4px; }

.ministats .msbtn[b-81bcamtwes] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    color: #cfe;
    border: 1px solid #2e463a;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.ministats .msbtn:hover[b-81bcamtwes] { background: #1f6f43; border-color: #2e9159; }

.ministats .msempty[b-81bcamtwes] { font-size: 12px; color: #7e988a; margin: 4px 0 0; }

/* The header doubles as the drag handle (ministats.js wires pointer events to it). */
.ministats .mshead[b-81bcamtwes] { cursor: grab; touch-action: none; user-select: none; }
.ministats .msactions .msbtn[b-81bcamtwes] { cursor: pointer; }

/* Collapsed: header strip only — drop the body's reserved height and the header's bottom gap. */
.ministats.collapsed[b-81bcamtwes] { max-height: none; overflow: visible; }
.ministats.collapsed .mshead[b-81bcamtwes] { margin-bottom: 0; }

/* ---- deck compare (Import/Export panel) ---- */
.cmpdiff[b-81bcamtwes] { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.cmpdiff .cmphead[b-81bcamtwes] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin: 8px 0 2px; }
.cmpdiff .cmphead.add[b-81bcamtwes] { color: #6fcf97; }
.cmpdiff .cmphead.cut[b-81bcamtwes] { color: #e08a7a; }
.cmpdiff .cmphead.chg[b-81bcamtwes] { color: #d6b33a; }
.cmpdiff .cmprow[b-81bcamtwes] { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 1px 4px; border-radius: 4px; }
.cmpdiff .cmprow:hover[b-81bcamtwes] { background: rgba(255, 255, 255, 0.04); }
.cmpdiff .cmpq[b-81bcamtwes] { flex: 0 0 auto; min-width: 42px; font-variant-numeric: tabular-nums; font-weight: 700; color: #cfe; }
.cmpdiff .cmprow.add .cmpq[b-81bcamtwes] { color: #6fcf97; }
.cmpdiff .cmprow.cut .cmpq[b-81bcamtwes] { color: #e08a7a; }
.cmpdiff .cmprow.chg .cmpq[b-81bcamtwes] { color: #d6b33a; }
.cmpdiff .cmpn[b-81bcamtwes] { color: #d8e6dd; }

/* ---- playtest (goldfish) toolbar cluster ---- */
.toolbar .playbar[b-81bcamtwes] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .playbar .vsep[b-81bcamtwes] { width: 1px; align-self: stretch; background: #2e463a; margin: 2px 2px; }
.toolbar .playbar .ptc[b-81bcamtwes] { font-size: 12px; color: #8aa394; white-space: nowrap; }
.toolbar .playbar .ptc b[b-81bcamtwes] { color: #e8efe9; font-variant-numeric: tabular-nums; }
.toolbar .playbar .ptlife[b-81bcamtwes] { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #8aa394; }
.toolbar .playbar .ptlife b[b-81bcamtwes] { color: #e8efe9; min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.toolbar .playbar .ptlife button[b-81bcamtwes] {
    width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
    background: rgba(255,255,255,0.05); color: #cfe; border: 1px solid #2e463a;
    font-size: 13px; line-height: 1; padding: 0;
}
.toolbar .playbar .ptlife button:hover[b-81bcamtwes] { background: #1f6f43; border-color: #2e9159; }
.toolbar .playbar .pthand[b-81bcamtwes] { font-size: 12px; color: #cdbb6a; white-space: nowrap; }

/* ---- first-run empty-state quick-start (board overlay; clears once a card is added) ---- */
.emptystate[b-81bcamtwes] {
    position: absolute;
    top: 49px; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;            /* board stays interactive; only the card catches clicks */
    z-index: 6;
}
.es-card[b-81bcamtwes] {
    pointer-events: auto;
    width: min(460px, 92%);
    background: rgba(17, 32, 26, 0.96);
    border: 1px solid #2e463a;
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
}
.es-title[b-81bcamtwes] { font-size: 19px; font-weight: 700; color: #e8efe9; }
.es-sub[b-81bcamtwes] { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: #b9cabf; }
.es-sub strong[b-81bcamtwes], .es-hint strong[b-81bcamtwes] { color: #cfe; }
.es-actions[b-81bcamtwes] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.es-btn[b-81bcamtwes] {
    background: rgba(255, 255, 255, 0.04); color: #e8efe9;
    border: 1px solid #2e463a; border-radius: 9px;
    padding: 9px 13px; font-size: 13px; font-family: inherit; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.es-btn:hover[b-81bcamtwes] { background: rgba(255, 255, 255, 0.08); border-color: #3c5a49; }
.es-btn.primary[b-81bcamtwes] { background: #1f6f43; border-color: #2e9159; color: #fff; }
.es-btn.primary:hover[b-81bcamtwes] { background: #258050; }
.es-btn:disabled[b-81bcamtwes] { opacity: .6; cursor: default; }
.es-hint[b-81bcamtwes] { margin-top: 14px; font-size: 11.5px; color: #8aa394; line-height: 1.5; }

/* ---- < 1024px: bottom rail, compact top bar ---- */
@media (max-width: 1023.98px) {
    .matbody[b-81bcamtwes] { flex-direction: column; }
    /* the always-on mini-stats overlay covers most of a phone board and eats touches —
       small screens get stats via the Stats sheet instead */
    .ministats[b-81bcamtwes] { display: none; }
    /* top bar: hide the desktop table cluster — it lives in the ≡ deckbar sheet.
       Direct children only (>) so the playtest .playbar's inner buttons stay visible. */
    .toolbar .tb-right > .sel[b-81bcamtwes],
    .toolbar .tb-right > .ghost:not(.db-toggle)[b-81bcamtwes] { display: none; }
    /* Decks manager (a centered .formmodal) becomes a bottom sheet */
    .statsmodal-bg[b-81bcamtwes] { align-items: flex-end; }
    .statsmodal-bg .formmodal[b-81bcamtwes] {
        width: 100%;
        max-width: none;
        max-height: 68vh;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
        overflow-y: auto;
        box-sizing: border-box;
        margin: 0;
    }
    .statsmodal-bg .formmodal[b-81bcamtwes]::before {
        content: ""; display: block; width: 44px; height: 4px; border-radius: 2px;
        background: #2e463a; margin: 8px auto 2px;
    }
}
@media (min-width: 1024px) {
    .toolbar .db-toggle[b-81bcamtwes] { display: none; }
}
/* /Components/Pages/Account.razor.rz.scp.css */
.authpage[b-xnz2zvkrt3] {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2c22, #0e1512);
    color: #e8efe9;
    font-family: system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 0;
}

.authcard[b-xnz2zvkrt3] {
    width: min(340px, 92vw);
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.authcard.wide[b-xnz2zvkrt3] {
    width: min(420px, 92vw);
}

.authcard h1[b-xnz2zvkrt3] {
    margin: 0;
    font-size: 26px;
}

.authcard .sub[b-xnz2zvkrt3] {
    margin: 4px 0 18px;
    color: #8aa394;
    font-size: 13px;
}

.authcard .sub strong[b-xnz2zvkrt3] {
    color: #cfe;
}

.authcard .err[b-xnz2zvkrt3] {
    background: rgba(200, 80, 80, 0.15);
    border: 1px solid #7a3b3b;
    color: #e8a;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.authcard .ok[b-xnz2zvkrt3] {
    background: rgba(80, 200, 130, 0.15);
    border: 1px solid #2e6f47;
    color: #9fe8bd;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.section[b-xnz2zvkrt3] {
    margin: 20px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8aa394;
    text-align: left;
}

.section.danger[b-xnz2zvkrt3] {
    color: #d98080;
}

.authform[b-xnz2zvkrt3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authform input[b-xnz2zvkrt3] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    color: #e8efe9;
    padding: 10px 12px;
    font-size: 14px;
}

.authform button[b-xnz2zvkrt3] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 2px;
}

.authform button.alt[b-xnz2zvkrt3] {
    background: #173a28;
    border-color: #2e463a;
    color: #cfe;
}

.authform button.danger[b-xnz2zvkrt3] {
    background: #5a1f1f;
    border-color: #7a3b3b;
    color: #f3c9c9;
}

.export[b-xnz2zvkrt3] {
    display: inline-block;
    color: #cfe;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.export:hover[b-xnz2zvkrt3] {
    background: rgba(255, 255, 255, 0.07);
}

.skip[b-xnz2zvkrt3] {
    display: inline-block;
    margin-top: 20px;
    color: #8aa394;
    font-size: 12px;
    text-decoration: none;
}

.skip:hover[b-xnz2zvkrt3] {
    color: #cfe;
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
.authpage[b-vswsbma3jo] {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2c22, #0e1512);
    color: #e8efe9;
    font-family: system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.authcard[b-vswsbma3jo] {
    width: min(340px, 92vw);
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.authcard h1[b-vswsbma3jo] {
    margin: 0;
    font-size: 26px;
}

.authcard .sub[b-vswsbma3jo] {
    margin: 4px 0 18px;
    color: #8aa394;
    font-size: 13px;
}

.authcard .err[b-vswsbma3jo] {
    background: rgba(200, 80, 80, 0.15);
    border: 1px solid #7a3b3b;
    color: #e8a;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.authcard .ok[b-vswsbma3jo] {
    background: rgba(80, 200, 130, 0.15);
    border: 1px solid #2e6f47;
    color: #9fe8bd;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.authform[b-vswsbma3jo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authform input[b-vswsbma3jo] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    color: #e8efe9;
    padding: 10px 12px;
    font-size: 14px;
}

.authform button[b-vswsbma3jo] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 2px;
}

.skip[b-vswsbma3jo] {
    display: inline-block;
    margin-top: 16px;
    color: #8aa394;
    font-size: 12px;
    text-decoration: none;
}

.skip:hover[b-vswsbma3jo] {
    color: #cfe;
}
/* /Components/Pages/Launcher.razor.rz.scp.css */
.launch[b-oqtr7ygjxn] {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2c22, #0e1512);
    color: #e8efe9;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
}

/* top header row spanning the page */
.launch-header[b-oqtr7ygjxn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand[b-oqtr7ygjxn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.brand .mark[b-oqtr7ygjxn] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: linear-gradient(150deg, #2e9159, #134a2b);
    border: 1px solid #6fd39a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* hero + tiles fill the remaining space; scroll when the content is taller than the viewport
   (centering would otherwise clip the top/bottom with no way to reach it). */
.launch-center[b-oqtr7ygjxn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: max(4vh, 20px) 16px 32px;
}

.userbar[b-oqtr7ygjxn] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #8aa394;
}

.userbar .who[b-oqtr7ygjxn] {
    color: #cfe;
    font-weight: 600;
}

/* username dropdown (CSS-only <details>/<summary>) */
.who-menu[b-oqtr7ygjxn] {
    position: relative;
}

.who-menu summary.who[b-oqtr7ygjxn] {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.who-menu summary.who[b-oqtr7ygjxn]::-webkit-details-marker {
    display: none;
}

.who-menu .caret[b-oqtr7ygjxn] {
    font-size: 10px;
    color: #8aa394;
    transition: transform 0.12s ease;
}

.who-menu[open] .caret[b-oqtr7ygjxn] {
    transform: rotate(180deg);
}

.who-menu .who-panel[b-oqtr7ygjxn] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
    padding: 8px;
    background: #101913;
    border: 1px solid #2e463a;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 30;
}

.who-menu .who-panel a[b-oqtr7ygjxn],
.who-menu .who-panel button[b-oqtr7ygjxn] {
    width: 100%;
    text-align: left;
}

.who-menu .who-panel form[b-oqtr7ygjxn] {
    margin: 0;
}

.userbar a[b-oqtr7ygjxn], .userbar button[b-oqtr7ygjxn] {
    color: #e8efe9;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 6px 11px;
    text-decoration: none;
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.userbar a:hover[b-oqtr7ygjxn], .userbar button:hover[b-oqtr7ygjxn] {
    background: rgba(255, 255, 255, 0.07);
    border-color: #3c5a49;
}

.userbar form[b-oqtr7ygjxn] {
    margin: 0;
}

.launch h1[b-oqtr7ygjxn] {
    margin: 0;
    font-size: 38px;
    letter-spacing: 0.5px;
}

.tagline[b-oqtr7ygjxn] {
    margin: 10px 0 2px;
    color: #cfe;
    font-size: 15px;
    text-align: center;
    max-width: 620px;
    padding: 0 16px;
}

.launch .sub[b-oqtr7ygjxn] {
    margin: 14px 0 22px;
    color: #8aa394;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* "how it works" strip under the tiles */
.howto[b-oqtr7ygjxn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin: 26px 0 8px;
    max-width: min(720px, 94vw);
}

.step[b-oqtr7ygjxn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #b9cabf;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #25382e;
    border-radius: 20px;
    padding: 6px 13px 6px 7px;
}

.stepn[b-oqtr7ygjxn] {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: linear-gradient(150deg, #2e9159, #134a2b);
    border: 1px solid #6fd39a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.identity[b-oqtr7ygjxn] {
    margin: 14px 0 0;
    color: #8aa394;
    font-size: 12.5px;
    text-align: center;
}

.identity strong[b-oqtr7ygjxn] { color: #cfe; }

/* 5-wide grid of card-shaped tiles (all games + MindDeck). */
.tiles[b-oqtr7ygjxn] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: min(980px, 96vw);
}

.tile[b-oqtr7ygjxn] {
    aspect-ratio: 5 / 7;                 /* a card */
    border-radius: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* legible caption chip over a busy card back */
.tile span[b-oqtr7ygjxn] {
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 12px;
    text-align: center;
}

.tile:hover[b-oqtr7ygjxn] {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

/* the real card backs, layered over the old per-game gradient (shows while loading / if missing) */
.tile.mtg[b-oqtr7ygjxn] { background-image: url("/backs/mtg.jpg"), linear-gradient(150deg, #b5651d, #6b3410); }
.tile.pkmn[b-oqtr7ygjxn] { background-image: url("/backs/pkmn.jpg"), linear-gradient(150deg, #2f6fb4, #14365f); }
.tile.ygo[b-oqtr7ygjxn] { background-image: url("/backs/ygo.webp"), linear-gradient(150deg, #7a3ea8, #3a1b56); }
.tile.swu[b-oqtr7ygjxn] { background-image: url("/backs/swu.jpg"), linear-gradient(150deg, #3a4a8c, #161d3e); }
.tile.lorcana[b-oqtr7ygjxn] { background-image: url("/backs/lorcana.png"), linear-gradient(150deg, #b8902e, #6b5015); }
.tile.op[b-oqtr7ygjxn] { background-image: url("/backs/op.webp"), linear-gradient(150deg, #c0392b, #6e1b13); }
.tile.dgm[b-oqtr7ygjxn] { background-image: url("/backs/dgm.png"), linear-gradient(150deg, #2a6cc4, #122a52); }
.tile.dbs[b-oqtr7ygjxn] { background-image: url("/backs/dbs.jpg"), linear-gradient(150deg, #d6892a, #7a4310); }
.tile.gcg[b-oqtr7ygjxn] { background-image: url("/backs/gcg.webp"), linear-gradient(150deg, #4a5a78, #1d2738); }

.tile.mind[b-oqtr7ygjxn] { background-image: url("/backs/mind.png"), linear-gradient(150deg, #2e9159, #134a2b); }
/* /Components/Pages/Login.razor.rz.scp.css */
.authpage[b-maj4kiuc9x] {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2c22, #0e1512);
    color: #e8efe9;
    font-family: system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.authcard[b-maj4kiuc9x] {
    width: min(340px, 92vw);
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.authcard h1[b-maj4kiuc9x] {
    margin: 0;
    font-size: 26px;
}

.authcard .sub[b-maj4kiuc9x] {
    margin: 4px 0 18px;
    color: #8aa394;
    font-size: 13px;
}

.authcard .err[b-maj4kiuc9x] {
    background: rgba(200, 80, 80, 0.15);
    border: 1px solid #7a3b3b;
    color: #e8a;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.authcard .ok[b-maj4kiuc9x] {
    background: rgba(80, 200, 130, 0.15);
    border: 1px solid #2e6f47;
    color: #9fe8bd;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.authform[b-maj4kiuc9x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authform input[b-maj4kiuc9x] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    color: #e8efe9;
    padding: 10px 12px;
    font-size: 14px;
}

.authform button[b-maj4kiuc9x] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 2px;
}

.authform button.alt[b-maj4kiuc9x] {
    background: #173a28;
    border-color: #2e463a;
    color: #cfe;
}

.remember[b-maj4kiuc9x] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8aa394;
    font-size: 12px;
    margin-top: 2px;
}

.remember input[b-maj4kiuc9x] {
    accent-color: #2e9159;
}

.forgot[b-maj4kiuc9x] {
    margin: 10px 0 0;
    font-size: 12px;
}

.forgot a[b-maj4kiuc9x] {
    color: #8aa394;
}

.forgot a:hover[b-maj4kiuc9x] {
    color: #cfe;
}

.or[b-maj4kiuc9x] {
    color: #6e8478;
    font-size: 12px;
    margin: 14px 0;
}

.skip[b-maj4kiuc9x] {
    display: inline-block;
    margin-top: 16px;
    color: #8aa394;
    font-size: 12px;
    text-decoration: none;
}

.skip:hover[b-maj4kiuc9x] {
    color: #cfe;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.authpage[b-k2zu3eiorc] {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2c22, #0e1512);
    color: #e8efe9;
    font-family: system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.authcard[b-k2zu3eiorc] {
    width: min(340px, 92vw);
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.authcard h1[b-k2zu3eiorc] {
    margin: 0;
    font-size: 26px;
}

.authcard .sub[b-k2zu3eiorc] {
    margin: 4px 0 18px;
    color: #8aa394;
    font-size: 13px;
}

.authcard .err[b-k2zu3eiorc] {
    background: rgba(200, 80, 80, 0.15);
    border: 1px solid #7a3b3b;
    color: #e8a;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    margin: 0 0 12px;
}

.authform[b-k2zu3eiorc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authform input[b-k2zu3eiorc] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    color: #e8efe9;
    padding: 10px 12px;
    font-size: 14px;
}

.authform button[b-k2zu3eiorc] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 2px;
}

.skip[b-k2zu3eiorc] {
    display: inline-block;
    margin-top: 16px;
    color: #8aa394;
    font-size: 12px;
    text-decoration: none;
}

.skip:hover[b-k2zu3eiorc] {
    color: #cfe;
}
/* /Components/Pages/Share.razor.rz.scp.css */
.authpage[b-rzcaud8t5z] {
    position: fixed;
    inset: 0;
    background: radial-gradient(1200px 600px at 50% -10%, #1a2c22, #0e1512);
    color: #e8efe9;
    font-family: system-ui, sans-serif;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding: 6vh 0;
}

.authcard[b-rzcaud8t5z] {
    width: min(420px, 92vw);
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.authcard h1[b-rzcaud8t5z] {
    margin: 0;
    font-size: 24px;
}

.authcard .sub[b-rzcaud8t5z] {
    margin: 4px 0 18px;
    color: #8aa394;
    font-size: 13px;
}

.authform[b-rzcaud8t5z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.authform button[b-rzcaud8t5z] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 11px;
    cursor: pointer;
    font-size: 15px;
}

.loginlink[b-rzcaud8t5z] {
    display: inline-block;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 15px;
    text-decoration: none;
}

.loginlink:hover[b-rzcaud8t5z] {
    background: #258050;
}

.skip[b-rzcaud8t5z] {
    display: inline-block;
    margin-top: 14px;
    color: #8aa394;
    font-size: 12px;
    text-decoration: none;
}

.skip:hover[b-rzcaud8t5z] {
    color: #cfe;
}

.sharelist[b-rzcaud8t5z] {
    margin-top: 18px;
    border-top: 1px solid #25382e;
    padding-top: 12px;
    text-align: left;
    max-height: 46vh;
    overflow: auto;
}

.sharerow[b-rzcaud8t5z] {
    display: flex;
    gap: 8px;
    padding: 3px 2px;
    font-size: 13px;
    color: #d6e2da;
}

.sharerow .sq[b-rzcaud8t5z] {
    color: #8aa394;
    min-width: 22px;
    text-align: right;
}
/* /Components/Panels/ComboPanel.razor.rz.scp.css */
/* Combo panel + detail modal + lightbox styles, copied (scoped) from Mat.razor.css so this
   extracted component renders identically. Over-inclusive ranges are harmless under scope. */

.searchpanel[b-aefvf0aq3f] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.searchhead[b-aefvf0aq3f] {
    display: flex;
    gap: 6px;
    padding: 10px;
}

.syncbar[b-aefvf0aq3f] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid #25382e;
    font-size: 11px;
    color: #8aa394;
}

.syncbar .counts[b-aefvf0aq3f] {
    flex: 1 1 auto;
}

.syncbar button[b-aefvf0aq3f] {
    background: #173a28;
    color: #cfe;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
}

.searchbox[b-aefvf0aq3f] {
    flex: 1 1 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.searchhead button[b-aefvf0aq3f] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 0 12px;
    cursor: pointer;
}

.searchstatus[b-aefvf0aq3f] {
    padding: 0 12px 8px;
    font-size: 12px;
    color: #8aa394;
}

.searchstatus .err[b-aefvf0aq3f] {
    color: #e88;
}

.results[b-aefvf0aq3f] {

.rbtn {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
}

.rbtn:hover[b-aefvf0aq3f] { background: #258050; }
.rbtn.close[b-aefvf0aq3f] { background: #173a28; color: #cfe; border-color: #2e463a; }
.rbtn.save[b-aefvf0aq3f] { background: #1f6f43; }

.rlabel[b-aefvf0aq3f] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.readernote[b-aefvf0aq3f] {
    flex: 1 1 auto;
    min-height: 160px;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    color: #e8efe9;
    padding: 9px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

.reader:focus[b-aefvf0aq3f] { outline: none; }

.rtabs[b-aefvf0aq3f] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #2e463a;
    margin-top: 4px;
}

.rtab[b-aefvf0aq3f] {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #8aa394;
    padding: 6px 9px;
    cursor: pointer;
    font-size: 12px;
}

.rtab:hover[b-aefvf0aq3f] { color: #cfe; }


.combocard[b-aefvf0aq3f] {
    background: #16241b;
    border: 1px solid #244231;
    border-left: 3px solid #2e9159;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.combocard.near[b-aefvf0aq3f] { border-left-color: #c9b958; }

.combocard .cmbtn[b-aefvf0aq3f] {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 5px;
    border: 1px solid #2e9159;
    background: #1b2d21;
    color: #cdebd9;
    cursor: pointer;
}

.combocard .cmbtn:hover[b-aefvf0aq3f] { background: #244231; }

.combosep[b-aefvf0aq3f] { border: 0; border-top: 1px solid #1c3225; margin: 14px 0; }

.combocard[b-aefvf0aq3f] { cursor: pointer; transition: border-color .1s ease, background .1s ease; }
.combocard:hover[b-aefvf0aq3f] { border-color: #2e9159; background: #1b2d21; }
.comborow[b-aefvf0aq3f] { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.cmbtn.ghost[b-aefvf0aq3f] { border-color: #2a3b32; background: transparent; color: #93b3a1; }
.combonote[b-aefvf0aq3f] { font-size: 12px; margin-left: 4px; }
/* Compact result headline (was the full wall-of-text Produces string) */
.comboresult[b-aefvf0aq3f] { font-size: 12px; font-weight: 600; color: #cdebd9; margin-top: 7px; display: flex; align-items: center; gap: 4px; line-height: 1.25; }
.cmore[b-aefvf0aq3f] { font-size: 10px; font-weight: 600; color: #06120b; background: #58c98a; border-radius: 8px; padding: 1px 6px; }
.comboown[b-aefvf0aq3f] { font-size: 10px; color: #8aa394; margin-left: auto; }

/* Piece thumbnails in the panel */
.combothumbs[b-aefvf0aq3f] { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 2px; }
.cthumb[b-aefvf0aq3f] {
    position: relative;
    width: 46px;
    aspect-ratio: 5 / 7;
    border-radius: 4px;
    overflow: hidden;
    background: #0e1813;
    border: 1px solid #244231;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cthumb img[b-aefvf0aq3f] { width: 100%; height: 100%; object-fit: cover; display: block; }
.cthumb.missing[b-aefvf0aq3f] { border: 1px dashed #c9b958; opacity: .85; }
.cthumb.missing img[b-aefvf0aq3f] { filter: grayscale(.7) brightness(.6); }
.cthumbname[b-aefvf0aq3f] { font-size: 8px; color: #93b3a1; text-align: center; padding: 2px; line-height: 1.1; }
.needtag[b-aefvf0aq3f] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    background: #c9b958;
    color: #06120b;
}

/* Combo detail modal */
.combomodal[b-aefvf0aq3f] {
    background: #11201a;
    border: 1px solid #244231;
    border-radius: 10px;
    width: min(680px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 16px 18px;
    color: #e8efe9;
}
.cmprod[b-aefvf0aq3f] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.prodchip[b-aefvf0aq3f] { font-size: 12px; font-weight: 600; background: #1b3325; border: 1px solid #2e6f49; color: #9fe0bd; border-radius: 12px; padding: 3px 9px; }
.cmpieces[b-aefvf0aq3f] { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cmpiece[b-aefvf0aq3f] { width: 130px; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.cmpiece img[b-aefvf0aq3f] { width: 100%; border-radius: 7px; display: block; }
.cmpiece.missing img[b-aefvf0aq3f] { filter: grayscale(.7) brightness(.6); outline: 2px dashed #c9b958; }
.cmpieceph[b-aefvf0aq3f] { width: 100%; aspect-ratio: 5/7; border-radius: 7px; background: #0e1813; border: 1px solid #244231; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; padding: 6px; color: #93b3a1; }
.cmpiecename[b-aefvf0aq3f] { font-size: 11px; text-align: center; line-height: 1.2; }
.cmsteps[b-aefvf0aq3f] { margin-bottom: 14px; }
.cmstep[b-aefvf0aq3f] { font-size: 12px; color: #c8d8ce; padding: 4px 0; border-bottom: 1px solid #16261d; }
.cmnote[b-aefvf0aq3f] { margin-bottom: 12px; }
.cmpiece img[b-aefvf0aq3f] { cursor: zoom-in; }

/* Big single-card lightbox (above the combo modal) */
.lightbox-bg[b-aefvf0aq3f] {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 4, 0.86);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    cursor: zoom-out;
}
.lightbox-img[b-aefvf0aq3f] {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}

/* Thesaurus "Similar cards" strip */


.composer[b-aefvf0aq3f] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;       /* the side panel is fixed-height — let its content scroll */
    flex: 1 1 auto;
    min-height: 0;
}

.composer label[b-aefvf0aq3f] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.composer .body[b-aefvf0aq3f] {
    min-height: 120px;
    resize: vertical;
}

.composer .swatches[b-aefvf0aq3f] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.composer .sw[b-aefvf0aq3f] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.composer .sw.on[b-aefvf0aq3f] {
    border-color: #fff;
}

.composer .add[b-aefvf0aq3f] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}

.composer .add:disabled[b-aefvf0aq3f] {
    opacity: 0.5;
    cursor: default;
}

.composer .cancel[b-aefvf0aq3f] {
    background: none;
    color: #8aa394;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
}

.composer .cancel:hover[b-aefvf0aq3f] {
    color: #cfe;
}

.composer code[b-aefvf0aq3f] {
    background: #0c1611;
    border-radius: 4px;
    padding: 0 4px;
    color: #cfe;
}

.linklist[b-aefvf0aq3f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.linkrow[b-aefvf0aq3f] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.linkrow .linkends[b-aefvf0aq3f] {
    font-size: 12px;
    color: #e8efe9;
}

.linkrow .linkends .arrow[b-aefvf0aq3f] {
    font-weight: 700;
    padding: 0 4px;
}

.linkrow .linkedit[b-aefvf0aq3f] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.linkrow .linkedit .layoutsel[b-aefvf0aq3f] {
    flex: 0 0 auto;
}

.linkrow .linkedit .dname[b-aefvf0aq3f] {
    flex: 1 1 auto;
    min-width: 0;
}

.linkrow .linkedit .stepin[b-aefvf0aq3f] {
    width: 44px;
    flex: 0 0 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 5px 4px;
    font-size: 12px;
    font-family: inherit;
}

.noterow[b-aefvf0aq3f] {
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.noterow .noteedit[b-aefvf0aq3f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}


.statsmodal-bg[b-aefvf0aq3f] { position: fixed; inset: 0; background: rgba(4,10,7,0.72); display: flex; align-items: center; justify-content: center; z-index: 100; }
.statsmodal[b-aefvf0aq3f] { width: min(1180px, 96vw); max-height: 92vh; overflow-y: auto; background: #14201a; border: 1px solid #2f5e44; border-radius: 12px; padding: 18px 22px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
/* narrower modal for forms (Decks / Library / Create deck) */
.formmodal[b-aefvf0aq3f] { width: min(480px, 94vw); max-height: 88vh; overflow-y: auto; background: #14201a; border: 1px solid #2f5e44; border-radius: 12px; padding: 16px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
.smhead[b-aefvf0aq3f] { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #244736; padding-bottom: 10px; margin-bottom: 14px; }
.smtitle[b-aefvf0aq3f] { font-size: 18px; font-weight: 700; color: #eaf5ee; }
.smsub[b-aefvf0aq3f] { font-size: 12px; color: #8aa595; margin-top: 2px; }
.smclose[b-aefvf0aq3f] { background: none; border: none; color: #9fc; color: #8aa595; font-size: 20px; cursor: pointer; line-height: 1; }
.smclose:hover[b-aefvf0aq3f] { color: #fff; }

/* /Components/Panels/ComposerPanel.razor.rz.scp.css */
/* Composer chrome, copied (scoped) from Mat.razor.css for the extracted component. */

.searchpanel[b-9h9b5rgjoz] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.searchbox[b-9h9b5rgjoz] {
    flex: 1 1 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.composer[b-9h9b5rgjoz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;       /* the side panel is fixed-height — let its content scroll */
    flex: 1 1 auto;
    min-height: 0;
}

.composer label[b-9h9b5rgjoz] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.composer .body[b-9h9b5rgjoz] {
    min-height: 120px;
    resize: vertical;
}

.composer .swatches[b-9h9b5rgjoz] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.composer .sw[b-9h9b5rgjoz] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.composer .sw.on[b-9h9b5rgjoz] {
    border-color: #fff;
}

.composer .add[b-9h9b5rgjoz] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}

.composer .add:disabled[b-9h9b5rgjoz] {
    opacity: 0.5;
    cursor: default;
}

.composer .cancel[b-9h9b5rgjoz] {
    background: none;
    color: #8aa394;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
}

.composer .cancel:hover[b-9h9b5rgjoz] {
    color: #cfe;
}

.composer code[b-9h9b5rgjoz] {
    background: #0c1611;
    border-radius: 4px;
    padding: 0 4px;
    color: #cfe;
}


/* /Components/Panels/HousePanel.razor.rz.scp.css */
/* Panel chrome — copied from Mat.razor.css so this extracted component is styled identically.
   (Shared chrome is duplicated per panel during the Phase 2 split; a later cleanup can hoist the
   common rules into one global sheet.) */

.searchpanel[b-n6gb4y2bqn] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.searchbox[b-n6gb4y2bqn] {
    flex: 1 1 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.searchstatus[b-n6gb4y2bqn] {
    padding: 0 12px 8px;
    font-size: 12px;
    color: #8aa394;
}

.composer[b-n6gb4y2bqn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;       /* the side panel is fixed-height — let its content scroll */
    flex: 1 1 auto;
    min-height: 0;
}

.composer label[b-n6gb4y2bqn] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.composer .body[b-n6gb4y2bqn] {
    min-height: 120px;
    resize: vertical;
}

.composer .add[b-n6gb4y2bqn] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}

.composer .add:disabled[b-n6gb4y2bqn] {
    opacity: 0.5;
    cursor: default;
}

.composer .cancel[b-n6gb4y2bqn] {
    background: none;
    color: #8aa394;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
}

.composer .cancel:hover[b-n6gb4y2bqn] {
    color: #cfe;
}

.composer code[b-n6gb4y2bqn] {
    background: #0c1611;
    border-radius: 4px;
    padding: 0 4px;
    color: #cfe;
}

.presetrow[b-n6gb4y2bqn] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset[b-n6gb4y2bqn] {
    background: #173a28;
    color: #cfe;
    border: 1px solid #2e463a;
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 11px;
}

.preset:hover[b-n6gb4y2bqn] {
    background: #1f6f43;
}
/* /Components/Panels/ImportExportPanel.razor.rz.scp.css */
/* Panel chrome + compare-diff styles copied from Mat.razor.css so this extracted component renders
   identically. (Global app.css still applies; only Mat's *scoped* rules need copying.) */

.searchpanel[b-jlpsr20dxn] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.searchbox[b-jlpsr20dxn] {
    flex: 1 1 auto;
    background: #0c1611;
    border: 1px solid #2e463a;
    border-radius: 6px;
    color: #e8efe9;
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
}

.searchstatus[b-jlpsr20dxn] {
    padding: 0 12px 8px;
    font-size: 12px;
    color: #8aa394;
}

.composer[b-jlpsr20dxn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.composer label[b-jlpsr20dxn] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.composer .body[b-jlpsr20dxn] {
    min-height: 120px;
    resize: vertical;
}

.composer .add[b-jlpsr20dxn] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}

.combosep[b-jlpsr20dxn] { border: 0; border-top: 1px solid #1c3225; margin: 14px 0; }

.cmpdiff[b-jlpsr20dxn] { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.cmpdiff .cmphead[b-jlpsr20dxn] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin: 8px 0 2px; }
.cmpdiff .cmphead.add[b-jlpsr20dxn] { color: #6fcf97; }
.cmpdiff .cmphead.cut[b-jlpsr20dxn] { color: #e08a7a; }
.cmpdiff .cmphead.chg[b-jlpsr20dxn] { color: #d6b33a; }
.cmpdiff .cmprow[b-jlpsr20dxn] { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 1px 4px; border-radius: 4px; }
.cmpdiff .cmprow:hover[b-jlpsr20dxn] { background: rgba(255, 255, 255, 0.04); }
.cmpdiff .cmpq[b-jlpsr20dxn] { flex: 0 0 auto; min-width: 42px; font-variant-numeric: tabular-nums; font-weight: 700; color: #cfe; }
.cmpdiff .cmprow.add .cmpq[b-jlpsr20dxn] { color: #6fcf97; }
.cmpdiff .cmprow.cut .cmpq[b-jlpsr20dxn] { color: #e08a7a; }
.cmpdiff .cmprow.chg .cmpq[b-jlpsr20dxn] { color: #d6b33a; }
.cmpdiff .cmpn[b-jlpsr20dxn] { color: #d8e6dd; }
/* /Components/Panels/JournalPanel.razor.rz.scp.css */
/* Panel chrome + journal styles copied from Mat.razor.css so this extracted component renders
   identically. (Global app.css still applies; only Mat's *scoped* rules need copying.) */

.searchpanel[b-aqot86afj4] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.searchstatus[b-aqot86afj4] {
    padding: 0 12px 8px;
    font-size: 12px;
    color: #8aa394;
}

.composer[b-aqot86afj4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.composer .add[b-aqot86afj4] {
    margin-top: 10px;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 6px;
    padding: 9px;
    cursor: pointer;
    font-size: 13px;
}

.jhead[b-aqot86afj4] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jhead .dhead[b-aqot86afj4] { margin: 0; }
.jundo[b-aqot86afj4] { margin-top: 0 !important; flex: 0 0 auto; padding: 6px 10px !important; font-size: 12px !important; }
.jlist[b-aqot86afj4] { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.jrow[b-aqot86afj4] {
    display: flex; align-items: center; gap: 9px;
    background: #0c1611; border: 1px solid #2e463a; border-radius: 8px;
    padding: 7px 8px; border-left-width: 3px;
}
.jrow.add[b-aqot86afj4] { border-left-color: #2e9159; }
.jrow.remove[b-aqot86afj4] { border-left-color: #c0563f; }
.jrow.move[b-aqot86afj4] { border-left-color: #5a96c8; }
.jthumb[b-aqot86afj4] { width: 30px; height: 42px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: #243b4d; }
.jpair[b-aqot86afj4] { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.jpair .jarrow[b-aqot86afj4] { color: #8aa394; font-size: 13px; }
.jbody[b-aqot86afj4] { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.jlabel[b-aqot86afj4] { font-size: 12px; color: #e8efe9; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.jk[b-aqot86afj4] { font-weight: 600; }
.jk.add[b-aqot86afj4] { color: #8fe0ad; }
.jk.remove[b-aqot86afj4] { color: #e89a88; }
.jk.move[b-aqot86afj4] { color: #9cc8e8; }
.jswap[b-aqot86afj4] { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #cdbb6a; font-weight: 700; }
.jzone[b-aqot86afj4] { font-size: 11px; color: #8aa394; }
.jreason[b-aqot86afj4] {
    background: #091310; border: 1px solid #243a30; border-radius: 6px;
    color: #e8efe9; padding: 4px 7px; font-size: 12px; font-family: inherit; min-width: 0; width: 100%;
}
.jreason[b-aqot86afj4]::placeholder { color: #5c7567; }
/* /Components/Panels/PackagesPanel.razor.rz.scp.css */
/* Packages panel — own chrome (scoped) + clean package cards. */

.searchpanel[b-apxe8o0a0v] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.composer[b-apxe8o0a0v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.searchstatus[b-apxe8o0a0v] { padding: 0 2px 4px; font-size: 12px; color: #8aa394; line-height: 1.4; }
.combosep[b-apxe8o0a0v] { border: 0; border-top: 1px solid #1c3225; margin: 14px 0; }

.composer .add[b-apxe8o0a0v] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 9px;
    padding: 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.composer .add:hover[b-apxe8o0a0v] { background: #258050; }
.composer .add:disabled[b-apxe8o0a0v] { opacity: .5; cursor: default; }

.pkglist[b-apxe8o0a0v] { display: flex; flex-direction: column; gap: 8px; }

.pkgrow[b-apxe8o0a0v] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 10px;
}

.pkg-top[b-apxe8o0a0v] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pkgname[b-apxe8o0a0v] { font-size: 13px; font-weight: 600; color: #e8efe9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkgcount[b-apxe8o0a0v] { flex: 0 0 auto; font-size: 11px; color: #8aa394; }

.pkg-bot[b-apxe8o0a0v] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.pkgins[b-apxe8o0a0v] {
    flex: 1 1 auto;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.pkgins:hover[b-apxe8o0a0v] { background: #258050; }

.pkgdel[b-apxe8o0a0v] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #8aa394;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 6px;
}
.pkgdel:hover[b-apxe8o0a0v] { color: #ff8a7a; background: rgba(214, 120, 120, 0.12); }
/* /Components/Panels/SuggestPanel.razor.rz.scp.css */
/* Panel chrome + suggestion grid styles copied from Mat.razor.css so this extracted component renders
   identically. (Global app.css still applies; only Mat's *scoped* rules need copying.) */

.searchpanel[b-cweog7nbrd] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.searchstatus[b-cweog7nbrd] {
    padding: 0 12px 8px;
    font-size: 12px;
    color: #8aa394;
}

.composer[b-cweog7nbrd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.combosep[b-cweog7nbrd] { border: 0; border-top: 1px solid #1c3225; margin: 14px 0; }

.rlabel[b-cweog7nbrd] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8aa394;
    margin-top: 4px;
}

.simgrid[b-cweog7nbrd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.simcard[b-cweog7nbrd] { cursor: pointer; }
.simcard.evo-warn .simimg[b-cweog7nbrd] { border-color: #c9b958; }
.simcard.evo-info .simimg[b-cweog7nbrd] { border-color: #5a7a6a; }

.simhead[b-cweog7nbrd] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.simprice[b-cweog7nbrd] { color: #cdebd9; font-weight: 600; margin-right: 4px; }
.budgetcap[b-cweog7nbrd] { font-size: 11px; color: #93b3a1; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.budgetcap .fnum[b-cweog7nbrd] { width: 56px; background: #0c1611; border: 1px solid #2e463a; border-radius: 6px; color: #e8efe9; padding: 3px 6px; font-size: 11px; font-family: inherit; }

.simimg[b-cweog7nbrd] {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #244231;
    aspect-ratio: 5 / 7;
    background: #0e1813;
}

.simcard:hover .simimg[b-cweog7nbrd] { border-color: #2e9159; }
.simimg img[b-cweog7nbrd] { width: 100%; height: 100%; object-fit: cover; display: block; }
.simph[b-cweog7nbrd] { padding: 8px; font-size: 11px; color: #93b3a1; text-align: center; }

.simscore[b-cweog7nbrd] {
    position: absolute;
    top: 4px; left: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    color: #06120b;
}
.simscore.syn-hi[b-cweog7nbrd] { background: #58c98a; }
.simscore.syn-md[b-cweog7nbrd] { background: #c9b958; }
.simscore.syn-lo[b-cweog7nbrd] { background: #8aa39a; }

.simadd[b-cweog7nbrd] {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 0;
    color: #fff;
    background: rgba(31, 111, 67, 0.95);
    border: 0;
    font-family: inherit;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease;
}
.simadd:hover[b-cweog7nbrd] { background: rgba(46, 145, 89, 0.98); }
.simcard:hover .simadd[b-cweog7nbrd] { opacity: 1; pointer-events: auto; }

.simcap[b-cweog7nbrd] { font-size: 11px; font-weight: 600; color: #e8efe9; margin-top: 3px; line-height: 1.2; }
.simreason[b-cweog7nbrd] { font-size: 10px; color: #93b3a1; line-height: 1.2; }

/* Deck narrative read-out ("What you're building") */
.insightlist[b-cweog7nbrd] { display: flex; flex-direction: column; gap: 6px; margin: 2px 0; }
.insight[b-cweog7nbrd] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.35;
    background: #14201a;
    border: 1px solid #25382e;
    color: #d6e2da;
}
.insight.warn[b-cweog7nbrd] { background: rgba(150, 110, 40, 0.16); border-color: #6e5a2e; color: #e8d6a8; }
.insight.tribe[b-cweog7nbrd] { background: rgba(60, 100, 150, 0.16); border-color: #34506e; color: #bcd6ee; }
.insicon[b-cweog7nbrd] { flex: 0 0 auto; font-size: 13px; line-height: 1.3; }
.instext[b-cweog7nbrd] { flex: 1 1 auto; }
/* /Components/Panels/TraysPanel.razor.rz.scp.css */
/* Trays panel — own chrome (scoped) + a clean tray-card list. */

.searchpanel[b-ewrhbtclig] {
    position: absolute;
    top: 49px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #11201a;
    border-left: 1px solid #25382e;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

.composer[b-ewrhbtclig] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.searchstatus[b-ewrhbtclig] { padding: 0 2px 4px; font-size: 12px; color: #8aa394; line-height: 1.4; }

/* primary + reset buttons (full width, green / ghost) */
.composer .add[b-ewrhbtclig] {
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 9px;
    padding: 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.composer .add:hover[b-ewrhbtclig] { background: #258050; }
.composer .add.ghost[b-ewrhbtclig] { background: transparent; border-color: #2e463a; color: #b9cabf; }
.composer .add.ghost:hover[b-ewrhbtclig] { background: rgba(255, 255, 255, 0.05); color: #cfe; }

/* one tray = a bordered card; name on top, swatches + actions below */
.trayrow[b-ewrhbtclig] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
    background: #14201a;
    border: 1px solid #25382e;
    border-radius: 10px;
}

.tray-top[b-ewrhbtclig] { display: flex; align-items: center; gap: 8px; }
.tray-top .dname[b-ewrhbtclig] { flex: 1 1 auto; min-width: 0; }

.tray-bot[b-ewrhbtclig] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.swatches[b-ewrhbtclig] { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.sw[b-ewrhbtclig] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
.sw.on[b-ewrhbtclig] { border-color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }

/* green rounded "make deck" button */
.traydeck[b-ewrhbtclig] {
    flex: 0 0 auto;
    background: #1f6f43;
    color: #fff;
    border: 1px solid #2e9159;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.traydeck:hover[b-ewrhbtclig] { background: #258050; }

/* bin icon (delete) */
.traydel[b-ewrhbtclig] {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #8aa394;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 3px 4px;
    border-radius: 6px;
}
.traydel:hover[b-ewrhbtclig] { color: #ff8a7a; background: rgba(214, 120, 120, 0.12); }
/* /Components/StatsView.razor.rz.scp.css */
.statsview[b-t350l5svrz] {
    --card: #16241c;
    --ink: #e8efe9;
    --muted: #8aa394;
    --line: #25382e;
    --line2: #2e463a;
    --green: #1f6f43;
    --green3: #6fd39a;
    --good: #3f8e5e;
    --warn: #a98a3a;
    --bad: #a8473a;
    color: var(--ink);
}

/* every text node in the view defaults to light ink (don't inherit Bootstrap's dark body colour) */
.statsview .smval[b-t350l5svrz],
.statsview .blabel[b-t350l5svrz],
.statsview .lrow[b-t350l5svrz] { color: var(--ink); }

/* ---- hero tiles ---- */
.smtiles[b-t350l5svrz] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.smtile[b-t350l5svrz] {
    flex: 1 1 130px;
    min-width: 120px;
    max-width: 240px;   /* so a lone tile that wraps to a new row doesn't stretch full-width */
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 2px solid var(--line2);
    border-radius: 10px;
    padding: 12px 14px;
}

.smtile.good[b-t350l5svrz] { border-top-color: var(--good); }
.smtile.warn[b-t350l5svrz] { border-top-color: var(--warn); }
.smtile.bad[b-t350l5svrz] { border-top-color: var(--bad); }

.smval[b-t350l5svrz] {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.smtile.warn .smval[b-t350l5svrz] { color: #e0c06a; }
.smtile.bad .smval[b-t350l5svrz] { color: #e07a6a; }

.smtlabel[b-t350l5svrz] {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 5px;
}

.smtsub[b-t350l5svrz] {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---- chart grid (modal) ---- */
.smgrid[b-t350l5svrz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px 18px;
}

.chart[b-t350l5svrz] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
}

.ctitle[b-t350l5svrz] {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    color: #8fd0a8;
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid #20382a;
}

/* column chart */
.col[b-t350l5svrz] {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 130px;
}

.colbar[b-t350l5svrz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
}

.colbar .v[b-t350l5svrz] {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.colbar .fill[b-t350l5svrz] {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--green3), var(--green));
    min-height: 2px;
    transition: height 0.3s ease;
}

.colbar .x[b-t350l5svrz] {
    font-size: 10.5px;
    color: var(--muted);
}

/* horizontal bar list */
.bars[b-t350l5svrz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.brow[b-t350l5svrz] {
    display: grid;
    grid-template-columns: 100px 1fr 26px;
    align-items: center;
    gap: 8px;
}

.blabel[b-t350l5svrz] {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btrack[b-t350l5svrz] {
    height: 14px;
    background: #0c1611;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}

.bfill[b-t350l5svrz] {
    display: block;
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--green), var(--green3));
    transition: width 0.3s ease;
}

/* Role bar below its target band → amber fill. */
.bfill.under[b-t350l5svrz] {
    background: linear-gradient(90deg, #b9892f, #d8b24a);
}

/* Target marker: a tick at the band's low edge so "under the line" reads instantly. */
.bmark[b-t350l5svrz] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #f2f6f3;
    opacity: 0.85;
    transform: translateX(-1px);
}

.bcount[b-t350l5svrz] {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sw[b-t350l5svrz] {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: -1px;
}

.sw.light[b-t350l5svrz] { outline: 1px solid var(--line); }

/* real game symbols (e.g. MTG mana pips) */
.sym[b-t350l5svrz] {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 6px;
}

.smval .sym.big[b-t350l5svrz] {
    width: 22px;
    height: 22px;
    vertical-align: -3px;
    margin-right: 3px;
}

/* donut */
.donut-wrap[b-t350l5svrz] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.donut[b-t350l5svrz] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex: 0 0 auto;
    -webkit-mask: radial-gradient(circle 34px at center, transparent 98%, #000 100%);
    mask: radial-gradient(circle 34px at center, transparent 98%, #000 100%);
}

.legend[b-t350l5svrz] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lrow[b-t350l5svrz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.lrow .c[b-t350l5svrz] {
    color: var(--muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* ---- compact (side panel) ---- */
.statsview.compact .smtiles[b-t350l5svrz] {
    gap: 8px;
    margin-bottom: 12px;
}

.statsview.compact .smtile[b-t350l5svrz] {
    flex: 1 1 80px;
    min-width: 70px;
    padding: 8px 10px;
}

.statsview.compact .smval[b-t350l5svrz] {
    font-size: 18px;
}

.statsview.compact .smgrid[b-t350l5svrz] {
    display: block;
}

.statsview.compact .chart[b-t350l5svrz] {
    padding: 10px 12px;
}

.statsview.compact .col[b-t350l5svrz] {
    height: 84px;
}

.statsview.compact .colbar .v[b-t350l5svrz] {
    font-size: 10px;
}

/* ---- opening-hand odds (hypergeometric) ---- */
.odds[b-t350l5svrz] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 16px;
}

.odds .oddshead[b-t350l5svrz] {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    color: #8fd0a8;
    margin-bottom: 9px;
}

.odds .oddsrows[b-t350l5svrz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.odds .oddrow[b-t350l5svrz] {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.odds .opct[b-t350l5svrz] {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--green3);
    min-width: 42px;
}

.odds .olabel[b-t350l5svrz] { font-size: 12.5px; color: var(--ink); }
.odds .osub[b-t350l5svrz] { font-size: 11px; color: var(--muted); }

/* compact (side panel): stack the rows tight */
.statsview.compact .odds[b-t350l5svrz] { padding: 9px 11px; margin-bottom: 12px; }
.statsview.compact .odds .oddsrows[b-t350l5svrz] { flex-direction: column; gap: 5px; }
.statsview.compact .odds .opct[b-t350l5svrz] { font-size: 15px; min-width: 38px; }

/* Role-analysis suggestions ("Add 3 more removal"). */
.guidance[b-t350l5svrz] {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.guidance .gtitle[b-t350l5svrz] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--green3);
}

.guidance .gline[b-t350l5svrz] {
    font-size: 12px;
    background: #2a1f0c;
    border: 1px solid #5a4420;
    color: #e8d9a8;
    padding: 3px 9px;
    border-radius: 12px;
}