/* /Layout/AppHeader.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   AppHeader.razor.css  —  Global sticky navigation bar + mobile drawer
───────────────────────────────────────────────────────────────────────────── */

/* ══ Shell ═══════════════════════════════════════════════════════════════════ */
.gp-header[b-84slqyq3tl] {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    background: rgba(var(--bs-body-bg-rgb, 14,14,20), 0.88);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(var(--bs-border-color-translucent, 255,255,255), 0.08);
    box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 4px 24px rgba(0,0,0,0.25);
}

.gp-header-inner[b-84slqyq3tl] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ══ Logo ════════════════════════════════════════════════════════════════════ */
.gp-logo[b-84slqyq3tl] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

    .gp-logo:hover[b-84slqyq3tl] {
        opacity: 0.82;
    }

.gp-logo-mark[b-84slqyq3tl] {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bs-primary, #00d4ff);
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: 0 0 16px rgba(var(--bs-primary-rgb, 0,212,255), 0.5);
}

.gp-logo-word[b-84slqyq3tl] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.gp-logo-geek[b-84slqyq3tl] {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--bs-emphasis-color, #e2e8f0);
}

.gp-logo-prod[b-84slqyq3tl] {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.45);
    margin-top: 1px;
}

/* ══ Desktop nav ═════════════════════════════════════════════════════════════ */
.gp-nav[b-84slqyq3tl] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

    .gp-nav[b-84slqyq3tl]::-webkit-scrollbar {
        display: none;
    }

.gp-nav-link[b-84slqyq3tl] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.52);
    border: 1px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    --link-accent: var(--bs-primary, #00d4ff);
}

    .gp-nav-link:hover[b-84slqyq3tl] {
        color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.88);
        background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.05);
        border-color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.08);
    }

.gp-nav-active[b-84slqyq3tl] {
    color: var(--link-accent) !important;
    background: rgba(var(--bs-primary-rgb, 0,212,255), 0.08);
    border-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.20);
    box-shadow: 0 0 12px rgba(var(--bs-primary-rgb, 0,212,255), 0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}

.gp-nav-icon[b-84slqyq3tl] {
    font-size: 0.9rem;
    line-height: 1;
}

.gp-nav-badge[b-84slqyq3tl] {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bs-primary, #00d4ff);
    color: var(--bs-body-bg, #0e0e14);
    text-transform: uppercase;
}

/* ══ Right-side controls ═════════════════════════════════════════════════════ */
.gp-header-actions[b-84slqyq3tl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto; /* push to far right even when nav is absent */
}

/* ── Gear / preferences button ── */
.gp-prefs-btn[b-84slqyq3tl] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.12);
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.04);
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

    .gp-prefs-btn:hover[b-84slqyq3tl] {
        color: var(--bs-primary, #00d4ff);
        background: rgba(var(--bs-primary-rgb, 0,212,255), 0.08);
        border-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.30);
        box-shadow: 0 0 12px rgba(var(--bs-primary-rgb, 0,212,255), 0.15);
    }

.gp-prefs-icon[b-84slqyq3tl] {
    width: 18px;
    height: 18px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gp-prefs-spinning[b-84slqyq3tl] {
    transform: rotate(60deg);
    color: var(--bs-primary, #00d4ff);
}

/* ══ Hamburger button (mobile only) ═════════════════════════════════════════ */
.gp-hamburger[b-84slqyq3tl] {
    display: none; /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.12);
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.04);
    cursor: pointer;
    outline: none;
    padding: 0;
    transition: border-color 0.2s, background 0.2s;
}

    .gp-hamburger:hover[b-84slqyq3tl] {
        border-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.35);
        background: rgba(var(--bs-primary-rgb, 0,212,255), 0.06);
    }

.gp-ham-bar[b-84slqyq3tl] {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.65);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, background 0.2s;
    transform-origin: center;
}

/* X morphing — top bar rotates to form \ */
.gp-hamburger-open .gp-ham-top[b-84slqyq3tl] {
    transform: translateY(7px) rotate(45deg);
    background: var(--bs-primary, #00d4ff);
}
/* middle bar fades */
.gp-hamburger-open .gp-ham-mid[b-84slqyq3tl] {
    opacity: 0;
    transform: scaleX(0);
}
/* bottom bar rotates to form / */
.gp-hamburger-open .gp-ham-bot[b-84slqyq3tl] {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--bs-primary, #00d4ff);
}

/* ══ Mobile drawer ═══════════════════════════════════════════════════════════ */
.gp-mobile-nav[b-84slqyq3tl] {
    /* sits directly under the 56px header bar */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid transparent;
}

.gp-mobile-nav-open[b-84slqyq3tl] {
    max-height: 480px; /* large enough for any realistic app count */
    border-top-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.12);
}

.gp-mobile-nav-inner[b-84slqyq3tl] {
    display: flex;
    flex-direction: column;
    padding: 8px 16px 16px;
    gap: 4px;
}

/* ── Individual mobile link ── */
.gp-mobile-link[b-84slqyq3tl] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    --mob-accent: var(--bs-primary, #00d4ff);
}

    .gp-mobile-link:hover[b-84slqyq3tl] {
        background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.05);
        border-color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.08);
    }

.gp-mobile-active[b-84slqyq3tl] {
    background: rgba(var(--bs-primary-rgb, 0,212,255), 0.07) !important;
    border-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.20) !important;
}

.gp-mobile-icon[b-84slqyq3tl] {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--mob-accent);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.gp-mobile-label[b-84slqyq3tl] {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.80);
    flex: 1;
}

.gp-mobile-active .gp-mobile-label[b-84slqyq3tl] {
    color: var(--mob-accent);
}

.gp-mobile-badge[b-84slqyq3tl] {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bs-primary, #00d4ff);
    color: var(--bs-body-bg, #0e0e14);
    text-transform: uppercase;
}

.gp-mobile-arrow[b-84slqyq3tl] {
    font-size: 0.9rem;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.20);
    transition: color 0.2s, transform 0.2s;
}

.gp-mobile-link:hover .gp-mobile-arrow[b-84slqyq3tl],
.gp-mobile-active .gp-mobile-arrow[b-84slqyq3tl] {
    color: var(--mob-accent);
    transform: translateX(3px);
}

/* ── Drawer footer ── */
.gp-mobile-footer[b-84slqyq3tl] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.05);
    display: flex;
    justify-content: center;
}

.gp-mobile-footer-text[b-84slqyq3tl] {
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.18);
}

/* ══ Responsive breakpoints ══════════════════════════════════════════════════ */

/* Below 640px — show hamburger, hide desktop nav */
@media (max-width: 639px) {
    .gp-nav[b-84slqyq3tl] {
        display: none;
    }

    .gp-hamburger[b-84slqyq3tl] {
        display: flex;
    }
}

/* 640px and up — show desktop nav, hide hamburger and ensure drawer is closed */
@media (min-width: 640px) {
    .gp-mobile-nav[b-84slqyq3tl] {
        display: none;
    }
}
/* /Layout/HeaderBar.razor.rz.scp.css */
.top-row[b-5xwen6twlb] {
    /*background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;*/
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-5xwen6twlb] {
        display: none;
    }

    .top-row.auth[b-5xwen6twlb] {
        justify-content: space-between;
    }

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

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

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

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

    .top-row[b-5xwen6twlb], article[b-5xwen6twlb] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-680g65mdhz] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-680g65mdhz] {
    flex: 1;
}

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

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

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

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

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

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

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


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

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

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

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

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

#blazor-error-ui[b-680g65mdhz] {
    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-680g65mdhz] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-rvsu9xtxm7] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-rvsu9xtxm7] {
    height: 3.5rem;
    /*background-color: rgba(0,0,0,0.4);*/
}

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

.oi[b-rvsu9xtxm7] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

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

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

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

    .nav-item[b-rvsu9xtxm7]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

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

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

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

    .collapse[b-rvsu9xtxm7] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}
/* /Layout/PreferencesModal.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   PreferencesModal.razor.css
───────────────────────────────────────────────────────────────────────────── */

/* ── Backdrop ── */
.gp-modal-backdrop[b-1t8ysbt00s] {
    position: fixed;
    inset: 0;
    /* 1100 — above Bootstrap tooltips (1080), popovers (1070), modals (1055),
       our loader-wrapper (1000), and any sticky/fixed page elements.         */
    z-index: 1100;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.gp-modal-backdrop.gp-modal-visible[b-1t8ysbt00s] {
    opacity: 1;
    pointer-events: all;
}

/* ── Panel ── */
.gp-modal-panel[b-1t8ysbt00s] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1101; /* one above the backdrop */
    width: min(420px, 92vw);
    background: var(--bs-body-bg, #0e0e14);
    border-left: 1px solid rgba(var(--bs-primary-rgb, 0,212,255), 0.18);
    box-shadow: -8px 0 48px rgba(0,0,0,0.55),
                -1px 0 0 rgba(var(--bs-primary-rgb, 0,212,255), 0.06);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.gp-modal-panel.gp-modal-open[b-1t8ysbt00s] { transform: translateX(0); }

/* ── Header ── */
.gp-modal-header[b-1t8ysbt00s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 18px;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.07);
    flex-shrink: 0;
}
.gp-modal-title-group[b-1t8ysbt00s] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gp-modal-mark[b-1t8ysbt00s] {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-primary, #00d4ff);
    text-shadow: 0 0 12px rgba(var(--bs-primary-rgb, 0,212,255), 0.5);
}
.gp-modal-title[b-1t8ysbt00s] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bs-emphasis-color, #e2e8f0);
    margin: 0;
}
.gp-modal-close[b-1t8ysbt00s] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.10);
    background: transparent;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.45);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    outline: none;
}
.gp-modal-close:hover[b-1t8ysbt00s] {
    background: rgba(var(--bs-danger-rgb, 220,53,69), 0.12);
    border-color: rgba(var(--bs-danger-rgb, 220,53,69), 0.35);
    color: var(--bs-danger, #dc3545);
}

/* ── Body ── */
.gp-modal-body[b-1t8ysbt00s] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.2) transparent;
}

