/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-b5xhwhodw5] {
    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-b5xhwhodw5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.app-shell-bar[b-b5xhwhodw5] {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--color-border-subtle);
    box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.app-shell-main[b-b5xhwhodw5] {
    background:
        radial-gradient(circle at 2% -8%, rgba(37, 99, 235, 0.1), transparent 34%),
        radial-gradient(circle at 92% 4%, rgba(14, 165, 233, 0.08), transparent 30%),
        linear-gradient(180deg, #f7faff 0%, #f3f7fd 100%);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-scw6rmw1al],
.components-reconnect-repeated-attempt-visible[b-scw6rmw1al],
.components-reconnect-failed-visible[b-scw6rmw1al],
.components-pause-visible[b-scw6rmw1al],
.components-resume-failed-visible[b-scw6rmw1al],
.components-rejoining-animation[b-scw6rmw1al] {
    display: none;
}

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


#components-reconnect-modal[b-scw6rmw1al] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-scw6rmw1al 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-scw6rmw1al {
    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/Pages/AdminCampaigns.razor.rz.scp.css */
/* All campaigns (admin): colours come from the shared AdDesk palette (design-tokens.css). */
.admin-campaigns-page[b-km0lg6m20k] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 32px;
    color: var(--ad-ink);
}

.ac-head[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.ac-badge[b-km0lg6m20k] {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.ac-head h1[b-km0lg6m20k] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ac-head p[b-km0lg6m20k] {
    margin: 2px 0 0;
    color: var(--ad-muted);
}

.ac-search[b-km0lg6m20k] {
    max-width: 560px;
    margin-bottom: 16px;
}

.ac-search[b-km0lg6m20k]  .mud-input-outlined {
    background: var(--ad-surface);
    border-radius: 10px;
}

/* Tabs: a white bar, the open tab filled in brand blue (same as My campaigns) */
.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tabs-tabbar {
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    box-shadow: 0 1px 2px rgba(21, 34, 58, 0.05);
}

.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tabs-toolbar,
.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tabs-tabbar-inner {
    background: none;
    border: 0;
    min-height: 0;
}

.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tabs-tabbar-wrapper {
    gap: 4px;
}

.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tab {
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    text-transform: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ad-ink);
    opacity: 1;
}

.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tab:hover:not(.mud-tab-active) {
    background: var(--ad-surface-2);
}

.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tab.mud-tab-active {
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    border: 0;
}

.admin-campaigns-page[b-km0lg6m20k]  .admin-campaigns-tabs .mud-tab-slider {
    display: none;
}

.admin-campaigns-page[b-km0lg6m20k]  .ac-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.admin-campaigns-page[b-km0lg6m20k]  .ac-tab-n {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.admin-campaigns-page[b-km0lg6m20k]  .ac-tab-n.is-warn {
    background: var(--ad-orange);
    color: #fff;
}

.admin-campaigns-page[b-km0lg6m20k]  .ac-tab-n.is-bad {
    background: var(--ad-bad);
    color: #fff;
}

.admin-campaigns-page[b-km0lg6m20k]  .mud-tab-active .ac-tab-n {
    background: rgba(255, 255, 255, 0.22);
    color: var(--ad-on-primary);
}

.admin-campaigns-page[b-km0lg6m20k]  .mud-tab-active .ac-tab-n.is-warn,
.admin-campaigns-page[b-km0lg6m20k]  .mud-tab-active .ac-tab-n.is-bad {
    background: #fff;
}

.admin-campaigns-page[b-km0lg6m20k]  .mud-tab-active .ac-tab-n.is-warn {
    color: var(--ad-warn);
}

.admin-campaigns-page[b-km0lg6m20k]  .mud-tab-active .ac-tab-n.is-bad {
    color: var(--ad-bad);
}

.discover-url-box[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 6px;
    padding: 6px;
    margin-top: 6px;
}

.discover-url-box code[b-km0lg6m20k] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--ad-primary-strong);
    background: transparent;
}

/* The list: one white panel, rows divided by lines */
.campaigns-list[b-km0lg6m20k] {
    display: flex;
    flex-direction: column;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    overflow: hidden;
}

.campaign-card-horizontal[b-km0lg6m20k] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--ad-surface);
    border: 0;
    border-top: 1px solid var(--ad-line);
    border-radius: 0;
    box-shadow: none;
}

.campaign-card-horizontal:first-child[b-km0lg6m20k] {
    border-top: 0;
}

.campaign-card-horizontal:hover[b-km0lg6m20k] {
    background: color-mix(in srgb, var(--ad-surface-2) 55%, var(--ad-surface));
    box-shadow: none;
    transform: none;
}

/* Starts today or tomorrow and still not approved */
.campaign-card-horizontal.is-urgent[b-km0lg6m20k] {
    background: color-mix(in srgb, var(--ad-bad-tint) 60%, var(--ad-surface));
    box-shadow: inset 4px 0 0 var(--ad-bad);
}

.ac-urgent-flag[b-km0lg6m20k] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px 2px 4px;
    border-radius: 999px;
    background: var(--ad-bad);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.ac-urgent-flag[b-km0lg6m20k]  .mud-icon-root {
    font-size: 14px;
}

.campaign-card-thumbnail[b-km0lg6m20k] {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ad-surface-2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.thumbnail-wrapper[b-km0lg6m20k] {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    background: var(--ad-surface-2);
    position: relative;
    cursor: zoom-in;
}

.creative-name-label[b-km0lg6m20k] {
    font-size: 0.7rem;
    color: var(--ad-faint);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.campaign-thumbnail-img[b-km0lg6m20k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campaign-thumbnail-img.fallback[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ad-surface-2);
}

.campaign-card-content[b-km0lg6m20k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campaign-header-row[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.campaign-info[b-km0lg6m20k] {
    min-width: 0;
    flex: 1;
}

.campaign-title[b-km0lg6m20k] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ad-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-subtitle[b-km0lg6m20k] {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--ad-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.campaign-advertiser-info[b-km0lg6m20k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.advertiser-info-item[b-km0lg6m20k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.advertiser-info-item[b-km0lg6m20k]  .mud-icon-root {
    font-size: 14px !important;
    color: var(--ad-faint);
}

.campaign-meta[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ad-muted);
}

.campaign-meta-item[b-km0lg6m20k] {
    white-space: nowrap;
}

.campaign-meta-divider[b-km0lg6m20k] {
    color: var(--ad-faint);
}

.campaign-card-end[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.status-badge[b-km0lg6m20k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge.status-pill--pending[b-km0lg6m20k] {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.status-badge--urgent[b-km0lg6m20k] {
    background: var(--ad-bad);
    color: #fff;
}

.status-badge--good[b-km0lg6m20k] {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.status-badge[b-km0lg6m20k]  .mud-icon-root {
    font-size: 14px !important;
}

.campaign-cost[b-km0lg6m20k] {
    min-width: 84px;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ad-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.campaign-actions[b-km0lg6m20k] {
    display: flex;
    gap: 6px;
}

[b-km0lg6m20k] .ac-review-btn {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    box-shadow: none;
    text-transform: none;
    font-weight: 600;
}

.action-btn-icon[b-km0lg6m20k] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn-icon:hover:not(:disabled)[b-km0lg6m20k] {
    border-color: var(--ad-faint);
    color: var(--ad-ink);
}

.action-btn-icon.view[b-km0lg6m20k] {
    color: var(--ad-primary);
}

.action-btn-icon.delete[b-km0lg6m20k] {
    color: var(--ad-bad);
}

.action-btn-icon.delete:hover:not(:disabled)[b-km0lg6m20k] {
    background: var(--ad-bad-tint);
    border-color: var(--ad-bad);
}

.action-btn-icon:disabled[b-km0lg6m20k] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn-icon:focus-visible[b-km0lg6m20k],
.thumbnail-wrapper:focus-visible[b-km0lg6m20k] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
    .campaign-card-horizontal[b-km0lg6m20k] {
        flex-wrap: wrap;
    }

    .campaign-header-row[b-km0lg6m20k] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .campaign-meta[b-km0lg6m20k] {
        flex-wrap: wrap;
    }

    .campaign-card-end[b-km0lg6m20k] {
        width: 100%;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px dashed var(--ad-line);
    }

    .campaign-actions[b-km0lg6m20k] {
        order: 2;
    }
}

@media (max-width: 768px) {
    .campaign-card-horizontal[b-km0lg6m20k] {
        padding: 12px;
        gap: 12px;
    }

    .thumbnail-wrapper[b-km0lg6m20k],
    .campaign-card-thumbnail[b-km0lg6m20k] {
        width: 56px;
        height: 56px;
    }

    .campaign-card-end[b-km0lg6m20k] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .campaign-cost[b-km0lg6m20k] {
        min-width: 0;
    }
}

/* Stepper Active Step Styling */
.mud-stepper .mud-step.mud-step-active .mud-step-label[b-km0lg6m20k] {
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.5px;
}

.mud-stepper .mud-step.mud-step-active .mud-step-status[b-km0lg6m20k] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.mud-stepper .mud-step.mud-step-active .mud-step-status .mud-typography[b-km0lg6m20k] {
    color: var(--color-white);
}

/* Ensure long text stays inside textareas/inputs */
.contact-notes .mud-input-slot textarea[b-km0lg6m20k],
.contact-notes .mud-input-slot input[b-km0lg6m20k] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Defensive override to ensure inputs render inside the field */
.contact-notes .mud-input[b-km0lg6m20k] {
    position: relative;
    top: 0;
    transform: none;
    margin-top: 0;
}
.contact-notes .mud-input-slot[b-km0lg6m20k] {
    position: relative;
    transform: none;
}

/* Prevent double borders by removing background styling from inputs */
.no-extra-border .mud-input-root[b-km0lg6m20k] {
    background: transparent;
}

/* Ensure label notches cut the outline properly for outlined fields */
.admin-review-dialog .mud-input-root.mud-input-root-outlined .mud-input-label.mud-shrink[b-km0lg6m20k] {
    background: var(--mud-palette-surface);
    padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER - Gradient header with decorative circles
   ═══════════════════════════════════════════════════════════════ */
.hero-banner[b-km0lg6m20k] {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
    color: white;
}

.hero-banner[b-km0lg6m20k]::before,
.hero-banner[b-km0lg6m20k]::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-banner[b-km0lg6m20k]::before {
    width: 200px;
    height: 200px;
    top: -80px;
    right: -60px;
}

.hero-banner[b-km0lg6m20k]::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    right: 100px;
}

.hero-banner-content[b-km0lg6m20k] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-kicker[b-km0lg6m20k] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.hero-title[b-km0lg6m20k] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.hero-subtitle[b-km0lg6m20k] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Fira Code', 'Consolas', monospace;
}

.hero-cost-badge[b-km0lg6m20k] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: center;
    min-width: 140px;
}

.hero-cost-label[b-km0lg6m20k] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.hero-cost-value[b-km0lg6m20k] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   INFO CARDS - Rounded corners, subtle borders, icon headers
   ═══════════════════════════════════════════════════════════════ */
.info-card[b-km0lg6m20k] {
    background: var(--color-bg-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.info-card-header[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary, #1f2937);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.icon-wrapper[b-km0lg6m20k] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrapper.purple[b-km0lg6m20k] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-wrapper.amber[b-km0lg6m20k] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.icon-wrapper.cyan[b-km0lg6m20k] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.icon-wrapper.green[b-km0lg6m20k] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.info-row[b-km0lg6m20k] {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.info-row:not(:last-child)[b-km0lg6m20k] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.info-row .label[b-km0lg6m20k] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-tertiary, #9ca3af);
    margin-bottom: 2px;
}

.info-row .value[b-km0lg6m20k] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
}

.info-row .value.na[b-km0lg6m20k] {
    font-style: italic;
    color: var(--color-text-tertiary, #9ca3af);
}

/* Device List Styles */
.device-list[b-km0lg6m20k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.device-item[b-km0lg6m20k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.device-item:hover[b-km0lg6m20k] {
    border-color: #d1d5db;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.device-info[b-km0lg6m20k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.device-name[b-km0lg6m20k] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.device-meta[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}

.device-meta-item[b-km0lg6m20k] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* /Components/Pages/AdminCampaignsDialogs/Dialogs/CallDialog.razor.rz.scp.css */
/* Call Dialog Styles */
.call-dialog-content[b-ifky0zuof3] {
    padding: var(--space-lg);
}

/* Spacing helpers for MudBlazor components */
.mb-4[b-ifky0zuof3] {
    margin-bottom: var(--space-lg);
}

.mb-3[b-ifky0zuof3] {
    margin-bottom: var(--space-md);
}

    height: 1.25rem;
    margin-top: 0.125rem;[b-ifky0zuof3]
}

.form-check-label[b-ifky0zuof3] {
    margin-left: var(--space-xs);
    font-weight: var(--font-weight-medium);
}
/* /Components/Pages/AdminCampaignsDialogs/Dialogs/CampaignReviewDesk.razor.rz.scp.css */
/* Review desk: ads and campaign facts on the left, the decision rail on the right */
.rd[b-kaf89oc2w7] {
    --rd-ink: #0e1a2f;
    --rd-muted: #5b6b82;
    --rd-line: #e1e7ef;
    --rd-surface: #ffffff;
    --rd-surface-2: #f6f8fb;
    --rd-accent: #1e6fd9;
    --rd-accent-tint: #e8f0fc;
    --rd-good: #12805c;
    --rd-good-tint: #e3f4ec;
    --rd-warn: #a05a00;
    --rd-warn-tint: #fdf1dc;
    --rd-bad: #c0392b;
    --rd-bad-tint: #fbe7e4;

    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    color: var(--rd-ink);
    background: var(--rd-surface);
    font-size: 0.94rem;
    line-height: 1.5;
}

.rd h2[b-kaf89oc2w7],
.rd h3[b-kaf89oc2w7] {
    margin: 0;
    text-wrap: balance;
}

.rd h3[b-kaf89oc2w7] {
    font-size: 0.95rem;
    font-weight: 600;
}

.rd-label[b-kaf89oc2w7] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rd-muted);
}

.rd-mono[b-kaf89oc2w7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8em;
}

.rd-note[b-kaf89oc2w7] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--rd-muted);
}

/* Header */
.rd-head[b-kaf89oc2w7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--rd-line);
}

.rd-title[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rd-title h2[b-kaf89oc2w7] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 1.25rem;
    font-weight: 700;
}

.rd-meta[b-kaf89oc2w7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.84rem;
    color: var(--rd-muted);
}

.rd-pill[b-kaf89oc2w7] {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--rd-warn-tint);
    color: var(--rd-warn);
}

.rd-pill.is-good[b-kaf89oc2w7] {
    background: var(--rd-good-tint);
    color: var(--rd-good);
}

.rd-x[b-kaf89oc2w7] {
    padding: 2px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--rd-muted);
    cursor: pointer;
}

.rd-x:hover[b-kaf89oc2w7] {
    background: var(--rd-surface-2);
}

.rd-resub[b-kaf89oc2w7] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 10px 22px;
    border-bottom: 1px solid var(--rd-line);
    background: var(--rd-warn-tint);
    font-size: 0.88rem;
}

.rd-resub b[b-kaf89oc2w7] {
    color: var(--rd-warn);
}

/* Body */
.rd-body[b-kaf89oc2w7] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.9fr);
    flex: 1;
    min-height: 0;
}

.rd-main[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 22px;
    overflow-y: auto;
    border-right: 1px solid var(--rd-line);
}

.rd-section[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-section-head[b-kaf89oc2w7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.rd-empty[b-kaf89oc2w7] {
    padding: 14px;
    border-radius: 10px;
    background: var(--rd-bad-tint);
    color: var(--rd-bad);
}

/* Ads */
.rd-ads[b-kaf89oc2w7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.rd-ad[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    background: var(--rd-surface);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.rd-ad:hover[b-kaf89oc2w7],
.rd-ad:focus-visible[b-kaf89oc2w7] {
    border-color: var(--rd-accent);
}

.rd-ad:focus-visible[b-kaf89oc2w7] {
    outline: 2px solid var(--rd-accent);
    outline-offset: 2px;
}

.rd-ad-frame[b-kaf89oc2w7] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    margin-bottom: 4px;
    border-radius: 6px;
    background: #0b0f16;
    color: #8a96a8;
    overflow: hidden;
}

.rd-ad-frame img[b-kaf89oc2w7] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rd-ad-play[b-kaf89oc2w7] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
}

.rd-ad-name[b-kaf89oc2w7] {
    overflow: hidden;
    font-weight: 600;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-ad-specs[b-kaf89oc2w7] {
    min-height: 1.2em;
    font-size: 0.75rem;
    color: var(--rd-muted);
}

.rd-ad-state[b-kaf89oc2w7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rd-accent);
}

.rd-ad.is-viewed .rd-ad-state[b-kaf89oc2w7] {
    color: var(--rd-good);
}

/* Facts */
.rd-facts[b-kaf89oc2w7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    overflow: hidden;
}

.rd-facts div[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 -1px -1px 0;
    padding: 10px 14px;
    border-right: 1px solid var(--rd-line);
    border-bottom: 1px solid var(--rd-line);
}

.rd-facts b[b-kaf89oc2w7] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rd-facts span[b-kaf89oc2w7] {
    font-size: 0.8rem;
    color: var(--rd-muted);
}

/* People */
.rd-people[b-kaf89oc2w7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.rd-person[b-kaf89oc2w7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rd-avatar[b-kaf89oc2w7] {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rd-accent-tint);
    color: var(--rd-accent);
    font-size: 0.82rem;
    font-weight: 600;
}

.rd-person div[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.86rem;
}

.rd-person b[b-kaf89oc2w7] {
    font-size: 0.92rem;
}

.rd-person span[b-kaf89oc2w7] {
    color: var(--rd-muted);
    overflow-wrap: anywhere;
}

.rd-person a[b-kaf89oc2w7] {
    color: var(--rd-accent);
    font-weight: 600;
    text-decoration: none;
}

/* Screens */
.rd-chips[b-kaf89oc2w7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rd-chip[b-kaf89oc2w7] {
    padding: 3px 10px;
    border: 1px solid var(--rd-line);
    border-radius: 999px;
    background: var(--rd-surface-2);
    font: inherit;
    font-size: 0.8rem;
    color: inherit;
    white-space: nowrap;
}

.rd-chip i[b-kaf89oc2w7] {
    margin-left: 6px;
    font-style: normal;
    color: var(--rd-muted);
    font-variant-numeric: tabular-nums;
}

.rd-chip.is-more[b-kaf89oc2w7] {
    border-color: transparent;
    background: var(--rd-accent-tint);
    color: var(--rd-accent);
    font-weight: 600;
    cursor: pointer;
}

/* Decision rail */
.rd-rail[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
    background: var(--rd-surface-2);
}

.rd-block[b-kaf89oc2w7] {
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    background: var(--rd-surface);
}

.rd-block-head[b-kaf89oc2w7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rd-line);
}

.rd-block-body[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.rd-count[b-kaf89oc2w7] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rd-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rd-count.is-done[b-kaf89oc2w7] {
    color: var(--rd-good);
}

.rd-checks[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 4px;
    list-style: none;
}

.rd-check[b-kaf89oc2w7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.rd-check:hover[b-kaf89oc2w7] {
    background: var(--rd-surface-2);
}

.rd-check input[b-kaf89oc2w7] {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: var(--rd-good);
}

.rd-check b[b-kaf89oc2w7] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
}

.rd-check span span[b-kaf89oc2w7] {
    font-size: 0.78rem;
    color: var(--rd-muted);
}

.rd-checks.is-locked .rd-check[b-kaf89oc2w7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rd-sign[b-kaf89oc2w7] {
    margin: 0;
    padding: 0 14px 12px;
    font-size: 0.78rem;
    color: var(--rd-muted);
}

.rd-sign.is-signed[b-kaf89oc2w7] {
    color: var(--rd-good);
    font-weight: 500;
}

/* Fields */
.rd-field[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rd-field label[b-kaf89oc2w7],
.rd-field-label[b-kaf89oc2w7] {
    font-size: 0.8rem;
    font-weight: 600;
}

.rd-field em[b-kaf89oc2w7] {
    font-style: normal;
    font-weight: 400;
    color: var(--rd-muted);
}

.rd-field input[b-kaf89oc2w7],
.rd-field textarea[b-kaf89oc2w7],
.rd-field select[b-kaf89oc2w7],
.rd-disc input[b-kaf89oc2w7] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rd-line);
    border-radius: 8px;
    background: var(--rd-surface);
    font: inherit;
    font-size: 0.9rem;
    color: var(--rd-ink);
}

.rd-field textarea[b-kaf89oc2w7] {
    resize: vertical;
}

.rd-field input:focus[b-kaf89oc2w7],
.rd-field textarea:focus[b-kaf89oc2w7],
.rd-field select:focus[b-kaf89oc2w7],
.rd-disc input:focus[b-kaf89oc2w7] {
    outline: 2px solid var(--rd-accent);
    outline-offset: 0;
    border-color: transparent;
}

.rd-seg[b-kaf89oc2w7] {
    display: flex;
    border: 1px solid var(--rd-line);
    border-radius: 8px;
    overflow: hidden;
}

.rd-seg button[b-kaf89oc2w7] {
    flex: 1;
    padding: 7px 8px;
    border: 0;
    border-right: 1px solid var(--rd-line);
    background: var(--rd-surface);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--rd-ink);
    cursor: pointer;
}

.rd-seg button:last-child[b-kaf89oc2w7] {
    border-right: 0;
}

.rd-seg button[aria-pressed="true"][b-kaf89oc2w7] {
    background: var(--rd-accent-tint);
    color: var(--rd-accent);
    font-weight: 600;
}

.rd-seg button:focus-visible[b-kaf89oc2w7] {
    outline: 2px solid var(--rd-accent);
    outline-offset: -2px;
}

/* Price */
.rd-disc[b-kaf89oc2w7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rd-disc input[b-kaf89oc2w7] {
    width: 120px;
    font-variant-numeric: tabular-nums;
}

.rd-disc span[b-kaf89oc2w7] {
    font-size: 0.8rem;
    color: var(--rd-muted);
}

.rd-disc .rd-unit[b-kaf89oc2w7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rd-ink);
}

.rd-error-text[b-kaf89oc2w7] {
    font-size: 0.8rem;
    color: var(--rd-bad);
}

.rd-receipt[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.rd-receipt div[b-kaf89oc2w7] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rd-receipt div span:first-child[b-kaf89oc2w7] {
    color: var(--rd-muted);
}

.rd-was[b-kaf89oc2w7] {
    text-decoration: line-through;
    color: var(--rd-muted);
}

.rd-minus[b-kaf89oc2w7] {
    color: var(--rd-good);
}

.rd-newp[b-kaf89oc2w7] {
    align-items: center;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--rd-good-tint);
}

.rd-receipt .rd-newp span:first-child[b-kaf89oc2w7] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rd-good);
}

.rd-newp b[b-kaf89oc2w7] {
    font-size: 1.3rem;
}

.rd-total[b-kaf89oc2w7] {
    padding-top: 2px;
    font-weight: 700;
}

.rd-receipt .rd-total span:first-child[b-kaf89oc2w7] {
    color: var(--rd-ink);
}

/* Full-size viewer, over the body */
.rd-viewer[b-kaf89oc2w7] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: rgba(5, 9, 15, 0.94);
    color: #ffffff;
}

.rd-viewer-bar[b-kaf89oc2w7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
}

.rd-viewer-bar div:first-child[b-kaf89oc2w7] {
    display: flex;
    flex-direction: column;
}

.rd-viewer-bar span[b-kaf89oc2w7] {
    font-size: 0.8rem;
    color: #b7c2d3;
}

.rd-viewer-media[b-kaf89oc2w7] {
    display: grid;
    flex: 1;
    min-height: 0;
    place-items: center;
    padding: 0 18px 18px;
}

.rd-viewer-media img[b-kaf89oc2w7],
.rd-viewer-media video[b-kaf89oc2w7] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rd-viewer-missing[b-kaf89oc2w7] {
    color: #b7c2d3;
}

/* Footer */
.rd-foot[b-kaf89oc2w7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 22px;
    border-top: 1px solid var(--rd-line);
    background: var(--rd-surface);
}

.rd-status[b-kaf89oc2w7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
    font-size: 0.88rem;
    color: var(--rd-muted);
}

.rd-status[b-kaf89oc2w7]  b {
    color: var(--rd-ink);
}

.rd-error[b-kaf89oc2w7] {
    color: var(--rd-bad);
    font-weight: 500;
}

.rd-link[b-kaf89oc2w7] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--rd-accent);
    cursor: pointer;
}

.rd-btns[b-kaf89oc2w7] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rd-btn[b-kaf89oc2w7] {
    padding: 9px 16px;
    border: 1px solid var(--rd-line);
    border-radius: 8px;
    background: var(--rd-surface);
    font: inherit;
    font-weight: 600;
    color: var(--rd-ink);
    cursor: pointer;
}

.rd-btn:hover:not(:disabled)[b-kaf89oc2w7] {
    background: var(--rd-surface-2);
}

.rd-btn:disabled[b-kaf89oc2w7] {
    opacity: 0.45;
    cursor: not-allowed;
}

.rd-btn:focus-visible[b-kaf89oc2w7],
.rd-x:focus-visible[b-kaf89oc2w7],
.rd-chip:focus-visible[b-kaf89oc2w7],
.rd-link:focus-visible[b-kaf89oc2w7] {
    outline: 2px solid var(--rd-accent);
    outline-offset: 2px;
}

.rd-btn.is-green[b-kaf89oc2w7] {
    border-color: var(--rd-good);
    background: var(--rd-good);
    color: #ffffff;
}

.rd-btn.is-green:hover:not(:disabled)[b-kaf89oc2w7] {
    background: #0e6b4d;
}

.rd-btn.is-blue[b-kaf89oc2w7] {
    border-color: var(--rd-accent);
    background: var(--rd-accent);
    color: #ffffff;
}

.rd-btn.is-blue:hover:not(:disabled)[b-kaf89oc2w7] {
    background: #185cb5;
}

.rd-btn.is-red[b-kaf89oc2w7] {
    border-color: var(--rd-bad);
    background: var(--rd-bad);
    color: #ffffff;
}

.rd-btn.is-red:hover:not(:disabled)[b-kaf89oc2w7] {
    background: #a32f23;
}

.rd-btn.is-quiet-red[b-kaf89oc2w7] {
    border-color: transparent;
    background: none;
    color: var(--rd-bad);
}

.rd-btn.is-quiet-red:hover:not(:disabled)[b-kaf89oc2w7] {
    background: var(--rd-bad-tint);
}

@media (max-width: 900px) {
    .rd[b-kaf89oc2w7] {
        max-height: none;
    }

    .rd-body[b-kaf89oc2w7] {
        grid-template-columns: 1fr;
    }

    .rd-main[b-kaf89oc2w7] {
        border-right: 0;
        border-bottom: 1px solid var(--rd-line);
        overflow: visible;
    }

    .rd-rail[b-kaf89oc2w7] {
        overflow: visible;
    }

    .rd-viewer[b-kaf89oc2w7] {
        position: fixed;
        z-index: 2000;
    }
}
/* /Components/Pages/AdminCampaignsDialogs/Dialogs/CampaignReviewDialog.razor.rz.scp.css */
/* Campaign Review Dialog Styles */

.campaign-review-dialog[b-0xuja5sfg3] {
    --dialog-radius: 16px;
}

.campaign-review-dialog .mud-dialog-content[b-0xuja5sfg3] {
    padding: 16px 24px;
    background: #f8fafc;
}

.campaign-review-dialog .mud-dialog-title[b-0xuja5sfg3] {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
}

.campaign-review-dialog .mud-dialog-actions[b-0xuja5sfg3] {
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 16px 24px;
}

/* Card hover effects */
.campaign-review-dialog .mud-card[b-0xuja5sfg3] {
    transition: all 0.2s ease-in-out;
}

.campaign-review-dialog .mud-card:hover[b-0xuja5sfg3] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Step indicator hover */
.campaign-review-dialog .step-indicator:hover[b-0xuja5sfg3] {
    background: rgba(30, 64, 175, 0.05);
}

/* Custom scrollbar for content area */
.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar {
    width: 8px;
}

.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.campaign-review-dialog .mud-dialog-content > div[b-0xuja5sfg3]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Creative gallery item hover */
.campaign-review-dialog .mud-paper[style*="cursor: pointer"]:hover[b-0xuja5sfg3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Checkbox label styling */
.campaign-review-dialog .mud-checkbox-content[b-0xuja5sfg3] {
    padding-left: 8px;
}

/* Alert styling */
.campaign-review-dialog .mud-alert[b-0xuja5sfg3] {
    border-radius: 8px;
}

/* Table styling */
.campaign-review-dialog .mud-simple-table[b-0xuja5sfg3] {
    border-radius: 8px;
    overflow: hidden;
}

.campaign-review-dialog .mud-simple-table th[b-0xuja5sfg3] {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

.campaign-review-dialog .mud-simple-table td[b-0xuja5sfg3] {
    padding: 12px 16px;
}

/* Expansion panel styling */
.campaign-review-dialog .mud-expand-panel[b-0xuja5sfg3] {
    border-radius: 8px !important;
    overflow: hidden;
}

.campaign-review-dialog .mud-expand-panel-header[b-0xuja5sfg3] {
    padding: 12px 16px;
}

/* Button ripple effects */
.campaign-review-dialog .mud-button[b-0xuja5sfg3] {
    border-radius: 8px;
}

/* Chip styling */
.campaign-review-dialog .mud-chip[b-0xuja5sfg3] {
    border-radius: 6px;
}

/* Input field styling */
.campaign-review-dialog .mud-input-outlined[b-0xuja5sfg3] {
    border-radius: 8px;
}

/* Avatar in headers */
.campaign-review-dialog .section-avatar[b-0xuja5sfg3] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Info icon in data points */
.campaign-review-dialog .info-icon[b-0xuja5sfg3] {
    color: #94a3b8;
    cursor: help;
    transition: color 0.2s;
}

.campaign-review-dialog .info-icon:hover[b-0xuja5sfg3] {
    color: #3b82f6;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .campaign-review-dialog .mud-dialog-content[b-0xuja5sfg3] {
        padding: 12px 16px;
    }
    
    .campaign-review-dialog .mud-dialog-title[b-0xuja5sfg3],
    .campaign-review-dialog .mud-dialog-actions[b-0xuja5sfg3] {
        padding: 12px 16px;
    }
    
    .campaign-review-dialog .step-text[b-0xuja5sfg3] {
        display: none;
    }
}

/* Animation for step transitions */
@keyframes fadeIn-b-0xuja5sfg3 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.campaign-review-dialog .step-content[b-0xuja5sfg3] {
    animation: fadeIn-b-0xuja5sfg3 0.3s ease-out;
}

/* Summary card styling in final step */
.campaign-review-dialog .summary-card[b-0xuja5sfg3] {
    background: white;
    border-left-width: 4px;
    border-left-style: solid;
}

.campaign-review-dialog .summary-card.success[b-0xuja5sfg3] {
    border-left-color: #22c55e;
}

.campaign-review-dialog .summary-card.info[b-0xuja5sfg3] {
    border-left-color: #3b82f6;
}

/* Creative card badge */
.campaign-review-dialog .creative-badge[b-0xuja5sfg3] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}
/* /Components/Pages/AdminCampaignsDialogs/Dialogs/UnifiedReviewDialog.razor.rz.scp.css */
/* Unified Review Dialog Styles */
.review-dialog-container[b-sljvm66tda] {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.review-header[b-sljvm66tda] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    padding: var(--space-xl);
    color: var(--color-bg-surface);
}

.review-title[b-sljvm66tda] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-xs) 0;
}

.step-badge[b-sljvm66tda] {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.progress-stepper[b-sljvm66tda] {
    padding: var(--space-xl) var(--space-lg);
    background: var(--color-bg-secondary);
}

.stepper-container[b-sljvm66tda] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.stepper-line[b-sljvm66tda] {
    position: absolute;
    top: 21px;
    left: 24px;
    right: 24px;
    height: 4px;
    background: var(--color-border, #e5e7eb);
    z-index: 0;
    border-radius: 2px;
}

.stepper-progress[b-sljvm66tda] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    transition: width 0.4s ease;
    border-radius: 2px;
}

.step-item[b-sljvm66tda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    z-index: 1;
}

.step-circle[b-sljvm66tda] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 3px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
}

.step-circle.active[b-sljvm66tda] {
    border-color: transparent;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.step-circle.completed[b-sljvm66tda] {
    border-color: transparent;
    background: #10b981;
    color: white;
}

.step-circle .checkmark[b-sljvm66tda] {
    font-size: 18px;
    font-weight: 700;
}

.step-label[b-sljvm66tda] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    text-align: center;
}

.step-item.active .step-label[b-sljvm66tda] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.review-content[b-sljvm66tda] {
    padding: var(--space-xl);
    min-height: 450px;
    background: var(--color-bg-surface, #ffffff);
}

.form-label[b-sljvm66tda] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
}

.form-label.required[b-sljvm66tda]::after {
    content: ' *';
    color: var(--color-error);
}

input[type="number"][b-sljvm66tda]::-webkit-inner-spin-button,
input[type="number"][b-sljvm66tda]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"][b-sljvm66tda] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-text[b-sljvm66tda] {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER - Gradient header with decorative circles
   ═══════════════════════════════════════════════════════════════ */
.hero-banner[b-sljvm66tda] {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
    color: white;
}

.hero-banner[b-sljvm66tda]::before,
.hero-banner[b-sljvm66tda]::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-banner[b-sljvm66tda]::before {
    width: 200px;
    height: 200px;
    top: -80px;
    right: -60px;
}

.hero-banner[b-sljvm66tda]::after {
    width: 120px;
    height: 120px;
    bottom: -40px;
    right: 100px;
}

.hero-banner-content[b-sljvm66tda] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-kicker[b-sljvm66tda] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.hero-title[b-sljvm66tda] {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.hero-subtitle[b-sljvm66tda] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Fira Code', 'Consolas', monospace;
}

.hero-cost-badge[b-sljvm66tda] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: center;
    min-width: 140px;
}

.hero-cost-label[b-sljvm66tda] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 4px;
}

.hero-cost-value[b-sljvm66tda] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   INFO CARDS - Rounded corners, subtle borders, icon headers
   ═══════════════════════════════════════════════════════════════ */
.info-card[b-sljvm66tda] {
    background: var(--color-bg-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.info-card-header[b-sljvm66tda] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text-primary, #1f2937);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.icon-wrapper[b-sljvm66tda] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-wrapper.purple[b-sljvm66tda] {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-wrapper.amber[b-sljvm66tda] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.icon-wrapper.cyan[b-sljvm66tda] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.icon-wrapper.green[b-sljvm66tda] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.info-row[b-sljvm66tda] {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.info-row:not(:last-child)[b-sljvm66tda] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.info-row .label[b-sljvm66tda] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-tertiary, #9ca3af);
    margin-bottom: 2px;
}

.info-row .value[b-sljvm66tda] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary, #1f2937);
}

.info-row .value.na[b-sljvm66tda] {
    font-style: italic;
    color: var(--color-text-tertiary, #9ca3af);
}

/* ═══════════════════════════════════════════════════════════════
   COST CARD - Green gradient total cost display
   ═══════════════════════════════════════════════════════════════ */
.cost-card[b-sljvm66tda] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cost-value[b-sljvm66tda] {
    font-size: 36px;
    font-weight: 700;
    color: #047857;
    letter-spacing: -1px;
    margin: 12px 0 4px 0;
}

.cost-label[b-sljvm66tda] {
    font-size: 13px;
    color: #065f46;
    font-weight: 500;
}

.device-details[b-sljvm66tda] {
    margin-top: var(--space-lg);
}

.device-header[b-sljvm66tda] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
}

.device-header:hover[b-sljvm66tda] {
    background: var(--color-bg-hover);
}

.device-count[b-sljvm66tda] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-xs);
    background: var(--color-primary);
    color: var(--color-bg-surface);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.device-body[b-sljvm66tda] {
    padding: var(--space-md);
}

/* Replace Bootstrap margin classes with custom spacing */
.field-spacing[b-sljvm66tda] {
    margin-bottom: var(--space-lg);
}

.mb-4[b-sljvm66tda] {
    margin-bottom: var(--space-lg);
}

/* 
 * REMOVED: Global input overrides that were fighting MudBlazor defaults.
 * MudBlazor's outlined inputs work correctly out of the box.
 * The double-border and label overlap issues were caused by global CSS in app.css.
 */

.review-content[b-sljvm66tda] {
    padding: var(--space-xl);
    min-height: 450px;
    background: var(--color-bg-surface, #ffffff);
}

.review-actions[b-sljvm66tda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}

.btn-cancel[b-sljvm66tda] {
    padding: var(--space-sm) var(--space-xl);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-cancel:hover[b-sljvm66tda] {
    background: var(--color-bg-secondary);
    border-color: var(--color-text-secondary);
}

.btn-next[b-sljvm66tda] {
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    color: var(--color-bg-surface);
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-next:hover[b-sljvm66tda] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-next:disabled[b-sljvm66tda] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.alert[b-sljvm66tda] {
    border-radius: var(--border-radius-md);
    border: none;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.alert-warning[b-sljvm66tda] {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    color: var(--color-warning-text);
}

.alert-success[b-sljvm66tda] {
    background: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    color: var(--color-success-text);
}

.alert-danger[b-sljvm66tda] {
    background: var(--color-error-bg);
    border-left: 4px solid var(--color-error);
    color: var(--color-error-text);
}

.btn[b-sljvm66tda] {
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.space-y-4 > * + *[b-sljvm66tda] {
    margin-top: var(--space-lg);
}

.space-y-6 > * + *[b-sljvm66tda] {
    margin-top: var(--space-xl);
}

.section-header[b-sljvm66tda] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.section-subtitle[b-sljvm66tda] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

/* Hero Banner Card */
.hero-banner[b-sljvm66tda] {
    position: relative;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.25);
}

.hero-banner[b-sljvm66tda]::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.hero-banner[b-sljvm66tda]::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.hero-banner-content[b-sljvm66tda] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-kicker[b-sljvm66tda] {
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 8px;
}

.hero-title[b-sljvm66tda] {
    color: white;
    font-weight: 700;
    font-size: 1.75rem;
    margin: 0 0 8px 0;
}

.hero-subtitle[b-sljvm66tda] {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.hero-cost-badge[b-sljvm66tda] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.hero-cost-label[b-sljvm66tda] {
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    margin-bottom: 4px;
}

.hero-cost-value[b-sljvm66tda] {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Enhanced Info Cards */
.info-card[b-sljvm66tda] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: var(--space-lg);
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.info-card-header[b-sljvm66tda] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    font-weight: 600;
    color: #111827;
}

.info-card-header .icon-wrapper[b-sljvm66tda] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-header .icon-wrapper.purple[b-sljvm66tda] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.info-card-header .icon-wrapper.amber[b-sljvm66tda] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.info-card-header .icon-wrapper.cyan[b-sljvm66tda] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.info-card-header .icon-wrapper.green[b-sljvm66tda] {
    background: #10b981;
}

.info-row[b-sljvm66tda] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.info-row:last-child[b-sljvm66tda] {
    margin-bottom: 0;
}

.info-row .label[b-sljvm66tda] {
    color: #6b7280;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-row .value[b-sljvm66tda] {
    color: #111827;
    font-weight: 500;
}

.info-row .value.na[b-sljvm66tda] {
    color: #9ca3af;
    font-style: italic;
    font-weight: 400;
}

/* Cost Card (Green Gradient) */
.cost-card[b-sljvm66tda] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.cost-card .cost-value[b-sljvm66tda] {
    color: #059669;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 4px;
}

.cost-card .cost-label[b-sljvm66tda] {
    color: #047857;
    font-size: 13px;
}

@media (max-width: 768px) {
    .review-header[b-sljvm66tda] {
        padding: var(--space-lg);
    }

    .review-title[b-sljvm66tda] {
        font-size: var(--font-size-xl);
    }

    .progress-stepper[b-sljvm66tda] {
        padding: var(--space-lg) var(--space-md);
    }

    .stepper-container[b-sljvm66tda] {
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .step-item[b-sljvm66tda] {
        flex-direction: row;
        flex: 1 1 45%;
    }

    .review-content[b-sljvm66tda] {
        padding: var(--space-lg);
    }

    .review-actions[b-sljvm66tda] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .btn-cancel[b-sljvm66tda],
    .btn-next[b-sljvm66tda] {
        width: 100%;
    }
}
/* /Components/Pages/AdminDeviceConfigManagement.razor.rz.scp.css */
/* Admin Device Config Management Styles */
.config-fleet-page[b-utkzrtnd8t] {
    --config-bg: #f5f7fb;
    --config-surface: #ffffff;
    --config-line: #e2e8f0;
    --config-ink: #0f172a;
    --config-muted: #64748b;
    --config-blue: #2484d1;
    --config-blue-tint: #e9f2fc;
    --config-orange: #ff962c;
    max-width: 1840px;
    width: 96%;
    min-height: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--config-ink);
    background:
        radial-gradient(900px 360px at 90% -10%, rgba(255, 150, 44, 0.08), transparent 60%),
        radial-gradient(1000px 400px at -8% -15%, rgba(36, 132, 209, 0.12), transparent 55%),
        var(--config-bg);
}

.config-fleet-header[b-utkzrtnd8t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 1rem;
}

.config-fleet-header-main[b-utkzrtnd8t] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.config-fleet-icon[b-utkzrtnd8t] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--config-blue);
    background: var(--config-blue-tint);
}

.config-fleet-title[b-utkzrtnd8t] {
    margin: 0 0 3px;
    font-size: 1.05rem;
    line-height: 1.15;
    font-weight: 800;
}

.config-fleet-subtitle[b-utkzrtnd8t] {
    margin: 0;
    color: var(--config-muted);
    font-size: 0.78rem;
}

.config-loading-panel[b-utkzrtnd8t],
.config-error-panel[b-utkzrtnd8t] {
    margin-bottom: 1rem;
    padding: 14px 16px;
    border: 1px solid var(--config-line);
    border-radius: 8px;
    background: var(--config-surface);
}

.config-error-panel[b-utkzrtnd8t] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400e;
    border-color: #fed7aa;
    background: #fffaf3;
}

.config-filter-panel[b-utkzrtnd8t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--config-line);
    border-radius: 8px;
    background: var(--config-surface);
}

.config-search-bar[b-utkzrtnd8t] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d8e2ef;
    border-radius: 7px;
    background: #f8fbff;
    color: var(--config-muted);
}

.config-search-bar input[b-utkzrtnd8t] {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--config-ink);
    font-size: 0.8rem;
}

.config-results-meta[b-utkzrtnd8t] {
    margin: 0 0 10px;
    color: var(--config-muted);
    font-size: 0.75rem;
}

.config-table-wrap[b-utkzrtnd8t] {
    overflow-x: auto;
    border: 1px solid var(--config-line);
    border-radius: 8px;
    background: var(--config-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.config-device-table[b-utkzrtnd8t] {
    width: 100%;
    min-width: 1400px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--config-ink);
}

.config-device-table th[b-utkzrtnd8t] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--config-line);
    background: #f8fafc;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.config-device-table td[b-utkzrtnd8t] {
    height: 66px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8eff8;
    vertical-align: middle;
    font-size: 0.75rem;
}

.config-device-table tbody tr:last-child td[b-utkzrtnd8t] {
    border-bottom: 0;
}

.config-device-table tbody tr:hover[b-utkzrtnd8t] {
    background: #f8fbff;
}

.config-device-table tbody tr:hover td[b-utkzrtnd8t] {
    border-bottom-color: #d6e3f3;
}

.config-device-table th:nth-child(1)[b-utkzrtnd8t],
.config-device-table td:nth-child(1)[b-utkzrtnd8t] { width: 20%; }
.config-device-table th:nth-child(2)[b-utkzrtnd8t],
.config-device-table td:nth-child(2)[b-utkzrtnd8t] { width: 16%; }
.config-device-table th:nth-child(3)[b-utkzrtnd8t],
.config-device-table td:nth-child(3)[b-utkzrtnd8t] { width: 8%; }
.config-device-table th:nth-child(4)[b-utkzrtnd8t],
.config-device-table td:nth-child(4)[b-utkzrtnd8t] { width: 10%; }
.config-device-table th:nth-child(5)[b-utkzrtnd8t],
.config-device-table td:nth-child(5)[b-utkzrtnd8t] { width: 10%; }
.config-device-table th:nth-child(6)[b-utkzrtnd8t],
.config-device-table td:nth-child(6)[b-utkzrtnd8t] { width: 10%; }
.config-device-table th:nth-child(7)[b-utkzrtnd8t],
.config-device-table td:nth-child(7)[b-utkzrtnd8t] { width: 8%; }
.config-device-table th:nth-child(8)[b-utkzrtnd8t],
.config-device-table td:nth-child(8)[b-utkzrtnd8t] { width: 9%; }

.config-action-column[b-utkzrtnd8t] {
    width: 64px !important;
    text-align: center !important;
}

.config-history-column[b-utkzrtnd8t] {
    width: 48px !important;
    text-align: center !important;
}

.config-mobile-action-row[b-utkzrtnd8t] {
    display: none;
}

.config-device-name[b-utkzrtnd8t],
.config-cell-primary[b-utkzrtnd8t] {
    overflow: hidden;
    color: var(--config-ink);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-device-serial[b-utkzrtnd8t] {
    overflow: hidden;
    color: var(--config-ink);
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-device-name[b-utkzrtnd8t] {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 400;
}

.config-device-subtext[b-utkzrtnd8t],
.config-cell-secondary[b-utkzrtnd8t],
.config-device-id[b-utkzrtnd8t] {
    overflow: hidden;
    color: var(--config-muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-device-id[b-utkzrtnd8t] {
    color: #94a3b8;
    font-family: monospace;
}

.config-status-badge[b-utkzrtnd8t],
.config-tag-chip[b-utkzrtnd8t] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.config-status-active[b-utkzrtnd8t] {
    color: #047857;
    background: #d1fae5;
}

.config-status-inactive[b-utkzrtnd8t] {
    color: #64748b;
    background: #e2e8f0;
}

.config-tag-list[b-utkzrtnd8t] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 170px;
}

.config-tag-chip[b-utkzrtnd8t] {
    overflow: hidden;
    color: #075985;
    border: 1px solid #bae6fd;
    background: #f0f9ff;
    text-overflow: ellipsis;
}

.config-health-badge[b-utkzrtnd8t] {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}

.config-health-current[b-utkzrtnd8t] { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.config-health-delayed[b-utkzrtnd8t] { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.config-health-stale[b-utkzrtnd8t] { color: #9a3412; border-color: #fed7aa; background: #fff7ed; }
.config-health-offline[b-utkzrtnd8t] { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.config-health-unknown[b-utkzrtnd8t] { color: #475569; border-color: #cbd5e1; background: #f8fafc; }

.config-health-history-current[b-utkzrtnd8t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #dbe5f4;
    border-radius: 8px;
    background: #f8fbff;
    color: #475569;
    font-size: 0.76rem;
}

.config-health-history-table-wrap[b-utkzrtnd8t] {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--config-line);
    border-radius: 8px;
}

.config-health-history-table[b-utkzrtnd8t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.config-health-history-table th[b-utkzrtnd8t],
.config-health-history-table td[b-utkzrtnd8t] {
    padding: 8px 10px;
    border-bottom: 1px solid #e8eff8;
    text-align: left;
    white-space: nowrap;
}

.config-health-history-table th[b-utkzrtnd8t] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.68rem;
    text-transform: uppercase;
}
}

.device-management-container[b-utkzrtnd8t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
}

.page-header[b-utkzrtnd8t] {
    margin-bottom: var(--space-xl);
}

.page-title[b-utkzrtnd8t] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin-bottom: var(--space-xs);
}

.page-subtitle[b-utkzrtnd8t] {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.search-bar[b-utkzrtnd8t] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.search-input[b-utkzrtnd8t] {
    flex: 1;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
}

.search-input:focus[b-utkzrtnd8t] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.devices-grid[b-utkzrtnd8t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 10px;
}

.device-card[b-utkzrtnd8t] {
    background: var(--config-surface);
    border: 1px solid var(--config-line);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.device-card:hover[b-utkzrtnd8t] {
    transform: none;
    border-color: #9cc9ee;
    box-shadow: 0 4px 12px rgba(36, 132, 209, 0.08);
}

.device-card-row[b-utkzrtnd8t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.device-icon[b-utkzrtnd8t] {
    width: 36px;
    height: 36px;
    background: var(--config-blue-tint);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--config-blue);
    flex-shrink: 0;
}

.device-main[b-utkzrtnd8t] {
    flex: 1;
    min-width: 0;
}

.device-name[b-utkzrtnd8t] {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--config-ink);
    margin-bottom: 2px;
}

.device-id[b-utkzrtnd8t] {
    font-size: 0.68rem;
    color: var(--config-muted);
    font-family: monospace;
}

.device-info[b-utkzrtnd8t] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.info-item[b-utkzrtnd8t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.info-label[b-utkzrtnd8t] {
    font-size: 0.62rem;
    color: var(--config-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
}

.info-value[b-utkzrtnd8t] {
    font-size: 0.72rem;
    color: var(--config-ink);
    font-weight: 700;
}

.device-details-row[b-utkzrtnd8t] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--config-line);
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.detail-chip[b-utkzrtnd8t] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-full);
    font-size: 0.68rem;
    color: var(--config-muted);
}

.device-tag-chip[b-utkzrtnd8t] {
    color: #075985;
    border: 1px solid #bae6fd;
    background: #f0f9ff;
}

.detail-chip.venue-type[b-utkzrtnd8t] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge[b-utkzrtnd8t] {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.status-badge.status-active[b-utkzrtnd8t] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge.status-inactive[b-utkzrtnd8t] {
    background: var(--color-inactive);
    color: var(--color-inactive-text);
}

.configure-btn[b-utkzrtnd8t] {
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, #5b21b6 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-base);
    flex-shrink: 0;
}

.configure-btn:hover[b-utkzrtnd8t] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.modal-overlay[b-utkzrtnd8t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-lg);
}

.modal-content[b-utkzrtnd8t] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.modal-header[b-utkzrtnd8t] {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title[b-utkzrtnd8t] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin: 0;
}

.close-btn[b-utkzrtnd8t] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    line-height: 1;
    transition: var(--transition-fast);
}

.close-btn:hover[b-utkzrtnd8t] {
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .config-action-column[b-utkzrtnd8t],
    .config-history-column[b-utkzrtnd8t] {
        display: none;
    }

    .config-mobile-action-row[b-utkzrtnd8t] {
        display: table-row;
    }

    .config-mobile-action-row td[b-utkzrtnd8t] {
        height: auto;
        padding: 6px 12px 10px;
        border-top: 0;
        border-bottom: 1px solid #dbe4ee;
        background: #ffffff;
    }

    .device-management-container[b-utkzrtnd8t] {
        padding: var(--space-md);
    }

    .page-title[b-utkzrtnd8t] {
        font-size: var(--font-size-2xl);
    }

    .device-card[b-utkzrtnd8t] {
        padding: var(--space-md);
    }

    .device-card-row[b-utkzrtnd8t] {
        flex-direction: column;
        align-items: stretch;
    }

    .device-info[b-utkzrtnd8t] {
        flex-direction: column;
        gap: var(--space-md);
    }

    .configure-btn[b-utkzrtnd8t] {
        width: 100%;
    }

    .modal-content[b-utkzrtnd8t] {
        max-height: 100vh;
        border-radius: 0;
    }
}
/* /Components/Pages/AdminDeviceManagement.razor.rz.scp.css */
/* ============================================
   ADMIN DEVICE MANAGEMENT PAGE - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

.device-management-container[b-1myayaz0vb] {
    padding: var(--page-padding);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.page-header[b-1myayaz0vb] {
    margin-bottom: var(--space-xl);
}

.page-header h1[b-1myayaz0vb] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-sm) 0;
}

.page-header p[b-1myayaz0vb] {
    color: var(--color-text-muted);
    margin: 0;
}

.search-bar[b-1myayaz0vb] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 12px var(--space-md);
    margin-bottom: var(--section-gap);
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-bar input[b-1myayaz0vb] {
    border: none;
    outline: none;
    flex: 1;
    font-size: var(--font-size-base);
}

.devices-grid[b-1myayaz0vb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.device-card[b-1myayaz0vb] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-2xl);
    padding: var(--card-padding) var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.device-card:hover[b-1myayaz0vb] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.device-card-row[b-1myayaz0vb] {
    display: flex;
    align-items: center;
    gap: var(--card-padding);
}

.device-icon[b-1myayaz0vb] {
    width: 48px;
    height: 48px;
    background: var(--color-blue-light);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.device-icon i[b-1myayaz0vb] {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.device-main[b-1myayaz0vb] {
    flex: 1;
    min-width: 0;
}

.device-name[b-1myayaz0vb] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 4px 0;
}

.device-id[b-1myayaz0vb] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.device-info[b-1myayaz0vb] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.info-item[b-1myayaz0vb] {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.info-label[b-1myayaz0vb] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.info-value[b-1myayaz0vb] {
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
}

.device-details-row[b-1myayaz0vb] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: 12px;
    border-top: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

.detail-chip[b-1myayaz0vb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.detail-chip i[b-1myayaz0vb] {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
}

.detail-chip.venue-type[b-1myayaz0vb] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.detail-chip.venue-type i[b-1myayaz0vb] {
    color: var(--color-success);
}

.device-location[b-1myayaz0vb] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-badge[b-1myayaz0vb] {
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.status-active[b-1myayaz0vb] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-inactive[b-1myayaz0vb] {
    background: var(--color-inactive);
    color: var(--color-inactive-text);
}

.configure-btn[b-1myayaz0vb] {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: 10px var(--card-padding);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.configure-btn:hover[b-1myayaz0vb] {
    background: var(--color-primary-hover);
}

.config-btn:hover[b-1myayaz0vb] {
    background: var(--color-primary-hover);
}

.modal-overlay[b-1myayaz0vb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--card-padding);
}

.modal-content[b-1myayaz0vb] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-3xl);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.modal-header[b-1myayaz0vb] {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h5[b-1myayaz0vb] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-main);
}

.modal-body[b-1myayaz0vb] {
    padding: var(--space-lg);
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.close-btn[b-1myayaz0vb] {
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
}

.close-btn:hover[b-1myayaz0vb] {
    background: var(--color-bg-active);
}
/* /Components/Pages/AdminImportedInventoryManagement.razor.rz.scp.css */
.imports-page[b-uyaxdsnf34] {
    background: var(--color-bg-app);
    min-height: 100vh;
    padding: var(--space-lg);
}

.imports-container[b-uyaxdsnf34] {
    max-width: 1200px;
    margin: 0 auto;
}

.alert-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.alert-card.error[b-uyaxdsnf34] {
    border-left: 4px solid var(--color-error);
}

.alert-card.error i[b-uyaxdsnf34] {
    color: var(--color-error);
    font-size: var(--font-size-xl);
}

.page-header[b-uyaxdsnf34] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.header-left[b-uyaxdsnf34] {
    flex: 1;
}

.page-title[b-uyaxdsnf34] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-title i[b-uyaxdsnf34] {
    color: var(--color-primary);
}

.page-subtitle[b-uyaxdsnf34] {
    color: var(--color-text-muted);
    margin: var(--space-2xs) 0 0 0;
    font-size: var(--font-size-sm);
}

.header-stats[b-uyaxdsnf34] {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.stat-chip[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-full);
    padding: var(--space-xs) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    transition: all var(--transition-base);
}

.stat-chip:hover[b-uyaxdsnf34] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.stat-chip.active[b-uyaxdsnf34] {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.stat-chip.warning .stat-value[b-uyaxdsnf34] { color: var(--color-warning); }
.stat-chip.success .stat-value[b-uyaxdsnf34] { color: var(--color-success); }
.stat-chip.error .stat-value[b-uyaxdsnf34] { color: var(--color-error); }

.stat-chip.active .stat-value[b-uyaxdsnf34] { color: var(--color-white); }

.stat-label[b-uyaxdsnf34] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.stat-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.action-bar[b-uyaxdsnf34] {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    align-items: center;
}

.search-box[b-uyaxdsnf34] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 500px;
}

.search-box i.bi-search[b-uyaxdsnf34] {
    position: absolute;
    left: var(--space-md);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    pointer-events: none;
}

.search-box input[b-uyaxdsnf34] {
    width: 100%;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.search-box input:focus[b-uyaxdsnf34] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-box input[b-uyaxdsnf34]::placeholder {
    color: var(--color-text-light);
}

.search-box .clear-search[b-uyaxdsnf34] {
    position: absolute;
    right: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--color-text-light);
    cursor: pointer;
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-base);
}

.search-box .clear-search:hover[b-uyaxdsnf34] {
    background: var(--color-bg-app);
    color: var(--color-text-main);
}

.btn-approve-all[b-uyaxdsnf34] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-base);
}

.btn-approve-all:hover[b-uyaxdsnf34] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.btn-refresh[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-base);
}

.btn-refresh:hover[b-uyaxdsnf34] {
    background: var(--color-primary);
    color: var(--color-white);
}

.loading-indicator[b-uyaxdsnf34] {
    margin: var(--space-lg) 0;
}

.empty-state[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: 60px 40px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-state i[b-uyaxdsnf34] {
    font-size: 64px;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.empty-state h3[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
    margin: 0 0 var(--space-xs) 0;
}

.empty-state p[b-uyaxdsnf34] {
    color: var(--color-text-secondary);
    margin: 0;
}

/* Horizontal Card List - Provider Style */
.imports-list[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.import-card-horizontal[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.import-card-horizontal:hover[b-uyaxdsnf34] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-light);
}

.import-card-icon[b-uyaxdsnf34] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-primary-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.import-card-content[b-uyaxdsnf34] {
    flex: 1;
    min-width: 0;
}

.import-header-row[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.import-info[b-uyaxdsnf34] {
    min-width: 0;
    flex: 1;
}

.import-title-row[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xs);
}

.import-title[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-subtitle[b-uyaxdsnf34] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.import-meta[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.import-meta-item[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    white-space: nowrap;
}

.import-meta-active[b-uyaxdsnf34] {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.import-meta-divider[b-uyaxdsnf34] {
    color: var(--color-border);
}

.import-card-end[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.import-uploader-info[b-uyaxdsnf34],
.import-date-info[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.uploader-label[b-uyaxdsnf34],
.date-label[b-uyaxdsnf34] {
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.uploader-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.date-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.import-actions[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.action-btn-icon[b-uyaxdsnf34] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.action-btn-icon.view[b-uyaxdsnf34] {
    color: var(--color-primary);
    border-color: var(--color-blue-border);
    background: var(--color-blue-light);
}

.action-btn-icon.view:hover[b-uyaxdsnf34] {
    background: var(--color-info-bg);
    border-color: var(--color-blue-border);
}

.action-btn-icon.approve[b-uyaxdsnf34] {
    color: var(--color-success-text);
    border-color: var(--color-success-bg);
    background: var(--color-success-bg);
}

.action-btn-icon.approve:hover[b-uyaxdsnf34] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.action-btn-icon.reject[b-uyaxdsnf34] {
    color: var(--color-error);
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
}

.action-btn-icon.reject:hover[b-uyaxdsnf34] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon.delete[b-uyaxdsnf34] {
    color: var(--color-error);
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
}

.action-btn-icon.delete:hover[b-uyaxdsnf34] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon.download[b-uyaxdsnf34] {
    color: var(--color-primary);
    border-color: var(--color-primary-bg);
    background: var(--color-primary-bg);
}

.action-btn-icon.download:hover[b-uyaxdsnf34] {
    background: var(--color-info-bg);
    border-color: var(--color-primary);
}

.action-btn-icon:disabled[b-uyaxdsnf34] {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-badge[b-uyaxdsnf34] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--border-radius-md);
}

.status-badge.pending[b-uyaxdsnf34] {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.status-badge.approved[b-uyaxdsnf34] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge.rejected[b-uyaxdsnf34] {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

/* Detail View */
.btn-back[b-uyaxdsnf34] {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-md);
}

.btn-back:hover[b-uyaxdsnf34] {
    text-decoration: underline;
}

.detail-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.detail-header[b-uyaxdsnf34] {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.detail-title[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-title h2[b-uyaxdsnf34] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-main);
    margin: 0;
}

.detail-grid[b-uyaxdsnf34] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.detail-item[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.detail-item.full-width[b-uyaxdsnf34] {
    grid-column: 1 / -1;
}

.detail-label[b-uyaxdsnf34] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.detail-value[b-uyaxdsnf34] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.detail-value.mono[b-uyaxdsnf34] {
    font-family: monospace;
    font-size: var(--font-size-xs);
}

.detail-value.highlight[b-uyaxdsnf34] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.detail-value .success[b-uyaxdsnf34] {
    color: var(--color-success);
}

.detail-value .warning[b-uyaxdsnf34] {
    color: var(--color-warning);
}

.detail-actions[b-uyaxdsnf34] {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.btn-approve[b-uyaxdsnf34] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-text) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-md) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-approve:hover[b-uyaxdsnf34] {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-reject[b-uyaxdsnf34] {
    background: linear-gradient(135deg, #ef4444 0%, var(--color-error) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-md) var(--space-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-reject:hover[b-uyaxdsnf34] {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-download-csv[b-uyaxdsnf34] {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.btn-download-csv:hover:not(:disabled)[b-uyaxdsnf34] {
    background: var(--color-primary-strong);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-download-csv:disabled[b-uyaxdsnf34] {
    opacity: 0.6;
    cursor: not-allowed;
}

.stats-grid[b-uyaxdsnf34] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.stats-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.stats-card h3[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.stats-card h3 i[b-uyaxdsnf34] {
    color: var(--color-primary);
}

.stats-list[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stats-row[b-uyaxdsnf34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-sm);
}

.stats-label[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.stats-value[b-uyaxdsnf34] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: var(--color-blue-light);
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-md);
}

.sample-devices-card[b-uyaxdsnf34] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.sample-devices-card h3[b-uyaxdsnf34] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.sample-devices-card h3 i[b-uyaxdsnf34] {
    color: var(--color-primary);
}

.devices-table-wrapper[b-uyaxdsnf34] {
    overflow-x: auto;
}

.devices-table[b-uyaxdsnf34] {
    width: 100%;
    border-collapse: collapse;
}

.devices-table th[b-uyaxdsnf34] {
    text-align: left;
    padding: var(--space-md);
    background: var(--color-bg-hover);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-border-light);
}

.devices-table td[b-uyaxdsnf34] {
    padding: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border-light);
}

.devices-table tr:hover td[b-uyaxdsnf34] {
    background: var(--color-bg-hover);
}

.devices-table .mono[b-uyaxdsnf34] {
    font-family: monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.status-pill[b-uyaxdsnf34] {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--border-radius-md);
}

.status-pill.active[b-uyaxdsnf34] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-pill.inactive[b-uyaxdsnf34] {
    background: var(--color-inactive);
    color: var(--color-text-secondary);
}

/* Recent import processing indicator (list view) */
.processing-indicator[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 3px 8px;
    width: fit-content;
}

/* Recent import banner (detail view) */
.recent-import-banner[b-uyaxdsnf34] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 14px 18px;
    margin-bottom: var(--space-md);
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-left: 4px solid #3b82f6;
    border-radius: var(--border-radius-md);
}

.recent-import-banner-icon[b-uyaxdsnf34] {
    flex-shrink: 0;
}

.recent-import-banner-text[b-uyaxdsnf34] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.recent-import-banner-text strong[b-uyaxdsnf34] {
    font-size: 13px;
    color: #1e40af;
}

.recent-import-banner-text span[b-uyaxdsnf34] {
    font-size: 12px;
    color: #3b82f6;
    line-height: 1.4;
}
/* /Components/Pages/AdminImportInventory.razor.rz.scp.css */
.upload-page[b-ru1lw08j3d] {
    padding: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}

.page-header[b-ru1lw08j3d] {
    margin-bottom: var(--space-2xl);
}

.page-header h1[b-ru1lw08j3d] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.page-header p[b-ru1lw08j3d] {
    color: var(--color-text-muted);
    margin: 0;
}

.upload-card[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.section-title[b-ru1lw08j3d] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-lg) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-title i[b-ru1lw08j3d] {
    color: var(--color-primary);
}

.form-group[b-ru1lw08j3d] {
    margin-bottom: var(--space-lg);
}

.form-label[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    margin-bottom: var(--space-xs);
    display: block;
}

.provider-select[b-ru1lw08j3d] {
    width: 100%;
    padding: 14px var(--space-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    background: var(--color-bg-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.provider-select:focus[b-ru1lw08j3d] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.mapping-info[b-ru1lw08j3d] {
    background: var(--color-blue-light);
    border: 1px solid var(--color-blue-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.mapping-info h4[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue-dark);
    margin: 0 0 var(--space-md) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.mapping-grid[b-ru1lw08j3d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-xs);
}

.mapping-item[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.mapping-item strong[b-ru1lw08j3d] {
    color: var(--color-blue-dark);
}

.mapping-item span[b-ru1lw08j3d] {
    color: var(--color-text-muted);
}

.file-upload-zone[b-ru1lw08j3d] {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 40px;
    text-align: center;
    background: var(--color-bg-hover);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.file-upload-zone:hover[b-ru1lw08j3d] {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}

.file-upload-zone.has-file[b-ru1lw08j3d] {
    border-color: var(--color-success);
    background: var(--color-success-light);
}

.upload-icon[b-ru1lw08j3d] {
    width: 48px;
    height: 48px;
    background: var(--color-blue-light);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.upload-icon i[b-ru1lw08j3d] {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.file-info[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.file-chip[b-ru1lw08j3d] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-upload[b-ru1lw08j3d] {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 14px 28px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-fast);
    margin-top: var(--space-lg);
}

.btn-upload:hover:not(:disabled)[b-ru1lw08j3d] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.btn-upload:disabled[b-ru1lw08j3d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.result-card[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.result-header[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.result-icon[b-ru1lw08j3d] {
    width: 40px;
    height: 40px;
    background: var(--color-success-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-icon i[b-ru1lw08j3d] {
    color: var(--color-success);
    font-size: var(--font-size-lg);
}

.result-title[b-ru1lw08j3d] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

.result-grid[b-ru1lw08j3d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.result-item[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
}

.result-item-label[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xs);
}

.result-item-value[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.warning-box[b-ru1lw08j3d] {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.warning-box h4[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning-dark);
    margin: 0 0 var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.warning-box p[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    color: var(--color-warning-dark);
    margin: 0;
}

.btn-outline[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-outline:hover[b-ru1lw08j3d] {
    background: var(--color-blue-light);
}

/* Validation Preview Styles */
.validation-card[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-lg);
}

.validation-header[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap; 
    gap: var(--space-md);
}

.validation-title[b-ru1lw08j3d] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-download-report[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); 
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex; 
    align-items: center;
    gap: 6px; 
    margin-left: 12px; 
    transition: all var(--transition-fast);
}

.btn-download-report:hover[b-ru1lw08j3d] {
    background: var(--color-bg-dim);
    border-color: var(--color-border-dark);
}
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: var(--space-sm);[b-ru1lw08j3d]
}

.validation-stats[b-ru1lw08j3d] {
    display: flex;
    gap: var(--space-md);
}

.stat-badge[b-ru1lw08j3d] {
    padding: 6px 14px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.stat-badge.valid[b-ru1lw08j3d] {
    background: #d1fae5;
    color: #065f46;
}

.stat-badge.warning[b-ru1lw08j3d] {
    background: #fef3c7;
    color: #92400e;
}

.stat-badge.error[b-ru1lw08j3d] {
    background: #fee2e2;
    color: #991b1b;
}

.validation-summary[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.summary-title[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.issue-list[b-ru1lw08j3d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.issue-item[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    border-left: 3px solid;
}

.issue-item.warning[b-ru1lw08j3d] {
    border-color: var(--color-warning);
}

.issue-item.error[b-ru1lw08j3d] {
    border-color: var(--color-error);
}

.issue-field[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    margin-bottom: var(--space-2xs);
}

.issue-details[b-ru1lw08j3d] {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.preview-table-container[b-ru1lw08j3d] {
    max-height: 400px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

.preview-table[b-ru1lw08j3d] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
}

.preview-table th[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.preview-table td[b-ru1lw08j3d] {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-bg-hover);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-table tr.row-valid[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
}

.preview-table tr.row-warning[b-ru1lw08j3d] {
    background: var(--color-warning-light);
}

.preview-table tr.row-error[b-ru1lw08j3d] {
    background: var(--color-error-light);
}

.preview-table tr:hover[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
}

.cell-warning[b-ru1lw08j3d] {
    background: #fef3c7;
    border-radius: var(--border-radius-xs);
    padding: 2px 6px;
}

.cell-error[b-ru1lw08j3d] {
    background: #fee2e2;
    border-radius: var(--border-radius-xs);
    padding: 2px 6px;
}

.row-status[b-ru1lw08j3d] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.row-status i[b-ru1lw08j3d] {
    font-size: var(--font-size-sm);
}

.row-status.valid i[b-ru1lw08j3d] { color: var(--color-success); }
.row-status.warning i[b-ru1lw08j3d] { color: var(--color-warning); }
.row-status.error i[b-ru1lw08j3d] { color: var(--color-error); }

.validation-actions[b-ru1lw08j3d] {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.btn-validate[b-ru1lw08j3d] {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.btn-validate:hover:not(:disabled)[b-ru1lw08j3d] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.btn-validate:disabled[b-ru1lw08j3d] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-clear[b-ru1lw08j3d] {
    background: var(--color-bg-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.btn-clear:hover[b-ru1lw08j3d] {
    background: var(--color-bg-hover);
    border-color: #cbd5e1;
}

.validation-note[b-ru1lw08j3d] {
    background: var(--color-blue-light);
    border: 1px solid var(--color-blue-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-md) var(--space-md);
    font-size: var(--font-size-xs);
    color: var(--color-blue-dark);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.validation-note i[b-ru1lw08j3d] {
    flex-shrink: 0;
    margin-top: 2px;
}
/* /Components/Pages/AdminProviders.razor.rz.scp.css */
/* Page Layout */
.providers-page[b-eryx8n81pr] {
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-eryx8n81pr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
}

.header-content[b-eryx8n81pr] {
    flex: 1;
}

.page-header-title[b-eryx8n81pr] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.3;
}

.page-header-subtitle[b-eryx8n81pr] {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.btn-primary[b-eryx8n81pr] {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-button-hover);
    transition: var(--transition-fast);
}

.btn-primary:hover[b-eryx8n81pr] {
    background: var(--color-primary-strong);
}

/* Loading State */
.providers-loading[b-eryx8n81pr] {
    padding: var(--space-lg) 0;
}

/* Empty State */
.providers-empty-state[b-eryx8n81pr] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 64px var(--space-lg);
    text-align: center;
}

.empty-icon[b-eryx8n81pr] {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-md);
    border-radius: var(--border-radius-full);
    background: var(--color-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-eryx8n81pr] .empty-icon .mud-icon-root {
    color: var(--color-primary);
}

.text-muted[b-eryx8n81pr] {
    color: var(--color-text-muted);
}

/* Providers List */
.providers-list[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Provider Card */
.provider-card-horizontal[b-eryx8n81pr] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-left: 3px solid transparent;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    position: relative;
}

.provider-card-horizontal:hover[b-eryx8n81pr] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    border-color: var(--color-border-strong);
    border-left-color: var(--color-primary);
    transform: translateY(-1px);
}

.provider-card-icon[b-eryx8n81pr] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(145deg, var(--color-primary-soft) 0%, #dbeafe 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    transition: box-shadow 0.18s ease;
}

.provider-card-horizontal:hover .provider-card-icon[b-eryx8n81pr] {
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
}

.provider-card-content[b-eryx8n81pr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.provider-header-row[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.provider-info[b-eryx8n81pr] {
    min-width: 0;
    flex: 1;
}

.provider-title[b-eryx8n81pr] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.publisher-code-row[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 6px 0 4px;
    flex-wrap: wrap;
}

.publisher-code-label[b-eryx8n81pr] {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.publisher-code-value[b-eryx8n81pr] {
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    letter-spacing: 0.02em;
}

.publisher-code-hint[b-eryx8n81pr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    padding: 2px 8px;
    cursor: default;
    white-space: nowrap;
    transition: background 0.15s;
}

.publisher-code-hint:hover[b-eryx8n81pr] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info);
}

.provider-subtitle[b-eryx8n81pr] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.provider-email[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 0.8rem;
}

[b-eryx8n81pr] .provider-subtitle-icon {
    font-size: 14px !important;
    opacity: 0.55;
    flex-shrink: 0;
}

.provider-meta[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.provider-meta-item[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.provider-devices-chip[b-eryx8n81pr] {
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    transition: background 0.15s;
}

.provider-card-horizontal:hover .provider-devices-chip[b-eryx8n81pr] {
    background: var(--color-primary-soft);
    border-color: rgba(59, 130, 246, 0.28);
    color: var(--color-primary);
}

.provider-meta-active[b-eryx8n81pr] {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.meta-icon[b-eryx8n81pr] {
    font-size: 16px;
    opacity: 0.7;
}

.provider-meta-divider[b-eryx8n81pr] {
    color: var(--color-border-strong);
}

.provider-card-end[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.provider-revenue-share[b-eryx8n81pr],
.provider-last-sync[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.revenue-label[b-eryx8n81pr],
.sync-label[b-eryx8n81pr] {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.revenue-value[b-eryx8n81pr] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.sync-value[b-eryx8n81pr] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.provider-actions[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.action-icon[b-eryx8n81pr] {
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    width: 36px;
    height: 36px;
}

.action-icon:hover[b-eryx8n81pr] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

/* Responsive */
@media (max-width: 900px) {
    .provider-card-horizontal[b-eryx8n81pr] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .provider-header-row[b-eryx8n81pr] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .provider-meta[b-eryx8n81pr] {
        flex-wrap: wrap;
    }

    .provider-card-end[b-eryx8n81pr] {
        width: 100%;
        justify-content: space-between;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--color-border-subtle);
    }
}

@media (max-width: 600px) {
    .page-header[b-eryx8n81pr] {
        flex-direction: column;
        align-items: stretch;
    }

    .providers-page[b-eryx8n81pr] {
        padding: var(--space-md);
    }

    .provider-card-end[b-eryx8n81pr] {
        gap: var(--space-md);
    }

    .provider-revenue-share[b-eryx8n81pr],
    .provider-last-sync[b-eryx8n81pr] {
        align-items: flex-start;
    }
}

/* Discovery Dialog Styles */
.discover-loading[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px var(--space-lg);
    color: var(--color-text-muted);
}

.discover-content[b-eryx8n81pr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.discover-section[b-eryx8n81pr] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
}

.discover-section-title[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-subtle);
}

[b-eryx8n81pr] .discover-section-title .mud-icon-root {
    color: var(--color-primary);
}

.discover-field[b-eryx8n81pr] {
    margin-bottom: var(--space-md);
}

.discover-field:last-child[b-eryx8n81pr] {
    margin-bottom: 0;
}

.discover-label[b-eryx8n81pr] {
    display: block;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.discover-url-box[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    overflow: hidden;
}

.discover-url-box code[b-eryx8n81pr] {
    flex: 1;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    word-break: break-all;
    overflow-wrap: anywhere;
}

.discover-url-box--example[b-eryx8n81pr] {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.discover-url-box--example code[b-eryx8n81pr] {
    color: var(--color-success-text);
}

.discover-code-inline[b-eryx8n81pr] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    background: var(--color-bg-active);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-main);
}

.discover-grid[b-eryx8n81pr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.discover-chips[b-eryx8n81pr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.discover-params-table[b-eryx8n81pr] {
    margin-top: var(--space-sm);
}

[b-eryx8n81pr] .discover-params-table th {
    background: var(--color-bg-hover);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

[b-eryx8n81pr] .discover-params-table td {
    background: var(--color-bg-hover);
}

[b-eryx8n81pr] .discover-params-table code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
}

.discover-notes[b-eryx8n81pr] {
    margin: var(--space-sm) 0 0 0;
    padding-left: 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.discover-notes li[b-eryx8n81pr] {
    margin-bottom: 6px;
}

.discover-notes li:last-child[b-eryx8n81pr] {
    margin-bottom: 0;
}

.action-icon--discover:hover[b-eryx8n81pr] {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

@media (max-width: 600px) {
    .discover-grid[b-eryx8n81pr] {
        grid-template-columns: 1fr;
    }
}

/* Provider Status Styles */
.provider-title-row[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.status-badge[b-eryx8n81pr] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge--enabled[b-eryx8n81pr] {
    background: linear-gradient(135deg, var(--color-success-bg), var(--color-success-bg));
    color: var(--color-success-text);
    border: 1px solid var(--color-success);
}

.status-badge--disabled[b-eryx8n81pr] {
    background: linear-gradient(135deg, var(--color-error-bg), var(--color-error-bg));
    color: var(--color-error-text);
    border: 1px solid var(--color-error);
}

.provider-card--disabled[b-eryx8n81pr] {
    opacity: 0.72;
    border-color: rgba(220, 38, 38, 0.2);
    border-left-color: var(--color-error) !important;
    background: var(--color-error-bg);
}

.provider-card--disabled .provider-card-icon[b-eryx8n81pr] {
    background: var(--color-error-bg);
    border-color: rgba(220, 38, 38, 0.22);
    box-shadow: none;
    color: var(--color-error);
}

.provider-card--disabled .publisher-code-chip[b-eryx8n81pr] {
    background: var(--color-bg-hover);
    border-color: var(--color-border-subtle);
    color: var(--color-text-muted);
}

.provider-disabled-reason[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-sm);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-bg);
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-error-text);
}

.disabled-date[b-eryx8n81pr] {
    font-size: 11px;
    color: var(--color-error);
    margin-left: auto;
}

.provider-status-toggle[b-eryx8n81pr] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-sm);
}

.status-switch[b-eryx8n81pr] {
    margin: 0;
}

.disable-reason-radio[b-eryx8n81pr] {
    margin-bottom: var(--space-sm);
}

.disable-reason-radio:last-child[b-eryx8n81pr] {
    margin-bottom: 0;
}
/* /Components/Pages/AdminUserManagement.razor.rz.scp.css */
/* Users (admin), on the shared AdDesk tokens (design-tokens.css), matching Devices, Earnings and the profile pages */

.au-page[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    color: var(--ad-ink);
}

/* ── Header ── */

.au-head[b-7idb8juceb] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.au-head-icon[b-7idb8juceb] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.au-head-text[b-7idb8juceb] {
    flex: 1;
    min-width: 0;
}

.au-head-text h1[b-7idb8juceb] {
    margin: 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
}

.au-head-text p[b-7idb8juceb] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

/* ── Buttons ── */

.au-btn[b-7idb8juceb] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.au-btn:hover:not(:disabled)[b-7idb8juceb] { border-color: var(--ad-primary); }
.au-btn:disabled[b-7idb8juceb] { opacity: 0.5; cursor: not-allowed; }

.au-btn--primary[b-7idb8juceb] { border-color: var(--ad-primary); background: var(--ad-primary); color: var(--ad-on-primary); }
.au-btn--primary:hover:not(:disabled)[b-7idb8juceb] { background: var(--ad-primary-strong); }
.au-btn--primary:disabled[b-7idb8juceb] { opacity: 1; border-color: var(--ad-disabled); background: var(--ad-disabled); }

.au-btn--warn[b-7idb8juceb] { border-color: var(--ad-warn); background: var(--ad-warn); color: var(--ad-on-primary); }
.au-btn--bad[b-7idb8juceb] { border-color: var(--ad-bad); background: var(--ad-bad); color: var(--ad-on-primary); }
.au-btn--warn:hover:not(:disabled)[b-7idb8juceb],
.au-btn--bad:hover:not(:disabled)[b-7idb8juceb] { filter: brightness(0.92); }

.au-btn--text[b-7idb8juceb] { border-color: transparent; background: none; color: var(--ad-muted); }
.au-btn--text:hover:not(:disabled)[b-7idb8juceb] { border-color: transparent; background: var(--ad-surface-2); color: var(--ad-ink); }
.au-btn--text.is-bad[b-7idb8juceb] { color: var(--ad-bad); }

.au-btn[b-7idb8juceb]  .au-spin { width: 16px !important; height: 16px !important; color: inherit; }

.au-link[b-7idb8juceb] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-primary-strong);
    font: inherit;
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.au-link:hover[b-7idb8juceb] { text-decoration: underline; }

.au-icon[b-7idb8juceb] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.au-icon:hover:not(:disabled)[b-7idb8juceb] { border-color: var(--ad-primary); color: var(--ad-primary-strong); }
.au-icon.is-warn:hover:not(:disabled)[b-7idb8juceb] { border-color: var(--ad-warn); color: var(--ad-warn); background: var(--ad-warn-tint); }
.au-icon.is-good:hover:not(:disabled)[b-7idb8juceb] { border-color: var(--ad-good); color: var(--ad-good); background: var(--ad-good-tint); }
.au-icon.is-bad:hover:not(:disabled)[b-7idb8juceb] { border-color: var(--ad-bad); color: var(--ad-bad); background: var(--ad-bad-tint); }
.au-icon:disabled[b-7idb8juceb] { opacity: 0.35; cursor: not-allowed; }

.au-btn:focus-visible[b-7idb8juceb],
.au-icon:focus-visible[b-7idb8juceb],
.au-link:focus-visible[b-7idb8juceb],
.au-tile:focus-visible[b-7idb8juceb],
.au-seg button:focus-visible[b-7idb8juceb],
.au-pubrow:focus-visible[b-7idb8juceb],
.au-pill:focus-visible[b-7idb8juceb] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* ── Tones (roles and states) ── */

.is-ink[b-7idb8juceb] { --tone: var(--ad-ink); --tone-tint: var(--ad-surface-2); }
.is-primary[b-7idb8juceb] { --tone: var(--ad-primary-strong); --tone-tint: var(--ad-primary-tint); }
.is-live[b-7idb8juceb] { --tone: var(--ad-live); --tone-tint: var(--ad-live-tint); }
.is-good[b-7idb8juceb] { --tone: var(--ad-good); --tone-tint: var(--ad-good-tint); }
.is-orange[b-7idb8juceb] { --tone: var(--ad-orange-strong); --tone-tint: var(--ad-orange-tint); }
.is-warn[b-7idb8juceb] { --tone: var(--ad-warn); --tone-tint: var(--ad-warn-tint); }
.is-bad[b-7idb8juceb] { --tone: var(--ad-bad); --tone-tint: var(--ad-bad-tint); }
.is-neutral[b-7idb8juceb] { --tone: var(--ad-muted); --tone-tint: var(--ad-surface-2); }

/* ── Tiles ── */

.au-tiles[b-7idb8juceb] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.au-tile[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.au-tile:hover[b-7idb8juceb] { border-color: var(--ad-primary); }

.au-tile.is-on[b-7idb8juceb] {
    border-color: var(--ad-primary);
    box-shadow: inset 0 0 0 1px var(--ad-primary);
    background: var(--ad-primary-tint);
}

.au-tile-label[b-7idb8juceb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.au-dot[b-7idb8juceb] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tone);
}

.au-tile-value[b-7idb8juceb] {
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */

.au-toolbar[b-7idb8juceb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.au-search[b-7idb8juceb] {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-muted);
}

.au-search:focus-within[b-7idb8juceb] {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px var(--ad-primary-tint);
}

.au-search input[b-7idb8juceb] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
}

.au-select[b-7idb8juceb] {
    height: 40px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%235B6786' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    appearance: none;
    cursor: pointer;
}

.au-select:focus-visible[b-7idb8juceb] {
    outline: none;
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px var(--ad-primary-tint);
}

.au-seg[b-7idb8juceb] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.au-seg button[b-7idb8juceb] {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ad-muted);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.au-seg button.is-on[b-7idb8juceb] {
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.au-count[b-7idb8juceb] {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── List ── */

.au-list[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    list-style: none;
}

.au-row[b-7idb8juceb] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--ad-line-soft);
}

.au-row:first-child[b-7idb8juceb] { border-top: 0; }
.au-row:hover[b-7idb8juceb] { background: color-mix(in srgb, var(--ad-surface-2) 45%, var(--ad-surface)); }
.au-row.is-off .au-who[b-7idb8juceb],
.au-row.is-off .au-avatar[b-7idb8juceb] { opacity: 0.6; }

.au-avatar[b-7idb8juceb] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tone-tint);
    color: var(--tone);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-bold);
}

.au-avatar--lg[b-7idb8juceb] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: var(--ad-text-lg);
}

.au-who[b-7idb8juceb] { min-width: 0; }

.au-name[b-7idb8juceb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
}

.au-name > span:first-child[b-7idb8juceb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-verified[b-7idb8juceb] { display: inline-flex; color: var(--ad-primary); }
.au-verified[b-7idb8juceb]  .mud-icon-root { font-size: 15px; }

.au-you[b-7idb8juceb] {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
}

.au-email[b-7idb8juceb] {
    overflow: hidden;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-meta[b-7idb8juceb] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 2px;
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
}

.au-meta .is-warn[b-7idb8juceb] { color: var(--ad-warn); font-weight: var(--ad-weight-semibold); }
.au-meta .is-bad[b-7idb8juceb] { color: var(--ad-bad); font-weight: var(--ad-weight-semibold); }

.au-tags[b-7idb8juceb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.au-pill[b-7idb8juceb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 220px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--tone-tint, var(--ad-surface-2));
    color: var(--tone, var(--ad-muted));
    font: inherit;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.au-pill.is-pub[b-7idb8juceb] {
    border: 1px solid var(--ad-line);
    background: var(--ad-surface);
    color: var(--ad-ink);
    cursor: pointer;
}

.au-pill.is-pub:hover[b-7idb8juceb] { border-color: var(--ad-primary); }
.au-pill[b-7idb8juceb]  .mud-icon-root { flex: none; font-size: 14px; color: var(--ad-muted); }

.au-status[b-7idb8juceb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    color: var(--tone);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
}

.au-status i[b-7idb8juceb] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.au-actions[b-7idb8juceb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.au-sep[b-7idb8juceb] {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--ad-line);
}

.au-more[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.au-end[b-7idb8juceb] {
    margin: 0;
    color: var(--ad-faint);
    font-size: var(--ad-text-sm);
    text-align: center;
}

/* ── Cards and empty states ── */

.au-card[b-7idb8juceb] {
    padding: 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.au-empty[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
}

.au-empty-icon[b-7idb8juceb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
}

.au-empty-icon.is-bad[b-7idb8juceb] { background: var(--ad-bad-tint); color: var(--ad-bad); }

.au-empty h2[b-7idb8juceb] { margin: 0; font-size: var(--ad-text-lg); font-weight: var(--ad-weight-bold); }
.au-empty p[b-7idb8juceb] { margin: 0; color: var(--ad-muted); font-size: var(--ad-text-md); }

/* ── Skeletons ── */

.au-sk[b-7idb8juceb] {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ad-line-soft) 25%, var(--ad-surface-2) 50%, var(--ad-line-soft) 75%);
    background-size: 200% 100%;
    animation: au-shimmer-b-7idb8juceb 1.4s ease-in-out infinite;
}

.au-sk-avatar[b-7idb8juceb] { width: 40px; height: 40px; border-radius: 50%; }
.au-sk-lines[b-7idb8juceb] { display: flex; flex-direction: column; gap: 8px; }

@keyframes au-shimmer-b-7idb8juceb {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .au-sk[b-7idb8juceb] { animation: none; }
}

/* ── Dialogs ── */

.au-scrim[b-7idb8juceb] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgb(15 23 42 / 0.45);
}

.au-modal-wrap[b-7idb8juceb] {
    position: fixed;
    inset: 0;
    z-index: 1301;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.au-modal[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
    box-shadow: 0 24px 64px rgb(15 23 42 / 0.25);
    color: var(--ad-ink);
    pointer-events: auto;
}

.au-modal--wide[b-7idb8juceb] { width: min(760px, 100%); }
.au-modal--narrow[b-7idb8juceb] { width: min(460px, 100%); }

.au-modal-head[b-7idb8juceb] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ad-line-soft);
}

.au-modal-icon[b-7idb8juceb] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.au-modal-icon.is-warn[b-7idb8juceb] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.au-modal-icon.is-bad[b-7idb8juceb] { background: var(--ad-bad-tint); color: var(--ad-bad); }

.au-modal-title[b-7idb8juceb] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.au-modal-title h2[b-7idb8juceb] {
    margin: 0;
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-title);
    overflow-wrap: anywhere;
}

.au-modal-title p[b-7idb8juceb] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    overflow-wrap: anywhere;
}

.au-modal-title .au-tags[b-7idb8juceb] {
    justify-content: flex-start;
    margin-top: 8px;
}

.au-modal-body[b-7idb8juceb] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
    overflow-y: auto;
}

.au-modal-foot[b-7idb8juceb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--ad-line-soft);
}

.au-foot-left[b-7idb8juceb] { margin-right: auto; }

.au-section[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.au-section h3[b-7idb8juceb] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    letter-spacing: var(--ad-tracking-caps);
    text-transform: uppercase;
}

.au-facts[b-7idb8juceb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.au-fact[b-7idb8juceb] {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.au-fact.is-full[b-7idb8juceb] { grid-column: 1 / -1; }

.au-fact dt[b-7idb8juceb] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.au-fact dd[b-7idb8juceb] {
    margin: 2px 0 0;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    overflow-wrap: anywhere;
}

.au-fact dd.is-mono[b-7idb8juceb] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-regular);
    color: var(--ad-muted);
}

.au-note[b-7idb8juceb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface-2);
    font-size: var(--ad-text-sm);
}

.au-note[b-7idb8juceb]  .mud-icon-root { flex: none; margin-top: 1px; color: var(--ad-muted); }
.au-note.is-good[b-7idb8juceb] { border-color: color-mix(in srgb, var(--ad-good) 30%, transparent); background: var(--ad-good-tint); }
.au-note.is-good[b-7idb8juceb]  .mud-icon-root { color: var(--ad-good); }
.au-note.is-warn[b-7idb8juceb] { border-color: var(--ad-warn-line); background: var(--ad-warn-tint); }
.au-note.is-warn[b-7idb8juceb]  .mud-icon-root { color: var(--ad-warn); }
.au-note.is-bad[b-7idb8juceb] { border-color: var(--ad-bad-line); background: var(--ad-bad-tint); }
.au-note.is-bad[b-7idb8juceb]  .mud-icon-root { color: var(--ad-bad); }

.au-muted[b-7idb8juceb] { color: var(--ad-muted); }

.au-hint[b-7idb8juceb] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.au-chips[b-7idb8juceb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.au-chip[b-7idb8juceb] {
    padding: 3px 9px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--ad-text-xs);
    color: var(--ad-muted);
}

.au-perms[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.au-perm[b-7idb8juceb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px 8px 12px;
    border: 1px solid var(--ad-line-soft);
    border-radius: 10px;
}

.au-perm.is-on[b-7idb8juceb] {
    border-color: var(--ad-primary-line);
    background: var(--ad-primary-tint);
}

.au-perm b[b-7idb8juceb] {
    display: block;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
}

.au-perm code[b-7idb8juceb] {
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
}

.au-pubbox[b-7idb8juceb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.au-pubsearch[b-7idb8juceb] { flex: none; max-width: none; }

.au-pubpick[b-7idb8juceb] {
    display: grid;
    grid-auto-rows: max-content;
    gap: 6px;
    max-height: min(320px, 42vh);
    overflow-y: auto;
    padding: 2px;
    margin: -2px;
    scrollbar-width: thin;
}

.au-pubrow[b-7idb8juceb] {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 14px 10px 12px;
    border: 1px solid var(--ad-line-soft);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.au-pubrow:hover[b-7idb8juceb] { border-color: var(--ad-line); background: var(--ad-surface-2); }
.au-pubrow.is-on[b-7idb8juceb] { border-color: var(--ad-primary); background: var(--ad-primary-tint); }

.au-radio[b-7idb8juceb] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ad-faint);
    border-radius: 50%;
    background: var(--ad-surface);
}

.is-on > .au-radio[b-7idb8juceb] {
    border-color: var(--ad-primary);
    box-shadow: inset 0 0 0 3px var(--ad-surface);
    background: var(--ad-primary);
}

.au-pubrow-mark[b-7idb8juceb] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
}

.au-pubrow-text[b-7idb8juceb] { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%; }
.au-pubrow-name[b-7idb8juceb] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.au-pubrow-name b[b-7idb8juceb] {
    overflow: hidden;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-pubrow-tag[b-7idb8juceb] {
    flex: none;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ad-good-tint);
    color: var(--ad-good);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
}

.au-pubrow-code[b-7idb8juceb] { color: var(--ad-muted); font-size: var(--ad-text-xs); font-variant-numeric: tabular-nums; }

.au-pubrow-count[b-7idb8juceb] {
    justify-self: end;
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.au-pubrow-count b[b-7idb8juceb] { color: var(--ad-ink); font-size: var(--ad-text-sm); font-weight: var(--ad-weight-semibold); }

.au-pubempty[b-7idb8juceb] { margin: 0; padding: 18px; color: var(--ad-muted); font-size: var(--ad-text-sm); text-align: center; }

@media (max-width: 600px) {
    .au-pubrow-mark[b-7idb8juceb] { display: none; }
    .au-pubrow[b-7idb8juceb] { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* ── Smaller screens ── */

@media (max-width: 1100px) {
    .au-tiles[b-7idb8juceb] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .au-row[b-7idb8juceb] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 10px;
    }

    .au-tags[b-7idb8juceb],
    .au-actions[b-7idb8juceb] {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .au-page[b-7idb8juceb] { padding-top: 16px; }
    .au-head-text h1[b-7idb8juceb] { font-size: var(--ad-text-xl); }
    .au-head .au-btn[b-7idb8juceb] { width: 40px; padding: 0; font-size: 0; gap: 0; }
    .au-tiles[b-7idb8juceb] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .au-search[b-7idb8juceb] { flex-basis: 100%; max-width: none; }
    .au-select[b-7idb8juceb] { flex: 1; }
    .au-count[b-7idb8juceb] { width: 100%; margin-left: 0; }
    .au-row[b-7idb8juceb] { padding: 12px; }
    .au-tags[b-7idb8juceb], .au-actions[b-7idb8juceb] { grid-column: 1 / -1; }
    .au-facts[b-7idb8juceb] { grid-template-columns: minmax(0, 1fr); }
    .au-modal-wrap[b-7idb8juceb] { align-items: flex-end; padding: 0; }
    .au-modal[b-7idb8juceb] { max-height: 92vh; border-radius: 16px 16px 0 0; }
}
/* /Components/Pages/AdminVideoUpload.razor.rz.scp.css */
/* Video Upload Zone Styles */
.upload-zone[b-wd68h9b5md] {
    border: 2px dashed var(--mud-palette-action-hover);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: var(--transition-fast);
    background: var(--color-bg-secondary);
}

.upload-zone.dragging[b-wd68h9b5md] {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.file-item-valid[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-success);
    padding-left: var(--space-md);
}

.file-item-invalid[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-error);
    padding-left: var(--space-md);
}

.file-item-uploading[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-info);
    padding-left: var(--space-md);
}

.file-item-success[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-success);
    padding-left: var(--space-md);
    background: rgba(var(--mud-palette-success-rgb), 0.05);
}

.file-item-failed[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-error);
    padding-left: var(--space-md);
    background: rgba(var(--mud-palette-error-rgb), 0.05);
}

.file-item-warning[b-wd68h9b5md] {
    border-left: 4px solid var(--mud-palette-warning);
    padding-left: var(--space-md);
    background: rgba(var(--mud-palette-warning-rgb), 0.05);
}
/* /Components/Pages/Advertise/AdvertiseNeighborhood.razor.rz.scp.css */
/* Advertiser page (/{state}). Colours come from the shared AdDesk palette (design-tokens.css):
   brand blue for actions, AdDesk orange for the screens on the map. */
.adv[b-siu1l5n70i] {
    --map-other: var(--ad-bg);
    max-width: 1160px;
    margin-inline: auto;
    color: var(--ad-ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.adv h1[b-siu1l5n70i],
.adv h2[b-siu1l5n70i],
.adv h3[b-siu1l5n70i] {
    text-wrap: balance;
}

.adv h1:focus[b-siu1l5n70i],
.adv h2:focus[b-siu1l5n70i],
.adv h3:focus[b-siu1l5n70i] {
    outline: none;
}

.adv-grow[b-siu1l5n70i] {
    flex: 1;
}

/* Buttons and links */
.adv-btn[b-siu1l5n70i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.adv-btn:hover[b-siu1l5n70i] {
    border-color: var(--ad-faint);
}

.adv-btn--primary[b-siu1l5n70i] {
    background: var(--ad-primary);
    border-color: var(--ad-primary);
    color: var(--ad-on-primary);
}

.adv-btn--primary:hover[b-siu1l5n70i] {
    background: var(--ad-primary-strong);
    border-color: var(--ad-primary-strong);
}

.adv-btn:disabled[b-siu1l5n70i] {
    opacity: 0.45;
    cursor: not-allowed;
}

.adv-link[b-siu1l5n70i] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.adv-btn:focus-visible[b-siu1l5n70i],
.adv-link:focus-visible[b-siu1l5n70i],
.adv-sublink:focus-visible[b-siu1l5n70i],
.adv-near a:focus-visible[b-siu1l5n70i],
.adv-field input:focus-visible[b-siu1l5n70i],
.adv-check input:focus-visible[b-siu1l5n70i],
.adv-slider input:focus-visible[b-siu1l5n70i] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* Sub bar under the site header */
.adv-sub[b-siu1l5n70i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 8px;
}

.adv-state[b-siu1l5n70i] {
    padding: 3px 11px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.adv-sublink[b-siu1l5n70i] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.adv-sublink:hover[b-siu1l5n70i] {
    color: var(--ad-ink);
}

/* Hero */
.adv-hero[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: center;
    padding-block: 24px 28px;
}

.adv-hero-text[b-siu1l5n70i] {
    min-width: 0;
}

.adv-eyebrow[b-siu1l5n70i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ad-orange-strong);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.adv-eyebrow[b-siu1l5n70i]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ad-orange);
    box-shadow: 0 0 0 4px var(--ad-orange-tint);
}

.adv h1[b-siu1l5n70i] {
    margin: 12px 0 20px;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.adv h1 em[b-siu1l5n70i] {
    font-style: normal;
    color: var(--ad-primary);
}

/* Headline in two lines: dark, then brand blue with an orange stroke under "they" */
.adv-h1-stack > *[b-siu1l5n70i] {
    display: block;
}

.adv-swash[b-siu1l5n70i] {
    position: relative;
    white-space: nowrap;
}

.adv-swash[b-siu1l5n70i]::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -0.14em;
    height: 0.18em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 50 3, 120 2, 197 6' fill='none' stroke='%23FF962C' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}

.adv-lede[b-siu1l5n70i] {
    max-width: 46ch;
    margin: 0 0 22px;
    color: var(--ad-muted);
    font-size: 1.05rem;
}

.adv-lede b[b-siu1l5n70i] {
    color: var(--ad-ink);
}

/* Address box: the lookup and the button inside one rounded field */
.adv-addr[b-siu1l5n70i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1.5px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    box-shadow: 0 8px 24px -16px rgba(20, 40, 80, 0.4);
}

.adv-addr:focus-within[b-siu1l5n70i] {
    border-color: var(--ad-primary);
}

.adv-addr[b-siu1l5n70i]  .adv-addr-input {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.adv-addr[b-siu1l5n70i]  .adv-addr-input .mud-input-outlined-border {
    border: 0;
}

.adv-addr[b-siu1l5n70i]  .adv-addr-input .mud-input {
    font-size: 1rem;
}

/* It's a search box, not a dropdown: no arrow */
.adv-addr[b-siu1l5n70i]  .adv-addr-input .mud-input-adornment-end:not(:has(.mud-input-clear-button)) {
    display: none;
}

.adv-addr[b-siu1l5n70i]  .adv-addr-input .mud-input-helper-text,
.adv-addr[b-siu1l5n70i]  .adv-addr-input .mud-input-control-helper-container {
    display: none;
}

.adv-addr-hint[b-siu1l5n70i] {
    margin: 8px 0 0;
    color: var(--ad-primary-strong);
    font-size: 0.88rem;
    font-weight: 600;
}

.adv-trust[b-siu1l5n70i] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
    color: var(--ad-muted);
    font-size: 0.86rem;
}

.adv-trust span[b-siu1l5n70i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.adv-trust[b-siu1l5n70i]  .mud-icon-root,
.adv-quote[b-siu1l5n70i]  .mud-icon-root {
    color: var(--ad-good);
}

/* Map card */
.adv-mapcard[b-siu1l5n70i] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 20px;
    background: var(--ad-surface);
    box-shadow: 0 24px 60px -28px rgba(20, 40, 80, 0.35);
}

.adv-mapbar[b-siu1l5n70i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ad-line);
}

.adv-mapbar b[b-siu1l5n70i] {
    min-width: 0;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

/* With an address the bar holds the title, count and maximize: one line, and the title gives way. */
@media (min-width: 561px) {
    .adv-mapbar[b-siu1l5n70i] {
        flex-wrap: nowrap;
    }

    .adv-mapbar b[b-siu1l5n70i] {
        flex: 0 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .adv-mapbar > :not(b)[b-siu1l5n70i] {
        flex: none;
    }

    .adv-mapbar .adv-grow[b-siu1l5n70i] {
        flex: 1 1 0;
    }
}

.adv-legend[b-siu1l5n70i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.adv-legend i[b-siu1l5n70i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ad-orange);
    box-shadow: 0 0 0 3px var(--ad-orange-tint);
}



/* Facts */
.adv-facts[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 34px;
}

.adv-fact[b-siu1l5n70i] {
    padding: 16px 18px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.adv-fact b[b-siu1l5n70i] {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.adv-fact span[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.86rem;
}

/* Panels */
.adv-panel[b-siu1l5n70i] {
    border: 1px solid var(--ad-line);
    border-radius: 18px;
    background: var(--ad-surface);
}

/* Results */
.adv-results[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    overflow: hidden;
    margin-bottom: 24px;
}

.adv-res-main[b-siu1l5n70i] {
    position: relative;
    min-width: 0;
    padding: 22px 24px;
    border-right: 1px solid var(--ad-line);
}

.adv-res-main h2[b-siu1l5n70i] {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.adv-res-main > p[b-siu1l5n70i] {
    margin: 0 0 18px;
    color: var(--ad-muted);
}

.adv-slider[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.adv-slider label[b-siu1l5n70i] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.adv-slider label b[b-siu1l5n70i] {
    color: var(--ad-primary);
    font-variant-numeric: tabular-nums;
}

.adv-slider input[b-siu1l5n70i] {
    width: 100%;
    accent-color: var(--ad-primary);
}

.adv-radius-scale[b-siu1l5n70i] {
    display: flex;
    justify-content: space-between;
    color: var(--ad-faint);
    font-size: 0.75rem;
}

.adv-near[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adv-near a[b-siu1l5n70i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--ad-surface-2);
    color: var(--ad-ink);
    font-size: 0.86rem;
    text-decoration: none;
}

.adv-near a:hover[b-siu1l5n70i] {
    background: var(--ad-primary-tint);
}

.adv-near i[b-siu1l5n70i] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ad-orange);
}

.adv-near span[b-siu1l5n70i] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adv-near em[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.8rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adv-more[b-siu1l5n70i] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 10px 0 0;
    padding-right: 48px; /* clear of the corner expand button */
    color: var(--ad-muted);
    font-size: 0.85rem;
}

.adv-empty[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--ad-orange-tint);
}

.adv-empty span[b-siu1l5n70i] {
    color: var(--ad-muted);
}

.adv-empty a[b-siu1l5n70i] {
    color: var(--ad-primary);
    font-weight: 600;
}

.adv-quote[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    background: var(--ad-surface-2);
}

.adv-quote small[b-siu1l5n70i] {
    color: var(--ad-faint);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.adv-price[b-siu1l5n70i] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.adv-calc[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.adv-quote ul[b-siu1l5n70i] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.88rem;
}

.adv-quote li[b-siu1l5n70i] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Steps */
.adv-steps[b-siu1l5n70i] {
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

.adv-step[b-siu1l5n70i] {
    padding: 22px 24px;
}

.adv-step-h[b-siu1l5n70i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-bottom: 14px;
}

.adv-step-n[b-siu1l5n70i] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.adv-step-h h3[b-siu1l5n70i] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.adv-step-h > span:last-child[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.86rem;
}

.adv-grid2[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.adv-field[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.adv-field label[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.adv-field input[b-siu1l5n70i] {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
}

.adv-field input:focus[b-siu1l5n70i] {
    outline: 0;
    border-color: var(--ad-primary);
}

.adv-field input[aria-invalid="true"][b-siu1l5n70i] {
    border-color: var(--ad-bad);
}

/* Start date: the themed date picker, shaped like the other fields */
.adv-field[b-siu1l5n70i]  .adv-date {
    margin: 0;
}

.adv-field[b-siu1l5n70i]  .adv-date .mud-input-outlined {
    min-height: 44px;
    border-radius: 10px;
    background: var(--ad-surface);
    cursor: pointer;
}

.adv-field[b-siu1l5n70i]  .adv-date .mud-input-outlined-border {
    border-color: var(--ad-line);
    border-radius: 10px;
}

.adv-field[b-siu1l5n70i]  .adv-date input {
    min-height: 0;
    padding: 0 12px;
    border: 0;
    cursor: pointer;
}

.adv-field[b-siu1l5n70i]  .adv-date .mud-input-adornment .mud-icon-button {
    background: none;
    box-shadow: none;
    border: 0;
    color: var(--ad-muted);
}

.adv-field-help[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.8rem;
}

.adv-error[b-siu1l5n70i] {
    color: var(--ad-bad);
    font-size: 0.82rem;
    font-weight: 600;
}

.adv-submit-error[b-siu1l5n70i] {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ad-bad-tint);
    font-size: 0.9rem;
}

.adv-mix[b-siu1l5n70i] {
    margin: 0 0 12px;
    color: var(--ad-muted);
    font-size: 0.9rem;
}

.adv-slots[b-siu1l5n70i] {
    display: grid;
    gap: 14px;
}

.adv-slot[b-siu1l5n70i] {
    min-width: 0;
}

.adv-slot-head[b-siu1l5n70i] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.adv-slot-head span[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-variant-numeric: tabular-nums;
}

.adv-drop[b-siu1l5n70i] {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1.5px dashed var(--ad-line);
    border-radius: 14px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.adv-drop:hover[b-siu1l5n70i],
.adv-drop:focus-within[b-siu1l5n70i] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
}

.adv-drop.has-file[b-siu1l5n70i] {
    border-style: solid;
    border-color: var(--ad-good);
    background: var(--ad-good-tint);
}

/* The real file input covers the drop zone, so dropping a file or clicking anywhere selects it. */
.adv-drop[b-siu1l5n70i]  .adv-drop-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.adv-drop.is-busy[b-siu1l5n70i]  .adv-drop-input {
    cursor: progress;
}

.adv-drop-art[b-siu1l5n70i] {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(160deg, #183B2E, #2F6B4F);
    color: #FFF7E8;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.1;
}

.adv-drop-art.is-tall[b-siu1l5n70i] {
    aspect-ratio: 9 / 16;
    width: 70%;
}

.adv-drop.has-file .adv-drop-art[b-siu1l5n70i] {
    align-items: center;
    justify-content: center;
    background: var(--ad-good);
}

.adv-drop.has-file .adv-drop-art[b-siu1l5n70i]  .mud-icon-root {
    font-size: 2.2rem;
}

/* The uploaded ad itself, shown whole (letterboxed) as it would sit on the screen. */
.adv-drop.has-file .adv-drop-art.has-preview[b-siu1l5n70i] {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--ad-ink);
}

.adv-drop-art.has-preview img[b-siu1l5n70i],
.adv-drop-art.has-preview video[b-siu1l5n70i] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.adv-drop-tick[b-siu1l5n70i] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ad-surface);
    color: var(--ad-good);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.adv-drop.has-file .adv-drop-art .adv-drop-tick[b-siu1l5n70i]  .mud-icon-root {
    font-size: 1.25rem;
}

.adv-drop-text[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    color: var(--ad-muted);
    font-size: 0.88rem;
}

.adv-drop-text strong[b-siu1l5n70i] {
    color: var(--ad-ink);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.adv-drop-btn[b-siu1l5n70i] {
    min-height: 38px;
    margin-top: 6px;
    padding: 0 14px;
    font-size: 0.88rem;
}

.adv-soon[b-siu1l5n70i] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.adv-check[b-siu1l5n70i] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    cursor: pointer;
}

.adv-check input[b-siu1l5n70i] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ad-primary);
}

.adv-check small[b-siu1l5n70i] {
    display: block;
    color: var(--ad-muted);
    font-size: 0.85rem;
}

.adv-check a[b-siu1l5n70i] {
    color: var(--ad-primary);
    font-weight: 600;
}

.adv-fine[b-siu1l5n70i] {
    margin: 14px 0 0;
    color: var(--ad-muted);
    font-size: 0.82rem;
}

.adv[b-siu1l5n70i]  .adv-alert a {
    color: var(--ad-primary);
    font-weight: 600;
}

/* How it works */
.adv-how[b-siu1l5n70i] {
    padding-block: 10px 40px;
}

.adv-how h2[b-siu1l5n70i] {
    margin: 0 0 14px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.adv-how ol[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: adv-how;
}

.adv-how li[b-siu1l5n70i] {
    counter-increment: adv-how;
    padding: 18px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.adv-how li[b-siu1l5n70i]::before {
    content: counter(adv-how);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
    font-weight: 800;
}

.adv-how li b[b-siu1l5n70i] {
    display: block;
    margin-bottom: 2px;
}

.adv-how li span[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-size: 0.9rem;
}

/* Checkout bar */
.adv-bar[b-siu1l5n70i] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-inline: -8px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--ad-line);
    border-radius: 16px 16px 0 0;
    background: var(--ad-surface);
    box-shadow: 0 -10px 30px -18px rgba(20, 40, 80, 0.35);
}

.adv-bar-sum[b-siu1l5n70i] {
    flex: 1 1 240px;
    min-width: 0;
}

.adv-bar-sum b[b-siu1l5n70i] {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.adv-bar-sum span[b-siu1l5n70i] {
    display: block;
    color: var(--ad-muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.adv-g[b-siu1l5n70i] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
}

/* Other page states: not found, not here yet, error, submitted */
.adv-card[b-siu1l5n70i] {
    max-width: 760px;
    margin: 0 auto 16px;
    padding: 28px 24px;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
}

.adv-center[b-siu1l5n70i] {
    text-align: center;
}

.adv-card h1[b-siu1l5n70i] {
    font-size: clamp(1.6rem, 3vw, 2rem);
}

.adv-badge[b-siu1l5n70i] {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    color: var(--ad-muted);
    font-size: 13px;
    font-weight: 600;
}

.adv-lead[b-siu1l5n70i] {
    margin: 0;
    color: var(--ad-muted);
    font-size: 16px;
}

.adv-list[b-siu1l5n70i] {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.adv-list li[b-siu1l5n70i] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ad-line);
}

.adv-list em[b-siu1l5n70i] {
    color: var(--ad-muted);
    font-style: normal;
    text-align: right;
}

.adv-list-left[b-siu1l5n70i] {
    margin-block: 20px;
    text-align: left;
}

/* MudBlazor typography inside the page */
.adv[b-siu1l5n70i]  .mud-input,
.adv[b-siu1l5n70i]  .mud-input-label,
.adv[b-siu1l5n70i]  .mud-button,
.adv[b-siu1l5n70i]  .mud-typography {
    font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0;
}

@media (max-width: 900px) {
    .adv-hero[b-siu1l5n70i] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-top: 12px;
    }

    .adv-results[b-siu1l5n70i] {
        grid-template-columns: minmax(0, 1fr);
    }

    .adv-res-main[b-siu1l5n70i] {
        border-right: 0;
        border-bottom: 1px solid var(--ad-line);
    }

    .adv-facts[b-siu1l5n70i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .adv-how ol[b-siu1l5n70i] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .adv-addr[b-siu1l5n70i] {
        flex-direction: column;
        align-items: stretch;
    }

    .adv-addr-go[b-siu1l5n70i] {
        width: 100%;
    }

    .adv-grid2[b-siu1l5n70i] {
        grid-template-columns: minmax(0, 1fr);
    }

    .adv-drop[b-siu1l5n70i] {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .adv-res-main[b-siu1l5n70i],
    .adv-quote[b-siu1l5n70i],
    .adv-step[b-siu1l5n70i] {
        padding: 18px 16px;
    }


    /* The checkout bar: total and the submit button only */
    .adv-bar[b-siu1l5n70i] {
        gap: 8px;
        padding-top: 10px;
    }

    .adv-bar-sum span[b-siu1l5n70i],
    .adv-bar > .adv-btn:not(.adv-bar-go)[b-siu1l5n70i] {
        display: none;
    }

    .adv-bar-go[b-siu1l5n70i] {
        flex-basis: 100%;
    }

    .adv[b-siu1l5n70i]  .mud-input {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adv-drop[b-siu1l5n70i] {
        transition: none;
    }
}

/* Submit progress overlay */
.adv-overlay[b-siu1l5n70i] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 16px;
    background: color-mix(in srgb, var(--ad-ink) 55%, transparent);
    backdrop-filter: blur(2px);
    font-family: "Plus Jakarta Sans", sans-serif;
}

.adv-overlay-card[b-siu1l5n70i] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(440px, 100%);
    padding: 30px 24px 24px;
    overflow: hidden;
    color: var(--ad-ink);
    text-align: center;
    background: var(--ad-surface);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}

/* Thin indeterminate bar along the top edge: the card is busy. */
.adv-overlay-bar[b-siu1l5n70i] {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    overflow: hidden;
    background: var(--ad-primary-tint);
}

.adv-overlay-bar[b-siu1l5n70i]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: var(--ad-primary);
    animation: adv-bar-b-siu1l5n70i 1.4s ease-in-out infinite;
}

@keyframes adv-bar-b-siu1l5n70i {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

.adv-overlay-logo[b-siu1l5n70i] {
    width: auto;
    height: 34px;
    margin-bottom: 2px;
}

.adv-overlay-card h2[b-siu1l5n70i] {
    margin: 0;
    font-size: 20px;
}

/* Read-only step tracker; filled markers joined by a line so they don't read as checkboxes. */
.adv-overlay-steps[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.adv-overlay-steps li[b-siu1l5n70i] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    color: var(--ad-faint);
    font-weight: 600;
}

.adv-overlay-steps li:last-child[b-siu1l5n70i] {
    padding-bottom: 0;
}

.adv-overlay-steps li:not(:last-child)[b-siu1l5n70i]::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 2px;
    left: 13px;
    width: 2px;
    background: var(--ad-line);
}

.adv-overlay-steps li.is-done:not(:last-child)[b-siu1l5n70i]::before {
    background: var(--ad-good);
}

.adv-overlay-steps li.is-current[b-siu1l5n70i] {
    color: var(--ad-ink);
}

.adv-overlay-steps li.is-done[b-siu1l5n70i] {
    color: var(--ad-ink);
}

.adv-overlay-label[b-siu1l5n70i] {
    display: flex;
    flex-direction: column;
    padding-top: 3px;
    line-height: 1.3;
}

.adv-overlay-label small[b-siu1l5n70i] {
    color: var(--ad-faint);
    font-size: 12px;
    font-weight: 500;
}

.adv-overlay-steps li.is-done .adv-overlay-label small[b-siu1l5n70i] {
    color: var(--ad-good);
}

.adv-overlay-steps li.is-current .adv-overlay-label small[b-siu1l5n70i] {
    color: var(--ad-primary);
}

.adv-overlay-dot[b-siu1l5n70i] {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--ad-faint);
    font-size: 13px;
    font-weight: 700;
    background: var(--ad-surface-2);
    border-radius: 50%;
}

.adv-overlay-steps li.is-current .adv-overlay-dot[b-siu1l5n70i] {
    background: var(--ad-primary-tint);
}

.adv-overlay-steps li.is-done .adv-overlay-dot[b-siu1l5n70i] {
    color: var(--ad-on-primary);
    background: var(--ad-good);
}

.adv-overlay-spin[b-siu1l5n70i] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ad-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: adv-spin-b-siu1l5n70i 0.8s linear infinite;
}

@keyframes adv-spin-b-siu1l5n70i {
    to { transform: rotate(360deg); }
}

.adv-overlay-status[b-siu1l5n70i] {
    margin: 4px 0 0;
    font-weight: 600;
}

.adv-overlay-note[b-siu1l5n70i],
.adv-overlay-time[b-siu1l5n70i] {
    margin: 0;
    color: var(--ad-muted);
    font-size: 13px;
}

.adv-overlay-time[b-siu1l5n70i] {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .adv-overlay[b-siu1l5n70i] { backdrop-filter: none; }
    .adv-overlay-bar[b-siu1l5n70i]::after { animation: none; width: 100%; opacity: 0.5; }
    .adv-overlay-spin[b-siu1l5n70i] { animation-duration: 2.4s; }
}

.adv-success-icon[b-siu1l5n70i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    color: var(--ad-on-primary);
    background: var(--ad-good);
    border-radius: 50%;
    box-shadow: 0 0 0 10px var(--ad-good-tint);
}

.adv-success-icon[b-siu1l5n70i]  .mud-icon-root {
    font-size: 40px;
}

.adv-center h1:focus[b-siu1l5n70i] {
    outline: none;
}

/* Headings the page scrolls to stop below the site header, which stays pinned to the top of the window. */
[tabindex="-1"][b-siu1l5n70i] {
    scroll-margin-top: 100px;
}

/* Map: maximize button and the enlarged view */
.adv-mapmax[b-siu1l5n70i] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: -6px;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 8px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.adv-mapmax:hover[b-siu1l5n70i] {
    color: var(--ad-primary);
    border-color: var(--ad-primary);
}

.adv-mapmax:focus-visible[b-siu1l5n70i] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.adv-mapscrim[b-siu1l5n70i] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: color-mix(in srgb, var(--ad-ink) 72%, transparent);
}

.adv-mapcard.is-max[b-siu1l5n70i] {
    position: fixed;
    inset: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    z-index: 1401;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}




/* Street map (Leaflet, drawn by nearby-venues.mjs) once there's an address. Its own stacking context keeps Leaflet's layers under the page's bars. */
.adv-streetmap[b-siu1l5n70i] {
    width: 100%;
    aspect-ratio: 16 / 10;
    isolation: isolate;
    background: var(--map-other);
}

.adv-streetmap[hidden][b-siu1l5n70i] {
    display: none;
}

.adv-mapcard.is-max .adv-streetmap[b-siu1l5n70i] {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
}

/* Distance slider along the bottom of the large map */
.adv-mapslider[b-siu1l5n70i] {
    flex: none;
    margin: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--ad-line);
    background: var(--ad-surface);
}

.adv-mapslider label[b-siu1l5n70i] {
    flex-wrap: wrap;
}


/* Expand button in the results panel's lower-right corner: shows every location, then folds back. */
.adv-expand[b-siu1l5n70i] {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ad-primary);
    border-radius: 50%;
    background: var(--ad-primary-tint);
    color: var(--ad-primary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.adv-expand:hover[b-siu1l5n70i] {
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.adv-expand:focus-visible[b-siu1l5n70i] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* "Sign in with Google" in the sub bar: Google's white button style, with its logo. */
.adv-google-signin[b-siu1l5n70i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.adv-google-signin:hover[b-siu1l5n70i] {
    border-color: var(--ad-faint);
    box-shadow: 0 2px 8px -4px rgba(20, 40, 80, 0.35);
}

.adv-google-signin:focus-visible[b-siu1l5n70i] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.adv-google-signin .adv-g[b-siu1l5n70i] {
    width: 22px;
    height: 22px;
}

/* Price box terms: one quiet line in place of a list. */
.adv-terms[b-siu1l5n70i] {
    margin: 2px 0 16px;
    color: var(--ad-muted);
    font-size: 0.875rem;
}

/* How it works: number and title on one line, no paragraphs. */
.adv-how li[b-siu1l5n70i] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.adv-how li[b-siu1l5n70i]::before {
    flex: none;
    margin-bottom: 0;
}

.adv-how li b[b-siu1l5n70i] {
    margin-bottom: 0;
}

/* Large map only: where the screens are busiest, as bars, in a panel beside the map */
.adv-mapcard.is-max .adv-mapbody[b-siu1l5n70i] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.adv-mapcard.is-max .adv-streetmap[b-siu1l5n70i] {
    min-width: 0;
}

.adv-density[b-siu1l5n70i] {
    flex: 0 0 360px;
    overflow-y: auto;
    padding: 16px 14px;
    border-left: 1px solid var(--ad-line);
    background: var(--ad-surface);
}

@media (max-width: 760px) {
    .adv-mapcard.is-max .adv-mapbody[b-siu1l5n70i] {
        flex-direction: column;
    }

    .adv-density[b-siu1l5n70i] {
        flex: 0 0 auto;
        max-height: 38%;
        border-top: 1px solid var(--ad-line);
        border-left: 0;
    }
}
.adv-density-lead[b-siu1l5n70i] {
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.adv-density-lead span[b-siu1l5n70i] {
    color: var(--ad-muted);
}

.adv-density-list[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adv-density-list button[b-siu1l5n70i] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(40px, 1fr) 3ch;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ad-ink);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.adv-density-list button:hover[b-siu1l5n70i] {
    background: var(--ad-surface-2);
}

.adv-density-list button:focus-visible[b-siu1l5n70i] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 1px;
}

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

.adv-density-bar[b-siu1l5n70i] {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ad-orange-tint);
}

.adv-density-bar i[b-siu1l5n70i] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ad-orange);
}

.adv-density-count[b-siu1l5n70i] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}


.adv-density-group + .adv-density-group[b-siu1l5n70i] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ad-line-soft);
}

.adv-density-group h3[b-siu1l5n70i] {
    margin: 0 0 4px 8px;
    color: var(--ad-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Touch screens: give the small text link and the map-size button a finger-sized tap area */
@media (pointer: coarse) {
    .adv-sublink[b-siu1l5n70i] {
        min-height: 44px;
        padding-inline: 8px;
    }

    .adv-mapmax[b-siu1l5n70i] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Export: a quiet secondary action under "Set up my campaign" */
.adv-export[b-siu1l5n70i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-primary);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.adv-export:hover:not(:disabled)[b-siu1l5n70i] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
}

.adv-export:disabled[b-siu1l5n70i] {
    color: var(--ad-faint);
    cursor: not-allowed;
}

.adv-export:focus-visible[b-siu1l5n70i] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.adv-export-note[b-siu1l5n70i] {
    margin: -4px 0 0;
    color: var(--ad-muted);
    font-size: 0.82rem;
}

/* Slogan: "Own Your Neighborhood.™" with the tagline as its second line */
.adv h1.adv-h1-stack[b-siu1l5n70i] {
    margin-bottom: 12px;
}

.adv-tm[b-siu1l5n70i] {
    margin-left: 0.06em;
    font-size: 0.32em;
    font-weight: 700;
    vertical-align: super;
    letter-spacing: 0;
}

.adv-tagline[b-siu1l5n70i] {
    max-width: 40ch;
    margin: 0 0 10px;
    color: var(--ad-ink);
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* Monthly offer: a tag in the price box and a short line in the hero */
.adv-offer[b-siu1l5n70i] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
    font-size: 0.8rem;
    font-weight: 800;
}

.adv-offer[b-siu1l5n70i]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ad-orange);
}

.adv-offer-line[b-siu1l5n70i] {
    color: var(--ad-orange-strong);
    font-weight: 700;
}

/* "Distance from your business at {street}": the street shortens with an ellipsis so the miles stay on the line */
.adv-slider-what[b-siu1l5n70i] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adv-slider-what em[b-siu1l5n70i] {
    font-style: normal;
    color: var(--ad-ink);
    font-weight: 700;
}

.adv-slider label b[b-siu1l5n70i] {
    flex: none;
}

/* Phones: let the label wrap so the whole street shows */
@media (max-width: 600px) {
    .adv-slider label[b-siu1l5n70i] {
        align-items: flex-start;
    }

    .adv-slider-what[b-siu1l5n70i] {
        white-space: normal;
    }
}

/* Price box stays in view: its contents stick below the top bar while the list of locations scrolls,
   and stop at the end of the panel. The panel clips its corners with overflow: clip, because
   overflow: hidden would stop the sticky part from working. */
.adv-results[b-siu1l5n70i] {
    overflow: clip;
}

.adv-quote-inner[b-siu1l5n70i] {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* One column on small screens: the box sits under the list, so it doesn't need to stick */
@media (max-width: 900px) {
    .adv-quote-inner[b-siu1l5n70i] {
        position: static;
    }
}
/* /Components/Pages/Analytics/Insights/CampaignInsights.razor.rz.scp.css */
/* Campaign insights: colours come from the shared AdDesk palette (design-tokens.css) */
.ins[b-tunu0gnrr0] {
    max-width: 1200px;
    margin: 0 auto;
    color: var(--ad-ink);
}

.ins-head[b-tunu0gnrr0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px 14px 0 0;
    padding: 16px 20px 0;
}

.ins-crumb[b-tunu0gnrr0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ad-primary);
    text-decoration: none;
}

.ins-crumb:hover[b-tunu0gnrr0],
.ins-crumb:focus-visible[b-tunu0gnrr0] {
    text-decoration: underline;
}

.ins-camp[b-tunu0gnrr0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.ins-camp-name[b-tunu0gnrr0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ins-camp-name h1[b-tunu0gnrr0] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ins-status[b-tunu0gnrr0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
}

.ins-status.is-running[b-tunu0gnrr0] {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.ins-status.is-running[b-tunu0gnrr0]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ins-meta[b-tunu0gnrr0] {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--ad-muted);
}

.ins-meta span + span[b-tunu0gnrr0]::before {
    content: "\00B7";
    margin: 0 8px;
    color: var(--ad-faint);
}

.ins-tools[b-tunu0gnrr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ins[b-tunu0gnrr0]  .ins-field {
    width: 150px;
    flex: 0 0 auto;
    margin: 0;
}

.ins[b-tunu0gnrr0]  .ins-field.ins-tz {
    width: 130px;
}

/* The theme puts a shadow on every button; these sit flat in the toolbar */
.ins-tools[b-tunu0gnrr0]  .mud-icon-button {
    box-shadow: none;
}

.ins-range[b-tunu0gnrr0] {
    position: relative;
}

.ins-range-btn[b-tunu0gnrr0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 8px 4px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 8px;
    background: var(--ad-surface);
    font: inherit;
    color: var(--ad-ink);
    text-align: left;
    cursor: pointer;
}

.ins-range-btn:hover[b-tunu0gnrr0],
.ins-range-btn[aria-expanded="true"][b-tunu0gnrr0] {
    border-color: var(--ad-primary);
}

.ins-range-btn:focus-visible[b-tunu0gnrr0] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.ins-range-text[b-tunu0gnrr0] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ins-range-text small[b-tunu0gnrr0] {
    font-size: 0.68rem;
    color: var(--ad-muted);
}

.ins-range-text b[b-tunu0gnrr0] {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Tabs: clear active state (brand colour, thick underline) on a full-width rule */
.ins-tabs[b-tunu0gnrr0] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 4px -20px 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--ad-line);
}

.ins-tab[b-tunu0gnrr0] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: -1px;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ad-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.ins-tab:hover[b-tunu0gnrr0] {
    color: var(--ad-ink);
    background: var(--ad-surface-2);
}

.ins-tab[aria-selected="true"][b-tunu0gnrr0] {
    color: var(--ad-primary);
    border-bottom-color: var(--ad-primary);
    background: var(--ad-primary-tint);
}

/* Keyboard focus only; a mouse click shouldn't leave a box around the tab */
.ins-tab:focus[b-tunu0gnrr0] {
    outline: none;
}

.ins-tab:focus-visible[b-tunu0gnrr0] {
    outline: 2px solid var(--ad-primary);
    outline-offset: -2px;
}

.ins-body[b-tunu0gnrr0] {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 20px;
}

.ins-loading[b-tunu0gnrr0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ins-dim[b-tunu0gnrr0] {
    opacity: 0.6;
    transition: opacity 0.2s;
}

@media (max-width: 600px) {
    .ins-head[b-tunu0gnrr0],
    .ins-body[b-tunu0gnrr0] {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ins-tabs[b-tunu0gnrr0] {
        margin-left: -14px;
        margin-right: -14px;
        padding: 0 10px;
    }

    .ins-tab[b-tunu0gnrr0] {
        padding: 0 12px;
    }

    .ins[b-tunu0gnrr0]  .ins-field,
    .ins[b-tunu0gnrr0]  .ins-field.ins-tz {
        width: calc(50% - 4px);
    }
}
/* /Components/Pages/Analytics/Insights/InsightsOverview.razor.rz.scp.css */
.ov[b-8ew3gx1n0t] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ov-label[b-8ew3gx1n0t] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ad-muted);
}

/* Headline: plays against plan, then what needs attention */
.ov-hero[b-8ew3gx1n0t] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px;
}

.ov-delivery[b-8ew3gx1n0t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ov-big[b-8ew3gx1n0t] {
    font-size: 2.75rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ov-big small[b-8ew3gx1n0t] {
    margin-left: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ad-muted);
}

.ov-meter[b-8ew3gx1n0t] {
    display: flex;
    height: 10px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    overflow: hidden;
}

.ov-meter.is-small[b-8ew3gx1n0t] {
    flex: 1;
    height: 6px;
}

.ov-meter i[b-8ew3gx1n0t] {
    display: block;
    height: 100%;
    background: var(--ad-primary);
}

.ov-meter i.is-today[b-8ew3gx1n0t] {
    background: repeating-linear-gradient(45deg, var(--ad-live), var(--ad-live) 3px, transparent 3px, transparent 6px);
}

.ov-meter i.is-warn[b-8ew3gx1n0t] {
    background: var(--ad-warn);
}

.ov-summary[b-8ew3gx1n0t] {
    margin: 0;
    max-width: 62ch;
}

.ov-facts[b-8ew3gx1n0t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.ov-facts div[b-8ew3gx1n0t] {
    display: flex;
    flex-direction: column;
}

.ov-facts b[b-8ew3gx1n0t] {
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ov-facts span[b-8ew3gx1n0t],
.ov-note[b-8ew3gx1n0t] {
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.ov-attn[b-8ew3gx1n0t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ov-alert[b-8ew3gx1n0t] {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px 10px 0;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
}

.ov-alert[b-8ew3gx1n0t]::before {
    content: "";
    align-self: stretch;
    border-radius: 4px 0 0 4px;
    background: var(--sev, var(--ad-muted));
}

.ov-alert.is-warn[b-8ew3gx1n0t] {
    --sev: var(--ad-warn);
    background: var(--ad-warn-tint);
    border-color: transparent;
}

.ov-alert.is-info[b-8ew3gx1n0t] {
    --sev: var(--ad-primary);
}

.ov-alert.is-live[b-8ew3gx1n0t] {
    --sev: var(--ad-live);
}

.ov-alert.is-good[b-8ew3gx1n0t] {
    --sev: var(--ad-good);
}

.ov-alert b[b-8ew3gx1n0t] {
    display: block;
    font-weight: 600;
}

.ov-alert span[b-8ew3gx1n0t] {
    display: block;
    font-size: 0.85rem;
    color: var(--ad-muted);
}

.ov-link[b-8ew3gx1n0t] {
    border: 0;
    background: none;
    padding: 4px 6px;
    font: inherit;
    font-weight: 600;
    color: var(--ad-primary);
    white-space: nowrap;
    cursor: pointer;
}

.ov-link:hover[b-8ew3gx1n0t] {
    text-decoration: underline;
}

.ov-panel[b-8ew3gx1n0t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
}

.ov-panel-head[b-8ew3gx1n0t] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ov-panel-head h2[b-8ew3gx1n0t] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.ov-legend[b-8ew3gx1n0t] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.ov-legend i[b-8ew3gx1n0t] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: -1px;
}

.ov-legend i.is-plan[b-8ew3gx1n0t] {
    height: 0;
    border-top: 2px dashed var(--ad-ink);
    border-radius: 0;
    vertical-align: 3px;
}

.ov-chart svg[b-8ew3gx1n0t] {
    display: block;
    width: 100%;
    height: auto;
}



.ov-table[b-8ew3gx1n0t] {
    overflow-x: auto;
}

.ov-table table[b-8ew3gx1n0t] {
    width: 100%;
    border-collapse: collapse;
}

.ov-table th[b-8ew3gx1n0t] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ad-line);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ad-muted);
    white-space: nowrap;
}

.ov-table td[b-8ew3gx1n0t] {
    padding: 12px 10px;
    border-bottom: 1px solid var(--ad-line);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.ov-table tr:last-child td[b-8ew3gx1n0t] {
    border-bottom: 0;
}

.ov-table .r[b-8ew3gx1n0t] {
    text-align: right;
}

.ov-screen b[b-8ew3gx1n0t] {
    display: block;
    font-weight: 600;
}

.ov-screen span[b-8ew3gx1n0t] {
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.ov-dmeter[b-8ew3gx1n0t] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.ov-warn[b-8ew3gx1n0t] {
    color: var(--ad-warn);
    font-weight: 600;
}

.ov-good[b-8ew3gx1n0t] {
    color: var(--ad-good);
}

@media (max-width: 900px) {
    .ov-hero[b-8ew3gx1n0t] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .ov-big[b-8ew3gx1n0t] {
        font-size: 2.25rem;
    }
}
/* /Components/Pages/Analytics/Insights/InsightsProof.razor.rz.scp.css */
.pf[b-yg6b9wq437] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.pf-panel[b-yg6b9wq437] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
}

.pf-panel-head[b-yg6b9wq437] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.pf h2[b-yg6b9wq437] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.pf-label[b-yg6b9wq437] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ad-muted);
}

.pf-note[b-yg6b9wq437] {
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.pf-scale[b-yg6b9wq437] {
    display: flex;
    align-items: center;
    gap: 6px 8px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--ad-muted);
}

.pf-ramp[b-yg6b9wq437] {
    width: 96px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ad-surface-2), var(--ad-primary));
}

.pf-key[b-yg6b9wq437] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    border-radius: 4px;
    font-weight: 600;
}

.pf-key.is-zero[b-yg6b9wq437] {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
    margin-left: 8px;
}

.pf-key.is-today[b-yg6b9wq437] {
    margin-left: 8px;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--ad-live) 30%, transparent) 4px, color-mix(in srgb, var(--ad-live) 30%, transparent) 8px);
}

.pf-scroll[b-yg6b9wq437] {
    overflow-x: auto;
}

/* One square per screen per day, shaded by delivery against plan */
.pf-grid[b-yg6b9wq437] {
    display: grid;
    gap: 6px;
    min-width: min-content;
}

.pf-h[b-yg6b9wq437] {
    align-self: end;
    padding-bottom: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--ad-muted);
}

.pf-h span[b-yg6b9wq437] {
    font-weight: 400;
}

.pf-h.is-left[b-yg6b9wq437] {
    text-align: left;
    align-self: center;
}

.pf-name b[b-yg6b9wq437] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

.pf-name span[b-yg6b9wq437] {
    font-size: 0.72rem;
    color: var(--ad-muted);
}

.pf-cell[b-yg6b9wq437] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 52px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    text-align: left;
    color: var(--ad-ink);
    background: color-mix(in srgb, var(--ad-primary) calc(var(--f) * 100%), var(--ad-surface-2));
    cursor: pointer;
}

.pf-cell b[b-yg6b9wq437] {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pf-cell span[b-yg6b9wq437] {
    font-size: 0.7rem;
    opacity: 0.85;
}

.pf-cell.is-dark[b-yg6b9wq437] {
    color: var(--ad-on-primary);
}

.pf-cell.is-zero[b-yg6b9wq437] {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.pf-cell.is-out[b-yg6b9wq437] {
    opacity: 0.55;
}

.pf-cell.is-today[b-yg6b9wq437] {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, color-mix(in srgb, var(--ad-live) 20%, transparent) 5px, color-mix(in srgb, var(--ad-live) 20%, transparent) 10px);
}

.pf-cell:hover[b-yg6b9wq437] {
    border-color: var(--ad-primary);
}

.pf-cell:focus-visible[b-yg6b9wq437] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.pf-cell[aria-pressed="true"][b-yg6b9wq437] {
    border-color: var(--ad-ink);
    box-shadow: inset 0 0 0 2px var(--ad-surface);
}

.pf-total[b-yg6b9wq437] {
    align-self: center;
    font-size: 0.75rem;
    text-align: center;
    color: var(--ad-muted);
    font-variant-numeric: tabular-nums;
}

.pf-total b[b-yg6b9wq437] {
    display: block;
    font-size: 0.85rem;
    color: var(--ad-ink);
}

/* Day detail */
.pf-detail[b-yg6b9wq437] {
    position: sticky;
    top: 80px;
}

.pf-empty[b-yg6b9wq437] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 32px 12px;
    text-align: center;
    color: var(--ad-muted);
}

.pf-empty b[b-yg6b9wq437] {
    color: var(--ad-ink);
}

.pf-facts[b-yg6b9wq437] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.pf-facts div[b-yg6b9wq437] {
    display: flex;
    flex-direction: column;
}

.pf-facts b[b-yg6b9wq437] {
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pf-facts span[b-yg6b9wq437] {
    font-size: 0.75rem;
    color: var(--ad-muted);
}

.pf-warn[b-yg6b9wq437] {
    color: var(--ad-warn);
}

.pf-timeline svg[b-yg6b9wq437] {
    display: block;
    width: 100%;
    height: auto;
}



.pf-plays[b-yg6b9wq437] {
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--ad-line);
    border-radius: 8px;
}

.pf-plays li[b-yg6b9wq437] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--ad-line);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.pf-plays li:last-child[b-yg6b9wq437] {
    border-bottom: 0;
}

.pf-time[b-yg6b9wq437] {
    font-weight: 600;
}

.pf-imp[b-yg6b9wq437] {
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--ad-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-row[b-yg6b9wq437] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-alert[b-yg6b9wq437] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-left: 4px solid var(--ad-warn);
    border-radius: 8px;
    background: var(--ad-warn-tint);
}

.pf-alert span[b-yg6b9wq437] {
    font-size: 0.85rem;
    color: var(--ad-muted);
}

@media (max-width: 960px) {
    .pf[b-yg6b9wq437] {
        grid-template-columns: 1fr;
    }

    .pf-detail[b-yg6b9wq437] {
        position: static;
    }
}

/* Keep the screen names (and the "Screen" / "All screens" labels) in place while the days scroll sideways,
   so each row can still be matched to its screen. The cells slide underneath. */
.pf-grid > .pf-name[b-yg6b9wq437],
.pf-grid > .pf-h.is-left[b-yg6b9wq437] {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    padding-right: 8px;
    background: var(--ad-surface);
    /* Cover the 6px gap too, and show a soft edge where the cells disappear */
    box-shadow: 6px 0 0 var(--ad-surface), 12px 0 10px -8px rgba(20, 40, 80, 0.25);
}

.pf-grid > .pf-h.is-left:first-child[b-yg6b9wq437] {
    justify-content: flex-end;
}

.pf-grid > .pf-name b[b-yg6b9wq437],
.pf-grid > .pf-name span[b-yg6b9wq437] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Analytics/Insights/InsightsReport.razor.rz.scp.css */
.rp[b-l4kdtzxwk4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp-bar[b-l4kdtzxwk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rp-actions[b-l4kdtzxwk4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rp-note[b-l4kdtzxwk4] {
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.rp-sent[b-l4kdtzxwk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.rp-sent b[b-l4kdtzxwk4] {
    display: block;
}

.rp-sent span[b-l4kdtzxwk4] {
    font-size: 0.85rem;
    color: var(--ad-muted);
}

/* The statement itself: paper-like, one strong rule under the header */
.rp-doc[b-l4kdtzxwk4] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 44px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 4px;
    box-shadow: 0 12px 30px -18px rgba(14, 26, 47, 0.35);
}

.rp-top[b-l4kdtzxwk4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ad-ink);
}

.rp-brand[b-l4kdtzxwk4] {
    display: block;
    height: 36px;
    width: auto;
}

.rp-doc h2[b-l4kdtzxwk4] {
    margin: 2px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rp-label[b-l4kdtzxwk4] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ad-muted);
}

.rp-meta[b-l4kdtzxwk4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 24px;
}

.rp-meta div[b-l4kdtzxwk4] {
    display: flex;
    flex-direction: column;
}

.rp-meta b[b-l4kdtzxwk4] {
    font-weight: 600;
}

.rp-figs[b-l4kdtzxwk4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--ad-line);
}

.rp-figs div[b-l4kdtzxwk4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-right: 1px solid var(--ad-line);
}

.rp-figs div:last-child[b-l4kdtzxwk4] {
    border-right: 0;
}

.rp-figs b[b-l4kdtzxwk4] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rp-scroll[b-l4kdtzxwk4] {
    overflow-x: auto;
}

.rp-doc table[b-l4kdtzxwk4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.rp-doc th[b-l4kdtzxwk4] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--ad-ink);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ad-muted);
}

.rp-doc td[b-l4kdtzxwk4] {
    padding: 8px;
    border-bottom: 1px solid var(--ad-line);
}

.rp-doc .r[b-l4kdtzxwk4] {
    text-align: right;
}

.rp-doc tfoot td[b-l4kdtzxwk4] {
    font-weight: 600;
    border-top: 1px solid var(--ad-ink);
    border-bottom: 0;
}

.rp-doc tr.is-out td[b-l4kdtzxwk4] {
    color: var(--ad-muted);
}

.rp-foot[b-l4kdtzxwk4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--ad-line);
    font-size: 0.72rem;
    color: var(--ad-muted);
}

@media (max-width: 600px) {
    .rp-doc[b-l4kdtzxwk4] {
        padding: 24px 18px;
    }

    .rp-figs[b-l4kdtzxwk4] {
        grid-template-columns: 1fr 1fr;
    }

    .rp-figs div:nth-child(2)[b-l4kdtzxwk4] {
        border-right: 0;
    }

    .rp-figs div:nth-child(-n+2)[b-l4kdtzxwk4] {
        border-bottom: 1px solid var(--ad-line);
    }
}
/* /Components/Pages/AuthCallback.razor.rz.scp.css */
/* Sign-in callback: a quiet page with the logo, one small card, and a security note */
.cb[b-n1itljgqnm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 100vh;
    padding: 32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
    background: var(--ad-bg);
}

.cb-logo[b-n1itljgqnm] {
    width: auto;
    height: 40px;
}

.cb-card[b-n1itljgqnm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    padding: 36px 32px;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
    box-shadow: 0 12px 32px -20px rgba(27, 36, 52, 0.25);
    text-align: center;
}

.cb-card h1[b-n1itljgqnm] {
    margin: 4px 0 0;
    color: var(--ad-ink);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cb-card p[b-n1itljgqnm] {
    max-width: 34ch;
    margin: 0;
    color: var(--ad-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.cb-card p b[b-n1itljgqnm] {
    color: var(--ad-ink);
}

.cb-icon[b-n1itljgqnm] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ad-primary-tint);
    color: var(--ad-primary);
}

.cb-icon.is-bad[b-n1itljgqnm] {
    background: var(--ad-bad-tint);
    color: var(--ad-bad);
}

.cb-actions[b-n1itljgqnm] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cb-foot[b-n1itljgqnm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ad-faint);
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .cb-card[b-n1itljgqnm] {
        padding: 28px 20px;
    }
}
/* /Components/Pages/Campaigns.razor.rz.scp.css */
/* My campaigns: colours come from the shared AdDesk palette (design-tokens.css).
   Campaigns are time-based, so the page leads with status tabs and a progress line on each row. */
.cp[b-172t96mw5k] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 32px;
    color: var(--ad-ink);
}

.cp-head[b-172t96mw5k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.cp-badge[b-172t96mw5k] {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cp-head-text[b-172t96mw5k] {
    flex: 1 1 280px;
}

.cp-head h1[b-172t96mw5k] {
    margin: 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
}

.cp-head p[b-172t96mw5k] {
    margin: 2px 0 0;
    color: var(--ad-muted);
}

/* Buttons */
.cp-btn[b-172t96mw5k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.cp-btn--primary[b-172t96mw5k] {
    background: var(--ad-primary);
    border-color: var(--ad-primary);
    color: var(--ad-on-primary);
}

.cp-btn--primary:hover[b-172t96mw5k] {
    background: var(--ad-primary-strong);
    border-color: var(--ad-primary-strong);
}

.cp-btn:disabled[b-172t96mw5k],
.cp-ib:disabled[b-172t96mw5k],
.cp-tab:disabled[b-172t96mw5k] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon buttons: neutral, the icon carries the colour only where it means something */
.cp-ib[b-172t96mw5k] {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.cp-ib:hover:not(:disabled)[b-172t96mw5k] {
    border-color: var(--ad-faint);
    color: var(--ad-ink);
}

.cp-ib--good[b-172t96mw5k] {
    color: var(--ad-good);
}

.cp-ib--bad:hover:not(:disabled)[b-172t96mw5k] {
    border-color: var(--ad-bad);
    color: var(--ad-bad);
    background: var(--ad-bad-tint);
}

.cp-btn:focus-visible[b-172t96mw5k],
.cp-ib:focus-visible[b-172t96mw5k],
.cp-tab:focus-visible[b-172t96mw5k],
.cp-seg button:focus-visible[b-172t96mw5k],
.cp-name:focus-visible[b-172t96mw5k],
.cp-thumb:focus-visible[b-172t96mw5k] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* Status tabs: a white bar with the chosen tab filled in brand blue */
.cp-tabs[b-172t96mw5k] {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    box-shadow: 0 1px 2px rgba(21, 34, 58, 0.05);
    scrollbar-width: none;
}

.cp-tab[b-172t96mw5k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: none;
    font: inherit;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-semibold);
    color: var(--ad-ink);
    white-space: nowrap;
    cursor: pointer;
}

.cp-tab:hover:not(:disabled):not([aria-selected="true"])[b-172t96mw5k] {
    background: var(--ad-surface-2);
}

.cp-tab[aria-selected="true"][b-172t96mw5k] {
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

/* The bar's 4px padding leaves room for the focus ring, so it isn't clipped */
.cp-tab:focus-visible[b-172t96mw5k] {
    outline-offset: 1px;
}

.cp-tab-n[b-172t96mw5k] {
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cp-tab[aria-selected="true"] .cp-tab-n[b-172t96mw5k] {
    background: rgba(255, 255, 255, 0.22);
    color: var(--ad-on-primary);
}

/* Search, view switch, refresh */
.cp-tools[b-172t96mw5k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 12px;
}

.cp-search[b-172t96mw5k] {
    flex: 1 1 240px;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-faint);
}

.cp-search:focus-within[b-172t96mw5k] {
    border-color: var(--ad-primary);
}

.cp-search input[b-172t96mw5k] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    color: var(--ad-ink);
}

.cp-matches[b-172t96mw5k] {
    font-size: var(--ad-text-md);
    color: var(--ad-muted);
}

.cp-tools-end[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cp-seg[b-172t96mw5k] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
}

.cp-seg button[b-172t96mw5k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    color: var(--ad-muted);
    cursor: pointer;
}

.cp-seg button[aria-pressed="true"][b-172t96mw5k] {
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cp-note[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
    font-size: var(--ad-text-md);
}

/* The list */
.cp-list[b-172t96mw5k] {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    overflow: hidden;
}

.cp-row[b-172t96mw5k] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--ad-line);
}

.cp-row:first-child[b-172t96mw5k] {
    border-top: 0;
}

.cp-row:hover[b-172t96mw5k] {
    background: color-mix(in srgb, var(--ad-surface-2) 55%, transparent);
}

.cp-row--skel[b-172t96mw5k] {
    grid-template-columns: 56px minmax(0, 1fr);
}

[b-172t96mw5k] .cp-skel-thumb {
    border-radius: 10px;
}

.cp-thumb[b-172t96mw5k] {
    position: relative;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ad-surface-2);
    cursor: zoom-in;
}

.cp-thumb img[b-172t96mw5k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-thumb-none[b-172t96mw5k] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ad-faint);
}

.cp-thumb-play[b-172t96mw5k] {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.cp-thumb-play[b-172t96mw5k]  .mud-icon-root {
    font-size: 14px;
}

.cp-main[b-172t96mw5k] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-title[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cp-name[b-172t96mw5k] {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
    color: var(--ad-ink);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.cp-name:hover[b-172t96mw5k] {
    color: var(--ad-primary-strong);
    text-decoration: underline;
}

.cp-pill[b-172t96mw5k] {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
    text-transform: capitalize;
}

.cp-pill--warn[b-172t96mw5k] {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.cp-pill--info[b-172t96mw5k] {
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cp-meta[b-172t96mw5k] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    font-size: var(--ad-text-md);
    color: var(--ad-muted);
}

.cp-meta > span:not(:last-child)[b-172t96mw5k]::after {
    content: "·";
    margin: 0 8px;
    color: var(--ad-faint);
}

.cp-meta--quiet[b-172t96mw5k] {
    font-size: var(--ad-text-sm);
    color: var(--ad-faint);
}

.cp-ad[b-172t96mw5k] {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-progress[b-172t96mw5k] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: var(--ad-text-sm);
    color: var(--ad-muted);
    font-variant-numeric: tabular-nums;
}

.cp-bar[b-172t96mw5k] {
    flex: 0 1 220px;
    height: 6px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    overflow: hidden;
}

.cp-bar i[b-172t96mw5k] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ad-primary);
}

.cp-bar.is-warn i[b-172t96mw5k] {
    background: var(--ad-orange);
}

.cp-row.is-paused .cp-progress[b-172t96mw5k] {
    color: var(--ad-warn);
}

.cp-cost[b-172t96mw5k] {
    font-weight: var(--ad-weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cp-acts[b-172t96mw5k] {
    display: flex;
    gap: 6px;
}

/* Empty state */
.cp-empty[b-172t96mw5k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 56px 20px;
    border: 1px dashed var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    text-align: center;
    color: var(--ad-muted);
}

.cp-empty[b-172t96mw5k]  .mud-icon-root {
    font-size: 40px;
    color: var(--ad-faint);
}

.cp-empty b[b-172t96mw5k] {
    color: var(--ad-ink);
    font-size: var(--ad-text-lg);
}

.cp-empty-acts[b-172t96mw5k] {
    margin-top: 10px;
}

/* Calendar */
.campaign-calendar-wrap[b-172t96mw5k] {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    overflow: hidden;
}

.campaign-calendar-header[b-172t96mw5k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ad-line);
}

.campaign-calendar-title-wrap[b-172t96mw5k] {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.campaign-calendar-title[b-172t96mw5k] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.campaign-calendar-subtitle[b-172t96mw5k] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.campaign-calendar-scroll[b-172t96mw5k] {
    overflow-x: auto;
}

.campaign-calendar-weekdays[b-172t96mw5k],
.campaign-calendar-days[b-172t96mw5k] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.campaign-calendar-weekdays[b-172t96mw5k] {
    border-bottom: 1px solid var(--ad-line);
    background: var(--ad-surface-2);
}

.campaign-calendar-weekday[b-172t96mw5k] {
    padding: 8px;
    text-align: center;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--ad-tracking-caps);
    color: var(--ad-faint);
    border-right: 1px solid var(--ad-line);
}

.campaign-calendar-weekday:last-child[b-172t96mw5k] {
    border-right: none;
}

.campaign-calendar-week[b-172t96mw5k] {
    position: relative;
    min-height: 264px; /* 34px header + 6 visible rows + row gaps */
    border-bottom: 1px solid var(--ad-line);
}

.campaign-calendar-week:last-child[b-172t96mw5k] {
    border-bottom: none;
}

.campaign-calendar-day[b-172t96mw5k] {
    min-height: 264px;
    border-right: 1px solid var(--ad-line-soft);
    padding: 8px;
    position: relative;
}

.campaign-calendar-day:last-child[b-172t96mw5k] {
    border-right: none;
}

.campaign-calendar-day--muted[b-172t96mw5k] {
    background: color-mix(in srgb, var(--ad-surface-2) 60%, transparent);
}

.campaign-calendar-day-number[b-172t96mw5k] {
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    color: var(--ad-muted);
    font-variant-numeric: tabular-nums;
}

.campaign-calendar-day--muted .campaign-calendar-day-number[b-172t96mw5k] {
    color: var(--ad-faint);
}

.campaign-calendar-day--today .campaign-calendar-day-number[b-172t96mw5k] {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.campaign-calendar-bars[b-172t96mw5k] {
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 32px;
    gap: 6px 0;
    padding: 0 6px;
    pointer-events: none;
}

/* Bars get a light per-campaign colour inline, so their text stays dark in either theme. */
.campaign-calendar-bar[b-172t96mw5k] {
    pointer-events: auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    appearance: none;
    background: var(--ad-primary-tint);
    border: 1px solid rgba(27, 36, 52, 0.12);
    border-radius: 8px;
    color: #1B2434;
    padding: 0 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    line-height: 1;
    cursor: pointer;
    min-height: 30px;
    overflow: hidden;
}

.campaign-calendar-bar:hover[b-172t96mw5k] {
    border-color: rgba(27, 36, 52, 0.35);
}

.campaign-calendar-bar:focus-visible[b-172t96mw5k] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 1px;
}

.campaign-calendar-bar-label[b-172t96mw5k] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-calendar-bar-meta[b-172t96mw5k],
.campaign-calendar-cap[b-172t96mw5k] {
    font-size: var(--ad-text-xs);
    opacity: 0.7;
    flex-shrink: 0;
}

.campaign-calendar-bar--upcoming[b-172t96mw5k]  { opacity: 0.88; }
.campaign-calendar-bar--waiting[b-172t96mw5k]   { opacity: 0.82; }
.campaign-calendar-bar--completed[b-172t96mw5k] { opacity: 0.55; filter: grayscale(0.35); }
.campaign-calendar-bar--draft[b-172t96mw5k]     { opacity: 0.55; filter: grayscale(0.45); }
.campaign-calendar-bar--other[b-172t96mw5k]     { opacity: 0.75; }

.campaign-calendar-bar--lane-a[b-172t96mw5k] {
    box-shadow: inset 3px 0 0 rgba(27, 36, 52, 0.18);
}

.campaign-calendar-bar--lane-d[b-172t96mw5k] {
    box-shadow: inset 0 -3px 0 rgba(27, 36, 52, 0.16);
}

.campaign-calendar-more[b-172t96mw5k] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    border: 1px solid var(--ad-line);
    background: var(--ad-surface);
    border-radius: 999px;
    font: inherit;
    font-size: var(--ad-text-xs);
    color: var(--ad-muted);
    padding: 3px 10px;
    cursor: pointer;
}

.campaign-calendar-more:hover[b-172t96mw5k] {
    border-color: var(--ad-faint);
    color: var(--ad-ink);
}

/* Tablet and phone */
@media (max-width: 760px) {
    .cp-row[b-172t96mw5k] {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb main cost"
            "acts acts acts";
        gap: 10px 12px;
        padding: 12px 14px;
    }

    .cp-thumb[b-172t96mw5k] {
        grid-area: thumb;
        width: 48px;
        height: 48px;
    }

    .cp-main[b-172t96mw5k] {
        grid-area: main;
    }

    .cp-cost[b-172t96mw5k] {
        grid-area: cost;
        align-self: start;
    }

    .cp-acts[b-172t96mw5k] {
        grid-area: acts;
        justify-content: flex-end;
    }

    .cp-row--skel[b-172t96mw5k] {
        grid-template-areas: none;
    }

    .cp-tools-end[b-172t96mw5k] {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .cp-search[b-172t96mw5k] {
        max-width: none;
    }

    .cp-head .cp-btn[b-172t96mw5k] {
        width: 100%;
    }

    .campaign-calendar-weekdays[b-172t96mw5k],
    .campaign-calendar-week[b-172t96mw5k] {
        min-width: 640px;
    }
}

@media (max-width: 600px) {
    .campaign-calendar-header[b-172t96mw5k] {
        padding: 8px 10px;
        gap: 4px;
    }

    .campaign-calendar-title-wrap[b-172t96mw5k] {
        min-width: 0;
        flex: 1 1 auto;
    }

    .campaign-calendar-week[b-172t96mw5k],
    .campaign-calendar-day[b-172t96mw5k] {
        min-height: 224px;
    }

    .campaign-calendar-bars[b-172t96mw5k] {
        top: 28px;
        grid-auto-rows: 28px;
        gap: 4px 0;
        padding: 0 4px;
    }

    .campaign-calendar-bar[b-172t96mw5k] {
        font-size: var(--ad-text-xs);
        min-height: 26px;
        padding: 0 6px;
    }

    .campaign-calendar-bar-meta[b-172t96mw5k] {
        display: none;
    }
}
/* /Components/Pages/CampaignSuccess.razor.rz.scp.css */
/* Campaign submitted: a confirmation, the campaign that went in, what happens next. */

.ok-page[b-zigt8q2usi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px));
    color: var(--ad-ink);
}

.ok-hero[b-zigt8q2usi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.ok-check[b-zigt8q2usi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--ad-primary);
    box-shadow: 0 0 0 10px var(--ad-primary-tint);
    color: var(--ad-on-primary);
}

.ok-check[b-zigt8q2usi]  .mud-icon-root {
    font-size: 32px;
}

.ok-hero h1[b-zigt8q2usi] {
    margin: 0;
    font-size: var(--ad-text-3xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    text-wrap: balance;
}

.ok-hero p[b-zigt8q2usi] {
    max-width: 560px;
    text-wrap: balance;
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-lg);
    line-height: 1.5;
}

.ok-hero p b[b-zigt8q2usi] {
    color: var(--ad-ink);
}

/* ── Campaign card ── */

.ok-card[b-zigt8q2usi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 22px 24px;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
}

.ok-card-head[b-zigt8q2usi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ok-card-head h2[b-zigt8q2usi] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.ok-pill[b-zigt8q2usi] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
}

.ok-facts[b-zigt8q2usi] {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    row-gap: 12px;
    margin: 0;
    font-size: var(--ad-text-md);
}

.ok-facts > div[b-zigt8q2usi] {
    display: contents;
}

.ok-facts dt[b-zigt8q2usi] {
    color: var(--ad-muted);
}

.ok-facts dd[b-zigt8q2usi] {
    margin: 0;
    font-weight: var(--ad-weight-semibold);
}

.ok-total dd[b-zigt8q2usi] {
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-heavy);
    font-variant-numeric: tabular-nums;
}

.ok-creatives[b-zigt8q2usi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.ok-creative[b-zigt8q2usi] {
    display: block;
    width: 96px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 8px;
    background: var(--ad-surface-2);
}

.ok-creative.is-portrait[b-zigt8q2usi] {
    width: 32px;
    aspect-ratio: 9 / 16;
}

.ok-creative.is-square[b-zigt8q2usi] {
    width: 54px;
    aspect-ratio: 1;
}

.ok-creative img[b-zigt8q2usi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── What happens next ── */

.ok-next[b-zigt8q2usi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ok-next h2[b-zigt8q2usi] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-caps);
    text-transform: uppercase;
}

.ok-next ol[b-zigt8q2usi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ok-next li[b-zigt8q2usi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
}

.ok-next li > span:last-child[b-zigt8q2usi] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.ok-when[b-zigt8q2usi] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-caps);
    text-transform: uppercase;
}

.ok-next li.is-now .ok-when[b-zigt8q2usi] {
    color: var(--ad-primary-strong);
}

/* ── Actions ── */

.ok-actions[b-zigt8q2usi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ok-btn[b-zigt8q2usi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    text-decoration: none;
}

.ok-btn:hover[b-zigt8q2usi] {
    border-color: var(--ad-primary);
}

.ok-btn--primary[b-zigt8q2usi] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.ok-btn--primary:hover[b-zigt8q2usi] {
    background: var(--ad-primary-strong);
}

.ok-share[b-zigt8q2usi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    text-decoration: none;
}

.ok-share:hover[b-zigt8q2usi] {
    text-decoration: underline;
}

/* ── Loading ── */

.ok-skel i[b-zigt8q2usi] {
    display: block;
    height: 12px;
    width: 70%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: ok-shimmer-b-zigt8q2usi 1.3s ease-in-out infinite;
}

.ok-skel i.is-title[b-zigt8q2usi] {
    width: 220px;
    max-width: 60%;
    height: 18px;
}

.ok-skel i.is-short[b-zigt8q2usi] {
    width: 45%;
}

@keyframes ok-shimmer-b-zigt8q2usi {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ok-skel i[b-zigt8q2usi] { animation: none; }
}

/* ── Phones ── */

@media (max-width: 640px) {
    .ok-page[b-zigt8q2usi] {
        gap: 20px;
        padding-top: 24px;
    }

    .ok-hero h1[b-zigt8q2usi] {
        font-size: var(--ad-text-2xl);
    }

    .ok-card[b-zigt8q2usi] {
        padding: 18px;
    }

    .ok-card-head[b-zigt8q2usi] {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 8px;
    }

    .ok-facts[b-zigt8q2usi] {
        grid-template-columns: minmax(0, 1fr) auto;
        font-size: var(--ad-text-md);
    }

    .ok-facts dd[b-zigt8q2usi] {
        text-align: right;
    }

    .ok-next ol[b-zigt8q2usi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ok-actions[b-zigt8q2usi] {
        flex-direction: column;
        align-items: stretch;
    }

    .ok-share[b-zigt8q2usi] {
        justify-content: center;
        height: 44px;
        margin-left: 0;
    }
}
/* /Components/Pages/CreateCampaign.razor.rz.scp.css */
.create-campaign-page[b-5hezby479l] {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg);
    min-height: calc(100vh - 64px);
    background: transparent;
}

.create-campaign-header-back[b-5hezby479l] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 9px 14px;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ad-ink);
    text-decoration: none;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
}

.create-campaign-header-back:hover[b-5hezby479l] {
    background: var(--ad-surface-2);
    border-color: var(--ad-primary-line);
}

@media (max-width: 768px) {
    .create-campaign-header-back span[b-5hezby479l] { display: none; }
    .create-campaign-header-back[b-5hezby479l] { padding: 9px; }
}

.create-campaign-scroll[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: 80px;
}

/* Device Summary Card */

/* Orientation Card */
.orientation-card[b-5hezby479l] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    border: 1px solid var(--color-border-subtle);
    transition: all var(--transition-fast);
}

.orientation-card:hover[b-5hezby479l] {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

/* Desktop: compact action buttons (do not stretch full width) */

/* Selected Creatives */

.campaign-name-input[b-5hezby479l] {
    width: 100%;
}

.campaign-name-input .mud-input-root[b-5hezby479l] {
    font-size: var(--ad-text-md);
}

/* Desktop: Show full Next text, hide short text */

/* Dialog title responsive classes */

/* Desktop: Show preview button text */

/* Mobile Responsive */
@media (max-width: 768px) {
    .create-campaign-page[b-5hezby479l] {
        padding: var(--space-md) var(--space-xs);
        padding-top: 76px;
    }
    
    
    
    /* Campaign Footer - Mobile Optimized */
    
    
    /* Hide cart statistics on mobile */
    
    
    /* Keep cart button compact on mobile */
    
    
    /* Make action buttons prominent */
    
    
    /* Make buttons compact on mobile */
    
    
    /* Show short text on mobile */
    
    
    
    
    /* Add padding to bottom of page content */
    .create-campaign-scroll[b-5hezby479l] {
        padding-bottom: 80px;
    }
    
    /* Dialog title responsive */
    
    
    
    
    /* Dialog content mobile optimization */
    .mud-dialog-content[b-5hezby479l] {
        padding: var(--space-xs);
    }
    
    /* Hide Preview button text on mobile, keep icon */
    
    
    /* Make creative cards more compact */
    .mud-dialog-content > div > div > div[b-5hezby479l] {
        padding: var(--space-xs);
        gap: var(--space-xs);
    }
    
    /* Reduce thumbnail size on mobile */
    
    
    /* Compact filter tabs */
    
    
    
}

/* Make MudDatePicker helper text more visible */
[b-5hezby479l] .mud-input-helper-text {
    color: var(--ad-muted) !important;
    font-size: var(--ad-text-sm) !important;
    font-weight: var(--ad-weight-medium) !important;
    margin-top: 6px !important;
}

/* Ensure helper text stands out on schedule section */
#schedule-section[b-5hezby479l]  .mud-input-helper-text {
    color: var(--ad-ink) !important;
}

/* ==============================
   Upload Dialog — Single Column
   ============================== */

/* Drop Zone */

/* File selected row */

/* Upload progress card */

/* Dialog actions */
[b-5hezby479l] .dialog-actions-upload {
    display: flex;
    gap: 12px;
    padding: 16px 24px !important;
    background: var(--ad-bg);
    border-top: 1px solid var(--ad-line-soft);
}

[b-5hezby479l] .dialog-actions-upload .mud-button-root {
    flex: 1;
}

@media (max-width: 768px) {
    

    [b-5hezby479l] .mud-dialog {
        margin: 8px;
        max-height: calc(100vh - 32px);
    }

    [b-5hezby479l] .mud-dialog-content {
        padding: 12px !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    [b-5hezby479l] .dialog-actions-upload {
        flex-direction: column-reverse;
        padding: 12px !important;
    }
}

/* Frequency: four plain intervals instead of a 1x-5x slider */

/* Each choice shows its plays a day, so the trade-off with cost is visible before the price box */

/* ── Skeleton while a saved campaign loads back in ── */
.cc-skel[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cc-skel-note[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-medium);
}

.cc-skel-card[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cc-skel-head[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cc-skel-head > span[b-5hezby479l] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.cc-skel i[b-5hezby479l] {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: cc-shimmer-b-5hezby479l 1.3s ease-in-out infinite;
}

.cc-skel-icon[b-5hezby479l] { flex: none; width: 40px; height: 40px; border-radius: 10px !important; }
.cc-skel-bar[b-5hezby479l] { height: 12px; width: 70%; }
.cc-skel-bar.is-title[b-5hezby479l] { height: 16px; width: 200px; max-width: 60%; }
.cc-skel-bar.is-sub[b-5hezby479l] { width: 300px; max-width: 85%; }
.cc-skel-bar.is-short[b-5hezby479l] { width: 40%; }

.cc-skel-thumbs[b-5hezby479l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.cc-skel-thumbs i[b-5hezby479l] { aspect-ratio: 16 / 9; }

.cc-skel-fields[b-5hezby479l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.cc-skel-fields i[b-5hezby479l] { height: 44px; }

@keyframes cc-shimmer-b-5hezby479l {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.cc-skel-spin[b-5hezby479l] {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--ad-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: cc-spin-b-5hezby479l .7s linear infinite;
}

@keyframes cc-spin-b-5hezby479l {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-skel i[b-5hezby479l] { animation: none; }
    .cc-skel-spin[b-5hezby479l] { animation-duration: 2s; }
}

/* ══ Creatives & schedule (redesign) ══
   Cards per screen shape and the schedule on the left; the summary and "Next" on the right (sticky).
   Phones stack them and keep the estimate and "Next" in a bar at the bottom. */

.cc-head[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cc-head-row[b-5hezby479l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cc-head-text h1[b-5hezby479l] {
    margin: 0;
    color: var(--ad-ink);
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
}

.cc-head-text p[b-5hezby479l] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.cc-grid[b-5hezby479l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.cc-main[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cc-side[b-5hezby479l] {
    position: sticky;
    top: 88px;
}

.cc-card[b-5hezby479l],
.cc-ori[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    color: var(--ad-ink);
}

.cc-card h2[b-5hezby479l] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.cc-muted[b-5hezby479l] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.cc-link[b-5hezby479l] {
    padding: 0;
    border: none;
    background: none;
    color: var(--ad-primary-strong);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.cc-link:hover[b-5hezby479l] {
    text-decoration: underline;
}

.cc-link.is-danger[b-5hezby479l] {
    color: var(--ad-bad);
}

.cc-btn[b-5hezby479l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.cc-btn:hover:not(:disabled)[b-5hezby479l] {
    border-color: var(--ad-primary);
}

.cc-btn--primary[b-5hezby479l] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.cc-btn--primary:hover:not(:disabled)[b-5hezby479l] {
    background: var(--ad-primary-strong);
}

.cc-btn:disabled[b-5hezby479l] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── One card per screen shape ── */

.cc-ori-head[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cc-ori-icon[b-5hezby479l] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cc-ori-icon.is-portrait[b-5hezby479l] {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.cc-ori-icon.is-square[b-5hezby479l] {
    background: var(--ad-live-tint);
    color: var(--ad-live);
}

.cc-ori-text[b-5hezby479l] {
    flex: 1;
    min-width: 0;
}

.cc-ori-text h2[b-5hezby479l] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.cc-ori-text p[b-5hezby479l] {
    margin: 2px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-status[b-5hezby479l] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
}

.cc-status[b-5hezby479l]  .mud-icon-root {
    font-size: 14px;
}

.cc-status.is-ready[b-5hezby479l] {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.cc-status.is-processing[b-5hezby479l] {
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cc-picked[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-pick[b-5hezby479l] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin: 0;
}

.cc-pick-img[b-5hezby479l] {
    position: relative;
    flex: none;
    width: 200px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    border: 2px solid var(--ad-primary);
    border-radius: 10px;
    background: var(--ad-surface-2);
    cursor: pointer;
}

.cc-pick.is-portrait .cc-pick-img[b-5hezby479l] {
    width: 72px;
    aspect-ratio: 9 / 16;
}

.cc-pick.is-square .cc-pick-img[b-5hezby479l] {
    width: 112px;
    aspect-ratio: 1;
}

.cc-pick-img img[b-5hezby479l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-main[b-5hezby479l]  .cc-pick-play,
.cc-up-preview[b-5hezby479l]  .cc-pick-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.cc-pick figcaption[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.cc-pick-name[b-5hezby479l] {
    overflow: hidden;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cc-pick-meta[b-5hezby479l] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-pick-actions[b-5hezby479l] {
    display: flex;
    gap: 14px;
    margin-top: 4px;
}

.cc-ori-more[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 2px;
}

/* A chosen video still being prepared for screens */
.cc-processing[b-5hezby479l] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ad-bg);
}

.cc-processing-thumb[b-5hezby479l] {
    flex: none;
    width: 120px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ad-surface-2);
}

.cc-processing-thumb.is-portrait[b-5hezby479l] {
    width: 54px;
    aspect-ratio: 9 / 16;
}

.cc-processing-thumb.is-square[b-5hezby479l] {
    width: 80px;
    aspect-ratio: 1;
}

.cc-processing-thumb img[b-5hezby479l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-processing-body[b-5hezby479l] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cc-processing-top[b-5hezby479l] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--ad-text-md);
}

.cc-processing-top b[b-5hezby479l] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cc-processing-steps[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-processing-steps li[b-5hezby479l]::before {
    content: "○ ";
}

.cc-processing-steps li.is-done[b-5hezby479l] {
    color: var(--ad-good);
}

.cc-processing-steps li.is-done[b-5hezby479l]::before {
    content: "✓ ";
}

.cc-processing-steps li.is-current[b-5hezby479l] {
    color: var(--ad-primary-strong);
    font-weight: var(--ad-weight-bold);
}

.cc-processing-steps li.is-current[b-5hezby479l]::before {
    content: "● ";
}

.cc-indeterminate[b-5hezby479l] {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ad-line);
}

.cc-indeterminate span[b-5hezby479l] {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: 3px;
    background: var(--ad-primary);
    animation: cc-slide-b-5hezby479l 1.4s ease-in-out infinite;
}

@keyframes cc-slide-b-5hezby479l {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* Drop zone for a shape with nothing chosen yet */
.cc-drop[b-5hezby479l] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    padding: 22px;
    border: 2px dashed var(--ad-primary-line);
    border-radius: 12px;
    background: var(--ad-bg);
}

.cc-drop:focus-within[b-5hezby479l],
.cc-drop:hover[b-5hezby479l] {
    border-color: var(--ad-primary);
}

.cc-drop[b-5hezby479l]  .cc-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cc-drop[b-5hezby479l]  .cc-drop-icon {
    color: var(--ad-primary);
}

.cc-drop-text[b-5hezby479l] {
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.cc-drop-buttons[b-5hezby479l] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Name and schedule ── */

.cc-fields[b-5hezby479l] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.cc-dates[b-5hezby479l] {
    min-height: 18px;
    margin: -4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-dates.is-bad[b-5hezby479l] {
    color: var(--ad-bad);
    font-weight: var(--ad-weight-semibold);
}

/* ── Summary ── */

.cc-summary[b-5hezby479l] {
    gap: 12px;
}

.cc-rows[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ad-text-md);
}

.cc-rows li[b-5hezby479l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cc-rows li > span[b-5hezby479l] {
    color: var(--ad-muted);
}

.cc-rows b[b-5hezby479l] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cc-row-status.is-ready[b-5hezby479l] {
    color: var(--ad-good);
}

.cc-row-status.is-processing[b-5hezby479l] {
    color: var(--ad-primary-strong);
}

.cc-row-status.is-needed[b-5hezby479l] {
    color: var(--ad-warn);
}

.cc-rows-sep[b-5hezby479l],
.cc-rows-total[b-5hezby479l] {
    padding-top: 10px;
    border-top: 1px solid var(--ad-line-soft);
}

.cc-rows li.cc-rows-total > span[b-5hezby479l] {
    color: var(--ad-ink);
    font-weight: var(--ad-weight-semibold);
}

.cc-rows-total b[b-5hezby479l] {
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-heavy);
}

.cc-next[b-5hezby479l] {
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    cursor: pointer;
}

.cc-next:hover:not(:disabled)[b-5hezby479l] {
    background: var(--ad-primary-strong);
}

.cc-next:disabled[b-5hezby479l] {
    background: var(--ad-disabled);
    cursor: not-allowed;
}

.cc-blocker[b-5hezby479l] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--ad-warn);
    font-size: var(--ad-text-sm);
    line-height: 1.4;
}

.cc-summary-note[b-5hezby479l] {
    margin: 0;
}

.cc-bar[b-5hezby479l] {
    display: none;
}

/* ── Dialogs (upload and library) ── */

.cc-dlg-title h2[b-5hezby479l] {
    margin: 0;
    color: var(--ad-ink);
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-bold);
}

.cc-dlg-title p[b-5hezby479l] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-dlg-actions[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 8px 8px;
}

.cc-dlg-count[b-5hezby479l] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cc-dlg-count b[b-5hezby479l] {
    color: var(--ad-ink);
}

/* Upload */
.cc-up[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.cc-up-drop[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 18px;
    border: 2px dashed var(--ad-primary-line);
    border-radius: 12px;
    background: var(--ad-bg);
    text-align: center;
}

.cc-up-drop b[b-5hezby479l] {
    color: var(--ad-ink);
    font-size: var(--ad-text-md);
}

.cc-up-drop span[b-5hezby479l] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-up-drop[b-5hezby479l]  .cc-drop-icon {
    color: var(--ad-primary);
    font-size: var(--ad-text-3xl);
}

.cc-up-drop[b-5hezby479l]  .cc-up-browse {
    margin-top: 8px;
    border-radius: 10px;
    text-transform: none;
    font-weight: var(--ad-weight-semibold);
}

.cc-up-file[b-5hezby479l] {
    display: flex;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
}

.cc-up-preview[b-5hezby479l] {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 160px;
    aspect-ratio: 16 / 9;
    align-self: flex-start;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.cc-up-preview.is-portrait[b-5hezby479l] {
    width: 90px;
    aspect-ratio: 9 / 16;
}

.cc-up-preview.is-square[b-5hezby479l] {
    width: 120px;
    aspect-ratio: 1;
}

.cc-up-preview img[b-5hezby479l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-up-info[b-5hezby479l] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: var(--ad-text-sm);
}

.cc-up-name[b-5hezby479l] {
    color: var(--ad-ink);
    font-size: var(--ad-text-md);
    word-break: break-all;
}

.cc-check[b-5hezby479l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--ad-weight-semibold);
}

.cc-check[b-5hezby479l]  .mud-icon-root {
    font-size: 16px;
}

.cc-check.is-ok[b-5hezby479l] {
    color: var(--ad-good);
}

.cc-check.is-warn[b-5hezby479l] {
    color: var(--ad-warn);
}

.cc-up-info[b-5hezby479l]  .cc-up-change {
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    min-width: 0;
    text-transform: none;
    font-weight: var(--ad-weight-semibold);
}

.cc-up-alert[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--ad-warn-line);
    border-radius: 10px;
    background: var(--ad-warn-tint);
    color: var(--ad-ink);
    font-size: var(--ad-text-sm);
}

.cc-up-alert b[b-5hezby479l] {
    color: var(--ad-ink);
    font-size: var(--ad-text-md);
}

.cc-up-progress[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--ad-bg);
    font-size: var(--ad-text-sm);
}

.cc-up-progress-top[b-5hezby479l] {
    display: flex;
    justify-content: space-between;
    color: var(--ad-ink);
}

.cc-up-bar[b-5hezby479l] {
    height: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ad-line);
}

.cc-up-bar span[b-5hezby479l] {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--ad-primary);
    transition: width 0.3s ease;
}

.cc-up-steps[b-5hezby479l] {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ad-muted);
}

.cc-up-steps li.is-done[b-5hezby479l] {
    color: var(--ad-good);
}

.cc-up-steps li.is-done[b-5hezby479l]::before {
    content: "✓ ";
}

.cc-up-steps li.is-current[b-5hezby479l] {
    color: var(--ad-primary-strong);
    font-weight: var(--ad-weight-bold);
}

/* Library */
.cc-lib-tools[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 4px 0 14px;
    border-bottom: 1px solid var(--ad-line-soft);
}

.cc-lib-search[b-5hezby479l] {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    color: var(--ad-muted);
}

.cc-lib-search:focus-within[b-5hezby479l] {
    border-color: var(--ad-primary);
}

.cc-lib-search input[b-5hezby479l] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
}

.cc-lib-tabs[b-5hezby479l] {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.cc-lib-tabs button[b-5hezby479l] {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ad-muted);
    font: inherit;
    font-size: var(--ad-text-sm);
    cursor: pointer;
}

.cc-lib-tabs button.is-on[b-5hezby479l] {
    background: var(--ad-surface);
    color: var(--ad-ink);
    font-weight: var(--ad-weight-semibold);
    box-shadow: 0 1px 2px rgba(27, 36, 52, 0.12);
}

.cc-lib-grid[b-5hezby479l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    align-items: start;
    gap: 14px;
    max-height: 56vh;
    overflow-y: auto;
    padding: 16px 2px 4px;
}

.cc-lib-item[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-lib-pick[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0 0 8px;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cc-lib-pick:hover:not(:disabled)[b-5hezby479l] {
    border-color: var(--ad-primary);
}

.cc-lib-item.is-on .cc-lib-pick[b-5hezby479l] {
    border: 2px solid var(--ad-primary);
}

.cc-lib-item.is-off .cc-lib-pick[b-5hezby479l] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cc-lib-thumb[b-5hezby479l] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ad-surface-2);
}

.cc-lib-thumb.is-portrait[b-5hezby479l] {
    aspect-ratio: 9 / 12;
}

.cc-lib-thumb.is-square[b-5hezby479l] {
    aspect-ratio: 1;
}

.cc-lib-thumb img[b-5hezby479l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-lib-thumb[b-5hezby479l]  .cc-lib-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.cc-lib-check[b-5hezby479l] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.cc-lib-badge[b-5hezby479l] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(27, 36, 52, 0.75);
    color: #FFFFFF;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
}

.cc-lib-badge.is-info[b-5hezby479l] {
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cc-lib-badge.is-warn[b-5hezby479l] {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.cc-lib-name[b-5hezby479l] {
    overflow: hidden;
    padding: 4px 10px 0;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cc-lib-meta[b-5hezby479l] {
    padding: 0 10px;
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.cc-lib-preview[b-5hezby479l] {
    align-self: flex-start;
    padding-left: 4px;
    font-size: var(--ad-text-xs);
}

.cc-lib-empty[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--ad-muted);
    text-align: center;
}

.cc-lib-empty b[b-5hezby479l] {
    color: var(--ad-ink);
    font-size: var(--ad-text-md);
}

.cc-lib-skel[b-5hezby479l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
}

.cc-lib-skel i[b-5hezby479l],
.cc-lib-skel b[b-5hezby479l] {
    display: block;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: cc-shimmer-b-5hezby479l 1.3s ease-in-out infinite;
}

.cc-lib-skel i[b-5hezby479l] {
    aspect-ratio: 16 / 9;
}

.cc-lib-skel b[b-5hezby479l] {
    width: 70%;
    height: 10px;
    margin: 0 10px;
    border-radius: 5px;
}

.cc-lib-skel b.is-short[b-5hezby479l] {
    width: 45%;
}

@media (prefers-reduced-motion: reduce) {
    .cc-indeterminate span[b-5hezby479l],
    .cc-lib-skel i[b-5hezby479l],
    .cc-lib-skel b[b-5hezby479l] { animation: none; }
}

/* ── Narrow screens ── */

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

    .cc-side[b-5hezby479l] {
        position: static;
    }

    .cc-side .cc-next[b-5hezby479l],
    .cc-side .cc-blocker[b-5hezby479l] {
        display: none;
    }

    .create-campaign-scroll[b-5hezby479l] {
        padding-bottom: 110px;
    }

    .cc-bar[b-5hezby479l] {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--ad-line);
        background: var(--ad-surface);
        box-shadow: 0 -6px 18px rgba(27, 36, 52, 0.08);
    }

    .cc-bar-total[b-5hezby479l] {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .cc-bar-total span[b-5hezby479l] {
        overflow: hidden;
        color: var(--ad-muted);
        font-size: var(--ad-text-xs);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cc-bar-total b[b-5hezby479l] {
        color: var(--ad-ink);
        font-size: var(--ad-text-xl);
        font-variant-numeric: tabular-nums;
    }

    .cc-bar .cc-next[b-5hezby479l] {
        flex: none;
        padding: 0 24px;
    }
}

@media (max-width: 640px) {
    .cc-head-text h1[b-5hezby479l] {
        font-size: var(--ad-text-xl);
    }

    .cc-card[b-5hezby479l],
    .cc-ori[b-5hezby479l] {
        padding: 16px;
    }

    .cc-ori-head[b-5hezby479l] {
        flex-wrap: wrap;
    }

    .cc-fields[b-5hezby479l] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-pick-img[b-5hezby479l] {
        width: 132px;
    }

    .cc-processing[b-5hezby479l] {
        align-items: flex-start;
    }

    .cc-processing-thumb[b-5hezby479l] {
        width: 72px;
    }

    .cc-up-file[b-5hezby479l] {
        flex-direction: column;
    }

    .cc-lib-grid[b-5hezby479l] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-lib-tabs[b-5hezby479l] {
        order: 3;
    }
}

/* Side gutter at every width (the layout gives none on phones) */
.create-campaign-page[b-5hezby479l] {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Quick length buttons and the starts-soon note, under the dates */
.cc-length[b-5hezby479l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -2px;
}

.cc-length > span[b-5hezby479l] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-chip[b-5hezby479l] {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.cc-chip:hover[b-5hezby479l] {
    border-color: var(--ad-primary);
}

.cc-chip.is-on[b-5hezby479l] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cc-hint[b-5hezby479l] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -6px 0 0;
    color: var(--ad-warn);
    font-size: var(--ad-text-sm);
    line-height: 1.4;
}

/* ── How often it plays: its own card of radio options ── */
.cc-freq-head h2[b-5hezby479l] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.cc-freq-head p[b-5hezby479l] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cc-freq-options[b-5hezby479l] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cc-freq-option[b-5hezby479l] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cc-freq-option:hover[b-5hezby479l] {
    border-color: var(--ad-primary);
}

.cc-freq-option:focus-visible[b-5hezby479l] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.cc-freq-radio[b-5hezby479l] {
    grid-row: 1;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid var(--ad-faint);
    border-radius: 50%;
    background: var(--ad-surface);
}

.cc-freq-name[b-5hezby479l] {
    grid-row: 1;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
}

.cc-freq-plays[b-5hezby479l],
.cc-freq-cost[b-5hezby479l] {
    grid-column: 2;
    font-size: var(--ad-text-xs);
}

.cc-freq-plays[b-5hezby479l] {
    color: var(--ad-muted);
}

.cc-freq-cost[b-5hezby479l] {
    color: var(--ad-ink);
    font-weight: var(--ad-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.cc-freq-option.is-on[b-5hezby479l] {
    border: 2px solid var(--ad-primary);
    padding: 13px;
    background: var(--ad-primary-tint);
}

.cc-freq-option.is-on .cc-freq-radio[b-5hezby479l] {
    border: 5px solid var(--ad-primary);
}

.cc-freq-option.is-on .cc-freq-name[b-5hezby479l] {
    color: var(--ad-primary-strong);
}

.cc-freq-summary[b-5hezby479l] {
    margin: 0;
    color: var(--ad-ink);
    font-size: var(--ad-text-sm);
}

.cc-freq-summary.is-prompt[b-5hezby479l] {
    color: var(--ad-muted);
}

@media (max-width: 900px) {
    .cc-freq-options[b-5hezby479l] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-freq-option[b-5hezby479l] { transition: none; }
}
/* /Components/Pages/Creatives.razor.rz.scp.css */
.creatives-page[b-i7e9i4i6v0] {
    padding: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    background: transparent; /* Inherit MainLayout gradient for consistency */
}

.page-header[b-i7e9i4i6v0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    gap: var(--space-lg);
}

.page-header-title[b-i7e9i4i6v0] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 var(--space-sm) 0;
}

.page-header-subtitle[b-i7e9i4i6v0] {
    color: var(--color-text-muted);
    margin: 0;
}

.filters-bar[b-i7e9i4i6v0] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.filter-select[b-i7e9i4i6v0] {
    padding: 10px 14px;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-white);
    min-width: 140px;
    cursor: pointer;
}

.filter-select:focus[b-i7e9i4i6v0] {
    outline: none;
    border-color: var(--color-primary);
}

.stat-chip[b-i7e9i4i6v0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
}

.stat-chip:hover[b-i7e9i4i6v0] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.stat-chip-total[b-i7e9i4i6v0] {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.stat-chip-total.active[b-i7e9i4i6v0] {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary-strong);
}

.stat-chip-images[b-i7e9i4i6v0] {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.stat-chip-images.active[b-i7e9i4i6v0] {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.stat-chip-videos[b-i7e9i4i6v0] {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.stat-chip-videos.active[b-i7e9i4i6v0] {
    background: var(--color-info);
    color: var(--color-white);
    border-color: var(--color-info);
}

/* Horizontal Card List - Provider Style */
.creatives-list[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.creative-card-horizontal[b-i7e9i4i6v0] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    transition: var(--transition-fast);
}

.creative-card-horizontal:hover[b-i7e9i4i6v0] {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

.creative-card-thumbnail[b-i7e9i4i6v0] {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: var(--border-radius-md);
    background: var(--color-bg-active);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.creative-card-thumbnail img[b-i7e9i4i6v0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creative-thumb-placeholder[b-i7e9i4i6v0] {
    color: var(--color-text-light);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Play/View Overlay on Thumbnail */
.creative-play-overlay[b-i7e9i4i6v0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.creative-card-thumbnail:hover .creative-play-overlay[b-i7e9i4i6v0] {
    opacity: 1;
}

.creative-play-overlay i[b-i7e9i4i6v0] {
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.creative-card-content[b-i7e9i4i6v0] {
    flex: 1;
    min-width: 0;
}

.creative-header-row[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.creative-info[b-i7e9i4i6v0] {
    min-width: 0;
    flex: 1;
}

.creative-title-row[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.creative-title[b-i7e9i4i6v0] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creative-subtitle[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.creative-usage[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    color: var(--color-success);
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.creative-meta[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.creative-meta-item[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.creative-meta-divider[b-i7e9i4i6v0] {
    color: var(--color-border-strong);
}

.creative-card-end[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-shrink: 0;
}

.creative-type-info[b-i7e9i4i6v0],
.creative-size-info[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.type-label[b-i7e9i4i6v0],
.size-label[b-i7e9i4i6v0] {
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.type-value[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.type-value.type-image[b-i7e9i4i6v0] {
    color: var(--color-success);
}

.type-value.type-video[b-i7e9i4i6v0] {
    color: var(--color-info);
}

.size-value[b-i7e9i4i6v0] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.creative-actions[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.action-btn-icon[b-i7e9i4i6v0] {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.action-btn-icon.preview[b-i7e9i4i6v0] {
    color: var(--color-primary);
    border-color: var(--color-info);
    background: var(--color-info-bg);
}

.action-btn-icon.preview:hover[b-i7e9i4i6v0] {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

.action-btn-icon.delete[b-i7e9i4i6v0] {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.action-btn-icon.delete:hover[b-i7e9i4i6v0] {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.action-btn-icon:disabled[b-i7e9i4i6v0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.type-badge[b-i7e9i4i6v0] {
    padding: var(--space-xs) 10px;
    border-radius: var(--border-radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    flex-shrink: 0;
}

.type-badge-image[b-i7e9i4i6v0] {
    background: #d1fae5;
    color: #065f46;
}

.type-badge-video[b-i7e9i4i6v0] {
    background: #e0e7ff;
    color: #3730a3;
}

.empty-state[b-i7e9i4i6v0] {
    text-align: center;
    padding: 80px 40px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
}

.empty-icon[b-i7e9i4i6v0] {
    width: 80px;
    height: 80px;
    background: var(--color-bg-active);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
}

.empty-icon i[b-i7e9i4i6v0] {
    font-size: 36px;
    color: var(--color-text-light);
}

.usage-chip[b-i7e9i4i6v0] {
    background: var(--color-bg-active);
    color: var(--color-text-muted);
    padding: var(--space-xs) 10px;
    border-radius: var(--border-radius-lg);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    display: inline-block;
    margin-top: var(--space-sm);
}

/* Hover effects */
.creative-card[b-i7e9i4i6v0] {
    transition: var(--transition-fast);
}

.creative-card:hover[b-i7e9i4i6v0] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Upload Dialog Styling */
[b-i7e9i4i6v0] .mud-dialog-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-i7e9i4i6v0] .mud-dialog {
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* Dialog Title Gradient Header */
[b-i7e9i4i6v0] .mud-dialog-title {
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

/* Dialog Close Button - force proper positioning */
[b-i7e9i4i6v0] .mud-dialog .mud-button-close {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    z-index: 1000 !important;
}

[b-i7e9i4i6v0] .mud-dialog .mud-button-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

[b-i7e9i4i6v0] .mud-dialog .mud-button-close svg {
    color: white !important;
}

[b-i7e9i4i6v0] .mud-dialog-content {
    padding: var(--space-lg) !important;
}

/* Dialog Actions */
[b-i7e9i4i6v0] .dialog-actions-modern {
    padding: var(--space-md) var(--space-lg) !important;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-bg-hover);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}

/* File Upload Button Hover Effect */
[b-i7e9i4i6v0] .file-upload-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 
 * NOTE: MudDialog renders outside component scope, so ::deep styles 
 * for .mud-input-* won't work reliably. Let MudBlazor defaults handle it.
 */

/* Dialog Alert Styling */
[b-i7e9i4i6v0] .mud-dialog .mud-alert {
    border-radius: var(--border-radius-md);
    padding: var(--space-sm) var(--space-md);
}

/* Progress Bar in Dialog */
[b-i7e9i4i6v0] .mud-dialog .mud-progress-linear {
    height: 6px;
    border-radius: var(--border-radius-full);
}

/* Dialog Buttons */
[b-i7e9i4i6v0] .dialog-actions-modern .mud-button-root {
    border-radius: var(--border-radius-md);
    padding: 10px 24px;
    font-weight: var(--font-weight-semibold);
    text-transform: none;
}

[b-i7e9i4i6v0] .dialog-actions-modern .mud-button-filled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[b-i7e9i4i6v0] .dialog-actions-modern .mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[b-i7e9i4i6v0] .mud-dialog .mud-input-slot {
    padding: 18px 14px;
}

/* Upload Dialog — Single Column Layout */
.upload-form-single[b-i7e9i4i6v0] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 4px 0 8px 0;
}

.upload-section-label[b-i7e9i4i6v0] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #374151;
    margin-bottom: 10px;
}

/* Drop Zone — empty state */
.upload-drop-zone[b-i7e9i4i6v0] {
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

.upload-drop-zone:hover[b-i7e9i4i6v0] {
    border-color: var(--mud-palette-primary);
    background: #f0f7ff;
}

.upload-drop-zone.dragging[b-i7e9i4i6v0] {
    border-color: var(--mud-palette-primary);
    background: #f0f7ff;
    transform: scale(1.02);
}

/* File selected: row with thumbnail + info + change button */
.upload-file-selected[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 80px;
}

.upload-file-selected:hover[b-i7e9i4i6v0] {
    background: #fafafa;
}

.file-thumb-container[b-i7e9i4i6v0] {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
}

.file-selected-info[b-i7e9i4i6v0] {
    flex: 1;
    min-width: 0;
}

.file-meta-row[b-i7e9i4i6v0] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.75rem;
    color: #64748b;
}

.file-meta-row .dot[b-i7e9i4i6v0] {
    color: #cbd5e1;
}

/* Upload progress card */
.upload-progress-card[b-i7e9i4i6v0] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-progress-header[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-progress-label[b-i7e9i4i6v0] {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.upload-progress-pct[b-i7e9i4i6v0] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    min-width: 36px;
    text-align: right;
}

.upload-steps-row[b-i7e9i4i6v0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.upload-step[b-i7e9i4i6v0] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #cbd5e1;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.upload-step.step-active[b-i7e9i4i6v0] {
    color: var(--mud-palette-primary);
}

.upload-step.step-done[b-i7e9i4i6v0] {
    color: #16a34a;
}

.upload-step-sep[b-i7e9i4i6v0] {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
    min-width: 12px;
}

/* Dialog footer actions */
[b-i7e9i4i6v0] .dialog-actions-upload {
    display: flex;
    gap: 12px;
    padding: 16px 24px !important;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
}

[b-i7e9i4i6v0] .dialog-actions-upload .mud-button-root {
    flex: 1;
}

/* Remove old two-column styles */
.upload-dialog-grid[b-i7e9i4i6v0],
.upload-form-column[b-i7e9i4i6v0],
.upload-preview-column[b-i7e9i4i6v0] {
    all: unset;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .creatives-page[b-i7e9i4i6v0] {
        padding: var(--space-md);
    }

    .page-header[b-i7e9i4i6v0] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .page-header-title[b-i7e9i4i6v0] {
        font-size: var(--font-size-2xl);
    }

    .filters-bar[b-i7e9i4i6v0] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stat-chip[b-i7e9i4i6v0] {
        font-size: 0.75rem;
        padding: 6px 12px;
        white-space: nowrap;
    }

    /* Keep horizontal layout but more compact on tablet */
    .creative-card-horizontal[b-i7e9i4i6v0] {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .creative-card-thumbnail[b-i7e9i4i6v0] {
        width: 60px;
        height: 45px;
    }

    .creative-title[b-i7e9i4i6v0] {
        font-size: 0.9rem;
    }

    .creative-header-row[b-i7e9i4i6v0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .creative-meta[b-i7e9i4i6v0] {
        display: none; /* Hide meta on mobile to save space */
    }

    .creative-card-end[b-i7e9i4i6v0] {
        margin-left: auto;
    }

    .action-btn-icon[b-i7e9i4i6v0] {
        width: 36px;
        height: 36px;
    }

    /* Upload Dialog Mobile Styles */
    [b-i7e9i4i6v0] .mud-dialog {
        margin: var(--space-sm);
        max-height: calc(100vh - 32px);
    }

    [b-i7e9i4i6v0] .mud-dialog-content {
        padding: var(--space-md) !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .upload-drop-zone[b-i7e9i4i6v0] {
        padding: 28px 16px;
    }

    [b-i7e9i4i6v0] .dialog-actions-upload {
        flex-direction: column-reverse;
        gap: var(--space-sm);
        padding: var(--space-md) !important;
    }
}

@media (max-width: 480px) {
    .page-header-title[b-i7e9i4i6v0] {
        font-size: var(--font-size-xl);
    }

    .page-header-subtitle[b-i7e9i4i6v0] {
        font-size: var(--font-size-sm);
    }

    .filters-bar[b-i7e9i4i6v0] {
        flex-direction: row;
        justify-content: space-between;
    }

    .stat-chip[b-i7e9i4i6v0] {
        flex: 1;
        justify-content: center;
        padding: 8px;
        font-size: 0.7rem;
    }

    .stat-chip i[b-i7e9i4i6v0] {
        display: none; /* Hide icons on very small screens */
    }

    /* Compact card for small phones */
    .creative-card-horizontal[b-i7e9i4i6v0] {
        padding: var(--space-sm);
    }

    .creative-card-thumbnail[b-i7e9i4i6v0] {
        width: 50px;
        height: 38px;
        border-radius: 4px;
    }

    .creative-title[b-i7e9i4i6v0] {
        font-size: 0.85rem;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .type-badge[b-i7e9i4i6v0] {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .creative-subtitle[b-i7e9i4i6v0] {
        font-size: 0.7rem;
    }

    .creative-actions[b-i7e9i4i6v0] {
        gap: 4px;
    }

    .action-btn-icon[b-i7e9i4i6v0] {
        width: 32px;
        height: 32px;
        padding: 4px;
    }

    .upload-file-selected[b-i7e9i4i6v0] {
        flex-wrap: wrap;
    }

    .upload-drop-zone[b-i7e9i4i6v0] {
        padding: 24px 12px;
    }

    [b-i7e9i4i6v0] .mud-dialog-title h5 {
        font-size: 1.125rem !important;
    }
}

/* /Components/Pages/DeviceManagement.razor.rz.scp.css */
/* Devices: a header, the publisher, then the device list (search, filters, table).
   Same theme as Find screens and My campaigns: --ad-* colours and the shared type scale.
   On phones the table becomes one card per device. */

.dm-page[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    color: var(--ad-ink);
}

/* ── Header ── */

.dm-head[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dm-head-icon[b-q9j3rf2iqt] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.dm-head-text[b-q9j3rf2iqt] {
    flex: 1;
    min-width: 0;
}

.dm-head-text h1[b-q9j3rf2iqt] {
    margin: 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
}

.dm-head-text p[b-q9j3rf2iqt] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

/* ── Cards and buttons ── */

.dm-card[b-q9j3rf2iqt] {
    padding: 18px 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.dm-btn[b-q9j3rf2iqt] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.dm-btn:hover:not(:disabled)[b-q9j3rf2iqt] {
    border-color: var(--ad-primary);
}

.dm-btn:disabled[b-q9j3rf2iqt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dm-btn--primary[b-q9j3rf2iqt] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.dm-btn--primary:hover:not(:disabled)[b-q9j3rf2iqt] {
    background: var(--ad-primary-strong);
}

.dm-btn--warn[b-q9j3rf2iqt] {
    border-color: var(--ad-warn-line);
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.dm-btn--warn:hover:not(:disabled)[b-q9j3rf2iqt] {
    border-color: var(--ad-warn);
}

.dm-btn--sm[b-q9j3rf2iqt] {
    height: 32px;
    padding: 0 10px;
    font-size: var(--ad-text-sm);
}

.dm-icon[b-q9j3rf2iqt] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.dm-icon:hover:not(:disabled)[b-q9j3rf2iqt] {
    border-color: var(--ad-primary);
    color: var(--ad-primary-strong);
}

.dm-icon:disabled[b-q9j3rf2iqt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.dm-btn:focus-visible[b-q9j3rf2iqt],
.dm-icon:focus-visible[b-q9j3rf2iqt],
.dm-seg button:focus-visible[b-q9j3rf2iqt] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

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

/* ── Publisher ── */

.dm-publisher[b-q9j3rf2iqt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 16px 28px;
}

.dm-publisher-main[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dm-publisher-name[b-q9j3rf2iqt] {
    margin: 0;
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-bold);
}

.dm-counts[b-q9j3rf2iqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dm-counts span[b-q9j3rf2iqt] {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ad-bg);
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.dm-counts b[b-q9j3rf2iqt] {
    color: var(--ad-ink);
    font-variant-numeric: tabular-nums;
}

.dm-counts .is-good[b-q9j3rf2iqt] {
    background: var(--ad-good-tint);
}

.dm-counts .is-good b[b-q9j3rf2iqt] {
    color: var(--ad-good);
}

.dm-facts[b-q9j3rf2iqt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid var(--ad-line-soft);
}

.dm-facts dt[b-q9j3rf2iqt] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    letter-spacing: var(--ad-tracking-caps);
    text-transform: uppercase;
}

.dm-facts dd[b-q9j3rf2iqt] {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dm-facts a[b-q9j3rf2iqt] {
    color: var(--ad-primary-strong);
    text-decoration: none;
}

.dm-facts a:hover[b-q9j3rf2iqt] {
    text-decoration: underline;
}

.is-mono[b-q9j3rf2iqt],
.dm-mono[b-q9j3rf2iqt] {
    font-family: var(--font-family-mono);
    letter-spacing: 0;
}

/* ── Device list: toolbar ── */

.dm-devices[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    overflow: hidden;
}

.dm-toolbar[b-q9j3rf2iqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 16px 20px 0;
}

.dm-search[b-q9j3rf2iqt] {
    flex: 1 1 280px;
    min-width: 0;
}

.dm-search[b-q9j3rf2iqt]  .mud-input-control {
    margin: 0;
}

.dm-seg[b-q9j3rf2iqt] {
    display: flex;
    flex: none;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.dm-seg button[b-q9j3rf2iqt] {
    height: 34px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ad-muted);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.dm-seg button:hover:not(:disabled)[b-q9j3rf2iqt] {
    color: var(--ad-ink);
}

.dm-seg button.is-on[b-q9j3rf2iqt] {
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: 0 1px 2px rgba(27, 36, 52, 0.12);
}

.dm-seg button.is-on.is-warn[b-q9j3rf2iqt] {
    color: var(--ad-warn);
}

.dm-summary[b-q9j3rf2iqt] {
    padding: 0 20px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.dm-summary b[b-q9j3rf2iqt] {
    color: var(--ad-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Device list: table ── */

.dm-table-wrap[b-q9j3rf2iqt] {
    overflow-x: auto;
    border-top: 1px solid var(--ad-line-soft);
}

.dm-table[b-q9j3rf2iqt] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ad-text-md);
}

.dm-table th[b-q9j3rf2iqt] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ad-line);
    background: var(--ad-bg);
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-caps);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.dm-table th:first-child[b-q9j3rf2iqt],
.dm-table td:first-child[b-q9j3rf2iqt] {
    padding-left: 20px;
}

.dm-table th:last-child[b-q9j3rf2iqt],
.dm-table td:last-child[b-q9j3rf2iqt] {
    padding-right: 20px;
}

.dm-table td[b-q9j3rf2iqt] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ad-line-soft);
    vertical-align: middle;
}

.dm-table tbody tr:last-child td[b-q9j3rf2iqt] {
    border-bottom: none;
}

.dm-table tbody tr:hover td[b-q9j3rf2iqt] {
    background: var(--ad-bg);
}

.dm-table .is-num[b-q9j3rf2iqt] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dm-table .is-actions[b-q9j3rf2iqt] {
    width: 1%;
    text-align: right;
}

.dm-device[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.dm-thumb[b-q9j3rf2iqt] {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 40px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ad-surface-2);
    color: var(--ad-faint);
}

.dm-thumb img[b-q9j3rf2iqt] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-device-text[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dm-device-text b[b-q9j3rf2iqt] {
    font-weight: var(--ad-weight-bold);
}

.dm-device-text .dm-mono[b-q9j3rf2iqt] {
    color: var(--ad-ink);
    font-size: var(--ad-text-sm);
}

.dm-faint[b-q9j3rf2iqt] {
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
}

.dm-stack[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dm-cell-main[b-q9j3rf2iqt] {
    display: block;
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
}

.dm-cell-sub[b-q9j3rf2iqt] {
    display: block;
    max-width: 240px;
    overflow: hidden;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dm-pills[b-q9j3rf2iqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dm-pill[b-q9j3rf2iqt] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
}

.dm-pill.is-good[b-q9j3rf2iqt] {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.dm-pill.is-warn[b-q9j3rf2iqt] {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.dm-pill.is-muted[b-q9j3rf2iqt] {
    background: var(--ad-surface-2);
    color: var(--ad-muted);
}

.dm-pill.is-outline[b-q9j3rf2iqt] {
    border: 1px solid var(--ad-line);
    color: var(--ad-muted);
}

.dm-playlist[b-q9j3rf2iqt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-primary-strong);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
}

.dm-actions[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ── Pager ── */

.dm-pager[b-q9j3rf2iqt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--ad-line-soft);
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    font-variant-numeric: tabular-nums;
}

.dm-pager-buttons[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dm-pager-page[b-q9j3rf2iqt] {
    padding: 0 6px;
    color: var(--ad-ink);
}

/* ── Empty, error and loading states ── */

.dm-empty[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    text-align: center;
}

.dm-empty-icon[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 14px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.dm-empty.is-bad .dm-empty-icon[b-q9j3rf2iqt] {
    background: var(--ad-bad-tint);
    color: var(--ad-bad);
}

.dm-empty h2[b-q9j3rf2iqt] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.dm-empty p[b-q9j3rf2iqt] {
    max-width: 440px;
    margin: 0 0 8px;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.dm-skel[b-q9j3rf2iqt],
.dm-skel-list[b-q9j3rf2iqt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-skel-list[b-q9j3rf2iqt] {
    padding: 4px 20px 20px;
}

.dm-skel-row[b-q9j3rf2iqt] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

.dm-skel-row > span[b-q9j3rf2iqt] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.dm-skel i[b-q9j3rf2iqt],
.dm-skel-list i[b-q9j3rf2iqt] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: dm-shimmer-b-q9j3rf2iqt 1.3s ease-in-out infinite;
}

.dm-skel-bar[b-q9j3rf2iqt] { height: 12px; width: 60%; max-width: 320px; }
.dm-skel-bar.is-title[b-q9j3rf2iqt] { height: 18px; width: 220px; }
.dm-skel-bar.is-short[b-q9j3rf2iqt] { width: 35%; }
.dm-skel-thumb[b-q9j3rf2iqt] { flex: none; width: 52px; height: 40px; border-radius: 8px !important; }
.dm-skel-pill[b-q9j3rf2iqt] { flex: none; width: 70px; height: 22px; border-radius: 999px !important; }

@keyframes dm-shimmer-b-q9j3rf2iqt {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-skel i[b-q9j3rf2iqt],
    .dm-skel-list i[b-q9j3rf2iqt] { animation: none; }
}

/* ── Narrower screens ── */

@media (max-width: 1024px) {
    .dm-publisher[b-q9j3rf2iqt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dm-facts[b-q9j3rf2iqt] {
        padding: 14px 0 0;
        border-top: 1px solid var(--ad-line-soft);
        border-left: none;
    }
}

/* Phones: one card per device instead of a wide table */
@media (max-width: 760px) {
    .dm-head[b-q9j3rf2iqt] {
        flex-wrap: wrap;
    }

    .dm-head-text h1[b-q9j3rf2iqt] {
        font-size: var(--ad-text-xl);
    }

    .dm-head .dm-btn[b-q9j3rf2iqt] {
        width: 100%;
    }

    .dm-card[b-q9j3rf2iqt] {
        padding: 16px;
    }

    .dm-devices[b-q9j3rf2iqt] {
        padding: 0;
    }

    .dm-toolbar[b-q9j3rf2iqt] {
        padding: 14px 16px 0;
    }

    .dm-seg[b-q9j3rf2iqt] {
        width: 100%;
        overflow-x: auto;
    }

    .dm-seg button[b-q9j3rf2iqt] {
        flex: 1 0 auto;
    }

    .dm-toolbar > .dm-btn[b-q9j3rf2iqt] {
        width: 100%;
    }

    .dm-summary[b-q9j3rf2iqt] {
        padding: 0 16px;
    }

    .dm-table thead[b-q9j3rf2iqt] {
        display: none;
    }

    .dm-table[b-q9j3rf2iqt],
    .dm-table tbody[b-q9j3rf2iqt],
    .dm-table tr[b-q9j3rf2iqt],
    .dm-table td[b-q9j3rf2iqt] {
        display: block;
        width: 100%;
    }

    .dm-table tr[b-q9j3rf2iqt] {
        padding: 14px 16px;
        border-bottom: 1px solid var(--ad-line-soft);
    }

    .dm-table tbody tr:hover td[b-q9j3rf2iqt] {
        background: transparent;
    }

    .dm-table td[b-q9j3rf2iqt],
    .dm-table td:first-child[b-q9j3rf2iqt],
    .dm-table td:last-child[b-q9j3rf2iqt] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: none;
        text-align: right;
    }

    .dm-table td[data-label][b-q9j3rf2iqt]::before {
        content: attr(data-label);
        flex: none;
        color: var(--ad-muted);
        font-size: var(--ad-text-xs);
        font-weight: var(--ad-weight-semibold);
        letter-spacing: var(--ad-tracking-caps);
        text-transform: uppercase;
    }

    .dm-table td[data-label="Device"][b-q9j3rf2iqt] {
        display: block;
        padding-bottom: 8px;
        text-align: left;
    }

    .dm-table td[data-label="Device"][b-q9j3rf2iqt]::before {
        display: none;
    }

    .dm-stack[b-q9j3rf2iqt] {
        align-items: flex-end;
        text-align: right;
    }

    .dm-cell-sub[b-q9j3rf2iqt] {
        max-width: none;
    }

    .dm-table .is-actions[b-q9j3rf2iqt] {
        width: 100%;
        padding-top: 10px;
    }

    .dm-actions[b-q9j3rf2iqt] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .dm-pager[b-q9j3rf2iqt] {
        padding: 12px 16px 16px;
    }
}
/* /Components/Pages/Devices.razor.rz.scp.css */
/* Custom striped table styles for Devices page */
[b-6450td4l2g] .devices-striped-table .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: #E3F2FD;
}

[b-6450td4l2g] .devices-striped-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: #FFFFFF;
}

/* Override hover color to be slightly darker blue */
[b-6450td4l2g] .devices-striped-table .mud-table-body .mud-table-row:hover {
    background-color: #BBDEFB;
}
/* /Components/Pages/Devices2.razor.rz.scp.css */
/* Custom striped table styles for Devices page - Reduced intensity */
[b-3l57itfxd0] .devices-striped-table .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: var(--color-bg-hover);
    /* Lighter blue for subtlety */
}

[b-3l57itfxd0] .devices-striped-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--color-bg-surface);
}

/* Override hover color to be slightly darker blue */
[b-3l57itfxd0] .devices-striped-table .mud-table-body .mud-table-row:hover {
    background-color: var(--color-primary-soft);
    /* Softer hover */
}

/* Fix multi-select dropdown spacing - Using the same fix from modern-theme.css */
[b-3l57itfxd0] .mud-popover.mud-popover-open .mud-list {
    background: var(--color-bg-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

/* Compact list items for multi-select */
[b-3l57itfxd0] .mud-list-item {
    padding: 8px 16px;
    min-height: 40px;
}

/* Checkbox alignment */
[b-3l57itfxd0] .mud-list-item .mud-checkbox {
    margin-right: 12px;
}
/* /Components/Pages/Devices3.razor.rz.scp.css */
/* Main Page Container - Desktop spacing aligned with other pages */
.devices-page-container[b-g07r850tq5] {
    max-width: 1600px; /* Wider to use more screen space for device cards */
    margin: 0 auto;
    padding: var(--space-lg); /* Consistent internal padding */
    padding-bottom: 80px; /* Space for fixed footer */
    background: transparent; /* Inherit MainLayout gradient for consistency */
}

/* Override MudMainContent default padding on mobile */
@media (max-width: 768px) {
    /* Keep global MudMainContent top padding intact for consistency */
}

/* Page Header */
.page-header[b-g07r850tq5] {
    margin-bottom: var(--space-md);
}

.page-header-title[b-g07r850tq5] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.page-header-subtitle[b-g07r850tq5] {
    color: var(--color-text-muted);
    margin: 0;
    font-size: var(--font-size-sm);
}

/* Search Card */
.search-card[b-g07r850tq5] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.search-controls[b-g07r850tq5] {
    display: grid;
    grid-template-columns: 0.5fr 350px 140px 120px auto;
    gap: var(--space-xs);
    align-items: end;
}

/* Three Column Grid */
.content-grid[b-g07r850tq5] {
    display: grid;
    gap: var(--space-md);
    height: calc(100vh - 240px);
    margin-bottom: 80px;
    transition: grid-template-columns var(--transition-base);
    align-items: stretch;
}

.content-grid.show-all[b-g07r850tq5] {
    grid-template-columns: 1fr 360px;
}

.content-grid.hide-filters[b-g07r850tq5] {
    grid-template-columns: 1fr;
}

.content-grid.hide-map[b-g07r850tq5] {
    grid-template-columns: 1fr;
}

.content-grid.hide-both[b-g07r850tq5] {
    grid-template-columns: 1fr;
}

/* Panel Cards */
.panel-card[b-g07r850tq5] {
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border-subtle);
    overflow-y: hidden;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

/* Tabbed Panel */
.panel-card.tabbed-panel[b-g07r850tq5] {
    overflow: hidden;
}

    .panel-card.tabbed-panel .mud-tabs[b-g07r850tq5] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .panel-card.tabbed-panel .mud-tabs-panels[b-g07r850tq5] {
        flex: 1;
        overflow: hidden;
    }

    .panel-card.tabbed-panel .mud-tab-panel[b-g07r850tq5] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

.panel-card-header[b-g07r850tq5] {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border-subtle);
    background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-bg-hover) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-card-title[b-g07r850tq5] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.panel-card-body[b-g07r850tq5] {
    padding: var(--space-md);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-bottom: calc(var(--space-md) + 20px); /* Extra padding at bottom for last filter item */
}

/* Scrollable Devices Panel */
.devices-panel .panel-card-body[b-g07r850tq5] {
    overflow-y: auto;
}

/* Device list body - fills available height, explicit overflow for scroll */
.devices-list-body[b-g07r850tq5] {
    height: calc(100vh - 340px);
    overflow-y: hidden;
    overflow-x: clip;
    padding: 0 !important;
}

.devices-panel .devices-grid[b-g07r850tq5] {
    padding-bottom: var(--space-md);
}

/* Filter Section */
.filter-section[b-g07r850tq5] {
    margin-bottom: var(--space-md);
}

.filter-section-title[b-g07r850tq5] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Table Row Hover Effects */
.mud-table-row:hover[b-g07r850tq5] {
    background-color: var(--color-bg-hover);
    transition: background-color var(--transition-fast);
}

/* Remove vertical borders from table cells */
.mud-table td[b-g07r850tq5],
.mud-table th[b-g07r850tq5] {
    border-left: none !important;
    border-right: none !important;
}

/* Device Cards - Matching Devices2 */
.devices-grid[b-g07r850tq5] {
    display: grid;
    gap: var(--space-xs);
    transition: grid-template-columns var(--transition-base);
}

.devices-grid.cols-2[b-g07r850tq5] {
    grid-template-columns: repeat(2, 1fr);
}

/* Desktop: Show full Next text, hide short text */
.next-full-text[b-g07r850tq5] {
    display: inline;
}

.next-short-text[b-g07r850tq5] {
    display: none;
}

.devices-grid.cols-3[b-g07r850tq5] {
    grid-template-columns: repeat(3, 1fr);
}

.devices-grid.cols-4[b-g07r850tq5] {
    grid-template-columns: repeat(4, 1fr);
}

.device-card[b-g07r850tq5] {
    transition: all var(--transition-base);
    cursor: pointer;
    border: 1px solid var(--color-border-subtle);
    max-height: 180px;
    min-width: 0; /* Allow cards to shrink below default min-width */
    overflow: visible; /* Allow checkboxes to render fully */
}

/* Device card grid for card view */
.device-card-grid[b-g07r850tq5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 12px;
    padding: 8px;
}

@media (max-width: 1400px) {
    .device-card-grid[b-g07r850tq5] {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 900px) {
    .device-card-grid[b-g07r850tq5] {
        grid-template-columns: repeat(1, 1fr);
    }
}

.device-card:hover[b-g07r850tq5] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-info);
    background: linear-gradient(to bottom, var(--color-bg-hover) 0%, var(--color-white) 100%);
}

.device-card-selected[b-g07r850tq5] {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-md);
    background: linear-gradient(to bottom, var(--color-info-bg) 0%, var(--color-white) 100%);
}

.device-card-selected:hover[b-g07r850tq5] {
    border: 2px solid #93c5fd;
    box-shadow: 0 6px 16px rgba(147, 197, 253, 0.5);
}

/* Map Panel */
.map-container[b-g07r850tq5] {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .map-container > div[b-g07r850tq5] {
        height: 100%;
    }

.image-viewer-backdrop[b-g07r850tq5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 24px;
}

.image-viewer-content[b-g07r850tq5] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.image-viewer-content img[b-g07r850tq5] {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
    object-fit: contain;
    background: #0f172a;
}

.image-viewer-caption[b-g07r850tq5] {
    color: #e2e8f0;
    font-size: 14px;
    text-align: center;
    max-width: 80vw;
}

.image-viewer-close[b-g07r850tq5] {
    position: absolute;
    top: -10px;
    right: -10px;
    background: rgba(15, 23, 42, 0.6) !important;
    color: #f8fafc !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .content-grid[b-g07r850tq5] {
        grid-template-columns: 240px 1fr 320px;
    }
}

@media (max-width: 968px) {
    .content-grid[b-g07r850tq5] {
        grid-template-columns: 1fr;
    }
    
    .search-controls[b-g07r850tq5] {
        grid-template-columns: 1fr;
    }
    
    .filter-panel[b-g07r850tq5] {
        max-height: 400px;
    }
    
    .map-panel[b-g07r850tq5] {
        position: relative;
        top: 0;
        height: 400px;
    }
    
    .devices-grid.cols-2[b-g07r850tq5],
    .devices-grid.cols-3[b-g07r850tq5],
    .devices-grid.cols-4[b-g07r850tq5] {
        grid-template-columns: 1fr;
    }
    
    .device-card[b-g07r850tq5] {
        max-height: 220px;
    }
}

/* Address Suggestions */
.address-suggestion:hover[b-g07r850tq5] {
    background: var(--color-bg-hover);
}

/* Empty State */
.empty-state[b-g07r850tq5] {
    text-align: center;
    padding: 60px var(--space-lg);
    color: var(--color-text-muted);
}

.empty-state-icon[b-g07r850tq5] {
    font-size: 64px;
    color: var(--color-border-strong);
    margin-bottom: var(--space-md);
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Mobile/Desktop visibility controls with proper specificity */
.panel-card-header .hide-on-mobile[b-g07r850tq5] {
    display: inline-flex;
}

.panel-card-header .show-on-mobile[b-g07r850tq5] {
    display: none;
}

@media (max-width: 960px) {
    .panel-card-header .hide-on-mobile[b-g07r850tq5] {
        display: none;
    }
    
    .panel-card-header .show-on-mobile[b-g07r850tq5] {
        display: inline-flex;
    }
    
    .devices-page-container[b-g07r850tq5] {
        padding: 8px var(--space-xs) var(--space-xs); /* Minimal top padding on mobile */
    }
    
    /* Page Header */
    .page-header[b-g07r850tq5] {
        margin: 0; /* Remove all margins */
    }
    
    .page-header-title[b-g07r850tq5] {
        font-size: var(--font-size-xl);
        gap: var(--space-xs);
        line-height: 1.2;
        margin: 0 0 4px 0; /* Explicit margins - no top margin */
    }
    
    .page-header-title .mud-icon-root[b-g07r850tq5] {
        font-size: 24px;
    }
    
    .page-header-subtitle[b-g07r850tq5] {
        font-size: 13px;
        margin-bottom: var(--space-xs); /* Space before search card */
    }
    
    /* Search Card - Stack vertically */
    .search-card[b-g07r850tq5] {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    .search-controls[b-g07r850tq5] {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .search-controls > *[b-g07r850tq5] {
        width: 100%;
        min-width: unset;
    }
    
    /* Content Grid - Single column */
    .content-grid[b-g07r850tq5] {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        height: auto;
        min-height: calc(100vh - 400px);
        margin-bottom: 100px;
    }

    /* Device list body on mobile: fill remaining viewport minus header/search/footer */
    .devices-list-body[b-g07r850tq5] {
        height: calc(100dvh - 260px);
        min-height: 400px;
        overflow-y: hidden;
        overflow-x: clip;
    }

    /* Panel Cards */
    .panel-card[b-g07r850tq5] {
        height: auto;
        min-height: 400px;
    }
    
    .panel-card-header[b-g07r850tq5] {
        padding: var(--space-xs) var(--space-md);
    }
    
    .panel-card-title[b-g07r850tq5] {
        font-size: var(--font-size-lg);
    }
    
    /* Device Cards - Single column */
    .device-card-grid[b-g07r850tq5] {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        padding: var(--space-xs);
    }
    
    /* Tabbed Panel - Hide on mobile, use drawers instead */
    .tabbed-panel[b-g07r850tq5] {
        display: none;
    }
    
    /* Footer Cart - Mobile Optimized */
    .footer-cart[b-g07r850tq5] {
        flex-direction: row;
        padding: 8px var(--space-md);
        gap: var(--space-xs);
        align-items: center;
        justify-content: space-between;
    }
    
    /* Hide cart statistics on mobile */
    .footer-cart > div:first-child > span:not(:first-child)[b-g07r850tq5],
    .footer-cart > div:first-child > span.MudIcon-root ~ *:not(button)[b-g07r850tq5] {
        display: none;
    }
    
    /* Keep cart button compact on mobile */
    .footer-cart > div:first-child[b-g07r850tq5] {
        flex: 0 0 auto;
    }
    
    /* Hide Add All button on mobile, keep only Next button */
    .footer-cart > div:last-child > button:first-child[b-g07r850tq5] {
        display: none;
    }
    
    /* Make Next button prominent */
    .footer-cart > div:last-child[b-g07r850tq5] {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
    
    .footer-cart > div:last-child a[b-g07r850tq5],
    .footer-cart > div:last-child button:not(:first-child)[b-g07r850tq5] {
        min-height: 44px;
        font-size: var(--font-size-sm);
        padding: 10px var(--space-lg);
    }
    
    /* Show short text on mobile */
    .footer-cart .next-full-text[b-g07r850tq5] {
        display: none;
    }
    
    .footer-cart .next-short-text[b-g07r850tq5] {
        display: inline;
    }
    
    /* Touch-friendly button sizes */
    .mud-button[b-g07r850tq5],
    .mud-icon-button[b-g07r850tq5] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Table View on Mobile */
    .mud-table[b-g07r850tq5] {
        font-size: var(--font-size-xs);
    }
    
    .mud-table th[b-g07r850tq5],
    .mud-table td[b-g07r850tq5] {
        padding: 8px 6px;
    }
    
    /* Add padding to bottom of page content so footer doesn't cover content */
    .devices-page-container[b-g07r850tq5] {
        padding-bottom: 80px;
    }
}

@media (max-width: 480px) {
    .devices-page-container[b-g07r850tq5] {
        padding: var(--space-xs);
    }
    
    .page-header-title[b-g07r850tq5] {
        font-size: var(--font-size-xl);
        gap: var(--space-xs);
    }
    
    .search-card[b-g07r850tq5] {
        padding: var(--space-xs);
    }
    
    .search-controls[b-g07r850tq5] {
        gap: 10px;
    }
    
    .device-card-grid[b-g07r850tq5] {
        gap: 10px;
        padding: 10px;
    }
}
/* /Components/Pages/InventoryFind.razor.rz.scp.css */
/* Find screens: hero with search and popular picks, then cards, a list or a map.
   MudBlazor parts are reached with ::deep from an element of this page; everything else is plain markup. */

.inv[b-ysk8a0a1xj] {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 24px 48px;
    color: var(--ad-ink);
}

.inv.has-bar[b-ysk8a0a1xj] {
    padding-bottom: 120px;
}

/* ── Buttons ── */

.inv-btn[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    white-space: nowrap;
    cursor: pointer;
}

.inv-btn:disabled[b-ysk8a0a1xj] {
    cursor: default;
    opacity: 0.6;
}

.inv-btn:focus-visible[b-ysk8a0a1xj],
.inv-iconbtn:focus-visible[b-ysk8a0a1xj],
.inv-add:focus-visible[b-ysk8a0a1xj],
.inv-pick:focus-visible[b-ysk8a0a1xj],
.inv-views button:focus-visible[b-ysk8a0a1xj],
.inv-card-photo:focus-visible[b-ysk8a0a1xj],
.inv-list-main:focus-visible[b-ysk8a0a1xj],
.inv-map-pick:focus-visible[b-ysk8a0a1xj],
.inv-cartbtn:focus-visible[b-ysk8a0a1xj] {
    outline: 3px solid color-mix(in srgb, var(--ad-primary) 45%, transparent);
    outline-offset: 2px;
}

.inv-btn--primary[b-ysk8a0a1xj] {
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.inv-btn--primary:hover:not(:disabled)[b-ysk8a0a1xj] {
    background: var(--ad-primary-strong);
}

.inv-btn--ghost[b-ysk8a0a1xj] {
    border-color: var(--ad-line);
    background: var(--ad-surface);
    color: var(--ad-ink);
}

.inv-btn--ghost:hover[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
    color: var(--ad-primary-strong);
}

.inv-btn--text[b-ysk8a0a1xj] {
    background: transparent;
    color: var(--ad-primary-strong);
}

.inv-btn--text:hover[b-ysk8a0a1xj] {
    background: var(--ad-primary-tint);
}

.inv-iconbtn[b-ysk8a0a1xj] {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.inv-iconbtn:hover:not(:disabled)[b-ysk8a0a1xj] {
    color: var(--ad-primary-strong);
    border-color: var(--ad-primary);
}

.inv-count[b-ysk8a0a1xj] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font-size: var(--ad-text-xs);
}

.inv-link[b-ysk8a0a1xj] {
    min-height: 32px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--ad-primary-strong);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    cursor: pointer;
}

/* ── Hero ── */

.inv-hero[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
    padding: 28px 28px 22px;
    border: 1px solid var(--ad-line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ad-primary-tint) 90%, transparent) 0, transparent 46%),
        var(--ad-surface);
}

.inv-hero-top[b-ysk8a0a1xj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.inv-eyebrow[b-ysk8a0a1xj] {
    display: block;
    margin-bottom: 8px;
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.inv-hero h1[b-ysk8a0a1xj] {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: var(--ad-weight-heavy);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.inv-lede[b-ysk8a0a1xj] {
    max-width: 62ch;
    margin: 10px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-lg);
    line-height: 1.5;
}

.inv-lede b[b-ysk8a0a1xj] {
    color: var(--ad-ink);
}

.inv-cartbtn[b-ysk8a0a1xj] {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: var(--ad-weight-bold);
    cursor: pointer;
}

.inv-cartbtn b[b-ysk8a0a1xj] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ad-orange);
    color: #FFFFFF;
    font-size: var(--ad-text-xs);
}

/* Search row: the input, the distance when searching a ZIP code, Search and Filters */
.inv-search[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-search-field[b-ysk8a0a1xj] {
    flex: 1;
    min-width: 0;
}

.inv-search-field[b-ysk8a0a1xj]  .mud-input-control {
    margin: 0;
}

.inv-search[b-ysk8a0a1xj]  .inv-search-input .mud-input-outlined {
    border-radius: 12px;
    background: var(--ad-surface);
}

.inv-search[b-ysk8a0a1xj]  .inv-search-input input {
    min-height: 26px;
    font-size: var(--ad-text-lg);
}

.inv-radius[b-ysk8a0a1xj] {
    flex: 0 0 140px;
}

.inv-radius[b-ysk8a0a1xj]  .mud-input-control {
    margin: 0;
}

.inv-search .inv-btn[b-ysk8a0a1xj] {
    min-height: 52px;
}

/* Popular picks: the biggest venue types and markets as one-tap filters */
.inv-picks[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.inv-picks-label[b-ysk8a0a1xj] {
    margin-right: 2px;
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inv-pick[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.inv-pick[b-ysk8a0a1xj]  .mud-icon-root {
    color: var(--ad-primary);
}

.inv-pick small[b-ysk8a0a1xj] {
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.inv-pick:hover[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
}

.inv-picks-hint[b-ysk8a0a1xj] {
    margin: -6px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.inv-link.is-inline[b-ysk8a0a1xj] {
    min-height: 0;
    padding: 0;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.inv-pick.is-on[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

/* ── Results bar ── */

.inv-results[b-ysk8a0a1xj] {
    min-width: 0;
}

.inv-bar[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.inv-bar-count[b-ysk8a0a1xj] {
    color: var(--ad-muted);
    font-size: var(--ad-text-lg);
}

.inv-bar-count b[b-ysk8a0a1xj] {
    color: var(--ad-ink);
    font-variant-numeric: tabular-nums;
}

.inv-chips[b-ysk8a0a1xj] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.inv-chip[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 32px;
    padding: 0 4px 0 12px;
    border-radius: 999px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
}

.inv-chip button[b-ysk8a0a1xj] {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.inv-chip button:hover[b-ysk8a0a1xj] {
    background: color-mix(in srgb, var(--ad-primary) 14%, transparent);
}

.inv-bar-tools[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Add every screen in the search */
.inv-selall[b-ysk8a0a1xj] {
    min-height: 44px;
    padding: 0 14px;
    font-size: var(--ad-text-md);
}

.inv-selall-done[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-good);
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
}

.inv-selall-note[b-ysk8a0a1xj] {
    color: var(--ad-faint);
    font-size: var(--ad-text-sm);
}

.inv-views[b-ysk8a0a1xj] {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--ad-surface-2);
}

.inv-views button[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ad-muted);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.inv-views button.is-on[b-ysk8a0a1xj] {
    background: var(--ad-surface);
    color: var(--ad-primary-strong);
    box-shadow: 0 1px 3px rgba(27, 36, 52, 0.14);
}

/* ── Add button (cards, list and map) ── */

.inv-add[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ad-primary);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-primary-strong);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    white-space: nowrap;
    cursor: pointer;
}

.inv-add:hover[b-ysk8a0a1xj] {
    background: var(--ad-primary-tint);
}

.inv-add.is-added[b-ysk8a0a1xj] {
    border-color: var(--ad-good);
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.inv-add.is-wide[b-ysk8a0a1xj] {
    width: 100%;
}

.inv-add.is-icon[b-ysk8a0a1xj] {
    flex: none;
    width: 44px;
    padding: 0;
}

/* ── Cards ── */

.inv-grid[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.inv-card[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-card:hover[b-ysk8a0a1xj] {
    border-color: color-mix(in srgb, var(--ad-primary) 45%, var(--ad-line));
    box-shadow: 0 14px 30px -18px rgba(27, 36, 52, 0.35);
}

.inv-card.is-added[b-ysk8a0a1xj] {
    border-color: var(--ad-good);
}

.inv-card-photo[b-ysk8a0a1xj] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--ad-surface-2);
    cursor: pointer;
}

.inv-card-photo img[b-ysk8a0a1xj] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.inv-card:hover .inv-card-photo img[b-ysk8a0a1xj] {
    transform: scale(1.03);
}

.inv-card-noimg[b-ysk8a0a1xj] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ad-primary-tint), var(--ad-surface-2));
    color: var(--ad-primary);
}

.inv-card-noimg[b-ysk8a0a1xj]  .mud-icon-root {
    font-size: 44px;
}

.inv-card-type[b-ysk8a0a1xj] {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ad-ink);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-card-body[b-ysk8a0a1xj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 14px;
}

.inv-card-body h2[b-ysk8a0a1xj] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.inv-card-place[b-ysk8a0a1xj] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.inv-card-meta[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    margin: 4px 0 8px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.inv-card-meta > span:first-child[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inv-card-body .inv-add[b-ysk8a0a1xj] {
    margin-top: auto;
}

.inv-price[b-ysk8a0a1xj] {
    padding: 3px 9px;
    border-radius: 8px;
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
    font-weight: var(--ad-weight-bold);
    white-space: nowrap;
}

/* ── List ── */

.inv-list[b-ysk8a0a1xj] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
    list-style: none;
}

.inv-list li[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ad-line-soft);
}

.inv-list li:has(.inv-list-id)[b-ysk8a0a1xj] {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
}

.inv-list li:last-child[b-ysk8a0a1xj] {
    border-bottom: 0;
}

.inv-list li.is-added[b-ysk8a0a1xj] {
    background: color-mix(in srgb, var(--ad-good-tint) 55%, var(--ad-surface));
}

.inv-list-main[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inv-thumb[b-ysk8a0a1xj] {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary);
}

.inv-thumb img[b-ysk8a0a1xj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-list-text[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
}

.inv-list-text b[b-ysk8a0a1xj] {
    overflow: hidden;
    font-weight: var(--ad-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-list-text span[b-ysk8a0a1xj] {
    overflow: hidden;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-list-type[b-ysk8a0a1xj],
.inv-list-screen[b-ysk8a0a1xj] {
    overflow: hidden;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-list-price[b-ysk8a0a1xj] {
    color: var(--ad-orange-strong);
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    white-space: nowrap;
}

.inv-list-id[b-ysk8a0a1xj] {
    overflow: hidden;
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
    text-overflow: ellipsis;
}

/* ── Map ── */

.inv-map[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    height: clamp(520px, 70vh, 760px);
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
}

.inv-map-canvas[b-ysk8a0a1xj] {
    min-height: 0;
}

.inv-map-list[b-ysk8a0a1xj] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-left: 1px solid var(--ad-line);
}

.inv-map-note[b-ysk8a0a1xj] {
    margin: 6px 8px 10px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.inv-map-item[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 8px;
    border-radius: 10px;
}

.inv-map-item.is-on[b-ysk8a0a1xj] {
    background: var(--ad-primary-tint);
}

.inv-map-pick[b-ysk8a0a1xj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inv-map-pick b[b-ysk8a0a1xj],
.inv-map-pick span[b-ysk8a0a1xj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-map-pick b[b-ysk8a0a1xj] {
    font-size: var(--ad-text-md);
}

.inv-map-pick span[b-ysk8a0a1xj] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

/* ── Loading, empty, more ── */

.inv-skeleton[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.inv-skel-card[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
}

.inv-skel-card i[b-ysk8a0a1xj] {
    display: block;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: inv-shimmer-b-ysk8a0a1xj 1.4s ease-in-out infinite;
}

.inv-skel-img[b-ysk8a0a1xj] {
    aspect-ratio: 16 / 10;
}

.inv-skel-line[b-ysk8a0a1xj] {
    height: 12px;
    margin: 0 14px;
    border-radius: 6px;
}

.inv-skel-line.is-short[b-ysk8a0a1xj] {
    width: 55%;
}

@keyframes inv-shimmer-b-ysk8a0a1xj {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .inv-skel-card i[b-ysk8a0a1xj] { animation: none; }
    .inv-card-photo img[b-ysk8a0a1xj] { transition: none; }
}

.inv-empty[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 20px;
    border: 1px dashed var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
    text-align: center;
}

.inv-empty-icon[b-ysk8a0a1xj] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ad-primary-tint);
    color: var(--ad-primary);
}

.inv-empty h2[b-ysk8a0a1xj] {
    margin: 6px 0 0;
    font-size: var(--ad-text-xl);
}

.inv-empty p[b-ysk8a0a1xj] {
    margin: 0 0 8px;
    color: var(--ad-muted);
}

.inv-more[b-ysk8a0a1xj] {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
}

/* ── Filters drawer (MudDrawer renders here, so ::deep reaches it) ── */

.inv-drawer-inner[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ad-surface);
}

.inv-drawer-head[b-ysk8a0a1xj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ad-line);
}

.inv-drawer-head h2[b-ysk8a0a1xj] {
    margin: 0;
    font-size: var(--ad-text-xl);
}

.inv-drawer-head span[b-ysk8a0a1xj] {
    display: block;
    margin-top: 4px;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.inv-drawer-body[b-ysk8a0a1xj] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.inv-suggest[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ad-line);
}

.inv-suggest-btn[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-primary-strong);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    text-align: left;
    cursor: pointer;
}

.inv-suggest-btn:hover[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
}

.inv-drawer-foot[b-ysk8a0a1xj] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ad-line);
}

.inv-drawer-foot .inv-btn--primary[b-ysk8a0a1xj] {
    flex: 1;
}

/* ── Selection bar ── */

.inv-selbar[b-ysk8a0a1xj] {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(960px, calc(100vw - 32px));
    padding: 10px 10px 10px 20px;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
    box-shadow: 0 18px 40px -16px rgba(27, 36, 52, 0.4);
    transform: translateX(-50%);
}

.inv-selbar-text[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    min-width: 0;
}

.inv-selbar-text span[b-ysk8a0a1xj] {
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.inv-selbar-actions[b-ysk8a0a1xj] {
    display: flex;
    flex: none;
    gap: 6px;
}

/* ── Theme, matched to the advertiser page (/pa): Plus Jakarta, an orange-dot eyebrow,
   a dark headline with a brand-blue phrase and an orange brush stroke, green-check trust lines,
   and soft blue-tinted panels ── */

.inv[b-ysk8a0a1xj] {
    font-family: "Plus Jakarta Sans", sans-serif;
}

.inv-hero[b-ysk8a0a1xj] {
    position: relative;
    overflow: hidden;
    padding: 32px 32px 24px;
    border-color: color-mix(in srgb, var(--ad-primary) 16%, var(--ad-line));
    border-radius: 24px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--ad-orange-tint) 70%, transparent) 0, transparent 34%),
        radial-gradient(circle at 100% 0%, var(--ad-primary-tint) 0, transparent 52%),
        var(--ad-surface);
    box-shadow: 0 24px 60px -36px rgba(20, 40, 80, 0.35);
}

.inv-hero-top[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 32px;
}

.inv-eyebrow[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--ad-orange-strong);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-bold);
    letter-spacing: 0.06em;
}

.inv-eyebrow[b-ysk8a0a1xj]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ad-orange);
    box-shadow: 0 0 0 4px var(--ad-orange-tint);
}

.inv-hero h1[b-ysk8a0a1xj] {
    margin: 10px 0 14px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.inv-hero h1 em[b-ysk8a0a1xj] {
    font-style: normal;
    color: var(--ad-primary);
}

.inv-swash[b-ysk8a0a1xj] {
    position: relative;
    white-space: nowrap;
}

.inv-swash[b-ysk8a0a1xj]::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -0.14em;
    height: 0.18em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C 50 3, 120 2, 197 6' fill='none' stroke='%23FF962C' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}

.inv-lede[b-ysk8a0a1xj] {
    max-width: 48ch;
    margin: 0;
    font-size: var(--ad-text-lg);
}

.inv-trust[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.inv-trust span[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inv-trust[b-ysk8a0a1xj]  .mud-icon-root {
    color: var(--ad-good);
}

/* Photo mosaic: four real venues, tilted slightly, with the numbers floating on top */
.inv-hero-visual[b-ysk8a0a1xj] {
    position: relative;
    min-width: 0;
    padding: 10px 18px 18px;
}

.inv-mosaic[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 112px 112px;
    gap: 10px;
    transform: rotate(-2deg);
}

.inv-mosaic-tile[b-ysk8a0a1xj] {
    overflow: hidden;
    border: 4px solid var(--ad-surface);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--ad-primary-tint), var(--ad-surface-2));
    box-shadow: 0 14px 30px -18px rgba(20, 40, 80, 0.45);
}

.inv-mosaic-tile.is-0[b-ysk8a0a1xj] {
    grid-row: span 2;
}

.inv-mosaic-tile.is-3[b-ysk8a0a1xj] {
    display: none;
}

.inv-mosaic-tile img[b-ysk8a0a1xj] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-stat[b-ysk8a0a1xj] {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    box-shadow: 0 16px 34px -18px rgba(20, 40, 80, 0.45);
    line-height: 1.15;
}

.inv-stat b[b-ysk8a0a1xj] {
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.inv-stat span[b-ysk8a0a1xj] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.inv-stat.is-screens[b-ysk8a0a1xj] {
    left: 0;
    bottom: 0;
}

.inv-stat.is-screens b[b-ysk8a0a1xj] {
    color: var(--ad-primary);
}

.inv-stat.is-price[b-ysk8a0a1xj] {
    right: 0;
    top: 0;
}

.inv-stat.is-price b[b-ysk8a0a1xj] {
    color: var(--ad-orange-strong);
}

/* Search sits in a white pill-ish panel like the /pa address box */
.inv-search .inv-btn[b-ysk8a0a1xj] {
    min-height: 54px;
    border-radius: 12px;
}

.inv-search .inv-btn--primary[b-ysk8a0a1xj] {
    padding-inline: 26px;
}

.inv-search-field[b-ysk8a0a1xj]  .mud-input-outlined {
    min-height: 54px;
    box-shadow: 0 10px 24px -18px rgba(20, 40, 80, 0.5);
}

/* Popular picks: each with a tinted icon */
.inv-pick[b-ysk8a0a1xj]  .mud-icon-root {
    padding: 3px;
    border-radius: 50%;
    background: var(--ad-primary-tint);
    font-size: 1.35rem;
}

.inv-pick[b-ysk8a0a1xj] {
    padding-left: 6px;
    background: color-mix(in srgb, var(--ad-surface) 80%, transparent);
}

/* Results heading row */
.inv-bar[b-ysk8a0a1xj] {
    padding: 4px 2px;
}

.inv-bar-count[b-ysk8a0a1xj] {
    font-size: var(--ad-text-lg);
}

.inv-bar-count b[b-ysk8a0a1xj] {
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-heavy);
}

/* List: lift on hover, the venue type and screen with icons, the price as a pill */
.inv-list[b-ysk8a0a1xj] {
    box-shadow: 0 18px 40px -32px rgba(20, 40, 80, 0.35);
}

.inv-list li[b-ysk8a0a1xj] {
    transition: background-color 120ms ease;
}

.inv-list li:hover[b-ysk8a0a1xj] {
    background: color-mix(in srgb, var(--ad-primary-tint) 45%, var(--ad-surface));
}

.inv-list li.is-added[b-ysk8a0a1xj] {
    box-shadow: inset 3px 0 0 var(--ad-good);
}

.inv-list-type[b-ysk8a0a1xj],
.inv-list-screen[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inv-list-type[b-ysk8a0a1xj]  .mud-icon-root {
    color: var(--ad-primary);
}

.inv-list-screen[b-ysk8a0a1xj]  .mud-icon-root {
    color: var(--ad-faint);
}

.inv-thumb[b-ysk8a0a1xj] {
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--ad-line);
}

/* Loading rows for the list */
.inv-skel-list[b-ysk8a0a1xj] {
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    background: var(--ad-surface);
}

.inv-skel-row[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ad-line-soft);
}

.inv-skel-row > span[b-ysk8a0a1xj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.inv-skel-row .inv-skel-line[b-ysk8a0a1xj] {
    max-width: 360px;
    margin: 0;
}

.inv-skel-row i[b-ysk8a0a1xj] {
    display: block;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: inv-shimmer-b-ysk8a0a1xj 1.4s ease-in-out infinite;
}

.inv-skel-thumb[b-ysk8a0a1xj] {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .inv-skel-row i[b-ysk8a0a1xj] { animation: none; }
}

/* ── Tablet ── */

@media (max-width: 1000px) {
    .inv-list li[b-ysk8a0a1xj],
    .inv-list li:has(.inv-list-id)[b-ysk8a0a1xj] {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .inv-list-type[b-ysk8a0a1xj],
    .inv-list-screen[b-ysk8a0a1xj],
    .inv-list-id[b-ysk8a0a1xj] {
        display: none;
    }
}

/* ── Phone ── */

@media (max-width: 760px) {
    .inv[b-ysk8a0a1xj] {
        padding: 12px 12px 32px;
    }

    .inv.has-bar[b-ysk8a0a1xj] {
        padding-bottom: 150px;
    }

    .inv-hero[b-ysk8a0a1xj] {
        gap: 14px;
        padding: 20px 16px 16px;
        border-radius: 16px;
    }

    /* The top bar already has the cart with its count */
    .inv-cartbtn[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-card-photo[b-ysk8a0a1xj] {
        aspect-ratio: 16 / 9;
    }

    .inv-search[b-ysk8a0a1xj] {
        flex-wrap: wrap;
    }

    .inv-search-field[b-ysk8a0a1xj],
    .inv-radius[b-ysk8a0a1xj] {
        flex: 1 1 100%;
    }

    .inv-search .inv-btn[b-ysk8a0a1xj] {
        flex: 1 1 0;
        min-height: 48px;
    }

    /* Popular picks scroll sideways in one row instead of stacking */
    .inv-picks[b-ysk8a0a1xj] {
        flex-wrap: nowrap;
        margin-inline: -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .inv-picks[b-ysk8a0a1xj]::-webkit-scrollbar {
        display: none;
    }

    .inv-pick[b-ysk8a0a1xj] {
        flex: none;
        min-height: 44px;
    }

    .inv-bar-tools[b-ysk8a0a1xj] {
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
    }

    .inv-selall-note[b-ysk8a0a1xj] {
        flex: 1 1 100%;
    }

    .inv-selall[b-ysk8a0a1xj] {
        flex: 1 1 auto;
    }

    .inv-selall-done[b-ysk8a0a1xj] {
        flex: 1 1 auto;
    }

    .inv-views[b-ysk8a0a1xj] {
        flex: 1;
    }

    .inv-views button[b-ysk8a0a1xj] {
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }

    .inv-grid[b-ysk8a0a1xj],
    .inv-skeleton[b-ysk8a0a1xj] {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .inv-list li[b-ysk8a0a1xj],
    .inv-list li:has(.inv-list-id)[b-ysk8a0a1xj] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px 12px;
    }

    .inv-list-price[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-list .inv-add span[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-list .inv-add[b-ysk8a0a1xj] {
        width: 44px;
        padding: 0;
    }

    .inv-map[b-ysk8a0a1xj] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 360px minmax(0, 1fr);
        height: auto;
    }

    .inv-map-list[b-ysk8a0a1xj] {
        max-height: 320px;
        border-top: 1px solid var(--ad-line);
        border-left: 0;
    }

    .inv-selbar[b-ysk8a0a1xj] {
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: calc(100vw - 16px);
        padding: 12px;
    }

    .inv-selbar-actions .inv-btn--primary[b-ysk8a0a1xj] {
        flex: 1;
    }
}

/* Theme on smaller screens: the photos go, the hero stacks */
@media (max-width: 900px) {
    .inv-hero-top[b-ysk8a0a1xj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .inv-hero-visual[b-ysk8a0a1xj] {
        display: none;
    }
}

@media (max-width: 760px) {
    .inv-hero[b-ysk8a0a1xj] {
        padding: 22px 16px 18px;
        border-radius: 18px;
    }

    .inv-hero h1[b-ysk8a0a1xj] {
        font-size: var(--ad-text-3xl);
    }

    .inv-trust[b-ysk8a0a1xj] {
        flex-direction: column;
        gap: 4px;
    }

    .inv-search .inv-btn[b-ysk8a0a1xj] {
        min-height: 48px;
    }
}

/* Long names and addresses end in "…" instead of running under the Add button */
.inv-list-main[b-ysk8a0a1xj] {
    overflow: hidden;
}

.inv-list-text[b-ysk8a0a1xj] {
    flex: 1 1 auto;
    overflow: hidden;
}

.inv-list-text[b-ysk8a0a1xj] {
    align-items: stretch;
}

.inv-list-text b[b-ysk8a0a1xj],
.inv-list-text span[b-ysk8a0a1xj] {
    display: block;
    max-width: 100%;
}

/* ── Pinned search and results bar ── */
.inv-dock[b-ysk8a0a1xj] {
    position: sticky;
    top: var(--inv-dock-top, var(--mud-appbar-height, 64px));
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 -8px 14px;
    padding: 12px 8px 10px;
    background: color-mix(in srgb, var(--ad-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow 150ms ease;
}

/* A soft edge under the pinned bar so the rows visibly slide beneath it */
.inv-dock[b-ysk8a0a1xj]::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -10px;
    height: 10px;
    background: linear-gradient(180deg, rgba(20, 40, 80, 0.08), transparent);
    pointer-events: none;
}

.inv-dock .inv-bar[b-ysk8a0a1xj] {
    margin-bottom: 0;
}

.inv-hero[b-ysk8a0a1xj] {
    margin-bottom: 4px;
}

@media (max-width: 760px) {
    .inv-dock[b-ysk8a0a1xj] {
        gap: 8px;
        margin-inline: -12px;
        padding: 10px 12px 8px;
    }

    .inv-dock[b-ysk8a0a1xj]::after {
        left: 0;
        right: 0;
    }

    /* Keep the pinned part short on phones: the search row and the view switcher only */
    .inv-dock .inv-chips[b-ysk8a0a1xj],
    .inv-dock .inv-selall-note[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-dock .inv-bar[b-ysk8a0a1xj] {
        gap: 8px;
    }
}

.inv-searchbtn[b-ysk8a0a1xj]  .inv-only-phone {
    display: none !important;
}

/* Phone: the pinned part is two short rows. Search box with icon buttons, then count, Add all and views */
@media (max-width: 760px) {
    .inv-searchbtn[b-ysk8a0a1xj]  .inv-only-phone {
        display: inline-block !important;
    }

    .inv-hide-phone[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-dock .inv-search[b-ysk8a0a1xj] {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .inv-dock .inv-search-field[b-ysk8a0a1xj] {
        flex: 1 1 auto;
    }

    .inv-dock .inv-radius[b-ysk8a0a1xj] {
        flex: 0 0 104px;
    }

    .inv-dock .inv-search .inv-btn[b-ysk8a0a1xj] {
        flex: 0 0 48px;
        width: 48px;
        min-height: 48px;
        padding: 0;
    }

    .inv-dock .inv-search-field[b-ysk8a0a1xj]  .mud-input-outlined {
        min-height: 48px;
    }

    .inv-dock .inv-bar[b-ysk8a0a1xj] {
        flex-wrap: nowrap;
        align-items: center;
    }

    .inv-dock .inv-bar-count[b-ysk8a0a1xj] {
        flex: none;
        font-size: var(--ad-text-md);
    }

    .inv-dock .inv-bar-tools[b-ysk8a0a1xj] {
        flex: 1;
        flex-wrap: nowrap;
        justify-content: flex-end;
        width: auto;
        gap: 6px;
    }

    .inv-dock .inv-selall[b-ysk8a0a1xj] {
        flex: 0 1 auto;
        min-height: 40px;
        padding: 0 10px;
        font-size: var(--ad-text-sm);
    }

    .inv-dock .inv-selall-done[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-dock .inv-views[b-ysk8a0a1xj] {
        flex: none;
    }

    .inv-dock .inv-views button[b-ysk8a0a1xj] {
        flex: none;
        width: 40px;
        padding: 0;
    }

    .inv-dock .inv-views button span[b-ysk8a0a1xj],
    .inv-dock .inv-bar-tools > .inv-iconbtn[b-ysk8a0a1xj] {
        display: none;
    }
}

/* ── Filters panel ── */
.inv-drawer-inner[b-ysk8a0a1xj] {
    background:
        radial-gradient(circle at 100% 0%, var(--ad-primary-tint) 0, transparent 40%),
        var(--ad-surface);
}

.inv-drawer-head[b-ysk8a0a1xj] {
    align-items: center;
    padding: 22px 22px 14px;
    border-bottom: 0;
}

.inv-drawer-head h2[b-ysk8a0a1xj] {
    margin: 4px 0 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: -0.02em;
}

.inv-drawer-head .inv-eyebrow[b-ysk8a0a1xj] {
    margin: 0;
}

.inv-drawer-body[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 6px 22px 24px;
}

.inv-fsec h3[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--ad-ink);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.inv-fsec h3 b[b-ysk8a0a1xj] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font-size: var(--ad-text-xs);
    letter-spacing: 0;
}

.inv-fnote[b-ysk8a0a1xj] {
    margin: 8px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

/* Chips: quick picks and venue types */
.inv-fchips[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inv-fchip[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.inv-fchip[b-ysk8a0a1xj]  .mud-icon-root {
    color: var(--ad-primary);
}

.inv-fchip small[b-ysk8a0a1xj] {
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
    font-variant-numeric: tabular-nums;
}

.inv-fchip:hover[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
}

.inv-fchip.is-on[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.inv-fchip.is-on[b-ysk8a0a1xj]  .mud-icon-root,
.inv-fchip.is-on small[b-ysk8a0a1xj] {
    color: var(--ad-on-primary);
}

.inv-fchip.is-suggest[b-ysk8a0a1xj] {
    border-color: color-mix(in srgb, var(--ad-orange) 40%, var(--ad-line));
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
}

.inv-fchip.is-suggest[b-ysk8a0a1xj]  .mud-icon-root {
    color: var(--ad-orange-strong);
}

/* Screen shape: two tiles with a drawn screen */
.inv-shapes[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.inv-shape[b-ysk8a0a1xj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px 12px;
    border: 1.5px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    cursor: pointer;
}

.inv-shape i[b-ysk8a0a1xj] {
    display: block;
    margin-bottom: 6px;
    border: 3px solid var(--ad-faint);
    border-radius: 5px;
    background: linear-gradient(135deg, var(--ad-primary-tint), var(--ad-surface-2));
}

.inv-shape.is-landscape i[b-ysk8a0a1xj] {
    width: 54px;
    height: 34px;
}

.inv-shape.is-portrait i[b-ysk8a0a1xj] {
    width: 30px;
    height: 46px;
    margin-top: -12px;
}

.inv-shape b[b-ysk8a0a1xj] {
    font-size: var(--ad-text-md);
}

.inv-shape small[b-ysk8a0a1xj] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.inv-shape:hover[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
}

.inv-shape.is-on[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ad-primary) 18%, transparent);
}

.inv-shape.is-on i[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
}

/* State and market: a searchable checklist */
.inv-pickbox[b-ysk8a0a1xj] {
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.inv-pickbox-search[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ad-line);
    color: var(--ad-faint);
}

.inv-pickbox-search input[b-ysk8a0a1xj] {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
}

.inv-pickbox-search:focus-within[b-ysk8a0a1xj] {
    color: var(--ad-primary);
    box-shadow: inset 0 -2px 0 var(--ad-primary);
}

.inv-pickbox-list[b-ysk8a0a1xj] {
    max-height: 214px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px;
}

.inv-pickrow[b-ysk8a0a1xj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    text-align: left;
    cursor: pointer;
}

.inv-pickrow:hover[b-ysk8a0a1xj] {
    background: var(--ad-bg);
}

.inv-pickrow.is-on[b-ysk8a0a1xj] {
    background: var(--ad-primary-tint);
    font-weight: var(--ad-weight-bold);
}

.inv-pickrow-name[b-ysk8a0a1xj] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-pickrow small[b-ysk8a0a1xj] {
    color: var(--ad-faint);
    font-size: var(--ad-text-xs);
    font-variant-numeric: tabular-nums;
}

.inv-check[b-ysk8a0a1xj] {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--ad-faint);
    border-radius: 6px;
    background: var(--ad-surface);
    color: var(--ad-on-primary);
}

.inv-pickrow.is-on .inv-check[b-ysk8a0a1xj] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
}

.inv-check[b-ysk8a0a1xj]  .mud-icon-root {
    font-size: 16px;
}

/* Distance: a segmented row */
.inv-seg[b-ysk8a0a1xj] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--ad-surface-2);
}

.inv-seg button[b-ysk8a0a1xj] {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ad-muted);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    cursor: pointer;
}

.inv-seg button.is-on[b-ysk8a0a1xj] {
    background: var(--ad-surface);
    color: var(--ad-primary-strong);
    box-shadow: 0 1px 3px rgba(27, 36, 52, 0.16);
}

.inv-fchip:focus-visible[b-ysk8a0a1xj],
.inv-shape:focus-visible[b-ysk8a0a1xj],
.inv-pickrow:focus-visible[b-ysk8a0a1xj],
.inv-seg button:focus-visible[b-ysk8a0a1xj] {
    outline: 3px solid color-mix(in srgb, var(--ad-primary) 45%, transparent);
    outline-offset: 2px;
}

.inv-drawer-foot[b-ysk8a0a1xj] {
    background: var(--ad-surface);
    box-shadow: 0 -10px 24px -20px rgba(20, 40, 80, 0.4);
}

.inv-count.is-light[b-ysk8a0a1xj] {
    background: var(--ad-on-primary);
    color: var(--ad-primary-strong);
}

.inv-fmore[b-ysk8a0a1xj] {
    min-height: 40px;
    padding: 0 8px;
}

.inv-drawer-head span[b-ysk8a0a1xj] {
    margin-top: 2px;
}

/* ── Compact hero: a smaller headline, one line of copy, the numbers inline and a short photo strip ── */
.inv-hero[b-ysk8a0a1xj] {
    gap: 14px;
    padding: 20px 24px 16px;
    border-radius: 20px;
}

.inv-hero-top[b-ysk8a0a1xj] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 24px;
}

.inv-hero h1[b-ysk8a0a1xj] {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    line-height: 1.1;
}

.inv-lede[b-ysk8a0a1xj] {
    max-width: 72ch;
    font-size: var(--ad-text-lg);
}

.inv-figs[b-ysk8a0a1xj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.inv-figs > span[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.inv-figs > span b[b-ysk8a0a1xj] {
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-heavy);
    font-variant-numeric: tabular-nums;
}

.inv-figs .is-screens b[b-ysk8a0a1xj] {
    color: var(--ad-primary);
}

.inv-figs .is-price b[b-ysk8a0a1xj] {
    color: var(--ad-orange-strong);
}

.inv-hero-visual[b-ysk8a0a1xj] {
    padding: 4px 6px;
}

.inv-mosaic[b-ysk8a0a1xj] {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: 104px;
    gap: 8px;
}

.inv-mosaic-tile[b-ysk8a0a1xj] {
    border-width: 3px;
    border-radius: 12px;
}

.inv-mosaic-tile.is-0[b-ysk8a0a1xj] {
    grid-row: auto;
}

.inv-pick[b-ysk8a0a1xj] {
    min-height: 36px;
    font-size: var(--ad-text-md);
}

.inv-picks-more[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--ad-primary);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    cursor: pointer;
}

.inv-picks-more:hover[b-ysk8a0a1xj] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.inv-picks-more:focus-visible[b-ysk8a0a1xj] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (max-width: 760px) {
    .inv-hero[b-ysk8a0a1xj] {
        gap: 10px;
        padding: 16px 16px 12px;
    }

    .inv-hero h1[b-ysk8a0a1xj] {
        font-size: var(--ad-text-2xl);
    }

    .inv-lede[b-ysk8a0a1xj] {
        font-size: var(--ad-text-md);
    }

    .inv-figs[b-ysk8a0a1xj] {
        margin-top: 10px;
    }

    .inv-pick[b-ysk8a0a1xj],
    .inv-picks-more[b-ysk8a0a1xj] {
        flex: none;
        min-height: 44px;
    }
}

/* Below 900px the photos go and the hero is one column */
@media (max-width: 900px) {
    .inv-hero-top[b-ysk8a0a1xj] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hero wash in brand blue only: a soft tint from the left fading to white, with a brighter corner on the right */
.inv-hero[b-ysk8a0a1xj] {
    border-color: color-mix(in srgb, var(--ad-primary) 18%, var(--ad-line));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ad-primary) 14%, transparent) 0, transparent 48%),
        linear-gradient(100deg, var(--ad-primary-tint) 0%, var(--ad-surface) 62%);
}

/* Phones: the results row must never be wider than the screen. The count is already on the left,
   so "Add all" drops it; on very narrow phones the buttons wrap onto a second line. */
@media (max-width: 760px) {
    .inv-wide[b-ysk8a0a1xj] {
        display: none;
    }

    .inv-dock .inv-bar[b-ysk8a0a1xj] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .inv-dock .inv-bar-tools[b-ysk8a0a1xj] {
        flex: 1 0 auto;
        min-width: 0;
        max-width: 100%;
        margin-left: auto;
    }

    .inv-dock .inv-selall[b-ysk8a0a1xj] {
        min-width: 0;
    }

    .inv-dock .inv-selall > span[b-ysk8a0a1xj] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Contact line for custom needs, sitting beside the number pills */
.inv-figs[b-ysk8a0a1xj] {
    align-items: center;
}

.inv-help[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 6px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.inv-help[b-ysk8a0a1xj]  .mud-icon-root {
    flex: none;
    color: var(--ad-primary);
}

.inv-help a[b-ysk8a0a1xj],
.inv-empty-help a[b-ysk8a0a1xj] {
    color: var(--ad-primary);
    font-weight: var(--ad-weight-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.inv-empty-help[b-ysk8a0a1xj] {
    max-width: 44ch;
    margin: 6px auto 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

@media (max-width: 760px) {
    .inv-help[b-ysk8a0a1xj] {
        flex: 1 1 100%;
        align-items: flex-start;
        margin: 2px 0 0;
        font-size: var(--ad-text-sm);
    }
}

/* ── Selected view: the selection listed in place of the search results ── */
.inv.is-selected-view .inv-chips[b-ysk8a0a1xj],
.inv.is-selected-view .inv-views[b-ysk8a0a1xj],
.inv.is-selected-view .inv-bar-tools > .inv-iconbtn[b-ysk8a0a1xj] {
    display: none;
}

.inv-bar-count[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.inv-backlink[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
}

.inv-selclear[b-ysk8a0a1xj] {
    color: var(--ad-bad);
}

.inv-list.is-selection .inv-list-main[b-ysk8a0a1xj] {
    cursor: default;
}

.inv-add.is-remove[b-ysk8a0a1xj] {
    border-color: var(--ad-line);
    background: var(--ad-surface);
    color: var(--ad-muted);
}

.inv-add.is-remove:hover[b-ysk8a0a1xj] {
    border-color: var(--ad-bad);
    background: color-mix(in srgb, var(--ad-bad) 8%, var(--ad-surface));
    color: var(--ad-bad);
}

.inv-selbar-actions .inv-btn--text[b-ysk8a0a1xj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 760px) {
    .inv-add.is-remove span[b-ysk8a0a1xj] {
        display: none;
    }
}

/* Slogan, matched to /pa: "Own Your Neighborhood.™" and the tagline under it */
.inv-tm[b-ysk8a0a1xj] {
    margin-left: 0.06em;
    font-size: 0.34em;
    font-weight: var(--ad-weight-bold);
    vertical-align: super;
    letter-spacing: 0;
}

.inv-tagline[b-ysk8a0a1xj] {
    /* Clears the orange stroke under "Neighborhood." */
    margin: 10px 0 0;
    color: var(--ad-ink);
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

@media (max-width: 760px) {
    .inv-tagline[b-ysk8a0a1xj] {
        font-size: var(--ad-text-lg);
    }
}

/* A pick that is loading shows a small spinner in place of its count. */
.inv-pick-spin[b-ysk8a0a1xj] {
    flex: none;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: inv-pick-spin-b-ysk8a0a1xj .7s linear infinite;
}

@keyframes inv-pick-spin-b-ysk8a0a1xj {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .inv-pick-spin[b-ysk8a0a1xj] { animation-duration: 2s; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-xgrejnqw2s] {
    background: #F5F7FA; /* neutral light gray */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container[b-xgrejnqw2s] {
    display: flex;
    width: 100%;
    max-width: 1400px;
    min-height: 100vh;
}

/* Left Panel - Promotional Section */
.hero-promotional[b-xgrejnqw2s] {
    flex: 0 0 45%;
    max-width: 45%;
    background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-primary-soft) 50%, var(--color-info-bg) 100%),
                radial-gradient(900px 500px at 80% 10%, rgba(25, 118, 210, 0.25), rgba(25,118,210,0) 60%),
                radial-gradient(700px 400px at 0% 90%, rgba(123, 31, 162, 0.18), rgba(123,31,162,0) 55%);
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Decorative gradient/art overlay */
.hero-art[b-xgrejnqw2s] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,0.08), transparent 60%),
        radial-gradient(900px 600px at 85% 15%, rgba(21,101,192,0.12), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 2px, transparent 2px, transparent 6px);
}

.hero-promotional[b-xgrejnqw2s]::before,
.hero-promotional[b-xgrejnqw2s]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.7;
    pointer-events: none;
}

.hero-promotional[b-xgrejnqw2s]::before {
    width: 38vw;
    height: 38vw;
    left: -12vw;
    top: -10vw;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0) 60%),
                radial-gradient(circle at 70% 20%, rgba(21,101,192,0.25), rgba(21,101,192,0) 60%);
}

.hero-promotional[b-xgrejnqw2s]::after {
    width: 28vw;
    height: 28vw;
    right: -10vw;
    bottom: -10vw;
    background: radial-gradient(circle at 30% 30%, rgba(123,31,162,0.25), rgba(123,31,162,0) 60%),
                radial-gradient(circle at 70% 20%, rgba(0,172,193,0.18), rgba(0,172,193,0) 60%);
}

.promo-content[b-xgrejnqw2s] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: 1rem;
}

.promo-header[b-xgrejnqw2s] {
    margin-bottom: 2.5rem;
}

/* Scrolling ad previews */
.promo-carousel[b-xgrejnqw2s] {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--border-radius-xl);
    padding: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(26,115,232,0.12); /* subtle shadow */
    touch-action: pan-x;
}

.carousel-stage[b-xgrejnqw2s] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.promo-carousel:hover .carousel-track[b-xgrejnqw2s] {
    animation-play-state: paused;
}

.carousel-item[b-xgrejnqw2s] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1);
    transition: opacity 600ms ease, transform 600ms ease;
}

.carousel-item img[b-xgrejnqw2s] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-item.active[b-xgrejnqw2s] {
    opacity: 1;
    transform: scale(1.02);
}

.carousel-overlay[b-xgrejnqw2s] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    display: flex;
    pointer-events: none;
}

.overlay-content[b-xgrejnqw2s] {
    background: rgba(0,0,0,0.35);
    color: #fff;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    animation: overlayDrift-b-xgrejnqw2s 12s linear infinite;
}

.overlay-kicker[b-xgrejnqw2s] { font-size: 0.85rem; opacity: 0.9; }
.overlay-title[b-xgrejnqw2s] { font-size: 1rem; font-weight: 600; }

@keyframes overlayDrift-b-xgrejnqw2s {
    0% { transform: translateX(0%); }
    50% { transform: translateX(8%); }
    100% { transform: translateX(0%); }
}

/* Metrics Cards */
.metrics-cards[b-xgrejnqw2s] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.metric-card-horizontal[b-xgrejnqw2s] {
    background: rgba(255,255,255,0.85);
    border-radius: var(--border-radius-xl);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-subtle);
    transition: var(--transition-fast);
}

.metric-card-horizontal:hover[b-xgrejnqw2s] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.metric-icon-box[b-xgrejnqw2s] {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-text[b-xgrejnqw2s] {
    flex: 1;
}

/* Trust Badges */
.trust-section[b-xgrejnqw2s] {
    margin-top: auto;
}

.trust-badges[b-xgrejnqw2s] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.trust-badge[b-xgrejnqw2s] {
    background: rgba(255,255,255,0.9);
    border-radius: var(--border-radius-full);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-main);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
}

/* Right Panel - Login Form */
.login-form-section[b-xgrejnqw2s] {
    flex: 0 0 55%;
    max-width: 55%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 3rem 5rem;
    box-shadow: var(--shadow-lg);
}

.login-form-content[b-xgrejnqw2s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 450px;
    margin: 0 auto;
    width: 100%;
}

.brand-logo[b-xgrejnqw2s] {
    text-align: center;
}

.form-fields[b-xgrejnqw2s] {
    width: 100%;
}

.form-group[b-xgrejnqw2s] {
    margin-bottom: 1.25rem; /* 20px rhythm */
}

/* Login input styling - subtle borders like production */
[b-xgrejnqw2s] .login-input .mud-input-outlined {
    background: #F6F7FB;
    border-radius: 10px;
}

[b-xgrejnqw2s] .login-input .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border-subtle);
    border-width: 1px;
    border-radius: 10px;
}

[b-xgrejnqw2s] .login-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-border-hover);
}

[b-xgrejnqw2s] .login-input .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #5A4FF3; /* brand primary */
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(90,79,243,0.18);
}

[b-xgrejnqw2s] .login-input .mud-input-outlined .mud-input-slot {
    background: transparent;
    padding: 14px 16px;
}

[b-xgrejnqw2s] .login-input input {
    color: var(--color-text-main);
    caret-color: #5A4FF3;
}

[b-xgrejnqw2s] .login-input input::placeholder {
    color: var(--color-text-light);
    opacity: 1;
}

.divider-container[b-xgrejnqw2s] {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.divider-line[b-xgrejnqw2s] {
    flex: 1;
    height: 1px;
    background: var(--color-border-subtle);
}

.signup-cta[b-xgrejnqw2s] {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

.login-footer[b-xgrejnqw2s] {
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

/* Buttons brand styling and hover */
[b-xgrejnqw2s] .mud-button-filled-primary {
    background-color: #5A4FF3 !important;
}
[b-xgrejnqw2s] .mud-button-filled-primary:hover {
    filter: brightness(1.08);
}
[b-xgrejnqw2s] .mud-button-outlined-default:hover {
    border-color: #1A73E8;
    color: #1A73E8;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .metrics-grid[b-xgrejnqw2s] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-xgrejnqw2s] {
        padding: 1.25rem;
    }

    .carousel-stage[b-xgrejnqw2s] { aspect-ratio: 16 / 9; }
}

@media (max-width: 960px) {
    .login-container[b-xgrejnqw2s] {
        flex-direction: column;
    }

    .hero-promotional[b-xgrejnqw2s] {
        display: none;
    }

    .login-form-section[b-xgrejnqw2s] {
        flex: 1;
        max-width: 100%;
        padding: 2.5rem 2rem;
    }

    .promo-header[b-xgrejnqw2s] {
        margin-bottom: 2rem;
    }
}

@media (max-width: 600px) {
    .hero-promotional[b-xgrejnqw2s] {
        display: none;
    }

    .login-form-section[b-xgrejnqw2s] {
        padding: 2rem 1.5rem;
    }
}
/* /Components/Pages/MDM/AgentUpgrade.razor.rz.scp.css */
.mdm-fleet-shell[b-igbv30e4sn] {
    --mdm-bg: #f5f7fb;
    --mdm-surface: #ffffff;
    --mdm-line: #e2e8f0;
    --mdm-ink-900: #0f172a;
    --mdm-ink-500: #64748b;
    --mdm-blue: #2484d1;
    --mdm-blue-hover: #1c6fb3;

    background:
        radial-gradient(1050px 420px at 85% -10%, rgba(255, 150, 44, 0.1), transparent 60%),
        radial-gradient(1200px 520px at -5% -15%, rgba(36, 132, 209, 0.14), transparent 55%),
        var(--mdm-bg);
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--mdm-ink-900);
    font-family: "Plus Jakarta Sans", var(--font-family-base, sans-serif);
}

.mdm-fleet-shell-upgrade[b-igbv30e4sn] {
    max-width: 1520px;
}

.mdm-fleet-header[b-igbv30e4sn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
}

.mdm-fleet-header-main[b-igbv30e4sn] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mdm-fleet-back-button[b-igbv30e4sn] {
    margin-top: 1px;
}

.mdm-fleet-title[b-igbv30e4sn] {
    margin: 0 0 0.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--mdm-ink-900);
}

.mdm-fleet-subtitle[b-igbv30e4sn] {
    margin: 0;
    color: var(--mdm-ink-500);
    font-size: 0.92rem;
}

.mdm-fleet-refresh-button[b-igbv30e4sn] {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #3b9ae1, var(--mdm-blue-hover));
    box-shadow: 0 4px 14px rgba(28, 111, 179, 0.4);
    text-transform: none;
    font-weight: 700;
}

.mdm-fleet-refresh-button:hover[b-igbv30e4sn] {
    background: linear-gradient(135deg, #2e8fda, #175d97);
    box-shadow: 0 5px 16px rgba(28, 111, 179, 0.5);
}

.mdm-fleet-card[b-igbv30e4sn] {
    border-radius: 14px;
    border: 1px solid var(--mdm-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
}

.mdm-upgrade-device-table[b-igbv30e4sn]  .mud-table-head .mud-table-cell,
.mdm-upgrade-device-table[b-igbv30e4sn]  .mud-table-head .mud-table-cell:hover {
    background: linear-gradient(120deg, var(--mdm-blue) 0%, var(--mdm-blue-hover) 100%) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
    filter: none !important;
}

.mdm-upgrade-device-table[b-igbv30e4sn]  .mud-table-sort-label,
.mdm-upgrade-device-table[b-igbv30e4sn]  .mud-table-sort-label:hover,
.mdm-upgrade-device-table[b-igbv30e4sn]  .mud-table-sort-label-icon {
    color: rgba(255, 255, 255, 0.92) !important;
}

.mdm-upgrade-device-table .mud-table-head .mud-table-cell:first-child[b-igbv30e4sn],
.mdm-upgrade-device-table .mud-table-body .mud-table-cell:first-child[b-igbv30e4sn] {
    width: 34px;
    min-width: 34px;
    padding-left: 6px;
    padding-right: 4px;
}

.mdm-upgrade-device-table .mud-table-head .mud-table-cell:nth-child(2)[b-igbv30e4sn],
.mdm-upgrade-device-table .mud-table-body .mud-table-cell:nth-child(2)[b-igbv30e4sn] {
    padding-left: 8px;
}

.mdm-deploy-col-nav[b-igbv30e4sn] {
    width: 44px;
    min-width: 44px;
    text-align: right;
}

.mdm-deploy-nav-icon[b-igbv30e4sn] {
    color: #cbd5e1 !important;
}

.mdm-deploy-nav-icon:hover[b-igbv30e4sn] {
    color: #94a3b8 !important;
}

@media (max-width: 900px) {
    .mdm-fleet-header[b-igbv30e4sn] {
        flex-direction: column;
        align-items: stretch;
    }
}

.mdm-agent-package-dialog-content[b-igbv30e4sn] {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    padding-right: 4px;
}

.mdm-agent-package-dialog-error[b-igbv30e4sn] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.mdm-agent-package-form-grid[b-igbv30e4sn] {
    row-gap: 4px;
}
/* /Components/Pages/MDM/MdmDeviceDetail.razor.rz.scp.css */
.mdm-device-detail-v2[b-jwa0994f2x] {
    position: relative;
    --mdm-bg: #f5f7fb;
    --mdm-ink-900: #0f172a;
    --mdm-ink-500: #64748b;
    --mdm-blue: #2484d1;
    --mdm-blue-hover: #1c6fb3;
    --mdm-line: #e2e8f0;

    background: var(--mdm-bg);
    max-width: 1840px;
    margin: 0 auto;
    padding: 12px 14px 24px;
    color: var(--mdm-ink-900);
    font-family: "Plus Jakarta Sans", var(--font-family-base, sans-serif);
}

.mdm-device-switch-overlay[b-jwa0994f2x] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(245, 247, 251, 0.58);
    color: #334155;
    backdrop-filter: blur(1px);
}

.mdm-device-detail-loading-shell[b-jwa0994f2x] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mdm-device-detail-loading-text[b-jwa0994f2x] {
    color: #64748b;
    font-weight: 600;
}

.mdm-device-detail-loading-v2[b-jwa0994f2x] {
    min-height: 72vh;
}

.mdm-device-loading-skeleton[b-jwa0994f2x] {
    border-radius: 14px;
}

.mdm-device-loading-header[b-jwa0994f2x] {
    border-radius: 16px;
}

.mdm-device-loading-stats-grid[b-jwa0994f2x] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.mdm-device-detail-v2-pill-row[b-jwa0994f2x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.mdm-device-detail-v2-status-row[b-jwa0994f2x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mdm-device-summary-panel[b-jwa0994f2x] {
    position: sticky;
    top: 72px;
    z-index: 14;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 255, 0.98) 100%);
    backdrop-filter: blur(2px);
}

.mdm-device-detail-v2 :deep(.mdm-device-summary-panel)[b-jwa0994f2x] {
    position: sticky;
    top: 64px;
    z-index: 14;
    background: #ffffff;
    border-radius: 8px;
}

.mdm-device-workspace-nav[b-jwa0994f2x] {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--mdm-line);
}

.mdm-device-advanced-link[b-jwa0994f2x] {
    display: none;
}

.mdm-device-nav-item[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--mdm-ink-500);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mdm-device-nav-item[aria-current="page"][b-jwa0994f2x],
.mdm-destination-initial .mdm-device-nav-item:nth-child(2)[b-jwa0994f2x] {
    color: var(--mdm-blue);
    border-bottom-color: var(--mdm-blue);
}

.mdm-device-nav-item:focus-visible[b-jwa0994f2x],
.mdm-device-latest-command:focus-visible[b-jwa0994f2x],
.mdm-device-sim-details summary:focus-visible[b-jwa0994f2x] {
    outline: 2px solid var(--mdm-blue);
    outline-offset: -2px;
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-toolbar-wrapper)[b-jwa0994f2x] {
    display: none;
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs-shell)[b-jwa0994f2x],
.mdm-device-detail-v2 :deep(.mdm-device-tab-card)[b-jwa0994f2x],
.mdm-device-detail-v2 :deep(.mdm-device-rv-shell)[b-jwa0994f2x] {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-panels > .mud-tab-panel > .pa-4)[b-jwa0994f2x] {
    padding: 0 !important;
}

.mdm-device-detail-v2 :deep(.mdm-device-stat-strip)[b-jwa0994f2x] {
    background: #ffffff;
    border: 1px solid var(--mdm-line);
    border-radius: 8px;
}

.mdm-device-latest-command[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    width: 100%;
    min-height: 56px;
    border: 1px solid var(--mdm-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--mdm-ink-900);
    text-align: left;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.mdm-device-latest-command > span[b-jwa0994f2x] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mdm-device-latest-command strong[b-jwa0994f2x],
.mdm-device-latest-command > span > span[b-jwa0994f2x] {
    display: block;
}

.mdm-device-latest-command > span > span[b-jwa0994f2x] {
    font-size: 12px;
    color: var(--mdm-ink-500);
    margin-top: 4px;
}

.mdm-device-sim-details summary[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--mdm-blue);
    font-size: 14px;
    cursor: pointer;
}

.mdm-device-sim-details span[b-jwa0994f2x] {
    display: block;
    padding-bottom: 6px;
}

.mdm-device-picker[b-jwa0994f2x] {
    border-color: #dbe7f5;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mdm-device-detail-topbar[b-jwa0994f2x] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.mdm-device-detail-back-button[b-jwa0994f2x] {
    border-color: #dbe3ef;
    background: #ffffff;
    color: #334155;
    text-transform: none;
    font-weight: 650;
}

.mdm-device-detail-back-button:hover[b-jwa0994f2x] {
    border-color: #b8c7dc;
    background: #f1f5f9;
}

.mdm-device-picker-row[b-jwa0994f2x] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.mdm-device-picker-select-wrap[b-jwa0994f2x] {
    flex: 1 1 auto;
    min-width: 0;
}

.mdm-device-picker-count-bottom[b-jwa0994f2x] {
    display: block;
    width: 100%;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.68rem;
    text-align: right;
}

.mdm-device-picker-id-row[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    color: #64748b;
}

.mdm-device-picker-id-label[b-jwa0994f2x] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mdm-device-picker-id-value[b-jwa0994f2x] {
    color: #334155;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 0.7rem;
}

.mdm-device-picker-header[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mdm-device-picker-header-main[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mdm-device-picker-title[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e3a8a;
    font-weight: 800;
}

.mdm-device-picker-subtitle[b-jwa0994f2x],
.mdm-device-picker-count[b-jwa0994f2x] {
    color: #64748b;
}

.mdm-device-picker-select[b-jwa0994f2x] {
    margin: 0;
}

.mdm-device-picker-option[b-jwa0994f2x] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}

.mdm-device-picker-option-heading[b-jwa0994f2x] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.mdm-device-picker-connectivity[b-jwa0994f2x] {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.mdm-device-picker-connectivity-online[b-jwa0994f2x] { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.mdm-device-picker-connectivity-stale[b-jwa0994f2x] { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.mdm-device-picker-connectivity-offline[b-jwa0994f2x] { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.mdm-device-picker-connectivity-unknown[b-jwa0994f2x] { color: #475569; border-color: #cbd5e1; background: #f8fafc; }

.mdm-device-picker-option-divider[b-jwa0994f2x] {
    margin-top: 8px;
    opacity: 0.65;
}

.mdm-device-picker-option-primary[b-jwa0994f2x],
.mdm-device-picker-option-address[b-jwa0994f2x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdm-device-picker-option-primary[b-jwa0994f2x] {
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
}

.mdm-device-picker-option-address[b-jwa0994f2x] {
    color: #475569;
    font-size: 0.74rem;
    line-height: 1.3;
}

.mdm-device-telemetry-panel[b-jwa0994f2x] {
    border-color: #dbe7f5;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.mdm-device-telemetry-head[b-jwa0994f2x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mdm-device-telemetry-head :deep(.mud-icon-root)[b-jwa0994f2x] {
    color: #2563eb;
    margin-right: 5px;
    vertical-align: -2px;
}

.mdm-device-telemetry-grid[b-jwa0994f2x] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mdm-device-telemetry-section[b-jwa0994f2x] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.mdm-device-telemetry-label[b-jwa0994f2x] {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

.mdm-device-telemetry-meta[b-jwa0994f2x],
.mdm-device-telemetry-empty[b-jwa0994f2x] {
    color: #64748b;
    font-size: 11px;
}

.mdm-device-location-row[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #0f172a;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
}

.mdm-device-status-primary[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.mdm-device-status-primary-online[b-jwa0994f2x] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.mdm-device-status-primary-offline[b-jwa0994f2x] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.mdm-device-status-primary-stale[b-jwa0994f2x] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.mdm-device-status-primary-unknown[b-jwa0994f2x] {
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.mdm-device-status-risk[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.mdm-device-status-risk-ok[b-jwa0994f2x] { background: #ecfdf5; border-color: #86efac; color: #166534; }
.mdm-device-status-risk-warn[b-jwa0994f2x] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.mdm-device-status-risk-danger[b-jwa0994f2x] { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.mdm-device-status-serial[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 3px 8px 3px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
}

.mdm-device-status-serial :deep(.mud-icon-button)[b-jwa0994f2x] {
    width: 22px;
    height: 22px;
    padding: 2px;
}

.mdm-device-status-location[b-jwa0994f2x] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 7px;
    row-gap: 2px;
    min-width: 240px;
    padding: 7px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 11px;
}

.mdm-device-status-location-head[b-jwa0994f2x] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
}

.mdm-device-status-location-value[b-jwa0994f2x] {
    grid-column: 1 / -1;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-weight: 700;
}

.mdm-device-status-location-meta[b-jwa0994f2x] {
    grid-column: 1 / -1;
    color: #47699e;
    font-size: 10px;
}

.mdm-device-status-location a[b-jwa0994f2x] {
    grid-column: 1 / -1;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.mdm-device-status-location a:hover[b-jwa0994f2x] { text-decoration: underline; }

.mdm-device-status-meta[b-jwa0994f2x] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mdm-device-status-meta-item[b-jwa0994f2x] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}

.mdm-device-status-meta-item-warn[b-jwa0994f2x] {
    color: #9a3412;
}

.mdm-device-detail-v2-tabs-shell[b-jwa0994f2x] {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mdm-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-toolbar)[b-jwa0994f2x] {
    border-bottom: 1px solid #dbeafe;
    padding: 10px 12px;
    background: #f8fafc;
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tab)[b-jwa0994f2x] {
    border-radius: 8px;
    text-transform: none;
    font-weight: 700;
    min-height: 36px;
    color: #334155;
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tab.mud-tab-active)[b-jwa0994f2x] {
    background: #e8f2ff;
    color: #0b4ea2;
}

.mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-slider)[b-jwa0994f2x] {
    display: none;
}

.mdm-device-detail-v2-failure[b-jwa0994f2x] {
    background: linear-gradient(90deg, #7c2d12 0%, #9a3412 100%);
    color: #fff;
}

.mdm-device-detail-v2-failure-top[b-jwa0994f2x] {
    margin-bottom: 12px;
    box-shadow: 0 8px 24px -16px rgba(153, 27, 27, 0.8);
}

.mdm-device-detail-v2-failure-row[b-jwa0994f2x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mdm-device-detail-v2-command-state[b-jwa0994f2x] {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
}

.mdm-device-detail-v2-command-main[b-jwa0994f2x] {
    font-weight: 600;
    color: #0f172a;
}

.mdm-device-detail-v2-command-meta[b-jwa0994f2x] {
    font-size: 11px;
    color: #64748b;
    font-family: "JetBrains Mono", Consolas, monospace;
}

.mdm-device-overview-grid[b-jwa0994f2x] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.mdm-device-overview-status[b-jwa0994f2x],
.mdm-device-overview-main[b-jwa0994f2x],
.mdm-device-overview-side[b-jwa0994f2x] {
    min-width: 0;
}

.mdm-device-stat-strip[b-jwa0994f2x] {
    background: #f8fafc;
}

.mdm-device-stat-strip-grid[b-jwa0994f2x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.mdm-device-stat-cell[b-jwa0994f2x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 14px 0;
    border-radius: 0;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--mdm-line);
    min-width: 0;
}

.mdm-device-stat-cell-location[b-jwa0994f2x],
.mdm-device-stat-cell-sim[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdm-device-stat-cell-location[b-jwa0994f2x] {
    order: -2;
}

.mdm-device-stat-cell-sim[b-jwa0994f2x] {
    order: -1;
}

.mdm-device-stat-cell:last-child[b-jwa0994f2x] {
    border-bottom: 1px solid var(--mdm-line);
}

.mdm-device-stat-cell-storage:last-of-type[b-jwa0994f2x] {
    border-bottom: 0;
}

.mdm-device-stat-label[b-jwa0994f2x] {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mdm-device-stat-label :deep(.mud-icon-root)[b-jwa0994f2x] {
    font-size: 14px;
    color: #334155;
}

.mdm-device-stat-icon[b-jwa0994f2x] {
    opacity: 0.95;
}

.mdm-device-stat-value[b-jwa0994f2x] {
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mdm-device-stat-meta[b-jwa0994f2x] {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
    grid-column: 1 / -1;
}

.mdm-device-stat-sim-id[b-jwa0994f2x] {
    line-height: 1.25;
}

.mdm-device-stat-cell-storage[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #dbeafe;
}

.mdm-device-stat-cell-location[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    border-color: #bfdbfe;
}

.mdm-device-stat-cell-location .mdm-device-stat-icon[b-jwa0994f2x] { color: #2563eb; }

.mdm-device-location-value[b-jwa0994f2x] { font-family: "JetBrains Mono", Consolas, monospace; font-size: 18px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mdm-device-location-link[b-jwa0994f2x] { color: #1d4ed8; font-size: 11px; font-weight: 800; text-decoration: none; }
.mdm-device-location-link:hover[b-jwa0994f2x] { text-decoration: underline; }

.mdm-device-stat-cell-storage .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #2563eb;
}

.mdm-device-stat-cell-agent[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
    border-color: #bae6fd;
}

.mdm-device-stat-cell-agent .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #0369a1;
}

.mdm-device-stat-cell-app[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #ecfeff 100%);
    border-color: #a5f3fc;
}

.mdm-device-stat-cell-app .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #0e7490;
}

.mdm-device-stat-cell-network-wifi[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    border-color: #bbf7d0;
}

.mdm-device-stat-cell-network-wifi .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #15803d;
}

.mdm-device-stat-cell-network-cellular[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
    border-color: #fed7aa;
}

.mdm-device-stat-cell-network-cellular .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #c2410c;
}

.mdm-device-stat-cell-network-unknown[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #cbd5e1;
}

.mdm-device-stat-cell-network-unknown .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #334155;
}

.mdm-device-stat-cell-risk-ok[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
    border-color: #86efac;
}

.mdm-device-stat-cell-risk-ok .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #15803d;
}

.mdm-device-stat-cell-risk-warn[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
    border-color: #fde68a;
}

.mdm-device-stat-cell-risk-warn .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #b45309;
}

.mdm-device-stat-cell-risk-danger[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    border-color: #fecaca;
}

.mdm-device-stat-cell-risk-danger .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #b91c1c;
}

.mdm-device-stat-cell-kiosk-ok[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #cbd5e1;
}

.mdm-device-stat-cell-kiosk-ok .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #334155;
}

.mdm-device-stat-cell-kiosk-warn[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
    border-color: #fdba74;
}

.mdm-device-stat-cell-kiosk-warn .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #c2410c;
}

.mdm-device-stat-cell-kiosk-unknown[b-jwa0994f2x] {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #e2e8f0;
}

.mdm-device-stat-cell-kiosk-unknown .mdm-device-stat-icon[b-jwa0994f2x] {
    color: #64748b;
}

.mdm-device-actions-head[b-jwa0994f2x] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mdm-device-actions-board[b-jwa0994f2x] {
    border: 1px solid var(--mdm-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 10px 12px;
    box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.42);
}

.mdm-device-action-section[b-jwa0994f2x] {
    padding: 4px 0;
}

.mdm-device-action-section-head[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
}

.mdm-device-action-section-head-danger[b-jwa0994f2x] {
    color: #9a3412;
}

.mdm-device-detail-v2 :deep(.mdm-device-action-btn)[b-jwa0994f2x] {
    font-weight: 600;
    text-transform: none;
    min-height: 44px;
    font-size: 14px;
    box-shadow: none;
}

.mdm-device-detail-v2 :deep(.mdm-device-action-btn:hover)[b-jwa0994f2x] {
    box-shadow: none;
}

.mdm-device-detail-v2 :deep(.mdm-device-action-btn.mud-disabled)[b-jwa0994f2x] {
    border-color: #dbeafe !important;
    color: #94a3b8 !important;
    background: #f8fafc !important;
}

.mdm-device-control-label[b-jwa0994f2x] {
    min-width: 74px;
    color: #64748b;
}

.mdm-device-rv-last-frame[b-jwa0994f2x] {
    color: var(--mdm-ink-500);
    display: block;
    margin-top: 10px;
    font-weight: 600;
}

.mdm-device-rv-display-wrap[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mdm-device-action-sliders[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mdm-device-inline-control[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
}

.mdm-device-danger-precheck[b-jwa0994f2x] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mdm-device-danger-precheck :deep(.mud-chip)[b-jwa0994f2x] {
    border-color: #fdba74;
    background: #fff7ed;
    color: #9a3412;
}

.mdm-device-tab-toolbar[b-jwa0994f2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.mdm-device-tab-title[b-jwa0994f2x] {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mdm-device-tab-title-icon[b-jwa0994f2x] {
    color: var(--mdm-blue);
}

.mdm-device-tab-toolbar-actions[b-jwa0994f2x] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.mdm-device-rv-panel[b-jwa0994f2x] {
    height: min(54vh, 520px);
    min-height: 280px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdm-device-rv-shell[b-jwa0994f2x] {
    border-color: #c7ddfb;
}

.mdm-device-rv-display-wrap[b-jwa0994f2x] {
    position: relative;
    border: 1px solid var(--mdm-line);
    border-radius: 8px;
    background: #edf1f6;
    padding: 0;
    overflow: hidden;
}

.mdm-device-rv-countdown[b-jwa0994f2x] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(20, 33, 61, 0.85);
    color: #ffffff;
    font-size: 12px;
}

.mdm-device-rv-controls[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.mdm-device-rv-controls :deep(.mdm-device-rv-toggle)[b-jwa0994f2x] {
    flex: 1;
    min-height: 44px;
    text-transform: none;
}

.mdm-device-detail-v2 :deep(.mud-icon-button)[b-jwa0994f2x] {
    min-width: 44px;
    min-height: 44px;
}

.mdm-device-rv-panel-starting[b-jwa0994f2x],
.mdm-device-rv-panel-idle[b-jwa0994f2x] {
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
}

.mdm-device-rv-panel-live[b-jwa0994f2x] {
    border: 0;
    background: transparent;
    padding: 0;
}

.mdm-device-rv-panel-content[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px 16px;
}

.mdm-device-rv-starting-text[b-jwa0994f2x] {
    color: #0284c7;
}

.mdm-device-rv-panel-offline[b-jwa0994f2x] {
    border-color: #fdba74;
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}

.mdm-device-rv-offline-content[b-jwa0994f2x] {
    text-align: center;
    max-width: 640px;
}

.mdm-device-rv-offline-meta[b-jwa0994f2x] {
    margin-top: 2px;
    margin-bottom: 8px;
    color: #475569;
    font-size: 12px;
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.mdm-device-rv-frame[b-jwa0994f2x] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.mdm-device-rv-display-wrap:has(.mdm-device-rv-frame-zoomed)[b-jwa0994f2x] {
    overflow: auto;
    align-items: center;
}

.mdm-device-rv-frame-zoomed[b-jwa0994f2x] {
    width: min(1280px, 92vw);
    max-width: 100%;
    max-height: calc(100dvh - 100px);
    object-fit: contain;
    cursor: default;
}

.mdm-device-rv-zoom-overlay[b-jwa0994f2x] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(15, 23, 42, 0.84);
}

.mdm-device-rv-zoom-content[b-jwa0994f2x] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 96vw;
    max-height: 92vh;
}

.mdm-device-rv-zoom-close[b-jwa0994f2x] {
    position: absolute;
    top: -44px;
    right: -4px;
    color: #ffffff;
}

.mdm-device-rv-frame-latest[b-jwa0994f2x] {
    max-height: 100%;
    box-shadow: none;
}

.mdm-device-tab-card[b-jwa0994f2x] {
    border-radius: 12px;
    border: 1px solid var(--mdm-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.42);
}

.mdm-device-loading-panel[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mdm-health-graph-head[b-jwa0994f2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mdm-health-graph-head-actions[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mdm-health-graph-track[b-jwa0994f2x] {
    position: relative;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #dbeafe;
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(14, 116, 144, 0.03) 100%),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: auto, 22px 100%;
    overflow: hidden;
}

.mdm-health-graph-segment[b-jwa0994f2x] {
    position: absolute;
    top: 7px;
    height: 28px;
    border-radius: 6px;
    min-width: 2px;
    padding: 0;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.mdm-health-graph-segment-up[b-jwa0994f2x] {
    background: linear-gradient(180deg, #3b9ae1 0%, #1d4ed8 100%);
    border: 1px solid #1d4ed8;
    opacity: 0.9;
}

.mdm-health-graph-segment-gap[b-jwa0994f2x] {
    background: repeating-linear-gradient(
        135deg,
        #334155 0,
        #334155 6px,
        #1e293b 6px,
        #1e293b 12px
    );
    border: 1px solid #0f172a;
    opacity: 0.92;
}

.mdm-health-graph-segment:hover[b-jwa0994f2x] {
    transform: translateY(-1px);
    filter: saturate(1.1);
}

.mdm-health-graph-segment-selected[b-jwa0994f2x] {
    box-shadow: 0 0 0 2px #f8fafc, 0 0 0 4px #2563eb;
}

.mdm-health-graph-marker[b-jwa0994f2x] {
    position: absolute;
    bottom: 1px;
    width: 2px;
    height: 8px;
    background: #0f172a;
    opacity: 0.5;
}

.mdm-health-graph-scale[b-jwa0994f2x] {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #475569;
}

.mdm-health-graph-legend[b-jwa0994f2x] {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: #334155;
    font-size: 11px;
}

.mdm-health-legend-item[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mdm-health-legend-dot[b-jwa0994f2x] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.mdm-health-legend-dot-up[b-jwa0994f2x] {
    background: #2563eb;
}

.mdm-health-legend-dot-gap[b-jwa0994f2x] {
    background: #1f2937;
}

.mdm-health-table-recorded[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdm-health-table-gap-note[b-jwa0994f2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 11px;
    color: #f8fafc;
    background: repeating-linear-gradient(135deg, #1f2937 0, #1f2937 6px, #0f172a 6px, #0f172a 12px);
    border: 1px solid #0f172a;
    border-radius: 999px;
    padding: 2px 8px;
    margin-bottom: 2px;
}

.mdm-device-detail-v2 :deep(.mdm-health-table-cell-gap)[b-jwa0994f2x] {
    border-top: 3px solid #111827 !important;
}

.mdm-device-detail-v2 :deep(.mdm-health-table-cell-selected)[b-jwa0994f2x] {
    background: #dbeafe !important;
}

.mdm-device-detail-v2 :deep(.mdm-device-tab-table)[b-jwa0994f2x] {
    border: 1px solid var(--mdm-line);
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.42);
}

.mdm-device-detail-v2 :deep(.mdm-device-tab-table .mud-table-head)[b-jwa0994f2x] {
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.mdm-device-detail-v2 :deep(.mdm-device-tab-table .mud-table-head .mud-table-cell)[b-jwa0994f2x] {
    color: #0f172a;
    font-weight: 700;
    border-bottom: 1px solid #dbeafe;
}

.mdm-device-detail-v2 :deep(.mdm-device-tab-table .mud-table-body .mud-table-cell)[b-jwa0994f2x] {
    border-bottom: 1px solid #f1f5f9;
}

.mdm-device-detail-v2 :deep(.mdm-device-tab-table .mud-table-row:hover .mud-table-cell)[b-jwa0994f2x] {
    background: #f8fbff;
}

.mdm-deploy-story-cell[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdm-deploy-story-meta[b-jwa0994f2x] {
    color: #64748b;
    font-size: 11px;
    font-family: "JetBrains Mono", Consolas, monospace;
}

.mdm-device-detail-v2 :deep(.mud-chip.mud-chip-outlined)[b-jwa0994f2x] {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.mdm-device-detail-v2 :deep(.mud-alert-outlined)[b-jwa0994f2x] {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.mdm-device-overview-grid.mdm-device-overview-grid-full[b-jwa0994f2x] {
    grid-template-columns: minmax(0, 1fr);
}

.mdm-device-activity-rail[b-jwa0994f2x] {
    position: sticky;
    top: 84px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.mdm-device-activity-head[b-jwa0994f2x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mdm-device-activity-filters[b-jwa0994f2x] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mdm-device-activity-filters :deep(.mud-button-root)[b-jwa0994f2x] {
    min-width: 0;
    min-height: 44px;
    padding: 6px 12px;
    text-transform: none;
    font-size: 12px;
}

.mdm-device-activity-feed[b-jwa0994f2x] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdm-device-activity-item[b-jwa0994f2x] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdm-device-activity-item-top[b-jwa0994f2x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mdm-device-activity-type[b-jwa0994f2x] {
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
}

.mdm-device-activity-summary[b-jwa0994f2x] {
    color: #334155;
    font-size: 14px;
    line-height: 1.3;
}

.mdm-device-activity-meta[b-jwa0994f2x] {
    color: #64748b;
    font-size: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .mdm-device-overview-grid[b-jwa0994f2x] {
        grid-template-columns: 1fr;
    }

    .mdm-device-overview-side[b-jwa0994f2x] {
        grid-column: auto;
    }

    .mdm-device-loading-stats-grid[b-jwa0994f2x] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mdm-device-activity-rail[b-jwa0994f2x] {
        position: static;
    }

    .mdm-device-telemetry-grid[b-jwa0994f2x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .mdm-device-desktop-only[b-jwa0994f2x] {
        display: none;
    }

    .mdm-device-detail-v2[b-jwa0994f2x] {
        padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .mdm-device-workspace-nav[b-jwa0994f2x] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 0;
        border-top: 1px solid var(--mdm-line);
        background: #ffffff;
    }

    .mdm-device-nav-item[b-jwa0994f2x] {
        flex-direction: column;
        gap: 4px;
        min-width: 0;
        min-height: 64px;
        padding: 8px 2px;
        border-bottom: 0;
        border-top: 3px solid transparent;
        font-size: 12px;
    }

    .mdm-device-nav-item[aria-current="page"][b-jwa0994f2x],
    .mdm-destination-initial .mdm-device-nav-item:first-child[b-jwa0994f2x] {
        color: var(--mdm-blue);
        border-top-color: var(--mdm-blue);
    }

    .mdm-destination-initial .mdm-device-nav-item:nth-child(2)[b-jwa0994f2x] {
        color: var(--mdm-ink-500);
        border-top-color: transparent;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-summary-panel)[b-jwa0994f2x] {
        display: contents;
        position: static;
    }

    .mdm-device-detail-v2-status-row[b-jwa0994f2x] {
        position: sticky;
        top: 56px;
        z-index: 14;
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid var(--mdm-line);
        border-radius: 8px;
        background: #ffffff;
        gap: 8px;
    }

    .mdm-device-status-serial[b-jwa0994f2x] {
        order: -1;
        width: 100%;
        justify-content: space-between;
        min-width: 0;
    }

    .mdm-device-status-serial > span[b-jwa0994f2x] {
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .mdm-destination-initial .mdm-device-overview-main[b-jwa0994f2x],
    .mdm-destination-status .mdm-device-overview-main[b-jwa0994f2x],
    .mdm-device-overview-side[b-jwa0994f2x] {
        display: none;
    }

    .mdm-device-detail-v2:not(.mdm-destination-initial):not(.mdm-destination-status) .mdm-device-overview-status[b-jwa0994f2x] {
        display: none;
    }

    .mdm-destination-commands .mdm-device-overview-side[b-jwa0994f2x] {
        display: block;
    }

    .mdm-destination-commands .mdm-device-advanced-controls[b-jwa0994f2x] {
        display: none;
    }

    .mdm-destination-commands .mdm-device-advanced-link[b-jwa0994f2x] {
        display: block;
        margin-bottom: 12px;
    }

    .mdm-device-rv-panel[b-jwa0994f2x] {
        height: 280px;
        min-height: 280px;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-rv-shell)[b-jwa0994f2x] {
        padding: 0 !important;
    }

    .mdm-device-rv-display-wrap[b-jwa0994f2x] {
        margin: 0 -12px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .mdm-device-activity-filters[b-jwa0994f2x] {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .mdm-device-activity-filters :deep(.mud-button-root)[b-jwa0994f2x] {
        flex: 0 0 auto;
    }

    .mdm-device-inline-control :deep(.mud-slider)[b-jwa0994f2x] {
        flex: 1 1 100%;
        width: 100% !important;
        min-width: 0;
    }

    .mdm-device-detail-v2 :deep(.mud-stack-row)[b-jwa0994f2x] {
        flex-wrap: wrap;
    }

    .mdm-device-detail-v2 :deep(.mud-table-cell)[b-jwa0994f2x] {
        overflow-wrap: anywhere;
    }

    .mdm-device-detail-v2 :deep(.mud-table-container)[b-jwa0994f2x] {
        max-width: 100%;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-toolbar)[b-jwa0994f2x] {
        gap: 4px;
        padding: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-toolbar::-webkit-scrollbar)[b-jwa0994f2x] {
        display: none;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tab)[b-jwa0994f2x] {
        flex: 0 0 42px;
        min-width: 42px;
        width: 42px;
        min-height: 38px;
        padding: 0;
        justify-content: center;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tab-label)[b-jwa0994f2x] {
        display: none;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tab .mud-icon-root)[b-jwa0994f2x] {
        margin: 0;
        font-size: 20px;
    }

    .mdm-device-summary-panel[b-jwa0994f2x] {
        position: static;
    }

    .mdm-device-telemetry-head[b-jwa0994f2x],
    .mdm-device-location-row[b-jwa0994f2x] {
        align-items: flex-start;
        flex-direction: column;
    }

    .mdm-device-telemetry-grid[b-jwa0994f2x] {
        grid-template-columns: 1fr;
    }

    .mdm-device-loading-stats-grid[b-jwa0994f2x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mdm-device-tab-toolbar[b-jwa0994f2x] {
        align-items: flex-start;
    }

    .mdm-device-tab-toolbar-actions[b-jwa0994f2x] {
        width: 100%;
    }

    .mdm-device-rv-offline-meta[b-jwa0994f2x] {
        flex-direction: column;
        gap: 4px;
    }

    .mdm-device-stat-strip-grid[b-jwa0994f2x] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mdm-device-stat-value[b-jwa0994f2x] {
        font-size: 16px;
    }

    .mdm-device-inline-control[b-jwa0994f2x] {
        align-items: flex-start;
    }
}

@media (min-width: 761px) {
    .mdm-device-detail-v2[b-jwa0994f2x] {
        background:
            radial-gradient(960px 360px at 95% -12%, rgba(255, 150, 44, 0.09), transparent 60%),
            radial-gradient(1000px 460px at -8% -18%, rgba(36, 132, 209, 0.12), transparent 55%),
            var(--mdm-bg);
    }

    .mdm-device-workspace-nav[b-jwa0994f2x],
    .mdm-device-mobile-only[b-jwa0994f2x],
    .mdm-device-latest-command[b-jwa0994f2x],
    .mdm-device-section-heading[b-jwa0994f2x] {
        display: none;
    }

    .mdm-device-overview-grid[b-jwa0994f2x] {
        grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
    }

    .mdm-device-overview-status[b-jwa0994f2x] {
        grid-column: 1 / -1;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-summary-panel)[b-jwa0994f2x] {
        top: 72px;
        border-radius: var(--mud-default-borderradius);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 255, 0.98) 100%);
    }

    .mdm-device-detail-v2 :deep(.mdm-device-stat-strip)[b-jwa0994f2x] {
        background: #f8fafc;
        border-radius: var(--mud-default-borderradius);
    }

    .mdm-device-stat-strip-grid[b-jwa0994f2x] {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
    }

    .mdm-device-stat-cell[b-jwa0994f2x] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        border-radius: 10px;
        background: #ffffff !important;
        border: 1px solid #e2e8f0;
        order: 0;
    }

    .mdm-device-stat-cell-location[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
        border-color: #bfdbfe;
    }

    .mdm-device-stat-cell-agent[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%) !important;
        border-color: #bae6fd;
    }

    .mdm-device-stat-cell-app[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #ecfeff 100%) !important;
        border-color: #a5f3fc;
    }

    .mdm-device-stat-cell-storage[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
        border-color: #dbeafe;
    }

    .mdm-device-stat-cell-network-wifi[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
        border-color: #bbf7d0;
    }

    .mdm-device-stat-cell-network-cellular[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
        border-color: #fed7aa;
    }

    .mdm-device-stat-cell-network-unknown[b-jwa0994f2x] {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
        border-color: #cbd5e1;
    }

    .mdm-device-stat-cell-storage:last-of-type[b-jwa0994f2x] {
        border-bottom: 1px solid #dbeafe;
    }

    .mdm-device-stat-cell-network-unknown:last-child[b-jwa0994f2x] {
        border-bottom: 1px solid #cbd5e1;
    }

    .mdm-device-stat-sim-id[b-jwa0994f2x] {
        display: block;
    }

    .mdm-device-stat-label[b-jwa0994f2x],
    .mdm-device-stat-meta[b-jwa0994f2x] {
        font-size: 11px;
    }

    .mdm-device-stat-label[b-jwa0994f2x] {
        letter-spacing: 0.02em;
    }

    .mdm-device-stat-value[b-jwa0994f2x] {
        font-size: 22px;
        line-height: 1.15;
    }

    .mdm-device-location-value[b-jwa0994f2x] {
        font-size: 15px;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-toolbar-wrapper)[b-jwa0994f2x] {
        display: block;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs-shell)[b-jwa0994f2x] {
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--mdm-line);
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
    }

    .mdm-device-detail-v2 :deep(.mdm-device-detail-v2-tabs .mud-tabs-panels > .mud-tab-panel > .pa-4)[b-jwa0994f2x] {
        padding: 16px !important;
    }

    .mdm-device-detail-v2 :deep(.mdm-device-tab-card)[b-jwa0994f2x],
    .mdm-device-detail-v2 :deep(.mdm-device-rv-shell)[b-jwa0994f2x] {
        border-radius: 12px;
        border: 1px solid var(--mdm-line);
        background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.42);
    }

    .mdm-device-detail-v2 :deep(.mdm-device-action-btn)[b-jwa0994f2x] {
        border-color: #2563eb !important;
        color: #ffffff !important;
        font-weight: 700;
        background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
        min-height: 34px;
        box-shadow: 0 8px 18px -12px rgba(37, 99, 235, 0.9);
    }

    .mdm-device-detail-v2 :deep(.mdm-device-action-btn:hover)[b-jwa0994f2x] {
        border-color: #1d4ed8 !important;
        background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
    }

    .mdm-device-detail-v2 :deep(.mud-icon-button)[b-jwa0994f2x] {
        min-width: unset;
        min-height: unset;
    }

    .mdm-device-rv-display-wrap[b-jwa0994f2x] {
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
        padding: 10px;
        overflow: visible;
    }

    .mdm-device-rv-panel[b-jwa0994f2x] {
        height: auto;
        min-height: 320px;
        border-radius: 10px;
    }

    .mdm-device-rv-panel-live[b-jwa0994f2x] {
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        padding: 10px;
    }

    .mdm-device-rv-panel-content[b-jwa0994f2x] {
        padding: 0;
    }

    .mdm-device-rv-frame[b-jwa0994f2x] {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .mdm-device-rv-frame-latest[b-jwa0994f2x] {
        max-height: 65vh;
        box-shadow: none;
    }

    .mdm-device-rv-last-frame[b-jwa0994f2x] {
        color: #b91c1c;
    }

    .mdm-device-overview-side[b-jwa0994f2x] {
        align-self: start;
        position: sticky;
        top: 16px;
    }

    .mdm-device-activity-summary[b-jwa0994f2x],
    .mdm-device-activity-meta[b-jwa0994f2x] {
        font-size: 11px;
    }

    .mdm-device-activity-item[b-jwa0994f2x] {
        border-radius: 10px;
        padding: 8px;
    }

    .mdm-device-activity-filters :deep(.mud-button-root)[b-jwa0994f2x] {
        min-height: unset;
        padding: 2px 8px;
        font-size: 11px;
    }
}

@media (min-width: 761px) and (max-width: 1280px) {
    .mdm-device-stat-strip-grid[b-jwa0994f2x] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 761px) and (max-width: 1200px) {
    .mdm-device-overview-grid[b-jwa0994f2x] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/MDM/MdmFleetMonitor.razor.rz.scp.css */
.fleet-monitor-page[b-7vwacabl1c] {
    --bg: #f5f7fb;
    --surface-1: #ffffff;
    --surface-3: #eef2f9;
    --stroke: #e3e8f2;
    --stroke-soft: #eaeef6;

    --text-hi: #1b2434;
    --text-mid: #5b6786;
    --text-lo: #838fac;

    --brand-blue: #2484d1;
    --brand-blue-hover: #1c6fb3;
    --brand-blue-tint: #e9f2fc;
    --brand-blue-tint-2: #d8eafb;
    --brand-orange: #ff962c;
    --brand-orange-tint: #fff0df;

    --green: #1fa97a;
    --green-dim: #e4f6ef;
    --red: #e5484d;
    --red-dim: #fceaea;
    --amber: var(--brand-orange);
    --amber-dim: var(--brand-orange-tint);

    --fleet-ink-900: #0f172a;
    --fleet-ink-700: #334155;
    --fleet-ink-500: #64748b;
    --fleet-line: #e2e8f0;
    --fleet-surface: var(--surface-1);
    --fleet-surface-soft: var(--surface-3);
    --fleet-accent-100: var(--brand-blue-tint);
    --fleet-accent-200: var(--brand-blue-tint-2);
    --fleet-accent-600: var(--brand-blue);

    background:
        radial-gradient(1100px 420px at 85% -10%, rgba(255, 150, 44, 0.1), transparent 60%),
        radial-gradient(1200px 520px at -5% -15%, rgba(36, 132, 209, 0.14), transparent 55%),
        var(--bg);
    max-width: 1840px;
    width: 96%;
    margin: 0 auto;
    padding: 1.5rem;
    font-family: 'Plus Jakarta Sans', var(--font-family-base, sans-serif);
    color: var(--fleet-ink-900);
}

.fleet-page-progress[b-7vwacabl1c] {
    margin: 0 0 12px;
    border-radius: 999px;
    overflow: hidden;
}

.fleet-trend-progress[b-7vwacabl1c] {
    margin: 0 0 10px;
    border-radius: 999px;
    overflow: hidden;
}

.fleet-tabs-progress[b-7vwacabl1c] {
    margin: 0;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    overflow: hidden;
}

.fleet-header[b-7vwacabl1c] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
}

.fleet-header-main[b-7vwacabl1c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fleet-brand-lockup[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--stroke);
    background: var(--surface-1);
    box-shadow: 0 1px 2px rgba(21, 34, 58, 0.05);
    margin-top: 1px;
}

.fleet-brand-lockup-icon[b-7vwacabl1c] {
    color: var(--brand-blue);
    font-size: 18px;
}

.fleet-brand-lockup-word[b-7vwacabl1c] {
    display: inline-flex;
    align-items: baseline;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.fleet-brand-lockup-ad[b-7vwacabl1c] {
    color: var(--brand-orange);
}

.fleet-brand-lockup-desk[b-7vwacabl1c] {
    color: var(--brand-blue);
}

.fleet-back-button[b-7vwacabl1c] {
    margin-top: 1px;
}

.fleet-title[b-7vwacabl1c] {
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-hi);
}

.fleet-title-icon[b-7vwacabl1c] {
    color: var(--brand-blue);
}

.fleet-subtitle[b-7vwacabl1c] {
    font-size: 0.92rem;
    margin: 0;
    color: var(--fleet-ink-500);
}

.fleet-header-actions[b-7vwacabl1c] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fleet-last-refresh[b-7vwacabl1c] {
    color: var(--text-lo);
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-refresh-button[b-7vwacabl1c] {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #3b9ae1, var(--brand-blue-hover));
    box-shadow: 0 4px 14px rgba(28, 111, 179, 0.4);
    text-transform: none;
    font-weight: 700;
}

.fleet-refresh-button:hover[b-7vwacabl1c] {
    background: linear-gradient(135deg, #2e8fda, #175d97);
    box-shadow: 0 5px 16px rgba(28, 111, 179, 0.5);
}

.fleet-auto-refresh-button[b-7vwacabl1c] {
    min-height: 36px;
    height: 36px;
    border-color: var(--stroke);
    color: var(--text-mid);
    text-transform: none;
    font-weight: 700;
}

.fleet-auto-refresh-button:hover[b-7vwacabl1c] {
    border-color: var(--brand-blue);
    color: var(--brand-blue-hover);
}

.fleet-column-option[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.fleet-inline-alert[b-7vwacabl1c] {
    border-radius: 14px;
}

.fleet-inline-alert-error[b-7vwacabl1c] {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.fleet-inline-alert-body[b-7vwacabl1c] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.fleet-inline-alert-title[b-7vwacabl1c] {
    font-weight: 700;
    color: #b91c1c;
}

.fleet-inline-alert-text[b-7vwacabl1c] {
    color: #7f1d1d;
}

.fleet-inline-alert-meta[b-7vwacabl1c] {
    color: #991b1b;
}

.fleet-inline-alert-spacing[b-7vwacabl1c] {
    margin-top: 6px;
}

.fleet-inline-alert-actions[b-7vwacabl1c] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.fleet-filter-panel[b-7vwacabl1c],
.fleet-tabs-panel[b-7vwacabl1c],
.fleet-trend-panel[b-7vwacabl1c],
.fleet-summary-card[b-7vwacabl1c] {
    border-radius: 14px;
    border: 1px solid var(--fleet-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
}

.fleet-filter-panel[b-7vwacabl1c] {
    padding-top: 0.7rem;
    padding-bottom: 0.45rem;
}

.fleet-filter-panel-embedded[b-7vwacabl1c] {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--stroke-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px 4px 6px;
}

.fleet-filter-loading[b-7vwacabl1c] {
    border-radius: 14px;
    border: 1px solid var(--fleet-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
}

.fleet-filter-loading-row[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}

.fleet-filter-loading-text[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
    font-weight: 600;
}

.fleet-filter-header[b-7vwacabl1c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.fleet-filter-title-wrap[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fleet-filter-title-icon[b-7vwacabl1c] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-hover));
    box-shadow: 0 3px 8px rgba(36, 132, 209, 0.35);
}

.fleet-filter-title[b-7vwacabl1c] {
    font-weight: 800;
    color: var(--text-hi);
    letter-spacing: 0.01em;
    text-transform: none;
}

.fleet-filter-subtitle[b-7vwacabl1c],
.fleet-filter-status-text[b-7vwacabl1c],
.fleet-filter-hidden-note[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
}

.fleet-filter-meta[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fleet-filter-note[b-7vwacabl1c],
.fleet-filter-count[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.fleet-filter-note[b-7vwacabl1c] {
    color: #0369a1;
    background: #e0f2fe;
}

.fleet-filter-count[b-7vwacabl1c] {
    color: var(--brand-blue-hover);
    background: var(--brand-blue-tint);
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-filter-item[b-7vwacabl1c] {
    display: flex;
    align-items: stretch;
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-input-slot {
    min-height: 38px;
    border-radius: 12px;
    background: #ffffff;
}

.fleet-filter-panel-compact[b-7vwacabl1c] {
    padding-top: 0.55rem;
    padding-bottom: 0.35rem;
}

.fleet-filter-panel-compact .fleet-filter-header[b-7vwacabl1c] {
    margin-bottom: 6px;
}

.fleet-filter-panel-compact[b-7vwacabl1c]  .mud-input-slot {
    min-height: 34px;
    border-radius: 10px;
    background: #ffffff;
}

.fleet-filter-panel-compact[b-7vwacabl1c]  .mud-input-input-control,
.fleet-filter-panel-compact[b-7vwacabl1c]  .mud-input > input,
.fleet-filter-panel-compact[b-7vwacabl1c]  .mud-input-adornment {
    font-size: 0.96rem;
}

.fleet-filter-panel-compact[b-7vwacabl1c]  .mud-input-label {
    font-size: 0.76rem;
    letter-spacing: 0.01em;
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-input-label {
    font-size: 0.8rem;
    font-weight: 700;
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-input-outlined-border {
    border-color: var(--stroke);
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-input-root:hover .mud-input-outlined-border,
.fleet-filter-panel[b-7vwacabl1c]  .mud-input-root.mud-input-focused .mud-input-outlined-border {
    border-color: var(--brand-blue);
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-input-root.mud-input-focused .mud-input-slot {
    background: #ffffff;
    box-shadow: none;
}

.fleet-filter-input[b-7vwacabl1c] {
    width: 100%;
}

.fleet-filter-item-search[b-7vwacabl1c] {
    position: relative;
}

.fleet-filter-toggle-wrap[b-7vwacabl1c] {
    align-items: stretch;
}

.fleet-filter-toggle-card[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    width: 100%;
    padding: 12px 0 2px;
    margin-top: 0;
    border-top: 1px solid var(--stroke-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fleet-filter-panel-compact .fleet-filter-toggle-card[b-7vwacabl1c] {
    min-height: 38px;
    padding: 10px 0 0;
}

.fleet-filter-toggle-btn[b-7vwacabl1c] {
    min-height: 28px;
    padding: 0;
    border-radius: 0;
    font-size: 0.84rem;
    font-weight: 600;
    text-transform: none;
    border: 0;
    background: transparent;
    color: var(--text-hi);
    box-shadow: none;
    transition: color 160ms ease;
}

.fleet-filter-toggle-btn:hover[b-7vwacabl1c] {
    background: transparent;
}

.fleet-filter-toggle-btn-active[b-7vwacabl1c] {
    color: #0f4fa0;
    font-weight: 700;
}

.fleet-filter-toggle-btn[b-7vwacabl1c]  .mud-button-label {
    gap: 10px;
    justify-content: flex-start;
}

.fleet-filter-hidden-note[b-7vwacabl1c] {
    margin-left: 0;
    padding-right: 0;
    white-space: nowrap;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-filter-switch[b-7vwacabl1c] {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #d9ecff;
    box-shadow: inset 0 0 0 1px #b9d6f6;
    transition: background-color 160ms ease, box-shadow 160ms ease;
    flex: 0 0 auto;
}

.fleet-filter-switch-knob[b-7vwacabl1c] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    transition: transform 160ms ease;
}

.fleet-filter-toggle-btn-active .fleet-filter-switch[b-7vwacabl1c] {
    background: linear-gradient(180deg, #7fd8ff 0%, #56c5f4 100%);
    box-shadow: inset 0 0 0 1px rgba(36, 132, 209, 0.45), 0 0 0 3px rgba(36, 132, 209, 0.12);
}

.fleet-filter-toggle-btn-active .fleet-filter-switch-knob[b-7vwacabl1c] {
    transform: translateX(16px);
}

@media (max-width: 900px) {
    .fleet-filter-toggle-card[b-7vwacabl1c] {
        align-items: flex-start;
        flex-direction: column;
    }

    .fleet-filter-hidden-note[b-7vwacabl1c] {
        padding-left: 48px;
    }
}

.fleet-filter-status-item[b-7vwacabl1c] {
    justify-content: flex-end;
}

.fleet-filter-status-inline[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface-3);
}

.fleet-filter-panel-compact .fleet-filter-status-inline[b-7vwacabl1c] {
    min-height: 34px;
    border-radius: 10px;
    padding: 0 8px;
}

.fleet-filter-status[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 2px;
}

.fleet-filter-actions[b-7vwacabl1c] {
    min-height: 31px;
}

.fleet-filter-panel[b-7vwacabl1c]  .mud-button-root {
    min-height: 31px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.fleet-trend-collapse[b-7vwacabl1c] {
    border-radius: 14px;
    border: 1px solid var(--fleet-line);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
    overflow: hidden;
}

.fleet-trend-collapse[b-7vwacabl1c]  .mud-expand-panel-header {
    min-height: 42px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.fleet-trend-collapse[b-7vwacabl1c]  .mud-expand-panel-header:hover,
.fleet-trend-collapse[b-7vwacabl1c]  .mud-expand-panel-header.mud-expand-panel-header-expanded {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.fleet-trend-head[b-7vwacabl1c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.fleet-trend-caption[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
}

.fleet-trend-kpi-row[b-7vwacabl1c] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.fleet-trend-kpi[b-7vwacabl1c] {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fbff;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fleet-trend-kpi-label[b-7vwacabl1c] {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
}

.fleet-trend-kpi-value[b-7vwacabl1c] {
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
}

.fleet-trend-kpi-online[b-7vwacabl1c] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.fleet-trend-kpi-stale[b-7vwacabl1c] {
    border-color: #fde68a;
    background: #fffbeb;
}

.fleet-trend-kpi-offline[b-7vwacabl1c] {
    border-color: #fecaca;
    background: #fef2f2;
}

.fleet-trend-kpi-neutral[b-7vwacabl1c] {
    border-color: #dbeafe;
    background: #eff6ff;
}

.fleet-trend-chart-wrap[b-7vwacabl1c] {
    min-height: 340px;
}

.fleet-loading-state[b-7vwacabl1c] {
    text-align: center;
    padding: 24px;
}

@media (max-width: 980px) {
    .fleet-trend-kpi-row[b-7vwacabl1c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .fleet-trend-kpi-row[b-7vwacabl1c] {
        grid-template-columns: 1fr;
    }

    .fleet-trend-chart-wrap[b-7vwacabl1c] {
        min-height: 260px;
    }
}

.fleet-empty-state[b-7vwacabl1c] {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
}

.fleet-summary-loading[b-7vwacabl1c] {
    text-align: center;
}

.fleet-summary-loading-text[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
}

.fleet-summary-title[b-7vwacabl1c] {
    font-weight: 700;
    margin-bottom: 12px;
}

.fleet-summary-strip[b-7vwacabl1c] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.fleet-summary-chip[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.fleet-summary-chip-dot[b-7vwacabl1c] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.fleet-summary-chip-text[b-7vwacabl1c] {
    font-weight: 600;
}

.fleet-summary-chip-icon[b-7vwacabl1c] {
    color: inherit;
}

.fleet-summary-chip-caption[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
}

.fleet-summary-chip-value[b-7vwacabl1c] {
    font-weight: 600;
}

.fleet-summary-chip-stack[b-7vwacabl1c] {
    gap: 8px;
}

.fleet-summary-chip-online[b-7vwacabl1c] {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.fleet-summary-chip-stale[b-7vwacabl1c] {
    background: #fef9c3;
    border-color: #fde047;
    color: #a16207;
}

.fleet-summary-chip-offline[b-7vwacabl1c] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.fleet-summary-chip-critical[b-7vwacabl1c] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.fleet-summary-chip-high[b-7vwacabl1c] {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.fleet-summary-chip-battery[b-7vwacabl1c] {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

.fleet-summary-divider[b-7vwacabl1c] {
    width: 1px;
    height: 28px;
    margin: 0 4px;
    background: var(--fleet-line);
}

.fleet-kpi-header[b-7vwacabl1c] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 4px 0 8px;
    padding: 0 4px;
}

.fleet-kpi-title[b-7vwacabl1c] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fleet-ink-900);
}

.fleet-kpi-caption[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
    font-size: 0.74rem;
}

.fleet-kpi-grid[b-7vwacabl1c] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.fleet-kpi-card[b-7vwacabl1c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 78px;
    padding: 10px 14px;
    border: 1px solid var(--fleet-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 8px 18px -20px rgba(15, 23, 42, 0.4);
}

.fleet-kpi-card-top[b-7vwacabl1c] {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.fleet-kpi-icon[b-7vwacabl1c] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.fleet-kpi-icon[b-7vwacabl1c]  .mud-icon-root {
    color: inherit;
    font-size: 16px;
}

.fleet-kpi-icon-risk[b-7vwacabl1c] {
    color: #b45309;
    background: #fef3c7;
}

.fleet-kpi-icon-offline[b-7vwacabl1c] {
    color: #b91c1c;
    background: #fee2e2;
}

.fleet-kpi-icon-mdm[b-7vwacabl1c] {
    color: #1d4ed8;
    background: #dbeafe;
}

.fleet-kpi-icon-ooh[b-7vwacabl1c] {
    color: #0f766e;
    background: #ccfbf1;
}

.fleet-kpi-icon-failed[b-7vwacabl1c] {
    color: #b91c1c;
    background: #fee2e2;
}

.fleet-kpi-copy[b-7vwacabl1c] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fleet-kpi-value[b-7vwacabl1c] {
    margin: 0;
    font-weight: 800;
    color: var(--fleet-ink-900);
    line-height: 1.1;
    font-size: 1.8rem;
}

.fleet-kpi-label[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
    font-size: 0.82rem;
    line-height: 1.15;
}

@media (max-width: 1200px) {
    .fleet-kpi-grid[b-7vwacabl1c] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .fleet-kpi-grid[b-7vwacabl1c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fleet-tabs-panel[b-7vwacabl1c] {
    overflow: hidden;
    padding: 0;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.fleet-tabs-head[b-7vwacabl1c] {
    padding: 10px 10px 0;
    border-bottom: 1px solid var(--stroke-soft);
}

.fleet-tab-strip-wrap[b-7vwacabl1c] {
    padding: 10px 10px 0;
}

.fleet-tab-strip-row[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fleet-tab-strip-toolbar[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 2px;
    flex-wrap: nowrap;
}

.fleet-tab-strip[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--stroke-soft);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.35);
}

.fleet-tab-button[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-mid);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.fleet-tab-button:hover[b-7vwacabl1c] {
    background: transparent !important;
    color: var(--text-mid) !important;
}

.fleet-tab-button-active:hover[b-7vwacabl1c] {
    color: var(--text-hi);
}

.fleet-tab-button-all.fleet-tab-button-active:hover[b-7vwacabl1c] {
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%) !important;
    border-color: #cfe3fb !important;
}

.fleet-tab-button-offline.fleet-tab-button-active:hover[b-7vwacabl1c] {
    background: linear-gradient(180deg, #fffdfa 0%, #fff2df 100%) !important;
    border-color: #ffd9ad !important;
}

.fleet-tab-button-risk.fleet-tab-button-active:hover[b-7vwacabl1c] {
    background: linear-gradient(180deg, #fffdfd 0%, #fdeaea 100%) !important;
    border-color: #f8c9cb !important;
}

.fleet-tab-button-active[b-7vwacabl1c] {
    background: #ffffff;
    color: var(--text-hi);
    border-color: #d8e4f2;
    box-shadow: 0 10px 22px -16px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.fleet-tab-button-icon[b-7vwacabl1c] {
    font-size: 18px;
    color: inherit;
}

.fleet-tab-button-text[b-7vwacabl1c] {
    white-space: nowrap;
}

.fleet-tab-button-count[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef2f8;
    color: var(--text-mid);
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
    font-size: 0.72rem;
    line-height: 1;
}

.fleet-tab-button-all .fleet-tab-button-icon[b-7vwacabl1c] {
    color: var(--brand-blue);
}

.fleet-tab-button-offline .fleet-tab-button-icon[b-7vwacabl1c] {
    color: #b15a00;
}

.fleet-tab-button-risk .fleet-tab-button-icon[b-7vwacabl1c] {
    color: #b4232a;
}

.fleet-tab-button-all.fleet-tab-button-active[b-7vwacabl1c] {
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    border-color: #cfe3fb;
    box-shadow: 0 12px 24px -16px rgba(36, 132, 209, 0.45), 0 0 0 1px rgba(36, 132, 209, 0.05);
}

.fleet-tab-button-offline.fleet-tab-button-active[b-7vwacabl1c] {
    background: linear-gradient(180deg, #fffdfa 0%, #fff2df 100%);
    border-color: #ffd9ad;
    box-shadow: 0 12px 24px -16px rgba(255, 150, 44, 0.45), 0 0 0 1px rgba(255, 150, 44, 0.06);
}

.fleet-tab-button-risk.fleet-tab-button-active[b-7vwacabl1c] {
    background: linear-gradient(180deg, #fffdfd 0%, #fdeaea 100%);
    border-color: #f8c9cb;
    box-shadow: 0 12px 24px -16px rgba(229, 72, 77, 0.4), 0 0 0 1px rgba(229, 72, 77, 0.05);
}

.fleet-tab-button-all.fleet-tab-button-active .fleet-tab-button-count[b-7vwacabl1c] {
    background: #dff0ff;
    color: #145fa2;
}

.fleet-tab-button-offline.fleet-tab-button-active .fleet-tab-button-count[b-7vwacabl1c] {
    background: #ffe5c4;
    color: #a35300;
}

.fleet-tab-button-risk.fleet-tab-button-active .fleet-tab-button-count[b-7vwacabl1c] {
    background: #fad9da;
    color: #b4232a;
}

@media (max-width: 920px) {
    .fleet-tab-strip-row[b-7vwacabl1c] {
        align-items: flex-start;
        flex-direction: column;
    }

    .fleet-tab-strip[b-7vwacabl1c] {
        display: flex;
        width: 100%;
        overflow-x: auto;
        margin-bottom: 8px;
    }

    .fleet-tab-button[b-7vwacabl1c] {
        flex: 0 0 auto;
    }
}

.fleet-views-header[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 8px;
    padding: 0 4px;
}

.fleet-status-header[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fleet-status-header-item[b-7vwacabl1c] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-height: 28px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.fleet-status-header-item strong[b-7vwacabl1c] {
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
    font-size: 0.82rem;
}

.fleet-status-header-online[b-7vwacabl1c] { color: #15803d; background: #ecfdf3; border-color: #d1fae5; }
.fleet-status-header-delayed[b-7vwacabl1c] { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.fleet-status-header-offline[b-7vwacabl1c] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.fleet-status-header-item:active[b-7vwacabl1c] {
    transform: translateY(1px);
}

.fleet-views-meta[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.fleet-toolbar-actions[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.fleet-toolbar-actions > *[b-7vwacabl1c] {
    margin: 0 !important;
}

.fleet-toolbar-actions[b-7vwacabl1c]  .mud-menu,
.fleet-toolbar-actions[b-7vwacabl1c]  .mud-button-root {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.fleet-toolbar-actions[b-7vwacabl1c]  .mud-menu .mud-button-root,
.fleet-toolbar-actions[b-7vwacabl1c]  .mud-button-root {
    min-height: 36px;
    height: 36px;
}

.fleet-last-refresh-prominent[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid var(--stroke-soft);
    background: #f8fbff;
    color: var(--fleet-ink-700);
}

@media (max-width: 920px) {
    .fleet-views-header[b-7vwacabl1c] {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }

    .fleet-views-meta[b-7vwacabl1c] {
        width: 100%;
        justify-content: flex-start;
    }

    .fleet-tab-strip-toolbar[b-7vwacabl1c] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .fleet-toolbar-actions[b-7vwacabl1c] {
        flex-wrap: wrap;
    }
}

.fleet-views-title[b-7vwacabl1c] {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--fleet-ink-900);
}

.fleet-views-caption[b-7vwacabl1c] {
    color: var(--fleet-ink-500);
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.fleet-tab-footer[b-7vwacabl1c] {
    margin: 0 10px 10px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.fleet-table[b-7vwacabl1c]  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.07em;
    font-size: 0.69rem;
    border-bottom: 1px solid var(--stroke-soft);
    padding-top: 12px;
    padding-bottom: 12px;
}

.fleet-table[b-7vwacabl1c]  table {
    border-collapse: collapse;
    border-spacing: 0;
}

.fleet-table-shell[b-7vwacabl1c] {
    margin: 0 10px 10px;
    border: 1px solid var(--stroke-soft);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-1);
}

.fleet-table-scroll[b-7vwacabl1c] {
    overflow-x: auto;
    overflow-y: hidden;
}

.fleet-table-toolbar[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--stroke-soft);
    background: linear-gradient(180deg, #fcfeff 0%, #f6faff 100%);
}

.fleet-table-count[b-7vwacabl1c] {
    color: #64748b;
    font-weight: 700;
}

.fleet-table-legend[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fleet-mobile-stat-strip[b-7vwacabl1c],
.fleet-mobile-device-list[b-7vwacabl1c],
.fleet-mobile-controls[b-7vwacabl1c] {
    display: none;
}

.fleet-mobile-controls[b-7vwacabl1c] {
    padding: 8px 0 4px;
}

.fleet-mobile-search[b-7vwacabl1c] {
    width: 100%;
}

.fleet-mobile-controls[b-7vwacabl1c]  .mud-input-control {
    margin: 0;
}

.fleet-mobile-controls[b-7vwacabl1c]  .mud-input-slot {
    min-height: 38px;
    background: #ffffff;
}

.fleet-mobile-filter-chips[b-7vwacabl1c] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 0 4px;
    scrollbar-width: none;
}

.fleet-mobile-filter-chips[b-7vwacabl1c]::-webkit-scrollbar {
    display: none;
}

.fleet-mobile-filter-chip[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.fleet-mobile-filter-chip span[b-7vwacabl1c] {
    color: #0f172a;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
    font-weight: 700;
}

.fleet-mobile-stat[b-7vwacabl1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.fleet-mobile-stat strong[b-7vwacabl1c] {
    font-size: 1rem;
    line-height: 1;
}

.fleet-mobile-stat-online[b-7vwacabl1c] { color: #15803d; background: #ecfdf3; border-color: #d1fae5; }
.fleet-mobile-stat-delayed[b-7vwacabl1c] { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.fleet-mobile-stat-offline[b-7vwacabl1c] { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

.fleet-mobile-stat:active[b-7vwacabl1c] {
    transform: translateY(1px);
    filter: brightness(1.15);
}

.fleet-mobile-device-row[b-7vwacabl1c] {
    display: block;
    padding: 12px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.fleet-mobile-device-row:active[b-7vwacabl1c] {
    background: #f8fbff;
}

.fleet-mobile-device-topline[b-7vwacabl1c],
.fleet-mobile-device-meta-line[b-7vwacabl1c] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fleet-mobile-device-topline[b-7vwacabl1c] {
    justify-content: space-between;
}

.fleet-mobile-device-identity[b-7vwacabl1c] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.fleet-mobile-device-serial[b-7vwacabl1c] {
    overflow: hidden;
    color: #0f172a;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-mobile-device-name[b-7vwacabl1c],
.fleet-mobile-device-address[b-7vwacabl1c],
.fleet-mobile-device-ring[b-7vwacabl1c] {
    overflow: hidden;
    color: #64748b;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-mobile-device-address[b-7vwacabl1c] {
    margin-top: 7px;
    color: #334155;
}

.fleet-mobile-device-meta-line[b-7vwacabl1c] {
    margin-top: 8px;
    flex-wrap: wrap;
}

.fleet-mobile-device-version[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 700;
}

.fleet-mobile-device-edit[b-7vwacabl1c] {
    margin-left: auto;
}

.fleet-mobile-device-ring[b-7vwacabl1c] {
    margin-top: 5px;
    color: #64748b;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-legend-key[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.fleet-legend-key-online[b-7vwacabl1c] {
    color: #15803d;
}

.fleet-legend-key-stale[b-7vwacabl1c] {
    color: #b15a00;
}

.fleet-legend-key-offline[b-7vwacabl1c] {
    color: #b91c1c;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr td {
    vertical-align: middle;
}

.fleet-table-modern[b-7vwacabl1c]  thead tr th {
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%);
    border-bottom: 1px solid var(--stroke-soft);
}

.fleet-table-modern[b-7vwacabl1c]  thead tr th:hover,
.fleet-table[b-7vwacabl1c]  thead tr th:hover {
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%) !important;
}

.fleet-table[b-7vwacabl1c]  .mud-table-head .mud-table-cell,
.fleet-table[b-7vwacabl1c]  .mud-table-head .mud-table-cell:hover,
.fleet-table-modern[b-7vwacabl1c]  .mud-table-head .mud-table-cell,
.fleet-table-modern[b-7vwacabl1c]  .mud-table-head .mud-table-cell:hover {
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-hover) 100%) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
    filter: none !important;
}

.fleet-table-modern[b-7vwacabl1c]  table {
    border-collapse: separate;
    border-spacing: 0 4px;
    margin-top: -4px;
    background: #edf1f5;
}

.fleet-serial-cell[b-7vwacabl1c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fleet-serial-row[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.fleet-serial[b-7vwacabl1c] {
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f172a;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-serial-copy-btn[b-7vwacabl1c] {
    width: 24px;
    height: 24px;
    margin: -2px 0 0;
    flex: 0 0 auto;
    opacity: 0.7;
}

.fleet-serial-copy-btn:hover[b-7vwacabl1c] {
    opacity: 1;
}

.fleet-serial-sub[b-7vwacabl1c] {
    max-width: 210px;
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fleet-chip-ring[b-7vwacabl1c] {
    font-weight: 700;
    border-color: var(--stroke);
    color: var(--text-mid);
    background: var(--surface-3);
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-pill[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.fleet-pill-secondary[b-7vwacabl1c] {
    font-size: 0.68rem;
    font-weight: 650;
    opacity: 0.92;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-pill-dot[b-7vwacabl1c] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.fleet-pill-icon[b-7vwacabl1c] {
    font-size: 12px;
    color: currentColor;
}

.fleet-pill-interactive[b-7vwacabl1c] {
    cursor: help;
}

.fleet-pill-online[b-7vwacabl1c] {
    color: #15803d;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.fleet-pill-stale[b-7vwacabl1c],
.fleet-pill-warning[b-7vwacabl1c] {
    color: #b15a00;
    border-color: #ffd6a9;
    background: var(--brand-orange-tint);
}

.fleet-pill-offline[b-7vwacabl1c],
.fleet-pill-critical[b-7vwacabl1c] {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

.fleet-pill-high[b-7vwacabl1c] {
    color: #c2410c;
    border-color: #fed7aa;
    background: #fff7ed;
}

.fleet-pill-info[b-7vwacabl1c] {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.fleet-pill-neutral[b-7vwacabl1c] {
    color: #475569;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.fleet-signal[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    line-height: 1.05;
}

.fleet-signal-icon[b-7vwacabl1c] {
    font-size: 15px;
}

.fleet-signal-icon-online[b-7vwacabl1c] {
    color: #15803d;
}

.fleet-signal-icon-stale[b-7vwacabl1c] {
    color: #b15a00;
}

.fleet-signal-icon-offline[b-7vwacabl1c] {
    color: #b91c1c;
}

.fleet-signal-icon-neutral[b-7vwacabl1c] {
    color: #475569;
}

.fleet-signal-copy[b-7vwacabl1c] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.fleet-signal-bars[b-7vwacabl1c] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.fleet-signal-bars i[b-7vwacabl1c] {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: #cbd5e1;
}

.fleet-signal-bars i:nth-child(1)[b-7vwacabl1c] { height: 4px; }
.fleet-signal-bars i:nth-child(2)[b-7vwacabl1c] { height: 7px; }
.fleet-signal-bars i:nth-child(3)[b-7vwacabl1c] { height: 10px; }
.fleet-signal-bars i:nth-child(4)[b-7vwacabl1c] { height: 14px; }

.fleet-signal-bars-b4 i[b-7vwacabl1c],
.fleet-signal-bars-b3 i:nth-child(-n+3)[b-7vwacabl1c],
.fleet-signal-bars-b2 i:nth-child(-n+2)[b-7vwacabl1c],
.fleet-signal-bars-b1 i:nth-child(1)[b-7vwacabl1c] {
    background: currentColor;
}

.fleet-signal-bars-b0 i[b-7vwacabl1c] {
    background: #fecaca;
}

.fleet-signal-bars-online[b-7vwacabl1c],
.fleet-signal-label-online[b-7vwacabl1c] {
    color: #15803d;
}

.fleet-signal-bars-stale[b-7vwacabl1c],
.fleet-signal-label-stale[b-7vwacabl1c] {
    color: #b15a00;
}

.fleet-signal-bars-offline[b-7vwacabl1c],
.fleet-signal-label-offline[b-7vwacabl1c] {
    color: #b91c1c;
}

.fleet-signal-bars-neutral[b-7vwacabl1c],
.fleet-signal-label-neutral[b-7vwacabl1c] {
    color: #475569;
}

.fleet-signal-label[b-7vwacabl1c] {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.fleet-signal-time[b-7vwacabl1c] {
    font-size: 0.68rem;
    color: var(--text-lo);
    white-space: nowrap;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-signal-time-fresh[b-7vwacabl1c] {
    color: #15803d;
}

.fleet-signal-time-aging[b-7vwacabl1c] {
    color: #b15a00;
}

.fleet-signal-time-stale[b-7vwacabl1c] {
    color: #b91c1c;
}

.fleet-signal-time-unknown[b-7vwacabl1c] {
    color: #64748b;
}

.fleet-heartbeat[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-heartbeat-fresh[b-7vwacabl1c] {
    color: #166534;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.fleet-heartbeat-aging[b-7vwacabl1c] {
    color: #92400e;
    border-color: #fde68a;
    background: #fffbeb;
}

.fleet-heartbeat-stale[b-7vwacabl1c] {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

.fleet-heartbeat-unknown[b-7vwacabl1c] {
    color: #475569;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.fleet-cell-primary[b-7vwacabl1c] {
    font-size: 0.75rem;
    color: #0f172a;
}

.fleet-address-cell[b-7vwacabl1c] {
    font-size: 0.68rem;
    line-height: 1.2;
}

.fleet-cell-muted[b-7vwacabl1c] {
    font-size: 0.75rem;
    color: #64748b;
}

.fleet-network-cell[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.fleet-network-cell[b-7vwacabl1c]  .mud-icon-root {
    color: #64748b;
}

/* Network icon and bars take the device's connection colour */
.fleet-network-cell.is-online[b-7vwacabl1c]  .mud-icon-root,
.fleet-network-cell.is-online .fleet-network-bars[b-7vwacabl1c] { color: #15803d; }
.fleet-network-cell.is-stale[b-7vwacabl1c]  .mud-icon-root,
.fleet-network-cell.is-stale .fleet-network-bars[b-7vwacabl1c] { color: #b15a00; }
.fleet-network-cell.is-offline[b-7vwacabl1c]  .mud-icon-root,
.fleet-network-cell.is-offline .fleet-network-bars[b-7vwacabl1c] { color: #b91c1c; }

.fleet-network-bars[b-7vwacabl1c] {
    flex: 0 0 auto;
}

.fleet-tag-stack[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fleet-tag-chip[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
    color: #1e40af;
    font-size: 0.7rem;
    font-weight: 700;
}

.fleet-tag-chip-more[b-7vwacabl1c] {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #334155;
}

.fleet-offline-duration[b-7vwacabl1c] {
    font-size: 0.75rem;
    font-weight: 700;
}

.fleet-offline-duration-normal[b-7vwacabl1c] {
    color: #0f172a;
}

.fleet-offline-duration-critical[b-7vwacabl1c] {
    color: #dc2626;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr td {
    background: #ffffff;
    border-top: 1px solid #e1e8f0;
    border-bottom: 2px solid #dbe4ee !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr td:first-child {
    border-left: 1px solid #e8eff8;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr td:last-child {
    border-right: 1px solid #e8eff8;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr:hover td {
    background: #f8fbff;
    border-top-color: #dbe7f6;
    border-bottom-color: #d6e3f3;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-critical:hover td {
    background: #fff8f8;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-high:hover td {
    background: #fffaf5;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-critical td:first-child {
    box-shadow: inset 3px 0 0 #dc2626;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-high td:first-child {
    box-shadow: inset 3px 0 0 #ea580c;
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-sev-ok td:first-child {
    box-shadow: inset 3px 0 0 var(--green);
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-sev-warn td:first-child {
    box-shadow: inset 3px 0 0 var(--brand-orange);
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-sev-crit td:first-child {
    box-shadow: inset 3px 0 0 var(--red);
}

.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-even td,
.fleet-table-modern[b-7vwacabl1c]  tbody tr.fleet-row-odd td {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fleet-header-cell[b-7vwacabl1c] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
}

.fleet-header-icon[b-7vwacabl1c] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
}

.fleet-header-icon[b-7vwacabl1c]  .mud-icon-root {
    font-size: 12px;
    color: inherit;
}

.fleet-header-icon-connectivity[b-7vwacabl1c] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.fleet-header-icon-heartbeat[b-7vwacabl1c] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.fleet-header-icon-risk[b-7vwacabl1c] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.fleet-table[b-7vwacabl1c]  tbody tr td {
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
}

.fleet-table[b-7vwacabl1c]  tbody tr.fleet-row-even {
    background: #ffffff;
}

.fleet-table[b-7vwacabl1c]  tbody tr.fleet-row-odd {
    background: #ffffff;
}

.fleet-table[b-7vwacabl1c]  tbody tr.fleet-row-critical {
    background: #ffffff;
}

.fleet-table[b-7vwacabl1c]  tbody tr.fleet-row-high {
    background: #ffffff;
}

.fleet-table[b-7vwacabl1c]  tbody tr:hover {
    background: #fafcff;
}

.fleet-table[b-7vwacabl1c]  tbody tr {
    cursor: pointer;
}

.fleet-dashboard-card[b-7vwacabl1c] {
    border-radius: 14px;
    border: 1px solid var(--fleet-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 18px 44px -30px rgba(15,23,42,0.45);
    padding: 16px;
    margin-bottom: 16px;
}

.fleet-serial-sub[b-7vwacabl1c],
.fleet-cell-muted[b-7vwacabl1c] {
    font-family: 'JetBrains Mono', var(--font-family-mono, monospace);
}

.fleet-small-text[b-7vwacabl1c] {
    font-size: 12px;
    color: var(--fleet-ink-900);
}

.fleet-filter-spinner[b-7vwacabl1c] {
    width: 14px;
    height: 14px;
}

.fleet-filter-filtering[b-7vwacabl1c] {
    color: var(--fleet-accent-600);
    font-weight: 600;
}

.metadata-tag-row[b-7vwacabl1c] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.fleet-device-dialog-summary[b-7vwacabl1c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--stroke-soft);
    border-radius: 12px;
    background: #f8fbff;
}

.fleet-device-dialog-summary-item[b-7vwacabl1c] {
    min-width: 0;
}

.fleet-device-dialog-summary-value[b-7vwacabl1c] {
    color: var(--text-hi);
    word-break: break-word;
}

.fleet-device-config-links[b-7vwacabl1c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--stroke-soft);
    border-radius: 12px;
    background: #f8fbff;
}

.fleet-device-config-links a[b-7vwacabl1c] {
    color: var(--brand-blue-hover);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    word-break: break-word;
}

.fleet-device-config-links a:hover[b-7vwacabl1c] {
    text-decoration: underline;
}

.metadata-tag-list[b-7vwacabl1c] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    min-height: 34px;
}

.fleet-muted-text[b-7vwacabl1c] {
    color: #64748b;
}

@media (max-width: 640px) {
    .fleet-device-dialog-summary[b-7vwacabl1c] {
        grid-template-columns: 1fr;
    }
}

.fleet-table[b-7vwacabl1c]  tbody tr.fleet-row-critical td:first-child {
    box-shadow: inset 4px 0 0 #dc2626;
}

.fleet-table[b-7vwacabl1c]  tbody tr.fleet-row-high td:first-child {
    box-shadow: inset 4px 0 0 #ea580c;
}

@media (max-width: 980px) {
    .fleet-brand-lockup[b-7vwacabl1c] {
        padding: 6px 10px;
    }

    .fleet-brand-lockup-word[b-7vwacabl1c] {
        font-size: 13px;
    }
}

.fleet-table[b-7vwacabl1c]  th.fleet-col-nav,
.fleet-table[b-7vwacabl1c]  td.fleet-col-nav {
    position: sticky;
    right: 0;
    z-index: 3;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
    background: #ffffff;
}

.fleet-table[b-7vwacabl1c]  th.fleet-col-meta,
.fleet-table[b-7vwacabl1c]  td.fleet-col-meta {
    position: sticky;
    right: 42px;
    z-index: 3;
    min-width: 86px;
    background: #ffffff;
    box-shadow: -1px 0 0 #eef2f7;
}

.fleet-table[b-7vwacabl1c]  thead th.fleet-col-nav,
.fleet-table[b-7vwacabl1c]  thead th.fleet-col-meta {
    z-index: 4;
    background: linear-gradient(180deg, #f5f9ff 0%, #edf5ff 100%);
}

@media (max-width: 900px) {
    .fleet-table-toolbar[b-7vwacabl1c] {
        flex-direction: column;
        align-items: flex-start;
    }

    .fleet-table-legend[b-7vwacabl1c] {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .fleet-legend-key[b-7vwacabl1c] {
        font-size: 0.68rem;
    }
}

@media (max-width: 1200px) {
    .fleet-table-modern[b-7vwacabl1c]  tbody tr td {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .fleet-serial-sub[b-7vwacabl1c] {
        max-width: 150px;
    }
}

@media (max-width: 760px) {
    .fleet-views-header[b-7vwacabl1c] {
        margin: 2px 0 4px;
        padding: 0 6px;
    }

    .fleet-status-header[b-7vwacabl1c] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .fleet-status-header-item[b-7vwacabl1c] {
        justify-content: center;
        min-height: 38px;
        padding: 4px 6px;
        border-radius: 8px;
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .fleet-monitor-page[b-7vwacabl1c] {
        padding-top: 6px;
        padding-bottom: 8px;
    }

    .fleet-header[b-7vwacabl1c] {
        margin-bottom: 6px;
    }

    .fleet-header-main[b-7vwacabl1c] {
        gap: 6px;
    }

    .fleet-subtitle[b-7vwacabl1c] {
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .fleet-trend-collapse[b-7vwacabl1c],
    .fleet-tabs-panel[b-7vwacabl1c],
    .fleet-dashboard-card[b-7vwacabl1c],
    .fleet-table-shell[b-7vwacabl1c] {
        margin-bottom: 6px !important;
        border-radius: 8px;
        box-shadow: none;
    }

    .fleet-tabs-panel[b-7vwacabl1c],
    .fleet-dashboard-card[b-7vwacabl1c],
    .fleet-table-shell[b-7vwacabl1c] {
        border: 0;
        background: transparent;
    }

    .fleet-tabs-panel[b-7vwacabl1c] {
        overflow: visible;
    }

    .fleet-dashboard-card[b-7vwacabl1c] {
        padding: 0;
    }

    .fleet-table-shell[b-7vwacabl1c] {
        margin-left: 0;
        margin-right: 0;
    }

    .fleet-trend-collapse[b-7vwacabl1c] {
        border: 0;
    }

    .fleet-trend-collapse[b-7vwacabl1c]  .mud-expansion-panel-header {
        min-height: 38px;
        padding: 6px 10px;
    }

    .fleet-trend-collapse[b-7vwacabl1c]  .mud-expansion-panel-content {
        padding: 6px 8px 8px;
    }

    .fleet-tabs-head[b-7vwacabl1c] {
        padding: 4px 6px 0;
    }

    .fleet-tab-strip-wrap[b-7vwacabl1c] {
        padding: 4px 6px 0;
    }

    .fleet-tab-strip-row[b-7vwacabl1c] {
        gap: 5px;
    }

    .fleet-tab-strip-toolbar[b-7vwacabl1c] {
        margin: 0;
    }

    .fleet-mobile-controls[b-7vwacabl1c] {
        padding: 3px 6px 1px;
    }

    .fleet-mobile-filter-chips[b-7vwacabl1c] {
        gap: 5px;
        padding: 4px 0 1px;
    }

    .fleet-mobile-controls[b-7vwacabl1c]  .mud-input-root,
    .fleet-mobile-controls[b-7vwacabl1c]  .mud-input-slot {
        min-height: 36px;
        border-color: #d7dde6 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .fleet-mobile-controls[b-7vwacabl1c]  .mud-input-root.mud-input-focused .mud-input-slot {
        border-color: #b8c4d3 !important;
        box-shadow: none !important;
    }

    .fleet-mobile-filter-chip[b-7vwacabl1c] {
        min-height: 28px;
        padding: 0 9px;
        border-color: #d7dde6;
        background: #ffffff;
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 600;
    }

    .fleet-mobile-filter-chip span[b-7vwacabl1c] {
        color: #334155;
        font-size: 0.76rem;
        font-weight: 650;
    }

    .fleet-mobile-stat-strip[b-7vwacabl1c] {
        gap: 4px;
        margin: 5px 0;
    }

    .fleet-mobile-device-list[b-7vwacabl1c] {
        gap: 6px;
        margin: 5px 0 8px;
        padding: 0 6px;
    }

    .fleet-mobile-device-row[b-7vwacabl1c] {
        padding: 9px 10px;
        border-radius: 9px;
    }

    .fleet-tab-strip-toolbar .fleet-last-refresh-prominent[b-7vwacabl1c],
    .fleet-tab-strip-toolbar[b-7vwacabl1c]  .mud-menu {
        display: none;
    }

    .fleet-tab-strip-toolbar[b-7vwacabl1c] {
        width: 100%;
    }

    .fleet-tab-strip-toolbar .fleet-toolbar-actions[b-7vwacabl1c] {
        width: 100%;
        justify-content: flex-start;
    }

    .fleet-tab-strip-toolbar .fleet-refresh-button[b-7vwacabl1c] {
        min-height: 34px;
        height: 34px;
        width: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 8px;
        font-size: 0;
    }

    .fleet-tab-strip-toolbar .fleet-auto-refresh-button[b-7vwacabl1c] {
        width: 38px;
        min-width: 38px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        font-size: 0;
    }

    .fleet-tab-strip-toolbar .fleet-auto-refresh-button .mud-button-start-icon[b-7vwacabl1c] {
        margin: 0;
        font-size: 18px;
    }

    .fleet-tab-strip-toolbar .fleet-refresh-button .mud-button-start-icon[b-7vwacabl1c] {
        margin: 0;
        font-size: 18px;
    }

    .fleet-mobile-controls[b-7vwacabl1c] {
        display: block;
    }

    .fleet-filter-panel-embedded[b-7vwacabl1c] {
        display: none;
    }

    .fleet-table-toolbar[b-7vwacabl1c],
    .fleet-table-hidden-search-note[b-7vwacabl1c] {
        display: none;
    }

    .fleet-mobile-stat-strip[b-7vwacabl1c] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin: 8px 0;
    }

    .fleet-mobile-device-list[b-7vwacabl1c] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 8px 0 12px;
    }

    .fleet-tab-strip[b-7vwacabl1c] {
        gap: 4px;
        padding: 4px;
        border-radius: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fleet-tab-strip[b-7vwacabl1c]::-webkit-scrollbar {
        display: none;
    }

    .fleet-tab-button[b-7vwacabl1c] {
        flex: 1 0 auto;
        min-height: 34px;
        padding: 6px 9px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        font-size: 0.7rem;
        gap: 4px;
    }

    .fleet-tab-button-icon[b-7vwacabl1c] {
        display: none;
    }

    .fleet-tab-button-count[b-7vwacabl1c] {
        min-width: 20px;
        height: 18px;
        padding: 0 5px;
        font-size: 0.62rem;
    }

    .fleet-table-scroll[b-7vwacabl1c] {
        display: none;
    }

    .fleet-table[b-7vwacabl1c]  th.fleet-mobile-secondary,
    .fleet-table[b-7vwacabl1c]  td.fleet-mobile-secondary,
    .fleet-table[b-7vwacabl1c]  td[data-label="Risk"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Enrolled"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Model"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Tags"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Battery"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Free Storage"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Data Used"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Network"],
    .fleet-table[b-7vwacabl1c]  td[data-label="SIM Carrier"],
    .fleet-table[b-7vwacabl1c]  td[data-label="SIM ID"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Kiosk"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Update"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Maintenance"],
    .fleet-table[b-7vwacabl1c]  td[data-label="Offline Duration"] {
        display: none !important;
    }

    .fleet-table[b-7vwacabl1c]  th.fleet-mobile-essential,
    .fleet-table[b-7vwacabl1c]  td.fleet-mobile-essential {
        display: table-cell;
    }

    .fleet-table-modern[b-7vwacabl1c]  tbody tr td {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .fleet-serial-sub[b-7vwacabl1c] {
        display: block;
        max-width: 210px;
        overflow: hidden;
        font-size: 0.72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fleet-table-modern[b-7vwacabl1c]  tbody tr {
        border-bottom: 1px solid #dbe4ee;
    }

    .fleet-table-modern[b-7vwacabl1c]  tbody tr td.fleet-mobile-essential,
    .fleet-table-modern[b-7vwacabl1c]  tbody tr td.fleet-col-meta,
    .fleet-table-modern[b-7vwacabl1c]  tbody tr td.fleet-col-nav {
        min-height: 42px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .fleet-table[b-7vwacabl1c]  td[data-label="Address"] .fleet-address-cell {
        max-width: 220px;
        line-height: 1.25;
        white-space: normal;
    }

    .fleet-pill[b-7vwacabl1c],
    .fleet-heartbeat[b-7vwacabl1c] {
        min-height: 20px;
        padding: 2px 8px;
        font-size: 0.68rem;
    }

    .fleet-signal[b-7vwacabl1c] {
        gap: 6px;
    }

    .fleet-signal-label[b-7vwacabl1c] {
        font-size: 0.68rem;
    }
}

/* /Components/Pages/MDM/MdmManagedApps.razor.rz.scp.css */
.mdm-fleet-shell[b-xp90zej7ja] {
    --mdm-bg: #f5f7fb;
    --mdm-surface: #ffffff;
    --mdm-line: #e2e8f0;
    --mdm-ink-900: #0f172a;
    --mdm-ink-500: #64748b;

    background:
        radial-gradient(1050px 420px at 85% -10%, rgba(255, 150, 44, 0.1), transparent 60%),
        radial-gradient(1200px 520px at -5% -15%, rgba(36, 132, 209, 0.14), transparent 55%),
        var(--mdm-bg);
    margin: 0 auto;
    padding: 1.5rem;
    color: var(--mdm-ink-900);
    font-family: "Plus Jakarta Sans", var(--font-family-base, sans-serif);
}

.mdm-fleet-shell-apps[b-xp90zej7ja] {
    max-width: 1000px;
}

.mdm-fleet-shell-apps-upgrade[b-xp90zej7ja] {
    max-width: 1520px;
}

.mdm-fleet-header[b-xp90zej7ja] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
}

.mdm-fleet-header-main[b-xp90zej7ja] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mdm-fleet-back-button[b-xp90zej7ja] {
    margin-top: 1px;
}

.mdm-fleet-title[b-xp90zej7ja] {
    margin: 0 0 0.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--mdm-ink-900);
}

.mdm-fleet-subtitle[b-xp90zej7ja] {
    margin: 0;
    color: var(--mdm-ink-500);
    font-size: 0.92rem;
}

.mdm-fleet-card[b-xp90zej7ja] {
    border-radius: 14px;
    border: 1px solid var(--mdm-line);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
}

.mdm-fleet-refresh-button[b-xp90zej7ja] {
    border: 0;
    color: #ffffff;
    text-transform: none;
    font-weight: 700;
}

.mdm-fleet-shell-apps-orange[b-xp90zej7ja] {
    background:
        radial-gradient(1050px 420px at 85% -10%, rgba(187, 247, 208, 0.28), transparent 62%),
        radial-gradient(1200px 520px at -5% -15%, rgba(220, 252, 231, 0.28), transparent 58%),
        var(--mdm-bg);
}

.mdm-fleet-shell-apps-orange .mdm-fleet-refresh-button[b-xp90zej7ja] {
    background: #86efac;
    color: #14532d;
    box-shadow: 0 3px 10px rgba(22, 101, 52, 0.15);
}

.mdm-fleet-shell-apps-orange .mdm-fleet-refresh-button:hover[b-xp90zej7ja] {
    background: #4ade80;
    color: #14532d;
    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.2);
}

.mdm-fleet-shell-apps-orange .mud-table-head .mud-table-cell[b-xp90zej7ja] {
    background: #dcfce7 !important;
    color: #111827 !important;
}

.mdm-fleet-shell-apps-orange[b-xp90zej7ja]  .mud-table-head .mud-table-cell {
    background: #dcfce7 !important;
    color: #111827 !important;
}

.mdm-fleet-shell-apps-orange[b-xp90zej7ja]  .mud-table-head .mud-table-sort-label {
    color: #111827 !important;
}

.mdm-fleet-shell-apps-orange[b-xp90zej7ja]  .mud-table-head .mud-table-sort-label-icon {
    color: #111827 !important;
}

.mdm-fleet-shell-apps-orange[b-xp90zej7ja]  .mud-table-head .mud-icon-root {
    color: #111827 !important;
}

.mdm-fleet-shell-apps-orange .mud-button-filled.mud-button-filled-primary[b-xp90zej7ja] {
    background: #86efac;
    color: #14532d;
}

.mdm-fleet-shell-apps-orange .mud-button-filled.mud-button-filled-secondary[b-xp90zej7ja] {
    background: #bbf7d0;
    color: #14532d;
}

.mdm-fleet-shell-apps-orange .mud-button-outlined.mud-button-outlined-primary[b-xp90zej7ja] {
    border-color: #16a34a;
    color: #166534;
}

.mdm-fleet-shell-apps-orange .mud-chip[b-xp90zej7ja] {
    border-radius: 999px;
}

.mdm-deploy-col-nav[b-xp90zej7ja] {
    width: 44px;
    min-width: 44px;
    text-align: right;
}

.mdm-deploy-nav-icon[b-xp90zej7ja] {
    color: #cbd5e1 !important;
}

.mdm-deploy-nav-icon:hover[b-xp90zej7ja] {
    color: #94a3b8 !important;
}

@media (max-width: 900px) {
    .mdm-fleet-header[b-xp90zej7ja] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/MDM/MdmManagedAppsNext.razor.rz.scp.css */
.managedapps-next-shell[b-08vle41am5] {
    background:
        radial-gradient(900px 360px at 90% -8%, rgba(249, 115, 22, 0.24), transparent 62%),
        radial-gradient(1100px 480px at -8% -12%, rgba(245, 158, 11, 0.2), transparent 55%),
        #fff7ed;
    border-radius: 18px;
    border: 1px solid #fed7aa;
    padding: 10px;
}

.managedapps-next-banner[b-08vle41am5] {
    border: 1px solid #fdba74;
    border-radius: 14px;
    background: linear-gradient(120deg, #fff7ed 0%, #ffedd5 42%, #fde68a 100%);
    padding: 10px 12px;
    margin: 4px 4px 12px;
}

.managedapps-next-banner-title[b-08vle41am5] {
    color: #9a3412;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.managedapps-next-banner-copy[b-08vle41am5] {
    color: #7c2d12;
}

.managedapps-next-shell[b-08vle41am5]  .mdm-fleet-shell {
    background:
        radial-gradient(1000px 420px at 88% -12%, rgba(249, 115, 22, 0.16), transparent 62%),
        radial-gradient(1200px 520px at -4% -16%, rgba(245, 158, 11, 0.14), transparent 56%),
        #fffaf3;
}

.managedapps-next-shell[b-08vle41am5]  .mdm-fleet-card {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    box-shadow: 0 16px 34px -28px rgba(124, 45, 18, 0.35);
}

.managedapps-next-shell[b-08vle41am5]  .mud-table-head .mud-table-cell {
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff7ed !important;
    border-bottom-color: #c2410c !important;
}

.managedapps-next-shell[b-08vle41am5]  .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
    color: #fff7ed;
}

.managedapps-next-shell[b-08vle41am5]  .mud-button-filled.mud-button-filled-secondary {
    background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
    color: #fff7ed;
}

.managedapps-next-shell[b-08vle41am5]  .mud-chip {
    border-radius: 999px;
}

@media (max-width: 900px) {
    .managedapps-next-shell[b-08vle41am5] {
        padding: 8px;
        border-radius: 14px;
    }

    .managedapps-next-banner[b-08vle41am5] {
        margin: 2px 2px 10px;
    }
}
/* /Components/Pages/PartnerWaitlist/JoinWaitlist.razor.rz.scp.css */
.join-brand[b-by6hi3fu1v] {
    --join-ink: #1b2434;
    --join-muted: #46566b;
    --join-accent: #2484d1;
    --join-accent-soft: #eaf5fe;
    --join-orange: #ff8c24;
    --join-line: #c9ddec;
    --mud-palette-secondary: #a94c00;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    box-sizing: border-box;
    color: var(--join-ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0;
}

/* Intro */

.join-intro[b-by6hi3fu1v] {
    padding-bottom: 24px;
    animation: join-enter-b-by6hi3fu1v 400ms ease-out both;
}

.join-program[b-by6hi3fu1v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--join-muted);
}

.join-program-mark[b-by6hi3fu1v] {
    width: 8px;
    height: 8px;
    background: var(--join-orange);
    border-radius: 2px;
}

.join-region[b-by6hi3fu1v] {
    padding-left: 12px;
    border-left: 1px solid #b9cde0;
}

.join-intro h1[b-by6hi3fu1v] {
    margin: 12px 0 10px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.join-logo-ad[b-by6hi3fu1v] { color: var(--join-orange); }
.join-logo-desk[b-by6hi3fu1v] { color: var(--join-accent); }

.join-intro > p[b-by6hi3fu1v] {
    max-width: 600px;
    margin: 0;
    color: var(--join-muted);
    font-size: 16px;
}

.join-trust[b-by6hi3fu1v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.join-trust li[b-by6hi3fu1v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--join-ink);
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid var(--join-line);
    border-radius: 999px;
}

.join-trust[b-by6hi3fu1v]  .mud-icon-root {
    color: var(--join-accent);
}

/* Stepper */

.join-application[b-by6hi3fu1v] {
    animation: join-enter-b-by6hi3fu1v 500ms ease-out both;
}

.join-stepper[b-by6hi3fu1v] {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.join-stepper li[b-by6hi3fu1v] {
    flex: 1 1 0;
    min-width: 0;
}

.join-stepper-item[b-by6hi3fu1v] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 0 0;
    color: var(--join-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    background: none;
    border: 0;
    border-top: 4px solid var(--join-line);
}

button.join-stepper-item[b-by6hi3fu1v] {
    cursor: pointer;
}

button.join-stepper-item:hover .join-stepper-name[b-by6hi3fu1v] {
    text-decoration: underline;
}

button.join-stepper-item:focus-visible[b-by6hi3fu1v] {
    outline: 3px solid #2484d140;
    outline-offset: 2px;
}

.join-stepper-badge[b-by6hi3fu1v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    height: 26px;
    font-size: 13px;
    border: 1.5px solid var(--join-line);
    border-radius: 50%;
    background: #ffffff;
}

.join-stepper-name[b-by6hi3fu1v] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-current .join-stepper-item[b-by6hi3fu1v] {
    color: var(--join-ink);
    border-top-color: var(--join-accent);
}

.is-current .join-stepper-badge[b-by6hi3fu1v] {
    color: #ffffff;
    background: var(--join-accent);
    border-color: var(--join-accent);
}

.is-done .join-stepper-item[b-by6hi3fu1v] {
    color: var(--join-accent);
    border-top-color: var(--join-accent);
}

.is-done .join-stepper-badge[b-by6hi3fu1v] {
    color: var(--join-accent);
    background: var(--join-accent-soft);
    border-color: var(--join-accent);
}

/* Form card */

.join-brand[b-by6hi3fu1v]  .join-form,
.join-brand[b-by6hi3fu1v]  .join-receipt {
    padding: 28px;
    color: var(--join-ink);
    background: #ffffff;
    border: 1px solid var(--join-line);
    border-radius: 12px;
    box-shadow: 0 4px 16px #2484d10f;
}

.join-panel[b-by6hi3fu1v] {
    animation: join-step-in-b-by6hi3fu1v 260ms ease-out both;
}

.join-brand[b-by6hi3fu1v]  .join-step-heading {
    margin-bottom: 6px;
    scroll-margin-top: 96px;
}

.join-brand[b-by6hi3fu1v]  .join-step-heading:focus,
.join-receipt h1:focus[b-by6hi3fu1v] {
    outline: none;
}

.join-hint[b-by6hi3fu1v] {
    margin: 0 0 16px;
    color: var(--join-muted);
}

.join-field-label[b-by6hi3fu1v] {
    margin: 20px 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.join-field-error[b-by6hi3fu1v] {
    margin-top: 6px;
    color: var(--mud-palette-error);
    font-size: 13px;
}

/* Segmented choices */

.join-choices[b-by6hi3fu1v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.join-choice[b-by6hi3fu1v] {
    min-height: 44px;
    padding: 8px 18px;
    color: var(--join-ink);
    font: inherit;
    font-weight: 600;
    background: #ffffff;
    border: 1.5px solid var(--join-line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.join-choice:hover[b-by6hi3fu1v] {
    border-color: var(--join-accent);
}

.join-choice:focus-visible[b-by6hi3fu1v] {
    outline: 3px solid #2484d140;
    outline-offset: 2px;
}

.join-choice.is-selected[b-by6hi3fu1v] {
    color: #ffffff;
    background: var(--join-accent);
    border-color: var(--join-accent);
}

.join-spots[b-by6hi3fu1v] {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

/* Step 1 */

.join-locked-address[b-by6hi3fu1v] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--join-accent-soft);
    border: 1px solid var(--join-line);
    border-radius: 10px;
}

.join-locked-address span[b-by6hi3fu1v] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.join-locked-address[b-by6hi3fu1v]  .mud-icon-root {
    color: var(--join-accent);
}

/* Step 3 summary */

.join-summary[b-by6hi3fu1v] {
    margin: 12px 0 20px;
    background: #f7fbfe;
    border: 1px solid var(--join-line);
    border-radius: 10px;
}

.join-summary-row[b-by6hi3fu1v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
}

.join-summary-row + .join-summary-row[b-by6hi3fu1v] {
    border-top: 1px solid var(--join-line);
}

.join-summary-row[b-by6hi3fu1v]  .mud-icon-root {
    margin-top: 2px;
    color: var(--join-accent);
}

.join-summary-text[b-by6hi3fu1v] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
}

.join-summary-label[b-by6hi3fu1v] {
    color: var(--join-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.join-hp[b-by6hi3fu1v] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.join-consent[b-by6hi3fu1v] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--join-line);
}

/* Actions: primary on the right, pinned to the bottom of the viewport while the form is in view */

.join-actions[b-by6hi3fu1v] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px -28px -28px;
    padding: 14px 28px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #ffffffee;
    border-top: 1px solid var(--join-line);
    border-radius: 0 0 12px 12px;
    backdrop-filter: blur(6px);
}

.join-actions[b-by6hi3fu1v]  .join-primary {
    min-width: 160px;
}

.join-help[b-by6hi3fu1v] {
    margin: 16px 0 0;
    color: var(--join-muted);
    font-size: 14px;
    text-align: center;
}

.join-help a[b-by6hi3fu1v] {
    color: var(--join-accent);
    font-weight: 600;
}

/* Success */

.join-brand[b-by6hi3fu1v]  .join-receipt {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
    animation: join-enter-b-by6hi3fu1v 400ms ease-out both;
}

.join-success-icon[b-by6hi3fu1v] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    color: #ffffff;
    background: #2e9e5b;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #2e9e5b1f;
    animation: join-pop-b-by6hi3fu1v 500ms cubic-bezier(.2, 1.4, .4, 1) both 150ms;
}

.join-success-icon[b-by6hi3fu1v]  .mud-icon-root {
    font-size: 40px;
}

.join-receipt h1[b-by6hi3fu1v] {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.join-position[b-by6hi3fu1v] {
    margin: 0 0 8px;
    font-size: 17px;
}

.join-position strong[b-by6hi3fu1v] {
    color: var(--join-accent);
}

.join-receipt-lead[b-by6hi3fu1v] {
    margin: 0;
    color: var(--join-muted);
}

.join-next-heading[b-by6hi3fu1v] {
    margin: 28px 0 12px;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.join-timeline[b-by6hi3fu1v] {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.join-timeline li[b-by6hi3fu1v] {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
    padding-bottom: 16px;
}

.join-timeline li:not(:last-child)[b-by6hi3fu1v]::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 8px;
    width: 2px;
    background: var(--join-line);
}

.join-timeline-dot[b-by6hi3fu1v] {
    grid-row: span 2;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background: #ffffff;
    border: 2px solid var(--join-line);
    border-radius: 50%;
}

.join-timeline li.is-current .join-timeline-dot[b-by6hi3fu1v] {
    background: var(--join-accent);
    border-color: var(--join-accent);
    box-shadow: 0 0 0 4px #2484d126;
}

.join-timeline-title[b-by6hi3fu1v] {
    font-weight: 700;
}

.join-timeline-detail[b-by6hi3fu1v] {
    color: var(--join-muted);
    font-size: 14px;
}

/* MudBlazor typography inside the page */

.join-brand[b-by6hi3fu1v]  .mud-progress-linear {
    border-radius: 2px;
}

.join-brand[b-by6hi3fu1v]  .mud-typography,
.join-brand[b-by6hi3fu1v]  .mud-input,
.join-brand[b-by6hi3fu1v]  .mud-input-label,
.join-brand[b-by6hi3fu1v]  .mud-button {
    font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0;
}

.join-brand[b-by6hi3fu1v]  .mud-typography-body1,
.join-brand[b-by6hi3fu1v]  .mud-typography-body2,
.join-brand[b-by6hi3fu1v]  .mud-typography-subtitle1,
.join-brand[b-by6hi3fu1v]  .mud-typography-subtitle2,
.join-brand[b-by6hi3fu1v]  .mud-input,
.join-brand[b-by6hi3fu1v]  .mud-input-label,
.join-brand[b-by6hi3fu1v]  .mud-button {
    font-size: 15px;
    line-height: 1.5;
}

.join-brand[b-by6hi3fu1v]  .mud-button {
    text-transform: none;
    font-weight: 600;
}

.join-brand[b-by6hi3fu1v]  .mud-typography-h5 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.join-brand[b-by6hi3fu1v]  .mud-typography-h6 {
    font-size: 16px;
    font-weight: 700;
}

.join-brand[b-by6hi3fu1v]  .mud-typography-caption,
.join-brand[b-by6hi3fu1v]  .mud-input-helper-text {
    font-size: 13px !important;
    line-height: 1.5;
}

.join-brand[b-by6hi3fu1v]  .mud-button,
.join-brand[b-by6hi3fu1v]  .mud-icon-button {
    min-height: 40px;
}

.join-brand[b-by6hi3fu1v]  .mud-icon-button {
    min-width: 40px;
}

@keyframes join-enter-b-by6hi3fu1v {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes join-step-in-b-by6hi3fu1v {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes join-pop-b-by6hi3fu1v {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
}

/* Mobile: drop the card chrome so the form uses the full width */

@media (max-width: 600px) {
    .join-intro h1[b-by6hi3fu1v] { font-size: 26px; }
    .join-intro > p[b-by6hi3fu1v] { font-size: 15px; }
    .join-stepper-name[b-by6hi3fu1v] { font-size: 13px; }
    .join-brand[b-by6hi3fu1v]  .join-form {
        margin-inline: -16px;
        padding: 20px 16px;
        border-width: 1px 0;
        border-radius: 0;
        box-shadow: none;
    }
    .join-brand[b-by6hi3fu1v]  .join-receipt { padding: 24px 16px; }
    .join-actions[b-by6hi3fu1v] {
        margin: 24px -16px -20px;
        padding-inline: 16px;
        border-radius: 0;
    }
    .join-actions[b-by6hi3fu1v]  .join-primary { flex: 1; }
    .join-brand[b-by6hi3fu1v]  .mud-input { font-size: 16px; }
    .join-brand[b-by6hi3fu1v]  .mud-button,
    .join-brand[b-by6hi3fu1v]  .mud-icon-button { min-height: 44px; }
    .join-brand[b-by6hi3fu1v]  .mud-icon-button { min-width: 44px; }
}

@media (max-width: 380px) {
    .join-stepper-badge[b-by6hi3fu1v] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .join-intro[b-by6hi3fu1v],
    .join-application[b-by6hi3fu1v],
    .join-panel[b-by6hi3fu1v],
    .join-success-icon[b-by6hi3fu1v],
    .join-brand[b-by6hi3fu1v]  .join-receipt,
    .join-choice[b-by6hi3fu1v] { animation: none; transition: none; }
}
/* /Components/Pages/PartnerWaitlist/PartnerWaitlist.razor.rz.scp.css */
/* Partner waitlist: colours come from the shared AdDesk palette (design-tokens.css). Orange badge = the Partners group in Admin tools. */
.pw[b-yvxop1socw] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 0 32px;
    color: var(--ad-ink);
}

.pw-head[b-yvxop1socw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-bottom: 18px;
}

.pw-badge[b-yvxop1socw] {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ad-orange-tint);
    color: var(--ad-orange-strong);
}

.pw-head-text[b-yvxop1socw] {
    flex: 1 1 320px;
}

.pw-head h1[b-yvxop1socw] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pw-head p[b-yvxop1socw] {
    margin: 2px 0 0;
    color: var(--ad-muted);
}

.pw-btn[b-yvxop1socw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pw-btn--primary[b-yvxop1socw] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.pw-btn--primary:hover:not(:disabled)[b-yvxop1socw] {
    background: var(--ad-primary-strong);
}

.pw-btn--text[b-yvxop1socw] {
    border-color: transparent;
    background: none;
    color: var(--ad-primary-strong);
}

.pw-btn--text:hover[b-yvxop1socw] {
    background: var(--ad-primary-tint);
}

.pw-btn:disabled[b-yvxop1socw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pw-alert[b-yvxop1socw] {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ad-bad-tint);
    color: var(--ad-bad);
}

/* Stage totals, also quick filters */
.pw-counts[b-yvxop1socw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pw-count[b-yvxop1socw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pw-count:hover[b-yvxop1socw] {
    border-color: var(--ad-faint);
}

.pw-count[aria-pressed="true"][b-yvxop1socw] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
}

.pw-count b[b-yvxop1socw] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pw-count span[b-yvxop1socw] {
    color: var(--ad-muted);
    font-size: 0.85rem;
}

/* Filters on one row */
.pw-tools[b-yvxop1socw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pw-tools[b-yvxop1socw]  .pw-search {
    flex: 1 1 300px;
    margin: 0;
}

.pw-tools[b-yvxop1socw]  .pw-select {
    flex: 0 1 170px;
    margin: 0;
}

.pw-tools[b-yvxop1socw]  .mud-input-outlined {
    background: var(--ad-surface);
    border-radius: 10px;
}

/* The grid: one white panel, quiet header, roomy rows */
.pw[b-yvxop1socw]  .pw-grid {
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--ad-surface);
}

.pw[b-yvxop1socw]  .pw-grid .mud-table-head .mud-table-cell {
    background: var(--ad-surface-2);
    color: var(--ad-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ad-line);
}

.pw[b-yvxop1socw]  .pw-grid .mud-table-body .mud-table-row {
    cursor: pointer;
}

.pw[b-yvxop1socw]  .pw-grid .mud-table-body .mud-table-cell {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ad-line-soft);
    vertical-align: top;
}

.pw[b-yvxop1socw]  .pw-grid .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: color-mix(in srgb, var(--ad-surface-2) 55%, var(--ad-surface));
}

.pw[b-yvxop1socw]  .pw-col-select {
    width: 44px;
    padding-left: 8px !important;
    padding-right: 0 !important;
}

/* Checkboxes: no white box or shadow from the app bar's global icon-button style */
.pw[b-yvxop1socw]  .pw-col-select .mud-icon-button {
    background: none;
    box-shadow: none;
    border: 0;
}

/* A ticked, locked box (already approved) stays readable in brand blue */
.pw[b-yvxop1socw]  .pw-col-select .mud-checkbox .mud-disabled.mud-checked,
.pw[b-yvxop1socw]  .pw-col-select .mud-disabled .mud-checked {
    color: var(--ad-primary);
    opacity: 0.55;
}

.pw[b-yvxop1socw]  .pw-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pw[b-yvxop1socw]  .pw-name,
.pw[b-yvxop1socw]  .pw-strong,
.pw[b-yvxop1socw]  .pw-sub {
    display: block;
}

.pw[b-yvxop1socw]  .pw-name {
    font-weight: 700;
}

.pw[b-yvxop1socw]  .pw-strong {
    font-weight: 500;
}

.pw[b-yvxop1socw]  .pw-sub {
    color: var(--ad-muted);
    font-size: 0.8rem;
}

.pw[b-yvxop1socw]  .pw-wrap {
    overflow-wrap: anywhere;
}

.pw[b-yvxop1socw]  .pw-hw {
    color: var(--ad-muted);
    font-size: 0.85rem;
}

.pw[b-yvxop1socw]  .pw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--ad-muted);
}

.pw[b-yvxop1socw]  .pw-empty b {
    color: var(--ad-ink);
}

.pw[b-yvxop1socw]  .pw-empty .mud-icon-root {
    font-size: 36px;
    color: var(--ad-faint);
}

.pw-btn:focus-visible[b-yvxop1socw],
.pw-count:focus-visible[b-yvxop1socw] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .pw-counts[b-yvxop1socw] {
        gap: 8px;
    }

    .pw-count[b-yvxop1socw] {
        padding: 10px 12px;
    }

    .pw-count b[b-yvxop1socw] {
        font-size: 1.3rem;
    }

    .pw-tools[b-yvxop1socw]  .pw-select {
        flex: 1 1 140px;
    }

    .pw-head .pw-btn[b-yvxop1socw] {
        width: 100%;
    }
}
/* /Components/Pages/Payment.razor.rz.scp.css */
/* Review & submit: the campaign on the left, the price and the button on the right (sticky).
   Phones stack the two and keep the total and button in a bar at the bottom. */

.pay-page[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    color: var(--ad-ink);
}

/* ── Header ── */

.pay-head[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pay-head-text h1[b-7qnszetm3h] {
    margin: 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
}

.pay-head-text p[b-7qnszetm3h] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

/* ── Layout ── */

.pay-grid[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 24px;
}

.pay-main[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pay-side[b-7qnszetm3h] {
    position: sticky;
    top: 88px;
}

.pay-card[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.pay-card-head[b-7qnszetm3h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pay-card-head h2[b-7qnszetm3h] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.pay-card-head a[b-7qnszetm3h] {
    flex: none;
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    text-decoration: none;
}

.pay-card-head a:hover[b-7qnszetm3h] {
    text-decoration: underline;
}

.pay-card-head--stack[b-7qnszetm3h] {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.pay-card-head--stack p[b-7qnszetm3h] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pay-muted[b-7qnszetm3h] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.pay-link[b-7qnszetm3h] {
    padding: 0;
    border: none;
    background: none;
    color: var(--ad-primary-strong);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    text-align: left;
    cursor: pointer;
}

.pay-link:hover[b-7qnszetm3h] {
    text-decoration: underline;
}

/* ── Campaign card ── */

.pay-facts[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.pay-facts dt[b-7qnszetm3h] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.pay-facts dd[b-7qnszetm3h] {
    margin: 2px 0 0;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
}

.pay-creatives[b-7qnszetm3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.pay-creative[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min-content;
    min-width: 120px;
    max-width: 220px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pay-creative-img[b-7qnszetm3h] {
    position: relative;
    display: block;
    height: 112px;
    width: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 8px;
    background: var(--ad-surface-2);
}

.pay-creative.is-portrait .pay-creative-img[b-7qnszetm3h] {
    aspect-ratio: 9 / 16;
}

.pay-creative.is-square .pay-creative-img[b-7qnszetm3h] {
    aspect-ratio: 1;
}

.pay-creative-img img[b-7qnszetm3h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pay-creative:hover .pay-creative-img[b-7qnszetm3h],
.pay-creative:focus-visible .pay-creative-img[b-7qnszetm3h] {
    border-color: var(--ad-primary);
}

.pay-creative[b-7qnszetm3h]  .pay-creative-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.pay-creative-name[b-7qnszetm3h],
.pay-creative-meta[b-7qnszetm3h] {
    max-width: 100%;
    min-width: 0;
}

.pay-creative-name[b-7qnszetm3h] {
    overflow: hidden;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pay-creative-meta[b-7qnszetm3h] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

/* ── Screens card ── */

.pay-map[b-7qnszetm3h] {
    height: 220px;
    overflow: hidden;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.pay-cities[b-7qnszetm3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pay-cities > span[b-7qnszetm3h] {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ad-bg);
    font-size: var(--ad-text-sm);
    font-variant-numeric: tabular-nums;
}

.pay-screen-list[b-7qnszetm3h] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
}

.pay-screen-row[b-7qnszetm3h] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    height: 45px;
    box-sizing: border-box;
    padding: 0 14px;
    border-bottom: 1px solid var(--ad-line-soft);
    align-items: center;
    font-size: var(--ad-text-sm);
}

.pay-screen-name[b-7qnszetm3h] {
    overflow: hidden;
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pay-screen-place[b-7qnszetm3h] {
    flex: none;
    color: var(--ad-muted);
}

/* ── Invoice card ── */

.pay-fields[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pay-check[b-7qnszetm3h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ad-bg);
    font-size: var(--ad-text-sm);
    line-height: 1.5;
    cursor: pointer;
}

.pay-check input[b-7qnszetm3h] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--ad-primary);
}

.pay-check-more[b-7qnszetm3h] {
    display: block;
    color: var(--ad-muted);
}

/* ── Price card ── */

.pay-price[b-7qnszetm3h] {
    gap: 12px;
}

.pay-rows[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ad-text-md);
}

.pay-rows li[b-7qnszetm3h] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pay-rows li > span[b-7qnszetm3h] {
    color: var(--ad-muted);
}

.pay-rows b[b-7qnszetm3h] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pay-rows .pay-total[b-7qnszetm3h] {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--ad-line-soft);
}

.pay-rows .pay-total > span[b-7qnszetm3h] {
    color: var(--ad-ink);
    font-weight: var(--ad-weight-semibold);
}

.pay-rows .pay-total b[b-7qnszetm3h] {
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
}

.pay-row-skel[b-7qnszetm3h] {
    display: block;
    width: 80px;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: pay-shimmer-b-7qnszetm3h 1.3s ease-in-out infinite;
}

.pay-row-skel.is-big[b-7qnszetm3h] {
    width: 120px;
    height: 20px;
}

.pay-checked[b-7qnszetm3h],
.pay-price-missing[b-7qnszetm3h] {
    margin: 0;
    font-size: var(--ad-text-xs);
}

.pay-price-missing[b-7qnszetm3h] {
    color: var(--ad-warn);
}

.pay-checked .pay-link[b-7qnszetm3h],
.pay-price-missing .pay-link[b-7qnszetm3h] {
    font-size: var(--ad-text-xs);
}

.pay-submit[b-7qnszetm3h] {
    height: 50px;
    border: none;
    border-radius: 12px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
    cursor: pointer;
}

.pay-submit:hover:not(:disabled)[b-7qnszetm3h] {
    background: var(--ad-primary-strong);
}

.pay-submit:disabled[b-7qnszetm3h] {
    background: var(--ad-disabled);
    cursor: not-allowed;
}

.pay-blocker[b-7qnszetm3h] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ad-warn);
    font-size: var(--ad-text-sm);
}

.pay-blocker-link[b-7qnszetm3h] {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.pay-bar-total .pay-blocker-link[b-7qnszetm3h] {
    overflow: hidden;
    color: var(--ad-warn);
    font-size: var(--ad-text-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pay-fineprint[b-7qnszetm3h] {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--ad-line-soft);
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    line-height: 1.5;
}

/* ── Problem card contents ── */

.pay-price-change[b-7qnszetm3h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--ad-bg);
}

.pay-price-change div[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
}

.pay-price-change span[b-7qnszetm3h] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.pay-price-change s[b-7qnszetm3h] {
    color: var(--ad-muted);
    font-size: var(--ad-text-lg);
}

.pay-price-change b[b-7qnszetm3h] {
    font-size: var(--ad-text-xl);
}

.pay-price-change em[b-7qnszetm3h] {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
    font-size: var(--ad-text-xs);
    font-style: normal;
    font-weight: var(--ad-weight-semibold);
}

.pay-problem-list[b-7qnszetm3h] {
    margin: 0;
    padding-left: 20px;
    font-size: var(--ad-text-md);
}

/* ── Phone bottom bar ── */

.pay-bar[b-7qnszetm3h] {
    display: none;
}

@media (max-width: 900px) {
    .pay-page[b-7qnszetm3h] {
        padding-bottom: 110px;
    }

    .pay-grid[b-7qnszetm3h] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-side[b-7qnszetm3h] {
        position: static;
    }

    .pay-side .pay-submit[b-7qnszetm3h],
    .pay-side .pay-blocker[b-7qnszetm3h] {
        display: none;
    }

    .pay-bar[b-7qnszetm3h] {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--ad-line);
        background: var(--ad-surface);
        box-shadow: 0 -6px 18px rgba(27, 36, 52, 0.08);
    }

    .pay-bar-total[b-7qnszetm3h] {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .pay-bar-total span[b-7qnszetm3h] {
        color: var(--ad-muted);
        font-size: var(--ad-text-xs);
    }

    .pay-bar-total b[b-7qnszetm3h] {
        font-size: var(--ad-text-xl);
        font-variant-numeric: tabular-nums;
    }

    .pay-bar .pay-submit[b-7qnszetm3h] {
        height: 48px;
        padding: 0 20px;
    }
}

@media (max-width: 640px) {
    .pay-page[b-7qnszetm3h] {
        padding-top: 16px;
    }

    .pay-head-text h1[b-7qnszetm3h] {
        font-size: var(--ad-text-xl);
    }

    .pay-card[b-7qnszetm3h] {
        padding: 16px;
    }

    .pay-facts[b-7qnszetm3h],
    .pay-fields[b-7qnszetm3h] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-map[b-7qnszetm3h] {
        height: 160px;
    }
}

/* ── First-load skeleton ── */
.pay-skel[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pay-skel-sr[b-7qnszetm3h] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pay-skel-head[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 2px;
}

.pay-skel-note[b-7qnszetm3h] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.pay-skel-grid[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 24px;
}

.pay-skel-main[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pay-skel-card[b-7qnszetm3h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.pay-skel i[b-7qnszetm3h] {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--ad-line) 0%, var(--ad-bg) 50%, var(--ad-line) 100%);
    background-size: 200% 100%;
    animation: pay-shimmer-b-7qnszetm3h 1.3s ease-in-out infinite;
}

.pay-skel-bar[b-7qnszetm3h] { height: 12px; width: 70%; }
.pay-skel-bar.is-title[b-7qnszetm3h] { height: 26px; width: 240px; max-width: 70%; }
.pay-skel-bar.is-sub[b-7qnszetm3h] { height: 14px; width: 360px; max-width: 90%; }
.pay-skel-bar.is-heading[b-7qnszetm3h] { height: 18px; width: 180px; max-width: 60%; margin-bottom: 4px; }
.pay-skel-bar.is-short[b-7qnszetm3h] { width: 45%; }
.pay-skel-map[b-7qnszetm3h] { height: 160px; }
.pay-skel-btn[b-7qnszetm3h] { height: 50px; margin-top: 8px; }

.pay-skel-thumbs[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.pay-skel-thumbs i[b-7qnszetm3h] { aspect-ratio: 16 / 9; }

.pay-skel-fields[b-7qnszetm3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.pay-skel-fields i[b-7qnszetm3h] { height: 44px; }

@media (max-width: 900px) {
    .pay-skel-grid[b-7qnszetm3h] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@keyframes pay-shimmer-b-7qnszetm3h {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pay-skel i[b-7qnszetm3h],
    .pay-row-skel[b-7qnszetm3h] { animation: none; }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* Your profile, on the shared AdDesk tokens (design-tokens.css), matching Devices, Earnings and Publisher profile */

.pf-page[b-9cr67fqkct] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    color: var(--ad-ink);
}

/* ── Header ── */

.pf-head[b-9cr67fqkct] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-head-icon[b-9cr67fqkct] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.pf-head-text[b-9cr67fqkct] {
    flex: 1;
    min-width: 0;
}

.pf-head-text h1[b-9cr67fqkct] {
    margin: 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
}

.pf-head-text p[b-9cr67fqkct] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

/* ── Layout ── */

.pf-layout[b-9cr67fqkct] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

.pf-main[b-9cr67fqkct],
.pf-side[b-9cr67fqkct] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pf-side[b-9cr67fqkct] {
    position: sticky;
    top: 80px;
}

/* ── Cards ── */

.pf-card[b-9cr67fqkct] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.pf-card-head[b-9cr67fqkct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pf-card-head h2[b-9cr67fqkct] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-title);
}

.pf-card-head h2[b-9cr67fqkct]  .mud-icon-root {
    color: var(--ad-muted);
}

.pf-card-foot[b-9cr67fqkct] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--ad-line-soft);
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pf-note[b-9cr67fqkct] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pf-count[b-9cr67fqkct] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── Form ── */

.pf-fields[b-9cr67fqkct] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
}

.pf-fields--one[b-9cr67fqkct] {
    grid-template-columns: minmax(0, 1fr);
}

.pf-fields[b-9cr67fqkct]  .pf-span {
    grid-column: 1 / -1;
}

.pf-fields[b-9cr67fqkct]  .mud-input-control {
    margin-top: 4px;
}

.pf-sub[b-9cr67fqkct] {
    padding-top: 14px;
    border-top: 1px solid var(--ad-line-soft);
}

.pf-sub h3[b-9cr67fqkct] {
    margin: 0;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
}

.pf-sub p[b-9cr67fqkct] {
    margin: 2px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

/* ── Buttons and links ── */

.pf-btn[b-9cr67fqkct] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.pf-btn--primary[b-9cr67fqkct] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.pf-btn--primary:hover:not(:disabled)[b-9cr67fqkct] {
    background: var(--ad-primary-strong);
}

.pf-btn:disabled[b-9cr67fqkct] {
    border-color: var(--ad-disabled);
    background: var(--ad-disabled);
    color: var(--ad-on-primary);
    cursor: not-allowed;
}

.pf-btn[b-9cr67fqkct]  .pf-spin {
    width: 16px !important;
    height: 16px !important;
    color: inherit;
}

.pf-link[b-9cr67fqkct] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ad-primary-strong);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    text-decoration: none;
}

.pf-link:hover[b-9cr67fqkct] {
    text-decoration: underline;
}

.pf-btn:focus-visible[b-9cr67fqkct],
.pf-link:focus-visible[b-9cr67fqkct] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* ── Password ── */

.pf-rules[b-9cr67fqkct] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-rules li[b-9cr67fqkct] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pf-rules li[b-9cr67fqkct]  .mud-icon-root {
    font-size: 16px;
    color: var(--ad-faint);
}

.pf-rules li.is-ok[b-9cr67fqkct] {
    color: var(--ad-ink);
}

.pf-rules li.is-ok[b-9cr67fqkct]  .mud-icon-root {
    color: var(--ad-good);
}

.pf-social[b-9cr67fqkct] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: var(--ad-surface-2);
}

.pf-social-logo[b-9cr67fqkct] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: #fff;
    color: #000;
}

.pf-social b[b-9cr67fqkct] {
    font-size: var(--ad-text-md);
}

.pf-social p[b-9cr67fqkct] {
    margin: 4px 0 8px;
    max-width: 60ch;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

/* ── Permissions ── */

.pf-perms[b-9cr67fqkct] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-perms li[b-9cr67fqkct] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ad-line-soft);
    border-radius: 10px;
}

.pf-perms li.is-on[b-9cr67fqkct] {
    border-color: var(--ad-line);
    background: var(--ad-surface);
}

.pf-perms li:not(.is-on)[b-9cr67fqkct] {
    background: var(--ad-surface-2);
}

.pf-perm-icon[b-9cr67fqkct] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ad-line-soft);
    color: var(--ad-faint);
}

.is-on .pf-perm-icon[b-9cr67fqkct] {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.pf-perm-icon[b-9cr67fqkct]  .mud-icon-root {
    font-size: 16px;
}

.pf-perms b[b-9cr67fqkct] {
    display: block;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
}

.pf-perms li:not(.is-on) b[b-9cr67fqkct] {
    color: var(--ad-muted);
}

.pf-perms li > div span[b-9cr67fqkct] {
    display: block;
    margin-top: 2px;
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

/* Read by screen readers; the icon already shows it */
.pf-dot-label[b-9cr67fqkct] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Account card ── */

.pf-id[b-9cr67fqkct] {
    align-items: center;
    text-align: center;
}

.pf-avatar-wrap[b-9cr67fqkct] {
    position: relative;
}

.pf-avatar[b-9cr67fqkct] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: 0.02em;
}

.pf-avatar-badge[b-9cr67fqkct] {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--ad-surface);
    border-radius: 50%;
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

.pf-id h2[b-9cr67fqkct] {
    margin: 0;
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-title);
    overflow-wrap: anywhere;
}

.pf-id-email[b-9cr67fqkct] {
    margin-top: -10px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    overflow-wrap: anywhere;
}

.pf-pills[b-9cr67fqkct] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.pf-pill[b-9cr67fqkct] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
}

.pf-pill[b-9cr67fqkct]  .mud-icon-root {
    font-size: 14px;
}

.pf-pill.is-primary[b-9cr67fqkct] { background: var(--ad-primary-tint); color: var(--ad-primary-strong); }
.pf-pill.is-warn[b-9cr67fqkct] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.pf-pill.is-sm[b-9cr67fqkct] { padding: 2px 8px; }

.pf-facts[b-9cr67fqkct] {
    display: grid;
    width: 100%;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--ad-line-soft);
    text-align: left;
}

.pf-facts > div[b-9cr67fqkct] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.pf-facts dt[b-9cr67fqkct] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pf-facts dd[b-9cr67fqkct] {
    margin: 0;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    text-align: right;
}

/* ── Publishers ── */

.pf-pubs[b-9cr67fqkct] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-pubs li[b-9cr67fqkct] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.pf-pubs li > div[b-9cr67fqkct] {
    flex: 1;
    min-width: 0;
}

.pf-pubs b[b-9cr67fqkct] {
    display: block;
    font-size: var(--ad-text-sm);
    overflow-wrap: anywhere;
}

.pf-pubs li > div span[b-9cr67fqkct] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.pf-pub-icon[b-9cr67fqkct] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

/* ── Skeletons ── */

.pf-sk[b-9cr67fqkct] {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ad-line-soft) 25%, var(--ad-surface-2) 50%, var(--ad-line-soft) 75%);
    background-size: 200% 100%;
    animation: pf-shimmer-b-9cr67fqkct 1.4s ease-in-out infinite;
}

.pf-sk-avatar[b-9cr67fqkct] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

@keyframes pf-shimmer-b-9cr67fqkct {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-sk[b-9cr67fqkct] { animation: none; }
}

/* ── Smaller screens ── */

@media (max-width: 960px) {
    .pf-layout[b-9cr67fqkct] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The account card first on phones and tablets */
    .pf-side[b-9cr67fqkct] {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .pf-page[b-9cr67fqkct] {
        padding-top: 16px;
    }

    .pf-head-text h1[b-9cr67fqkct] {
        font-size: var(--ad-text-xl);
    }

    .pf-fields[b-9cr67fqkct],
    .pf-perms[b-9cr67fqkct] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pf-card[b-9cr67fqkct] {
        padding: 16px;
    }

    .pf-card-foot .pf-btn[b-9cr67fqkct] {
        width: 100%;
    }
}

.pf-unsaved:empty[b-9cr67fqkct] {
    display: none;
}

.pf-card-foot:has(.pf-unsaved:empty)[b-9cr67fqkct] {
    justify-content: flex-end;
}
/* /Components/Pages/PublisherPlaylistDetail.razor.rz.scp.css */
/* Playlist editor: colours come from the shared AdDesk palette (design-tokens.css).
   Library on the left, the loop on the right; on phones the library opens as a bottom sheet. */
.pe[b-p4qb3occ9j] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 32px;
    color: var(--ad-ink);
}

.pe-loading[b-p4qb3occ9j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header */
.pe-head[b-p4qb3occ9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.pe-title[b-p4qb3occ9j] {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pe-back[b-p4qb3occ9j] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.pe-name[b-p4qb3occ9j] {
    width: 100%;
    margin-left: -7px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--ad-ink);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pe-name:hover[b-p4qb3occ9j] {
    border-color: var(--ad-line);
}

.pe-name:focus[b-p4qb3occ9j] {
    outline: 0;
    border-color: var(--ad-primary);
    background: var(--ad-surface);
}

.pe-meta[b-p4qb3occ9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4px;
    font-size: 0.86rem;
    color: var(--ad-muted);
}

.pe-meta > span + span[b-p4qb3occ9j]::before {
    content: "\00B7";
    margin: 0 8px;
    color: var(--ad-faint);
}

.pe-meta b[b-p4qb3occ9j] {
    color: var(--ad-ink);
}

.pe-num[b-p4qb3occ9j],
.pe-clock[b-p4qb3occ9j],
.pe-start[b-p4qb3occ9j] {
    font-variant-numeric: tabular-nums;
}

.pe-pill[b-p4qb3occ9j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.pe-pill[b-p4qb3occ9j]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pe-pill--good[b-p4qb3occ9j] { background: var(--ad-good-tint); color: var(--ad-good); }
.pe-pill--warn[b-p4qb3occ9j] { background: var(--ad-warn-tint); color: var(--ad-warn); }

/* Buttons */
.pe-btn[b-p4qb3occ9j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pe-btn:hover[b-p4qb3occ9j] {
    border-color: var(--ad-faint);
}

.pe-btn--primary[b-p4qb3occ9j] {
    background: var(--ad-primary);
    border-color: var(--ad-primary);
    color: var(--ad-on-primary);
}

.pe-btn--primary:hover[b-p4qb3occ9j] {
    background: var(--ad-primary-strong);
    border-color: var(--ad-primary-strong);
}

.pe-btn:disabled[b-p4qb3occ9j],
.pe-ib:disabled[b-p4qb3occ9j],
.pe-play:disabled[b-p4qb3occ9j] {
    opacity: 0.45;
    cursor: not-allowed;
}

.pe-btn:focus-visible[b-p4qb3occ9j],
.pe-back:focus-visible[b-p4qb3occ9j],
.pe-chip:focus-visible[b-p4qb3occ9j],
.pe-card:focus-visible[b-p4qb3occ9j],
.pe-ib:focus-visible[b-p4qb3occ9j],
.pe-play:focus-visible[b-p4qb3occ9j],
.pe-link:focus-visible[b-p4qb3occ9j] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* Layout */
.pe-grid[b-p4qb3occ9j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start;
}

.pe-panel[b-p4qb3occ9j] {
    min-width: 0;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
}

.pe-panel-head[b-p4qb3occ9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 14px 16px 12px;
}

.pe-panel-head h2[b-p4qb3occ9j],
.pe-sheet-head h2[b-p4qb3occ9j] {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.pe-panel-head small[b-p4qb3occ9j],
.pe-sheet-head small[b-p4qb3occ9j] {
    font-size: 0.8rem;
    color: var(--ad-muted);
}

.pe-open-sheet[b-p4qb3occ9j],
.pe-sheet-head[b-p4qb3occ9j],
.pe-scrim[b-p4qb3occ9j] {
    display: none;
}

/* Library */
.pe-lib-tools[b-p4qb3occ9j] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--ad-line);
}

.pe-search[b-p4qb3occ9j] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-faint);
}

.pe-search:focus-within[b-p4qb3occ9j] {
    border-color: var(--ad-primary);
}

.pe-search input[b-p4qb3occ9j] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ad-ink);
    font: inherit;
}

.pe-chips[b-p4qb3occ9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pe-chip[b-p4qb3occ9j] {
    padding: 4px 11px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.pe-chip[aria-pressed="true"][b-p4qb3occ9j] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.pe-lib-grid[b-p4qb3occ9j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
    max-height: 640px;
    overflow: auto;
    padding: 14px 16px 16px;
}

.pe-lib-empty[b-p4qb3occ9j] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 32px 10px;
    text-align: center;
    color: var(--ad-muted);
}

.pe-lib-empty b[b-p4qb3occ9j] {
    color: var(--ad-ink);
}

.pe-card[b-p4qb3occ9j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pe-card:disabled[b-p4qb3occ9j] {
    cursor: not-allowed;
    opacity: 0.5;
}

.pe-card-thumb[b-p4qb3occ9j] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ad-surface-2);
    color: var(--ad-faint);
}

.pe-card-thumb img[b-p4qb3occ9j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pe-card:not(:disabled):hover .pe-card-thumb[b-p4qb3occ9j] {
    box-shadow: 0 0 0 2px var(--ad-primary);
}

.pe-dur[b-p4qb3occ9j] {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.pe-add[b-p4qb3occ9j] {
    position: absolute;
    right: 6px;
    top: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ad-surface);
    color: var(--ad-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.15s;
}

.pe-card:not(:disabled):hover .pe-add[b-p4qb3occ9j],
.pe-card:focus-visible .pe-add[b-p4qb3occ9j] {
    opacity: 1;
}

.pe-in[b-p4qb3occ9j] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font-size: 0.7rem;
    font-weight: 700;
}

.pe-card > b[b-p4qb3occ9j] {
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe-card-meta[b-p4qb3occ9j] {
    margin-top: -3px;
    font-size: 0.74rem;
    color: var(--ad-muted);
}

/* Touch screens can't hover, so the add button is always shown */
@media (hover: none) {
    .pe-add[b-p4qb3occ9j] {
        opacity: 1;
    }
}

/* Preview */
.pe-preview[b-p4qb3occ9j] {
    margin: 0 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #0f1724;
}

.pe-screen[b-p4qb3occ9j] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pe-screen img[b-p4qb3occ9j],
.pe-screen video[b-p4qb3occ9j] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.pe-cap[b-p4qb3occ9j] {
    position: absolute;
    left: 12px;
    bottom: 10px;
    right: 12px;
    display: flex;
    flex-direction: column;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.pe-cap b[b-p4qb3occ9j] {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe-cap span[b-p4qb3occ9j] {
    font-size: 0.78rem;
    opacity: 0.85;
}

.pe-idle[b-p4qb3occ9j] {
    color: #9aa6bf;
    font-size: 0.9rem;
}

.pe-pv-bar[b-p4qb3occ9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #c9d2e3;
    font-size: 0.78rem;
}

.pe-play[b-p4qb3occ9j] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}

.pe-timeline[b-p4qb3occ9j] {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 6px;
}

.pe-timeline i[b-p4qb3occ9j] {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}

.pe-timeline i.is-done[b-p4qb3occ9j] {
    background: rgba(255, 255, 255, 0.7);
}

.pe-timeline i.is-on[b-p4qb3occ9j]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--p, 0%);
    background: #fff;
}

/* Slots */
.pe-slots[b-p4qb3occ9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 6px;
}

.pe-meter[b-p4qb3occ9j] {
    flex: 1;
    display: flex;
    gap: 3px;
}

.pe-meter i[b-p4qb3occ9j] {
    flex: 1;
    height: 6px;
    border-radius: 2px;
    background: var(--ad-surface-2);
}

.pe-meter i.is-on[b-p4qb3occ9j] {
    background: var(--ad-primary);
}

.pe-slots small[b-p4qb3occ9j] {
    font-size: 0.8rem;
    color: var(--ad-muted);
    white-space: nowrap;
}

.pe-slots small.is-full[b-p4qb3occ9j] {
    color: var(--ad-warn);
    font-weight: 600;
}

/* The loop */
.pe-seq[b-p4qb3occ9j] {
    list-style: none;
    margin: 0;
    padding: 6px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pe-item[b-p4qb3occ9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--ad-surface);
}

.pe-item:hover[b-p4qb3occ9j] {
    border-color: var(--ad-line);
}

.pe-item.is-now[b-p4qb3occ9j] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
}

.pe-item.is-dragging[b-p4qb3occ9j] {
    opacity: 0.4;
}

.pe-item.is-over[b-p4qb3occ9j] {
    box-shadow: inset 0 2px 0 var(--ad-primary);
}

.pe-item.is-off[b-p4qb3occ9j] {
    opacity: 0.55;
}

.pe-grip[b-p4qb3occ9j] {
    display: grid;
    place-items: center;
    color: var(--ad-faint);
    cursor: grab;
}

.pe-n[b-p4qb3occ9j] {
    width: 20px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ad-faint);
}

.pe-thumb[b-p4qb3occ9j] {
    flex: 0 0 auto;
    width: 64px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ad-surface-2);
}

.pe-thumb img[b-p4qb3occ9j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pe-iname[b-p4qb3occ9j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pe-iname b[b-p4qb3occ9j] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe-iname span[b-p4qb3occ9j] {
    font-size: 0.78rem;
    color: var(--ad-muted);
}

.pe-start[b-p4qb3occ9j] {
    font-size: 0.78rem;
    color: var(--ad-faint);
    white-space: nowrap;
}

.pe-iacts[b-p4qb3occ9j] {
    display: flex;
    gap: 2px;
}

.pe-ib[b-p4qb3occ9j] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ad-muted);
    cursor: pointer;
}

.pe-ib:not(:disabled):hover[b-p4qb3occ9j] {
    background: var(--ad-surface-2);
    color: var(--ad-ink);
}

.pe-ib--danger:not(:disabled):hover[b-p4qb3occ9j] {
    color: var(--ad-bad);
}

.pe-seq-empty[b-p4qb3occ9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 6px 16px 16px;
    padding: 28px 16px;
    border: 1.5px dashed var(--ad-line);
    border-radius: 12px;
    text-align: center;
    color: var(--ad-muted);
}

.pe-seq-empty b[b-p4qb3occ9j] {
    color: var(--ad-ink);
}

.pe-where[b-p4qb3occ9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 16px 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ad-surface-2);
    font-size: 0.86rem;
}

.pe-where-text[b-p4qb3occ9j] {
    flex: 1 1 220px;
    color: var(--ad-muted);
}

.pe-where-text b[b-p4qb3occ9j] {
    color: var(--ad-ink);
}

.pe-link[b-p4qb3occ9j] {
    color: var(--ad-primary);
    font-weight: 600;
    text-decoration: none;
}

.pe-link:hover[b-p4qb3occ9j] {
    text-decoration: underline;
}

/* Unsaved changes */
.pe-savebar[b-p4qb3occ9j] {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--ad-ink);
    color: var(--ad-surface);
    box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.45);
}

.pe-savebar-text[b-p4qb3occ9j] {
    flex: 1 1 220px;
    font-weight: 600;
}

.pe-savebar-text small[b-p4qb3occ9j] {
    display: block;
    font-weight: 500;
    opacity: 0.75;
}

.pe-btn--ghost[b-p4qb3occ9j] {
    border-color: transparent;
    background: none;
    color: var(--ad-surface);
}

.pe-btn--ghost:hover[b-p4qb3occ9j] {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.12);
}

.pe-empty[b-p4qb3occ9j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding: 48px 20px;
    border: 1.5px dashed var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    text-align: center;
    color: var(--ad-muted);
}

.pe-empty[b-p4qb3occ9j]  .mud-icon-root {
    font-size: 2.2rem;
    color: var(--ad-faint);
}

.pe-empty b[b-p4qb3occ9j] {
    font-size: 1.05rem;
    color: var(--ad-ink);
}

/* Tablets and phones: the loop first, creatives in a bottom sheet */
@media (max-width: 900px) {
    .pe-grid[b-p4qb3occ9j] {
        grid-template-columns: 1fr;
    }

    .pe-loop[b-p4qb3occ9j] {
        order: -1;
    }

    .pe-open-sheet[b-p4qb3occ9j] {
        display: inline-flex;
    }

    .pe-lib[b-p4qb3occ9j] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1300;
        display: flex;
        flex-direction: column;
        max-height: 82vh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px -10px rgba(0, 0, 0, 0.35);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .pe-lib.is-open[b-p4qb3occ9j] {
        transform: none;
        visibility: visible;
    }

    .pe-lib-title[b-p4qb3occ9j] {
        display: none;
    }

    .pe-sheet-head[b-p4qb3occ9j] {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 18px 16px 10px;
    }

    .pe-sheet-head[b-p4qb3occ9j]::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 4px;
        background: var(--ad-line);
    }

    .pe-lib-grid[b-p4qb3occ9j] {
        flex: 1;
        max-height: none;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .pe-scrim.is-open[b-p4qb3occ9j] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1299;
        background: rgba(10, 14, 22, 0.45);
    }

    .pe-savebar[b-p4qb3occ9j] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        margin: 0;
        border-radius: 14px 14px 0 0;
        padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    }

    .pe.has-bar[b-p4qb3occ9j] {
        padding-bottom: 120px;
    }
}

@media (max-width: 520px) {
    /* Room for the name: no drag handle on touch, no number or start time */
    .pe-grip[b-p4qb3occ9j],
    .pe-n[b-p4qb3occ9j],
    .pe-start[b-p4qb3occ9j] {
        display: none;
    }

    .pe-item[b-p4qb3occ9j] {
        gap: 8px;
        padding: 6px;
    }

    .pe-thumb[b-p4qb3occ9j] {
        width: 52px;
        height: 30px;
    }

    .pe-ib[b-p4qb3occ9j] {
        width: 36px;
        height: 36px;
    }

    .pe-head > .pe-btn[b-p4qb3occ9j] {
        width: 100%;
    }

    .pe-name[b-p4qb3occ9j] {
        font-size: 1.25rem;
    }

    .pe-chips[b-p4qb3occ9j] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pe-chip[b-p4qb3occ9j] {
        flex: 0 0 auto;
    }

    .pe-savebar-text[b-p4qb3occ9j] {
        flex-basis: 100%;
    }

    .pe-savebar .pe-btn[b-p4qb3occ9j] {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pe-lib[b-p4qb3occ9j],
    .pe-add[b-p4qb3occ9j] {
        transition: none;
    }
}
/* /Components/Pages/PublisherPlaylistPublish.razor.rz.scp.css */
/* Publish a playlist: colours come from the shared AdDesk palette (design-tokens.css).
   Screens on the left, a sticky summary on the right; on phones the summary is a bar at the bottom. */
.pp[b-hb38vjmr4w] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 32px;
    color: var(--ad-ink);
}

.pp-loading[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header */
.pp-head[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}

.pp-back[b-hb38vjmr4w] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    margin-left: -4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pp-head h1[b-hb38vjmr4w] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pp-head p[b-hb38vjmr4w] {
    margin: 0;
    color: var(--ad-muted);
}

.pp-head p b[b-hb38vjmr4w] {
    color: var(--ad-ink);
}

/* Buttons and links */
.pp-btn[b-hb38vjmr4w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pp-btn:hover[b-hb38vjmr4w] {
    border-color: var(--ad-faint);
}

.pp-btn--primary[b-hb38vjmr4w] {
    background: var(--ad-primary);
    border-color: var(--ad-primary);
    color: var(--ad-on-primary);
}

.pp-btn--primary:hover[b-hb38vjmr4w] {
    background: var(--ad-primary-strong);
    border-color: var(--ad-primary-strong);
}

.pp-btn--wide[b-hb38vjmr4w] {
    width: 100%;
    min-height: 44px;
}

.pp-btn:disabled[b-hb38vjmr4w] {
    opacity: 0.45;
    cursor: not-allowed;
}

.pp-link[b-hb38vjmr4w] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.pp-link:hover[b-hb38vjmr4w] {
    text-decoration: underline;
}

.pp-btn:focus-visible[b-hb38vjmr4w],
.pp-back:focus-visible[b-hb38vjmr4w],
.pp-link:focus-visible[b-hb38vjmr4w],
.pp-chip:focus-visible[b-hb38vjmr4w],
.pp-check:focus-visible[b-hb38vjmr4w] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* Layout */
.pp-grid[b-hb38vjmr4w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.pp-panel[b-hb38vjmr4w] {
    min-width: 0;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    overflow: hidden;
}

/* Tools */
.pp-tools[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--ad-line);
}

.pp-tools-row[b-hb38vjmr4w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.pp-search[b-hb38vjmr4w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-faint);
}

.pp-search:focus-within[b-hb38vjmr4w] {
    border-color: var(--ad-primary);
}

.pp-search input[b-hb38vjmr4w] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ad-ink);
    font: inherit;
}

.pp-chips[b-hb38vjmr4w] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pp-chip[b-hb38vjmr4w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.pp-chip[aria-pressed="true"][b-hb38vjmr4w] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.pp-chip-n[b-hb38vjmr4w] {
    font-size: 0.74rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* Screens */
.pp-list[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    max-height: 640px;
    overflow: auto;
}

.pp-row[b-hb38vjmr4w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--ad-line);
    cursor: pointer;
}

.pp-row:first-child[b-hb38vjmr4w] {
    border-top: 0;
}

.pp-row:hover[b-hb38vjmr4w] {
    background: var(--ad-surface-2);
}

.pp-row.is-on[b-hb38vjmr4w] {
    background: var(--ad-primary-tint);
}

.pp-check[b-hb38vjmr4w] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ad-primary);
    cursor: pointer;
}

.pp-thumb[b-hb38vjmr4w] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ad-surface-2);
    color: var(--ad-faint);
}

.pp-thumb img[b-hb38vjmr4w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-dname[b-hb38vjmr4w] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pp-dname b[b-hb38vjmr4w] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-dname > span[b-hb38vjmr4w] {
    font-size: 0.78rem;
    color: var(--ad-muted);
    overflow-wrap: anywhere;
}

.pp-dname a[b-hb38vjmr4w] {
    color: var(--ad-primary);
}

.pp-now[b-hb38vjmr4w] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
    text-align: right;
}

.pp-now[b-hb38vjmr4w]  .pp-tag {
    display: inline-block;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
    font-size: 0.74rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.pp-now[b-hb38vjmr4w]  .pp-tag--good {
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.pp-now[b-hb38vjmr4w]  .pp-tag--warn {
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.pp-skel[b-hb38vjmr4w] {
    padding: 10px 16px;
    border-top: 1px solid var(--ad-line);
}

.pp-list-empty[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 36px 16px;
    text-align: center;
    color: var(--ad-muted);
}

.pp-list-empty b[b-hb38vjmr4w] {
    color: var(--ad-ink);
}

/* Summary */
.pp-summary[b-hb38vjmr4w] {
    position: sticky;
    top: 80px;
}

.pp-card[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
}

.pp-card-head[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
}

.pp-card-head b[b-hb38vjmr4w] {
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pp-card-head span[b-hb38vjmr4w] {
    font-size: 0.82rem;
    color: var(--ad-muted);
    font-variant-numeric: tabular-nums;
}

.pp-film[b-hb38vjmr4w] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.pp-frame[b-hb38vjmr4w] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    background: var(--ad-surface-2);
}

.pp-frame img[b-hb38vjmr4w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-frame i[b-hb38vjmr4w] {
    position: absolute;
    left: 3px;
    top: 3px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
}

.pp-warn[b-hb38vjmr4w] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ad-warn-tint);
    font-size: 0.85rem;
}

.pp-effects[b-hb38vjmr4w] {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--ad-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--ad-muted);
}

.pp-effects li[b-hb38vjmr4w] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pp-effects b[b-hb38vjmr4w] {
    color: var(--ad-ink);
}

.pp-effects[b-hb38vjmr4w]  .mud-icon-root {
    flex: 0 0 auto;
    color: var(--ad-primary);
}

.pp-effects li.is-warn[b-hb38vjmr4w]  .mud-icon-root {
    color: var(--ad-warn);
}

.pp-card-acts[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Phone bar (hidden on wide screens) */
.pp-bar[b-hb38vjmr4w] {
    display: none;
}

/* Done */
.pp-done[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 24px auto 0;
    padding: 32px 24px;
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 16px;
    text-align: center;
}

.pp-done-icon[b-hb38vjmr4w] {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.pp-done h1[b-hb38vjmr4w] {
    margin: 4px 0 0;
    font-size: 1.4rem;
    font-weight: 800;
}

.pp-done p[b-hb38vjmr4w] {
    margin: 0;
    color: var(--ad-muted);
    max-width: 48ch;
}

.pp-done p b[b-hb38vjmr4w] {
    color: var(--ad-ink);
}

.pp-done-list[b-hb38vjmr4w] {
    list-style: none;
    width: 100%;
    max-height: 300px;
    overflow: auto;
    margin: 10px 0 0;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    text-align: left;
}

.pp-done-list li[b-hb38vjmr4w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--ad-line);
}

.pp-done-list li:first-child[b-hb38vjmr4w] {
    border-top: 0;
}

.pp-done-list .pp-thumb[b-hb38vjmr4w] {
    width: 36px;
    height: 36px;
}

.pp-done-note[b-hb38vjmr4w] {
    font-size: 0.85rem;
}

.pp-done-acts[b-hb38vjmr4w] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.pp-empty[b-hb38vjmr4w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding: 48px 20px;
    border: 1.5px dashed var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    text-align: center;
    color: var(--ad-muted);
}

.pp-empty[b-hb38vjmr4w]  .mud-icon-root {
    font-size: 2.2rem;
    color: var(--ad-faint);
}

.pp-empty b[b-hb38vjmr4w] {
    font-size: 1.05rem;
    color: var(--ad-ink);
}

@media (max-width: 900px) {
    .pp-grid[b-hb38vjmr4w] {
        grid-template-columns: 1fr;
    }

    .pp-summary[b-hb38vjmr4w] {
        position: static;
    }

    .pp-card-acts[b-hb38vjmr4w] {
        display: none;
    }

    .pp-list[b-hb38vjmr4w] {
        max-height: none;
    }

    .pp-bar[b-hb38vjmr4w] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        padding: 12px max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        border-radius: 14px 14px 0 0;
        background: var(--ad-ink);
        color: var(--ad-surface);
        box-shadow: 0 -10px 30px -14px rgba(15, 23, 42, 0.45);
    }

    .pp-bar-text[b-hb38vjmr4w] {
        flex: 1 1 180px;
        font-weight: 600;
    }

    .pp-bar-text small[b-hb38vjmr4w] {
        display: block;
        font-weight: 500;
        opacity: 0.75;
    }

    .pp.has-bar[b-hb38vjmr4w] {
        padding-bottom: 110px;
    }
}

@media (max-width: 520px) {
    .pp-head h1[b-hb38vjmr4w] {
        font-size: 1.3rem;
    }

    .pp-chips[b-hb38vjmr4w] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pp-chip[b-hb38vjmr4w] {
        flex: 0 0 auto;
    }

    .pp-row[b-hb38vjmr4w] {
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    .pp-now[b-hb38vjmr4w] {
        max-width: none;
        flex-basis: 100%;
        padding-left: 74px;
        text-align: left;
    }

    .pp-now:empty[b-hb38vjmr4w] {
        display: none;
    }

    .pp-bar .pp-btn[b-hb38vjmr4w] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/PublisherPlaylists.razor.rz.scp.css */
/* Playlists list: colours come from the shared AdDesk palette (design-tokens.css) */
.pl[b-kn38wksc92] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 32px;
    color: var(--ad-ink);
}

.pl-head[b-kn38wksc92] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.pl-head-text[b-kn38wksc92] {
    flex: 1 1 280px;
}

.pl-head h1[b-kn38wksc92] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pl-head p[b-kn38wksc92] {
    margin: 2px 0 0;
    color: var(--ad-muted);
}

/* Buttons */
.pl-btn[b-kn38wksc92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pl-btn:hover[b-kn38wksc92] {
    border-color: var(--ad-faint);
}

.pl-btn--primary[b-kn38wksc92] {
    background: var(--ad-primary);
    border-color: var(--ad-primary);
    color: var(--ad-on-primary);
}

.pl-btn--primary:hover[b-kn38wksc92] {
    background: var(--ad-primary-strong);
    border-color: var(--ad-primary-strong);
}

.pl-btn:disabled[b-kn38wksc92] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pl-btn:focus-visible[b-kn38wksc92],
.pl-ib:focus-visible[b-kn38wksc92],
.pl-chip:focus-visible[b-kn38wksc92],
.pl-row:focus-visible[b-kn38wksc92] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.pl-provider[b-kn38wksc92] {
    max-width: 520px;
    margin-bottom: 16px;
}

/* Search and filters */
.pl-tools[b-kn38wksc92] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 12px;
}

.pl-search[b-kn38wksc92] {
    flex: 1 1 240px;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-faint);
}

.pl-search:focus-within[b-kn38wksc92] {
    border-color: var(--ad-primary);
}

.pl-search input[b-kn38wksc92] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    color: var(--ad-ink);
}

.pl-chips[b-kn38wksc92] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pl-chip[b-kn38wksc92] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 999px;
    background: var(--ad-surface);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ad-muted);
    cursor: pointer;
}

.pl-chip[aria-pressed="true"][b-kn38wksc92] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.pl-chip-n[b-kn38wksc92] {
    font-size: 0.74rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

/* The list */
.pl-list[b-kn38wksc92] {
    background: var(--ad-surface);
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    overflow: hidden;
}

.pl-row[b-kn38wksc92] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 100px 150px auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--ad-line);
    cursor: pointer;
}

.pl-row:first-child[b-kn38wksc92] {
    border-top: 0;
}

.pl-row:hover[b-kn38wksc92] {
    background: var(--ad-surface-2);
}

.pl-row--head[b-kn38wksc92] {
    padding-block: 10px;
    background: var(--ad-surface-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ad-faint);
    cursor: default;
}

.pl-sr[b-kn38wksc92] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pl-name[b-kn38wksc92] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pl-name b[b-kn38wksc92] {
    font-size: 0.98rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-name span[b-kn38wksc92] {
    font-size: 0.8rem;
    color: var(--ad-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-film[b-kn38wksc92] {
    display: flex;
    gap: 3px;
    height: 34px;
    min-width: 0;
    overflow: hidden;
}

.pl-frame[b-kn38wksc92] {
    flex: 0 0 60px;
    height: 34px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--ad-surface-2);
}

.pl-frame img[b-kn38wksc92] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pl-frame--more[b-kn38wksc92] {
    flex-basis: auto;
    min-width: 34px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ad-muted);
}

.pl-film-empty[b-kn38wksc92] {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px dashed var(--ad-line);
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--ad-faint);
}

.pl-len[b-kn38wksc92] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pl-len small[b-kn38wksc92] {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--ad-muted);
}

.pl-status[b-kn38wksc92] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.pl-status-len[b-kn38wksc92] {
    display: none;
    font-size: 0.8rem;
    color: var(--ad-muted);
    font-variant-numeric: tabular-nums;
}

.pl-pill[b-kn38wksc92] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.pl-pill[b-kn38wksc92]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pl-pill--good[b-kn38wksc92] { background: var(--ad-good-tint); color: var(--ad-good); }
.pl-pill--warn[b-kn38wksc92] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.pl-pill--mute[b-kn38wksc92] { background: var(--ad-surface-2); color: var(--ad-muted); }

.pl-acts[b-kn38wksc92] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.pl-ib[b-kn38wksc92] {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ad-muted);
    cursor: pointer;
}

.pl-ib:hover[b-kn38wksc92] {
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: inset 0 0 0 1px var(--ad-line);
}

.pl-ib:disabled[b-kn38wksc92] {
    opacity: 0.35;
    cursor: not-allowed;
}

.pl-none[b-kn38wksc92] {
    padding: 22px 18px;
    color: var(--ad-muted);
}

.pl-skel[b-kn38wksc92] {
    padding: 12px 18px;
    border-top: 1px solid var(--ad-line);
}

.pl-skel:first-child[b-kn38wksc92] {
    border-top: 0;
}

.pl-empty[b-kn38wksc92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 20px;
    border: 1.5px dashed var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    text-align: center;
    color: var(--ad-muted);
}

.pl-empty[b-kn38wksc92]  .mud-icon-root {
    font-size: 2.2rem;
    color: var(--ad-faint);
}

.pl-empty b[b-kn38wksc92] {
    color: var(--ad-ink);
    font-size: 1.05rem;
}

.pl-empty-acts[b-kn38wksc92] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .pl-row[b-kn38wksc92] {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
    }

    .pl-row--head[b-kn38wksc92],
    .pl-film[b-kn38wksc92],
    .pl-len[b-kn38wksc92] {
        display: none;
    }

    .pl-status[b-kn38wksc92] {
        grid-column: 1;
        grid-row: 2;
    }

    .pl-status-len[b-kn38wksc92] {
        display: inline;
    }

    .pl-acts[b-kn38wksc92] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 520px) {
    .pl-head .pl-btn[b-kn38wksc92] {
        width: 100%;
    }

    .pl-chips[b-kn38wksc92] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pl-chip[b-kn38wksc92] {
        flex: 0 0 auto;
    }

    .pl-row[b-kn38wksc92] {
        padding: 12px 14px;
    }
}
/* /Components/Pages/PublisherProfile.razor.rz.scp.css */
/* Publisher profile, on the shared AdDesk tokens (design-tokens.css), matching Devices and Earnings */

.pp-page[b-cacu7qfg7a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    color: var(--ad-ink);
}

/* ── Header ── */

.pp-head[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pp-head-icon[b-cacu7qfg7a] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.pp-head-text[b-cacu7qfg7a] {
    flex: 1;
    min-width: 0;
}

.pp-head-text h1[b-cacu7qfg7a] {
    margin: 0;
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
}

.pp-head-text p[b-cacu7qfg7a] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

/* ── Buttons ── */

.pp-btn[b-cacu7qfg7a] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.pp-btn:hover[b-cacu7qfg7a] {
    border-color: var(--ad-primary);
}

.pp-btn--primary[b-cacu7qfg7a] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.pp-btn--primary:hover[b-cacu7qfg7a] {
    background: var(--ad-primary-strong);
}

.pp-link[b-cacu7qfg7a] {
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ad-primary-strong);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.pp-link:hover[b-cacu7qfg7a] {
    text-decoration: underline;
}

.pp-btn:focus-visible[b-cacu7qfg7a],
.pp-link:focus-visible[b-cacu7qfg7a],
.pp-copy:focus-visible[b-cacu7qfg7a],
.pp-stat--link:focus-visible[b-cacu7qfg7a] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* ── Cards ── */

.pp-card[b-cacu7qfg7a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
}

.pp-card-head[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pp-card-head h3[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-title);
}

.pp-card-head h3[b-cacu7qfg7a]  .mud-icon-root {
    color: var(--ad-muted);
}

.pp-card-foot[b-cacu7qfg7a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ad-line-soft);
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pp-note[b-cacu7qfg7a] {
    margin: -4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

/* ── Identity ── */

.pp-identity[b-cacu7qfg7a] {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.pp-identity.is-off[b-cacu7qfg7a] {
    background: var(--ad-surface-2);
}

.pp-avatar[b-cacu7qfg7a] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: 0.02em;
}

.is-off .pp-avatar[b-cacu7qfg7a] {
    background: var(--ad-disabled);
}

.pp-identity-text[b-cacu7qfg7a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pp-name-row[b-cacu7qfg7a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pp-name-row h2[b-cacu7qfg7a] {
    margin: 0;
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-bold);
    letter-spacing: var(--ad-tracking-title);
    overflow-wrap: anywhere;
}

.pp-meta[b-cacu7qfg7a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pp-code[b-cacu7qfg7a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pp-code b[b-cacu7qfg7a] {
    color: var(--ad-ink);
    font-variant-numeric: tabular-nums;
}

.pp-copy[b-cacu7qfg7a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ad-line);
    border-radius: 7px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.pp-copy:hover[b-cacu7qfg7a] {
    border-color: var(--ad-primary);
    color: var(--ad-primary-strong);
}

.pp-copy[b-cacu7qfg7a]  .mud-icon-root {
    font-size: 15px;
}

.pp-off-reason[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ad-bad);
    font-size: var(--ad-text-sm);
}

/* ── Status pill ── */

.pp-pill[b-cacu7qfg7a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    white-space: nowrap;
}

.pp-pill i[b-cacu7qfg7a] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pp-pill.is-good[b-cacu7qfg7a] { background: var(--ad-good-tint); color: var(--ad-good); }
.pp-pill.is-warn[b-cacu7qfg7a] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.pp-pill.is-bad[b-cacu7qfg7a] { background: var(--ad-bad-tint); color: var(--ad-bad); }

/* ── Stats ── */

.pp-stats[b-cacu7qfg7a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pp-stat[b-cacu7qfg7a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
}

.pp-stat--link[b-cacu7qfg7a] {
    cursor: pointer;
}

.pp-stat--link:hover[b-cacu7qfg7a] {
    border-color: var(--ad-primary);
}

.pp-stat-label[b-cacu7qfg7a] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-semibold);
    letter-spacing: var(--ad-tracking-caps);
    text-transform: uppercase;
}

.pp-stat-value[b-cacu7qfg7a] {
    font-size: var(--ad-text-2xl);
    font-weight: var(--ad-weight-heavy);
    letter-spacing: var(--ad-tracking-title);
    line-height: var(--ad-leading-tight);
    font-variant-numeric: tabular-nums;
}

.pp-stat-value--text[b-cacu7qfg7a] {
    font-size: var(--ad-text-lg);
    line-height: 1.6;
}

.pp-stat-note[b-cacu7qfg7a] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pp-stat--link .pp-stat-note[b-cacu7qfg7a] {
    color: var(--ad-primary-strong);
    font-weight: var(--ad-weight-semibold);
}

/* ── Details ── */

.pp-grid[b-cacu7qfg7a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pp-facts[b-cacu7qfg7a],
.pp-mapping[b-cacu7qfg7a] {
    display: grid;
    margin: 0;
}

.pp-facts > div[b-cacu7qfg7a] {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--ad-line-soft);
}

.pp-facts > div:first-child[b-cacu7qfg7a] {
    border-top: 0;
    padding-top: 0;
}

.pp-facts dt[b-cacu7qfg7a],
.pp-mapping dt[b-cacu7qfg7a] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.pp-facts dd[b-cacu7qfg7a],
.pp-mapping dd[b-cacu7qfg7a] {
    margin: 0;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-medium);
    overflow-wrap: anywhere;
}

.pp-facts a[b-cacu7qfg7a] {
    color: var(--ad-primary-strong);
    text-decoration: none;
}

.pp-facts a:hover[b-cacu7qfg7a] {
    text-decoration: underline;
}

.pp-missing[b-cacu7qfg7a] {
    color: var(--ad-faint);
    font-weight: var(--ad-weight-regular);
}

.pp-missing.is-required[b-cacu7qfg7a] {
    color: var(--ad-warn);
    font-weight: var(--ad-weight-semibold);
}

.pp-mono[b-cacu7qfg7a] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--ad-text-sm) !important;
    color: var(--ad-muted);
}

.pp-mapping[b-cacu7qfg7a] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pp-mapping > div[b-cacu7qfg7a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ad-surface-2);
}

.pp-mapping code[b-cacu7qfg7a] {
    padding: 1px 6px;
    border: 1px solid var(--ad-line);
    border-radius: 6px;
    background: var(--ad-surface);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--ad-text-sm);
}

/* ── Empty state ── */

.pp-empty[b-cacu7qfg7a] {
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.pp-empty-icon[b-cacu7qfg7a] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
}

.pp-empty h2[b-cacu7qfg7a] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.pp-empty p[b-cacu7qfg7a] {
    max-width: 48ch;
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
}

.pp-empty a[b-cacu7qfg7a] {
    color: var(--ad-primary-strong);
}

.pp-facts--inline[b-cacu7qfg7a] {
    width: min(100%, 360px);
    text-align: left;
}

/* ── Skeletons ── */

.pp-sk[b-cacu7qfg7a] {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ad-line-soft) 25%, var(--ad-surface-2) 50%, var(--ad-line-soft) 75%);
    background-size: 200% 100%;
    animation: pp-shimmer-b-cacu7qfg7a 1.4s ease-in-out infinite;
}

.pp-sk-avatar[b-cacu7qfg7a] {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
}

.pp-sk-lines[b-cacu7qfg7a] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
}

@keyframes pp-shimmer-b-cacu7qfg7a {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-sk[b-cacu7qfg7a] { animation: none; }
}

/* ── Smaller screens ── */

@media (max-width: 900px) {
    .pp-stats[b-cacu7qfg7a],
    .pp-mapping[b-cacu7qfg7a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-grid[b-cacu7qfg7a] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .pp-page[b-cacu7qfg7a] {
        padding-top: 16px;
    }

    .pp-head[b-cacu7qfg7a] {
        flex-wrap: wrap;
    }

    .pp-head-text h1[b-cacu7qfg7a] {
        font-size: var(--ad-text-xl);
    }

    .pp-head .pp-btn[b-cacu7qfg7a] {
        width: 100%;
    }

    .pp-identity[b-cacu7qfg7a] {
        align-items: flex-start;
    }

    .pp-avatar[b-cacu7qfg7a],
    .pp-sk-avatar[b-cacu7qfg7a] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: var(--ad-text-lg);
    }

    .pp-facts > div[b-cacu7qfg7a] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .pp-card-foot .pp-btn[b-cacu7qfg7a] {
        width: 100%;
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
.register-page[b-wrhlq8er0o] {
    background: linear-gradient(135deg, var(--color-bg-hover) 0%, var(--color-primary-soft) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.register-container[b-wrhlq8er0o] {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered Form Section */
.register-form-section[b-wrhlq8er0o] {
    width: 100%;
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-header-actions[b-wrhlq8er0o] {
    padding: 2rem 2.5rem 0;
    text-align: right;
    background: var(--color-bg-surface);
}

.register-form[b-wrhlq8er0o] {
    padding: 1rem 2.5rem 2.5rem;
    width: 100%;
    box-sizing: border-box;
}

.form-group[b-wrhlq8er0o] {
    margin-bottom: 1.5rem;
}

.register-two-column-row[b-wrhlq8er0o] {
    display: flex;
    gap: 1rem;
}

.register-field-column[b-wrhlq8er0o] {
    flex: 1;
    min-width: 0;
}

.form-label[b-wrhlq8er0o] {
    display: block;
    color: var(--color-text-main);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

/* Register form MudBlazor input styling - match production look */
[b-wrhlq8er0o] .register-form .mud-input-outlined {
    background: var(--color-bg-surface);
    border-radius: 10px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--color-border-subtle);
    border-width: 1px;
    border-radius: 10px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--color-border-hover);
}

[b-wrhlq8er0o] .register-form .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--color-primary);
    border-width: 2px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-slot {
    background: transparent;
    padding: 12px 16px;
}

[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-label,
[b-wrhlq8er0o] .register-form .mud-input-outlined .mud-input-label.mud-shrink {
    background: var(--color-bg-surface);
    padding: 0 4px;
    z-index: 1;
}

[b-wrhlq8er0o] .register-form .mud-input-control,
[b-wrhlq8er0o] .register-form .mud-select,
[b-wrhlq8er0o] .register-form .mud-text-field {
    width: 100%;
    min-width: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .register-page[b-wrhlq8er0o] {
        align-items: flex-start;
        padding: 1rem;
    }

    .register-container[b-wrhlq8er0o] {
        max-width: 100%;
    }

    .form-header-actions[b-wrhlq8er0o] {
        padding: 1.5rem 1.5rem 0;
    }
    
    .register-form[b-wrhlq8er0o] {
        padding: 1rem 1.5rem 2rem;
    }

    .register-two-column-row[b-wrhlq8er0o] {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .register-page[b-wrhlq8er0o] {
        align-items: flex-start;
        padding: 0.5rem;
    }

    .form-header-actions[b-wrhlq8er0o] {
        padding: 1.25rem 1.25rem 0;
    }

    .register-form[b-wrhlq8er0o] {
        padding: 0.75rem 1.25rem 1.5rem;
    }

    .register-two-column-row[b-wrhlq8er0o] {
        flex-direction: column;
        gap: 0;
    }

    .register-form :deep(.mud-input-slot)[b-wrhlq8er0o] {
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* /Components/Pages/Revenue.razor.rz.scp.css */
/* AdDesk MarketPlace Publisher Revenue Page Styles */

/* Page Layout Styles (matching DeviceManagement and PublisherProfile) */
.device-page[b-m3zc8qa54g] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px);
    background: transparent;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--page-padding);
}

.device-scroll[b-m3zc8qa54g] {
    flex: 1;
    overflow-y: auto;
}

.page-header[b-m3zc8qa54g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--section-gap);
    gap: var(--space-md);
}

.page-header-title[b-m3zc8qa54g] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin: 0;
}

.page-header-subtitle[b-m3zc8qa54g] {
    margin-top: 6px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}
/* /Components/Shared/AddDeviceDialog.razor.rz.scp.css */
/* ============================================
   ADD DEVICE DIALOG - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

/* Dialog content spacing */
[b-fx6lzokpvf] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Grid item spacing */
[b-fx6lzokpvf] .mud-grid-item {
    padding: var(--space-sm);
}

/* Form field labels */
[b-fx6lzokpvf] .mud-input-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

/* Section overline labels */
[b-fx6lzokpvf] .mud-typography-overline {
    letter-spacing: 1.2px;
    font-weight: var(--font-weight-semibold);
}

/* Divider spacing */
[b-fx6lzokpvf] .mud-divider.my-2 {
    margin: var(--space-md) 0;
}

/* Dialog actions spacing */
[b-fx6lzokpvf] .mud-dialog-actions {
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-sm);
}

/* Switch label */
[b-fx6lzokpvf] .mud-switch-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Dialog title */
[b-fx6lzokpvf] .mud-dialog-title h6 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

/* Button styling within dialog */
[b-fx6lzokpvf] .mud-button-text {
    color: var(--color-text-muted);
}

[b-fx6lzokpvf] .mud-button-text:hover {
    background-color: var(--color-bg-hover);
}

[b-fx6lzokpvf] .mud-button-filled-primary {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-button);
}

[b-fx6lzokpvf] .mud-button-filled-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Summary list in confirmation */
.summary-list[b-fx6lzokpvf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-item[b-fx6lzokpvf] {
    padding: 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.summary-item:last-child[b-fx6lzokpvf] {
    border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-fx6lzokpvf] .mud-dialog-content {
        padding: var(--space-md);
    }
    
    [b-fx6lzokpvf] .mud-dialog-actions {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
    }
    
    [b-fx6lzokpvf] .mud-dialog-actions .mud-button-root {
        width: 100%;
    }
}
/* /Components/Shared/AdNetworkChoice.razor.rz.scp.css */
.anc[b-2nt0newxko] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 22px 24px;
    border: 1px solid var(--ad-primary-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: var(--shadow-sm);
}

.anc.has-error[b-2nt0newxko] {
    border-color: var(--ad-bad);
    box-shadow: 0 0 0 3px var(--ad-bad-tint);
}

.anc-head[b-2nt0newxko] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.anc-icon[b-2nt0newxko] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ad-good-tint);
    color: var(--ad-good);
}

.anc-head h2[b-2nt0newxko] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.anc-head p[b-2nt0newxko] {
    margin: 4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    line-height: var(--ad-leading-body);
}

.anc-options[b-2nt0newxko] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.anc-option[b-2nt0newxko] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.anc-option:hover[b-2nt0newxko] {
    border-color: var(--ad-primary);
}

.anc-option:focus-visible[b-2nt0newxko] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.anc-option.is-on[b-2nt0newxko] {
    padding: 15px;
    border: 2px solid var(--ad-primary);
    background: var(--ad-primary-tint);
}

.anc-radio[b-2nt0newxko] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    box-sizing: border-box;
    border: 2px solid var(--ad-faint);
    border-radius: 50%;
    background: var(--ad-surface);
}

.anc-option.is-on .anc-radio[b-2nt0newxko] {
    border: 5px solid var(--ad-primary);
}

.anc-text[b-2nt0newxko] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anc-text b[b-2nt0newxko] {
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
}

.anc-option.is-on .anc-text b[b-2nt0newxko] {
    color: var(--ad-primary-strong);
}

.anc-text span[b-2nt0newxko] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
    line-height: 1.45;
}

.anc-error[b-2nt0newxko] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 0;
    color: var(--ad-bad);
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
}

.anc-note[b-2nt0newxko] {
    margin: -4px 0 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.anc-note a[b-2nt0newxko] {
    color: var(--ad-primary-strong);
}

@media (max-width: 640px) {
    .anc[b-2nt0newxko] {
        padding: 18px 16px;
    }

    .anc-options[b-2nt0newxko] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .anc-option[b-2nt0newxko] { transition: none; }
}
/* /Components/Shared/CampaignProblem.razor.rz.scp.css */
.cpb[b-hd8x0vv2rh] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ad-warn-line);
    border-radius: 14px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: 0 6px 18px rgba(180, 110, 10, 0.08);
}

.cpb--bad[b-hd8x0vv2rh] {
    border-color: var(--ad-bad-line);
    box-shadow: 0 6px 18px rgba(180, 35, 24, 0.08);
}

.cpb-head[b-hd8x0vv2rh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cpb-icon[b-hd8x0vv2rh] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ad-warn-tint);
    color: var(--ad-warn);
}

.cpb--bad .cpb-icon[b-hd8x0vv2rh] {
    background: var(--ad-bad-tint);
    color: var(--ad-bad);
}

.cpb-text[b-hd8x0vv2rh] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cpb-text h2[b-hd8x0vv2rh] {
    margin: 0;
    font-size: var(--ad-text-lg);
    font-weight: var(--ad-weight-bold);
}

.cpb-text p[b-hd8x0vv2rh] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-md);
    line-height: 1.5;
}

.cpb-close[b-hd8x0vv2rh] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ad-muted);
    cursor: pointer;
}

.cpb-close:hover[b-hd8x0vv2rh] {
    background: var(--ad-bg);
}

.cpb-actions[b-hd8x0vv2rh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cpb-help[b-hd8x0vv2rh] {
    margin-left: auto;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cpb-help a[b-hd8x0vv2rh] {
    color: var(--ad-primary-strong);
}

/* Buttons passed in through Actions */
.cpb-actions[b-hd8x0vv2rh]  .cpb-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.cpb-actions[b-hd8x0vv2rh]  .cpb-btn--primary {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

@media (max-width: 640px) {
    .cpb-help[b-hd8x0vv2rh] {
        margin-left: 0;
    }
}
/* /Components/Shared/CampaignProgress.razor.rz.scp.css */
.cp-overlay[b-2zu3oag388] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(27, 36, 52, 0.45);
}

.cp-card[b-2zu3oag388] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    padding: 26px 26px 22px;
    border-radius: 18px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: 0 24px 60px rgba(27, 36, 52, 0.28);
}

.cp-logo[b-2zu3oag388] {
    display: block;
    width: auto;
    height: 30px;
    margin-bottom: -2px;
    align-self: flex-start;
}

.cp-head[b-2zu3oag388] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-head h2[b-2zu3oag388] {
    margin: 0;
    font-size: var(--ad-text-xl);
    font-weight: var(--ad-weight-bold);
}

.cp-head p[b-2zu3oag388] {
    margin: 0;
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.cp-steps[b-2zu3oag388] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ad-text-md);
}

.cp-step[b-2zu3oag388] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ad-muted);
}

.cp-step.is-done[b-2zu3oag388] {
    color: var(--ad-ink);
}

.cp-step.is-current[b-2zu3oag388] {
    color: var(--ad-ink);
    font-weight: var(--ad-weight-semibold);
}

.cp-mark[b-2zu3oag388] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 2px solid var(--ad-line);
    border-radius: 50%;
}

.cp-step.is-done .cp-mark[b-2zu3oag388] {
    border: none;
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.cp-step.is-done .cp-mark[b-2zu3oag388]  .mud-icon-root {
    font-size: 15px;
}

.cp-step.is-current .cp-mark[b-2zu3oag388] {
    border: 3px solid var(--ad-primary-tint);
    border-top-color: var(--ad-primary);
    animation: cp-spin-b-2zu3oag388 0.8s linear infinite;
}

.cp-label[b-2zu3oag388] {
    flex: 1;
}

.cp-detail[b-2zu3oag388] {
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.cp-bar-row[b-2zu3oag388] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cp-bar[b-2zu3oag388] {
    flex: 1;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--ad-line);
}

.cp-bar span[b-2zu3oag388] {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--ad-primary);
    transition: width 0.4s ease;
}

.cp-count[b-2zu3oag388] {
    color: var(--ad-muted);
    font-size: var(--ad-text-xs);
}

.cp-note[b-2zu3oag388] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ad-bg);
    color: var(--ad-ink);
    font-size: var(--ad-text-sm);
    line-height: 1.5;
}

@keyframes cp-spin-b-2zu3oag388 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cp-step.is-current .cp-mark[b-2zu3oag388] { animation-duration: 2.5s; }
    .cp-bar span[b-2zu3oag388] { transition: none; }
}
/* /Components/Shared/CampaignSteps.razor.rz.scp.css */
.cs-steps[b-k65bvvmnuk] {
    font-size: var(--ad-text-sm);
}

.cs-list[b-k65bvvmnuk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-step[b-k65bvvmnuk] {
    flex: none;
    color: var(--ad-muted);
}

.cs-step-inner[b-k65bvvmnuk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: var(--ad-weight-semibold);
}

a.cs-step-inner:hover span:last-child[b-k65bvvmnuk] {
    text-decoration: underline;
}

.cs-step.is-done[b-k65bvvmnuk] {
    color: var(--ad-ink);
}

.cs-step.is-current[b-k65bvvmnuk] {
    color: var(--ad-primary-strong);
    font-weight: var(--ad-weight-bold);
}

.cs-dot[b-k65bvvmnuk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 2px solid var(--ad-line);
    border-radius: 50%;
    font-size: var(--ad-text-xs);
    font-weight: var(--ad-weight-bold);
}

.cs-dot[b-k65bvvmnuk]  .mud-icon-root {
    font-size: 14px;
}

.cs-step.is-done .cs-dot[b-k65bvvmnuk] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.cs-step.is-current .cs-dot[b-k65bvvmnuk] {
    border-color: var(--ad-primary);
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.cs-line[b-k65bvvmnuk] {
    flex: 0 1 56px;
    min-width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--ad-line);
}

.cs-line.is-done[b-k65bvvmnuk] {
    background: var(--ad-primary);
}

.cs-phone[b-k65bvvmnuk] {
    display: none;
}

@media (max-width: 640px) {
    .cs-list[b-k65bvvmnuk] {
        display: none;
    }

    .cs-phone[b-k65bvvmnuk] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cs-phone-text[b-k65bvvmnuk] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        color: var(--ad-ink);
    }

    .cs-phone-text span[b-k65bvvmnuk] {
        color: var(--ad-muted);
    }

    .cs-phone-bars[b-k65bvvmnuk] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .cs-phone-bars span[b-k65bvvmnuk] {
        height: 4px;
        border-radius: 2px;
        background: var(--ad-line);
    }

    .cs-phone-bars span.is-on[b-k65bvvmnuk] {
        background: var(--ad-primary);
    }
}
/* /Components/Shared/CartDialog.razor.rz.scp.css */
/* Cart dialog on the shared palette: a scrolling list of screens, then four figures and the next step */

.cartdlg-title[b-pwc1et7dhp] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.cartdlg-title-icon[b-pwc1et7dhp] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary);
}

.cartdlg-title h2[b-pwc1et7dhp] {
    margin: 0;
    color: var(--ad-ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cartdlg-title p[b-pwc1et7dhp] {
    margin: 0;
    color: var(--ad-muted);
    font-size: 0.84rem;
}

.cartdlg[b-pwc1et7dhp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.cartdlg-list[b-pwc1et7dhp] {
    max-height: min(46vh, 420px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--ad-line);
    border-radius: 14px;
    list-style: none;
}

.cartdlg-list li[b-pwc1et7dhp] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ad-line-soft);
}

.cartdlg-list li:last-child[b-pwc1et7dhp] {
    border-bottom: 0;
}

.cartdlg-thumb[b-pwc1et7dhp] {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 56px;
    height: 42px;
    border-radius: 10px;
    background: var(--ad-surface-2);
    color: var(--ad-faint);
}

.cartdlg-thumb img[b-pwc1et7dhp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cartdlg-text[b-pwc1et7dhp],
.cartdlg-cost[b-pwc1et7dhp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.cartdlg-text b[b-pwc1et7dhp] {
    overflow: hidden;
    color: var(--ad-ink);
    font-size: 0.92rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartdlg-text span[b-pwc1et7dhp],
.cartdlg-cost span[b-pwc1et7dhp] {
    overflow: hidden;
    color: var(--ad-muted);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartdlg-cost[b-pwc1et7dhp] {
    align-items: flex-end;
    text-align: right;
}

.cartdlg-cost b[b-pwc1et7dhp] {
    color: var(--ad-ink);
    font-size: 0.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cartdlg-remove[b-pwc1et7dhp] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-muted);
    cursor: pointer;
}

.cartdlg-remove:hover[b-pwc1et7dhp] {
    border-color: var(--ad-bad);
    color: var(--ad-bad);
}

.cartdlg-sum[b-pwc1et7dhp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cartdlg-stat[b-pwc1et7dhp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-surface-2);
}

.cartdlg-stat span[b-pwc1et7dhp] {
    color: var(--ad-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cartdlg-stat b[b-pwc1et7dhp] {
    color: var(--ad-ink);
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cartdlg-stat.is-main[b-pwc1et7dhp] {
    border-color: color-mix(in srgb, var(--ad-primary) 30%, var(--ad-line));
    background: var(--ad-primary-tint);
}

.cartdlg-stat.is-main b[b-pwc1et7dhp] {
    color: var(--ad-primary-strong);
}

.cartdlg-note[b-pwc1et7dhp] {
    margin: 0;
    color: var(--ad-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.cartdlg-empty[b-pwc1et7dhp] {
    padding: 24px 8px;
    text-align: center;
}

.cartdlg-empty h3[b-pwc1et7dhp] {
    margin: 0 0 4px;
    color: var(--ad-ink);
    font-size: 1rem;
}

.cartdlg-empty p[b-pwc1et7dhp] {
    margin: 0;
    color: var(--ad-muted);
    font-size: 0.88rem;
}

.cartdlg-actions[b-pwc1et7dhp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 8px 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.cartdlg-spacer[b-pwc1et7dhp] {
    flex: 1;
}

.cartdlg-btn[b-pwc1et7dhp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.cartdlg-btn.is-danger[b-pwc1et7dhp] {
    padding-inline: 10px;
    color: var(--ad-bad);
}

.cartdlg-btn.is-ghost[b-pwc1et7dhp] {
    border-color: var(--ad-line);
    background: var(--ad-surface);
    color: var(--ad-ink);
}

.cartdlg-btn.is-primary[b-pwc1et7dhp] {
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.cartdlg-btn.is-primary:hover[b-pwc1et7dhp] {
    background: var(--ad-primary-strong);
}

.cartdlg-btn:focus-visible[b-pwc1et7dhp],
.cartdlg-remove:focus-visible[b-pwc1et7dhp] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .cartdlg-list li[b-pwc1et7dhp] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .cartdlg-cost[b-pwc1et7dhp] {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        text-align: left;
    }

    .cartdlg-cost b[b-pwc1et7dhp] {
        white-space: nowrap;
    }

    .cartdlg-cost span[b-pwc1et7dhp] {
        min-width: 0;
    }

    .cartdlg-remove[b-pwc1et7dhp] {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .cartdlg-thumb[b-pwc1et7dhp] {
        grid-row: 1 / span 2;
    }

    .cartdlg-sum[b-pwc1et7dhp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cartdlg-spacer[b-pwc1et7dhp] {
        display: none;
    }

    .cartdlg-btn.is-primary[b-pwc1et7dhp] {
        flex: 1 1 100%;
        order: -1;
    }

    .cartdlg-btn.is-ghost[b-pwc1et7dhp] {
        flex: 1;
    }
}
/* /Components/Shared/CreativePreviewDialog.razor.rz.scp.css */
/* ============================================
   CREATIVE PREVIEW DIALOG - SCOPED STYLES
   Uses design tokens for consistency
   ============================================ */

.preview-container[b-jga9p42ui2] {
    max-height: 70vh;
    overflow: auto;
}

.preview-media[b-jga9p42ui2] {
    width: 100%;
    max-height: 60vh;
    background: var(--color-bg-surface);
    border-radius: var(--border-radius-md);
}

.divider-spaced[b-jga9p42ui2] {
    margin: var(--space-md) 0;
}

.meta-row[b-jga9p42ui2] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.meta-badge[b-jga9p42ui2] {
    border-radius: var(--border-radius-md);
}
/* /Components/Shared/DeviceConfigEditorDialog.razor.rz.scp.css */
/* Device configuration dialog frame: colours come from the shared AdDesk palette (design-tokens.css). */
.dce-overlay[b-dt3bmgbwes] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Starts below the 64px app bar: the dialog stays under the app bar's layer so its own menus and dropdowns can open above it. */
    padding: 76px 20px 20px;
    background: rgba(27, 36, 52, 0.45);
}

.dce[b-dt3bmgbwes] {
    width: min(1040px, 96vw);
    height: min(calc(100vh - 96px), 880px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    box-shadow: 0 24px 60px rgba(21, 34, 58, 0.25);
    outline: none;
}

/* Header: title, device, APK health, close */
.dce-head[b-dt3bmgbwes] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--ad-line);
}

.dce-head-text[b-dt3bmgbwes] {
    flex: 1;
    min-width: 0;
}

.dce-head h2[b-dt3bmgbwes] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.dce-head p[b-dt3bmgbwes] {
    margin: 2px 0 0;
    color: var(--ad-muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dce-health[b-dt3bmgbwes] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ad-surface-2);
    color: var(--ad-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dce-health-dot[b-dt3bmgbwes] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ad-faint);
}

.dce-health.config-health-current[b-dt3bmgbwes] { background: var(--ad-good-tint); color: var(--ad-good); }
.dce-health.config-health-current .dce-health-dot[b-dt3bmgbwes] { background: var(--ad-good); }
.dce-health.config-health-delayed[b-dt3bmgbwes],
.dce-health.config-health-stale[b-dt3bmgbwes] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.dce-health.config-health-delayed .dce-health-dot[b-dt3bmgbwes],
.dce-health.config-health-stale .dce-health-dot[b-dt3bmgbwes] { background: var(--ad-orange); }
.dce-health.config-health-offline[b-dt3bmgbwes] { background: var(--ad-bad-tint); color: var(--ad-bad); }
.dce-health.config-health-offline .dce-health-dot[b-dt3bmgbwes] { background: var(--ad-bad); }

.dce-close[b-dt3bmgbwes] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ad-muted);
    cursor: pointer;
}

.dce-close:hover[b-dt3bmgbwes] {
    background: var(--ad-surface-2);
    color: var(--ad-ink);
}

/* One status line: where the values come from, plus draft / unsaved / validated */
.dce-status[b-dt3bmgbwes] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--ad-line);
    background: var(--ad-bg);
    font-size: 0.82rem;
}

.dce-source[b-dt3bmgbwes] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ad-muted);
}

.dce-chips[b-dt3bmgbwes] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dce-chip[b-dt3bmgbwes] {
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.dce-chip.is-draft[b-dt3bmgbwes] { background: var(--ad-primary-tint); color: var(--ad-primary-strong); }
.dce-chip.is-dirty[b-dt3bmgbwes] { background: var(--ad-orange-tint); color: var(--ad-warn); }
.dce-chip.is-ok[b-dt3bmgbwes]    { background: var(--ad-good-tint); color: var(--ad-good); }

.dce-meta[b-dt3bmgbwes] {
    color: var(--ad-faint);
    font-variant-numeric: tabular-nums;
}

.dce-body[b-dt3bmgbwes] {
    flex: 1;
    min-height: 220px;
    overflow-y: auto;
    padding: 16px 20px;
}

.dce-loading[b-dt3bmgbwes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 0;
    color: var(--ad-muted);
}

.dce-alert[b-dt3bmgbwes] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 0.85rem;
}

.dce-alert ul[b-dt3bmgbwes] {
    margin: 4px 0 0;
    padding-left: 18px;
}

.dce-alert--warn[b-dt3bmgbwes] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.dce-alert--bad[b-dt3bmgbwes]  { background: var(--ad-bad-tint);  color: var(--ad-bad); }

/* Review before publishing */
.dce-review h3[b-dt3bmgbwes] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
}

.dce-review p[b-dt3bmgbwes] {
    margin: 0 0 12px;
    color: var(--ad-muted);
}

.dce-review pre[b-dt3bmgbwes] {
    margin: 0;
    max-height: min(52vh, 460px);
    overflow: auto;
    padding: 14px 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-bg);
    font-family: var(--font-family-tech);
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ad-ink);
}

/* Footer: the destructive action on its own at the left, the main flow on the right */
.dce-foot[b-dt3bmgbwes] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--ad-line);
}

.dce-foot-main[b-dt3bmgbwes] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dce-btn[b-dt3bmgbwes] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dce-btn:hover:not(:disabled)[b-dt3bmgbwes] {
    border-color: var(--ad-faint);
}

.dce-btn--text[b-dt3bmgbwes] {
    border-color: transparent;
    background: none;
    color: var(--ad-primary-strong);
}

.dce-btn--text:hover:not(:disabled)[b-dt3bmgbwes] {
    border-color: transparent;
    background: var(--ad-primary-tint);
}

.dce-btn--primary[b-dt3bmgbwes] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.dce-btn--primary:hover:not(:disabled)[b-dt3bmgbwes] {
    border-color: var(--ad-primary-strong);
    background: var(--ad-primary-strong);
}

.dce-btn--danger-text[b-dt3bmgbwes] {
    border-color: transparent;
    background: none;
    color: var(--ad-bad);
    padding: 0 10px;
}

.dce-btn--danger-text:hover:not(:disabled)[b-dt3bmgbwes] {
    border-color: transparent;
    background: var(--ad-bad-tint);
}

.dce-btn:disabled[b-dt3bmgbwes] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dce-btn:focus-visible[b-dt3bmgbwes],
.dce-close:focus-visible[b-dt3bmgbwes] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .dce-overlay[b-dt3bmgbwes] {
        padding: 64px 0 0;
    }

    .dce[b-dt3bmgbwes] {
        width: 100vw;
        height: 100%;
        border-radius: 0;
    }

    .dce-head[b-dt3bmgbwes] {
        flex-wrap: wrap;
    }

    .dce-health[b-dt3bmgbwes] {
        order: 3;
    }

    .dce-foot[b-dt3bmgbwes],
    .dce-foot-main[b-dt3bmgbwes] {
        width: 100%;
    }

    .dce-foot-main .dce-btn[b-dt3bmgbwes] {
        flex: 1;
    }
}
/* /Components/Shared/DeviceConfigForm.razor.rz.scp.css */
/* Device Config Form Styles */
.config-form .card-header[b-mpcedu192g] {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.config-form .card-header:hover[b-mpcedu192g] {
    background: var(--color-bg-hover);
}

.form-control-color[b-mpcedu192g] {
    max-width: 60px;
}
/* /Components/Shared/DeviceManagementEditDlg.razor.rz.scp.css */
/* ============================================
   DEVICE MANAGEMENT EDIT DIALOG - SCOPED STYLES
   Automatically scoped by Blazor CSS isolation
   ============================================ */

/* Dialog content spacing */
[b-n3ppdn1bku] .mud-dialog-content {
    padding: var(--space-lg);
}

/* Grid item spacing */
[b-n3ppdn1bku] .mud-grid-item {
    padding: var(--space-sm);
}

/* Form field labels */
[b-n3ppdn1bku] .mud-input-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

/* Read-only fields styling */
[b-n3ppdn1bku] .mud-input-outlined.mud-readonly {
    background-color: var(--color-bg-hover);
}

[b-n3ppdn1bku] .mud-input-outlined.mud-readonly input {
    color: var(--color-text-muted);
}

/* Divider spacing */
[b-n3ppdn1bku] .mud-divider.my-2 {
    margin: var(--space-md) 0;
}

/* Dialog actions spacing */
[b-n3ppdn1bku] .mud-dialog-actions {
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-sm);
}

/* Switch label */
[b-n3ppdn1bku] .mud-switch-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Confirmation dialog icon */
[b-n3ppdn1bku] .d-flex.align-center.gap-2 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Dialog title */
[b-n3ppdn1bku] .mud-dialog-title h6 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
}

/* Button styling within dialog */
[b-n3ppdn1bku] .mud-button-text {
    color: var(--color-text-muted);
}

[b-n3ppdn1bku] .mud-button-text:hover {
    background-color: var(--color-bg-hover);
}

[b-n3ppdn1bku] .mud-button-filled-primary {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-button);
}

[b-n3ppdn1bku] .mud-button-filled-primary:hover {
    background-color: var(--color-primary-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Warning icon color in confirmation */
[b-n3ppdn1bku] .mud-icon-root.mud-warning {
    color: var(--color-warning);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [b-n3ppdn1bku] .mud-dialog-content {
        padding: var(--space-md);
    }
    
    [b-n3ppdn1bku] .mud-dialog-actions {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
    }
    
    [b-n3ppdn1bku] .mud-dialog-actions .mud-button-root {
        width: 100%;
    }
}

/* AdDesk network ads: the owner's answer as two options, with "not shown" spelled out */
.dme-ads[b-n3ppdn1bku] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 14px 16px;
    border: 1px solid var(--ad-line);
    border-radius: 12px;
    background: var(--ad-bg);
    color: var(--ad-ink);
}

.dme-ads-text[b-n3ppdn1bku] {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 2px;
}

.dme-ads-text b[b-n3ppdn1bku] {
    font-size: var(--ad-text-md);
    font-weight: var(--ad-weight-bold);
}

.dme-ads-text span[b-n3ppdn1bku] {
    color: var(--ad-muted);
    font-size: var(--ad-text-sm);
}

.dme-ads-text .dme-ads-note[b-n3ppdn1bku] {
    color: var(--ad-warn);
    font-size: var(--ad-text-xs);
}

.dme-ads-options[b-n3ppdn1bku] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dme-ads-option[b-n3ppdn1bku] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: var(--ad-text-sm);
    font-weight: var(--ad-weight-semibold);
    cursor: pointer;
}

.dme-ads-option:hover:not(:disabled)[b-n3ppdn1bku] {
    border-color: var(--ad-primary);
}

.dme-ads-option:focus-visible[b-n3ppdn1bku] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

.dme-ads-option.is-on[b-n3ppdn1bku] {
    border: 2px solid var(--ad-primary);
    padding: 0 13px;
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.dme-ads-option:disabled[b-n3ppdn1bku] {
    opacity: 0.6;
    cursor: not-allowed;
}

.dme-ads-radio[b-n3ppdn1bku] {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid var(--ad-faint);
    border-radius: 50%;
    background: var(--ad-surface);
}

.dme-ads-option.is-on .dme-ads-radio[b-n3ppdn1bku] {
    border: 5px solid var(--ad-primary);
}
/* /Components/Shared/DynamicDeviceConfigForm.razor.rz.scp.css */
/* Device configuration form: colours come from the shared AdDesk palette (design-tokens.css).
   Sections in a list on the left, one row per setting on the right; status only shows when a value differs from the template. */
.dcf[b-f2x3hlydrj] {
    font-size: 0.9rem;
    color: var(--ad-ink);
}

.dcf-layout[b-f2x3hlydrj] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Section list */
.dcf-nav[b-f2x3hlydrj] {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dcf-nav-item[b-f2x3hlydrj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--ad-muted);
    text-align: left;
    cursor: pointer;
}

.dcf-nav-item:hover[b-f2x3hlydrj] {
    background: var(--ad-surface-2);
    color: var(--ad-ink);
}

.dcf-nav-item[aria-current="true"][b-f2x3hlydrj] {
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
    box-shadow: inset 3px 0 0 var(--ad-primary);
}

.dcf-nav-n[b-f2x3hlydrj] {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ad-orange-tint);
    color: var(--ad-warn);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dcf-nav-select[b-f2x3hlydrj] {
    display: none;
}

.dcf-main[b-f2x3hlydrj] {
    min-width: 0;
}

/* Search and the Focus filter */
.dcf-tools[b-f2x3hlydrj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dcf-search[b-f2x3hlydrj] {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: var(--ad-surface);
    color: var(--ad-faint);
}

.dcf-search:focus-within[b-f2x3hlydrj] {
    border-color: var(--ad-primary);
}

.dcf-search input[b-f2x3hlydrj] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    color: var(--ad-ink);
}

.dcf-seg[b-f2x3hlydrj] {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ad-line);
    border-radius: 9px;
    background: var(--ad-surface);
}

.dcf-seg button[b-f2x3hlydrj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ad-muted);
    cursor: pointer;
}

.dcf-seg button[aria-pressed="true"][b-f2x3hlydrj] {
    background: var(--ad-primary-tint);
    color: var(--ad-primary-strong);
}

.dcf-seg-n[b-f2x3hlydrj] {
    font-size: 0.72rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.dcf-meta[b-f2x3hlydrj] {
    margin: 0 0 12px;
    color: var(--ad-muted);
    font-size: 0.82rem;
}

/* Fields */
.dcf-fields[b-f2x3hlydrj] {
    display: flex;
    flex-direction: column;
}

.dcf-row[b-f2x3hlydrj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1.1fr) 32px;
    align-items: center;
    gap: 6px 14px;
    padding: 9px 4px 9px 10px;
    border-top: 1px solid var(--ad-line-soft);
}

.dcf-fields > .dcf-row:first-child[b-f2x3hlydrj],
.dcf-fields > .dcf-group:first-child[b-f2x3hlydrj] {
    border-top: 0;
}

.dcf-row:hover[b-f2x3hlydrj] {
    background: color-mix(in srgb, var(--ad-surface-2) 50%, transparent);
}

/* A value that differs from the template gets a thin coloured edge, so it stands out when scanning */
.dcf-row.is-changed[b-f2x3hlydrj] { box-shadow: inset 3px 0 0 var(--ad-primary); }
.dcf-row.is-omitted[b-f2x3hlydrj] { box-shadow: inset 3px 0 0 var(--ad-orange); }
.dcf-row.is-stale[b-f2x3hlydrj]   { box-shadow: inset 3px 0 0 var(--ad-bad); }

.dcf-label[b-f2x3hlydrj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dcf-label-text[b-f2x3hlydrj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dcf-help[b-f2x3hlydrj] {
    color: var(--ad-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.dcf-tag[b-f2x3hlydrj] {
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dcf-tag.is-changed[b-f2x3hlydrj] { background: var(--ad-primary-tint); color: var(--ad-primary-strong); }
.dcf-tag.is-omitted[b-f2x3hlydrj] { background: var(--ad-orange-tint);  color: var(--ad-warn); }
.dcf-tag.is-stale[b-f2x3hlydrj]   { background: var(--ad-bad-tint);     color: var(--ad-bad); }

.dcf-control[b-f2x3hlydrj] {
    min-width: 0;
}

.dcf-control[b-f2x3hlydrj]  .mud-input-control {
    margin: 0;
}

.dcf-control[b-f2x3hlydrj]  .mud-input-outlined {
    background: var(--ad-surface);
    border-radius: 8px;
}

.dcf-control[b-f2x3hlydrj]  .mud-input-helper-text {
    margin-top: 2px;
}

.dcf-control[b-f2x3hlydrj]  .mud-switch {
    margin: 0;
}

/* Buttons inside inputs (colour picker, clear) shouldn't get the app bar's white-box icon style */
.dcf-control[b-f2x3hlydrj]  .mud-input-adornment .mud-icon-button {
    background: none;
    box-shadow: none;
    border: 0;
}

.dcf-raw[b-f2x3hlydrj] {
    font-size: 0.8rem;
    color: var(--ad-muted);
}

/* The app bar's global icon-button style (white box, shadow) must not reach these small row buttons */
.dcf[b-f2x3hlydrj]  .dcf-more .mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    color: var(--ad-faint);
}

.dcf[b-f2x3hlydrj]  .dcf-more .mud-icon-button:hover {
    background: var(--ad-surface-2);
    color: var(--ad-ink);
}

/* Nested sections */
.dcf-group[b-f2x3hlydrj] {
    border-top: 1px solid var(--ad-line-soft);
}

.dcf-group-head[b-f2x3hlydrj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 6px 4px;
}

.dcf-group-toggle[b-f2x3hlydrj] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    color: var(--ad-ink);
    text-align: left;
    cursor: pointer;
}

.dcf-group-toggle:hover[b-f2x3hlydrj] {
    background: var(--ad-surface-2);
}

.dcf-group-title[b-f2x3hlydrj] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
}

.dcf-group-help[b-f2x3hlydrj] {
    margin: -2px 0 6px 34px;
}

.dcf-group-body[b-f2x3hlydrj] {
    margin: 0 0 8px 14px;
    padding-left: 12px;
    border-left: 2px solid var(--ad-line);
}

/* A top-level section shown as the whole page: a heading, no indent */
.dcf-group--page[b-f2x3hlydrj] {
    border-top: 0;
}

.dcf-group--page > .dcf-group-head[b-f2x3hlydrj] {
    padding: 0 4px 8px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ad-line);
}

.dcf-group--page > .dcf-group-head .dcf-group-title[b-f2x3hlydrj] {
    flex: 1;
    font-size: 1.05rem;
}

.dcf-group--page > .dcf-group-body[b-f2x3hlydrj] {
    margin: 0;
    padding: 0;
    border: 0;
}

.dcf-omitted[b-f2x3hlydrj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px dashed var(--ad-line);
    border-radius: 10px;
    color: var(--ad-muted);
}

/* App update manifest helper */
.dcf-manifest[b-f2x3hlydrj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: var(--ad-bg);
}

.dcf-manifest-head[b-f2x3hlydrj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dcf-manifest-head span[b-f2x3hlydrj] {
    color: var(--ad-muted);
    font-size: 0.8rem;
}

.dcf-manifest-row[b-f2x3hlydrj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dcf-manifest-row[b-f2x3hlydrj]  .dcf-manifest-select {
    flex: 1 1 240px;
    margin: 0;
}

.dcf-manifest-more summary[b-f2x3hlydrj] {
    cursor: pointer;
    color: var(--ad-primary-strong);
    font-size: 0.82rem;
    font-weight: 600;
}

.dcf-manifest-more[open][b-f2x3hlydrj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dcf-alert[b-f2x3hlydrj] {
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
}

.dcf-alert--warn[b-f2x3hlydrj] { background: var(--ad-warn-tint); color: var(--ad-warn); }
.dcf-alert--bad[b-f2x3hlydrj]  { background: var(--ad-bad-tint);  color: var(--ad-bad); }

/* Small buttons inside the form */
.dcf-btn[b-f2x3hlydrj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ad-line);
    border-radius: 8px;
    background: var(--ad-surface);
    color: var(--ad-ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dcf-btn:hover:not(:disabled)[b-f2x3hlydrj] {
    border-color: var(--ad-faint);
}

.dcf-btn--primary[b-f2x3hlydrj] {
    border-color: var(--ad-primary);
    background: var(--ad-primary);
    color: var(--ad-on-primary);
}

.dcf-btn--primary:hover:not(:disabled)[b-f2x3hlydrj] {
    background: var(--ad-primary-strong);
}

.dcf-btn:disabled[b-f2x3hlydrj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dcf-nav-item:focus-visible[b-f2x3hlydrj],
.dcf-seg button:focus-visible[b-f2x3hlydrj],
.dcf-group-toggle:focus-visible[b-f2x3hlydrj],
.dcf-btn:focus-visible[b-f2x3hlydrj] {
    outline: 2px solid var(--ad-primary);
    outline-offset: 2px;
}

/* Narrow: sections become a dropdown, label sits above its control */
@media (max-width: 760px) {
    .dcf-layout[b-f2x3hlydrj] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .dcf-nav[b-f2x3hlydrj] {
        display: none;
    }

    .dcf-nav-select[b-f2x3hlydrj] {
        display: block;
    }

    .dcf-row[b-f2x3hlydrj] {
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .dcf-label[b-f2x3hlydrj] {
        grid-column: 1;
    }

    .dcf-control[b-f2x3hlydrj] {
        grid-column: 1;
        grid-row: 2;
    }

    .dcf-row[b-f2x3hlydrj] >  .dcf-more {
        grid-column: 2;
        grid-row: 1;
    }

    .dcf-group-body[b-f2x3hlydrj] {
        margin-left: 4px;
        padding-left: 8px;
    }
}
/* /Components/Shared/MDM/MdmMetricCard.razor.rz.scp.css */
.mdm-metric-card[b-bib8jgizh6] {
    border-radius: 14px;
    border-color: #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    min-height: 112px;
}

.mdm-metric-card-label[b-bib8jgizh6] {
    color: #64748b;
    display: block;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.mdm-metric-card-value[b-bib8jgizh6] {
    color: #0f172a;
    font-weight: 800;
}

.mdm-metric-card-helper[b-bib8jgizh6] {
    color: #94a3b8;
    display: block;
    margin-top: 6px;
}
/* /Components/Shared/MDM/MdmPageHeader.razor.rz.scp.css */
.mdm-page-header[b-iybhncd6rk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.mdm-page-header-back[b-iybhncd6rk] {
    margin-top: 1px;
}

.mdm-page-header-copy[b-iybhncd6rk] {
    min-width: 0;
}

.mdm-page-header-title[b-iybhncd6rk] {
    margin: 0;
    font-weight: 800;
    color: #0f172a;
}

.mdm-page-header-subtitle[b-iybhncd6rk] {
    color: #64748b;
    display: block;
    margin-top: 2px;
}
/* /Components/Shared/MDM/MdmStatusPill.razor.rz.scp.css */
.mdm-status-pill[b-oxzydbo3hv] {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0;
}
/* /Components/Shared/MDM/PlaybackDiagnosticsPanel.razor.rz.scp.css */
.diagnostics-timestamp-basis[b-w0zh9kpiu4] {
    display: block;
    margin-top: 3px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.diagnostics-creative-section[b-w0zh9kpiu4] {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.diagnostics-creative-section h3[b-w0zh9kpiu4] {
    font-size: 0.9375rem;
    margin: 0 0 12px;
}

.diagnostics-creative-item[b-w0zh9kpiu4] {
    padding: 12px 0;
    min-width: 0;
    font-size: 0.8125rem;
}

.diagnostics-creative-head[b-w0zh9kpiu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.diagnostics-creative-preview[b-w0zh9kpiu4] {
    display: block;
    width: min(100%, 560px);
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    margin-top: 12px;
}

.playback-diagnostics-panel[b-w0zh9kpiu4]  .diagnostics-window-select {
    width: 200px;
    max-width: 100%;
    flex: 0 0 200px;
}

.diagnostics-summary[b-w0zh9kpiu4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.diagnostics-summary span[b-w0zh9kpiu4],
.diagnostics-summary strong[b-w0zh9kpiu4] {
    display: block;
}

.diagnostics-summary span[b-w0zh9kpiu4] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.diagnostics-summary strong[b-w0zh9kpiu4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.diagnostics-results-toolbar[b-w0zh9kpiu4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
    align-items: center;
    gap: 16px;
    padding: 12px 0;
}

.diagnostics-evidence[b-w0zh9kpiu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.8125rem;
}

.diagnostics-evidence strong[b-w0zh9kpiu4] {
    margin-right: 4px;
}

.diagnostics-details[b-w0zh9kpiu4] {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.diagnostics-details summary[b-w0zh9kpiu4] {
    cursor: pointer;
    padding: 4px 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.diagnostics-details[open] summary[b-w0zh9kpiu4] {
    margin-bottom: 8px;
}

.playback-diagnostics-panel[b-w0zh9kpiu4]  code,
.playback-diagnostics-panel[b-w0zh9kpiu4]  time,
.playback-diagnostics-panel[b-w0zh9kpiu4]  .mud-td {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .diagnostics-results-toolbar[b-w0zh9kpiu4] {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}

.diagnostics-coverage[b-w0zh9kpiu4] {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
}

.diagnostics-coverage strong[b-w0zh9kpiu4] {
    color: var(--mud-palette-text-primary);
}

.diagnostics-supply[b-w0zh9kpiu4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 16px;
    font-size: 0.875rem;
}

.playback-diagnostics-panel[b-w0zh9kpiu4]  .diagnostics-expanded-cell {
    padding: 0;
    white-space: normal;
    background: var(--mud-palette-background-grey);
}

.diagnostics-selected[b-w0zh9kpiu4] {
    min-width: 0;
    text-align: left;
}

.diagnostics-metadata-columns[b-w0zh9kpiu4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    margin-top: 12px;
}

.diagnostics-metadata-section[b-w0zh9kpiu4] {
    min-width: 0;
    padding-top: 12px;
    border-top: 2px solid var(--mud-palette-lines-default);
}

.diagnostics-metadata-section h3[b-w0zh9kpiu4],
.diagnostics-timeline-heading h3[b-w0zh9kpiu4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.diagnostics-metadata-list[b-w0zh9kpiu4] {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
    font-size: 0.8125rem;
}

.diagnostics-metadata-list dt[b-w0zh9kpiu4] {
    color: var(--mud-palette-text-secondary);
}

.diagnostics-metadata-list dd[b-w0zh9kpiu4] {
    margin: 0;
    overflow-wrap: anywhere;
}

.diagnostics-metadata-note[b-w0zh9kpiu4],
.diagnostics-identifiers[b-w0zh9kpiu4] {
    margin-top: 10px;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.diagnostics-identifiers summary[b-w0zh9kpiu4] {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.diagnostics-identifiers[open] summary[b-w0zh9kpiu4] {
    margin-bottom: 8px;
}

.diagnostics-server-error[b-w0zh9kpiu4] {
    display: grid;
    gap: 4px;
    padding: 8px 0;
    margin-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.diagnostics-server-error strong[b-w0zh9kpiu4] {
    color: var(--mud-palette-warning-darken);
}

.diagnostics-timeline-heading[b-w0zh9kpiu4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

.diagnostics-timeline-heading > span[b-w0zh9kpiu4],
.diagnostics-timeline-heading h3 span[b-w0zh9kpiu4] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.diagnostics-timeline[b-w0zh9kpiu4] {
    padding: 0;
    margin: 0;
    list-style: none;
}

.diagnostics-timeline-step[b-w0zh9kpiu4] {
    --event-color: var(--mud-palette-text-secondary);
    display: grid;
    grid-template-columns: 190px 32px minmax(0, 1fr);
    column-gap: 12px;
    min-height: 72px;
}

.diagnostics-timeline-step[data-tone="info"][b-w0zh9kpiu4] { --event-color: var(--mud-palette-info); }
.diagnostics-timeline-step[data-tone="success"][b-w0zh9kpiu4] { --event-color: var(--mud-palette-success); }
.diagnostics-timeline-step[data-tone="error"][b-w0zh9kpiu4] { --event-color: var(--mud-palette-error); }
.diagnostics-timeline-step[data-tone="callback"][b-w0zh9kpiu4] { --event-color: #0f766e; }

.diagnostics-timeline-time[b-w0zh9kpiu4] {
    padding-top: 4px;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.diagnostics-timeline-time time[b-w0zh9kpiu4],
.diagnostics-timeline-delta[b-w0zh9kpiu4] {
    display: block;
}

.diagnostics-timeline-delta[b-w0zh9kpiu4] {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
}

.diagnostics-timeline-marker[b-w0zh9kpiu4] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    color: var(--event-color);
}

.diagnostics-timeline-marker[b-w0zh9kpiu4]::after {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-lines-default);
}

.diagnostics-timeline-step:last-child .diagnostics-timeline-marker[b-w0zh9kpiu4]::after {
    display: none;
}

.diagnostics-timeline-marker[b-w0zh9kpiu4]  .mud-icon-root {
    width: 30px;
    height: 30px;
    padding: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--mud-palette-surface);
}

.diagnostics-timeline-content[b-w0zh9kpiu4] {
    min-width: 0;
    padding: 4px 0 16px;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.diagnostics-timeline-content > strong[b-w0zh9kpiu4] {
    display: block;
    color: var(--event-color);
    margin-bottom: 4px;
}

@media (max-width: 760px) {
    .diagnostics-metadata-columns[b-w0zh9kpiu4] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .diagnostics-timeline-step[b-w0zh9kpiu4] {
        grid-template-columns: 105px 28px minmax(0, 1fr);
        column-gap: 8px;
    }

    .diagnostics-metadata-list[b-w0zh9kpiu4] {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 6px 8px;
    }

    .diagnostics-timeline-heading[b-w0zh9kpiu4] {
        flex-wrap: wrap;
        gap: 0;
    }
}
/* /Components/Shared/PartnerWaitlist/RiskChip.razor.rz.scp.css */
.pw-risk[b-4ucn4pnfuy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ad-ink);
}

.pw-risk i[b-4ucn4pnfuy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pw-risk b[b-4ucn4pnfuy] {
    color: var(--ad-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pw-risk.is-low i[b-4ucn4pnfuy]    { background: var(--ad-good); }
.pw-risk.is-medium i[b-4ucn4pnfuy] { background: var(--ad-orange); }
.pw-risk.is-high i[b-4ucn4pnfuy]   { background: var(--ad-bad); }
.pw-risk.is-high[b-4ucn4pnfuy]     { color: var(--ad-bad); }
/* /Components/Shared/PartnerWaitlist/SpotCard.razor.rz.scp.css */
.spot-hardware-label[b-kw0x7x9mtr] {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.spot-hardware-options[b-kw0x7x9mtr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.spot-hardware-option[b-kw0x7x9mtr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    text-align: left;
    color: inherit;
    font: inherit;
    background: #ffffff;
    border: 1.5px solid #c9ddec;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.spot-hardware-option:hover[b-kw0x7x9mtr] {
    border-color: #2484d1;
}

.spot-hardware-option:focus-visible[b-kw0x7x9mtr] {
    outline: 3px solid #2484d140;
    outline-offset: 2px;
}

.spot-hardware-option.is-selected[b-kw0x7x9mtr] {
    background: #eaf5fe;
    border-color: #2484d1;
    box-shadow: inset 0 0 0 1px #2484d1;
}

.spot-hardware-option[b-kw0x7x9mtr]  .spot-hardware-icon {
    color: #2484d1;
    font-size: 28px;
}

.spot-hardware-title[b-kw0x7x9mtr] {
    font-size: 15px;
    font-weight: 600;
}

.spot-hardware-caption[b-kw0x7x9mtr] {
    color: #46566b;
    font-size: 13px;
    line-height: 1.4;
}

.spot-hardware-error[b-kw0x7x9mtr] {
    margin-top: 6px;
    color: var(--mud-palette-error);
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .spot-hardware-option[b-kw0x7x9mtr] { transition: none; }
}
/* /Components/Shared/PartnerWaitlist/StatusChip.razor.rz.scp.css */
.pw-status[b-r7isqopgzf] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pw-status.is-waiting[b-r7isqopgzf]  { background: var(--ad-surface-2);    color: var(--ad-muted); }
.pw-status.is-approved[b-r7isqopgzf] { background: var(--ad-primary-tint); color: var(--ad-primary-strong); }
.pw-status.is-shipped[b-r7isqopgzf]  { background: var(--ad-orange-tint);  color: var(--ad-warn); }
.pw-status.is-done[b-r7isqopgzf]     { background: var(--ad-good-tint);    color: var(--ad-good); }
.pw-status.is-rejected[b-r7isqopgzf] { background: var(--ad-bad-tint);     color: var(--ad-bad); }