/* /Components/Layout/MainLayout.razor.rz.scp.css */
:host[b-fnszu11yml] {
    display: block;
}

/* ── App Bar ─────────────────────────────────────────────── */

[b-fnszu11yml] .mud-appbar {
    height: 64px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[b-fnszu11yml] .admin-appbar {
    background: color-mix(in oklab, var(--mud-palette-appbar-background) 85%, transparent) !important;
}

[b-fnszu11yml] .admin-appbar-actions {
    display: flex;
    align-items: center;
}

[b-fnszu11yml] .admin-env-chip {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    height: 28px;
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 18%, transparent) !important;
    color: var(--mud-palette-text-secondary) !important;
}

[b-fnszu11yml] .admin-env-chip--production {
    background: color-mix(in oklab, var(--mud-palette-success) 20%, transparent) !important;
    color: var(--mud-palette-success) !important;
}

[b-fnszu11yml] .admin-env-chip--staging {
    background: color-mix(in oklab, var(--mud-palette-info) 22%, transparent) !important;
    color: var(--mud-palette-info) !important;
}

[b-fnszu11yml] .admin-env-chip--development {
    background: color-mix(in oklab, var(--mud-palette-warning) 22%, transparent) !important;
    color: var(--mud-palette-warning) !important;
}

/* ── Drawer ──────────────────────────────────────────────── */