/* ── Sections ── */
.gp-pref-section[b-1t8ysbt00s] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.05);
}
.gp-pref-section:last-child[b-1t8ysbt00s] { border-bottom: none; }

.gp-pref-section-title[b-1t8ysbt00s] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--bs-primary, #00d4ff);
    margin: 0 0 14px;
}
.gp-pref-section-icon[b-1t8ysbt00s] { font-size: 0.7rem; opacity: 0.7; }

/* ── Row ── */
.gp-pref-row[b-1t8ysbt00s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.04);
}
.gp-pref-row:last-child[b-1t8ysbt00s] { border-bottom: none; }

.gp-pref-label[b-1t8ysbt00s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.gp-pref-name[b-1t8ysbt00s] {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color, #e2e8f0);
}
.gp-pref-desc[b-1t8ysbt00s] {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sublabel (sits above theme grid) ── */
.gp-pref-sublabel[b-1t8ysbt00s] {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.35);
    margin: 12px 0 8px;
}

/* ── Theme tile grid ── */
.gp-theme-grid[b-1t8ysbt00s] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.gp-theme-tile[b-1t8ysbt00s] {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 4px;
    border-radius: 7px;
    border: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.12);
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.04);
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.50);
    cursor: pointer;
    transition: all 0.18s;
    outline: none;
    text-align: center;
}
.gp-theme-tile:hover[b-1t8ysbt00s] {
    border-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.35);
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.85);
    background: rgba(var(--bs-primary-rgb, 0,212,255), 0.07);
}
.gp-theme-active[b-1t8ysbt00s] {
    border-color: var(--bs-primary, #00d4ff) !important;
    background: rgba(var(--bs-primary-rgb, 0,212,255), 0.14) !important;
    color: var(--bs-primary, #00d4ff) !important;
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb, 0,212,255), 0.20),
                inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Toggle switch ── */
.gp-toggle[b-1t8ysbt00s] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.gp-toggle input[b-1t8ysbt00s] { position: absolute; opacity: 0; width: 0; height: 0; }

.gp-toggle-track[b-1t8ysbt00s] {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.10);
    border: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.14);
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.gp-toggle input:checked + .gp-toggle-track[b-1t8ysbt00s] {
    background: rgba(var(--bs-primary-rgb, 0,212,255), 0.22);
    border-color: rgba(var(--bs-primary-rgb, 0,212,255), 0.55);
    box-shadow: 0 0 10px rgba(var(--bs-primary-rgb, 0,212,255), 0.20);
}
.gp-toggle-thumb[b-1t8ysbt00s] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.35);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.25s;
}
.gp-toggle input:checked + .gp-toggle-track .gp-toggle-thumb[b-1t8ysbt00s] {
    transform: translateX(18px);
    background: var(--bs-primary, #00d4ff);
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb, 0,212,255), 0.55);
}
.gp-toggle:hover .gp-toggle-track[b-1t8ysbt00s] {
    border-color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.25);
}

/* ── Footer ── */
.gp-modal-footer[b-1t8ysbt00s] {
    padding: 14px 24px;
    border-top: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.06);
    flex-shrink: 0;
}
.gp-modal-footer-text[b-1t8ysbt00s] {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.22);
}
/* /Pages/AdvancedBinaryConverter.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   Index.razor.css  —  Advanced Binary Converter
   Layout is a tall two-panel split that fills the viewport below the 56px
   sticky header.  Each panel scrolls independently on desktop.
───────────────────────────────────────────────────────────────────────────── */

/* ══ Page container ══════════════════════════════════════════════════════════
   height: calc(100vh - 56px)  replaces the old 93vh so the two-panel layout
   always fills exactly the space below the global sticky header.
   overflow: hidden here because each panel handles its own overflow.
══════════════════════════════════════════════════════════════════════════════ */
.bc-index[b-hysebu3gue] {
    height: calc(100vh - 56px);
    overflow: hidden;
}

p[b-hysebu3gue] {
    text-align: justify;
}

/* ══ Panels ══════════════════════════════════════════════════════════════════
   Replaces Bootstrap .card chrome.
   Panels are the same two-column siblings as the old cards — the layout
   behaviour (flex, overflow, max-width) is identical; only the visual
   treatment changes to align with the GP design language.
══════════════════════════════════════════════════════════════════════════════ */
.bc-panel[b-hysebu3gue] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(var(--bs-border-color-rgb, 222,226,230), 0.5);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Subtle primary-tinted top edge — a nod to the GP accent system */
.bc-panel[b-hysebu3gue]::before {
    content: '';
    display: block;
    height: 2px;
    flex-shrink: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--bs-primary-rgb, 0,112,204), 0.55) 40%,
        rgba(var(--bs-primary-rgb, 0,112,204), 0.80) 50%,
        rgba(var(--bs-primary-rgb, 0,112,204), 0.55) 60%,
        transparent 100%);
    border-radius: 12px 12px 0 0;
}

.bc-panel-header[b-hysebu3gue] {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid rgba(var(--bs-border-color-rgb, 222,226,230), 0.6);
    flex-shrink: 0;
    background: rgba(var(--bs-body-bg-rgb, 255,255,255), 0.65);
}

.bc-panel-body[b-hysebu3gue] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Scrollbar styling (scoped to panels) ── */
.bc-panel-body[b-hysebu3gue]::-webkit-scrollbar { width: 6px; }
.bc-panel-body[b-hysebu3gue]::-webkit-scrollbar-track { background: transparent; }
.bc-panel-body[b-hysebu3gue]::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb, 0,112,204), 0.25);
    border-radius: 3px;
}
.bc-panel-body[b-hysebu3gue]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb, 0,112,204), 0.45);
}

/* ── Textarea auto-resize helper ── */
.bc-panel-body textarea[b-hysebu3gue] {
    resize: none;
    overflow: hidden;
}

/* ══ Z-index containment ═════════════════════════════════════════════════════
   .bc-logic-panel gets position:relative + z-index:2.  This creates a
   stacking context, so #loader-wrapper's z-index:1000 is scoped INSIDE the
   panel and does not compete globally with the preferences modal (z-index
   1100/1101).  Without this, the loader floats above the modal backdrop.

   .dont-show-selectors is a sticky-bottom radio group.  position:sticky
   creates a stacking context; capping it at z-index:2 prevents it from
   appearing above the modal on mobile.
══════════════════════════════════════════════════════════════════════════════ */
.bc-logic-panel[b-hysebu3gue] {
    position: relative;  /* establishes stacking context for #loader-wrapper */
    z-index: 2;          /* globally below the modal (1100); loader scoped within */
}

.dont-show-selectors[b-hysebu3gue] {
    z-index: 2 !important;   /* override any Bootstrap sticky z-index */
}

/* ══ Loader ══════════════════════════════════════════════════════════════════ */
#loader-wrapper[b-hysebu3gue] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;  /* high within the panel's stacking context; harmless globally */
}

#loader-wrapper .loader-section[b-hysebu3gue] {
    position: absolute;
    top: 0;
    width: 51%;
    height: 100%;
    z-index: 1000;
    transition: all 0.3s 0.3s ease-out;
}
#loader-wrapper .loader-section.section-left[b-hysebu3gue]  { left: 0; }
#loader-wrapper .loader-section.section-right[b-hysebu3gue] { right: 0; }

#loader[b-hysebu3gue] {
    display: block;
    position: absolute;
    left: 80%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    z-index: 1001;
    border: 3px solid transparent;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: bc-spin-b-hysebu3gue 2s linear infinite;
}
#loader[b-hysebu3gue]:before {
    content: "";
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    border-radius: 50%;
    animation: bc-spin-b-hysebu3gue 3s linear infinite;
}
#loader[b-hysebu3gue]:after {
    content: "";
    position: absolute;
    top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    border-radius: 50%;
    animation: bc-spin-b-hysebu3gue 1.5s linear infinite;
}

@keyframes bc-spin-b-hysebu3gue {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loaded state */
.loaded #loader-wrapper .loader-section.section-left[b-hysebu3gue]  { transform: translateX(-100%); }
.loaded #loader-wrapper .loader-section.section-right[b-hysebu3gue] { transform: translateX(100%); }
.loaded #loader[b-hysebu3gue] { opacity: 0; transition: all 0.3s ease-out; }
.loaded #loader-wrapper[b-hysebu3gue] {
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 0.3s 0.6s ease-out;
}

/* ══ Responsive ══════════════════════════════════════════════════════════════ */

/* ── ≤ 1132px: stack panels vertically, show mobile radio selector ── */
@media (max-width: 1132px) {
    .bc-index[b-hysebu3gue] {
        /* Let the page scroll naturally on tablet/mobile */
        height: auto;
        overflow: visible;
        flex-direction: column;
    }

    .bc-input-panel[b-hysebu3gue],
    .bc-logic-panel[b-hysebu3gue] {
        max-width: 100% !important;
    }

    #loader[b-hysebu3gue] { left: 65% !important; }
}

/* ── ≤ 710px: narrow mobile ── */
@media (max-width: 710px) {
    #loader[b-hysebu3gue] { left: 50% !important; }

    #loader-wrapper .loader-section[b-hysebu3gue] {
        top: 0;
        width: 100%;
        height: 100%;
    }
    #loader-wrapper .loader-section.section-left[b-hysebu3gue]  { left: 0; }
    #loader-wrapper .loader-section.section-right[b-hysebu3gue] { right: 0; }
}

/* ── ≥ 1133px: side-by-side panels with independent scroll ── */
@media (min-width: 1133px) {
    .bc-index[b-hysebu3gue] {
        overflow: hidden;
    }

    .bc-input-panel[b-hysebu3gue],
    .bc-logic-panel[b-hysebu3gue] {
        flex: 1 1 auto;
        overflow: hidden;    /* outer panel clips */
        max-height: 100%;
    }

    .bc-logic-panel[b-hysebu3gue] {
        max-width: 50%;
    }
}
/* /Pages/Freecell.razor.rz.scp.css */
/* =================================================================
   Freecell.razor.css  —  Component-scoped styles
   Geek Production · Bootstrap 5.3 — theme-adaptive

   ALL colours derive exclusively from Bootstrap 5.3 CSS custom
   properties so the component responds to any theme applied to the
   host application (dark mode, Bootswatch themes, custom overrides).

   NO hardcoded hex or rgb colour values appear anywhere in this file.
   Shadow/overlay alphas are plain fractions; colour channels use vars.
   Reusable card utility classes are declared at the bottom.
================================================================= */

