/*
 * Pattaya Bar Simulator — mobile stylesheet.
 *
 * Scope: strictly `@media (max-width: 720px)` except for the :root token
 * block and the "hide on desktop" rules at the bottom. Above 720px this
 * file contributes only CSS custom properties.
 *
 * Structure:
 *   1. :root design tokens (--mc-* per CC_DESIGN_SPEC.md)
 *   2. @media mobile:
 *        a. hide desktop chrome
 *        b. NEW mobile chrome — header pill, bottom nav, more sheet,
 *           FAB, sub-tabs (CC_DESIGN_SPEC.md § Global chrome)
 *        c. Phase A per-page responsive fallbacks — kept in place
 *           until each page is rebuilt to match its mockup.
 *   3. @media desktop — hide mobile-only chrome.
 *
 * The --mc-* tokens are the spec's canonical values. They mirror the
 * existing --gold/--border/--red/etc. so either set works.
 */

:root {
    --mc-bg:         #ffffff;
    --mc-card:       #ffffff;
    --mc-inset:      #f0f1f5;
    --mc-border:     #dcdee5;
    --mc-border-sub: #e8eaef;
    --mc-text:       #1a1b2e;
    --mc-text-sec:   #5a5c6e;
    --mc-muted:      #8a8d9e;
    --mc-accent:     #3b82f6;
    --mc-accent-2:   #60a5fa;
    --mc-green:      #16a34a;
    --mc-red:        #dc2626;
    --mc-gold:       #b8860b;
    --mc-orange:     #d97706;
    --mc-blue:       #2563eb;
    --mc-purple:     #7c3aed;
    /* Noto Sans Thai listed as fallback so the ฿ glyph (U+0E3F) renders
       correctly on systems where Inter is missing the Thai range. The
       browser does per-character fallback so Latin chars still use Inter. */
    --mc-font:       "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

@media (max-width: 767px) {

    /* ---------- global layout: room for header + bottom nav ---------- */
    .content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        padding-top: calc(56px + env(safe-area-inset-top) + 8px) !important;
    }

    /* ---------- hide desktop chrome ---------- */
    .bar-header,
    .hamburger,
    .mobile-top-shield,
    .sidebar,
    .sidebar-backdrop,
    .scan-bill-btn,
    .admin-cog-btn,
    .notif-bell,
    .notif-dropdown,
    .notif-backdrop,
    .app-bar,
    /* Section tabs (My Ladies / Scouting / Girlfriends, Finance sections,
       Compete sections) are desktop-only — the redesign uses .m-subtabs
       inside each page. Hide them on mobile so there's only one tab row. */
    .section-tabs,
    /* Dirty-tricks legacy sub-tab pills — replaced by .m-subtabs on mobile. */
    #dtSubTabs,
    /* Admin impersonation switcher (Switch User dropdown) — desktop-only.
       Admins can use desktop to switch accounts. */
    #adminSwitcher,
    .admin-dropdown { display: none !important; }

    /* Force the body background to white on mobile regardless of theme.
       Per CC_DESIGN_SPEC.md the mobile design is light-mode only; the
       header, bottom nav, and FAB all assume light surfaces. The desktop
       theme (classic/dark/chang) continues to apply at ≥721px. */
    body {
        background: var(--mc-bg) !important;
        color: var(--mc-text) !important;
    }

    /* ============================================================
       MOBILE HEADER — 56px fixed top bar.
       [bar-switcher pill] [🔍] [🔔●]
       ============================================================ */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px 10px;
        padding-top: calc(8px + env(safe-area-inset-top));
        background: var(--mc-bg);
        border-bottom: 1px solid var(--mc-border);
        font-family: var(--mc-font);
    }

    .m-barpill {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
        padding: 4px 10px 4px 4px;
        border: 1px solid var(--mc-border);
        border-radius: 999px;
        background: var(--mc-inset);
        color: var(--mc-text);
        cursor: pointer;
        font: inherit;
        text-align: left;
    }
    .m-barpill:hover { border-color: var(--mc-accent); }
    .m-barpill:active { background: color-mix(in srgb, var(--mc-accent) 6%, var(--mc-inset)); }

    .m-barpill-logo {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        font-weight: 800;
    }
    .m-barpill-meta {
        min-width: 0;
        overflow: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    .m-barpill-name {
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-barpill-bal {
        font-size: 11px;
        font-weight: 800;
        color: var(--mc-gold);
        margin-top: 2px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .m-barpill-chev {
        font-size: 9px;
        color: var(--mc-muted);
        flex-shrink: 0;
    }

    .m-header-icons {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    .m-iconbtn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--mc-border);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        padding: 0;
        color: var(--mc-text);
        text-decoration: none;
        position: relative;
    }
    .m-iconbtn:hover { border-color: var(--mc-accent); }
    .m-iconbtn:active { background: color-mix(in srgb, var(--mc-accent) 8%, transparent); }
    .m-iconbtn-dot {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 8px;
        height: 8px;
        background: var(--mc-red);
        border-radius: 50%;
        border: 2px solid var(--mc-bg);
    }

    /* ============================================================
       SUB-TABS — segmented pill row under page titles.
       Markup: .m-subtabs > .m-subtab (optional .m-subtab-count chip)
       ============================================================ */
    .m-subtabs {
        display: flex;
        gap: 4px;
        background: var(--mc-inset);
        border-radius: 10px;
        padding: 4px;
        margin: 10px 0 14px;
    }
    .m-subtab {
        flex: 1;
        text-align: center;
        padding: 7px 0;
        font-size: 12px;
        font-weight: 700;
        border-radius: 7px;
        white-space: nowrap;
        background: transparent;
        color: var(--mc-text-sec);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        min-height: 32px;
    }
    .m-subtab.active {
        background: var(--mc-card);
        color: var(--mc-accent);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .m-subtab-count {
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--mc-border);
        color: var(--mc-muted);
        font-weight: 700;
    }
    .m-subtab.active .m-subtab-count {
        background: rgba(59, 130, 246, 0.15);
        color: var(--mc-accent);
    }

    /* ============================================================
       FAB — bill-scan floating button, bottom-right, above the nav.
       ============================================================ */
    .m-fab {
        position: fixed;
        right: 16px;
        bottom: calc(72px + env(safe-area-inset-bottom) + 12px);
        z-index: 990;
        width: 56px;
        height: 56px;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        color: #fff;
        font-size: 22px;
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .m-fab:hover { filter: brightness(1.05); }
    .m-fab:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5); }
    /* Hide the FAB on the 3D World — full-screen canvas owns the viewport */
    body.world-page .m-fab { display: none !important; }

    /* ============================================================
       MORE SHEET — slides up from bottom, contains nav + profile +
       admin + footer. See _mobile_more_sheet.html for markup.
       ============================================================ */
    .mobile-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1400;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0s linear 0.2s;
    }
    .mobile-more-backdrop.open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s, visibility 0s;
    }
    .mobile-more-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        max-height: 92vh;
        max-height: 92dvh;
        background: var(--mc-card);
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
        font-family: var(--mc-font);
    }
    .mobile-more-sheet.open { transform: translateY(0); }

    .mms-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem 0.75rem;
        border-bottom: 1px solid var(--mc-border);
        position: relative;
    }
    .mms-top::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--mc-border);
    }
    .mms-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--mc-text);
        margin-top: 4px;
    }
    .mms-close {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--mc-border);
        background: transparent;
        color: var(--mc-text);
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Bar switcher inside the sheet */
    .mms-barswitch-wrap { padding: 0.75rem 0.85rem 0.3rem; }
    .mms-barswitch {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem 0.8rem;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        color: var(--mc-text);
        font: inherit;
        cursor: pointer;
        text-align: left;
    }
    .mms-barswitch:hover { border-color: var(--mc-accent); }
    .mms-bar-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        color: #fff;
    }
    .mms-bar-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }
    .mms-bar-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mc-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mms-bar-bal {
        font-size: 0.72rem;
        color: var(--mc-gold);
        margin-top: 2px;
        font-variant-numeric: tabular-nums;
    }
    .mms-bar-chev {
        font-size: 0.8rem;
        color: var(--mc-text-sec);
        transition: transform 0.15s;
    }
    .mms-barswitch-wrap.open .mms-bar-chev { transform: rotate(180deg); }

    .mms-bar-list {
        display: none;
        flex-direction: column;
        gap: 0.3rem;
        margin-top: 0.5rem;
        padding: 0.4rem;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
    }
    .mms-bar-list.open { display: flex; }
    .mms-bar-item {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.55rem 0.65rem;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid transparent;
        /* Items render as <button> (inside a per-bar POST form) or <a>
           (the "New Bar" tile). Reset native form/link chrome so they
           look like flat rows. */
        background: transparent;
        font: inherit;
        color: inherit;
        text-align: left;
        text-decoration: none;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        min-height: 44px;
    }
    .mms-bar-item:hover {
        background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
        border-color: var(--mc-border);
    }
    /* Each bar item is wrapped in its own POST form. The form is just a
       transport — visually it shouldn't add any margin or layout. */
    .mms-bar-item-form { margin: 0; padding: 0; display: block; }

    /* Nav grid */
    .mms-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
        padding: 0.85rem;
    }
    .mms-nav-item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.75rem 0.8rem;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        text-decoration: none;
        color: var(--mc-text);
        font-size: 0.88rem;
        font-weight: 600;
        min-height: 48px;
    }
    .mms-nav-item:hover {
        border-color: var(--mc-accent);
        color: var(--mc-text);
    }
    .mms-nav-item.active {
        background: color-mix(in srgb, var(--mc-accent) 14%, transparent);
        border-color: var(--mc-accent);
        color: var(--mc-text);
    }
    .mms-nav-emoji {
        font-size: 1.2rem;
        line-height: 1;
        flex-shrink: 0;
    }
    /* Count badge — matches the bottom-nav red dot so tapping "More"
       because of the dot leads to an obvious "here's the N waiting for
       you" landmark on the Inbox link. */
    .mms-nav-count {
        margin-left: auto;
        background: var(--mc-red);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 800;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    .mms-divider {
        border: none;
        border-top: 1px solid var(--mc-border);
        margin: 0.5rem 1rem;
    }

    /* Profile row + admin row */
    .mms-profile {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.8rem 1rem;
        text-decoration: none;
        color: var(--mc-text);
    }
    .mms-profile:hover { background: color-mix(in srgb, var(--mc-accent) 8%, transparent); }
    .mms-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        flex-shrink: 0;
    }
    .mms-avatar-placeholder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    .mms-profile-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .mms-profile-name {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--mc-text);
    }
    .mms-profile-sub {
        font-size: 0.72rem;
        color: var(--mc-text-sec);
        margin-top: 2px;
    }
    .mms-profile-chev {
        font-size: 1.2rem;
        color: var(--mc-muted);
    }

    /* Admin row — red tint per spec. */
    .mms-admin,
    .mms-admin:hover {
        background: color-mix(in srgb, var(--mc-red) 7%, transparent) !important;
    }
    .mms-admin .mms-profile-name { color: var(--mc-red); }
    .mms-admin .mms-avatar-placeholder {
        background: color-mix(in srgb, var(--mc-red) 12%, transparent);
        border-color: color-mix(in srgb, var(--mc-red) 35%, transparent);
        color: var(--mc-red);
    }

    /* Footer row — links + version */
    .mms-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 1rem;
        padding: 0.85rem 1rem 1rem;
        border-top: 1px solid var(--mc-border);
        margin-top: 0.35rem;
    }
    .mms-foot-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.2rem;
        font-size: 0.8rem;
        color: var(--mc-text-sec);
        text-decoration: none;
    }
    .mms-foot-link:hover { color: var(--mc-text); }
    .mms-foot-icon { font-size: 0.9rem; }
    .mms-foot-logout { color: var(--mc-red); }
    .mms-version {
        margin-left: auto;
        font-size: 0.68rem;
        color: var(--mc-muted);
        font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    }

    /* ============================================================
       BOTTOM NAV — 5 slots: Home · Staff · Finance · Compete · More
       ============================================================ */
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--mc-card);
        border-top: 1px solid var(--mc-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        font-family: var(--mc-font);
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 6px;
        min-width: 0;
        min-height: 48px;
        font: inherit;
        border: 0;
        background: transparent;
        color: var(--mc-muted);
        text-decoration: none;
        border-radius: 8px;
        position: relative;
        cursor: pointer;
    }
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover {
        background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
    }
    .mobile-bottom-nav .mbn-emoji {
        font-size: 20px;
        line-height: 1;
        filter: grayscale(0.3);
    }
    .mobile-bottom-nav .mbn-label {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
    }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active {
        color: var(--mc-accent);
        background: rgba(59, 130, 246, 0.10);
    }
    .mobile-bottom-nav a.active .mbn-label,
    .mobile-bottom-nav button.active .mbn-label { font-weight: 700; }
    .mobile-bottom-nav a.active .mbn-emoji,
    .mobile-bottom-nav button.active .mbn-emoji { filter: none; }
    .mobile-bottom-nav .mbn-dot {
        position: absolute;
        top: 4px;
        right: 22%;
        width: 8px;
        height: 8px;
        background: var(--mc-red);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--mc-card);
    }

    /* ============================================================
       PHASE A per-page responsive fallbacks.
       These rules were added pre-redesign to stop desktop markup
       exploding on phones. They'll be deleted page-by-page as each
       template is rebuilt to match its mockup in CC_DESIGN_SPEC.md.
       ============================================================ */

    /* phase strip (home) */
    .phase-strip {
        padding: 0.7rem 0.85rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    .phase-strip-head { gap: 0.4rem !important; }
    .phase-strip-clocks { gap: 0.35rem !important; }
    .phase-clock-pill {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.72rem !important;
    }
    .phase-clock-pill strong { font-size: 0.82rem !important; }
    .phase-clock-label { font-size: 0.58rem !important; }
    .phase-strip-earnings {
        margin-top: 0.5rem !important;
        padding: 0.5rem 0.65rem;
        background: var(--mc-inset);
        border-radius: 8px;
    }
    .phase-earnings-label { font-size: 0.9rem !important; }
    .phase-earnings-lands { font-size: 0.7rem !important; }
    .phase-strip-sub { display: none; }
    .phase-strip-activities { gap: 0.3rem !important; margin-top: 0.55rem !important; }
    .phase-activity {
        padding: 0.28rem 0.55rem !important;
        font-size: 0.68rem !important;
    }
    .phase-strip-bar { margin-top: 0.6rem !important; }

    .mb-home-card { padding: 0.7rem 0.85rem 0.65rem !important; margin-bottom: 0.75rem !important; }
    .mb-home-item { padding: 0.5rem 0.6rem !important; }
    .mb-home-item > div > div:first-child { font-size: 0.8rem !important; }

    .today-panel {
        padding: 0.7rem 0.85rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 12px;
    }
    .today-list {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    .today-item {
        min-height: 56px !important;
        border-radius: 10px !important;
    }
    .today-item > a {
        padding: 0.6rem 0.7rem !important;
        font-size: 0.82rem !important;
        gap: 0.55rem !important;
    }
    .today-icon { font-size: 1.15rem !important; }

    .matchup-widget {
        padding: 0.9rem 0.9rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 14px;
    }
    .matchup-widget h3 {
        font-size: 0.7rem !important;
        margin-bottom: 0.5rem !important;
    }
    .matchup-widget .matchup-vs {
        flex-direction: row !important;
        gap: 0.5rem !important;
        align-items: center;
    }
    .matchup-widget .matchup-team .team-name {
        font-size: 0.78rem !important;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .matchup-widget .matchup-team .team-drinks {
        font-size: 1.5rem !important;
    }
    .matchup-widget .matchup-divider { font-size: 0.95rem !important; }

    .live-card {
        padding: 0.9rem 0.9rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 14px;
    }
    .live-card h2 { font-size: 1rem !important; }
    .live-sub { font-size: 0.75rem !important; margin-bottom: 0.65rem !important; }
    .live-stats { gap: 0.5rem !important; margin-bottom: 0.8rem !important; }
    .live-stat { padding: 0.55rem 0.65rem !important; }
    .live-stat .label { font-size: 0.58rem !important; }
    .live-stat .value { font-size: 1rem !important; }

    /* page header row (H1 + action button) */
    .content > .page-header,
    .content > [class*="-page"] > div:first-child {
        gap: 0.5rem !important;
        margin-bottom: 0.85rem !important;
    }
    .content h1,
    .content .page-title {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.15rem !important;
    }
    .content .subtitle,
    .content .page-sub {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    .new-btn,
    .btn-primary,
    .primary-btn { min-height: 44px; }

    /* tables → horizontal scroll */
    .content table,
    table.transfers-table,
    table.admin-table,
    table.data-table,
    table.leaderboard-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
        font-size: 0.78rem;
    }
    .content table thead,
    .content table tbody,
    .content table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }
    .content table th,
    .content table td {
        padding: 0.45rem 0.55rem !important;
    }
    table.transfers-table th:first-child,
    table.transfers-table td:first-child,
    table.admin-table th:first-child,
    table.admin-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--mc-card);
        z-index: 2;
    }

    /* data grids → 2 cols on phone, 1 col below 380 */
    .category-grid,
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .girl-grid,
    .fa-grid,
    .cashier-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.55rem !important;
    }
    @media (max-width: 380px) {
        .category-grid,
        .stat-grid,
        .girl-grid,
        .fa-grid,
        .cashier-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .stat-card { padding: 0.6rem 0.7rem !important; }
    .stat-card .label { font-size: 0.6rem !important; line-height: 1.2 !important; }
    .stat-card .value { font-size: 1.1rem !important; line-height: 1.15 !important; }
    .category-item { padding: 0.55rem 0.65rem !important; }
    .cat-label { font-size: 0.65rem !important; }
    .cat-value { font-size: 0.95rem !important; }

    /* bank */
    .bank-page h1 { font-size: 1.5rem !important; }
    .balance-section {
        gap: 0.55rem !important;
        margin-bottom: 1rem !important;
    }
    .balance-bar {
        padding: 0.85rem 1rem !important;
        gap: 0.25rem;
    }
    .balance-bar .label { font-size: 0.72rem !important; }
    .balance-bar .amount {
        font-size: 1.4rem !important;
        line-height: 1.1;
    }
    .cashflow-card,
    .category-panel {
        padding: 0.85rem 0.9rem !important;
        margin-bottom: 0.85rem !important;
    }
    .cashflow-card h3,
    .category-panel h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.15rem !important;
    }
    .cashflow-card .chart-sub,
    .category-panel .cat-sub {
        font-size: 0.72rem !important;
        margin-bottom: 0.65rem !important;
    }
    .cashflow-svg { max-height: 140px; width: 100%; }

    /* section tabs (horizontal scroll) */
    .section-tabs {
        padding: 0.45rem 0.55rem !important;
        margin-bottom: 0.75rem !important;
        flex-wrap: nowrap !important;
        scroll-snap-type: x proximity;
    }
    .section-tabs a {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8rem !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .section-header {
        flex-wrap: wrap;
        gap: 0.5rem !important;
        margin: 1rem 0 0.6rem !important;
    }
    .section-header h2 {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    /* modals → full-screen sheets */
    .transfer-overlay,
    [class$="-overlay"],
    [class*="-overlay "] { padding: 0 !important; }
    .transfer-overlay .transfer-box {
        width: calc(100vw - 1rem) !important;
        max-width: 100% !important;
        max-height: calc(100vh - 2rem) !important;
        max-height: calc(100dvh - 2rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
        padding: 1rem 1rem 1.1rem !important;
    }
    .transfer-overlay .transfer-box h3 {
        font-size: 1.1rem !important;
        padding-right: 2rem;
    }
    .transfer-overlay .close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.4rem !important;
    }

    /* forms: 16px inputs (prevents iOS zoom) */
    .content input[type="text"],
    .content input[type="number"],
    .content input[type="email"],
    .content input[type="password"],
    .content input[type="search"],
    .content input[type="tel"],
    .content input[type="url"],
    .content input[type="date"],
    .content select,
    .content textarea {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* matchup VS panel stays horizontal */
    .matchup-vs,
    .matchup-teams {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    /* roster / staff */
    .staff-row,
    .pitch-tile,
    .fa-card { padding: 0.7rem 0.75rem !important; }
    .roster-col-wrap {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .feed-item,
    .notif-item,
    .inbox-item { padding: 0.75rem 0.8rem !important; }

    .achievements-grid,
    .badge-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .group-stats,
    .bar-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    .lb-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lb-tab {
        flex-shrink: 0;
        font-size: 0.78rem !important;
        padding: 0.4rem 0.7rem !important;
    }

    /* 3D World → stub on phone */
    body.world-page canvas,
    body.world-page .world-3d-container { display: none !important; }
    body.world-page .world-mobile-fallback { display: block !important; }

    /* Lift sticky bottom CTAs above the bottom nav + FAB */
    .sticky-action-bar,
    .fixed-bottom-cta,
    [class$="-cta-bar"] {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }
}

/* ---------- hide mobile-only chrome on desktop ---------- */
@media (min-width: 768px) {
    .mobile-bottom-nav,
    .mobile-header,
    .mobile-more-sheet,
    .mobile-more-backdrop,
    .m-fab { display: none !important; }
}

/* ============================================================
   PHASE 2 — Page-level mobile redesign helpers.

   .m-only / .d-only are parallel-markup toggles used while we
   transition templates page-by-page: mobile block renders only
   on <=720px, desktop block only on >=721px. The goal is to
   delete the desktop block and its Phase A overrides once each
   page's mobile redesign is verified.
   ============================================================ */

@media (max-width: 767px) {
    .d-only { display: none !important; }
}
@media (min-width: 768px) {
    .m-only { display: none !important; }
}

@media (max-width: 767px) {

    /* Page wrapper — overrides .content's 2rem padding on mobile,
       matches the mockup canvas (16px gutter). */
    .m-page {
        padding: 0 16px 16px;
        font-family: var(--mc-font);
        color: var(--mc-text);
    }
    .m-page-title {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.015em;
        line-height: 1;
        margin: 2px 0 0;
        color: var(--mc-text);
    }

    .m-eyebrow {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mc-muted);
    }

    .m-green     { color: var(--mc-green); }
    .m-red       { color: var(--mc-red); }
    .m-gold      { color: var(--mc-gold); }
    .m-orange    { color: var(--mc-orange); }
    .m-purple    { color: var(--mc-purple); }
    .m-text-sec  { color: var(--mc-text-sec); }
    .m-muted     { color: var(--mc-muted); }

    /* Hero card — tinted-gradient feature block. Tints: blue (drop),
       gold (money), orange (rivalry), green (group), purple (prestige). */
    .m-hero {
        padding: 18px;
        border-radius: 16px;
    }
    .m-hero-blue {
        background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(96,165,250,0.04));
        border: 2px solid rgba(59,130,246,0.22);
    }
    .m-hero-gold {
        background: linear-gradient(135deg, rgba(184,134,11,0.10), rgba(184,134,11,0.02));
        border: 2px solid rgba(184,134,11,0.25);
    }
    .m-hero-big {
        font-size: 30px;
        font-weight: 800;
        margin-top: 6px;
        letter-spacing: -0.02em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        color: var(--mc-text);
    }
    .m-hero-money {
        font-size: 30px;
        font-weight: 800;
        color: var(--mc-gold);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
        margin-top: 6px;
    }

    /* Pills (status/tag chips) */
    .m-pills-row {
        display: flex;
        gap: 6px;
        margin-top: 10px;
        flex-wrap: wrap;
    }
    .m-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-pill-gold   { background: color-mix(in srgb, var(--mc-gold) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--mc-gold) 40%, transparent);   color: var(--mc-gold); }
    .m-pill-green  { background: color-mix(in srgb, var(--mc-green) 15%, transparent);  border: 1px solid color-mix(in srgb, var(--mc-green) 40%, transparent);  color: var(--mc-green); }
    .m-pill-red    { background: color-mix(in srgb, var(--mc-red) 15%, transparent);    border: 1px solid color-mix(in srgb, var(--mc-red) 40%, transparent);    color: var(--mc-red); }
    .m-pill-orange { background: color-mix(in srgb, var(--mc-orange) 15%, transparent); border: 1px solid color-mix(in srgb, var(--mc-orange) 40%, transparent); color: var(--mc-orange); }
    .m-pill-blue   { background: color-mix(in srgb, var(--mc-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--mc-accent) 40%, transparent); color: var(--mc-accent); }
    .m-pill-purple { background: color-mix(in srgb, var(--mc-purple) 15%, transparent); border: 1px solid color-mix(in srgb, var(--mc-purple) 40%, transparent); color: var(--mc-purple); }
    .m-pill-muted  { background: var(--mc-inset); border: 1px solid var(--mc-border); color: var(--mc-text-sec); }

    /* StatCard 2×2 grid */
    .m-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 12px;
    }
    .m-stat-card {
        padding: 12px;
        border-radius: 12px;
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
    }
    .m-stat-num {
        font-size: 22px;
        font-weight: 800;
        color: var(--mc-text);
        line-height: 1;
        margin-top: 6px;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }
    .m-stat-trend {
        font-size: 11px;
        font-weight: 600;
        margin-top: 4px;
    }

    /* Card (generic bordered container) */
    .m-card {
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        padding: 12px 14px;
        margin-top: 12px;
    }
    .m-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .m-card-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--mc-text);
    }
    .m-seeall {
        font-size: 11px;
        color: var(--mc-accent);
        font-weight: 600;
        text-decoration: none;
    }

    /* Feed row (icon · text · meta) */
    .m-feedrow {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border-top: 1px solid var(--mc-border-sub);
        text-decoration: none;
        color: inherit;
    }
    .m-feedrow:first-child { border-top: 0; }
    .m-feedrow-icon {
        font-size: 16px;
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }
    .m-feedrow-text {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        color: var(--mc-text-sec);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .m-feedrow-meta {
        font-size: 10px;
        color: var(--mc-muted);
        font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
        flex-shrink: 0;
    }

    /* Search input */
    .m-search-wrap {
        position: relative;
        margin-top: 10px;
    }
    .m-search-input {
        width: 100%;
        padding: 9px 12px 9px 34px;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 8px;
        font-size: 16px; /* iOS no-zoom */
        font-family: var(--mc-font);
        color: var(--mc-text);
        box-sizing: border-box;
        outline: none;
    }
    .m-search-input:focus { border-color: var(--mc-accent); }
    .m-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--mc-muted);
        pointer-events: none;
    }

    /* Horizontal chips row */
    .m-chips-row {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0 2px;
        margin-bottom: 4px;
    }
    .m-chip {
        flex-shrink: 0;
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        color: var(--mc-text-sec);
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }
    .m-chip.active {
        background: var(--mc-accent);
        border-color: var(--mc-accent);
        color: #fff;
    }

    /* Staff row list */
    .m-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 12px;
    }
    .m-staff-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 10px;
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
        text-decoration: none;
        color: inherit;
        min-height: 54px;
    }
    .m-staff-row.m-starred {
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
    }
    .m-staff-row.m-released {
        opacity: 0.55;
    }
    .m-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 14px;
        flex-shrink: 0;
    }
    .m-staff-meta {
        flex: 1;
        min-width: 0;
    }
    .m-staff-name-row {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .m-staff-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--mc-text);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-staff-star { font-size: 11px; flex-shrink: 0; }
    .m-staff-level {
        font-size: 9px;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--mc-inset);
        color: var(--mc-text-sec);
        font-weight: 700;
        flex-shrink: 0;
    }
    .m-staff-sub {
        font-size: 11px;
        color: var(--mc-muted);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-status-dot {
        font-size: 16px;
        line-height: 1;
        flex-shrink: 0;
    }
    .m-status-green  { color: var(--mc-green); }
    .m-status-red    { color: var(--mc-red); }
    /* .m-status-orange + .m-status-muted retained ONLY for legacy
       non-presence usages (e.g. "on leave" status text). Presence
       itself is strictly binary — see CLAUDE.md. */
    .m-status-orange { color: var(--mc-orange); }
    .m-status-muted  { color: var(--mc-muted); }

    /* Empty states — centered emoji, title, body, CTA */
    .m-empty {
        text-align: center;
        padding: 48px 24px 32px;
    }
    .m-empty-icon {
        font-size: 56px;
        line-height: 1;
        margin-bottom: 16px;
        opacity: 0.85;
    }
    .m-empty-title {
        font-size: 18px;
        font-weight: 800;
        color: var(--mc-text);
        margin-bottom: 8px;
    }
    .m-empty-body {
        font-size: 13px;
        color: var(--mc-text-sec);
        line-height: 1.4;
        margin-bottom: 20px;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .m-empty-cta {
        display: inline-block;
        padding: 12px 24px;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        border-radius: 10px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    /* When a .m-page is present, zero out .content's default padding since
       .m-page owns its own gutter. Desktop .content padding is untouched. */
    .content:has(.m-page) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ============================================================
       Modal polish — hire, transfer, swap, scouting compare.
       All share .swap-overlay/.swap-box or .transfer-overlay/.transfer-box
       markers. On mobile they become near-full-screen sheets with
       the light design-system palette.
       ============================================================ */
    .swap-overlay,
    .transfer-overlay {
        background: rgba(26, 27, 46, 0.55) !important;
        padding: 8px !important;
        align-items: flex-end !important;
    }
    .swap-overlay.open,
    .transfer-overlay.open {
        display: flex !important;
    }
    .swap-overlay .swap-box,
    .transfer-overlay .transfer-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        padding: 16px 14px 18px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        color: var(--mc-text);
        font-family: var(--mc-font);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
        position: relative;
    }
    /* Drag handle affordance on the sheet top */
    .swap-overlay .swap-box::before,
    .transfer-overlay .transfer-box::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--mc-border);
        pointer-events: none;
    }
    .swap-overlay h3,
    .transfer-overlay h3 {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--mc-text) !important;
        margin: 8px 0 4px !important;
        padding-right: 40px;
    }
    .swap-overlay .swap-sub,
    .transfer-overlay .subtitle,
    .transfer-overlay p {
        font-size: 12px !important;
        color: var(--mc-text-sec) !important;
    }
    .swap-overlay .close-btn,
    .transfer-overlay .close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        border: 1px solid var(--mc-border) !important;
        background: transparent !important;
        color: var(--mc-text) !important;
        font-size: 18px !important;
    }
    /* Search / filter bars inside the modal */
    .swap-overlay input[type="text"],
    .swap-overlay input[type="search"],
    .transfer-overlay input[type="text"],
    .transfer-overlay input[type="number"],
    .transfer-overlay select {
        background: var(--mc-inset) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 8px !important;
        color: var(--mc-text) !important;
        font-family: var(--mc-font) !important;
    }
    /* Venue filter pills + sort controls */
    .swap-overlay .swap-venue-filters,
    .swap-overlay .sort-controls {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin: 10px 0;
    }
    .swap-overlay .swap-venue-filters button,
    .swap-overlay .sort-controls button {
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        background: var(--mc-inset) !important;
        border: 1px solid var(--mc-border) !important;
        color: var(--mc-text-sec) !important;
    }
    .swap-overlay .swap-venue-filters button.active,
    .swap-overlay .sort-controls button.active,
    .swap-overlay .sort-controls .sort-btn.active {
        background: var(--mc-accent) !important;
        border-color: var(--mc-accent) !important;
        color: #fff !important;
    }
    /* Candidate list rows inside the hire modal */
    .swap-overlay .swap-list {
        margin-top: 10px;
    }
    .swap-overlay .swap-item,
    .swap-overlay .swap-row,
    .swap-overlay .hire-row {
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        color: var(--mc-text) !important;
        margin-bottom: 6px !important;
    }
    .swap-overlay .swap-item:hover,
    .swap-overlay .swap-row:hover {
        border-color: var(--mc-accent) !important;
    }
    /* Primary CTA inside modals */
    .swap-overlay button.hire-btn,
    .swap-overlay button.buy-btn,
    .swap-overlay .confirm-btn,
    .transfer-overlay .confirm-btn,
    .transfer-overlay button[type="submit"]:not(.close-btn) {
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2)) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        font-family: var(--mc-font) !important;
    }

    /* ============================================================
       Swap modals (hire cashier / replace girl / swap bench) —
       mobile: style candidate rows to match .m-staff-row cards and
       colour the presence dot green / orange / red based on state.
       ============================================================ */
    .swap-overlay .swap-item {
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        margin-bottom: 6px;
        color: var(--mc-text) !important;
    }
    .swap-overlay .swap-item:hover { border-color: var(--mc-accent) !important; }
    .swap-overlay .swap-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover;
    }
    .swap-overlay .swap-name {
        color: var(--mc-text) !important;
        font-weight: 800 !important;
        font-size: 14px !important;
    }
    .swap-overlay .swap-venue {
        color: var(--mc-text-sec) !important;
        font-size: 11px !important;
    }
    .swap-overlay .swap-cost {
        color: var(--mc-gold) !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums;
        font-size: 14px !important;
    }
    .swap-overlay .swap-btn {
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2)) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 10px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        min-height: 40px !important;
    }
    .swap-overlay .swap-btn:disabled { opacity: 0.4 !important; }
    /* Presence dot — binary green (present) / red (not).
       See CLAUDE.md: presence has only two states. */
    .swap-overlay .presence-wrap {
        position: relative;
        display: inline-block;
    }
    .swap-overlay .presence-wrap .presence-dot {
        position: absolute !important;
        bottom: -1px !important;
        right: -1px !important;
        width: 11px !important;
        height: 11px !important;
        border-radius: 50% !important;
        background: var(--mc-red) !important;
        border: 2px solid var(--mc-card) !important;
    }
    .swap-overlay .presence-wrap .presence-dot.active {
        background: var(--mc-green) !important;
    }
    /* 7-day heatmap: fits mobile row, squares slightly bigger */
    .swap-overlay .heatmap-7d {
        padding-left: 0 !important;
        margin-top: 6px !important;
        gap: 3px !important;
    }
    .swap-overlay .heatmap-7d > div {
        width: 14px !important;
        height: 14px !important;
        border-radius: 2px !important;
    }
    /* Loyalty/CAPT/level/fatigue pills rendered inline with the name
       on mobile only (via .m-only spans in the template). */
    .swap-overlay .m-only { display: inline-flex !important; }

    /* ============================================================
       Dirty-tricks picker — /dirty-tricks page grid.
       Applies our m-card look to the existing .trick-card markup.
       ============================================================ */
    .trick-card {
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        flex-direction: row !important;
        text-align: left !important;
        gap: 12px !important;
    }
    .trick-card .trick-icon {
        font-size: 28px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: var(--mc-inset) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .trick-card .trick-name {
        color: var(--mc-text) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }
    .trick-card .trick-desc {
        color: var(--mc-text-sec) !important;
        font-size: 12px !important;
        margin-top: 3px !important;
    }
    .trick-card .trick-cost {
        color: var(--mc-gold) !important;
        font-weight: 800 !important;
        font-size: 12px !important;
    }
    .trick-card .trick-actions {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    .trick-card button,
    .trick-card .buy-btn {
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2)) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        min-height: 36px;
    }
    .trick-card.disabled {
        opacity: 0.5 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE DARK THEME — Pattaya Bar Simulator
   Scoped to mobile only. Desktop has its own multi-theme system under
   themes/*.css and body[data-theme=...]; this stays out of its way.
   Activated by body.theme-dark. Default (body.theme-light) = no-op.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    body.theme-dark {
        /* surfaces */
        --mc-bg: #0a0b12;
        --mc-card: #141622;
        --mc-card-elev: #1a1d2e;
        --mc-inset: #0e0f18;

        /* borders */
        --mc-border: #252838;
        --mc-border-sub: #1c1f2c;

        /* text */
        --mc-text: #f5f6fa;
        --mc-text-sec: #a4a7b8;
        --mc-muted: #6b6e80;

        /* accents — app brand stays blue, shifted lighter for dark contrast */
        --mc-accent: #5b8cff;
        --mc-accent-2: #7ba3ff;

        /* nightlife neon — HERO CARDS ONLY. Never on body text, list rows,
           or chips-at-rest. Use it like a spotlight, not like paint. */
        --mc-neon: #ff3b8b;
        --mc-neon-2: #a855f7;

        /* semantic — money gold brightens so it reads on dark surfaces */
        --mc-gold: #fbbf24;
        --mc-green: #22c55e;
        --mc-red: #ef4444;
        --mc-orange: #f59e0b;
        --mc-purple: #a855f7;

        /* hero gradients (dark-tinted — the colour lives in the glow, not
           the gradient body). */
        --mc-hero-gold: linear-gradient(135deg, #2a1e0a 0%, #1a140a 60%, #141622 100%);
        --mc-hero-blue: linear-gradient(135deg, #0d1a3a 0%, #101528 60%, #141622 100%);
        --mc-hero-neon: linear-gradient(135deg, #2a0a24 0%, #1a0a2e 60%, #141622 100%);
        --mc-hero-red:  linear-gradient(135deg, #2a0d12 0%, #1a0a10 60%, #141622 100%);
        --mc-hero-purple: linear-gradient(135deg, #1f0d35 0%, #140a24 60%, #141622 100%);

        /* glows — outer box-shadow + 1px inner highlight for hero cards */
        --mc-glow-neon: 0 0 24px rgba(255, 59, 139, 0.25),
                        inset 0 0 1px rgba(255, 59, 139, 0.6);
        --mc-glow-gold: 0 0 24px rgba(251, 191, 36, 0.18),
                        inset 0 0 1px rgba(251, 191, 36, 0.5);
        --mc-glow-blue: 0 0 24px rgba(91, 140, 255, 0.18),
                        inset 0 0 1px rgba(91, 140, 255, 0.5);

        /* generic card shadow (subtle inset + lift) */
        --mc-card-shadow: inset 0 1px 0 rgba(255,255,255,0.03),
                          0 8px 24px rgba(0,0,0,0.4);
    }

    /* Pills — solid-fill punches too hard on dark; flip to alpha-blend. */
    body.theme-dark .m-pill-blue   { background: rgba(91, 140, 255, 0.15); color: #a4bfff; }
    body.theme-dark .m-pill-green  { background: rgba(34, 197, 94, 0.15); color: #5eead4; }
    body.theme-dark .m-pill-red    { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
    body.theme-dark .m-pill-gold   { background: rgba(251, 191, 36, 0.12); color: var(--mc-gold); }
    body.theme-dark .m-pill-orange { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
    body.theme-dark .m-pill-purple { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; }
    body.theme-dark .m-pill-muted  { background: rgba(255, 255, 255, 0.06); color: var(--mc-text-sec); }

    /* Hero cards — tinted gradient body, colour lives in glow + 1px border. */
    body.theme-dark .m-hero-gold {
        background: var(--mc-hero-gold);
        border: 1px solid rgba(251, 191, 36, 0.25);
        box-shadow: var(--mc-glow-gold);
    }
    body.theme-dark .m-hero-blue {
        background: var(--mc-hero-blue);
        border: 1px solid rgba(91, 140, 255, 0.25);
        box-shadow: var(--mc-glow-blue);
    }
    body.theme-dark .m-hero-neon {
        background: var(--mc-hero-neon);
        border: 1px solid rgba(255, 59, 139, 0.25);
        box-shadow: var(--mc-glow-neon);
    }
    body.theme-dark .m-hero-red {
        background: var(--mc-hero-red);
        border: 1px solid rgba(239, 68, 68, 0.25);
    }
    body.theme-dark .m-hero-purple {
        background: var(--mc-hero-purple);
        border: 1px solid rgba(168, 85, 247, 0.25);
    }

    /* Generic .m-card picks up the subtle shadow in dark. */
    body.theme-dark .m-card {
        box-shadow: var(--mc-card-shadow);
    }

    /* Bottom-nav active icon — brand blue, not neon. */
    body.theme-dark .m-bottom-nav .active {
        color: var(--mc-accent);
    }

    /* Avatars — subtle ring so same-colour hashes don't vanish on same-colour cards. */
    body.theme-dark .m-avatar {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    /* Presence dots — ring colour flips to card bg so dot pops off the avatar. */
    body.theme-dark .m-presence-dot {
        box-shadow: 0 0 0 2px var(--mc-card);
    }

    /* Search field — lifted from page, not the card. */
    body.theme-dark .m-search-wrap {
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
    }
    body.theme-dark .m-search-input { color: var(--mc-text); }
    body.theme-dark .m-search-input::placeholder { color: var(--mc-muted); }

    /* Chips — inactive gain 1px border to carve out from dark bg. */
    body.theme-dark .m-chip {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--mc-border);
        color: var(--mc-text-sec);
    }
    body.theme-dark .m-chip.active {
        background: var(--mc-accent);
        border-color: var(--mc-accent);
        color: #fff;
    }

    /* Primary buttons on card — accent blue, not neon. */
    body.theme-dark .m-btn-primary {
        background: var(--mc-accent);
        color: #fff;
    }

    /* ─── Theme picker (Appearance section on /profile) ─────────────── */

    .m-theme-picker {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .m-theme-card {
        position: relative;
        border-radius: 10px;
        padding: 12px;
        border: 1.5px solid var(--mc-border);
        text-align: center;
        cursor: pointer;
        min-height: 80px;
        font-family: var(--mc-font);
    }
    .m-theme-card.light { background: #ffffff; color: #1a1b2e; border-color: #dcdee5; }
    .m-theme-card.dark  { background: #0a0b12; color: #f5f6fa; border-color: #252838; }
    .m-theme-card.active {
        border-color: var(--mc-accent);
        box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.2),
                    0 0 16px rgba(91, 140, 255, 0.3);
    }
    .m-theme-card .m-theme-preview {
        height: 28px;
        border-radius: 6px;
        margin-bottom: 8px;
        border: 1px solid rgba(0,0,0,0.08);
    }
    .m-theme-card.light .m-theme-preview { background: #f0f1f5; }
    .m-theme-card.dark  .m-theme-preview { background: #141622; border-color: #1c1f2c; }
    .m-theme-card .m-theme-name {
        font-size: 12px;
        font-weight: 700;
    }
    .m-theme-card.active::after {
        content: "✓";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--mc-accent);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    /* ==================================================================
       STAFF / LADIES PAGE — mobile card list
       ------------------------------------------------------------------
       Replaces the desktop .roster-table + .pitch-wrap with a dense,
       swipeable card list. The markup lives in _mobile_staff_list.html
       and is {% include %}'d at the top of roster.html's body block —
       this block hides the desktop views below 720px so both systems
       coexist without overlap.
    ================================================================== */

    /* Hide the desktop roster views on mobile. Whitelist approach —
       instead of enumerating every desktop child class (pitch-wrap,
       perf-table-wrap, captainSection, synergy-bar, venue-breakdown,
       lineup-toggle, alert banners…) which is error-prone and has
       already leaked a second roster through twice, we hide ALL
       direct children of .roster-page and only let the mobile UI
       and script/style tags render.
       Scoped to body:not(.force-desktop) so force-desktop mode can
       show the desktop content again — the unscoped selector had
       specificity (0,5,2) which no force-desktop rule could beat. */
    body:not(.force-desktop) .roster-page > *:not(.m-staff-wrap):not(.m-staff-fab):not(.m-staff-fab-wrap):not(script):not(style) {
        display: none !important;
    }
    /* show the mobile card list (hidden above 720px via default) */
    body:not(.force-desktop) .m-staff-wrap { display: block !important; }

    /* --- wrapper + head --- */
    .m-staff-wrap {
        padding: 0 0.25rem;
        font-family: var(--mc-font);
        color: var(--mc-text);
        background: var(--mc-bg);
        min-height: 100vh;
    }
    /* Ensure the roster-page background follows the mobile palette on
       phones — otherwise the desktop theme's body bg (classic purple,
       dark, chang green) leaks through as the outer page colour.
       Not applied in force-desktop mode — the theme bg is correct there. */
    body:not(.force-desktop) .roster-page { background: var(--mc-bg); }
    .m-staff-head { padding: 0.25rem 0.5rem 0.5rem; }
    .m-staff-title {
        font-size: 1.5rem; font-weight: 800;
        letter-spacing: -0.01em; margin: 0 0 0.15rem;
        color: var(--mc-text);
    }
    .m-staff-sub {
        font-size: 0.78rem; color: var(--mc-text-sec);
        margin-bottom: 0.5rem;
    }
    .m-staff-sub .m-warn {
        color: var(--mc-red); font-weight: 700;
    }

    /* --- filter chips --- */
    .m-staff-filters {
        display: flex; gap: 6px; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.25rem 0.5rem 0.75rem;
        scrollbar-width: none;
    }
    .m-staff-filters::-webkit-scrollbar { display: none; }
    .m-chip {
        flex-shrink: 0;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        font-size: 0.72rem; font-weight: 700;
        background: var(--mc-card); color: var(--mc-text-sec);
        border: 1px solid var(--mc-border);
        cursor: pointer; white-space: nowrap;
    }
    .m-chip.active {
        background: var(--mc-accent);
        color: #fff; border-color: transparent;
    }
    .m-chip-sort { margin-left: auto; }

    /* --- section header --- */
    .m-staff-section { margin-bottom: 1rem; }
    .m-staff-section-head {
        display: flex; align-items: center; gap: 8px;
        padding: 0.75rem 0.5rem 0.5rem;
        position: sticky; top: 48px; /* sits below mobile-header */
        background: var(--mc-bg);
        z-index: 2;
    }
    .m-sec-icon { font-size: 0.95rem; }
    .m-sec-label {
        font-size: 0.68rem; font-weight: 800;
        letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--mc-text-sec);
    }
    .m-sec-count {
        font-size: 0.7rem; font-weight: 700;
        color: var(--mc-muted);
        font-variant-numeric: tabular-nums;
    }
    .m-sec-action {
        margin-left: auto;
        background: transparent;
        border: 1px solid var(--mc-border);
        color: var(--mc-text-sec);
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.65rem; font-weight: 700;
        cursor: pointer;
    }
    .m-sec-hire-btn {
        margin-left: auto;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        border: none; color: #fff;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        font-size: 0.7rem; font-weight: 700;
        cursor: pointer;
        min-height: 30px;
    }
    .m-fl-empty {
        display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
        padding: 1rem 0.75rem;
        border: 1px dashed var(--mc-border);
        border-radius: 12px;
        background: var(--mc-card);
        margin: 0 0.5rem;
    }
    .m-fl-empty-txt {
        font-size: 0.72rem; color: var(--mc-text-sec); text-align: center;
    }
    .m-fl-empty .m-sec-hire-btn { margin-left: 0; min-height: 36px; padding: 0.4rem 1rem; }

    /* --- card --- */
    .m-staff-card {
        position: relative;
        margin: 0 0.25rem 0.5rem;
        border-radius: 14px;
        overflow: hidden;
        background: transparent; /* the -body is the visible surface */
    }
    .m-card-body {
        position: relative;
        display: flex; gap: 10px;
        padding: 11px 12px 11px 14px;
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
        border-radius: 14px;
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 2;
        align-items: flex-start;
    }
    .m-staff-card.m-open .m-card-body {
        box-shadow: -8px 0 16px rgba(0,0,0,0.10);
    }

    /* priority accent stripe — drawn on the card-body's left edge */
    .m-priority-captain   .m-card-body { box-shadow: inset 3px 0 0 var(--mc-gold),      0 0 8px rgba(255,215,0,0.25); }
    .m-priority-burnt     .m-card-body { box-shadow: inset 3px 0 0 var(--mc-red),       0 0 8px rgba(231,76,60,0.25); }
    .m-priority-overpaid  .m-card-body { box-shadow: inset 3px 0 0 var(--mc-red),       0 0 8px rgba(231,76,60,0.18); }
    .m-priority-hot       .m-card-body { box-shadow: inset 3px 0 0 var(--mc-green),     0 0 8px rgba(46,204,113,0.22); }

    /* --- portrait + rank --- */
    .m-portrait-wrap {
        position: relative; flex-shrink: 0;
    }
    .m-portrait {
        width: 44px; height: 44px; border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--mc-border);
        display: block;
    }
    .m-portrait-fallback {
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.3rem; background: var(--mc-card);
    }
    .m-portrait-fl     { border-color: var(--mc-green) !important; }
    .m-portrait-bench  { border-color: var(--mc-accent) !important; }
    .m-portrait-empty  { border-style: dashed !important; opacity: 0.6; }

    .m-rank {
        position: absolute; top: -5px; left: -5px;
        min-width: 18px; height: 18px;
        padding: 0 5px; border-radius: 999px;
        background: var(--mc-card); border: 1px solid var(--mc-border);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 9px; font-weight: 800; color: var(--mc-text-sec);
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    .m-rank-fl    { color: var(--mc-green); border-color: rgba(46,204,113,0.4); }
    .m-rank-bench { color: var(--mc-accent); border-color: rgba(52,152,219,0.4); }
    .m-card-cashier .m-rank { color: var(--mc-gold); border-color: rgba(255,215,0,0.4); }

    /* presence dot (reuses existing .presence-dot from _presence.html) */
    .m-portrait-wrap .presence-dot {
        position: absolute; bottom: 0; right: 0;
        box-shadow: 0 0 0 2px var(--mc-card);
    }

    /* --- card main (text content) --- */
    .m-card-main {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; gap: 3px;
    }
    .m-row-1 {
        display: flex; align-items: center; gap: 6px;
        min-width: 0;
    }
    .m-name {
        font-weight: 800; font-size: 0.95rem;
        letter-spacing: -0.005em;
        color: var(--mc-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 160px;
    }
    .m-name a { color: inherit; text-decoration: none; }
    .m-name a:hover { text-decoration: underline; }

    .m-card-menu {
        margin-left: auto;
        background: transparent; border: none;
        color: var(--mc-muted);
        font-size: 1.1rem; font-weight: 700;
        padding: 0 4px;
        cursor: pointer;
        line-height: 1;
    }

    /* tag pills (CAPT, BURNT, HOT, BENCH, LOYALTY…) */
    .m-tag {
        display: inline-flex; align-items: center; gap: 2px;
        padding: 1px 6px; border-radius: 999px;
        font-size: 9px; font-weight: 800;
        letter-spacing: 0.03em;
        white-space: nowrap;
        line-height: 1.4;
    }
    .m-tag-gold  { background: rgba(255,215,0,0.16);  color: var(--mc-gold); }
    .m-tag-red   { background: rgba(231,76,60,0.15);  color: var(--mc-red); }
    .m-tag-green { background: rgba(46,204,113,0.15); color: var(--mc-green); }
    .m-tag-blue  { background: rgba(52,152,219,0.15); color: var(--mc-accent); }
    .m-tag-loy   { background: rgba(46,204,113,0.75); color: #fff; }
    .m-tag-green-sub {
        background: rgba(46,204,113,0.08); color: var(--mc-green);
        border: 1px solid rgba(46,204,113,0.22);
    }

    .m-row-2 {
        display: flex; align-items: center; gap: 5px;
        font-size: 0.72rem;
        color: var(--mc-text-sec);
        min-width: 0;
    }
    .m-venue {
        color: var(--mc-muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 90px;
    }
    .m-sep { color: var(--mc-muted); }
    .m-paid { font-variant-numeric: tabular-nums; }
    .m-dim  { color: var(--mc-muted); }

    .m-mv-pill {
        display: inline-flex; align-items: center;
        padding: 1px 6px; border-radius: 999px;
        font-size: 10px; font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .m-mv-pill.up   { background: rgba(46,204,113,0.14); color: var(--mc-green); }
    .m-mv-pill.down { background: rgba(231,76,60,0.14);  color: var(--mc-red); }

    /* --- row 3 (data strip) --- */
    .m-row-3 {
        display: flex; align-items: center; gap: 8px;
        margin-top: 4px;
        min-width: 0;
    }
    .m-drinks {
        padding: 1px 6px; border-radius: 999px;
        font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .m-drinks-high   { background: rgba(46,204,113,0.14); color: var(--mc-green); }
    .m-drinks-medium { background: rgba(241,196,15,0.14); color: #b88a00; }
    .m-drinks-low    { background: rgba(231,76,60,0.14);  color: var(--mc-red); }

    .m-form-dots {
        display: inline-flex; gap: 3px; align-items: stretch;
    }
    /* Form pills — chunky bars instead of tiny dots so the
       red/amber/green pattern is readable at thumb-scroll
       distance. Old 7×7 circles read as a uniform grey row on
       low-DPI mobile screens (Jamie's complaint, 2026-04-27). */
    .m-form-dots i {
        width: 6px; height: 14px; border-radius: 2px;
        background: var(--mc-muted);
        display: inline-block;
    }
    /* Form-bar colours match the Captain picker: high=green, medium=gold,
       low=red, null=grey. See _mobile_staff_list.html form_dots macro. */
    .m-form-dots i.high { background: var(--mc-green); }
    .m-form-dots i.med  { background: var(--mc-gold); }
    .m-form-dots i.low  { background: var(--mc-red); }
    .m-form-dots i.off  { background: var(--mc-border); opacity: 0.5; }

    .m-fatigue { margin-left: auto; }
    .m-fatigue .fatigue-pill {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* --- coach note (own row under the data strip, full-width) --- */
    .m-coach-row {
        margin-top: 5px;
        padding: 3px 8px; border-radius: 6px;
        background: rgba(59,130,246,0.08); color: var(--mc-accent);
        font-size: 10.5px; font-weight: 600; font-style: italic;
        line-height: 1.3;
    }

    /* --- MV cost pill on bench (what she'd cost to activate) +
           freelancer claim fee. Gold = it's money, tabular-nums. --- */
    .m-mv-cost {
        display: inline-flex; align-items: center;
        padding: 0 6px; border-radius: 4px;
        background: rgba(184,134,11,0.10); color: var(--mc-gold);
        font-size: 10px; font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em; white-space: nowrap;
    }

    /* --- last-shift hint for bench rows --- */
    .m-last-shift {
        font-size: 10.5px; color: var(--mc-muted);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }

    /* --- swipe actions underneath card-body --- */
    .m-card-actions {
        position: absolute; top: 0; right: 0; bottom: 0;
        display: flex;
        z-index: 1;
        border-radius: 14px;
        overflow: hidden;
    }
    .m-act {
        border: none;
        width: 72px;
        color: #fff;
        font-size: 11px; font-weight: 700;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        cursor: pointer;
        line-height: 1.1;
    }
    .m-act span { font-size: 1rem; }
    .m-act small {
        font-size: 9px; font-weight: 600; opacity: 0.85;
        font-variant-numeric: tabular-nums;
    }
    .m-act-train   { background: #9b59b6; }
    .m-act-replace { background: var(--mc-accent); }
    .m-act-swap    { background: #14b8a6; }
    .m-act-bench   { background: #0891b2; }
    .m-act-release { background: var(--mc-red); }
    .m-act-unbench { background: var(--mc-accent); }
    .m-act-transfer { background: var(--mc-purple); }

    /* Bench cards now carry up to 6 actions (Unbench + Swap + Replace +
       Train + Release + Transfer). 6 × 72px overflows a phone-width
       card, and the card's overflow:hidden clips the leftmost button —
       which was making the new Unbench invisible. Shrink bench-card
       action buttons so all six fit. */
    .m-card-bench .m-act {
        width: 58px;
        font-size: 10px;
    }
    .m-card-bench .m-act span { font-size: 14px; }
    .m-card-bench .m-act small { font-size: 8.5px; }

    /* --- empty slot ---
       Overrides `.m-empty { padding: 48px 24px 32px }` which is the
       page-level empty-state component's padding. When the same class
       lands on a staff card, that 48px top + 32px bottom stacks on the
       wrapper and blows the spacing out (each empty slot ~140px tall
       instead of ~68px). Zero the padding + text-align so the card
       renders with normal row spacing. */
    .m-staff-card.m-empty {
        padding: 0;
        text-align: left;
    }
    .m-staff-card.m-empty .m-card-body { opacity: 0.65; }
    .m-hire-inline {
        margin-left: auto; align-self: center;
        background: var(--mc-accent);
        color: #fff; border: none;
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        font-size: 0.72rem; font-weight: 700;
        cursor: pointer;
    }

    /* --- foot hint --- */
    .m-staff-foot {
        text-align: center;
        font-size: 0.68rem;
        color: var(--mc-muted);
        padding: 0.5rem 0 1.5rem;
    }

    /* --- Optimize roster FAB ---
       The wrap is the positioned container; the pill + close button are
       static inside it. Lets us stack an × without the pill shifting. #1
    */
    .m-staff-fab-wrap {
        position: fixed;
        right: 14px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 50;
        display: none;  /* shown only on .roster-page — see below */
        align-items: center; gap: 4px;
    }
    .m-staff-fab {
        position: static;
        padding: 0.72rem 1.1rem;
        border-radius: 999px;
        background: var(--mc-accent);
        color: #fff;
        border: none;
        font-size: 0.82rem; font-weight: 800;
        display: inline-flex; align-items: center; gap: 6px;
        box-shadow: 0 8px 22px color-mix(in srgb, var(--mc-accent) 50%, transparent),
                    0 0 0 1px rgba(255,255,255,0.08) inset;
        cursor: pointer;
    }
    .m-staff-fab span { font-size: 0.95rem; }
    .m-staff-fab-close {
        width: 28px; height: 28px; border-radius: 999px;
        border: 1px solid var(--mc-border);
        background: var(--mc-card); color: var(--mc-text-sec);
        font-size: 16px; line-height: 1; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    /* Show the wrap only on the roster page. */
    .roster-page ~ .m-staff-fab-wrap,
    .roster-page .m-staff-fab-wrap,
    body:has(.roster-page) .m-staff-fab-wrap { display: inline-flex; }
}

/* hide mobile list + FAB above breakpoint on desktop pointer-fine devices */
@media (min-width: 768px) {
    .m-staff-wrap,
    .m-staff-fab-wrap,
    .m-staff-fab { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Legacy mobile staff block hidden — the new /staff mobile UI now lives
   in _mobile_staff_list.html inside .roster-page. We keep the old wrapper
   in the template only so the captain/transfer overlays + staff sheet
   (all position:fixed) remain mounted and reachable by their existing JS.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    body .m-page.m-staff-page.m-only > *:not(#mCaptainOverlay):not(#mTransferOverlay):not(#mStaffSheet):not(#mStaffSheetBackdrop) {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hard override for the swap/hire modals on mobile. The inline <style>
   block inside _hire_modal.html paints .swap-item with the desktop
   `--bg-input` token, which resolves to dark on most desktop themes —
   and the inline style block loads AFTER mobile.css, so even our earlier
   !important rules lose in some browsers. This block lives at the very
   end of mobile.css to guarantee it's the last word.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    body .swap-overlay .swap-list,
    body .swap-overlay .swap-list .swap-item,
    body .swap-overlay .swap-list .swap-row,
    body .swap-overlay .swap-list .hire-row,
    body .swap-overlay .swap-item.swap-girl-item {
        background: var(--mc-card) !important;
        border-color: var(--mc-border) !important;
        color: var(--mc-text) !important;
    }
    body .swap-overlay .swap-name,
    body .swap-overlay .swap-list .swap-name {
        color: var(--mc-text) !important;
    }
    body .swap-overlay .swap-venue,
    body .swap-overlay .swap-list .swap-venue {
        color: var(--mc-text-sec) !important;
    }
    body .swap-overlay .swap-cost,
    body .swap-overlay .swap-list .swap-cost {
        color: var(--mc-gold) !important;
    }
    body .swap-overlay .swap-avatar {
        border-color: var(--mc-border) !important;
    }
    /* Modal chrome: title + subtitle legible on the white modal bg */
    body .swap-overlay .swap-modal h3 {
        color: var(--mc-text) !important;
    }
    body .swap-overlay .swap-sub {
        color: var(--mc-text-sec) !important;
    }
    /* Heatmap cells inside the modal should match the mobile palette. */
    body .swap-overlay .heatmap-7d .cell {
        border-color: var(--mc-border-sub) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Non-touch desktop override — pointer:fine devices (mouse / trackpad)
   must NEVER see the mobile design regardless of viewport width.
   The `(max-width: 720px)` leg of the mobile media query fires even for
   desktop browser windows that have been resized to < 720 px. This block
   comes AFTER all the mobile rules so it wins every same-specificity
   !important battle by source order.
   ═══════════════════════════════════════════════════════════════════════ */
@media (pointer: fine) {
    /* Restore the themed desktop body background/colour that the mobile
       block overwrites with the flat white --mc-bg palette. */
    body { background: var(--bg-body) !important; color: var(--text-primary) !important; }

    /* Hide every piece of mobile chrome. */
    .mobile-bottom-nav, .mobile-header, .mobile-more-sheet, .mobile-more-backdrop,
    .m-staff-fab-wrap, .m-staff-wrap,
    .m-only, .m-page { display: none !important; }

    /* Show desktop-only blocks the mobile rule hid for small viewports. */
    .d-only { display: block !important; }

    /* Remove the mobile bottom-nav spacing mobile.css adds to .content
       (72px for the nav bar). Desktop uses normal 2rem. */
    .content { padding-bottom: 2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Force-desktop override — when `body.force-desktop` is set (profile
   toggle "Ignore touch input"), suppress the `.m-*` mobile chrome and
   let the desktop CSS render responsively. The desktop stylesheet
   already handles narrow viewports: at `@media (max-width: 768px),
   (pointer: coarse)` it slides the sidebar off-screen and shows the
   `.hamburger` toggle (see style.css ~line 735). We just need to stop
   the `.mobile-header` / `.mobile-bottom-nav` / `.m-only` elements
   from showing on top.

   Core visibility rules fire at ALL widths so force-desktop stays
   consistent as the window resizes. The width-specific overrides
   (sidebar size, content gutter) fire only when wide enough to fit
   the full desktop shell.
   ═══════════════════════════════════════════════════════════════════════ */
body.force-desktop .m-only { display: none !important; }
/* Use display:block explicitly — revert/initial are unreliable when
   competing against an !important none from the (pointer:coarse) media
   query: revert can roll back to that cascaded none rather than the
   user-agent default. All .d-only wrappers are <div> elements so
   block is always correct here. */
body.force-desktop .d-only { display: block !important; }

/* Hide mobile-only chrome regardless of width. Pure mobile blocks
   (`.m-page`, `.m-hero`, etc.) should never surface in force-desktop
   mode — the desktop `.d-only` blocks carry the full UI. */
body.force-desktop .mobile-bottom-nav,
body.force-desktop .mobile-header,
body.force-desktop .mobile-more-sheet,
body.force-desktop .mobile-more-backdrop,
body.force-desktop .m-staff-fab-wrap,
body.force-desktop .m-staff-wrap,
body.force-desktop .m-page,
body.force-desktop .m-card,
body.force-desktop .m-hero,
body.force-desktop .m-subtabs,
body.force-desktop .m-stat-grid,
body.force-desktop .m-chips-row,
body.force-desktop .m-search-wrap { display: none !important; }

/* Undo mobile.css's body bg/color override so the desktop theme
   (classic/dark/chang) paints the page as it does on a real desktop.
   NOTE: the theme files define --bg-body (not --bg), so use that token. */
body.force-desktop {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* Re-show desktop chrome. Floating icons stay fixed in the top-right
   regardless of width so we want them on at every size. */
body.force-desktop .bar-header,
body.force-desktop .scan-bill-btn,
body.force-desktop .admin-cog-btn,
body.force-desktop .notif-bell { display: flex !important; }
body.force-desktop #adminSwitcher { display: inline-block !important; }

/* --- Narrow force-desktop: rely on the desktop stylesheet's own
   hamburger + slide-out sidebar rules at `@media (max-width: 767px)`.
   We still need to force the sidebar to be `display: flex`
   (mobile.css flipped it to display:none) and show the hamburger,
   but leave the `transform: translateX(-100%)` that hides it
   off-screen ALONE. --- */
@media (max-width: 767px) {
    body.force-desktop .sidebar {
        display: flex !important;
        flex-direction: column !important;
    }
    body.force-desktop .hamburger,
    body.force-desktop .mobile-top-shield { display: flex !important; }
    /* Desktop CSS already zeroes content margin and adds top padding for
       the hamburger — nothing else needed here. */
}

/* --- Wide force-desktop: full two-column desktop layout. At ≥768px the
   desktop's own mobile rule doesn't fire, so we restore the fixed
   sidebar on the left and the content gutter beside it. --- */
@media (min-width: 768px) {
    body.force-desktop .content {
        margin-left: 220px !important;
        padding: 2rem !important;
        /* app-bar is fixed at top:0, height:56px — match the normal desktop
           padding-top (4rem ≈ 64px) so content sits clear of it. */
        padding-top: 4rem !important;
        padding-bottom: 2rem !important;
        max-width: none !important;
    }
    body.force-desktop .sidebar {
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        width: 220px !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        padding: 1.5rem 1rem !important;
        background: var(--bg-sidebar) !important;
        border-right: 1px solid var(--border) !important;
        z-index: 100 !important;
    }
    /* App-bar: fully fixed, starting after the sidebar — mirrors the
       `pointer: fine` desktop rule in style.css but applies here for
       pointer:coarse touch-laptop users who have force-desktop enabled.
       Without position:fixed the app-bar renders in-flow (left: has no
       effect), pushing content down and leaving the mobile-top-shield
       (which is full-width) to block the sidebar top. */
    body.force-desktop .app-bar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 220px !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 900 !important;
        background: var(--bg-card) !important;
        border-bottom: 1px solid var(--border) !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }
    /* Re-enable pointer events on the bar-switcher inside the app-bar.
       The coarse media query never fires the pointer:fine style.css rule
       that sets .app-bar-bar-wrap { pointer-events: auto }, so we must
       do it here. */
    body.force-desktop .app-bar-bar-wrap {
        pointer-events: auto !important;
        position: relative !important;
    }
    /* Mobile-top-shield is a full-viewport-width fixed bar (z-index 1050)
       used on narrow/touch layouts. At wide widths with the proper fixed
       app-bar above, it must be hidden — otherwise it bleeds over the
       left sidebar (which has z-index 100). */
    body.force-desktop .mobile-top-shield {
        display: none !important;
    }
    body.force-desktop .section-tabs { display: flex !important; }
    body.force-desktop .hamburger { display: none !important; }
}

/* =============================================================
   Onboarding mobile primitives — /create, /select-cashier, /draft
   Shared .m-onb-* components + per-page overrides.
   Scoped strictly under @media (max-width: 767px).
   Uses existing --mc-* tokens; no new tokens introduced.
   ============================================================= */
@media (max-width: 767px) {

    /* ---------- shared hero + sticky CTA ---------- */
    .m-onb-hero {
        padding: 18px 16px 14px;
        background: var(--mc-bg);
    }
    .m-onb-hero h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1.15;
        color: var(--mc-text);
    }
    .m-onb-hero .m-onb-sub {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.45;
        color: var(--mc-text-sec);
    }

    .m-onb-sticky-cta {
        position: sticky;
        bottom: 0;
        z-index: 30;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--mc-bg);
        border-top: 1px solid var(--mc-border-sub);
        box-shadow: 0 -4px 16px rgba(15, 30, 50, 0.04);
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
    }
    .m-onb-sticky-cta .m-onb-meta {
        flex: 0 1 auto;
        min-width: 0;
        line-height: 1.15;
    }
    .m-onb-sticky-cta .m-onb-meta-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--mc-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .m-onb-sticky-cta .m-onb-meta-value {
        font-size: 15px;
        font-weight: 800;
        color: var(--mc-text);
        font-variant-numeric: tabular-nums;
    }
    .m-onb-sticky-cta .m-onb-primary {
        flex: 1 1 auto;
        min-height: 52px;
        padding: 14px 20px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        color: #fff;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .m-onb-sticky-cta .m-onb-primary:disabled,
    .m-onb-sticky-cta .m-onb-primary[aria-disabled="true"] {
        background: var(--mc-inset);
        color: var(--mc-muted);
        box-shadow: none;
        cursor: not-allowed;
    }
    .m-onb-sticky-cta[data-m-onb-hide="1"] { display: none !important; }

    /* Segmented tab strip (in-page content switch — NOT section nav). */
    .m-onb-tabs {
        display: flex;
        margin: 0 16px 14px;
        background: var(--mc-inset);
        border-radius: 12px;
        padding: 4px;
        gap: 2px;
    }
    .m-onb-tab {
        flex: 1;
        border: 0;
        min-height: 40px;
        padding: 8px 10px;
        background: transparent;
        color: var(--mc-text-sec);
        font-family: inherit;
        font-weight: 700;
        font-size: 13px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .m-onb-tab[aria-selected="true"] {
        background: var(--mc-bg);
        color: var(--mc-text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    /* 10-slot progress pips (drops into .m-hero-blue on /draft). */
    .m-onb-ticks {
        display: flex;
        gap: 4px;
        margin: 10px 0 0;
    }
    .m-onb-ticks span {
        flex: 1;
        height: 6px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.2);
    }
    .m-onb-ticks span[data-on="1"] {
        background: #fff;
    }

    /* ---------- /create — tabs swap between Build / Buy ---------- */
    .create-page {
        margin: 0 !important;
        padding: 0 0 16px !important;
        max-width: none !important;
        /* Prevent any rogue child (chip-row, absolute btns) from extending
           past the viewport and creating a horizontal scroll that makes
           the right side appear to have more padding than the left. */
        overflow-x: hidden;
    }
    .create-page > h1,
    .create-page > .subtitle {
        display: none; /* replaced by .m-onb-hero injected by the template */
    }
    .create-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        /* Desktop sets `align-items: start` which, in a flex column,
           collapses each child to its content width instead of stretching
           across the viewport — causes massive right-side whitespace. */
        align-items: stretch !important;
    }
    .create-panel,
    .market-panel {
        display: none !important;
        margin: 0 16px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        height: auto !important;
    }
    .create-layout[data-m-onb-tab="build"] .create-panel { display: block !important; }
    .create-layout[data-m-onb-tab="buy"]   .market-panel  { display: flex !important; flex-direction: column; }

    .create-panel > h2,
    .create-panel > .panel-sub,
    .market-panel > h2,
    .market-panel > .panel-sub {
        display: none !important;
    }

    .step-section { margin-bottom: 18px; }
    .step-label {
        font-size: 12px;
        font-weight: 800;
        color: var(--mc-text-sec);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 8px;
        gap: 0;
    }
    .step-label .step-num { display: none; }

    .create-panel form > .step-section:first-of-type > div[style*="display:flex"] {
        gap: 0 !important;
        position: relative;
    }
    .bar-name-input {
        width: 100%;
        min-height: 52px;
        padding: 0 56px 0 16px !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--mc-border) !important;
        background: var(--mc-bg) !important;
        color: var(--mc-text) !important;
        font-size: 16px !important;
        font-weight: 600;
        box-sizing: border-box;
    }
    #surpriseMeBtn {
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--mc-inset) !important;
        color: var(--mc-accent) !important;
        font-size: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
    #surpriseMeBtn::before {
        content: "🎲";
        font-size: 18px;
    }

    /* Colour grid → 3-col swatch tiles */
    .create-panel .colour-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .create-panel .colour-option {
        width: auto !important;
        height: auto !important;
        aspect-ratio: auto !important;
        border-radius: 12px !important;
        border: 2px solid var(--mc-border) !important;
        padding: 0 0 22px !important;
        overflow: hidden !important;
        transform: none !important;
        position: relative !important;
        /* Preserve the inline gradient bg the template paints. */
    }
    .create-panel .colour-option.selected {
        border-color: var(--mc-accent) !important;
        transform: none !important;
    }
    .create-panel .colour-option::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 22px;
        background: var(--mc-bg);
        border-top: 1px solid var(--mc-border-sub);
    }
    .create-panel .colour-option .colour-name {
        position: absolute !important;
        bottom: 4px;
        left: 0;
        right: 0;
        transform: none !important;
        font-size: 10px !important;
        font-weight: 700;
        color: var(--mc-text-sec);
        text-align: center;
        white-space: normal;
        line-height: 1.2;
        z-index: 1;
    }
    .create-panel .colour-option.selected .colour-name { color: var(--mc-accent); }
    /* Force a minimum visible swatch height above the name strip. */
    .create-panel .colour-option {
        min-height: 58px;
    }

    /* Logo grid → 6-col emoji tiles */
    .create-panel .logo-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }
    .create-panel .logo-option {
        width: auto !important;
        aspect-ratio: 1 / 1;
        height: auto !important;
        border-radius: 10px !important;
        background: var(--mc-bg) !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .create-panel .logo-option .icon { font-size: 22px !important; }
    .create-panel .logo-option .label { display: none !important; }
    .create-panel .logo-option.selected {
        background: color-mix(in srgb, var(--mc-accent) 8%, var(--mc-bg)) !important;
        border-color: var(--mc-accent) !important;
    }

    /* Personality fieldset — collapsible */
    .personality-section {
        margin-top: 6px !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
    }
    .m-onb-personalise-toggle {
        width: 100%;
        min-height: 48px;
        border: 1.5px solid var(--mc-border-sub);
        border-radius: 12px;
        background: var(--mc-bg);
        color: var(--mc-text);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        gap: 8px;
        list-style: none;
    }
    .m-onb-personalise-toggle::-webkit-details-marker { display: none; }
    .m-onb-personalise-toggle .m-onb-chev {
        color: var(--mc-muted);
        font-size: 14px;
        transition: transform 0.2s;
    }
    details.personality-section[open] .m-onb-personalise-toggle .m-onb-chev {
        transform: rotate(180deg);
    }
    .m-onb-personalise-body {
        margin-top: 10px;
        padding: 14px;
        border: 1.5px solid var(--mc-border-sub);
        border-radius: 12px;
        background: var(--mc-bg);
        /* Contain children (chip rows scroll internally). Without this,
           the chip-row's negative margin leaks out and the whole page
           gets a horizontal scroll, making everything appear off-centre. */
        overflow: hidden;
        box-sizing: border-box;
        max-width: 100%;
    }
    .create-panel .personality-label {
        font-size: 11px !important;
        font-weight: 800;
        color: var(--mc-muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }
    .create-panel .chip-row {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0;
        padding: 2px 0;
        min-width: 0;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .create-panel .chip-row::-webkit-scrollbar { display: none; }
    .create-panel .chip-option {
        flex-shrink: 0;
        padding: 7px 12px !important;
        min-height: 32px;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Hide the in-form submit — sticky CTA replaces it on mobile. */
    .create-panel .submit-btn { display: none !important; }

    /* Buy-a-bar side */
    .market-panel {
        padding: 0 !important;
        gap: 10px;
    }
    .market-panel .balance-note {
        margin: 10px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 10px;
        background: color-mix(in srgb, var(--mc-gold) 8%, var(--mc-bg)) !important;
        border: 1px solid var(--mc-border-sub);
        font-size: 12px;
    }
    .market-panel .listing-list {
        padding: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .market-panel .listing-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        background: var(--mc-bg) !important;
        border: 1px solid var(--mc-border-sub) !important;
        gap: 10px !important;
    }
    .market-panel .listing-logo {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    .market-panel .listing-info h4 { font-size: 14px !important; }
    .market-panel .listing-info .listing-meta,
    .market-panel .listing-info .seller { font-size: 11px !important; }
    .market-panel .listing-price { font-size: 14px !important; }
    .market-panel .buy-bar-btn {
        min-height: 36px;
        padding: 0 14px !important;
        font-size: 11px !important;
    }

    /* ---------- /select-cashier ---------- */
    .cashier-page {
        margin: 0 !important;
        padding: 0 0 16px !important;
        max-width: none !important;
    }
    .cashier-page > h1,
    .cashier-page > .subtitle {
        display: none; /* replaced by .m-onb-hero */
    }
    .cashier-page .balance-header {
        margin: 0 16px 10px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        background: var(--mc-inset) !important;
        border: 1px solid var(--mc-border-sub) !important;
    }
    .cashier-page .balance-header .amount {
        font-size: 15px !important;
        color: var(--mc-gold) !important;
        font-variant-numeric: tabular-nums;
    }
    .cashier-page #pickBestCashierBtn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        white-space: nowrap;
    }
    .cashier-page .sort-controls {
        padding: 2px 16px 6px !important;
        margin: 0 0 8px !important;
        display: flex !important;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cashier-page .sort-controls::-webkit-scrollbar { display: none; }
    .cashier-page .sort-controls .sort-label { display: none; }
    .cashier-page .sort-controls .sort-btn {
        flex-shrink: 0;
        padding: 7px 12px !important;
        min-height: 32px;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        border: 1.5px solid var(--mc-border) !important;
        background: var(--mc-bg) !important;
        color: var(--mc-text-sec) !important;
        white-space: nowrap;
    }
    .cashier-page .sort-controls .sort-btn.active {
        border-color: var(--mc-accent) !important;
        color: var(--mc-accent) !important;
        background: color-mix(in srgb, var(--mc-accent) 10%, transparent) !important;
    }
    .cashier-page .cashier-grid {
        padding: 0 16px !important;
        gap: 8px !important;
    }
    .cashier-page .cashier-card {
        width: 100%;
        min-height: 72px;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--mc-border-sub) !important;
        background: var(--mc-bg) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .cashier-page .cashier-card:hover {
        transform: none !important;
    }
    .cashier-page .cashier-portrait,
    .cashier-page .cashier-portrait-placeholder {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0;
        font-size: 18px;
    }
    .cashier-page .cashier-info { flex: 1; min-width: 0; }
    .cashier-page .cashier-info h3 {
        font-size: 15px !important;
        font-weight: 800;
        margin: 0 !important;
        color: var(--mc-text);
    }
    .cashier-page .venue-tag {
        display: inline-block !important;
        margin: 2px 0 0 !important;
        padding: 1px 8px !important;
        font-size: 10px !important;
        font-weight: 700;
        border-radius: 99px;
    }
    .cashier-page .cashier-stats {
        gap: 8px !important;
        margin-top: 4px;
    }
    .cashier-page .cashier-stats .stat { font-size: 11px !important; }
    .cashier-page .cashier-card > div:last-child {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
        flex-shrink: 0;
        width: auto !important;
    }
    .cashier-page .cost {
        font-size: 13px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        font-variant-numeric: tabular-nums;
    }
    .cashier-page .cost::after {
        content: " / yr";
        color: var(--mc-muted);
        font-size: 10px;
        font-weight: 600;
    }
    .cashier-page .select-btn {
        min-height: 32px !important;
        padding: 4px 12px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
    }
}

/* Dark-mode polish — onboarding sticky CTA shadow too pale on dark bg. */
@media (max-width: 767px) {
    body.theme-dark .m-onb-sticky-cta {
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    }
    body.theme-dark .m-onb-tab[aria-selected="true"] {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   /upgrades — mobile redesign primitives (.m-up-*)
   Mirrors the desktop .up-* layout but tuned for mobile (horizontal-scroll
   capacity rail, collapsed prestige + danger zone, accordion customisation,
   tile-per-upgrade grid).  Uses existing --mc-* tokens per MOBILE_DESIGN_SPEC.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero card with capacity rail */
.m-up-hero {
    position: relative;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 12px;
}
.m-up-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(380px 180px at 100% -30%, color-mix(in srgb, var(--mc-gold) 16%, transparent), transparent 60%);
}
.m-up-hero-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--mc-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.m-up-hero-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mc-accent);
}
.m-up-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mc-text);
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 4px 0 0;
    position: relative;
}
.m-up-hero-sub {
    font-size: 0.78rem;
    color: var(--mc-text-sec);
    margin-top: 4px;
    position: relative;
}
.m-up-bal-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--mc-border-sub);
    position: relative;
}
.m-up-bal-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mc-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.m-up-bal-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--mc-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
.m-up-3d {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mc-accent) 30%, transparent);
    min-height: 36px;
    flex-shrink: 0;
}

/* Capacity rail — horizontal scroll on mobile */
.m-up-rail {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    position: relative;
}
.m-up-rail::-webkit-scrollbar { display: none; }
.m-up-kpi {
    flex: 0 0 auto;
    min-width: 110px;
    padding: 10px 12px;
    border: 1px solid var(--mc-border-sub);
    border-radius: 10px;
    background: var(--mc-inset);
}
.m-up-kpi .lbl {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--mc-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.m-up-kpi .val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mc-text);
    margin-top: 3px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.m-up-kpi .val.good { color: var(--mc-green); }
.m-up-kpi .val.blue { color: var(--mc-accent); }
.m-up-kpi .val.muted { color: var(--mc-text-sec); }
.m-up-kpi .sub {
    font-size: 0.62rem;
    color: var(--mc-muted);
    margin-top: 2px;
}

/* Recommended-next callout */
.m-up-recco {
    position: relative;
    border-radius: 14px;
    padding: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc-gold) 14%, var(--mc-card)), color-mix(in srgb, var(--mc-gold) 6%, var(--mc-card)));
    border: 1px solid color-mix(in srgb, var(--mc-gold) 38%, var(--mc-border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mc-gold) 16%, transparent);
}
.m-up-recco::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--mc-gold) 18%, transparent), transparent 60%);
}
.m-up-recco .pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--mc-gold);
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
}
.m-up-recco h3 {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mc-gold);
    margin: 6px 0 0;
    position: relative;
}
.m-up-recco .body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    position: relative;
}
.m-up-recco .ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc-gold) 30%, var(--mc-card)), color-mix(in srgb, var(--mc-gold) 14%, var(--mc-card)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc-gold) 30%, transparent);
}
.m-up-recco .info { flex: 1; min-width: 0; }
.m-up-recco .nm {
    font-size: 1rem;
    font-weight: 800;
    color: var(--mc-text);
    line-height: 1.15;
}
.m-up-recco .ds {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    margin-top: 4px;
    line-height: 1.35;
}
.m-up-recco .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 0.68rem;
}
.m-up-recco .pb { color: var(--mc-green); font-weight: 700; }
.m-up-recco .ow { color: var(--mc-muted); font-weight: 600; }
.m-up-recco .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--mc-gold) 30%, transparent);
    position: relative;
}
.m-up-recco .pr {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--mc-gold);
    font-variant-numeric: tabular-nums;
}
.m-up-recco-btn {
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-orange));
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border: 0;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mc-gold) 35%, transparent);
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 40px;
}

