/* _content/MuseumAdmin/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-cbye0cvvc6] {
    width: 100%;
    min-height: 100vh;
}

/* Mirror the design system layout class so both work */
.admin-layout[b-cbye0cvvc6] {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-bg, #F9FAFB);
}

/* Ensure the rendered sidebar width and main margin stay in sync. */
.admin-layout[b-cbye0cvvc6] {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-bg, #F9FAFB);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
    position: relative;
}

/* Render the sidebar as part of the flex layout (not fixed) so main sits next to it.
   This overrides the global `.sidebar { position: fixed }` only for this layout. */
#sidebar[b-cbye0cvvc6] {
    position: relative !important;
    width: var(--sidebar-width) !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    box-shadow: none !important;
}

.main-content[b-cbye0cvvc6] {
    /* Offset the main content so it starts after the sidebar.
       Use a margin rather than relying on global/flexible layout so
       this works even if the sidebar is positioned (fixed/absolute).
       Defaults provided for the CSS variables to be safe. */
    margin-left: var(--sidebar-width, 240px);
    transition: margin-left 220ms ease;
    flex: 1 1 auto;
}

/* Use flex-basis so main expands when sidebar shrinks (collapsed) */
.admin-layout>#sidebar[b-cbye0cvvc6],
.admin-layout>.sidebar[b-cbye0cvvc6] {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    transition: flex-basis var(--transition-base), width var(--transition-base);
}

.admin-layout>#sidebar.collapsed[b-cbye0cvvc6],
.admin-layout>.sidebar.collapsed[b-cbye0cvvc6] {
    flex-basis: var(--sidebar-collapsed-width) !important;
    width: var(--sidebar-collapsed-width) !important;
}

.admin-layout>.main-content[b-cbye0cvvc6] {
    flex: 1 1 auto;
    width: auto;
}

/* When the sidebar is collapsed we want main to start after the
   collapsed width. We target the sibling main element so this works
   regardless of whether the sidebar is fixed or part of the flex flow. */
.sidebar.collapsed+.main-content[b-cbye0cvvc6],
#sidebar.collapsed+.main-content[b-cbye0cvvc6] {
    margin-left: var(--sidebar-collapsed-width, 72px);
}

/* Fallback: if the sidebar is a direct child and flex is working, allow
   the flex rule to control layout (keeps original behaviour). */
.admin-layout>#sidebar:not(.collapsed)~.main-content[b-cbye0cvvc6],
.admin-layout>.sidebar:not(.collapsed)~.main-content[b-cbye0cvvc6] {
    margin-left: var(--sidebar-width, 240px);
}

/* Mobile: Hide sidebar by default, show on hamburger click */
@media (max-width: 768px) {

    /* Override desktop layout for mobile */
    #sidebar[b-cbye0cvvc6],
    .sidebar[b-cbye0cvvc6] {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw;
        /* Hide sidebar by default - completely off screen */
        transform: translateX(-100%) !important;
        visibility: visible !important;
        /* Keep visible for transitions */
        opacity: 1 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
        /* Remove from flex layout */
        flex: none !important;
        flex-basis: auto !important;
        /* Ensure it doesn't take up space */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show sidebar when mobile-open class is added */
    #sidebar.mobile-open[b-cbye0cvvc6],
    .sidebar.mobile-open[b-cbye0cvvc6] {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
    }

    /* Ensure sidebar is hidden when NOT mobile-open */
    #sidebar:not(.mobile-open)[b-cbye0cvvc6],
    .sidebar:not(.mobile-open)[b-cbye0cvvc6] {
        transform: translateX(-100%) !important;
        pointer-events: none !important;
        /* Prevent interaction when hidden */
    }

    /* Ensure sidebar is visible and interactive only when mobile-open */
    #sidebar.mobile-open[b-cbye0cvvc6],
    .sidebar.mobile-open[b-cbye0cvvc6] {
        pointer-events: auto !important;
    }

    /* Main content takes full width on mobile */
    .main-content[b-cbye0cvvc6] {
        margin-left: 0 !important;
        width: auto !important;
        /* Allow it to shrink/grow with padding */
        max-width: 100%;
    }

    .admin-layout>#sidebar[b-cbye0cvvc6],
    .admin-layout>.sidebar[b-cbye0cvvc6] {
        flex: none !important;
        flex-basis: auto !important;
        width: 280px !important;
    }

    .admin-layout>.main-content[b-cbye0cvvc6] {
        margin-left: 0 !important;
        width: auto !important;
        flex: 1 1 auto !important;
    }

    /* Override collapsed state on mobile */
    .admin-layout>#sidebar.collapsed[b-cbye0cvvc6],
    .admin-layout>.sidebar.collapsed[b-cbye0cvvc6] {
        flex-basis: auto !important;
        width: 280px !important;
        transform: translateX(-100%) !important;
    }

    .admin-layout>#sidebar.collapsed.mobile-open[b-cbye0cvvc6],
    .admin-layout>.sidebar.collapsed.mobile-open[b-cbye0cvvc6] {
        transform: translateX(0) !important;
    }
}
/* _content/MuseumAdmin/Components/Layout/NavMenu.razor.rz.scp.css */
/* Make the sidebar navigation area scrollable if content overflows */
.sidebar-scroll[b-wdh3xpoln5] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
}
 /* Simple, local styles for animated collapse/expand */
        .sidebar[b-wdh3xpoln5] { 
            transition: width 220ms ease, box-shadow 220ms ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden; /* Hide horizontal overflow, allow vertical scroll in .sidebar-scroll */
            height: 100vh;
            min-height: 100vh;
            z-index: 1000; /* Ensure sidebar is above content to show the button */
            display: flex;
            flex-direction: column;
        }
        
        /* Mobile: Hide sidebar by default */
        @media (max-width: 768px) {
            #sidebar[b-wdh3xpoln5],
            .sidebar[b-wdh3xpoln5] {
                transform: translateX(-100%) !important;
                position: fixed !important;
                left: 0 !important;
                top: 0 !important;
                height: 100vh !important;
                width: 280px !important;
                max-width: 85vw;
                z-index: 1001 !important;
                pointer-events: none !important;
            }

            /* When opened on mobile, show full sidebar (logo + labels) */
            #sidebar.mobile-open[b-wdh3xpoln5],
            .sidebar.mobile-open[b-wdh3xpoln5] {
                transform: translateX(0) !important;
                pointer-events: auto !important;
                width: 280px !important;
                max-width: 85vw !important;
            }

            /* Ensure logo text and nav item text are visible when mobile-open */
            #sidebar.mobile-open .sidebar-logo-text[b-wdh3xpoln5],
            .sidebar.mobile-open .sidebar-logo-text[b-wdh3xpoln5],
            #sidebar.mobile-open .nav-item-text[b-wdh3xpoln5],
            .sidebar.mobile-open .nav-item-text[b-wdh3xpoln5] {
                display: inline !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }

            /* If collapsed is toggled on mobile (some toggles add collapsed), prefer the mobile-open state */
            #sidebar.mobile-open.collapsed .sidebar-logo-text[b-wdh3xpoln5],
            .sidebar.mobile-open.collapsed .sidebar-logo-text[b-wdh3xpoln5],
            #sidebar.mobile-open.collapsed .nav-item-text[b-wdh3xpoln5],
            .sidebar.mobile-open.collapsed .nav-item-text[b-wdh3xpoln5] {
                display: inline !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }

            /* Hide the small expand floating button on mobile expanded view */
            .sidebar.mobile-open .sidebar-expand-btn[b-wdh3xpoln5],
            #sidebar.mobile-open .sidebar-expand-btn[b-wdh3xpoln5] {
                display: none !important;
            }
        }

        .sidebar-header[b-wdh3xpoln5] {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            position: relative;
            /* Ensure header content doesn't overflow weirdly in collapsed state */
            overflow: visible; 
        }

        .sidebar-toggle[b-wdh3xpoln5] { 
            background: transparent; 
            border: 0; 
            padding: 6px; 
            display:flex; 
            align-items:center; 
            justify-content:center; 
            cursor:pointer; 
            color: inherit;
        }

        /* Toggle icon states: show close icon when sidebar has mobile-open */
        .sidebar-toggle .close-icon[b-wdh3xpoln5] { display: none; }
        #sidebar.mobile-open #sidebarToggle .left-arrow-icon[b-wdh3xpoln5] { display: none; }
        #sidebar.mobile-open #sidebarToggle .close-icon[b-wdh3xpoln5] { display: inline; }

        /* Clean Expand Button */
.sidebar-expand-btn[b-wdh3xpoln5] {
    position: relative;
    margin-left: 5px;
    width: 32px;
    height: 32px;

    display: none; /* Hidden by default (expanded) */
    align-items: center;
    justify-content: center;

    background: transparent;   /* ❌ no glass */
    border: none;               /* ❌ no border */
    box-shadow: none;           /* ❌ no shadow */

    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 1001;
}

/* Subtle hover feedback */
.sidebar-expand-btn:hover[b-wdh3xpoln5] {
    background: rgba(0, 0, 0, 0.05); /* soft hover */
    border-radius: 6px;
    transform: scale(1.05);
}

/* Optional: active click feedback */
.sidebar-expand-btn:active[b-wdh3xpoln5] {
    transform: scale(0.95);
}

/* WHITE arrow for dark background */
.sidebar-expand-btn svg[b-wdh3xpoln5] {
    stroke: #ffffff;
}
.sidebar-expand-btn:hover[b-wdh3xpoln5] {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.sidebar-toggle:hover[b-wdh3xpoln5] {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}



        /* Logic for collapsed state */
        .sidebar.collapsed .sidebar-expand-btn[b-wdh3xpoln5] {
            display: flex;
            /* Pop it out of the flow to ensure it fits and is visible */
            position: absolute;
            right: -16px; /* Half width outside to float on the edge */
            top: 50%;
            transform: translateY(-50%);
        }

        /* Hide the default toggle when collapsed */
        .sidebar.collapsed #sidebarToggle[b-wdh3xpoln5] {
            display: none; 
        }

        .sidebar-logo[b-wdh3xpoln5] {
            display: flex;
            align-items: center;
            transition: transform 220ms ease;
        }

        .sidebar-logo img[b-wdh3xpoln5] {
            transition: transform 220ms ease, margin 220ms ease, width 220ms ease, height 220ms ease;
        }

        .sidebar-logo-text[b-wdh3xpoln5] {
            font-weight: bold;
            font-size: 1.2rem;
            margin-left: 8px;
            transition: opacity 220ms ease;
        }
        
        .sidebar.collapsed .sidebar-logo-text[b-wdh3xpoln5] {
            display: none;
            opacity: 0;
            pointer-events: none;
        }

        /* "while hamburger menu is clicked move memby logo png slightly left" */
        /* "while hamburger menu is clicked move memby logo png slightly left" */
        .sidebar.collapsed .sidebar-logo img[b-wdh3xpoln5] {
            /* Transform and resize for collapsed state */
            transform: translateX(-4px) scale(0.8); 
            /* Optional: if you prefer changing width/height explicitly:
               width: 32px; height: auto; 
            */
        }
        
        .sidebar.collapsed .sidebar-expand-btn[b-wdh3xpoln5] {
           /* Ensure gap between logo and button */
           left: 48px; /* Push it further right from the logo area */
           right: auto;
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
        }
        
        .sidebar-expand-btn svg[b-wdh3xpoln5] { transition: transform 220ms ease; }

        /* Align nav items with the moved logo in collapsed state */
        .sidebar.collapsed .nav-item-icon[b-wdh3xpoln5] {
            transform: translateX(-4px);
        }
        
        /* Modern dropdown chevron styling used across filters and toggles */
        .dropdown-chevron[b-wdh3xpoln5] { display: inline-block; vertical-align: middle; transition: transform 160ms ease; }
/* _content/MuseumAdmin/Components/Pages/CareCheckIn.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CareCheckIn — Professional UI with depth & visual hierarchy
   RTM-inspired tokens + elevation system + micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── Local tokens ─────────────────────────────────────────────── */
:host[b-h5zpdke2t0] {
    display: block;
    height: 100%;

    --teal:        #1D9E75;
    --teal-dark:   #0F6E56;
    --teal-light:  #25BE8D;
    --teal-bg:     #E1F5EE;
    --teal-bg-2:   #C8EEE0;
    --teal-text:   #0F6E56;

    --amber-bg:    #FAEEDA;
    --amber-text:  #854F0B;

    --blue-bg:     #E6F1FB;
    --blue-bg-2:   #CAE1F7;
    --blue-text:   #185FA5;

    --coral-bg:    #FAECE7;
    --coral-text:  #993C1D;

    --border-xs:   rgba(0, 0, 0, 0.06);
    --border-sm:   rgba(0, 0, 0, 0.10);
    --border-md:   rgba(0, 0, 0, 0.16);
    --border-lg:   rgba(0, 0, 0, 0.26);

    /* Elevation shadows */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.10);
    --shadow-teal: 0 2px 8px rgba(29, 158, 117, 0.22), 0 6px 20px rgba(29, 158, 117, 0.14);

    --radius-sm:   6px;
    --radius-md:   9px;
    --radius-lg:   13px;
    --radius-xl:   18px;

    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.care-checkin-wrapper[b-h5zpdke2t0] {
    padding: 0 28px 40px;
    width: 100%;
    font-family: var(--font);
}

/* ════════════════════════════════════════════════════════════════
   Busy / Loading states
   ════════════════════════════════════════════════════════════════ */
.busy-screen-overlay[b-h5zpdke2t0] {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(6px);
    animation: fadeInOverlay-b-h5zpdke2t0 0.2s ease;
}

.busy-content[b-h5zpdke2t0] {
    text-align: center;
    padding: 40px 52px;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 0.5px solid var(--border-sm);
    box-shadow: var(--shadow-lg);
}

.busy-content h3[b-h5zpdke2t0] {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a18;
}

.busy-content p[b-h5zpdke2t0] {
    margin: 0;
    font-size: 12px;
    color: #9e9d98;
}

.loading-spinner-large[b-h5zpdke2t0] {
    width: 40px; height: 40px;
    border: 3px solid #f0efe9;
    border-top: 3px solid var(--teal);
    border-radius: 50%;
    animation: spin-b-h5zpdke2t0 0.8s linear infinite;
    margin: 0 auto 20px;
}

/* Inline loading placeholder */
.loading-state[b-h5zpdke2t0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 24px;
    gap: 14px;
    color: #9e9d98;
    font-size: 13px;
}

.spinner[b-h5zpdke2t0] {
    width: 26px; height: 26px;
    border: 2.5px solid #f0efe9;
    border-top: 2.5px solid var(--teal);
    border-radius: 50%;
    animation: spin-b-h5zpdke2t0 0.8s linear infinite;
}

/* ════════════════════════════════════════════════════════════════
   Mode bar — elevated pill strip
   ════════════════════════════════════════════════════════════════ */
.checkin-mode-bar[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-surface, #ffffff);
    border: 0.5px solid var(--border-sm);
    border-radius: var(--radius-lg);
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.checkin-mode-label[b-h5zpdke2t0] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9e9d98;
}

.mode-toggle-group[b-h5zpdke2t0] {
    display: flex;
    background: var(--color-bg, #f7f7f5);
    border: 0.5px solid var(--border-md);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.mode-toggle-btn[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: #6b6b67;
    transition: all var(--transition);
    font-family: var(--font);
}

.mode-toggle-btn.active[b-h5zpdke2t0] {
    background: var(--teal);
    color: #fff;
    box-shadow: var(--shadow-teal);
}

.mode-toggle-btn:not(.active):hover[b-h5zpdke2t0] {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a18;
}

.btn-reset-default[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 5px 12px;
    background: transparent;
    border: 0.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    color: #9e9d98;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
}

.btn-reset-default:hover[b-h5zpdke2t0] {
    color: var(--coral-text);
    border-color: var(--coral-text);
    background: var(--coral-bg);
    box-shadow: 0 0 0 3px rgba(153, 60, 29, 0.06);
}

/* ════════════════════════════════════════════════════════════════
   Default Preview Card — main elevated panel
   ════════════════════════════════════════════════════════════════ */
.default-preview-card[b-h5zpdke2t0] {
    background: var(--color-surface, #ffffff);
    border: 0.5px solid var(--border-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);

    /* Subtle structural top accent */
    border-top: 2px solid var(--teal);
}

/* ── Card header ──────────────────────────────────────────────── */
.default-preview-header[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 0.5px solid var(--border-xs);

    /* Soft gradient wash matching the teal accent */
    background: linear-gradient(135deg, rgba(29, 158, 117, 0.04) 0%, rgba(255,255,255,0) 60%),
                var(--color-bg, #f9f9f8);
}

/* Teal avatar circle */
.default-preview-icon[b-h5zpdke2t0] {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--teal-bg);
    color: var(--teal-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--teal-bg-2);
}

.default-preview-title[b-h5zpdke2t0] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary, #1a1a18);
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}

.default-preview-sub[b-h5zpdke2t0] {
    font-size: 11px;
    color: #9e9d98;
    margin: 0;
}

/* RTM teal badge with animated dot */
.badge-default-pill[b-h5zpdke2t0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 8px;
    background: var(--teal-bg);
    color: var(--teal-text);
    border: 1px solid var(--teal-bg-2);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-default-pill[b-h5zpdke2t0]::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(29, 158, 117, 0.25);
    animation: pulse-dot-b-h5zpdke2t0 2.4s ease-in-out infinite;
}

/* Preview ghost button */
.btn-preview-dedicated[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: #fff;
    border: 0.5px solid var(--border-md);
    border-radius: var(--radius-sm);
    color: #6b6b67;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    margin-left: auto;
    margin-right: 10px;
    font-family: var(--font);
    box-shadow: var(--shadow-xs);
}

.btn-preview-dedicated:hover[b-h5zpdke2t0] {
    border-color: var(--teal);
    color: var(--teal-text);
    background: var(--teal-bg);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.10);
    transform: translateY(-1px);
}

.btn-preview-dedicated:active[b-h5zpdke2t0] { transform: translateY(0); }

/* ── Section micro-label ──────────────────────────────────────── */
.questions-section-label[b-h5zpdke2t0] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9e9d98;
    padding: 12px 22px 8px;
    border-top: 0.5px solid var(--border-xs);
}

/* ── Question list ────────────────────────────────────────────── */
.default-questions-list[b-h5zpdke2t0] {
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.default-q-row[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    background: var(--color-bg, #f9f9f8);
    border: 0.5px solid var(--border-sm);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    cursor: default;
}

.default-q-row:hover[b-h5zpdke2t0] {
    background: #fff;
    border-color: var(--border-md);
    border-left-color: var(--teal);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
}

/* Teal numbered circle */
.default-q-num[b-h5zpdke2t0] {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--teal-bg);
    color: var(--teal-text);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--teal-bg-2);
}

.default-q-content[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 10px;
    min-width: 0;
}

.default-q-text[b-h5zpdke2t0] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary, #1a1a18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Blue pill badge for question type — visible & distinct */
.default-q-type[b-h5zpdke2t0] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--blue-bg);
    color: var(--blue-text);
    border: 1px solid var(--blue-bg-2);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