/* -----------------------------------------------------------------
   1.  DESIGN TOKENS  (scoped to component root)
----------------------------------------------------------------- */
.fc-wrapper[b-bmk03zr9c6] {
    /* Card geometry */
    --fc-card-w:         90px;
    --fc-card-h:         126px;
    --fc-card-radius:    var(--bs-border-radius);
    --fc-card-border:    1px solid var(--bs-border-color);
    --fc-card-shadow:    0 3px 8px  rgba(var(--bs-black-rgb), .35),
                         inset 0 1px 0 rgba(var(--bs-white-rgb), .9);

    /* Stacking offset per card in a tableau column */
    --fc-stack-offset:   30px;

    /* Card face colours — follow active BS theme */
    --fc-card-bg:        var(--bs-body-bg);
    --fc-red:            var(--bs-danger);
    --fc-black:          var(--bs-emphasis-color);

    /* Interaction feedback */
    --fc-select-ring:    0 0 0 3px var(--bs-warning),
                         0 4px 14px rgba(var(--bs-black-rgb), .45);
    --fc-drop-ring:      0 0 0 2px var(--bs-success),
                         0 0 18px  rgba(var(--bs-success-rgb), .35);
    --fc-drop-bg:        rgba(var(--bs-success-rgb), .07);
    --fc-ghost-opacity:  .42;

    /* Typography */
    --fc-font-card:      'Georgia', 'Palatino Linotype', serif;
    --fc-font-ui:        var(--bs-font-sans-serif);

    /* Transitions */
    --fc-trans-fast:     .12s ease;
    --fc-trans-card:     .18s ease;
}

/* -----------------------------------------------------------------
   2.  PAGE WRAPPER & FELT BACKGROUND
   --bs-success becomes the table felt; it adapts to every BS theme.
----------------------------------------------------------------- */
.fc-wrapper[b-bmk03zr9c6] {
    background-color:    var(--bs-success);
    background-image:    radial-gradient(ellipse at 50% 30%,
                           rgba(var(--bs-white-rgb), .10) 0%,
                           rgba(var(--bs-black-rgb), .25) 70%);
    min-height:          100vh;
    padding:             1rem 1rem 2rem;
    font-family:         var(--fc-font-ui);
    user-select:         none;
    -webkit-user-select: none;
    overflow-x:          hidden;
}

/* -----------------------------------------------------------------
   3.  HEADER
----------------------------------------------------------------- */
.fc-header[b-bmk03zr9c6] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             .5rem;
    padding-bottom:  .75rem;
    margin-bottom:   1rem;
    border-bottom:   1px solid rgba(var(--bs-white-rgb), .15);
}

.fc-title[b-bmk03zr9c6] {
    display:        flex;
    align-items:    center;
    gap:            .4rem;
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--bs-white);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fc-title-suit[b-bmk03zr9c6] {
    font-size: 1rem;
    opacity:   .7;
}

.fc-controls[b-bmk03zr9c6] {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
}

/* -----------------------------------------------------------------
   4.  STAT CHIPS  (Moves + Time)
   Translucent dark overlay on the felt — readable on any hue.
----------------------------------------------------------------- */
.fc-stat[b-bmk03zr9c6] {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     rgba(var(--bs-black-rgb), .30);
    border:         1px solid rgba(var(--bs-white-rgb), .15);
    border-radius:  var(--bs-border-radius);
    padding:        .2rem .7rem;
    min-width:      64px;
}

.fc-stat-label[b-bmk03zr9c6] {
    font-size:      .6rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          rgba(var(--bs-white-rgb), .55);
    line-height:    1.2;
}

.fc-stat-value[b-bmk03zr9c6] {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--bs-white);
    line-height: 1.2;
}

.fc-monospace[b-bmk03zr9c6] {
    font-variant-numeric: tabular-nums;
    font-family:          'Courier New', monospace;
    letter-spacing:       .06em;
}

/* -----------------------------------------------------------------
   5.  CONTROL BUTTONS
   Layout / sizing only — colour comes from Bootstrap btn-* classes
   applied in the Razor markup (btn-outline-light, btn-primary).
----------------------------------------------------------------- */
.fc-btn-undo[b-bmk03zr9c6],
.fc-btn-new[b-bmk03zr9c6] {
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;
    font-size:   .8rem;
    font-weight: 600;
    transition:  transform var(--fc-trans-fast), opacity var(--fc-trans-fast);
}

.fc-btn-new:hover[b-bmk03zr9c6]  { transform: translateY(-1px); }
.fc-btn-new:active[b-bmk03zr9c6] { transform: translateY(0); }
.fc-btn-undo:disabled[b-bmk03zr9c6] { opacity: .35; }

/* -----------------------------------------------------------------
   6.  WIN BANNER
   Uses Bootstrap success contextual colour variables throughout.
----------------------------------------------------------------- */
.fc-win-banner[b-bmk03zr9c6] {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              .5rem;
    background-color: var(--bs-success-bg-subtle);
    border:           1px solid var(--bs-success-border-subtle);
    border-radius:    var(--bs-border-radius-lg);
    color:            var(--bs-success-text-emphasis);
    font-size:        1.05rem;
    padding:          .75rem 1.25rem;
    margin-bottom:    1rem;
    animation:        fc-win-pulse-b-bmk03zr9c6 1.2s ease-in-out infinite alternate;
    box-shadow:       0 4px 20px rgba(var(--bs-success-rgb), .35);
}

.fc-win-icon[b-bmk03zr9c6] { font-size: 1.5rem; }

@keyframes fc-win-pulse-b-bmk03zr9c6 {
    from { box-shadow: 0 4px 16px rgba(var(--bs-success-rgb), .35); }
    to   { box-shadow: 0 4px 32px rgba(var(--bs-success-rgb), .70); }
}

/* -----------------------------------------------------------------
   7.  TOP ROW  (free cells + foundations)
----------------------------------------------------------------- */
.fc-top-row[b-bmk03zr9c6] {
    display:       flex;
    align-items:   flex-start;
    gap:           .5rem;
    margin-bottom: .9rem;
    flex-wrap:     nowrap;
}

.fc-group[b-bmk03zr9c6]  { display: flex; gap: .4rem; }
.fc-spacer[b-bmk03zr9c6] { flex: 1 1 auto; }