/* Prestige collapsed details — purple/gold marquee */
.m-up-prestige {
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 60%, #0f172a 100%);
    border: 1px solid #5b21b6;
    box-shadow: 0 4px 14px rgba(76, 29, 149, 0.30);
    position: relative;
}
.m-up-prestige::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px 200px at 100% -20%, rgba(245,158,11,0.18), transparent 60%);
}
.m-up-prestige > summary {
    list-style: none;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}
.m-up-prestige > summary::-webkit-details-marker { display: none; }
.m-up-prestige .crown {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid rgba(245, 158, 11, 0.36);
    flex-shrink: 0;
}
.m-up-prestige .ttl { flex: 1; min-width: 0; }
.m-up-prestige .ttl .h {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
}
.m-up-prestige .ttl .l {
    font-size: 0.66rem;
    opacity: 0.7;
    margin-top: 2px;
}
.m-up-prestige .gain-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.40);
    color: #86efac;
    font-size: 0.74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.m-up-prestige .chev {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    transition: transform 200ms;
}
.m-up-prestige[open] .chev { transform: rotate(180deg); }
.m-up-prestige .body {
    padding: 0 14px 14px;
    position: relative;
}
.m-up-prestige .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.m-up-prestige .stat .lb {
    font-size: 0.56rem;
    font-weight: 700;
    opacity: 0.55;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.m-up-prestige .stat .vl {
    font-size: 1rem;
    font-weight: 900;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.m-up-prestige .stat .vl.gain { color: #86efac; }
.m-up-prestige .stat .vl.gold { color: #fbbf24; }
.m-up-prestige .checklist {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.m-up-prestige .cl-hd {
    font-size: 0.62rem;
    font-weight: 800;
    color: #86efac;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.m-up-prestige .cri {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.m-up-prestige .cri:last-child { border-bottom: 0; }
.m-up-prestige .cri .mk {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.20);
    color: #86efac;
    font-size: 0.6rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.m-up-prestige .cri.pending .mk {
    background: rgba(248, 113, 113, 0.20);
    color: #fca5a5;
}
.m-up-prestige .cri .lb { flex: 1; min-width: 0; opacity: 0.85; }
.m-up-prestige .cri.ok .lb {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.30);
    opacity: 0.55;
}
.m-up-prestige .cri .pg {
    font-size: 0.66rem;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}
.m-up-prestige .ret {
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #9b59b6, #f1c40f);
    color: #fff;
    font-weight: 800;
    font-size: 0.86rem;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(155, 89, 182, 0.35);
    font-family: var(--mc-font);
    min-height: 48px;
}
.m-up-prestige .ret:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}
.m-up-prestige .pre {
    font-size: 0.66rem;
    opacity: 0.65;
    text-align: center;
    margin-top: 8px;
}

/* Bar completion strip */
.m-up-bc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m-up-bc .em {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mc-gold) 14%, transparent);
    color: var(--mc-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--mc-gold) 30%, transparent);
}
.m-up-bc .mid { flex: 1; min-width: 0; }
.m-up-bc .row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.m-up-bc .ttl {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-bc .ct {
    font-size: 0.66rem;
    color: var(--mc-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.m-up-bc .pct {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--mc-green);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.m-up-bc .bar {
    margin-top: 5px;
    height: 5px;
    border-radius: 3px;
    background: var(--mc-inset);
    overflow: hidden;
}
.m-up-bc .fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-gold));
}
.m-up-bc .tier {
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mc-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc-gold) 28%, transparent);
    color: var(--mc-orange);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Owned banner */
