@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Admin/AdminHome.razor.rz.scp.css */
/* One card, six cells, hairline rules between (the v3 metric band). */
.stat-band[b-vulj2drfvj] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow: hidden;
}

.stat-cell[b-vulj2drfvj] {
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    display: block;
}

.stat-cell + .stat-cell[b-vulj2drfvj] {
    border-left: 1px solid #efe9db;
}

a.stat-cell:hover[b-vulj2drfvj] {
    /* Token, not #fbfaf5: the metric text flips light in dark mode and was
       lost on a fixed light hover wash. */
    background: var(--qq-admin-input);
    color: inherit;
    text-decoration: none;
}

.stat-label[b-vulj2drfvj] {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value[b-vulj2drfvj] {
    font-size: 2.375rem; /* 38px display metric */
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--qq-admin-ink);
}

.stat-value.stat-accent[b-vulj2drfvj] {
    color: var(--qq-admin-accent);
}

.stat-sub[b-vulj2drfvj] {
    font-size: 1.1875rem; /* 19px */
    font-weight: 500;
    color: var(--qq-admin-faint);
}

/* needs-attention rows are links; keep the row look */
.attention-row[b-vulj2drfvj] {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attention-row:hover[b-vulj2drfvj] {
    color: inherit;
}

.overview-grid[b-vulj2drfvj] {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 1.4rem;
    align-items: start;
}

@media (max-width: 1200px) {
    .stat-band[b-vulj2drfvj] {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-cell:nth-child(4)[b-vulj2drfvj] {
        border-left: none;
    }

    .stat-cell:nth-child(n+4)[b-vulj2drfvj] {
        border-top: 1px solid #efe9db;
    }
}

@media (max-width: 992px) {
    .overview-grid[b-vulj2drfvj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .stat-band[b-vulj2drfvj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-cell:nth-child(odd)[b-vulj2drfvj] {
        border-left: none;
    }

    .stat-cell:nth-child(n+3)[b-vulj2drfvj] {
        border-top: 1px solid #efe9db;
    }
}
/* /Components/Admin/AdminMenuLayout.razor.rz.scp.css */
/* Menu layout editor. Palette follows the design handoff's settings surface;
   row heights match the rail (40px) so the editor reads as the thing it edits. */

.nav-cat[b-yqzva53pfg] {
    border: 1px solid var(--qq-admin-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.nav-cat-head[b-yqzva53pfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--qq-admin-bar-soft, var(--qq-admin-card));
    border-bottom: 1px solid var(--qq-admin-border);
}

.nav-cat-name[b-yqzva53pfg] {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
    font-weight: 700;
}

.nav-cat-count[b-yqzva53pfg] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-faint);
    margin-right: auto;
}

.nav-rows[b-yqzva53pfg] {
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-row[b-yqzva53pfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0 0.5rem;
    border-radius: 9px;
    background: var(--qq-admin-card);
    cursor: grab;
    /* Without this a touch drag scrolls the page instead of moving the row. */
    touch-action: none;
    transition: transform .16s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
}

.nav-row:hover[b-yqzva53pfg] {
    background: var(--qq-admin-mute-bg, var(--qq-admin-bar-soft));
}

/* The dragged row leaves its slot visually so the drop target is legible. */
.nav-row.is-dragging[b-yqzva53pfg] {
    opacity: .5;
    cursor: grabbing;
    transform: scale(1.015);
    box-shadow: 0 12px 26px rgba(23, 21, 18, .22);
}

/* Hidden rows stay listed — this is the only place to bring them back. */
.nav-row.is-hidden .nav-row-text[b-yqzva53pfg],
.nav-row.is-hidden .nav-row-ico[b-yqzva53pfg] {
    opacity: .45;
}

.nav-row.is-hidden .nav-row-text[b-yqzva53pfg] {
    text-decoration: line-through;
}

/* States the row's state in words rather than relying on the strike-through. */
.nav-hidden-tag[b-yqzva53pfg] {
    flex-shrink: 0;
    font-family: var(--qq-admin-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--qq-admin-mute-bg, var(--qq-admin-bar-soft));
    color: var(--qq-admin-muted);
}

.nav-grip[b-yqzva53pfg] {
    display: inline-flex;
    color: var(--qq-admin-faint);
    flex-shrink: 0;
}

.nav-grip svg[b-yqzva53pfg] {
    width: 16px;
    height: 16px;
}

.nav-row-ico[b-yqzva53pfg] {
    display: inline-flex;
    color: var(--qq-admin-muted);
    flex-shrink: 0;
}

.nav-row-ico svg[b-yqzva53pfg] {
    width: 16px;
    height: 16px;
}

.nav-row-text[b-yqzva53pfg] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    color: var(--qq-admin-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-icon-btn[b-yqzva53pfg] {
    /* 44px on touch, per the handoff's mobile note; compact with a mouse. */
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--qq-admin-muted);
    cursor: pointer;
}

.nav-icon-btn svg[b-yqzva53pfg] {
    width: 15px;
    height: 15px;
}

.nav-icon-btn:hover:not(:disabled)[b-yqzva53pfg] {
    border-color: var(--qq-admin-border);
    color: var(--qq-admin-ink);
}

.nav-icon-btn:disabled[b-yqzva53pfg] {
    opacity: .3;
    cursor: default;
}

.nav-icon-btn.is-off[b-yqzva53pfg] {
    color: var(--qq-admin-accent);
}

@media (pointer: coarse) {
    .nav-icon-btn[b-yqzva53pfg] {
        width: 44px;
        height: 44px;
    }

    .nav-row[b-yqzva53pfg] {
        min-height: 48px;
    }
}


/* --- Page shape (spec 018) -------------------------------------------------
   Editor on the left, the rail it produces on the right. The two-column layout
   is the reason this became a page: an arrangement is judged from the rail, and
   a settings column had no room to show one. */

.menu-order-head[b-yqzva53pfg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}

.menu-order-heading[b-yqzva53pfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.menu-order-actions[b-yqzva53pfg] {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

.menu-order-hint[b-yqzva53pfg] {
    font-size: 0.83rem;
    color: var(--qq-admin-muted);
    max-width: 60ch;
    margin-bottom: 1rem;
}

.menu-order-grid[b-yqzva53pfg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.6rem;
    align-items: start;
}

.menu-order-editor[b-yqzva53pfg] {
    min-width: 0;
}

.menu-order-note[b-yqzva53pfg] {
    font-size: 0.76rem;
    color: var(--qq-admin-faint);
    line-height: 1.5;
    padding: 0 0.15rem;
}

.menu-order-preview[b-yqzva53pfg] {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.menu-order-preview-head[b-yqzva53pfg] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.menu-order-preview-label[b-yqzva53pfg] {
    font-family: var(--qq-admin-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--qq-admin-faint);
}

.menu-order-preview-count[b-yqzva53pfg] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-faint);
}

.menu-order-preview-note[b-yqzva53pfg] {
    font-size: 0.72rem;
    color: var(--qq-admin-faint);
    line-height: 1.45;
}

/* The accordion is a phone affordance; on a desktop the rail is simply there. */
.menu-order-preview-toggle[b-yqzva53pfg] {
    display: none;
}

.nav-noaccess-tag[b-yqzva53pfg] {
    font-family: var(--qq-admin-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    background: var(--qq-admin-accent-tint, #f6e5df);
    color: var(--qq-admin-accent);
    padding: 0.18rem 0.42rem;
    border-radius: 4px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .menu-order-grid[b-yqzva53pfg] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Order matters: the rail summary belongs above the editor on a phone, so
       the reference is the first thing seen rather than a footnote below two
       dozen rows. */
    .menu-order-preview[b-yqzva53pfg] {
        position: static;
        order: -1;
    }

    .menu-order-preview-head[b-yqzva53pfg] {
        display: none;
    }

    .menu-order-preview-toggle[b-yqzva53pfg] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;
        text-align: left;
        background: var(--qq-admin-card);
        border: 1px solid var(--qq-admin-border);
        border-radius: 12px;
        padding: 0.8rem 0.9rem;
        font-size: 0.83rem;
        font-weight: 600;
        color: var(--qq-admin-ink, inherit);
    }

    .menu-order-preview-caret[b-yqzva53pfg] {
        margin-left: auto;
        color: var(--qq-admin-faint);
    }

    .menu-order-preview-body[b-yqzva53pfg] {
        display: none;
    }

    .menu-order-preview-body.is-open[b-yqzva53pfg] {
        display: block;
    }

    /* Drag is a pointer gesture. On a touch screen the arrows and the eye are
       the whole interface, so they get real targets and the grip goes away
       rather than advertising something that cannot be done. */
    .nav-row[b-yqzva53pfg] {
        flex-wrap: wrap;
    }

    .nav-grip[b-yqzva53pfg] {
        display: none;
    }

    .nav-row .nav-icon-btn[b-yqzva53pfg] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Admin/AdminPlans.razor.rz.scp.css */
/* Plans as a data grid (mirrors the Team roles grid). */
.plans-grid-head[b-xs4jsff301],
.plans-grid-row[b-xs4jsff301] {
    display: grid;
    grid-template-columns: minmax(180px, 1.1fr) 110px 130px 90px 1fr 100px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1.35rem;
}

.plans-grid-head[b-xs4jsff301] {
    /* Token, not #faf6ec: the header text inherits admin ink, which flips
       light in dark mode — a fixed light band left it light-on-light. */
    background: var(--qq-admin-input);
    border-bottom: 1px solid var(--qq-admin-border);
}

.plans-grid-head button[b-xs4jsff301] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.plans-grid-head .sort-on[b-xs4jsff301] {
    color: var(--qq-admin-accent);
}

.plans-grid-row + .plans-grid-row[b-xs4jsff301],
.plans-grid-expand[b-xs4jsff301] {
    border-top: 1px solid var(--qq-admin-divider);
}

.plans-grid-expand[b-xs4jsff301] {
    background: var(--qq-admin-input);
    padding: 0.9rem 1.35rem 1rem;
}

.plan-desc[b-xs4jsff301] {
    display: block;
    font-size: 0.76rem;
    color: var(--qq-admin-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* compact filled feature chips in the FEATURES cell */
.role-chip-mini[b-xs4jsff301] {
    display: inline-block;
    background: var(--qq-admin-ink);
    /* btn-fg, not #fbf8f1: admin ink inverts to ivory in dark mode. */
    color: var(--qq-admin-btn-fg, #fbf8f1);
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 0.18rem 0.45rem;
    margin: 0 0.25rem 0.25rem 0;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .plans-grid-head[b-xs4jsff301],
    .plans-grid-row[b-xs4jsff301] {
        grid-template-columns: minmax(160px, 1fr) 100px 110px 1fr 90px;
    }

    /* drop the TRIAL column on narrow screens */
    .plans-grid-head > :nth-child(4)[b-xs4jsff301],
    .plans-grid-row > :nth-child(4)[b-xs4jsff301] {
        display: none;
    }
}

/* Phones: the columnar grid can't fit, so each plan restacks as a card —
   name on its own line, then status/price/features wrapping, actions right. */
@media (max-width: 767px) {
    .plans-grid-head[b-xs4jsff301] {
        display: none;
    }

    .plans-grid-row[b-xs4jsff301] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem 0.9rem;
        padding: 0.85rem 1rem;
    }

    .plans-grid-row > :first-child[b-xs4jsff301] {
        flex: 1 1 100%;
    }

    .plans-grid-row > :last-child[b-xs4jsff301] {
        margin-left: auto;
    }

    .plan-desc[b-xs4jsff301] {
        white-space: normal;
    }

    .plans-grid-expand[b-xs4jsff301] {
        padding: 0.85rem 1rem 1rem;
    }
}

/* ---- Sort presets ---- */
.admin-plans-sortlabel[b-xs4jsff301] { font-size: 9.5px; letter-spacing: 0.14em; color: var(--qq-admin-muted); }
.admin-plans-preset[b-xs4jsff301] {
    font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer;
    background: var(--qq-admin-card); color: var(--qq-admin-muted); border: 1px solid var(--qq-admin-border);
}
.admin-plans-preset.on[b-xs4jsff301] { background: var(--qq-admin-ink); color: var(--qq-admin-btn-fg); border-color: var(--qq-admin-ink); }

/* ---- Per-plan analytics strip ---- */
.plans-grid-stats[b-xs4jsff301] {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 9px 16px; background: var(--qq-admin-card); border-top: 1px solid var(--qq-admin-divider);
}
.plans-grid-stats.dim[b-xs4jsff301] { opacity: 0.6; }
.plans-grid-stats .stat[b-xs4jsff301] { font-size: 11px; color: var(--qq-admin-muted); }
.plans-grid-stats .stat b[b-xs4jsff301] { font-family: 'Space Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; color: var(--qq-admin-ink); margin-right: 4px; }
.plans-grid-stats .stat.mrr b[b-xs4jsff301] { color: var(--qq-admin-accent); }
.plans-spark-wrap[b-xs4jsff301] { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.plans-spark-lbl[b-xs4jsff301] { font-size: 9px; letter-spacing: 0.12em; color: var(--qq-admin-faint); }
.plans-spark[b-xs4jsff301] { width: 84px; height: 24px; }
.plans-spark-pct[b-xs4jsff301] { font-family: 'Space Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; }
@media (max-width: 767px) {
    .plans-grid-stats[b-xs4jsff301] { gap: 12px; }
    .plans-spark-wrap[b-xs4jsff301] { margin-left: 0; width: 100%; }
}
/* /Components/Admin/AdminRevenue.razor.rz.scp.css */
/* Export buttons + range picker sit on the page bar, wrapping on narrow screens. */
.rev-actions[b-uy78yu4e4y] {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    /* Same reason as .qq-rp: a flex item's min-width:auto floor is its widest
       child, so without this the date picker inside pushed this wrapper — and
       the page bar — past the viewport on a phone. */
    min-width: 0;
}

.rev-warning[b-uy78yu4e4y] {
    border: 1px solid var(--qq-admin-accent);
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--qq-admin-card);
    color: var(--qq-admin-ink);
    padding: 0.7rem 0.95rem;
    font-size: 0.82rem;
}

/* KPI band: a responsive grid of label/figure cells on one card surface. */
.rev-band[b-uy78yu4e4y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 1px;
    background: var(--qq-admin-border);
    border: 1px solid var(--qq-admin-border);
    border-radius: 12px;
    overflow: hidden;
}

.rev-cell[b-uy78yu4e4y] {
    background: var(--qq-admin-card);
    padding: 0.85rem 1rem;
    /* Long money strings must shrink inside their column, not push the grid. */
    min-width: 0;
}

.rev-label[b-uy78yu4e4y] {
    font-size: 0.72rem;
    color: var(--qq-admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rev-value[b-uy78yu4e4y] {
    margin-top: 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--qq-admin-ink);
    overflow-wrap: anywhere;
}

.rev-value.hot[b-uy78yu4e4y] {
    color: var(--qq-admin-accent);
}

.rev-sub[b-uy78yu4e4y] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-faint);
}

/* Charts. */
.rev-chart-card[b-uy78yu4e4y] {
    padding: 1.1rem 1rem 0.7rem;
}

.rev-axis[b-uy78yu4e4y] {
    font-family: var(--qq-admin-mono);
    font-size: 11px;
    fill: var(--qq-admin-muted);
}

.rev-empty[b-uy78yu4e4y] {
    padding: 1.2rem 0;
    text-align: center;
    color: var(--qq-admin-muted);
    font-size: 0.85rem;
}

.rev-legend[b-uy78yu4e4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.55rem 0 0.3rem;
    font-size: 0.8rem;
    color: var(--qq-admin-ink);
}

.rev-legend-row[b-uy78yu4e4y] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rev-swatch[b-uy78yu4e4y] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
    background: var(--qq-admin-accent);
}

/* Tables: the same figures as the charts, in text. */
.rev-table[b-uy78yu4e4y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.rev-caption[b-uy78yu4e4y] {
    caption-side: top;
    text-align: left;
    padding: 0.75rem 1rem 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
}

.rev-table th[b-uy78yu4e4y],
.rev-table td[b-uy78yu4e4y] {
    padding: 0.5rem 1rem;
    text-align: left;
    border-top: 1px solid var(--qq-admin-divider);
    color: var(--qq-admin-ink);
    font-weight: 400;
}

.rev-table thead th[b-uy78yu4e4y] {
    border-top: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--qq-admin-muted);
    white-space: nowrap;
}

.rev-table .num[b-uy78yu4e4y] {
    text-align: right;
    font-family: var(--qq-admin-mono);
    white-space: nowrap;
}

.rev-table .strong[b-uy78yu4e4y] {
    font-weight: 700;
}

/* Money that went back out, in the same accent the KPI cells use for it —
   a refund column rendered in the ordinary ink reads as income. */
.rev-table td.hot[b-uy78yu4e4y] {
    color: var(--qq-admin-accent);
}

/* Top stores. */
.rev-rank[b-uy78yu4e4y] {
    width: 1.1rem;
    color: var(--qq-admin-faint);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.rev-store[b-uy78yu4e4y] {
    color: var(--qq-admin-ink);
    font-weight: 600;
    font-size: 0.88rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rev-bar-track[b-uy78yu4e4y] {
    height: 8px;
    min-width: 3rem;
    border-radius: 999px;
    background: var(--qq-admin-divider);
    overflow: hidden;
}

.rev-bar-fill[b-uy78yu4e4y] {
    height: 100%;
    border-radius: 999px;
    background: var(--qq-admin-accent);
}

.rev-muted[b-uy78yu4e4y] {
    color: var(--qq-admin-faint);
}

.rev-strong[b-uy78yu4e4y] {
    font-weight: 700;
    color: var(--qq-admin-ink);
}

/* Definitions footer. */
.rev-notes ul[b-uy78yu4e4y] {
    margin: 0;
    padding-left: 1.1rem;
}

.rev-notes li[b-uy78yu4e4y] {
    font-size: 0.78rem;
    color: var(--qq-admin-muted);
    margin-bottom: 0.3rem;
}
/* /Components/Admin/AdminSettings.razor.rz.scp.css */
/* Admin settings (spec 019). One column of grouped cards beside a sticky index,
   replacing ten cards dropped into two columns in no particular order.

   Every card has the same shape — title, consequence, control, warning, footer —
   because uniformity is what lets an admin scan eleven unrelated switches. */

.set-bar-tools[b-u46xiqkrfq] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.set-search[b-u46xiqkrfq] {
    width: 15rem;
    max-width: 45vw;
}

.set-unsaved[b-u46xiqkrfq] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-accent);
    white-space: nowrap;
}

.set-layout[b-u46xiqkrfq] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 1.8rem;
    align-items: start;
}

/* --- Index rail ----------------------------------------------------------- */

.set-rail[b-u46xiqkrfq] {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.set-rail-link[b-u46xiqkrfq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    font-size: 0.83rem;
    color: var(--qq-admin-body, inherit);
    text-decoration: none;
}

.set-rail-link:hover[b-u46xiqkrfq] {
    background: var(--qq-admin-card);
    text-decoration: none;
}

/* Dimmed rather than removed: a section with no search hits still exists, and
   hiding it would make the page look like it lost settings. */
.set-rail-link.is-empty[b-u46xiqkrfq] {
    opacity: 0.4;
}

.set-rail-count[b-u46xiqkrfq] {
    margin-left: auto;
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-faint);
}

/* --- Sections and cards --------------------------------------------------- */

.set-col[b-u46xiqkrfq] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.set-section[b-u46xiqkrfq] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.9rem 0 0;
    scroll-margin-top: 20px;
}

.set-section:first-child[b-u46xiqkrfq] {
    margin-top: 0;
}

.set-card[b-u46xiqkrfq] {
    background: var(--qq-admin-card);
    border: 1px solid var(--qq-admin-border);
    border-radius: 14px;
    padding: 1rem 1.15rem;
}

/* The two switches that can take the marketplace down or lower the console's
   own front door. They must not look like a reminder-lead number. */
.set-card.is-destructive[b-u46xiqkrfq] {
    border-left: 3px solid var(--qq-admin-accent);
}

.set-card.is-locked[b-u46xiqkrfq] {
    border-style: dashed;
    background: transparent;
}

.set-card-head[b-u46xiqkrfq] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.3rem;
}

.set-card-title[b-u46xiqkrfq] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.set-card-hint[b-u46xiqkrfq] {
    font-size: 0.83rem;
    color: var(--qq-admin-body, var(--qq-admin-muted));
    line-height: 1.5;
    margin: 0 0 0.8rem;
    max-width: 68ch;
}

.set-note[b-u46xiqkrfq] {
    font-size: 0.78rem;
    color: var(--qq-admin-muted);
    line-height: 1.5;
    margin: 0.5rem 0 0;
    max-width: 68ch;
}

/* On/off in words beside the toggle. Colour alone says nothing to a reader who
   cannot see it, and little to one who can. */
.set-state[b-u46xiqkrfq] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-faint);
    margin-left: 0.5rem;
}

.set-warn[b-u46xiqkrfq] {
    font-size: 0.82rem;
    margin-top: 0.75rem;
}

.set-fields[b-u46xiqkrfq] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.set-num[b-u46xiqkrfq] {
    width: 6.5rem;
}

.set-select[b-u46xiqkrfq] {
    max-width: 22rem;
}

.set-inset[b-u46xiqkrfq] {
    background: var(--qq-admin-inset, var(--qq-admin-bar-soft));
    border: 1px solid var(--qq-admin-hairline, var(--qq-admin-border));
    border-radius: 11px;
    padding: 0.7rem 0.85rem;
    margin: 0;
}

.set-inset[disabled][b-u46xiqkrfq] {
    opacity: 0.55;
}

.set-tag[b-u46xiqkrfq] {
    font-family: var(--qq-admin-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
    background: var(--qq-admin-inset, var(--qq-admin-bar-soft));
    border-radius: 4px;
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
}

.set-tag-danger[b-u46xiqkrfq] {
    color: var(--qq-admin-accent);
    background: var(--qq-admin-accent-tint, #f6e5df);
}

/* --- Card footer ---------------------------------------------------------- */

.set-foot[b-u46xiqkrfq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--qq-admin-hairline, var(--qq-admin-border));
    margin-top: 0.9rem;
    padding-top: 0.75rem;
}

.set-foot-audit[b-u46xiqkrfq] {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    color: var(--qq-admin-faint);
    min-height: 1em;
}

.set-foot-state[b-u46xiqkrfq] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.set-changes[b-u46xiqkrfq] {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    color: var(--qq-admin-accent);
}

.set-empty[b-u46xiqkrfq] {
    text-align: center;
}

.set-signpost[b-u46xiqkrfq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--qq-admin-muted);
    padding: 0.4rem 0.15rem 0;
}

.set-signpost a[b-u46xiqkrfq] {
    color: var(--qq-admin-accent);
}

@media (max-width: 900px) {
    .set-layout[b-u46xiqkrfq] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* A wrapping row of chips, not a clipped scroller — every section has to be
       reachable without a horizontal swipe nobody knows is there. */
    .set-rail[b-u46xiqkrfq] {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .set-rail-link[b-u46xiqkrfq] {
        border: 1px solid var(--qq-admin-border);
        background: var(--qq-admin-card);
        border-radius: 99px;
        padding: 0.5rem 0.8rem;
    }

    .set-bar-tools[b-u46xiqkrfq] {
        width: 100%;
        margin-left: 0;
    }

    .set-search[b-u46xiqkrfq] {
        flex: 1;
        max-width: none;
    }

    .set-num[b-u46xiqkrfq],
    .set-select[b-u46xiqkrfq] {
        width: 100%;
        max-width: none;
    }
}
/* /Components/Admin/AdminStats.razor.rz.scp.css */
/* Period chip in the page bar. */
.stats-period[b-zxaidc37lm] {
    margin-left: auto;
    font-family: var(--qq-admin-mono);
    font-size: 0.7rem;
    color: var(--qq-admin-faint);
    border: 1px solid var(--qq-admin-border);
    background: var(--qq-admin-card);
    padding: 0.5rem 0.9rem;
    border-radius: 9px;
    white-space: nowrap;
}

.stats-empty[b-zxaidc37lm] {
    color: var(--qq-admin-muted);
    font-size: 0.85rem;
}

.muted[b-zxaidc37lm] {
    color: var(--qq-admin-faint);
}

.rank[b-zxaidc37lm] {
    color: var(--qq-admin-faint);
    font-size: 0.72rem;
    width: 1rem;
    flex-shrink: 0;
}

.spend[b-zxaidc37lm] {
    font-weight: 700;
    color: var(--qq-admin-ink);
}

/* Needs attention: terracotta-edged tiles with an age hint. */
.attn-grid[b-zxaidc37lm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
}

.attn-tile[b-zxaidc37lm] {
    background: var(--qq-admin-card);
    border: 1px solid var(--qq-admin-border);
    border-left: 3px solid var(--qq-admin-accent);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}

.attn-label[b-zxaidc37lm] {
    font-size: 0.78rem;
    color: var(--qq-admin-muted);
}

.attn-figure[b-zxaidc37lm] {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.attn-count[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--qq-admin-ink);
}

.attn-count.hot[b-zxaidc37lm] {
    color: var(--qq-admin-accent);
}

.attn-age[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    color: var(--qq-admin-faint);
}

.attn-age.hot[b-zxaidc37lm] {
    color: var(--qq-admin-accent);
}

.attn-sub[b-zxaidc37lm] {
    font-size: 0.74rem;
    color: var(--qq-admin-faint);
    margin-top: 0.5rem;
    display: block;
}

.attn-link[b-zxaidc37lm] {
    font-weight: 600;
    color: var(--qq-admin-accent);
    text-decoration: none;
}

.attn-link:hover[b-zxaidc37lm] {
    text-decoration: underline;
}

/* Hero chart header: section head + legend chips + this-week figure. */
.hero-head[b-zxaidc37lm] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.hero-chip[b-zxaidc37lm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--qq-admin-muted);
}

.hero-swatch-gmv[b-zxaidc37lm] {
    width: 16px;
    height: 8px;
    border-radius: 2px;
    background: #e9cf9c;
    border: 1px solid #d9a94e;
}

.hero-swatch-orders[b-zxaidc37lm] {
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--qq-admin-ink);
}

.hero-figure[b-zxaidc37lm] {
    margin-left: auto;
    font-family: var(--qq-admin-mono);
    font-size: 0.72rem;
    color: var(--qq-admin-faint);
}

.hero-figure b[b-zxaidc37lm] {
    color: var(--qq-admin-accent);
}

.hero-card[b-zxaidc37lm] {
    padding: 1.25rem 0.9rem 0.6rem;
}

.chart-y[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 10px;
    fill: #c9c1b0;
}

.chart-x[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 10px;
    fill: var(--qq-admin-faint);
}

.chart-x-now[b-zxaidc37lm] {
    fill: var(--qq-admin-accent);
    font-weight: 700;
}

/* Heat matrix + (pipeline / buyer mix) column. */
.stats-duo[b-zxaidc37lm] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.4rem;
    align-items: start;
}

.heat-card[b-zxaidc37lm] {
    padding: 1.1rem 1.25rem;
}

.heat-grid[b-zxaidc37lm] {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr) 0.8fr;
    gap: 6px;
    align-items: center;
    padding: 3px 0;
}

.heat-head[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
    padding-bottom: 0.5rem;
}

.heat-head span:not(:first-child):not(:last-child)[b-zxaidc37lm] {
    text-align: center;
}

.heat-row-label[b-zxaidc37lm] {
    font-size: 0.79rem;
    font-weight: 600;
}

.heat-cell[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.75rem;
    text-align: center;
    border-radius: 6px;
    padding: 0.5rem 0;
}

.heat-0[b-zxaidc37lm] { background: #faf6ec; color: #c9c1b0; }
.heat-1[b-zxaidc37lm] { background: #f3e1d9; color: #8a4a35; }
.heat-2[b-zxaidc37lm] { background: #e8c2b1; color: #7c3a26; }
.heat-3[b-zxaidc37lm] { background: #e0a58e; color: #5f2c1b; }
.heat-red[b-zxaidc37lm] { background: var(--qq-admin-accent); color: var(--qq-admin-btn-fg, #fbf8f1); font-weight: 700; }

.heat-oldest[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.72rem;
    text-align: right;
    color: var(--qq-admin-muted, #6f6757);
}

.heat-oldest.hot[b-zxaidc37lm] {
    color: var(--qq-admin-accent);
    font-weight: 700;
}

.heat-caption[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.63rem;
    color: #b8b0a0;
    margin-top: 0.75rem;
}

/* Order pipeline: one stacked bar + two-column legend. */
.pipe-bar[b-zxaidc37lm] {
    display: flex;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
}

.pipe-seg[b-zxaidc37lm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
    overflow: hidden;
}

.pipe-seg-label[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fbf8f1;
    white-space: nowrap;
}

.pipe-legend[b-zxaidc37lm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    margin-top: 1rem;
}

.pipe-legend-row[b-zxaidc37lm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--qq-admin-muted, #6f6757);
}

.stats-legend-dot[b-zxaidc37lm] {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Buyer mix: donut + legend + top-buyer mini list. */
.mix-card[b-zxaidc37lm] {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.donut[b-zxaidc37lm] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.donut-hole[b-zxaidc37lm] {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--qq-admin-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-pct[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--qq-ok-fg, #3f7a52);
    line-height: 1;
}

.donut-cap[b-zxaidc37lm] {
    font-size: 0.6rem;
    color: var(--qq-admin-faint);
    margin-top: 2px;
}

.mix-rows[b-zxaidc37lm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.mix-top[b-zxaidc37lm] {
    border-top: 1px solid var(--qq-admin-divider);
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.buyer-row[b-zxaidc37lm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.buyer-name[b-zxaidc37lm] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Store health + top store rows. */
.stats-grid[b-zxaidc37lm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
    align-items: start;
}

.health-name[b-zxaidc37lm] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--qq-admin-ink);
    min-width: 8rem;
    text-decoration: none;
}

.health-name:hover[b-zxaidc37lm] {
    color: var(--qq-admin-accent);
}

.health-bar-track[b-zxaidc37lm] {
    height: 8px;
    min-width: 4rem;
    border-radius: 4px;
    background: var(--qq-admin-divider);
    overflow: hidden;
}

.health-bar-fill[b-zxaidc37lm] {
    height: 100%;
    border-radius: 4px;
}

.health-bar-brass[b-zxaidc37lm] {
    background: var(--qq-brass);
}

.health-bar-hot[b-zxaidc37lm] {
    background: var(--qq-admin-accent);
}

.health-bar-ink[b-zxaidc37lm] {
    background: var(--qq-admin-ink);
}

.health-stars[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.78rem;
    color: var(--qq-brass, #9a6b1e);
    white-space: nowrap;
}

.aging-hot[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--qq-admin-accent);
}

/* Last 30 days: a 2×2 band with internal hairlines. */
.band-2x2[b-zxaidc37lm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.band-cell[b-zxaidc37lm] {
    padding: 1.1rem 1.25rem;
}

.band-cell:nth-child(odd)[b-zxaidc37lm] {
    border-right: 1px solid var(--qq-admin-divider);
}

.band-cell:nth-child(-n+2)[b-zxaidc37lm] {
    border-bottom: 1px solid var(--qq-admin-divider);
}

.stats-label[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
    margin-bottom: 0.3rem;
    line-height: 1.35;
}

.band-value[b-zxaidc37lm] {
    font-family: var(--qq-admin-mono);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--qq-admin-ink);
}

.band-value.hot[b-zxaidc37lm] {
    color: var(--qq-admin-accent);
}

@media (max-width: 1100px) {
    .attn-grid[b-zxaidc37lm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-duo[b-zxaidc37lm],
    .stats-grid[b-zxaidc37lm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .attn-grid[b-zxaidc37lm] {
        grid-template-columns: 1fr;
    }

    .mix-card[b-zxaidc37lm] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Backlog drill-down: clickable heat cells + the items modal. */
.heat-click[b-zxaidc37lm] {
    cursor: pointer;
}

.heat-click:hover[b-zxaidc37lm] {
    outline: 2px solid var(--qq-admin-accent, #bf4c2e);
    outline-offset: -2px;
}

.drill-overlay[b-zxaidc37lm] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(23, 21, 18, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 1rem;
}

.drill-panel[b-zxaidc37lm] {
    width: min(34rem, 100%);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem;
    background: var(--qq-admin-card, #fffdf8);
}

.drill-head[b-zxaidc37lm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.drill-band[b-zxaidc37lm] {
    font-size: 0.75rem;
    color: var(--qq-admin-muted, #8b8272);
    margin-top: 2px;
}

.drill-close[b-zxaidc37lm] {
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--qq-admin-muted, #8b8272);
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}

.drill-close:hover[b-zxaidc37lm] {
    background: var(--qq-admin-divider, #f2ede2);
}

.drill-list[b-zxaidc37lm] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.drill-row[b-zxaidc37lm] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.1rem;
    border-bottom: 1px solid var(--qq-admin-divider, #f2ede2);
}

.drill-row:last-child[b-zxaidc37lm] {
    border-bottom: 0;
}

.drill-main[b-zxaidc37lm] {
    flex: 1 1 auto;
    min-width: 0;
}

.drill-title[b-zxaidc37lm] {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drill-sub[b-zxaidc37lm] {
    font-size: 0.78rem;
    color: var(--qq-admin-muted, #8b8272);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drill-age[b-zxaidc37lm] {
    font-size: 0.78rem;
    color: var(--qq-admin-faint, #a89f8d);
    white-space: nowrap;
}

.drill-link[b-zxaidc37lm] {
    text-decoration: none;
    font-weight: 700;
    color: var(--qq-admin-accent, #bf4c2e);
    padding: 0.1rem 0.35rem;
}

/* Drill affordances: linked figures keep the layout of their plain twins. */
.pipe-legend-link[b-zxaidc37lm] {
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
}

.pipe-legend-link:hover[b-zxaidc37lm] { background: var(--qq-admin-flag, #f4ead6); }

.band-link[b-zxaidc37lm] {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.band-link:hover[b-zxaidc37lm] { text-decoration: underline; text-underline-offset: 3px; }
/* /Components/Admin/AdminVerification.razor.rz.scp.css */
/* Admin verification (handoff rework). The queue is a list beside one open
   store, so a reviewer works store by store instead of scrolling past every
   store to reach any store. */

/* --- Tabs ------------------------------------------------------------------ */

.ver-tabs[b-ao5l65zw8z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.35rem 0 1rem;
}

.ver-tab[b-ao5l65zw8z] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    background: var(--qq-admin-card);
    border: 1px solid var(--qq-admin-border);
    border-radius: 99px;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
}

.ver-tab.is-active[b-ao5l65zw8z] {
    background: var(--qq-admin-accent);
    border-color: var(--qq-admin-accent);
    color: var(--qq-admin-btn-fg, #fff);
}

.ver-tab-count[b-ao5l65zw8z] {
    font-family: var(--qq-admin-mono);
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.75;
}

/* --- Queue split ----------------------------------------------------------- */

.ver-split[b-ao5l65zw8z] {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.ver-list[b-ao5l65zw8z] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ver-row[b-ao5l65zw8z] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    background: var(--qq-admin-row, #faf7f0);
    border: 1px solid var(--qq-admin-border);
    border-radius: 13px;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    color: inherit;
}

.ver-row.is-open[b-ao5l65zw8z] {
    background: var(--qq-admin-card);
    border-color: var(--qq-admin-accent);
    box-shadow: inset 3px 0 0 var(--qq-admin-accent);
}

.ver-row-main[b-ao5l65zw8z] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ver-row-name[b-ao5l65zw8z] {
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ver-row-meta[b-ao5l65zw8z] {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    color: var(--qq-admin-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ver-row-count[b-ao5l65zw8z] {
    font-family: var(--qq-admin-mono);
    font-size: 0.72rem;
    color: var(--qq-admin-faint);
    flex-shrink: 0;
}

/* One segment per required document — colour never stands alone, since the
   pills in the detail panel spell every status out in words. */
.ver-progress[b-ao5l65zw8z] {
    display: flex;
    gap: 3px;
}

.ver-seg[b-ao5l65zw8z] {
    height: 5px;
    flex: 1;
    max-width: 46px;
    border-radius: 3px;
    background: var(--qq-admin-border);
}

.ver-seg.is-ok[b-ao5l65zw8z] { background: #3f7d4e; }
.ver-seg.is-review[b-ao5l65zw8z] { background: #d9a94e; }
.ver-seg.is-bad[b-ao5l65zw8z] { background: var(--qq-admin-accent); }
.ver-seg.is-missing[b-ao5l65zw8z] {
    background: transparent;
    border: 1px dashed var(--qq-admin-faint);
}

/* --- Open store ------------------------------------------------------------ */

.ver-detail[b-ao5l65zw8z] {
    background: var(--qq-admin-card);
    border: 1px solid var(--qq-admin-border);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    min-width: 0;
}

.ver-detail-head[b-ao5l65zw8z] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--qq-admin-hairline, var(--qq-admin-border));
    margin-bottom: 0.9rem;
}

.ver-detail-title[b-ao5l65zw8z] {
    min-width: 0;
    flex: 1;
}

.ver-detail-link[b-ao5l65zw8z] {
    color: var(--qq-info-fg, #39627e);
}

.ver-docs[b-ao5l65zw8z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 0.9rem;
}

.ver-doc[b-ao5l65zw8z] {
    border: 1px solid var(--qq-admin-border);
    border-radius: 13px;
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.ver-doc.is-missing[b-ao5l65zw8z] {
    border-style: dashed;
    background: transparent;
}

.ver-doc-head[b-ao5l65zw8z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ver-doc-type[b-ao5l65zw8z] {
    font-family: var(--qq-admin-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
}

.ver-doc-preview[b-ao5l65zw8z] {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--qq-admin-border);
    cursor: zoom-in;
}

.ver-doc-preview img[b-ao5l65zw8z] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.ver-doc-tag[b-ao5l65zw8z] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: var(--qq-admin-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: rgba(33, 29, 24, 0.75);
    color: #fbf8f1;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
}

/* The previous reviewer's words — the seller read exactly this. */
.ver-doc-note[b-ao5l65zw8z] {
    font-size: 0.78rem;
    color: var(--qq-bad-fg, #93381f);
    background: var(--qq-admin-accent-tint, #f6e5df);
    border-left: 3px solid var(--qq-admin-accent);
    border-radius: 0 8px 8px 0;
    padding: 0.4rem 0.6rem;
    line-height: 1.4;
}

.ver-doc-actions[b-ao5l65zw8z] {
    display: flex;
    gap: 0.45rem;
}

.ver-doc-actions .admin-approve[b-ao5l65zw8z] {
    flex: 1;
}

.ver-doc-approved[b-ao5l65zw8z] {
    font-family: var(--qq-admin-mono);
    font-size: 0.72rem;
    color: #3f7d4e;
}

.ver-reject[b-ao5l65zw8z] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ver-reject textarea[b-ao5l65zw8z] {
    font-size: 0.82rem;
    resize: vertical;
}

.ver-reject-actions[b-ao5l65zw8z] {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.ver-doc-empty[b-ao5l65zw8z] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    border: 2px dashed var(--qq-admin-border);
    border-radius: 10px;
    color: var(--qq-admin-faint);
    font-size: 0.82rem;
}

.ver-doc-hint[b-ao5l65zw8z] {
    font-size: 0.74rem;
    color: var(--qq-admin-faint);
}

/* --- The moment a store goes live ------------------------------------------ */

.ver-live-banner[b-ao5l65zw8z] {
    background: #e8f0e6;
    border: 1px solid #cfe0cb;
    color: #3f7d4e;
    border-radius: 12px;
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

/* --- Waiting / verified ---------------------------------------------------- */

.ver-framing[b-ao5l65zw8z] {
    font-size: 0.83rem;
    color: var(--qq-admin-muted);
    max-width: 70ch;
    margin: 0 0 0.9rem;
}

.ver-verified-head[b-ao5l65zw8z] {
    display: flex;
    margin-bottom: 0.8rem;
}

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 900px) {
    .ver-split[b-ao5l65zw8z] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ver-doc-actions .qq-btn-sm[b-ao5l65zw8z],
    .ver-reject-actions .qq-btn-sm[b-ao5l65zw8z] {
        min-height: 44px;
    }
}
/* /Components/Admin/BlockedSlotReviewDialog.razor.rz.scp.css */
.qq-review-backdrop[b-281zjbc41h] {
    position: fixed;
    inset: 0;
    background: rgba(23, 21, 18, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1090; /* above the notification dropdown (1080-ish bootstrap) */
    padding: 1rem;
}

.qq-review-card[b-281zjbc41h] {
    background: var(--qq-admin-card, #fff);
    color: var(--qq-admin-ink, #171512);
    border-radius: 14px;
    padding: 1.5rem 1.6rem;
    max-width: 32rem;
    width: 100%;
    box-shadow: 0 16px 56px rgba(0, 0, 0, .35);
}

.qq-review-badge[b-281zjbc41h] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(217, 169, 78, .18);
    color: #b07d1e;
    margin-bottom: .7rem;
}

.qq-review-title[b-281zjbc41h] {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}

.qq-review-lead[b-281zjbc41h] {
    font-size: .9rem;
    color: var(--qq-admin-muted, #6b6459);
    margin: 0 0 .7rem;
}

.qq-review-list[b-281zjbc41h] {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: .86rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.qq-review-more[b-281zjbc41h] {
    color: var(--qq-admin-muted, #6b6459);
    list-style: none;
}

.qq-review-actions[b-281zjbc41h] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
/* /Components/Admin/VerificationDirectoryPanel.razor.rz.scp.css */
/* Verification directory panel. Sits above the queue; collapsed by default so
   the pending sellers stay the first thing on the page. */

.vdir[b-m4y7pyhi3n] {
    background: var(--qq-admin-card);
    border: 1px solid var(--qq-admin-border);
    border-radius: 14px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.vdir-toggle[b-m4y7pyhi3n] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    color: inherit;
}

.vdir-toggle-title[b-m4y7pyhi3n] {
    font-size: 0.9rem;
    font-weight: 700;
}

.vdir-toggle-hint[b-m4y7pyhi3n] {
    font-size: 0.78rem;
    color: var(--qq-admin-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdir-caret[b-m4y7pyhi3n] {
    margin-left: auto;
    color: var(--qq-admin-faint);
}

.vdir-body[b-m4y7pyhi3n] {
    padding: 0 1.1rem 1rem;
    /* Full-width strip above the tabs (verification handoff): Canada-wide
       left, the province picker right, instead of stacking. */
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0 1.6rem;
}

.vdir-disclaimer[b-m4y7pyhi3n] {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .vdir-body[b-m4y7pyhi3n] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vdir-heading[b-m4y7pyhi3n] {
    font-family: var(--qq-admin-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qq-admin-muted);
    margin: 0.9rem 0 0.5rem;
}

.vdir-chips[b-m4y7pyhi3n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.vdir-chip[b-m4y7pyhi3n] {
    font-size: 0.78rem;
    background: var(--qq-admin-inset, var(--qq-admin-bar-soft));
    border: 1px solid var(--qq-admin-border);
    border-radius: 99px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    color: inherit;
    /* 44px touch targets on phones would double the block's height for a
       reference panel; these stay compact and the row wraps instead. */
}

.vdir-chip.is-active[b-m4y7pyhi3n] {
    background: var(--qq-admin-accent);
    border-color: var(--qq-admin-accent);
    color: var(--qq-admin-btn-fg, #fff);
    font-weight: 600;
}

.vdir-row[b-m4y7pyhi3n] {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.15rem 0.8rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--qq-admin-hairline, var(--qq-admin-border));
    font-size: 0.83rem;
}

.vdir-layer[b-m4y7pyhi3n] {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qq-admin-faint);
    padding-top: 0.15rem;
}

.vdir-links[b-m4y7pyhi3n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
}

.vdir-none[b-m4y7pyhi3n] {
    color: var(--qq-admin-muted);
    font-style: italic;
}

.vdir-note[b-m4y7pyhi3n] {
    grid-column: 2;
    font-size: 0.76rem;
    color: var(--qq-admin-muted);
    line-height: 1.45;
    max-width: 70ch;
}

.vdir-disclaimer[b-m4y7pyhi3n] {
    font-size: 0.72rem;
    color: var(--qq-admin-faint);
    margin: 0.9rem 0 0;
}

@media (max-width: 700px) {
    .vdir-row[b-m4y7pyhi3n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vdir-note[b-m4y7pyhi3n] {
        grid-column: 1;
    }

    .vdir-toggle-hint[b-m4y7pyhi3n] {
        display: none;
    }
}
/* /Components/Buyer/AppointmentSummary.razor.rz.scp.css */
/* 2b · Booking summary. Desktop: details left, code + payment right. Mobile:
   one column with the code card promoted above the details. */

.qq-as-back[b-u3ftev4iax] {
    font-size: .85rem;
    font-weight: 600;
}

.qq-as-banner[b-u3ftev4iax] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--qq-ok-bg);
    border: 1px solid var(--qq-border);
    border-radius: 16px;
    padding: 16px 18px;
    margin-top: 12px;
}

.qq-as-banner-check[b-u3ftev4iax] {
    width: 44px;
    height: 44px;
    border-radius: 99px;
    background: var(--qq-card);
    color: var(--qq-ok-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.qq-as-banner-title[b-u3ftev4iax] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--qq-ok-fg);
    letter-spacing: -.02em;
}

.qq-as-banner-text[b-u3ftev4iax] {
    font-size: .8rem;
    color: var(--qq-text-body);
    line-height: 1.45;
    margin-top: 3px;
}

.qq-as-banner-close[b-u3ftev4iax] {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 99px;
    border: 0;
    background: transparent;
    color: var(--qq-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

.qq-as-head[b-u3ftev4iax] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin: 14px 0 20px;
}

.qq-as-title-row[b-u3ftev4iax] {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.qq-as-title[b-u3ftev4iax] {
    font-size: 1.6rem;
    letter-spacing: -.03em;
    margin: 0;
}

.qq-as-byline[b-u3ftev4iax] {
    font-size: .85rem;
    color: var(--qq-text-muted);
    margin-top: 6px;
}

.qq-as-head-actions[b-u3ftev4iax] {
    margin-left: auto;
    display: flex;
    gap: 9px;
    align-items: center;
}

.qq-as-grid[b-u3ftev4iax] {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 22px;
    align-items: start;
    max-width: 62rem;
}

.qq-as-main[b-u3ftev4iax] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.qq-as-side[b-u3ftev4iax] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.qq-as-service[b-u3ftev4iax] {
    display: flex;
    gap: 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--qq-border-soft);
}

.qq-as-thumb[b-u3ftev4iax] {
    width: 74px;
    height: 74px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--qq-border);
    flex: none;
}

.qq-as-thumb-empty[b-u3ftev4iax] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qq-brass-soft);
    color: var(--qq-text-faint);
}

.qq-as-service-name[b-u3ftev4iax] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    margin-top: 5px;
}

.qq-as-service-sub[b-u3ftev4iax] {
    font-size: .8rem;
    color: var(--qq-text-muted);
    margin-top: 5px;
}

.qq-as-facts[b-u3ftev4iax] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--qq-border-soft);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 17px;
}

.qq-as-fact[b-u3ftev4iax] {
    background: var(--qq-card);
    padding: 13px 14px;
    min-width: 0;
}

.qq-as-fact-label[b-u3ftev4iax] {
    font-family: var(--qq-admin-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--qq-text-faint);
    font-weight: 700;
}

.qq-as-fact-value[b-u3ftev4iax] {
    font-size: .92rem;
    font-weight: 700;
    margin-top: 5px;
}

.qq-as-fact-sub[b-u3ftev4iax] {
    font-size: .73rem;
    color: var(--qq-text-faint);
    margin-top: 2px;
}

/* SLOT HELD (amber) note replacing the on-the-day card while payment is due. */
.qq-as-note[b-u3ftev4iax] {
    display: flex;
    gap: 12px;
    border-radius: 16px;
    padding: 16px 18px;
}

.qq-as-note-warn[b-u3ftev4iax] {
    background: var(--qq-warn-bg);
    color: var(--qq-warn-fg);
}

.qq-as-note svg[b-u3ftev4iax] {
    flex: none;
    margin-top: 1px;
}

.qq-as-note-title[b-u3ftev4iax] {
    font-size: .92rem;
    font-weight: 700;
}

.qq-as-note-text[b-u3ftev4iax] {
    font-size: .8rem;
    line-height: 1.5;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.qq-as-day-grid[b-u3ftev4iax] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.qq-as-day-item[b-u3ftev4iax] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .85rem;
    color: var(--qq-text-body);
    line-height: 1.5;
    min-width: 0;
}

.qq-as-day-item svg[b-u3ftev4iax] {
    flex: none;
    margin-top: 1px;
}

/* Cancellation policy card with the actions inside it — consequence and
   action in one place, never a bare destructive button. */
.qq-as-policy[b-u3ftev4iax] {
    background: var(--qq-brass-soft);
    border: 1px solid var(--qq-border);
    border-radius: 16px;
    padding: 18px;
}

.qq-as-policy-head[b-u3ftev4iax] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--qq-brass-deep);
    font-size: .92rem;
    font-weight: 700;
}

.qq-as-policy-text[b-u3ftev4iax] {
    font-size: .8rem;
    color: var(--qq-text-body);
    line-height: 1.6;
}

.qq-as-policy-actions[b-u3ftev4iax] {
    display: flex;
    gap: 9px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.qq-as-policy-btn[b-u3ftev4iax] {
    height: 38px;
    padding: 0 15px;
    border-radius: 99px;
    border: 1.5px solid var(--qq-border);
    background: var(--qq-card);
    color: var(--qq-brass-deep);
    display: flex;
    align-items: center;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.qq-as-policy-btn.danger[b-u3ftev4iax] {
    color: var(--qq-bad-fg);
}

/* The code card: ink surface in both themes — at the door it has to read
   from arm's length, so it gets the page's strongest contrast. */
.qq-as-code-card[b-u3ftev4iax] {
    background: #171512;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.qq-as-code-label[b-u3ftev4iax] {
    font-family: var(--qq-admin-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a39a88;
    font-weight: 700;
}

.qq-as-code[b-u3ftev4iax] {
    font-family: var(--qq-admin-mono);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: #d9a94e;
    line-height: 1;
    overflow-wrap: anywhere;
}

.qq-as-copy[b-u3ftev4iax] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border-radius: 99px;
    border: 0;
    background: #d9a94e;
    color: #171512;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
}

.qq-as-copy.done[b-u3ftev4iax] {
    background: #3d7a3f;
    color: #f2f7f0;
}

.qq-as-lines[b-u3ftev4iax] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qq-as-line[b-u3ftev4iax] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .85rem;
    color: var(--qq-text-muted);
}

.qq-as-line-total[b-u3ftev4iax] {
    padding-top: 11px;
    border-top: 1px solid var(--qq-border-soft);
    color: var(--qq-text);
    font-weight: 700;
    font-size: .92rem;
}

.qq-mono[b-u3ftev4iax] {
    font-family: var(--qq-admin-mono);
    font-variant-numeric: tabular-nums;
}

.qq-as-amount[b-u3ftev4iax] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--qq-brass-deep);
    line-height: 1;
}

.qq-as-paychip[b-u3ftev4iax] {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 11px;
    padding: 10px 12px;
    margin-top: 14px;
    font-size: .78rem;
    font-weight: 600;
}

.qq-as-paychip.ok[b-u3ftev4iax] {
    background: var(--qq-ok-bg);
    color: var(--qq-ok-fg);
}

.qq-as-paychip.warn[b-u3ftev4iax] {
    background: var(--qq-warn-bg);
    color: var(--qq-warn-fg);
}

@media (max-width: 767.98px) {
    .qq-as-grid[b-u3ftev4iax] {
        grid-template-columns: 1fr;
    }

    /* The code is the only thing that matters at the door — promote the whole
       side column above the details on phones. */
    .qq-as-side[b-u3ftev4iax] {
        order: -1;
    }

    .qq-as-facts[b-u3ftev4iax] {
        grid-template-columns: 1fr;
        gap: 0;
        background: transparent;
        border-radius: 0;
    }

    .qq-as-fact[b-u3ftev4iax] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 8px 0;
        background: transparent;
        border-bottom: 1px solid var(--qq-border-soft);
    }

    .qq-as-fact:last-child[b-u3ftev4iax] {
        border-bottom: 0;
    }

    .qq-as-fact-label[b-u3ftev4iax] {
        flex: none;
    }

    .qq-as-fact-value[b-u3ftev4iax] {
        margin-top: 0;
        margin-left: auto;
        text-align: right;
    }

    .qq-as-fact-sub[b-u3ftev4iax] {
        margin-top: 0;
        flex: none;
    }

    .qq-as-day-grid[b-u3ftev4iax] {
        grid-template-columns: 1fr;
    }

    .qq-as-head-actions[b-u3ftev4iax] {
        margin-left: 0;
        width: 100%;
        /* Three buttons on a ride (chat, share, calendar) do not fit one phone row. */
        flex-wrap: wrap;
    }
}
/* /Components/Buyer/NextAppointmentCard.razor.rz.scp.css */
/* 2c · Next appointment + countdown. Three states: days out (calm green),
   inside the cancellation window (amber, policy spelled out), starting now
   (ink, the code promoted to the primary action). Colour never carries the
   state alone — each state has its own eyebrow text. */

.qq-na[b-k1psgbi14k] {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 26px;
    align-items: start;
    border-radius: 18px;
    padding: 22px;
    border: 1px solid transparent;
    margin-bottom: 20px;
    max-width: 62rem;
}

.qq-na.ok[b-k1psgbi14k] {
    background: var(--qq-ok-bg);
    border-color: var(--qq-border);
    --na-accent: var(--qq-ok-fg);
    --na-ink: var(--qq-text);
    --na-muted: var(--qq-text-muted);
    --na-seg-bg: var(--qq-card);
    --na-track: var(--qq-track-off);
}

.qq-na.warn[b-k1psgbi14k] {
    background: var(--qq-warn-bg);
    border-color: var(--qq-border);
    --na-accent: var(--qq-warn-fg);
    --na-ink: var(--qq-text);
    --na-muted: var(--qq-text-muted);
    --na-seg-bg: var(--qq-card);
    --na-track: var(--qq-track-off);
}

/* "Starting now" is deliberately the same ink surface in both themes — like
   the code card on the summary page, it has to read at the door. */
.qq-na.now[b-k1psgbi14k] {
    background: #171512;
    border-color: #332e24;
    --na-accent: #d9a94e;
    --na-ink: #f2ede4;
    --na-muted: #a39a88;
    --na-seg-bg: #2c2720;
    --na-track: #332e24;
}

.qq-na-body[b-k1psgbi14k] {
    min-width: 0;
}

.qq-na-eyebrow-row[b-k1psgbi14k] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.qq-na-icon[b-k1psgbi14k] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--na-seg-bg);
    color: var(--na-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.qq-na-eyebrow[b-k1psgbi14k] {
    font-family: var(--qq-admin-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--na-accent);
}

.qq-na-code[b-k1psgbi14k] {
    font-size: .66rem;
    letter-spacing: .06em;
    color: var(--na-muted);
}

.qq-na-mono[b-k1psgbi14k] {
    font-family: var(--qq-admin-mono);
    font-variant-numeric: tabular-nums;
}

.qq-na-name[b-k1psgbi14k] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.02em;
    margin: 13px 0 15px;
    color: var(--na-ink);
}

.qq-na-meta[b-k1psgbi14k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qq-na-meta-item[b-k1psgbi14k] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: var(--na-ink);
    min-width: 0;
}

.qq-na-meta-item svg[b-k1psgbi14k] {
    flex: none;
    color: var(--na-muted);
}

.qq-na-warnnote[b-k1psgbi14k] {
    display: flex;
    gap: 10px;
    background: var(--qq-card);
    border: 1px solid var(--qq-border);
    border-radius: 12px;
    padding: 11px 13px;
    margin-top: 15px;
    font-size: .78rem;
    color: var(--qq-warn-fg);
    line-height: 1.5;
}

.qq-na-warnnote svg[b-k1psgbi14k] {
    flex: none;
    margin-top: 1px;
}

.qq-na-clock[b-k1psgbi14k] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.qq-na-segs[b-k1psgbi14k] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.qq-na-seg[b-k1psgbi14k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 60px;
    background: var(--na-seg-bg);
    border: 1px solid var(--qq-border);
    border-radius: 13px;
    padding: 11px 8px 8px;
}

.qq-na.now .qq-na-seg[b-k1psgbi14k] {
    border-color: #3d372b;
}

.qq-na-seg-v[b-k1psgbi14k] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--na-accent);
}

.qq-na-seg-k[b-k1psgbi14k] {
    font-size: .56rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--na-muted);
}

.qq-na-far[b-k1psgbi14k] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--na-ink);
}

.qq-na-tail[b-k1psgbi14k] {
    font-size: .78rem;
    color: var(--na-muted);
    line-height: 1.45;
}

.qq-na-track[b-k1psgbi14k] {
    height: 5px;
    border-radius: 99px;
    background: var(--na-track);
    overflow: hidden;
}

.qq-na-fill[b-k1psgbi14k] {
    height: 100%;
    border-radius: 99px;
    background: var(--na-accent);
}

.qq-na-actions[b-k1psgbi14k] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qq-na-primary[b-k1psgbi14k] {
    height: 44px;
    border-radius: 99px;
    background: var(--na-accent);
    color: var(--qq-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.qq-na-primary:hover[b-k1psgbi14k] {
    text-decoration: none;
    filter: brightness(1.08);
}

.qq-na.now .qq-na-primary[b-k1psgbi14k] {
    color: #171512;
}

/* 2d · Two or more upcoming bookings: a horizontal scroll-snap strip, one
   card per "page" with a peek of the next so swipeability is discoverable.
   The strip owns all horizontal overflow (the page never scrolls sideways);
   its scrollbar is hidden, and the page dots underneath — decorative,
   aria-hidden, driven from scrollLeft by js/appointment-countdown.js — carry
   the position instead. */

.qq-na-strip-wrap[b-k1psgbi14k] {
    max-width: 62rem;
    min-width: 0;
    margin-bottom: 20px;
}

.qq-na-strip[b-k1psgbi14k] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
    border-radius: 18px;
}

.qq-na-strip[b-k1psgbi14k]::-webkit-scrollbar {
    display: none; /* WebKit */
}

/* The strip is the keyboard surface (tabindex="0"): arrow keys scroll it. */
.qq-na-strip:focus-visible[b-k1psgbi14k] {
    outline: 2px solid var(--qq-brass);
    outline-offset: 3px;
}

/* Mouse affordances (appointment-countdown.js drives the drag): the open
   hand says "draggable", and the dots double as jump targets. Touch devices
   keep native scrolling and never see these cursors. */
@media (pointer: fine) {
    .qq-na-strip[b-k1psgbi14k] {
        cursor: grab;
    }

    .qq-na-strip.qq-na-dragging[b-k1psgbi14k] {
        cursor: grabbing;
    }

    .qq-na-dot[b-k1psgbi14k] {
        cursor: pointer;
    }
}

.qq-na-slide[b-k1psgbi14k] {
    flex: 0 0 calc(100% - 48px); /* 48px peek of the next card */
    min-width: 0;
    display: flex;
    scroll-snap-align: start;
}

/* The last card parks flush with the right edge instead of over-scrolling. */
.qq-na-slide:last-child[b-k1psgbi14k] {
    scroll-snap-align: end;
}

.qq-na-slide > .qq-na[b-k1psgbi14k] {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
}

.qq-na-dots[b-k1psgbi14k] {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
}

.qq-na-dot[b-k1psgbi14k] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qq-border);
    transition: background-color .2s ease, transform .2s ease;
}

.qq-na-dot.active[b-k1psgbi14k] {
    background: var(--qq-brass);
    transform: scale(1.25);
}

@media (max-width: 767.98px) {
    .qq-na[b-k1psgbi14k] {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 15px;
    }

    .qq-na-seg[b-k1psgbi14k] {
        min-width: 52px;
        padding: 9px 6px 7px;
    }

    .qq-na-seg-v[b-k1psgbi14k] {
        font-size: 1.5rem;
    }

    .qq-na-slide[b-k1psgbi14k] {
        flex-basis: calc(100% - 32px); /* tighter peek on small screens */
    }
}
/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-vwyu6as9wh] {
    min-height: 100vh;
    background: var(--qq-admin-shell); /* warm ivory: the v3 "editorial back-office" canvas */
    display: flex;
    align-items: stretch;
    color: var(--qq-admin-ink);
}

/* --- Sidebar (espresso rail) ---------------------------------------------- */

.admin-sidebar[b-vwyu6as9wh] {
    width: 252px;
    flex-shrink: 0;
    background: var(--qq-admin-bar);
    color: #a49b8a;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    max-height: 100vh;
    transition: width 0.15s ease;
}

.admin-sidebar-head[b-vwyu6as9wh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.9rem 1.05rem 1.15rem;
    border-bottom: 1px solid #332e24;
}

.admin-brand[b-vwyu6as9wh] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: #fbf8f1;
    font-weight: 700;
    text-decoration: none;
}

.admin-brand:hover[b-vwyu6as9wh] {
    color: #fff;
    text-decoration: none;
}

.admin-brand-text[b-vwyu6as9wh] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-nav-toggle[b-vwyu6as9wh] {
    margin-left: auto;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #3a352a;
    border-radius: 8px;
    color: var(--qq-admin-faint);
    cursor: pointer;
    padding: 0;
}

.admin-nav-toggle:hover[b-vwyu6as9wh] {
    color: #fff;
    background: var(--qq-admin-bar-active);
}

.admin-nav-toggle svg[b-vwyu6as9wh] {
    width: 15px;
    height: 15px;
    transition: transform 0.15s ease;
}

.admin-tag[b-vwyu6as9wh] {
    background: var(--qq-admin-accent);
    color: #fff;
    font-family: var(--qq-admin-mono);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.08em;
    vertical-align: middle;
}

/* --- Sidebar footer -------------------------------------------------------- */

.admin-sidebar-footer[b-vwyu6as9wh] {
    border-top: 1px solid #332e24;
    padding: 0.9rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.admin-sidebar-meta[b-vwyu6as9wh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The row is a link plus three fixed-width controls. Without wrapping they
       cannot all fit the drawer's width, and the language toggle was pushed
       past its right edge — visibly clipped rather than merely tight. */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.4rem;
}

/* Keeps the toggles together as one unit when the row does wrap, instead of
   the language switch stranding itself on a line of its own. */
.admin-meta-tools[b-vwyu6as9wh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-link[b-vwyu6as9wh] {
    color: var(--qq-admin-faint);
    text-decoration: none;
    font-size: 0.85rem;
}

.admin-link:hover[b-vwyu6as9wh] {
    color: #fff;
}

.admin-user-card[b-vwyu6as9wh] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #2c2820;
    border: 1px solid #3a352a;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
}

.admin-user-avatar[b-vwyu6as9wh] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px; /* squircle, not a circle */
    background: var(--qq-admin-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.admin-user-name[b-vwyu6as9wh] {
    flex: 1;
    min-width: 0;
    font-family: var(--qq-admin-mono);
    font-size: 0.72rem;
    color: #fbf8f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-logout[b-vwyu6as9wh] {
    background: transparent;
    border: 1px solid #3a352a;
    color: #a49b8a;
    border-radius: 8px;
    padding: 0.3rem 0.8rem;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}

.admin-logout:hover[b-vwyu6as9wh] {
    background: var(--qq-admin-bar-active);
    color: #fbf8f1;
}

/* --- Content --------------------------------------------------------------- */

.admin-content[b-vwyu6as9wh] {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* --- Page shell: paper topbar + padded body -------------------------------- */

.admin-content[b-vwyu6as9wh]  .admin-page-bar {
    background: var(--qq-admin-card);
    border-bottom: 1px solid var(--qq-admin-border);
    padding: 1rem 1.9rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

/* Space Mono route line stacked above the page title. */
.admin-content[b-vwyu6as9wh]  .admin-page-route {
    display: block;
    font-family: var(--qq-admin-mono);
    font-size: 0.69rem;
    color: var(--qq-admin-faint);
    letter-spacing: 0.02em;
    margin-bottom: 0.1rem;
}

.admin-content[b-vwyu6as9wh]  .admin-page-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.admin-content[b-vwyu6as9wh]  .admin-page-hint {
    flex: 1;
    min-width: 14rem;
    font-size: 0.82rem;
    color: var(--qq-admin-muted);
    margin: 0;
}

.admin-content[b-vwyu6as9wh]  .admin-page-body {
    padding: 1.75rem 2rem 2.5rem;
}

/* rectangular search box with the v3 grey-dot glyph */
.admin-content[b-vwyu6as9wh]  .admin-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--qq-admin-input);
    border: 1px solid var(--qq-admin-border);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    width: 18rem;
    max-width: 100%;
}

.admin-content[b-vwyu6as9wh]  .admin-search::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--qq-admin-faint);
}

.admin-content[b-vwyu6as9wh]  .admin-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--qq-admin-ink);
}

/* toggle chips (plan features, role permissions): Space Mono, rectangular */
.admin-content[b-vwyu6as9wh]  .admin-chip {
    border: 1px solid var(--qq-admin-border);
    background: var(--qq-admin-card);
    color: var(--qq-admin-faint);
    font-family: var(--qq-admin-mono);
    font-size: 0.69rem;
    font-weight: 700;
    padding: 0.375rem 0.75rem;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.admin-content[b-vwyu6as9wh]  .admin-chip:hover {
    border-color: var(--qq-admin-faint);
}

.admin-content[b-vwyu6as9wh]  .admin-chip.on {
    background: var(--qq-admin-ink);
    border-color: var(--qq-admin-ink);
    /* ink inverts to ivory in dark mode, so the label has to invert with it —
       a fixed near-white here made the selected chip unreadable. */
    color: var(--qq-admin-btn-fg);
}

.admin-content[b-vwyu6as9wh]  .admin-chip.on::before {
    content: "✓ ";
}

.admin-content[b-vwyu6as9wh]  .admin-chip:disabled {
    cursor: default;
    opacity: 0.7;
}

/* inputs keep the rectangular radius in the topbar too */
.admin-content[b-vwyu6as9wh]  .admin-page-bar .qq-input,
.admin-content[b-vwyu6as9wh]  .admin-page-bar .qq-select {
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
}

/* flagged rows (locked users, hidden reviews, inactive cities) */
.admin-content[b-vwyu6as9wh]  .admin-row-flag {
    background: var(--qq-admin-flag);
}

/* uppercase column/section labels: Space Mono */
.admin-content[b-vwyu6as9wh]  .admin-col-head {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qq-admin-faint);
}

/* mono meta text (routes, ids, timestamps, amounts) */
.admin-content[b-vwyu6as9wh]  .admin-mono {
    font-family: var(--qq-admin-mono);
    font-size: 0.72rem;
    color: var(--qq-admin-muted);
}

/* label/value fact list (buyer & seller detail pages) */
.admin-content[b-vwyu6as9wh]  .admin-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.85rem;
}

.admin-content[b-vwyu6as9wh]  .admin-facts dt {
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qq-admin-faint);
    align-self: center;
    white-space: nowrap;
}

/* An email or an address is the widest thing in the card; without the wrap it
   stretches the grid column and pushes the card's actions out of the layout. */
.admin-content[b-vwyu6as9wh]  .admin-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--qq-admin-ink);
}

/* pass/fail criteria list (verified-buyer standing) */
.admin-content[b-vwyu6as9wh]  .admin-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
}

.admin-content[b-vwyu6as9wh]  .admin-checklist li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.35rem;
    color: var(--qq-admin-ink);
}

.admin-content[b-vwyu6as9wh]  .admin-checklist li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.admin-content[b-vwyu6as9wh]  .admin-checklist li.ok::before {
    content: "\2713";
    color: var(--qq-ok-fg);
}

.admin-content[b-vwyu6as9wh]  .admin-checklist li.bad::before {
    content: "\2717";
    color: var(--qq-bad-fg);
}

/* --- Warm-editorial overrides of the shared qq-* kit ------------------------ */

.admin-content[b-vwyu6as9wh]  .qq-card {
    background: var(--qq-admin-card);
    border-color: var(--qq-admin-border);
    border-radius: 16px;
}

.admin-content[b-vwyu6as9wh]  .qq-row {
    padding: 0.9rem 1.35rem;
}

.admin-content[b-vwyu6as9wh]  .qq-row + .qq-row {
    border-top-color: var(--qq-admin-divider);
}

/* Was #fbfaf5 — a near-white that stayed put in dark mode while the row's text
   flipped to light admin ink, so hovering a row dropped the store name to
   1.17:1 and erased it. Mixing ink into the card tints in whichever direction
   the theme runs. 4% rather than a larger share because the mix moves the
   background toward the text in both themes, so a heavier tint costs contrast:
   this keeps the admin-mono sub-line as close as possible to what it reads on
   an unhovered row. */
.admin-content[b-vwyu6as9wh]  .qq-row:hover {
    background: color-mix(in srgb, var(--qq-admin-ink) 4%, var(--qq-admin-card));
}

/* QuickGrid pads short pages with placeholder rows (every cell empty) so the
   table height stays constant across pages; with the v3 hairline row rules
   they read as blank entries, so hide them. */
.admin-content[b-vwyu6as9wh]  .qq-grid tbody tr:not(:has(td:not(:empty))) {
    display: none;
}

.admin-content[b-vwyu6as9wh]  .qq-input,
.admin-content[b-vwyu6as9wh]  .qq-select {
    background: var(--qq-admin-input);
    border-color: var(--qq-admin-border);
    border-radius: 10px;
    color: var(--qq-admin-ink);
}

.admin-content[b-vwyu6as9wh]  .qq-microlabel {
    color: var(--qq-admin-muted);
}

.admin-content[b-vwyu6as9wh]  .qq-btn {
    background: var(--qq-admin-ink);
    color: var(--qq-admin-btn-fg);
    border-radius: 10px;
}

.admin-content[b-vwyu6as9wh]  .qq-btn:hover {
    background: var(--qq-admin-btn-hover);
    color: var(--qq-admin-btn-fg);
    filter: none;
}

.admin-content[b-vwyu6as9wh]  .qq-btn-outline {
    border-radius: 10px;
}

.admin-content[b-vwyu6as9wh]  .qq-btn-outline:hover {
    border-color: var(--qq-admin-faint);
}

/* status tags: the v3 signature — Space Mono, uppercase, tint background */
.admin-content[b-vwyu6as9wh]  [class*="qq-pill"] {
    font-family: var(--qq-admin-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
}

.admin-content[b-vwyu6as9wh]  .qq-pill-ok    { background: var(--qq-ok-bg); color: var(--qq-ok-fg); }
.admin-content[b-vwyu6as9wh]  .qq-pill-warn  { background: var(--qq-warn-bg); color: var(--qq-warn-fg); }
.admin-content[b-vwyu6as9wh]  .qq-pill-info  { background: var(--qq-info-bg); color: var(--qq-info-fg); }
.admin-content[b-vwyu6as9wh]  .qq-pill-bad   { background: var(--qq-bad-bg); color: var(--qq-bad-fg); }
.admin-content[b-vwyu6as9wh]  .qq-pill-mute  { background: var(--qq-mute-bg); color: var(--qq-mute-fg); }
.admin-content[b-vwyu6as9wh]  .qq-pill-brass { background: var(--qq-brass-tint); color: var(--qq-brass-deep); }
.admin-content[b-vwyu6as9wh]  .qq-pill-outline { background: transparent; border: 1px solid var(--qq-admin-border); color: var(--qq-admin-muted); }

/* live-status tags carry a leading dot; role tags don't (add .qq-pill-dot) */
.admin-content[b-vwyu6as9wh]  .qq-pill-dot::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 0.35rem;
    vertical-align: 1px;
}

.admin-content[b-vwyu6as9wh]  .qq-btn-danger {
    border-color: color-mix(in srgb, var(--qq-bad-fg) 35%, transparent);
    color: var(--qq-bad-fg);
    border-radius: 10px;
}

/* solid approve (verification) — green in both themes, so its text stays
   ivory even where .qq-btn text flips dark */
.admin-content[b-vwyu6as9wh]  .admin-approve {
    background: #3f7a52;
    color: #fbf8f1;
}

.admin-content[b-vwyu6as9wh]  .admin-approve:hover:not(:disabled) {
    background: #356b46;
    color: #fbf8f1;
}

.admin-content[b-vwyu6as9wh]  .admin-approve:disabled {
    background: var(--qq-mute-bg);
    color: var(--qq-mute-fg);
    cursor: default;
}

/* positive outline (reactivate / unlock / unhide) */
.admin-content[b-vwyu6as9wh]  .qq-btn-good {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--qq-ok-fg) 40%, transparent);
    color: var(--qq-ok-fg);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
}

.admin-content[b-vwyu6as9wh]  .qq-btn-good:hover {
    border-color: var(--qq-ok-fg);
}

/* avatars go squircle in the admin */
.admin-content[b-vwyu6as9wh]  .qq-avatar {
    border-radius: 10px;
}

/* Narrow screens: sidebar collapses to a top block */
/* Mobile drawer controls are hidden on desktop; the rail is a static sidebar. */
.admin-topbar[b-vwyu6as9wh],
.admin-nav-burger[b-vwyu6as9wh],
.admin-nav-close[b-vwyu6as9wh],
.admin-scrim[b-vwyu6as9wh] {
    display: none;
}

@media (max-width: 900px) {
    /* Dark top bar to match the rail. */
    .admin-topbar[b-vwyu6as9wh] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        position: sticky;
        top: 0;
        z-index: 40;
        height: 56px;
        padding: 0 0.9rem;
        background: var(--qq-admin-bar, #232019);
        color: #fbf8f1;
        border-bottom: 1px solid #332e24;
    }

    .admin-topbar-brand[b-vwyu6as9wh] {
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .admin-nav-burger[b-vwyu6as9wh] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        color: #fbf8f1;
        cursor: pointer;
        padding: 0;
    }

    .admin-nav-burger svg[b-vwyu6as9wh] {
        width: 22px;
        height: 22px;
    }

    /* The rail becomes an off-canvas drawer. */
    .admin-sidebar[b-vwyu6as9wh] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 78%;
        max-width: 320px;
        max-height: none;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    }

    .admin-sidebar.open[b-vwyu6as9wh] {
        transform: translateX(0);
    }

    /* The desktop mini-collapse chevron is a desktop-only affordance. */
    .admin-nav-toggle[b-vwyu6as9wh] {
        display: none;
    }

    .admin-nav-close[b-vwyu6as9wh] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 34px;
        height: 34px;
        border: none;
        background: none;
        font-size: 1.5rem;
        line-height: 1;
        color: #a49b8a;
        cursor: pointer;
    }

    .admin-scrim[b-vwyu6as9wh] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }

    .admin-scrim.open[b-vwyu6as9wh] {
        opacity: 1;
        visibility: visible;
    }
}

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

    #blazor-error-ui .dismiss[b-vwyu6as9wh] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Maintenance band (spec 019). Sits under the topbar on every console page for
   as long as the marketplace is parked, because an admin who forgets it is on
   is exactly the person who needs telling. */

.admin-maintenance-band[b-vwyu6as9wh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    background: var(--qq-admin-accent-tint, #f6e5df);
    border-bottom: 1px solid var(--qq-admin-accent-tint-border, #ecd0c6);
    color: var(--qq-admin-accent-deep, #93381f);
    font-size: 0.85rem;
    padding: 0.7rem 1.2rem;
}

.admin-maintenance-band a[b-vwyu6as9wh] {
    margin-left: auto;
    color: var(--qq-admin-accent-deep, #93381f);
    font-weight: 600;
    text-decoration: underline;
}
/* /Components/Layout/AdminLoginLayout.razor.rz.scp.css */
.admin-login-shell[b-z78cxza280] {
    min-height: 100vh;
    background: var(--qq-admin-bar);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.admin-login-brand[b-z78cxza280] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
    text-decoration: none;
}

.admin-login-brand-name[b-z78cxza280] {
    white-space: nowrap;
}

.admin-login-tag[b-z78cxza280] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--qq-admin-accent);
    /* btn-fg, not #fff: the accent lightens to salmon in dark mode, where a
       white label washed out. */
    color: var(--qq-admin-btn-fg, #fff);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: 0.2rem;
}

.admin-login-main[b-z78cxza280] {
    width: 100%;
    max-width: 26rem;
}
/* /Components/Layout/AdminNavRail.razor.rz.scp.css */
/* The admin rail. Moved here from AdminLayout.razor.css when the rail became
   its own component: scoped CSS follows the markup, so these rules only match
   once they live beside the elements they style.

   ::deep is still needed for the row itself — NavLink renders its own <a>, so
   that element never carries this component's scope id. */

.admin-nav[b-y73vox7ipa] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.1rem 0.7rem;
}

.admin-nav-group[b-y73vox7ipa] {
    font-family: var(--qq-admin-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b6353;
    padding: 0 0.8rem;
    margin: 1.1rem 0 0.3rem;
}

.admin-nav[b-y73vox7ipa]  a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #a49b8a;
    text-decoration: none;
    padding: 0.56rem 0.8rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.admin-nav[b-y73vox7ipa]  .admin-nav-ico {
    display: flex;
    flex-shrink: 0;
    color: #7d7462;
}

.admin-nav[b-y73vox7ipa]  .admin-nav-ico svg {
    width: 17px;
    height: 17px;
}

.admin-nav[b-y73vox7ipa]  .admin-nav-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-nav[b-y73vox7ipa]  a:hover {
    color: #fbf8f1;
    text-decoration: none;
    background: #2c2820;
}

.admin-nav[b-y73vox7ipa]  a.active {
    background: var(--qq-admin-bar-active);
    color: #fbf8f1;
    font-weight: 600;
}

/* Active affordances: 3px terracotta bar on the left edge + a filled 9px
   square marker on the right (the v3 signature). */
.admin-nav[b-y73vox7ipa]  a.active::before {
    content: "";
    position: absolute;
    left: -0.7rem;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--qq-admin-accent);
    border-radius: 0 2px 2px 0;
}

.admin-nav[b-y73vox7ipa]  a.active::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    background: var(--qq-admin-accent);
    border-radius: 2px;
}

.admin-nav[b-y73vox7ipa]  a.active .admin-nav-ico {
    color: var(--qq-admin-accent);
}

/* Count badge (e.g. pending verifications) — sits on the right edge and
   replaces the active square marker when present. */
.admin-nav[b-y73vox7ipa]  .admin-nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--qq-admin-accent);
    color: #fbf8f1;
    font-family: var(--qq-admin-mono);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.22rem 0.42rem;
    border-radius: 99px;
    min-width: 1.25rem;
    text-align: center;
}

.admin-nav[b-y73vox7ipa]  a.active:has(.admin-nav-badge)::after {
    display: none;
}

/* --- Preview mode ---------------------------------------------------------
   The editor draws the rail at 320px in a light page. Only the container
   changes; every row rule above applies unchanged, which is the whole point. */

.admin-nav.is-preview[b-y73vox7ipa] {
    padding: 0.85rem 0.6rem;
    overflow: visible;
    background: var(--qq-admin-bar, #232019);
    border-radius: 14px;
}

/* A row that is a span, not a link. Same box as ::deep a above — repeated
   rather than shared because this element does carry the scope id and that
   one does not, so no single selector can reach both. */
.admin-nav.is-preview .admin-nav-preview-row[b-y73vox7ipa] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #a49b8a;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.84rem;
}

.admin-nav.is-preview .admin-nav-preview-row .admin-nav-ico[b-y73vox7ipa] {
    display: flex;
    flex-shrink: 0;
    color: #7d7462;
}

.admin-nav.is-preview .admin-nav-preview-row .admin-nav-ico svg[b-y73vox7ipa] {
    width: 15px;
    height: 15px;
}

.admin-nav.is-preview .admin-nav-preview-row .admin-nav-text[b-y73vox7ipa] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-nav.is-preview .admin-nav-preview-row.active[b-y73vox7ipa] {
    background: var(--qq-admin-bar-active);
    color: #fbf8f1;
    font-weight: 600;
}

.admin-nav.is-preview .admin-nav-preview-row.active[b-y73vox7ipa]::before {
    content: "";
    position: absolute;
    left: -0.6rem;
    top: 5px;
    bottom: 5px;
    width: 3px;
    background: var(--qq-admin-accent);
    border-radius: 0 2px 2px 0;
}

.admin-nav.is-preview .admin-nav-preview-row.active .admin-nav-ico[b-y73vox7ipa] {
    color: var(--qq-admin-accent);
}

.admin-nav.is-preview .admin-nav-preview-row .admin-nav-badge[b-y73vox7ipa] {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--qq-admin-accent);
    color: #fbf8f1;
    font-family: var(--qq-admin-mono);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 99px;
    text-align: center;
}
/* /Components/Layout/BuyerLayout.razor.rz.scp.css */
.qq-buyer-tabwrap[b-68gf9usuor] {
    margin-bottom: 1.5rem;
}

.qq-buyer-eyebrow[b-68gf9usuor] {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qq-text-faint, #a39a88);
    margin-bottom: 7px;
}

.qq-buyer-scroll[b-68gf9usuor] {
    position: relative;
}

/* Each tab is icon + label (+ optional badge). Base pill look comes from
   the shared .qq-seg; this adds the row layout and per-tab affordances. */
.qq-buyer-tabs[b-68gf9usuor]  a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    color: var(--qq-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.qq-buyer-tabs[b-68gf9usuor]  a:hover {
    color: var(--qq-ink);
}

.qq-buyer-tabs[b-68gf9usuor]  a.active {
    background: var(--qq-card);
    box-shadow: 0 1px 4px rgba(23, 21, 18, 0.12);
    font-weight: 700;
    color: var(--qq-ink);
}

.qq-buyer-tabs[b-68gf9usuor]  a svg {
    width: 16px;
    height: 16px;
    opacity: 0.65;
    flex-shrink: 0;
}

.qq-buyer-tabs[b-68gf9usuor]  a.active svg {
    opacity: 1;
    color: var(--qq-brass, #d9a94e);
}

.qq-buyer-tabs[b-68gf9usuor]  .qq-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--qq-mute-bg, #e3dfd5);
    color: var(--qq-mute-fg, #7a7264);
}

.qq-buyer-tabs[b-68gf9usuor]  a.active .qq-tab-badge {
    background: #f3e7cf;
    color: #9a6b1e;
}

/* Mobile: never wrap — one horizontally-scrolling row with an edge fade. */
@media (max-width: 640px) {
    .qq-buyer-tabs[b-68gf9usuor] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .qq-buyer-tabs[b-68gf9usuor]::-webkit-scrollbar {
        display: none;
    }

    .qq-buyer-tabs[b-68gf9usuor]  a {
        flex-shrink: 0;
    }

    .qq-buyer-scroll[b-68gf9usuor]::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 34px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, var(--qq-shell, #f5f2ec));
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-evq8cjg06h] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

.qq-footer[b-evq8cjg06h] {
    border-top: 1px solid var(--qq-border);
    color: var(--qq-text-muted);
    font-size: 0.85rem;
    background: var(--qq-paper);
}

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

    #blazor-error-ui .dismiss[b-evq8cjg06h] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.qq-navbar[b-34n2qd5jki] {
    background-color: var(--qq-paper);
    border-bottom: 1px solid var(--qq-border);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    /* Bootstrap paints nav links from its own navbar variables (derived from a
       near-black emphasis colour that ignores data-theme) — feed them our
       tokens so links stay visible in dark mode, active pill included. */
    --bs-navbar-color: var(--qq-text-muted);
    --bs-navbar-hover-color: var(--qq-text);
    --bs-navbar-active-color: var(--qq-text);
    --bs-navbar-brand-color: var(--qq-text);
    --bs-navbar-brand-hover-color: var(--qq-text);
}

.qq-nav-inner[b-34n2qd5jki] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Desktop stays a single no-wrap row; the collapse grows and the actions
       sit at the far right. Wrapping is enabled only below the breakpoint. */
    flex-wrap: nowrap;
}

/* Mobile: let the Bootstrap collapse wrap to its own full-width line below the
   bar (matches Bootstrap's default .navbar flex-wrap). */
@media (max-width: 767.98px) {
    .qq-nav-inner[b-34n2qd5jki] {
        flex-wrap: wrap;
    }
}

.qq-wordmark[b-34n2qd5jki] {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--qq-ink);
}

.navbar-toggler[b-34n2qd5jki] {
    border-color: var(--qq-border);
    padding: 0.3rem 0.55rem;
}

[b-34n2qd5jki] .nav-link {
    color: var(--qq-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
}

[b-34n2qd5jki] .nav-link:hover {
    color: var(--qq-ink);
}

[b-34n2qd5jki] .nav-link.active {
    color: var(--qq-ink);
    font-weight: 600;
}

/* Left links get a subtle active chip. */
.qq-nav-links[b-34n2qd5jki]  .nav-link {
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
}

.qq-nav-links[b-34n2qd5jki]  .nav-link.active {
    background: var(--qq-mute-bg);
}

/* Right cluster — cart, bell, account, language, burger. Always in the bar. */
.qq-nav-actions[b-34n2qd5jki] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Account pill (desktop dropdown trigger). */
.qq-account-pill[b-34n2qd5jki] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--qq-border);
    /* Token, not #fff: dark mode flips the ink text light, which was
       illegible on a hardcoded white pill. */
    background: var(--qq-card, #fff);
    border-radius: 999px;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    cursor: pointer;
    color: var(--qq-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

.qq-account-pill:hover[b-34n2qd5jki] {
    background: var(--qq-shell, #f5f2ec);
}

.qq-account-avatar[b-34n2qd5jki] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #41597a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.qq-account-name[b-34n2qd5jki] {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Account dropdown card. */
[b-34n2qd5jki] .qq-account-menu {
    border: 1px solid var(--qq-border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(23, 21, 18, 0.16);
    padding: 0.4rem;
    min-width: 12rem;
}

[b-34n2qd5jki] .qq-account-menu .dropdown-item {
    border-radius: 9px;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
}

[b-34n2qd5jki] .qq-account-menu .qq-account-logout {
    color: var(--qq-bad-fg, #b2483c);
    width: 100%;
    text-align: left;
    border: none;
    background: none;
}

/* Only one of the desktop / mobile account treatments shows per breakpoint. */
@media (max-width: 767.98px) {
    .qq-nav-desktop[b-34n2qd5jki] {
        display: none !important;
    }
}

/* ---- Mobile drawer account block (inside the Bootstrap collapse) ---- */
.qq-nav-mobileaccount[b-34n2qd5jki] {
    border-top: 1px solid var(--qq-border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.qq-nav-macct-head[b-34n2qd5jki] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.qq-nav-macct-head .qq-account-name[b-34n2qd5jki] {
    font-weight: 700;
    max-width: none;
}

.qq-nav-macct-grid[b-34n2qd5jki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.qq-nav-macct-grid a[b-34n2qd5jki] {
    background: var(--qq-shell, #f5f2ec);
    border: 1px solid var(--qq-border);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: var(--qq-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

.qq-nav-macct-foot[b-34n2qd5jki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.qq-nav-macct-foot a[b-34n2qd5jki] {
    text-decoration: none;
    color: var(--qq-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

.qq-nav-logout[b-34n2qd5jki] {
    border: none;
    background: none;
    color: var(--qq-bad-fg, #b2483c);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
}

.qq-nav-macct-signedout[b-34n2qd5jki] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* On desktop, the collapse grows so the actions cluster sits at the far right;
   the mobile account block and the burger are hidden by Bootstrap's d-* / expand. */
@media (min-width: 768px) {
    .qq-nav-collapse[b-34n2qd5jki] {
        flex-grow: 1;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l116xt1fkr],
.components-reconnect-repeated-attempt-visible[b-l116xt1fkr],
.components-reconnect-failed-visible[b-l116xt1fkr],
.components-pause-visible[b-l116xt1fkr],
.components-resume-failed-visible[b-l116xt1fkr],
.components-rejoining-animation[b-l116xt1fkr] {
    display: none;
}

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


#components-reconnect-modal[b-l116xt1fkr] {
    background-color: var(--qq-paper, #faf8f4);
    color: var(--qq-ink, #171512);
    width: 21rem;
    margin: 20vh auto;
    padding: 2rem 1.9rem;
    border: 1px solid var(--qq-border, #e7e2d8);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(23, 21, 18, 0.32);
    font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-l116xt1fkr 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-l116xt1fkr]::backdrop {
    background-color: rgba(23, 21, 18, 0.42);
    animation: components-reconnect-modal-fadeInOpacity-b-l116xt1fkr 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

/* Each state shows a single message line, so style them uniformly as the heading. */
#components-reconnect-modal p[b-l116xt1fkr] {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--qq-ink, #171512);
    line-height: 1.5;
}

/* The countdown seconds read as a brass highlight. */
#components-reconnect-modal #components-seconds-to-next-attempt[b-l116xt1fkr] {
    font-weight: 700;
    color: var(--qq-brass, #d9a94e);
}

#components-reconnect-modal button[b-l116xt1fkr] {
    border: 0;
    background-color: var(--qq-ink, #171512);
    color: var(--qq-paper, #faf8f4);
    padding: 0.65rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    /* Ink shifted toward paper, not a fixed dark hover: the button inverts to
       light-on-dark in dark mode, where a hardcoded #3a352c hover swallowed
       the (dark) label. */
    #components-reconnect-modal button:hover[b-l116xt1fkr] {
        background-color: color-mix(in srgb, var(--qq-ink, #171512) 85%, var(--qq-paper, #faf8f4));
    }

    #components-reconnect-modal button:active[b-l116xt1fkr] {
        background-color: color-mix(in srgb, var(--qq-ink, #171512) 85%, var(--qq-paper, #faf8f4));
    }

    #components-reconnect-modal button:focus-visible[b-l116xt1fkr] {
        outline: 2px solid var(--qq-gold-bright, #d9a94e);
        outline-offset: 2px;
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SellerLayout.razor.rz.scp.css */
.seller-shell[b-i1wf4m7uow] {
    display: flex;
    min-height: 100vh;
    background: var(--qq-shell);
}

.seller-sidebar[b-i1wf4m7uow] {
    width: 248px;
    flex-shrink: 0;
    background: var(--qq-paper);
    border-right: 1px solid var(--qq-border);
    color: var(--qq-text-body);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.85rem;
    gap: 1.1rem;
}

.seller-brand[b-i1wf4m7uow] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--qq-ink);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
}

.seller-brand:hover[b-i1wf4m7uow] {
    color: var(--qq-ink);
    text-decoration: none;
}

.seller-store[b-i1wf4m7uow] {
    background: var(--qq-card);
    border: 1px solid var(--qq-border);
    border-radius: 14px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.seller-store-meta[b-i1wf4m7uow] {
    min-width: 0;
}

.seller-store-name[b-i1wf4m7uow] {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--qq-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seller-store-link[b-i1wf4m7uow] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--qq-brass);
    text-decoration: none;
}

.seller-nav[b-i1wf4m7uow] {
    display: flex;
    flex-direction: column;
    gap: 0.13rem;
}

.seller-nav[b-i1wf4m7uow]  a {
    color: var(--qq-text-body);
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.91rem;
}

.seller-nav[b-i1wf4m7uow]  a:hover {
    background: var(--qq-brass-tint);
    color: var(--qq-brass-deep);
}

.seller-nav[b-i1wf4m7uow]  a.active {
    background: var(--qq-ink);
    color: var(--qq-paper);
    font-weight: 600;
}

.seller-nav-section[b-i1wf4m7uow] {
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--qq-text-faint);
    padding: 0.85rem 0.75rem 0.25rem;
}

.seller-main[b-i1wf4m7uow] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.seller-topbar[b-i1wf4m7uow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--qq-paper);
    border-bottom: 1px solid var(--qq-border);
    padding: 0.65rem 1.75rem;
}

.seller-topbar-title[b-i1wf4m7uow] {
    font-weight: 700;
    color: var(--qq-text-faint);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.seller-topbar-actions[b-i1wf4m7uow] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* The signed-in account: a ghost-pill button so it clearly reads as a link
   into account settings, not plain text. */
.seller-topbar-link[b-i1wf4m7uow] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--qq-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--qq-border);
    background: var(--qq-card);
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.seller-topbar-link svg[b-i1wf4m7uow] {
    width: 15px;
    height: 15px;
    color: var(--qq-text-muted);
    flex-shrink: 0;
}

.seller-topbar-link:hover[b-i1wf4m7uow] {
    background: var(--qq-brass-tint);
    border-color: var(--qq-brass-soft);
    color: var(--qq-brass-deep);
    text-decoration: none;
}

.seller-topbar-link:hover svg[b-i1wf4m7uow] {
    color: var(--qq-brass-deep);
}

.seller-topbar-link:focus-visible[b-i1wf4m7uow] {
    outline: 2px solid var(--qq-gold-bright);
    outline-offset: 2px;
}

.seller-content[b-i1wf4m7uow] {
    padding: 2rem 1.75rem;
    max-width: 1150px;
    width: 100%;
}

/* Drawer controls are desktop-hidden; the sidebar is a static rail there. */
.seller-nav-burger[b-i1wf4m7uow],
.seller-nav-close[b-i1wf4m7uow],
.seller-sidebar-head .seller-nav-close[b-i1wf4m7uow],
.seller-scrim[b-i1wf4m7uow],
.seller-drawer-foot[b-i1wf4m7uow] {
    display: none;
}

.seller-sidebar-head[b-i1wf4m7uow] {
    display: flex;
    align-items: center;
}

/* Desktop keeps language / account / logout in the topbar. */
.seller-topbar-desktop[b-i1wf4m7uow] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

@media (max-width: 820px) {
    /* The sidebar becomes an off-canvas drawer; main takes the full width. */
    .seller-topbar[b-i1wf4m7uow] {
        position: sticky;
        top: 0;
        z-index: 40;
        gap: 0.5rem;
    }

    .seller-nav-burger[b-i1wf4m7uow] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        color: var(--qq-ink);
        cursor: pointer;
        padding: 0;
        margin-right: 0.15rem;
    }

    .seller-nav-burger svg[b-i1wf4m7uow] {
        width: 22px;
        height: 22px;
    }

    .seller-sidebar[b-i1wf4m7uow] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 78%;
        max-width: 320px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: 0 0 40px rgba(23, 21, 18, 0.22);
    }

    .seller-sidebar.open[b-i1wf4m7uow] {
        transform: translateX(0);
    }

    .seller-sidebar-head .seller-nav-close[b-i1wf4m7uow] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 34px;
        height: 34px;
        border: none;
        background: none;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--qq-text-muted);
        cursor: pointer;
    }

    .seller-scrim[b-i1wf4m7uow] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }

    .seller-scrim.open[b-i1wf4m7uow] {
        opacity: 1;
        visibility: visible;
    }

    /* On a phone the topbar only holds the burger, title and bell — the wide
       language / account / logout controls move to the foot of the drawer. */
    .seller-topbar[b-i1wf4m7uow] {
        gap: 0.5rem;
    }

    .seller-topbar-desktop[b-i1wf4m7uow] {
        display: none;
    }

    .seller-topbar-title[b-i1wf4m7uow] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .seller-drawer-foot[b-i1wf4m7uow] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: auto;
        padding-top: 1rem;
        border-top: 1px solid var(--qq-border);
    }

    .seller-drawer-account[b-i1wf4m7uow] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--qq-ink);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .seller-drawer-account svg[b-i1wf4m7uow] {
        width: 16px;
        height: 16px;
        color: var(--qq-text-muted);
        flex-shrink: 0;
    }

    .seller-drawer-foot form[b-i1wf4m7uow] {
        margin: 0;
    }

    .seller-drawer-foot .qq-btn-outline[b-i1wf4m7uow] {
        width: 100%;
    }
}

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

    #blazor-error-ui .dismiss[b-i1wf4m7uow] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Shared/MessageThread.razor.rz.scp.css */
/* Emoji palette for the shared composer. The thread's own layout (qq-msg-*)
   stays in app.css where the thread pages share it; this file styles only what
   this component added. */

.qq-msg-emoji[b-irxsij6me6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr));
    gap: 2px;
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--qq-border);
    max-height: 9.5rem;
    overflow-y: auto;
    background: var(--qq-bg-soft, var(--qq-card, #fff));
}

.qq-msg-emoji button[b-irxsij6me6] {
    font-size: 1.15rem;
    line-height: 1;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 0.3rem 0;
    cursor: pointer;
}

.qq-msg-emoji button:hover[b-irxsij6me6],
.qq-msg-emoji button:focus-visible[b-irxsij6me6] {
    background: var(--qq-accent-soft, rgba(0, 0, 0, 0.06));
}

.qq-msg-emoji-toggle[b-irxsij6me6] {
    align-self: flex-end;
    background: none;
    border: 1px solid var(--qq-border);
    border-radius: 10px;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.45rem 0.55rem;
    cursor: pointer;
}

.qq-msg-emoji-toggle[aria-expanded="true"][b-irxsij6me6] {
    background: var(--qq-accent-soft, rgba(0, 0, 0, 0.06));
}
/* /Components/Storefront/ConfirmBooking.razor.rz.scp.css */
/* 2a · Confirm your booking. One breakpoint at 768px: the sticky side column
   becomes a pinned bottom bar, the 4-up facts grid becomes label-value rows. */

.qq-cf-head[b-aacec6idav] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.qq-cf-head a[b-aacec6idav] {
    font-size: .85rem;
    font-weight: 600;
}

.qq-cf-title[b-aacec6idav] {
    font-size: 1.7rem;
    letter-spacing: -.03em;
    margin: 0 0 1.25rem;
}

.qq-cf-grid[b-aacec6idav] {
    display: grid;
    grid-template-columns: 1fr 348px;
    gap: 26px;
    align-items: start;
    max-width: 62rem;
}

.qq-cf-main[b-aacec6idav] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.qq-cf-change[b-aacec6idav] {
    font-size: .8rem;
    font-weight: 600;
}

.qq-cf-service[b-aacec6idav] {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--qq-border-soft);
}

.qq-cf-thumb[b-aacec6idav] {
    width: 74px;
    height: 74px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--qq-border);
    flex: none;
}

.qq-cf-thumb-empty[b-aacec6idav] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qq-brass-soft);
    color: var(--qq-text-faint);
}

.qq-cf-service-name[b-aacec6idav] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.qq-cf-service-sub[b-aacec6idav] {
    font-size: .85rem;
    color: var(--qq-text-muted);
    margin-top: 5px;
}

/* The hairlines between the four facts are the 1px grid gap over the border colour. */
.qq-cf-facts[b-aacec6idav] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--qq-border-soft);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 16px;
}

.qq-cf-fact[b-aacec6idav] {
    background: var(--qq-card);
    padding: 13px 14px;
    min-width: 0;
}

.qq-cf-fact-label[b-aacec6idav] {
    font-family: var(--qq-admin-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--qq-text-faint);
    font-weight: 700;
}

.qq-cf-fact-value[b-aacec6idav] {
    font-size: .92rem;
    font-weight: 700;
    margin-top: 5px;
}

.qq-cf-fact-sub[b-aacec6idav] {
    font-size: .73rem;
    color: var(--qq-text-faint);
    margin-top: 2px;
}

.qq-cf-client[b-aacec6idav] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.qq-cf-avatar[b-aacec6idav] {
    width: 42px;
    height: 42px;
    border-radius: 99px;
    background: var(--qq-brass-tint);
    color: var(--qq-brass-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex: none;
}

.qq-cf-client-who[b-aacec6idav] {
    min-width: 0;
}

.qq-cf-client-name[b-aacec6idav] {
    font-size: .95rem;
    font-weight: 700;
}

.qq-cf-client-mail[b-aacec6idav] {
    font-size: .8rem;
    color: var(--qq-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Payment method radio cards: the whole card is the hit target; the native
   radio stays for keyboard and screen-reader users. */
.qq-cf-methods[b-aacec6idav] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.qq-cf-method[b-aacec6idav] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--qq-card);
    border: 1.5px solid var(--qq-border);
    border-radius: 14px;
    padding: 13px 14px;
    cursor: pointer;
    min-height: 44px;
}

.qq-cf-method.on[b-aacec6idav] {
    border-color: var(--qq-brass);
    background: var(--qq-brass-soft);
}

.qq-cf-method input[b-aacec6idav] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.qq-cf-method-dot[b-aacec6idav] {
    width: 19px;
    height: 19px;
    border-radius: 99px;
    border: 2px solid var(--qq-track-off);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 1px;
}

.qq-cf-method.on .qq-cf-method-dot[b-aacec6idav] {
    border-color: var(--qq-brass);
}

.qq-cf-method.on .qq-cf-method-dot[b-aacec6idav]::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--qq-brass);
}

.qq-cf-method:focus-within[b-aacec6idav] {
    outline: 2px solid var(--qq-brass);
    outline-offset: 2px;
}

.qq-cf-method-text[b-aacec6idav] {
    min-width: 0;
}

.qq-cf-method-label[b-aacec6idav] {
    display: block;
    font-size: .85rem;
    font-weight: 700;
}

.qq-cf-method-hint[b-aacec6idav] {
    display: block;
    font-size: .73rem;
    color: var(--qq-text-muted);
    line-height: 1.45;
    margin-top: 3px;
}

/* Single-option notes (green pay-on-site / amber prepay). */
.qq-cf-note[b-aacec6idav] {
    display: flex;
    gap: 12px;
    border-radius: 16px;
    padding: 16px 18px;
}

.qq-cf-note-ok[b-aacec6idav] {
    background: var(--qq-ok-bg);
    color: var(--qq-ok-fg);
}

.qq-cf-note-warn[b-aacec6idav] {
    background: var(--qq-warn-bg);
    color: var(--qq-warn-fg);
}

.qq-cf-note svg[b-aacec6idav] {
    flex: none;
    margin-top: 1px;
}

.qq-cf-note-title[b-aacec6idav] {
    font-size: .92rem;
    font-weight: 700;
}

.qq-cf-note-text[b-aacec6idav] {
    font-size: .8rem;
    line-height: 1.5;
    margin-top: 3px;
}

/* Cancellation policy card — same surface on 2a, 2b and the emails. */
.qq-cf-policy[b-aacec6idav] {
    background: var(--qq-brass-soft);
    border: 1px solid var(--qq-border);
    border-radius: 16px;
    padding: 18px;
}

.qq-cf-policy-head[b-aacec6idav] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--qq-brass-deep);
    font-size: .92rem;
    font-weight: 700;
}

.qq-cf-policy-text[b-aacec6idav] {
    font-size: .8rem;
    color: var(--qq-text-body);
    line-height: 1.6;
}

/* Sticky side column (desktop). */
.qq-cf-side[b-aacec6idav] {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qq-cf-lines[b-aacec6idav] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qq-cf-line[b-aacec6idav] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: .85rem;
    color: var(--qq-text-muted);
}

.qq-cf-line-total[b-aacec6idav] {
    padding-top: 11px;
    margin-top: 2px;
    border-top: 1px solid var(--qq-border-soft);
    color: var(--qq-text);
    font-weight: 700;
    font-size: .95rem;
}

.qq-mono[b-aacec6idav] {
    font-family: var(--qq-admin-mono);
    font-variant-numeric: tabular-nums;
}

.qq-cf-amount[b-aacec6idav] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--qq-brass-deep);
    line-height: 1;
}

.qq-cf-due-note[b-aacec6idav] {
    font-size: .73rem;
    color: var(--qq-text-faint);
    line-height: 1.5;
}

.qq-cf-confirm[b-aacec6idav] {
    height: 52px;
    border-radius: 99px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.qq-cf-spinner[b-aacec6idav] {
    width: 15px;
    height: 15px;
    border-radius: 99px;
    border: 2px solid rgba(250, 248, 244, .35);
    border-top-color: #faf8f4;
    display: inline-block;
    animation: qq-cf-spin-b-aacec6idav .8s linear infinite;
}

@keyframes qq-cf-spin-b-aacec6idav {
    to { transform: rotate(360deg); }
}

.qq-cf-terms[b-aacec6idav] {
    font-size: .73rem;
    color: var(--qq-text-faint);
    line-height: 1.5;
    text-align: center;
    margin-top: 11px;
}

.qq-cf-held[b-aacec6idav] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--qq-mute-bg);
    border: 1px solid var(--qq-border);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--qq-text-body);
    font-size: .73rem;
    line-height: 1.45;
}

.qq-cf-held svg[b-aacec6idav] {
    flex: none;
    color: var(--qq-text-faint);
}

/* Pinned mobile bar — hidden on desktop, fixed to the bottom under 768px. */
.qq-cf-pinned[b-aacec6idav] {
    display: none;
}

@media (max-width: 767.98px) {
    .qq-cf-grid[b-aacec6idav] {
        grid-template-columns: 1fr;
        /* Room for the pinned bar so the last card is never covered. */
        padding-bottom: 132px;
    }

    .qq-cf-side[b-aacec6idav] {
        display: none;
    }

    .qq-cf-facts[b-aacec6idav] {
        grid-template-columns: 1fr;
        gap: 0;
        background: transparent;
        border-radius: 0;
    }

    .qq-cf-fact[b-aacec6idav] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 8px 0;
        background: transparent;
        border-bottom: 1px solid var(--qq-border-soft);
    }

    .qq-cf-fact:last-child[b-aacec6idav] {
        border-bottom: 0;
    }

    .qq-cf-fact-label[b-aacec6idav] {
        flex: none;
    }

    .qq-cf-fact-value[b-aacec6idav] {
        margin-top: 0;
        margin-left: auto;
        text-align: right;
    }

    .qq-cf-fact-sub[b-aacec6idav] {
        margin-top: 0;
        flex: none;
    }

    .qq-cf-methods[b-aacec6idav] {
        grid-template-columns: 1fr;
    }

    .qq-cf-pinned[b-aacec6idav] {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        background: var(--qq-paper);
        border-top: 1px solid var(--qq-border-soft);
        box-shadow: 0 -6px 18px rgba(23, 21, 18, .05);
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        z-index: 1030;
    }

    .qq-cf-pinned-due[b-aacec6idav] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 9px;
        font-size: .8rem;
        color: var(--qq-text-muted);
    }

    .qq-cf-pinned-due .qq-mono[b-aacec6idav] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--qq-text);
    }

    .qq-cf-pinned .qq-cf-confirm[b-aacec6idav] {
        margin-top: 0;
    }
}