/* -----------------------------------------------------------------
   8.  PILE SLOTS  (free cell + foundation containers)
----------------------------------------------------------------- */
.fc-pile-slot[b-bmk03zr9c6] {
    width:           var(--fc-card-w);
    height:          var(--fc-card-h);
    border:          2px dashed rgba(var(--bs-white-rgb), .20);
    border-radius:   var(--fc-card-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    position:        relative;
    transition:      border-color var(--fc-trans-fast),
                     box-shadow   var(--fc-trans-fast),
                     background   var(--fc-trans-fast);
    flex-shrink:     0;
}

.fc-pile-slot.drop-active[b-bmk03zr9c6] {
    border-color: var(--bs-success-border-subtle);
    box-shadow:   var(--fc-drop-ring);
    background:   var(--fc-drop-bg);
}

.fc-foundation-slot[b-bmk03zr9c6] {
    border-style: solid;
    border-color: rgba(var(--bs-white-rgb), .12);
}

.fc-foundation-slot.suit-hearts[b-bmk03zr9c6],
.fc-foundation-slot.suit-diamonds[b-bmk03zr9c6] {
    border-color: rgba(var(--bs-danger-rgb), .40);
}

.fc-foundation-slot.suit-clubs[b-bmk03zr9c6],
.fc-foundation-slot.suit-spades[b-bmk03zr9c6] {
    border-color: rgba(var(--bs-dark-rgb), .50);
}

/* Empty slot labels */
.fc-pile-label[b-bmk03zr9c6] {
    font-size:      1.45rem;
    line-height:    1;
    pointer-events: none;
}

.fc-pile-label.suit-hearts[b-bmk03zr9c6],
.fc-pile-label.suit-diamonds[b-bmk03zr9c6] { color: rgba(var(--bs-danger-rgb), .50); }

.fc-pile-label.suit-clubs[b-bmk03zr9c6],
.fc-pile-label.suit-spades[b-bmk03zr9c6]   { color: rgba(var(--bs-white-rgb), .28); }

.fc-pile-label:not([class*="suit-"])[b-bmk03zr9c6] {
    font-size:      .65rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          rgba(var(--bs-white-rgb), .22);
}

/* -----------------------------------------------------------------
   9.  PLAYING CARD  — reusable visual asset
   
   Apply .fc-card + .card-red or .card-black anywhere in the app.
   Declare the token variables on any ancestor to customise sizing.
----------------------------------------------------------------- */
.fc-card[b-bmk03zr9c6] {
    width:            var(--fc-card-w);
    height:           var(--fc-card-h);
    background-color: var(--fc-card-bg);
    background-image: linear-gradient(
                        160deg,
                        rgba(var(--bs-white-rgb), .55) 0%,
                        rgba(var(--bs-body-color-rgb), .03) 100%
                      );
    border-radius:    var(--fc-card-radius);
    border:           var(--fc-card-border);
    box-shadow:       var(--fc-card-shadow);
    cursor:           grab;
    position:         relative;
    overflow:         hidden;
    transition:       transform var(--fc-trans-card), box-shadow var(--fc-trans-card);
    flex-shrink:      0;
}

.fc-card:hover[b-bmk03zr9c6] {
    transform:  translateY(-3px);
    box-shadow: 0 6px 18px rgba(var(--bs-black-rgb), .45),
                inset 0 1px 0 rgba(var(--bs-white-rgb), .9);
}

.fc-card:focus-visible[b-bmk03zr9c6] {
    outline:        3px solid var(--bs-warning);
    outline-offset: 2px;
}

.fc-card[draggable="false"][b-bmk03zr9c6],
.fc-card.card-locked[b-bmk03zr9c6] { cursor: default; }

.fc-card.card-selected[b-bmk03zr9c6] {
    box-shadow: var(--fc-select-ring);
    transform:  translateY(-5px) scale(1.02);
    z-index:    500 !important;
}

/* Ghost: card shown semi-transparent at its origin while dragging */
.fc-card.card-ghost[b-bmk03zr9c6] {
    opacity:    var(--fc-ghost-opacity);
    transform:  scale(.96);
    box-shadow: none;
    cursor:     grabbing;
    transition: none; /* no bounce on ghost */
}

.card-foundation-top[b-bmk03zr9c6] {
    cursor:         default;
    pointer-events: none;
}

/* Suit colours */
.fc-card.card-red  .fc-rank[b-bmk03zr9c6],
.fc-card.card-red  .fc-suit-pip[b-bmk03zr9c6],
.fc-card.card-red  .fc-center-pip[b-bmk03zr9c6] { color: var(--fc-red); }

.fc-card.card-black .fc-rank[b-bmk03zr9c6],
.fc-card.card-black .fc-suit-pip[b-bmk03zr9c6],
.fc-card.card-black .fc-center-pip[b-bmk03zr9c6] { color: var(--fc-black); }

/* -----------------------------------------------------------------
   9a.  CARD INNER LAYOUT
----------------------------------------------------------------- */
.fc-card-inner[b-bmk03zr9c6] {
    width:          100%;
    height:         100%;
    position:       relative;
    pointer-events: none;
}

.fc-corner[b-bmk03zr9c6] {
    position:       absolute;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    line-height:    1;
    padding:        4px 5px;
    gap:            1px;
}

.fc-corner-tl[b-bmk03zr9c6] { top: 0; left: 0; }
.fc-corner-br[b-bmk03zr9c6] { bottom: 0; right: 0; transform: rotate(180deg); }

.fc-rank[b-bmk03zr9c6] {
    font-family: var(--fc-font-card);
    font-size:   .88rem;
    font-weight: 900;
    line-height: 1;
    display:     block;
}

.fc-suit-pip[b-bmk03zr9c6] {
    font-size:   .62rem;
    line-height: 1;
    display:     block;
}

.fc-center-pip[b-bmk03zr9c6] {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    font-size:   2.1rem;
    line-height: 1;
    filter:      drop-shadow(0 1px 1px rgba(var(--bs-black-rgb), .12));
}

/* -----------------------------------------------------------------
   10.  DRAG CURSOR
----------------------------------------------------------------- */
.fc-wrapper.fc-dragging *[b-bmk03zr9c6] { cursor: grabbing !important; }

/* -----------------------------------------------------------------
   11.  TABLEAU
----------------------------------------------------------------- */
.fc-tableau[b-bmk03zr9c6] {
    display:               grid;
    grid-template-columns: repeat(8, var(--fc-card-w));
    gap:                   .45rem;
    justify-content:       center;
}

.fc-tableau-col[b-bmk03zr9c6] {
    position:      relative;
    width:         var(--fc-card-w);
    min-height:    calc(var(--col-count, 1) * var(--fc-stack-offset) + var(--fc-card-h));
    cursor:        pointer;
    border-radius: var(--fc-card-radius);
    transition:    outline-color var(--fc-trans-fast), background var(--fc-trans-fast);
}

.fc-tableau-col.drop-active[b-bmk03zr9c6] {
    outline:        2px solid var(--bs-success);
    outline-offset: 3px;
    background:     var(--fc-drop-bg);
}

/* Absolutely-positioned stacked cards */
.tableau-card[b-bmk03zr9c6] {
    position: absolute;
    left:     0;
    top:      calc(var(--row, 0) * var(--fc-stack-offset));
    z-index:  calc(var(--row, 0) + 1);
}

.fc-empty-col-label[b-bmk03zr9c6] {
    font-size:      .6rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          rgba(var(--bs-white-rgb), .22);
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    white-space:    nowrap;
}

/* -----------------------------------------------------------------
   12.  INSTRUCTIONS FOOTER
----------------------------------------------------------------- */
.fc-instructions[b-bmk03zr9c6] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             .4rem;
    margin-top:      1.5rem;
    font-size:       .72rem;
    color:           rgba(var(--bs-white-rgb), .40);
}

.fc-sep[b-bmk03zr9c6] { opacity: .45; }

/* -----------------------------------------------------------------
   13.  ANIMATIONS
----------------------------------------------------------------- */

/* Deal — add .fc-deal-anim to .fc-wrapper briefly on new game */
@keyframes fc-deal-b-bmk03zr9c6 {
    from { opacity: 0; transform: translateY(-18px) scale(.92); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

.fc-deal-anim .fc-card[b-bmk03zr9c6] {
    animation: fc-deal-b-bmk03zr9c6 .22s ease forwards;
}

.fc-deal-anim .tableau-card[b-bmk03zr9c6] {
    animation-delay: calc(var(--row, 0) * 25ms + var(--col-count, 0) * 10ms);
}

/* Snap-back shake — applied via JS when a drop is rejected */
@keyframes fc-snap-back-b-bmk03zr9c6 {
    0%   { transform: translateX(0);   }
    20%  { transform: translateX(-6px) translateY(-3px); }
    40%  { transform: translateX(6px)  translateY(0); }
    60%  { transform: translateX(-4px) translateY(-2px); }
    80%  { transform: translateX(4px)  translateY(0); }
    100% { transform: translateX(0);   }
}

.fc-card.card-snap-back[b-bmk03zr9c6] {
    animation: fc-snap-back-b-bmk03zr9c6 .35s ease forwards;
}

/* -----------------------------------------------------------------
   14.  RESPONSIVE — TABLET  (< 992 px)
----------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .fc-wrapper[b-bmk03zr9c6] {
        --fc-card-w:       74px;
        --fc-card-h:       104px;
        --fc-stack-offset: 25px;
    }
    .fc-tableau[b-bmk03zr9c6]  { gap: .35rem; }
    .fc-rank[b-bmk03zr9c6]       { font-size: .78rem; }
    .fc-center-pip[b-bmk03zr9c6] { font-size: 1.75rem; }
}

/* -----------------------------------------------------------------
   15.  RESPONSIVE — LARGE MOBILE  (< 768 px)
----------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fc-wrapper[b-bmk03zr9c6] {
        --fc-card-w:       62px;
        --fc-card-h:       87px;
        --fc-stack-offset: 22px;
        --fc-card-shadow:  0 2px 6px rgba(var(--bs-black-rgb), .30),
                           inset 0 1px 0 rgba(var(--bs-white-rgb), .85);
        padding: .75rem .5rem 1.5rem;
    }
    .fc-header[b-bmk03zr9c6]   { flex-direction: column; align-items: flex-start; }
    .fc-controls[b-bmk03zr9c6] { width: 100%; justify-content: space-between; }
    .fc-tableau[b-bmk03zr9c6]  { gap: .28rem; }
    .fc-group[b-bmk03zr9c6]    { gap: .28rem; }
    .fc-rank[b-bmk03zr9c6]       { font-size: .68rem; }
    .fc-suit-pip[b-bmk03zr9c6]   { font-size: .52rem; }
    .fc-center-pip[b-bmk03zr9c6] { font-size: 1.45rem; }
    .fc-corner[b-bmk03zr9c6]     { padding: 3px; }
    .fc-stat[b-bmk03zr9c6]       { min-width: 50px; padding: .15rem .5rem; }
    .fc-stat-value[b-bmk03zr9c6] { font-size: .82rem; }
    .fc-stat-label[b-bmk03zr9c6] { font-size: .55rem; }
    .fc-instructions[b-bmk03zr9c6] { display: none; }
}

/* -----------------------------------------------------------------
   16.  RESPONSIVE — SMALL MOBILE  (< 480 px)
----------------------------------------------------------------- */
@media (max-width: 479.98px) {
    .fc-wrapper[b-bmk03zr9c6] {
        --fc-card-w:       50px;
        --fc-card-h:       70px;
        --fc-stack-offset: 17px;
        padding: .5rem .3rem 1rem;
    }
    .fc-top-row[b-bmk03zr9c6] { gap: .25rem; }
    .fc-group[b-bmk03zr9c6]   { gap: .2rem; }
    .fc-tableau[b-bmk03zr9c6] { gap: .22rem; }
    .fc-rank[b-bmk03zr9c6]       { font-size: .58rem; }
    .fc-suit-pip[b-bmk03zr9c6]   { font-size: .44rem; }
    .fc-center-pip[b-bmk03zr9c6] { font-size: 1.15rem; }
    .fc-corner[b-bmk03zr9c6]     { padding: 2px; gap: 0; }
    .fc-title[b-bmk03zr9c6]      { font-size: 1rem; }
    .fc-btn-undo[b-bmk03zr9c6],
    .fc-btn-new[b-bmk03zr9c6]    { font-size: .72rem; padding: .28rem .55rem; }
}

/* =================================================================
   SHARED UTILITY CLASSES — reusable outside this component
   
   Declare the token block on an ancestor element, then apply:
       <div class="gp-card-md fc-card card-red"> ... </div>
   
   Required tokens on ancestor:
       --fc-card-bg: var(--bs-body-bg);
       --fc-red:     var(--bs-danger);
       --fc-black:   var(--bs-emphasis-color);
================================================================= */
.gp-card-sm[b-bmk03zr9c6] { --fc-card-w: 56px;  --fc-card-h: 78px; }
.gp-card-md[b-bmk03zr9c6] { --fc-card-w: 90px;  --fc-card-h: 126px; }
.gp-card-lg[b-bmk03zr9c6] { --fc-card-w: 110px; --fc-card-h: 154px; }

.gp-felt-surface[b-bmk03zr9c6] {
    background-color: var(--bs-success);
    background-image: radial-gradient(ellipse at 50% 30%,
                        rgba(var(--bs-white-rgb), .1) 0%,
                        rgba(var(--bs-black-rgb), .25) 70%);
}

.gp-suit-red[b-bmk03zr9c6]   { color: var(--bs-danger); }
.gp-suit-black[b-bmk03zr9c6] { color: var(--bs-emphasis-color); }
/* /Pages/Home.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   Home.razor.css  —  Geek Production landing page
───────────────────────────────────────────────────────────────────────────── */

/* ══ Page wrapper ════════════════════════════════════════════════════════════ */
.gp-home[b-jvpv2fzwnv] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
}

/* ══ Hero ════════════════════════════════════════════════════════════════════ */
.gp-hero[b-jvpv2fzwnv] {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px 100px;
    overflow: hidden;
}

/* ── Background layer ── */
.gp-hero-bg[b-jvpv2fzwnv] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gp-grid-overlay[b-jvpv2fzwnv] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--bs-primary-rgb, 0,212,255), 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bs-primary-rgb, 0,212,255), 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
}