.m-up-owned {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mc-green) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc-green) 22%, transparent);
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--mc-text-sec);
}
.m-up-owned .em {
    color: var(--mc-green);
    font-weight: 800;
    flex-shrink: 0;
}
.m-up-owned b {
    color: var(--mc-text);
    font-weight: 800;
}

/* Category header */
.m-up-cat-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 2px;
    margin-top: 6px;
}
.m-up-cat-hd .ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.m-up-cat-hd .ic.cap {
    background: color-mix(in srgb, var(--mc-accent) 12%, transparent);
    color: var(--mc-accent);
}
.m-up-cat-hd .ic.com {
    background: color-mix(in srgb, var(--mc-red) 10%, transparent);
    color: var(--mc-red);
}
.m-up-cat-hd .ic.cos {
    background: color-mix(in srgb, var(--mc-purple) 12%, transparent);
    color: var(--mc-purple);
}
.m-up-cat-hd .ic.real {
    background: color-mix(in srgb, var(--mc-gold) 14%, transparent);
    color: var(--mc-orange);
}
.m-up-cat-hd .ic.trn {
    background: color-mix(in srgb, var(--mc-accent) 14%, transparent);
    color: var(--mc-accent);
}
.m-up-cat-hd .admin-flag {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mc-red) 14%, transparent);
    color: var(--mc-red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Active-ride picker — chip-style row above the Transport tiles. Mirrors
   the .m-chip pattern but rendered as <button> for form-submit. 44px
   min-height to satisfy the tap-target rule from CLAUDE.md. */
.m-ride-pick {
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--mc-card);
    margin: 6px 0 10px;
}
.m-ride-pick-h {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.m-ride-pick-h strong {
    font-size: 0.78rem;
    color: var(--mc-text);
    font-weight: 700;
}
.m-ride-pick-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.m-ride-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--mc-border);
    background: var(--mc-card);
    color: var(--mc-text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.m-ride-pick-btn.active {
    border-color: var(--mc-accent);
    background: color-mix(in srgb, var(--mc-accent) 10%, transparent);
}
.m-ride-pick-btn .on {
    font-size: 0.62rem;
    color: var(--mc-accent);
    font-weight: 800;
    margin-left: 2px;
}
.m-up-cat-hd h2 {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--mc-text);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.m-up-cat-hd .ct {
    margin-left: auto;
    font-size: 0.66rem;
    color: var(--mc-muted);
    font-weight: 700;
}

/* Tile — single upgrade card, mobile spacing */
.m-up-tile {
    position: relative;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m-up-tile.maxed {
    background: color-mix(in srgb, var(--mc-green) 4%, var(--mc-card));
    border-color: color-mix(in srgb, var(--mc-green) 24%, var(--mc-border));
}
.m-up-tile.recco {
    border-color: color-mix(in srgb, var(--mc-gold) 38%, var(--mc-border));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mc-gold) 14%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-gold) 8%, var(--mc-card)), var(--mc-card));
}
.m-up-tile.locked { opacity: 0.62; }
.m-up-tile.free {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-green) 8%, var(--mc-card)), var(--mc-card));
    border-color: color-mix(in srgb, var(--mc-green) 28%, var(--mc-border));
}
.m-up-tile-pin {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mc-gold);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.m-up-tile-pin.green { background: var(--mc-green); }
.m-up-tile-top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.m-up-tile-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--mc-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    border: 1px solid var(--mc-border-sub);
}
.m-up-tile.recco .m-up-tile-ic {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc-gold) 22%, var(--mc-card)), color-mix(in srgb, var(--mc-gold) 10%, var(--mc-card)));
    border-color: color-mix(in srgb, var(--mc-gold) 35%, var(--mc-border));
}
.m-up-tile.maxed .m-up-tile-ic {
    background: color-mix(in srgb, var(--mc-green) 10%, var(--mc-card));
    border-color: color-mix(in srgb, var(--mc-green) 28%, var(--mc-border));
}
.m-up-tile-info { flex: 1; min-width: 0; }
.m-up-tile-info .nm {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--mc-text);
    line-height: 1.2;
}
.m-up-tile-info .ds {
    font-size: 0.72rem;
    color: var(--mc-text-sec);
    line-height: 1.35;
    margin-top: 3px;
}
.m-up-tile-meta {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    flex-wrap: wrap;
}
.m-up-tile-meta .pb { color: var(--mc-green); font-weight: 700; }
.m-up-tile-meta .ow { color: var(--mc-muted); font-weight: 600; }
.m-up-tile-meta .ow b { color: var(--mc-text); font-weight: 800; }
.m-up-tile-meta .lk {
    color: var(--mc-red);
    font-weight: 700;
}
.m-up-tile-prog {
    height: 4px;
    border-radius: 2px;
    background: var(--mc-inset);
    overflow: hidden;
}
.m-up-tile-prog i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-gold));
}
.m-up-tile-prog.done i {
    background: linear-gradient(90deg, var(--mc-green), color-mix(in srgb, var(--mc-green) 70%, white));
}
.m-up-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed var(--mc-border-sub);
    gap: 10px;
}
.m-up-tile-foot .pr {
    font-size: 1rem;
    font-weight: 900;
    color: var(--mc-gold);
    font-variant-numeric: tabular-nums;
}
.m-up-tile-foot .pr.muted {
    color: var(--mc-muted);
    font-size: 0.85rem;
}
.m-up-tile-foot .pr.free { color: var(--mc-green); }
.m-up-btn {
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    color: #fff;
    font-weight: 800;
    font-size: 0.74rem;
    border: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-accent) 30%, transparent);
    cursor: pointer;
    letter-spacing: 0.02em;
    min-width: 72px;
    min-height: 38px;
    font-family: var(--mc-font);
}
.m-up-btn.gold {
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-orange));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-gold) 30%, transparent);
}
.m-up-btn.green {
    background: linear-gradient(135deg, var(--mc-green), color-mix(in srgb, var(--mc-green) 75%, black));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-green) 25%, transparent);
}
.m-up-btn:disabled,
.m-up-btn.dis {
    background: var(--mc-inset);
    color: var(--mc-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* Customisation card with accordion sections */
.m-up-cust {
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.m-up-cust-h h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-cust-h .sub {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    margin-top: 3px;
}
.m-up-acc {
    border-top: 1px solid var(--mc-border-sub);
    padding-top: 12px;
}
.m-up-acc:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.m-up-acc > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
    min-height: 36px;
}
.m-up-acc > summary::-webkit-details-marker { display: none; }
.m-up-acc .lbl {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mc-text);
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.m-up-acc .lbl .b {
    font-size: 0.6rem;
    color: var(--mc-muted);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--mc-inset);
    margin-left: 4px;
}
.m-up-acc .pick {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-up-acc .pick .sw {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.m-up-acc .chev {
    color: var(--mc-muted);
    transition: transform 200ms;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.m-up-acc[open] .chev { transform: rotate(180deg); }
.m-up-acc .body { margin-top: 10px; }

/* Chip rows used inside accordions */
.m-up-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.m-up-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border-sub);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mc-text);
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 38px;
}
.m-up-chip.sel {
    background: color-mix(in srgb, var(--mc-accent) 10%, transparent);
    border-color: var(--mc-accent);
    color: var(--mc-accent);
    font-weight: 800;
}
.m-up-chip .e { font-size: 0.95rem; }
.m-up-chip .sw {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Hype-board poster row inside Customisation accordion */
.m-up-poster-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border-sub);
}
.m-up-poster {
    width: 56px;
    height: 78px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    object-fit: cover;
}
.m-up-poster-info {
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    line-height: 1.4;
}
.m-up-poster-info .nm {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--mc-text);
    margin-bottom: 3px;
}
.m-up-poster-btn {
    margin-top: 8px;
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mc-text);
    cursor: pointer;
    font-family: var(--mc-font);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
}