[b-fnszu11yml] .mud-drawer {
    border-right: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

[b-fnszu11yml] .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Drawer Header / Brand ───────────────────────────────── */

[b-fnszu11yml] .admin-drawer-header {
    min-height: 68px;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    display: flex;
    align-items: center;
    background:
        radial-gradient(120px 70px at 20% 0%, rgba(255, 214, 64, 0.09), transparent 65%),
        linear-gradient(180deg,
            color-mix(in oklab, #05215a 32%, var(--mud-palette-surface)),
            color-mix(in oklab, #03143c 18%, var(--mud-palette-surface)));
}

[b-fnszu11yml] .admin-brand {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0;
    width: 100%;
}

[b-fnszu11yml] .admin-brand-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 2px;
    border-radius: 12px;
    background: color-mix(in oklab, #06246b 88%, black);
    box-shadow:
        0 8px 18px color-mix(in oklab, #001a55 45%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    overflow: hidden;
}

[b-fnszu11yml] .admin-brand-mark::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(255, 214, 64, 0.13) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[b-fnszu11yml] .admin-brand-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

[b-fnszu11yml] .admin-brand-logo {
    display: block;
    width: min(132px, 100%);
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 3px 8px rgba(0, 12, 42, 0.35));
}

/* ── Drawer Footer ───────────────────────────────────────── */

[b-fnszu11yml] .admin-drawer-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: color-mix(in oklab, var(--mud-palette-drawer-background) 96%, var(--mud-palette-background));
}

[b-fnszu11yml] .admin-footer-card {
    display: grid;
    gap: 4px;
    min-width: 0;
}

[b-fnszu11yml] .admin-footer-utility-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

[b-fnszu11yml] .admin-user-profile {
    min-width: 0;
    padding: 0 !important;
    border-radius: 9px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: background-color 0.2s ease !important;
}

[b-fnszu11yml] .admin-user-profile-inner {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 4px 2px;
    min-width: 0;
}

[b-fnszu11yml] .admin-user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

[b-fnszu11yml] .admin-user-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

[b-fnszu11yml] .admin-user-action-icon {
    opacity: 0.52;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[b-fnszu11yml] .admin-user-profile:hover {
    background-color: color-mix(in oklab, var(--mud-palette-primary) 7%, transparent) !important;
}

[b-fnszu11yml] .admin-user-profile:hover .admin-user-action-icon {
    opacity: 0.85;
    transform: translateX(1px);
}

[b-fnszu11yml] .admin-user-name {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-user-caption {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-auth-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    max-width: 100%;
    padding: 0 0 0 38px;
    color: color-mix(in oklab, var(--mud-palette-warning) 82%, var(--mud-palette-text-primary));
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-auth-mode-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
}

[b-fnszu11yml] .admin-theme-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    opacity: 0.74;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

[b-fnszu11yml] .admin-theme-toggle:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 10%, transparent);
    opacity: 1;
}

[b-fnszu11yml] .admin-release-link {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 2px 0;
    border-radius: 6px;
    opacity: 0.8;
    transition: opacity 0.15s ease, color 0.15s ease;
}

[b-fnszu11yml] .admin-release-link:hover {
    opacity: 1;
}

[b-fnszu11yml] .admin-release-kicker {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-release-version {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

@media (max-width: 600px) {
    [b-fnszu11yml] .admin-env-chip {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
:host[b-w7x6jp4gc4] {
    display: block;
}

/* ── Nav Menu Container ─────────────────────────────────── */

[b-w7x6jp4gc4] .mud-navmenu {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Section Color Accent Variables ──────────────────────── */

.nav-group--dailyops[b-w7x6jp4gc4]  { --nav-accent: #FFB960; }
.nav-group--content[b-w7x6jp4gc4]   { --nav-accent: #6E8BFF; }
.nav-group--adventure[b-w7x6jp4gc4] { --nav-accent: #26c6da; }
.nav-group--liveops[b-w7x6jp4gc4]   { --nav-accent: #4CAF50; }
.nav-group--growth[b-w7x6jp4gc4]    { --nav-accent: #fb7185; }
.nav-group--players[b-w7x6jp4gc4]   { --nav-accent: #B39DDB; }
.nav-group--system[b-w7x6jp4gc4]    { --nav-accent: #8e909f; }

/* ── Nav Group (collapsible section) ─────────────────────── */

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

.nav-group + .nav-group[b-w7x6jp4gc4] {
    margin-top: 6px;
}

/* ── Group Header Button ─────────────────────────────────── */

.nav-group-header[b-w7x6jp4gc4] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 8px 14px 8px 12px;
    margin: 0 16px;
    width: calc(100% - 32px);
    border: none;
    border-radius: 10px;
    background: color-mix(in oklab, var(--nav-accent) 4%, transparent);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nav-accent) 12%, transparent);
}

.nav-group-header:hover[b-w7x6jp4gc4] {
    background: color-mix(in oklab, var(--nav-accent) 10%, transparent);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nav-accent) 22%, transparent);
}

/* ── Accent rail (fixed-height stripe — matches dot hue, stronger section cue) ── */

.nav-group-accent[b-w7x6jp4gc4] {
    width: 4px;
    align-self: stretch;
    min-height: 22px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--nav-accent) 92%, white 8%);
    opacity: 0.72;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.nav-group-header:hover .nav-group-accent[b-w7x6jp4gc4] {
    opacity: 1;
}

/* ── Section marker dot (every group has rail + dot for quick scanning) ──────── */

.nav-group-dot[b-w7x6jp4gc4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nav-accent);
    flex-shrink: 0;
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--nav-accent) 28%, transparent),
        0 0 12px color-mix(in oklab, var(--nav-accent) 35%, transparent);
}

/* ── Group Label (heavier than before for primary structure read) ── */

.nav-group-label[b-w7x6jp4gc4] {
    flex: 1;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    color: color-mix(in oklab, var(--nav-accent) 28%, var(--mud-palette-text-primary));
}

.nav-group-header:hover .nav-group-label[b-w7x6jp4gc4] {
    color: var(--mud-palette-text-primary);
}

/* ── Chevron ─────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-group-chevron {
    opacity: 0.4;
    transition: opacity 0.15s ease, transform 0.2s ease;
    font-size: 18px !important;
}

.nav-group-header:hover[b-w7x6jp4gc4]  .nav-group-chevron {
    opacity: 0.85;
    color: var(--nav-accent);
}

/* ── Group Children Container ────────────────────────────── */

.nav-group-children[b-w7x6jp4gc4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
    animation: nav-group-expand-b-w7x6jp4gc4 0.2s ease-out;
}

@keyframes nav-group-expand-b-w7x6jp4gc4 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Individual Nav Links ────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link {
    margin: 0;
    padding: 0;
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link {
    min-height: 44px;
    margin: 1px 16px !important;
    padding: 8px 16px !important;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent !important;
    /* MudBlazor NavMenu default paints a heavy primary stripe on .active */
    border: none !important;
    border-inline-start: none !important;
    box-shadow: none !important;
}

[b-w7x6jp4gc4] .nav-link--home .mud-nav-link {
    margin: 1px 16px 4px !important;
}

/* ── Hover ───────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #FFB960 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #6E8BFF 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #26c6da 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #fb7185 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #4CAF50 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #B39DDB 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #8e909f 8%, transparent) !important;
}

/* ── Active State — filled pill only (no Mud left-rail / inset stripe) ── */

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, var(--mud-palette-primary) 18%, transparent) !important;
    border: none !important;
    border-inline-start: none !important;
    box-shadow: none !important;
}

[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #FFB960 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #6E8BFF 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #26c6da 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #fb7185 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #4CAF50 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #B39DDB 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link[data-aggregate-active="true"] {
    background-color: color-mix(in oklab, #8e909f 18%, transparent) !important;
}

/* ── Icon Styling ────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link .mud-nav-link-icon {
    min-width: 22px;
    width: 22px;
    height: 22px;
    font-size: 20px;
    margin-right: 12px;
    color: var(--mud-palette-text-secondary) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover .mud-nav-link-icon {
    color: var(--mud-palette-text-primary) !important;
    transform: scale(1.08);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #FFB960 !important;
}

[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #6E8BFF !important;
}

[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #26c6da !important;
}

[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #fb7185 !important;
}

[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #4CAF50 !important;
}

[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #B39DDB !important;
}

[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link[data-aggregate-active="true"] .mud-nav-link-icon {
    color: #8e909f !important;
}

/* ── Content Layout ──────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

/* ── Title ───────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: color 0.2s ease;
    line-height: 1.2;
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover .nav-link-title {
    color: var(--mud-palette-text-primary);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active .nav-link-title,
[b-w7x6jp4gc4] .nav-link .mud-nav-link[data-aggregate-active="true"] .nav-link-title {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ── Subtitle ────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link-subtitle {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--mud-palette-text-disabled);
    transition: color 0.2s ease;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover .nav-link-subtitle {
    color: var(--mud-palette-text-secondary);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active .nav-link-subtitle,
[b-w7x6jp4gc4] .nav-link .mud-nav-link[data-aggregate-active="true"] .nav-link-subtitle {
    color: var(--mud-palette-text-secondary);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-p6vgaxprdr],
.components-reconnect-repeated-attempt-visible[b-p6vgaxprdr],
.components-reconnect-failed-visible[b-p6vgaxprdr],
.components-pause-visible[b-p6vgaxprdr],
.components-resume-failed-visible[b-p6vgaxprdr],
.components-rejoining-animation[b-p6vgaxprdr] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-p6vgaxprdr {
    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/Infrastructure.razor.rz.scp.css */
/* ── Constellation Graph Container ── */
.infra-graph-container[b-1q93fuuk7i] {
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
}

.infra-graph-header[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
}

.infra-graph-title[b-1q93fuuk7i] {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.infra-svg-wrap[b-1q93fuuk7i] {
    position: relative;
    padding: 16px;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--mud-palette-primary) 6%, transparent) 0%, transparent 70%);
    overflow: hidden;
}

[b-1q93fuuk7i] .infra-svg {
    width: 100%;
    height: 420px;
    cursor: grab;
    display: block;
    touch-action: none;
    user-select: none;
}

[b-1q93fuuk7i] .infra-svg:active {
    cursor: grabbing;
}

/* ── Zoom Controls ── */
.infra-zoom-controls[b-1q93fuuk7i] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

[b-1q93fuuk7i] .infra-zoom-btn {
    background: color-mix(in oklab, var(--mud-palette-surface) 85%, var(--mud-palette-lines-default)) !important;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent) !important;
    border-radius: var(--admin-radius-sm, 8px) !important;
    width: 32px !important;
    height: 32px !important;
    backdrop-filter: blur(8px);
    transition: background 0.15s ease, border-color 0.15s ease;
}

[b-1q93fuuk7i] .infra-zoom-btn:hover {
    background: color-mix(in oklab, var(--mud-palette-surface) 95%, var(--mud-palette-primary)) !important;
    border-color: color-mix(in oklab, var(--mud-palette-primary) 40%, transparent) !important;
}

/* ── Connection Lines ── */
[b-1q93fuuk7i] .infra-connection {
    stroke: color-mix(in oklab, var(--mud-palette-text-secondary) 25%, transparent);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

[b-1q93fuuk7i] .infra-connection--active {
    stroke: color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    animation: flow-dash-b-1q93fuuk7i 1.2s linear infinite;
}

@keyframes flow-dash-b-1q93fuuk7i {
    to { stroke-dashoffset: -20; }
}

/* ── Nodes ── */
[b-1q93fuuk7i] .infra-node {
    transition: transform 0.3s ease;
}

[b-1q93fuuk7i] .infra-node-ring {
    fill: none;
    stroke-width: 2;
    transition: all 0.3s ease;
}

[b-1q93fuuk7i] .infra-node-core {
    transition: all 0.3s ease;
}

[b-1q93fuuk7i] .infra-node-label {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 500;
    text-anchor: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

[b-1q93fuuk7i] .infra-node-badge {
    fill: var(--mud-palette-text-primary);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    user-select: none;
}

/* Healthy */
[b-1q93fuuk7i] .infra-node--healthy .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-primary) 70%, transparent);
    animation: node-pulse-b-1q93fuuk7i 3s ease-in-out infinite;
}

[b-1q93fuuk7i] .infra-node--healthy .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-primary) 15%, var(--mud-palette-surface));
}