/* ── Orbit rig ──────────────────────────────────────────────────────────────
   Each rig is a zero-size anchor fixed to the hero centre.
   It rotates like a clock hand; the orb sits at the end of the invisible arm.
   The orb counter-rotates so it stays visually upright, then pulses on top.

   Two separate @keyframes on two separate elements = no transform conflict.
────────────────────────────────────────────────────────────────────────────── */
.gp-orbit-rig[b-jvpv2fzwnv] {
    position: absolute;
    /* Centre of the hero — orbs orbit this point */
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}

/* Rig 1 rotates clockwise, full turn every 28 s */
.gp-orbit-rig-1[b-jvpv2fzwnv] {
    animation: orbit-cw-b-jvpv2fzwnv 28s linear infinite;
}

/* Rig 2 rotates counter-clockwise, slightly slower so they never sync */
.gp-orbit-rig-2[b-jvpv2fzwnv] {
    animation: orbit-ccw-b-jvpv2fzwnv 34s linear infinite;
}

@keyframes orbit-cw-b-jvpv2fzwnv {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-ccw-b-jvpv2fzwnv {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* ── The orbs themselves ── */
.gp-hero-glow[b-jvpv2fzwnv] {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
}

/* Orb 1 — primary colour, sits 220px to the right of the rig centre */
.gp-hero-glow-1[b-jvpv2fzwnv] {
    width: 380px;
    height: 260px;
    background: var(--bs-primary, #00d4ff);
    /* Offset from rig origin so it orbits rather than spinning in place */
    top: -130px;
    left: 70px;
    /* Counter-rotate so the ellipse orientation stays consistent,
       then pulse opacity + scale independently */
    animation: orbit-cw-counter-b-jvpv2fzwnv 28s linear infinite, orb-pulse-1-b-jvpv2fzwnv 5.5s ease-in-out infinite;
}

/* Orb 2 — info colour, starts on the opposite side (180°) */
.gp-hero-glow-2[b-jvpv2fzwnv] {
    width: 300px;
    height: 200px;
    background: var(--bs-info, #0dcaf0);
    top: -100px;
    left: -370px; /* opposite side of the rig arm */
    animation: orbit-ccw-counter-b-jvpv2fzwnv 34s linear infinite, orb-pulse-2-b-jvpv2fzwnv 7s ease-in-out infinite;
}

/* Counter-rotation keeps orb orientation fixed while the rig rotates */
@keyframes orbit-cw-counter-b-jvpv2fzwnv {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes orbit-ccw-counter-b-jvpv2fzwnv {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Pulse — opacity and scale breathe at different rates for each orb */
@keyframes orb-pulse-1-b-jvpv2fzwnv {
    0% {
        opacity: 0.14;
        transform: rotate(0deg) scale(1);
    }

    50% {
        opacity: 0.24;
        transform: rotate(-180deg) scale(1.18);
    }

    100% {
        opacity: 0.14;
        transform: rotate(-360deg) scale(1);
    }
}

@keyframes orb-pulse-2-b-jvpv2fzwnv {
    0% {
        opacity: 0.10;
        transform: rotate(0deg) scale(0.95);
    }

    50% {
        opacity: 0.20;
        transform: rotate(360deg) scale(1.22);
    }

    100% {
        opacity: 0.10;
        transform: rotate(720deg) scale(0.95);
    }
}

/* ── Hero content ── */
.gp-hero-content[b-jvpv2fzwnv] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.gp-hero-eyebrow[b-jvpv2fzwnv] {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fade-up-b-jvpv2fzwnv 0.6s ease both;
}

.gp-eyebrow-prompt[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bs-primary, #00d4ff);
    text-shadow: 0 0 16px rgba(var(--bs-primary-rgb, 0,212,255), 0.55);
}

.gp-eyebrow-text[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.45);
}

.gp-hero-title[b-jvpv2fzwnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.92;
    gap: 4px;
    animation: fade-up-b-jvpv2fzwnv 0.6s 0.1s ease both;
}

.gp-title-geek[b-jvpv2fzwnv] {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(3.5rem, 10vw, 7.5rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-emphasis-color, #f0f4f8);
    text-shadow: 0 0 60px rgba(var(--bs-primary-rgb, 0,212,255), 0.25);
}

.gp-title-prod[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: clamp(0.9rem, 2.5vw, 1.7rem);
    font-weight: 400;
    letter-spacing: 0.7em;
    text-transform: uppercase;
    color: var(--bs-primary, #00d4ff);
    text-shadow: 0 0 24px rgba(var(--bs-primary-rgb, 0,212,255), 0.5);
    padding-left: 0.7em;
}

.gp-hero-sub[b-jvpv2fzwnv] {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.22rem);
    font-weight: 400;
    line-height: 1.65;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.58);
    max-width: 520px;
    animation: fade-up-b-jvpv2fzwnv 0.6s 0.2s ease both;
}

/* ── Stats ── */
.gp-hero-stats[b-jvpv2fzwnv] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
    animation: fade-up-b-jvpv2fzwnv 0.6s 0.3s ease both;
}

.gp-stat[b-jvpv2fzwnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.gp-stat-num[b-jvpv2fzwnv] {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--bs-primary, #00d4ff);
}

.gp-stat-label[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.35);
}

.gp-stat-divider[b-jvpv2fzwnv] {
    width: 1px;
    height: 32px;
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.10);
}

/* ── Scroll hint ──────────────────────────────────────────────────────────────
   Now an <a href="#gp-apps"> anchor so it actually scrolls to the apps section.
   The bounce animation is retained as the functional affordance it always was.
────────────────────────────────────────────────────────────────────────────── */
.gp-hero-scroll-hint[b-jvpv2fzwnv] {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    animation: fade-up-b-jvpv2fzwnv 0.6s 0.7s ease both;
    z-index: 1;
}

.gp-scroll-label[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.22);
    transition: color 0.2s;
}

.gp-hero-scroll-hint:hover .gp-scroll-label[b-jvpv2fzwnv] {
    color: rgba(var(--bs-primary-rgb, 0,212,255), 0.60);
}

.gp-scroll-arrow[b-jvpv2fzwnv] {
    font-size: 0.85rem;
    color: rgba(var(--bs-primary-rgb, 0,212,255), 0.35);
    animation: scroll-bounce-b-jvpv2fzwnv 2.2s ease-in-out infinite;
    transition: color 0.2s;
}

.gp-hero-scroll-hint:hover .gp-scroll-arrow[b-jvpv2fzwnv] {
    color: rgba(var(--bs-primary-rgb, 0,212,255), 0.80);
}

@keyframes scroll-bounce-b-jvpv2fzwnv {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ══ App grid section ════════════════════════════════════════════════════════ */
.gp-apps-section[b-jvpv2fzwnv] {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 24px 96px;
    /* Offset scroll target so the header doesn't cover the section title */
    scroll-margin-top: 72px;
}

.gp-apps-header[b-jvpv2fzwnv] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 48px;
}

.gp-apps-title[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.50);
    white-space: nowrap;
    margin: 0;
}

.gp-apps-title-mark[b-jvpv2fzwnv] {
    color: var(--bs-primary, #00d4ff);
}

.gp-apps-rule[b-jvpv2fzwnv] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb, 0,212,255), 0.25) 0%, transparent 100%);
}

/* ── Card grid ── */
.gp-app-grid[b-jvpv2fzwnv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* ══ App card ════════════════════════════════════════════════════════════════ */
.gp-app-card[b-jvpv2fzwnv] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 28px 22px;
    border-radius: 16px;
    border: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.08);
    background: rgba(var(--bs-body-color-rgb, 226,232,240), 0.02);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.25s;
    animation: fade-up-b-jvpv2fzwnv 0.55s calc(var(--card-index, 0) * 0.1s) ease both;
    cursor: pointer;
}

    .gp-app-card:not(.gp-card-placeholder):hover[b-jvpv2fzwnv] {
        border-color: rgba(var(--card-accent-rgb, 0,212,255), 0.40);
        background: rgba(var(--card-accent-rgb, 0,212,255), 0.04);
        box-shadow: 0 0 0 1px rgba(var(--card-accent-rgb, 0,212,255), 0.15), 0 12px 40px rgba(0,0,0,0.40), 0 0 48px rgba(var(--card-accent-rgb, 0,212,255), 0.08);
        transform: translateY(-4px);
    }

.gp-card-placeholder[b-jvpv2fzwnv] {
    cursor: default;
    opacity: 0.55;
    border-style: dashed;
}

.gp-card-accent-line[b-jvpv2fzwnv] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--card-accent-rgb, 0,212,255), 0.60) 40%, rgba(var(--card-accent-rgb, 0,212,255), 0.90) 50%, rgba(var(--card-accent-rgb, 0,212,255), 0.60) 60%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.gp-app-card:not(.gp-card-placeholder):hover .gp-card-accent-line[b-jvpv2fzwnv] {
    opacity: 1;
}