/* Status cosmetics block (motto + founder title) */
.m-up-cos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m-up-cos-h h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-cos-h .sub {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    margin-top: 3px;
}
.m-up-cos-block {
    padding-top: 12px;
    border-top: 1px solid var(--mc-border-sub);
}
.m-up-cos-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.m-up-cos-block .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.m-up-cos-block .nm {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-cos-block .pr {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-gold);
    font-variant-numeric: tabular-nums;
}
.m-up-cos-block .pr.unlocked {
    color: var(--mc-green);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.m-up-cos-block .ds {
    font-size: 0.72rem;
    color: var(--mc-text-sec);
    margin-top: 4px;
    line-height: 1.4;
}
.m-up-cos-input-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.m-up-cos-input {
    flex: 1;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border);
    font-size: 0.85rem;
    color: var(--mc-text);
    font-family: var(--mc-font);
    outline: none;
    min-height: 40px;
}
.m-up-cos-input:focus { border-color: var(--mc-accent); }
.m-up-cos-go {
    padding: 0 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-orange));
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border: 0;
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 40px;
}
.m-up-title-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.m-up-title-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border-sub);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--mc-text);
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 38px;
}
.m-up-title-pill.sel {
    background: color-mix(in srgb, var(--mc-gold) 14%, transparent);
    border-color: var(--mc-gold);
    color: var(--mc-orange);
    font-weight: 800;
}

