/* /Components/Layout/DashboardSidebar.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   SecureIQ dashboard — sidebar (interactive island)
   Design tokens are inherited from .shell (DashboardLayout).
   ════════════════════════════════════════════════════════════════ */

.sidebar[b-8472zf39e6] {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 248px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* No horizontal padding — children own their horizontal spacing */
    padding: 24px 0 20px;
    background: var(--bg-side);
    border-right: 1px solid var(--line);
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar--collapsed[b-8472zf39e6] { width: 64px; }

/* ─── Brand block: evalian on top, customer logo + toggle below ── */

.brand[b-8472zf39e6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px 22px;
    gap: 14px;
}

/* evalian logo, centred. Expanded shows the full lockup; collapsing shrinks the
   row width so the wordmark clips off the left and only the cube (pinned right)
   remains. Row height is fixed, so nothing below shifts. */
.brand-inner[b-8472zf39e6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    width: 162px;
    height: 26px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar--collapsed .brand-inner[b-8472zf39e6] { width: 30px; }

/* Bottom row: customer logo + toggle. The toggle stays in flow, so the row keeps
   its height when the logo folds — the nav below never jumps on collapse. */
.brand-bottom[b-8472zf39e6] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
}

.customer-logo[b-8472zf39e6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    transition: opacity 0.18s ease, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.customer-logo img[b-8472zf39e6] {
    display: block;
    height: 26px;
    width: auto;
    max-width: 100%;
}

/* Collapsed rail is too narrow for the wordmark — fold its width away (the toggle
   holds the row height, so nothing below shifts) */
.sidebar--collapsed .customer-logo[b-8472zf39e6] {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

/* Toggle pinned to the right of the row; the customer logo stays centred. As the
   sidebar narrows, right:0 glides the toggle left smoothly (no jump). */
.brand-bottom > .sidebar-toggle[b-8472zf39e6] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* pinned to the right of .brand-inner, so shrinking the row reveals the cube */
.brand-logo[b-8472zf39e6] {
    display: block;
    height: 26px;
    width: auto;
    flex: none;
}

/* ─── Collapse toggle ──────────────────────────────────────────── */

.sidebar-toggle[b-8472zf39e6] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sidebar-toggle:hover[b-8472zf39e6] {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-toggle[b-8472zf39e6]  svg {
    width: 15px;
    height: 15px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar--collapsed .sidebar-toggle[b-8472zf39e6]  svg { transform: rotate(180deg); }

/* ─── Navigation ───────────────────────────────────────────────── */

.nav[b-8472zf39e6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav[b-8472zf39e6]::-webkit-scrollbar { width: 4px; }
.nav[b-8472zf39e6]::-webkit-scrollbar-track { background: transparent; }
.nav[b-8472zf39e6]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.nav[b-8472zf39e6]::-webkit-scrollbar-thumb:hover { background: var(--faint); }

.nav-spacer[b-8472zf39e6] { flex: 1; }

.nav-link[b-8472zf39e6] {
    display: flex;
    align-items: center;
    gap: 11px;
    /* 12px left = icon at ~21.5px from sidebar left (expanded)
       22px left = icon at ~31.5px from sidebar left (collapsed, centred in 64px) */
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    /* several nav-links are controls (role="button") with no href, so set the pointer explicitly
       rather than relying on the anchor default */
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: color 0.18s ease, background 0.18s ease,
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover[b-8472zf39e6] { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.sidebar:not(.sidebar--collapsed) .nav-link:hover[b-8472zf39e6] { transform: translateX(2px); }

.nav-link.active[b-8472zf39e6] {
    color: var(--text);
    background: var(--surface-2);
    box-shadow: inset 2px 0 0 0 var(--accent);
}
.nav-link.active:hover[b-8472zf39e6] { color: var(--text); background: var(--surface-2); }
.nav-link.active .nav-icon[b-8472zf39e6] { color: var(--accent); }

/* Collapsed: widen left padding to centre icon, drop gap so text is fully clipped */
.sidebar--collapsed .nav-link[b-8472zf39e6] { padding: 9px 22px; gap: 0; }

.nav-icon[b-8472zf39e6] {
    width: 19px;
    height: 19px;
    flex: none;
    display: grid;
    place-items: center;
}

.nav-icon[b-8472zf39e6]  svg { width: 19px; height: 19px; }

/* Nav text: opacity only — overflow:hidden on .sidebar clips it during width transition */
.nav-text[b-8472zf39e6] {
    white-space: nowrap;
    /* Expanding: fade in after sidebar wide enough */
    transition: opacity 0.2s ease 0.18s;
}

.sidebar--collapsed .nav-text[b-8472zf39e6] {
    opacity: 0;
    pointer-events: none;
    /* Collapsing: disappear instantly */
    transition: opacity 0.06s ease;
}

/* Tooltip on collapsed icons */
.sidebar--collapsed .nav-link[b-8472zf39e6]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--surface-2);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    z-index: 300;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sidebar--collapsed .nav-link:hover[b-8472zf39e6]::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ─── Nav group (parent item + collapsible sub-menu) ──────────── */

.nav-group[b-8472zf39e6] { display: flex; flex-direction: column; }

.nav-chevron[b-8472zf39e6] {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.4;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease 0.18s;
}

.nav-chevron[b-8472zf39e6]  svg { width: 14px; height: 14px; }

.nav-chevron.open[b-8472zf39e6] { transform: rotate(180deg); }

.sidebar--collapsed .nav-chevron[b-8472zf39e6] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.06s ease;
}

.nav-sub[b-8472zf39e6] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-sub.open[b-8472zf39e6] { max-height: 320px; }

.sidebar--collapsed .nav-sub.open[b-8472zf39e6] { max-height: 0; }

.nav-sub-link[b-8472zf39e6] {
    display: block;
    /* indent aligns text with parent label: 12px padding + 19px icon + 11px gap = 42px */
    padding: 5px 12px 5px 42px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.8;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.nav-sub-link:hover[b-8472zf39e6] { background: rgba(255, 255, 255, 0.07); color: var(--text); opacity: 1; }

.nav-sub-link.active[b-8472zf39e6] {
    color: var(--accent-2);
    background: var(--accent-soft);
    opacity: 1;
}

/* ─── Sidebar footer ───────────────────────────────────────────── */

.sidebar-footer[b-8472zf39e6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.user-chip[b-8472zf39e6] {
    display: flex;
    align-items: center;
    gap: 11px;
    /* 12px matches nav-link, 15px centres avatar (34px) in 64px when collapsed */
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s ease;
}

.sidebar--collapsed .user-chip[b-8472zf39e6] { padding: 10px 15px; gap: 0; }

.avatar[b-8472zf39e6] {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #04201D;
    background: linear-gradient(140deg, #5EEAD9, #14B8A6);
}

.user-meta[b-8472zf39e6] {
    display: grid;
    line-height: 1.3;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease 0.2s;
}

.sidebar--collapsed .user-meta[b-8472zf39e6] {
    opacity: 0;
    transition: opacity 0.06s ease;
}

.user-meta strong[b-8472zf39e6] { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.user-meta span[b-8472zf39e6] { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }

.nav-link.subtle[b-8472zf39e6] { font-size: 13px; padding: 8px 12px; }
.sidebar--collapsed .nav-link.subtle[b-8472zf39e6] { padding: 8px 22px; }

/* ─── Staff-only Admin console button (faintly outlined, pinned low) ── */

.admin-cta[b-8472zf39e6] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 12px 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    position: relative;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease,
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-cta:hover[b-8472zf39e6] { color: var(--text); border-color: var(--accent-line); background: rgba(255, 255, 255, 0.05); }

.admin-cta.active[b-8472zf39e6] {
    color: var(--text);
    border-color: var(--accent-line);
    background: var(--surface-2);
}
.admin-cta.active .nav-icon[b-8472zf39e6] { color: var(--accent); }

/* Collapsed rail: centre the icon, drop the label + margins */
.sidebar--collapsed .admin-cta[b-8472zf39e6] { margin: 0 8px 12px; padding: 10px 0; gap: 0; justify-content: center; }

/* Tooltip on the collapsed Admin button (mirrors the nav-link tooltip) */
.sidebar--collapsed .admin-cta[b-8472zf39e6]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--surface-2);
    color: var(--text);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    z-index: 300;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar--collapsed .admin-cta:hover[b-8472zf39e6]::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ─── Clickable profile chip + photo ──────────────────────────── */

.user-chip[b-8472zf39e6] { text-decoration: none; cursor: pointer; }
.user-chip:hover[b-8472zf39e6] { border-color: var(--accent-line); background: var(--surface-2); }

.avatar img[b-8472zf39e6] {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ─── Responsive: collapse to a top bar ───────────────────────── */

@media (max-width: 900px) {
    .sidebar[b-8472zf39e6] {
        position: static;
        width: 100% !important;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
        transition: none;
    }
    .sidebar-deco[b-8472zf39e6] { display: none; }
    .brand-bottom[b-8472zf39e6] { display: none; }
    .brand[b-8472zf39e6] { flex-direction: row !important; align-items: center !important; padding: 0 8px 0 0 !important; gap: 8px; }
    .brand-inner[b-8472zf39e6] { overflow: visible; gap: 8px !important; transform: none !important; }
    .brand-name[b-8472zf39e6] { opacity: 1 !important; transition: none; }
    .sidebar-toggle[b-8472zf39e6] { display: none; }
    .nav[b-8472zf39e6] { flex-direction: row; flex: none; overflow: visible; }
    .nav-spacer[b-8472zf39e6] { display: none; }
    .nav-group[b-8472zf39e6] { flex-direction: row; }
    .nav-chevron[b-8472zf39e6] { display: none; }
    .nav-sub[b-8472zf39e6] { display: none; }
    .nav-link[b-8472zf39e6] { padding: 8px 10px !important; gap: 0 !important; }
    .nav-text[b-8472zf39e6] { display: none; }
    .admin-cta[b-8472zf39e6] { margin: 0 6px 0 0 !important; padding: 8px 10px !important; gap: 0 !important; }
    .sidebar-footer[b-8472zf39e6] { margin-left: auto; flex-direction: row; border-top: 0; padding-top: 0; }
    .user-meta[b-8472zf39e6] { display: none !important; }
    .user-chip[b-8472zf39e6] { padding: 8px 10px !important; gap: 0 !important; }
}
/* /Components/Layout/ImpersonationBanner.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Cross-tenant "viewing as" / impersonation banner.
   Full-width teal/green bar pinned to the top of the app so it is
   unmistakable that the current session is not the admin's own.
   Colours are hard-coded here so the banner does not depend on the
   .shell token scope (it renders above the shell).
   ════════════════════════════════════════════════════════════════ */

.imp-banner[b-r7p8l4bo7h] {
    /* Sits above the customer setup gate (z-index 800) so an admin testing the gate
       via impersonation can always reach the Exit button. */
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(45, 212, 191, 0.14);
    border-bottom: 1px solid rgba(45, 212, 191, 0.42);
    color: #EAEEEF;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.3;
}

.imp-dot[b-r7p8l4bo7h] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2DD4BF;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
}

.imp-text[b-r7p8l4bo7h] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.imp-text strong[b-r7p8l4bo7h] { color: #5EEAD9; font-weight: 700; }
.imp-sub[b-r7p8l4bo7h] { color: #8A9296; font-size: 12px; }

.imp-exit[b-r7p8l4bo7h] {
    margin-left: auto;
    flex: none;
    padding: 6px 14px;
    border: 1px solid rgba(45, 212, 191, 0.42);
    border-radius: 0;
    background: transparent;
    color: #2DD4BF;
    font: 600 12.5px "Inter", "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.imp-exit:hover[b-r7p8l4bo7h] {
    background: #2DD4BF;
    color: #0E1011;
}

.imp-exit:focus-visible[b-r7p8l4bo7h] {
    outline: 2px solid #2DD4BF;
    outline-offset: 2px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-vz7096s1l5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-vz7096s1l5] {
    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-vz7096s1l5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-q19jq43con] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-q19jq43con] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

.bi[b-q19jq43con] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-q19jq43con] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-q19jq43con] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-q19jq43con] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

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

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

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

    .nav-item[b-q19jq43con]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

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

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

.nav-scrollable[b-q19jq43con] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-q19jq43con] {
    display: block;
}

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

    .nav-scrollable[b-q19jq43con] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-h0aav78qbn],
.components-reconnect-repeated-attempt-visible[b-h0aav78qbn],
.components-reconnect-failed-visible[b-h0aav78qbn],
.components-pause-visible[b-h0aav78qbn],
.components-resume-failed-visible[b-h0aav78qbn],
.components-rejoining-animation[b-h0aav78qbn] {
    display: none;
}

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


#components-reconnect-modal[b-h0aav78qbn] {
    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-h0aav78qbn 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-h0aav78qbn {
    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/ThreatMap.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Live threat map — dotted world, dark/teal, square. Tokens from .shell.
   ════════════════════════════════════════════════════════════════ */

.tm[b-vl91muolxn] {
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

/* ─── Header bar ──────────────────────────────────────────────── */

.tm-bar[b-vl91muolxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
}

.tm-title[b-vl91muolxn] { display: flex; align-items: center; gap: 10px; }
.tm-title h2[b-vl91muolxn] { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.tm-sub[b-vl91muolxn] { font-size: 12.5px; color: var(--faint); }

.tm-live[b-vl91muolxn] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.5);
    animation: tm-pulse-b-vl91muolxn 2s ease-out infinite;
}
@keyframes tm-pulse-b-vl91muolxn {
    0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(45, 212, 191, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}
.tm-legend[b-vl91muolxn] { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.tm-legend span[b-vl91muolxn] { display: inline-flex; align-items: center; gap: 6px; }
.tm-legend .tm-legdot[b-vl91muolxn] { width: 9px; height: 9px; display: inline-block; }

/* ─── Map stage ───────────────────────────────────────────────── */

.tm-stage[b-vl91muolxn] {
    position: relative;
    height: 470px;
    overflow: hidden;
    background:
        radial-gradient(720px 360px at 50% 35%, rgba(45, 212, 191, 0.022), transparent 65%),
        var(--bg);
}

.tm-map[b-vl91muolxn] { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.tm-map.tm-grabbing[b-vl91muolxn] { cursor: grabbing; }
.tm-pan[b-vl91muolxn] { will-change: transform; }

/* real continents */
.tm-land[b-vl91muolxn] {
    fill: var(--map-land);
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 0.4;
    stroke-linejoin: round;
}

/* country borders — thin, subtle lines over the land */
.tm-borders[b-vl91muolxn] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 0.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* glow + on-map label for the selected origin */
.tm-selglow[b-vl91muolxn] { pointer-events: none; }
.tm-maplabel[b-vl91muolxn] { pointer-events: none; }
.tm-maplabel line[b-vl91muolxn] { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.tm-maplabel text[b-vl91muolxn] {
    fill: var(--text);
    font: 600 11px var(--font-body);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* live blocked-traffic events — pop in, pulse, fade out over their lifespan */
.tm-evt[b-vl91muolxn] {
    cursor: pointer;
    animation-name: tm-life-b-vl91muolxn;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
.tm-evt .core[b-vl91muolxn] { transition: r .15s ease; } /* fill set inline, per source */

/* fill-box anchors the scale to the ripple's own centre (not the SVG viewport),
   so rings expand in place instead of flying across the map */
.tm-evt .ripple[b-vl91muolxn] {
    fill: none; stroke-width: 1.4; /* stroke set inline, per source */
    transform-box: fill-box;
    transform-origin: center;
    animation: tm-ring-b-vl91muolxn 2.4s ease-out infinite;
}

.tm-evt:hover .core[b-vl91muolxn] { r: 5.5; }
.tm-evt:focus[b-vl91muolxn] { outline: none; }
.tm-evt:focus .core[b-vl91muolxn] { r: 5.5; stroke: #fff; stroke-width: 1.5; }

/* pinned while inspected — hold steady */
.tm-evt.is-active[b-vl91muolxn] {
    animation: none;
    opacity: 1;
}
.tm-evt.is-active .core[b-vl91muolxn] { r: 6; stroke: #fff; stroke-width: 2; }

/* whole-event lifecycle: fade/scale in, hold, fade out (duration set inline) */
@keyframes tm-life-b-vl91muolxn {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes tm-ring-b-vl91muolxn {
    0%   { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* ─── Zoom controls ───────────────────────────────────────────── */

.tm-zoomctl[b-vl91muolxn] {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: rgba(14, 16, 17, 0.7);
    backdrop-filter: blur(4px);
}
.tm-zoomctl button[b-vl91muolxn] {
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.tm-zoomctl button:first-child[b-vl91muolxn] { border-bottom: 1px solid var(--line); }
.tm-zoomctl button:hover[b-vl91muolxn] { color: var(--accent); background: rgba(45, 212, 191, 0.08); }

/* ─── Detail panel ────────────────────────────────────────────── */

.tm-detail[b-vl91muolxn] {
    position: absolute;
    top: 0; right: 0;
    width: 300px; max-width: 80%; height: 100%;
    padding: 22px 22px 24px;
    background: rgba(12, 14, 15, 0.9);
    backdrop-filter: blur(8px);
    border-left: 1px solid var(--accent-line);
    box-shadow: -20px 0 40px -20px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease;
    overflow-y: auto;
}
.tm--detail-open .tm-detail[b-vl91muolxn] { transform: translateX(0); opacity: 1; pointer-events: auto; }

.tm-close[b-vl91muolxn] {
    position: absolute; top: 12px; right: 14px;
    width: 26px; height: 26px;
    border: 1px solid var(--line);
    background: transparent; color: var(--muted);
    font-size: 18px; line-height: 1; cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.tm-close:hover[b-vl91muolxn] { color: var(--text); border-color: var(--accent-line); }

.tm-eyebrow[b-vl91muolxn] {
    margin: 0 0 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
}
.tm-ip[b-vl91muolxn] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.tm-country[b-vl91muolxn] { margin: 4px 0 16px; color: var(--muted); font-size: 13px; }

.tm-inc[b-vl91muolxn] {
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
    border-bottom: 1px dashed var(--accent-line);
}
.tm-noinc[b-vl91muolxn] { color: var(--faint); font-weight: 500; }

.tm-cat[b-vl91muolxn] { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }

/* source pill — colour set inline to match the map dot */
.tm-srcpill[b-vl91muolxn] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid currentColor;
    background: transparent;
}

.tm-spark[b-vl91muolxn] { width: 100%; height: 56px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.tm-spark polyline[b-vl91muolxn] {
    fill: none; stroke: var(--accent); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}

.tm-stats[b-vl91muolxn] { margin: 0 0 20px; display: grid; gap: 12px; }
.tm-stats div[b-vl91muolxn] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tm-stats dt[b-vl91muolxn] { margin: 0; font-size: 12.5px; color: var(--faint); }
.tm-stats dd[b-vl91muolxn] { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }

.tm-action[b-vl91muolxn] {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft); color: var(--accent);
    font: 600 13px var(--font-body); cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.tm-action:hover[b-vl91muolxn] { background: var(--accent); color: #04201D; }

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 760px) {
    .tm-stage[b-vl91muolxn] { height: 360px; }
    .tm-detail[b-vl91muolxn] { width: 100%; max-width: 100%; }
    .tm-legend[b-vl91muolxn] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-live[b-vl91muolxn], .tm-evt .ripple[b-vl91muolxn], .tm-evt[b-vl91muolxn] { animation: none !important; }
}
/* /Components/SetupPrompt.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Customer setup gate — full-viewport overlay shown until both the
   Defender consent and the Sentinel/Lighthouse delegation are live.
   Renders above (outside) .shell, so the palette is declared locally
   here to match the dashboard tokens (same as ImpersonationBanner).
   ════════════════════════════════════════════════════════════════ */

.setup-gate[b-o8axy9pki8] {
    --bg:        #131517;
    --surface:   #1A1D1F;
    --surface-2: #23272A;
    --line:      rgba(255, 255, 255, 0.09);
    --line-soft: rgba(255, 255, 255, 0.05);
    --text:      #EAEEEF;
    --muted:     #8A9296;
    --faint:     #5C6468;
    --accent:    #2DD4BF;
    --accent-2:  #5EEAD9;
    --accent-line: rgba(45, 212, 191, 0.42);
    --accent-soft: rgba(45, 212, 191, 0.14);
    --azure:     #0A84FF;

    position: fixed;
    inset: 0;
    z-index: 800;             /* below the impersonation banner (1000) so admins can exit */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
    background:
        radial-gradient(1100px 520px at 85% -12%, rgba(45, 212, 191, 0.08), transparent 60%),
        var(--bg);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    animation: gate-in-b-o8axy9pki8 .25s ease;
}

@keyframes gate-in-b-o8axy9pki8 { from { opacity: 0; } to { opacity: 1; } }

.setup-card[b-o8axy9pki8] {
    width: min(680px, 100%);
    margin: auto;
    padding: 34px 36px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
    animation: card-in-b-o8axy9pki8 .35s ease both;
}

@keyframes card-in-b-o8axy9pki8 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.setup-brand[b-o8axy9pki8] { height: 26px; width: auto; margin-bottom: 24px; }

.setup-eyebrow[b-o8axy9pki8] {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.setup-title[b-o8axy9pki8] {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.setup-intro[b-o8axy9pki8] {
    margin: 0 0 26px;
    max-width: 54ch;
    color: var(--muted);
}

/* ─── Steps ───────────────────────────────────────────────────── */

.setup-steps[b-o8axy9pki8] { display: flex; flex-direction: column; gap: 14px; }

.setup-step[b-o8axy9pki8] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    transition: border-color .2s ease, background .2s ease;
}

.setup-step.is-connected[b-o8axy9pki8] {
    border-color: var(--accent-line);
    background: linear-gradient(0deg, var(--accent-soft), transparent), var(--bg);
}

.setup-step-icon[b-o8axy9pki8] {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}
.setup-step-icon svg[b-o8axy9pki8] { width: 22px; height: 22px; }

.setup-step-body[b-o8axy9pki8] { flex: 1; min-width: 0; }

.setup-step-top[b-o8axy9pki8] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.setup-step-top h2[b-o8axy9pki8] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}
.setup-step-body p[b-o8axy9pki8] {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
}

.setup-step-note[b-o8axy9pki8] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-2);
}

/* ─── Status pill ─────────────────────────────────────────────── */

.setup-pill[b-o8axy9pki8] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--faint);
    border: 1px solid var(--line);
    background: var(--surface-2);
}
.setup-pill-dot[b-o8axy9pki8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--faint);
}
.setup-pill.is-good[b-o8axy9pki8] { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-soft); }
.setup-pill.is-good .setup-pill-dot[b-o8axy9pki8] {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22);
}

/* ─── Action buttons ──────────────────────────────────────────── */

.setup-btn[b-o8axy9pki8] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font: 600 13px "Inter", "Segoe UI", system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
}
.setup-btn svg[b-o8axy9pki8] { width: 15px; height: 15px; }
.setup-btn:hover[b-o8axy9pki8] { transform: translateY(-1px); }

.setup-btn.primary[b-o8axy9pki8] { background: var(--accent); border-color: var(--accent); color: #04201D; }
.setup-btn.primary:hover[b-o8axy9pki8] { filter: brightness(1.08); }

.setup-btn.azure[b-o8axy9pki8] { background: var(--azure); border-color: var(--azure); color: #fff; }
.setup-btn.azure:hover[b-o8axy9pki8] { filter: brightness(1.08); }
.setup-btn.azure svg:first-child[b-o8axy9pki8] { width: 16px; height: 16px; }

.setup-btn.is-disabled[b-o8axy9pki8] {
    pointer-events: none;
    opacity: 0.5;
    transform: none;
}

/* ─── Footer / auto-poll indicator ────────────────────────────── */

.setup-foot[b-o8axy9pki8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 12.5px;
    color: var(--faint);
}

.setup-foot-spin[b-o8axy9pki8] {
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin-b-o8axy9pki8 0.8s linear infinite;
}
@keyframes spin-b-o8axy9pki8 { to { transform: rotate(360deg); } }

.setup-recheck[b-o8axy9pki8] {
    margin-left: auto;
    padding: 6px 13px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: 600 12.5px "Inter", "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.setup-recheck:hover:not(:disabled)[b-o8axy9pki8] { border-color: var(--accent-line); background: var(--surface-2); }
.setup-recheck:disabled[b-o8axy9pki8] { opacity: 0.5; cursor: default; }

.setup-error[b-o8axy9pki8] {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: #FF6B6B;
}

/* ─── Success beat ────────────────────────────────────────────── */

.setup-card.is-done[b-o8axy9pki8] { text-align: center; }

.setup-done-mark[b-o8axy9pki8] {
    width: 60px;
    height: 60px;
    margin: 6px auto 18px;
    display: grid;
    place-items: center;
    color: var(--accent);
    border: 2px solid var(--accent-line);
    border-radius: 50%;
    background: var(--accent-soft);
    animation: pop-b-o8axy9pki8 .4s ease both;
}
.setup-done-mark svg[b-o8axy9pki8] { width: 30px; height: 30px; }
@keyframes pop-b-o8axy9pki8 {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
.setup-card.is-done .setup-intro[b-o8axy9pki8] { margin-bottom: 6px; }

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 560px) {
    .setup-card[b-o8axy9pki8] { padding: 26px 20px 20px; }
    .setup-title[b-o8axy9pki8] { font-size: 22px; }
    .setup-step[b-o8axy9pki8] { flex-direction: column; gap: 12px; }
    .setup-foot[b-o8axy9pki8] { flex-wrap: wrap; }
    .setup-recheck[b-o8axy9pki8] { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .setup-gate[b-o8axy9pki8], .setup-card[b-o8axy9pki8], .setup-done-mark[b-o8axy9pki8] { animation: none; }
    .setup-foot-spin[b-o8axy9pki8] { animation-duration: 2s; }
    .setup-btn:hover[b-o8axy9pki8] { transform: none; }
}