.gp-card-badge[b-jvpv2fzwnv] {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: 'Space Mono', monospace;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--card-accent, #00d4ff);
    color: var(--bs-body-bg, #0e0e14);
}

.gp-card-icon-wrap[b-jvpv2fzwnv] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(var(--card-accent-rgb, 0,212,255), 0.25);
    background: rgba(var(--card-accent-rgb, 0,212,255), 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: border-color 0.3s, background 0.3s;
}

.gp-app-card:not(.gp-card-placeholder):hover .gp-card-icon-wrap[b-jvpv2fzwnv] {
    border-color: rgba(var(--card-accent-rgb, 0,212,255), 0.50);
    background: rgba(var(--card-accent-rgb, 0,212,255), 0.12);
}

.gp-card-icon[b-jvpv2fzwnv] {
    font-size: 1.55rem;
    line-height: 1;
    color: var(--card-accent, #00d4ff);
}

.gp-placeholder-icon[b-jvpv2fzwnv] {
    font-size: 1.8rem;
    opacity: 0.5;
    font-family: 'Space Mono', monospace;
}

.gp-card-body[b-jvpv2fzwnv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.gp-card-name[b-jvpv2fzwnv] {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-emphasis-color, #f0f4f8);
    margin: 0;
    transition: color 0.2s;
}

.gp-app-card:not(.gp-card-placeholder):hover .gp-card-name[b-jvpv2fzwnv] {
    color: var(--card-accent, #00d4ff);
}

.gp-card-tagline[b-jvpv2fzwnv] {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(var(--card-accent-rgb, 0,212,255), 0.80);
    margin: 0;
}

.gp-card-desc[b-jvpv2fzwnv] {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.48);
    margin: 4px 0 0;
}

.gp-card-footer[b-jvpv2fzwnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.06);
}

.gp-card-cta[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.35);
    transition: color 0.2s;
}

.gp-app-card:not(.gp-card-placeholder):hover .gp-card-cta[b-jvpv2fzwnv] {
    color: var(--card-accent, #00d4ff);
}

.gp-card-arrow[b-jvpv2fzwnv] {
    font-size: 1rem;
    color: rgba(var(--card-accent-rgb, 0,212,255), 0.30);
    transition: color 0.2s, transform 0.2s;
}

.gp-app-card:not(.gp-card-placeholder):hover .gp-card-arrow[b-jvpv2fzwnv] {
    color: var(--card-accent, #00d4ff);
    transform: translateX(4px);
}

/* ══ Footer ══════════════════════════════════════════════════════════════════ */
.gp-footer[b-jvpv2fzwnv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(var(--bs-body-color-rgb, 226,232,240), 0.05);
}

.gp-footer-text[b-jvpv2fzwnv] {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.18);
}

.gp-footer-sep[b-jvpv2fzwnv] {
    color: rgba(var(--bs-body-color-rgb, 226,232,240), 0.12);
}

/* ══ Shared entrance animation ═══════════════════════════════════════════════ */
@keyframes fade-up-b-jvpv2fzwnv {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Sudoku.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   Sudoku.bootstrap.razor.css
   Bootstrap 5.3 adaptive theme — drop-in replacement for Sudoku.razor.css.

   USAGE
   ─────
   Rename this file to Sudoku.razor.css (replacing the custom-colour version)
   when you want the component to follow your active Bootstrap 5.3 theme
   automatically at runtime.

   MAPPING DECISIONS
   ─────────────────
   --sdk-accent  (pen mode)      → --bs-primary
   --sdk-note-*  (note mode)     → --bs-info
   --sdk-error-* (wrong entry)   → --bs-danger
   --sdk-match-* (same number)   → --bs-warning
   Cell surfaces                 → --bs-secondary-bg / --bs-tertiary-bg
   Page background               → --bs-body-bg
   Text                          → --bs-emphasis-color / --bs-body-color

   Bootstrap 5.3 variables used here (all present in the default theme and any
   compliant third-party theme):
     --bs-body-bg, --bs-body-bg-rgb
     --bs-body-color, --bs-body-color-rgb
     --bs-emphasis-color
     --bs-secondary-bg, --bs-tertiary-bg
     --bs-border-color, --bs-border-color-translucent
     --bs-primary,   --bs-primary-rgb
     --bs-info,      --bs-info-rgb
     --bs-warning,   --bs-warning-rgb
     --bs-danger,    --bs-danger-rgb

   color-mix() is used for tinted surfaces and muted variants.
   Browser support: all evergreen browsers (same bar as Bootstrap 5.3 itself).
───────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — Bootstrap variable mappings
   Every --sdk-* custom property is defined here and nowhere else.
   All rules below consume only --sdk-* variables (plus black/white for shadows).
══════════════════════════════════════════════════════════════════════════════ */
.sudoku-root[b-cwxp8u6voi] {
    /* Page background */
    --sdk-bg: var(--bs-body-bg);
    /* Board shell — primary-tinted dark surfaces */
    --sdk-board-shell-a: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-secondary-bg));
    --sdk-board-shell-b: color-mix(in srgb, var(--bs-primary) 3%, var(--bs-tertiary-bg));
    --sdk-board-shell-c: var(--bs-body-bg);
    /* Grid walls */
    --sdk-wall: var(--bs-border-color);
    --sdk-wall-lite: var(--bs-border-color-translucent);
    /* Cells — neutral layered surfaces */
    --sdk-cell-a: var(--bs-secondary-bg);
    --sdk-cell-b: color-mix(in srgb, var(--bs-secondary-bg) 70%, var(--bs-body-bg));
    --sdk-cell-c: var(--bs-tertiary-bg);
    /* Cell hover — faint primary tint */
    --sdk-cell-hover-a: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-secondary-bg));
    --sdk-cell-hover-b: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-secondary-bg));
    --sdk-cell-hover-c: color-mix(in srgb, var(--bs-primary) 3%, var(--bs-tertiary-bg));
    /* Cell selected — stronger primary tint */
    --sdk-cell-sel-a: color-mix(in srgb, var(--bs-primary) 16%, var(--bs-secondary-bg));
    --sdk-cell-sel-b: color-mix(in srgb, var(--bs-primary) 11%, var(--bs-secondary-bg));
    --sdk-cell-sel-c: color-mix(in srgb, var(--bs-primary) 7%, var(--bs-tertiary-bg));
    /* Cell highlighted (peer row/col/box) — subtle primary tint */
    --sdk-cell-hi-a: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-secondary-bg));
    --sdk-cell-hi-b: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-secondary-bg));
    --sdk-cell-hi-c: color-mix(in srgb, var(--bs-primary) 3%, var(--bs-tertiary-bg));
    /* Primary accent — pen mode */
    --sdk-accent: var(--bs-primary);
    --sdk-accent-lite: color-mix(in srgb, var(--bs-primary) 70%, white);
    --sdk-accent-dim: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-body-bg));
    --sdk-accent-glow: rgba(var(--bs-primary-rgb), 0.33);
    /* Number text */
    --sdk-text-given: color-mix(in srgb, var(--bs-primary) 55%, var(--bs-emphasis-color));
    --sdk-text-player: var(--bs-emphasis-color);
    /* Error — danger */
    --sdk-error: var(--bs-danger);
    --sdk-error-lite: color-mix(in srgb, var(--bs-danger) 60%, white);
    --sdk-error-glow: rgba(var(--bs-danger-rgb), 0.40);
    --sdk-error-cell-a: color-mix(in srgb, var(--bs-danger) 10%, var(--bs-secondary-bg));
    --sdk-error-cell-b: color-mix(in srgb, var(--bs-danger) 7%, var(--bs-secondary-bg));
    --sdk-error-cell-c: color-mix(in srgb, var(--bs-danger) 4%, var(--bs-tertiary-bg));
    /* Notes — info */
    --sdk-note-color: var(--bs-info);
    --sdk-note-dim: color-mix(in srgb, var(--bs-info) 45%, var(--bs-body-bg));
    --sdk-note-glow: rgba(var(--bs-info-rgb), 0.33);
    --sdk-note-cell-a: color-mix(in srgb, var(--bs-info) 10%, var(--bs-secondary-bg));
    --sdk-note-cell-b: color-mix(in srgb, var(--bs-info) 7%, var(--bs-secondary-bg));
    --sdk-note-cell-c: color-mix(in srgb, var(--bs-info) 4%, var(--bs-tertiary-bg));
    /* Number match — warning */
    --sdk-match-color: var(--bs-warning);
    --sdk-match-glow: rgba(var(--bs-warning-rgb), 0.30);
    --sdk-match-cell-a: color-mix(in srgb, var(--bs-warning) 10%, var(--bs-secondary-bg));
    --sdk-match-cell-b: color-mix(in srgb, var(--bs-warning) 7%, var(--bs-secondary-bg));
    --sdk-match-cell-c: color-mix(in srgb, var(--bs-warning) 4%, var(--bs-tertiary-bg));
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE CONTAINER
══════════════════════════════════════════════════════════════════════════════ */
.sudoku-root[b-cwxp8u6voi] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--sdk-bg);
    background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--bs-body-color-rgb), 0.04) 0%, transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23ffffff04'/%3E%3C/svg%3E");
    font-family: 'Cormorant Garamond', serif;
    padding: 24px 16px;
    box-sizing: border-box;
}

    /* ══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════════════════════════ */
    .sudoku-root h1[b-cwxp8u6voi] {
        font-family: 'Cinzel', serif;
        font-weight: 900;
        font-size: clamp(1.6rem, 4vw, 2.4rem);
        letter-spacing: 0.35em;
        color: var(--sdk-accent);
        text-shadow: 0 0 30px var(--sdk-accent-glow), 0 2px 4px rgba(0,0,0,0.55);
        margin-bottom: 6px;
        text-transform: uppercase;
    }