/* Danger zone collapsed details */
.m-up-danger {
    background: var(--mc-card);
    border: 1px solid color-mix(in srgb, var(--mc-red) 25%, var(--mc-border));
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.m-up-danger > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    min-height: 48px;
}
.m-up-danger > summary::-webkit-details-marker { display: none; }
.m-up-danger .em {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mc-red) 10%, transparent);
    color: var(--mc-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--mc-red) 22%, transparent);
}
.m-up-danger .ttl {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-red);
}
.m-up-danger .sub {
    font-size: 0.7rem;
    color: var(--mc-muted);
    font-weight: 600;
}
.m-up-danger .chev {
    color: var(--mc-muted);
    transition: transform 200ms;
    margin-left: auto;
}
.m-up-danger[open] .chev { transform: rotate(180deg); }
.m-up-danger .body { padding: 0 14px 14px; }
.m-up-sell {
    background: var(--mc-inset);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    padding: 11px;
}
.m-up-sell .nm {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-sell .ds {
    font-size: 0.7rem;
    color: var(--mc-text-sec);
    margin-top: 2px;
}
.m-up-sell-form {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: stretch;
}
.m-up-sell-form .ipt {
    flex: 1;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    font-size: 0.85rem;
    color: var(--mc-text);
    outline: none;
    font-family: var(--mc-font);
    min-height: 40px;
}
.m-up-sell-form .list-btn {
    padding: 0 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mc-red), #b91c1c);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border: 0;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-family: var(--mc-font);
    min-height: 40px;
}