@keyframes node-pulse-b-1q93fuuk7i {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Warning */
[b-1q93fuuk7i] .infra-node--warning .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-warning) 80%, transparent);
    animation: node-pulse-warn-b-1q93fuuk7i 2s ease-in-out infinite;
}

[b-1q93fuuk7i] .infra-node--warning .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

@keyframes node-pulse-warn-b-1q93fuuk7i {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Error */
[b-1q93fuuk7i] .infra-node--error .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-error) 80%, transparent);
    animation: node-pulse-err-b-1q93fuuk7i 1.5s ease-in-out infinite;
}

[b-1q93fuuk7i] .infra-node--error .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-error) 12%, var(--mud-palette-surface));
}

@keyframes node-pulse-err-b-1q93fuuk7i {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Stopped */
[b-1q93fuuk7i] .infra-node--stopped .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-text-secondary) 30%, transparent);
}

[b-1q93fuuk7i] .infra-node--stopped .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-text-secondary) 8%, var(--mud-palette-surface));
}

/* Selected */
[b-1q93fuuk7i] .infra-node--selected .infra-node-ring {
    stroke-width: 3;
    opacity: 1 !important;
}

[b-1q93fuuk7i] .infra-node--selected .infra-node-label {
    fill: var(--mud-palette-text-primary);
    font-weight: 700;
}

