/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-dava87e4lj] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--spin-text);
    font-family: var(--spin-font-ui);
}

.admin-header[b-dava87e4lj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 24px;
    border-bottom: 1px solid var(--spin-border);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-brand[b-dava87e4lj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-logo[b-dava87e4lj] {
    height: 22px;
    width: auto;
    display: block;
}

.admin-brand-label[b-dava87e4lj] {
    font-family: var(--spin-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.admin-account[b-dava87e4lj] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--spin-muted);
}

.admin-account-name[b-dava87e4lj] {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-signout[b-dava87e4lj] {
    margin: 0;
}

.admin-signout-button[b-dava87e4lj] {
    font: inherit;
    color: var(--spin-primary-text);
    background: none;
    border: 1px solid var(--spin-border);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
}

.admin-signout-button:hover[b-dava87e4lj] {
    border-color: var(--spin-primary-text);
}

.admin-main[b-dava87e4lj] {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* ::deep, because the page components rendered into @Body carry their own scope id.
   Keeping these here rather than in a shared stylesheet is what stops admin styling
   from reaching the public pages. */

.admin-main[b-dava87e4lj]  .admin-title {
    font-family: var(--spin-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}

.admin-main[b-dava87e4lj]  .admin-warning {
    background: #FFF8E6;
    border: 1px solid #F0C34E;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.admin-main[b-dava87e4lj]  .admin-card {
    background: #fff;
    border: 1px solid var(--spin-border);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 0 0 20px;
    box-shadow: var(--spin-shadow-card);
}

.admin-main[b-dava87e4lj]  .admin-card-title {
    font-family: var(--spin-font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 14px;
}

.admin-main[b-dava87e4lj]  .admin-facts {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 8px 20px;
    margin: 0;
    font-size: 0.9rem;
}

.admin-main[b-dava87e4lj]  .admin-facts dt {
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-main[b-dava87e4lj]  .admin-note {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-note:last-child {
    margin-bottom: 0;
}

.admin-main[b-dava87e4lj]  .admin-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-button {
    display: inline-block;
    font: inherit;
    font-size: 0.9rem;
    color: #fff;
    background: var(--spin-primary);
    border: none;
    border-radius: 6px;
    padding: 9px 18px;
    cursor: pointer;
    text-decoration: none;
    /* Labels are two words at most, and a button that breaks mid-label ("Copy / link")
       in a squeezed table column reads as broken rather than tight. */
    white-space: nowrap;
}

.admin-main[b-dava87e4lj]  .admin-signout {
    margin: 0;
}

@media (max-width: 560px) {
    .admin-main[b-dava87e4lj]  .admin-facts {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .admin-main[b-dava87e4lj]  .admin-facts dd {
        margin-bottom: 10px;
    }
}

.admin-tabs[b-dava87e4lj] {
    display: flex;
    gap: 4px;
    padding: 0 24px;
    border-bottom: 1px solid var(--spin-border);
    background: #fff;
}

.admin-tab[b-dava87e4lj] {
    padding: 11px 16px;
    font-size: 0.9rem;
    color: var(--spin-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.admin-tab:hover[b-dava87e4lj] {
    color: var(--spin-text);
}

.admin-tab-active[b-dava87e4lj] {
    color: var(--spin-primary-text);
    border-bottom-color: var(--spin-primary);
    font-weight: 600;
}

.admin-main[b-dava87e4lj]  .admin-filters {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--spin-border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.admin-main[b-dava87e4lj]  .admin-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-main[b-dava87e4lj]  .admin-filter span {
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-filter select {
    font: inherit;
    padding: 5px 8px;
    border: 1px solid var(--spin-input-border);
    border-radius: 6px;
    background: #fff;
}

.admin-main[b-dava87e4lj]  .admin-filter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.admin-main[b-dava87e4lj]  .admin-filter-count {
    margin-left: auto;
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--spin-border);
    border-radius: 8px;
    font-size: 0.9rem;
    overflow: hidden;
}

.admin-main[b-dava87e4lj]  .admin-table th {
    text-align: left;
    font-weight: 600;
    color: var(--spin-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--spin-border);
}

.admin-main[b-dava87e4lj]  .admin-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--spin-border-light);
}

.admin-main[b-dava87e4lj]  .admin-table tr:last-child td {
    border-bottom: none;
}

.admin-main[b-dava87e4lj]  .admin-col-check {
    width: 56px;
    text-align: center;
}

/* Fulfilled rows stay legible but visibly settled — they are only on screen when
   "show already fulfilled" is on, and they should not read as outstanding work. */
.admin-main[b-dava87e4lj]  .admin-row-done td {
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-row-note td {
    padding-top: 0;
    font-size: 0.8rem;
    color: var(--spin-muted);
    border-bottom: 1px solid var(--spin-border-light);
}

.admin-main[b-dava87e4lj]  .admin-paging {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-page-btn {
    font: inherit;
    padding: 6px 14px;
    border: 1px solid var(--spin-input-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.admin-main[b-dava87e4lj]  .admin-page-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.admin-main[b-dava87e4lj]  .admin-quote {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 3px solid var(--spin-primary);
    background: var(--spin-bg);
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}


/* Neutral sibling of .admin-badge, for marking a row rather than warning about it —
   deliberately not the same amber, which is reserved for "this is demo data". */
.admin-main[b-dava87e4lj]  .admin-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--spin-border-light);
    color: var(--spin-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* A full spin URL in a table cell. Without this the GUID is one unbreakable token and
   the column pushes the table wider than the page. */
.admin-main[b-dava87e4lj]  .admin-demo-url {
    overflow-wrap: anywhere;
    font-size: 0.8rem;
}

/* Load-bearing, not decorative: this chip is the only thing separating a row nobody is owed
   from a prize somebody is, once such rows are on screen at all. Hence a tinted pill with a
   border rather than bare text — it has to survive being skimmed in a table of names.

   Two colours, because "not real" is not the useful distinction: a demo is something somebody
   set up deliberately, a test row leaked in from another environment, and only one of those is
   worth chasing. */
.admin-main[b-dava87e4lj]  .admin-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* Amber: intentional, curated — the demo links exist to be used. */
.admin-main[b-dava87e4lj]  .admin-badge-demo {
    background: #FDF3D7;
    border-color: #E3BC55;
    color: #6B4E0A;
}

/* Slate: nobody meant this to be here. Deliberately cooler and quieter than the demo chip,
   so the two are told apart at a glance rather than read. */
.admin-main[b-dava87e4lj]  .admin-badge-test {
    background: #EDF0F6;
    border-color: #C0C9D9;
    color: #46526A;
}

.admin-main[b-dava87e4lj]  .admin-testimonial-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-main[b-dava87e4lj]  .admin-testimonial-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
}

.admin-main[b-dava87e4lj]  .admin-muted {
    color: var(--spin-muted);
    font-size: 0.85rem;
}


.admin-main[b-dava87e4lj]  .admin-textarea {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 10px 12px;
    border: 1px solid var(--spin-input-border);
    border-radius: 6px;
    resize: vertical;
}

.admin-main[b-dava87e4lj]  .admin-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.admin-main[b-dava87e4lj]  .admin-original {
    margin: 0 0 4px;
    font-size: 0.85rem;
}

.admin-main[b-dava87e4lj]  .admin-original summary {
    cursor: pointer;
    color: var(--spin-muted);
    padding: 4px 0;
}

.admin-main[b-dava87e4lj]  .admin-quote-original {
    border-left-color: var(--spin-faint);
    color: var(--spin-muted);
    margin-top: 8px;
}

/* The only destructive control in the app. Coloured so it doesn't sit among the ordinary
   buttons looking like one of them. */
.admin-main[b-dava87e4lj]  .admin-card-danger {
    border-color: #F3C2C2;
}

.admin-main[b-dava87e4lj]  .admin-btn-danger {
    color: #B3261E;
    border-color: #E6A9A5;
}

.admin-main[b-dava87e4lj]  button.admin-button.admin-btn-danger {
    background: #B3261E;
    color: #fff;
    border: none;
}

.admin-main[b-dava87e4lj]  .admin-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admin-main[b-dava87e4lj]  .admin-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-main[b-dava87e4lj]  .admin-stat-value {
    font-family: var(--spin-font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.admin-main[b-dava87e4lj]  .admin-stat-label {
    font-size: 0.85rem;
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-stat-sub {
    font-size: 0.78rem;
    color: var(--spin-faint);
}

.admin-main[b-dava87e4lj]  .admin-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-main[b-dava87e4lj]  .admin-filter input[type="date"] {
    font: inherit;
    padding: 4px 8px;
    border: 1px solid var(--spin-input-border);
    border-radius: 6px;
    background: #fff;
}

.admin-visually-hidden[b-dava87e4lj] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Link generator form --- */
.admin-main[b-dava87e4lj]  .admin-field {
    margin: 0 0 14px;
}

.admin-main[b-dava87e4lj]  .admin-field-label {
    display: block;
    font-size: 0.8rem;
    color: var(--spin-muted);
    margin: 0 0 5px;
}

.admin-main[b-dava87e4lj]  .admin-field-label code {
    font-size: 0.75rem;
}

.admin-main[b-dava87e4lj]  .admin-input {
    font: inherit;
    font-size: 0.9rem;
    width: 100%;
    max-width: 520px;
    padding: 8px 10px;
    border: 1px solid var(--spin-border);
    border-radius: 6px;
    background: #fff;
}

.admin-main[b-dava87e4lj]  .admin-input:disabled {
    background: var(--spin-border-light);
    color: var(--spin-muted);
}

.admin-main[b-dava87e4lj]  .admin-field-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.admin-main[b-dava87e4lj]  .admin-field-row .admin-field {
    flex: 1 1 220px;
}

.admin-main[b-dava87e4lj]  .admin-links-result {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0 8px;
}

.admin-main[b-dava87e4lj]  .admin-links-url {
    max-width: none;
    flex: 1;
    font-size: 0.8rem;
}

/* --- Export tab --- */
.admin-main[b-dava87e4lj]  .admin-export-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 14px;
    /* A reorderable list wants to read as a column; full-width rows read as a table. */
    max-width: 380px;
}

.admin-main[b-dava87e4lj]  .admin-export-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid var(--spin-border);
    border-radius: 6px;
}

.admin-main[b-dava87e4lj]  .admin-export-row-dragging {
    opacity: 0.4;
    border-style: dashed;
}

/* The grab affordance lives on the handle alone — the row itself is not draggable, so a
   jittery click on its checkbox stays a click. */
.admin-main[b-dava87e4lj]  .admin-export-handle {
    color: var(--spin-muted);
    letter-spacing: -3px;
    user-select: none;
    cursor: grab;
}

.admin-main[b-dava87e4lj]  .admin-export-move {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.admin-main[b-dava87e4lj]  .admin-export-move-btn {
    font: inherit;
    font-size: 0.7rem;
    line-height: 1;
    padding: 4px 6px;
    color: var(--spin-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.admin-main[b-dava87e4lj]  .admin-export-move-btn:hover:not(:disabled) {
    color: var(--spin-text);
    border-color: var(--spin-border);
}

.admin-main[b-dava87e4lj]  .admin-export-move-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The exact CSV header beside each checkbox, so what the file will say is never a
   surprise. */
.admin-main[b-dava87e4lj]  .admin-export-key {
    font-size: 0.75rem;
    color: var(--spin-muted);
    background: var(--spin-border-light);
    padding: 1px 5px;
    border-radius: 4px;
}

.admin-main[b-dava87e4lj]  .admin-export-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.admin-main[b-dava87e4lj]  .admin-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /Components/Layout/SpinLayout.razor.rz.scp.css */
.spin-shell[b-wfz8ggy9u3] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--spin-font-display);
    color: var(--spin-text);
}

/* Page background layer: flat wash everywhere, brand aurora added on desktop.
   z-index -1 paints it above the canvas but below all in-flow content WITHOUT
   giving any content wrapper a stacking context — overlays (scrim z-40, dialogs
   z-50, confetti z-70, dev bar z-90) must stay in the root stacking context so
   they can cover the sticky header (z-10) and footer. */
.spin-aurora[b-wfz8ggy9u3] {
    position: fixed;
    inset: -100px;
    z-index: -1;
    pointer-events: none;
    background-color: var(--spin-bg);
}

@media (min-width: 768px) {
    .spin-aurora[b-wfz8ggy9u3] {
        filter: blur(80px);
        background-image:
            radial-gradient(circle 450px at 5% 30%, rgba(87, 71, 248, 0.08), transparent 70%),
            radial-gradient(circle 400px at 90% 10%, rgba(0, 186, 241, 0.07), transparent 70%),
            radial-gradient(circle 500px at 50% 85%, rgba(58, 110, 245, 0.06), transparent 70%),
            radial-gradient(circle 350px at 75% 60%, rgba(0, 186, 241, 0.05), transparent 70%),
            radial-gradient(circle 300px at 20% 75%, rgba(87, 71, 248, 0.05), transparent 70%);
    }
}

/* --- Sticky white header: centered logo over a gradient hairline --- */
.spin-header[b-wfz8ggy9u3] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 3rem;
}

.spin-logo[b-wfz8ggy9u3] {
    height: 48px;
    width: auto;
    display: block;
}

.spin-header-rule[b-wfz8ggy9u3] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--spin-border-light);
}

.spin-header-rule-fill[b-wfz8ggy9u3] {
    height: 100%;
    width: 100%;
    background: var(--spin-grad);
}

.spin-main[b-wfz8ggy9u3] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Footer (desktop; hidden on mobile like the prototype) --- */
.spin-footer[b-wfz8ggy9u3] {
    background: #ffffff;
    padding: 20px 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--spin-font-ui);
}

.spin-footer-links[b-wfz8ggy9u3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: #686f7e;
}

.spin-footer-links a[b-wfz8ggy9u3] {
    color: #686f7e;
    text-decoration: none;
}

.spin-footer-links a:hover[b-wfz8ggy9u3] {
    color: #5a6478;
}

.spin-footer-sep[b-wfz8ggy9u3] {
    color: #c1c9d4;
}

/* Required trademark disclosure — same grey as the links, not the faint copyright
   grey, because legally required text has to stay readable. */
.spin-footer-legal[b-wfz8ggy9u3] {
    margin: 0;
    max-width: 700px;
    text-align: center;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: #686f7e;
}

.spin-footer-copy[b-wfz8ggy9u3] {
    font-size: 0.75rem;
    color: var(--spin-faint);
}

@media (max-width: 767px) {
    .spin-header[b-wfz8ggy9u3] {
        padding: 12px 20px 18px;
    }

    .spin-logo[b-wfz8ggy9u3] {
        height: 30px;
    }

    /* The footer carries the only Official rules link, so it stays visible on
       phones — where most of these emailed links are opened. */
    .spin-footer[b-wfz8ggy9u3] {
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    }
}

/* blazor.web.js locates this by id; MainLayout's copy is not rendered on spin pages */
/* /Components/Pages/Error.razor.rz.scp.css */
.err[b-9oq85p92hc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 22px;
}

.err-kicker[b-9oq85p92hc] {
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #5B6B86;
    font-weight: 600;
}

.err-h1[b-9oq85p92hc] {
    font-size: clamp(24px, 4.4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 14px 0 0;
    line-height: 1.15;
    max-width: 640px;
}

.err-body[b-9oq85p92hc] {
    font-size: 16px;
    color: #7D8AA3;
    margin: 12px 0 0;
    line-height: 1.55;
    max-width: 460px;
    text-wrap: pretty;
}

.err-request[b-9oq85p92hc] {
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    color: var(--spin-faint);
    margin: 20px 0 0;
}

.err-request code[b-9oq85p92hc] {
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
.landing[b-0q0he13qnl] {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Bands run edge to edge so the hero's dark ground does; the inner wrapper is what holds
   the measure. Vertical rhythm lives on the band, so sections can't drift apart.
   Half the gap top and bottom, so two adjacent bands add up to one gap rather than two. */
.landing-band[b-0q0he13qnl] {
    width: 100%;
    padding: clamp(26px, 3.5dvh, 42px) 0;
}

.landing-band:last-child[b-0q0he13qnl] {
    padding-bottom: clamp(48px, 6dvh, 72px);
}

.landing-inner[b-0q0he13qnl] {
    width: 100%;
    max-width: min(92vw, 1120px);
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Hero --- */
.landing-band.is-hero[b-0q0he13qnl] {
    /* Sits directly under a white sticky header, so it needs its own ground rather than
       borrowing the page wash. Same tokens /spin uses for its whole stage. */
    background: var(--spin-dark-glow), var(--spin-dark);
    /* The band that owns its own ground carries full padding on both sides — it is not
       sharing a gap with a neighbour, it is ending. */
    padding-block: clamp(44px, 7dvh, 80px);
    margin-bottom: clamp(22px, 3dvh, 38px);
}

.landing-hero[b-0q0he13qnl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
}

.landing-pitch[b-0q0he13qnl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.landing-kicker[b-0q0he13qnl] {
    font-family: SFMono-Regular, Consolas, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--spin-on-dark-faint);
    font-weight: 600;
}

.landing-h1[b-0q0he13qnl] {
    font-family: var(--spin-font-display);
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 2px 0 0;
    line-height: 1.04;
    text-wrap: balance;
}

.landing-h1-accent[b-0q0he13qnl] {
    color: #35D0FF;
}

.landing-sub[b-0q0he13qnl] {
    font-family: var(--spin-font-display);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    color: rgba(255, 255, 255, 0.72);
    margin: 6px 0 0;
    line-height: 1.6;
    max-width: 46ch;
    text-wrap: pretty;
}

/* --- Hero buttons. Pills on a dark ground, so they don't reuse the light-page
   .spin-btn-* pair. Only the marketing arrival carries a second one. --- */
.landing-ctas[b-0q0he13qnl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.landing-btn[b-0q0he13qnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 32px;
    border-radius: 999px;
    background: linear-gradient(100deg, #7C6BFF, #5747f8);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(87, 71, 248, 0.45);
    font-family: var(--spin-font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.landing-btn:hover[b-0q0he13qnl] {
    filter: brightness(1.1);
    color: #ffffff;
}

/* Outlined rather than filled: it is the alternative to the ask, not a rival to it. */
.landing-btn.is-secondary[b-0q0he13qnl] {
    background: none;
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: none;
}

.landing-btn.is-secondary:hover[b-0q0he13qnl] {
    filter: none;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.55);
}

/* --- The wheel --- */
.landing-mark[b-0q0he13qnl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.landing-mark-note[b-0q0he13qnl] {
    font-family: var(--spin-font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--spin-on-dark);
    margin: 0;
    text-align: center;
    text-wrap: pretty;
}

@media (max-width: 900px) {
    /* Below this the two columns squeeze the headline into a column of single words. */
    .landing-hero[b-0q0he13qnl] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: 32px;
    }

    .landing-pitch[b-0q0he13qnl] {
        align-items: center;
    }
}

@media (max-width: 767px) {
    .landing-band[b-0q0he13qnl] {
        padding: 40px 0;
    }

    .landing-inner[b-0q0he13qnl] {
        max-width: none;
    }

    .landing-sub[b-0q0he13qnl] {
        font-size: 1rem;
    }

    /* Stacked and full-width, so neither is a half-width thumb target. */
    .landing-ctas[b-0q0he13qnl] {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .landing-btn[b-0q0he13qnl] {
        width: 100%;
        min-height: 56px;
    }
}
/* /Components/Pages/Spin.razor.rz.scp.css */
/* --- Wheel screen ---
   The stage is the dark ground, edge to edge and filling whatever height the layout
   gives it; the screen inside holds the measure. Same tokens as the landing hero, so
   arriving from the home page doesn't feel like landing on a different site. */
.spin-stage[b-nb1pbmm342] {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--spin-dark-glow), var(--spin-dark);
    color: #ffffff;
}

.spin-screen[b-nb1pbmm342] {
    width: 100%;
    /* 1200px is the design's measure, and it is the side-by-side layout that needs it:
       stacked, the blocks inside keep their own narrower max-widths, so the extra room
       only ever goes to the two columns. */
    max-width: min(92vw, 1200px);
    margin: 0 auto;
    padding: clamp(12px, 5dvh - 16px, 64px) 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 1;
}

/* Two blocks. Stacked below 1024px — copy, then wheel — and a row above it. Because they
   are blocks rather than loose siblings, the row needs nothing but `align-items: center`
   to sit the copy level with the wheel. */
.spin-hero[b-nb1pbmm342] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.spin-copy[b-nb1pbmm342] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 560px;
    text-align: center;
}

.spin-head[b-nb1pbmm342] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The kicker is a shared class tuned for light pages; on the dark stage its brand blue
   is nearly invisible against the ground. */
.spin-head .spin-kicker[b-nb1pbmm342] {
    color: #9FB4FF;
}

/* Three fixed steps rather than one clamp: the headline changes size at the same two
   widths the layout does, so it never lands mid-transition between two designs. */
.spin-h1[b-nb1pbmm342] {
    font-family: var(--spin-font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
    line-height: 1.1875;
    text-wrap: balance;
}

.spin-sub[b-nb1pbmm342] {
    font-family: var(--spin-font-display);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--spin-on-dark);
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

/* Phone. The dvh term only bites on unusually short windows; the pointer and the hub
   stay above the fold either way. Spacing is the hero's gap, not a margin here. */
.spin-wheel-slot[b-nb1pbmm342] {
    position: relative;
    width: min(88vw, 400px, 95dvh);
    margin: 0;
}

/* Roll-again nudge, in the copy block with everything else that is words. */
.spin-result-note[b-nb1pbmm342] {
    margin: 0;
    width: 100%;
    font-family: var(--spin-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: #ffffff;
    text-wrap: pretty;
    animation: spin-note-in-b-nb1pbmm342 0.25s cubic-bezier(0.2, 0, 0, 1);
}

/* The ghost CTA is outlined in brand blue for light pages, which disappears here. */
.spin-cta-bar .spin-btn-ghost[b-nb1pbmm342] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.34);
}

.spin-cta-bar .spin-btn-ghost:hover[b-nb1pbmm342] {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

@keyframes spin-note-in-b-nb1pbmm342 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* Full-viewport celebration canvas; JS draws into it on wins */
.spin-confetti[b-nb1pbmm342] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 70;
}

.spin-cta-bar[b-nb1pbmm342] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Phone: full-width, but capped at the same 400px the wheel is capped at, so the button
   and the wheel read as one column rather than two different widths stacked.
   <para>
   The cap has to be restated here because spin.css lifts the shared button's max-width
   below 768px for full-bleed mobile CTAs. Without it, the copy block can reach 560px while
   the wheel is still capped at 400 — so between 560 and 639px the button would grow wider
   than the wheel it spins, which is the same mismatch that showed up at 660px.
   </para> */
.spin-cta-bar .spin-btn-primary[b-nb1pbmm342],
.spin-cta-bar .spin-btn-ghost[b-nb1pbmm342] {
    width: 100%;
    max-width: 400px;
}

/* --- Phone (the base rules above) ---
   Written mobile-first, in three steps at 640px and 1024px. The page used to change once,
   at 767px, and that single step was doing too much: the wheel jumped from 330px to 800px
   across one pixel. The two steps below each move one thing — first the wheel and headline
   grow, then the layout goes side by side. */
.spin-screen[b-nb1pbmm342] {
    padding: 40px 24px 56px;
}

/* --- Tablet: still stacked, but the wheel is the hero and can afford the room --- */
@media (min-width: 640px) {
    .spin-screen[b-nb1pbmm342] {
        padding: 48px 40px 64px;
    }

    .spin-h1[b-nb1pbmm342] {
        font-size: 2.5rem;
        line-height: 1.15;
    }

    .spin-wheel-slot[b-nb1pbmm342] {
        width: min(62vw, 480px, 95dvh);
    }

    /* A pill from here up. Full-bleed is a phone habit — it earns its width when the button
       is the whole bottom of a small screen. From 640 the wheel is 480px and growing, and a
       bar of similar width beside or above it competes with the thing it exists to spin.
       This is also the design's treatment: its CTA is a pill at every width. */
    .spin-cta-bar .spin-btn-primary[b-nb1pbmm342],
    .spin-cta-bar .spin-btn-ghost[b-nb1pbmm342] {
        width: auto;
        max-width: 100%;
    }
}

/* --- Desktop: copy left, wheel right ---
   Just a flex row. Because the copy is one block, `align-items: center` is the whole of the
   vertical alignment — the two blocks sit on a shared centre line and stay there at any
   width. Nothing is out of flow, nothing spans anything, and no height is reserved. */
@media (min-width: 1024px) {
    /* Tighter than the design between 1024 and 1280, on purpose. The design's numbers —
       420px of copy, a 96px gap, a 42vw wheel — want 946px, and 1024 only offers 814 once
       padding is off. Following the design exactly here squeezed the copy to 288px and
       wrapped the headline onto four lines. A smaller gap and a step down in headline size
       buy it back; the full design values arrive at 1280, the width it was drawn at. */
    .spin-screen[b-nb1pbmm342] {
        padding: 48px 40px;
    }

    .spin-hero[b-nb1pbmm342] {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 56px;
    }

    .spin-copy[b-nb1pbmm342] {
        max-width: 420px;
        align-items: flex-start;
        text-align: left;
    }

    /* The CTA bar is its own flex column, so it centres the button inside its full width
       regardless of how the copy block is aligned. Left-align it too, or the button floats
       to the middle while everything above it starts at the left edge. */
    .spin-cta-bar[b-nb1pbmm342] {
        align-items: flex-start;
    }

    .spin-wheel-slot[b-nb1pbmm342] {
        width: min(42vw, 540px, 88dvh);
        flex-shrink: 0;
    }

    .spin-h1[b-nb1pbmm342] {
        font-size: 2.5rem;
        line-height: 1.15;
    }
}

/* --- Wide desktop: the design's own measurements, at the width it was drawn for ---
   Except the wheel, which outgrows them: at 540px it read as too small on 1080p and
   1440p monitors (and 660px still did). The measure widens with it — inside 1200px the
   copy and gap leave only ~556px, so a bigger cap alone would never be reached. */
@media (min-width: 1280px) {
    .spin-screen[b-nb1pbmm342] {
        max-width: min(92vw, 1440px);
        padding: 48px 64px;
    }

    .spin-hero[b-nb1pbmm342] {
        gap: 96px;
    }

    .spin-wheel-slot[b-nb1pbmm342] {
        width: min(42vw, 760px, 88dvh);
    }

    .spin-h1[b-nb1pbmm342] {
        font-size: 3rem;
        line-height: 1.0833;
    }
}
/* /Components/Pages/SpinRules.razor.rz.scp.css */
.spin-rules[b-oiht5wqnhm] {
    width: 100%;
    max-width: min(92vw, 745px);
    margin: 0 auto;
    padding: clamp(12px, 5dvh - 16px, 64px) 16px 60px;
    font-family: var(--spin-font-display);
}

.spin-rules-back[b-oiht5wqnhm] {
    display: inline-block;
    padding: 0 0 20px;
    color: var(--spin-primary);
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.spin-rules-back:hover[b-oiht5wqnhm] {
    color: var(--spin-primary-text);
}

.spin-rules-h1[b-oiht5wqnhm] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 10px 0 0;
    line-height: 1.15;
}

/* --- Odds table --- */
.spin-odds-table[b-oiht5wqnhm] {
    margin-top: 22px;
    border: 1px solid #E3E7EE;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.spin-odds-head[b-oiht5wqnhm] {
    background: #FAFBFC;
    padding: 12px 16px;
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--spin-muted);
}

.spin-odds-row[b-oiht5wqnhm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-top: 1px solid #E3E7EE;
}

.spin-odds-label[b-oiht5wqnhm] {
    font-size: 14.5px;
    font-weight: 500;
}

.spin-odds-value[b-oiht5wqnhm] {
    font-size: 14.5px;
    font-weight: 700;
    color: #5B6B86;
    font-variant-numeric: tabular-nums;
}

/* --- Legal sections --- */
.spin-rules-sections[b-oiht5wqnhm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 26px;
}

.spin-rules-sections h3[b-oiht5wqnhm] {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 6px;
}

.spin-rules-sections p[b-oiht5wqnhm] {
    font-size: 14px;
    color: #5B6B86;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .spin-rules[b-oiht5wqnhm] {
        padding: 22px 18px 48px;
        max-width: 560px;
    }
}
/* /Components/Spin/ClaimConfirmation.razor.rz.scp.css */
.cc-root[b-ilk8hi2kw7] {
    text-align: center;
}

.cc-framed[b-ilk8hi2kw7] {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    border: 1.5px solid var(--spin-border);
    border-radius: 16px;
    box-shadow: var(--spin-shadow-card);
    padding: 28px 24px;
}

.cc-check[b-ilk8hi2kw7] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--spin-grad);
    margin: 8px auto 0;
    display: grid;
    place-items: center;
}

.cc-head[b-ilk8hi2kw7] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 18px 0 0;
}

.cc-body[b-ilk8hi2kw7] {
    font-family: var(--spin-font-display);
    font-size: 1rem;
    color: var(--spin-muted);
    margin: 8px 0 0;
    line-height: 1.5;
}

.cc-note[b-ilk8hi2kw7] {
    margin: 18px auto 0;
    max-width: 430px;
    background: linear-gradient(90deg, #EFEDFE 0%, #E4F7FD 100%);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
}
/* /Components/Spin/ClaimForm.razor.rz.scp.css */
.cf-head[b-xqaudnt03x] {
    text-align: center;
}

.cf-headline[b-xqaudnt03x] {
    font-family: var(--spin-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 8px;
    line-height: 1.2;
    background: var(--spin-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cf-muted[b-xqaudnt03x] {
    font-family: var(--spin-font-display);
    font-size: 1rem;
    color: var(--spin-muted);
    margin: 8px 0 0;
    line-height: 1.5;
}

/* --- Field grid --- */
.cf-grid[b-xqaudnt03x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.cf-span[b-xqaudnt03x] {
    grid-column: 1 / -1;
}

.cf-city-row[b-xqaudnt03x] {
    display: flex;
    gap: 12px;
}

.cf-city-row > div[b-xqaudnt03x] {
    flex: 1;
    min-width: 0;
}

.cf-label[b-xqaudnt03x] {
    display: block;
    width: 100%;
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--spin-muted);
    margin-bottom: 4px;
}

.cf-req[b-xqaudnt03x] {
    color: #D4576A;
}

[b-xqaudnt03x] .cf-input {
    padding: 14px 18px;
    width: 100%;
    border: 1.5px solid var(--spin-input-border);
    border-radius: 12px;
    font-size: 1rem;
    font-family: var(--spin-font-display);
    background: #ffffff;
    color: var(--spin-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    resize: vertical;
    box-sizing: border-box;
}

[b-xqaudnt03x] .cf-input:focus {
    outline: 2px solid rgba(87, 71, 248, 0.35);
    outline-offset: 1px;
}

/* Prefilled from the link and locked — greyed so it reads as given, not editable. */
[b-xqaudnt03x] .cf-input-locked {
    background: #F1F3F9;
    color: var(--spin-muted);
    box-shadow: none;
    cursor: default;
}

[b-xqaudnt03x] .cf-input-locked:focus {
    outline: none;
}

[b-xqaudnt03x] .cf-error {
    display: block;
    color: #C53030;
    font-family: var(--spin-font-ui);
    font-size: 0.75rem;
    margin-top: 2px;
}

.cf-consent[b-xqaudnt03x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin-top: 2px;
}

[b-xqaudnt03x] .cf-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #5747F8;
    flex: 0 0 auto;
    cursor: pointer;
}

.cf-consent-text[b-xqaudnt03x] {
    font-family: var(--spin-font-ui);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--spin-muted);
}

.cf-bar[b-xqaudnt03x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

/* Submit failed server-side — distinct from the per-field .cf-error messages. */
.cf-submit-error[b-xqaudnt03x] {
    max-width: 42ch;
    margin: 0;
    color: #C53030;
    font-family: var(--spin-font-ui);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
}

/* --- Done phase (card markup lives in ClaimConfirmation) --- */
[b-xqaudnt03x] .cf-done-cta {
    margin-top: 24px;
}

@media (max-width: 767px) {
    .cf-headline[b-xqaudnt03x] {
        font-size: 1.75rem;
    }

    .cf-grid[b-xqaudnt03x] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    [b-xqaudnt03x] .cf-input {
        font-size: 16px;
        border-radius: 8px;
        min-height: 50px;
    }

    .cf-label[b-xqaudnt03x] {
        margin-bottom: 6px;
    }
}
/* /Components/Spin/LoseDialog.razor.rz.scp.css */
.ld-center[b-evwvpbx45c] {
    text-align: center;
}

.ld-head[b-evwvpbx45c] {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0;
}

.ld-msg[b-evwvpbx45c] {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--spin-text);
    line-height: 1.65;
    max-width: 430px;
    margin: 12px auto 0;
    text-wrap: pretty;
}

.ld-divider[b-evwvpbx45c] {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--spin-grad);
    margin: 22px auto 0;
}

.ld-footnote[b-evwvpbx45c] {
    font-size: 12.5px;
    color: #7D8AA3;
    font-weight: 600;
    margin: 16px 0 0;
}

.ld-cta[b-evwvpbx45c] {
    margin-top: 24px;
}

@media (max-width: 767px) {
    .ld-cta[b-evwvpbx45c] {
        margin-top: 20px;
    }
}
/* /Components/Spin/ModalShell.razor.rz.scp.css */
@keyframes ms-fade-b-1164wrtdmo {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ms-pop-b-1164wrtdmo {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes ms-sheet-b-1164wrtdmo {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ms-scrim[b-1164wrtdmo] {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 48, 0.5);
    z-index: 40;
    animation: ms-fade-b-1164wrtdmo 0.2s ease;
}

.ms-dialog[b-1164wrtdmo] {
    background: #ffffff;
    z-index: 50;
    font-family: var(--spin-font-display);
    color: var(--spin-text);
    outline: none;
    box-sizing: border-box;
}

.ms-grabber[b-1164wrtdmo] {
    display: none;
}

/* --- Desktop: centered card --- */
@media (min-width: 768px) {
    .ms-dialog[b-1164wrtdmo] {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(94vw, var(--ms-max-width));
        max-height: 92vh;
        overflow-y: auto;
        border-radius: 16px;
        box-shadow: var(--spin-shadow-lg);
        padding: 32px;
        animation: ms-pop-b-1164wrtdmo 0.2s cubic-bezier(0.2, 0, 0, 1);
    }

    .ms-dialog.ms-unpadded[b-1164wrtdmo] {
        padding: 0;
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
    }
}

/* --- Mobile: bottom sheet with grabber --- */
@media (max-width: 767px) {
    .ms-dialog[b-1164wrtdmo] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        border-radius: 24px 24px 0 0;
        padding: 8px 18px calc(22px + env(safe-area-inset-bottom));
        animation: ms-sheet-b-1164wrtdmo 0.26s cubic-bezier(0.2, 0, 0, 1);
        -webkit-overflow-scrolling: touch;
    }

    .ms-dialog.ms-unpadded[b-1164wrtdmo] {
        padding: 0 0 env(safe-area-inset-bottom);
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        height: 86vh;
    }

    .ms-grabber[b-1164wrtdmo] {
        display: block;
        width: 100%;
        background: none;
        border: none;
        padding: 10px 0 12px;
        margin: 0;
        cursor: pointer;
    }

    .ms-grabber span[b-1164wrtdmo] {
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background: #DFE3EB;
        margin: 0 auto;
    }

    .ms-dialog.ms-unpadded .ms-grabber[b-1164wrtdmo] {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-scrim[b-1164wrtdmo],
    .ms-dialog[b-1164wrtdmo] {
        animation-duration: 0.01ms;
    }
}
/* /Components/Spin/PrizesList.razor.rz.scp.css */
.pl-root[b-8l7mvu1xrv] {
    width: 100%;
}

/* Left-aligned, matching the winners heading above it — the two sections share an axis. */
.pl-head[b-8l7mvu1xrv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 30px;
}

.pl-title[b-8l7mvu1xrv] {
    font-family: var(--spin-font-display);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--spin-text);
    margin: 0;
    line-height: 1.1;
}

.pl-list[b-8l7mvu1xrv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.pl-card[b-8l7mvu1xrv] {
    --pl-accent: var(--spin-primary);
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    border: 1.5px solid var(--spin-border);
    border-radius: 16px;
    box-shadow: var(--spin-shadow-card);
    padding: 26px 28px 24px;
}

.pl-dot[b-8l7mvu1xrv] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pl-accent);
}

.pl-name[b-8l7mvu1xrv] {
    font-family: var(--spin-font-display);
    font-size: 1.4375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--spin-text);
    margin: 0;
    text-wrap: balance;
}

.pl-desc[b-8l7mvu1xrv] {
    font-family: var(--spin-font-display);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--spin-muted);
    margin: 0;
    text-wrap: pretty;
}

/* Pushed to the base so the stat line sits level across cards whose copy runs to
   different lengths — and so a card without one simply ends. */
.pl-stat[b-8l7mvu1xrv] {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--spin-border-light);
    font-family: var(--spin-font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--spin-faint);
}

/* --- The jackpot. It is 1 in 250, and it is why anyone spins. --- */
.pl-card.is-jackpot[b-8l7mvu1xrv] {
    border-color: transparent;
    color: #ffffff;
    background:
        radial-gradient(circle 320px at 78% 22%, rgba(124, 107, 255, 0.55), transparent 70%),
        linear-gradient(150deg, #241a63 0%, #140f3a 55%, #0d0a2b 100%);
    box-shadow: 0 18px 40px rgba(20, 15, 58, 0.35);
}

.pl-badge[b-8l7mvu1xrv] {
    align-self: flex-start;
    font-family: var(--spin-font-ui);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #8FE3FF;
    background: rgba(0, 186, 241, 0.14);
    border: 1px solid rgba(143, 227, 255, 0.28);
    border-radius: 999px;
    padding: 6px 12px;
}

.pl-card.is-jackpot .pl-name[b-8l7mvu1xrv] {
    color: #ffffff;
    /* Floor sized so "$250 Virtual Visa Card" holds two lines even at the grid's 240px
       minimum column — at the old 2.25rem floor it stacked three to four. */
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    letter-spacing: -0.04em;
}

.pl-card.is-jackpot .pl-desc[b-8l7mvu1xrv] {
    color: rgba(255, 255, 255, 0.74);
}

.pl-card.is-jackpot .pl-stat[b-8l7mvu1xrv] {
    border-top-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767px) {
    .pl-head[b-8l7mvu1xrv] {
        margin-bottom: 20px;
    }

    .pl-list[b-8l7mvu1xrv] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .pl-card[b-8l7mvu1xrv] {
        border-radius: 12px;
        padding: 22px 22px 20px;
    }

    .pl-card.is-jackpot .pl-name[b-8l7mvu1xrv] {
        font-size: 2.25rem;
    }
}
/* /Components/Spin/PrizeWheel.razor.rz.scp.css */
.wheel-box[b-hj5bm4ccen] {
    position: relative;
    width: 100%;
}

.wheel-pointer[b-hj5bm4ccen] {
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    z-index: 4;
    line-height: 0;
    filter: drop-shadow(0 2px 5px rgba(4, 8, 30, 0.55));
}

.wheel-svg[b-hj5bm4ccen] {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 60px rgba(4, 8, 30, 0.55));
}

.wheel-svg text[b-hj5bm4ccen] {
    font-family: var(--spin-font-display);
}

/* Center hub — an HTML button overlaid on the SVG for focus/a11y */
.wheel-hub[b-hj5bm4ccen] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #E3E7EE;
    padding: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
    box-shadow: inset 0 2px 10px rgba(16, 34, 63, 0.10), 0 6px 20px rgba(87, 71, 248, 0.28);
}

.wheel-hub:hover:not(:disabled)[b-hj5bm4ccen] {
    transform: translate(-50%, -50%) scale(1.04);
}

.wheel-hub:active:not(:disabled)[b-hj5bm4ccen] {
    transform: translate(-50%, -50%) scale(0.97);
}

.wheel-hub:disabled[b-hj5bm4ccen] {
    cursor: default;
}

/* Only a loss dims the hub; spinning and winning keep the lit glow */
.wheel-hub.is-muted[b-hj5bm4ccen] {
    box-shadow: inset 0 2px 10px rgba(16, 34, 63, 0.14), 0 4px 14px rgba(16, 34, 63, 0.12);
}

.wheel-hub-label[b-hj5bm4ccen] {
    font-family: var(--spin-font-ui);
    /* Longer states ("Good luck…", "Not this time") wrap inside the circle */
    font-size: clamp(12px, 1.7vw, 17px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    padding: 0 12%;
    text-wrap: balance;
}

.wheel-hub-label.is-live[b-hj5bm4ccen] {
    background: var(--spin-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wheel-hub-label.is-muted[b-hj5bm4ccen] {
    color: #8894A8;
}
/* /Components/Spin/SpinAgainDialog.razor.rz.scp.css */
.sa-center[b-f1to1j0pqn] {
    text-align: center;
}

.sa-badge[b-f1to1j0pqn] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #F0C34E;
    margin: 8px auto 0;
    display: grid;
    place-items: center;
}

.sa-head[b-f1to1j0pqn] {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 18px 0 0;
}

.sa-msg[b-f1to1j0pqn] {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--spin-text);
    line-height: 1.65;
    max-width: 430px;
    margin: 12px auto 0;
    text-wrap: pretty;
}

.sa-cta[b-f1to1j0pqn] {
    margin-top: 24px;
}

@media (max-width: 767px) {
    .sa-cta[b-f1to1j0pqn] {
        margin-top: 20px;
    }
}
/* /Components/Spin/WheelMark.razor.rz.scp.css */
.wm-root[b-yhtwssl6lh] {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    /* The wheel is decorative, so it must never be the reason the page scrolls sideways. */
    aspect-ratio: 1;
}

.wm-svg[b-yhtwssl6lh] {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 24px 60px rgba(4, 8, 30, 0.55));
}

.wm-pointer[b-yhtwssl6lh] {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    line-height: 0;
    filter: drop-shadow(0 2px 4px rgba(4, 8, 30, 0.5));
}

/* Slow enough to read as "alive" rather than "spinning" — a full turn takes a minute,
   so the labels are legible the whole way round. */
.wm-turn[b-yhtwssl6lh] {
    transform-box: fill-box;
    transform-origin: center;
    animation: wm-turn-b-yhtwssl6lh 60s linear infinite;
}

@keyframes wm-turn-b-yhtwssl6lh {
    from {
        transform: rotate(0deg);
    }

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

@media (prefers-reduced-motion: reduce) {
    .wm-turn[b-yhtwssl6lh] {
        animation: none;
    }
}

@media (max-width: 767px) {
    .wm-root[b-yhtwssl6lh] {
        max-width: 300px;
    }

    .wm-svg[b-yhtwssl6lh] {
        filter: drop-shadow(0 12px 30px rgba(4, 8, 30, 0.5));
    }
}
/* /Components/Spin/WinnersCarousel.razor.rz.scp.css */
@keyframes wc-fade-b-5tknp7pkk7 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

.wc-root[b-5tknp7pkk7] {
    width: 100%;
}

.wc-head[b-5tknp7pkk7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 30px;
}

.wc-title[b-5tknp7pkk7] {
    font-family: var(--spin-font-display);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--spin-text);
    margin: 0;
    line-height: 1.1;
}

.wc-body[b-5tknp7pkk7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* --- Winner list (doubles as the nav) --- */
.wc-list[b-5tknp7pkk7] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1.5px solid var(--spin-border);
    border-radius: 14px;
    overflow: hidden;
    /* Holds its share of the row when the feed is empty rather than collapsing the grid. */
    min-height: 260px;
}

.wc-list > li + li .wc-row[b-5tknp7pkk7] {
    border-top: 1px solid var(--spin-border-light);
}

.wc-row[b-5tknp7pkk7] {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: transparent;
    border: none;
    padding: 16px 20px;
    cursor: pointer;
    font-family: var(--spin-font-ui);
    transition: background-color 0.2s ease;
}

.wc-row:hover[b-5tknp7pkk7] {
    background: rgba(58, 110, 245, 0.04);
}

.wc-row.is-active[b-5tknp7pkk7] {
    background: rgba(87, 71, 248, 0.06);
    box-shadow: inset 3px 0 0 var(--spin-primary);
}

.wc-avatar[b-5tknp7pkk7] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(87, 71, 248, 0.12);
    color: #5747f8;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.wc-who[b-5tknp7pkk7],
.wc-won[b-5tknp7pkk7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wc-won[b-5tknp7pkk7] {
    text-align: right;
}

.wc-name[b-5tknp7pkk7] {
    font-family: var(--spin-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--spin-text);
}

.wc-dealer[b-5tknp7pkk7] {
    font-size: 0.8125rem;
    color: var(--spin-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-prize[b-5tknp7pkk7] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--spin-primary-text);
    white-space: nowrap;
}

.wc-when[b-5tknp7pkk7] {
    font-size: 0.75rem;
    color: var(--spin-faint);
    white-space: nowrap;
}

/* --- The selected testimonial --- */
.wc-quote-panel[b-5tknp7pkk7] {
    margin: 0;
    background: var(--spin-border-light);
    border-radius: 14px;
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    /* Matches the list's floor so an empty feed leaves a panel-shaped gap, not a sliver. */
    min-height: 260px;
}

.wc-mark[b-5tknp7pkk7] {
    font-family: var(--spin-font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 0.6;
    color: var(--spin-primary);
    opacity: 0.35;
}

.wc-quote[b-5tknp7pkk7] {
    /* Takes the space between the mark and the attribution and centres in it. Most
       testimonials are a single line — people type five words — so without this the quote
       pins to the top and leaves a hole where the panel's middle should be. */
    flex: 1;
    display: flex;
    align-items: center;
    font-family: var(--spin-font-display);
    /* Larger than body copy on purpose: this is the one thing on the page written by a
       customer, and it should carry like a pull quote. */
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--spin-text);
    margin: 20px 0 0;
    text-wrap: pretty;
    animation: wc-fade-b-5tknp7pkk7 0.35s ease;
}

.wc-attrib[b-5tknp7pkk7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Pinned to the base so every panel has the same anatomy whatever the quote's length —
       the quote grows from the middle, the name always sits on the floor. */
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(26, 32, 44, 0.1);
}

.wc-attrib-name[b-5tknp7pkk7] {
    font-family: var(--spin-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--spin-text);
}

.wc-attrib-meta[b-5tknp7pkk7] {
    font-family: var(--spin-font-ui);
    font-size: 0.8125rem;
    color: var(--spin-muted);
}

/* --- Mobile: two columns can't hold at 390px, so the panel sits under the list --- */
@media (max-width: 900px) {
    .wc-body[b-5tknp7pkk7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-list[b-5tknp7pkk7],
    .wc-quote-panel[b-5tknp7pkk7] {
        min-height: 0;
    }

    .wc-quote-panel[b-5tknp7pkk7] {
        min-height: 200px;
    }
}

@media (max-width: 767px) {
    .wc-head[b-5tknp7pkk7] {
        margin-bottom: 20px;
    }

    .wc-row[b-5tknp7pkk7] {
        padding: 14px 16px;
        gap: 12px;
    }

    .wc-avatar[b-5tknp7pkk7] {
        width: 36px;
        height: 36px;
        font-size: 0.6875rem;
    }

    .wc-quote-panel[b-5tknp7pkk7] {
        border-radius: 12px;
        padding: 22px 22px 20px;
    }

    .wc-quote[b-5tknp7pkk7] {
        font-size: 1.125rem;
        margin-top: 14px;
    }

    .wc-attrib[b-5tknp7pkk7] {
        margin-top: 18px;
        padding-top: 16px;
    }
}