/* Cert filter — HIDE. The cert-filter.js shared script toggles
   `.cert-dim` on any `[data-cert]` row whose cert isn't in the active
   chip set; we render that as display:none so the player sees a
   filtered list, not a noisy half-faded one.
   Empty / capacity placeholder rows opt out via [data-cert-row-skip].

   History: this used to render a 55% translucent overlay so action
   buttons (RELEASE / SWAP / HIRE) stayed reachable on offline rows
   without the row itself looking interactive. In practice users
   couldn't tell the difference between "dimmed" and "shown" — the
   filter looked like it wasn't working. Switched to display:none on
   2026-05-15 to match the long-standing /scouting behaviour. If you
   want to act on an offline staff member, toggle the Offline pill
   back on. The class name stays `.cert-dim` for back-compat with the
   shared JS that already toggles it. */
.cert-dim {
    display: none !important;
}

/* ---- Cert dots — unified across desktop + mobile ---------------- */
/* One canonical definition so the three-dot vocabulary looks identical
   in every chip row, every dot-legend, and any inline reference. The
   `--mc-green` / `--mc-red` tokens (from mobile.css :root) drive both
   the mobile chip family AND the desktop one — there is no theme-
   per-bar shift here, by design (CLAUDE.md: blue is the brand colour;
   presence dots stay neutral).

   Three classes:
     .cert-dot-c   solid green disc      = Confirmed (clocked in / worked)
     .cert-dot-p   hollow green ring     = Predicted (≥60% likely today)
     .cert-dot-o   solid red disc        = Offline

   The legacy `.m-cert-dot-*` aliases stay in roster.html / scouting.html
   for source-style continuity but inherit the same colours from these
   shared rules. */