/* Hover */
[b-1q93fuuk7i] .infra-node:hover .infra-node-ring {
    stroke-width: 3;
}

[b-1q93fuuk7i] .infra-node:hover .infra-node-label {
    fill: var(--mud-palette-text-primary);
}

/* ── Detail Panel ── */
.infra-detail-panel[b-1q93fuuk7i] {
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.infra-detail-header[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
}

.infra-detail-section[b-1q93fuuk7i] {
    margin-bottom: 14px;
}

.infra-detail-label[b-1q93fuuk7i] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.infra-detail-value[b-1q93fuuk7i] {
    display: block;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

/* ── Scale Events Timeline ── */
.infra-timeline-container[b-1q93fuuk7i] {
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.infra-timeline-header[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
}

.infra-timeline-body[b-1q93fuuk7i] {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 0;
}

.infra-timeline-empty[b-1q93fuuk7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.infra-event[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    transition: background 0.15s ease;
    animation: event-slide-in-b-1q93fuuk7i 0.3s ease-out;
}

.infra-event:hover[b-1q93fuuk7i] {
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-lines-default));
}

@keyframes event-slide-in-b-1q93fuuk7i {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.infra-event-time[b-1q93fuuk7i] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    min-width: 70px;
}

.infra-event-text[b-1q93fuuk7i] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.infra-event-id[b-1q93fuuk7i] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Event type accent borders */
.infra-event--replica_joined[b-1q93fuuk7i] {
    border-left: 3px solid var(--mud-palette-success);
}

.infra-event--replica_left[b-1q93fuuk7i] {
    border-left: 3px solid var(--mud-palette-warning);
}

.infra-event--replica_expired[b-1q93fuuk7i] {
    border-left: 3px solid var(--mud-palette-error);
}

/* ── Timeline scrollbar ── */
.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar {
    width: 6px;
}

.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar-track {
    background: transparent;
}

.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 30%, transparent);
    border-radius: 3px;
}