/* ── Card footer ──────────────────────────────────────────────── */
.default-preview-footer[b-h5zpdke2t0] {
    padding: 14px 22px;
    border-top: 0.5px solid var(--border-xs);
    background: var(--color-bg, #f9f9f8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-question-count[b-h5zpdke2t0] {
    font-size: 11px;
    color: #9e9d98;
}

/* Primary teal button — elevated with teal glow */
.btn-switch-custom[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
    box-shadow: var(--shadow-teal);
    letter-spacing: 0.01em;
}

.btn-switch-custom:hover[b-h5zpdke2t0] {
    background: var(--teal-dark);
    box-shadow: 0 4px 14px rgba(29, 158, 117, 0.35),
                0 8px 28px rgba(29, 158, 117, 0.18);
    transform: translateY(-1px);
}

.btn-switch-custom:active[b-h5zpdke2t0] { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════════
   Patient Preview Modal
   ════════════════════════════════════════════════════════════════ */
.preview-modal-overlay[b-h5zpdke2t0] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 15, 12, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(6px);
    animation: fadeInOverlay-b-h5zpdke2t0 0.18s ease;
}

.preview-modal-container[b-h5zpdke2t0] {
    width: 90%;
    max-width: 740px;
    max-height: 90vh;
    background: var(--color-surface, #ffffff);
    border-radius: var(--radius-xl);
    border: 0.5px solid var(--border-sm);
    border-top: 2px solid var(--teal);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: slideUp-b-h5zpdke2t0 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal header */
.preview-modal-header[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 0.5px solid var(--border-xs);
    background: linear-gradient(135deg, rgba(29, 158, 117, 0.04) 0%, rgba(255,255,255,0) 60%),
                var(--color-bg, #f9f9f8);
}

.modal-header-left[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Teal circular icon */
.modal-preview-icon[b-h5zpdke2t0] {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--teal-bg);
    color: var(--teal-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--teal-bg-2);
    flex-shrink: 0;
}

.modal-title[b-h5zpdke2t0] {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary, #1a1a18);
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.modal-subtitle[b-h5zpdke2t0] {
    font-size: 11px;
    color: #9e9d98;
    margin: 0;
}

/* Circular ghost close button */
.btn-modal-close[b-h5zpdke2t0] {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 0.5px solid var(--border-md);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #6b6b67;
    cursor: pointer;
    line-height: 1;
    transition: all var(--transition);
    box-shadow: var(--shadow-xs);
}

.btn-modal-close:hover[b-h5zpdke2t0] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    transform: scale(1.08);
}

/* ── Patient preview panel ────────────────────────────────────── */
.patient-preview-panel[b-h5zpdke2t0] {
    padding: 20px;
    overflow-y: auto;
    background: var(--color-bg, #f7f7f5);
    flex: 1;
}

/* Mac-style browser chrome */
.patient-preview-chrome[b-h5zpdke2t0] {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 10px 14px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}

.preview-device-bar[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.preview-device-dot[b-h5zpdke2t0] {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #555;
}

.preview-device-dot:nth-child(1)[b-h5zpdke2t0] { background: #ff5f56; }
.preview-device-dot:nth-child(2)[b-h5zpdke2t0] { background: #ffbd2e; }
.preview-device-dot:nth-child(3)[b-h5zpdke2t0] { background: #27c93f; }

.preview-device-label[b-h5zpdke2t0] {
    font-size: 10px;
    color: #888;
    margin-left: auto;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Patient form ─────────────────────────────────────────────── */
.patient-form-preview[b-h5zpdke2t0] {
    background: #fff;
    border: 0.5px solid var(--border-sm);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 36px 40px;
    max-width: 540px;
    margin: 0 auto 28px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.patient-form-header[b-h5zpdke2t0] {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--border-xs);
}

.patient-form-header h3[b-h5zpdke2t0] {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a18;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.patient-form-header p[b-h5zpdke2t0] {
    color: #9e9d98;
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

.patient-q-card[b-h5zpdke2t0] {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 0.5px solid var(--border-xs);
}

.patient-q-card:last-of-type[b-h5zpdke2t0] {
    border-bottom: none;
}

.patient-q-label[b-h5zpdke2t0] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a18;
    margin-bottom: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.patient-q-number[b-h5zpdke2t0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--teal-bg);
    color: var(--teal-text);
    font-size: 10px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── Likert ───────────────────────────────────────────────────── */
.patient-likert[b-h5zpdke2t0] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.patient-likert-item[b-h5zpdke2t0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 7px;
    text-align: center;
}

.patient-likert-circle[b-h5zpdke2t0] {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #9e9d98;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--color-bg, #f9f9f8);
}

.patient-likert-item:hover .patient-likert-circle[b-h5zpdke2t0] {
    border-color: var(--teal);
    color: var(--teal-text);
    background: var(--teal-bg);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
    transform: scale(1.08);
}

.patient-likert-label[b-h5zpdke2t0] {
    font-size: 9px;
    font-weight: 600;
    color: #b0b0aa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    max-width: 56px;
    line-height: 1.3;
}

/* ── Slider ───────────────────────────────────────────────────── */
.patient-slider[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.patient-slider-limit[b-h5zpdke2t0] {
    font-size: 11px;
    font-weight: 700;
    color: #9e9d98;
    min-width: 20px;
    text-align: center;
}

.patient-slider-track[b-h5zpdke2t0] {
    flex: 1;
    height: 6px;
    background: var(--color-bg, #f0efe9);
    border-radius: 3px;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.patient-slider-fill[b-h5zpdke2t0] {
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-light), var(--teal));
    border-radius: 3px;
}

.patient-slider-thumb[b-h5zpdke2t0] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    background: #fff;
    border: 2px solid var(--teal);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(29, 158, 117, 0.25), 0 0 0 3px rgba(29, 158, 117, 0.10);
}

/* ── Yes / No ─────────────────────────────────────────────────── */
.patient-yesno[b-h5zpdke2t0] {
    display: flex;
    gap: 8px;
}

.patient-yesno-btn[b-h5zpdke2t0] {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-sm);
    background: var(--color-bg, #f9f9f8);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    color: #6b6b67;
    cursor: pointer;
    transition: all var(--transition);
    font-family: var(--font);
    box-shadow: var(--shadow-xs);
}

.patient-yesno-btn:hover[b-h5zpdke2t0] {
    border-color: var(--teal);
    color: var(--teal-text);
    background: var(--teal-bg);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.10);
    transform: translateY(-1px);
}

/* ── Text inputs ──────────────────────────────────────────────── */
.patient-textarea[b-h5zpdke2t0],
.patient-textinput[b-h5zpdke2t0] {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border-sm);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-family: var(--font);
    background: var(--color-bg, #f9f9f8);
    color: #1a1a18;
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-shadow: var(--shadow-xs);
}

.patient-textarea:focus[b-h5zpdke2t0],
.patient-textinput:focus[b-h5zpdke2t0] {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.12);
}

/* ── Multiple choice ──────────────────────────────────────────── */
.patient-choice-list[b-h5zpdke2t0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.patient-choice-item[b-h5zpdke2t0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid var(--border-sm);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #6b6b67;
    cursor: pointer;
    background: var(--color-bg, #f9f9f8);
    transition: all var(--transition);
    box-shadow: var(--shadow-xs);
}

.patient-choice-item:hover[b-h5zpdke2t0] {
    border-color: var(--teal);
    background: var(--teal-bg);
    color: var(--teal-text);
}

.patient-choice-item input[type="radio"][b-h5zpdke2t0] {
    accent-color: var(--teal);
}

/* ── Generic field ────────────────────────────────────────────── */
.patient-generic-field[b-h5zpdke2t0] {
    padding: 10px 13px;
    border: 1px solid var(--border-sm);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: #9e9d98;
    background: var(--color-bg, #f9f9f8);
}

/* ── Submit area ──────────────────────────────────────────────── */
.patient-form-submit[b-h5zpdke2t0] {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 0.5px solid var(--border-xs);
    text-align: center;
}

.patient-submit-btn[b-h5zpdke2t0] {
    padding: 10px 36px;
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.5;
    font-family: var(--font);
    box-shadow: var(--shadow-teal);
}

/* ════════════════════════════════════════════════════════════════
   Animations
   ════════════════════════════════════════════════════════════════ */
@keyframes spin-b-h5zpdke2t0 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInOverlay-b-h5zpdke2t0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp-b-h5zpdke2t0 {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes pulse-dot-b-h5zpdke2t0 {
    0%, 100% { box-shadow: 0 0 0 2px rgba(29, 158, 117, 0.25); }
    50%       { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }
}

/* Thin RTM scrollbar */
.patient-preview-panel[b-h5zpdke2t0]::-webkit-scrollbar { width: 4px; }
.patient-preview-panel[b-h5zpdke2t0]::-webkit-scrollbar-track { background: transparent; }
.patient-preview-panel[b-h5zpdke2t0]::-webkit-scrollbar-thumb {
    background: var(--border-md);
    border-radius: 2px;
}
/* _content/MuseumAdmin/Components/Pages/ChildDetail.razor.rz.scp.css */

    .detail-page-root[b-oq7k16fqvv] {
        animation: fadeIn 0.4s ease-out;
    }

    .header-nav-row[b-oq7k16fqvv] {
        margin-bottom: 20px;
    }

    .btn-back-link[b-oq7k16fqvv] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: color 0.2s;
    }

    .btn-back-link:hover[b-oq7k16fqvv] {
        color: #1e293b;
    }

    .profile-header-card[b-oq7k16fqvv] {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px 32px;
        margin-bottom: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .profile-header-top[b-oq7k16fqvv] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .name-badge-group[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .child-name-display[b-oq7k16fqvv] {
        font-size: 32px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .status-badge-active[b-oq7k16fqvv],
    .status-badge-new[b-oq7k16fqvv],
    .status-badge-inactive[b-oq7k16fqvv] {
        font-size: 12px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 20px;
        border: 1px solid transparent;
    }

    .status-badge-active[b-oq7k16fqvv] {
        background: #ecfdf5;
        color: #059669;
        border-color: rgba(5, 150, 105, 0.1);
    }

    .status-badge-new[b-oq7k16fqvv] {
        background: #eff6ff;
        color: #2563eb;
        border-color: rgba(37, 99, 235, 0.12);
    }

    .status-badge-inactive[b-oq7k16fqvv] {
        background: #f8fafc;
        color: #64748b;
        border-color: rgba(100, 116, 139, 0.15);
    }

    .btn-Provider-actions[b-oq7k16fqvv] {
        background: #6366f1;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-Provider-actions:hover[b-oq7k16fqvv] {
        background: #4f46e5;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
    }

    .profile-header-meta[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .meta-item[b-oq7k16fqvv] {
        display: flex;
        gap: 8px;
        font-size: 14px;
    }

    .meta-label[b-oq7k16fqvv] {
        color: #94a3b8;
        font-weight: 500;
    }

    .meta-value[b-oq7k16fqvv] {
        color: #475569;
        font-weight: 600;
    }

    .meta-divider[b-oq7k16fqvv] {
        width: 1px;
        height: 16px;
        background: #e2e8f0;
    }

    .summary-metrics-row[b-oq7k16fqvv] {
        display: grid;
        grid-template-columns: 1fr 1fr 1.5fr;
        gap: 20px;
        margin-bottom: 24px;
    }

    .summary-metric-card[b-oq7k16fqvv] {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    }

    .metric-title[b-oq7k16fqvv] {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 20px;
    }

    .metric-value-large-row[b-oq7k16fqvv] {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 16px;
    }

    .metric-percentage[b-oq7k16fqvv], .metric-count[b-oq7k16fqvv] {
        font-size: 36px;
        font-weight: 800;
        color: #1e293b;
    }

    .metric-subtext[b-oq7k16fqvv] {
        font-size: 14px;
        color: #94a3b8;
        font-weight: 500;
    }

    .progress-track-wide[b-oq7k16fqvv] {
        height: 10px;
        background: #f1f5f9;
        border-radius: 5px;
        overflow: hidden;
    }

    .progress-fill-solid[b-oq7k16fqvv] {
        height: 100%;
        border-radius: 5px;
    }

    .progress-fill-solid.purple[b-oq7k16fqvv] { background: #6366f1; }

    .program-stacks[b-oq7k16fqvv] {
        display: flex;
        gap: 8px;
    }

    .stack-bar[b-oq7k16fqvv] {
        height: 8px;
        flex: 1;
        border-radius: 4px;
    }

    .stack-bar.green[b-oq7k16fqvv] { background: #10b981; opacity: 0.4; }
    .stack-bar.yellow[b-oq7k16fqvv] { background: #f59e0b; opacity: 0.4; }
    .stack-bar.blue[b-oq7k16fqvv] { background: #3b82f6; opacity: 0.4; }

    .alerts-stack[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .alert-item[b-oq7k16fqvv] {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .alert-icon-circle[b-oq7k16fqvv] {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .alert-icon-circle.warning[b-oq7k16fqvv] { background: #fffbeb; color: #f59e0b; }
    .alert-icon-circle.info[b-oq7k16fqvv] { background: #eff6ff; color: #3b82f6; }

    .alert-text[b-oq7k16fqvv] {
        font-size: 13px;
        line-height: 1.5;
        color: #475569;
        font-weight: 500;
    }

    .program-details-stack[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .clinical-history-section[b-oq7k16fqvv] {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .clinical-notes-stack[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .clinical-note-card[b-oq7k16fqvv] {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    }

    .clinical-note-card:hover[b-oq7k16fqvv] {
        border-color: #cbd5e1;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
        transform: translateY(-2px);
    }

    .note-card-main[b-oq7k16fqvv] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .note-card-meta[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .note-date-badge[b-oq7k16fqvv] {
        width: 52px;
        height: 52px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
    }

    .note-month[b-oq7k16fqvv] {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.05em;
    }

    .note-day[b-oq7k16fqvv] {
        font-size: 20px;
        font-weight: 800;
        color: #1e293b;
    }

    .note-info .note-title[b-oq7k16fqvv] {
        margin: 0 0 2px;
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
    }

    .note-info .note-author[b-oq7k16fqvv] {
        margin: 0;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    .note-card-actions[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .note-status-pill[b-oq7k16fqvv] {
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .note-status-pill.is-final[b-oq7k16fqvv] {
        background: #ecfdf5;
        color: #059669;
    }

    .note-status-pill.is-amended[b-oq7k16fqvv] {
        background: #eff6ff;
        color: #2563eb;
    }

    .btn-amend-note[b-oq7k16fqvv] {
        background: white;
        border: 1px solid #e2e8f0;
        color: #475569;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-amend-note:hover[b-oq7k16fqvv] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .module-history-section[b-oq7k16fqvv] {
        margin-top: 32px;
    }

    .section-heading-row[b-oq7k16fqvv] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .section-kicker[b-oq7k16fqvv] {
        margin: 0 0 6px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #64748b;
    }

    .section-title[b-oq7k16fqvv] {
        margin: 0;
        /* font-size: 24px;
        font-weight: 800; */
        color: #0f172a;
    }

    .section-count[b-oq7k16fqvv] {
        padding: 8px 12px;
        border-radius: 999px;
        background: #f8fafc;
        color: #475569;
        font-size: 13px;
        font-weight: 700;
        border: 1px solid #e2e8f0;
    }

    .module-history-stack[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .module-history-card[b-oq7k16fqvv] {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 32px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .module-history-card:hover[b-oq7k16fqvv] {
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
        transform: translateY(-2px);
    }

    .module-history-header[b-oq7k16fqvv] {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 20px;
    }

    .module-history-title-row[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .module-history-title[b-oq7k16fqvv] {
        margin: 0;
        font-size: 20px;
        font-weight: 800;
        color: #0f172a;
    }

    .module-history-meta[b-oq7k16fqvv] {
        margin: 0;
        font-size: 14px;
        color: #64748b;
        font-weight: 500;
    }

    .module-state-badge[b-oq7k16fqvv],
    .message-state-badge[b-oq7k16fqvv] {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .module-state-badge.is-complete[b-oq7k16fqvv],
    .message-state-badge.is-complete[b-oq7k16fqvv] {
        background: #ecfdf5;
        color: #059669;
        border-color: rgba(5, 150, 105, 0.14);
    }

    .module-state-badge.is-in-progress[b-oq7k16fqvv],
    .message-state-badge.is-pending[b-oq7k16fqvv] {
        background: #fff7ed;
        color: #c2410c;
        border-color: rgba(194, 65, 12, 0.12);
    }

    .module-history-score[b-oq7k16fqvv] {
        min-width: 90px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .module-history-score-value[b-oq7k16fqvv] {
        font-size: 32px;
        font-weight: 800;
        color: #1e293b;
        line-height: 1;
    }

    .module-history-score-label[b-oq7k16fqvv] {
        margin-top: 4px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #94a3b8;
    }

    .module-message-stack[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .module-message-card[b-oq7k16fqvv] {
        background: #fafafa;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .module-message-card:hover[b-oq7k16fqvv] {
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
        transform: translateY(-1px);
    }

    .module-message-header[b-oq7k16fqvv] {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 12px;
    }

    .module-message-title[b-oq7k16fqvv] {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
    }

    .module-message-type[b-oq7k16fqvv] {
        margin: 0;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #64748b;
    }

    .module-message-body[b-oq7k16fqvv] {
        margin: 0 0 16px;
        white-space: pre-line;
        font-size: 14px;
        line-height: 1.6;
        color: #334155;
    }

    .module-message-detail-grid[b-oq7k16fqvv] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 16px;
    }

    .message-detail-item[b-oq7k16fqvv] {
        padding: 16px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        min-height: 72px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .message-detail-item:hover[b-oq7k16fqvv] {
        border-color: #cbd5e1;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
    }

    .message-detail-label[b-oq7k16fqvv] {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #94a3b8;
    }

    .message-detail-value[b-oq7k16fqvv],
    .message-audio-link[b-oq7k16fqvv] {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        word-break: break-word;
    }

    .message-audio-link[b-oq7k16fqvv] {
        text-decoration: none;
        color: #2563eb;
    }

    .message-audio-link:hover[b-oq7k16fqvv] {
        text-decoration: underline;
    }

    .message-images-grid[b-oq7k16fqvv] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px;
    }

    .message-image-card[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        text-align: left;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        overflow: hidden;
        color: inherit;
        padding: 0;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .message-image-card:hover[b-oq7k16fqvv] {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
        border-color: #cbd5e1;
    }

    .message-image-frame[b-oq7k16fqvv] {
        position: relative;
        background:
            radial-gradient(circle at top left, rgba(148, 163, 184, 0.32), transparent 45%),
            linear-gradient(135deg, #e2e8f0, #f8fafc 60%, #e2e8f0);
    }

    .message-image-card img[b-oq7k16fqvv] {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }

    .message-image-overlay[b-oq7k16fqvv] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 12px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.68));
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .message-image-card:hover .message-image-overlay[b-oq7k16fqvv] {
        opacity: 1;
    }

    .message-image-overlay span[b-oq7k16fqvv] {
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .message-image-caption[b-oq7k16fqvv] {
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #475569;
    }

    .image-preview-backdrop[b-oq7k16fqvv] {
        position: fixed;
        inset: 0;
        z-index: 2100;
        background: rgba(15, 23, 42, 0.82);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        animation: fadeInOverlay-b-oq7k16fqvv 0.2s ease-out;
    }

    .image-preview-dialog[b-oq7k16fqvv] {
        width: min(960px, 100%);
        max-height: min(90vh, 900px);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(226, 232, 240, 0.85);
        border-radius: 24px;
        box-shadow: 0 24px 80px rgba(15, 23, 42, 0.32);
        overflow: hidden;
        position: relative;
    }

    .image-preview-close[b-oq7k16fqvv] {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    }

    .image-preview-shell[b-oq7k16fqvv] {
        background:
            radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 38%),
            linear-gradient(135deg, #e2e8f0, #f8fafc 60%, #e2e8f0);
        min-height: 320px;
        max-height: 72vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .image-preview-media[b-oq7k16fqvv] {
        max-width: 100%;
        max-height: calc(72vh - 64px);
        object-fit: contain;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    }

    .image-preview-meta[b-oq7k16fqvv] {
        padding: 18px 24px 24px;
        background: #ffffff;
    }

    .image-preview-caption[b-oq7k16fqvv] {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #334155;
        font-weight: 600;
    }

    .module-empty-state[b-oq7k16fqvv] {
        background: #ffffff;
        border: 1px dashed #cbd5e1;
        border-radius: 16px;
        padding: 28px;
        text-align: center;
    }

    .module-empty-state h3[b-oq7k16fqvv] {
        margin: 0 0 8px;
        font-size: 18px;
        color: #0f172a;
    }

    .module-empty-state p[b-oq7k16fqvv] {
        margin: 0;
        color: #64748b;
    }

    .program-row-card[b-oq7k16fqvv] {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .program-row-card:hover[b-oq7k16fqvv] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .program-title-line[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .program-name[b-oq7k16fqvv] {
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
    }

    .trend-icon.up[b-oq7k16fqvv] { color: #10b981; }
    .trend-icon.neutral[b-oq7k16fqvv] { color: #94a3b8; }

    .program-meta-line[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .meta-p[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    .meta-sep[b-oq7k16fqvv] {
        width: 4px;
        height: 4px;
        background: #cbd5e1;
        border-radius: 50%;
    }

    .program-progress-col[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .completion-text[b-oq7k16fqvv] {
        text-align: right;
    }

    .comp-val[b-oq7k16fqvv] {
        display: block;
        font-size: 24px;
        font-weight: 800;
        color: #1e293b;
    }

    .comp-label[b-oq7k16fqvv] {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: #94a3b8;
        letter-spacing: 0.05em;
    }

    .circular-chart-box[b-oq7k16fqvv] {
        width: 56px;
        height: 56px;
    }

    .circular-chart[b-oq7k16fqvv] {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%;
    }

    .circle-bg[b-oq7k16fqvv] {
        fill: none;
        stroke: #f1f5f9;
        stroke-width: 3.8;
    }

    .circle[b-oq7k16fqvv] {
        fill: none;
        stroke-width: 3.8;
        stroke-linecap: round;
        animation: progress-b-oq7k16fqvv 1s ease-out forwards;
    }

    .circular-chart.green .circle[b-oq7k16fqvv] { stroke: #10b981; }
    .circular-chart.yellow .circle[b-oq7k16fqvv] { stroke: #f59e0b; }

    .program-expand-hint[b-oq7k16fqvv] {
        color: #cbd5e1;
        cursor: pointer;
    }

    .actions-overlay-backdrop[b-oq7k16fqvv] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        animation: fadeInOverlay-b-oq7k16fqvv 0.3s ease-out;
    }

    .actions-menu-card[b-oq7k16fqvv] {
        background: white;
        border-radius: 20px;
        width: 100%;
        max-width: 440px;
        padding: 32px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        animation: slideUpMenu-b-oq7k16fqvv 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .actions-header[b-oq7k16fqvv] {
        margin-bottom: 24px;
    }

    .actions-title[b-oq7k16fqvv] {
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 8px;
    }

    .actions-subtitle[b-oq7k16fqvv] {
        font-size: 16px;
        color: #64748b;
        font-weight: 500;
    }

    .actions-list[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .action-item[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
        width: 100%;
    }

    .action-item:hover[b-oq7k16fqvv] {
        background: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    .action-item.primary-action[b-oq7k16fqvv] {
        background: #f5f7ff;
        border-color: #e0e7ff;
    }

    .action-item.primary-action:hover[b-oq7k16fqvv] {
        background: #eff2ff;
        border-color: #c7d2fe;
    }

    .action-item.low-profile[b-oq7k16fqvv] {
        border-color: transparent;
        padding: 12px 16px;
    }

    .action-item.low-profile:hover[b-oq7k16fqvv] {
        background: #f1f5f9;
        border-color: #e2e8f0;
    }

    .action-icon-box[b-oq7k16fqvv] {
        width: 44px;
        height: 44px;
        background: #eff2ff;
        color: #6366f1;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .action-icon-box.grayscale[b-oq7k16fqvv] {
        background: #f1f5f9;
        color: #475569;
    }

    .action-icon-box.small-icon[b-oq7k16fqvv] {
        width: 36px;
        height: 36px;
    }

    .action-text-box[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
    }

    .action-name[b-oq7k16fqvv] {
        font-size: 16px;
        font-weight: 700;
        color: #1e293b;
    }

    .action-desc[b-oq7k16fqvv] {
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    .actions-divider[b-oq7k16fqvv] {
        height: 1px;
        background: #f1f5f9;
        margin: 8px 0;
    }

    .actions-footer[b-oq7k16fqvv] {
        margin-top: 32px;
    }

    .btn-close-actions[b-oq7k16fqvv] {
        width: 100%;
        padding: 14px;
        background: #ffffff;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        color: #475569;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-close-actions:hover[b-oq7k16fqvv] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    @keyframes fadeInOverlay-b-oq7k16fqvv {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUpMenu-b-oq7k16fqvv {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    @keyframes progress-b-oq7k16fqvv {
        0% { stroke-dasharray: 0 100; }
    }

    @keyframes loadingShimmer-b-oq7k16fqvv {
        0% { background-position: 100% 50%; }
        100% { background-position: 0 50%; }
    }

    .loading-card[b-oq7k16fqvv] {
        overflow: hidden;
    }

    .loading-line[b-oq7k16fqvv],
    .loading-bar[b-oq7k16fqvv],
    .loading-circle[b-oq7k16fqvv],
    .loading-stack-bar[b-oq7k16fqvv],
    .loading-alert-icon[b-oq7k16fqvv] {
        background: linear-gradient(90deg, #e2e8f0 0%, #f8fafc 50%, #e2e8f0 100%);
        background-size: 200% 100%;
        animation: loadingShimmer-b-oq7k16fqvv 1.2s ease-in-out infinite;
    }

    .loading-line[b-oq7k16fqvv] {
        height: 14px;
        border-radius: 999px;
    }

    .loading-line-lg[b-oq7k16fqvv] {
        width: 130px;
        height: 36px;
        margin: 16px 0 10px;
    }

    .loading-line-md[b-oq7k16fqvv] {
        width: 180px;
        margin-bottom: 18px;
    }

    .loading-line-sm[b-oq7k16fqvv] {
        width: 90px;
    }

    .loading-line-fill[b-oq7k16fqvv] {
        width: 100%;
    }

    .loading-line-program-title[b-oq7k16fqvv] {
        width: 220px;
        height: 20px;
        margin-bottom: 14px;
    }

    .loading-line-program-meta[b-oq7k16fqvv] {
        width: 260px;
    }

    .loading-bar[b-oq7k16fqvv] {
        width: 100%;
        height: 12px;
        border-radius: 999px;
    }

    .loading-stack-bar[b-oq7k16fqvv] {
        opacity: 0.9;
    }

    .loading-alert-icon[b-oq7k16fqvv] {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .loading-program-info[b-oq7k16fqvv] {
        gap: 0;
    }

    .loading-program-progress[b-oq7k16fqvv] {
        gap: 16px;
        align-items: center;
    }

    .loading-circle[b-oq7k16fqvv] {
        width: 72px;
        height: 72px;
        border-radius: 50%;
    }

    @media (max-width: 1024px) {
        .summary-metrics-row[b-oq7k16fqvv] {
            grid-template-columns: 1fr;
        }

        .profile-header-top[b-oq7k16fqvv] {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .btn-Provider-actions[b-oq7k16fqvv] {
            width: 100%;
            justify-content: center;
        }

        .program-row-card[b-oq7k16fqvv] {
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }

        .program-progress-col[b-oq7k16fqvv] {
            width: 100%;
            justify-content: space-between;
        }

        .module-history-header[b-oq7k16fqvv],
        .module-message-header[b-oq7k16fqvv],
        .section-heading-row[b-oq7k16fqvv] {
            flex-direction: column;
            align-items: flex-start;
        }

        .module-history-score[b-oq7k16fqvv] {
            align-items: flex-start;
        }

        .module-message-detail-grid[b-oq7k16fqvv] {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 640px) {
        .module-message-detail-grid[b-oq7k16fqvv] {
            grid-template-columns: 1fr;
        }

        .image-preview-backdrop[b-oq7k16fqvv] {
            padding: 12px;
        }

        .image-preview-shell[b-oq7k16fqvv] {
            min-height: 240px;
            padding: 16px;
        }

        .image-preview-meta[b-oq7k16fqvv] {
            padding: 14px 16px 18px;
        }
    }
    .err-msg[b-oq7k16fqvv] {
        display: flex;
        align-items: center;
        color: #e53935; /* red text */
        font-weight: 500;
    }

    .err-icon[b-oq7k16fqvv] {
        margin-right: 6px;
        flex-shrink: 0;
        stroke: #e53935; /* red icon */
    }
/* moved from Components/Pages/ChildDetail.razor */
    .cn-debug-section[b-oq7k16fqvv] {
        margin-top: 24px;
        padding: 16px;
        background: #F8FAFC;
        border: 1px dashed #CBD5E1;
        border-radius: 12px;
    }

    .cn-debug-title[b-oq7k16fqvv] {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #64748B;
        font-weight: 700;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cn-debug-control[b-oq7k16fqvv] {
        margin-bottom: 12px;
    }

    .cn-debug-label[b-oq7k16fqvv] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #475569;
        margin-bottom: 6px;
    }

    .cn-debug-slider[b-oq7k16fqvv] {
        width: 100%;
        accent-color: #6366F1;
    }

    /* CPT Guide Modal */
    .cpt-guide-overlay[b-oq7k16fqvv] {
        position: fixed;
        inset: 0;
        z-index: 20000;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        animation: fadeInOverlay-b-oq7k16fqvv 0.2s ease-out;
    }

    .cpt-guide-modal[b-oq7k16fqvv] {
        width: 100%;
        max-width: 960px;
        max-height: 90vh;
        background: white;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cpt-guide-header[b-oq7k16fqvv] {
        padding: 24px 32px;
        border-bottom: 1px solid #E2E8F0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cpt-guide-body[b-oq7k16fqvv] {
        padding: 0;
        overflow-y: auto;
    }

    .cpt-table-container[b-oq7k16fqvv] {
        padding: 20px;
    }

    .cpt-table[b-oq7k16fqvv] {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .cpt-table th[b-oq7k16fqvv] {
        text-align: left;
        background: #F8FAFC;
        padding: 12px 16px;
        font-weight: 700;
        color: #475569;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid #E2E8F0;
    }

    .cpt-table td[b-oq7k16fqvv] {
        padding: 16px;
        border-bottom: 1px solid #F1F5F9;
        vertical-align: top;
    }

    .cpt-table tr:hover td[b-oq7k16fqvv] {
        background: #F8FAFC;
    }

    .cpt-code-pill[b-oq7k16fqvv] {
        display: inline-block;
        background: #EEF2FF;
        color: #4F46E5;
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 700;
        font-family: monospace;
    }

    .cpt-cat-header[b-oq7k16fqvv] {
        background: #F1F5F9 !important;
        font-weight: 800;
        color: #1E293B;
    }

    .cn-text-link[b-oq7k16fqvv] {
        background: none;
        border: none;
        padding: 0;
        color: #6366F1;
        font-size: 12px;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
        margin-top: 12px;
        display: inline-block;
    }

    .cn-debug-backdrop[b-oq7k16fqvv] {
        position: fixed;
        inset: 0;
        z-index: 21000;
        background: rgba(15, 23, 42, 0.58);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        animation: fadeInOverlay-b-oq7k16fqvv 0.2s ease-out;
    }

    .cn-debug-modal[b-oq7k16fqvv] {
        width: 100%;
        max-width: 680px;
        max-height: 90vh;
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .cn-debug-header[b-oq7k16fqvv] {
        padding: 24px 28px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .cn-debug-modal-title[b-oq7k16fqvv] {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.02em;
    }

    .cn-debug-modal-subtitle[b-oq7k16fqvv] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.5;
    }

    .cn-debug-close[b-oq7k16fqvv] {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        color: #64748b;
        display: grid;
        place-items: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .cn-debug-close:hover[b-oq7k16fqvv] {
        color: #0f172a;
        border-color: #cbd5e1;
    }

    .cn-debug-body[b-oq7k16fqvv] {
        padding: 24px 28px 28px;
        overflow-y: auto;
    }

    .cn-debug-grid[b-oq7k16fqvv] {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 16px;
    }

    .cn-debug-card[b-oq7k16fqvv] {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #f8fafc;
        padding: 18px;
    }

    .cn-debug-summary[b-oq7k16fqvv] {
        background: #ffffff;
    }

    .cn-debug-input[b-oq7k16fqvv] {
        width: 100%;
        margin-top: 10px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        color: #0f172a;
        background: #ffffff;
        outline: none;
    }

    .cn-debug-input:focus[b-oq7k16fqvv] {
        border-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    }

    .cn-debug-action-row[b-oq7k16fqvv] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    .cn-debug-action[b-oq7k16fqvv] {
        border: 1px solid #f59e0b;
        background: #fff7ed;
        color: #9a3412;
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .cn-debug-action.secondary[b-oq7k16fqvv] {
        border-color: #cbd5e1;
        background: #ffffff;
        color: #475569;
    }

    .cn-debug-summary-row[b-oq7k16fqvv] {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 0;
        border-bottom: 1px solid #e2e8f0;
        font-size: 14px;
    }

    .cn-debug-summary-row:last-child[b-oq7k16fqvv] {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .cn-debug-summary-row span[b-oq7k16fqvv] {
        color: #64748b;
        font-weight: 600;
    }

    .cn-debug-summary-row strong[b-oq7k16fqvv] {
        color: #0f172a;
        font-weight: 800;
        text-align: right;
    }

    .cn-debug-revenue-card[b-oq7k16fqvv] {
        margin-top: 16px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 18px;
    }

    .cn-debug-section-head[b-oq7k16fqvv] {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .cn-debug-helper[b-oq7k16fqvv] {
        margin-top: 4px;
        font-size: 12px;
        color: #64748b;
        line-height: 1.4;
    }

    .cn-debug-live-value[b-oq7k16fqvv] {
        font-size: 13px;
        color: #475569;
        white-space: nowrap;
    }

    .cn-debug-live-value strong[b-oq7k16fqvv] {
        color: #0f172a;
        font-size: 16px;
    }

    .cn-debug-revenue-group[b-oq7k16fqvv] {
        padding-top: 14px;
        margin-top: 14px;
        border-top: 1px solid #e2e8f0;
    }

    .cn-debug-revenue-group:first-of-type[b-oq7k16fqvv] {
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
    }

    .cn-debug-revenue-group-title[b-oq7k16fqvv] {
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #475569;
    }

    .cn-debug-revenue-grid[b-oq7k16fqvv] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .cn-debug-revenue-item[b-oq7k16fqvv] {
        min-width: 0;
    }

    .cn-debug-footnote[b-oq7k16fqvv] {
        margin-top: 16px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.5;
    }

    @media (max-width: 720px) {
        .cn-debug-grid[b-oq7k16fqvv],
        .cn-debug-revenue-grid[b-oq7k16fqvv] {
            grid-template-columns: 1fr;
        }

        .cn-debug-section-head[b-oq7k16fqvv] {
            flex-direction: column;
        }
    }

    .cn-text-link:hover[b-oq7k16fqvv] {
        color: #4F46E5;
    }

    .debug-timer-sticker[b-oq7k16fqvv] {
        position: fixed;
        bottom: 24px;
        right: 24px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        padding: 14px 20px;
        display: flex;
        align-items: center;
        gap: 14px;
        color: white;
        z-index: 1000;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
        animation: slideUpMenu-b-oq7k16fqvv 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .debug-timer-icon[b-oq7k16fqvv] {
        color: #22c55e;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(34, 197, 94, 0.15);
        border-radius: 50%;
        padding: 8px;
    }

    .debug-timer-content[b-oq7k16fqvv] {
        display: flex;
        flex-direction: column;
    }

    .debug-timer-name[b-oq7k16fqvv] {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .debug-timer-time[b-oq7k16fqvv] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1;
        color: #f8fafc;
    }
/* _content/MuseumAdmin/Components/Pages/Children.razor.rz.scp.css */
@keyframes fadeIn-b-5om69k7o2o {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.fade-in[b-5om69k7o2o] {
    animation: fadeIn-b-5om69k7o2o 0.4s ease-out forwards;
}

.children-header-row[b-5om69k7o2o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding: 0 4px;
}

.page-title-main[b-5om69k7o2o] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.header-meta[b-5om69k7o2o] {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.dot-sep[b-5om69k7o2o] {
    margin: 0 6px;
    color: #cbd5e1;
}

.text-warning-strong[b-5om69k7o2o] {
    color: #f59e0b;
    font-weight: 600;
}

.stat-box[b-5om69k7o2o] {
    text-align: right;
}

.stat-label[b-5om69k7o2o] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.stat-number-big[b-5om69k7o2o] {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

/* View Toggle Buttons */
.view-toggle-container[b-5om69k7o2o] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.view-toggle-btn[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.view-toggle-btn:hover[b-5om69k7o2o] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.view-toggle-btn.active[b-5om69k7o2o] {
    background: #eef2ff;
    border-color: #818cf8;
    color: #4f46e5;
}

.view-toggle-btn.active svg[b-5om69k7o2o] {
    color: #4f46e5;
}

.search-sort-row[b-5om69k7o2o] {
    margin-bottom: 24px;
}

/* Control Surface */
.children-controls-surface[b-5om69k7o2o] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.search-wrapper-modern[b-5om69k7o2o] {
    flex: 1;
    position: relative;
    max-width: 500px;
    /* Slightly larger */
}

.search-icon[b-5om69k7o2o] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    width: 20px;
    height: 20px;
}

.search-input-field[b-5om69k7o2o] {
    width: 100%;
    padding: 14px 16px 14px 48px;
    /* More prominent padding */
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    /* Larger text */
    background: #f8fafc;
    transition: all 0.2s;
    outline: none;
    color: #1e293b;
}

.search-input-field:focus[b-5om69k7o2o] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.controls-right-group[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.filter-pills-group[b-5om69k7o2o] {
    display: flex;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 12px;
    gap: 4px;
}

.filter-pill-btn[b-5om69k7o2o] {
    padding: 10px 20px;
    /* Larger touch target */
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.filter-pill-btn.active[b-5om69k7o2o] {
    background: #ffffff;
    color: #4f46e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-dropdown-modern[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    /* Larger touch target */
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s;
}

.badge-count-inline[b-5om69k7o2o] {
    background: #eef2ff;
    color: #4f46e5;
    padding: 2px 10px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 12px;
}

.header-stats-hidden[b-5om69k7o2o] {
    display: none;
}

.btn-dropdown-modern:hover[b-5om69k7o2o] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* Clickable Cards - Scoped using ::deep because they are inside NavLink */
.children-cards-stack[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.child-nav-link[b-5om69k7o2o] {
    text-decoration: none;
    color: inherit;
    display: block;
}

[b-5om69k7o2o] .child-card-premium {
    background: #ffffff;
    border: 0.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    color: #1e293b;
}

[b-5om69k7o2o] .child-card-premium.has-alert {
    border-left: 4px solid #ef4444;
    background: #fffafa;
}

.child-nav-link:hover[b-5om69k7o2o]  .child-card-premium {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(148, 163, 184, 0.12);
    transform: translateY(-2px);
}

[b-5om69k7o2o] .card-tag-attention {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fffbeb;
    color: #f59e0b;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    border: 1px solid #fef3c7;
}

[b-5om69k7o2o] .card-identity-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

[b-5om69k7o2o] .card-top-identity {
    display: flex;
    gap: 16px;
    align-items: center;
}

[b-5om69k7o2o] .child-avatar-box {
    width: 48px;
    height: 48px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}

[b-5om69k7o2o] .status-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

[b-5om69k7o2o] .status-indicator.active {
    background-color: #10b981;
}

[b-5om69k7o2o] .status-indicator.new {
    background-color: #3b82f6;
}

[b-5om69k7o2o] .status-indicator.inactive {
    background-color: #94a3b8;
}

[b-5om69k7o2o] .status-indicator.attention {
    background-color: #ef4444;
}

[b-5om69k7o2o] .child-info-main {
    display: flex;
    flex-direction: column;
}

[b-5om69k7o2o] .identity-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-5om69k7o2o] .child-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

[b-5om69k7o2o] .child-meta {
    font-size: 13px;
    color: #64748b;
}

[b-5om69k7o2o] .dot-separator-small {
    width: 3px;
    height: 3px;
    background-color: #cbd5e1;
    border-radius: 50%;
    margin: 0 4px;
}

[b-5om69k7o2o] .child-age-muted {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

[b-5om69k7o2o] .status-row-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

[b-5om69k7o2o] .badge-active-green {
    font-size: 10px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    border: 1px solid rgba(22, 163, 74, 0.1);
}

[b-5om69k7o2o] .badge-active-blue {
    font-size: 10px;
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

[b-5om69k7o2o] .badge-active-gray {
    font-size: 10px;
    font-weight: 800;
    color: #4b5563;
    background: #f3f4f6;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    border: 1px solid rgba(75, 85, 99, 0.1);
}

[b-5om69k7o2o] .badge-active-red {
    font-size: 10px;
    font-weight: 800;
    color: #dc2626;
    background: #fef2f2;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    border: 1px solid rgba(220, 38, 38, 0.1);
}

[b-5om69k7o2o] .last-active-muted {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
}

[b-5om69k7o2o] .chevron-arrow {
    color: #cbd5e1;
    transition: all 0.2s;
}

.child-nav-link:hover[b-5om69k7o2o]  .chevron-arrow {
    color: #3b82f6;
    transform: translateX(4px);
}

/* Metrics Section */
[b-5om69k7o2o] .card-bottom-grid {
    display: grid;
    grid-template-columns: 2.2fr 1.2fr 1fr;
    gap: 20px;
    border-top: 0.5px solid #f1f5f9;
    padding-top: 12px;
}

[b-5om69k7o2o] .metric-label-small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

[b-5om69k7o2o] .progress-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

[b-5om69k7o2o] .progress-value-main {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
}

[b-5om69k7o2o] .trend-up {
    color: #10b981;
}

[b-5om69k7o2o] .trend-down {
    color: #f59e0b;
}

[b-5om69k7o2o] .trend-neutral {
    color: #cbd5e1;
    font-weight: 800;
}

[b-5om69k7o2o] .progress-track-bg {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    width: 100%;
    max-width: 280px;
    overflow: hidden;
}

[b-5om69k7o2o] .progress-fill-themed {
    height: 100%;
    border-radius: 10px;
}

[b-5om69k7o2o] .progress-fill-themed.green {
    background-color: #10b981;
}

[b-5om69k7o2o] .progress-fill-themed.purple {
    background-color: #6366f1;
}

[b-5om69k7o2o] .progress-fill-themed.orange {
    background-color: #f59e0b;
}

[b-5om69k7o2o] .sub-metric-value {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    display: block;
    line-height: 1.1;
}

[b-5om69k7o2o] .sub-metric-value.muted {
    color: #cbd5e1;
}

[b-5om69k7o2o] .sub-metric-value.danger {
    color: #ef4444;
}

[b-5om69k7o2o] .sub-metric-tag {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
}

@media (max-width: 1024px) {
    [b-5om69k7o2o] .card-bottom-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .children-header-row[b-5om69k7o2o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .stat-box[b-5om69k7o2o] {
        text-align: left;
    }

    .children-controls-surface[b-5om69k7o2o] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrapper-modern[b-5om69k7o2o] {
        max-width: none;
    }

    .controls-right-group[b-5om69k7o2o] {
        justify-content: space-between;
    }

    [b-5om69k7o2o] .card-tag-attention {
        position: static;
        margin-bottom: 12px;
        width: fit-content;
    }
}

/* Families View Styles */
.families-stack[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Increased gap */
    margin-top: 12px;
}

.family-card-outer[b-5om69k7o2o] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.family-card-outer.fam-needs-attention[b-5om69k7o2o] {
    border-color: #f59e0b;
    background: #fffcf5;
    /* Light amber tint */
}

.family-card-outer:hover[b-5om69k7o2o] {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.family-card-outer.fam-needs-attention:hover[b-5om69k7o2o] {
    border-color: #d97706;
}

.family-header[b-5om69k7o2o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: flex-start;
    column-gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.family-intro[b-5om69k7o2o] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.family-icon-box[b-5om69k7o2o] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

/* Varied Icon Colors */
.fam-color-indigo .family-icon-box[b-5om69k7o2o] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.fam-color-amber .family-icon-box[b-5om69k7o2o] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

.fam-color-purple .family-icon-box[b-5om69k7o2o] {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2);
}

.alert-inline-icon[b-5om69k7o2o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    margin-left: 8px;
    vertical-align: middle;
}

.parent-name[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.family-meta-text[b-5om69k7o2o] {
    font-size: 13px;
    color: #64748b;
}

.family-overall-stats[b-5om69k7o2o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 10px 12px;
    align-items: stretch;
}

.attention-needed-text[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    color: #f59e0b;
    font-size: 12px;
    font-weight: 600;
    grid-column: 1 / -1;
    justify-self: end;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    padding: 5px 10px;
}

.fam-stat[b-5om69k7o2o] {
    text-align: right;
    min-width: 130px;
    padding: 10px 12px;
    /* border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc; */
}

.fam-stat-label[b-5om69k7o2o] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.fam-stat-value[b-5om69k7o2o] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.fam-stat-value.success[b-5om69k7o2o] {
    color: #10b981;
}

.fam-stat-value.warning[b-5om69k7o2o] {
    color: #f59e0b;
}

.fam-stat-value.danger[b-5om69k7o2o] {
    color: #ef4444;
}

.fam-stat-value.muted[b-5om69k7o2o] {
    color: #cbd5e1;
}

.fam-actions[b-5om69k7o2o] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-left: 0;
    align-items: center;
    justify-self: end;
}

.fam-actions .chat-btn-icon[b-5om69k7o2o],
.fam-actions .assign-btn-icon[b-5om69k7o2o] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 12px;
    justify-content: center;
    gap: 0;
}

.chat-btn-family[b-5om69k7o2o],
.assign-btn-family[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 100px;
}

.chat-btn-family[b-5om69k7o2o] {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-btn-family:hover[b-5om69k7o2o] {
    background: #f8fafc;
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.chat-btn-family:active[b-5om69k7o2o] {
    transform: translateY(0);
}

.assign-btn-family[b-5om69k7o2o] {
    background: #3b82f6;
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}

.assign-btn-family:hover[b-5om69k7o2o] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

.assign-btn-family:active[b-5om69k7o2o] {
    transform: translateY(0);
}

/* Family Children Grid */
.family-children-grid[b-5om69k7o2o] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.family-children-grid.single[b-5om69k7o2o] {
    grid-template-columns: 1fr;
    max-width: 420px;
}

.child-tile[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    outline: none;
}

.child-tile:focus[b-5om69k7o2o] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.child-tile:hover[b-5om69k7o2o] {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.2);
    transform: translateY(-4px);
    z-index: 2;
}


/* Sibling-dim removed: it caused confusing visual noise for clinical users
   scanning multiple children simultaneously. Each tile should stand
   independently on hover. */

.trend-up[b-5om69k7o2o] {
    color: #10b981;
    font-weight: 900;
}

.trend-down[b-5om69k7o2o] {
    color: #f59e0b;
    font-weight: 900;
}

.tm-val.success[b-5om69k7o2o] {
    color: #059669;
    /* Slightly darker/bolder green */
    font-weight: 950;
}

.tm-val.warning[b-5om69k7o2o] {
    color: #d97706;
    /* Slightly darker/bolder amber */
    font-weight: 950;
}

[b-5om69k7o2o] .tile-top {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

[b-5om69k7o2o] .tile-avatar {
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.child-tile:hover .tile-avatar[b-5om69k7o2o] {
    transform: scale(1.1);
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}

[b-5om69k7o2o] .tile-info {
    flex: 1;
}

[b-5om69k7o2o] .tile-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-5om69k7o2o] .tile-name {
    font-weight: 800;
    color: #0f172a;
    font-size: 16px;
    transition: all 0.2s ease;
}

.child-tile:hover .tile-name[b-5om69k7o2o] {
    color: #3b82f6 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

[b-5om69k7o2o] .tile-age {
    font-size: 13px;
    color: #64748b;
}

[b-5om69k7o2o] .tile-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

[b-5om69k7o2o] .tile-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.05em;
}

[b-5om69k7o2o] .tile-badge.active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.1);
}

[b-5om69k7o2o] .tile-badge.paused {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.1);
}

[b-5om69k7o2o] .tile-time {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

[b-5om69k7o2o] .tile-chevron {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #cbd5e1;
    transition: all 0.2s ease;
}

.child-tile:hover[b-5om69k7o2o]  .tile-chevron {
    color: #3b82f6;
    transform: translateX(4px);
}

[b-5om69k7o2o] .tile-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

[b-5om69k7o2o] .tile-metric {
    display: flex;
    flex-direction: column;
}

[b-5om69k7o2o] .tm-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

[b-5om69k7o2o] .tm-val-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-5om69k7o2o] .tm-val {
    font-size: 16px;
    font-weight: 800;
}

[b-5om69k7o2o] .tm-val.success {
    color: #10b981;
}

[b-5om69k7o2o] .tm-val.warning {
    color: #f59e0b;
}

[b-5om69k7o2o] .tm-val-big {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

[b-5om69k7o2o] .tm-val-big.muted {
    color: #cbd5e1;
}

[b-5om69k7o2o] .tm-val-big.danger {
    color: #ef4444;
}

[b-5om69k7o2o] .tm-trend-neutral {
    color: #cbd5e1;
    font-weight: 800;
}

[b-5om69k7o2o] .dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

[b-5om69k7o2o] .dot-indicator.warning {
    background-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

@media (max-width: 1024px) {
    .family-children-grid[b-5om69k7o2o] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .family-header[b-5om69k7o2o] {
        grid-template-columns: 1fr;
        row-gap: 14px;
        align-items: start;
    }

    .family-overall-stats[b-5om69k7o2o] {
        width: 100%;
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 10px;
    }

    .fam-stat[b-5om69k7o2o] {
        text-align: left;
    }

    .attention-needed-text[b-5om69k7o2o] {
        justify-self: start;
    }

    .fam-actions[b-5om69k7o2o] {
        justify-self: start;
    }

    .family-children-grid.single[b-5om69k7o2o] {
        max-width: none;
    }
}

@media (max-width: 520px) {
    .family-overall-stats[b-5om69k7o2o] {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PREMIUM CONSOLIDATED STYLES
   ========================================= */

/* Control Bar & Search */
.control-bar[b-5om69k7o2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.search-box[b-5om69k7o2o] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box svg[b-5om69k7o2o] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-box input[b-5om69k7o2o] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
}

.search-box input:focus[b-5om69k7o2o] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.control-actions[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-filters[b-5om69k7o2o] {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
}

.btn-filter-tag[b-5om69k7o2o] {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filter-tag.active[b-5om69k7o2o] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Families Stack Premium */
.families-stack-premium[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.family-card-outer-premium[b-5om69k7o2o] {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.family-card-outer-premium:hover[b-5om69k7o2o] {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.05);
}

.family-header-row-premium[b-5om69k7o2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.family-intro-group-premium[b-5om69k7o2o] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.family-icon-box-themed-premium[b-5om69k7o2o] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.fam-color-indigo-premium .family-icon-box-themed-premium[b-5om69k7o2o] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.fam-color-amber-premium .family-icon-box-themed-premium[b-5om69k7o2o] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.fam-color-purple-premium .family-icon-box-themed-premium[b-5om69k7o2o] {
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
}

.fam-color-blue-premium .family-icon-box-themed-premium[b-5om69k7o2o] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.parent-entry-premium[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 12px;
}

.badge-parent-premium[b-5om69k7o2o] {
    background: #eef2ff;
    color: #4f46e5;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.parent-name-bold-premium[b-5om69k7o2o] {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

/* Groups View Premium */
.groups-stack-premium[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Children Cards */
.children-cards-stack[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.child-card-premium[b-5om69k7o2o] {
    background: #ffffff;
    border: 0.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    color: #1e293b;
}

.child-card-premium.has-alert[b-5om69k7o2o] {
    border-left: 4px solid #ef4444;
    background: #fffafa;
}

.child-card-premium:hover[b-5om69k7o2o] {
    border-color: #3b82f6;
    box-shadow: 0 8px 16px rgba(148, 163, 184, 0.08);
    transform: translateY(-1px);
}

.card-identity-row[b-5om69k7o2o] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.card-top-identity[b-5om69k7o2o] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.child-avatar-box[b-5om69k7o2o] {
    width: 44px;
    height: 44px;
    background: #f0f7ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.05);
}

.status-indicator[b-5om69k7o2o] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
}

.status-indicator.active[b-5om69k7o2o] {
    background-color: #10b981;
}

.status-indicator.new[b-5om69k7o2o] {
    background-color: #3b82f6;
}

.status-indicator.inactive[b-5om69k7o2o] {
    background-color: #94a3b8;
}

.child-info-main[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
}

.child-name[b-5om69k7o2o] {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.child-meta[b-5om69k7o2o] {
    font-size: 12px;
    color: #64748b;
}

.dot-separator-small[b-5om69k7o2o] {
    width: 3px;
    height: 3px;
    background-color: #cbd5e1;
    border-radius: 50%;
    margin: 0 4px;
}

.status-row-modern[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

/* NOTE: .card-actions-right, .assign-btn-icon, .chat-btn-icon moved to children-premium.css
   global stylesheet to avoid scoped duplication. */

/* Spinner animation for loading state */
@keyframes spin-b-5om69k7o2o {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-modern[b-5om69k7o2o] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-5om69k7o2o 1s linear infinite;
    margin: 0 auto;
}

/* Adherence Bars */
.adherence-bar-container[b-5om69k7o2o] {
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
}

.adherence-bar-fill[b-5om69k7o2o] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.adherence-val[b-5om69k7o2o] {
    font-size: 24px;
    font-weight: 800;
    color: #10b981;
    display: block;
    margin-bottom: 4px;
}

/* Timing modal must appear above assignment drawer (drawer z-index: 1050) */
.modal-backdrop[b-5om69k7o2o] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-dialog[b-5om69k7o2o] {
    width: 100%;
    max-width: 960px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.timing-modal-overlay.modal-backdrop[b-5om69k7o2o] {
    z-index: 1100;
}

.timing-modal-overlay .modal-dialog[b-5om69k7o2o] {
    z-index: 1101;
}

/* =========================================
   10. TIMING MODAL & SCHEDULE BUTTON PREMIUM
   ========================================= */

/* The modal container */
.modal-timing[b-5om69k7o2o] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 32px;
    width: 100%;
    max-width: 540px;
    border: none;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.modal-timing .modal-header[b-5om69k7o2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.modal-timing .modal-header h3[b-5om69k7o2o] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.modal-timing .btn-close-modal[b-5om69k7o2o] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-timing .btn-close-modal:hover[b-5om69k7o2o] {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}

/* Toggle Buttons */
.modal-timing .timing-type-toggle[b-5om69k7o2o] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 24px;
    gap: 4px;
}

.modal-timing .toggle-btn[b-5om69k7o2o] {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-timing .toggle-btn.active[b-5om69k7o2o] {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.modal-timing .completion-limit-section .timing-type-toggle[b-5om69k7o2o] {
    margin-bottom: 16px;
}

/* Form Inputs within Modal */
.modal-timing .form-input[b-5om69k7o2o],
.modal-timing .form-select[b-5om69k7o2o] {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
    outline: none;
    box-sizing: border-box;
}

.modal-timing .form-input:focus[b-5om69k7o2o],
.modal-timing .form-select:focus[b-5om69k7o2o] {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modal-timing .form-group[b-5om69k7o2o] {
    margin-bottom: 24px;
}

.modal-timing .form-label[b-5om69k7o2o],
.modal-timing .section-label[b-5om69k7o2o] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

/* Relative Timing Row specific layout */
.modal-timing .relative-timing-section .timing-row[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.modal-timing .timing-val[b-5om69k7o2o] {
    width: 80px;
    text-align: center;
}

.modal-timing .timing-unit-select[b-5om69k7o2o] {
    flex: 1;
}

.modal-timing .timing-ref-select[b-5om69k7o2o] {
    flex: 2;
}

.modal-timing .timing-label[b-5om69k7o2o] {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}

/* Checkboxes */
.modal-timing .checkbox-group-premium[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.modal-timing .checkbox-container[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.modal-timing .checkbox-container input[b-5om69k7o2o] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* Footer Buttons */
.modal-timing .modal-footer[b-5om69k7o2o] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.modal-timing .btn-modal-secondary[b-5om69k7o2o],
.modal-timing .btn-modal-primary[b-5om69k7o2o] {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-timing .btn-modal-secondary[b-5om69k7o2o] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.modal-timing .btn-modal-secondary:hover[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #1e293b;
}

.modal-timing .btn-modal-primary[b-5om69k7o2o] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.modal-timing .btn-modal-primary:hover[b-5om69k7o2o] {
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

/* Schedule Button row uplift */
.btn-assign-exercise-row[b-5om69k7o2o] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-assign-exercise-row:hover[b-5om69k7o2o] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.exercise-item-row.selected .btn-assign-exercise-row[b-5om69k7o2o] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.exercise-item-row.selected .btn-assign-exercise-row:hover[b-5om69k7o2o] {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* Chat Unread Badge */
.chat-btn-icon[b-5om69k7o2o] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unread-dot-badge[b-5om69k7o2o] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #ef4444;
    /* red-500 */
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
    z-index: 2;
}

/* Module Actions Group */
.module-actions-group[b-5om69k7o2o] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-schedule-module[b-5om69k7o2o] {
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-schedule-module:hover[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-schedule-module:disabled[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
    opacity: 0.75;
}

.btn-schedule-module:disabled:hover[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #94a3b8;
}

.exercise-row-actions[b-5om69k7o2o] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: 12px;
}

.btn-schedule-exercise[b-5om69k7o2o] {
    padding: 6px 10px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-schedule-exercise:hover[b-5om69k7o2o] {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.btn-schedule-exercise:disabled[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
}

.exercise-content[b-5om69k7o2o] {
    flex: 1;
    min-width: 0;
}

.exercise-info-row[b-5om69k7o2o] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.exercise-main[b-5om69k7o2o] {
    flex: 1;
    min-width: 0;
}

.exercise-title-row[b-5om69k7o2o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.exercise-icon[b-5om69k7o2o] {
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exercise-text h5[b-5om69k7o2o] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.exercise-main p[b-5om69k7o2o] {
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
}

.btn-schedule-selected[b-5om69k7o2o] {
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    background: #ffffff;
    color: #3b82f6;
    border: 1.5px solid #3b82f6;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-schedule-selected:hover[b-5om69k7o2o] {
    background: #f0f7ff;
    transform: translateY(-1px);
}

.btn-assign-module:disabled[b-5om69k7o2o],
.btn-assign-selected:disabled[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    box-shadow: none;
    opacity: 0.75;
    cursor: not-allowed;
}

.btn-assign-module:disabled:hover[b-5om69k7o2o],
.btn-assign-selected:disabled:hover[b-5om69k7o2o] {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    transform: none;
}

/* Modal Helper Classes */
.timing-divider[b-5om69k7o2o] {
    height: 1px;
    background: #f1f5f9;
    margin: 24px 0;
}

.form-label-sm[b-5om69k7o2o] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

.timing-options-list[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-item[b-5om69k7o2o] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s;
}

.option-item:hover[b-5om69k7o2o] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.option-text[b-5om69k7o2o] {
    display: flex;
    flex-direction: column;
}

.option-title[b-5om69k7o2o] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.option-desc[b-5om69k7o2o] {
    font-size: 12px;
    color: #64748b;
    margin: 2px 0 0 0;
}

/* Checkbox Override for Modal */
.modal-timing .checkbox-container[b-5om69k7o2o] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    position: relative;
    padding-left: 0;
    margin-bottom: 0;
}

.modal-timing .checkbox-container input[b-5om69k7o2o] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
    cursor: pointer;
}

/* Assigned Therapies in Card */
[b-5om69k7o2o] .card-assigned-therapies {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 0.5px solid #f1f5f9;
}

[b-5om69k7o2o] .therapies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

[b-5om69k7o2o] .therapies-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.08em;
}

[b-5om69k7o2o] .therapies-count {
    font-size: 11px;
    font-weight: 800;
    color: #4f46e5;
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 99px;
}

[b-5om69k7o2o] .therapies-scroll-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-5om69k7o2o] .therapy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s;
}

[b-5om69k7o2o] .therapy-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

[b-5om69k7o2o] .pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #64748b;
    color: #ffffff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
}

[b-5om69k7o2o] .card-assigned-therapies.group-version {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(226, 232, 240, 0.4);
}

[b-5om69k7o2o] .card-assigned-therapies.group-version .therapies-label {
    font-size: 10px;
    color: #94a3b8;
}

[b-5om69k7o2o] .therapy-pill.source-family {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

[b-5om69k7o2o] .therapy-pill.source-family .pill-badge {
    background: #f59e0b;
}

[b-5om69k7o2o] .therapy-pill.source-group {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0369a1;
}

[b-5om69k7o2o] .therapy-pill.source-group .pill-badge {
    background: #0ea5e9;
}

[b-5om69k7o2o] .therapy-pill.clickable-pill {
    cursor: pointer;
    transition: all 0.2s;
}

[b-5om69k7o2o] .therapy-pill.clickable-pill:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
}
/* _content/MuseumAdmin/Components/Pages/Connect.razor.rz.scp.css */
/* =========================================
   CONTENT MANAGEMENT - PRODUCTION GRADE UI
   ========================================= */

/* -----------------------------------------
   1. BASE ANIMATIONS
   ----------------------------------------- */
.fade-in[b-53liamc6uf] {
    animation: fadeIn-b-53liamc6uf 0.4s ease-out;
}

@keyframes fadeIn-b-53liamc6uf {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes pulse-b-53liamc6uf {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

/* -----------------------------------------
   2. PAGE HEADER
   ----------------------------------------- */
/* .page-header {
    margin-bottom: 32px;
} */

.page-title-main[b-53liamc6uf] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

/* -----------------------------------------
   3. CONTENT TABS
   ----------------------------------------- */
.content-tabs[b-53liamc6uf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 24px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
    border: 1px solid #f1f5f9;
    margin-bottom: 32px;
}

.content-tab[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.content-tab:hover[b-53liamc6uf] {
    background: #f8fafc;
    color: #3b82f6;
}

.content-tab.active[b-53liamc6uf] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%);
    color: var(--color-accent);
    border-color: rgba(59, 130, 246, 0.2);
    font-weight: 600;
}

.content-tab svg[b-53liamc6uf] {
    flex-shrink: 0;
    opacity: 0.7;
}

.content-tab.active svg[b-53liamc6uf] {
    opacity: 1;
}

/* Dashboard Wrapper */
.dashboard-wrapper[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 1. Stats Hub */
.stats-hub[b-53liamc6uf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.stat-card[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease;
}

.stat-card:hover[b-53liamc6uf] {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.stat-icon[b-53liamc6uf] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon Colors */
.stat-icon.folder[b-53liamc6uf] {
    background: #eff6ff;
    color: #3b82f6;
}

.stat-icon.trend[b-53liamc6uf] {
    background: #f0fdf4;
    color: #22c55e;
}

.stat-icon.users[b-53liamc6uf] {
    background: #f5f3ff;
    color: #8b5cf6;
}

.stat-icon.zones[b-53liamc6uf] {
    background: #fff7ed;
    color: #f97316;
}

.stat-info[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-53liamc6uf] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

/* 2. Control Bar */
.control-bar[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-box[b-53liamc6uf] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box svg[b-53liamc6uf] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-box input[b-53liamc6uf] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
}

.search-box input:focus[b-53liamc6uf] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Filters & Actions */
.control-actions[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-filters[b-53liamc6uf] {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
}

.btn-filter-tag[b-53liamc6uf] {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filter-tag:hover[b-53liamc6uf] {
    color: #475569;
}

.btn-filter-tag.active[b-53liamc6uf] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-filter[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filter:hover[b-53liamc6uf] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
}

.btn-delete-bulk[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-bulk:hover[b-53liamc6uf] {
    background: #fee2e2;
    border-color: #ef4444;
}

.view-toggles[b-53liamc6uf] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
}

.view-toggle[b-53liamc6uf] {
    padding: 6px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    transition: all 0.2s ease;
}

.view-toggle.active[b-53liamc6uf] {
    background: #ffffff;
    color: #3b82f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-primary-action[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-primary-action:hover[b-53liamc6uf] {
    background: #2563eb;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
}

/* 3. List/Grid Area */
.content-body[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    overflow: hidden;
}

/* List View (Table) */
.modules-table-container[b-53liamc6uf] {
    width: 100%;
}

.modules-table[b-53liamc6uf] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.modules-table th[b-53liamc6uf] {
    padding: 16px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid #f1f5f9;
}

.modules-table td[b-53liamc6uf] {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.module-row[b-53liamc6uf] {
    transition: all 0.2s ease;
    cursor: pointer;
}

.module-row:hover[b-53liamc6uf] {
    background: #fbfdff;
}

.module-row.selected[b-53liamc6uf] {
    background: #f0f7ff;
}

.col-check[b-53liamc6uf] {
    width: 44px;
    padding-right: 0 !important;
}

.col-name[b-53liamc6uf] {
    min-width: 250px;
}

.col-ages[b-53liamc6uf] {
    width: 100px;
}

.col-zones[b-53liamc6uf] {
    width: 100px;
}

.col-duration[b-53liamc6uf] {
    width: 120px;
}

.col-actions[b-53liamc6uf] {
    width: 60px;
    text-align: right;
}

.name-wrapper[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.module-type-icon[b-53liamc6uf] {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

.name-info[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
}

.m-name[b-53liamc6uf] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.m-meta[b-53liamc6uf] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.inline-meta[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.inline-meta svg[b-53liamc6uf] {
    color: #cbd5e1;
}

/* Kebab Dropdown */
.kebab-wrapper[b-53liamc6uf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-kebab[b-53liamc6uf] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-kebab:hover[b-53liamc6uf] {
    background: var(--color-border-light);
    color: var(--color-accent);
}

.kebab-dropdown[b-53liamc6uf] {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 160px;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
    animation: kebab-pop-b-53liamc6uf 200ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

@keyframes kebab-pop-b-53liamc6uf {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }

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

.kebab-wrapper:hover .kebab-dropdown[b-53liamc6uf] {
    display: flex;
}

.kebab-item[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.kebab-item svg[b-53liamc6uf] {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.kebab-item:hover[b-53liamc6uf] {
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

.kebab-item:hover svg[b-53liamc6uf] {
    opacity: 1;
}

.kebab-item.delete[b-53liamc6uf] {
    color: var(--color-error);
}

.kebab-item.delete:hover[b-53liamc6uf] {
    background: rgba(220, 38, 38, 0.05);
    color: var(--color-error);
}

/* Confirmation Modal Refinements */
.confirmation-modal[b-53liamc6uf] {
    max-width: 440px;
    padding: 0;
}

.confirmation-header[b-53liamc6uf] {
    display: flex;
    gap: 20px;
    padding: 32px 32px 24px;
    border: none;
    align-items: flex-start;
}

.confirmation-icon-circle[b-53liamc6uf] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirmation-text[b-53liamc6uf] {
    flex: 1;
}

.confirmation-text .modal-title[b-53liamc6uf] {
    font-size: 20px;
    margin-bottom: 8px;
}

.confirmation-text .modal-subtitle[b-53liamc6uf] {
    font-size: 14px;
    line-height: 1.5;
}

.confirmation-footer[b-53liamc6uf] {
    padding: 0 32px 32px;
    border: none;
    background: transparent;
}

.btn-delete-confirm[b-53liamc6uf] {
    background: #dc2626;
    color: white;
    border: none;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.btn-delete-confirm:hover[b-53liamc6uf] {
    background: #b91c1c;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
    transform: translateY(-1px);
}

.btn-delete-card[b-53liamc6uf] {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-card:hover[b-53liamc6uf] {
    background: #fef2f2;
    color: #dc2626;
}

/* Checkbox Styles */
input[type="checkbox"][b-53liamc6uf] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #e2e8f0;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-53liamc6uf] {
    padding: 64px 24px;
    text-align: center;
}

.empty-icon[b-53liamc6uf] {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state h3[b-53liamc6uf] {
    margin: 0 0 8px 0;
    color: #1e293b;
}

.empty-state p[b-53liamc6uf] {
    color: #64748b;
    margin: 0;
}

/* Existing Grid Card (Refined) */
.modules-grid[b-53liamc6uf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    padding: 24px;
}

.module-card[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 18px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.module-card:hover[b-53liamc6uf] {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
    border-color: #dbeafe;
}

/* -----------------------------------------
   5. MODULE BUILDER (WIZARD)
   ----------------------------------------- */
.module-builder[b-53liamc6uf] {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 100px;
    /* Added space for the floating navigation footer */
}

.btn-back-link[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-bottom: 24px;
    transition: color 0.2s;
}

.btn-back-link:hover[b-53liamc6uf] {
    color: #3b82f6;
}

.wizard-header[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

.wizard-header-main[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}

.module-context-row[b-53liamc6uf] {
    margin: 8px 0 4px 0;
    display: flex;
    justify-content: center;
}

.module-context-tag[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #dbeafe;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.06);
}

.module-context-tag .tag-label[b-53liamc6uf] {
    color: #3b82f6;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}

.wizard-title[b-53liamc6uf] {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: -0.025em;
}

/* Status Indicator Draft */
.status-indicator-draft[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.1);
}

.status-dot-glow[b-53liamc6uf] {
    width: 8px;
    height: 8px;
    background-color: #f59e0b;
    border-radius: 50%;
    position: relative;
}

/* Exercise Status Indicators in List */
.exercise-status-indicator[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.saved-dot[b-53liamc6uf] {
    color: #22c55e;
    /* Premium Green */
    filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.2));
}

.exercise-status-unsaved[b-53liamc6uf] {
    color: #f59e0b;
    /* Premium Amber/Yellow */
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.2));
}

.unsaved-dot[b-53liamc6uf] {
    width: 10px;
    height: 10px;
    background-color: #f59e0b;
    border-radius: 50%;
    border: 2px solid #fffbeb;
    box-shadow: 0 0 0 1px #fde68a;
}

.module-selection-header[b-53liamc6uf] {
    margin-bottom: 24px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #eef2f6;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.selection-header-icon[b-53liamc6uf] {
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
}

.selection-header-info[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
}

.selection-header-label[b-53liamc6uf] {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.selection-header-name[b-53liamc6uf] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.status-dot-glow[b-53liamc6uf]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: #f59e0b;
    border-radius: 50%;
    animation: statusPulse-b-53liamc6uf 2s infinite;
}

@keyframes statusPulse-b-53liamc6uf {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.status-text[b-53liamc6uf] {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wizard-step-indicator[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0;
}

/* -----------------------------------------
   6. STEPPER COMPONENT
   ----------------------------------------- */
.stepper-row[b-53liamc6uf] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 32px;
    box-sizing: border-box;
    gap: 0;
}

.step-node-wrapper[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 140px;
    position: relative;
}

.step-node[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.step-node:not(:disabled):hover[b-53liamc6uf] {
    transform: translateY(-3px);
}

.step-node:disabled[b-53liamc6uf] {
    cursor: not-allowed;
    opacity: 0.6;
}

.step-node:focus-visible[b-53liamc6uf] {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Step Circle - Base State (Not Started) */
.step-circle[b-53liamc6uf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background-color: #f1f5f9;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.step-circle svg[b-53liamc6uf] {
    width: 20px;
    height: 20px;
}

/* Step Circle - Active State */
.step-node.active .step-circle[b-53liamc6uf] {
    background: linear-gradient(135deg, var(--color-accent) 0%, #2563eb 100%);
    color: #ffffff;
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    animation: pulse-b-53liamc6uf 2s infinite;
}

/* Step Circle - Completed State */
.step-node.completed .step-circle[b-53liamc6uf] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border-color: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

/* Step Connector */
.step-connector[b-53liamc6uf] {
    flex: 1;
    height: 2px;
    background-color: #e2e8f0;
    margin-top: 21px;
    min-width: 40px;
    max-width: 60px;
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}

.step-connector[b-53liamc6uf]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-connector.is-active[b-53liamc6uf]::after {
    transform: scaleX(1);
}

/* Step Text */
.step-text[b-53liamc6uf] {
    text-align: center;
    margin-top: 14px;
}

.step-title[b-53liamc6uf] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    transition: color 0.2s;
}

.step-node.active .step-title[b-53liamc6uf],
.step-node.completed .step-title[b-53liamc6uf] {
    color: #1e293b;
}

.step-subtitle[b-53liamc6uf] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
    white-space: nowrap;
    transition: color 0.2s;
}

/* -----------------------------------------
   7. WIZARD CARD (STEP CONTENT)
   ----------------------------------------- */
.wizard-card[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    /* allow dropdowns to overflow the card instead of being clipped */
    overflow: visible;
    padding: 32px;
}

.step-content[b-53liamc6uf] {
    /* Removed max-width to allow panels to use full wizard width */
    width: 100%;
    margin: 0 auto;
}

.step-content-messages[b-53liamc6uf] {
    max-width: 100%;
}

/* -----------------------------------------
   8. FORM COMPONENTS
   ----------------------------------------- */
.form-group[b-53liamc6uf] {
    margin-bottom: 24px;
}

.form-label[b-53liamc6uf] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.form-input[b-53liamc6uf],
.form-select[b-53liamc6uf] {
    width: 100%;
    padding: 12px 16px;
    /* margin-bottom: 20px; */
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background-color: #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1e293b;
    font-family: inherit;
    box-sizing: border-box;
}

.form-input:hover[b-53liamc6uf],
.form-select:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background-color: #fafbfc;
}

.form-input:focus[b-53liamc6uf],
.form-select:focus[b-53liamc6uf] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
    background-color: #ffffff;
}

.form-input[b-53liamc6uf]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.form-input-lg[b-53liamc6uf] {
    padding: 14px 18px;
    font-size: 16px;
}

/* Additional settings area (quiz + chat builder) */
.additional-settings[b-53liamc6uf] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.quiz-card[b-53liamc6uf],
.chat-section-card[b-53liamc6uf] {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-title[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 0 0;
    color: #1e293b;
}

@media (min-width: 900px) {

    /* On medium+ screens, place quiz dropdown and chat sections side-by-side */
    .additional-settings[b-53liamc6uf] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 18px;
    }

    .additional-settings .form-group.mt-2[b-53liamc6uf] {
        margin-top: 0;
    }
}

/* Chat sections wrapper - vertical stacking */
.chat-sections-wrapper[b-53liamc6uf] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Footer Actions - Responsive */
/* Footer Actions - Responsive */
.wizard-footer-actions[b-53liamc6uf] {
    display: flex;
    flex-direction: column-reverse;
    /* Stack vertically on mobile */
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    width: 100%;
}

.wizard-footer-actions button[b-53liamc6uf] {
    width: 100%;
    justify-content: center;
}

/* Button variants */
.btn-cancel-action[b-53liamc6uf] {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-draft-action[b-53liamc6uf] {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-publish-action[b-53liamc6uf] {
    padding: 10px 20px;
    border-radius: 8px;
    background: #2563eb;
    color: white;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-publish-action:hover[b-53liamc6uf] {
    background: #1d4ed8;
}

.btn-cancel-action:hover[b-53liamc6uf],
.btn-draft-action:hover[b-53liamc6uf] {
    background: #f9fafb;
    border-color: #9ca3af;
}

@media (min-width: 640px) {
    .wizard-footer-actions[b-53liamc6uf] {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
    }

    .wizard-footer-actions button[b-53liamc6uf] {
        width: auto;
    }
}



.custom-list-card[b-53liamc6uf] {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Performance: Use specific transitions and hardware acceleration to prevent jitter */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: background-color, border-color;
}

.custom-list-card:hover[b-53liamc6uf] {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.custom-list-card-content[b-53liamc6uf] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.custom-list-icon-wrapper[b-53liamc6uf] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.custom-list-icon-wrapper svg[b-53liamc6uf] {
    width: 18px;
    height: 18px;
}

.custom-list-info[b-53liamc6uf] {
    flex: 1;
}

.custom-list-title[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.custom-list-desc[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.btn-custom-list[b-53liamc6uf] {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    will-change: background-color, border-color, color;
}

.btn-custom-list:hover:not(:disabled)[b-53liamc6uf] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.btn-custom-list:disabled[b-53liamc6uf] {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.checkbox-row[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-inline input[type="checkbox"][b-53liamc6uf] {
    margin-right: 8px;
    margin-top: 10px;

}

textarea.form-input[b-53liamc6uf] {
    min-height: 100px;
    line-height: 1.6;
    resize: vertical;
}

.form-select[b-53liamc6uf] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    /* margin-bottom: 20px; */

}

/* Status Toggle */
.status-toggle-group[b-53liamc6uf] {
    display: flex;
    gap: 12px;
}

.status-toggle-btn[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    background: #f8fafc;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.status-toggle-btn:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.status-toggle-btn.active[b-53liamc6uf] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6;
}

/* -----------------------------------------
   9. AGE & ZONE SELECTION (DUAL-PANEL)
   Premium Production-Grade UI
   ----------------------------------------- */

/* Loading State - Enhanced */
.loading-state[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-radius: 16px;
    border: 1px dashed #e2e8f0;
}

.spinner[b-53liamc6uf] {
    width: 52px;
    height: 52px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-53liamc6uf 0.8s linear infinite;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

.btn-spinner[b-53liamc6uf] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-53liamc6uf 0.6s linear infinite;
}

@keyframes spin-b-53liamc6uf {
    to {
        transform: rotate(360deg);
    }
}

.loading-state p[b-53liamc6uf] {
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Error State - Enhanced */
.error-state[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.6) 0%, rgba(254, 226, 226, 0.3) 100%);
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.error-state svg[b-53liamc6uf] {
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.2));
}

.error-state h3[b-53liamc6uf] {
    font-size: 20px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

.error-state p[b-53liamc6uf] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 28px 0;
    max-width: 320px;
    line-height: 1.6;
}

.btn-retry[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn-retry:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
    transform: translateY(-2px);
}

.btn-retry:active[b-53liamc6uf] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Dual-Panel Layout - Premium Design */
.selection-panels[b-53liamc6uf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
}

@media (min-width: 900px) {
    .selection-panels[b-53liamc6uf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.selection-panel[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    overflow: visible;
    /* CRITICAL: Allow dropdown to overflow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.02);
    position: relative;
}

.selection-panel[b-53liamc6uf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.selection-panel:hover[b-53liamc6uf] {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.selection-panel:hover[b-53liamc6uf]::before {
    opacity: 1;
}

.selection-panel.has-selection[b-53liamc6uf] {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.1);
}

.selection-panel.has-selection[b-53liamc6uf]::before {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    opacity: 1;
}

/* Panel Header - Premium Glassmorphism */
.panel-header[b-53liamc6uf] {
    /* Use grid so the icon sits left and the title + subtitle stack vertically to its right.
       Grid keeps the header badge aligned to the right across both rows. */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
}

.panel-header-icon[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

/* Position the icon to span both rows in the grid */
.panel-header-icon[b-53liamc6uf] {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.panel-header svg[b-53liamc6uf] {
    color: #3b82f6;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.panel-header-text[b-53liamc6uf] {
    flex: 1;
}

.panel-header h3[b-53liamc6uf] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
    /* allow wrapping when stacked */
    white-space: normal;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.panel-header-subtitle[b-53liamc6uf] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-weight: 500;
    /* placed beneath the title */
    white-space: normal;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-top: 2px;
}

.panel-header-badge[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    animation: badgePop-b-53liamc6uf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-left: auto;
}

/* Place badge at right, centered across the header rows */
.panel-header-badge[b-53liamc6uf] {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: center;
    margin-left: 0;
}

@keyframes badgePop-b-53liamc6uf {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* Panel Body - Enhanced */
.panel-body[b-53liamc6uf] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(248, 250, 252, 0.5) 100%);
    overflow: visible;
    /* Allow dropdown to overflow */
    position: relative;
}

.panel-body .form-group[b-53liamc6uf] {
    margin-bottom: 0;
    position: relative;
    /* Ensure the trigger and dropdown appear above other content inside the card */
    z-index: 60;
}

.panel-description[b-53liamc6uf] {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.7) 0%, rgba(226, 232, 240, 0.4) 100%);
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

/* Multi-Select Trigger - Premium Design */
.multiselect-trigger[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #1e293b;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* ensure the trigger sits above layout so dropdown can attach without clipping */
.multiselect-trigger[b-53liamc6uf] {
    position: relative;
    z-index: 80;
}

.multiselect-trigger:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.multiselect-trigger:focus[b-53liamc6uf] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.multiselect-placeholder[b-53liamc6uf] {
    flex: 1;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-trigger.has-selection .multiselect-placeholder[b-53liamc6uf] {
    color: #1e293b;
    font-weight: 600;
}

.multiselect-arrow[b-53liamc6uf] {
    flex-shrink: 0;
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.multiselect-arrow.open[b-53liamc6uf] {
    transform: rotate(180deg);
    color: #3b82f6;
}

/* Multi-Select Dropdown - Premium Glassmorphism */
.multiselect-dropdown[b-53liamc6uf] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* keep dropdown width tied to the trigger and constrained so it doesn't span neighbouring columns */
    right: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    /* larger z-index to ensure visibility above other UI layers */
    z-index: 2200;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    animation: dropdownSlideIn-b-53liamc6uf 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* constrain dropdown width so it stays within its panel */
    overflow: visible;
    min-width: 280px;
    max-width: 520px;
    width: max-content;
    will-change: transform, opacity;
}

@keyframes dropdownSlideIn-b-53liamc6uf {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

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

/* Dropdown Search Row */
.multiselect-search-row[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.8) 100%);
    border-bottom: 1px solid #e5e7eb;
}

.multiselect-search[b-53liamc6uf] {
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #1e293b;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
    transition: all 0.2s ease;
}

.multiselect-search:focus[b-53liamc6uf] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.multiselect-search[b-53liamc6uf]::placeholder {
    color: #94a3b8;
}

.multiselect-action-btn[b-53liamc6uf] {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none;
}

.multiselect-action-btn.primary[b-53liamc6uf] {
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

.multiselect-action-btn.primary:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.multiselect-action-btn.secondary[b-53liamc6uf] {
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.multiselect-action-btn.secondary:hover[b-53liamc6uf] {
    color: #1e293b;
    background: #e2e8f0;
    border-color: #cbd5e1;
}

/* Dropdown Options - Single column for readability */
.multiselect-options[b-53liamc6uf] {
    /* provide more vertical space for large lists and let this region scroll internally */
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
}

/* Ensure dropdowns on small screens expand to full width of their container */
@media (max-width: 767px) {
    .multiselect-dropdown[b-53liamc6uf] {
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
}

.multiselect-options[b-53liamc6uf]::-webkit-scrollbar {
    width: 5px;
}

.multiselect-options[b-53liamc6uf]::-webkit-scrollbar-track {
    background: transparent;
}

.multiselect-options[b-53liamc6uf]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 3px;
}

.multiselect-options[b-53liamc6uf]::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.multiselect-option[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 2px;
    border: 1px solid transparent;
}

.multiselect-option:last-child[b-53liamc6uf] {
    margin-bottom: 0;
}

.multiselect-option:hover[b-53liamc6uf] {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.12);
}

.multiselect-option input[type="checkbox"][b-53liamc6uf] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
}

.multiselect-option span[b-53liamc6uf] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-option.selected[b-53liamc6uf],
.multiselect-option:has(input:checked)[b-53liamc6uf] {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #166534;
}

/* Dropdown Footer */
.multiselect-footer[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.98) 100%);
    border-top: 1px solid #e5e7eb;
}

.multiselect-count[b-53liamc6uf] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.multiselect-count[b-53liamc6uf]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.multiselect-done-btn[b-53liamc6uf] {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.multiselect-done-btn:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    transform: translateY(-1px);
}

/* Selection Summary Chips */
.selection-chips[b-53liamc6uf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.selection-chip[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    animation: chipFadeIn-b-53liamc6uf 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chipFadeIn-b-53liamc6uf {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.selection-chip-remove[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(59, 130, 246, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #3b82f6;
    font-size: 10px;
    transition: all 0.2s ease;
}

.selection-chip-remove:hover[b-53liamc6uf] {
    background: #3b82f6;
    color: #ffffff;
}

/* Progress Indicator for Panels */
.panel-progress[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(22, 163, 74, 0.1) 100%);
    border-radius: 10px;
    margin-top: auto;
}

.panel-progress-bar[b-53liamc6uf] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.panel-progress-fill[b-53liamc6uf] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-progress-text[b-53liamc6uf] {
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
    white-space: nowrap;
}

/* Form Group Enhancements for Step 2 */
.panel-body .form-group[b-53liamc6uf] {
    margin-bottom: 0;
    position: relative;
}

.panel-body .form-label[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-body .form-label[b-53liamc6uf]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #e2e8f0 0%, transparent 100%);
    margin-left: 8px;
}

/* Select with Badge - Enhanced */
.select-with-badge[b-53liamc6uf] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selection-badge[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    color: #ffffff;
    animation: badgePopIn-b-53liamc6uf 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

@keyframes badgePopIn-b-53liamc6uf {
    from {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Validation Message - Enhanced */
.validation-message[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.6) 0%, rgba(254, 202, 202, 0.4) 100%);
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    border-radius: 14px;
    color: #dc2626;
    font-size: 14px;
    font-weight: 500;
    margin-top: 20px;
    animation: shakeIn-b-53liamc6uf 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.input-error[b-53liamc6uf] {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

.input-error:focus[b-53liamc6uf] {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

.error-message[b-53liamc6uf] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

@keyframes shakeIn-b-53liamc6uf {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.validation-message svg[b-53liamc6uf] {
    flex-shrink: 0;
    color: #ef4444;
    width: 20px;
    height: 20px;
}

/* Success variant for validation message (e.g., Saving...) */
.validation-message.success[b-53liamc6uf] {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.6) 0%, rgba(187, 247, 208, 0.4) 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    color: #16a34a;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.06);
    animation: none;
}

.validation-message.success svg[b-53liamc6uf] {
    color: #16a34a;
}

/* -----------------------------------------
   10. MESSAGES STEP
   ----------------------------------------- */
.messages-empty-state[b-53liamc6uf] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-53liamc6uf] {
    font-size: 48px;
    margin-bottom: 16px;
}

.messages-empty-state h3[b-53liamc6uf] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.messages-empty-state p[b-53liamc6uf] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
}

.btn-create-message[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-create-message:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

/* Master-Detail Layout */
.messages-layout[b-53liamc6uf] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    min-height: 400px;
    align-items: start;
    /* PREVENTS STRETCHING, ENABLE STICKY */
}

/* Messages List */
.messages-list[b-53liamc6uf] {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    /* Adjust based on top bar height + margin */
    /* max-height: calc(100vh - 140px); */
    /* PREVENT INFINITE GROWTH */
}

.messages-list-header[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.btn-add-small[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}

.btn-add-small:hover[b-53liamc6uf] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
}

.messages-list-items[b-53liamc6uf] {
    flex: 1;
    overflow-y: auto;
}

.message-list-item[b-53liamc6uf] {
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.message-list-item:hover[b-53liamc6uf] {
    background: #ffffff;
}

.message-list-item.selected[b-53liamc6uf] {
    background: #ffffff;
    border-left: 3px solid #3b82f6;
}

.message-item-title[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-item-meta[b-53liamc6uf] {
    display: flex;
    gap: 8px;
}

/* Message Editor */
.message-editor[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.message-editor-content[b-53liamc6uf] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 24px;
}

.message-editor-footer[b-53liamc6uf] {
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.editor-footer-left[b-53liamc6uf] {
    display: flex;
    gap: 12px;
}

.btn-save-message[b-53liamc6uf] {
    padding: 10px 24px;
    background: #1e293b;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-message:hover[b-53liamc6uf] {
    background: #000000;
    transform: translateY(-1px);
}

.btn-cancel-message[b-53liamc6uf] {
    padding: 10px 20px;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel-message:hover[b-53liamc6uf] {
    background: #f8fafc;
    color: #1e293b;
}

.btn-delete-message[b-53liamc6uf] {
    padding: 10px 16px;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-message:hover[b-53liamc6uf] {
    background: #ffe4e6;
    border-color: #fda4af;
}

.btn-edit-message-link[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-message-link:hover[b-53liamc6uf] {
    background: #dbeafe;
    color: #1d4ed8;
}

.editor-section[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.editor-section-title[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.editor-section-title svg[b-53liamc6uf] {
    color: #64748b;
}

.editor-section-content[b-53liamc6uf] {
    padding: 20px;
}

.editor-section-content .form-group:last-child[b-53liamc6uf] {
    margin-bottom: 0;
}

/* Upload Area */
.upload-area[b-53liamc6uf] {
    margin-top: 12px;
}

.upload-options[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upload-dropzone[b-53liamc6uf] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: linear-gradient(to bottom, #ffffff, #f8fafc);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #94a3b8;
    overflow: hidden;
}

.upload-dropzone:hover[b-53liamc6uf] {
    border-color: #3b82f6;
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
}

.upload-dropzone svg[b-53liamc6uf] {
    color: #3b82f6;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
}

.upload-dropzone:hover svg[b-53liamc6uf] {
    transform: scale(1.1);
}

.upload-dropzone span[b-53liamc6uf] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.upload-dropzone small[b-53liamc6uf] {
    font-size: 12px;
    color: #64748b;
}

.upload-dropzone .browse-text[b-53liamc6uf] {
    color: #3b82f6;
    text-decoration: underline;
    font-weight: 600;
}

.upload-divider[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.upload-divider[b-53liamc6uf]::before,
.upload-divider[b-53liamc6uf]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.url-upload-field[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.url-input-wrapper[b-53liamc6uf] {
    position: relative;
    display: flex;
    align-items: center;
}

.url-input-wrapper svg[b-53liamc6uf] {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.url-input[b-53liamc6uf] {
    padding-left: 36px !important;
    height: 44px;
    font-size: 14px;
}

/* Notifications */
.notification-row[b-53liamc6uf] {
    margin-bottom: 12px;
}

.notification-label[b-53liamc6uf] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 6px;
}

.btn-add-notification[b-53liamc6uf] {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: #3b82f6;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.btn-add-notification:hover[b-53liamc6uf] {
    color: #2563eb;
}

.editor-actions[b-53liamc6uf] {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.btn-delete-message[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: #dc2626;
    background: transparent;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-message:hover[b-53liamc6uf] {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Configuration Panel */
.config-grid[b-53liamc6uf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.config-item[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.config-item:hover[b-53liamc6uf] {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateY(-2px);
}

.config-item-icon[b-53liamc6uf] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    color: #64748b;
    border: 1px solid #e2e8f0;
    position: relative;
    /* Added for indicators */
}

.config-item:hover .config-item-icon[b-53liamc6uf] {
    color: #3b82f6;
    border-color: #3b82f6;
}

.config-item-label[b-53liamc6uf] {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

/* Indicators for selected configurations */
.config-indicator[b-53liamc6uf] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
    animation: scaleIn-b-53liamc6uf 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.config-indicator.tick[b-53liamc6uf] {
    width: 18px;
    height: 18px;
    background: #22c55e;
    color: white;
}

.config-indicator.count[b-53liamc6uf] {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #3b82f6;
    color: white;
    font-size: 10px;
    font-weight: 700;
}

@keyframes scaleIn-b-53liamc6uf {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* Notification Cards */
.notification-card[b-53liamc6uf] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.notification-card:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

.notification-header[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.btn-remove-notif[b-53liamc6uf] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-remove-notif:hover[b-53liamc6uf] {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.notification-timing-group[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}

.timing-controls[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timing-input[b-53liamc6uf] {
    width: 80px !important;
}

.timing-unit[b-53liamc6uf] {
    width: 120px !important;
    margin-bottom: 0px;
}

/* Row for Notification Timing (Legacy/Global - removed from Razor but keeping CSS if needed for other parts, though I should clean up) */
.notification-timing-row[b-53liamc6uf] {
    display: none;
    margin-top: 5px;
    margin-bottom: 5px;
    /* Hidden as we use cards now */
}

/* Editor Actions */
.editor-actions[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.editor-actions-left[b-53liamc6uf] {
    display: flex;
    gap: 12px;
}

.btn-save-message[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-message:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
}

.btn-save-message:disabled[b-53liamc6uf] {
    opacity: 0.7;
    cursor: not-allowed;
    background: #94a3b8;
    transform: none;
}

/* -----------------------------------------
   11. STATUS BADGES
   ----------------------------------------- */
.status-badge[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: capitalize;
}

.status-badge.active[b-53liamc6uf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.15) 100%);
    color: #16a34a;
}

.status-badge.draft[b-53liamc6uf] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1) 0%, rgba(71, 85, 105, 0.15) 100%);
    color: #64748b;
}

.status-badge-sm[b-53liamc6uf] {
    padding: 3px 8px;
    font-size: 10px;
}

/* -----------------------------------------
   12. WIZARD NAVIGATION
   ----------------------------------------- */
.wizard-navigation[b-53liamc6uf] {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width, 260px);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(229, 231, 235, 0.6);
    z-index: 1000;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.04);
    transition: left var(--transition-base, 200ms) ease;
}

/* Constrain when sidebar is collapsed (using global selector logic) */
:root:has(.sidebar.collapsed) .wizard-navigation[b-53liamc6uf] {
    left: var(--sidebar-collapsed-width, 64px);
}

.wizard-navigation-actions[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back:hover[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-exit-close[b-53liamc6uf],
.btn-cancel[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-exit-close:hover[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-draft[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-draft:hover[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-continue[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-continue:hover:not(:disabled)[b-53liamc6uf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.btn-continue:disabled[b-53liamc6uf] {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-publish[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.btn-publish:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

.btn-publish:disabled[b-53liamc6uf] {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* -----------------------------------------
   13. PLACEHOLDER SECTIONS
   ----------------------------------------- */
.placeholder-section[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.placeholder-icon[b-53liamc6uf] {
    font-size: 48px;
    margin-bottom: 16px;
}

.placeholder-section h3[b-53liamc6uf] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.placeholder-section p[b-53liamc6uf] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* -----------------------------------------
   14. RESPONSIVE DESIGN
   ----------------------------------------- */
@media (max-width: 768px) {
    .content-tabs[b-53liamc6uf] {
        flex-direction: column;
        gap: 4px;
        padding: 12px;
    }

    .content-tab[b-53liamc6uf] {
        width: 100%;
        justify-content: flex-start;
    }

    .stepper-row[b-53liamc6uf] {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 24px 16px;
    }

    .step-node-wrapper[b-53liamc6uf] {
        width: 100%;
        flex-direction: row;
        gap: 16px;
    }

    .step-node[b-53liamc6uf] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
    }

    .step-text[b-53liamc6uf] {
        text-align: left;
        margin-top: 0;
    }

    .step-connector[b-53liamc6uf] {
        display: none;
    }

    /* Dual-Panel Responsive - Enhanced Mobile */
    .selection-panels[b-53liamc6uf] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .selection-panel[b-53liamc6uf] {
        border-radius: 16px;
    }

    .selection-panel[b-53liamc6uf]::before {
        height: 3px;
    }

    .panel-header[b-53liamc6uf] {
        padding: 18px 20px;
        gap: 12px;
    }

    .panel-header-icon[b-53liamc6uf] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .panel-header svg[b-53liamc6uf] {
        width: 18px;
        height: 18px;
    }

    .panel-header h3[b-53liamc6uf] {
        font-size: 15px;
    }

    .panel-body[b-53liamc6uf] {
        padding: 20px;
        gap: 16px;
    }

    .panel-description[b-53liamc6uf] {
        padding: 12px 14px;
        font-size: 12px;
    }

    .multiselect-trigger[b-53liamc6uf] {
        padding: 12px 16px;
        border-radius: 12px;
    }

    .multiselect-dropdown[b-53liamc6uf] {
        border-radius: 14px;
    }

    .multiselect-options[b-53liamc6uf] {
        max-height: 200px;
    }

    .multiselect-option[b-53liamc6uf] {
        padding: 10px 12px;
        gap: 10px;
    }

    .multiselect-option input[type="checkbox"][b-53liamc6uf] {
        width: 18px;
        height: 18px;
    }

    .selection-chips[b-53liamc6uf] {
        gap: 6px;
    }

    .selection-chip[b-53liamc6uf] {
        padding: 5px 10px;
        font-size: 11px;
    }

    .messages-layout[b-53liamc6uf] {
        grid-template-columns: 1fr;
    }

    .messages-list[b-53liamc6uf] {
        max-height: 200px;
    }

    .wizard-navigation[b-53liamc6uf] {
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px;
        left: 0 !important;
    }

    .wizard-navigation-actions[b-53liamc6uf] {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .btn-back[b-53liamc6uf],
    .btn-draft[b-53liamc6uf],
    .btn-continue[b-53liamc6uf],
    .btn-publish[b-53liamc6uf] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .wizard-card[b-53liamc6uf] {
        padding: 24px 16px;
    }

    .age-chips-grid[b-53liamc6uf] {
        grid-template-columns: 1fr;
    }

    .status-toggle-group[b-53liamc6uf] {
        flex-direction: column;
    }

    .status-toggle-btn[b-53liamc6uf] {
        width: 100%;
        justify-content: center;
    }
}

/* -----------------------------------------
   10. MODAL COMPONENT (Custom Participant List)
   ----------------------------------------- */
.modal-backdrop[b-53liamc6uf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog[b-53liamc6uf] {
    background: #ffffff;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    /* Allow scrolling content if needed */
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    transition: max-width 0.3s ease;
}

.modal-dialog.modal-lg[b-53liamc6uf] {
    max-width: 800px;
}

.modal-header[b-53liamc6uf] {
    padding: 24px 24px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}

.modal-title[b-53liamc6uf] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.modal-subtitle[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.btn-close-modal[b-53liamc6uf] {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-close-modal:hover[b-53liamc6uf] {
    background: #f1f5f9;
    color: #64748b;
}

.modal-body[b-53liamc6uf] {
    padding: 0 24px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sticky-selection-panel[b-53liamc6uf] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    padding: 24px 0 0px 0;
    border-bottom: 1px solid #f1f5f9;
}

/* Tabs */
.participant-tabs[b-53liamc6uf] {
    display: flex;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    margin-bottom: 16px;
}

.tab-segment[b-53liamc6uf] {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-segment.active[b-53liamc6uf] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Search */
.search-row[b-53liamc6uf] {
    margin-bottom: 16px;
}

.search-input-wrapper[b-53liamc6uf] {
    position: relative;
}

.search-icon[b-53liamc6uf] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.search-input[b-53liamc6uf] {
    width: 100%;
    padding: 10px 12px 10px 36px;
    font-size: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus[b-53liamc6uf] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* List Header */
.participant-list-header[b-53liamc6uf] {
    display: grid;
    grid-template-columns: 32px 36px 1fr 120px;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    margin-top: 8px;
}

.header-col[b-53liamc6uf] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* List */
.participant-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #f1f5f9;
    border-top: none;
    /* Merges with the header above */
    border-radius: 0 0 12px 12px;
    padding: 8px;
    margin-bottom: 24px;
}

.participant-item[b-53liamc6uf] {
    display: grid;
    grid-template-columns: 32px 36px 1fr 120px;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.participant-item:hover[b-53liamc6uf] {
    background: #f8fafc;
}

.checkbox-custom[b-53liamc6uf] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
    justify-self: center;
}

.checkbox-custom.checked[b-53liamc6uf] {
    background: #3b82f6;
    border-color: #3b82f6;
}

.participant-avatar[b-53liamc6uf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.participant-info[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.participant-name[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-role[b-53liamc6uf] {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-telephone[b-53liamc6uf] {
    font-size: 13px;
    color: #475569;
    font-weight: 500;
    /* text-align: right; */
}

.empty-list-state[b-53liamc6uf] {
    padding: 32px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

/* Group Details */
.group-details-section[b-53liamc6uf] {
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.section-label[b-53liamc6uf] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.toggles-row[b-53liamc6uf] {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.toggle-wrapper[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}

/* Footer */
.modal-footer[b-53liamc6uf] {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #fff;
    border-radius: 0 0 20px 20px;
}

/* .btn-cancel {
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
} */

.btn-cancel:hover[b-53liamc6uf] {
    background: #f8fafc;
    color: #1e293b;
}

.btn-save[b-53liamc6uf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    transition: all 0.2s;
}

.btn-save:hover:not(:disabled)[b-53liamc6uf] {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.btn-save:disabled[b-53liamc6uf] {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@keyframes fadeInUp-b-53liamc6uf {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

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

.fade-in-up[b-53liamc6uf] {
    animation: fadeInUp-b-53liamc6uf 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.loading-state[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
    gap: 12px;
}

.spinner[b-53liamc6uf] {
    width: 24px;
    height: 24px;
    border: 2.5px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-53liamc6uf 0.8s linear infinite;
}

@keyframes spin-b-53liamc6uf {
    to {
        transform: rotate(360deg);
    }
}


.custom-list-header-flex[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.participant-selection-pill[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    border: 1px solid #3b82f633;
    padding: 2px 10px;
    border-radius: 20px;
}

.pill-dot[b-53liamc6uf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.pill-count[b-53liamc6uf] {
    font-size: 11px;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: -0.01em;
}

.custom-list-actions[b-53liamc6uf] {
    display: flex;
    gap: 10px;
    width: 100%;
}

.btn-custom-list.edit[b-53liamc6uf] {
    flex: 1;
}

.btn-custom-list-clear[b-53liamc6uf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #ef4444;
    background: #ffffff;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-custom-list-clear:hover[b-53liamc6uf] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05);
}

.btn-custom-list-clear svg[b-53liamc6uf] {
    flex-shrink: 0;
}

/* Pagination */
.pagination-footer[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
    border-radius: 0 0 14px 14px;
}

.pagination-info[b-53liamc6uf] {
    font-size: 14px;
    color: #64748b;
}

.pagination-controls[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-page[b-53liamc6uf] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-page:hover:not(:disabled)[b-53liamc6uf] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.btn-page.active[b-53liamc6uf] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-page:disabled[b-53liamc6uf] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8fafc;
}

/* Required Field Asterisk */
.required-asterisk[b-53liamc6uf] {
    color: #ef4444;
    margin-left: 2px;
    font-weight: 700;
}

/* Input Error State */
.input-error[b-53liamc6uf] {
    border-color: #ef4444 !important;
    background-color: #fffafb !important;
}

.input-error:focus[b-53liamc6uf] {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

/* Error Text Utility */
.error-text-small[b-53liamc6uf] {
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.error-text-small[b-53liamc6uf]::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background-color: #dc2626;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

/* -----------------------------------------
   15. READ-ONLY MODE STYLES
   ----------------------------------------- */
.readonly-banner[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.08) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    margin-bottom: 32px;
    animation: fadeIn-b-53liamc6uf 0.4s ease-out;
}

.readonly-info-icon[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 10px;
    color: #3b82f6;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
    flex-shrink: 0;
}

.readonly-content[b-53liamc6uf] {
    flex: 1;
}

.readonly-title[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.readonly-text[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.form-input:disabled[b-53liamc6uf],
.multiselect-trigger:disabled[b-53liamc6uf] {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

.btn-edit-participant:disabled[b-53liamc6uf] {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
}

/* --- Timing Modal Production Grade Styling --- */
.modal-timing[b-53liamc6uf] {
    max-width: 800px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
}

.modal-timing .modal-header[b-53liamc6uf] {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 24px 32px !important;
}

.modal-timing .modal-header h3[b-53liamc6uf] {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.modal-timing .modal-body[b-53liamc6uf] {
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

/* Premium Toggles */
.timing-type-toggle[b-53liamc6uf] {
    display: flex !important;
    background: #f1f5f9 !important;
    padding: 4px !important;
    border-radius: 12px !important;
    gap: 4px !important;
}

.timing-type-toggle .toggle-btn[b-53liamc6uf] {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.timing-type-toggle .toggle-btn.active[b-53liamc6uf] {
    background: #ffffff !important;
    color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.timing-type-toggle.small .toggle-btn[b-53liamc6uf] {
    padding: 8px 12px !important;
    font-size: 13px !important;
}

/* Input Fields Upgrade */
.date-picker-premium[b-53liamc6uf] {
    cursor: pointer !important;
}

.timing-row[b-53liamc6uf] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8fafc !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
}

.timing-val[b-53liamc6uf] {
    width: 70px !important;
    background: #ffffff !important;
}

.timing-unit-select[b-53liamc6uf],
.timing-ref-select[b-53liamc6uf] {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

.timing-label[b-53liamc6uf] {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
}

.section-label[b-53liamc6uf] {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 12px !important;
}

/* Premium Checkboxes */
.checkbox-group-premium[b-53liamc6uf] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.checkbox-container[b-53liamc6uf] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #475569 !important;
    user-select: none !important;
}

.checkbox-container input[b-53liamc6uf] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: #3b82f6 !important;
}

.modal-footer[b-53liamc6uf] {
    background: #f8fafc !important;
    padding: 24px 32px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.btn-modal-secondary[b-53liamc6uf] {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #64748b !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.btn-modal-secondary:hover[b-53liamc6uf] {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.btn-modal-primary[b-53liamc6uf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.2s !important;
}

.btn-modal-primary:hover[b-53liamc6uf] {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Configuration Multi-Select Grid */
.config-multiselect-grid[b-53liamc6uf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
    max-height: 480px;
    overflow-y: auto;
    padding: 4px;
    scroll-behavior: smooth;
}

.config-multiselect-grid[b-53liamc6uf]::-webkit-scrollbar {
    width: 6px;
}

.config-multiselect-grid[b-53liamc6uf]::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* Custom Measure Addition Row */
.custom-measure-add-row[b-53liamc6uf] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.btn-add-custom[b-53liamc6uf] {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
}

.btn-add-custom:hover:not(:disabled)[b-53liamc6uf] {
    background: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-add-custom:disabled[b-53liamc6uf] {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.config-option-card[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.config-option-card:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.config-option-card.selected[b-53liamc6uf] {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.option-check[b-53liamc6uf] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #ffffff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.config-option-card.selected .option-check[b-53liamc6uf] {
    background: #3b82f6;
    border-color: #3b82f6;
}

.option-label[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.brain-goal-grid[b-53liamc6uf] {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.brain-goal-card[b-53liamc6uf] {
    min-height: 84px;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.brain-goal-content[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brain-goal-exercise[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.brain-goal-impacted-area[b-53liamc6uf] {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.4;
}

.config-option-card.selected .brain-goal-impacted-area[b-53liamc6uf] {
    color: #1d4ed8;
}

.modal-description[b-53liamc6uf] {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 8px;
}

/* -----------------------------------------
   MEMBY MAGIC STUDIO CARD
   ----------------------------------------- */
.memby-card[b-53liamc6uf] {
    background: #fdfbff;
    /* Very light lavender/white */
    border: 1px solid #e9d5ff;
    /* Soft purple border */
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.08);
    /* Soft purple glow */
    transition: all 0.3s ease;
}

.memby-card:hover[b-53liamc6uf] {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.12);
    border-color: #d8b4fe;
}

.magic-title[b-53liamc6uf] {
    background: linear-gradient(135deg, #1e293b 0%, #4c1d95 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.magic-input[b-53liamc6uf] {
    border: 1px solid #f3e8ff;
    background: #ffffff;
    transition: all 0.2s ease;
}

.magic-input:focus[b-53liamc6uf] {
    border-color: #c084fc;
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.15);
    background: #ffffff;
}

.magic-btn-primary[b-53liamc6uf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    font-weight: 600;
    transition: all 0.2s ease;
}

.magic-btn-primary:hover[b-53liamc6uf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.magic-btn-secondary[b-53liamc6uf] {
    background: #64748b;
    border: none;
    color: white;
    font-weight: 500;
    transition: all 0.2s ease;
}

.magic-btn-secondary:hover[b-53liamc6uf] {
    background: #475569;
    transform: translateY(-1px);
}

/* Message List Item Actions */
.message-list-item[b-53liamc6uf] {
    position: relative;
    /* For absolute positioning of actions */
    /* Ensure flex context for alignment */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-item-main[b-53liamc6uf] {
    flex: 1;
    min-width: 0;
    /* Text truncation fix */
}

.message-item-actions[b-53liamc6uf] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    padding-left: 4px;
    border-radius: 4px;
}

.message-list-item:hover .message-item-actions[b-53liamc6uf] {
    display: flex;
}

.btn-icon-action[b-53liamc6uf] {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.btn-icon-action:hover[b-53liamc6uf] {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
    z-index: 20;
}

.btn-icon-action.delete:hover[b-53liamc6uf] {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

/* Status Badges */
.status-badge-sm.published[b-53liamc6uf] {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* Editor Header */
.message-editor-header[b-53liamc6uf] {
    /* Margin removed to rely on parent flex gap */
    width: 100%;
}

.published-banner[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #15803d;
    font-size: 14px;
    font-weight: 500;
    /* ensure space below the banner so other elements don't get abruptly pushed */
    margin-bottom: 12px;
    transition: margin 0.18s ease, opacity 0.12s ease;
}

/* Disabled Fieldset */
fieldset.message-editor-content[b-53liamc6uf] {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    /* Flexbox fix */
}

fieldset.message-editor-content:disabled input[b-53liamc6uf],
fieldset.message-editor-content:disabled select[b-53liamc6uf],
fieldset.message-editor-content:disabled textarea[b-53liamc6uf] {
    background-color: #f8fafc;
    color: #475569;
    /* Slightly darker for readability */
    cursor: not-allowed;
    border-color: #e2e8f0;
}

/* Ensure memby card looks okay when disabled */
fieldset.message-editor-content:disabled .memby-card[b-53liamc6uf] {
    opacity: 0.9;
    background-color: #f9fafb;
}

/* Hide add buttons when disabled */
fieldset.message-editor-content:disabled .btn-add-notification[b-53liamc6uf],
fieldset.message-editor-content:disabled .magic-btn-primary[b-53liamc6uf],
fieldset.message-editor-content:disabled .magic-btn-secondary[b-53liamc6uf] {
    display: none;
}

/* Disable config items */
fieldset.message-editor-content:disabled .config-item[b-53liamc6uf] {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

/* Base upload area restricted state */
.disabled-controls[b-53liamc6uf] {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
    transition: all 0.2s ease;
}

.always-interactive[b-53liamc6uf] {
    pointer-events: auto !important;
    opacity: 1 !important;
    filter: none !important;
}

[b-53liamc6uf] .file-input-overlay:disabled {
    cursor: not-allowed !important;
}

/* Image Preview Styles */
.image-preview-container[b-53liamc6uf] {
    position: relative;
    width: 100%;
    max-width: 400px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
    background: #ffffff;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
}

.image-preview[b-53liamc6uf] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: #f8fafc;
}

.btn-remove-image[b-53liamc6uf] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    z-index: 2;
}

.btn-remove-image:hover[b-53liamc6uf] {
    background: #ffffff;
    transform: scale(1.1);
    color: #dc2626;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-remove-image svg[b-53liamc6uf] {
    width: 18px;
    height: 18px;
}

/* -----------------------------------------
   11. UTILITIES & OVERLAYS
   ----------------------------------------- */
[b-53liamc6uf] .file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 10;
    font-size: 100px;
    /* Ensures the clickable area is large in some browsers */
}

.status-toggle-container[b-53liamc6uf] {
    padding-top: 16px;
    border-top: 1px solid #eef2f6;
}

.toggle-group[b-53liamc6uf] {
    display: inline-flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    gap: 2px;
}

.btn-status-toggle[b-53liamc6uf] {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-status-toggle:hover[b-53liamc6uf] {
    color: #475569;
}

.btn-status-toggle.active[b-53liamc6uf] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-status-toggle.active:first-child[b-53liamc6uf] {
    color: #16a34a;
    /* Green for Active */
}

.btn-status-toggle.active:last-child[b-53liamc6uf] {
    color: #f59e0b;
    /* Amber for Draft */
}

.mt-4[b-53liamc6uf] {
    margin-top: 1.5rem;
}

/* -----------------------------------------
   12. IMPORT & MESSAGE CREATION STYLES
   ----------------------------------------- */
.messages-empty-actions[b-53liamc6uf] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 16px;
}

.btn-import[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-import:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Modal Specifics for Import */
.modal-import[b-53liamc6uf] {
    max-width: 600px;
}

.import-step-label[b-53liamc6uf] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

/* -----------------------------------------
   6. INLINE IMPORT SELECTOR (ACCORDION UI)
   ----------------------------------------- */
.import-selector-view[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    overflow: hidden;
    animation: slideInUp-b-53liamc6uf 0.3s ease-out;
}

@keyframes slideInUp-b-53liamc6uf {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.import-header[b-53liamc6uf] {
    padding: 16px 32px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.header-left[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
}

.import-title[b-53liamc6uf] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.import-subtitle[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.import-search-group[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.import-search-wrapper[b-53liamc6uf] {
    position: relative;
    width: 280px;
}

.import-search-wrapper svg[b-53liamc6uf] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 1;
    pointer-events: none;
}

.btn-import-header-icon[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.btn-import-header-icon:hover[b-53liamc6uf] {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #3b82f6;
}

.btn-import-header-icon.confirm[b-53liamc6uf] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #3b82f6;
}

.btn-import-header-icon.confirm:hover[b-53liamc6uf] {
    background: #dbeafe;
    color: #2563eb;
}

.btn-import-header-icon:disabled[b-53liamc6uf] {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.import-search-input[b-53liamc6uf] {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.import-search-input:focus[b-53liamc6uf] {
    border-color: #3b82f6;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.import-scroll-area[b-53liamc6uf] {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: #fbfdff;
}

.import-accordion-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}

.import-accordion-item[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.import-accordion-item:hover[b-53liamc6uf] {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05);
}

.import-accordion-item.expanded[b-53liamc6uf] {
    border-color: #3b82f6;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.08);
}

.import-accordion-header[b-53liamc6uf] {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.import-accordion-header:hover[b-53liamc6uf] {
    background: #f8fafc;
}

.header-main-info[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.header-drag-handle[b-53liamc6uf] {
    color: #cbd5e1;
    display: flex;
    align-items: center;
}

.header-chevron[b-53liamc6uf] {
    color: #1e293b;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.header-chevron.open[b-53liamc6uf] {
    transform: rotate(90deg);
}

.header-folder-icon[b-53liamc6uf] {
    color: #3b82f6;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.header-text-block[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-top-line[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.module-title[b-53liamc6uf] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.status-badge[b-53liamc6uf] {
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.status-badge.published[b-53liamc6uf] {
    background: #1e293b;
    color: #ffffff;
}

.status-badge.draft[b-53liamc6uf] {
    background: #f1f5f9;
    color: #475569;
}

.exercise-count[b-53liamc6uf] {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
}

.module-subtitle[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.header-actions[b-53liamc6uf] {
    margin-left: 16px;
}

.selection-pill[b-53liamc6uf] {
    padding: 4px 12px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #dbeafe;
}

.import-accordion-content[b-53liamc6uf] {
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.import-message-inner-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
}

.import-exercise-row[b-53liamc6uf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 24px 16px 84px;
    /* Aligned with title above */
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.import-exercise-row:last-child[b-53liamc6uf] {
    border-bottom: none;
}

.import-exercise-row:hover[b-53liamc6uf] {
    background: #f8fafc;
}

.import-exercise-row.selected[b-53liamc6uf] {
    background: #eff6ff;
}

.exercise-icon[b-53liamc6uf] {
    color: #94a3b8;
    margin-top: 2px;
}

.exercise-details[b-53liamc6uf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exercise-header[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exercise-title[b-53liamc6uf] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.type-outline-badge[b-53liamc6uf] {
    padding: 2px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    background: #ffffff;
}

.exercise-subtitle[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.exercise-check[b-53liamc6uf] {
    align-self: center;
}

.check-box[b-53liamc6uf] {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.2s;
    color: white;
}

.check-box.checked[b-53liamc6uf] {
    background: #3b82f6;
    border-color: #3b82f6;
}

.import-footer-sticky[b-53liamc6uf] {
    position: fixed;
    bottom: 100px; /* Positioned above .wizard-navigation */
    left: var(--sidebar-width, 240px);
    right: 0;
    padding: 0 32px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none; /* Allow clicks to pass through empty center */
    z-index: 1001;
    transition: all 0.3s ease;
}

/* Handle collapsed sidebar */
.sidebar.collapsed + .main-content .import-footer-sticky[b-53liamc6uf] {
    left: var(--sidebar-collapsed-width, 72px);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .import-footer-sticky[b-53liamc6uf] {
        left: 0;
        bottom: 180px;
        padding: 0 16px;
    }
}

.btn-import-back[b-53liamc6uf], .btn-import-confirm[b-53liamc6uf] {
    pointer-events: auto; /* Re-enable clicks for buttons */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}




.btn-import-back[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-import-back:hover[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-import-confirm[b-53liamc6uf] {
    padding: 12px 28px;
    background: #1e293b;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}


.btn-import-confirm:hover:not(:disabled)[b-53liamc6uf] {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.btn-import-confirm:active:not(:disabled)[b-53liamc6uf] {
    transform: translateY(0);
}

.btn-import-confirm:disabled[b-53liamc6uf] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.clear-selection-btn[b-53liamc6uf] {
    background: none;
    border: none;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    text-decoration: underline;
}

.clear-selection-btn:hover[b-53liamc6uf] {
    color: #64748b;
}

.footer-actions[b-53liamc6uf] {
    display: flex;
    gap: 12px;
}

.btn-back-messages[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back-messages:hover[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.import-empty-state[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: #94a3b8;
}

.import-empty-icon[b-53liamc6uf] {
    width: 64px;
    height: 64px;
    background: #f1f5f9;
    color: #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* -----------------------------------------
   6. GROUP PROGRAMS SECTION
   ----------------------------------------- */
.programs-container[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 32px;
    margin-top: 16px;
}

.programs-header[b-53liamc6uf] {
    margin-bottom: 24px;
}

.header-title-group[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon-box[b-53liamc6uf] {
    color: #1e293b;
    display: flex;
    align-items: center;
}

.header-title-group h2[b-53liamc6uf] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.programs-controls[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.programs-controls .search-box[b-53liamc6uf] {
    max-width: 480px;
}

.btn-new-sequence[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: #10B981;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-new-sequence:hover[b-53liamc6uf] {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}

.programs-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.program-item[b-53liamc6uf] {
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.program-item:hover[b-53liamc6uf] {
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.program-item.expanded[b-53liamc6uf] {
    border-color: #e2e8f0;
}

.program-item-header[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    background: #ffffff;
}

.header-left[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-main-row[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.expansion-chevron[b-53liamc6uf] {
    color: #94a3b8;
    transition: transform 0.2s;
}

.expansion-chevron.open[b-53liamc6uf] {
    transform: rotate(180deg);
}

.sequence-icon-box[b-53liamc6uf] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.name-badges[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sequence-name[b-53liamc6uf] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.p-badge[b-53liamc6uf] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.p-badge.status[b-53liamc6uf] {
    background: #0f172a;
    color: #ffffff;
}

.p-badge.type[b-53liamc6uf] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.sequence-meta[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 72px;
    /* Alignment with name: 20(chevron) + 16(gap) + 40(icon) + 16(gap) = 92? No, let's eyeball or calculate. Chevron is 20, Icon is 40. Gaps are 16. 20+16+40+16 = 92. */
}

.meta-item[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.header-right[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-action[b-53liamc6uf] {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #94a3b8;
}

.btn-action:hover[b-53liamc6uf] {
    background: #f8fafc;
}

.btn-action.pause[b-53liamc6uf] {
    color: #f97316;
}

.btn-action.edit[b-53liamc6uf] {
    color: #64748b;
}

.btn-action.delete[b-53liamc6uf] {
    color: #ef4444;
}

.program-item-details[b-53liamc6uf] {
    padding: 24px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.details-grid[b-53liamc6uf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.details-section .section-header[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: #1e293b;
}

.details-section .section-header h3[b-53liamc6uf] {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.recipients-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recipient-row[b-53liamc6uf] {
    font-size: 14px;
}

.parent-name[b-53liamc6uf] {
    font-weight: 700;
    color: #475569;
}

.child-name[b-53liamc6uf] {
    color: #64748b;
}

.schedule-card[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.item-order[b-53liamc6uf] {
    font-size: 14px;
    color: #94a3b8;
}

.item-main[b-53liamc6uf] {
    flex: 1;
}

.item-title-row[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-title[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.item-type-badge[b-53liamc6uf] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
}

.item-timing[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
}

/* Module Selection Pills */
.selected-modules-container[b-53liamc6uf] {
    margin-bottom: 24px;
    background: white;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.selected-modules-container .section-title[b-53liamc6uf] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.module-pills-wrapper[b-53liamc6uf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.module-pill[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #1e40af;
    transition: all 0.2s ease;
}

.module-pill:hover[b-53liamc6uf] {
    background: #dbeafe;
    border-color: #93c5fd;
}

.module-pill-icon[b-53liamc6uf] {
    display: flex;
    align-items: center;
    color: #3b82f6;
}

.module-pill-text[b-53liamc6uf] {
    font-weight: 500;
}

.btn-remove-pill[b-53liamc6uf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}

.btn-remove-pill:hover[b-53liamc6uf] {
    background: #fee2e2;
    color: #dc2626;
}

/* Table Expansion Styles */
.btn-expand-toggle[b-53liamc6uf] {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
    border-radius: 4px;
}

.btn-expand-toggle:hover[b-53liamc6uf] {
    color: #3b82f6;
    background: #eff6ff;
}

.btn-expand-toggle.open[b-53liamc6uf] {
    transform: rotate(90deg);
    color: #3b82f6;
}

.expanded-details-row[b-53liamc6uf] {
    background: #fbfdff;
}

.details-cell[b-53liamc6uf] {
    padding: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.details-content[b-53liamc6uf] {
    padding: 16px 24px 24px 84px;
    /* Offset to align with name */
    background: #fcfdfe;
    border-top: 1px solid #f1f5f9;
}

.expanded-exercises-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expanded-exercise-item[b-53liamc6uf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.expanded-exercise-item:hover[b-53liamc6uf] {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.05);
}

.ex-icon[b-53liamc6uf] {
    color: #94a3b8;
    margin-top: 2px;
}

.ex-info[b-53liamc6uf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ex-title[b-53liamc6uf] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.ex-subtitle[b-53liamc6uf] {
    font-size: 13px;
    color: #64748b;
}

.ex-type-badge[b-53liamc6uf] {
    padding: 2px 10px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.empty-expansion-state[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 14px;
    padding: 12px 0;
}

.loading-expansion[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 14px;
    padding: 12px 0;
}

.spinner-small[b-53liamc6uf] {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-53liamc6uf 0.8s linear infinite;
}

@keyframes spin-b-53liamc6uf {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------
   7. UTILITIES & MISC
   ----------------------------------------- */

/* Premium Check-In Form Builder Styles */
.builder-container[b-53liamc6uf] {
    display: flex;
    height: calc(100vh - 250px);
    min-height: 650px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    margin-bottom: 32px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar Styling */
.builder-sidebar[b-53liamc6uf] {
    width: 320px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 20;
}

.builder-container.sidebar-collapsed .builder-sidebar[b-53liamc6uf] {
    width: 68px;
}

.sidebar-header[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-icon[b-53liamc6uf] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.sidebar-title-group[b-53liamc6uf] {
    flex: 1;
    transition: opacity 0.2s, transform 0.2s;
}

.builder-container.sidebar-collapsed .sidebar-title-group[b-53liamc6uf] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

.sidebar-title[b-53liamc6uf] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.sidebar-subtitle[b-53liamc6uf] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.btn-sidebar-toggle[b-53liamc6uf] {
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-sidebar-toggle:hover[b-53liamc6uf] {
    color: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sidebar-content-scroll[b-53liamc6uf] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.builder-container.sidebar-collapsed .sidebar-content-scroll[b-53liamc6uf] {
    padding: 24px 12px;
}

.sidebar-section[b-53liamc6uf] {
    transition: opacity 0.2s;
}

.builder-container.sidebar-collapsed .sidebar-section label[b-53liamc6uf],
.builder-container.sidebar-collapsed .sidebar-section input[b-53liamc6uf],
.builder-container.sidebar-collapsed .sidebar-section textarea[b-53liamc6uf] {
    display: none;
}

.sidebar-label[b-53liamc6uf] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.builder-input[b-53liamc6uf] {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    color: #1e293b;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

.builder-input:focus[b-53liamc6uf] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.question-type-grid[b-53liamc6uf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.builder-container.sidebar-collapsed .question-type-grid[b-53liamc6uf] {
    grid-template-columns: 1fr;
}

.btn-qtype[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    gap: 6px;
}

.btn-qtype:hover[b-53liamc6uf] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.builder-container.sidebar-collapsed .qtype-text[b-53liamc6uf] {
    display: none;
}

.qtype-icon[b-53liamc6uf] {
    font-size: 20px;
}

.sidebar-footer[b-53liamc6uf] {
    padding: 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.builder-container.sidebar-collapsed .sidebar-footer[b-53liamc6uf] {
    padding: 24px 12px;
}

.builder-container.sidebar-collapsed .sidebar-footer .btn-text[b-53liamc6uf] {
    display: none;
}

.btn-builder-outline[b-53liamc6uf] {
    background: white;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-builder-outline:hover[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-builder-primary[b-53liamc6uf] {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
}

.btn-builder-primary:hover[b-53liamc6uf] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -2px rgba(59, 130, 246, 0.3);
}

/* Canvas Styling */
.builder-canvas[b-53liamc6uf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f1f5f9;
    overflow-y: auto;
}

.canvas-header[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.canvas-header-left[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-canvas-expand[b-53liamc6uf] {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-canvas-expand:hover[b-53liamc6uf] {
    background: #e2e8f0;
    color: #1e293b;
}

.canvas-title[b-53liamc6uf] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
}

.q-count-badge[b-53liamc6uf] {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #dbeafe;
}

.canvas-header-right[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-default-control[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.admin-default-text[b-53liamc6uf] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.btn-toggle[b-53liamc6uf] {
    width: 40px;
    height: 22px;
    background: #e2e8f0;
    border-radius: 20px;
    border: none;
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    display: flex;
    align-items: center;
}

.btn-toggle.active[b-53liamc6uf] {
    background: #10b981;
}

.toggle-knob[b-53liamc6uf] {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-toggle.active .toggle-knob[b-53liamc6uf] {
    transform: translateX(18px);
}

.canvas-body[b-53liamc6uf] {
    padding: 40px 32px;
    max-width: 850px;
    margin: 0 auto;
    width: 100%;
}

.empty-canvas-state[b-53liamc6uf] {
    text-align: center;
    padding: 80px 40px;
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.empty-canvas-icon[b-53liamc6uf] {
    font-size: 48px;
    margin-bottom: 8px;
}

.empty-canvas-state h3[b-53liamc6uf] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.empty-canvas-state p[b-53liamc6uf] {
    color: #64748b;
    max-width: 320px;
    margin: 0;
    line-height: 1.6;
}

.questions-list[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.q-card[b-53liamc6uf] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.q-card:hover[b-53liamc6uf] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.q-card-header[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px;
}

.q-number[b-53liamc6uf] {
    width: 30px;
    height: 30px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.q-title-wrap[b-53liamc6uf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.q-title-input[b-53liamc6uf] {
    width: 100%;
    background: transparent;
    border: none;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.q-title-input[b-53liamc6uf]::placeholder {
    color: #94a3b8;
    font-weight: 400;
    opacity: 0.85;
}

.q-title-input:focus[b-53liamc6uf]::placeholder {
    opacity: 0;
}

.q-title-input:hover[b-53liamc6uf], .q-title-input:focus[b-53liamc6uf] {
    background: #f8fafc;
    outline: none;
}

.q-type-label[b-53liamc6uf] {
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 1px;
}

.q-actions[b-53liamc6uf] {
    display: flex;
    gap: 6px;
}

.btn-q-reorder[b-53liamc6uf], .btn-q-delete[b-53liamc6uf] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-q-reorder[b-53liamc6uf] {
    background: white;
    border: 1.5px solid #f1f5f9;
    color: #94a3b8;
}

.btn-q-reorder:hover:not(:disabled)[b-53liamc6uf] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-q-reorder:disabled[b-53liamc6uf] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-q-delete[b-53liamc6uf] {
    background: white;
    border: 1.5px solid #fef2f2;
    color: #fca5a5;
}

.btn-q-delete:hover[b-53liamc6uf] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.q-card-body[b-53liamc6uf] {
    padding: 0 24px 24px 70px;
}

.preview-tag[b-53liamc6uf] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.q-preview-container[b-53liamc6uf] {
    background: #f8fafc;
    border: 1.5px solid #f1f5f9;
    border-radius: 14px;
    padding: 20px;
}

.likert-preview[b-53liamc6uf] {
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    margin: 0 auto;
}

.likert-preview-item[b-53liamc6uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.likert-preview-circle[b-53liamc6uf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    background: white;
    transition: all 0.2s;
}

.likert-preview-circle.active[b-53liamc6uf] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
}

.likert-preview-label[b-53liamc6uf] {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-align: center;
    max-width: 70px;
}

.slider-preview[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.slider-limit[b-53liamc6uf] {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
}

.slider-track-visual[b-53liamc6uf] {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    position: relative;
}

.slider-fill-visual[b-53liamc6uf] {
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
}

.slider-thumb-visual[b-53liamc6uf] {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.yesno-preview[b-53liamc6uf] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-preview-toggle[b-53liamc6uf] {
    background: white;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
}

.btn-preview-toggle.active[b-53liamc6uf] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.preview-form-control[b-53liamc6uf] {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    color: #64748b;
    resize: none;
    font-family: inherit;
}

.q-card-footer[b-53liamc6uf] {
    padding: 16px 24px;
    background: #fcfdfe;
    border-top: 1px solid #f1f5f9;
}

.q-settings-group[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-left: 46px;
}

.q-setting-item[b-53liamc6uf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.q-setting-checkbox[b-53liamc6uf] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.q-hint-input-container[b-53liamc6uf] {
    margin-top: 16px;
    padding-left: 46px;
}

.q-hint-field[b-53liamc6uf] {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e293b;
    transition: border-color 0.2s;
}

.q-hint-field:focus[b-53liamc6uf] {
    outline: none;
    border-color: #3b82f6;
}

.fade-in[b-53liamc6uf] {
    animation: fadeIn-b-53liamc6uf 0.4s ease-out;
}

@keyframes fadeIn-b-53liamc6uf {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/MuseumAdmin/Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard-root[b-gliunpypz1] {
    padding: 32px;
    color: #1f2937;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.dashboard-header[b-gliunpypz1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.dashboard-header h2[b-gliunpypz1] {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    color: #111827;
}

.dashboard-controls[b-gliunpypz1] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.control-group[b-gliunpypz1] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.control-icon[b-gliunpypz1] {
    font-size: 14px;
    margin-right: 8px;
    opacity: 0.7;
}

.date-select[b-gliunpypz1] {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    outline: none;
}

.notif-btn[b-gliunpypz1] {
    background: #fff;
    border: 1px solid #e5e7eb;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    color: #6b7280;
    transition: all 0.2s;
}

.notif-btn:hover[b-gliunpypz1] {
    background: #f9fafb;
    color: #374151;
}

.badge-dot[b-gliunpypz1] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid white;
}

.user-profile-widget[b-gliunpypz1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid #e5e7eb;
}

.avatar[b-gliunpypz1] {
    width: 36px;
    height: 36px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.username[b-gliunpypz1] {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

/* Stats Row */
.stats-row[b-gliunpypz1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.stat-card[b-gliunpypz1] {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(229, 231, 235, 0.5);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.2s;
}

.stat-card:hover[b-gliunpypz1] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.stat-icon-wrapper[b-gliunpypz1] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.warn-bg[b-gliunpypz1] {
    background: #fffbeb;
}

.success-bg[b-gliunpypz1] {
    background: #ecfdf5;
}

.blue-bg[b-gliunpypz1] {
    background: #eff6ff;
}

.purple-bg[b-gliunpypz1] {
    background: #f5f3ff;
}

.stat-content[b-gliunpypz1] {
    flex: 1;
}

.stat-label[b-gliunpypz1] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.stat-number[b-gliunpypz1] {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-desc[b-gliunpypz1] {
    font-size: 13px;
    color: #9ca3af;
}

.badge-success[b-gliunpypz1] {
    color: #10b981;
    font-size: 11px;
    background: #ecfdf5;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Main Grid */
.main-grid[b-gliunpypz1] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.card[b-gliunpypz1] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(229, 231, 235, 0.5);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.card-header[b-gliunpypz1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header h3[b-gliunpypz1] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.chart-period[b-gliunpypz1] {
    font-size: 13px;
    color: #6b7280;
}

/* Chart Styles */
.chart-container[b-gliunpypz1] {
    flex: 1;
    margin-bottom: 16px;
}

.main-chart-svg[b-gliunpypz1] {
    width: 100%;
    height: auto;
    max-height: 300px;
}

.chart-bar[b-gliunpypz1] {
    transition: fill 0.2s, y 0.2s, height 0.2s;
    cursor: pointer;
}

.chart-bar:hover[b-gliunpypz1] {
    fill: #2563eb;
    opacity: 0.9;
}

.chart-footer[b-gliunpypz1] {
    border-top: 1px solid #f3f4f6;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
}

.footer-stat[b-gliunpypz1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-box[b-gliunpypz1] {
    width: 36px;
    height: 36px;
    background: #eff6ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.stat-title[b-gliunpypz1] {
    font-size: 13px;
    color: #6b7280;
}

.stat-diff[b-gliunpypz1] {
    font-weight: 600;
    font-size: 14px;
}

.positive[b-gliunpypz1] {
    color: #10b981;
}

.big-num[b-gliunpypz1] {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

/* Recent Activity */
.activity-timeline[b-gliunpypz1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-item[b-gliunpypz1] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 20px;
}

.activity-item:not(:last-child)[b-gliunpypz1]::after {
    content: '';
    position: absolute;
    left: 16px;
    /* center of 32px icon */
    top: 36px;
    bottom: 0;
    width: 2px;
    background: #f3f4f6;
}

.activity-icon-box[b-gliunpypz1] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
}

.success-light[b-gliunpypz1] {
    background: #ecfdf5;
    border: 2px solid #fff;
}

.warn-light[b-gliunpypz1] {
    background: #fffbeb;
    border: 2px solid #fff;
}

.error-light[b-gliunpypz1] {
    background: #fef2f2;
    border: 2px solid #fff;
}

.info-light[b-gliunpypz1] {
    background: #eff6ff;
    border: 2px solid #fff;
}

.activity-details p[b-gliunpypz1] {
    margin: 0 0 4px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #374151;
}

.activity-details strong[b-gliunpypz1] {
    font-weight: 600;
    color: #111827;
}

.activity-details .time[b-gliunpypz1] {
    font-size: 12px;
    color: #9ca3af;
}

.activity-footer[b-gliunpypz1] {
    text-align: right;
    margin-top: auto;
}

.view-all-link[b-gliunpypz1] {
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none;
}

.view-all-link:hover[b-gliunpypz1] {
    text-decoration: underline;
}

/* Trending Row (Legacy/Preserved if existing, or Updated) */
.trending-row[b-gliunpypz1] {
    margin-top: 0;
}

.trending-header[b-gliunpypz1] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #111827;
}

.trending-cards[b-gliunpypz1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.trend-card[b-gliunpypz1] {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.trend-illustration[b-gliunpypz1] {
    height: 100px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 8px;
    margin-bottom: 12px;
}

.trend-title[b-gliunpypz1] {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.badge[b-gliunpypz1] {
    background: #fff7ed;
    color: #c2410c;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 8px;
}

@media (max-width: 1024px) {
    .stats-row[b-gliunpypz1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-grid[b-gliunpypz1] {
        grid-template-columns: 1fr;
    }

    .trending-cards[b-gliunpypz1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .trending-cards[b-gliunpypz1] {
        grid-template-columns: 1fr;
    }

    .dashboard-header[b-gliunpypz1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}
/* _content/MuseumAdmin/Components/Pages/Exhibits.razor.rz.scp.css */
/* =========================================
   EXHIBITS PAGE STYLES
   ========================================= */

/* Filter Container - Matching Home.razor uplift */
.filter-container[b-wnc44ep0md] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;

    /* ensure filters don't overlap table header */
    position: relative;
    z-index: 0;
}

.filter-container:hover[b-wnc44ep0md] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.8);
}

.filter-group[b-wnc44ep0md] {
    display: flex;
    align-items: center;
}

.status-filters[b-wnc44ep0md] {
    gap: 32px;
}

.status-row[b-wnc44ep0md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.status-pills[b-wnc44ep0md] {
    display: flex;
    gap: 12px;
}

.filter-tab[b-wnc44ep0md] {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-tab:hover[b-wnc44ep0md] {
    background-color: var(--color-border-light);
    color: var(--color-text-primary);
}

.filter-tab.active[b-wnc44ep0md] {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.filter-divider[b-wnc44ep0md] {
    width: 1px;
    height: 32px;
    background: var(--color-border);
    margin: 0 4px;
}

/* Modern Search Wrapper */
.search-filter[b-wnc44ep0md] {
    flex: 1;
    max-width: 400px;
}

.modern-search-wrapper[b-wnc44ep0md] {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 44px;
    width: 100%;
}

.modern-search-wrapper:focus-within[b-wnc44ep0md] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.search-icon-left[b-wnc44ep0md] {
    position: absolute;
    left: 14px;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.modern-search-input[b-wnc44ep0md] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 14px 0 44px;
    font-size: 14px;
    color: var(--color-text-primary);
    height: 100%;
}

.clear-search-btn[b-wnc44ep0md] {
    background: transparent;
    border: none;
    padding: 8px;
    margin-right: 4px;
    cursor: pointer;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
}

/* =========================
   BULK ACTIONS (Floating)
   ========================= */
.bulk-toolbar-floating[b-wnc44ep0md] {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border);
    padding: 8px 12px 8px 24px;
    border-radius: 100px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 1000;
    width: fit-content;
    pointer-events: auto;
}

.bulk-count[b-wnc44ep0md] {
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-count[b-wnc44ep0md]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
}

.bulk-actions-group[b-wnc44ep0md] {
    display: flex;
    gap: 8px;
}

.bulk-btn[b-wnc44ep0md] {
    height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.bulk-btn.secondary[b-wnc44ep0md] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.bulk-btn.danger-solid[b-wnc44ep0md] {
    background: var(--color-error);
    color: white;
}

.btn-close-toolbar[b-wnc44ep0md] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   TABLE STYLES
   ========================= */
.table-card[b-wnc44ep0md] {
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* bring table above filters to avoid visual overlap */
    position: relative;
    z-index: 1;
}

.table-container[b-wnc44ep0md] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-wnc44ep0md] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-wnc44ep0md] {
    background: var(--color-border-light);
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-wnc44ep0md] {
    padding: 16px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
    vertical-align: middle;
}

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

.data-table tr.row-selected[b-wnc44ep0md] {
    background-color: rgba(59, 130, 246, 0.05);
}

.name-cell[b-wnc44ep0md] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.checkbox-col[b-wnc44ep0md] {
    width: 48px;
    text-align: center;
}

input[type="checkbox"][b-wnc44ep0md] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}

/* Status Badges */
.status-badge[b-wnc44ep0md] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
    min-width: 56px;
    text-align: center;
    vertical-align: middle;
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

/* Override global admin-card absolute positioning when used inside the table
   so status badges stay in their table cell rather than floating to the card corner */
.data-table .status-badge[b-wnc44ep0md],
.table-card .status-badge[b-wnc44ep0md] {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
}

.status-badge.active[b-wnc44ep0md] {
    background: rgba(22, 163, 74, 0.1);
    color: var(--color-success);
}

.status-badge.draft[b-wnc44ep0md] {
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

/* Specific Column Alignments */
.actions-col[b-wnc44ep0md] {
    text-align: right !important;
    padding-right: 24px !important;
}

/* Table Actions */
.table-actions[b-wnc44ep0md] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.action-link[b-wnc44ep0md] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-base);
}

.action-link:hover[b-wnc44ep0md] {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    text-decoration: none;
}

.btn-icon[b-wnc44ep0md] {
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-size: 18px;
}

/* Pagination */
.pagination-container[b-wnc44ep0md] {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

.pagination-info[b-wnc44ep0md] {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.pagination[b-wnc44ep0md] {
    display: flex;
    gap: 8px;
    list-style: none;
}

.pagination-item[b-wnc44ep0md] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.pagination-item:hover[b-wnc44ep0md] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.pagination-item.active[b-wnc44ep0md] {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* Responsiveness */
@media (max-width: 768px) {
    .filter-container[b-wnc44ep0md] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-divider[b-wnc44ep0md] {
        display: none;
    }

    .mobile-collapsed .search-filter[b-wnc44ep0md] {
        display: none;
    }

    .mobile-filter-arrow .arrow[b-wnc44ep0md] {
        transition: transform 0.2s;
    }

    .mobile-expanded .arrow[b-wnc44ep0md] {
        transform: rotate(180deg);
    }
}

/* Page loader overlay */
.page-loader-overlay[b-wnc44ep0md] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1200;
    transition: opacity .25s ease, visibility .25s ease;
}

.page-loader-overlay.hidden[b-wnc44ep0md] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-card[b-wnc44ep0md] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
    background: linear-gradient(180deg, #ffffff, #fbfbfb);
    color: var(--color-text, #111827);
}

.loader-ring[b-wnc44ep0md] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--primary, #2563eb);
    animation: spin-b-wnc44ep0md 1s linear infinite;
}

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

.loader-text[b-wnc44ep0md] {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
}

.loader-sub[b-wnc44ep0md] {
    font-size: 12px;
    color: rgba(17, 24, 39, 0.6);
}

.dropdown-chevron[b-wnc44ep0md] {
    display: inline-block;
    vertical-align: middle;
    transition: transform .18s ease;
    stroke: currentColor;
}
/* _content/MuseumAdmin/Components/Pages/ExhibitsDataForm.razor.rz.scp.css */
/* =========================================
   CREATE EXHIBITION - PRODUCTION GRADE UI
   ========================================= */

/* -----------------------------------------
   1. BASE ANIMATIONS
   ----------------------------------------- */
.fade-in[b-pqmlgcv6vf] {
    animation: fadeIn-b-pqmlgcv6vf 0.4s ease-out;
}

@keyframes fadeIn-b-pqmlgcv6vf {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes pulse-b-pqmlgcv6vf {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

@keyframes progressFill-b-pqmlgcv6vf {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* -----------------------------------------
   2. STEPPER COMPONENT
   ----------------------------------------- */
.stepper-row[b-pqmlgcv6vf] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px 32px;
    box-sizing: border-box;
    gap: 0;
}

.step-node-wrapper[b-pqmlgcv6vf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 160px;
    position: relative;
}

.step-node[b-pqmlgcv6vf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.step-node:hover[b-pqmlgcv6vf] {
    transform: translateY(-3px);
}

.step-node:focus-visible[b-pqmlgcv6vf] {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Step Circle - Base State (Not Started) */
.step-circle[b-pqmlgcv6vf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background-color: #f1f5f9;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.step-circle svg[b-pqmlgcv6vf] {
    width: 20px;
    height: 20px;
}

/* Step Circle - Active State */
.step-node.active .step-circle[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
    animation: pulse-b-pqmlgcv6vf 2s infinite;
}

/* Step Circle - Completed State */
.step-node.completed .step-circle[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border-color: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

/* Step Connector */
.step-connector[b-pqmlgcv6vf] {
    flex: 1;
    height: 2px;
    background-color: #e2e8f0;
    margin-top: 21px;
    min-width: 40px;
    max-width: 80px;
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}

.step-connector[b-pqmlgcv6vf]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-connector.is-active[b-pqmlgcv6vf]::after {
    transform: scaleX(1);
}

/* Step Text */
.step-title[b-pqmlgcv6vf] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-top: 14px;
    white-space: nowrap;
    transition: color 0.2s;
    text-align: center;
}

.step-node.active .step-title[b-pqmlgcv6vf],
.step-node.completed .step-title[b-pqmlgcv6vf] {
    color: #1e293b;
}

.step-subtitle[b-pqmlgcv6vf] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
    white-space: nowrap;
    transition: color 0.2s;
    text-align: center;
}

/* -----------------------------------------
   3. CONTENT CONTAINER & CARDS
   ----------------------------------------- */
.content-container[b-pqmlgcv6vf] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

.card[b-pqmlgcv6vf] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.card-body[b-pqmlgcv6vf] {
    padding: 32px;
}

/* -----------------------------------------
   4. FORM SECTION STYLING
   ----------------------------------------- */
.form-section[b-pqmlgcv6vf] {
    animation: fadeIn-b-pqmlgcv6vf 0.4s ease-out;
}

.form-section h2[b-pqmlgcv6vf] {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px 0;
    letter-spacing: -0.025em;
}

.form-section p[b-pqmlgcv6vf] {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 32px 0;
    line-height: 1.5;
}

/* Form Labels */
.form-label[b-pqmlgcv6vf] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
    letter-spacing: -0.01em;
}

.form-label-modern[b-pqmlgcv6vf] {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}

/* Form Inputs */
.form-input[b-pqmlgcv6vf],
.form-select[b-pqmlgcv6vf] {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background-color: #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1e293b;
    font-family: inherit;
}

.form-input:hover[b-pqmlgcv6vf],
.form-select:hover[b-pqmlgcv6vf] {
    border-color: #cbd5e1;
    background-color: #fafbfc;
}

.form-input:focus[b-pqmlgcv6vf],
.form-select:focus[b-pqmlgcv6vf] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
    background-color: #ffffff;
}

.form-input[b-pqmlgcv6vf]::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.form-select[b-pqmlgcv6vf] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

textarea.form-input[b-pqmlgcv6vf] {
    min-height: 120px;
    line-height: 1.6;
}

/* -----------------------------------------
   5. FILTER & SEARCH (Step 2)
   ----------------------------------------- */
.filter-tab[b-pqmlgcv6vf] {
    padding: 8px 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tab:hover[b-pqmlgcv6vf] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.filter-tab.active[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.filter-search[b-pqmlgcv6vf] {
    flex: 1;
}

.modern-search-wrapper[b-pqmlgcv6vf] {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
    overflow: hidden;
    height: 42px;
}

.modern-search-wrapper:hover[b-pqmlgcv6vf] {
    border-color: #cbd5e1;
}

.modern-search-wrapper:focus-within[b-pqmlgcv6vf] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.search-icon-left[b-pqmlgcv6vf] {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
}

.modern-search-wrapper:focus-within .search-icon-left[b-pqmlgcv6vf] {
    color: #3b82f6;
}

.modern-search-input[b-pqmlgcv6vf] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px 14px 10px 42px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    font-family: inherit;
}

.modern-search-input[b-pqmlgcv6vf]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* -----------------------------------------
   6. DATA TABLE (Step 2)
   ----------------------------------------- */
.table-container[b-pqmlgcv6vf] {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.data-table[b-pqmlgcv6vf] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-pqmlgcv6vf] {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.data-table th[b-pqmlgcv6vf] {
    padding: 14px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

.data-table td[b-pqmlgcv6vf] {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
}

.data-table tbody tr[b-pqmlgcv6vf] {
    transition: all 0.15s ease;
}

.data-table tbody tr:hover[b-pqmlgcv6vf] {
    background-color: #f8fafc;
}

.data-table tbody tr:last-child td[b-pqmlgcv6vf] {
    border-bottom: none;
}

/* Selected Row */
.row-selected[b-pqmlgcv6vf] {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

.row-selected:hover[b-pqmlgcv6vf] {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

/* Checkbox Column */
.checkbox-col[b-pqmlgcv6vf] {
    width: 48px;
    text-align: center;
}

.checkbox-col input[type="checkbox"][b-pqmlgcv6vf] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #3b82f6;
    border-radius: 4px;
}

/* Status Badge */
.status-badge[b-pqmlgcv6vf] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: capitalize;
}

.status-badge.approved[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.15) 100%);
    color: #16a34a;
}

.status-badge.pending[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 138, 0, 0.15) 100%);
    color: #d97706;
}

.status-badge.rejected[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.15) 100%);
    color: #dc2626;
}

/* -----------------------------------------
   7. PAGINATION
   ----------------------------------------- */
.pagination-container[b-pqmlgcv6vf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 0;
    margin-top: 20px;
}

.pagination-info[b-pqmlgcv6vf] {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.pagination[b-pqmlgcv6vf] {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-item[b-pqmlgcv6vf] {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    background: #ffffff;
}

.pagination-item:hover[b-pqmlgcv6vf] {
    background-color: #f8fafc;
    border-color: #3b82f6;
    color: #3b82f6;
}

.pagination-item.active[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* -----------------------------------------
   8. SLIDE CARDS (Step 3)
   ----------------------------------------- */
.slide-card-modern[b-pqmlgcv6vf] {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.slide-card-modern:hover[b-pqmlgcv6vf] {
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.slide-card-modern h3[b-pqmlgcv6vf] {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.slide-card-modern p[b-pqmlgcv6vf] {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* Upload Dropzone */
.upload-dropzone-modern[b-pqmlgcv6vf] {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    background: #fafbfc;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-dropzone-modern:hover[b-pqmlgcv6vf] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.02);
}

.upload-dropzone-modern label[b-pqmlgcv6vf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    cursor: pointer;
}

/* Info Banner */
.bg-blue-50\/50[b-pqmlgcv6vf] {
    background: rgba(239, 246, 255, 0.6);
    backdrop-filter: blur(8px);
}

/* -----------------------------------------
   9. NAVIGATION BUTTONS
   ----------------------------------------- */
.btn[b-pqmlgcv6vf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn-primary[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active[b-pqmlgcv6vf] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-secondary[b-pqmlgcv6vf] {
    background-color: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.btn-secondary:hover[b-pqmlgcv6vf] {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-secondary.border-none[b-pqmlgcv6vf] {
    border: none;
    background: transparent;
}

.btn-secondary.border-none:hover[b-pqmlgcv6vf] {
    background: #f1f5f9;
}

/* Form Navigation Footer */
.form-navigation[b-pqmlgcv6vf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.form-navigation-actions[b-pqmlgcv6vf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Cancel Button */
.btn-cancel[b-pqmlgcv6vf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-pqmlgcv6vf] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.btn-cancel:active[b-pqmlgcv6vf] {
    background: rgba(239, 68, 68, 0.12);
}

/* Save as Draft Button */
.btn-draft[b-pqmlgcv6vf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-draft:hover[b-pqmlgcv6vf] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-draft:active[b-pqmlgcv6vf] {
    transform: translateY(0);
    box-shadow: none;
}

/* Continue Button */
.btn-continue[b-pqmlgcv6vf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-continue:hover[b-pqmlgcv6vf] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.btn-continue:active[b-pqmlgcv6vf] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Button Icon */
.btn-icon-svg[b-pqmlgcv6vf] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile Navigation */
@media (max-width: 640px) {
    .form-navigation[b-pqmlgcv6vf] {
        flex-direction: column;
        gap: 16px;
        padding-top: 20px;
    }

    .form-navigation-actions[b-pqmlgcv6vf] {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .btn-cancel[b-pqmlgcv6vf] {
        order: 3;
        width: 100%;
        padding: 14px 20px;
    }

    .btn-draft[b-pqmlgcv6vf] {
        order: 2;
        width: 100%;
        padding: 14px 20px;
    }

    .btn-continue[b-pqmlgcv6vf] {
        order: 1;
        width: 100%;
        padding: 14px 24px;
    }
}

/* -----------------------------------------
   10. UTILITY HELPERS
   ----------------------------------------- */
.mb-10[b-pqmlgcv6vf] {
    margin-bottom: 32px;
}

.mt-lg[b-pqmlgcv6vf] {
    margin-top: 32px;
}

.pt-lg[b-pqmlgcv6vf] {
    padding-top: 24px;
}

.px-lg[b-pqmlgcv6vf] {
    padding-left: 32px;
    padding-right: 32px;
}

.resize-none[b-pqmlgcv6vf] {
    resize: none;
}

.text-center[b-pqmlgcv6vf] {
    text-align: center;
}

/* Grid system */
.grid[b-pqmlgcv6vf] {
    display: grid;
}

.grid-cols-1[b-pqmlgcv6vf] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.col-span-2[b-pqmlgcv6vf] {
    grid-column: span 2 / span 2;
}

.gap-x-8[b-pqmlgcv6vf] {
    column-gap: 32px;
}

.gap-y-6[b-pqmlgcv6vf] {
    row-gap: 24px;
}

.gap-8[b-pqmlgcv6vf] {
    gap: 32px;
}

.gap-6[b-pqmlgcv6vf] {
    gap: 24px;
}

.gap-4[b-pqmlgcv6vf] {
    gap: 16px;
}

.gap-3[b-pqmlgcv6vf] {
    gap: 12px;
}

.gap-2[b-pqmlgcv6vf] {
    gap: 8px;
}

/* Flexbox */
.flex[b-pqmlgcv6vf] {
    display: flex;
}

.flex-col[b-pqmlgcv6vf] {
    flex-direction: column;
}

.flex-1[b-pqmlgcv6vf] {
    flex: 1 1 0%;
}

.flex-shrink-0[b-pqmlgcv6vf] {
    flex-shrink: 0;
}

.items-start[b-pqmlgcv6vf] {
    align-items: flex-start;
}

.items-center[b-pqmlgcv6vf] {
    align-items: center;
}

.justify-center[b-pqmlgcv6vf] {
    justify-content: center;
}

.justify-between[b-pqmlgcv6vf] {
    justify-content: space-between;
}

/* Size utilities */
.w-full[b-pqmlgcv6vf] {
    width: 100%;
}

.w-5[b-pqmlgcv6vf] {
    width: 20px;
}

.h-5[b-pqmlgcv6vf] {
    height: 20px;
}

.w-4[b-pqmlgcv6vf] {
    width: 16px;
}

.h-4[b-pqmlgcv6vf] {
    height: 16px;
}

.w-10[b-pqmlgcv6vf] {
    width: 40px;
}

.h-10[b-pqmlgcv6vf] {
    height: 40px;
}

.w-12[b-pqmlgcv6vf] {
    width: 48px;
}

.h-12[b-pqmlgcv6vf] {
    height: 48px;
}

/* Typography */
.text-xl[b-pqmlgcv6vf] {
    font-size: 20px;
}

.text-lg[b-pqmlgcv6vf] {
    font-size: 18px;
}

.text-sm[b-pqmlgcv6vf] {
    font-size: 14px;
}

.text-xs[b-pqmlgcv6vf] {
    font-size: 12px;
}

.font-bold[b-pqmlgcv6vf] {
    font-weight: 700;
}

.font-semibold[b-pqmlgcv6vf] {
    font-weight: 600;
}

.font-medium[b-pqmlgcv6vf] {
    font-weight: 500;
}

.uppercase[b-pqmlgcv6vf] {
    text-transform: uppercase;
}

.tracking-wider[b-pqmlgcv6vf] {
    letter-spacing: 0.05em;
}

.tracking-widest[b-pqmlgcv6vf] {
    letter-spacing: 0.1em;
}

.tracking-tight[b-pqmlgcv6vf] {
    letter-spacing: -0.025em;
}

/* Colors */
.text-gray-900[b-pqmlgcv6vf] {
    color: #111827;
}

.text-gray-700[b-pqmlgcv6vf] {
    color: #374151;
}

.text-gray-500[b-pqmlgcv6vf] {
    color: #6b7280;
}

.text-gray-400[b-pqmlgcv6vf] {
    color: #9ca3af;
}

.text-blue-500[b-pqmlgcv6vf] {
    color: #3b82f6;
}

.text-blue-600[b-pqmlgcv6vf] {
    color: #2563eb;
}

.text-blue-700[b-pqmlgcv6vf] {
    color: #1d4ed8;
}

/* Background colors */
.bg-white[b-pqmlgcv6vf] {
    background-color: #ffffff;
}

.bg-gray-50[b-pqmlgcv6vf] {
    background-color: #f9fafb;
}

.bg-blue-100[b-pqmlgcv6vf] {
    background-color: #dbeafe;
}

.bg-rose-100[b-pqmlgcv6vf] {
    background-color: #ffe4e6;
}

.bg-sky-100[b-pqmlgcv6vf] {
    background-color: #e0f2fe;
}

.bg-violet-100[b-pqmlgcv6vf] {
    background-color: #ede9fe;
}

.bg-amber-100[b-pqmlgcv6vf] {
    background-color: #fef3c7;
}

/* Border */
.border[b-pqmlgcv6vf] {
    border-width: 1px;
    border-style: solid;
}

.border-t[b-pqmlgcv6vf] {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-gray-100[b-pqmlgcv6vf] {
    border-color: #f3f4f6;
}

.border-gray-200[b-pqmlgcv6vf] {
    border-color: #e5e7eb;
}

.border-blue-100[b-pqmlgcv6vf] {
    border-color: #dbeafe;
}

.border-blue-200[b-pqmlgcv6vf] {
    border-color: #bfdbfe;
}

.border-blue-500[b-pqmlgcv6vf] {
    border-color: #3b82f6;
}

.rounded[b-pqmlgcv6vf] {
    border-radius: 4px;
}

.rounded-lg[b-pqmlgcv6vf] {
    border-radius: 8px;
}

.rounded-xl[b-pqmlgcv6vf] {
    border-radius: 12px;
}

.rounded-full[b-pqmlgcv6vf] {
    border-radius: 9999px;
}

/* Shadows */
.shadow-inner[b-pqmlgcv6vf] {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

/* Misc */
.overflow-hidden[b-pqmlgcv6vf] {
    overflow: hidden;
}

.transition-colors[b-pqmlgcv6vf] {
    transition-property: color, background-color, border-color;
    transition-duration: 200ms;
}

.transition-all[b-pqmlgcv6vf] {
    transition-property: all;
    transition-duration: 200ms;
}

.leading-relaxed[b-pqmlgcv6vf] {
    line-height: 1.625;
}

.divide-y>*+*[b-pqmlgcv6vf] {
    border-top-width: 1px;
}

.divide-gray-50>*+*[b-pqmlgcv6vf] {
    border-color: #f9fafb;
}

.mt-0\.5[b-pqmlgcv6vf] {
    margin-top: 2px;
}

.mt-1[b-pqmlgcv6vf] {
    margin-top: 4px;
}

.mt-6[b-pqmlgcv6vf] {
    margin-top: 24px;
}

.mb-1[b-pqmlgcv6vf] {
    margin-bottom: 4px;
}

.mb-2[b-pqmlgcv6vf] {
    margin-bottom: 8px;
}

.mb-6[b-pqmlgcv6vf] {
    margin-bottom: 24px;
}

.mb-8[b-pqmlgcv6vf] {
    margin-bottom: 32px;
}

.p-4[b-pqmlgcv6vf] {
    padding: 16px;
}

.p-6[b-pqmlgcv6vf] {
    padding: 24px;
}

.py-1\.5[b-pqmlgcv6vf] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.py-2[b-pqmlgcv6vf] {
    padding-top: 8px;
    padding-bottom: 8px;
}

.py-4[b-pqmlgcv6vf] {
    padding-top: 16px;
    padding-bottom: 16px;
}

.px-4[b-pqmlgcv6vf] {
    padding-left: 16px;
    padding-right: 16px;
}

.hidden[b-pqmlgcv6vf] {
    display: none;
}

/* Hover states */
.hover\:border-blue-200:hover[b-pqmlgcv6vf] {
    border-color: #bfdbfe;
}

.hover\:border-blue-500:hover[b-pqmlgcv6vf] {
    border-color: #3b82f6;
}

.hover\:text-blue-600:hover[b-pqmlgcv6vf] {
    color: #2563eb;
}

.hover\:text-gray-600:hover[b-pqmlgcv6vf] {
    color: #4b7280;
}

.hover\:bg-blue-50\/30:hover[b-pqmlgcv6vf] {
    background-color: rgba(239, 246, 255, 0.3);
}

.hover\:bg-blue-100:hover[b-pqmlgcv6vf] {
    background-color: #dbeafe;
}

.group:hover .group-hover\:bg-blue-100[b-pqmlgcv6vf] {
    background-color: #dbeafe;
}

.group:hover .group-hover\:text-blue-600[b-pqmlgcv6vf] {
    color: #2563eb;
}

/* -----------------------------------------
   11. RESPONSIVE STYLES
   ----------------------------------------- */
@media (min-width: 768px) {
    .md\:grid-cols-2[b-pqmlgcv6vf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:flex-row[b-pqmlgcv6vf] {
        flex-direction: row;
    }

    .md\:w-72[b-pqmlgcv6vf] {
        width: 288px;
    }

    .md\:w-1\/3[b-pqmlgcv6vf] {
        width: 33.333333%;
    }

    .md\:w-2\/3[b-pqmlgcv6vf] {
        width: 66.666667%;
    }

    .md\:items-center[b-pqmlgcv6vf] {
        align-items: center;
    }
}

@media (min-width: 640px) {
    .sm\:flex-row[b-pqmlgcv6vf] {
        flex-direction: row;
    }

    .sm\:w-auto[b-pqmlgcv6vf] {
        width: auto;
    }
}

/* Mobile Stepper */
@media (max-width: 640px) {
    .stepper-row[b-pqmlgcv6vf] {
        padding: 24px 16px;
        gap: 0;
    }

    .step-node-wrapper[b-pqmlgcv6vf] {
        width: auto;
        flex: 1;
        min-width: 80px;
    }

    .step-circle[b-pqmlgcv6vf] {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .step-connector[b-pqmlgcv6vf] {
        min-width: 16px;
        max-width: 40px;
        margin-top: 17px;
    }

    .step-title[b-pqmlgcv6vf] {
        font-size: 10px;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }

    .step-subtitle[b-pqmlgcv6vf] {
        display: none;
    }

    .content-container[b-pqmlgcv6vf] {
        padding: 0 16px 60px;
    }

    .card-body[b-pqmlgcv6vf] {
        padding: 20px;
    }

    .form-section h2[b-pqmlgcv6vf] {
        font-size: 18px;
    }

    .mb-10[b-pqmlgcv6vf] {
        margin-bottom: 24px;
    }
}

/* Table Mobile Scroll Container */
@media (max-width: 768px) {
    .table-container[b-pqmlgcv6vf] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-pqmlgcv6vf] {
        min-width: 600px;
    }

    .pagination-container[b-pqmlgcv6vf] {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
}

.artwork-thumbnail[b-pqmlgcv6vf] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artwork-thumbnail.placeholder[b-pqmlgcv6vf] {
    font-weight: 600;
    color: #6b7280;
    background: #e5e7eb;
}
/* _content/MuseumAdmin/Components/Pages/Home.razor.rz.scp.css */
/* =========================================
   CHILDREN'S ART GALLERY - ADDITIONAL STYLES
   Add to existing memby-design-system.css
   ========================================= */

/* -----------------------------------------
   MODAL CONFIRMATION DIALOG
   ----------------------------------------- */
.modal-overlay[b-o3lbkx52vg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn-b-o3lbkx52vg 0.2s ease-out forwards;
}

.modal-card[b-o3lbkx52vg] {
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: scale(0.95);
    opacity: 0;
    animation: scaleIn-b-o3lbkx52vg 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-icon-wrapper[b-o3lbkx52vg] {
    width: 48px;
    height: 48px;
    background-color: #fee2e2;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #dc2626;
}

.modal-title[b-o3lbkx52vg] {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.modal-description[b-o3lbkx52vg] {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.5;
}

.modal-actions[b-o3lbkx52vg] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-modal[b-o3lbkx52vg] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.btn-modal.cancel[b-o3lbkx52vg] {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

.btn-modal.cancel:hover[b-o3lbkx52vg] {
    background-color: #f8fafc;
    color: #1e293b;
}

.btn-modal.confirm[b-o3lbkx52vg] {
    background-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
}

.btn-modal.confirm:hover[b-o3lbkx52vg] {
    background-color: #b91c1c;
    transform: translateY(-1px);
}

@keyframes fadeIn-b-o3lbkx52vg {
    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-o3lbkx52vg {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* -----------------------------------------
   BULK ACTIONS TOOLBAR
   ----------------------------------------- */
.bulk-toolbar-floating[b-o3lbkx52vg] {
    position: fixed;
    bottom: 32px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 8px 12px 8px 24px;
    border-radius: 100px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1),
        0 8px 10px -6px rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 1000;
    animation: slideUpFade-b-o3lbkx52vg 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
    max-width: 90%;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .bulk-toolbar-floating[b-o3lbkx52vg] {
        bottom: 20px;
        padding: 8px 12px 8px 16px;
        gap: 12px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        margin: 0;
        border-radius: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bulk-count[b-o3lbkx52vg] {
        font-size: 13px;
        width: 100%;
        justify-content: center;
        margin-bottom: 4px;
    }

    .bulk-actions-group[b-o3lbkx52vg] {
        gap: 8px;
        width: 100%;
        justify-content: center;
    }

    .bulk-btn[b-o3lbkx52vg] {
        padding: 0 12px;
        font-size: 12px;
        height: 32px;
        flex: 1;
        justify-content: center;
    }


    .bulk-divider[b-o3lbkx52vg] {
        display: none;
    }

    .btn-close-toolbar[b-o3lbkx52vg] {
        position: absolute;
        top: -12px;
        right: -8px;
        background: white;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        width: 28px;
        height: 28px;
        margin: 0;
        color: #ef4444;
        /* Make it red by default on mobile for visibility */
        opacity: 1;
    }
}

@keyframes slideUpFade-b-o3lbkx52vg {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.bulk-count[b-o3lbkx52vg] {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-count[b-o3lbkx52vg]::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
}

.bulk-actions-group[b-o3lbkx52vg] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bulk-btn[b-o3lbkx52vg] {
    height: 36px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bulk-btn:hover[b-o3lbkx52vg] {
    transform: translateY(-1px);
}

.bulk-btn.danger[b-o3lbkx52vg] {
    color: #dc2626;
    background: #fee2e2;
    border-color: transparent;
}

.bulk-btn.danger:hover[b-o3lbkx52vg] {
    background: #fecaca;
}

.bulk-btn.success[b-o3lbkx52vg] {
    color: #15803d;
    background: #dcfce7;
    border-color: transparent;
}

.bulk-btn.success:hover[b-o3lbkx52vg] {
    background: #bbf7d0;
}

/* Primary actions (Reject All / Approve All) */
.bulk-btn.danger-solid[b-o3lbkx52vg] {
    background: #dc2626;
    color: white;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.bulk-btn.danger-solid:hover[b-o3lbkx52vg] {
    background: #b91c1c;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.bulk-btn.success-solid[b-o3lbkx52vg] {
    background: #16a34a;
    color: white;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}

.bulk-btn.success-solid:hover[b-o3lbkx52vg] {
    background: #15803d;
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3);
}

.bulk-btn.secondary[b-o3lbkx52vg] {
    color: #475569;
    background: rgba(241, 245, 249, 0.5);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.bulk-btn.secondary:hover[b-o3lbkx52vg] {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

.btn-close-toolbar[b-o3lbkx52vg] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    /* Add border */
    background: #ffffff;
    /* White bg */
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

.btn-close-toolbar:hover[b-o3lbkx52vg] {
    background: #f1f5f9;
    color: #ef4444;
    /* Red color on hover */
    border-color: #fca5a5;
    transform: rotate(90deg);
    /* Nice interaction */
}

.bulk-divider[b-o3lbkx52vg] {
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin: 0 8px;
}

/* -----------------------------------------
   GALLERY SPECIFIC STYLES
   ----------------------------------------- */

/* Memby Banner */
.memby-banner[b-o3lbkx52vg] {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    position: sticky;
    top: 0;
    z-index: 101;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.memby-banner-content[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.memby-banner-logo[b-o3lbkx52vg] {
    width: 32px;
    height: 26px;
    background: #ffffff;
    border-radius: 4px;
    padding: 2px;
    object-fit: contain;
}

.memby-banner-text[b-o3lbkx52vg] {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-inverse);
    letter-spacing: -0.5px;
}

/* Gallery Header */
.gallery-header[b-o3lbkx52vg] {
    margin-bottom: var(--spacing-sm);
}

.gallery-title[b-o3lbkx52vg] {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.gallery-description[b-o3lbkx52vg] {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 800px;
}

/* Mobile Header Section */
.mobile-header-section[b-o3lbkx52vg] {
    display: none;
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-lg);
}

.mobile-page-title[b-o3lbkx52vg] {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.2;
}

.mobile-page-subtitle[b-o3lbkx52vg] {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.5;
}

.mobile-add-btn[b-o3lbkx52vg] {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #2563eb 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-add-btn:hover[b-o3lbkx52vg] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.mobile-add-btn:active[b-o3lbkx52vg] {
    transform: translateY(0);
}

/* Gallery Search & Filter */
.gallery-controls[b-o3lbkx52vg] {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.search-box[b-o3lbkx52vg] {
    flex: 1;
    max-width: 500px;
    position: relative;
}

.search-icon[b-o3lbkx52vg] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

.search-box .form-input[b-o3lbkx52vg] {
    padding-left: 42px;
}

.filter-dropdown[b-o3lbkx52vg] {
    min-width: 180px;
}

/* Filter Container - Modern Uplift */
.filter-container[b-o3lbkx52vg] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.filter-main-row[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-expandable-section[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.filter-container:hover[b-o3lbkx52vg] {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.8);
}

.filter-group[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.status-filters[b-o3lbkx52vg] {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 0;
    gap: 32px;
}

.filter-divider[b-o3lbkx52vg] {
    width: 1px;
    height: 32px;
    background: #e2e8f0;
    margin: 0 4px;
}

/* Filter Toggle Button */
.filter-toggle-btn[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-toggle-btn:hover[b-o3lbkx52vg] {
    background: #f8fafc;
    color: #2563eb;
    border-color: #cbd5e1;
}

.toggle-icon[b-o3lbkx52vg] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-icon.rotated[b-o3lbkx52vg] {
    transform: rotate(180deg);
}

/* Status Filter Tabs - Underline Style */
.filter-tab[b-o3lbkx52vg] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    margin-bottom: -1px;
    /* Align with container border */
}

.filter-tab:hover[b-o3lbkx52vg] {
    color: #1e293b;
}

.filter-tab.active[b-o3lbkx52vg] {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.count-badge[b-o3lbkx52vg] {
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 600;
    transition: all 0.2s;
}

.filter-tab.active .count-badge[b-o3lbkx52vg] {
    background: #e0eaff;
    color: #2563eb;
}

/* Date Filters Uplift */
.date-filters[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-item[b-o3lbkx52vg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-input-wrapper[b-o3lbkx52vg] {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-icon[b-o3lbkx52vg] {
    position: absolute;
    left: 12px;
    font-size: 14px;
    pointer-events: none;
    z-index: 10;
}

.date-mode-select[b-o3lbkx52vg],
.date-input[b-o3lbkx52vg] {
    appearance: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px 10px 36px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    min-height: 44px;
    height: 44px;
}

.date-input[b-o3lbkx52vg] {
    padding-left: 14px;
    width: 140px;
}

.date-mode-select:hover[b-o3lbkx52vg],
.date-input:hover[b-o3lbkx52vg] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.date-mode-select:focus[b-o3lbkx52vg],
.date-input:focus[b-o3lbkx52vg] {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.date-inputs-container[b-o3lbkx52vg] {
    /* display: flex; */
    align-items: center;
    gap: 8px;
    animation: slideIn-b-o3lbkx52vg 0.3s ease-out;
}

.range-separator[b-o3lbkx52vg] {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

@keyframes slideIn-b-o3lbkx52vg {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

/* Modern Search Filter - Integrated Design */
.search-filter[b-o3lbkx52vg] {
    flex: 1;
    max-width: 400px;
    min-width: 280px;
}

.modern-search-wrapper[b-o3lbkx52vg] {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    min-height: 44px;
    height: 44px;
    width: 100%;
}

.modern-search-wrapper:hover[b-o3lbkx52vg] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.modern-search-wrapper:focus-within[b-o3lbkx52vg] {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), 0 4px 12px rgba(37, 99, 235, 0.08);
    background: #ffffff;
}

.search-icon-left[b-o3lbkx52vg] {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s;
}

.modern-search-wrapper:focus-within .search-icon-left[b-o3lbkx52vg] {
    color: #2563eb;
}

.modern-search-input[b-o3lbkx52vg] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px 12px 44px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    min-width: 0;
    height: 100%;
}

.modern-search-input[b-o3lbkx52vg]::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.clear-search-btn[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 8px;
    margin-right: 4px;
    cursor: pointer;
    color: #94a3b8;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.clear-search-btn:hover[b-o3lbkx52vg] {
    background: #f1f5f9;
    color: #64748b;
}

.clear-search-btn:active[b-o3lbkx52vg] {
    transform: scale(0.95);
}

.modern-search-btn[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    padding: 0 16px;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 44px;
}

.modern-search-btn[b-o3lbkx52vg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.modern-search-btn:hover[b-o3lbkx52vg] {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.modern-search-btn:hover[b-o3lbkx52vg]::before {
    opacity: 1;
}

.modern-search-btn:active[b-o3lbkx52vg] {
    transform: scale(0.98);
}

.modern-search-btn svg[b-o3lbkx52vg] {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
    .search-filter[b-o3lbkx52vg] {
        max-width: 100%;
        min-width: 100%;
    }

    .modern-search-wrapper[b-o3lbkx52vg] {
        width: 100%;
    }
}

/* Gallery Grid */
.gallery-grid[b-o3lbkx52vg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* Art Card */
.art-card[b-o3lbkx52vg] {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: visible;
    /* Changed from hidden to visible so checkbox wrapper shows */
    transition: all var(--transition-base);
    cursor: pointer;
    position: relative !important;
    /* Ensure relative positioning for absolute checkbox */
}

.art-card:hover[b-o3lbkx52vg] {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--color-accent);
}

/* Art Card Image Container */
.art-card-image[b-o3lbkx52vg] {
    position: relative;
    aspect-ratio: 1;
    background-color: var(--color-bg);
    overflow: hidden;
}

.art-card-image img[b-o3lbkx52vg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Art Card Badges */
.art-card-badges[b-o3lbkx52vg] {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.asset-type-badge[b-o3lbkx52vg] {
    background-color: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(8px);
    color: var(--color-text-inverse);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.approval-badge[b-o3lbkx52vg] {
    background-color: rgba(242, 156, 8, 0.9);
    backdrop-filter: blur(8px);
    color: var(--color-text-inverse);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 30;
}

.approval-badge.pending[b-o3lbkx52vg] {
    background-color: rgba(245, 158, 11, 0.9);
}

.approval-badge.rejected[b-o3lbkx52vg] {
    background-color: rgba(220, 38, 38, 0.9);
}

/* Art Card Actions */
.art-card-actions[b-o3lbkx52vg] {
    position: absolute;
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.art-card:hover .art-card-actions[b-o3lbkx52vg] {
    opacity: 1;
    transform: translateY(0);
}

.art-card-actions .btn[b-o3lbkx52vg] {
    flex: 1;
    font-size: 13px;
    padding: 8px 12px;
    backdrop-filter: blur(8px);
    background-color: rgba(30, 30, 30, 0.85);
    color: var(--color-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.art-card-actions .btn:hover[b-o3lbkx52vg] {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.art-card-actions .btn.secondary[b-o3lbkx52vg] {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-text-primary);
}

/* Art Card Content */
.art-card-content[b-o3lbkx52vg] {
    padding: var(--spacing-md);
}

.art-card-title[b-o3lbkx52vg] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.art-card-meta[b-o3lbkx52vg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.meta-item[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.meta-item svg[b-o3lbkx52vg],
.meta-item-icon[b-o3lbkx52vg] {
    width: 16px;
    height: 16px;
    color: var(--color-text-tertiary);
}

.meta-item a[b-o3lbkx52vg] {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-base);
}

.meta-item a:hover[b-o3lbkx52vg] {
    color: #2563EB;
    text-decoration: underline;
}

.artist-info[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.artist-name[b-o3lbkx52vg] {
    font-weight: 500;
    color: var(--color-text-primary);
}

.artist-age[b-o3lbkx52vg] {
    color: var(--color-text-tertiary);
}

/* Empty State */
.empty-state[b-o3lbkx52vg] {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-md);
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-border);
}

.empty-state-icon[b-o3lbkx52vg] {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state-title[b-o3lbkx52vg] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state-description[b-o3lbkx52vg] {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Top Actions */
.top-actions[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Notification Styles */
.notification-wrapper[b-o3lbkx52vg] {
    position: relative;
}

.notification-btn[b-o3lbkx52vg] {
    position: relative;
    border: none;
    background: #f3f4f6;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
}

.notification-btn:hover[b-o3lbkx52vg] {
    background: #e5e7eb;
}

.notification-badge[b-o3lbkx52vg] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
}

.notification-dropdown[b-o3lbkx52vg] {
    position: absolute;
    top: 48px;
    right: 0;
    width: 320px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    display: none;
    overflow: hidden;
    z-index: 100;
}

.notification-dropdown.open[b-o3lbkx52vg] {
    display: block;
}

.notification-header[b-o3lbkx52vg] {
    padding: 14px 16px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
}

.notification-item[b-o3lbkx52vg] {
    padding: 12px 16px;
    cursor: pointer;
}

.notification-item:hover[b-o3lbkx52vg] {
    background: #f9fafb;
}

.notification-item.unread[b-o3lbkx52vg] {
    background: #eff6ff;
}

.notification-item strong[b-o3lbkx52vg] {
    display: block;
    font-size: 14px;
}

.notification-item span[b-o3lbkx52vg] {
    font-size: 12px;
    color: #6b7280;
}

.notification-footer[b-o3lbkx52vg] {
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: #2563eb;
    cursor: pointer;
    border-top: 1px solid #e5e7eb;
}

/* Card styles managed by common CSS */

/* Card Styles (for drawer/modal) */
:root[b-o3lbkx52vg] {
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --approve: #16a34a;
    --reject: #dc2626;
}

body[b-o3lbkx52vg] {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background: #f9fafb;
    color: var(--text);
}

.container[b-o3lbkx52vg] {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.card[b-o3lbkx52vg] {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.card:hover[b-o3lbkx52vg] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.card img[b-o3lbkx52vg] {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-body[b-o3lbkx52vg] {
    padding: 14px;
}

.card-title[b-o3lbkx52vg] {
    font-weight: 600;
    margin-bottom: 6px;
}

.card-meta[b-o3lbkx52vg] {
    font-size: 14px;
    color: var(--muted);
}

/* Card Selection - Checkbox Wrapper */
.card-select-wrapper[b-o3lbkx52vg] {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: white !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    border: 2px solid #e5e7eb !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.card:hover .card-select-wrapper[b-o3lbkx52vg],
.art-card:hover .card-select-wrapper[b-o3lbkx52vg] {
    transform: scale(1.05);
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.card-select-wrapper:hover[b-o3lbkx52vg] {
    transform: scale(1.1);
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    background: #f8fafc;
}

/* Checkbox input styling */
.card-select[b-o3lbkx52vg] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #2563eb;
    cursor: pointer;
    margin: 0;
    padding: 0;
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    z-index: 1001;
    flex-shrink: 0;
}

/* Ensure checkbox is visible on all card types */
.art-card .card-select-wrapper[b-o3lbkx52vg],
.card .card-select-wrapper[b-o3lbkx52vg] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Make sure checkbox wrapper is visible even when card is not hovered */
.art-card .card-select-wrapper[b-o3lbkx52vg] {
    display: flex !important;
}


/* Overlay */
.overlay[b-o3lbkx52vg] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    z-index: 1050;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Drawer */
.drawer[b-o3lbkx52vg] {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    max-width: 95vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
    display: flex;
    flex-direction: column;
}

.drawer-header[b-o3lbkx52vg] {
    padding: 20px 24px 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.drawer-header h2[b-o3lbkx52vg] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.drawer-close[b-o3lbkx52vg] {
    background: #f8fafc;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.drawer-close:hover[b-o3lbkx52vg] {
    background: #f1f5f9;
    color: #1e293b;
}

.drawer-content[b-o3lbkx52vg] {
    padding: 0 24px 24px 24px;
    overflow-y: auto;
    flex: 1;
    background: #fcfdfe;
}

/* Premium Drawer Sections */
.drawer-section[b-o3lbkx52vg] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.drawer-section-title[b-o3lbkx52vg] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 16px;
    display: block;
}

/* Artwork Preview with Glass Design (Expanded) */
.artwork-preview-container[b-o3lbkx52vg] {
    background: #0f172a;
    width: 100%;
    margin-bottom: 0;
    box-shadow: none;
    text-align: center;
    position: relative;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.artwork-preview-blur-bg[b-o3lbkx52vg] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(50px) brightness(0.7);
    opacity: 0.8;
    transform: scale(1.2);
    z-index: 1;
}

.artwork-preview-image[b-o3lbkx52vg] {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
    padding: 0;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

/* Drawer Navigation Arrows - Modern Professional Design */
.drawer-arrow[b-o3lbkx52vg] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15), 0 2px 6px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
}

/* Show arrows on hover of artwork container */
.artwork-preview-container:hover .drawer-arrow[b-o3lbkx52vg] {
    opacity: 1;
    pointer-events: auto;
}

.drawer-arrow svg[b-o3lbkx52vg] {
    color: #0f172a;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-arrow.left[b-o3lbkx52vg] {
    left: 20px;
}

.drawer-arrow.right[b-o3lbkx52vg] {
    right: 20px;
}

.drawer-arrow:hover[b-o3lbkx52vg] {
    transform: translateY(-50%) scale(1.08);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(15, 23, 42, 0.12);
}

.drawer-arrow:hover svg[b-o3lbkx52vg] {
    color: #2563eb;
    transform: scale(1.1);
}

.drawer-arrow.left:hover svg[b-o3lbkx52vg] {
    transform: scale(1.1) translateX(-2px);
}

.drawer-arrow.right:hover svg[b-o3lbkx52vg] {
    transform: scale(1.1) translateX(2px);
}

.drawer-arrow:active[b-o3lbkx52vg] {
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

/* Disabled state for arrows at boundaries */
.drawer-arrow:disabled[b-o3lbkx52vg] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Clickable halves overlay for quick navigation */
.artwork-click-left[b-o3lbkx52vg],
.artwork-click-right[b-o3lbkx52vg] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 3;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
}

.artwork-click-left[b-o3lbkx52vg] {
    left: 0;
    cursor: w-resize;
}

.artwork-click-right[b-o3lbkx52vg] {
    right: 0;
    cursor: e-resize;
}

/* Subtle hover effect on clickable areas */
.artwork-click-left:hover[b-o3lbkx52vg] {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.03), transparent);
}

.artwork-click-right:hover[b-o3lbkx52vg] {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.03), transparent);
}

.artwork-preview-container[b-o3lbkx52vg] {
    position: relative;
}

/* Mobile optimizations for arrows */
@media (max-width: 768px) {
    .drawer-arrow[b-o3lbkx52vg] {
        width: 40px;
        height: 40px;
        opacity: 1;
        pointer-events: auto;
    }

    .drawer-arrow.left[b-o3lbkx52vg] {
        left: 12px;
    }

    .drawer-arrow.right[b-o3lbkx52vg] {
        right: 12px;
    }

    /* Always show arrows on mobile */
    .artwork-preview-container .drawer-arrow[b-o3lbkx52vg] {
        opacity: 0.9;
    }
}

.drawer-section.artwork-only[b-o3lbkx52vg] {
    padding: 0;
    margin: 0 0 24px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

/* Pagination Uplift - Centered & Premium */
.pagination-footer[b-o3lbkx52vg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px 0;
    margin-top: 32px;
    border-top: 1px solid #f1f5f9;
}

.pagination-controls[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 16px;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.pagination-numbers[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn[b-o3lbkx52vg] {
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 8px;
}

.pagination-btn:hover:not(:disabled)[b-o3lbkx52vg] {
    background: #f1f5f9;
    color: #1e293b;
}

.pagination-btn.active[b-o3lbkx52vg] {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.pagination-btn:disabled[b-o3lbkx52vg] {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-btn.arrow[b-o3lbkx52vg] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1e293b;
}

.pagination-btn.arrow:hover:not(:disabled)[b-o3lbkx52vg] {
    background: #ffffff;
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.pagination-size[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.pagination-select[b-o3lbkx52vg] {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1e293b;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
}

.pagination-select:hover[b-o3lbkx52vg] {
    border-color: #cbd5e1;
}

.pagination-select:focus[b-o3lbkx52vg] {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.drawer-artwork-header[b-o3lbkx52vg] {
    padding: 24px 24px 8px 24px;
}

/* Info Grid Layout */
.info-grid[b-o3lbkx52vg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-item[b-o3lbkx52vg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-o3lbkx52vg] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.info-value[b-o3lbkx52vg] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.info-item.full-width[b-o3lbkx52vg] {
    grid-column: span 2;
}

/* Audio Player Uplift */
.audio-player-wrapper[b-o3lbkx52vg] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
}

.audio-player-wrapper audio[b-o3lbkx52vg] {
    width: 100%;
    height: 36px;
}

/* Status Badges */
.status-pill[b-o3lbkx52vg] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
}

.status-pill.pending[b-o3lbkx52vg] {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

.status-pill.approved[b-o3lbkx52vg] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #dcfce7;
}

.drawer-actions[b-o3lbkx52vg] {
    padding: 20px 24px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 12px;
}

.drawer-actions .btn[b-o3lbkx52vg] {
    flex: 1;
    padding: 12px;
    font-weight: 700;
    border-radius: 10px;
}

.drawer-actions .btn.reject[b-o3lbkx52vg] {
    background: #ef4444;
}

.drawer-actions .btn.approve[b-o3lbkx52vg] {
    background: #22c55e;
    color: white;
    /* Ensure text is readable */
}

/* Specific button classes */
.drawer-actions .btn.cancel[b-o3lbkx52vg] {
    background-color: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

.drawer-actions .btn.cancel:hover[b-o3lbkx52vg] {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

.drawer-actions .btn.primary[b-o3lbkx52vg] {
    background-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    border: none !important;
}

.drawer-actions .btn.primary:hover[b-o3lbkx52vg] {
    background-color: #1d4ed8 !important;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

/* Bulk Actions */
#bulkActions[b-o3lbkx52vg] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    padding: 10px 14px;
    display: none;
    gap: 10px;
    z-index: 250;
    align-items: center;
}

#bulkActions .count[b-o3lbkx52vg] {
    font-weight: 600;
    margin-right: 8px;
}

#bulkActions .btn[b-o3lbkx52vg] {
    padding: 8px 12px;
    min-width: 88px;
}



/* Mobile Hamburger Menu */
.mobile-menu-toggle[b-o3lbkx52vg] {
    display: none;
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.mobile-menu-toggle:hover[b-o3lbkx52vg] {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:active[b-o3lbkx52vg] {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.2);
}

.mobile-menu-toggle svg[b-o3lbkx52vg] {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

/* Animate hamburger when sidebar is open */
.sidebar.mobile-open~.main-content .mobile-menu-toggle svg[b-o3lbkx52vg],
#sidebar.mobile-open~.main-content .mobile-menu-toggle svg[b-o3lbkx52vg] {
    transform: rotate(90deg);
}

/* Mobile Logo */
.mobile-logo[b-o3lbkx52vg] {
    display: none;
    align-items: center;
    margin-right: 6px;
    flex-shrink: 0;
}

.mobile-logo img[b-o3lbkx52vg] {
    display: block;
}

/* Mobile Sidebar Overlay */
.sidebar-overlay[b-o3lbkx52vg] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sidebar-overlay.active[b-o3lbkx52vg] {
    opacity: 1;
}

/* Floating Action Button */
.fab[b-o3lbkx52vg] {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent) 0%, #2563eb 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4), 0 2px 8px rgba(59, 130, 246, 0.3);
    cursor: pointer;
    z-index: 200;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content[b-o3lbkx52vg] {
    flex: 1;
    margin-top: 0;
}

.fab:hover[b-o3lbkx52vg] {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5), 0 4px 12px rgba(59, 130, 246, 0.4);
}

.fab:active[b-o3lbkx52vg] {
    transform: scale(0.95) translateY(0);
}

.fab svg[b-o3lbkx52vg] {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

/* =========================================
   RESPONSIVE STYLES
   ========================================= */

/* Desktop Styles */
@media (min-width: 769px) {
    .top-bar[b-o3lbkx52vg] {
        padding: 12px var(--spacing-lg);
        min-height: 64px;
    }

    .top-bar-title[b-o3lbkx52vg] {
        font-size: 22px;
    }

    .content-container[b-o3lbkx52vg] {
        padding: var(--spacing-sm) var(--spacing-md);
        max-width: 1600px;
    }

    .gallery-header[b-o3lbkx52vg] {
        margin-bottom: var(--spacing-sm);
    }

    .gallery-description[b-o3lbkx52vg] {
        font-size: 14px;
    }

    .gallery-controls[b-o3lbkx52vg] {
        margin-bottom: var(--spacing-md);
    }

    .filter-container[b-o3lbkx52vg] {
        padding: var(--spacing-md) !important;
        margin-bottom: var(--spacing-md);
    }

    .filter-tab[b-o3lbkx52vg] {
        padding: 6px 14px;
        font-size: 12px;
    }

    .gallery-grid[b-o3lbkx52vg] {
        gap: var(--spacing-md);
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .art-card-content[b-o3lbkx52vg] {
        padding: var(--spacing-md);
    }

    .art-card-title[b-o3lbkx52vg] {
        font-size: 15px;
        margin-bottom: var(--spacing-sm);
    }

    .meta-item[b-o3lbkx52vg] {
        font-size: 13px;
    }

    .btn[b-o3lbkx52vg] {
        padding: 8px 18px;
        font-size: 13px;
    }

    .user-avatar[b-o3lbkx52vg] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Tablet Styles */
@media (max-width: 1200px) {
    .gallery-grid[b-o3lbkx52vg] {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .mobile-menu-toggle[b-o3lbkx52vg] {
        display: flex;
        padding: 6px;
        flex-shrink: 0;
        margin-right: 12px;
    }

    /* Show mobile header section */
    .mobile-header-section[b-o3lbkx52vg] {
        display: block;
    }

    /* Hide desktop gallery header */
    .gallery-header.desktop-only[b-o3lbkx52vg] {
        display: none;
    }

    /* Hide title in top bar on mobile */
    .top-bar-title[b-o3lbkx52vg] {
        display: none;
    }

    /* Override MainLayout styles for mobile - sidebar must be fixed and hidden by default */
    #sidebar[b-o3lbkx52vg],
    .sidebar[b-o3lbkx52vg] {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw;
        z-index: 1001;
        /* Hide sidebar by default - completely off screen */
        transform: translateX(-100%) !important;
        visibility: visible !important;
        /* Keep visible for transitions */
        opacity: 1 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
        /* Remove from flex layout */
        flex: none !important;
        flex-basis: auto !important;
        width: 280px !important;
        /* Ensure it doesn't take up space */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show sidebar when mobile-open class is added */
    .sidebar.mobile-open[b-o3lbkx52vg],
    #sidebar.mobile-open[b-o3lbkx52vg] {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
    }

    /* Ensure sidebar is hidden when NOT mobile-open */
    #sidebar:not(.mobile-open)[b-o3lbkx52vg],
    .sidebar:not(.mobile-open)[b-o3lbkx52vg] {
        transform: translateX(-100%) !important;
        pointer-events: none !important;
        /* Prevent interaction when hidden */
    }

    /* Ensure sidebar is visible and interactive only when mobile-open */
    #sidebar.mobile-open[b-o3lbkx52vg],
    .sidebar.mobile-open[b-o3lbkx52vg] {
        pointer-events: auto !important;
    }

    .sidebar-overlay[b-o3lbkx52vg] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active[b-o3lbkx52vg] {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar .sidebar-toggle[b-o3lbkx52vg],
    #sidebar .sidebar-toggle[b-o3lbkx52vg] {
        display: none !important;
    }

    .main-content[b-o3lbkx52vg] {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Ensure sidebar overlay closes on click */
    .sidebar-overlay[b-o3lbkx52vg] {
        cursor: pointer;
    }

    /* Override admin-layout flex behavior on mobile */
    .admin-layout[b-o3lbkx52vg] {
        flex-direction: column !important;
    }

    .admin-layout>#sidebar[b-o3lbkx52vg],
    .admin-layout>.sidebar[b-o3lbkx52vg] {
        flex: none !important;
        flex-basis: auto !important;
        width: 280px !important;
        /* Remove from document flow when hidden */
        visibility: visible;
    }

    /* Ensure main content takes full width on mobile */
    .admin-layout>.main-content[b-o3lbkx52vg] {
        width: 100% !important;
        margin-left: 0 !important;
        flex: 1 1 100% !important;
    }

    .top-bar-left[b-o3lbkx52vg] {
        gap: 16px;
        /* Increased gap between hamburger and logo */
        flex: 1;
        min-width: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .memby-banner[b-o3lbkx52vg] {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-height: auto !important;
        position: static !important;
        margin: 0 !important;
    }

    .memby-banner-content[b-o3lbkx52vg] {
        gap: 12px;
        display: flex;
        align-items: center;
    }

    .memby-banner-logo[b-o3lbkx52vg] {
        width: 36px;
        height: 36px;
        background: #ffffff !important;
        padding: 6px !important;
        border-radius: 10px;
        /* More rounded as per image */
        object-fit: contain;
    }

    .memby-banner-text[b-o3lbkx52vg] {
        font-size: 20px;
        color: #ffffff !important;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .mobile-logo[b-o3lbkx52vg] {
        display: flex;
        margin-right: 6px;
    }

    .mobile-logo img[b-o3lbkx52vg] {
        width: 28px;
        height: 22px;
    }

    .top-bar-title[b-o3lbkx52vg] {
        display: none;
        /* Hide title in top bar on mobile - it's in mobile-header-section now */
    }

    /* Mobile header section styling */
    .mobile-header-section[b-o3lbkx52vg] {
        display: block;
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-md);
    }

    .mobile-page-title[b-o3lbkx52vg] {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 8px 0;
        line-height: 1.2;
    }

    .mobile-page-subtitle[b-o3lbkx52vg] {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 var(--spacing-md) 0;
        line-height: 1.5;
    }

    .mobile-add-btn[b-o3lbkx52vg] {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: var(--spacing-md);
        border-radius: 12px;
    }

    .top-bar-right[b-o3lbkx52vg] {
        gap: 6px;
        flex-shrink: 0;
    }

    .notification-btn[b-o3lbkx52vg] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .notification-dropdown[b-o3lbkx52vg] {
        right: -10px;
        width: calc(100vw - 40px);
        max-width: 320px;
    }

    .user-menu[b-o3lbkx52vg] {
        padding: 4px 8px;
    }

    .user-avatar[b-o3lbkx52vg] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .top-bar-right .btn-primary.desktop-only[b-o3lbkx52vg] {
        display: none !important;
    }



    .user-menu span[b-o3lbkx52vg] {
        display: none;
    }

    .gallery-title[b-o3lbkx52vg] {
        font-size: 24px;
    }

    .gallery-controls[b-o3lbkx52vg] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    /* Mobile Filter Optimization */
    .filter-container[b-o3lbkx52vg] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px !important;
        margin-bottom: var(--spacing-md);
        overflow: hidden;
    }

    .filter-main-row[b-o3lbkx52vg] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-bottom: 0;
        transition: padding 0.3s ease;
    }

    .filter-container.expanded .filter-main-row[b-o3lbkx52vg] {
        padding-bottom: 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .status-filters[b-o3lbkx52vg] {
        flex: 1;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
        display: flex;
        gap: 8px;
    }

    .status-filters[b-o3lbkx52vg]::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .filter-tab[b-o3lbkx52vg] {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 6px;
        padding: 8px 4px;
        font-size: 13px;
        white-space: nowrap;
        min-width: 60px;
    }

    .filter-tab .count-badge[b-o3lbkx52vg] {
        position: static;
        margin: 0;
        font-size: 11px;
        padding: 2px 8px;
        height: auto;
        min-width: auto;
        border: none;
        border-radius: 99px;
    }

    .filter-expandable-section[b-o3lbkx52vg] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: 0;
    }

    .filter-container.expanded .filter-expandable-section[b-o3lbkx52vg] {
        max-height: 500px;
        /* Large enough to fit content */
        opacity: 1;
        visibility: visible;
        padding-top: 16px;
    }

    .filter-divider[b-o3lbkx52vg] {
        display: none;
    }

    .filter-dropdown-wrapper[b-o3lbkx52vg] {
        width: 100%;
        display: block;
    }

    .filter-dropdown-label[b-o3lbkx52vg] {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .filter-dropdown[b-o3lbkx52vg] {
        width: 100%;
        padding: 12px 14px;
        font-size: 14px;
    }

    .content-container[b-o3lbkx52vg] {
        padding: var(--spacing-md);
    }

    .gallery-grid[b-o3lbkx52vg] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--spacing-md);
    }

    /* Improve touch targets on mobile */
    .btn[b-o3lbkx52vg],
    .filter-tab[b-o3lbkx52vg],
    .pagination-btn[b-o3lbkx52vg] {
        min-height: 44px;
        min-width: 44px;
    }

    .drawer[b-o3lbkx52vg] {
        width: 100%;
        max-width: 100vw;
        left: 0;
        right: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    #bulkActions[b-o3lbkx52vg] {
        left: var(--spacing-md);
        right: var(--spacing-md);
        transform: none;
        bottom: 90px;
        padding: 12px 16px;
    }

    #bulkActions .btn[b-o3lbkx52vg] {
        flex: 1;
        padding: 10px 16px;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    .gallery-grid[b-o3lbkx52vg] {
        grid-template-columns: 1fr;
    }

    .gallery-description[b-o3lbkx52vg] {
        font-size: 14px;
    }

    .top-bar-title[b-o3lbkx52vg] {
        font-size: 16px;
    }

    .fab.mobile-only[b-o3lbkx52vg] {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }

    /* Adjust FAB position when bulk actions are visible */
    #bulkActions:not([style*="display: none"])~.fab.mobile-only[b-o3lbkx52vg] {
        bottom: 90px;
    }

    /* Ensure FAB is above bulk toolbar */
    .fab.mobile-only[b-o3lbkx52vg] {
        z-index: 201;
    }

    #bulkActions[b-o3lbkx52vg] {
        z-index: 200;
    }

    .filter-tab[b-o3lbkx52vg] {
        font-size: 13px;
        padding: 10px 14px;
        min-height: 44px;
    }

    #bulkActions[b-o3lbkx52vg] {
        bottom: 80px;
        padding: 10px 12px;
    }

    #bulkActions .count[b-o3lbkx52vg] {
        font-size: 13px;
    }
}

/* Enhanced Header Spacing & Layout */
.top-bar-right[b-o3lbkx52vg] {
    gap: 24px;
}

.user-menu[b-o3lbkx52vg] {
    border-left: 1px solid #e2e8f0;
    padding-left: 24px;
    margin-left: 0;
    border-radius: 0;
    background: transparent;
}

.user-menu:hover[b-o3lbkx52vg] {
    background: transparent;
}

.user-name[b-o3lbkx52vg] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* Polished Logout Button - Less Boxy */
.logout-btn[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover[b-o3lbkx52vg] {
    background: #f1f5f9;
    /* Slate 100 */
    color: #0f172a;
    /* Slate 900 */
    border-color: transparent;
}

.logout-btn:hover svg[b-o3lbkx52vg] {
    color: #dc2626;
    /* Red 600 icon on hover */
    transform: translateX(0);
}

.logout-btn svg[b-o3lbkx52vg] {
    transition: color 0.2s;
}

.logout-btn:active[b-o3lbkx52vg] {
    transform: scale(0.98);
}

/* User Menu Dropdown Styles */
.user-menu-wrapper[b-o3lbkx52vg] {
    position: relative;
    z-index: 1001;
    /* Ensure above other content */
}

.user-menu[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 8px;
    /* Adjusted padding */
    border-radius: 24px;
    /* Pill shape */
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
    /* Slight bg for pill */
}

.user-menu:hover[b-o3lbkx52vg],
.user-menu.active[b-o3lbkx52vg] {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.user-menu .dropdown-chevron[b-o3lbkx52vg] {
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.user-menu.active .dropdown-chevron[b-o3lbkx52vg] {
    transform: rotate(180deg);
}

.user-dropdown[b-o3lbkx52vg] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 6px;
    animation: slideUpFade-b-o3lbkx52vg 0.2s ease-out;
}

.user-dropdown-header[b-o3lbkx52vg] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}

.header-name[b-o3lbkx52vg] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.header-role[b-o3lbkx52vg] {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.dropdown-divider[b-o3lbkx52vg] {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

.dropdown-item[b-o3lbkx52vg] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-item:hover[b-o3lbkx52vg] {
    background: #f8fafc;
    color: #1e293b;
}

.dropdown-item svg[b-o3lbkx52vg] {
    color: #94a3b8;
    transition: color 0.15s;
}

.dropdown-item:hover svg[b-o3lbkx52vg] {
    color: #64748b;
}

/* Danger Item (Logout) */
.dropdown-item.danger[b-o3lbkx52vg] {
    color: #cb3232;
    /* Less aggressive red text */
}

.dropdown-item.danger:hover[b-o3lbkx52vg] {
    background: #fef2f2;
    color: #dc2626;
}

.dropdown-item.danger svg[b-o3lbkx52vg] {
    color: #ef4444;
}

.dropdown-item.danger:hover svg[b-o3lbkx52vg] {
    color: #dc2626;
}

/* =========================================
   FILE UPLOAD BUTTON - CUSTOM STYLE
   ========================================= */

.file-upload-btn[b-o3lbkx52vg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    flex-shrink: 0;
}

.file-upload-btn:hover[b-o3lbkx52vg] {
    background-color: #f1f5f9;
    color: #2563eb;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-upload-btn:active[b-o3lbkx52vg] {
    transform: translateY(0);
}

.file-upload-btn svg[b-o3lbkx52vg] {
    color: #94a3b8;
    transition: color 0.2s;
}

.file-upload-btn:hover svg[b-o3lbkx52vg] {
    color: #2563eb;
}

/* Hide the default file input but keep it clickable over the parent */
.file-input-hidden[b-o3lbkx52vg] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* =========================================
   MODERN TAGS UI
   ========================================= */

.tag-input-group[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.btn-icon-only[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    /* Matches form-control height approximately */
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-icon-only:hover[b-o3lbkx52vg] {
    background: #ffffff;
    color: #2563eb;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.tags-container[b-o3lbkx52vg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-pill[b-o3lbkx52vg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    transition: all 0.2s;
}

.tag-pill:hover[b-o3lbkx52vg] {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.tag-remove-btn[b-o3lbkx52vg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #ffffff;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.tag-remove-btn:hover[b-o3lbkx52vg] {
    background: #ef4444;
    /* Red for delete */
    transform: scale(1.1);
}

/* -----------------------------------------
   All Caught Up State - Professional Uplift
   ----------------------------------------- */
.all-caught-up-state[b-o3lbkx52vg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border);
    margin: 24px 0;
}

.success-icon-container[b-o3lbkx52vg] {
    width: 64px;
    height: 64px;
    background: #ecfdf5;
    /* Green-50 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 0 0 8px #f0fdf4;
    /* Green-50 outer ring */
    /* Lively entrance animation */
    animation: elasticPop-b-o3lbkx52vg 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: scale(0);
    opacity: 0;
}

/* Blue Variant (Approved) */
.success-icon-container.blue[b-o3lbkx52vg] {
    background: #eff6ff;
    /* Blue-50 */
    box-shadow: 0 0 0 8px #f0f9ff;
    /* Blue-50 rings */
}

.success-icon-container.blue .success-icon[b-o3lbkx52vg] {
    color: #3b82f6;
    /* Blue-500 */
}

/* Red Variant (Rejected) */
.success-icon-container.red[b-o3lbkx52vg] {
    background: #fef2f2;
    /* Red-50 */
    box-shadow: 0 0 0 8px #fff1f2;
    /* Red-50 rings */
}

.success-icon-container.red .success-icon[b-o3lbkx52vg] {
    color: #ef4444;
    /* Red-500 */
}

.success-icon[b-o3lbkx52vg] {
    color: #059669;
    /* Green-600 */
    animation: iconPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animate the checkmark line drawing */
.success-icon polyline[b-o3lbkx52vg] {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: drawCheck-b-o3lbkx52vg 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}

.state-title[b-o3lbkx52vg] {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    /* Slate-800 */
    margin-bottom: 8px;
    opacity: 0;
    animation: fadeUp-b-o3lbkx52vg 0.5s ease-out 0.2s forwards;
}

.state-description[b-o3lbkx52vg] {
    font-size: 14px;
    color: #64748b;
    /* Slate-500 */
    max-width: 320px;
    line-height: 1.5;
    opacity: 0;
    animation: fadeUp-b-o3lbkx52vg 0.5s ease-out 0.3s forwards;
}

@keyframes elasticPop-b-o3lbkx52vg {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    40% {
        transform: scale(1.15);
        opacity: 1;
    }

    /* Overshoot */
    60% {
        transform: scale(0.95);
    }

    /* Rebound */
    80% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes drawCheck-b-o3lbkx52vg {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeUp-b-o3lbkx52vg {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Ensure mobile banner keeps flex alignment */
.memby-banner.mobile-only[b-o3lbkx52vg] {
    align-items: center;
    padding: 10px 16px;
    /* Adjust padding as needed */
}

/* Fix inner content alignment */
.memby-banner-content[b-o3lbkx52vg] {
    align-items: center;
    gap: 12px;
    /* Space between logo and text */
}

/* text alignment adjustment */
.memby-banner-text[b-o3lbkx52vg] {
    font-size: 24px;
    /* Matches larger logo size better */
    font-weight: 700;
    color: #ffffff;
    /* Ensure text is visible on dark bg */
    display: inline-block;
    transform: translateY(-2px);
    /* Optical adjustment to center with logo */
}
/* _content/MuseumAdmin/Components/Pages/Users.razor.rz.scp.css */
/* =========================================
   USERS DASHBOARD - CONNECT AESTHETIC
   ========================================= */

.fade-in[b-7scqei8kte] {
    animation: fadeIn-b-7scqei8kte 0.4s ease-out;
}

@keyframes fadeIn-b-7scqei8kte {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.content-container[b-7scqei8kte] {
    /* padding: 32px; */
    max-width: 1400px;
    margin: 0 auto;
    background: #f8fafc;
    min-height: calc(100vh - 80px);
}

/* 1. Page Header */
.page-header[b-7scqei8kte] {
    margin-bottom: 32px;
}

.page-description[b-7scqei8kte] {
    font-size: 15px;
    color: #64748b;
    margin-top: 6px;
    /* max-width: 600px; */
    line-height: 1.5;
}

/* Dashboard Wrapper */
.dashboard-wrapper[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 2. Stats Hub */
.stats-hub[b-7scqei8kte] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.stat-card[b-7scqei8kte] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease;
}

.stat-card:hover[b-7scqei8kte] {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.stat-icon[b-7scqei8kte] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.folder[b-7scqei8kte] {
    background: #eff6ff;
    color: #3b82f6;
}

.stat-icon.trend[b-7scqei8kte] {
    background: #f0fdf4;
    color: #22c55e;
}

.stat-icon.users[b-7scqei8kte] {
    background: #f5f3ff;
    color: #8b5cf6;
}

.stat-icon.zones[b-7scqei8kte] {
    background: #fff7ed;
    color: #f97316;
}

.stat-info[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-7scqei8kte] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-7scqei8kte] {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

/* 3. Control Bar */
.control-bar[b-7scqei8kte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-box[b-7scqei8kte] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box svg[b-7scqei8kte] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-box input[b-7scqei8kte] {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
}

.search-box input:focus[b-7scqei8kte] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.control-actions[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-filters[b-7scqei8kte] {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
}

.btn-filter-tag[b-7scqei8kte] {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-filter-tag.active[b-7scqei8kte] {
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-primary-action[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15);
}

.btn-primary-action:hover[b-7scqei8kte] {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25);
}

.btn-primary-action.btn-sm[b-7scqei8kte] {
    padding: 8px 14px;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.12);
}

.btn-filter[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filter:hover[b-7scqei8kte] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
}

/* 4. Families Stack */
.families-stack-premium[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Family card styles moved to global family-card-premium.css */


/* =========================================
   DRAWER STYLES (Matching Home.razor)
   ========================================= */

/* Overlay */
.overlay[b-7scqei8kte] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    z-index: 1050;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Drawer */
.drawer[b-7scqei8kte] {
    position: fixed;
    top: 0;
    right: 0;
    width: 850px;
    max-width: 95vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
    display: flex;
    flex-direction: column;
}

.drawer-header[b-7scqei8kte] {
    padding: 20px 24px 10px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.drawer-header h2[b-7scqei8kte] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.025em;
}

.drawer-close[b-7scqei8kte] {
    background: #f8fafc;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.drawer-close:hover[b-7scqei8kte] {
    background: #f1f5f9;
    color: #1e293b;
}

.drawer-content[b-7scqei8kte] {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
    background: #f8fafc;
}

/* Premium Drawer Sections */
.drawer-section[b-7scqei8kte] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    transition: all 0.2s ease;
}

.drawer-section:hover[b-7scqei8kte] {
    border-color: #cbd5e1;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
}

.drawer-section-title[b-7scqei8kte] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-section-title[b-7scqei8kte]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #f1f5f9;
}

/* Form Grid */
.form-row[b-7scqei8kte] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-row.full[b-7scqei8kte] {
    grid-template-columns: 1fr;
}

.form-group[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Child Entry Styles - Premium */
.child-entry-row-premium[b-7scqei8kte] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

.child-entry-header[b-7scqei8kte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.child-entry-label[b-7scqei8kte] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-remove-item-sm[b-7scqei8kte] {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.btn-remove-item-sm:hover[b-7scqei8kte] {
    background: #fff1f2;
    border-color: #fecaca;
    color: #ef4444;
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.08);
}

.btn-remove-item-sm svg[b-7scqei8kte] {
    width: 16px;
    height: 16px;
}

.file-upload-compact[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-upload-btn-sm[b-7scqei8kte] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    white-space: nowrap;
}

.file-upload-btn-sm:hover[b-7scqei8kte] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
}

.file-name-indicator[b-7scqei8kte] {
    font-size: 12px;
    color: #64748b;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Custom Toggle */
.toggle-switch[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 12px;
}

.toggle-input[b-7scqei8kte] {
    display: none;
}

.toggle-slider[b-7scqei8kte] {
    width: 44px;
    height: 22px;
    background: #e2e8f0;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s;
}

.toggle-slider[b-7scqei8kte]::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-input:checked+.toggle-slider[b-7scqei8kte] {
    background: #3b82f6;
}

.toggle-input:checked+.toggle-slider[b-7scqei8kte]::before {
    transform: translateX(22px);
}

.toggle-label[b-7scqei8kte] {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* Child Entry Styles */
.child-entry-row[b-7scqei8kte] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 40px;
    gap: 16px;
    align-items: flex-end;
    padding: 16px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
}

.btn-add-item[b-7scqei8kte] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #ffffff;
    border: 1.5px dashed #3b82f6;
    border-radius: 12px;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.btn-add-item:hover[b-7scqei8kte] {
    background: #eff6ff;
    border-style: solid;
}

.btn-remove-item[b-7scqei8kte] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-remove-item:hover[b-7scqei8kte] {
    background: #fecaca;
    color: #dc2626;
}

/* Form Controls */
.form-control[b-7scqei8kte] {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    transition: all 0.2s ease;
    color: #1e293b;
    outline: none;
}

.form-control:focus[b-7scqei8kte] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-control[b-7scqei8kte]::placeholder {
    color: #94a3b8;
}

/* Labels */
label[b-7scqei8kte] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: block;
    margin-bottom: 6px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.label-note[b-7scqei8kte] {
    font-weight: 400;
    color: #94a3b8;
    font-size: 12px;
    margin-left: 4px;
}

.required-star[b-7scqei8kte] {
    color: #ef4444;
}

/* File Upload Button */
.file-upload-btn[b-7scqei8kte] {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    padding: 12px 16px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.file-upload-btn:hover[b-7scqei8kte] {
    background: #f1f5f9;
    border-color: #3b82f6;
    color: #3b82f6;
}

.file-input-hidden[b-7scqei8kte] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
}

/* Permission Button */
.btn-permission[b-7scqei8kte] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-permission:hover[b-7scqei8kte] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
}

/* Drawer Actions */
.drawer-actions[b-7scqei8kte] {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn[b-7scqei8kte] {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn.cancel[b-7scqei8kte] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
}

.btn.cancel:hover[b-7scqei8kte] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn.primary[b-7scqei8kte] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

.btn.primary:hover[b-7scqei8kte] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
}

.modal-container[b-7scqei8kte] {
    background: #ffffff;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpModal-b-7scqei8kte 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpModal-b-7scqei8kte {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

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

.scrollable-modal[b-7scqei8kte] {
    overflow-y: auto;
}

.modal-header-premium[b-7scqei8kte] {
    padding: 24px 32px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-header-premium h2[b-7scqei8kte] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}

.btn-close-modal[b-7scqei8kte] {
    background: #f8fafc;
    border: none;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-modal:hover[b-7scqei8kte] {
    background: #f1f5f9;
    color: #0f172a;
    transform: rotate(90deg);
}

.modal-body-premium[b-7scqei8kte] {
    padding: 24px 32px;
    background: #fcfdfe;
    flex: 1;
}

/* Premium Form Sections (Matching Home.razor Drawer) */
.form-section-premium[b-7scqei8kte] {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.section-label-premium[b-7scqei8kte] {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    text-transform: uppercase;
    display: block;
}

.account-id-section[b-7scqei8kte] {
    background: #f8fafc;
    border: none;
}

.section-label-premium[b-7scqei8kte] {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Form Layouts */
.form-grid-single[b-7scqei8kte] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.form-main-layout-premium[b-7scqei8kte] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-col-premium[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row-premium[b-7scqei8kte] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Form Group & Controls */
.form-group-premium[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-premium label[b-7scqei8kte] {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
    display: block;
}

.form-control-premium[b-7scqei8kte] {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #f9fafc;
    transition: all 0.2s ease;
    color: #1e293b;
    outline: none;
}

.form-control-premium:focus[b-7scqei8kte] {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-control-premium[b-7scqei8kte]::placeholder {
    color: #94a3b8;
}

.label-note[b-7scqei8kte] {
    font-weight: 400;
    color: #94a3b8;
    font-size: 12px;
    margin-left: 4px;
}

.required-star[b-7scqei8kte] {
    color: #ef4444;
}

.form-input-premium[b-7scqei8kte],
.form-select-premium[b-7scqei8kte] {
    /* Deprecated in favor of form-control-premium */
    display: none;
}

.input-with-icon-premium .form-control-premium[b-7scqei8kte] {
    padding-left: 40px;
}

/* Specific Section Adjustments */
.research-section[b-7scqei8kte] {
    height: 100%;
}

.voice-entry-section[b-7scqei8kte] {
    border-color: #f1f5f9;
}

.permission-section[b-7scqei8kte] {
    background: #fafafa;
}

.btn-permission-premium[b-7scqei8kte] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-permission-premium:hover[b-7scqei8kte] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
}

/* File Input Styling */
.file-input-wrapper-premium[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px;
    background: #ffffff;
}

.btn-file-premium[b-7scqei8kte] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-file-premium:hover[b-7scqei8kte] {
    background: #f1f5f9;
}

.file-name-premium[b-7scqei8kte] {
    font-size: 13px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hidden-input[b-7scqei8kte] {
    display: none;
}

/* Modal Footer */
.modal-footer-premium[b-7scqei8kte] {
    padding: 20px 32px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: #ffffff;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.btn-secondary-premium[b-7scqei8kte] {
    padding: 10px 24px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary-premium:hover[b-7scqei8kte] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-save-premium[b-7scqei8kte] {
    padding: 10px 32px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-save-premium:hover[b-7scqei8kte] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .form-main-layout-premium[b-7scqei8kte] {
        grid-template-columns: 1fr;
    }

    .modal-container[b-7scqei8kte] {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* =========================================
   ADD GROUP MULTI-STEP WIZARD STYLES
   ========================================= */

.stepper-row-premium[b-7scqei8kte] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 20;
}

.step-node-wrapper-premium[b-7scqei8kte] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-node-premium[b-7scqei8kte] {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 8px;
    cursor: default;
    transition: all 0.2s ease;
}

.step-node-premium.active[b-7scqei8kte],
.step-node-premium.completed[b-7scqei8kte] {
    cursor: pointer;
}

.step-circle-premium[b-7scqei8kte] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.step-node-premium.active .step-circle-premium[b-7scqei8kte] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.step-node-premium.completed .step-circle-premium[b-7scqei8kte] {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.step-title-premium[b-7scqei8kte] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    transition: color 0.2s;
}

.step-node-premium.active .step-title-premium[b-7scqei8kte] {
    color: #1e293b;
    font-weight: 700;
}

.step-connector-premium[b-7scqei8kte] {
    flex: 1;
    height: 2px;
    background: #f1f5f9;
    margin: 0 16px;
    position: relative;
    border-radius: 2px;
}

.step-connector-premium.is-active[b-7scqei8kte] {
    background: #10b981;
}

/* Parent Selection Scroll */
.parent-selection-scroll[b-7scqei8kte] {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* =========================================
   PARTICIPANT SELECTION LIST STYLES
   ========================================= */


/* View Toggle Styles */
.view-toggle-container[b-7scqei8kte] {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.view-toggle-wrapper[b-7scqei8kte] {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.view-toggle-btn[b-7scqei8kte] {
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-toggle-btn.active[b-7scqei8kte] {
    background: #ffffff;
    color: #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.groups-stack-premium[b-7scqei8kte] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Chat Unread Badge */
.chat-btn-icon[b-7scqei8kte] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unread-dot-badge[b-7scqei8kte] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #ef4444;
    /* red-500 */
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
    z-index: 2;
}
/* _content/MuseumAdmin/Components/Shared/AddGroupDrawer.razor.rz.scp.css */
/* Drawer Overlay */
.overlay[b-fg2s29zx3n] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    z-index: 1050;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Drawer */
.drawer[b-fg2s29zx3n] {
    position: fixed;
    top: 0;
    right: 0;
    width: 850px;
    max-width: 95vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
    display: flex;
    flex-direction: column;
}

.drawer-header[b-fg2s29zx3n] {
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.drawer-header h2[b-fg2s29zx3n] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.025em;
}

.drawer-close[b-fg2s29zx3n] {
    background: #f8fafc;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.drawer-close:hover[b-fg2s29zx3n] {
    background: #f1f5f9;
    color: #1e293b;
}

.drawer-content[b-fg2s29zx3n] {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
    background: #f8fafc;
}

.drawer-section[b-fg2s29zx3n] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.drawer-section-title[b-fg2s29zx3n] {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-section-title[b-fg2s29zx3n]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #f1f5f9;
}

.form-group[b-fg2s29zx3n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-control[b-fg2s29zx3n] {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    transition: all 0.2s ease;
    color: #1e293b;
    outline: none;
}

.form-control:focus[b-fg2s29zx3n] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.participant-selection-list[b-fg2s29zx3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.participant-family-row[b-fg2s29zx3n] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.participant-family-row:hover[b-fg2s29zx3n] {
    border-color: #3b82f6;
    background: #f8fafc;
}

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

.family-name[b-fg2s29zx3n] {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.family-phone[b-fg2s29zx3n] {
    font-size: 12px;
    color: #64748b;
}

.selection-status[b-fg2s29zx3n] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
}

.badge-selection[b-fg2s29zx3n] {
    background: #eff6ff;
    color: #2563eb;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.drawer-actions[b-fg2s29zx3n] {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn[b-fg2s29zx3n] {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn.cancel[b-fg2s29zx3n] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
}

.btn.primary[b-fg2s29zx3n] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

/* Secondary Drawer */
.secondary-drawer-overlay[b-fg2s29zx3n] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
}

.secondary-drawer[b-fg2s29zx3n] {
    width: 400px;
    height: 100%;
    background: #ffffff;
    box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.secondary-drawer-header[b-fg2s29zx3n] {
    padding: 24px 32px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.btn-back-drawer[b-fg2s29zx3n] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    margin-bottom: 20px;
}

.header-titles h3[b-fg2s29zx3n] {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.secondary-drawer-body[b-fg2s29zx3n] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

.child-selection-grid[b-fg2s29zx3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.child-select-card[b-fg2s29zx3n] {
    cursor: pointer;
    user-select: none;
}

.child-select-card input[b-fg2s29zx3n] {
    display: none;
}

.card-content[b-fg2s29zx3n] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

.child-select-card.is-selected .card-content[b-fg2s29zx3n] {
    border-color: #3b82f6;
    background: #f0f7ff;
}

.checkbox-visual[b-fg2s29zx3n] {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    position: relative;
    background: #ffffff;
}

.child-select-card.is-selected .checkbox-visual[b-fg2s29zx3n] {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-visual[b-fg2s29zx3n]::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    left: 6px;
    top: 2px;
    opacity: 0;
}

.child-select-card.is-selected .checkbox-visual[b-fg2s29zx3n]::after {
    opacity: 1;
}

.secondary-drawer-footer[b-fg2s29zx3n] {
    padding: 24px 32px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.btn-done[b-fg2s29zx3n] {
    width: 100%;
    padding: 12px;
    background: #1e293b;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

@keyframes fadeIn-b-fg2s29zx3n {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in[b-fg2s29zx3n] {
    animation: fadeIn-b-fg2s29zx3n 0.3s ease-out;
}

@keyframes slideInRight-b-fg2s29zx3n {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.slide-in-right[b-fg2s29zx3n] {
    animation: slideInRight-b-fg2s29zx3n 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* _content/MuseumAdmin/Components/Shared/AssignExerciseDrawer.razor.rz.scp.css */
.drawer-overlay[b-0pla3rr3mf] {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
}

.drawer-panel[b-0pla3rr3mf] {
    max-width: 580px;
    background: #f5f6f8;
}

.drawer-header[b-0pla3rr3mf] {
    background: #ffffff;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.drawer-title-group h3[b-0pla3rr3mf] {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 4px 0;
    color: #111827;
}

.drawer-title-group p[b-0pla3rr3mf] {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.drawer-title-group p strong[b-0pla3rr3mf] {
    color: #374151;
}

.drawer-close-btn[b-0pla3rr3mf] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #e5e7eb;
    color: #6b7280;
}

.drawer-close-btn:hover[b-0pla3rr3mf] {
    background: #d1d5db;
    color: #4b5563;
    border-color: transparent;
}

.drawer-mode-toggle[b-0pla3rr3mf] {
    margin: 10px 20px 0;
    background: #e5e7eb;
    border-radius: 10px;
    padding: 4px;
    display: flex;
    gap: 4px;
}

.drawer-mode-tab[b-0pla3rr3mf] {
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    flex: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.drawer-mode-tab.active[b-0pla3rr3mf] {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.drawer-mode-tab .mode-icon[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mode-count-badge[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
}

.drawer-mode-tab.active .mode-count-badge[b-0pla3rr3mf] {
    background: #1d4ed8;
    color: #ffffff;
}

.drawer-progress-track[b-0pla3rr3mf] {
    margin: 8px 20px 0;
    height: 4px;
    border-radius: 999px;
    background: #d1d5db;
    overflow: hidden;
}

.drawer-progress-fill[b-0pla3rr3mf] {
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
    transition: width 0.3s ease;
}

.drawer-body[b-0pla3rr3mf] {
    padding: 14px 20px;
}

.drawer-loading-state[b-0pla3rr3mf],
.drawer-empty-state[b-0pla3rr3mf] {
    text-align: center;
    padding: 42px 16px;
    color: #6b7280;
}

.drawer-loading-state[b-0pla3rr3mf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.drawer-section-label[b-0pla3rr3mf] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}

.module-list[b-0pla3rr3mf] {
    gap: 10px;
}

.module-card[b-0pla3rr3mf] {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.module-card:hover[b-0pla3rr3mf] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.module-card.expanded[b-0pla3rr3mf] {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
    transform: translateY(-2px);
}

.module-card.is-complete[b-0pla3rr3mf] {
    border-color: #bfdbfe;
    background: linear-gradient(to bottom right, #ffffff, #f8fafc);
}

.module-header-row[b-0pla3rr3mf] {
    padding: 12px 13px;
    gap: 8px;
    cursor: pointer;
}

.module-leading-icon[b-0pla3rr3mf] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e8edf6;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-leading-icon.is-assigned[b-0pla3rr3mf] {
    color: #16a34a; /* Green for already assigned */
}

.module-leading-icon.is-selected[b-0pla3rr3mf] {
    color: #2563eb; /* Blue for currently selected in drawer */
}

.module-info h4[b-0pla3rr3mf] {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 2px;
    color: #111827;
}

.module-meta[b-0pla3rr3mf] {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #8a93a4;
    font-size: 11px;
    font-weight: 500;
}

.module-meta span + span[b-0pla3rr3mf]::before {
    content: "·";
    margin-right: 8px;
}

.module-actions-group[b-0pla3rr3mf] {
    gap: 8px;
}

.btn-schedule-module[b-0pla3rr3mf],
.btn-assign-module[b-0pla3rr3mf] {
    border-radius: 8px;
    padding: 6px 9px;
    min-height: 30px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid transparent;
    box-shadow: none;
    gap: 6px;
}

.btn-schedule-module[b-0pla3rr3mf] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.btn-schedule-module.done[b-0pla3rr3mf] {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

.btn-assign-module[b-0pla3rr3mf] {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
}

.btn-assign-module.enabled[b-0pla3rr3mf] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-assign-module.enabled:hover[b-0pla3rr3mf] {
    background: #1d4ed8;
}

.btn-assign-module.done[b-0pla3rr3mf] {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

.step-chip[b-0pla3rr3mf] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.16);
    color: inherit;
}

.btn-assign-module.enabled .step-chip[b-0pla3rr3mf] {
    background: rgba(255, 255, 255, 0.24);
}

.btn-schedule-module.done .step-chip[b-0pla3rr3mf],
.btn-assign-module.done .step-chip[b-0pla3rr3mf] {
    background: rgba(22, 101, 52, 0.15);
}

.module-selection-pill[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
}

.module-action[b-0pla3rr3mf] {
    color: #9ca3af;
    margin-left: 6px;
}

.module-card.expanded .module-action svg[b-0pla3rr3mf] {
    transform: rotate(180deg);
}

.exercise-list[b-0pla3rr3mf] {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 14px;
}

.exercise-item-row.module-preview[b-0pla3rr3mf] {
    padding: 12px 14px;
    cursor: default;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.exercise-item-row.module-preview:last-child[b-0pla3rr3mf] {
    margin-bottom: 0;
}

.exercise-item-row.module-preview:hover[b-0pla3rr3mf] {
    border-color: #e2e8f0;
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.exercise-content[b-0pla3rr3mf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.exercise-info-row[b-0pla3rr3mf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.exercise-main[b-0pla3rr3mf] {
    flex: 1;
    min-width: 0;
}

.exercise-title-row[b-0pla3rr3mf] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.exercise-text h5[b-0pla3rr3mf] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.exercise-icon[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    border-radius: 8px;
    color: #64748b;
}

.exercise-main p[b-0pla3rr3mf] {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exercise-status-pill[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid #e2e8f0;
    color: #64748b;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    white-space: nowrap;
    flex-shrink: 0;
}

.exercise-status-pill.scheduled[b-0pla3rr3mf] {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

.btn-schedule-exercise[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.btn-schedule-exercise:hover[b-0pla3rr3mf] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.btn-schedule-exercise.scheduled[b-0pla3rr3mf] {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

.exercise-row-actions[b-0pla3rr3mf] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.exercise-meta-row[b-0pla3rr3mf] {
    margin-top: 8px;
    display: flex;
}

.meta-tag[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.meta-tag.done[b-0pla3rr3mf] {
    background: #ecfdf3;
    border-color: #a7f3d0;
    color: #059669;
}

.assign-selected-container[b-0pla3rr3mf] {
    margin-top: 14px;
}

.btn-assign-selected[b-0pla3rr3mf] {
    border-radius: 12px;
    min-height: 46px;
}

.drawer-bottom-bar[b-0pla3rr3mf] {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.drawer-bottom-text[b-0pla3rr3mf] {
    color: #6b7280;
    font-size: 12px;
}

.drawer-bottom-text strong[b-0pla3rr3mf] {
    color: #111827;
}

.btn-assign-selected-global[b-0pla3rr3mf] {
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-assign-selected-global:hover:not(:disabled)[b-0pla3rr3mf] {
    background: #1d4ed8;
}

.btn-assign-selected-global:disabled[b-0pla3rr3mf] {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.timing-modal-overlay[b-0pla3rr3mf] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    padding: 20px;
}

.timing-modal-overlay .modal-dialog[b-0pla3rr3mf] {
    width: min(720px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.modal-header[b-0pla3rr3mf],
.modal-footer[b-0pla3rr3mf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
}

.modal-header[b-0pla3rr3mf] {
    border-bottom: 1px solid #e2e8f0;
}

.modal-footer[b-0pla3rr3mf] {
    border-top: 1px solid #e2e8f0;
    justify-content: flex-end;
}

.modal-body[b-0pla3rr3mf] {
    padding: 24px;
}

.modal-title-group h3[b-0pla3rr3mf],
.modal-title-group p[b-0pla3rr3mf] {
    margin: 0;
}

.modal-title-group p[b-0pla3rr3mf] {
    margin-top: 6px;
    color: #64748b;
}

.btn-close-modal[b-0pla3rr3mf] {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.timing-type-toggle[b-0pla3rr3mf] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.toggle-btn[b-0pla3rr3mf],
.btn-modal-secondary[b-0pla3rr3mf],
.btn-modal-primary[b-0pla3rr3mf],
.btn-day-toggle[b-0pla3rr3mf] {
    border-radius: 999px;
    border: 1px solid #dbe3ef;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-weight: 600;
}

.toggle-btn[b-0pla3rr3mf] {
    padding: 10px 16px;
}

.toggle-btn.active[b-0pla3rr3mf],
.btn-day-toggle.active[b-0pla3rr3mf] {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
}

.timing-row[b-0pla3rr3mf] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.form-label-sm[b-0pla3rr3mf],
.form-label[b-0pla3rr3mf] {
    display: block;
    margin-bottom: 10px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

.form-input[b-0pla3rr3mf],
.form-select[b-0pla3rr3mf] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
}

.timing-val[b-0pla3rr3mf] {
    width: 100px;
}

.timing-unit-select[b-0pla3rr3mf],
.timing-ref-select[b-0pla3rr3mf] {
    min-width: 150px;
}

.timing-divider[b-0pla3rr3mf] {
    height: 1px;
    background: #e2e8f0;
    margin: 24px 0;
}

.btn-modal-secondary[b-0pla3rr3mf],
.btn-modal-primary[b-0pla3rr3mf] {
    padding: 10px 18px;
}

.btn-modal-primary[b-0pla3rr3mf] {
    background: #4f46e5;
    border-color: #4f46e5;
    color: white;
}

.btn-modal-primary:hover[b-0pla3rr3mf] {
    background: #4338ca;
    border-color: #4338ca;
}

@media (max-width: 768px) {
    .drawer-panel[b-0pla3rr3mf] {
        max-width: 100%;
    }

    .drawer-header[b-0pla3rr3mf] {
        padding: 14px 14px 12px;
    }

    .drawer-title-group h3[b-0pla3rr3mf] {
        font-size: 16px;
    }

    .drawer-title-group p[b-0pla3rr3mf] {
        font-size: 12px;
    }

    .drawer-mode-toggle[b-0pla3rr3mf],
    .drawer-progress-track[b-0pla3rr3mf] {
        margin-left: 14px;
        margin-right: 14px;
    }

    .drawer-body[b-0pla3rr3mf] {
        padding: 12px 14px;
    }

    .drawer-mode-tab[b-0pla3rr3mf] {
        font-size: 11px;
        padding: 7px 8px;
        gap: 6px;
    }

    .module-info h4[b-0pla3rr3mf] {
        font-size: 13px;
    }

    .module-meta[b-0pla3rr3mf] {
        font-size: 10px;
        flex-wrap: wrap;
    }

    .module-header-row[b-0pla3rr3mf] {
        flex-wrap: wrap;
    }

    .module-actions-group[b-0pla3rr3mf] {
        width: 100%;
        justify-content: flex-start;
    }

    .btn-schedule-module[b-0pla3rr3mf],
    .btn-assign-module[b-0pla3rr3mf] {
        min-height: 28px;
        font-size: 10px;
        padding: 5px 8px;
    }

    .step-chip[b-0pla3rr3mf] {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }

    .drawer-bottom-bar[b-0pla3rr3mf] {
        padding: 8px 14px;
    }
}

.exercise-item-row.selected[b-0pla3rr3mf] {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.btn-edit-exercise[b-0pla3rr3mf],
.btn-delete-exercise[b-0pla3rr3mf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-edit-exercise[b-0pla3rr3mf] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.btn-edit-exercise:hover[b-0pla3rr3mf] {
    background: #dbeafe;
    border-color: #3b82f6;
}

.btn-delete-exercise[b-0pla3rr3mf] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
    margin-left: 6px;
}

.btn-delete-exercise:hover[b-0pla3rr3mf] {
    background: #fee2e2;
    border-color: #f87171;
}

.exercise-item-row.assigned-disabled[b-0pla3rr3mf] {
    cursor: default;
    background: #f9fafb;
    border-color: #f3f4f6;
}

.exercise-item-row.assigned-disabled:hover[b-0pla3rr3mf] {
    background: #f9fafb;
    border-color: #f3f4f6;
    box-shadow: none;
}
/* _content/MuseumAdmin/Components/Shared/ChatDrawer.razor.rz.scp.css */
/* Premium Chat Drawer Styling */

.chat-drawer[b-b8gbj69g60] {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: 480px;
    /* Wider for comfortable reading */
    background: #f8fafc;
}

.chat-header[b-b8gbj69g60] {
    border-bottom: 1px solid #e2e8f0;
    padding: 20px 24px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    z-index: 10;
}

.chat-header-info[b-b8gbj69g60] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.chat-avatar[b-b8gbj69g60] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

.chat-avatar.bg-indigo[b-b8gbj69g60] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

.chat-avatar.bg-amber[b-b8gbj69g60] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

.chat-title-group h3[b-b8gbj69g60] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.chat-subtitle[b-b8gbj69g60] {
    display: block;
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* Backup: backups/chat-retrieval-20260307/ChatDrawer.razor.css.bak */
/* Chat Body (Messages Area) */
.chat-body[b-b8gbj69g60] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

.chat-messages-stack[b-b8gbj69g60] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
}

.chat-date-divider[b-b8gbj69g60] {
    text-align: center;
    margin: 16px 0;
    position: relative;
}

.chat-date-divider[b-b8gbj69g60]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e2e8f0;
    z-index: 1;
}

.chat-date-divider span[b-b8gbj69g60] {
    position: relative;
    z-index: 2;
    background: #f8fafc;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Message Rows */
.chat-message-row[b-b8gbj69g60] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: 85%;
}

.chat-message-row.outgoing[b-b8gbj69g60] {
    align-self: flex-end;
}

.chat-message-row.incoming[b-b8gbj69g60] {
    align-self: flex-start;
}

.message-avatar[b-b8gbj69g60] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #cbd5e1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.message-bubble[b-b8gbj69g60] {
    padding: 14px 18px;
    border-radius: 18px;
    position: relative;
    font-size: 14.5px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-message-row.incoming .message-bubble[b-b8gbj69g60] {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

.chat-message-row.outgoing .message-bubble[b-b8gbj69g60] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.message-bubble p[b-b8gbj69g60] {
    margin: 0 0 6px 0;
}

.message-time[b-b8gbj69g60] {
    display: block;
    font-size: 11px;
    text-align: right;
    font-weight: 500;
}

.chat-message-row.incoming .message-time[b-b8gbj69g60] {
    color: #94a3b8;
}

.chat-message-row.outgoing .message-time[b-b8gbj69g60] {
    color: #a5b4fc;
}

.empty-chat-state[b-b8gbj69g60] {
    text-align: center;
    margin: auto 0;
    padding: 40px;
    color: #64748b;
}

.empty-icon[b-b8gbj69g60] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-chat-state p[b-b8gbj69g60] {
    font-weight: 600;
    font-size: 16px;
    color: #334155;
    margin: 0 0 4px 0;
}

.empty-chat-state span[b-b8gbj69g60] {
    font-size: 14px;
}

/* Chat Input Area */
.chat-input-area[b-b8gbj69g60] {
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    z-index: 10;
}

.chat-input-wrapper[b-b8gbj69g60] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f1f5f9;
    border-radius: 24px;
    padding: 6px 6px 6px 20px;
    border: 1.5px solid transparent;
    transition: all 0.2s;
}

.chat-input-wrapper:focus-within[b-b8gbj69g60] {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.chat-input-field[b-b8gbj69g60] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #1e293b;
    outline: none;
    padding: 8px 0;
}

.chat-input-field[b-b8gbj69g60]::placeholder {
    color: #94a3b8;
}

.chat-send-btn[b-b8gbj69g60] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4f46e5;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-send-btn:hover:not(:disabled)[b-b8gbj69g60] {
    background: #4338ca;
    transform: scale(1.05);
}

.chat-send-btn:disabled[b-b8gbj69g60] {
    background: #cbd5e1;
    cursor: not-allowed;
    color: #f8fafc;
}
/* _content/MuseumAdmin/Components/Shared/CheckInBuilder.razor.rz.scp.css */
/* Premium Check-In Form Builder Styles */

:host[b-7colwhjahd] {
    display: block;
    width: 100%;
}

.builder-container[b-7colwhjahd] {
    display: flex;
    height: calc(100vh - 250px);
    min-height: 650px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    margin-bottom: 32px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar Styling */
.builder-sidebar[b-7colwhjahd] {
    width: 320px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 20;
}

.builder-container.sidebar-collapsed .builder-sidebar[b-7colwhjahd] {
    width: 68px;
}

.sidebar-header[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-icon[b-7colwhjahd] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.sidebar-title-group[b-7colwhjahd] {
    flex: 1;
    transition: opacity 0.2s, transform 0.2s;
}

.builder-container.sidebar-collapsed .sidebar-title-group[b-7colwhjahd] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

.sidebar-title[b-7colwhjahd] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.sidebar-subtitle[b-7colwhjahd] {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.btn-sidebar-toggle[b-7colwhjahd] {
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-sidebar-toggle:hover[b-7colwhjahd] {
    color: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sidebar-content-scroll[b-7colwhjahd] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.builder-container.sidebar-collapsed .sidebar-content-scroll[b-7colwhjahd] {
    padding: 24px 12px;
}

.sidebar-section[b-7colwhjahd] {
    transition: opacity 0.2s;
}

.builder-container.sidebar-collapsed .sidebar-section label[b-7colwhjahd],
.builder-container.sidebar-collapsed .sidebar-section input[b-7colwhjahd],
.builder-container.sidebar-collapsed .sidebar-section textarea[b-7colwhjahd] {
    display: none;
}

.sidebar-label[b-7colwhjahd] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.builder-input[b-7colwhjahd] {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    color: #1e293b;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
}

.builder-input:focus[b-7colwhjahd] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.builder-input.input-error[b-7colwhjahd] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.builder-validation-message[b-7colwhjahd] {
    margin-top: 6px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

.builder-validation-summary[b-7colwhjahd] {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    font-weight: 600;
}

.question-type-grid[b-7colwhjahd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.builder-container.sidebar-collapsed .question-type-grid[b-7colwhjahd] {
    grid-template-columns: 1fr;
}

.btn-qtype[b-7colwhjahd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    gap: 6px;
}

.btn-qtype:hover[b-7colwhjahd] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.builder-container.sidebar-collapsed .qtype-text[b-7colwhjahd] {
    display: none;
}

.qtype-icon[b-7colwhjahd] {
    font-size: 20px;
}

.sidebar-footer[b-7colwhjahd] {
    padding: 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.builder-container.sidebar-collapsed .sidebar-footer[b-7colwhjahd] {
    padding: 24px 12px;
}

.builder-container.sidebar-collapsed .sidebar-footer .btn-text[b-7colwhjahd] {
    display: none;
}

.btn-builder-outline[b-7colwhjahd] {
    background: white;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-builder-outline:hover[b-7colwhjahd] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-builder-primary[b-7colwhjahd] {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2);
}

.btn-builder-primary:hover[b-7colwhjahd] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -2px rgba(59, 130, 246, 0.3);
}

/* Canvas Styling */
.builder-canvas[b-7colwhjahd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f1f5f9;
    overflow-y: auto;
}

.canvas-header[b-7colwhjahd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    border-bottom: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.canvas-header-left[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-canvas-expand[b-7colwhjahd] {
    background: #f1f5f9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-canvas-expand:hover[b-7colwhjahd] {
    background: #e2e8f0;
    color: #1e293b;
}

.canvas-title[b-7colwhjahd] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
}

.q-count-badge[b-7colwhjahd] {
    background: #eff6ff;
    color: #1d4ed8;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #dbeafe;
}

.canvas-header-right[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-default-control[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.admin-default-text[b-7colwhjahd] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.btn-toggle[b-7colwhjahd] {
    width: 40px;
    height: 22px;
    background: #e2e8f0;
    border-radius: 20px;
    border: none;
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    display: flex;
    align-items: center;
}

.btn-toggle.active[b-7colwhjahd] {
    background: #10b981;
}

.toggle-knob[b-7colwhjahd] {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-toggle.active .toggle-knob[b-7colwhjahd] {
    transform: translateX(18px);
}

.canvas-body[b-7colwhjahd] {
    padding: 40px 32px;
    max-width: 850px;
    margin: 0 auto;
    width: 100%;
}

.empty-canvas-state[b-7colwhjahd] {
    text-align: center;
    padding: 80px 40px;
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.empty-canvas-icon[b-7colwhjahd] {
    font-size: 48px;
    margin-bottom: 8px;
}

.empty-canvas-state h3[b-7colwhjahd] {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.empty-canvas-state p[b-7colwhjahd] {
    color: #64748b;
    max-width: 320px;
    margin: 0;
    line-height: 1.6;
}

.questions-list[b-7colwhjahd] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.q-card[b-7colwhjahd] {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.q-card:hover[b-7colwhjahd] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.q-card-header[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px;
}

.q-number[b-7colwhjahd] {
    width: 30px;
    height: 30px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.q-title-wrap[b-7colwhjahd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.q-title-input[b-7colwhjahd] {
    width: 100%;
    background: transparent;
    border: none;
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.q-title-input[b-7colwhjahd]::placeholder {
    color: #94a3b8;
    font-weight: 400;
    opacity: 0.85;
}

.q-title-input:focus[b-7colwhjahd]::placeholder {
    opacity: 0;
}

.q-title-input:hover[b-7colwhjahd], .q-title-input:focus[b-7colwhjahd] {
    background: #f8fafc;
    outline: none;
}

.q-type-label[b-7colwhjahd] {
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 1px;
}

.q-actions[b-7colwhjahd] {
    display: flex;
    gap: 6px;
}

.btn-q-reorder[b-7colwhjahd], .btn-q-delete[b-7colwhjahd] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-q-reorder[b-7colwhjahd] {
    background: white;
    border: 1.5px solid #f1f5f9;
    color: #94a3b8;
}

.btn-q-reorder:hover:not(:disabled)[b-7colwhjahd] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-q-reorder:disabled[b-7colwhjahd] {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-q-delete[b-7colwhjahd] {
    background: white;
    border: 1.5px solid #fef2f2;
    color: #fca5a5;
}

.btn-q-delete:hover[b-7colwhjahd] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.q-card-body[b-7colwhjahd] {
    padding: 0 24px 24px 70px;
}

.preview-tag[b-7colwhjahd] {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.q-preview-container[b-7colwhjahd] {
    background: #f8fafc;
    border: 1.5px solid #f1f5f9;
    border-radius: 14px;
    padding: 20px;
}

.likert-preview[b-7colwhjahd] {
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    margin: 0 auto;
}

.likert-preview-item[b-7colwhjahd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.likert-preview-circle[b-7colwhjahd] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
    background: white;
    transition: all 0.2s;
}

.likert-preview-circle.active[b-7colwhjahd] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
}

.likert-preview-label[b-7colwhjahd] {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-align: center;
    max-width: 70px;
}

.slider-preview[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.slider-limit[b-7colwhjahd] {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
}

.slider-track-visual[b-7colwhjahd] {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    position: relative;
}

.slider-fill-visual[b-7colwhjahd] {
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
}

.slider-thumb-visual[b-7colwhjahd] {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.yesno-preview[b-7colwhjahd] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-preview-toggle[b-7colwhjahd] {
    background: white;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
}

.btn-preview-toggle.active[b-7colwhjahd] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.preview-form-control[b-7colwhjahd] {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    color: #64748b;
    resize: none;
    font-family: inherit;
}

.q-card-footer[b-7colwhjahd] {
    padding: 16px 24px;
    background: #fcfdfe;
    border-top: 1px solid #f1f5f9;
}

.q-settings-group[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-left: 46px;
}

.q-setting-item[b-7colwhjahd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.q-setting-checkbox[b-7colwhjahd] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.q-hint-input-container[b-7colwhjahd] {
    margin-top: 16px;
    padding-left: 46px;
}

.q-hint-field[b-7colwhjahd] {
    width: 100%;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1e293b;
    transition: border-color 0.2s;
}

.q-hint-field:focus[b-7colwhjahd] {
    outline: none;
    border-color: #3b82f6;
}

.badge-modified[b-7colwhjahd] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-default[b-7colwhjahd] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.preview-generic[b-7colwhjahd] {
    color: #64748b;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 16px;
}

.fade-in[b-7colwhjahd] {
    animation: fadeIn-b-7colwhjahd 0.4s ease-out;
}

@keyframes fadeIn-b-7colwhjahd {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .builder-sidebar[b-7colwhjahd] {
        position: absolute;
        height: 100%;
        left: 0;
    }
    
    .builder-container.sidebar-collapsed .builder-sidebar[b-7colwhjahd] {
        transform: translateX(-100%);
    }
}
/* _content/MuseumAdmin/Components/Shared/RtmNoteEditor.razor.rz.scp.css */
.cn-viewport[b-f39dj1soj1] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Inherit Inter from body — no font-family override */
    --rtm-bg: #F8FAFC;
    --rtm-surface: #FFFFFF;
    --rtm-surface-alt: #F1F5F9;
    --rtm-border: #E5E7EB;
    --rtm-border-mid: #D1D5DB;
    --rtm-text-1: #111827;
    --rtm-text-2: #4B5563;
    --rtm-text-3: #9CA3AF;
    --rtm-accent: #3B82F6;
    /* pure blue */
    --rtm-accent-soft: #EFF6FF;
    /* blue-50 */
    --rtm-accent-mid: #2563EB;
    /* blue-600 */
    --rtm-warn: #D97706;
    --rtm-warn-soft: #FEF3C7;
    --rtm-good-soft: #DCFCE7;
    --rtm-good-text: #166534;
    background: var(--rtm-bg);
    color: var(--rtm-text-1);
    animation: slideUpMenu-b-f39dj1soj1 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Convenience aliases so inner components still compile */
.cn-viewport[b-f39dj1soj1] {
    --panel-surface: var(--rtm-surface);
    --panel-border: var(--rtm-border);
    --text-primary: var(--rtm-text-1);
    --text-secondary: var(--rtm-text-2);
    --text-tertiary: var(--rtm-text-3);
    --accent: var(--rtm-accent);
    --warn: var(--rtm-warn);
}

.cn-tb[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 0 24px;
    background: #111111;
    border-bottom: 2px solid #000000;
    flex-shrink: 0;
    color: #ffffff;
}

.cn-brand[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cn-brand-mark[b-f39dj1soj1] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #059669;
    color: #fff;
}

.cn-brand-title[b-f39dj1soj1] {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.cn-brand-subtitle[b-f39dj1soj1] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.cn-tb-meta[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 16px;
}

.cn-tb-badge[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.cn-tbb-dark-teal[b-f39dj1soj1] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.cn-tbb-dark-blue[b-f39dj1soj1] {
    background: rgba(37, 99, 235, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.cn-tb-user-wrap[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cn-tb-sep[b-f39dj1soj1] {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
}

.cn-tb-user[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-user-av[b-f39dj1soj1] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #064E3B;
    color: #34D399;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid rgba(52, 211, 153, 0.2);
}

.cn-user-name[b-f39dj1soj1] {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1px;
}

.cn-user-meta[b-f39dj1soj1] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.cn-btn-close[b-f39dj1soj1] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.cn-btn-close:hover[b-f39dj1soj1] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.cn-btn-close[b-f39dj1soj1] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--rtm-border);
    background: var(--rtm-surface);
    color: var(--rtm-text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-btn-close:hover[b-f39dj1soj1] {
    color: var(--rtm-text-1);
    background: var(--rtm-surface-alt);
    border-color: var(--rtm-border-mid);
}

.cn-lay[b-f39dj1soj1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0;
    flex: 1;
    min-height: 0;
    max-width: 1540px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.cn-ma[b-f39dj1soj1] {
    overflow-y: auto;
    padding: 28px 28px 36px;
    min-width: 0;
}

.cn-rp[b-f39dj1soj1] {
    overflow-y: auto;
    padding: 28px 20px 36px;
    border-left: 1px solid var(--rtm-border);
    background: var(--rtm-surface-alt);
}

.cn-hero[b-f39dj1soj1],
.cn-time-card[b-f39dj1soj1],
.cn-overview-card[b-f39dj1soj1],
.cn-ss[b-f39dj1soj1],
.cn-side-card[b-f39dj1soj1] {
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    box-shadow: none;
    transition: all 0.25s ease;
    border-radius: 12px;
    overflow: hidden;
}

.cn-side-card.flush[b-f39dj1soj1] {
    border-radius: 12px;
    border-right: none;
    border-left: none;
    border-top: none;
}

.cn-side-card-header[b-f39dj1soj1] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rtm-border);
    background: rgba(248, 250, 252, 0.5);
}

.cn-side-card-body[b-f39dj1soj1] {
    padding: 20px;
}

.cn-session-type-toggle[b-f39dj1soj1] {
    display: flex;
    background: var(--rtm-surface-alt);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--rtm-border);
    margin-bottom: 20px;
}

.cn-type-btn[b-f39dj1soj1] {
    flex: 1;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--rtm-text-2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.cn-type-btn:hover:not(.active):not(:disabled)[b-f39dj1soj1] {
    color: var(--rtm-text-1);
    background: rgba(255, 255, 255, 0.5);
}

.cn-type-btn:disabled[b-f39dj1soj1] {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    border: none;
}

.cn-type-btn.active[b-f39dj1soj1] {
    background: var(--rtm-surface);
    color: var(--rtm-accent-mid);
    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.cn-side-info-alert[b-f39dj1soj1] {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.cn-side-info-alert.warning[b-f39dj1soj1] {
    background: var(--rtm-warn-soft);
    border: 1px solid rgba(217, 119, 6, 0.15);
    color: var(--rtm-warn);
}

.cn-side-info-alert p[b-f39dj1soj1] {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.85;
}

.cn-side-info-head[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-side-info-head strong[b-f39dj1soj1] {
    font-size: 12px;
    font-weight: 700;
}

.cn-side-info-icon[b-f39dj1soj1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cn-text-link[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    color: var(--rtm-accent-mid);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
    margin-top: 12px;
}

.cn-text-link:hover[b-f39dj1soj1] {
    color: var(--rtm-accent);
    text-decoration: underline;
}

.cn-ss.is-invalid[b-f39dj1soj1] {
    border-color: #EF4444;
    background: rgba(239, 68, 68, 0.02);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.cn-ss.is-invalid .cn-sh[b-f39dj1soj1] {
    background: rgba(239, 68, 68, 0.05);
    border-bottom: 1px solid rgba(239, 68, 68, 0.1);
}

.cn-hero[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 22px 24px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.cn-hero-main[b-f39dj1soj1],
.cn-hero-title-row[b-f39dj1soj1],
.cn-sh-main[b-f39dj1soj1],
.cn-side-hero[b-f39dj1soj1],
.cn-code-row[b-f39dj1soj1],
.cn-plan-footer[b-f39dj1soj1],
.cn-checkbox-row[b-f39dj1soj1],
.cn-audit-row[b-f39dj1soj1] {
    display: flex;
    align-items: center;
}

.cn-hero-main[b-f39dj1soj1] {
    gap: 18px;
}

.cn-pt-av[b-f39dj1soj1] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-2);
    font-size: 18px;
    font-weight: 700;
    border: 1px solid var(--rtm-border);
}

.cn-hero-copy[b-f39dj1soj1] {
    display: grid;
    gap: 10px;
}

.cn-hero-title-row[b-f39dj1soj1] {
    gap: 12px;
    flex-wrap: wrap;
}

.cn-hero-title[b-f39dj1soj1] {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.cn-hero-subtitle[b-f39dj1soj1],
.cn-overview-copy[b-f39dj1soj1],
.cn-section-copy[b-f39dj1soj1],
.cn-sh-subtitle[b-f39dj1soj1],
.cn-side-copy[b-f39dj1soj1],
.cn-plan-footer-copy[b-f39dj1soj1],
.cn-audit-detail[b-f39dj1soj1],
.cn-obj-hint[b-f39dj1soj1] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.cn-chip-row[b-f39dj1soj1],
.cn-inline-badges[b-f39dj1soj1],
.cn-inline-badges-row[b-f39dj1soj1],
.cn-time-controls[b-f39dj1soj1],
.cn-side-stack[b-f39dj1soj1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cn-inline-badges-row[b-f39dj1soj1] {
    width: 100%;
}

.justify-between[b-f39dj1soj1] {
    justify-content: space-between;
}

.justify-end[b-f39dj1soj1] {
    justify-content: flex-end;
}

.cn-chip[b-f39dj1soj1] {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--rtm-surface-alt);
    border: 1px solid var(--rtm-border);
    color: var(--rtm-text-2);
    font-size: 12px;
    font-weight: 600;
}

.cn-state-pill[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    white-space: nowrap;
}

.cn-state-pill.is-ready[b-f39dj1soj1] {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
}

.cn-state-pill.is-progress[b-f39dj1soj1] {
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
}

.cn-state-pill.is-draft[b-f39dj1soj1] {
    background: #F8FAFC;
    color: var(--rtm-text-2);
    border: 1px solid var(--rtm-border);
}

.cn-hero-actions[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cn-hero-stat[b-f39dj1soj1] {
    display: grid;
    gap: 2px;
    min-width: 180px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.cn-hero-stat-label[b-f39dj1soj1],
.cn-card-kicker[b-f39dj1soj1],
.cn-check-label[b-f39dj1soj1],
.cn-side-price-label[b-f39dj1soj1],
.cn-mini-stat-label[b-f39dj1soj1] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--rtm-text-3);
    font-weight: 600;
}

.cn-hero-stat-value[b-f39dj1soj1],
.cn-time-value[b-f39dj1soj1],
.cn-side-price strong[b-f39dj1soj1] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.cn-hero-stat-value[b-f39dj1soj1] {
    font-size: 22px;
    font-weight: 500;
}

.cn-hero-stat-hint[b-f39dj1soj1] {
    font-size: 12px;
    color: var(--rtm-text-3);
    font-weight: 600;
}

/* Status Tints */
.cn-hero-stat.is-warning[b-f39dj1soj1] {
    background: #FFFBEB;
    border-color: #FDE68A;
}

.cn-hero-stat.is-warning .cn-hero-stat-label[b-f39dj1soj1],
.cn-hero-stat.is-warning .cn-hero-stat-hint[b-f39dj1soj1] {
    color: #92400E;
}

.cn-hero-stat.is-warning .cn-hero-stat-value[b-f39dj1soj1] {
    color: #78350F;
}

.cn-hero-stat-revenue[b-f39dj1soj1],
.cn-hero-stat.is-eligible[b-f39dj1soj1] {
    background: #F0FDF4;
    border-color: #BBF7D0;
}

.cn-hero-stat-revenue .cn-hero-stat-label[b-f39dj1soj1],
.cn-hero-stat-revenue .cn-hero-stat-hint[b-f39dj1soj1],
.cn-hero-stat.is-eligible .cn-hero-stat-label[b-f39dj1soj1],
.cn-hero-stat.is-eligible .cn-hero-stat-hint[b-f39dj1soj1] {
    color: #166534;
}

.cn-hero-stat-revenue .cn-hero-stat-value[b-f39dj1soj1],
.cn-hero-stat.is-eligible .cn-hero-stat-value[b-f39dj1soj1] {
    color: #14532D;
}

.btng[b-f39dj1soj1],
.btnp[b-f39dj1soj1] {
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btng[b-f39dj1soj1] {
    background: var(--rtm-surface);
    border: 1.5px solid var(--rtm-border);
    color: var(--rtm-text-1);
}

.btng:hover:not(:disabled)[b-f39dj1soj1] {
    background: var(--rtm-surface-alt);
    border-color: var(--rtm-border-mid);
    transform: translateY(-1px);
}

.btng-primary[b-f39dj1soj1] {
    background: var(--rtm-accent);
    color: #fff;
    border-color: transparent;
}

.btng-primary:hover:not(:disabled)[b-f39dj1soj1] {
    background: #0D9488;
}

.btng:disabled[b-f39dj1soj1],
.btnp:disabled[b-f39dj1soj1],
.cn-mic-btn:disabled[b-f39dj1soj1],
.cn-debug-action:disabled[b-f39dj1soj1] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btnp[b-f39dj1soj1] {
    background: var(--rtm-text-1);
    color: #fff;
}

.btnp:hover:not(:disabled)[b-f39dj1soj1] {
    background: #0D9488;
    transform: translateY(-1px);
}

.cn-summary-grid[b-f39dj1soj1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 26px;
}

.cn-time-card[b-f39dj1soj1],
.cn-overview-card[b-f39dj1soj1],
.cn-side-card[b-f39dj1soj1] {
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.cn-time-card-head[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-top: 8px;
    margin-bottom: 18px;
}

.cn-overview-head[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    /* Centered visually against header text */
    margin-top: 8px;
    margin-bottom: 18px;
}

.cn-time-value-row[b-f39dj1soj1] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cn-time-value[b-f39dj1soj1] {
    font-size: clamp(32px, 5vw, 42px);
    font-weight: 600;
    line-height: 1;
}

.cn-time-unit[b-f39dj1soj1] {
    font-size: 16px;
    font-weight: 500;
    color: var(--rtm-text-2);
}

.cn-time-caption[b-f39dj1soj1] {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
}

.cn-code-pill[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    height: max-content;
    border-radius: 6px;
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-1);
    border: 1px solid var(--rtm-border);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cn-time-track-bg[b-f39dj1soj1] {
    position: relative;
    height: 10px;
    background: var(--rtm-border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.cn-time-fill[b-f39dj1soj1] {
    height: 100%;
    border-radius: inherit;
    transition: width 0.25s ease;
}

.cn-time-mark[b-f39dj1soj1] {
    position: absolute;
    top: 2px;
    width: 3px;
    height: calc(100% - 4px);
    background: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
}

.cn-time-labels[b-f39dj1soj1] {
    position: relative;
    height: 16px;
    margin-bottom: 18px;
    font-size: 11px;
    color: var(--rtm-text-3);
    font-weight: 600;
}

.cn-time-labels span[b-f39dj1soj1] {
    position: absolute;
}

.cn-time-milestones[b-f39dj1soj1],
.cn-check-grid[b-f39dj1soj1],
.cn-objective-grid[b-f39dj1soj1] {
    display: grid;
    gap: 12px;
}

.cn-time-milestones[b-f39dj1soj1] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cn-mini-stat[b-f39dj1soj1],
.cn-check-card[b-f39dj1soj1],
.cn-obj-card[b-f39dj1soj1] {
    padding: 12px 14px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--rtm-border);
    display: grid;
    gap: 5px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.cn-mini-stat-value[b-f39dj1soj1],
.cn-check-card strong[b-f39dj1soj1],
.cn-obj-card strong[b-f39dj1soj1],
.cn-side-title[b-f39dj1soj1],
.cn-overview-title[b-f39dj1soj1],
.cn-section-title[b-f39dj1soj1],
.cn-code-id[b-f39dj1soj1],
.cn-audit-action[b-f39dj1soj1] {
    font-weight: 600;
    color: var(--rtm-text-1);
}

.cn-mini-stat-value[b-f39dj1soj1],
.cn-check-card strong[b-f39dj1soj1],
.cn-obj-card strong[b-f39dj1soj1] {
    font-size: 15px;
}

.cn-overview-title[b-f39dj1soj1],
.cn-section-title[b-f39dj1soj1],
.cn-side-title[b-f39dj1soj1] {
    margin: 4px 0 0;
    font-size: 18px;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.cn-check-grid[b-f39dj1soj1] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cn-check-card.is-good strong[b-f39dj1soj1] {
    color: #10B981;
    /* Green status text */
}

.cn-check-card.is-warn strong[b-f39dj1soj1] {
    color: #F59E0B;
    /* Amber status text */
}

.cn-sb2.is-locked .cn-textarea[b-f39dj1soj1] {
    opacity: 0.7;
    background: var(--rtm-surface-alt);
    cursor: default;
}

.cn-section-heading[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 18px;
}

.cn-section-copy[b-f39dj1soj1] {
    max-width: 420px;
    font-size: 14px;
}

.cn-ss[b-f39dj1soj1] {
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}

.cn-sh[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--rtm-surface-alt);
    border-bottom: 1px solid var(--rtm-border);
}

.cn-sh-main[b-f39dj1soj1] {
    gap: 12px;
}

.cn-sl[b-f39dj1soj1] {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
}

.cn-sl-subjective[b-f39dj1soj1] {
    background: #0e7490;
    color: #ffffff;
    border: 1px solid #0891b2;
}

.cn-sl-objective[b-f39dj1soj1] {
    background: #4338ca;
    color: #ffffff;
    border: 1px solid #4f46e5;
}

.cn-sl-assessment[b-f39dj1soj1] {
    background: #b45309;
    color: #ffffff;
    border: 1px solid #d97706;
}

.cn-sl-plan[b-f39dj1soj1] {
    background: #047857;
    color: #ffffff;
    border: 1px solid #059669;
}


.cn-sh-title[b-f39dj1soj1] {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cn-sh-subtitle[b-f39dj1soj1] {
    font-size: 13px;
}

.cn-section-state[b-f39dj1soj1] {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cn-section-state.is-complete[b-f39dj1soj1] {
    background: var(--rtm-accent-soft);
    color: var(--rtm-accent);
}

.cn-section-state.is-pending[b-f39dj1soj1] {
    background: var(--rtm-warn-soft);
    color: #92400E;
}

.cn-sb2[b-f39dj1soj1] {
    padding: 18px;
}

.cn-sb2 textarea[b-f39dj1soj1] {
    width: 100%;
    min-height: 118px;
    border-radius: 12px;
    border: 1.5px solid var(--rtm-border);
    background: var(--rtm-surface);
    padding: 14px 14px 48px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--rtm-text-1);
    resize: vertical;
    outline: none;
    transition: all 0.2s ease;
}

.cn-sb2 textarea:focus[b-f39dj1soj1] {
    border-color: var(--rtm-accent-mid);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}

.cn-objective-grid[b-f39dj1soj1] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.cn-data-panel[b-f39dj1soj1] {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--rtm-surface-alt);
    border: 1px solid var(--rtm-border);
    margin-bottom: 12px;
}

.cn-fr[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--rtm-border);
}

.cn-fr:last-child[b-f39dj1soj1] {
    border-bottom: none;
}

.cn-checkbox-row[b-f39dj1soj1] {
    gap: 10px;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--rtm-surface);
    border: 1.5px solid var(--rtm-border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.cn-checkbox[b-f39dj1soj1] {
    width: 16px;
    height: 16px;
    accent-color: var(--rtm-accent);
}

.badge[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.bs[b-f39dj1soj1] {
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-2);
    border: 1px solid var(--rtm-border);
}

.bw[b-f39dj1soj1] {
    background: var(--rtm-warn-soft);
    color: #92400E;
}

.bi[b-f39dj1soj1] {
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-2);
    border: 1px solid var(--rtm-border);
}

.bn[b-f39dj1soj1] {
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-2);
}

.cn-plan-footer[b-f39dj1soj1] {
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rtm-border);
}

.cn-plan-footer-title[b-f39dj1soj1] {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cn-side-stack[b-f39dj1soj1] {
    flex-direction: column;
    flex-wrap: nowrap;
}

.cn-side-card-emphasis[b-f39dj1soj1] {
    background: var(--rtm-surface-alt);
    border-color: var(--rtm-border-mid);
}

.cn-side-hero[b-f39dj1soj1] {
    align-items: center;
    gap: 16px;
    margin: 14px 0 18px;
}

.cn-readiness-ring[b-f39dj1soj1] {
    --cn-readiness: 0%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, var(--rtm-surface-alt) 52%, transparent 54%),
        conic-gradient(var(--rtm-accent) var(--cn-readiness), var(--rtm-border) 0);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    color: var(--rtm-text-1);
}

.cn-side-price[b-f39dj1soj1] {
    display: grid;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--rtm-border);
}

.cn-side-price strong[b-f39dj1soj1] {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
}

.cn-cc[b-f39dj1soj1] {
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
    background: var(--rtm-surface-alt);
    border: 1px solid var(--rtm-border);
}

.cn-cc.ok[b-f39dj1soj1] {
    /* Diminished to remove noise, inherits .cn-cc */
}

.cn-cc.dim[b-f39dj1soj1] {
    opacity: 0.68;
}

.cn-code-row[b-f39dj1soj1],
.cn-audit-row[b-f39dj1soj1] {
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.cn-code-copy[b-f39dj1soj1],
.cn-audit-detail[b-f39dj1soj1],
.cn-audit-time[b-f39dj1soj1],
.cn-audit-footer[b-f39dj1soj1] {
    font-size: 12px;
    color: var(--text-secondary);
}

.cn-requirement-list[b-f39dj1soj1],
.cn-audit-list[b-f39dj1soj1] {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.cn-requirement-row[b-f39dj1soj1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    font-size: 13px;
    font-weight: 600;
}

.cn-requirement-row.is-met[b-f39dj1soj1] {
    color: var(--rtm-text-1);
}

.cn-requirement-row.is-missing[b-f39dj1soj1] {
    color: var(--rtm-text-3);
}

.cn-audit-row[b-f39dj1soj1] {
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rtm-border);
}

.cn-audit-action[b-f39dj1soj1] {
    font-size: 13px;
    margin-bottom: 4px;
}

/* Billing Status Specific CSS */
.cn-prov-sel[b-f39dj1soj1] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--rtm-border-mid);
    background: var(--rtm-surface);
    color: var(--rtm-text-1);
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
    margin-bottom: 16px;
    outline: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.cn-prov-sel optgroup[b-f39dj1soj1] {
    font-weight: 700;
    color: var(--rtm-text-3);
    background: var(--rtm-surface-alt);
}

.cn-prov-sel option[b-f39dj1soj1] {
    font-weight: 500;
    color: var(--rtm-text-1);
    background: var(--rtm-surface);
}

.cn-prov-card[b-f39dj1soj1] {
    background: var(--rtm-surface);
    border: 1px solid var(--rtm-border);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.cn-prov-hero[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--rtm-border);
}

.cn-prov-av[b-f39dj1soj1] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #064E3B;
    color: #34D399;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.cn-prov-titles h4[b-f39dj1soj1] {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--rtm-text-1);
    line-height: 1.3;
}

.cn-prov-titles span[b-f39dj1soj1] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.cn-prov-details[b-f39dj1soj1] {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.cn-prov-pair[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    gap: 16px;
}

.cn-prov-pair>span:first-child[b-f39dj1soj1] {
    color: var(--text-secondary);
    font-weight: 500;
}

.cn-prov-pair strong[b-f39dj1soj1] {
    font-weight: 600;
    color: var(--rtm-text-1);
    text-align: right;
}

.cn-est-reimb[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #F0FDF4;
    border-top: 1px solid #BBF7D0;
}

.cn-est-reimb span[b-f39dj1soj1] {
    font-size: 14px;
    font-weight: 500;
    color: #166534;
}

.cn-est-reimb strong[b-f39dj1soj1] {
    font-size: 26px;
    font-weight: 700;
    color: #065F46;
    letter-spacing: -0.02em;
}

.dot[b-f39dj1soj1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 6px;
}

.dg[b-f39dj1soj1] {
    background: var(--rtm-accent);
}

.da[b-f39dj1soj1] {
    background: #f59e0b;
}

.is-read-only textarea[b-f39dj1soj1] {
    pointer-events: none;
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-2);
}

.is-read-only .btng[b-f39dj1soj1] {
    display: none;
}

.cn-textarea-shell[b-f39dj1soj1] {
    position: relative;
}

.cn-textarea.has-mic[b-f39dj1soj1] {
    padding-bottom: 48px;
}

.cn-mic-btn[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--rtm-border);
    background: var(--rtm-surface);
    color: var(--rtm-text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-mic-btn:hover:not(:disabled)[b-f39dj1soj1] {
    border-color: var(--rtm-accent-mid);
    color: var(--rtm-accent);
    background: var(--rtm-accent-soft);
}

.cn-mic-btn.is-recording[b-f39dj1soj1] {
    background: #fff1f2;
    border-color: #fda4af;
    color: #be123c;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.08);
}

.cn-mic-btn-overlay[b-f39dj1soj1] {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.cn-mic-status[b-f39dj1soj1] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rtm-text-3);
}

@media (max-width: 1180px) {
    .cn-tb[b-f39dj1soj1] {
        grid-template-columns: auto 1fr auto;
    }

    .cn-tb-user[b-f39dj1soj1] {
        display: none;
    }

    .cn-lay[b-f39dj1soj1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cn-rp[b-f39dj1soj1] {
        border-left: none;
        border-top: 1px solid var(--rtm-border);
    }
}

@media (max-width: 920px) {

    .cn-summary-grid[b-f39dj1soj1],
    .cn-time-milestones[b-f39dj1soj1],
    .cn-check-grid[b-f39dj1soj1],
    .cn-objective-grid[b-f39dj1soj1] {
        grid-template-columns: 1fr;
    }

    .cn-hero[b-f39dj1soj1],
    .cn-section-heading[b-f39dj1soj1],
    .cn-plan-footer[b-f39dj1soj1],
    .cn-checkbox-row[b-f39dj1soj1],
    .cn-sh[b-f39dj1soj1] {
        flex-direction: column;
        align-items: stretch;
    }

    .cn-hero-actions[b-f39dj1soj1] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .cn-time-controls[b-f39dj1soj1] {
        justify-content: stretch;
    }

    .cn-time-controls .btng[b-f39dj1soj1] {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .cn-tb[b-f39dj1soj1] {
        grid-template-columns: 1fr auto;
        align-items: start;
    }

    .cn-tb-meta[b-f39dj1soj1] {
        display: none;
    }

    .cn-ma[b-f39dj1soj1],
    .cn-rp[b-f39dj1soj1] {
        padding: 18px 16px 24px;
    }

    .cn-hero[b-f39dj1soj1],
    .cn-time-card[b-f39dj1soj1],
    .cn-overview-card[b-f39dj1soj1],
    .cn-ss[b-f39dj1soj1],
    .cn-side-card[b-f39dj1soj1] {
        border-radius: 20px;
    }
}

/* Premium RTM Time Card CSS (Light Theme) */
.rtm-premium-timecard[b-f39dj1soj1] {
    background: #ffffff;
    border: 1px solid var(--rtm-border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02);
    color: var(--rtm-text-1);
    overflow: hidden;
    position: relative;
}

.rtm-premium-timecard[b-f39dj1soj1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #14b8a6, #3b82f6);
}

.rtm-pt-header[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.rtm-pt-title-group[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rtm-pt-title-group>div[b-f39dj1soj1] {
    display: grid;
    gap: 2px;
}

.rtm-pt-icon[b-f39dj1soj1] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.08);
    color: #0f766e;
    display: grid;
    place-items: center;
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.rtm-pt-title[b-f39dj1soj1] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 2px;
    color: var(--rtm-text-1);
}

.rtm-pt-subtitle[b-f39dj1soj1] {
    font-size: 12px;
    font-weight: 500;
    color: var(--rtm-text-2);
}

.rtm-pt-stats[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rtm-pt-time[b-f39dj1soj1] {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.rtm-pt-value[b-f39dj1soj1] {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.rtm-pt-unit[b-f39dj1soj1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--rtm-text-2);
}

.rtm-pt-cpt[b-f39dj1soj1] {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--rtm-surface-alt);
    border: 1px solid var(--rtm-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--rtm-text-2);
    letter-spacing: 0.02em;
}

.rtm-pt-cpt.cpt-active[b-f39dj1soj1] {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.2);
    color: #0f766e;
}

.rtm-pt-visualizer[b-f39dj1soj1] {
    margin-bottom: 32px;
}

.rtm-pt-track[b-f39dj1soj1] {
    display: flex;
    gap: 6px;
    height: 10px;
    margin-bottom: 12px;
}

.rtm-pt-seg[b-f39dj1soj1] {
    flex: 1;
    background: var(--rtm-border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.rtm-pt-fill[b-f39dj1soj1] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rtm-fill-width, 0%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fill-slate[b-f39dj1soj1] {
    background: #94a3b8;
}

.fill-blue[b-f39dj1soj1] {
    background: #3b82f6;
}

.fill-teal[b-f39dj1soj1] {
    background: #14b8a6;
}

.fill-purple[b-f39dj1soj1] {
    background: #8b5cf6;
}

.rtm-pt-labels[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--rtm-text-2);
    padding: 0 4px;
}

.rtm-pt-labels span[b-f39dj1soj1] {
    position: relative;
}

.label-mid[b-f39dj1soj1] {
    text-align: center;
}

.label-end[b-f39dj1soj1] {
    text-align: right;
}

.label-code[b-f39dj1soj1] {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--rtm-surface-alt);
    color: var(--rtm-text-2);
    font-size: 10px;
    border: 1px solid var(--rtm-border);
}

.rtm-pt-actions[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--rtm-border);
}

.rtm-pt-hint[b-f39dj1soj1] {
    font-size: 13px;
    color: var(--rtm-text-2);
    font-weight: 500;
    max-width: 60%;
}

.rtm-pt-btn-group[b-f39dj1soj1] {
    display: flex;
    gap: 10px;
}

.rtm-pt-btn[b-f39dj1soj1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid var(--rtm-border);
    border-radius: 8px;
    color: var(--rtm-text-1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.rtm-pt-btn:hover:not(:disabled)[b-f39dj1soj1] {
    background: var(--rtm-surface-alt);
    border-color: #cbd5e1;
}

.rtm-pt-btn.primary[b-f39dj1soj1] {
    background: #14b8a6;
    border-color: #14b8a6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(20, 184, 166, 0.15);
}

.rtm-pt-btn.primary:hover:not(:disabled)[b-f39dj1soj1] {
    background: #0d9488;
    border-color: #0d9488;
}

.rtm-pt-btn:disabled[b-f39dj1soj1] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* Clinical Note Review Popup */
.cn-review-backdrop[b-f39dj1soj1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: cnFadeIn 0.3s ease;
}

.cn-review-dialog[b-f39dj1soj1] {
    background: #ffffff;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cnSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-review-header[b-f39dj1soj1] {
    padding: 32px 40px;
    border-bottom: 1px solid var(--rtm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.cn-review-header>div[b-f39dj1soj1] {
    min-width: 0;
}

.cn-review-title[b-f39dj1soj1] {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.cn-review-subtitle[b-f39dj1soj1] {
    font-size: 14px;
    color: #64748b;
    margin: 4px 0 0;
    font-weight: 500;
}

.cn-review-close[b-f39dj1soj1] {
    background: #ffffff;
    border: 1px solid var(--rtm-border);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.cn-review-close:hover[b-f39dj1soj1] {
    background: #f1f5f9;
    color: #0f172a;
    transform: rotate(90deg);
}

.cn-review-body[b-f39dj1soj1] {
    padding: 24px 40px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    scroll-behavior: smooth;
}

.cn-review-sec-title[b-f39dj1soj1] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin: 0 0 16px;
}

.cn-review-soap-card[b-f39dj1soj1] {
    background: #f8fafc;
    border: 1px solid var(--rtm-border);
    border-radius: 16px;
    padding: 8px;
    display: grid;
    gap: 8px;
}

.cn-review-soap-item[b-f39dj1soj1] {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid transparent;
}

.cn-review-soap-label[b-f39dj1soj1] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.cn-review-soap-label.subjective[b-f39dj1soj1] {
    background: #eff6ff;
    color: #3b82f6;
}

.cn-review-soap-label.objective[b-f39dj1soj1] {
    background: #f0fdf4;
    color: #10b981;
}

.cn-review-soap-label.assessment[b-f39dj1soj1] {
    background: #fffbeb;
    color: #f59e0b;
}

.cn-review-soap-label.plan[b-f39dj1soj1] {
    background: #fdf2f8;
    color: #db2777;
}

.cn-review-soap-content strong[b-f39dj1soj1] {
    display: block;
    font-size: 14px;
    color: #0f172a;
    margin-bottom: 4px;
}

.cn-review-soap-content p[b-f39dj1soj1] {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

.cn-review-stats-mini[b-f39dj1soj1] {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.cn-review-stats-mini span[b-f39dj1soj1] {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cn-review-grid-row[b-f39dj1soj1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.cn-review-checklist[b-f39dj1soj1] {
    display: grid;
    gap: 12px;
}

.cn-review-check-item[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
}

.cn-review-check-icon[b-f39dj1soj1] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cn-review-check-item.is-met[b-f39dj1soj1] {
    color: #0f172a;
}

.cn-review-check-item.is-met .cn-review-check-icon[b-f39dj1soj1] {
    background: #d1fae5;
    color: #059669;
}

.cn-review-check-item.is-missing[b-f39dj1soj1] {
    color: #94a3b8;
}

.cn-review-check-item.is-missing .cn-review-check-icon[b-f39dj1soj1] {
    background: #f1f5f9;
    color: #94a3b8;
}

.cn-review-billing-card[b-f39dj1soj1] {
    background: #f8fafc;
    border: 1px solid var(--rtm-border);
    border-radius: 16px;
    padding: 20px;
    display: grid;
    gap: 12px;
}

.cn-review-bill-row[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #64748b;
}

.cn-review-bill-row strong[b-f39dj1soj1] {
    color: #0f172a;
    font-weight: 700;
}

.cn-review-bill-row.total[b-f39dj1soj1] {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #cbd5e1;
    font-size: 15px;
}

.cn-review-bill-row.total strong[b-f39dj1soj1] {
    color: #059669;
    font-size: 18px;
}

.cn-review-footer[b-f39dj1soj1] {
    padding: 32px 40px;
    background: #fafafa;
    border-top: 1px solid var(--rtm-border);
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
}

.cn-review-btn-secondary[b-f39dj1soj1] {
    background: #ffffff;
    border: 1px solid var(--rtm-border);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.cn-review-btn-secondary:hover[b-f39dj1soj1] {
    background: #f8fafc;
    color: #0f172a;
}

.cn-review-btn-primary[b-f39dj1soj1] {
    background: #0f172a;
    color: #ffffff;
    border: none;
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.cn-review-btn-primary:hover:not(:disabled)[b-f39dj1soj1] {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

.cn-review-btn-primary.is-disabled[b-f39dj1soj1] {
    background: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
}

.cn-review-error[b-f39dj1soj1] {
    padding: 0 40px 24px;
    text-align: right;
    font-size: 12px;
}

.cpt-guide-overlay[b-f39dj1soj1] {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: fadeInOverlay-b-f39dj1soj1 0.2s ease-out;
}

.cpt-guide-modal[b-f39dj1soj1] {
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cpt-guide-header[b-f39dj1soj1] {
    padding: 24px 32px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cpt-guide-body[b-f39dj1soj1] {
    padding: 0;
    overflow-y: auto;
}

.cpt-table-container[b-f39dj1soj1] {
    padding: 20px;
}

.cpt-table[b-f39dj1soj1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cpt-table th[b-f39dj1soj1] {
    text-align: left;
    background: #F8FAFC;
    padding: 12px 16px;
    font-weight: 700;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #E2E8F0;
}

.cpt-table td[b-f39dj1soj1] {
    padding: 16px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: top;
}

.cpt-table tr:hover td[b-f39dj1soj1] {
    background: #F8FAFC;
}

.cpt-code-pill[b-f39dj1soj1] {
    display: inline-block;
    background: #EEF2FF;
    color: #4F46E5;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-family: monospace;
}

.cpt-cat-header[b-f39dj1soj1] {
    background: #F1F5F9 !important;
    font-weight: 800;
    color: #1E293B;
}

.cn-text-link[b-f39dj1soj1] {
    background: none;
    border: none;
    padding: 0;
    color: #6366F1;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 12px;
    display: inline-block;
}

.cn-debug-backdrop[b-f39dj1soj1] {
    position: fixed;
    inset: 0;
    z-index: 21000;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeInOverlay-b-f39dj1soj1 0.2s ease-out;
}

.cn-debug-modal[b-f39dj1soj1] {
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpMenu-b-f39dj1soj1 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cn-debug-header[b-f39dj1soj1] {
    padding: 24px 28px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.cn-debug-modal-title[b-f39dj1soj1] {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.cn-debug-modal-subtitle[b-f39dj1soj1] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.cn-debug-close[b-f39dj1soj1] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.cn-debug-close:hover[b-f39dj1soj1] {
    color: #0f172a;
    border-color: #cbd5e1;
}

.cn-debug-body[b-f39dj1soj1] {
    padding: 24px 28px 28px;
    overflow-y: auto;
}

.cn-debug-grid[b-f39dj1soj1] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
}

.cn-debug-card[b-f39dj1soj1] {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
    padding: 18px;
}

.cn-debug-summary[b-f39dj1soj1] {
    background: #ffffff;
}

.cn-debug-input[b-f39dj1soj1] {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    color: #0f172a;
    background: #ffffff;
    outline: none;
}

.cn-debug-input:focus[b-f39dj1soj1] {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.cn-debug-action-row[b-f39dj1soj1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.cn-debug-action[b-f39dj1soj1] {
    border: 1px solid #f59e0b;
    background: #fff7ed;
    color: #9a3412;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.cn-debug-action.secondary[b-f39dj1soj1] {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #475569;
}

.cn-debug-summary-row[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.cn-debug-summary-row:last-child[b-f39dj1soj1] {
    border-bottom: 0;
    padding-bottom: 0;
}

.cn-debug-summary-row span[b-f39dj1soj1] {
    color: #64748b;
    font-weight: 600;
}

.cn-debug-summary-row strong[b-f39dj1soj1] {
    color: #0f172a;
    font-weight: 800;
    text-align: right;
}

.cn-debug-revenue-card[b-f39dj1soj1] {
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
}

.cn-debug-section-head[b-f39dj1soj1] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.cn-debug-helper[b-f39dj1soj1] {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.cn-debug-live-value[b-f39dj1soj1] {
    font-size: 13px;
    color: #475569;
    white-space: nowrap;
}

.cn-debug-live-value strong[b-f39dj1soj1] {
    color: #0f172a;
    font-size: 16px;
}

.cn-debug-revenue-group[b-f39dj1soj1] {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.cn-debug-revenue-group:first-of-type[b-f39dj1soj1] {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.cn-debug-revenue-group-title[b-f39dj1soj1] {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.cn-debug-revenue-grid[b-f39dj1soj1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cn-debug-revenue-item[b-f39dj1soj1] {
    min-width: 0;
}

.cn-debug-footnote[b-f39dj1soj1] {
    margin-top: 16px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}



.cn-tbb-debug[b-f39dj1soj1] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.inline-icon[b-f39dj1soj1],
.inline-icon-lg[b-f39dj1soj1] {
    vertical-align: middle;
}

.cn-hero-stat-revenue[b-f39dj1soj1],
.cn-review-section[b-f39dj1soj1] {
    min-width: 0;
}

.cn-debug-label[b-f39dj1soj1] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.image-preview-close[b-f39dj1soj1] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

.spinner[b-f39dj1soj1] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    animation: cn-spin-b-f39dj1soj1 0.8s linear infinite;
}

.cn-inline-badge-list[b-f39dj1soj1],
.cn-section-actions[b-f39dj1soj1],
.cn-amendment-stack[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cn-section-actions.compact .rtm-pt-btn[b-f39dj1soj1],
.rtm-pt-btn.compact[b-f39dj1soj1] {
    padding: 7px 12px;
    font-size: 12px;
}

.cn-cc.is-selected[b-f39dj1soj1] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

.cn-cc-recommended[b-f39dj1soj1] {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cn-code-meta[b-f39dj1soj1] {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.cn-code-id.large[b-f39dj1soj1] {
    font-size: 18px;
}

.cn-code-meta-value[b-f39dj1soj1] {
    font-size: 16px;
}

.cn-checkbox-input[b-f39dj1soj1] {
    width: 18px;
    height: 18px;
    accent-color: #14b8a6;
    flex-shrink: 0;
}

.cn-checkbox-label[b-f39dj1soj1] {
    flex: 1;
    color: var(--rtm-text-1);
}

.cn-checkbox-status[b-f39dj1soj1] {
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.cn-checkbox-status.success[b-f39dj1soj1],
.cn-data-value.success[b-f39dj1soj1] {
    color: #059669;
}

.cn-checkbox-status.muted[b-f39dj1soj1],
.cn-data-label[b-f39dj1soj1] {
    color: #64748b;
}

.cn-data-value[b-f39dj1soj1] {
    font-weight: 700;
    color: #0f172a;
}

.cn-data-value.warning[b-f39dj1soj1] {
    color: #d97706;
}

.cn-amendment-input[b-f39dj1soj1] {
    min-width: 260px;
    min-height: auto;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
}

.secondary-ready[b-f39dj1soj1] {
    background: #334155;
    color: #ffffff;
}

.no-bottom-gap[b-f39dj1soj1] {
    margin-bottom: 0;
}

.cn-audit-item[b-f39dj1soj1] {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--rtm-border);
    background: #ffffff;
}

.cn-audit-item.final[b-f39dj1soj1] {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.cn-audit-head[b-f39dj1soj1],
.cn-audit-author[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cn-audit-author[b-f39dj1soj1] {
    justify-content: flex-start;
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.cn-audit-reason[b-f39dj1soj1] {
    margin-top: 8px;
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
}

.cn-audit-mono[b-f39dj1soj1] {
    font-variant-numeric: tabular-nums;
}

.cn-review-scroll-hint[b-f39dj1soj1],
.cn-review-footnote[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.cn-review-scroll-hint[b-f39dj1soj1] {
    background: #FFFBEB;
    color: #92400E;
    border-top: 1px solid #FDE68A;
    border-bottom: 1px solid #FDE68A;
    padding: 16px 40px;
    margin: -24px -40px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    /* font-weight: 700; */
    /* font-size: 14px; */
}

.cn-review-scroll-hint svg[b-f39dj1soj1] {
    color: #D97706;
    flex-shrink: 0;
    animation: bobDown-b-f39dj1soj1 1.5s ease-in-out infinite;
}

@keyframes bobDown-b-f39dj1soj1 {

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

    50% {
        transform: translateY(3px);
    }
}

.cn-review-footnote[b-f39dj1soj1] {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid rgba(245, 158, 11, 0.16);
}

.err-msg[b-f39dj1soj1] {
    display: flex;
    align-items: center;
    color: #e53935;
    font-weight: 500;
}

.err-icon[b-f39dj1soj1] {
    margin-right: 6px;
    flex-shrink: 0;
    stroke: #e53935;
}

@keyframes cn-spin-b-f39dj1soj1 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInOverlay-b-f39dj1soj1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpMenu-b-f39dj1soj1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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