.cert-dot,
.m-cert-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
    vertical-align: middle;
}

.cert-dot-c, .m-cert-dot-c { background: var(--mc-green); }
.cert-dot-p, .m-cert-dot-p {
    background: transparent;
    border: 2px solid var(--mc-green);
    box-sizing: border-box;
}
.cert-dot-o, .m-cert-dot-o { background: var(--mc-red); }

/* Inline three-dot legend — for modals / surfaces that don't carry the
   filter chips but still want to teach the dot vocabulary. Rendered
   by the `dot_legend()` macro in `_cert_chips.html`. */
.cert-legend {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: 0.55rem;
    font-size: 11px; line-height: 1;
    color: var(--mc-text-sec, var(--text-secondary, #5a5c6e));
    font-variant-numeric: tabular-nums;
}
.cert-legend .cert-legend-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
}

/* ---- Cert chip row — global styles -----------------------------------
   These rules used to live as inline <style> blocks in roster.html and
   scouting.html only. After Step 2 of the alignment rollout the chip
   row appears on /girlfriends, /returners, /freelancers, /draft-girls,
   /scout-meta and the staff-picker modals — surfaces that don't load
   those inline blocks. The chips fell back to bare .venue-chip /
   .m-chip defaults (white background, no themed colours) which looked
   broken.

   Hoisted into mobile.css so every page that loads base.html (i.e.
   every page) gets the themed chip styling. Selectors deliberately
   stay specific enough (`.venue-chip.cert-chip`, `.m-chip.m-cert-chip`)
   to override the generic chip rules without needing !important. */

/* Mobile chip row — uses --mc-* tokens (always-on light surfaces) */
.m-chip.m-cert-chip,
.m-cert-chip {
    display: inline-flex; align-items: center; gap: 6px;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.m-chip.m-cert-chip.active,
.m-cert-chip.active { opacity: 1; }

.m-chip.m-cert-chip.active[data-cert="c"],
.m-chip.m-cert-chip.active[data-m-cert="c"] {
    background: rgba(22,163,74,0.12);
    border-color: var(--mc-green);
    color: var(--mc-green);
    font-weight: 800;
}
.m-chip.m-cert-chip.active[data-cert="p"],
.m-chip.m-cert-chip.active[data-m-cert="p"] {
    background: rgba(22,163,74,0.06);
    border-color: var(--mc-green);
    color: var(--mc-green);
    font-weight: 800;
}
.m-chip.m-cert-chip.active[data-cert="o"],
.m-chip.m-cert-chip.active[data-m-cert="o"] {
    background: rgba(220,38,38,0.10);
    border-color: var(--mc-red);
    color: var(--mc-red);
    font-weight: 800;
}

/* Desktop chip row — uses --green / --red theme tokens so each bar's
   skin can recolour (matching the rest of the venue-filter family). */
.venue-filter-bar .venue-chip.cert-chip,
.venue-chip.cert-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.venue-filter-bar .venue-chip.cert-chip.active,
.venue-chip.cert-chip.active { opacity: 1; }

.venue-chip.cert-chip.active[data-cert="c"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.venue-chip.cert-chip.active[data-cert="p"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, transparent);
}
.venue-chip.cert-chip.active[data-cert="o"] {
    border-color: var(--red);
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* Scouting uses .filter-pill.cert-pill — same vocabulary, different
   class family. Keep that path themed too. The pills already have
   .filter-pill base styling; only the cert variants need defining. */
.filter-pill.cert-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.filter-pill.cert-pill.active { opacity: 1; }
.filter-pill.cert-pill.active[data-cert="c"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.filter-pill.cert-pill.active[data-cert="p"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, transparent);
}
.filter-pill.cert-pill.active[data-cert="o"] {
    border-color: var(--red);
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* ---- Base shapes for chip families used by _cert_chips.html --------
   Hoisted from roster.html's inline <style> so every page that mounts
   the cert chip row gets a properly-shaped pill button, not the
   browser default <button> rectangle. */

.venue-chip {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1;
}
.venue-chip:hover {
    border-color: var(--scheme-primary);
    color: var(--text-primary);
}
.venue-chip.active {
    border-color: var(--scheme-primary);
    color: var(--scheme-primary);
    background: color-mix(in srgb, var(--scheme-primary) 10%, transparent);
}

/* Base shape for .filter-pill (scouting's chip family). Same pill
   silhouette as .venue-chip so the cert chips look identical across
   surfaces regardless of which class family the macro chose. */
.filter-pill {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1;
}
.filter-pill:hover {
    border-color: var(--scheme-primary);
    color: var(--text-primary);
}
.filter-pill.active {
    border-color: var(--scheme-primary);
    color: var(--scheme-primary);
    background: color-mix(in srgb, var(--scheme-primary) 10%, transparent);
}