.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 50%, transparent);
}
/* /Components/Pages/SocialContent/TemplateDialog.razor.rz.scp.css */
/*
   TemplateDialog.razor scoped styles. Drives the fullscreen WYSIWYG layout:
   left pane = phone-frame canvas, right pane = scrollable form controls.
   Both panes share the dialog's vertical space; form scrolls independently
   so the canvas is always visible.
*/

[b-950rndhv1x] .template-editor-dialog {
    /* Ensure the dialog backdrop's content area uses the full screen. */
}

[b-950rndhv1x] .template-editor-content {
    padding: 0 !important;
    /* Remove default MudDialog content padding so the editor layout owns
       its own spacing. */
}

.template-editor-titlebar[b-950rndhv1x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-editor-layout[b-950rndhv1x] {
    display: grid;
    grid-template-columns: minmax(420px, 0.65fr) minmax(360px, 1fr);
    gap: 0;
    width: 100%;
    height: calc(100vh - 160px);
    /* 160px ~= titlebar (~64px) + dialog actions (~56px) + outer chrome
       padding. Keeps the editor pinned to the dialog's chrome rather
       than stretching off the screen. */
    min-height: 600px;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 1100px) {
    .template-editor-layout[b-950rndhv1x] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
}

.template-editor-canvas-pane[b-950rndhv1x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background:
        radial-gradient(
            ellipse at center top,
            rgba(108, 92, 231, 0.10),
            transparent 70%
        ),
        rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow: auto;
}

.template-editor-canvas-host[b-950rndhv1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.template-editor-canvas-hint[b-950rndhv1x] {
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    max-width: 420px;
}

.template-editor-controls-pane[b-950rndhv1x] {
    padding: 24px;
    overflow: auto;
}

[b-950rndhv1x] .template-editor-segment-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

[b-950rndhv1x] .template-editor-segment-tabs button {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 120ms ease, color 120ms ease;
}

[b-950rndhv1x] .template-editor-segment-tabs button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

[b-950rndhv1x] .template-editor-segment-tabs button.active {
    background: rgba(108, 92, 231, 0.20);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(108, 92, 231, 0.35);
}

/*
  View-mode toggle (Live | Real). Lives next to SegmentTabs on the
  canvas toolbar; styled identically so the two pill-shaped controls
  read as part of the same group. The Refresh button sits to the
  right and turns amber when stale (i.e. an edit happened since the
  last render) so operators know the on-screen frame is out of date.
*/
[b-950rndhv1x] .template-editor-canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

[b-950rndhv1x] .template-editor-viewmode-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

[b-950rndhv1x] .template-editor-viewmode-toggle button {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 120ms ease, color 120ms ease;
}

[b-950rndhv1x] .template-editor-viewmode-toggle button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

[b-950rndhv1x] .template-editor-viewmode-toggle button.active {
    background: rgba(0, 229, 160, 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 229, 160, 0.35);
}

[b-950rndhv1x] .template-editor-viewmode-refresh {
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

[b-950rndhv1x] .template-editor-viewmode-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-950rndhv1x] .template-editor-viewmode-refresh.stale {
    background: rgba(253, 203, 110, 0.16) !important;
    border-color: rgba(253, 203, 110, 0.45) !important;
    color: #fdcb6e !important;
}

/*
  Real-mode preview image. Same aspect ratio + width as PhoneFrame's
  CSS-scaled stage so the operator perceives no jump between Live and
  Real. The wrapper handles the 9:16 aspect; the image fills it.
*/
[b-950rndhv1x] .template-editor-real-preview {
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-950rndhv1x] .template-editor-real-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

[b-950rndhv1x] .template-editor-real-preview .placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    text-align: center;
    padding: 16px;
    line-height: 1.4;
}

[b-950rndhv1x] .template-editor-real-preview.is-stale::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent 47%,
        rgba(253, 203, 110, 0.10) 50%,
        transparent 53%
    );
    background-size: 24px 24px;
}