.ornament[b-cwxp8u6voi] {
    font-size: 1rem;
    color: var(--sdk-accent-dim);
    letter-spacing: 0.3em;
    margin: 4px 0 0;
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER ROW — difficulty selector + timer side by side
══════════════════════════════════════════════════════════════════════════════ */
.header-row[b-cwxp8u6voi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: calc(clamp(44px, 7vw, 58px) * 9 + 3px * 10 + 36px);
    margin: 14px 0 14px;
    gap: 12px;
}

/* ── Difficulty selector ── */
.difficulty-row[b-cwxp8u6voi] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.diff-btn[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color-translucent);
    background: rgba(var(--bs-body-bg-rgb), 0.50);
    color: rgba(var(--bs-body-color-rgb), 0.40);
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    .diff-btn:hover[b-cwxp8u6voi] {
        background: rgba(var(--bs-body-color-rgb), 0.06);
        color: rgba(var(--bs-body-color-rgb), 0.65);
        border-color: var(--bs-border-color);
    }

/* Easy active → primary */
.easy-btn.diff-active[b-cwxp8u6voi] {
    border-color: var(--sdk-accent);
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--sdk-accent-lite);
    box-shadow: 0 0 10px var(--sdk-accent-glow), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Moderate active → warning */
.moderate-btn.diff-active[b-cwxp8u6voi] {
    border-color: var(--sdk-note-color);
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--sdk-note-color);
    box-shadow: 0 0 10px var(--sdk-note-glow), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Advanced active → info */
.advanced-btn.diff-active[b-cwxp8u6voi] {
    border-color: var(--bs-warning);
    background: rgba(var(--bs-warning-rgb), 0.12);
    color: color-mix(in srgb, var(--bs-warning) 70%, white);
    box-shadow: 0 0 10px rgba(var(--bs-warning-rgb), 0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── Timer ── */
.timer-display[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(var(--bs-body-color-rgb), 0.45);
    transition: color 0.4s, text-shadow 0.4s;
    white-space: nowrap;
}

    .timer-display.timer-won[b-cwxp8u6voi] {
        color: var(--sdk-accent-lite);
        text-shadow: 0 0 14px var(--sdk-accent-glow);
    }

/* ══════════════════════════════════════════════════════════════════════════════
   BOARD SHELL
══════════════════════════════════════════════════════════════════════════════ */
.board-shell[b-cwxp8u6voi] {
    background: linear-gradient(145deg, var(--sdk-board-shell-a) 0%, var(--sdk-board-shell-b) 40%, var(--sdk-board-shell-c) 100%);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 0 0 1px var(--sdk-wall-lite), 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.75), inset 0 1px 0 rgba(var(--bs-primary-rgb), 0.15), inset 0 -1px 0 rgba(0,0,0,0.35);
    position: relative;
}

    .board-shell[b-cwxp8u6voi]::before {
        content: '';
        position: absolute;
        inset: 6px;
        border-radius: 12px;
        border: 1px solid var(--sdk-accent-dim);
        opacity: 0.35;
        pointer-events: none;
    }

/* ══════════════════════════════════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════════════════════════════════ */
.grid[b-cwxp8u6voi] {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 3px;
    background: var(--sdk-wall);
    border-radius: 10px;
    padding: 3px;
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.65), inset 0 -1px 4px rgba(0,0,0,0.4);
    position: relative;
}

    .grid[b-cwxp8u6voi]::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: 10px;
/*        background: linear-gradient(90deg, transparent calc(33.33% - 1.5px), var(--sdk-accent-dim) calc(33.33% - 1.5px), var(--sdk-accent-dim) calc(33.33% + 1.5px), transparent calc(33.33% + 1.5px)), linear-gradient(90deg, transparent calc(66.66% - 1.5px), var(--sdk-accent-dim) calc(66.66% - 1.5px), var(--sdk-accent-dim) calc(66.66% + 1.5px), transparent calc(66.66% + 1.5px)), linear-gradient(180deg, transparent calc(33.33% - 1.5px), var(--sdk-accent-dim) calc(33.33% - 1.5px), var(--sdk-accent-dim) calc(33.33% + 1.5px), transparent calc(33.33% + 1.5px)), linear-gradient(180deg, transparent calc(66.66% - 1.5px), var(--sdk-accent-dim) calc(66.66% - 1.5px), var(--sdk-accent-dim) calc(66.66% + 1.5px), transparent calc(66.66% + 1.5px));*/
        z-index: 2;
        opacity: 0.65;
    }

/* ══════════════════════════════════════════════════════════════════════════════
   CELL — base state
══════════════════════════════════════════════════════════════════════════════ */
.cell[b-cwxp8u6voi] {
    width: clamp(44px, 7vw, 58px);
    height: clamp(44px, 7vw, 58px);
    background: linear-gradient(145deg, var(--sdk-cell-a) 0%, var(--sdk-cell-b) 60%, var(--sdk-cell-c) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.55), inset -1px -1px 3px rgba(255,255,255,0.04), inset 1px 1px 0px rgba(255,255,255,0.03), 0 1px 0 rgba(var(--bs-primary-rgb), 0.18), 0 -1px 0 rgba(0,0,0,0.35);
    outline: none;
    user-select: none;
    overflow: hidden;
}

    .cell[b-cwxp8u6voi]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 6px;
        background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 52%);
        pointer-events: none;
        z-index: 3;
    }

    .cell:hover:not(.given)[b-cwxp8u6voi] {
        background: linear-gradient(145deg, var(--sdk-cell-hover-a) 0%, var(--sdk-cell-hover-b) 60%, var(--sdk-cell-hover-c) 100%);
        box-shadow: inset 2px 2px 6px rgba(0,0,0,0.44), inset -1px -1px 3px rgba(255,255,255,0.07), 0 1px 0 rgba(var(--bs-primary-rgb), 0.20), 0 0 0 1px var(--sdk-accent-dim);
    }

    /* ── Selected (pen mode) ── */
    .cell.selected[b-cwxp8u6voi] {
        background: linear-gradient(145deg, var(--sdk-cell-sel-a) 0%, var(--sdk-cell-sel-b) 60%, var(--sdk-cell-sel-c) 100%);
        box-shadow: inset 2px 2px 6px rgba(0,0,0,0.44), inset -1px -1px 3px var(--sdk-accent-glow), 0 0 0 2px var(--sdk-accent), 0 0 12px var(--sdk-accent-glow);
    }

/* ── Selected (note mode) ── */
.sudoku-root.note-mode .cell.selected[b-cwxp8u6voi] {
    background: linear-gradient(145deg, var(--sdk-note-cell-a) 0%, var(--sdk-note-cell-b) 60%, var(--sdk-note-cell-c) 100%);
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.44), inset -1px -1px 3px var(--sdk-note-glow), 0 0 0 2px var(--sdk-note-color), 0 0 14px var(--sdk-note-glow);
}

/* ── Highlighted (same row / col / box) ── */
.cell.highlighted[b-cwxp8u6voi] {
    background: linear-gradient(145deg, var(--sdk-cell-hi-a) 0%, var(--sdk-cell-hi-b) 60%, var(--sdk-cell-hi-c) 100%);
}

/* ── Number-match — all cells sharing the selected cell's value ── */
.cell.number-match[b-cwxp8u6voi] { 
    background: linear-gradient(145deg, var(--sdk-note-cell-a) 0%, var(--sdk-note-cell-b) 60%, var(--sdk-note-cell-c) 100%);
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.44), inset -1px -1px 3px var(--sdk-note-glow), 0 0 0 2px var(--sdk-note-color), 0 0 14px var(--sdk-note-glow);
}

/* A cell that is both a peer AND a number match */
.cell.highlighted.number-match[b-cwxp8u6voi] { /*HERE*/
    background: linear-gradient(145deg, var(--sdk-note-cell-a) 0%, var(--sdk-note-cell-b) 60%, var(--sdk-note-cell-c) 100%);
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.44), inset -1px -1px 3px var(--sdk-note-glow), 0 0 0 2px var(--sdk-note-color), 0 0 14px var(--sdk-note-glow);
}

/* ── Error cell ── */
.cell.error-cell[b-cwxp8u6voi] {
    background: linear-gradient(145deg, var(--sdk-error-cell-a) 0%, var(--sdk-error-cell-b) 60%, var(--sdk-error-cell-c) 100%);
    box-shadow: inset 2px 2px 6px rgba(0,0,0,0.55), inset -1px -1px 3px rgba(255,255,255,0.03), 0 0 0 1px rgba(var(--bs-danger-rgb), 0.35);
}

    .cell.error-cell[b-cwxp8u6voi]::after {
        content: '';
        position: absolute;
        width: 145%;
        height: 3px;
        background: linear-gradient(90deg, transparent 0%, var(--sdk-error-glow) 15%, var(--sdk-error) 35%, var(--sdk-error-lite) 50%, var(--sdk-error) 65%, var(--sdk-error-glow) 85%, transparent 100%);
        top: 50%;
        left: -22.5%;
        transform: translateY(-50%) rotate(-33deg);
        box-shadow: 0 0 8px var(--sdk-error-glow), 0 0 2px var(--sdk-error);
        z-index: 4;
        pointer-events: none;
        border-radius: 2px;
    }

/* ══════════════════════════════════════════════════════════════════════════════
   CELL NUMBER
══════════════════════════════════════════════════════════════════════════════ */
.cell-num[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    line-height: 1;
    pointer-events: none;
    position: absolute;
    z-index: 2;
    transition: color 0.2s, opacity 0.2s;
}

.cell.given .cell-num[b-cwxp8u6voi] {
    color: var(--sdk-text-given);
    text-shadow: 0 0 12px var(--sdk-accent-glow), 0 1px 3px rgba(0,0,0,0.5);
}

.cell:not(.given) .cell-num[b-cwxp8u6voi] {
    color: var(--sdk-text-player);
    text-shadow: 0 0 8px rgba(var(--bs-body-color-rgb), 0.18), 0 1px 2px rgba(0,0,0,0.45);
}

/* Number-match cells — warning tint on the digit */
.cell.number-match .cell-num[b-cwxp8u6voi] {
    color: var(--sdk-match-color);
    text-shadow: 0 0 10px var(--sdk-match-glow), 0 1px 2px rgba(0,0,0,0.45);
}

/* Given cells that are also a number match */
.cell.given.number-match .cell-num[b-cwxp8u6voi] { 
    color: var(--sdk-text-given);
    text-shadow: 0 0 12px var(--sdk-accent-glow), 0 1px 3px rgba(0,0,0,0.5);
}

.cell.error-cell .cell-num[b-cwxp8u6voi] {
    color: var(--sdk-error-lite);
    opacity: 0.7;
    text-shadow: 0 0 8px var(--sdk-error-glow);
}