[b-950rndhv1x] .template-editor-panel {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 8px;
}

[b-950rndhv1x] .template-editor-panel .mud-expand-panel-header {
    font-weight: 600;
}
/* /Components/Pages/SocialContent/TemplateEditor/PhoneFrame.razor.rz.scp.css */
/*
   PhoneFrame.razor scoped styles. Blazor's CSS isolation appends a
   per-component attribute (b-xxxxxxx) to every selector so these rules
   never leak.

   The render strategy:
     - .pf-wrapper sets the visible CSS width and applies aspect-ratio so
       the box is exactly 9:16.
     - .pf-stage is a fixed 1080x1920 logical canvas. CSS transform: scale
       maps it onto the wrapper width.
     - All children of .pf-stage are absolutely positioned in source-frame
       pixels -- the same coordinate space the renderer uses.
*/

.pf-wrapper[b-z6wzy9jgk4] {
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}

.pf-stage[b-z6wzy9jgk4] {
    width: 1080px;
    height: 1920px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    /*
        Scale must be a unitless number for transform: scale(), so the
        wrapper passes --pf-scale (e.g. 0.333) computed in C# from the
        wrapper width / 1080. CSS calc(<length> / <number>) produces a
        length, not a number, which silently disables the transform --
        precomputing in C# avoids that gotcha.
    */
    transform: scale(var(--pf-scale, 0.333));
    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
    color: #fff;
    user-select: none;
}

.pf-element[b-z6wzy9jgk4] {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
    /*
        Soft hover affordance: every element gets a faint outline on
        hover so operators can see what's clickable. The actual selected
        element gets a stronger outline below.
    */
    transition: box-shadow 0.12s ease, outline-color 0.12s ease;
    outline: 2px solid transparent;
    outline-offset: 0px;
}

.pf-element:hover[b-z6wzy9jgk4] {
    outline-color: rgba(0, 229, 160, 0.35);
    cursor: pointer;
}

.pf-element.pf-selected[b-z6wzy9jgk4] {
    /*
        The accent-green outline is the operator's primary feedback that
        an element is the inspector's current target. Box-shadow rather
        than outline so it sits on top of the next element's outline
        when boxes happen to overlap.
    */
    outline-color: #00E5A0;
    box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.35), 0 8px 28px rgba(0, 0, 0, 0.45);
    z-index: 5;
    /* Allow the 8 resize handles (children with negative top/left) to
       render outside the element's content box without being clipped.
       Trade-off: long unwrapped text in a selected element may briefly
       extend past the box edge. Acceptable in editor mode where the
       operator is actively repositioning the element. */
    overflow: visible;
}

.pf-element.pf-dragging[b-z6wzy9jgk4],
.pf-element.pf-resizing[b-z6wzy9jgk4] {
    /* Slight lift while a pointer gesture is active so the element feels
       picked up. JS adds/removes the class around pointerdown/pointerup. */
    box-shadow: 0 0 0 2px #00E5A0, 0 18px 48px rgba(0, 0, 0, 0.55);
    z-index: 6;
    opacity: 0.96;
}

/* ────────────────────────────────────────────────────────────────────
   Resize handles. Eight directional grips appear on the selected
   element. They live in source-frame px so they scale alongside the
   stage; size is chosen so the rendered CSS click target is ~12 CSS
   pixels at the default 360-CSS-px wrapper width.
   ──────────────────────────────────────────────────────────────────── */

.pf-handle[b-z6wzy9jgk4] {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #00E5A0;
    border: 6px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    z-index: 20;
    /* Don't block touch scrolling on tablets; pointerdown is intercepted
       by JS before the browser starts a pan/zoom gesture. */
    touch-action: none;
}

.pf-handle-nw[b-z6wzy9jgk4] { top: -18px; left: -18px;       cursor: nwse-resize; }
.pf-handle-n[b-z6wzy9jgk4]  { top: -18px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pf-handle-ne[b-z6wzy9jgk4] { top: -18px; right: -18px;      cursor: nesw-resize; }
.pf-handle-e[b-z6wzy9jgk4]  { top: 50%;   right: -18px; transform: translateY(-50%); cursor: ew-resize; }
.pf-handle-se[b-z6wzy9jgk4] { bottom: -18px; right: -18px;   cursor: nwse-resize; }
.pf-handle-s[b-z6wzy9jgk4]  { bottom: -18px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pf-handle-sw[b-z6wzy9jgk4] { bottom: -18px; left: -18px;    cursor: nesw-resize; }
.pf-handle-w[b-z6wzy9jgk4]  { top: 50%;   left: -18px; transform: translateY(-50%); cursor: ew-resize; }

.pf-text-centered[b-z6wzy9jgk4],
.pf-text-top[b-z6wzy9jgk4] {
    overflow: hidden;
}

/* Category badge: rounded pill with semi-transparent backdrop. */
.pf-badge[b-z6wzy9jgk4] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.04em;
}

.pf-badge > span[b-z6wzy9jgk4] {
    position: relative;
    z-index: 2;
}

.pf-badge-bg[b-z6wzy9jgk4] {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    z-index: 1;
}

/* Question image placeholder. Real image lives only in composed videos --
   in the editor we draw a soft tile with a subtle dashed border so
   operators see WHERE the image will appear without having to upload one. */
.pf-image[b-z6wzy9jgk4] {
    border-radius: 32px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.04) 24px,
            rgba(255, 255, 255, 0.07) 24px,
            rgba(255, 255, 255, 0.07) 48px
        );
    border: 2px dashed rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-image-label[b-z6wzy9jgk4] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Answer strip: 4 vertically-stacked boxes inside a single layout box.
   Children use flex column with equal height + gap so the renderer's
   "4 boxes of height 100 with 16px gap" intent translates faithfully. */
.pf-answer-strip[b-z6wzy9jgk4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-answer-box[b-z6wzy9jgk4] {
    flex: 1 1 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: relative;
}

.pf-answer-check[b-z6wzy9jgk4] {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    font-weight: 700;
}

/* Countdown timer is a circle with a thick accent-colored ring. The radius
   is implied by the box dimensions; we use border-radius:50% to keep it
   round even when the user resizes asymmetrically (Phase 3 enforces a
   square at the resize layer). */
.pf-timer[b-z6wzy9jgk4] {
    box-sizing: border-box;
}

/* Subtle phone notch overlay so the canvas reads as a player without
   adding a heavy bezel that competes with the layout being edited. */
.pf-chrome-notch[b-z6wzy9jgk4] {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 18px;
    z-index: 10;
    pointer-events: none;
    /* Notch is in CSS-px space (overlay sits OUTSIDE the scaled stage), so
       it does NOT scale with the stage. Anchored to the wrapper. */
}
/* /Components/Pages/SocialContent/TemplateEditor/PropertyInspector.razor.rz.scp.css */
.property-inspector[b-f6lh5nkseg] {
    background: rgba(0, 229, 160, 0.06);
    border: 1px solid rgba(0, 229, 160, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.property-inspector-header[b-f6lh5nkseg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.property-inspector-title[b-f6lh5nkseg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #00E5A0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.property-inspector-actions[b-f6lh5nkseg] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}