/* ══════════════════════════════════════════════════════════════════════════════
   NOTES MICRO-GRID
══════════════════════════════════════════════════════════════════════════════ */
.notes-grid[b-cwxp8u6voi] {
    position: absolute;
    inset: 3px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    pointer-events: none;
    z-index: 1;
}

.note-slot[b-cwxp8u6voi] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem);
/*    font-size: clamp(0.27rem, 0.8vw, 0.42rem);*/
    line-height: 1;
    color: transparent;
    transition: color 0.15s, text-shadow 0.15s;
}

    .note-slot.active[b-cwxp8u6voi] {
        color: var(--sdk-note-color);
        text-shadow: 0 0 4px var(--sdk-note-glow);
    }

/* ══════════════════════════════════════════════════════════════════════════════
   CONTROLS PANEL
══════════════════════════════════════════════════════════════════════════════ */
.pad-wrap[b-cwxp8u6voi] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ── Mode row ── */
.mode-row[b-cwxp8u6voi] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mode-btn[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--sdk-accent-dim);
    background: rgba(var(--bs-body-bg-rgb), 0.55);
    color: var(--sdk-accent-dim);
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pen-mode-btn.active-mode[b-cwxp8u6voi] {
    border-color: var(--sdk-accent);
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--sdk-accent-lite);
    box-shadow: 0 0 10px var(--sdk-accent-glow), inset 0 1px 0 rgba(255,255,255,0.09);
}

.note-mode-btn.active-mode[b-cwxp8u6voi] {
    border-color: var(--sdk-note-color);
    background: rgba(var(--bs-info-rgb), 0.12);
    color: var(--sdk-note-color);
    box-shadow: 0 0 12px var(--sdk-note-glow), inset 0 1px 0 rgba(var(--bs-info-rgb), 0.09);
}

/* ── Auto-check toggle ── */
.check-toggle-wrap[b-cwxp8u6voi] {
    margin-left: 6px;
}

.check-toggle[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    .check-toggle .check-icon[b-cwxp8u6voi] {
        font-size: 0.65rem;
        line-height: 1;
    }

.check-off[b-cwxp8u6voi] {
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.20);
    background: rgba(var(--bs-body-bg-rgb), 0.45);
    color: rgba(var(--bs-body-color-rgb), 0.35);
}

    .check-off:hover[b-cwxp8u6voi] {
        border-color: rgba(var(--bs-body-color-rgb), 0.35);
        color: rgba(var(--bs-body-color-rgb), 0.65);
    }

.check-on[b-cwxp8u6voi] {
    border: 1px solid var(--sdk-error);
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--sdk-error-lite);
    box-shadow: 0 0 10px var(--sdk-error-glow), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Pad label ── */
.pad-label[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    color: var(--sdk-accent-dim);
    text-transform: uppercase;
    transition: color 0.25s;
}

.sudoku-root.note-mode .pad-label[b-cwxp8u6voi] {
    color: var(--sdk-note-dim);
}

/* ── Numpad ── */
.numpad[b-cwxp8u6voi] {
    display: flex;
    gap: 8px;
}

.num-btn[b-cwxp8u6voi] {
    width: clamp(36px, 5.5vw, 48px);
    height: clamp(36px, 5.5vw, 48px);
    border-radius: 10px;
    border: 1px solid var(--sdk-accent-dim);
    background: rgba(var(--bs-body-bg-rgb), 0.55);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    color: var(--sdk-accent-lite);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    cursor: pointer;
    transition: background 0.22s, box-shadow 0.22s, transform 0.1s, border-color 0.22s, color 0.22s, opacity 0.22s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
    outline: none;
}

    .num-btn[b-cwxp8u6voi]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 10px;
        background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, transparent 60%);
        pointer-events: none;
        z-index: 1;
        transition: background 0.22s;
    }

    .num-btn:hover:not(:disabled)[b-cwxp8u6voi] {
        background: rgba(var(--bs-primary-rgb), 0.14);
        border-color: var(--sdk-accent);
        box-shadow: 0 6px 16px rgba(0,0,0,0.44), 0 0 12px var(--sdk-accent-glow), inset 0 1px 0 rgba(255,255,255,0.11);
        transform: translateY(-2px);
    }

    .num-btn:active:not(:disabled)[b-cwxp8u6voi] {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0,0,0,0.44), inset 0 2px 6px rgba(0,0,0,0.28);
    }

    /* Depleted — 9 of this digit already on the board */
    .num-btn.num-depleted[b-cwxp8u6voi],
    .num-btn:disabled[b-cwxp8u6voi] {
        opacity: 0.22;
        cursor: not-allowed;
        border-color: rgba(var(--bs-body-color-rgb), 0.15);
        color: rgba(var(--bs-body-color-rgb), 0.30);
        box-shadow: none;
        transform: none;
    }

/* Note mode — numpad shifts to info palette */
.sudoku-root.note-mode .num-btn[b-cwxp8u6voi] {
    border-color: var(--sdk-note-dim);
    color: var(--sdk-note-color);
    background: rgba(var(--bs-info-rgb), 0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(var(--bs-info-rgb), 0.07);
}

    .sudoku-root.note-mode .num-btn[b-cwxp8u6voi]::before {
        background: linear-gradient(145deg, rgba(var(--bs-info-rgb), 0.06) 0%, transparent 60%);
    }

    .sudoku-root.note-mode .num-btn:hover:not(:disabled)[b-cwxp8u6voi] {
        background: rgba(var(--bs-info-rgb), 0.15);
        border-color: var(--sdk-note-color);
        box-shadow: 0 6px 16px rgba(0,0,0,0.44), 0 0 12px var(--sdk-note-glow), inset 0 1px 0 rgba(var(--bs-info-rgb), 0.11);
    }

/* ── Erase button ── */
.erase-btn[b-cwxp8u6voi] {
    width: clamp(36px, 5.5vw, 48px);
    height: clamp(36px, 5.5vw, 48px);
    border-radius: 10px;
    border: 1px solid rgba(var(--bs-danger-rgb), 0.35);
    background: rgba(var(--bs-danger-rgb), 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgba(var(--bs-danger-rgb), 0.75);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
    outline: none;
}

    .erase-btn:hover[b-cwxp8u6voi] {
        background: rgba(var(--bs-danger-rgb), 0.15);
        border-color: var(--sdk-error);
        color: var(--sdk-error-lite);
        box-shadow: 0 6px 16px rgba(0,0,0,0.44), 0 0 10px var(--sdk-error-glow);
        transform: translateY(-2px);
    }

    .erase-btn:active[b-cwxp8u6voi] {
        transform: translateY(0);
    }

/* ══════════════════════════════════════════════════════════════════════════════
   STATUS BAR
══════════════════════════════════════════════════════════════════════════════ */
.status[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    color: var(--sdk-accent-dim);
    text-transform: uppercase;
    min-height: 1em;
    transition: color 0.3s;
}

    .status.win[b-cwxp8u6voi] {
        color: var(--sdk-accent-lite);
        text-shadow: 0 0 20px var(--sdk-accent-glow);
    }

    .status.err[b-cwxp8u6voi] {
        color: var(--sdk-error);
    }

    .status.note-st[b-cwxp8u6voi] {
        color: var(--sdk-note-dim);
    }

/* ══════════════════════════════════════════════════════════════════════════════
   WIN OVERLAY
══════════════════════════════════════════════════════════════════════════════ */
.win-overlay[b-cwxp8u6voi] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-body-bg-rgb), 0.72);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    animation: overlay-fade-in-b-cwxp8u6voi 0.45s ease both;
}

@keyframes overlay-fade-in-b-cwxp8u6voi {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.win-card[b-cwxp8u6voi] {
    background: linear-gradient(160deg, color-mix(in srgb, var(--bs-primary) 8%, var(--bs-secondary-bg)) 0%, var(--bs-secondary-bg) 55%, var(--bs-body-bg) 100%);
    border: 1px solid var(--sdk-accent-dim);
    border-radius: 22px;
    padding: 44px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.15), 0 0 60px rgba(var(--bs-primary-rgb), 0.18), 0 24px 64px rgba(0,0,0,0.75);
    animation: card-rise-b-cwxp8u6voi 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.12s;
    max-width: 90vw;
}

@keyframes card-rise-b-cwxp8u6voi {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.win-ornament[b-cwxp8u6voi] {
    font-size: 1.1rem;
    letter-spacing: 0.5em;
    color: var(--sdk-accent);
    opacity: 0.75;
    margin-bottom: 4px;
}

.win-title[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    letter-spacing: 0.3em;
    color: var(--sdk-accent-lite);
    text-shadow: 0 0 40px var(--sdk-accent-glow), 0 2px 6px rgba(0,0,0,0.6);
    text-transform: uppercase;
    margin: 0;
}

.win-time[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--sdk-accent);
    text-shadow: 0 0 30px var(--sdk-accent-glow);
    margin: 6px 0 2px;
}

.win-subtitle[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    letter-spacing: 0.55em;
    color: var(--sdk-accent-dim);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.win-actions[b-cwxp8u6voi] {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.win-btn[b-cwxp8u6voi] {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 10px 22px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.same-diff-btn[b-cwxp8u6voi] {
    border: 1px solid var(--sdk-accent-dim);
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--sdk-accent-lite);
}

    .same-diff-btn:hover[b-cwxp8u6voi] {
        background: rgba(var(--bs-primary-rgb), 0.18);
        border-color: var(--sdk-accent);
        box-shadow: 0 0 14px var(--sdk-accent-glow);
        transform: translateY(-2px);
    }

.new-diff-btn[b-cwxp8u6voi] {
    border: 1px solid rgba(var(--bs-body-color-rgb), 0.20);
    background: rgba(var(--bs-body-bg-rgb), 0.50);
    color: rgba(var(--bs-body-color-rgb), 0.60);
}

    .new-diff-btn:hover[b-cwxp8u6voi] {
        background: rgba(var(--bs-body-color-rgb), 0.07);
        border-color: rgba(var(--bs-body-color-rgb), 0.35);
        color: rgba(var(--bs-body-color-rgb), 0.85);
        transform: translateY(-2px);
    }