@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Components/Documentation/WikiNavigation.razor.rz.scp.css */
/* Wiki Navigation Styles */
.wiki-navigation[b-8nssuiasos] {
    padding: 1rem;
}

.nav-header[b-8nssuiasos] {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--adf-border-color);
    margin-bottom: 1rem;
}

.nav-header h5[b-8nssuiasos] {
    color: var(--adf-text-primary);
    font-weight: 600;
    margin: 0;
}

.wiki-nav[b-8nssuiasos] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item[b-8nssuiasos] {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    color: var(--adf-text-secondary);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
}

.nav-item:hover[b-8nssuiasos] {
    background-color: var(--adf-hover-bg);
    color: var(--adf-text-primary);
    text-decoration: none;
}

.nav-item.active[b-8nssuiasos] {
    background-color: var(--adf-accent-blue);
    color: white;
    font-weight: 500;
}

.nav-item.active:hover[b-8nssuiasos] {
    background-color: var(--adf-accent-blue);
    color: white;
}

.nav-section[b-8nssuiasos] {
    margin-top: 0.5rem;
}

.nav-section-header[b-8nssuiasos] {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    color: var(--adf-text-primary);
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
}

.nav-section-header:hover[b-8nssuiasos] {
    background-color: var(--adf-hover-bg);
}

.nav-section-header.expanded[b-8nssuiasos] {
    color: var(--adf-accent-blue);
}

.nav-subsection[b-8nssuiasos] {
    margin-left: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--adf-border-light);
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-group-label[b-8nssuiasos] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--adf-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.75rem 0.25rem;
    margin-top: 0.5rem;
}

/* Dark mode adjustments */
:global(body.dark-mode) .nav-header[b-8nssuiasos] {
    border-bottom-color: var(--adf-border-light);
}

:global(body.dark-mode) .nav-subsection[b-8nssuiasos] {
    border-left-color: var(--adf-border-color);
}

/* Icon styling */
.nav-item i[b-8nssuiasos],
.nav-section-header i[b-8nssuiasos] {
    width: 1.25rem;
    text-align: center;
}

/* Smooth transitions */
.nav-subsection[b-8nssuiasos] {
    animation: slideDown-b-8nssuiasos 0.2s ease-out;
}

@keyframes slideDown-b-8nssuiasos {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Features/Monitor/CronStatusDashboard.razor.rz.scp.css */
/* Cron Dashboard Styles */

.cron-dashboard[b-7ymyhs91tq] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Dashboard Header */
.dashboard-header[b-7ymyhs91tq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--adf-border-light);
}

.dashboard-header h2[b-7ymyhs91tq] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.dashboard-header h2 i[b-7ymyhs91tq] {
    color: var(--adf-text-accent);
}

/* Loading Container */
.loading-container[b-7ymyhs91tq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--adf-text-secondary);
}

/* Statistics Grid */
.stats-grid[b-7ymyhs91tq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-7ymyhs91tq] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover[b-7ymyhs91tq] {
    border-color: var(--adf-hover-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-7ymyhs91tq] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.stat-icon.total[b-7ymyhs91tq] {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

.stat-icon.active[b-7ymyhs91tq] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.stat-icon.inactive[b-7ymyhs91tq] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.stat-icon.scheduler[b-7ymyhs91tq] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.stat-icon.threadpool[b-7ymyhs91tq] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.stat-icon.executing[b-7ymyhs91tq] {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

.stat-content[b-7ymyhs91tq] {
    flex: 1;
}

.stat-content small[b-7ymyhs91tq] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

.stat-value[b-7ymyhs91tq] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-7ymyhs91tq] {
    font-size: 0.875rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

/* Info Section */
.info-section[b-7ymyhs91tq] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.info-section h3[b-7ymyhs91tq] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.info-section h3 i[b-7ymyhs91tq] {
    color: var(--adf-text-accent);
}

.info-grid[b-7ymyhs91tq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.info-item[b-7ymyhs91tq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-7ymyhs91tq] {
    font-size: 0.875rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

.info-value[b-7ymyhs91tq] {
    font-size: 1rem;
    color: var(--adf-text-primary);
    font-weight: 400;
}

/* Schedules Section */
.schedules-section[b-7ymyhs91tq] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.schedules-section h3[b-7ymyhs91tq] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.schedules-section h3 i[b-7ymyhs91tq] {
    color: var(--adf-text-accent);
}

/* Table Styles */
.table-responsive[b-7ymyhs91tq] {
    overflow-x: auto;
}

.schedules-table[b-7ymyhs91tq] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.schedules-table thead[b-7ymyhs91tq] {
    background: var(--adf-primary-bg);
    border-bottom: 2px solid var(--adf-border-light);
}

.schedules-table th[b-7ymyhs91tq] {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedules-table tbody tr[b-7ymyhs91tq] {
    border-bottom: 1px solid var(--adf-border-light);
    transition: background-color 0.2s ease;
}

.schedules-table tbody tr:hover[b-7ymyhs91tq] {
    background: var(--adf-hover-light);
}

.schedules-table tbody tr.inactive-row[b-7ymyhs91tq] {
    opacity: 0.6;
}

.schedules-table td[b-7ymyhs91tq] {
    padding: 1rem;
    font-size: 0.9375rem;
    color: var(--adf-text-primary);
}

.task-name strong[b-7ymyhs91tq] {
    color: var(--adf-text-primary);
    font-weight: 600;
}

.task-name-text[b-7ymyhs91tq] {
    display: block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-name small[b-7ymyhs91tq] {
    margin-top: 0.25rem;
}

.cron-expression[b-7ymyhs91tq] {
    background: var(--adf-primary-bg);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--adf-text-accent);
}

.cron-display[b-7ymyhs91tq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cron-description[b-7ymyhs91tq] {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--adf-text-primary);
}

.cron-description i[b-7ymyhs91tq] {
    color: var(--adf-text-accent);
    font-size: 0.875rem;
}

.cron-expression-small[b-7ymyhs91tq] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background: var(--adf-tertiary-bg);
    border-radius: 3px;
    display: inline-block;
    max-width: fit-content;
}

.next-run[b-7ymyhs91tq] {
    display: flex;
    flex-direction: column;
}

.badge[b-7ymyhs91tq] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 4px;
}

.badge i[b-7ymyhs91tq] {
    font-size: 0.875rem;
}

/* Empty State */
.empty-state[b-7ymyhs91tq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--adf-text-secondary);
}

.empty-state i[b-7ymyhs91tq] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state p[b-7ymyhs91tq] {
    margin: 0;
    font-size: 1.125rem;
}

/* Last Updated */
.last-updated[b-7ymyhs91tq] {
    text-align: right;
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    font-style: italic;
    margin-top: 1rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .dashboard-header[b-7ymyhs91tq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stats-grid[b-7ymyhs91tq] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .info-grid[b-7ymyhs91tq] {
        grid-template-columns: 1fr;
    }

    .schedules-table[b-7ymyhs91tq] {
        font-size: 0.875rem;
    }

    .schedules-table th[b-7ymyhs91tq],
    .schedules-table td[b-7ymyhs91tq] {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .cron-dashboard[b-7ymyhs91tq] {
        padding: 0;
    }

    .stats-grid[b-7ymyhs91tq] {
        grid-template-columns: 1fr;
    }

    .schedules-table[b-7ymyhs91tq] {
        font-size: 0.8125rem;
    }

    /* Stack table for mobile */
    .schedules-table thead[b-7ymyhs91tq] {
        display: none;
    }

    .schedules-table tbody tr[b-7ymyhs91tq] {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--adf-border-light);
        border-radius: 8px;
        padding: 1rem;
    }

    .schedules-table td[b-7ymyhs91tq] {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 0;
        border: none;
    }

    .schedules-table td[b-7ymyhs91tq]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--adf-text-secondary);
        font-size: 0.75rem;
        text-transform: uppercase;
        margin-bottom: 0.25rem;
    }
}
/* /Components/Features/Monitor/DispatcherStatusDashboard.razor.rz.scp.css */
/* Dispatcher Dashboard Styles */

.dispatcher-dashboard[b-5sp1ef87mt] {
    max-width: 1400px;
    margin: 0 auto;
}

/* Dashboard Header */
.dashboard-header[b-5sp1ef87mt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--adf-border-light);
}

.dashboard-header h2[b-5sp1ef87mt] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.dashboard-header h2 i[b-5sp1ef87mt] {
    color: var(--adf-text-accent);
}

/* Loading Container */
.loading-container[b-5sp1ef87mt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--adf-text-secondary);
}

/* Statistics Grid */
.stats-grid[b-5sp1ef87mt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-5sp1ef87mt] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover[b-5sp1ef87mt] {
    border-color: var(--adf-hover-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-5sp1ef87mt] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.stat-icon.running[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

.stat-icon.parallel[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.stat-icon.processed[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.stat-icon.success[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.stat-icon.failed[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.stat-content[b-5sp1ef87mt] {
    flex: 1;
}

.stat-content small[b-5sp1ef87mt] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

.stat-value[b-5sp1ef87mt] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label[b-5sp1ef87mt] {
    font-size: 0.875rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

/* Info Section */
.info-section[b-5sp1ef87mt] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.info-section h3[b-5sp1ef87mt] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.info-section h3 i[b-5sp1ef87mt] {
    color: var(--adf-text-accent);
}

.info-grid[b-5sp1ef87mt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.info-item[b-5sp1ef87mt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-5sp1ef87mt] {
    font-size: 0.875rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

.info-value[b-5sp1ef87mt] {
    font-size: 1rem;
    color: var(--adf-text-primary);
    font-weight: 400;
}

/* Running Tasks Section */
.running-tasks-section[b-5sp1ef87mt] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.running-tasks-section h3[b-5sp1ef87mt] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.running-tasks-section h3 i[b-5sp1ef87mt] {
    color: var(--adf-text-accent);
}

.running-tasks-container[b-5sp1ef87mt] {
    margin-top: 1rem;
}

.running-task-ids[b-5sp1ef87mt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Queue Section */
.queue-section[b-5sp1ef87mt] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.queue-section h3[b-5sp1ef87mt] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.queue-section h3 i[b-5sp1ef87mt] {
    color: var(--adf-text-accent);
}

.queue-summary[b-5sp1ef87mt] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.queue-stat[b-5sp1ef87mt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.queue-stat-value[b-5sp1ef87mt] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--adf-text-accent);
}

.queue-stat-label[b-5sp1ef87mt] {
    font-size: 1rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

/* Queue Statistics Grid */
.queue-statistics-grid[b-5sp1ef87mt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.queue-stat-card[b-5sp1ef87mt] {
    background: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: all 0.2s ease;
}

.queue-stat-card:hover[b-5sp1ef87mt] {
    border-color: var(--adf-hover-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.queue-stat-icon[b-5sp1ef87mt] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.3);
}

.queue-stat-icon.warning[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

.queue-stat-icon.success[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
}

.queue-stat-icon.locked[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
}

.queue-stat-icon.blocked[b-5sp1ef87mt] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}

.queue-stat-content[b-5sp1ef87mt] {
    flex: 1;
}

.queue-stat-content .queue-stat-value[b-5sp1ef87mt] {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1.2;
    margin-bottom: 0.125rem;
}

.queue-stat-content .queue-stat-label[b-5sp1ef87mt] {
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

/* Queue Table */
.table-responsive[b-5sp1ef87mt] {
    overflow-x: auto;
}

.queue-table[b-5sp1ef87mt] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.queue-table thead[b-5sp1ef87mt] {
    background: var(--adf-primary-bg);
    border-bottom: 2px solid var(--adf-border-light);
}

.queue-table th[b-5sp1ef87mt] {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.queue-table tbody tr[b-5sp1ef87mt] {
    border-bottom: 1px solid var(--adf-border-light);
    transition: background-color 0.2s ease;
}

.queue-table tbody tr:hover[b-5sp1ef87mt] {
    background: var(--adf-hover-light);
}

.queue-table td[b-5sp1ef87mt] {
    padding: 1rem;
    font-size: 0.9375rem;
    color: var(--adf-text-primary);
}

.task-name strong[b-5sp1ef87mt] {
    color: var(--adf-text-primary);
    font-weight: 600;
}

.task-name small[b-5sp1ef87mt] {
    margin-top: 0.25rem;
}

/* Contention Section */
.contention-section[b-5sp1ef87mt] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.contention-section h3[b-5sp1ef87mt] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.contention-section h3 i[b-5sp1ef87mt] {
    color: var(--adf-text-accent);
}

.contention-grid[b-5sp1ef87mt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.contention-card[b-5sp1ef87mt] {
    background: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.contention-card:hover[b-5sp1ef87mt] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contention-card.at-capacity[b-5sp1ef87mt] {
    border-color: #dc3545;
    background: linear-gradient(to bottom, var(--adf-primary-bg) 0%, rgba(220, 53, 69, 0.05) 100%);
}

.contention-header[b-5sp1ef87mt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.contention-header h4[b-5sp1ef87mt] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    flex: 1;
}

.contention-stats[b-5sp1ef87mt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.contention-stat[b-5sp1ef87mt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contention-stat-label[b-5sp1ef87mt] {
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contention-stat-value[b-5sp1ef87mt] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--adf-text-primary);
}

.contention-utilization[b-5sp1ef87mt] {
    margin-bottom: 1rem;
}

.utilization-bar[b-5sp1ef87mt] {
    height: 8px;
    background: var(--adf-tertiary-bg);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

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

.utilization-fill.utilization-low[b-5sp1ef87mt] {
    background: linear-gradient(90deg, #28a745, #20c997);
}

.utilization-fill.utilization-moderate[b-5sp1ef87mt] {
    background: linear-gradient(90deg, #17a2b8, #138496);
}

.utilization-fill.utilization-warning[b-5sp1ef87mt] {
    background: linear-gradient(90deg, #ffc107, #ff9800);
}

.utilization-fill.utilization-critical[b-5sp1ef87mt] {
    background: linear-gradient(90deg, #dc3545, #c82333);
}

.utilization-text[b-5sp1ef87mt] {
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
}

.contention-footer[b-5sp1ef87mt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adf-border-light);
}

.contention-footer small[b-5sp1ef87mt] {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
}

/* Badge Styles */
.badge[b-5sp1ef87mt] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 4px;
}

.badge i[b-5sp1ef87mt] {
    font-size: 0.875rem;
}

/* Empty States */
.empty-state-small[b-5sp1ef87mt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--adf-text-secondary);
}

.empty-state-small i[b-5sp1ef87mt] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.3;
}

.empty-state-small p[b-5sp1ef87mt] {
    margin: 0;
    font-size: 1rem;
}

/* Last Updated */
.last-updated[b-5sp1ef87mt] {
    text-align: right;
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    font-style: italic;
    margin-top: 1rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .dashboard-header[b-5sp1ef87mt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stats-grid[b-5sp1ef87mt] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .info-grid[b-5sp1ef87mt] {
        grid-template-columns: 1fr;
    }

    .contention-grid[b-5sp1ef87mt] {
        grid-template-columns: 1fr;
    }

    .queue-table[b-5sp1ef87mt] {
        font-size: 0.875rem;
    }

    .queue-table th[b-5sp1ef87mt],
    .queue-table td[b-5sp1ef87mt] {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .dispatcher-dashboard[b-5sp1ef87mt] {
        padding: 0;
    }

    .stats-grid[b-5sp1ef87mt] {
        grid-template-columns: 1fr;
    }

    .queue-table[b-5sp1ef87mt] {
        font-size: 0.8125rem;
    }

    .stat-value[b-5sp1ef87mt] {
        font-size: 1.5rem;
    }

    .stat-icon[b-5sp1ef87mt] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
}
/* /Components/Features/Monitor/SchedulerAnalyticsDashboard.razor.rz.scp.css */
/* ── Scheduler Analytics Dashboard Styles ── */

.scheduler-analytics-dashboard[b-vnkbiecalu] {
    color: var(--adf-text-primary);
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.dashboard-header[b-vnkbiecalu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--adf-border-light);
}

.dashboard-header h2[b-vnkbiecalu] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.dashboard-header h2 i[b-vnkbiecalu] {
    color: var(--adf-text-accent);
}

.header-actions .form-select[b-vnkbiecalu] {
    background: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border-color: var(--adf-border-light);
}

/* Loading & Empty States */
.loading-container[b-vnkbiecalu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* Statistics Grid */
.stats-grid[b-vnkbiecalu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card[b-vnkbiecalu] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover[b-vnkbiecalu] {
    border-color: var(--adf-hover-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card-warn[b-vnkbiecalu] {
    border-color: #ffc107;
    border-width: 2px;
}

.stat-card-alert[b-vnkbiecalu] {
    border-color: #dc3545;
    border-width: 2px;
}

.stat-icon[b-vnkbiecalu] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon.total-icon[b-vnkbiecalu] {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

.stat-icon.success-icon[b-vnkbiecalu] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.stat-icon.duration-icon[b-vnkbiecalu] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.stat-icon.peak-icon[b-vnkbiecalu] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.stat-icon.triggers-icon[b-vnkbiecalu] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

.stat-icon.failed-icon[b-vnkbiecalu] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.stat-content[b-vnkbiecalu] {
    flex: 1;
    min-width: 0;
}

.stat-value[b-vnkbiecalu] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adf-text-primary);
}

.stat-label[b-vnkbiecalu] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    margin-top: 0.125rem;
}

.stat-content small[b-vnkbiecalu] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

/* Section Headers */
.section-header[b-vnkbiecalu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-header h3[b-vnkbiecalu] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
}

.section-header h3 i[b-vnkbiecalu] {
    color: var(--adf-text-accent);
}

/* Charts Row */
.charts-row[b-vnkbiecalu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-section[b-vnkbiecalu] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
}

.chart-section.full-width[b-vnkbiecalu] {
    grid-column: 1 / -1;
}

/* Plotly Chart Containers */
.plotly-chart-container[b-vnkbiecalu] {
    min-height: 280px;
    width: 100%;
    position: relative;
}

.plotly-chart-container.heatmap-chart[b-vnkbiecalu] {
    min-height: 320px;
}

/* Override Plotly defaults for dark theme */
:global(.js-plotly-plot .plotly)[b-vnkbiecalu] {
    width: 100% !important;
}

:global(.js-plotly-plot)[b-vnkbiecalu] {
    width: 100% !important;
}

.chart-container[b-vnkbiecalu] {
    margin-top: 0.5rem;
}

/* Heatmap Section */
.heatmap-section[b-vnkbiecalu] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

/* Insights Row */
.insights-row[b-vnkbiecalu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.insight-section[b-vnkbiecalu] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
}

.task-list[b-vnkbiecalu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-item[b-vnkbiecalu] {
    padding: 0.75rem;
    background: var(--adf-primary-bg);
    border-radius: 6px;
    border: 1px solid var(--adf-border-light);
}

.task-item.unreliable[b-vnkbiecalu] {
    border-color: #dc3545;
    border-width: 2px;
}

.task-info[b-vnkbiecalu] {
    flex: 1;
}

.task-name[b-vnkbiecalu] {
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.task-metrics[b-vnkbiecalu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

.task-metrics span[b-vnkbiecalu] {
    white-space: nowrap;
}

.task-bar[b-vnkbiecalu] {
    height: 4px;
    background: var(--adf-border-light);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.task-bar-fill[b-vnkbiecalu] {
    height: 100%;
    background: linear-gradient(90deg, #0078d4, #00b4d8);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.duration-indicator[b-vnkbiecalu] {
    color: var(--adf-text-secondary);
    font-size: 1.25rem;
}

.error-preview[b-vnkbiecalu] {
    font-size: 0.7rem;
    color: var(--adf-text-secondary);
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-insight[b-vnkbiecalu] {
    text-align: center;
    padding: 2rem;
    color: var(--adf-text-secondary);
}

/* Overlaps Section */
.overlaps-section[b-vnkbiecalu] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.overlaps-grid[b-vnkbiecalu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.overlap-card[b-vnkbiecalu] {
    background: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    padding: 1rem;
}

.overlap-card.high-contention[b-vnkbiecalu] {
    border-color: #dc3545;
    border-width: 2px;
}

.overlap-header[b-vnkbiecalu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.overlap-time[b-vnkbiecalu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--adf-text-primary);
}

.overlap-count[b-vnkbiecalu] {
    font-size: 0.875rem;
    color: var(--adf-text-secondary);
    margin-bottom: 0.75rem;
}

.overlap-schedules[b-vnkbiecalu] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.overlap-schedule[b-vnkbiecalu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--adf-secondary-bg);
    border-radius: 4px;
}

.schedule-name[b-vnkbiecalu] {
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.schedule-duration[b-vnkbiecalu] {
    color: var(--adf-text-secondary);
    flex-shrink: 0;
}

.overlap-more[b-vnkbiecalu] {
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
    text-align: center;
    padding-top: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid[b-vnkbiecalu] {
        grid-template-columns: 1fr 1fr;
    }

    .charts-row[b-vnkbiecalu] {
        grid-template-columns: 1fr;
    }

    .insights-row[b-vnkbiecalu] {
        grid-template-columns: 1fr;
    }

    .dashboard-header[b-vnkbiecalu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .overlaps-grid[b-vnkbiecalu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-vnkbiecalu] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Features/Monitor/TaskExecutionDashboard.razor.rz.scp.css */
/* ── View toggle ─────────────────────────────────────────────────────────── */
.view-toggle .btn[b-vt8p8ul9p9] {
    padding: .25rem .55rem;
}

/* ── Header action buttons (Refresh, Live/Paused, view toggle) ──────────── */
.header-actions .btn[b-vt8p8ul9p9] {
    font-size: .78rem;
    padding: .2rem .55rem;
}

/* ── Auto-refresh toggle ─────────────────────────────────────────────────── */
.auto-refresh-toggle.btn-outline-success[b-vt8p8ul9p9] {
    animation: live-pulse-b-vt8p8ul9p9 2s ease-in-out infinite;
}
@keyframes live-pulse-b-vt8p8ul9p9 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .7; }
}

/* ── Constrain spinner size inside badges/chips so it matches icon height ── */
.badge .spinner-border[b-vt8p8ul9p9] {
    width: .85em;
    height: .85em;
    border-width: .15em;
    vertical-align: -.075em;
}

.chip-spinner[b-vt8p8ul9p9] {
    width: .85em !important;
    height: .85em !important;
    border-width: .15em !important;
    vertical-align: -.075em;
}

/* ── Date preset bar ─────────────────────────────────────────────────────── */
.date-preset-bar[b-vt8p8ul9p9] {
    display: flex;
    gap: .25rem;
    flex-wrap: nowrap;
}

.preset-btn[b-vt8p8ul9p9] {
    background: transparent;
    border: 1px solid var(--adf-border-light);
    border-radius: .35rem;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.4;
}

.preset-btn:hover[b-vt8p8ul9p9] {
    background: var(--adf-hover-accent, rgba(0,0,0,.06));
    border-color: var(--adf-text-accent);
    color: var(--adf-text-primary);
}

.preset-btn.active[b-vt8p8ul9p9] {
    background: var(--adf-text-accent, #0d6efd);
    border-color: var(--adf-text-accent, #0d6efd);
    color: #fff;
}

.date-range-display[b-vt8p8ul9p9] {
    font-size: .73rem;
    color: var(--adf-text-secondary);
    margin-top: .2rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

/* ── Multi-select Status Filter (compact dropdown) ──────────────────────── */
.filter-group-status[b-vt8p8ul9p9] {
    flex: 0 0 auto;
    min-width: 9rem;
    max-width: 14rem;
}

.filter-group-search[b-vt8p8ul9p9] {
    flex: 1 1 11rem;
    min-width: 11rem;
    max-width: 24rem;
}

/* ── Filter Dropdown (shared by status + task-name) ─────────────────────── */
.filter-dropdown[b-vt8p8ul9p9] {
    position: relative;
}

.filter-dropdown-trigger[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    font-size: .8rem;
    font-weight: 500;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: .35rem;
    color: var(--adf-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    transition: border-color .12s, color .12s, background .12s;
    line-height: 1.5;
}

.filter-dropdown-trigger:hover[b-vt8p8ul9p9] {
    border-color: var(--adf-text-accent, #0d6efd);
    color: var(--adf-text-primary);
}

.filter-dropdown-trigger.has-filter[b-vt8p8ul9p9] {
    border-color: var(--adf-text-accent, #0d6efd);
    color: var(--adf-text-accent, #0d6efd);
    background: rgba(13,110,253,.06);
}

.filter-dropdown.is-open .filter-dropdown-trigger[b-vt8p8ul9p9] {
    border-color: var(--adf-text-accent, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
}

.dd-summary-text[b-vt8p8ul9p9] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.dd-chevron[b-vt8p8ul9p9] {
    transition: transform .15s;
    flex-shrink: 0;
    font-size: .7rem;
}

.filter-dropdown.is-open .dd-chevron[b-vt8p8ul9p9] {
    transform: rotate(180deg);
}

.filter-count-badge[b-vt8p8ul9p9] {
    background: var(--adf-text-accent, #0d6efd);
    color: #fff;
    border-radius: 2rem;
    font-size: .65rem;
    font-weight: 600;
    padding: .05rem .42rem;
    line-height: 1.4;
    min-width: 1.3rem;
    text-align: center;
    flex-shrink: 0;
}

/* Dropdown panel */
.filter-dropdown-panel[b-vt8p8ul9p9] {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0;
    min-width: 14rem;
    max-width: 24rem;
    background: var(--adf-secondary-bg, #fff);
    border: 1px solid var(--adf-border-light);
    border-radius: .45rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.13);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search box inside the task-name panel */
.fdd-search[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    padding: .42rem .6rem;
    border-bottom: 1px solid var(--adf-border-light);
    gap: .35rem;
    flex-shrink: 0;
}

.fdd-search-icon[b-vt8p8ul9p9] {
    color: var(--adf-text-secondary);
    font-size: .78rem;
    flex-shrink: 0;
}

.fdd-search-input[b-vt8p8ul9p9] {
    border: none;
    background: transparent;
    color: var(--adf-text-primary);
    font-size: .8rem;
    flex: 1;
    outline: none;
    min-width: 0;
}

.fdd-clear-search[b-vt8p8ul9p9] {
    background: none;
    border: none;
    color: var(--adf-text-secondary);
    cursor: pointer;
    padding: 0 .1rem;
    font-size: .82rem;
    flex-shrink: 0;
    line-height: 1;
}

/* "Select all / Clear" actions row */
.fdd-actions[b-vt8p8ul9p9] {
    display: flex;
    gap: .6rem;
    padding: .28rem .65rem;
    border-bottom: 1px solid var(--adf-border-light);
    flex-shrink: 0;
    align-items: center;
}

.fdd-action-link[b-vt8p8ul9p9] {
    background: none;
    border: none;
    color: var(--adf-text-accent, #0d6efd);
    font-size: .73rem;
    cursor: pointer;
    padding: 0;
}

.fdd-action-link:hover[b-vt8p8ul9p9] { text-decoration: underline; }
.fdd-action-link:disabled[b-vt8p8ul9p9] { color: var(--adf-text-secondary); cursor: default; text-decoration: none; }

/* Scrollable item list */
.fdd-list[b-vt8p8ul9p9] {
    overflow-y: auto;
    max-height: 16rem;
    padding: .25rem 0;
    display: flex;
    flex-direction: column;
}

.fdd-item[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .65rem;
    cursor: pointer;
    font-size: .8rem;
    color: var(--adf-text-primary);
    transition: background .1s;
    user-select: none;
}

.fdd-item:hover[b-vt8p8ul9p9] { background: var(--adf-hover-accent, rgba(0,0,0,.05)); }

.fdd-item-active[b-vt8p8ul9p9] { background: rgba(13,110,253,.06); }

.fdd-checkbox[b-vt8p8ul9p9] {
    flex-shrink: 0;
    accent-color: var(--adf-text-accent, #0d6efd);
    cursor: pointer;
}

.fdd-task-name[b-vt8p8ul9p9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Status icon colouring inside the dropdown list */
.fdd-status-icon[b-vt8p8ul9p9] { font-size: .8rem; flex-shrink: 0; }
.fdd-status-icon.chip-running[b-vt8p8ul9p9]   { color: #0d6efd; }
.fdd-status-icon.chip-completed[b-vt8p8ul9p9] { color: #198754; }
.fdd-status-icon.chip-failed[b-vt8p8ul9p9]    { color: #dc3545; }
.fdd-status-icon.chip-cancelled[b-vt8p8ul9p9] { color: #6c757d; }
.fdd-status-icon.chip-timedout[b-vt8p8ul9p9]  { color: #856404; }
.fdd-status-icon.chip-queued[b-vt8p8ul9p9]    { color: #055160; }
.fdd-status-icon.chip-triggered[b-vt8p8ul9p9] { color: var(--adf-text-secondary); }

.fdd-empty[b-vt8p8ul9p9] {
    padding: .55rem .65rem;
    font-size: .78rem;
    color: var(--adf-text-secondary);
    font-style: italic;
}

/* Fixed-position backdrop that dismisses open dropdowns */
.filter-backdrop[b-vt8p8ul9p9] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    pointer-events: auto;
}

/* ── Task name cell in table ─────────────────────────────────────────────── */
.task-name-cell[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.task-id-badge[b-vt8p8ul9p9] {
    font-size: .68rem;
    color: var(--adf-text-secondary);
    background: var(--adf-border-light);
    border-radius: .25rem;
    padding: .05rem .35rem;
    font-family: var(--bs-font-monospace, monospace);
    white-space: nowrap;
}

/* ── Soft-deleted task: run history is retained but rendered muted/faded ── */
.runs-table tbody tr.run-row.task-deleted .task-name-cell > strong[b-vt8p8ul9p9] {
    color: var(--adf-text-secondary);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: .75;
}

.deleted-badge[b-vt8p8ul9p9] {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--adf-text-secondary);
    background: var(--adf-border-light);
    border: 1px solid var(--adf-border-light);
    border-radius: .25rem;
    padding: .05rem .35rem;
    white-space: nowrap;
}

/* ── Actions column — fixed width prevents buttons stretching on DAG open ── */
.actions-col[b-vt8p8ul9p9] {
    width: 5.5rem;
    min-width: 5.5rem;
}

.action-btns[b-vt8p8ul9p9] {
    display: inline-flex;
    gap: .25rem;
    justify-content: flex-end;
}

.action-btn[b-vt8p8ul9p9] {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-xs[b-vt8p8ul9p9] {
    font-size: .72rem;
    padding: .15rem .45rem;
    line-height: 1.4;
    border-radius: .3rem;
}

/* ── Grouped view ────────────────────────────────────────────────────────── */
.grouped-view[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Task group card — compact */
.task-group-card[b-vt8p8ul9p9] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: .5rem;
    overflow: hidden;
    transition: box-shadow .15s;
}

.task-group-card:hover[b-vt8p8ul9p9] {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.task-group-card.has-failures[b-vt8p8ul9p9] {
    border-left: 3px solid #dc3545;
}

.task-group-card.has-running:not(.has-failures)[b-vt8p8ul9p9] {
    border-left: 3px solid #0d6efd;
}

/* Card header */
.group-card-header[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .85rem;
    cursor: pointer;
    user-select: none;
    gap: .75rem;
    flex-wrap: wrap;
    min-height: 2.5rem;
}

.group-card-header:hover[b-vt8p8ul9p9] {
    background: var(--adf-hover-accent, rgba(0,0,0,.03));
}

.group-card-header:focus-visible[b-vt8p8ul9p9] {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.group-title-area[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    flex: 1;
}

.group-icon[b-vt8p8ul9p9] {
    color: var(--adf-text-accent);
    font-size: .9rem;
    flex-shrink: 0;
}

.group-title[b-vt8p8ul9p9] {
    font-weight: 600;
    font-size: .875rem;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-sm[b-vt8p8ul9p9] {
    font-size: .65rem;
    padding: .2em .45em;
}

.group-meta-area[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    width: 26rem;           /* fixed so all cards share the same right-column widths */
}

/* Status distribution bar */
.status-bar[b-vt8p8ul9p9] {
    display: flex;
    height: 5px;
    width: 5rem;            /* fixed */
    border-radius: 3px;
    overflow: hidden;
    background: var(--adf-border-light);
    flex-shrink: 0;
}

.status-bar-seg[b-vt8p8ul9p9] {
    height: 100%;
    transition: width .3s ease;
}

.seg-completed[b-vt8p8ul9p9] { background: #198754; }
.seg-failed[b-vt8p8ul9p9]    { background: #dc3545; }
.seg-running[b-vt8p8ul9p9]   { background: #0d6efd; }
.seg-other[b-vt8p8ul9p9]     { background: #6c757d; }

/* Group stats row */
.group-stats[b-vt8p8ul9p9] {
    display: flex;
    gap: 0;
    align-items: center;
    flex: 1;
}

.group-stat[b-vt8p8ul9p9] {
    font-size: .72rem;
    color: var(--adf-text-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* right-align value within its column */
    gap: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fixed column widths for each stat — keeps all cards aligned */
.group-stat:nth-child(1)[b-vt8p8ul9p9] { min-width: 3.2rem;  flex: 0 0 3.2rem;  } /* total */
.group-stat:nth-child(2)[b-vt8p8ul9p9] { min-width: 3.8rem;  flex: 0 0 3.8rem;  } /* success % */
.group-stat:nth-child(3)[b-vt8p8ul9p9] { min-width: 5rem;    flex: 0 0 5rem;    } /* avg duration */
.group-stat:nth-child(4)[b-vt8p8ul9p9] { min-width: 5.5rem;  flex: 0 0 5.5rem;  } /* last run */

.group-chevron[b-vt8p8ul9p9] {
    font-size: .8rem;
    color: var(--adf-text-secondary);
    transition: transform .2s;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

/* ── Timeline area ───────────────────────────────────────────────────────── */
.group-timeline-area[b-vt8p8ul9p9] {
    border-top: 1px solid var(--adf-border-light);
    padding: .6rem .85rem 3rem;   /* extra bottom room for rotated scale labels */
    background: var(--adf-primary-bg, inherit);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Granular timeline strip */
.timeline-strip[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}


/* The flex row of columns — always stretches to fill the container */
.timeline-buckets-scroll[b-vt8p8ul9p9] {
    width: 100%;
}

.timeline-buckets[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 1px;
    width: 100%;
    border-bottom: 2px solid var(--adf-border-light);
    padding-bottom: 0;
}

/* Each time-slot column — equal share of available width */
.timeline-bucket[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    position: relative;   /* anchor for absolute scale labels */
}

.timeline-bucket.empty-bucket[b-vt8p8ul9p9] {
    opacity: .35;
}

/* Stack of dots inside this bucket */
.bucket-dots[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column-reverse;
    gap: 3px;
    align-items: center;
    min-height: 1.6rem;
    justify-content: flex-end;
    padding: .1rem 0;
}

/* Tick line connecting dots to the time axis */
.bucket-tick[b-vt8p8ul9p9] {
    width: 1px;
    height: .35rem;
    background: var(--adf-border-light);
    flex-shrink: 0;
}

/* Scale-marked buckets get a taller tick */
.timeline-bucket.show-label .bucket-tick[b-vt8p8ul9p9] {
    height: .65rem;
    background: var(--adf-text-secondary);
    width: 1px;
}

/* Time label — hidden by default */
.bucket-label[b-vt8p8ul9p9] {
    font-size: .62rem;
    font-family: var(--bs-font-monospace, monospace);
    line-height: 1;
    white-space: nowrap;
    display: none;
}

/* Both scale and data labels: absolutely positioned, centered on the tick, never clipped */
.timeline-bucket.show-label .bucket-label[b-vt8p8ul9p9],
.timeline-bucket.has-runs .bucket-label[b-vt8p8ul9p9] {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: .2rem;
    overflow: visible;
    max-width: none;
}

/* Scale-mark labels: muted */
.timeline-bucket.show-label:not(.has-runs) .bucket-label[b-vt8p8ul9p9] {
    color: var(--adf-text-secondary);
}

/* Occupied-bucket labels: bold, primary colour */
.timeline-bucket.has-runs .bucket-label[b-vt8p8ul9p9] {
    color: var(--adf-text-primary);
    font-weight: 600;
}

/* Overflow chip — "+N more" / collapse button inside a bucket */
.bucket-overflow-chip[b-vt8p8ul9p9] {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 1px dashed var(--adf-border-light);
    background: var(--adf-secondary-bg);
    color: var(--adf-text-secondary);
    font-size: .55rem;
    font-weight: 700;
    font-family: var(--bs-font-monospace, monospace);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1;
    padding: 0;
}

.bucket-overflow-chip:hover[b-vt8p8ul9p9] {
    background: var(--adf-hover-accent, rgba(0,0,0,.08));
    border-color: var(--adf-text-accent, #0d6efd);
    color: var(--adf-text-accent, #0d6efd);
}

.bucket-collapse-chip[b-vt8p8ul9p9] {
    border-style: solid;
    border-color: var(--adf-text-secondary);
}

/* Timeline dot button */
.timeline-dot[b-vt8p8ul9p9] {
    position: static;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .64rem;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
    z-index: 1;
    background: var(--adf-secondary-bg);
    flex-shrink: 0;
}

.timeline-dot:hover[b-vt8p8ul9p9] {
    transform: scale(1.3);
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}

.timeline-dot.tl-selected[b-vt8p8ul9p9] {
    transform: scale(1.35);
    z-index: 3;
    box-shadow: 0 0 0 3px rgba(13,110,253,.45);
}

.timeline-dot.tl-dag[b-vt8p8ul9p9] {
    box-shadow: 0 0 0 3px rgba(13,110,253,.65);
}

/* Colour dots by status */
.timeline-dot.chip-completed[b-vt8p8ul9p9] { background: #198754; color: #fff; border-color: #198754; }
.timeline-dot.chip-failed[b-vt8p8ul9p9]    { background: #dc3545; color: #fff; border-color: #dc3545; }
.timeline-dot.chip-running[b-vt8p8ul9p9]   { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.timeline-dot.chip-cancelled[b-vt8p8ul9p9] { background: #6c757d; color: #fff; border-color: #6c757d; }
.timeline-dot.chip-timedout[b-vt8p8ul9p9]  { background: #ffc107; color: #212529; border-color: #ffc107; }
.timeline-dot.chip-queued[b-vt8p8ul9p9]    { background: #0dcaf0; color: #055160; border-color: #0dcaf0; }
.timeline-dot.chip-triggered[b-vt8p8ul9p9] { background: #dee2e6; color: #495057; border-color: #adb5bd; }
.timeline-dot.chip-unknown[b-vt8p8ul9p9]   { background: var(--adf-secondary-bg); color: var(--adf-text-secondary); }

.timeline-dot.tl-retry[b-vt8p8ul9p9] {
    box-shadow: 0 0 0 2px var(--adf-secondary-bg, #fff), 0 0 0 3.5px currentColor;
}

/* ── Timeline detail card ────────────────────────────────────────────────── */
.timeline-detail-card[b-vt8p8ul9p9] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: .4rem;
    padding: .55rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tdc-header[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
}

.tdc-meta[b-vt8p8ul9p9] {
    font-size: .74rem;
    color: var(--adf-text-secondary);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.tdc-actions[b-vt8p8ul9p9] {
    display: flex;
    gap: .25rem;
    flex-shrink: 0;
}

.tdc-params[b-vt8p8ul9p9] {
    border-top: 1px solid var(--adf-border-light);
    padding-top: .5rem;
}

/* ── Page layout ─────────────────────────────────────────────────────────── */
.execution-dashboard[b-vt8p8ul9p9] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.dashboard-header[b-vt8p8ul9p9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.dashboard-header h4[b-vt8p8ul9p9] {
    margin: 0;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.last-updated[b-vt8p8ul9p9] {
    font-size: .8rem;
    color: var(--adf-text-secondary);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.filter-bar[b-vt8p8ul9p9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: .5rem;
}

.filter-group[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 8rem;
}

.filter-group-date[b-vt8p8ul9p9] {
    min-width: 12rem;
}

.filter-label[b-vt8p8ul9p9] {
    font-size: .72rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* ── Stats cards ──────────────────────────────────────────────────────────── */
.stats-grid[b-vt8p8ul9p9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .75rem;
}

.stat-card[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: .5rem;
}

.stat-icon[b-vt8p8ul9p9] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon.total[b-vt8p8ul9p9]   { color: var(--adf-text-accent); }
.stat-icon.running[b-vt8p8ul9p9] { color: #0d6efd; }
.stat-icon.success[b-vt8p8ul9p9] { color: #198754; }
.stat-icon.failed[b-vt8p8ul9p9]  { color: #dc3545; }

.stat-label[b-vt8p8ul9p9] {
    font-size: .75rem;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value[b-vt8p8ul9p9] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1;
}

/* ── Content layout ───────────────────────────────────────────────────────── */
.content-layout[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Runs table ───────────────────────────────────────────────────────────── */
.runs-table-wrap[b-vt8p8ul9p9] {
    overflow-x: auto;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: .5rem;
}

.runs-table[b-vt8p8ul9p9] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    min-width: 48rem;
}

.runs-table thead th[b-vt8p8ul9p9] {
    padding: .55rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--adf-text-secondary);
    border-bottom: 1px solid var(--adf-border-light);
    white-space: nowrap;
    background: var(--adf-secondary-bg);
}

.runs-table tbody tr.run-row[b-vt8p8ul9p9] {
    border-bottom: 1px solid var(--adf-border-light);
    transition: background .15s;
    cursor: default;
}

.runs-table tbody tr.run-row:hover[b-vt8p8ul9p9] {
    background: var(--adf-hover-accent, rgba(0,0,0,.04));
}

.runs-table tbody tr.run-row.dag-selected[b-vt8p8ul9p9] {
    background: rgba(13, 110, 253, .06);
    border-left: 3px solid #0d6efd;
}

.runs-table td[b-vt8p8ul9p9] {
    padding: .5rem .75rem;
    color: var(--adf-text-primary);
    vertical-align: middle;
}

/* ── Params row ───────────────────────────────────────────────────────────── */
.params-row td[b-vt8p8ul9p9] {
    padding: 0;
    background: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    max-width: 0;
    overflow: hidden;
}

.params-panel[b-vt8p8ul9p9] {
    padding: .75rem 1rem;
}

.params-grid[b-vt8p8ul9p9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.params-heading[b-vt8p8ul9p9] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--adf-text-secondary);
    margin-bottom: .35rem;
}

.params-json[b-vt8p8ul9p9] {
    font-size: .78rem;
    background: var(--adf-primary-bg, #111);
    color: var(--adf-text-primary);
    padding: .5rem .75rem;
    border-radius: .35rem;
    border: 1px solid var(--adf-border-light);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 14rem;
    margin: 0;
}

.params-empty[b-vt8p8ul9p9] {
    font-size: .8rem;
    color: var(--adf-text-secondary);
    font-style: italic;
}

pre.params-error[b-vt8p8ul9p9] {
    font-size: .78rem;
    background: var(--adf-primary-bg, #111);
    padding: .5rem .75rem;
    border-radius: .35rem;
    border: 1px solid var(--adf-border-light);
    color: #dc3545;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 14rem;
    margin: 0;
}

.error-section[b-vt8p8ul9p9] {
    margin-top: .5rem;
}

.error-section .params-heading[b-vt8p8ul9p9] {
    color: #dc3545;
}

.external-link[b-vt8p8ul9p9] {
    font-size: .8rem;
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* ── Retry chain ──────────────────────────────────────────────────────────── */
.retry-chain-toggle[b-vt8p8ul9p9] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    background: transparent;
    border: 1px solid var(--adf-border-light);
    border-radius: 1rem;
    padding: .15rem .55rem;
    cursor: pointer;
    transition: all .15s ease;
    margin-top: .2rem;
}
.retry-chain-toggle:hover[b-vt8p8ul9p9] {
    background: rgba(13, 110, 253, .08);
    border-color: #0d6efd;
    color: #0d6efd;
}
.retry-chain-toggle.open[b-vt8p8ul9p9] {
    background: rgba(13, 110, 253, .08);
    border-color: #0d6efd;
    color: #0d6efd;
}

.retry-chain-header-row td[b-vt8p8ul9p9] {
    padding: .25rem .75rem !important;
    background: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
}

.retry-chain-label[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--adf-text-secondary);
    padding-left: 1rem;
}

.retry-chain-summary[b-vt8p8ul9p9] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .5rem;
}

.retry-step-dot[b-vt8p8ul9p9] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    display: inline-block;
}
.retry-step-dot.chip-completed[b-vt8p8ul9p9] { background: #388e3c; }
.retry-step-dot.chip-failed[b-vt8p8ul9p9]    { background: #c62828; }
.retry-step-dot.chip-running[b-vt8p8ul9p9]   { background: #1976d2; }
.retry-step-dot.chip-cancelled[b-vt8p8ul9p9] { background: #9e9e9e; }
.retry-step-dot.chip-timedout[b-vt8p8ul9p9]  { background: #f9a825; }
.retry-step-dot.chip-queued[b-vt8p8ul9p9]    { background: #0dcaf0; }
.retry-step-dot.chip-triggered[b-vt8p8ul9p9] { background: #6c757d; }
.retry-step-dot.chip-unknown[b-vt8p8ul9p9]   { background: #6c757d; }

.retry-sub-row[b-vt8p8ul9p9] {
    background: var(--adf-secondary-bg, rgba(0,0,0,.02));
}
.retry-sub-row td[b-vt8p8ul9p9] {
    font-size: .82rem;
}
.retry-sub-row.retry-current[b-vt8p8ul9p9] {
    background: rgba(13, 110, 253, .04);
}
.retry-sub-row:last-child td[b-vt8p8ul9p9] {
    border-bottom: 2px solid var(--adf-border-light);
}

.retry-attempt-label[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-left: .75rem;
}
.retry-connector[b-vt8p8ul9p9] {
    width: 1rem;
    height: 1px;
    background: var(--adf-border-light);
    flex-shrink: 0;
}
.retry-attempt-number[b-vt8p8ul9p9] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
}

.badge-sm[b-vt8p8ul9p9] {
    font-size: .65rem;
    padding: .15rem .35rem;
    font-weight: 500;
}

/* ── Retry chain stepper (grouped view) ───────────────────────────────────── */
.retry-stepper[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border-top: 1px solid var(--adf-border-light);
    background: rgba(255, 193, 7, .04);
}

.retry-stepper-label[b-vt8p8ul9p9] {
    font-size: .7rem;
    font-weight: 600;
    color: var(--adf-text-secondary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.retry-stepper-steps[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
}

.retry-step[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: .3rem;
    background: transparent;
    cursor: pointer;
    font-size: .7rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    white-space: nowrap;
    transition: all .15s;
}
.retry-step:hover[b-vt8p8ul9p9] {
    background: rgba(0, 0, 0, .05);
    border-color: var(--adf-border-light);
}
.retry-step.step-current[b-vt8p8ul9p9] {
    background: rgba(13, 110, 253, .08);
    border-color: #0d6efd;
    color: #0d6efd;
    font-weight: 600;
}

.step-dot[b-vt8p8ul9p9] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.chip-completed .step-dot[b-vt8p8ul9p9] { background: #388e3c; }
.chip-failed .step-dot[b-vt8p8ul9p9]    { background: #c62828; }
.chip-running .step-dot[b-vt8p8ul9p9]   { background: #1976d2; }
.chip-cancelled .step-dot[b-vt8p8ul9p9] { background: #9e9e9e; }
.chip-timedout .step-dot[b-vt8p8ul9p9]  { background: #f9a825; }
.chip-queued .step-dot[b-vt8p8ul9p9]    { background: #0dcaf0; }
.chip-triggered .step-dot[b-vt8p8ul9p9] { background: #6c757d; }
.chip-unknown .step-dot[b-vt8p8ul9p9]   { background: #6c757d; }

.step-label[b-vt8p8ul9p9] {
    font-size: .68rem;
}

.step-id[b-vt8p8ul9p9] {
    font-size: .62rem;
    opacity: .65;
}

.step-connector[b-vt8p8ul9p9] {
    width: 1rem;
    height: 1px;
    background: var(--adf-border-light);
    flex-shrink: 0;
}

/* ── Inline DAG row ───────────────────────────────────────────────────────── */
.dag-inline-row td[b-vt8p8ul9p9] {
    padding: 0;
    background: var(--adf-secondary-bg);
    border-bottom: 2px solid var(--adf-border-light);
}

.dag-inline-panel[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(13, 110, 253, .2);
    border-radius: .35rem;
    margin: .35rem .5rem;
    overflow: hidden;
}

.dag-inline-header[b-vt8p8ul9p9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--adf-border-light);
    background: rgba(13, 110, 253, .04);
}
.dag-inline-header h6[b-vt8p8ul9p9] {
    font-size: .8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dag-refresh-btn[b-vt8p8ul9p9] {
    padding: .15rem .35rem;
    font-size: .75rem;
    line-height: 1;
    border-radius: .25rem;
}

.dag-inline-body[b-vt8p8ul9p9] {
    height: 26rem;
    min-height: 20rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state[b-vt8p8ul9p9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1rem;
    color: var(--adf-text-secondary);
    font-size: .9rem;
}

.empty-state i[b-vt8p8ul9p9] {
    font-size: 2rem;
    opacity: .4;
}

/* ── Status chip border-top classes (reused across views) ───────────────── */
.chip-completed[b-vt8p8ul9p9] { border-top: 2px solid #198754; }
.chip-failed[b-vt8p8ul9p9]    { border-top: 2px solid #dc3545; }
.chip-running[b-vt8p8ul9p9]   { border-top: 2px solid #0d6efd; }
.chip-cancelled[b-vt8p8ul9p9] { border-top: 2px solid #6c757d; }
.chip-timedout[b-vt8p8ul9p9]  { border-top: 2px solid #ffc107; }
.chip-queued[b-vt8p8ul9p9]    { border-top: 2px solid #0dcaf0; }
.chip-triggered[b-vt8p8ul9p9] { border-top: 2px solid #adb5bd; }
.chip-unknown[b-vt8p8ul9p9]   { border-top: 2px solid var(--adf-border-light); }

/* ── Responsive: filter bar & status chips ────────────────────────────────── */
@media (max-width: 768px) {
    .filter-bar[b-vt8p8ul9p9] {
        flex-direction: column;
    }

    .filter-group-status[b-vt8p8ul9p9] {
        min-width: 0;
        width: 100%;
    }

    .status-chip-filter[b-vt8p8ul9p9] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: .25rem;
    }

    .filter-group-date[b-vt8p8ul9p9],
    .filter-group-search[b-vt8p8ul9p9],
    .filter-group-actions[b-vt8p8ul9p9] {
        width: 100%;
    }

    .filter-group-search[b-vt8p8ul9p9] {
        min-width: 0;
    }
}

/* ── Pagination bar ───────────────────────────────────────────────────────── */
.pagination-bar[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0;
    flex-wrap: wrap;
    gap: .5rem;
}

.pagination-info[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.page-size-select[b-vt8p8ul9p9] {
    width: auto;
    min-width: 5.5rem;
    font-size: .8rem;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border-color: var(--adf-border-light);
}

.pagination .page-link[b-vt8p8ul9p9] {
    font-size: .8rem;
    padding: .25rem .5rem;
    line-height: 1.3;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border-color: var(--adf-border-light);
}

.pagination .page-link:hover[b-vt8p8ul9p9] {
    background-color: var(--adf-hover-bg);
    color: var(--adf-text-accent);
    border-color: var(--adf-border-medium);
}

.pagination .page-item.active .page-link[b-vt8p8ul9p9] {
    background-color: var(--adf-text-accent, #0d6efd);
    border-color: var(--adf-text-accent, #0d6efd);
    color: #fff;
}

.pagination .page-item.disabled .page-link[b-vt8p8ul9p9] {
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-muted);
    border-color: var(--adf-border-light);
}

/* ── Retry info badge ─────────────────────────────────────────────────────── */
.retry-info-badge[b-vt8p8ul9p9] {
    font-size: .72rem;
    font-weight: 500;
}

.retry-origin[b-vt8p8ul9p9] {
    opacity: .7;
    font-weight: 400;
}

/* ── Retry toast ──────────────────────────────────────────────────────────── */
.retry-toast[b-vt8p8ul9p9] {
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: .85rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

/* ── Sort filter group (flush-right in the filter bar) ──────────────────── */
.filter-group-sort[b-vt8p8ul9p9] {
    flex: 0 0 auto;
    min-width: 9rem;
}

/* Narrower panel for the sort dropdown — options are short strings */
.sort-dropdown-panel[b-vt8p8ul9p9] {
    min-width: 12rem !important;
    max-width: 14rem !important;
}

/* Sort items are <button> elements — reset browser defaults and match fdd-item */
.fdd-sort-item[b-vt8p8ul9p9] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .65rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--adf-text-primary);
    font-size: .8rem;
    cursor: pointer;
    transition: background .1s;
    user-select: none;
}

.fdd-sort-item:hover[b-vt8p8ul9p9] {
    background: var(--adf-hover-accent, rgba(0,0,0,.05));
}

.fdd-sort-item.fdd-item-active[b-vt8p8ul9p9] {
    background: rgba(13,110,253,.06);
    color: var(--adf-text-accent, #0d6efd);
}

/* Checkmark pushed to the far right */
.fdd-sort-item .bi-check[b-vt8p8ul9p9] {
    margin-left: auto;
    color: var(--adf-text-accent, #0d6efd);
    flex-shrink: 0;
}
/* /Components/Features/Monitor/TaskRunDagNodeWidget.razor.rz.scp.css */
.task-run-dag-node[b-68hhor6lti] {
    align-items: center;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #111;
    cursor: default;
    display: inline-flex;
    flex-direction: column;
    font-size: 0.8rem;
    font-weight: 600;
    justify-content: center;
    min-height: 90px;
    width: 170px;
    max-width: 170px;
    padding: 10px 14px;
    text-align: center;
    user-select: none;
    gap: 4px;
    position: relative;
    background: var(--adf-secondary-bg, #fff);
}

/* Status dot in top-right corner */
.run-node-status-dot[b-68hhor6lti] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
}

.task-run-dag-node.running[b-68hhor6lti] {
    background: #e3f2fd;
    border-color: #1976d2;
}
.task-run-dag-node.running .run-node-status-dot[b-68hhor6lti] {
    background: #1976d2;
    animation: pulse-b-68hhor6lti 1.5s infinite;
}

.task-run-dag-node.completed[b-68hhor6lti] {
    background: #e8f5e9;
    border-color: #388e3c;
}
.task-run-dag-node.completed .run-node-status-dot[b-68hhor6lti] { background: #388e3c; }

.task-run-dag-node.failed[b-68hhor6lti] {
    background: #ffebee;
    border-color: #c62828;
}
.task-run-dag-node.failed .run-node-status-dot[b-68hhor6lti] { background: #c62828; }

.task-run-dag-node.cancelled[b-68hhor6lti] {
    background: #f5f5f5;
    border-color: #9e9e9e;
}
.task-run-dag-node.cancelled .run-node-status-dot[b-68hhor6lti] { background: #9e9e9e; }

.task-run-dag-node.timed-out[b-68hhor6lti] {
    background: #fff3e0;
    border-color: #e65100;
}
.task-run-dag-node.timed-out .run-node-status-dot[b-68hhor6lti] { background: #e65100; }

.task-run-dag-node.queued[b-68hhor6lti],
.task-run-dag-node.triggered[b-68hhor6lti] {
    background: #fffde7;
    border-color: #f9a825;
}
.task-run-dag-node.queued .run-node-status-dot[b-68hhor6lti],
.task-run-dag-node.triggered .run-node-status-dot[b-68hhor6lti] { background: #f9a825; }

.task-run-dag-node.unknown[b-68hhor6lti] {
    background: #fafafa;
    border-color: #bdbdbd;
}
.task-run-dag-node.unknown .run-node-status-dot[b-68hhor6lti] { background: #bdbdbd; }

.run-node-name[b-68hhor6lti] {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
    color: var(--adf-text-primary, #111);
}

.run-node-id[b-68hhor6lti] {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--adf-text-secondary, #888);
    letter-spacing: 0.02em;
    opacity: 0.8;
}

.run-node-status[b-68hhor6lti] {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--adf-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.run-node-duration[b-68hhor6lti] {
    display: block;
    font-size: 0.7rem;
    color: var(--adf-text-secondary, #888);
}

@keyframes pulse-b-68hhor6lti {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
/* /Components/Features/Monitor/TaskRunDagOverlay.razor.rz.scp.css */
.task-run-dag-overlay[b-wnm52wvxwb] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dag-empty-state[b-wnm52wvxwb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: var(--adf-text-secondary);
    text-align: center;
}

.dag-empty-state i[b-wnm52wvxwb] {
    font-size: 2.5rem;
    opacity: 0.4;
}

.dag-toolbar[b-wnm52wvxwb] {
    flex-shrink: 0;
    padding: 0 0.25rem;
}

.dag-legend[b-wnm52wvxwb] {
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

.legend-item[b-wnm52wvxwb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.legend-item.running[b-wnm52wvxwb]   { color: #1976d2; }
.legend-item.completed[b-wnm52wvxwb] { color: #388e3c; }
.legend-item.failed[b-wnm52wvxwb]    { color: #c62828; }
.legend-item.cancelled[b-wnm52wvxwb] { color: #9e9e9e; }
.legend-item.queued[b-wnm52wvxwb]    { color: #f9a825; }

.dag-loading[b-wnm52wvxwb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dag-canvas-wrapper[b-wnm52wvxwb] {
    flex: 1;
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    min-height: 320px;
}

.run-dag-canvas[b-wnm52wvxwb] {
    height: 100%;
    width: 100%;
    background: var(--adf-primary-bg, #fafafa);
}
/* /Components/Features/Monitor/UsageDashboard.razor.rz.scp.css */
/* ── Usage Dashboard Styles ── */

.usage-dashboard[b-al8uh8s0tp] {
    color: var(--adf-text-primary);
}

/* Header */
.dashboard-header[b-al8uh8s0tp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-header h2[b-al8uh8s0tp] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.dashboard-header h2 i[b-al8uh8s0tp] {
    color: var(--adf-text-accent);
}

.header-actions .form-select[b-al8uh8s0tp] {
    background: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border-color: var(--adf-border-light);
}

/* Loading & Empty States */
.loading-container[b-al8uh8s0tp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-state[b-al8uh8s0tp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--adf-text-secondary);
}

.empty-state h4[b-al8uh8s0tp] {
    color: var(--adf-text-primary);
}

/* Plan Banner */
.plan-banner[b-al8uh8s0tp] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.plan-badge-group[b-al8uh8s0tp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.plan-badge[b-al8uh8s0tp] {
    font-size: 0.875rem;
    padding: 0.35rem 0.75rem;
}

.billing-period[b-al8uh8s0tp] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Statistics Grid */
.stats-grid[b-al8uh8s0tp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card[b-al8uh8s0tp] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.stat-card:hover[b-al8uh8s0tp] {
    border-color: var(--adf-hover-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card-highlight[b-al8uh8s0tp] {
    border-color: #ffc107;
    border-width: 2px;
}

.stat-card-warn[b-al8uh8s0tp] {
    border-color: #fd7e14;
    border-width: 2px;
}

.stat-icon[b-al8uh8s0tp] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-icon.runs-icon[b-al8uh8s0tp] {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
}

.stat-icon.included-icon[b-al8uh8s0tp] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.stat-icon.billable-icon[b-al8uh8s0tp] {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.stat-icon.daily-icon[b-al8uh8s0tp] {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.stat-icon.projected-icon[b-al8uh8s0tp] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.stat-icon.emitted-icon[b-al8uh8s0tp] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

.stat-content[b-al8uh8s0tp] {
    flex: 1;
    min-width: 0;
}

.stat-value[b-al8uh8s0tp] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adf-text-primary);
}

.stat-label[b-al8uh8s0tp] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    margin-top: 0.125rem;
}

.stat-content small[b-al8uh8s0tp] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

/* Section Headers */
.section-header[b-al8uh8s0tp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-header h3[b-al8uh8s0tp] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.section-header h3 i[b-al8uh8s0tp] {
    color: var(--adf-text-accent);
}

/* Usage Progress Section */
.usage-progress-section[b-al8uh8s0tp] {
    margin-bottom: 2rem;
}

.usage-progress-card[b-al8uh8s0tp] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
}

.usage-progress-header[b-al8uh8s0tp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: var(--adf-text-primary);
}

.usage-progress-bar[b-al8uh8s0tp] {
    height: 12px;
    border-radius: 6px;
    background: var(--adf-primary-bg);
}

.overage-note[b-al8uh8s0tp] {
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    padding: 0.5rem 0.75rem;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 4px;
    border-left: 3px solid #ffc107;
}

/* Daily Usage Chart */
.daily-usage-section[b-al8uh8s0tp] {
    margin-bottom: 2rem;
}

.daily-chart-container[b-al8uh8s0tp] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
}

.daily-chart[b-al8uh8s0tp] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    padding-bottom: 24px;
    overflow-x: auto;
}

.daily-bar-group[b-al8uh8s0tp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 18px;
    max-width: 36px;
    height: 100%;
    cursor: default;
}

.daily-bar-wrapper[b-al8uh8s0tp] {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.daily-bar[b-al8uh8s0tp] {
    width: 100%;
    max-width: 24px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height 0.3s ease;
}

.daily-bar.included[b-al8uh8s0tp] {
    background: linear-gradient(180deg, #28a745 0%, #20903d 100%);
}

.daily-bar.billable[b-al8uh8s0tp] {
    background: linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
}

.daily-bar-group.today .daily-bar[b-al8uh8s0tp] {
    outline: 2px solid var(--adf-text-accent);
    outline-offset: 1px;
}

.daily-label[b-al8uh8s0tp] {
    font-size: 0.625rem;
    color: var(--adf-text-secondary);
    margin-top: 4px;
    white-space: nowrap;
}

.daily-bar-group.today .daily-label[b-al8uh8s0tp] {
    color: var(--adf-text-accent);
    font-weight: 600;
}

.chart-legend[b-al8uh8s0tp] {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
}

.legend-item[b-al8uh8s0tp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-swatch[b-al8uh8s0tp] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-swatch.included[b-al8uh8s0tp] {
    background: #28a745;
}

.legend-swatch.billable[b-al8uh8s0tp] {
    background: #ffc107;
}

/* Billing Summary Footer */
.billing-summary[b-al8uh8s0tp] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.summary-items[b-al8uh8s0tp] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.summary-item[b-al8uh8s0tp] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-label[b-al8uh8s0tp] {
    font-size: 0.75rem;
    color: var(--adf-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.summary-value[b-al8uh8s0tp] {
    font-size: 0.875rem;
    color: var(--adf-text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid[b-al8uh8s0tp] {
        grid-template-columns: 1fr 1fr;
    }

    .plan-banner[b-al8uh8s0tp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-header[b-al8uh8s0tp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .daily-chart[b-al8uh8s0tp] {
        height: 120px;
    }

    .summary-items[b-al8uh8s0tp] {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-al8uh8s0tp] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Features/Monitor/UserManagementDashboard.razor.rz.scp.css */
/* ── User Management Dashboard Styles ── */

.user-management-dashboard[b-tkt3pqfkys] {
    color: var(--adf-text-primary);
}

/* Header */
.dashboard-header[b-tkt3pqfkys] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-header h2[b-tkt3pqfkys] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.dashboard-header h2 i[b-tkt3pqfkys] {
    color: var(--adf-text-accent);
}

/* Loading & Empty States */
.loading-container[b-tkt3pqfkys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-state[b-tkt3pqfkys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    color: var(--adf-text-secondary);
}

.empty-state h4[b-tkt3pqfkys] {
    color: var(--adf-text-primary);
}

/* Statistics Grid */
.stats-grid[b-tkt3pqfkys] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card[b-tkt3pqfkys] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon[b-tkt3pqfkys] {
    font-size: 1.75rem;
    color: var(--adf-text-accent);
    opacity: 0.8;
}

.stat-value[b-tkt3pqfkys] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1.2;
}

.stat-label[b-tkt3pqfkys] {
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    margin-top: 0.125rem;
}

/* User Table Container */
.user-table-container[b-tkt3pqfkys] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    overflow-x: auto;
}

.user-table[b-tkt3pqfkys] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.user-table thead[b-tkt3pqfkys] {
    background: var(--adf-primary-bg);
    border-bottom: 2px solid var(--adf-border-light);
}

.user-table th[b-tkt3pqfkys] {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--adf-text-secondary);
    white-space: nowrap;
}

.user-table td[b-tkt3pqfkys] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--adf-border-light);
    vertical-align: middle;
}

.user-table tbody tr:last-child td[b-tkt3pqfkys] {
    border-bottom: none;
}

.user-table tbody tr:hover[b-tkt3pqfkys] {
    background: var(--adf-hover-light);
}

.inactive-row[b-tkt3pqfkys] {
    opacity: 0.6;
}

/* User Info Cell */
.user-info[b-tkt3pqfkys] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-tkt3pqfkys] {
    font-size: 1.5rem;
    color: var(--adf-text-secondary);
    line-height: 1;
}

.user-name[b-tkt3pqfkys] {
    font-weight: 500;
    color: var(--adf-text-primary);
}

.user-email[b-tkt3pqfkys] {
    color: var(--adf-text-secondary);
    font-size: 0.875rem;
}

/* Role Select */
.role-select[b-tkt3pqfkys] {
    width: auto;
    min-width: 120px;
    background: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border-color: var(--adf-border-light);
    font-size: 0.875rem;
}

.role-select:focus[b-tkt3pqfkys] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--adf-accent-rgb, 66, 133, 244), 0.25);
}

.role-select:disabled[b-tkt3pqfkys] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Badge */
.badge-xs[b-tkt3pqfkys] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid[b-tkt3pqfkys] {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-table[b-tkt3pqfkys] {
        font-size: 0.8125rem;
    }

    .user-table th[b-tkt3pqfkys],
    .user-table td[b-tkt3pqfkys] {
        padding: 0.625rem 0.5rem;
    }

    .user-email[b-tkt3pqfkys] {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* /Components/Features/Setup/CopilotChat/CopilotChatPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Copilot Chat Panel — Polysync AI Assistant
   Follows ADF IDE theme variables for seamless dark/light mode support.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Floating Action Button (trigger) ──────────────────────────────── */
.copilot-trigger-area[b-l166hithkk] {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: var(--adf-z-modal);
}

.copilot-trigger-area.open[b-l166hithkk] {
    display: none;
}

.copilot-fab[b-l166hithkk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--adf-border-light);
    background: linear-gradient(135deg, var(--adf-text-accent), #6B4FBB);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--adf-shadow-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    padding: 0;
}

.copilot-fab:hover[b-l166hithkk] {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(0, 120, 212, 0.35);
}

.copilot-fab:active[b-l166hithkk] {
    transform: scale(0.96);
}

.copilot-icon[b-l166hithkk] {
    width: 26px;
    height: 26px;
}

.copilot-badge[b-l166hithkk] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--adf-error);
    border: 2px solid var(--adf-secondary-bg);
}

/* ── Panel container ───────────────────────────────────────────────── */
.copilot-panel[b-l166hithkk] {
    display: flex;
    flex-direction: column;
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    color: var(--adf-text-primary);
    overflow: hidden;
    box-shadow: var(--adf-shadow-lg);
}

/* Floating mode: overlay on right side */
.copilot-panel.floating[b-l166hithkk] {
    position: fixed;
    right: 16px;
    top: 60px;
    bottom: 80px;
    width: 380px;
    border-radius: 12px;
    z-index: var(--adf-z-modal);
    animation: copilotSlideIn-b-l166hithkk 0.25s ease-out;
}

/* Pinned mode: docked into the layout grid */
.copilot-panel.pinned[b-l166hithkk] {
    position: relative;
    height: 100%;
    border-radius: 0;
    border-right: none;
    border-left: 1px solid var(--adf-border-light);
    z-index: 100;
    box-shadow: var(--adf-shadow-sm);
}

.copilot-panel.resizing[b-l166hithkk] {
    user-select: none;
    cursor: col-resize;
}

@keyframes copilotSlideIn-b-l166hithkk {
    from {
        opacity: 0;
        transform: translateX(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ── Header ────────────────────────────────────────────────────────── */
.copilot-header[b-l166hithkk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: var(--adf-tertiary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    flex-shrink: 0;
    min-height: 44px;
    gap: 8px;
}

.copilot-header-left[b-l166hithkk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.copilot-header-icon[b-l166hithkk] {
    width: 20px;
    height: 20px;
    color: var(--adf-text-accent);
    flex-shrink: 0;
}

.copilot-title[b-l166hithkk] {
    font-size: var(--adf-font-size-sm);
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copilot-preview-badge[b-l166hithkk] {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    background-color: var(--adf-text-accent);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.copilot-header-actions[b-l166hithkk] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.copilot-header-btn[b-l166hithkk] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--adf-text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
}

.copilot-header-btn:hover[b-l166hithkk] {
    background-color: var(--adf-hover-bg);
    color: var(--adf-text-primary);
}

.copilot-close-btn:hover[b-l166hithkk] {
    background-color: var(--adf-error-light);
    color: var(--adf-error);
}

/* ── Resize handle ─────────────────────────────────────────────────── */
.copilot-resize-handle[b-l166hithkk] {
    position: absolute;
    top: 0;
    left: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background-color 0.15s ease;
}

.copilot-resize-handle:hover[b-l166hithkk],
.copilot-resize-handle:active[b-l166hithkk] {
    background-color: var(--adf-text-accent);
    opacity: 0.5;
}

/* ── Messages area ─────────────────────────────────────────────────── */
.copilot-messages[b-l166hithkk] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

/* Custom scrollbar for messages */
.copilot-messages[b-l166hithkk]::-webkit-scrollbar {
    width: 6px;
}

.copilot-messages[b-l166hithkk]::-webkit-scrollbar-thumb {
    background-color: var(--adf-scrollbar-thumb);
    border-radius: 3px;
}

.copilot-messages[b-l166hithkk]::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Welcome state ─────────────────────────────────────────────────── */
.copilot-welcome[b-l166hithkk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    flex: 1;
}

.copilot-welcome-icon[b-l166hithkk] {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    animation: copilotPulse-b-l166hithkk 3s ease-in-out infinite;
}

@keyframes copilotPulse-b-l166hithkk {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

.copilot-welcome-title[b-l166hithkk] {
    font-size: var(--adf-font-size-lg);
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 4px 0;
}

.copilot-welcome-subtitle[b-l166hithkk] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    margin: 0 0 12px 0;
}

.copilot-ai-notice[b-l166hithkk] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    width: 100%;
    max-width: 280px;
    margin: 0 0 20px 0;
    padding: 10px 12px;
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    background-color: var(--adf-active-bg);
    color: var(--adf-text-secondary);
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: left;
}

.copilot-ai-notice p[b-l166hithkk] {
    margin: 0 0 6px 0;
}

.copilot-ai-notice strong[b-l166hithkk] {
    color: var(--adf-text-primary);
}

.copilot-ai-notice-icon[b-l166hithkk] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--adf-text-accent);
}

.copilot-ai-notice a[b-l166hithkk] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.copilot-ai-notice a:hover[b-l166hithkk] {
    text-decoration: underline;
}

.copilot-suggestions[b-l166hithkk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 280px;
}

.copilot-suggestion[b-l166hithkk] {
    padding: 10px 14px;
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    background-color: var(--adf-primary-bg);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: center;
}

.copilot-suggestion:hover[b-l166hithkk] {
    border-color: var(--adf-text-accent);
    background-color: var(--adf-active-bg);
}

/* ── Message bubbles ───────────────────────────────────────────────── */
.copilot-message[b-l166hithkk] {
    display: flex;
    gap: 8px;
    max-width: 100%;
}

.copilot-message.user[b-l166hithkk] {
    flex-direction: row-reverse;
}

.copilot-message-avatar[b-l166hithkk] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--adf-text-accent), #6B4FBB);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 5px;
    color: #ffffff;
}

.copilot-message-avatar svg[b-l166hithkk] {
    width: 16px;
    height: 16px;
}

.copilot-message-content[b-l166hithkk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 85%;
}

.copilot-message-bubble[b-l166hithkk] {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: var(--adf-font-size-sm);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.copilot-message.user .copilot-message-bubble[b-l166hithkk] {
    background-color: var(--adf-text-accent);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.copilot-message.assistant .copilot-message-bubble[b-l166hithkk] {
    background-color: var(--adf-primary-bg);
    color: var(--adf-text-primary);
    border: 1px solid var(--adf-border-light);
    border-bottom-left-radius: 4px;
}

/* Markdown formatting inside bubbles */
.copilot-message-bubble p[b-l166hithkk] {
    margin: 0 0 8px 0;
}

.copilot-message-bubble p:last-child[b-l166hithkk] {
    margin-bottom: 0;
}

.copilot-message-bubble ul[b-l166hithkk] {
    margin: 6px 0;
    padding-left: 18px;
}

.copilot-message-bubble li[b-l166hithkk] {
    margin-bottom: 4px;
}

.copilot-message-bubble strong[b-l166hithkk] {
    font-weight: 600;
}

.copilot-message-time[b-l166hithkk] {
    font-size: 0.7rem;
    color: var(--adf-text-muted);
    padding: 0 4px;
}

.copilot-message.user .copilot-message-time[b-l166hithkk] {
    text-align: right;
}

/* ── Mutating-action approval card ─────────────────────────────────── */
.copilot-approval[b-l166hithkk] {
    margin: 8px 0 4px 0;
    padding: 10px 12px;
    border: 1px solid var(--adf-border-light);
    border-left: 3px solid var(--adf-text-accent);
    border-radius: 8px;
    background-color: var(--adf-active-bg);
    font-size: 0.72rem;
    line-height: 1.5;
}

.copilot-approval.resolved[b-l166hithkk] {
    border-left-color: var(--adf-border-light);
    opacity: 0.75;
}

.copilot-approval-header[b-l166hithkk] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--adf-text-primary);
    margin-bottom: 8px;
}

.copilot-approval-header .bi[b-l166hithkk] {
    color: var(--adf-text-accent);
}

.copilot-approval-details[b-l166hithkk] {
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr;
    gap: 2px 10px;
    margin: 0 0 8px 0;
}

.copilot-approval-details dt[b-l166hithkk] {
    color: var(--adf-text-muted);
    font-weight: 500;
    text-transform: capitalize;
}

.copilot-approval-details dd[b-l166hithkk] {
    margin: 0;
    color: var(--adf-text-secondary);
    word-break: break-word;
}

.copilot-approval-note[b-l166hithkk],
.copilot-approval-outcome[b-l166hithkk] {
    margin: 0;
    color: var(--adf-text-muted);
}

.copilot-approval-buttons[b-l166hithkk] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.copilot-approval-buttons button[b-l166hithkk] {
    flex: 1;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--adf-border-light);
}

.copilot-approval-buttons button:disabled[b-l166hithkk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.copilot-approval-approve[b-l166hithkk] {
    background-color: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
    color: #fff;
}

.copilot-approval-reject[b-l166hithkk] {
    background-color: transparent;
    color: var(--adf-text-secondary);
}

.copilot-approval-reject:hover:not(:disabled)[b-l166hithkk] {
    background-color: var(--adf-primary-bg);
}

/* ── Typing indicator ──────────────────────────────────────────────── */
.copilot-typing[b-l166hithkk] {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.copilot-typing span[b-l166hithkk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--adf-text-muted);
    animation: copilotTypingBounce-b-l166hithkk 1.4s ease-in-out infinite;
}

.copilot-typing span:nth-child(2)[b-l166hithkk] {
    animation-delay: 0.2s;
}

.copilot-typing span:nth-child(3)[b-l166hithkk] {
    animation-delay: 0.4s;
}

@keyframes copilotTypingBounce-b-l166hithkk {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Input area ────────────────────────────────────────────────────── */
.copilot-input-area[b-l166hithkk] {
    padding: 12px;
    border-top: 1px solid var(--adf-border-light);
    background-color: var(--adf-secondary-bg);
    flex-shrink: 0;
}

.copilot-input-wrapper[b-l166hithkk] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background-color: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 8px 8px 8px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.copilot-input-wrapper:focus-within[b-l166hithkk] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 2px var(--adf-focus-shadow);
}

.copilot-input[b-l166hithkk] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    font-family: var(--adf-font-family);
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.copilot-input[b-l166hithkk]::-webkit-scrollbar {
    width: 4px;
}

.copilot-input[b-l166hithkk]::-webkit-scrollbar-thumb {
    background-color: var(--adf-scrollbar-thumb);
    border-radius: 2px;
}

.copilot-input[b-l166hithkk]::-webkit-scrollbar-track {
    background: transparent;
}

.copilot-input[b-l166hithkk]::placeholder {
    color: var(--adf-text-muted);
}

.copilot-send-btn[b-l166hithkk] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background-color: var(--adf-text-accent);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
    padding: 0;
}

.copilot-send-btn:hover:not(:disabled)[b-l166hithkk] {
    background-color: var(--adf-hover-accent);
}

.copilot-send-btn:active:not(:disabled)[b-l166hithkk] {
    transform: scale(0.92);
}

.copilot-send-btn:disabled[b-l166hithkk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.copilot-input-hint[b-l166hithkk] {
    display: block;
    font-size: 0.65rem;
    color: var(--adf-text-muted);
    text-align: center;
    margin-top: 6px;
}

.copilot-input-hint a[b-l166hithkk] {
    color: var(--adf-text-muted);
    text-decoration: underline;
}

.copilot-input-hint a:hover[b-l166hithkk] {
    color: var(--adf-text-accent);
}

/* ── Responsive adjustments ────────────────────────────────────────── */
@media (max-width: 768px) {
    .copilot-panel.floating[b-l166hithkk] {
        right: 8px;
        left: 8px;
        top: 56px;
        bottom: 72px;
        width: auto;
        border-radius: 10px;
    }

    .copilot-trigger-area[b-l166hithkk] {
        bottom: 16px;
        right: 16px;
    }

    .copilot-fab[b-l166hithkk] {
        width: 44px;
        height: 44px;
    }
}

/* ── Tables (used by list_platform_pipelines etc.) ──────────────── */
[b-l166hithkk] .copilot-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.78rem;
    background: var(--adf-secondary-bg, #fff);
    border: 1px solid var(--adf-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}

[b-l166hithkk] .copilot-table thead {
    background: var(--adf-tertiary-bg, #f6f8fa);
}

[b-l166hithkk] .copilot-table th,
[b-l166hithkk] .copilot-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--adf-border, #e0e0e0);
    vertical-align: top;
    word-break: break-word;
}

[b-l166hithkk] .copilot-table th {
    font-weight: 600;
    color: var(--adf-text-primary, #24292f);
}

[b-l166hithkk] .copilot-table tbody tr:last-child td {
    border-bottom: none;
}

[b-l166hithkk] .copilot-table tbody tr:hover {
    background: var(--adf-hover-bg, rgba(0, 0, 0, 0.03));
}

[b-l166hithkk] .copilot-message-bubble code {
    background: var(--adf-tertiary-bg, #f6f8fa);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}
/* /Components/Features/Setup/Editors/JobEditor/JobEditor.razor.rz.scp.css */
/* ========================================
   JOB EDITOR - SPECIFIC STYLES
   ======================================== */
/* Job Editor specific styles.
   Common editor styles are inherited from EditorPanel.razor.css.
   Use class="editor" to apply common styles. */
/* /Components/Features/Setup/Editors/PlatformEditor/PlatformContentionManager.razor.rz.scp.css */
/* Platform Contention Manager Styles */

.platform-contention-manager[b-09bug9kbo7] {
    display: flex;
    flex-direction: column;
    gap: var(--adf-spacing-md);
}

/* Profile Card Styles */
.profile-card[b-09bug9kbo7] {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    transition: all 0.2s ease;
}

.profile-card:hover[b-09bug9kbo7] {
    border-color: var(--adf-border-medium);
    box-shadow: var(--adf-shadow-sm);
}

.profile-info[b-09bug9kbo7] {
    flex: 1;
}

.profile-name[b-09bug9kbo7] {
    font-weight: 600;
    font-size: var(--adf-font-size-base);
    color: var(--adf-text-primary);
    display: flex;
    align-items: center;
    margin-bottom: var(--adf-spacing-xs);
}

.profile-name .icon[b-09bug9kbo7] {
    flex-shrink: 0;
}

.profile-details[b-09bug9kbo7] {
    font-size: var(--adf-font-size-sm);
}

.profile-details small[b-09bug9kbo7] {
    color: var(--adf-text-muted);
}

.profile-actions[b-09bug9kbo7] {
    display: flex;
    gap: var(--adf-spacing-sm);
}

/* Section Styles */
.profile-section .section-title[b-09bug9kbo7] {
    font-size: var(--adf-font-size-base);
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: var(--adf-spacing-md);
    display: flex;
    align-items: center;
}

.profile-section .section-title i[b-09bug9kbo7] {
    color: var(--adf-text-accent);
}

/* Empty State */
.empty-state[b-09bug9kbo7] {
    background-color: var(--adf-secondary-bg);
    border: 1px dashed var(--adf-border-medium);
    border-radius: 6px;
    padding: var(--adf-spacing-xl);
}

.empty-state i[b-09bug9kbo7] {
    color: var(--adf-text-muted);
}

/* Action Section */
.action-section[b-09bug9kbo7] {
    border-top: 1px solid var(--adf-border-light);
}

/* Dark mode specific adjustments */
[data-theme="dark"] .profile-card[b-09bug9kbo7] {
    background-color: var(--adf-tertiary-bg);
}

[data-theme="dark"] .profile-card:hover[b-09bug9kbo7] {
    background-color: var(--adf-hover-bg);
}

[data-theme="dark"] .empty-state[b-09bug9kbo7] {
    background-color: var(--adf-tertiary-bg);
}
/* /Components/Features/Setup/Editors/PlatformEditor/PlatformEditor.razor.rz.scp.css */
/* ========================================
   PLATFORM EDITOR - SPECIFIC STYLES
   ======================================== */
/* Platform Editor specific styles.
   Common editor styles are inherited from EditorPanel.razor.css.
   Use class="editor" to apply common styles.
   
   Currently, Platform Editor uses only common styles.
   Add Platform-specific styles here as needed. */

.beta-notice[b-aistdxvmyp] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: var(--adf-font-size-sm, 0.875rem);
}
/* /Components/Features/Setup/Editors/SecretVaultEditor/SecretVaultEditor.razor.rz.scp.css */
/* ========================================
   SECRET VAULT EDITOR - SPECIFIC STYLES
   ======================================== */
/* Secret Vault Editor specific styles.
   Common editor styles are inherited from EditorPanel.razor.css.
   Use class="editor" to apply common styles.
   
   Currently, Secret Vault Editor uses only common styles.
   Add SecretVault-specific styles here as needed. */
/* /Components/Features/Setup/Editors/Shared/AttributeEditor.razor.rz.scp.css */
/* Attribute Editor Specific Styles */
.attribute-editor[b-5t23m0y2u6] {
    width: 100%;
    margin-bottom: 1.5rem;
}

.attribute-editor h4[b-5t23m0y2u6] {
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

    .attribute-editor .table-container[b-5t23m0y2u6] {
        max-height: 60vh;
        overflow-y: auto;
        border: 1px solid var(--adf-border-light);
        border-radius: 4px;
        background-color: var(--adf-secondary-bg);
        scrollbar-width: thin;
        scrollbar-color: var(--adf-scrollbar-thumb) transparent;
    }

    .attribute-editor .table[b-5t23m0y2u6] {
        margin-bottom: 0;
        background-color: var(--background-light);
    }

        .attribute-editor .table th[b-5t23m0y2u6] {
            background-color: var(--background-dark);
            color: var(--text-light);
            font-weight: 600;
            border-bottom: 2px solid var(--border-color);
            padding: 0.75rem;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .attribute-editor .table td[b-5t23m0y2u6] {
            padding: 0.75rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--adf-border-light);
            background-color: var(--adf-secondary-bg);
        }

.attribute-editor .form-control[b-5t23m0y2u6] {
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
}

.attribute-editor .btn-sm[b-5t23m0y2u6] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 3px;
}

.attribute-editor .btn-success[b-5t23m0y2u6] {
    background-color: var(--adf-success);
    border-color: var(--adf-success);
    color: var(--adf-text-white);
}

.attribute-editor .btn-danger[b-5t23m0y2u6] {
    background-color: var(--adf-error);
    border-color: var(--adf-error);
    color: var(--adf-text-white);
}

.attributes-table td:nth-child(1)[b-5t23m0y2u6] {
    width: 200px;
}

.attributes-table td:nth-child(2)[b-5t23m0y2u6] {
    width: 200px;
}

.attributes-table td:nth-child(3)[b-5t23m0y2u6] {
    width: auto;
}

.attributes-table td:nth-child(4)[b-5t23m0y2u6] {
    width: 250px;
}

.attributes-table td:nth-child(5)[b-5t23m0y2u6] {
    width: 100px;
}

/* Multiline String (textarea) — default-value cell */
.attribute-editor .multiline-string-input[b-5t23m0y2u6] {
    width: 100%;
    min-height: 4rem;
    max-height: 18rem;
    resize: vertical;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 2;
}

/* Mobile: make tables horizontally scrollable */
@media (max-width: 768px) {
    .attribute-editor .table-container[b-5t23m0y2u6] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .attribute-editor .table th[b-5t23m0y2u6],
    .attribute-editor .table td[b-5t23m0y2u6] {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    .attribute-editor .attributes-table td:nth-child(1)[b-5t23m0y2u6],
    .attribute-editor .attributes-table td:nth-child(2)[b-5t23m0y2u6],
    .attribute-editor .attributes-table td:nth-child(4)[b-5t23m0y2u6] {
        min-width: 140px;
        width: auto;
    }

    .attribute-editor .form-control[b-5t23m0y2u6] {
        font-size: 1rem; /* Prevent iOS zoom */
        min-height: 44px;
    }
}
/* /Components/Features/Setup/Editors/Shared/AttributeValueEditor.razor.rz.scp.css */
/* Attribute Value Editor Specific Styles */
.attribute-value-editor[b-lkhxwwdplv] {
    width: 100%;
    margin-bottom: 1.5rem;
}

    .attribute-value-editor h4[b-lkhxwwdplv] {
        color: var(--adf-text-primary);
        font-weight: 600;
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }

    .attribute-value-editor .table-container[b-lkhxwwdplv] {
        max-height: 60vh;
        overflow-y: auto;
        border: 1px solid var(--adf-border-light);
        border-radius: 4px;
        background-color: var(--adf-secondary-bg);
        scrollbar-width: thin;
        scrollbar-color: var(--adf-scrollbar-thumb) transparent;
    }

        .attribute-value-editor .table-container[b-lkhxwwdplv]::-webkit-scrollbar {
            width: 8px;
        }

        .attribute-value-editor .table-container[b-lkhxwwdplv]::-webkit-scrollbar-track {
            background: transparent;
        }

        .attribute-value-editor .table-container[b-lkhxwwdplv]::-webkit-scrollbar-thumb {
            background-color: var(--accent-grey);
            border-radius: 4px;
        }

            .attribute-value-editor .table-container[b-lkhxwwdplv]::-webkit-scrollbar-thumb:hover {
                background-color: var(--accent-blue);
            }

    .attribute-value-editor .table[b-lkhxwwdplv] {
        margin-bottom: 0;
        background-color: var(--adf-secondary-bg);
        color: var(--adf-text-primary);
    }

        .attribute-value-editor .table th[b-lkhxwwdplv] {
            background-color: var(--adf-tertiary-bg);
            color: var(--adf-text-primary);
            font-weight: 600;
            border-bottom: 2px solid var(--adf-border-medium);
            padding: 0.75rem;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .attribute-value-editor .table td[b-lkhxwwdplv] {
            padding: 0.75rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--adf-border-light);
            background-color: var(--adf-secondary-bg);
            color: var(--adf-text-primary);
        }

.attributes-table td:nth-child(1)[b-lkhxwwdplv] {
    width: 200px;
}

.attributes-table td:nth-child(2)[b-lkhxwwdplv] {
    width: auto;
}

    .attribute-value-editor .form-control[b-lkhxwwdplv] {
        border: 1px solid var(--adf-border-medium);
        border-radius: 4px;
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
        background-color: var(--adf-secondary-bg);
        color: var(--adf-text-primary);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

        .attribute-value-editor .form-control:hover:not(:disabled)[b-lkhxwwdplv] {
            border-color: var(--adf-text-accent);
        }

        .attribute-value-editor .form-control:focus[b-lkhxwwdplv] {
            border-color: var(--adf-focus-border);
            box-shadow: var(--adf-focus-shadow);
            outline: none;
        }

        /* Validation states - invalid inputs */
        .attribute-value-editor .form-control.invalid[b-lkhxwwdplv],
        .attribute-value-editor .form-control.is-invalid[b-lkhxwwdplv],
        .attribute-value-editor input.invalid[b-lkhxwwdplv],
        .attribute-value-editor input.is-invalid[b-lkhxwwdplv],
        .attribute-value-editor select.invalid[b-lkhxwwdplv],
        .attribute-value-editor select.is-invalid[b-lkhxwwdplv],
        .attribute-value-editor textarea.invalid[b-lkhxwwdplv],
        .attribute-value-editor textarea.is-invalid[b-lkhxwwdplv] {
            border-color: var(--adf-error) !important;
            background-color: var(--adf-secondary-bg);
        }

        .attribute-value-editor .form-control.invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor .form-control.is-invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor input.invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor input.is-invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor select.invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor select.is-invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor textarea.invalid:focus[b-lkhxwwdplv],
        .attribute-value-editor textarea.is-invalid:focus[b-lkhxwwdplv] {
            border-color: var(--adf-error) !important;
            box-shadow: 0 0 0 0.2rem var(--adf-error-shadow) !important;
        }

        /* Also target modified invalid state */
        .attribute-value-editor .form-control.modified.invalid[b-lkhxwwdplv],
        .attribute-value-editor .form-control.modified.is-invalid[b-lkhxwwdplv],
        .attribute-value-editor input.modified.invalid[b-lkhxwwdplv],
        .attribute-value-editor input.modified.is-invalid[b-lkhxwwdplv],
        .attribute-value-editor select.modified.invalid[b-lkhxwwdplv],
        .attribute-value-editor select.modified.is-invalid[b-lkhxwwdplv] {
            border-color: var(--adf-error) !important;
        }

        /* Target validation error state when there's a sibling validation message */
        .attribute-value-editor .form-control:has(+ .validation-message)[b-lkhxwwdplv],
        .attribute-value-editor input:has(+ .validation-message)[b-lkhxwwdplv],
        .attribute-value-editor select:has(+ .validation-message)[b-lkhxwwdplv] {
            border-color: var(--adf-error) !important;
        }

        /* Parent div has validation message */
        .attribute-value-editor div:has(> .validation-message) > .form-control[b-lkhxwwdplv],
        .attribute-value-editor div:has(> .validation-message) > input[b-lkhxwwdplv],
        .attribute-value-editor div:has(> .validation-message) > select[b-lkhxwwdplv] {
            border-color: var(--adf-error) !important;
        }

        .attribute-value-editor .form-control:disabled[b-lkhxwwdplv] {
            background-color: var(--adf-tertiary-bg);
            color: var(--adf-text-muted);
            cursor: not-allowed;
            opacity: 0.6;
        }

        .attribute-value-editor .form-control option[b-lkhxwwdplv] {
            background-color: var(--adf-secondary-bg);
            color: var(--adf-text-primary);
            padding: 0.4rem 0.6rem;
        }

        .attribute-value-editor .form-control option:hover[b-lkhxwwdplv] {
            background-color: var(--adf-hover-bg);
        }

        .attribute-value-editor .form-control option:checked[b-lkhxwwdplv] {
            background-color: var(--adf-active-bg);
            color: var(--adf-text-accent);
        }

    .attribute-value-editor .btn-sm[b-lkhxwwdplv] {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 3px;
    }

/* Multiline String (textarea) */
.attribute-value-editor .multiline-string-field[b-lkhxwwdplv] {
    width: 100%;
}

.attribute-value-editor .multiline-string-input[b-lkhxwwdplv] {
    width: 100%;
    min-height: 4rem;
    max-height: 24rem;
    resize: vertical;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 2;
}

/* Category Sections */
.attribute-category-section[b-lkhxwwdplv] {
    margin-bottom: 1.5rem;
}

.attribute-category-header[b-lkhxwwdplv] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--adf-border-medium);
    border-bottom: 2px solid var(--adf-text-accent);
}

    .attribute-category-section .table[b-lkhxwwdplv] {
        margin-bottom: 0;
        border-radius: 0 0 4px 4px;
    }

        .attribute-category-section .table tbody tr:last-child td[b-lkhxwwdplv] {
            border-bottom: none;
        }

/* Certificate Upload Styles */
.attribute-value-editor .form-control[type="file"][b-lkhxwwdplv] {
    padding: 0.375rem 0.6rem;
    cursor: pointer;
}

    .attribute-value-editor .form-control[type="file"][b-lkhxwwdplv]::-webkit-file-upload-button {
        padding: 0.25rem 0.75rem;
        margin-right: 0.75rem;
        background-color: var(--adf-text-accent);
        color: var(--adf-text-white);
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 0.875rem;
        transition: background-color 0.2s ease;
    }

        .attribute-value-editor .form-control[type="file"][b-lkhxwwdplv]::-webkit-file-upload-button:hover {
            background-color: var(--theme-hover-bg-color);
        }

    .attribute-value-editor .form-control[type="file"]:disabled[b-lkhxwwdplv]::-webkit-file-upload-button {
        background-color: var(--adf-tertiary-bg);
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Validation message styling */
.attribute-value-editor .validation-message[b-lkhxwwdplv],
.attribute-value-editor .invalid-feedback[b-lkhxwwdplv] {
    color: var(--adf-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.attribute-value-editor .text-danger[b-lkhxwwdplv] {
    color: var(--adf-error) !important;
}

/* Secret Input Integration - Compact table cell styling */
.attribute-value-editor .attributes-table td[b-lkhxwwdplv] {
    padding: 0.5rem 0.75rem;
}

/* Override SecretInput spacing within table cells for compactness */
.attributes-table[b-lkhxwwdplv]  .secret-input-container {
    gap: 0.375rem;
}

.attributes-table[b-lkhxwwdplv]  .secret-mode-selector {
    margin-bottom: 0;
}

.attributes-table[b-lkhxwwdplv]  .secret-vault-inputs {
    gap: 0.375rem;
}

/* Ensure form controls inside secret input match the design */
.attributes-table[b-lkhxwwdplv]  .secret-input-container .form-control,
.attributes-table[b-lkhxwwdplv]  .secret-input-container .form-select {
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.attributes-table[b-lkhxwwdplv]  .secret-input-container .form-control:hover:not(:disabled),
.attributes-table[b-lkhxwwdplv]  .secret-input-container .form-select:hover:not(:disabled) {
    border-color: var(--adf-text-accent);
}

.attributes-table[b-lkhxwwdplv]  .secret-input-container .form-control:focus,
.attributes-table[b-lkhxwwdplv]  .secret-input-container .form-select:focus {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 0.1rem var(--adf-focus-shadow);
}

/* Mobile: make tables horizontally scrollable and inputs accessible */
@media (max-width: 768px) {
    .attribute-value-editor .table-container[b-lkhxwwdplv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .attribute-value-editor .table th[b-lkhxwwdplv],
    .attribute-value-editor .table td[b-lkhxwwdplv] {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    .attribute-value-editor .attributes-table td:nth-child(1)[b-lkhxwwdplv] {
        min-width: 140px;
        width: auto;
    }

    .attribute-value-editor .form-control[b-lkhxwwdplv] {
        font-size: 1rem; /* Prevent iOS zoom */
        min-height: 44px;
    }

    .attribute-value-editor .btn-sm[b-lkhxwwdplv] {
        min-height: 44px;
        min-width: 44px;
    }

    .attribute-category-header[b-lkhxwwdplv] {
        font-size: 0.875rem;
        padding: 0.5rem;
    }
}
/* /Components/Features/Setup/Editors/TaskEditor/TaskDependencyDiagramBlazorDiagrams.razor.rz.scp.css */
.task-dependency-diagram-blazor .diagram-wrapper[b-1q2q946416] {
    min-height: 200px;
}

.task-dependency-diagram-blazor .diagram-controls[b-1q2q946416] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.task-dependency-diagram-blazor .diagram-canvas-wrapper[b-1q2q946416] {
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    height: clamp(280px, 40vh, 480px);
    overflow: hidden;
    position: relative;
}

.task-dependency-diagram-blazor .task-diagram-canvas[b-1q2q946416] {
    height: 100%;
    width: 100%;
    background: var(--adf-primary-bg);
}

/* Empty State - aligned with TaskDependencyEditor empty-state */
.empty-diagram[b-1q2q946416],
.diagram-error[b-1q2q946416] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--adf-text-secondary);
    min-height: clamp(180px, 30vh, 300px);
}

.empty-diagram i[b-1q2q946416],
.diagram-error i[b-1q2q946416] {
    opacity: 0.5;
}
/* /Components/Features/Setup/Editors/TaskEditor/TaskDependencyEditor.razor.rz.scp.css */
/* Task Dependency Editor Styles */
.task-dependency-editor[b-4hh1xex7uj] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.task-dependency-editor h5[b-4hh1xex7uj] {
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Dependencies List */
.dependencies-list[b-4hh1xex7uj] {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-right: -0.5rem;
}

/* Dependency Sections */
.dependency-section[b-4hh1xex7uj] {
    margin-bottom: 1.5rem;
}

.section-title[b-4hh1xex7uj] {
    color: var(--adf-text-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.section-title i[b-4hh1xex7uj] {
    color: var(--adf-text-secondary);
}

.section-title .badge[b-4hh1xex7uj] {
    font-size: 0.75rem;
}

/* Dependency Cards */
.dependency-card[b-4hh1xex7uj] {
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    transition: all 0.2s ease;
    background: var(--adf-primary-bg);
}

.dependency-card:hover[b-4hh1xex7uj] {
    border-color: var(--adf-accent-primary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
    transform: translateY(-1px);
}

.dependency-card .card-body[b-4hh1xex7uj] {
    background: transparent;
}

/* Dependency Info */
.dependency-info[b-4hh1xex7uj] {
    flex: 1;
    min-width: 0;
}

.task-name[b-4hh1xex7uj] {
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dependency-details[b-4hh1xex7uj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dependency-details .badge[b-4hh1xex7uj] {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Dependency Actions */
.dependency-actions[b-4hh1xex7uj] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.dependency-actions .btn[b-4hh1xex7uj] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Empty State */
.empty-state[b-4hh1xex7uj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--adf-text-secondary);
}

.empty-state i[b-4hh1xex7uj] {
    opacity: 0.5;
}

/* Action Section */
.action-section[b-4hh1xex7uj] {
    flex-shrink: 0;
    border-top: 1px solid var(--adf-border-light);
}

.action-section .btn[b-4hh1xex7uj] {
    font-weight: 500;
}

/* Scrollbar Styling */
.dependencies-list[b-4hh1xex7uj]::-webkit-scrollbar {
    width: 4px;
}

.dependencies-list[b-4hh1xex7uj]::-webkit-scrollbar-track {
    background: var(--adf-tertiary-bg);
}

.dependencies-list[b-4hh1xex7uj]::-webkit-scrollbar-thumb {
    background: var(--adf-border-light);
    border-radius: 2px;
}

.dependencies-list[b-4hh1xex7uj]::-webkit-scrollbar-thumb:hover {
    background: var(--adf-text-secondary);
}

.parameter-mapping-section[b-4hh1xex7uj] {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

.parameter-mapping-section h6[b-4hh1xex7uj] {
    color: var(--text-light);
    font-weight: 600;
}

.parameter-mapping-section .table[b-4hh1xex7uj] {
    margin-bottom: 0;
}

.parameter-mapping-section .table th[b-4hh1xex7uj] {
    background-color: var(--background-dark);
    color: var(--text-light);
    border-bottom: 2px solid var(--border-color);
    padding: 0.5rem;
    font-weight: 600;
}

.parameter-mapping-section .table td[b-4hh1xex7uj] {
    padding: 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.btn-group .btn-check:checked + .btn-outline-primary[b-4hh1xex7uj] {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.modal[b-4hh1xex7uj] {
    z-index: 1060;
}

.modal-dialog[b-4hh1xex7uj] {
    max-width: 800px;
}

.form-text.text-muted[b-4hh1xex7uj] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dependency-card .row[b-4hh1xex7uj] {
        flex-direction: column;
    }
    
    .dependency-card .col-md-2[b-4hh1xex7uj] {
        margin-top: 0.5rem;
        text-align: left !important;
    }
    
    .modal-dialog[b-4hh1xex7uj] {
        max-width: 95%;
    }
}
/* /Components/Features/Setup/Editors/TaskEditor/TaskDependencyModalEditor.razor.rz.scp.css */
/* Task Dependency Modal Editor Styles */
.task-dependency-modal-editor .modal-header[b-vgi8wt56bz] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    border-bottom: 1px solid var(--adf-border-light);
}

.task-dependency-modal-editor .modal-body[b-vgi8wt56bz] {
    padding: 1.5rem;
    background-color: var(--adf-secondary-bg);
}

.task-dependency-modal-editor .form-label[b-vgi8wt56bz] {
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 0.5rem;
}

.dependency-type-selector[b-vgi8wt56bz] {
    margin-bottom: 1.5rem;
}

.dependency-type-selector .btn-group[b-vgi8wt56bz] {
    width: 100%;
}

.dependency-type-selector .btn[b-vgi8wt56bz] {
    flex: 1;
}

.form-section[b-vgi8wt56bz] {
    margin-bottom: 1.5rem;
}

.form-section h6[b-vgi8wt56bz] {
    color: var(--adf-text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--adf-border-light);
}

.parameter-mapping-table[b-vgi8wt56bz] {
    border: 1px solid var(--adf-border-light);
    border-radius: 0.375rem;
    overflow: hidden;
}

.parameter-mapping-table .table[b-vgi8wt56bz] {
    margin-bottom: 0;
}

.parameter-mapping-table .table thead th[b-vgi8wt56bz] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    border-bottom: 2px solid var(--adf-border-light);
    padding: 0.75rem;
    font-weight: 600;
}

.parameter-mapping-table .table tbody td[b-vgi8wt56bz] {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--adf-border-light);
    background-color: var(--adf-secondary-bg);
}

.parameter-mapping-table .table tbody tr:last-child td[b-vgi8wt56bz] {
    border-bottom: none;
}

.parameter-mapping-table .table tbody tr:hover[b-vgi8wt56bz] {
    background-color: var(--adf-hover-bg);
}

.parameter-name[b-vgi8wt56bz] {
    font-weight: 500;
    color: var(--adf-text-primary);
}

.parameter-type[b-vgi8wt56bz] {
    font-size: 0.875rem;
    color: var(--adf-text-muted);
    font-style: italic;
}

.form-select[b-vgi8wt56bz] {
    border: 1px solid var(--adf-border-medium);
    border-radius: 0.375rem;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
}

.form-select:focus[b-vgi8wt56bz] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 0.2rem var(--adf-focus-shadow);
}

.unmapped-parameter[b-vgi8wt56bz] {
    opacity: 0.6;
}

.mapped-parameter[b-vgi8wt56bz] {
    background-color: var(--adf-success-light);
}

.empty-state[b-vgi8wt56bz] {
    text-align: center;
    padding: 2rem;
    color: var(--adf-text-muted);
}

.empty-state i[b-vgi8wt56bz] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Parameter Mapping Cards */
.parameter-mapping-section[b-vgi8wt56bz] {
    margin-top: 1.5rem;
}

.parameter-mapping-cards[b-vgi8wt56bz] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.parameter-card[b-vgi8wt56bz] {
    transition: all 0.2s ease-in-out;
}

.parameter-card.mapped .card[b-vgi8wt56bz] {
    border-left: 4px solid var(--adf-success);
    background-color: var(--adf-success-light);
}

.parameter-card.unmapped .card[b-vgi8wt56bz] {
    border-left: 4px solid var(--adf-warning);
    background-color: var(--adf-warning-light);
}

.parameter-card .card[b-vgi8wt56bz] {
    border: 1px solid var(--adf-border-light);
    border-radius: 0.5rem;
    background-color: var(--adf-secondary-bg);
    transition: box-shadow 0.2s ease-in-out;
}

.parameter-card .card:hover[b-vgi8wt56bz] {
    box-shadow: var(--adf-shadow-md);
}

.parameter-info[b-vgi8wt56bz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.parameter-name[b-vgi8wt56bz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.mapping-status[b-vgi8wt56bz] {
    display: inline-flex;
    align-items: center;
}

.mapping-status i[b-vgi8wt56bz] {
    font-size: 0.875rem;
}

.parent-parameter-selection .form-select[b-vgi8wt56bz] {
    border: 1px solid var(--adf-border-medium);
    border-radius: 0.375rem;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    transition: border-color 0.2s ease-in-out;
}

.parent-parameter-selection .form-select:focus[b-vgi8wt56bz] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 0.2rem var(--adf-focus-shadow);
}

.parameter-card.mapped .parent-parameter-selection .form-select[b-vgi8wt56bz] {
    border-color: var(--adf-success);
}

.parameter-card.unmapped .parent-parameter-selection .form-select[b-vgi8wt56bz] {
    border-color: var(--adf-warning);
}

/* Parameter mapping summary */
.parameter-mapping-section .d-flex .text-muted[b-vgi8wt56bz] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--adf-text-muted);
}

/* Clear mapping button */
.parameter-card .btn-outline-secondary[b-vgi8wt56bz] {
    border-color: var(--adf-border-medium);
    color: var(--adf-text-secondary);
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.parameter-card .btn-outline-secondary:hover[b-vgi8wt56bz] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
    color: var(--adf-text-primary);
}

/* Arrow styling */
.parameter-card .fa-arrow-left[b-vgi8wt56bz] {
    font-size: 1.25rem;
    opacity: 0.6;
    color: var(--adf-text-muted);
}

.parameter-card.mapped .fa-arrow-left[b-vgi8wt56bz] {
    color: var(--adf-success);
    opacity: 0.8;
}

/* Alert styling for dark mode support */
.parameter-mapping-section .alert[b-vgi8wt56bz] {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    color: var(--adf-text-primary);
}

.parameter-mapping-section .alert-info[b-vgi8wt56bz] {
    background-color: var(--adf-info-light);
    border-left: 4px solid var(--adf-info);
    color: var(--adf-text-primary);
}

.parameter-mapping-section .alert-warning[b-vgi8wt56bz] {
    background-color: var(--adf-warning-light);
    border-left: 4px solid var(--adf-warning);
    color: var(--adf-text-primary);
}

.parameter-mapping-section .alert i[b-vgi8wt56bz] {
    color: inherit;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .task-dependency-modal-editor .modal-dialog[b-vgi8wt56bz] {
        margin: 0.5rem;
    }
    
    .parameter-mapping-table[b-vgi8wt56bz] {
        font-size: 0.875rem;
    }
    
    .parameter-mapping-table .table thead th[b-vgi8wt56bz],
    .parameter-mapping-table .table tbody td[b-vgi8wt56bz] {
        padding: 0.5rem;
    }

    .parameter-card .card-body[b-vgi8wt56bz] {
        padding: 1rem;
    }

    .parameter-card .row[b-vgi8wt56bz] {
        align-items: stretch;
    }

    .parameter-card .col-md-4[b-vgi8wt56bz],
    .parameter-card .col-md-6[b-vgi8wt56bz] {
        margin-bottom: 0.75rem;
    }

    .parameter-mapping-cards[b-vgi8wt56bz] {
        max-height: 300px;
    }
}
/* /Components/Features/Setup/Editors/TaskEditor/TaskDependencyNodeWidget.razor.rz.scp.css */
.task-dependency-node[b-oecjo061xn] {
    align-items: center;
    background: #ffffff;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #111;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    font-size: 0.85rem;
    font-weight: 600;
    justify-content: center;
    min-height: 100px;
    width: 180px;
    max-width: 180px;
    padding: 12px 16px;
    text-align: center;
    user-select: none;
    gap: 6px;
}

.task-dependency-node.current[b-oecjo061xn] {
    background: #ff9500;
    border-color: #cc7700;
    color: #000;
}

.task-dependency-node.parent[b-oecjo061xn] {
    background: #e3f2fd;
    border-color: #1976d2;
}

.task-dependency-node.child[b-oecjo061xn] {
    background: #f3e5f5;
    border-color: #7b1fa2;
}

.task-dependency-node-icon[b-oecjo061xn] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    margin-bottom: 4px;
}

.task-dependency-node-id[b-oecjo061xn] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #666;
    line-height: 1.2;
}

.task-dependency-node-title[b-oecjo061xn] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
/* /Components/Features/Setup/Editors/TaskEditor/TaskEditor.razor.rz.scp.css */
/* ========================================
   TASK EDITOR - SPECIFIC STYLES
   ======================================== */
/* Task Editor specific styles.
   Common editor styles are inherited from EditorPanel.razor.css.
   Use class="editor" to apply common styles. */

/* ========================================
   DEPENDENCIES LAYOUT STYLES
   ======================================== */
/* Task-specific layout for dependencies tab with split/stacked views */

.dependencies-layout[b-s2tj6fg5dt] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dependencies-header[b-s2tj6fg5dt] {
    flex-shrink: 0;
    border-bottom: 1px solid var(--adf-border-light);
    margin-bottom: 1rem;
}

.layout-controls .btn[b-s2tj6fg5dt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dependencies-container[b-s2tj6fg5dt] {
    flex: 1;
    display: flex;
    gap: 1rem;
    min-height: 0; /* Important for flexbox */
    max-height: calc(80vh - 160px);
}

/* Split Layout (side by side) */
.dependencies-container.layout-split[b-s2tj6fg5dt] {
    flex-direction: row;
}

.dependencies-container.layout-split .dependencies-editor-panel[b-s2tj6fg5dt] {
    flex: 0 0 45%;
    min-width: 400px;
}

.dependencies-container.layout-split .dependencies-diagram-panel[b-s2tj6fg5dt] {
    flex: 1;
    min-width: 300px;
}

/* Stacked Layout (vertical)
   The dependency list grows to its full natural height (no inner scroll); the diagram panel
   sits beneath at a fixed height. The outer .editor-display-area provides the page scroll. */
.dependencies-container.layout-stacked[b-s2tj6fg5dt] {
    display: block;        /* opt out of flex so children stack as normal blocks */
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
}

.dependencies-container.layout-stacked .dependencies-editor-panel[b-s2tj6fg5dt] {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    margin-bottom: 1rem;
}

.dependencies-container.layout-stacked .dependencies-editor-panel .panel-content[b-s2tj6fg5dt] {
    overflow: visible;
    height: auto;
    max-height: none;
}

/* Defeat the inner scroll on the dependency list when stacked so the full list is visible. */
.dependencies-container.layout-stacked .dependencies-editor-panel[b-s2tj6fg5dt]  .dependencies-list {
    overflow: visible;
    height: auto;
    max-height: none;
}

.dependencies-container.layout-stacked .dependencies-diagram-panel[b-s2tj6fg5dt] {
    display: block;
    width: 100%;
    height: clamp(360px, 60vh, 600px);
    min-height: 360px;
}

/* Panel Styles */
.dependencies-editor-panel[b-s2tj6fg5dt],
.dependencies-diagram-panel[b-s2tj6fg5dt] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header[b-s2tj6fg5dt] {
    background: var(--adf-tertiary-bg);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--adf-border-light);
    flex-shrink: 0;
}

.panel-header h6[b-s2tj6fg5dt] {
    margin: 0;
    color: var(--adf-text-primary);
    font-weight: 600;
}

.panel-content[b-s2tj6fg5dt] {
    flex: 1;
    padding: 1rem;
    overflow: auto;
    min-height: 0; /* Important for flexbox scrolling */
}

/* Responsive Design for Dependencies Layout */
@media (max-width: 1200px) {
    .dependencies-container.layout-split[b-s2tj6fg5dt] {
        flex-direction: column;
    }
    
    .dependencies-container.layout-split .dependencies-editor-panel[b-s2tj6fg5dt] {
        flex: 0 0 auto;
        max-height: 50vh;
        min-width: auto;
    }
    
    .dependencies-container.layout-split .dependencies-diagram-panel[b-s2tj6fg5dt] {
        flex: 1;
        min-width: auto;
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .dependencies-container[b-s2tj6fg5dt] {
        gap: 0.5rem;
    }
    
    .panel-content[b-s2tj6fg5dt] {
        padding: 0.75rem;
    }
    
    .layout-controls .btn[b-s2tj6fg5dt] {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   RUNTIME SETTINGS TAB STYLES
   ======================================== */
/* Styles for attribute category sections in Runtime Settings tab */

.attribute-category-section[b-s2tj6fg5dt] {
    margin-bottom: 1.5rem;
}

.attribute-category-header[b-s2tj6fg5dt] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--adf-border-medium);
    border-bottom: 2px solid var(--adf-text-accent);
}

.attribute-category-section .table[b-s2tj6fg5dt] {
    margin-bottom: 0;
    border-radius: 0 0 4px 4px;
}

.attribute-category-section .table tbody tr:last-child td[b-s2tj6fg5dt] {
    border-bottom: none;
}

.attributes-table td[b-s2tj6fg5dt] {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--adf-border-light);
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
}

.attributes-table td:nth-child(1)[b-s2tj6fg5dt] {
    width: 30%;
}

.attributes-table td:nth-child(2)[b-s2tj6fg5dt] {
    width: 70%;
}
/* /Components/Features/Setup/Editors/TaskEditor/TaskScheduleEditor.razor.rz.scp.css */
/* Task Schedule Editor Styles */
.task-schedule-editor[b-oynkl9jt67] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.task-schedule-editor h5[b-oynkl9jt67] {
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Schedules List */
.schedules-list[b-oynkl9jt67] {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    margin-right: -0.5rem;
}

/* Schedule Cards */
.schedule-card[b-oynkl9jt67] {
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    transition: all 0.2s ease;
    background: var(--adf-primary-bg);
}

.schedule-card:hover[b-oynkl9jt67] {
    border-color: var(--adf-accent-primary);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.1);
    transform: translateY(-1px);
}

.schedule-card .card-body[b-oynkl9jt67] {
    background: transparent;
}

/* Schedule Info */
.schedule-info[b-oynkl9jt67] {
    flex: 1;
    min-width: 0;
}

.schedule-name[b-oynkl9jt67] {
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-details[b-oynkl9jt67] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.schedule-details .badge[b-oynkl9jt67] {
    font-size: 0.75rem;
    font-weight: 500;
}

.schedule-details code[b-oynkl9jt67] {
    font-size: 0.875rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

/* Schedule Actions */
.schedule-actions[b-oynkl9jt67] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.schedule-actions .btn[b-oynkl9jt67] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Empty State */
.empty-state[b-oynkl9jt67] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--adf-text-secondary);
}

.empty-state i[b-oynkl9jt67] {
    opacity: 0.5;
}

/* Action Section */
.action-section[b-oynkl9jt67] {
    flex-shrink: 0;
    border-top: 1px solid var(--adf-border-light);
}

.action-section .btn[b-oynkl9jt67] {
    font-weight: 500;
}

/* Scrollbar Styling */
.schedules-list[b-oynkl9jt67]::-webkit-scrollbar {
    width: 4px;
}

.schedules-list[b-oynkl9jt67]::-webkit-scrollbar-track {
    background: var(--adf-tertiary-bg);
}

.schedules-list[b-oynkl9jt67]::-webkit-scrollbar-thumb {
    background: var(--adf-border-light);
    border-radius: 2px;
}

.schedules-list[b-oynkl9jt67]::-webkit-scrollbar-thumb:hover {
    background: var(--adf-text-secondary);
}

/* Modal Styles */
.modal[b-oynkl9jt67] {
    z-index: 1060;
}

.modal-dialog[b-oynkl9jt67] {
    max-width: 800px;
}

/* Schedule Editor Form in Modal */
.schedule-editor-form .form-label[b-oynkl9jt67] {
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 0.5rem;
}

.schedule-editor-form .form-control[b-oynkl9jt67],
.schedule-editor-form .form-select[b-oynkl9jt67] {
    border: 1px solid var(--adf-border-light);
    border-radius: 4px;
}

.schedule-editor-form .form-control:focus[b-oynkl9jt67],
.schedule-editor-form .form-select:focus[b-oynkl9jt67] {
    border-color: var(--adf-accent-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.15);
}

.schedule-editor-form .alert[b-oynkl9jt67] {
    font-size: 0.875rem;
    padding: 0.75rem;
    border-radius: 6px;
}

.schedule-editor-form .alert-info[b-oynkl9jt67] {
    background-color: rgba(0, 120, 212, 0.1);
    border-color: rgba(0, 120, 212, 0.2);
    color: var(--adf-accent-primary);
}

.schedule-editor-form .alert-light[b-oynkl9jt67] {
    background-color: var(--adf-tertiary-bg);
    border-color: var(--adf-border-light);
}

.schedule-editor-form code[b-oynkl9jt67] {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.schedule-editor-form .input-group .btn[b-oynkl9jt67] {
    border-color: var(--adf-border-light);
}

.schedule-editor-form .invalid-feedback[b-oynkl9jt67] {
    font-size: 0.875rem;
}

.form-check-label[b-oynkl9jt67] {
    font-weight: 500;
    color: var(--adf-text-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .schedule-details[b-oynkl9jt67] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .modal-dialog[b-oynkl9jt67] {
        max-width: 95%;
    }
    
    .schedule-card .d-flex[b-oynkl9jt67] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .schedule-actions[b-oynkl9jt67] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Features/Setup/Navigation/SetupCategoryContextMenu.razor.rz.scp.css */
.setup-category-context-menu[b-21wgy6amit] {
    position: relative;
    font-family: var(--adf-font-family);
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
}

.setup-category-context-menu .btn[b-21wgy6amit] {
    padding: 0.25rem;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-light);
    opacity: 0.8;
    transition: all 0.2s ease;
    font-size: 1rem;
    line-height: 1;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    z-index: 100;
}

.setup-category-context-menu .btn:hover[b-21wgy6amit],
.setup-category-context-menu:hover .btn[b-21wgy6amit] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--adf-text-primary);
    z-index: 100;
    transform: scale(1.1);
}

.setup-category-context-menu-dropdown[b-21wgy6amit] {
    display: block !important;
    position: absolute;
    z-index: 10000;
    top: 100%;
    right: 0;
    min-width: 140px;
    max-width: 180px;
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary);
    box-shadow: var(--adf-shadow-lg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 6px;
    animation: fadeIn-b-21wgy6amit 0.15s ease-in-out;
    overflow: visible;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    opacity: 1 !important;
}

.setup-category-context-menu-item[b-21wgy6amit] {
    width: 100%;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    list-style: none;
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary);
    border: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.15s ease;
    opacity: 1 !important;
}

.setup-category-context-menu-item:hover[b-21wgy6amit] {
    background-color: var(--adf-hover-bg) !important;
    color: var(--adf-text-primary);
}

.setup-category-context-menu-item i[b-21wgy6amit] {
    width: 14px;
    font-size: 0.75rem;
}

@keyframes fadeIn-b-21wgy6amit {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile: larger touch targets */
@media (max-width: 768px) {
    .setup-category-context-menu .btn[b-21wgy6amit] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .setup-category-context-menu-item[b-21wgy6amit] {
        padding: 0.85rem 1rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .setup-category-context-menu-dropdown[b-21wgy6amit] {
        min-width: 160px;
    }
}
/* /Components/Features/Setup/Navigation/SetupNavigationPane.razor.rz.scp.css */
/* Navigation Pane - ADF IDE Style with Enhanced Collapse */

/* ── Setup Nav Header: always visible, mirrors main NavMenu top-row ── */
.setup-nav-header[b-ox7enum20f] {
    min-height: var(--adf-header-height);
    background-color: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--adf-spacing-lg);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

.is-collapsed .setup-nav-header[b-ox7enum20f] {
    justify-content: center;
    padding: 0 var(--adf-spacing-sm);
}

.setup-nav-title[b-ox7enum20f] {
    font-size: var(--adf-font-size-sm);
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
}

/* Matches the main NavMenu .nav-collapse-btn size exactly */
.setup-nav-collapse-btn[b-ox7enum20f] {
    background-color: var(--adf-secondary-bg) !important;
    border: 1px solid var(--adf-border-medium) !important;
    color: var(--adf-text-primary) !important;
    font-size: var(--adf-font-size-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    border-radius: 4px;
    line-height: 1.5;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.setup-nav-collapse-btn:hover[b-ox7enum20f] {
    background-color: var(--adf-hover-bg) !important;
    border-color: var(--adf-border-dark) !important;
}

.setup-nav-collapse-btn .expand-icon[b-ox7enum20f],
.setup-nav-collapse-btn .collapse-icon[b-ox7enum20f] {
    font-size: 0.75rem;
    font-weight: bold;
}

/* ── Nav content wrapper: fades out before the pane collapses ── */
.setup-nav-content[b-ox7enum20f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.setup-nav-content--hidden[b-ox7enum20f] {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.nav-pane[b-ox7enum20f] {
    font-family: var(--adf-font-family);
    background-color: var(--adf-nav-bg);
    border-right: 1px solid var(--adf-nav-border);
    padding: 0;
    padding-right: var(--adf-spacing-sm); /* Add right padding to prevent content from touching border */
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: visible; /* Allow dropdowns to show outside */
    display: flex;
    flex-direction: column;
    position: relative; /* Ensure context menus position correctly */
}

/* Search Container */
.search-container[b-ox7enum20f] {
    padding: var(--adf-spacing-md);
    background-color: var(--adf-nav-bg);
    border-bottom: 1px solid var(--adf-border-light);
    position: sticky;
    top: 0;
    z-index: 10;
}

.search-container .input-group[b-ox7enum20f] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-container .input-group-text[b-ox7enum20f] {
    background-color: var(--adf-input-bg);
    border: 1px solid var(--adf-input-border);
    border-right: none;
    color: var(--adf-text-muted);
}

.search-container .form-control[b-ox7enum20f] {
    background-color: var(--adf-input-bg);
    color: var(--adf-text-primary);
    border: 1px solid var(--adf-input-border);
    border-left: none;
    border-right: none;
}

.search-container .form-control:focus[b-ox7enum20f] {
    background-color: var(--adf-input-bg);
    color: var(--adf-text-primary);
    border-color: var(--adf-focus-border);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.search-container .form-control[b-ox7enum20f]::placeholder {
    color: var(--adf-text-muted);
    opacity: 0.6;
}

.search-container .clear-button[b-ox7enum20f] {
    background-color: var(--adf-input-bg);
    border: 1px solid var(--adf-input-border);
    border-left: none;
    color: var(--adf-text-muted);
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.search-container .clear-button:hover[b-ox7enum20f] {
    background-color: var(--adf-hover-bg);
    color: var(--adf-text-primary);
}

.search-container .clear-button:focus[b-ox7enum20f] {
    box-shadow: none;
    border-color: var(--adf-focus-border);
}

.search-results-info[b-ox7enum20f] {
    margin-top: var(--adf-spacing-sm);
    text-align: center;
}

.search-results-info .badge[b-ox7enum20f] {
    font-size: var(--adf-font-size-xs);
    padding: var(--adf-spacing-xs) var(--adf-spacing-sm);
}

/* Search Highlight */
.search-highlight[b-ox7enum20f] {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-left-color: #ffc107 !important;
}

.search-highlight:hover[b-ox7enum20f] {
    background-color: rgba(255, 193, 7, 0.2) !important;
}

.search-highlight .item-name[b-ox7enum20f] {
    font-weight: 600;
    color: var(--adf-text-primary) !important;
}

/* Loading State */
.loading-container[b-ox7enum20f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--adf-spacing-xl);
    color: var(--adf-text-muted);
    gap: var(--adf-spacing-md);
}

/* Navigation Items */
.nav-item[b-ox7enum20f] {
    border-bottom: 1px solid var(--adf-border-light);
    margin: 0;
    padding: 0;
    position: relative; /* Ensure proper positioning context */
    overflow: visible; /* Allow context menus to show */
}

.nav-item:last-child[b-ox7enum20f] {
    border-bottom: none;
}

/* Navigation Pane Items */
.nav-pane-item[b-ox7enum20f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: all 0.2s ease;
    background-color: transparent;
    position: relative;
}

.nav-pane-item:hover[b-ox7enum20f] {
    background-color: var(--adf-nav-hover);
}

.nav-pane-item .d-flex[b-ox7enum20f] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    min-width: 0; /* Allow flex items to shrink */
}

/* Ensure context menu is always visible with fixed width */
.nav-pane-item .setup-object-context-menu[b-ox7enum20f],
.nav-pane-item .setup-navigation-pane-context-menu[b-ox7enum20f] {
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

/* Make sure the flex container has enough space */
.nav-pane-item .d-flex[b-ox7enum20f] {
    display: flex !important;
    align-items: center;
    width: 100%;
    gap: 0;
    min-width: 0;
    padding-right: var(--adf-spacing-sm); /* Ensure adequate space for context menu */
}

/* Category Toggle Button */
.category-toggle[b-ox7enum20f] {
    padding: var(--adf-spacing-md) var(--adf-spacing-lg);
    padding-right: var(--adf-spacing-sm); /* Reduce right padding to accommodate context menu */
    cursor: pointer;
    color: var(--adf-text-primary);
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    font-size: var(--adf-font-size-sm);
    font-weight: 600;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    overflow: hidden;
    min-width: 0; /* Allow flex item to shrink */
    flex: 1; /* Take available space but allow shrinking */
}

.category-toggle:hover[b-ox7enum20f] {
    background-color: var(--adf-nav-hover);
    color: var(--adf-text-primary);
}

.category-toggle:focus[b-ox7enum20f] {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: -2px;
}

/* Expand Icon */
.expand-icon[b-ox7enum20f] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.expand-icon.expanded[b-ox7enum20f] {
    transform: rotate(0deg);
}

/* Category Name and Count */
.category-name[b-ox7enum20f] {
    flex: 1;
    font-weight: inherit;
}

.item-count[b-ox7enum20f] {
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-muted);
    background-color: var(--adf-tertiary-bg);
    padding: var(--adf-spacing-xs) var(--adf-spacing-sm);
    border-radius: 12px;
    font-weight: 500;
}

/* Category Items Container */
.category-items[b-ox7enum20f] {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    background-color: var(--adf-accent-bg);
}

.category-items.collapsed[b-ox7enum20f] {
    max-height: 0;
    opacity: 0;
}

.category-items.expanded[b-ox7enum20f] {
    max-height: none; /* Allow unlimited height for all items */
    opacity: 1;
    /* Allow child-item context menus (Edit/Delete) to overflow the container.
       Without this the dropdown is clipped by the box and the category header /
       New menu shows through, making the menu look like it renders behind. */
    overflow: visible;
}

/* Child Items */
.child-item[b-ox7enum20f] {
    border-left: 3px solid var(--adf-border-light);
    margin-left: var(--adf-spacing-lg);
    background-color: transparent;
    position: relative;
    min-height: 40px; /* Ensure minimum height for context menu */
}

.child-item:hover[b-ox7enum20f] {
    border-left-color: var(--adf-text-accent);
    background-color: var(--adf-hover-bg);
}

.child-item .nav-link[b-ox7enum20f] {
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    padding-right: var(--adf-spacing-sm); /* Reduce right padding for better spacing */
    font-size: var(--adf-font-size-sm);
    font-weight: 400;
    color: var(--adf-text-secondary);
}

.child-item:hover .nav-link[b-ox7enum20f] {
    color: var(--adf-text-primary);
}

/* Item Links */
.item-link[b-ox7enum20f] {
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    min-width: 0; /* Allow flex item to shrink */
    flex: 1; /* Take available space but allow shrinking */
}

.item-link:focus[b-ox7enum20f] {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: -2px;
}

/* Icons */
.nav-pane-item .icon[b-ox7enum20f],
.nav-pane-item .fa[b-ox7enum20f],
.nav-pane-item img.icon[b-ox7enum20f] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.nav-pane-item:hover .icon[b-ox7enum20f],
.nav-pane-item:hover .fa[b-ox7enum20f],
.nav-pane-item:hover img.icon[b-ox7enum20f] {
    opacity: 1;
}

/* Item Names */
.item-name[b-ox7enum20f] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Allow flex item to shrink */
    margin-right: var(--adf-spacing-md); /* Increase space for context menu */
    max-width: calc(100% - 60px); /* Reserve adequate space for context menu */
    padding-right: var(--adf-spacing-xs); /* Add padding for better visual separation */
}

/* Show full name on hover with tooltip-like behavior */
.nav-pane-item:hover .item-name[b-ox7enum20f] {
    position: relative;
    z-index: 999;
}

/* Add a tooltip-like effect for long names */
.item-name[title]:hover[b-ox7enum20f]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* Active States */
.nav-pane-item.active[b-ox7enum20f] {
    background-color: var(--adf-active-bg);
    color: var(--adf-text-accent);
    border-left: 3px solid var(--adf-text-accent);
}

.nav-pane-item.active .nav-link[b-ox7enum20f] {
    color: var(--adf-text-accent);
    font-weight: 600;
}

/* Context Menu Styles */
.setup-navigation-pane-context-menu[b-ox7enum20f] {
    font-family: var(--adf-font-family);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
}

.setup-navigation-pane-context-menu .btn[b-ox7enum20f] {
    padding: 0.25rem;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--adf-text-muted);
    opacity: 0.8;
    transition: all 0.2s ease;
    font-size: 1rem;
    line-height: 1;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    z-index: 100;
}

.setup-navigation-pane-context-menu .btn:hover[b-ox7enum20f],
.setup-navigation-pane-context-menu:hover .btn[b-ox7enum20f] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--adf-text-primary);
    z-index: 1001;
    transform: scale(1.1);
}

.setup-navigation-pane-context-menu-dropdown[b-ox7enum20f] {
    display: block !important;
    position: absolute;
    z-index: 1050;
    top: 100%;
    right: var(--adf-spacing-xs); /* Position slightly inward from the right edge */
    min-width: 140px;
    max-width: 180px; /* Prevent dropdown from being too wide */
    background-color: #ffffff;
    color: #323130;
    border: 1px solid var(--adf-border-medium);
    border-radius: 6px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    margin: 0;
    list-style: none;
    animation: fadeInDropdown-b-ox7enum20f 0.15s ease-in-out;
    overflow: visible;
    /* Ensure dropdown stays within navigation pane bounds */
    margin-right: var(--adf-spacing-sm);
}

.setup-navigation-pane-context-menu-item[b-ox7enum20f] {
    width: 100%;
    padding: 0.6rem 1rem;
    cursor: pointer;
    color: #323130;
    font-size: 0.875rem;
    border-radius: 4px;
    border: none;
    background: transparent;
    text-align: left;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}

.setup-navigation-pane-context-menu-item:hover[b-ox7enum20f] {
    background-color: #f0f0f0;
    color: #000000;
}

.setup-navigation-pane-context-menu-item:active[b-ox7enum20f] {
    background-color: #e6e6e6;
}

.setup-navigation-pane-context-menu-item i[b-ox7enum20f] {
    width: 14px;
    font-size: 0.75rem;
}

@keyframes fadeInDropdown-b-ox7enum20f {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search functionality */
.nav-pane-search[b-ox7enum20f] {
    position: sticky;
    top: 0;
    padding: var(--adf-spacing-md);
    border-bottom: 1px solid var(--adf-border-light);
    background-color: var(--adf-secondary-bg);
    z-index: var(--adf-z-sticky);
}

.nav-pane-search input[b-ox7enum20f] {
    width: 100%;
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    padding-left: 2.5rem;
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
}

.nav-pane-search input:focus[b-ox7enum20f] {
    outline: none;
    border-color: var(--adf-focus-border);
    box-shadow: var(--adf-focus-shadow);
}

.nav-pane-search[b-ox7enum20f]::before {
    content: "🔍";
    position: absolute;
    left: var(--adf-spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    color: var(--adf-text-muted);
    pointer-events: none;
    z-index: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .nav-pane-item[b-ox7enum20f] {
        padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    }
    
    .category-toggle[b-ox7enum20f] {
        padding: var(--adf-spacing-md) var(--adf-spacing-md);
        font-size: var(--adf-font-size-sm);
        min-height: 48px; /* WCAG touch target */
    }
    
    .child-item .nav-link[b-ox7enum20f] {
        padding: var(--adf-spacing-md) var(--adf-spacing-md);
        min-height: 48px; /* WCAG touch target */
    }

    .child-item[b-ox7enum20f] {
        margin-left: var(--adf-spacing-md);
    }

    .item-link[b-ox7enum20f] {
        min-height: 48px;
    }

    .search-container[b-ox7enum20f] {
        padding: var(--adf-spacing-md);
    }

    .search-container .form-control[b-ox7enum20f] {
        font-size: 1rem; /* Prevent iOS zoom on focus */
        min-height: 44px;
    }

    /* Larger touch targets for context menu triggers */
    .nav-pane-item .setup-object-context-menu[b-ox7enum20f],
    .nav-pane-item .setup-category-context-menu[b-ox7enum20f],
    .nav-pane-item .setup-navigation-pane-context-menu[b-ox7enum20f] {
        width: 48px;
        min-width: 48px;
    }

    .item-name[b-ox7enum20f] {
        max-width: calc(100% - 70px);
    }
}
/* /Components/Features/Setup/Navigation/SetupObjectContextMenu.razor.rz.scp.css */
.setup-object-context-menu[b-2rfagt6uae] {
    position: relative;
    font-family: var(--adf-font-family);
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    display: flex;
    justify-content: center;
}

.context-menu-trigger[b-2rfagt6uae] {
    padding: 0.25rem;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-light);
    opacity: 0.8;
    transition: all 0.2s ease;
    font-size: 1rem;
    line-height: 1;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    position: relative;
    z-index: 100;
}

.context-menu-trigger:hover[b-2rfagt6uae],
.setup-object-context-menu:hover .context-menu-trigger[b-2rfagt6uae] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--adf-text-primary);
    z-index: 100;
    transform: scale(1.1);
}

.setup-object-context-menu-dropdown[b-2rfagt6uae] {
    display: block !important;
    position: absolute;
    z-index: 10000;
    top: 100%;
    right: 0;
    min-width: 140px;
    max-width: 180px;
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary);
    box-shadow: var(--adf-shadow-lg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 6px;
    animation: fadeIn-b-2rfagt6uae 0.15s ease-in-out;
    overflow: visible;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    opacity: 1 !important;
}

/* For items at the bottom, show menu above */
.child-item:last-of-type .setup-object-context-menu-dropdown[b-2rfagt6uae],
.child-item:nth-last-of-type(-n+2) .setup-object-context-menu-dropdown[b-2rfagt6uae] {
    top: auto;
    bottom: 100%;
}

/* Better visual feedback on hover */
.child-item:hover .setup-object-context-menu[b-2rfagt6uae] {
    background-color: rgba(0, 120, 212, 0.1);
    border-radius: 4px;
}

.setup-object-context-menu-item[b-2rfagt6uae] {
    width: 100%;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    list-style: none;
    background-color: var(--adf-secondary-bg) !important;
    color: var(--adf-text-primary);
    border: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.15s ease;
    opacity: 1 !important;
}

.setup-object-context-menu-item:hover[b-2rfagt6uae] {
    background-color: var(--adf-hover-bg) !important;
    color: var(--adf-text-primary);
}

.setup-object-context-menu-item.delete-item:hover[b-2rfagt6uae] {
    background-color: var(--adf-error-light) !important;
    color: var(--adf-error);
}

.setup-object-context-menu-item i[b-2rfagt6uae] {
    width: 14px;
    font-size: 0.75rem;
}

@keyframes fadeIn-b-2rfagt6uae {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile: larger touch targets */
@media (max-width: 768px) {
    .context-menu-trigger[b-2rfagt6uae] {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .setup-object-context-menu[b-2rfagt6uae] {
        width: 48px;
        min-width: 48px;
    }

    .setup-object-context-menu-item[b-2rfagt6uae] {
        padding: 0.85rem 1rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .setup-object-context-menu-dropdown[b-2rfagt6uae] {
        min-width: 160px;
    }
}
/* /Components/Features/Setup/Panels/EditorPanel.razor.rz.scp.css */
/* ========================================
   EDITOR PANEL STYLES
   ======================================== */
/* EditorPanel-level styles for the tab management system.
   These styles apply to the top-level tab bar that contains
   all open editor instances. */

/* Tab Bar Container - Top-level horizontal scrolling tab bar */
.tab-bar-container[b-w3hp85n1tp] {
    display: flex;
    align-items: stretch;
    background-color: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    position: relative;
}

.tab-bar-wrapper[b-w3hp85n1tp] {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tab-bar[b-w3hp85n1tp] {
    display: flex;
    padding: var(--adf-spacing-xs) var(--adf-spacing-sm);
    padding-bottom: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 2px;
    align-items: flex-end;
}

    .tab-bar[b-w3hp85n1tp]::-webkit-scrollbar {
        display: none;
    }

.tab-scroll-button[b-w3hp85n1tp] {
    flex-shrink: 0;
    width: 40px;
    height: 100%;
    border: none;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-left: 1px solid var(--adf-border-light);
    border-right: 1px solid var(--adf-border-light);
    z-index: 2;
}

    .tab-scroll-button span[b-w3hp85n1tp] {
        font-size: 20px;
        font-weight: 300;
        line-height: 1;
        user-select: none;
    }

    .tab-scroll-button:hover:not(.disabled)[b-w3hp85n1tp] {
        background-color: var(--adf-hover-bg);
        color: var(--adf-text-primary);
    }
    
    .tab-scroll-button:active:not(.disabled)[b-w3hp85n1tp] {
        transform: scale(0.95);
    }

    .tab-scroll-button.disabled[b-w3hp85n1tp] {
        opacity: 0.25;
        cursor: not-allowed;
    }

    .tab-scroll-button.left[b-w3hp85n1tp] {
        border-right: none;
    }

    .tab-scroll-button.right[b-w3hp85n1tp] {
        border-left: none;
    }

.tab-fade-left[b-w3hp85n1tp],
.tab-fade-right[b-w3hp85n1tp] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.tab-fade-left[b-w3hp85n1tp] {
    left: 0;
    background: linear-gradient(to right, 
        var(--adf-secondary-bg) 0%, 
        var(--adf-secondary-bg) 20%,
        rgba(var(--adf-secondary-bg-rgb, 37, 37, 38), 0.8) 50%,
        transparent 100%);
}

.tab-fade-right[b-w3hp85n1tp] {
    right: 0;
    background: linear-gradient(to left, 
        var(--adf-secondary-bg) 0%, 
        var(--adf-secondary-bg) 20%,
        rgba(var(--adf-secondary-bg-rgb, 37, 37, 38), 0.8) 50%,
        transparent 100%);
}

    .tab-fade-left.visible[b-w3hp85n1tp],
    .tab-fade-right.visible[b-w3hp85n1tp] {
        opacity: 1;
    }

.tabs-header[b-w3hp85n1tp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--adf-secondary-bg);
    padding: var(--adf-spacing-sm);
    border-bottom: 1px solid var(--adf-border-light);
    gap: var(--adf-spacing-md);
}

/* Tab Button - Individual editor tab in the top bar */
.tab-button[b-w3hp85n1tp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    min-height: 38px;
    background-color: transparent;
    border: 1.5px solid transparent;
    border-radius: 8px 8px 0 0;
    color: var(--adf-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    margin-bottom: -1px;
}

    .tab-button .icon[b-w3hp85n1tp] {
        width: 18px;
        height: 18px;
        object-fit: contain;
        flex-shrink: 0;
        opacity: 0.8;
        transition: opacity 0.15s ease;
    }

    .tab-button:hover:not(.active)[b-w3hp85n1tp] {
        background-color: var(--adf-hover-bg);
        color: var(--adf-text-primary);
        border-color: var(--adf-border-light);
        border-bottom-color: transparent;
    }
    
    .tab-button:hover .icon[b-w3hp85n1tp] {
        opacity: 1;
    }

    .tab-button.active[b-w3hp85n1tp] {
        background-color: var(--adf-tertiary-bg);
        color: var(--adf-text-primary);
        border-color: var(--adf-border-dark);
        border-bottom-color: var(--adf-tertiary-bg);
        box-shadow: var(--adf-shadow-sm);
        z-index: 1;
    }
    
    .tab-button.active .icon[b-w3hp85n1tp] {
        opacity: 1;
    }

    .tab-button:focus-visible[b-w3hp85n1tp] {
        outline: 2px solid var(--adf-focus-border);
        outline-offset: 1px;
    }

    .tab-button > span:last-child[b-w3hp85n1tp] {
        margin-left: 4px;
        padding: 0 2px;
        font-size: 18px;
        font-weight: 400;
        color: var(--adf-text-muted);
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .tab-button:hover > span:last-child[b-w3hp85n1tp] {
        opacity: 0.6;
    }
    
    .tab-button:hover > span:last-child:hover[b-w3hp85n1tp] {
        opacity: 1;
        color: var(--adf-error);
    }

/* Editor Display Area - Main container for active editor */
.editor-display-area[b-w3hp85n1tp] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    padding: var(--adf-spacing-lg);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible; /* Allow dropdowns to extend horizontally */
}


/* ========================================
   COMMON EDITOR STYLES
   ======================================== */
/* Shared styles used by all child editors (Job, Task, Platform, SecretVault).
   These provide consistent layout, typography, and component styling across editors. */

/* Editor Container - Main wrapper for each editor instance */
.editor.editor-container[b-w3hp85n1tp] {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1rem;
}

.editor .editor-tabs-section[b-w3hp85n1tp] {
    display: flex;
    flex-direction: column;
}

/* Editor Instance Base Styles */
.editor[b-w3hp85n1tp] {
    display: flex;
    flex-direction: column;
    height: auto;
}

.editor h3[b-w3hp85n1tp] {
    margin-bottom: 1.5rem;
    color: var(--adf-text-primary);
    font-weight: 600;
}


/* ========================================
   EDITOR TAB NAVIGATION
   ======================================== */
/* Internal tab navigation within each editor (General, Settings, etc.) */
/* Following Material Design 3 and modern UI/UX standards with enhanced accessibility */

/* Override Bootstrap CSS variables for nav-tabs within editor context */
/* Using ::deep to penetrate CSS isolation and override Bootstrap */
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs {
    /* Override Bootstrap variables */
    --bs-nav-tabs-link-active-color: var(--adf-text-accent);
    --bs-nav-tabs-link-active-bg: var(--adf-active-bg);
    --bs-nav-tabs-link-active-border-color: var(--adf-text-accent);
    
    /* Custom styling */
    border: none;
    margin-bottom: 0;
    gap: var(--adf-spacing-xs);
    padding: var(--adf-spacing-xs) var(--adf-spacing-md);
}

[b-w3hp85n1tp] .editor .editor-tabs {
    margin-bottom: 0;
    border-bottom: 2px solid var(--adf-border-light);
    background-color: var(--adf-secondary-bg);
}

[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link {
    /* Text and Layout */
    color: var(--adf-text-secondary);
    font-weight: 500;
    font-size: var(--adf-font-size-sm);
    padding: var(--adf-spacing-md) var(--adf-spacing-lg);
    margin-right: var(--adf-spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    
    /* Border and Background */
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    background: none;
    
    /* Interaction States */
    cursor: pointer;
    user-select: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    
    /* Accessibility - WCAG 2.1 AA minimum touch target */
    min-height: 44px;
}

/* Hover State - Professional subtle feedback */
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link:hover:not(:disabled):not(.active) {
    color: var(--adf-text-primary);
    background-color: var(--adf-hover-bg);
    border-bottom-color: var(--adf-border-medium);
    border-color: var(--adf-border-medium);
    transform: translateY(-1px);
}

/* Active State - Clear visual hierarchy */
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link.active,
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-item.show .nav-link {
    color: var(--adf-text-accent);
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--adf-text-accent);
    font-weight: 600;
}

/* Focus State - WCAG 2.1 AA compliant keyboard navigation */
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link:focus-visible {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: 2px;
    border-radius: 6px;
    z-index: 1;
}

/* Disabled State - Clear visual feedback */
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--adf-text-muted);
    pointer-events: none;
}

/* Icon Styling - Consistent sizing and spacing */
[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

[b-w3hp85n1tp] .editor .editor-tabs .nav-tabs .nav-link:hover:not(:disabled) i {
    transform: scale(1.1);
}


/* ========================================
   TAB CONTENT AREAS
   ======================================== */
/* Content panels within editor tabs */

.editor .tab-content[b-w3hp85n1tp] {
    min-height: 0;
    overflow-y: visible;
    overflow-x: visible; /* Allow dropdowns to extend */
}

.editor .tab-pane[b-w3hp85n1tp] {
    display: none;
}

.editor .tab-pane.active[b-w3hp85n1tp] {
    display: block;
    height: auto;
    overflow: visible; /* Allow dropdowns to extend beyond boundaries */
}

/* Tab Content Inner - Content wrapper with styling */
.editor .tab-content-inner[b-w3hp85n1tp] {
    padding: var(--adf-spacing-lg);
    background-color: var(--adf-secondary-bg);
    border-radius: 6px;
    border: 1px solid var(--adf-border-light);
    overflow-y: visible;
    overflow-x: visible; /* Allow dropdowns to extend horizontally */
    box-shadow: var(--adf-shadow-sm);
}

/* Tab Section Header - Header within tab content */
.editor .tab-section-header[b-w3hp85n1tp] {
    border-bottom: 1px solid var(--adf-border-light);
    margin-bottom: var(--adf-spacing-lg);
    padding-bottom: var(--adf-spacing-md);
}

.editor .tab-section-header h6[b-w3hp85n1tp] {
    color: var(--adf-text-primary);
    font-weight: 600;
    margin: 0;
}

.editor .tab-section-header p[b-w3hp85n1tp] {
    margin: 0;
}

/* Empty State - Displayed when no content is available */
.editor .empty-state[b-w3hp85n1tp] {
    padding: var(--adf-spacing-xl) var(--adf-spacing-lg);
}

.editor .empty-state i[b-w3hp85n1tp] {
    opacity: 0.5;
}


/* ========================================
   SCROLLBAR STYLING
   ======================================== */
/* Custom scrollbars for tab content areas */

.editor .tab-content-inner[b-w3hp85n1tp]::-webkit-scrollbar {
    width: 8px;
}

.editor .tab-content-inner[b-w3hp85n1tp]::-webkit-scrollbar-track {
    background: transparent;
}

.editor .tab-content-inner[b-w3hp85n1tp]::-webkit-scrollbar-thumb {
    background-color: var(--adf-border-medium);
    border-radius: 4px;
}

.editor .tab-content-inner[b-w3hp85n1tp]::-webkit-scrollbar-thumb:hover {
    background-color: var(--adf-text-accent);
}

/* Firefox scrollbar */
.editor .tab-content-inner[b-w3hp85n1tp] {
    scrollbar-width: thin;
    scrollbar-color: var(--adf-border-medium) transparent;
}


/* ========================================
   FORM ELEMENTS
   ======================================== */
/* Common form styling for all editors */

.editor .form-group[b-w3hp85n1tp],
.editor .tab-content-inner .form-group[b-w3hp85n1tp] {
    margin-bottom: 1.5rem;
}

.editor .form-label[b-w3hp85n1tp],
.editor .tab-content-inner .form-label[b-w3hp85n1tp] {
    font-weight: 500;
    color: var(--adf-text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.editor .form-control[b-w3hp85n1tp],
.editor .tab-content-inner .form-control[b-w3hp85n1tp] {
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.editor .form-control:focus[b-w3hp85n1tp],
.editor .tab-content-inner .form-control:focus[b-w3hp85n1tp] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.25);
    outline: none;
}

.editor .form-control:disabled[b-w3hp85n1tp],
.editor .tab-content-inner .form-control:disabled[b-w3hp85n1tp] {
    background-color: var(--adf-tertiary-bg);
    opacity: 0.6;
    cursor: not-allowed;
}

.editor .form-text[b-w3hp85n1tp],
.editor .tab-content-inner .form-text[b-w3hp85n1tp] {
    color: var(--adf-text-muted);
    font-size: 0.875rem;
}


/* ========================================
   BUTTONS
   ======================================== */
/* Common button styles for editors */

.editor .btn-primary[b-w3hp85n1tp] {
    background-color: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.editor .btn-primary:hover:not(:disabled)[b-w3hp85n1tp] {
    background-color: #005a9e;
    border-color: #005a9e;
    transform: translateY(-1px);
}

.editor .btn-outline-secondary[b-w3hp85n1tp],
.editor .btn-secondary[b-w3hp85n1tp] {
    border-color: var(--adf-border-medium);
    color: var(--adf-text-secondary);
}

.editor .btn-outline-secondary:hover:not(:disabled)[b-w3hp85n1tp],
.editor .btn-secondary:hover:not(:disabled)[b-w3hp85n1tp] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
    color: var(--adf-text-primary);
}

.editor .action-buttons[b-w3hp85n1tp] {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adf-border-light);
}


/* ========================================
   ALERTS & MESSAGING
   ======================================== */
/* Alert and status message styling */

.editor .alert[b-w3hp85n1tp] {
    border-radius: 4px;
    border: none;
    padding: 1rem;
}

.editor .alert-success[b-w3hp85n1tp] {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.editor .alert-danger[b-w3hp85n1tp] {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.editor .alert .fas[b-w3hp85n1tp] {
    font-size: 1.1rem;
}

.editor .btn-close[b-w3hp85n1tp] {
    background: none;
    border: none;
    font-size: 1.2rem;
    opacity: 0.7;
    cursor: pointer;
}

.editor .btn-close:hover[b-w3hp85n1tp] {
    opacity: 1;
}


/* ========================================
   TEXT UTILITIES
   ======================================== */
/* Text color utilities */

.editor .text-danger[b-w3hp85n1tp],
.editor .tab-content-inner .text-danger[b-w3hp85n1tp] {
    color: var(--adf-error);
}

.editor .text-muted[b-w3hp85n1tp],
.editor .tab-content-inner .text-muted[b-w3hp85n1tp] {
    color: var(--adf-text-muted);
}


/* ========================================
   CARD COMPONENTS
   ======================================== */
/* Card styling for consistent panels */

.editor .card[b-w3hp85n1tp] {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
}

.editor .card-header[b-w3hp85n1tp] {
    background-color: var(--adf-tertiary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    color: var(--adf-text-primary);
}

.editor .card-body[b-w3hp85n1tp] {
    color: var(--adf-text-secondary);
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
/* Responsive breakpoints for mobile/tablet views */

@media (max-width: 768px) {
    .editor.editor-container[b-w3hp85n1tp] {
        height: auto;
    }
    
    .editor .editor-tabs .nav-link[b-w3hp85n1tp] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .editor .tab-content-inner[b-w3hp85n1tp] {
        padding: 1rem;
    }

    .tabs-header[b-w3hp85n1tp] {
        padding: var(--adf-spacing-xs) var(--adf-spacing-sm);
        gap: var(--adf-spacing-sm);
        flex-wrap: wrap;
    }

    .tab-bar-container[b-w3hp85n1tp] {
        overflow: hidden;
    }

    .tab-button[b-w3hp85n1tp] {
        padding: 8px 12px;
        font-size: 0.8125rem;
        min-height: 44px; /* WCAG touch target */
    }

    .tab-button .icon[b-w3hp85n1tp] {
        width: 16px;
        height: 16px;
    }

    .tab-scroll-button[b-w3hp85n1tp] {
        width: 36px;
        min-height: 44px;
    }

    .editor-display-area[b-w3hp85n1tp] {
        padding: var(--adf-spacing-md);
    }
}

@media (max-width: 576px) {
    .editor .editor-tabs .nav-tabs[b-w3hp85n1tp] {
        flex-wrap: wrap;
    }
    
    .editor .editor-tabs .nav-link[b-w3hp85n1tp] {
        border-radius: 0.375rem;
        margin-bottom: 0.25rem;
        flex: 1;
        min-width: 0;
        text-align: center;
    }
    
    .editor .editor-tabs .nav-link i[b-w3hp85n1tp] {
        display: none;
    }

    .tab-button[b-w3hp85n1tp] {
        padding: 6px 10px;
        font-size: 0.75rem;
        gap: 4px;
    }

    .tab-button > span:last-child[b-w3hp85n1tp] {
        /* Always show close button on mobile for easier access */
        opacity: 0.5;
    }

    .editor-display-area[b-w3hp85n1tp] {
        padding: var(--adf-spacing-sm);
    }

    .editor .tab-content-inner[b-w3hp85n1tp] {
        padding: 0.75rem;
    }

    .tabs-header .icon-button[b-w3hp85n1tp] {
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }
}
/* /Components/Features/Setup/Panels/SetupWelcome.razor.rz.scp.css */
/* ─── Setup Empty State ─── */

.empty-state[b-jiu4weqx4j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--adf-primary-bg);
}

.empty-state-icon[b-jiu4weqx4j] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--adf-tertiary-bg);
    margin-bottom: 1.5rem;
}

.empty-state-icon .bi[b-jiu4weqx4j] {
    font-size: 2rem;
    color: var(--adf-text-muted);
    opacity: 0.6;
}

.empty-state-title[b-jiu4weqx4j] {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 0.5rem;
}

.empty-state-description[b-jiu4weqx4j] {
    font-size: 0.95rem;
    color: var(--adf-text-secondary);
    margin: 0 0 2rem;
    max-width: 420px;
    line-height: 1.5;
}

.empty-state-hints[b-jiu4weqx4j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.hint[b-jiu4weqx4j] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--adf-text-muted);
}

.hint-icon[b-jiu4weqx4j] {
    font-size: 0.9rem;
    color: var(--adf-text-accent);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .empty-state[b-jiu4weqx4j] {
        padding: 2rem 1.25rem;
        justify-content: flex-start;
        padding-top: 3rem;
    }

    .empty-state-icon[b-jiu4weqx4j] {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
    }

    .empty-state-icon .bi[b-jiu4weqx4j] {
        font-size: 1.5rem;
    }

    .empty-state-title[b-jiu4weqx4j] {
        font-size: 1.15rem;
    }

    .empty-state-description[b-jiu4weqx4j] {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }

    .hint[b-jiu4weqx4j] {
        font-size: 0.8rem;
    }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — LandingLayout shell
   Scoped to LandingLayout.razor — applies to all
   public pages that use @layout LandingLayout.
   ═══════════════════════════════════════════════════ */

/* ─── Shell ─────────────────────────────────────── */
.landing-shell[b-brdwtw1hh4] {
    min-height: 100vh;
    background: var(--adf-primary-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--adf-text-primary);
}

[data-theme="dark"] .landing-shell[b-brdwtw1hh4] {
    background: var(--adf-primary-bg);
}

/* ─── Footer social links ───────────────────────── */
.landing-footer-social[b-brdwtw1hh4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-footer-social-link[b-brdwtw1hh4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid var(--adf-border-light);
    color: var(--adf-text-secondary);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.landing-footer-social-link:hover[b-brdwtw1hh4],
.landing-footer-social-link:focus-visible[b-brdwtw1hh4] {
    color: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
    background: var(--adf-hover-bg);
}

@media (max-width: 768px) {
    .landing-footer-social[b-brdwtw1hh4] {
        gap: 0.75rem;
        margin-top: 0.25rem;
    }

    .landing-footer-social-link[b-brdwtw1hh4] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */

/* Main Layout - ADF IDE Style */
body[b-z95t7l5w8e] {
    font-family: var(--adf-font-family);
    background-color: var(--adf-primary-bg);
    color: var(--adf-text-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.page[b-z95t7l5w8e] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

main[b-z95t7l5w8e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar */
.sidebar[b-z95t7l5w8e] {
    background-color: var(--adf-nav-bg);
    border-right: 1px solid var(--adf-nav-border);
    color: var(--adf-text-primary);
    box-shadow: var(--adf-shadow-md);
    z-index: var(--adf-z-sticky);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.3s ease;
    width: var(--adf-nav-width);
}

.sidebar.collapsed[b-z95t7l5w8e] {
    width: var(--adf-nav-width-collapsed);
}

/* Top Row - Header */
.top-row[b-z95t7l5w8e] {
    background-color: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    box-shadow: var(--adf-shadow-sm);
    height: var(--adf-header-height);
    min-height: var(--adf-header-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--adf-spacing-md);
    padding: 0 var(--adf-spacing-lg);
    z-index: var(--adf-z-sticky);
    flex-shrink: 0;
}

.top-row a[b-z95t7l5w8e], .top-row .btn-link[b-z95t7l5w8e] {
    white-space: nowrap;
    text-decoration: none;
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    transition: color 0.2s ease;
}

.top-row a:hover[b-z95t7l5w8e], .top-row .btn-link:hover[b-z95t7l5w8e] {
    color: var(--adf-text-accent);
    text-decoration: underline;
}

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

/* Responsive Design */
@media (max-width: 640.98px) {
    .top-row[b-z95t7l5w8e] {
        justify-content: space-between;
        padding: 0 var(--adf-spacing-md);
    }

    .top-row a[b-z95t7l5w8e], .top-row .btn-link[b-z95t7l5w8e] {
        margin-left: 0;
        font-size: var(--adf-font-size-xs);
    }
}

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

    .sidebar[b-z95t7l5w8e] {
        height: 100vh;
        position: sticky;
        top: 0;
        width: var(--adf-nav-width);
        min-width: var(--adf-nav-width-collapsed);
        transition: width 0.3s ease;
    }

    .sidebar.collapsed[b-z95t7l5w8e] {
        width: var(--adf-nav-width-collapsed);
        min-width: var(--adf-nav-width-collapsed);
    }

    .top-row[b-z95t7l5w8e] {
        position: sticky;
        top: 0;
        z-index: var(--adf-z-sticky);
    }

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

    .top-row[b-z95t7l5w8e] {
        padding-left: var(--adf-spacing-2xl) !important;
        padding-right: var(--adf-spacing-xl) !important;
    }
}

/* Content Area */
.content[b-z95t7l5w8e] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--adf-secondary-bg);
    overflow: hidden;
}

/* On mobile, ensure the content area can grow to fill available space */
@media (max-width: 640.98px) {
    .content[b-z95t7l5w8e] {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

#blazor-error-ui[b-z95t7l5w8e] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-z95t7l5w8e] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ── Top bar auth elements ─────────────────────── */
.top-bar-user[b-z95t7l5w8e] {
    color: var(--adf-text-secondary);
    font-size: 0.85rem;
}

.top-bar-signout[b-z95t7l5w8e] {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
}

.top-bar-signin[b-z95t7l5w8e] {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
}

/* ── Top bar brand (logo + wordmark) ──────────────────────────── */
.top-row a.top-bar-brand[b-z95t7l5w8e] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--adf-text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.top-row a.top-bar-brand:hover[b-z95t7l5w8e],
.top-row a.top-bar-brand:focus-visible[b-z95t7l5w8e] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-accent);
    text-decoration: none;
    outline: none;
}

.top-bar-brand-logo[b-z95t7l5w8e] {
    height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
}

.top-bar-brand-text[b-z95t7l5w8e] {
    font-size: var(--adf-font-size-md);
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* ── Top bar link (Wiki, etc.) ────────────────────────────────── */
.top-row a.top-bar-link[b-z95t7l5w8e] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--adf-text-secondary);
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.top-row a.top-bar-link:hover[b-z95t7l5w8e],
.top-row a.top-bar-link:focus-visible[b-z95t7l5w8e] {
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-accent);
    text-decoration: none;
    outline: none;
}

@media (max-width: 640.98px) {
    .top-bar-brand-text[b-z95t7l5w8e] {
        display: none;
    }
}

/* ── Marketplace subscription suspension banner ─────────────────────────── */
.marketplace-suspension-banner[b-z95t7l5w8e] {
    background: var(--adf-warning-light);
    border-bottom: 2px solid var(--adf-warning);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    padding: 0.625rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.4;
}

.marketplace-suspension-banner a[b-z95t7l5w8e] {
    color: var(--adf-text-accent);
    font-weight: 600;
    text-decoration: underline;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navigation Menu - ADF IDE Style with Enhanced Collapse */

/* Polysync Logo in Nav */
.navbar-brand-logo[b-yqaab9k2ac] {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: auto;
}

.nav-polysync-logo[b-yqaab9k2ac] {
    height: 28px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.nav-polysync-logo:hover[b-yqaab9k2ac] {
    opacity: 0.85;
}

.navbar-toggler[b-yqaab9k2ac] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2rem;
    color: var(--adf-text-primary);
    position: absolute;
    top: var(--adf-spacing-sm);
    right: var(--adf-spacing-lg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    background: var(--adf-secondary-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23323130' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
    transition: all 0.2s ease;
}

.navbar-toggler:hover[b-yqaab9k2ac] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
}

.navbar-toggler:checked[b-yqaab9k2ac] {
    background-color: var(--adf-active-bg);
    border-color: var(--adf-text-accent);
}

.top-row[b-yqaab9k2ac] {
    min-height: var(--adf-header-height);
    background-color: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--adf-spacing-lg);
    transition: all 0.3s ease;
}

.top-row .btn[b-yqaab9k2ac] {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-medium);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    padding: var(--adf-spacing-xs) var(--adf-spacing-sm);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.top-row .btn:hover[b-yqaab9k2ac] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
}

/* ── Collapse/expand toggle button: matches .setup-nav-collapse-btn size exactly ── */
.nav-collapse-btn[b-yqaab9k2ac] {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-medium);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    border-radius: 4px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.nav-collapse-btn:hover[b-yqaab9k2ac] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
}

.expand-icon[b-yqaab9k2ac], .collapse-icon[b-yqaab9k2ac] {
    font-size: 0.75rem;
    font-weight: bold;
}

.navbar-brand[b-yqaab9k2ac] {
    font-size: var(--adf-font-size-lg);
    font-weight: 600;
    color: var(--adf-text-primary);
    text-decoration: none;
}

.navbar-brand:hover[b-yqaab9k2ac] {
    color: var(--adf-text-accent);
}

/* Loading Indicator */
.nav-loading-indicator[b-yqaab9k2ac] {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    color: var(--adf-text-secondary);
    font-size: var(--adf-font-size-sm);
}

.nav-loading-indicator .spinner-border[b-yqaab9k2ac] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Bootstrap Icons */
.bi[b-yqaab9k2ac] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--adf-spacing-md);
    top: -1px;
    background-size: cover;
    flex-shrink: 0;
    transition: margin 0.3s ease;
    opacity: 1;
}

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

.bi-gear-fill-nav-menu[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

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

.bi-cloud-sun-fill[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-cloud-sun-fill' viewBox='0 0 16 16'%3E%3Cpath d='M11.473 11a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 16h8.5a2.5 2.5 0 0 0 0-5h-.027z'/%3E%3Cpath d='M10.5 1.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0v-1zm3.743 1.964a.5.5 0 1 0-.707-.707l-.708.707a.5.5 0 0 0 .708.708l.707-.708zm-7.779-.707a.5.5 0 0 0-.707.707l.707.708a.5.5 0 1 0 .708-.708l-.708-.707zm1.821 3.482a2 2 0 1 0-2.69 2.69 2.5 2.5 0 0 1 2.69-2.69z'/%3E%3C/svg%3E");
}

.bi-activity-nav-menu[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-activity' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-book-fill-nav-menu[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-book-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z'/%3E%3C/svg%3E");
}

.bi-palette-fill[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-palette-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12.433 10.07C14.133 10.585 16 11.15 16 8a8 8 0 1 0-8 8c1.996 0 1.826-1.504 1.649-3.08-.124-1.101-.252-2.237.351-2.92.465-.527 1.42-.237 2.433.07zM8 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E");
}

.bi-gear-wide-connected[b-yqaab9k2ac] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23323130' class='bi bi-gear-wide-connected' viewBox='0 0 16 16'%3E%3Cpath d='M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434L8.932 15.273c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.187-1.187l-.283.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622L.727 8.932c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622L1.236 5.17c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.187l-.081-.283c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434L7.068.727zM8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492z'/%3E%3C/svg%3E");
}

/* Dark Mode Icon Adjustments */
[data-theme="dark"] .bi[b-yqaab9k2ac] {
    filter: brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(90%);
}

[data-theme="dark"] .nav-item a.active .bi[b-yqaab9k2ac] {
    filter: brightness(0) saturate(100%) invert(74%) sepia(56%) saturate(465%) hue-rotate(157deg) brightness(100%) contrast(96%);
}

/* Navigation Items */
.nav-item[b-yqaab9k2ac] {
    font-size: var(--adf-font-size-sm);
    transition: all 0.3s ease;
    border-left: 3px solid var(--adf-border-light);
    margin: 0;
    margin-left: var(--adf-spacing-lg);
    padding: 0;
    position: relative;
    background-color: transparent;
    min-height: 40px;
}

.nav-item:first-of-type[b-yqaab9k2ac] {
    padding-top: 0;
}

.nav-item:last-of-type[b-yqaab9k2ac] {
    padding-bottom: 0;
}

.nav-item:hover[b-yqaab9k2ac] {
    border-left-color: var(--adf-text-accent);
    background-color: var(--adf-hover-bg);
}

.nav-item .nav-link[b-yqaab9k2ac] {
    color: var(--adf-text-secondary) !important;
    border: none;
    border-radius: 0;
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-weight: 400;
    margin: 0;
    text-decoration: none !important;
    min-height: 40px;
    background-color: transparent;
}

.nav-item .nav-link:hover[b-yqaab9k2ac] {
    color: var(--adf-text-primary) !important;
    text-decoration: none !important;
}

.nav-item .nav-link:focus[b-yqaab9k2ac] {
    color: var(--adf-text-primary) !important;
    text-decoration: none !important;
    outline: 2px solid var(--adf-focus-border);
    outline-offset: -2px;
}

.nav-item .nav-link:visited[b-yqaab9k2ac] {
    color: var(--adf-text-secondary) !important;
    text-decoration: none !important;
}

.nav-item .nav-link:link[b-yqaab9k2ac] {
    color: var(--adf-text-secondary) !important;
    text-decoration: none !important;
}

.nav-item .nav-link:active[b-yqaab9k2ac] {
    color: var(--adf-text-primary) !important;
    text-decoration: none !important;
}

.nav-item a.active[b-yqaab9k2ac] {
    background-color: var(--adf-active-bg);
    color: var(--adf-text-accent) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.nav-item a.active .bi[b-yqaab9k2ac] {
    filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(1845%) hue-rotate(194deg) brightness(96%) contrast(101%);
}

/* Developer Menu Items */
.nav-divider[b-yqaab9k2ac] {
    margin: 0;
    border-color: var(--adf-border-light);
    opacity: 0.5;
}

.nav-section-header[b-yqaab9k2ac] {
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    margin-bottom: 0;
}

.nav-section-header.collapsed[b-yqaab9k2ac] {
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
}

.nav-item.dev-item[b-yqaab9k2ac] {
    opacity: 0.9;
    border-left-color: #007bff;
    margin-left: calc(var(--adf-spacing-lg) + var(--adf-spacing-md));
}

.nav-item.dev-item:hover[b-yqaab9k2ac] {
    border-left-color: #0056b3;
    background-color: rgba(0, 123, 255, 0.08);
}

.nav-item.dev-item .nav-link[b-yqaab9k2ac] {
    font-size: 0.85rem;
    padding-left: var(--adf-spacing-md);
}

.nav-item.dev-item.collapsed[b-yqaab9k2ac] {
    margin-left: 0;
}

.nav-item.dev-item.collapsed .nav-link[b-yqaab9k2ac] {
    padding-left: var(--adf-spacing-md);
}

.nav-item.dev-item a.active[b-yqaab9k2ac] {
    color: #0056b3;
    font-weight: 600;
}

.nav-item.dev-item.collapsed a.active[b-yqaab9k2ac] {
    color: #0056b3;
}

/* Navigation Text */
.nav-text[b-yqaab9k2ac] {
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

/* Navigation Scrollable */
.nav-scrollable[b-yqaab9k2ac] {
    display: block;
    height: calc(100vh - var(--adf-header-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    transition: width 0.3s ease;
    width: var(--adf-nav-width);
}

/* Collapsed State */
.nav-scrollable.collapsed[b-yqaab9k2ac] {
    width: var(--adf-nav-width-collapsed);
}

.nav-item.collapsed[b-yqaab9k2ac] {
    margin-left: 0;
    border-left: none;
}

.nav-item.collapsed .nav-link[b-yqaab9k2ac] {
    padding: var(--adf-spacing-md);
    justify-content: center;
    margin: 0;
}

.nav-item.collapsed .bi[b-yqaab9k2ac] {
    margin-right: 0;
}

.nav-item.collapsed .nav-text[b-yqaab9k2ac] {
    opacity: 0;
    transform: translateX(-10px);
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Expanded State */
.nav-scrollable.expanded[b-yqaab9k2ac] {
    width: var(--adf-nav-width);
}

.nav-item.expanded .nav-text[b-yqaab9k2ac] {
    opacity: 1;
    transform: translateX(0);
}

.nav-item.expanded .bi[b-yqaab9k2ac] {
    margin-right: var(--adf-spacing-md);
}

/* Responsive Design */
@media (max-width: 640.98px) {
    .navbar-toggler[b-yqaab9k2ac] {
        display: block;
    }

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

    .navbar-toggler:checked ~ .nav-scrollable[b-yqaab9k2ac] {
        display: block;
        position: fixed;
        top: var(--adf-header-height);
        left: 0;
        height: calc(100vh - var(--adf-header-height));
        width: var(--adf-nav-width);
        z-index: var(--adf-z-dropdown);
        background-color: var(--adf-nav-bg);
        box-shadow: var(--adf-shadow-lg);
    }
}

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

    .nav-scrollable[b-yqaab9k2ac] {
        display: block;
        height: calc(100vh - var(--adf-header-height));
        overflow-y: auto;
    }
}

/* ── User profile panel at the bottom of the sidebar ── */
.nav-user-profile[b-yqaab9k2ac] {
    margin-top: auto;
    border-top: 1px solid var(--adf-border-light);
    padding: 0.75rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-user-profile--collapsed[b-yqaab9k2ac] {
    align-items: center;
    padding: 0.75rem 0.5rem;
}

.nav-user-info[b-yqaab9k2ac] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.nav-user-avatar[b-yqaab9k2ac] {
    font-size: 1.5rem;
    color: var(--adf-text-accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.nav-user-details[b-yqaab9k2ac] {
    overflow: hidden;
    min-width: 0;
}

.nav-user-name[b-yqaab9k2ac] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-role[b-yqaab9k2ac] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 2px;
    flex-wrap: wrap;
}

.badge-xs[b-yqaab9k2ac] {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.nav-user-tenant[b-yqaab9k2ac] {
    font-size: 0.72rem;
    color: var(--adf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.nav-signout-btn[b-yqaab9k2ac] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--adf-text-secondary);
    text-decoration: none;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--adf-border-light);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    width: 100%;
}

.nav-signout-btn:hover[b-yqaab9k2ac] {
    background: var(--adf-hover-bg);
    color: var(--adf-text-accent);
    text-decoration: none;
}

/* Debug nav link style */
.nav-link-debug[b-yqaab9k2ac] {
    opacity: 0.7;
    font-style: italic;
}

.nav-link-debug:hover[b-yqaab9k2ac] {
    opacity: 1;
}

/* Dark mode overrides */
[data-theme="dark"] .nav-user-profile[b-yqaab9k2ac] {
    border-top-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .nav-signout-btn[b-yqaab9k2ac] {
    border-color: rgba(255,255,255,0.12);
}
/* /Components/Layout/ThemeToggle.razor.rz.scp.css */
/* Theme Toggle Component - Modern Style */
.theme-toggle[b-3tniyfi2hr] {
    display: inline-flex;
    align-items: center;
}

.theme-toggle-button[b-3tniyfi2hr] {
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 6px;
    color: var(--adf-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--adf-font-family);
    font-size: var(--adf-font-size-sm);
}

.theme-toggle-button:hover[b-3tniyfi2hr] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
    transform: translateY(-1px);
    box-shadow: var(--adf-shadow-sm);
}

.theme-toggle-button:active[b-3tniyfi2hr] {
    transform: translateY(0);
}

.theme-icon[b-3tniyfi2hr] {
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.theme-label[b-3tniyfi2hr] {
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .theme-label[b-3tniyfi2hr] {
        display: none;
    }
    
    .theme-toggle-button[b-3tniyfi2hr] {
        padding: var(--adf-spacing-sm);
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync About Page — public info page
   Inherits landing page classes + adds about-specific
   Uses --adf-* design tokens from app.css + Bootstrap
   ═══════════════════════════════════════════════════ */

/* Active nav link */
.landing-nav-link--active[b-1mgrohq3wj] {
    color: var(--adf-text-accent) !important;
    font-weight: 600;
}

/* ─── Technology grid ───────────────────────────── */
.about-tech-grid[b-1mgrohq3wj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.about-tech-card[b-1mgrohq3wj] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--adf-card-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.about-tech-card:hover[b-1mgrohq3wj] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 4px 16px rgba(0, 120, 212, 0.1);
}

.about-tech-icon[b-1mgrohq3wj] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.about-tech-icon--blue[b-1mgrohq3wj]    { background: rgba(0, 120, 212, 0.12); color: #0078d4; }
.about-tech-icon--teal[b-1mgrohq3wj]    { background: rgba(0, 178, 148, 0.12); color: #00b294; }
.about-tech-icon--orange[b-1mgrohq3wj]  { background: rgba(234, 92,  0,  0.12); color: #ea5c00; }
.about-tech-icon--purple[b-1mgrohq3wj]  { background: rgba(134, 96, 214, 0.12); color: #8660d6; }
.about-tech-icon--green[b-1mgrohq3wj]   { background: rgba(16,  124,  16, 0.12); color: #107c10; }
.about-tech-icon--red[b-1mgrohq3wj]     { background: rgba(209,  52,  56, 0.12); color: #d13438; }

.about-tech-body h4[b-1mgrohq3wj] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 0.35rem;
}

.about-tech-body p[b-1mgrohq3wj] {
    font-size: 0.85rem;
    color: var(--adf-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ─── Support cards ─────────────────────────────── */
.about-support-grid[b-1mgrohq3wj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.about-support-card[b-1mgrohq3wj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--adf-card-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.about-support-card:hover[b-1mgrohq3wj] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 4px 16px rgba(0, 120, 212, 0.1);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.about-support-icon[b-1mgrohq3wj] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.about-support-icon--blue[b-1mgrohq3wj]   { background: rgba(0, 120, 212, 0.12); color: #0078d4; }
.about-support-icon--teal[b-1mgrohq3wj]   { background: rgba(0, 178, 148, 0.12); color: #00b294; }
.about-support-icon--purple[b-1mgrohq3wj] { background: rgba(134, 96, 214, 0.12); color: #8660d6; }

.about-support-body h4[b-1mgrohq3wj] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 0.4rem;
}

.about-support-body p[b-1mgrohq3wj] {
    font-size: 0.875rem;
    color: var(--adf-text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.5;
    flex: 1;
}

.about-support-cta[b-1mgrohq3wj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adf-text-accent);
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 640px) {
    .about-tech-grid[b-1mgrohq3wj] {
        grid-template-columns: 1fr;
    }

    .about-support-grid[b-1mgrohq3wj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Csp.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — CSP Partner Resources Page Styles
   Uses --adf-* design tokens from app.css + Bootstrap Icons.
   Reuses GLOBAL landing-* classes (hero glow/badge/title, sections,
   feature cards, CTA banner, btn-cta-*). All page-specific blocks
   below are prefixed csp- and self-contained.
   ═══════════════════════════════════════════════════ */

/* ─── Hero (self-contained dark variant) ────────── */
.csp-hero[b-q3emqquvzz] {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 2rem 4.5rem;
    background: linear-gradient(150deg, #0d1117 0%, #0e2040 40%, #003a6e 100%);
    text-align: center;
    color: #fff;
}

.csp-hero-inner[b-q3emqquvzz] {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.csp-hero-cta[b-q3emqquvzz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.csp-hero-note[b-q3emqquvzz] {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Quick nav ─────────────────────────────────── */
.csp-quicknav[b-q3emqquvzz] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
}

.csp-quicknav-link[b-q3emqquvzz] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--adf-text-secondary);
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.csp-quicknav-link:hover[b-q3emqquvzz] {
    color: var(--adf-text-accent);
    background: var(--adf-primary-bg);
    border-color: var(--adf-border-light);
    text-decoration: none;
}

/* ─── Sub-head + integration chips ──────────────── */
.csp-subhead[b-q3emqquvzz] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 2.5rem 0 1rem;
}

.csp-chip-grid[b-q3emqquvzz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.csp-chip[b-q3emqquvzz] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--adf-text-primary);
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
}

/* ─── Split panels (ICP / use cases / private offers) ── */
.csp-split[b-q3emqquvzz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.csp-panel[b-q3emqquvzz] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 2rem;
}

.csp-panel--accent[b-q3emqquvzz] {
    border-left: 4px solid var(--adf-text-accent);
}

.csp-panel-title[b-q3emqquvzz] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 1.1rem;
}

/* ─── Checklists ────────────────────────────────── */
.csp-checklist[b-q3emqquvzz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.csp-checklist li[b-q3emqquvzz] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

.csp-checklist li .bi[b-q3emqquvzz] {
    color: var(--adf-success);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ─── Numbered steps ────────────────────────────── */
.csp-steps[b-q3emqquvzz] {
    margin: 0 0 1.5rem;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.csp-steps li[b-q3emqquvzz] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

/* ─── Callout box ───────────────────────────────── */
.csp-callout[b-q3emqquvzz] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    background: var(--adf-info-light);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid var(--adf-info);
    border-radius: 10px;
    padding: 1.1rem 1.4rem;
    margin-top: 2rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--adf-text-primary);
}

.csp-callout .bi[b-q3emqquvzz] {
    color: var(--adf-info);
    margin-top: 0.15rem;
}

.csp-callout a[b-q3emqquvzz] {
    color: var(--adf-text-accent);
    font-weight: 600;
}

/* ─── Screenshot gallery ────────────────────────── */
.csp-gallery[b-q3emqquvzz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.csp-shot[b-q3emqquvzz] {
    margin: 0;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.csp-shot:hover[b-q3emqquvzz] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.csp-shot img[b-q3emqquvzz] {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--adf-border-light);
}

.csp-shot figcaption[b-q3emqquvzz] {
    padding: 0.85rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

/* ─── Marketplace listing card ──────────────────── */
.csp-listing[b-q3emqquvzz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 2rem;
}

.csp-listing-facts[b-q3emqquvzz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem 2.5rem;
    margin: 0;
    flex: 1 1 auto;
}

.csp-listing-row[b-q3emqquvzz] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.csp-listing-row dt[b-q3emqquvzz] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--adf-text-secondary);
}

.csp-listing-row dd[b-q3emqquvzz] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.csp-badge-live[b-q3emqquvzz] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adf-success);
    background: var(--adf-success-light);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

/* ─── Centered CTA + fine print ─────────────────── */
.csp-center[b-q3emqquvzz] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.csp-finenote[b-q3emqquvzz] {
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--adf-text-secondary);
}

.csp-card-link[b-q3emqquvzz] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.85rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--adf-text-accent);
    text-decoration: none;
}

.csp-card-link:hover[b-q3emqquvzz] {
    text-decoration: underline;
}

/* ─── Training pack: document cards ──────────────── */
.csp-doc-grid[b-q3emqquvzz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.csp-doc-card[b-q3emqquvzz] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.csp-doc-card:hover[b-q3emqquvzz] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--adf-text-accent);
    text-decoration: none;
}

.csp-doc-icon[b-q3emqquvzz] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--adf-info-light);
    color: var(--adf-info);
    font-size: 1.5rem;
}

.csp-doc-body[b-q3emqquvzz] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.csp-doc-title[b-q3emqquvzz] {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.csp-doc-desc[b-q3emqquvzz] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--adf-text-secondary);
}

.csp-doc-action[b-q3emqquvzz] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adf-text-accent);
}

/* ─── Video tutorials grid ──────────────────────── */
.csp-video-grid[b-q3emqquvzz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.csp-video-card[b-q3emqquvzz] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.csp-video-card:hover[b-q3emqquvzz] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.csp-video-thumb[b-q3emqquvzz] {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #000;
}

.csp-video-thumb img[b-q3emqquvzz] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csp-video-play[b-q3emqquvzz] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0.9;
    transition: opacity 0.2s, background 0.2s;
}

.csp-video-card:hover .csp-video-play[b-q3emqquvzz] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}

.csp-video-meta[b-q3emqquvzz] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
}

.csp-video-title[b-q3emqquvzz] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.csp-video-desc[b-q3emqquvzz] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--adf-text-secondary);
}

/* ─── Trademark / partner disclosure ────────────── */
.csp-disclosure[b-q3emqquvzz] {
    padding: 2.5rem 2rem 4rem;
    background: var(--adf-primary-bg);
}

.csp-disclosure p[b-q3emqquvzz] {
    max-width: 1100px;
    margin: 0 auto;
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

/* ─── Dark theme overrides ──────────────────────── */
[data-theme="dark"] .csp-chip[b-q3emqquvzz],
[data-theme="dark"] .csp-panel[b-q3emqquvzz],
[data-theme="dark"] .csp-shot[b-q3emqquvzz],
[data-theme="dark"] .csp-listing[b-q3emqquvzz] {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .csp-doc-card[b-q3emqquvzz],
[data-theme="dark"] .csp-video-card[b-q3emqquvzz] {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .csp-quicknav[b-q3emqquvzz] {
    background: #1e1e1e;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .csp-shot:hover[b-q3emqquvzz],
[data-theme="dark"] .csp-listing:hover[b-q3emqquvzz] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .csp-hero[b-q3emqquvzz] {
        padding: 4rem 1.25rem 3rem;
    }

    .csp-quicknav[b-q3emqquvzz] {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .csp-listing[b-q3emqquvzz] {
        flex-direction: column;
        align-items: stretch;
    }

    .csp-doc-card[b-q3emqquvzz] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}
/* /Components/Pages/Documentation/Wiki.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Wiki Page — standalone public documentation layout
   Uses --adf-* design tokens from app.css
   ═══════════════════════════════════════════════════ */

/* ─── Shell ─────────────────────────────────────── */
.wiki-page-shell[b-j86nvkjl5l] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--adf-primary-bg);
}

/* ─── Top navbar ────────────────────────────────── */
.wiki-topbar[b-j86nvkjl5l] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--adf-border-light);
    padding: 0.65rem 0;
    flex-shrink: 0;
}

.wiki-topbar-inner[b-j86nvkjl5l] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wiki-topbar-logo[b-j86nvkjl5l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--adf-text-primary);
}

.wiki-topbar-logo-icon[b-j86nvkjl5l] {
    font-size: 1.35rem;
    color: var(--adf-text-accent);
}

.wiki-topbar-logo-text[b-j86nvkjl5l] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.wiki-topbar-actions[b-j86nvkjl5l] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.wiki-topbar-link[b-j86nvkjl5l] {
    color: var(--adf-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.wiki-topbar-link:hover[b-j86nvkjl5l],
.wiki-topbar-link--active[b-j86nvkjl5l] {
    color: var(--adf-text-accent);
}

.wiki-topbar-signin[b-j86nvkjl5l] {
    background: var(--adf-text-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.4rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.wiki-topbar-signin:hover[b-j86nvkjl5l] {
    background: var(--adf-hover-accent);
    transform: translateY(-1px);
}

/* ─── Main layout (sidebar + content) ───────────── */
.wiki-container[b-j86nvkjl5l] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.wiki-sidebar[b-j86nvkjl5l] {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--adf-secondary-bg);
    border-right: 1px solid var(--adf-border-color);
    overflow-y: auto;
    position: sticky;
    top: 48px;                               /* navbar height */
    height: calc(100vh - 48px);
}

.wiki-content[b-j86nvkjl5l] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    height: calc(100vh - 48px);
    position: sticky;
    top: 48px;
}

.wiki-content-wrapper[b-j86nvkjl5l] {
    max-width: 1000px;
    margin: 0 auto;
}

/* ─── Dark mode ─────────────────────────────────── */
[data-theme="dark"] .wiki-topbar[b-j86nvkjl5l] {
    background: rgba(30,30,30,0.92);
    border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .wiki-sidebar[b-j86nvkjl5l] {
    background-color: var(--adf-tertiary-bg);
    border-right-color: var(--adf-border-light);
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 992px) {
    .wiki-container[b-j86nvkjl5l] {
        flex-direction: column;
    }

    .wiki-sidebar[b-j86nvkjl5l] {
        width: 100%;
        position: relative;
        top: 0;
        height: auto;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--adf-border-color);
    }

    .wiki-content[b-j86nvkjl5l] {
        position: relative;
        top: 0;
        height: auto;
        padding: 1rem;
    }
}

@media (max-width: 640px) {
    .wiki-topbar-link:not(.wiki-topbar-link--active)[b-j86nvkjl5l] {
        display: none;
    }
}
/* /Components/Pages/GetStarted.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — Get Started (marketplace hand-off shim)

   Near-invisible by design: the page exists to record purchase intent, not to be read.
   Anything here is only seen if the redirect is slow or JavaScript is unavailable.
   ═══════════════════════════════════════════════════ */

.getstarted-shim[b-llhwda44e5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: var(--adf-primary-bg);
}

.getstarted-shim-spinner[b-llhwda44e5] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--adf-border-light);
    border-top-color: var(--adf-text-accent);
    border-radius: 50%;
    animation: getstarted-shim-spin-b-llhwda44e5 0.8s linear infinite;
}

@keyframes getstarted-shim-spin-b-llhwda44e5 {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .getstarted-shim-spinner[b-llhwda44e5] {
        animation: none;
    }
}

.getstarted-shim-text[b-llhwda44e5] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--adf-text-secondary);
}

.getstarted-shim-link[b-llhwda44e5] {
    font-size: 0.9rem;
    color: var(--adf-text-accent);
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home Page Styles - Azure Data Factory Inspired */

/* ===== Skeleton loading cards ===== */
.skeleton-card[b-3q2o0i3rzb] {
    min-height: 110px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--adf-tertiary-bg) 25%, var(--adf-accent-bg) 37%, var(--adf-tertiary-bg) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-3q2o0i3rzb 1.4s ease infinite;
    cursor: default;
}

@keyframes skeleton-shimmer-b-3q2o0i3rzb {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-card[b-3q2o0i3rzb] { animation: none; }
}

/* ===== Polysync Hero Logo ===== */
.hero-logo[b-3q2o0i3rzb] {
    height: 3rem;
    width: auto;
    margin-right: 0.75rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ===== Container & Layout ===== */
.home-container[b-3q2o0i3rzb] {
    min-height: 100vh;
    background: var(--adf-primary-bg);
    overflow-x: hidden;
}

/* ===== Hero Section ===== */
.hero-section[b-3q2o0i3rzb] {
    background: linear-gradient(135deg, 
        var(--adf-text-accent) 0%, 
        var(--adf-hover-accent) 100%);
    color: var(--adf-text-white);
    padding: 4rem 2rem 3rem;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.hero-section[b-3q2o0i3rzb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero-content[b-3q2o0i3rzb] {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title[b-3q2o0i3rzb] {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.hero-title .bi[b-3q2o0i3rzb] {
    font-size: 2.5rem;
}

.hero-subtitle[b-3q2o0i3rzb] {
    font-size: 1.25rem;
    font-weight: 300;
    opacity: 0.95;
    margin: 0;
}

/* ===== Content Wrapper ===== */
.content-wrapper[b-3q2o0i3rzb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ===== Section Styles ===== */
.home-section[b-3q2o0i3rzb] {
    margin-bottom: 3rem;
}

.section-title[b-3q2o0i3rzb] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--adf-border-light);
}

.section-title .bi[b-3q2o0i3rzb] {
    color: var(--adf-text-accent);
}

/* ===== Action Cards Grid ===== */
.cards-grid[b-3q2o0i3rzb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.action-card[b-3q2o0i3rzb] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.action-card[b-3q2o0i3rzb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--adf-text-accent);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.action-card:hover[b-3q2o0i3rzb] {
    transform: translateY(-4px);
    box-shadow: var(--adf-shadow-lg);
    border-color: var(--adf-text-accent);
}

.action-card:hover[b-3q2o0i3rzb]::before {
    transform: scaleY(1);
}

.action-card:active[b-3q2o0i3rzb] {
    transform: translateY(-2px);
}

/* Card Icon Styles */
.card-icon[b-3q2o0i3rzb] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: var(--adf-active-bg);
    color: var(--adf-text-accent);
    transition: all 0.3s ease;
}

.action-card:hover .card-icon[b-3q2o0i3rzb] {
    background: var(--adf-text-accent);
    color: white;
    transform: scale(1.1) rotate(5deg);
}

/* Card Type Specific Styles */
.adf-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(0, 122, 204, 0.1);
}

.databricks-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(255, 140, 0, 0.1);
    color: #ff8c00;
}

.databricks-card:hover .card-icon[b-3q2o0i3rzb] {
    background: #ff8c00;
    color: white;
}

.functions-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(16, 124, 16, 0.1);
    color: #107c10;
}

.functions-card:hover .card-icon[b-3q2o0i3rzb] {
    background: #107c10;
    color: white;
}

.tasks-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(102, 51, 153, 0.1);
    color: #663399;
}

.tasks-card:hover .card-icon[b-3q2o0i3rzb] {
    background: #663399;
    color: white;
}

/* Card Content */
.card-content[b-3q2o0i3rzb] {
    flex: 1;
}

.card-title[b-3q2o0i3rzb] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin-bottom: 0.5rem;
}

.card-description[b-3q2o0i3rzb] {
    font-size: 0.95rem;
    color: var(--adf-text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.card-badge[b-3q2o0i3rzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-badge .badge[b-3q2o0i3rzb] {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    font-weight: 500;
}

.card-arrow[b-3q2o0i3rzb] {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--adf-text-muted);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.action-card:hover .card-arrow[b-3q2o0i3rzb] {
    color: var(--adf-text-accent);
    transform: translateX(4px);
}

/* ===== Resources Grid ===== */
.resources-grid[b-3q2o0i3rzb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.resource-link[b-3q2o0i3rzb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    color: var(--adf-text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.resource-link:hover[b-3q2o0i3rzb] {
    background: var(--adf-hover-bg);
    border-color: var(--adf-text-accent);
    color: var(--adf-text-accent);
    transform: translateX(4px);
}

.resource-link .bi:first-child[b-3q2o0i3rzb] {
    font-size: 1.25rem;
}

.resource-link .bi:last-child[b-3q2o0i3rzb] {
    font-size: 0.875rem;
}

/* ===== Recently Visited Grid ===== */
.recent-grid[b-3q2o0i3rzb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.recent-card[b-3q2o0i3rzb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.recent-card:hover[b-3q2o0i3rzb] {
    border-color: var(--adf-text-accent);
    box-shadow: var(--adf-shadow-md);
    transform: translateY(-2px);
}

.recent-card:hover .recent-arrow[b-3q2o0i3rzb] {
    opacity: 1;
    color: var(--adf-text-accent);
    transform: translateX(3px);
}

.recent-icon[b-3q2o0i3rzb] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--adf-active-bg);
    color: var(--adf-text-accent);
    font-size: 1.1rem;
}

.recent-entity-icon[b-3q2o0i3rzb] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.recent-content[b-3q2o0i3rzb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.recent-name[b-3q2o0i3rzb] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-meta[b-3q2o0i3rzb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recent-type-badge[b-3q2o0i3rzb] {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--adf-active-bg);
    color: var(--adf-text-secondary);
}

.recent-time[b-3q2o0i3rzb] {
    font-size: 0.8rem;
    color: var(--adf-text-muted);
}

.recent-arrow[b-3q2o0i3rzb] {
    font-size: 1rem;
    color: var(--adf-text-muted);
    opacity: 0.3;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

/* ===== Configuration Summary Grid ===== */
.summary-grid[b-3q2o0i3rzb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.summary-card[b-3q2o0i3rzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.summary-card:hover[b-3q2o0i3rzb] {
    border-color: var(--adf-text-accent);
    box-shadow: var(--adf-shadow-md);
    transform: translateY(-2px);
}

.summary-value[b-3q2o0i3rzb] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--adf-text-accent);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.summary-label[b-3q2o0i3rzb] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-bg-icon[b-3q2o0i3rzb] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1.1rem;
    color: var(--adf-text-muted);
    opacity: 0.2;
}

/* ===== Dark Mode Adjustments ===== */
[data-theme="dark"] .hero-section[b-3q2o0i3rzb] {
    background: linear-gradient(135deg, 
        #0e639c 0%, 
        #094771 100%);
}

[data-theme="dark"] .action-card[b-3q2o0i3rzb] {
    border-color: var(--adf-border-medium);
}

[data-theme="dark"] .action-card:hover[b-3q2o0i3rzb] {
    border-color: var(--adf-text-accent);
    background: var(--adf-tertiary-bg);
}

[data-theme="dark"] .card-icon[b-3q2o0i3rzb] {
    background: var(--adf-tertiary-bg);
}

[data-theme="dark"] .adf-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(79, 195, 247, 0.15);
    color: var(--adf-text-accent);
}

[data-theme="dark"] .databricks-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(255, 184, 108, 0.15);
    color: #ffb86c;
}

[data-theme="dark"] .functions-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(78, 201, 176, 0.15);
    color: #4ec9b0;
}

[data-theme="dark"] .tasks-card .card-icon[b-3q2o0i3rzb] {
    background: rgba(197, 134, 192, 0.15);
    color: #c586c0;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .hero-title[b-3q2o0i3rzb] {
        font-size: 2rem;
    }

    .hero-title .bi[b-3q2o0i3rzb] {
        font-size: 1.75rem;
    }

    .hero-subtitle[b-3q2o0i3rzb] {
        font-size: 1rem;
    }

    .hero-section[b-3q2o0i3rzb] {
        padding: 2rem 1rem;
    }

    .content-wrapper[b-3q2o0i3rzb] {
        padding: 0 1rem 2rem;
    }

    .cards-grid[b-3q2o0i3rzb] {
        grid-template-columns: 1fr;
    }

    .recent-grid[b-3q2o0i3rzb] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-3q2o0i3rzb] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .section-title[b-3q2o0i3rzb] {
        font-size: 1.5rem;
    }

}

@media (max-width: 480px) {
    .hero-title[b-3q2o0i3rzb] {
        font-size: 1.5rem;
        flex-direction: column;
        text-align: center;
    }

    .hero-subtitle[b-3q2o0i3rzb] {
        font-size: 0.9rem;
        text-align: center;
    }

    .action-card[b-3q2o0i3rzb] {
        flex-direction: column;
        text-align: center;
    }

    .card-arrow[b-3q2o0i3rzb] {
        display: none;
    }

    .card-badge[b-3q2o0i3rzb] {
        justify-content: center;
    }
}

/* ===== Animation ===== */
@keyframes fadeIn-b-3q2o0i3rzb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-section[b-3q2o0i3rzb] {
    animation: fadeIn-b-3q2o0i3rzb 0.6s ease-out;
}

.home-section:nth-child(1)[b-3q2o0i3rzb] {
    animation-delay: 0.1s;
}

.home-section:nth-child(2)[b-3q2o0i3rzb] {
    animation-delay: 0.2s;
}

.home-section:nth-child(3)[b-3q2o0i3rzb] {
    animation-delay: 0.3s;
}

.home-section:nth-child(4)[b-3q2o0i3rzb] {
    animation-delay: 0.4s;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Landing page — bento mosaic
   Compact hero + a single dense grid of variable-size tiles.
   The long-form copy lives in a slide-in drawer, so nothing is
   lost but the page itself stays about two screens tall.
   ══════════════════════════════════════════════════════════ */

.landing-bento[b-tyrimjnfqz] {
    background: var(--adf-primary-bg);
    color: var(--adf-text-primary);
}

/* ─── Hero ──────────────────────────────────────── */
.lb-hero[b-tyrimjnfqz] {
    padding: 3.25rem 2rem 2.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 900px 420px at 50% -10%, rgba(0,120,212,0.30), transparent 70%),
        linear-gradient(180deg, #0b1220 0%, #101a2e 100%);
    color: #fff;
}

.lb-hero-inner[b-tyrimjnfqz] { max-width: 900px; margin: 0 auto; }

.lb-badges[b-tyrimjnfqz] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.lb-badge[b-tyrimjnfqz] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
    margin-bottom: 1.1rem;
}

.lb-badge--marketplace[b-tyrimjnfqz] {
    background: rgba(0,120,212,0.18);
    border-color: rgba(0,120,212,0.45);
    color: #cfe8ff;
    text-decoration: none;
}

.lb-badge--marketplace:hover[b-tyrimjnfqz] {
    border-color: rgba(0,120,212,0.7);
    color: #ffffff;
}

.lb-hero h1[b-tyrimjnfqz] {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.lb-accent[b-tyrimjnfqz] {
    display: block;
    background: linear-gradient(90deg, #4fc3f7, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lb-hero-sub[b-tyrimjnfqz] {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
    max-width: 740px;
    margin: 0 auto 1.6rem;
}

.lb-hero-sub strong[b-tyrimjnfqz] { color: #fff; }

.lb-cta-row[b-tyrimjnfqz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
}

.lb-cta-row--center[b-tyrimjnfqz] { justify-content: center; }

.lb-trial[b-tyrimjnfqz] {
    margin: 1.1rem auto 0;
    max-width: 560px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.lb-trial-pill[b-tyrimjnfqz] {
    display: inline-block;
    background: rgba(76,175,80,0.18);
    border: 1px solid rgba(76,175,80,0.45);
    color: #a5d6a7;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    margin-right: 0.5rem;
    font-weight: 600;
}

.lb-hero-note[b-tyrimjnfqz] {
    margin-top: 1rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.6);
}

/* ─── Buttons ───────────────────────────────────── */
.lb-btn[b-tyrimjnfqz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
    min-height: 48px;
}

.lb-btn:hover[b-tyrimjnfqz] { transform: translateY(-1px); }

.lb-btn--primary[b-tyrimjnfqz] {
    background: linear-gradient(135deg, #0078d4, #005fa3);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,120,212,0.35);
}

.lb-btn--primary:hover[b-tyrimjnfqz] { color: #fff; }
.lb-btn--lg[b-tyrimjnfqz] { padding: 1rem 2.25rem; font-size: 1.02rem; }

.lb-btn--ghost[b-tyrimjnfqz] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

.lb-btn--ghost:hover[b-tyrimjnfqz] { background: rgba(255,255,255,0.14); color: #fff; }

.lb-btn--bare[b-tyrimjnfqz] {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.75);
}

.lb-btn--bare:hover[b-tyrimjnfqz] { color: #fff; }

.lb-btn--outline[b-tyrimjnfqz] {
    background: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-accent);
    margin-top: 1.5rem;
}

.lb-btn--outline:hover[b-tyrimjnfqz] { border-color: var(--adf-text-accent); }

/* ─── Grid shell ────────────────────────────────── */
.lb-grid-wrap[b-tyrimjnfqz] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 3.5rem;
}

.lb-grid-hint[b-tyrimjnfqz] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    margin-bottom: 1.5rem;
}

.lb-grid[b-tyrimjnfqz] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* A regular base row height is what makes a bento read as tidy: rows line up
       even when their content differs in length. */
    grid-auto-rows: minmax(214px, auto);
    gap: 1rem;
}

/* ─── Tile base ─────────────────────────────────── */
.lb-tile[b-tyrimjnfqz] {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 16px;
    padding: 1.5rem;
    font: inherit;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

button.lb-tile[b-tyrimjnfqz] { cursor: pointer; }

button.lb-tile:hover[b-tyrimjnfqz],
button.lb-tile:focus-visible[b-tyrimjnfqz] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

button.lb-tile:hover .lb-open[b-tyrimjnfqz] { opacity: 1; transform: none; }

.lb-tile h3[b-tyrimjnfqz] {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}

/* Cap headings at two lines on the narrow tiles so a long one cannot push the
   list out of a tile that shares its row. */
.lb-tile--topic.lb-tile--w4 h3[b-tyrimjnfqz],
.lb-tile--topic.lb-tile--w6 h3[b-tyrimjnfqz] {
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lb-tile p[b-tyrimjnfqz] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--adf-text-secondary);
    margin: 0;
}

.lb-tile-sub[b-tyrimjnfqz] { margin-bottom: 1rem !important; }

.lb-tile-head[b-tyrimjnfqz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.lb-kicker[b-tyrimjnfqz] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adf-text-accent);
}

.lb-open[b-tyrimjnfqz] {
    color: var(--adf-text-accent);
    opacity: 0.35;
    transform: translate(-2px, 2px);
    transition: opacity 0.2s, transform 0.2s;
}

.lb-tile-foot[b-tyrimjnfqz] {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.82rem !important;
    color: var(--adf-text-secondary);
}

.lb-bignum[b-tyrimjnfqz] {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.35rem;
}

/* ─── Tile spans ────────────────────────────────────
   Width is set per tile with a utility class so the running order can be changed
   without touching the type classes. Every row sums to exactly 12:

     1  problem 12
     2  usecases 6      | integrations 6
     3  how 12
     4  capabilities 8  | copilot 4
     5  studio 12
     6  video 8         | docs 4
     7  trust 8         | who 4                                          */
.lb-tile--w12[b-tyrimjnfqz] { grid-column: span 12; }
.lb-tile--w8[b-tyrimjnfqz]  { grid-column: span 8; }
.lb-tile--w6[b-tyrimjnfqz]  { grid-column: span 6; }
.lb-tile--w4[b-tyrimjnfqz]  { grid-column: span 4; }

.lb-tile--video[b-tyrimjnfqz] { padding: 0; }

/* Wide tiles would otherwise run a four-item list down one long column beside a
   half-empty tile, so the list spreads across the width instead. */
.lb-tile--w12 .lb-minilist[b-tyrimjnfqz] { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 1.75rem; }
.lb-tile--w8 .lb-minilist[b-tyrimjnfqz]  { grid-template-columns: repeat(2, 1fr); column-gap: 1.75rem; }
.lb-minilist-more[b-tyrimjnfqz] { grid-column: 1 / -1; }

/* The only tile carrying a product name, so it is tinted to read as its own
   thing rather than a fifth capability. */
.lb-tile--copilot[b-tyrimjnfqz] {
    background: linear-gradient(160deg, rgba(124,77,255,0.07), var(--adf-secondary-bg) 55%);
    border-color: rgba(124,77,255,0.28);
}

.lb-tile--copilot p[b-tyrimjnfqz] { margin-bottom: 1rem; }
.lb-tile--copilot .lb-tile-foot[b-tyrimjnfqz] { margin-bottom: 0; }

/* ─── Video tile ────────────────────────────────── */
.lb-video[b-tyrimjnfqz] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.lb-video iframe[b-tyrimjnfqz], .lb-video-facade[b-tyrimjnfqz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.lb-video-facade[b-tyrimjnfqz] { padding: 0; cursor: pointer; background: #000; }
.lb-video-facade img[b-tyrimjnfqz] { width: 100%; height: 100%; object-fit: cover; }

.lb-video-play[b-tyrimjnfqz] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(220,30,30,0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: transform 0.2s;
}

.lb-video-facade:hover .lb-video-play[b-tyrimjnfqz] { transform: translate(-50%, -50%) scale(1.09); }

.lb-tile--video .lb-tile-body[b-tyrimjnfqz] { padding: 1.4rem 1.5rem 1.5rem; }

.lb-more[b-tyrimjnfqz] {
    align-self: flex-start;
    margin-top: 0.9rem;
    background: none;
    border: none;
    padding: 0.4rem 0;
    color: var(--adf-text-accent);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
}

.lb-more:hover[b-tyrimjnfqz] { text-decoration: underline; }

/* ─── Mini lists ────────────────────────────────── */
.lb-minilist[b-tyrimjnfqz] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: grid;
    gap: 0.55rem;
}

.lb-minilist li[b-tyrimjnfqz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.89rem;
    color: var(--adf-text-secondary);
}

.lb-minilist .bi[b-tyrimjnfqz] { color: var(--adf-text-accent); font-size: 0.95rem; flex: 0 0 auto; }

.lb-minilist-more[b-tyrimjnfqz] {
    font-style: italic;
    opacity: 0.75;
    padding-left: 1.55rem;
}

.lb-step[b-tyrimjnfqz] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ─── Chips ─────────────────────────────────────── */
.lb-chips[b-tyrimjnfqz] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.lb-chips--preview[b-tyrimjnfqz] { margin-top: 0.5rem; }

.lb-chip[b-tyrimjnfqz] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.lb-chip--more[b-tyrimjnfqz] { color: var(--adf-text-accent); font-weight: 700; }

/* ─── Screenshot strip ──────────────────────────── */
.lb-shots[b-tyrimjnfqz] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.85rem;
    margin-top: auto;
}

.lb-shot[b-tyrimjnfqz] {
    display: block;
    padding: 0;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.lb-shot:hover[b-tyrimjnfqz] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.lb-shot img[b-tyrimjnfqz] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

.lb-shot-cap[b-tyrimjnfqz] {
    display: block;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Drawer ────────────────────────────────────────
   Scrim, drawer, and all nine panels are always in the DOM and toggled with
   display, so the long-form copy stays in the served HTML for crawlers. */
.lb-scrim[b-tyrimjnfqz] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
}

.lb-scrim.is-open[b-tyrimjnfqz] { display: block; animation: lb-fade-b-tyrimjnfqz 0.2s ease; }

.lb-drawer[b-tyrimjnfqz] {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(680px, 100vw);
    background: var(--adf-primary-bg);
    border-left: 1px solid var(--adf-border-light);
    box-shadow: -18px 0 48px rgba(0,0,0,0.24);
    z-index: 901;
    flex-direction: column;
}

.lb-drawer.is-open[b-tyrimjnfqz] {
    display: flex;
    animation: lb-slide-b-tyrimjnfqz 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.lb-panel[b-tyrimjnfqz] { display: none; }
.lb-panel.is-active[b-tyrimjnfqz] { display: block; }

@keyframes lb-slide-b-tyrimjnfqz {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

@keyframes lb-fade-b-tyrimjnfqz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lb-drawer-head[b-tyrimjnfqz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--adf-border-light);
    background: var(--adf-secondary-bg);
}

.lb-drawer-head h2[b-tyrimjnfqz] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0.35rem 0 0;
}

.lb-drawer-close[b-tyrimjnfqz] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--adf-border-light);
    background: var(--adf-primary-bg);
    color: var(--adf-text-secondary);
    cursor: pointer;
}

.lb-drawer-close:hover[b-tyrimjnfqz] { color: var(--adf-text-primary); }

.lb-drawer-body[b-tyrimjnfqz] {
    flex: 1;
    overflow-y: auto;
    /* Reaching the end of a panel must not start scrolling the page behind it. */
    overscroll-behavior: contain;
    padding: 1.75rem;
}

.lb-lead[b-tyrimjnfqz] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--adf-text-secondary);
    margin-bottom: 1.75rem;
}

.lb-lead strong[b-tyrimjnfqz] { color: var(--adf-text-primary); }

.lb-cards[b-tyrimjnfqz] { display: grid; gap: 1rem; }

.lb-card[b-tyrimjnfqz] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1.25rem 1.3rem;
}

.lb-card h3[b-tyrimjnfqz] { font-size: 1rem; font-weight: 700; margin-bottom: 0.45rem; }

.lb-card p[b-tyrimjnfqz] {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
    margin: 0;
}

.lb-card-icon[b-tyrimjnfqz] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
}

.lb-card-icon--blue[b-tyrimjnfqz]   { background: #e5f1fb; color: #0067b8; }
.lb-card-icon--purple[b-tyrimjnfqz] { background: #f0e9fb; color: #6b31c9; }
.lb-card-icon--green[b-tyrimjnfqz]  { background: #e6f4ea; color: #1e7f3c; }
.lb-card-icon--teal[b-tyrimjnfqz]   { background: #e0f5f4; color: #067a72; }
.lb-card-icon--orange[b-tyrimjnfqz] { background: #fff0e5; color: #d06a00; }
.lb-card-icon--red[b-tyrimjnfqz]    { background: #fce8e8; color: #c22a1b; }

.lb-steps[b-tyrimjnfqz] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.lb-steps li[b-tyrimjnfqz] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 3px solid var(--adf-text-accent);
    border-radius: 10px;
    padding: 1.2rem 1.3rem;
}

.lb-step-num[b-tyrimjnfqz] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
}

.lb-steps h3[b-tyrimjnfqz] { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }

.lb-steps p[b-tyrimjnfqz] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

.lb-vendor[b-tyrimjnfqz] { margin-bottom: 1.6rem; }

.lb-vendor h3[b-tyrimjnfqz] {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: var(--adf-text-secondary);
}

.lb-callout[b-tyrimjnfqz] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid #f0ad4e;
    border-radius: 8px;
    padding: 1.05rem 1.2rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

.lb-callout .bi[b-tyrimjnfqz] { color: #f0ad4e; }
.lb-callout strong[b-tyrimjnfqz] { color: var(--adf-text-primary); }

.lb-note[b-tyrimjnfqz] {
    margin-top: 1.4rem;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

/* ─── CTA ───────────────────────────────────────── */
.lb-cta[b-tyrimjnfqz] {
    background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
    padding: 3.25rem 2rem;
    text-align: center;
}

.lb-cta-inner[b-tyrimjnfqz] { max-width: 820px; margin: 0 auto; }
.lb-cta h2[b-tyrimjnfqz] { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.7rem; }
.lb-cta p[b-tyrimjnfqz] { font-size: 1rem; opacity: 0.92; margin-bottom: 1.5rem; line-height: 1.65; }
.lb-articles[b-tyrimjnfqz] { margin-top: 1.6rem; font-size: 0.85rem; opacity: 0.85; }
.lb-articles a[b-tyrimjnfqz] { color: #fff; text-decoration: underline; }

/* ─── Lightbox ──────────────────────────────────── */
.lb-lightbox[b-tyrimjnfqz] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.lb-lightbox-content[b-tyrimjnfqz] { position: relative; max-width: 92vw; max-height: 90vh; }

.lb-lightbox-content img[b-tyrimjnfqz] {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 8px;
    display: block;
}

.lb-lightbox-title[b-tyrimjnfqz] { color: #fff; font-weight: 600; margin-bottom: 0.75rem; }

.lb-lightbox-close[b-tyrimjnfqz] {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* ─── Dark theme ────────────────────────────────── */
[data-theme="dark"] .lb-card-icon--blue[b-tyrimjnfqz]   { background: rgba(0,120,212,0.18);  color: #6cb8f5; }
[data-theme="dark"] .lb-card-icon--purple[b-tyrimjnfqz] { background: rgba(107,49,201,0.18); color: #b18cf0; }
[data-theme="dark"] .lb-card-icon--green[b-tyrimjnfqz]  { background: rgba(30,127,60,0.18);  color: #6fcf8b; }
[data-theme="dark"] .lb-card-icon--teal[b-tyrimjnfqz]   { background: rgba(6,122,114,0.18);  color: #5fcfc6; }
[data-theme="dark"] .lb-card-icon--orange[b-tyrimjnfqz] { background: rgba(208,106,0,0.18);  color: #f0a95c; }
[data-theme="dark"] .lb-card-icon--red[b-tyrimjnfqz]    { background: rgba(194,42,27,0.18);  color: #f08b7f; }
[data-theme="dark"] .lb-callout[b-tyrimjnfqz]           { background: rgba(240,173,78,0.08); }
[data-theme="dark"] button.lb-tile:hover[b-tyrimjnfqz]  { box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
[data-theme="dark"] .lb-tile--copilot[b-tyrimjnfqz] {
    background: linear-gradient(160deg, rgba(124,77,255,0.16), var(--adf-secondary-bg) 55%);
    border-color: rgba(124,77,255,0.34);
}

/* ─── Responsive ────────────────────────────────────
   Tablet only pairs tiles that are already adjacent in the markup, so the reading
   order and the tab order never diverge. Rows still sum to 12:

     problem 12 · usecases 6 | integrations 6 · how 12 · capabilities 6 | copilot 6
     · studio 12 · video 12 · docs 12 · trust 6 | who 6                        */
@media (max-width: 1180px) {
    .lb-tile--topic.lb-tile--w8[b-tyrimjnfqz],
    .lb-tile--topic.lb-tile--w4[b-tyrimjnfqz],
    .lb-tile--copilot[b-tyrimjnfqz] { grid-column: span 6; }
    .lb-tile--video[b-tyrimjnfqz],
    .lb-tile--docs[b-tyrimjnfqz] { grid-column: span 12; }
    .lb-tile--docs .lb-bignum[b-tyrimjnfqz] { margin-bottom: 0.15rem; }
    .lb-tile--w8 .lb-minilist[b-tyrimjnfqz] { grid-template-columns: 1fr; }
    .lb-shots[b-tyrimjnfqz] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .lb-hero[b-tyrimjnfqz] { padding: 2.5rem 1.25rem 2rem; }
    .lb-grid-wrap[b-tyrimjnfqz] { padding: 1.75rem 1rem 2.5rem; }
    .lb-grid[b-tyrimjnfqz] { gap: 0.85rem; grid-auto-rows: minmax(0, auto); }
    .lb-tile[b-tyrimjnfqz],
    .lb-tile--w12[b-tyrimjnfqz], .lb-tile--w8[b-tyrimjnfqz], .lb-tile--w6[b-tyrimjnfqz], .lb-tile--w4[b-tyrimjnfqz],
    .lb-tile--topic.lb-tile--w8[b-tyrimjnfqz],
    .lb-tile--topic.lb-tile--w4[b-tyrimjnfqz],
    .lb-tile--copilot[b-tyrimjnfqz] { grid-column: span 12; }
    .lb-tile--topic h3[b-tyrimjnfqz] { min-height: 0; -webkit-line-clamp: none; }
    .lb-tile--w12 .lb-minilist[b-tyrimjnfqz] { grid-template-columns: 1fr; }
    .lb-shots[b-tyrimjnfqz] { grid-template-columns: repeat(2, 1fr); }
    .lb-drawer[b-tyrimjnfqz] { width: 100vw; }
    .lb-drawer-head[b-tyrimjnfqz] { padding: 1.25rem 1.1rem 1rem; }
    .lb-drawer-body[b-tyrimjnfqz] { padding: 1.25rem 1.1rem 2.5rem; }
    .lb-cta[b-tyrimjnfqz] { padding: 2.5rem 1.25rem; }
    .lb-cta h2[b-tyrimjnfqz] { font-size: 1.5rem; }
    .lb-btn[b-tyrimjnfqz] { width: 100%; }
    .lb-cta-row[b-tyrimjnfqz] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Marketplace/MarketplaceLanding.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — Azure Marketplace Landing Page
   Scoped to MarketplaceLanding.razor.
   Global mp-* + landing-nav classes are in app.css.
   ═══════════════════════════════════════════════════ */

/* ─── Hero strip ────────────────────────────────────── */
.mp-hero-strip[b-e4skz7ljzw] {
    position: relative;
    overflow: hidden;
    padding: 3.75rem 2rem 5.5rem;
    background: linear-gradient(150deg, #0d1117 0%, #0e2040 45%, #003a6e 100%);
    text-align: center;
    color: #fff;
}

.mp-hero-strip-glow[b-e4skz7ljzw] {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.22;
    pointer-events: none;
}

.mp-hero-strip-glow--left[b-e4skz7ljzw] {
    background: #0078d4;
    top: -160px;
    left: -160px;
}

.mp-hero-strip-glow--right[b-e4skz7ljzw] {
    background: #7b2ff7;
    bottom: -160px;
    right: -160px;
}

.mp-hero-strip-inner[b-e4skz7ljzw] {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.mp-hero-badge[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 1.25rem;
    color: rgba(255,255,255,0.88);
}

.mp-hero-title[b-e4skz7ljzw] {
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.875rem;
    letter-spacing: -0.5px;
}

.mp-hero-accent[b-e4skz7ljzw] {
    color: #60b8ff;
}

.mp-hero-desc[b-e4skz7ljzw] {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
    opacity: 0.78;
    margin: 0 0 1.75rem;
}

.mp-hero-trust[b-e4skz7ljzw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

/* ─── Content wrapper (overlaps hero strip) ─────────── */
.mp-content-wrapper[b-e4skz7ljzw] {
    max-width: 680px;
    margin: -2.5rem auto 3rem;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

/* ─── Header row ───────────────────────────────────── */
.mp-header[b-e4skz7ljzw] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--adf-border-light);
}

.mp-header-icon[b-e4skz7ljzw] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--adf-active-bg);
    color: var(--adf-text-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

/* ─── Detail rows ──────────────────────────────────── */
.mp-details-grid[b-e4skz7ljzw] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.mp-detail-row[b-e4skz7ljzw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--adf-accent-bg);
    border-radius: 8px;
    border: 1px solid var(--adf-border-light);
}

.mp-detail-label[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    margin-right: 1rem;
}

.mp-detail-value[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-primary);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ─── Info banner ──────────────────────────────────── */
.mp-info-banner[b-e4skz7ljzw] {
    background: var(--adf-info-light);
    border: 1px solid var(--adf-info);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: var(--adf-font-size-sm);
    color: var(--adf-info);
    margin-bottom: 1.5rem;
}

/* ─── Plan details card ────────────────────────────── */
.mp-plan-card[b-e4skz7ljzw] {
    background: var(--adf-accent-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.mp-plan-header[b-e4skz7ljzw] {
    display: flex;
    align-items: center;
    font-size: var(--adf-font-size-sm);
    font-weight: 600;
    color: var(--adf-text-accent);
    margin-bottom: 0.75rem;
}

.mp-plan-header-text[b-e4skz7ljzw] {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mp-plan-description[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.mp-plan-metrics[b-e4skz7ljzw] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.mp-plan-metric[b-e4skz7ljzw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 140px;
    background: var(--adf-secondary-bg);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--adf-border-light);
}

.mp-plan-metric-value[b-e4skz7ljzw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1.2;
}

.mp-plan-metric-label[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-secondary);
    font-weight: 500;
}

/* ─── Alert (error) ────────────────────────────────── */
.mp-alert[b-e4skz7ljzw] {
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: var(--adf-font-size-sm);
    margin-bottom: 1.5rem;
}

.mp-alert--error[b-e4skz7ljzw] {
    background: var(--adf-error-light);
    border: 1px solid var(--adf-error);
    color: var(--adf-error);
}

/* ─── Actions ──────────────────────────────────────── */
.mp-actions[b-e4skz7ljzw] {
    display: flex;
    justify-content: flex-end;
}

.btn-mp-activate[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 2rem;
    background: var(--adf-text-accent);
    color: var(--adf-text-white);
    border: none;
    border-radius: 8px;
    font-size: var(--adf-font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: var(--adf-shadow-sm);
}

.btn-mp-activate:hover:not(:disabled)[b-e4skz7ljzw] {
    background: var(--adf-hover-accent);
    transform: translateY(-1px);
    box-shadow: var(--adf-shadow-md);
}

.btn-mp-activate:disabled[b-e4skz7ljzw] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ─── Sign in button (post-activation) ─────────────── */
.btn-mp-signin[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0.75rem 2rem;
    background: var(--adf-text-accent);
    color: var(--adf-text-white);
    border-radius: 8px;
    font-size: var(--adf-font-size-base);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn-mp-signin:hover[b-e4skz7ljzw] {
    background: var(--adf-hover-accent);
    color: var(--adf-text-white);
    transform: translateY(-1px);
}

/* ─── Documentation link (post-activation) ─────────── */
.btn-mp-wiki[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.625rem 1.75rem;
    background: transparent;
    color: var(--adf-text-accent);
    border: 1px solid var(--adf-border-medium);
    border-radius: 8px;
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-mp-wiki:hover[b-e4skz7ljzw] {
    background: var(--adf-hover-light);
    border-color: var(--adf-text-accent);
    color: var(--adf-text-accent);
    transform: translateY(-1px);
}

/* ─── Spinner / loading ────────────────────────────── */
.mp-spinner[b-e4skz7ljzw] {
    margin-bottom: 1rem;
}

.mp-loading-text[b-e4skz7ljzw] {
    color: var(--adf-text-secondary);
    font-size: var(--adf-font-size-sm);
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
    .mp-content-wrapper[b-e4skz7ljzw] {
        margin: -1.5rem auto 2rem;
    }

    .mp-hero-strip[b-e4skz7ljzw] {
        padding: 2.5rem 1.25rem 4rem;
    }

    .mp-hero-trust[b-e4skz7ljzw] {
        gap: 1rem;
    }

    .mp-header[b-e4skz7ljzw] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mp-detail-row[b-e4skz7ljzw] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .mp-detail-value[b-e4skz7ljzw] {
        text-align: left;
    }

    .mp-actions[b-e4skz7ljzw] {
        justify-content: stretch;
    }

    .btn-mp-activate[b-e4skz7ljzw],
    .btn-mp-signin[b-e4skz7ljzw],
    .btn-mp-wiki[b-e4skz7ljzw] {
        width: 100%;
        justify-content: center;
    }

    .mp-plan-metrics[b-e4skz7ljzw] {
        flex-direction: column;
        gap: 0.75rem;
    }
}


/* ─── Navbar ────────────────────────────────────────── */
.landing-nav[b-e4skz7ljzw] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--adf-border-light);
    padding: 0.75rem 0;
}

.landing-nav-inner[b-e4skz7ljzw] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-logo[b-e4skz7ljzw] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.landing-logo-img[b-e4skz7ljzw] {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.landing-logo-text[b-e4skz7ljzw] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    letter-spacing: -0.01em;
}

.landing-nav-actions[b-e4skz7ljzw] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.landing-nav-link[b-e4skz7ljzw] {
    color: var(--adf-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.landing-nav-link:hover[b-e4skz7ljzw] {
    color: var(--adf-text-accent);
}

/* ─── Hero strip ────────────────────────────────────── */
.mp-hero-strip[b-e4skz7ljzw] {
    position: relative;
    overflow: hidden;
    padding: 3.75rem 2rem 5.5rem;
    background: linear-gradient(150deg, #0d1117 0%, #0e2040 45%, #003a6e 100%);
    text-align: center;
    color: #fff;
}

.mp-hero-strip-glow[b-e4skz7ljzw] {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.22;
    pointer-events: none;
}

.mp-hero-strip-glow--left[b-e4skz7ljzw] {
    background: #0078d4;
    top: -160px;
    left: -160px;
}

.mp-hero-strip-glow--right[b-e4skz7ljzw] {
    background: #7b2ff7;
    bottom: -160px;
    right: -160px;
}

.mp-hero-strip-inner[b-e4skz7ljzw] {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.mp-hero-badge[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 1.25rem;
    color: rgba(255,255,255,0.88);
}

.mp-hero-title[b-e4skz7ljzw] {
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.875rem;
    letter-spacing: -0.5px;
}

.mp-hero-accent[b-e4skz7ljzw] {
    color: #60b8ff;
}

.mp-hero-desc[b-e4skz7ljzw] {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
    opacity: 0.78;
    margin: 0 0 1.75rem;
}

.mp-hero-trust[b-e4skz7ljzw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}

/* ─── Content wrapper ──────────────────────────────── */
.mp-content-wrapper[b-e4skz7ljzw] {
    max-width: 680px;
    margin: -2.5rem auto 3rem;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

/* ─── Main card ────────────────────────────────────── */
.mp-card[b-e4skz7ljzw] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}

.mp-card--center[b-e4skz7ljzw] {
    text-align: center;
    padding: 3rem 2rem;
}

/* ─── Header row ───────────────────────────────────── */
.mp-header[b-e4skz7ljzw] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--adf-border-light);
}

.mp-header-icon[b-e4skz7ljzw] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--adf-active-bg);
    color: var(--adf-text-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

/* ─── Titles ───────────────────────────────────────── */
.mp-title[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-xl);
    font-weight: 700;
    color: var(--adf-text-primary);
    margin: 0 0 0.5rem;
}

.mp-subtitle[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ─── Detail rows ──────────────────────────────────── */
.mp-details-grid[b-e4skz7ljzw] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.mp-detail-row[b-e4skz7ljzw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--adf-accent-bg);
    border-radius: 8px;
    border: 1px solid var(--adf-border-light);
}

.mp-detail-label[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    margin-right: 1rem;
}

.mp-detail-value[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-primary);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ─── Info banner ──────────────────────────────────── */
.mp-info-banner[b-e4skz7ljzw] {
    background: var(--adf-info-light);
    border: 1px solid var(--adf-info);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: var(--adf-font-size-sm);
    color: var(--adf-info);
    margin-bottom: 1.5rem;
}

/* ─── Plan details card ────────────────────────────── */
.mp-plan-card[b-e4skz7ljzw] {
    background: var(--adf-accent-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.mp-plan-header[b-e4skz7ljzw] {
    display: flex;
    align-items: center;
    font-size: var(--adf-font-size-sm);
    font-weight: 600;
    color: var(--adf-text-accent);
    margin-bottom: 0.75rem;
}

.mp-plan-header-text[b-e4skz7ljzw] {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mp-plan-description[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.mp-plan-metrics[b-e4skz7ljzw] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.mp-plan-metric[b-e4skz7ljzw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 140px;
    background: var(--adf-secondary-bg);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--adf-border-light);
}

.mp-plan-metric-value[b-e4skz7ljzw] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    line-height: 1.2;
}

.mp-plan-metric-label[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-secondary);
    font-weight: 500;
}

/* ─── Alert (error) ────────────────────────────────── */
.mp-alert[b-e4skz7ljzw] {
    border-radius: 8px;
    padding: 0.875rem 1rem;
    font-size: var(--adf-font-size-sm);
    margin-bottom: 1.5rem;
}

.mp-alert--error[b-e4skz7ljzw] {
    background: var(--adf-error-light);
    border: 1px solid var(--adf-error);
    color: var(--adf-error);
}

/* ─── Actions ──────────────────────────────────────── */
.mp-actions[b-e4skz7ljzw] {
    display: flex;
    justify-content: flex-end;
}

.btn-mp-activate[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 2rem;
    background: var(--adf-text-accent);
    color: var(--adf-text-white);
    border: none;
    border-radius: 8px;
    font-size: var(--adf-font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: var(--adf-shadow-sm);
}

.btn-mp-activate:hover:not(:disabled)[b-e4skz7ljzw] {
    background: var(--adf-hover-accent);
    transform: translateY(-1px);
    box-shadow: var(--adf-shadow-md);
}

.btn-mp-activate:disabled[b-e4skz7ljzw] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ─── Sign in button (post-activation) ─────────────── */
.btn-mp-signin[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0.75rem 2rem;
    background: var(--adf-text-accent);
    color: var(--adf-text-white);
    border-radius: 8px;
    font-size: var(--adf-font-size-base);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.btn-mp-signin:hover[b-e4skz7ljzw] {
    background: var(--adf-hover-accent);
    color: var(--adf-text-white);
    transform: translateY(-1px);
}

.btn-mp-wiki[b-e4skz7ljzw] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.625rem 1.75rem;
    background: transparent;
    color: var(--adf-text-accent);
    border: 1px solid var(--adf-border-medium);
    border-radius: 8px;
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-mp-wiki:hover[b-e4skz7ljzw] {
    background: var(--adf-hover-light);
    border-color: var(--adf-text-accent);
    color: var(--adf-text-accent);
    transform: translateY(-1px);
}

/* ─── Status icons (success / error) ───────────────── */
.mp-status-icon[b-e4skz7ljzw] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.mp-status-icon--success[b-e4skz7ljzw] {
    color: var(--adf-success);
}

.mp-status-icon--error[b-e4skz7ljzw] {
    color: var(--adf-error);
}

/* ─── spinner / loading ────────────────────────────── */
.mp-spinner[b-e4skz7ljzw] {
    margin-bottom: 1rem;
}

.mp-loading-text[b-e4skz7ljzw] {
    color: var(--adf-text-secondary);
    font-size: var(--adf-font-size-sm);
}

.mp-error-detail[b-e4skz7ljzw] {
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-muted);
    margin-top: 0.75rem;
    word-break: break-word;
}

/* ─── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
    .mp-content-wrapper[b-e4skz7ljzw] {
        margin: -1.5rem auto 2rem;
    }

    .mp-hero-strip[b-e4skz7ljzw] {
        padding: 2.5rem 1.25rem 4rem;
    }

    .mp-hero-trust[b-e4skz7ljzw] {
        gap: 1rem;
    }

    .landing-nav-inner[b-e4skz7ljzw] {
        padding: 0 1rem;
    }

    .mp-card[b-e4skz7ljzw] {
        padding: 1.5rem;
    }

    .mp-header[b-e4skz7ljzw] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mp-detail-row[b-e4skz7ljzw] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .mp-detail-value[b-e4skz7ljzw] {
        text-align: left;
    }

    .mp-actions[b-e4skz7ljzw] {
        justify-content: stretch;
    }

    .btn-mp-activate[b-e4skz7ljzw],
    .btn-mp-signin[b-e4skz7ljzw],
    .btn-mp-wiki[b-e4skz7ljzw] {
        width: 100%;
        justify-content: center;
    }

    .mp-plan-metrics[b-e4skz7ljzw] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Monitor/Monitor.razor.rz.scp.css */
/* Monitor Layout Styles – collapse/mobile behaviour mirrors Setup page */

/* ── Grid layout with smooth column-width transition ── */
.monitor-layout[b-ckvjbog1eb] {
    display: grid;
    grid-template-columns: var(--adf-nav-width) 1fr;
    height: calc(100vh - var(--adf-header-height));
    background: var(--adf-primary-bg);
    overflow: hidden;
    /* Smooth collapse/expand, identical to .setup-layout */
    transition: grid-template-columns 0.3s ease;
}

/* Collapsed: narrows nav column to icon-strip width */
.monitor-layout.monitor-nav-collapsed[b-ckvjbog1eb] {
    grid-template-columns: var(--adf-nav-width-collapsed) 1fr;
}

/* ── Navigation Pane ── */
.monitor-nav-pane[b-ckvjbog1eb] {
    background: var(--adf-secondary-bg);
    border-right: 1px solid var(--adf-border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clip content while grid column animates */
    min-width: 0;     /* allow grid to shrink below natural content width */
}

/* ── Nav header: always visible, matches .setup-nav-header exactly ── */
.monitor-nav-header[b-ckvjbog1eb] {
    min-height: var(--adf-header-height);
    background-color: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--adf-spacing-lg);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

.monitor-nav-collapsed .monitor-nav-header[b-ckvjbog1eb] {
    justify-content: center;
    padding: 0 var(--adf-spacing-sm);
}

.monitor-nav-title[b-ckvjbog1eb] {
    font-size: var(--adf-font-size-sm);
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
}

.monitor-nav-title i[b-ckvjbog1eb] {
    color: var(--adf-text-accent);
}

/* ── Collapse/expand toggle button – matches .setup-nav-collapse-btn / .nav-collapse-btn ── */
.monitor-nav-collapse-btn[b-ckvjbog1eb] {
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-medium);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    padding: var(--adf-spacing-sm) var(--adf-spacing-md);
    border-radius: 4px;
    line-height: 1.5;
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.monitor-nav-collapse-btn:hover[b-ckvjbog1eb] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-dark);
}

.monitor-nav-collapse-btn .expand-icon[b-ckvjbog1eb],
.monitor-nav-collapse-btn .collapse-icon[b-ckvjbog1eb] {
    font-size: 0.75rem;
    font-weight: bold;
}

/* ── Nav content wrapper: fades out while pane collapses ── */
.monitor-nav-content[b-ckvjbog1eb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.monitor-nav-content--hidden[b-ckvjbog1eb] {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Nav items ── */
.monitor-nav[b-ckvjbog1eb] {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    gap: 0.25rem;
}

.monitor-nav-item[b-ckvjbog1eb] {
    display: flex;
    align-items: center;
    padding: 0.875rem 1rem;
    border: none;
    background: transparent;
    color: var(--adf-text-secondary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    position: relative;
}

.monitor-nav-item:hover:not(:disabled)[b-ckvjbog1eb] {
    background: var(--adf-hover-light);
    color: var(--adf-text-primary);
}

.monitor-nav-item.active[b-ckvjbog1eb] {
    background: var(--adf-hover-accent);
    color: var(--adf-text-white);
    font-weight: 500;
}

.monitor-nav-item.active[b-ckvjbog1eb]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--adf-text-accent);
}

.monitor-nav-item:disabled[b-ckvjbog1eb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.monitor-nav-item i[b-ckvjbog1eb] {
    font-size: 1.125rem;
}

.monitor-nav-item .badge[b-ckvjbog1eb] {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
}

/* ── Content Pane ── */
.monitor-content-pane[b-ckvjbog1eb] {
    overflow-y: auto;
    padding: 2rem;
    min-width: 0; /* allow grid to shrink */
}

/* ── Coming Soon Placeholder ── */
.coming-soon-placeholder[b-ckvjbog1eb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--adf-text-secondary);
    text-align: center;
}

.coming-soon-placeholder i[b-ckvjbog1eb] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.coming-soon-placeholder h4[b-ckvjbog1eb] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--adf-text-primary);
}

.coming-soon-placeholder p[b-ckvjbog1eb] {
    font-size: 1rem;
    margin: 0;
}

/* ── Mobile navigation toggle bar (hidden on desktop) ── */
.monitor-mobile-toggle-bar[b-ckvjbog1eb] {
    display: none;
}

/* ── Mobile backdrop (hidden on desktop) ── */
.monitor-mobile-backdrop[b-ckvjbog1eb] {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE – Mobile (≤ 768px)
   Nav becomes a slide-over overlay, identical pattern to Setup page.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .monitor-layout[b-ckvjbog1eb] {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        height: calc(100vh - var(--adf-header-height));
        max-height: calc(100vh - var(--adf-header-height));
        position: relative;
    }

    /* ── Toggle bar ── */
    .monitor-mobile-toggle-bar[b-ckvjbog1eb] {
        display: flex;
        align-items: center;
        background-color: var(--adf-secondary-bg);
        border-bottom: 1px solid var(--adf-border-light);
        padding: 0.5rem 0.75rem;
        flex-shrink: 0;
        z-index: 200;
    }

    .monitor-mobile-toggle-btn[b-ckvjbog1eb] {
        min-height: 44px; /* WCAG touch target */
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Backdrop ── */
    .monitor-mobile-backdrop[b-ckvjbog1eb] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 299;
        animation: monitorFadeIn-b-ckvjbog1eb 0.2s ease;
    }

    /* ── Nav pane: slide-over overlay ── */
    .monitor-nav-pane[b-ckvjbog1eb] {
        position: fixed;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid var(--adf-border-light);
        box-shadow: var(--adf-shadow-lg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .monitor-nav-pane.mobile-open[b-ckvjbog1eb] {
        transform: translateX(0);
    }

    /* ── Content pane fills remaining space ── */
    .monitor-content-pane[b-ckvjbog1eb] {
        flex: 1;
        min-height: 0;
        padding: 1rem;
        overflow-y: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE – Small mobile (≤ 480px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .monitor-nav-pane[b-ckvjbog1eb] {
        width: 90vw;
        max-width: none;
    }
}

@keyframes monitorFadeIn-b-ckvjbog1eb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* /Components/Pages/Preview/LandingBento.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Design preview 2 — Bento mosaic
   Compact hero + a single dense grid of variable-size tiles.
   Full copy lives in a slide-in drawer, so nothing is lost
   but the page itself stays about two screens tall.
   ══════════════════════════════════════════════════════════ */

.bento-preview[b-fwa44wt9lc] {
    background: var(--adf-primary-bg);
    color: var(--adf-text-primary);
}

/* ─── Preview ribbon ────────────────────────────── */
.preview-ribbon[b-fwa44wt9lc] {
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.preview-ribbon a[b-fwa44wt9lc] {
    color: #7dd3fc;
    text-decoration: none;
    margin-left: 0.85rem;
    border-bottom: 1px dotted currentColor;
}

.preview-ribbon a:hover[b-fwa44wt9lc] { color: #bae6fd; }

/* ─── Hero ──────────────────────────────────────── */
.bp-hero[b-fwa44wt9lc] {
    padding: 3.25rem 2rem 2.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 900px 420px at 50% -10%, rgba(0,120,212,0.30), transparent 70%),
        linear-gradient(180deg, #0b1220 0%, #101a2e 100%);
    color: #fff;
}

.bp-hero-inner[b-fwa44wt9lc] { max-width: 900px; margin: 0 auto; }

.bp-badge[b-fwa44wt9lc] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
    margin-bottom: 1.1rem;
}

.bp-hero h1[b-fwa44wt9lc] {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.bp-accent[b-fwa44wt9lc] {
    display: block;
    background: linear-gradient(90deg, #4fc3f7, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bp-hero-sub[b-fwa44wt9lc] {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
    max-width: 740px;
    margin: 0 auto 1.6rem;
}

.bp-hero-sub strong[b-fwa44wt9lc] { color: #fff; }

.bp-cta-row[b-fwa44wt9lc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
}

.bp-cta-row--center[b-fwa44wt9lc] { justify-content: center; }

.bp-trial[b-fwa44wt9lc] {
    margin: 1.1rem auto 0;
    max-width: 560px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.bp-trial-pill[b-fwa44wt9lc] {
    display: inline-block;
    background: rgba(76,175,80,0.18);
    border: 1px solid rgba(76,175,80,0.45);
    color: #a5d6a7;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    margin-right: 0.5rem;
    font-weight: 600;
}

.bp-hero-note[b-fwa44wt9lc] {
    margin-top: 1rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.6);
}

/* ─── Buttons ───────────────────────────────────── */
.bp-btn[b-fwa44wt9lc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
    min-height: 48px;
}

.bp-btn:hover[b-fwa44wt9lc] { transform: translateY(-1px); }

.bp-btn--primary[b-fwa44wt9lc] {
    background: linear-gradient(135deg, #0078d4, #005fa3);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,120,212,0.35);
}

.bp-btn--primary:hover[b-fwa44wt9lc] { color: #fff; }
.bp-btn--lg[b-fwa44wt9lc] { padding: 1rem 2.25rem; font-size: 1.02rem; }

.bp-btn--ghost[b-fwa44wt9lc] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

.bp-btn--ghost:hover[b-fwa44wt9lc] { background: rgba(255,255,255,0.14); color: #fff; }

.bp-btn--bare[b-fwa44wt9lc] {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.75);
}

.bp-btn--bare:hover[b-fwa44wt9lc] { color: #fff; }

.bp-btn--outline[b-fwa44wt9lc] {
    background: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-accent);
    margin-top: 1.5rem;
}

.bp-btn--outline:hover[b-fwa44wt9lc] { border-color: var(--adf-text-accent); }

/* ─── Grid shell ────────────────────────────────── */
.bp-grid-wrap[b-fwa44wt9lc] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 3.5rem;
}

.bp-grid-hint[b-fwa44wt9lc] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    margin-bottom: 1.5rem;
}

.bp-grid[b-fwa44wt9lc] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* A regular base row height is what makes a bento read as tidy: rows line up
       even when their content differs in length. */
    grid-auto-rows: minmax(214px, auto);
    gap: 1rem;
}

/* ─── Tile base ─────────────────────────────────── */
.bp-tile[b-fwa44wt9lc] {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 16px;
    padding: 1.5rem;
    font: inherit;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

button.bp-tile[b-fwa44wt9lc] { cursor: pointer; }

button.bp-tile:hover[b-fwa44wt9lc],
button.bp-tile:focus-visible[b-fwa44wt9lc] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

button.bp-tile:hover .bp-open[b-fwa44wt9lc] { opacity: 1; transform: none; }

.bp-tile h3[b-fwa44wt9lc] {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}

/* Cap topic headings at two lines so the six matched tiles start their lists
   on the same baseline. */
.bp-tile--topic h3[b-fwa44wt9lc] {
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-tile p[b-fwa44wt9lc] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--adf-text-secondary);
    margin: 0;
}

.bp-tile-sub[b-fwa44wt9lc] { margin-bottom: 1rem !important; }

.bp-tile-head[b-fwa44wt9lc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.bp-kicker[b-fwa44wt9lc] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adf-text-accent);
}

.bp-open[b-fwa44wt9lc] {
    color: var(--adf-text-accent);
    opacity: 0.35;
    transform: translate(-2px, 2px);
    transition: opacity 0.2s, transform 0.2s;
}

.bp-tile-foot[b-fwa44wt9lc] {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.82rem !important;
    color: var(--adf-text-secondary);
}

.bp-bignum[b-fwa44wt9lc] {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.35rem;
}

/* ─── Tile spans ────────────────────────────────────
   Strict 12-column rhythm — every row sums to exactly 12, with only two tile
   widths (8 and 4). Two "showcase" rows (video, screenshots) alternate with two
   rows of three matched topic tiles, so the eye gets variety between rows and
   consistency within them.

     A  video 8            | integrations 4   (2 rows tall)
     B  problem 4 | how 4  | capabilities 4
     C  studio 8           | docs 4           (2 rows tall)
     D  usecases 4 | trust 4 | who 4                          */
.bp-tile--video[b-fwa44wt9lc]        { grid-column: span 8; grid-row: span 2; padding: 0; }
.bp-tile--integrations[b-fwa44wt9lc] { grid-column: span 4; grid-row: span 2; }
.bp-tile--studio[b-fwa44wt9lc]       { grid-column: span 8; grid-row: span 2; }
.bp-tile--docs[b-fwa44wt9lc]         { grid-column: span 4; grid-row: span 2; }
.bp-tile--topic[b-fwa44wt9lc]        { grid-column: span 4; }

/* ─── Video tile ────────────────────────────────── */
.bp-video[b-fwa44wt9lc] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.bp-video iframe[b-fwa44wt9lc], .bp-video-facade[b-fwa44wt9lc] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.bp-video-facade[b-fwa44wt9lc] { padding: 0; cursor: pointer; background: #000; }
.bp-video-facade img[b-fwa44wt9lc] { width: 100%; height: 100%; object-fit: cover; }

.bp-video-play[b-fwa44wt9lc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(220,30,30,0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: transform 0.2s;
}

.bp-video-facade:hover .bp-video-play[b-fwa44wt9lc] { transform: translate(-50%, -50%) scale(1.09); }

.bp-tile--video .bp-tile-body[b-fwa44wt9lc] { padding: 1.4rem 1.5rem 1.5rem; }

.bp-more[b-fwa44wt9lc] {
    align-self: flex-start;
    margin-top: 0.9rem;
    background: none;
    border: none;
    padding: 0.4rem 0;
    color: var(--adf-text-accent);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
}

.bp-more:hover[b-fwa44wt9lc] { text-decoration: underline; }

/* ─── Mini lists / flow / pills ─────────────────── */
.bp-minilist[b-fwa44wt9lc] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: grid;
    gap: 0.55rem;
}

.bp-minilist li[b-fwa44wt9lc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.89rem;
    color: var(--adf-text-secondary);
}

.bp-minilist .bi[b-fwa44wt9lc] { color: var(--adf-text-accent); font-size: 0.95rem; flex: 0 0 auto; }

.bp-minilist-more[b-fwa44wt9lc] {
    font-style: italic;
    opacity: 0.75;
    padding-left: 1.55rem;
}

.bp-step[b-fwa44wt9lc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.bp-flow[b-fwa44wt9lc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.bp-flow > span:not(.bi)[b-fwa44wt9lc] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.bp-flow .bi[b-fwa44wt9lc] { color: var(--adf-text-accent); font-size: 0.75rem; }

.bp-pills[b-fwa44wt9lc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.bp-pills span[b-fwa44wt9lc] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    color: var(--adf-text-secondary);
}

/* ─── Chips ─────────────────────────────────────── */
.bp-chips[b-fwa44wt9lc] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.bp-chips--preview[b-fwa44wt9lc] { margin-top: 0.5rem; }

.bp-chip[b-fwa44wt9lc] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

.bp-chip--more[b-fwa44wt9lc] { color: var(--adf-text-accent); font-weight: 700; }

/* ─── Screenshot strip ──────────────────────────── */
.bp-shots[b-fwa44wt9lc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: auto;
}

.bp-shot[b-fwa44wt9lc] {
    display: block;
    padding: 0;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.bp-shot:hover[b-fwa44wt9lc] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.bp-shot img[b-fwa44wt9lc] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

.bp-shot-cap[b-fwa44wt9lc] {
    display: block;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Drawer ────────────────────────────────────── */
.bp-scrim[b-fwa44wt9lc] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    animation: bp-fade-b-fwa44wt9lc 0.2s ease;
}

.bp-drawer[b-fwa44wt9lc] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(680px, 100vw);
    background: var(--adf-primary-bg);
    border-left: 1px solid var(--adf-border-light);
    box-shadow: -18px 0 48px rgba(0,0,0,0.24);
    z-index: 901;
    display: flex;
    flex-direction: column;
    animation: bp-slide-b-fwa44wt9lc 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes bp-slide-b-fwa44wt9lc {
    from { transform: translateX(100%); }
    to   { transform: none; }
}

@keyframes bp-fade-b-fwa44wt9lc {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.bp-drawer-head[b-fwa44wt9lc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--adf-border-light);
    background: var(--adf-secondary-bg);
}

.bp-drawer-head h2[b-fwa44wt9lc] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0.35rem 0 0;
}

.bp-drawer-close[b-fwa44wt9lc] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--adf-border-light);
    background: var(--adf-primary-bg);
    color: var(--adf-text-secondary);
    cursor: pointer;
}

.bp-drawer-close:hover[b-fwa44wt9lc] { color: var(--adf-text-primary); }

.bp-drawer-body[b-fwa44wt9lc] {
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem;
}

.bp-lead[b-fwa44wt9lc] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--adf-text-secondary);
    margin-bottom: 1.75rem;
}

.bp-lead strong[b-fwa44wt9lc] { color: var(--adf-text-primary); }

.bp-cards[b-fwa44wt9lc] { display: grid; gap: 1rem; }

.bp-card[b-fwa44wt9lc] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1.25rem 1.3rem;
}

.bp-card h3[b-fwa44wt9lc] { font-size: 1rem; font-weight: 700; margin-bottom: 0.45rem; }

.bp-card p[b-fwa44wt9lc] {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
    margin: 0;
}

.bp-card-icon[b-fwa44wt9lc] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
}

.bp-card-icon--blue[b-fwa44wt9lc]   { background: #e5f1fb; color: #0067b8; }
.bp-card-icon--purple[b-fwa44wt9lc] { background: #f0e9fb; color: #6b31c9; }
.bp-card-icon--green[b-fwa44wt9lc]  { background: #e6f4ea; color: #1e7f3c; }
.bp-card-icon--teal[b-fwa44wt9lc]   { background: #e0f5f4; color: #067a72; }
.bp-card-icon--orange[b-fwa44wt9lc] { background: #fff0e5; color: #d06a00; }
.bp-card-icon--red[b-fwa44wt9lc]    { background: #fce8e8; color: #c22a1b; }

.bp-steps[b-fwa44wt9lc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}

.bp-steps li[b-fwa44wt9lc] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 3px solid var(--adf-text-accent);
    border-radius: 10px;
    padding: 1.2rem 1.3rem;
}

.bp-step-num[b-fwa44wt9lc] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
}

.bp-steps h3[b-fwa44wt9lc] { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; }

.bp-steps p[b-fwa44wt9lc] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

.bp-vendor[b-fwa44wt9lc] { margin-bottom: 1.6rem; }

.bp-vendor h3[b-fwa44wt9lc] {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: var(--adf-text-secondary);
}

.bp-callout[b-fwa44wt9lc] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid #f0ad4e;
    border-radius: 8px;
    padding: 1.05rem 1.2rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

.bp-callout .bi[b-fwa44wt9lc] { color: #f0ad4e; }
.bp-callout strong[b-fwa44wt9lc] { color: var(--adf-text-primary); }

.bp-note[b-fwa44wt9lc] {
    margin-top: 1.4rem;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

/* ─── CTA ───────────────────────────────────────── */
.bp-cta[b-fwa44wt9lc] {
    background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
    padding: 3.25rem 2rem;
    text-align: center;
}

.bp-cta-inner[b-fwa44wt9lc] { max-width: 820px; margin: 0 auto; }
.bp-cta h2[b-fwa44wt9lc] { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.7rem; }
.bp-cta p[b-fwa44wt9lc] { font-size: 1rem; opacity: 0.92; margin-bottom: 1.5rem; line-height: 1.65; }
.bp-articles[b-fwa44wt9lc] { margin-top: 1.6rem; font-size: 0.85rem; opacity: 0.85; }
.bp-articles a[b-fwa44wt9lc] { color: #fff; text-decoration: underline; }

/* ─── Lightbox ──────────────────────────────────── */
.bp-lightbox[b-fwa44wt9lc] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.bp-lightbox-content[b-fwa44wt9lc] { position: relative; max-width: 92vw; max-height: 90vh; }

.bp-lightbox-content img[b-fwa44wt9lc] {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 8px;
    display: block;
}

.bp-lightbox-title[b-fwa44wt9lc] { color: #fff; font-weight: 600; margin-bottom: 0.75rem; }

.bp-lightbox-close[b-fwa44wt9lc] {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* ─── Dark theme ────────────────────────────────── */
[data-theme="dark"] .bp-card-icon--blue[b-fwa44wt9lc]   { background: rgba(0,120,212,0.18);  color: #6cb8f5; }
[data-theme="dark"] .bp-card-icon--purple[b-fwa44wt9lc] { background: rgba(107,49,201,0.18); color: #b18cf0; }
[data-theme="dark"] .bp-card-icon--green[b-fwa44wt9lc]  { background: rgba(30,127,60,0.18);  color: #6fcf8b; }
[data-theme="dark"] .bp-card-icon--teal[b-fwa44wt9lc]   { background: rgba(6,122,114,0.18);  color: #5fcfc6; }
[data-theme="dark"] .bp-card-icon--orange[b-fwa44wt9lc] { background: rgba(208,106,0,0.18);  color: #f0a95c; }
[data-theme="dark"] .bp-card-icon--red[b-fwa44wt9lc]    { background: rgba(194,42,27,0.18);  color: #f08b7f; }
[data-theme="dark"] .bp-callout[b-fwa44wt9lc]           { background: rgba(240,173,78,0.08); }
[data-theme="dark"] button.bp-tile:hover[b-fwa44wt9lc]  { box-shadow: 0 12px 30px rgba(0,0,0,0.45); }

/* ─── Responsive ────────────────────────────────────
   Two breakpoints only, and both keep every row summing to 12. Dropping straight
   from 3-across to 1-across avoids the "two tiles then a lonely one" raggedness
   that a 2-across step always produces with six topic tiles. */
@media (max-width: 1180px) {
    /* Showcase tiles go full width; the six topic tiles stay 3-across. */
    .bp-tile--video[b-fwa44wt9lc],
    .bp-tile--integrations[b-fwa44wt9lc],
    .bp-tile--studio[b-fwa44wt9lc],
    .bp-tile--docs[b-fwa44wt9lc] { grid-column: span 12; grid-row: auto; }
    .bp-tile--docs .bp-bignum[b-fwa44wt9lc] { margin-bottom: 0.15rem; }
    .bp-shots[b-fwa44wt9lc] { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 820px) {
    .bp-hero[b-fwa44wt9lc] { padding: 2.5rem 1.25rem 2rem; }
    .bp-grid-wrap[b-fwa44wt9lc] { padding: 1.75rem 1rem 2.5rem; }
    .bp-grid[b-fwa44wt9lc] { gap: 0.85rem; grid-auto-rows: minmax(0, auto); }
    .bp-tile[b-fwa44wt9lc],
    .bp-tile--topic[b-fwa44wt9lc],
    .bp-tile--video[b-fwa44wt9lc], .bp-tile--integrations[b-fwa44wt9lc],
    .bp-tile--studio[b-fwa44wt9lc], .bp-tile--docs[b-fwa44wt9lc] { grid-column: span 12; }
    .bp-tile--topic h3[b-fwa44wt9lc] { min-height: 0; -webkit-line-clamp: none; }
    .bp-shots[b-fwa44wt9lc] { grid-template-columns: repeat(2, 1fr); }
    .bp-drawer[b-fwa44wt9lc] { width: 100vw; }
    .bp-drawer-head[b-fwa44wt9lc] { padding: 1.25rem 1.1rem 1rem; }
    .bp-drawer-body[b-fwa44wt9lc] { padding: 1.25rem 1.1rem 2.5rem; }
    .bp-cta[b-fwa44wt9lc] { padding: 2.5rem 1.25rem; }
    .bp-cta h2[b-fwa44wt9lc] { font-size: 1.5rem; }
    .bp-btn[b-fwa44wt9lc] { width: 100%; }
    .bp-cta-row[b-fwa44wt9lc] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Preview/LandingDeck.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Design preview 3 — Scroll-snap deck
   Full-height panels that snap one at a time, with a fixed
   side rail for navigation. Reads like a deck, not a scroll.
   Snapping is switched off on small screens, where 12 locked
   panels would be worse than a normal page.
   ══════════════════════════════════════════════════════════ */

.deck-preview[b-hr7cicc91a] {
    background: var(--adf-primary-bg);
    color: var(--adf-text-primary);
}

/* ─── Preview ribbon ────────────────────────────── */
.preview-ribbon[b-hr7cicc91a] {
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.preview-ribbon a[b-hr7cicc91a] {
    color: #7dd3fc;
    text-decoration: none;
    margin-left: 0.85rem;
    border-bottom: 1px dotted currentColor;
}

.preview-ribbon a:hover[b-hr7cicc91a] { color: #bae6fd; }

/* ─── Deck shell ────────────────────────────────── */
/* 64px sticky navbar + 36px preview ribbon. Drop the 36px when the ribbon goes. */
.dk-wrap[b-hr7cicc91a] {
    position: relative;
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
}

.dk-deck[b-hr7cicc91a] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.dk-panel[b-hr7cicc91a] {
    min-height: 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    padding: 3rem 5.5rem 3rem 3rem;
    background: var(--adf-primary-bg);
}

.dk-panel--alt[b-hr7cicc91a] { background: var(--adf-tertiary-bg); }

.dk-inner[b-hr7cicc91a] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.dk-inner--center[b-hr7cicc91a] { text-align: center; max-width: 900px; }

/* ─── Side rail ─────────────────────────────────── */
.dk-rail[b-hr7cicc91a] {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--adf-secondary-bg) 88%, transparent);
    border: 1px solid var(--adf-border-light);
    backdrop-filter: blur(8px);
}

.dk-dot[b-hr7cicc91a] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.dk-dot-mark[b-hr7cicc91a] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--adf-border-light);
    border: 1px solid var(--adf-text-secondary);
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.dk-dot:hover .dk-dot-mark[b-hr7cicc91a] { transform: scale(1.35); border-color: var(--adf-text-accent); }

.dk-dot.is-active .dk-dot-mark[b-hr7cicc91a] {
    background: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
    transform: scale(1.5);
}

.dk-dot-label[b-hr7cicc91a] {
    position: absolute;
    right: calc(100% + 0.5rem);
    white-space: nowrap;
    background: #1f2937;
    color: #f3f4f6;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(4px);
    transition: opacity 0.15s, transform 0.15s;
}

.dk-dot:hover .dk-dot-label[b-hr7cicc91a],
.dk-dot:focus-visible .dk-dot-label[b-hr7cicc91a] { opacity: 1; transform: none; }

/* ─── Hero panel ────────────────────────────────── */
.dk-panel--hero[b-hr7cicc91a] {
    background:
        radial-gradient(ellipse 900px 460px at 50% 0%, rgba(0,120,212,0.32), transparent 70%),
        linear-gradient(180deg, #0b1220 0%, #101a2e 100%);
    color: #fff;
    position: relative;
}

.dk-badge[b-hr7cicc91a] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
}

.dk-panel--hero h1[b-hr7cicc91a] {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 1.15rem;
}

.dk-accent[b-hr7cicc91a] {
    display: block;
    background: linear-gradient(90deg, #4fc3f7, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dk-hero-sub[b-hr7cicc91a] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    max-width: 760px;
    margin: 0 auto 1.75rem;
}

.dk-hero-sub strong[b-hr7cicc91a] { color: #fff; }

.dk-trial[b-hr7cicc91a] {
    margin: 1.15rem auto 0;
    max-width: 560px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.dk-trial-pill[b-hr7cicc91a] {
    display: inline-block;
    background: rgba(76,175,80,0.18);
    border: 1px solid rgba(76,175,80,0.45);
    color: #a5d6a7;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    margin-right: 0.5rem;
    font-weight: 600;
}

.dk-hero-note[b-hr7cicc91a] {
    margin-top: 1.1rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.6);
}

.dk-scroll-hint[b-hr7cicc91a] {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.75);
    font-size: 1.1rem;
    cursor: pointer;
    text-decoration: none;
    animation: dk-bob-b-hr7cicc91a 2s ease-in-out infinite;
}

.dk-scroll-hint:hover[b-hr7cicc91a] { color: #fff; border-color: #fff; }

@keyframes dk-bob-b-hr7cicc91a {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

/* ─── Section headers ───────────────────────────── */
.dk-head[b-hr7cicc91a] { max-width: 860px; margin-bottom: 2rem; }

.dk-eyebrow[b-hr7cicc91a] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--adf-text-accent);
    margin-bottom: 0.6rem;
}

.dk-head h2[b-hr7cicc91a] {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 0.75rem;
}

.dk-head p[b-hr7cicc91a] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--adf-text-secondary);
    margin: 0;
}

.dk-head p strong[b-hr7cicc91a] { color: var(--adf-text-primary); }

/* ─── Cards ─────────────────────────────────────── */
.dk-grid[b-hr7cicc91a] { display: grid; gap: 1.15rem; }
.dk-grid--3[b-hr7cicc91a] { grid-template-columns: repeat(3, 1fr); }
.dk-grid--4[b-hr7cicc91a] { grid-template-columns: repeat(4, 1fr); }

.dk-card[b-hr7cicc91a] {
    position: relative;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1.35rem 1.3rem;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dk-card:hover[b-hr7cicc91a] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 22px rgba(0,0,0,0.09);
}

.dk-card h3[b-hr7cicc91a] { font-size: 1rem; font-weight: 700; margin-bottom: 0.45rem; line-height: 1.35; }

.dk-card p[b-hr7cicc91a] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--adf-text-secondary);
    margin: 0;
}

.dk-icon[b-hr7cicc91a] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

.dk-icon--blue[b-hr7cicc91a]   { background: #e5f1fb; color: #0067b8; }
.dk-icon--purple[b-hr7cicc91a] { background: #f0e9fb; color: #6b31c9; }
.dk-icon--green[b-hr7cicc91a]  { background: #e6f4ea; color: #1e7f3c; }
.dk-icon--teal[b-hr7cicc91a]   { background: #e0f5f4; color: #067a72; }
.dk-icon--orange[b-hr7cicc91a] { background: #fff0e5; color: #d06a00; }
.dk-icon--red[b-hr7cicc91a]    { background: #fce8e8; color: #c22a1b; }

.dk-card--step[b-hr7cicc91a] { padding-top: 1.5rem; border-top: 3px solid var(--adf-text-accent); }

.dk-step-num[b-hr7cicc91a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* ─── Demo ──────────────────────────────────────── */
.dk-demo[b-hr7cicc91a] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.75rem;
    align-items: start;
}

.dk-player[b-hr7cicc91a] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--adf-border-light);
}

.dk-player iframe[b-hr7cicc91a], .dk-facade[b-hr7cicc91a] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.dk-facade[b-hr7cicc91a] { padding: 0; cursor: pointer; background: #000; }
.dk-facade img[b-hr7cicc91a] { width: 100%; height: 100%; object-fit: cover; }

.dk-play[b-hr7cicc91a] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(220,30,30,0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    transition: transform 0.2s;
}

.dk-facade:hover .dk-play[b-hr7cicc91a] { transform: translate(-50%, -50%) scale(1.09); }

.dk-demo-side[b-hr7cicc91a] { display: grid; gap: 0.85rem; }

.dk-stat[b-hr7cicc91a] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1rem 1.15rem;
}

.dk-stat-icon[b-hr7cicc91a] { color: var(--adf-text-accent); font-size: 1.1rem; }
.dk-stat strong[b-hr7cicc91a] { display: block; margin: 0.35rem 0 0.3rem; font-size: 0.95rem; }

.dk-stat span:last-child[b-hr7cicc91a] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

.dk-channel[b-hr7cicc91a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--adf-border-light);
    background: var(--adf-secondary-bg);
    color: var(--adf-text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 48px;
}

.dk-channel:hover[b-hr7cicc91a] { color: #c4302b; border-color: #c4302b; }

/* ─── Integrations ──────────────────────────────── */
.dk-vendors[b-hr7cicc91a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2.5rem;
}

.dk-vendor h3[b-hr7cicc91a] {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: var(--adf-text-secondary);
}

.dk-chips[b-hr7cicc91a] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dk-chip[b-hr7cicc91a] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
}

.dk-chip:hover[b-hr7cicc91a] { border-color: var(--adf-text-accent); color: var(--adf-text-accent); }

/* ─── Screenshots ───────────────────────────────── */
.dk-shots[b-hr7cicc91a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.dk-shot[b-hr7cicc91a] {
    display: block;
    padding: 0;
    text-align: left;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dk-shot:hover[b-hr7cicc91a] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.dk-shot-img[b-hr7cicc91a] { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--adf-tertiary-bg); }
.dk-shot-img img[b-hr7cicc91a] { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

.dk-shot-cap[b-hr7cicc91a] {
    display: block;
    padding: 0.7rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

/* ─── Callouts & notes ──────────────────────────── */
.dk-callout[b-hr7cicc91a] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid #f0ad4e;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

.dk-callout .bi[b-hr7cicc91a] { color: #f0ad4e; }
.dk-callout strong[b-hr7cicc91a] { color: var(--adf-text-primary); }

.dk-note[b-hr7cicc91a] {
    margin-top: 1.35rem;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

/* ─── Buttons ───────────────────────────────────── */
.dk-cta-row[b-hr7cicc91a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.dk-cta-row--center[b-hr7cicc91a] { justify-content: center; }

.dk-btn[b-hr7cicc91a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
    min-height: 48px;
}

.dk-btn:hover[b-hr7cicc91a] { transform: translateY(-1px); }

.dk-btn--primary[b-hr7cicc91a] {
    background: linear-gradient(135deg, #0078d4, #005fa3);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,120,212,0.35);
}

.dk-btn--primary:hover[b-hr7cicc91a] { color: #fff; }
.dk-btn--lg[b-hr7cicc91a] { padding: 1rem 2.25rem; font-size: 1.02rem; }

.dk-btn--ghost[b-hr7cicc91a] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

.dk-btn--ghost:hover[b-hr7cicc91a] { background: rgba(255,255,255,0.14); color: #fff; }

.dk-btn--bare[b-hr7cicc91a] {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.75);
}

.dk-btn--bare:hover[b-hr7cicc91a] { color: #fff; }

.dk-btn--outline[b-hr7cicc91a] {
    background: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-accent);
    margin-top: 1.5rem;
}

.dk-btn--outline:hover[b-hr7cicc91a] { border-color: var(--adf-text-accent); }

/* ─── CTA panel ─────────────────────────────────── */
.dk-panel--cta[b-hr7cicc91a] {
    background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
}

.dk-panel--cta h2[b-hr7cicc91a] { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; margin-bottom: 0.8rem; }

.dk-cta-sub[b-hr7cicc91a] { font-size: 1rem; line-height: 1.7; opacity: 0.92; margin-bottom: 1.75rem; }

.dk-articles[b-hr7cicc91a] { margin-top: 1.75rem; font-size: 0.85rem; opacity: 0.85; }
.dk-articles a[b-hr7cicc91a] { color: #fff; text-decoration: underline; }

/* ─── Lightbox ──────────────────────────────────── */
.dk-lightbox[b-hr7cicc91a] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.dk-lightbox-content[b-hr7cicc91a] { position: relative; max-width: 92vw; max-height: 90vh; }

.dk-lightbox-content img[b-hr7cicc91a] {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 8px;
    display: block;
}

.dk-lightbox-title[b-hr7cicc91a] { color: #fff; font-weight: 600; margin-bottom: 0.75rem; }

.dk-lightbox-close[b-hr7cicc91a] {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* ─── Dark theme ────────────────────────────────── */
[data-theme="dark"] .dk-icon--blue[b-hr7cicc91a]   { background: rgba(0,120,212,0.18);  color: #6cb8f5; }
[data-theme="dark"] .dk-icon--purple[b-hr7cicc91a] { background: rgba(107,49,201,0.18); color: #b18cf0; }
[data-theme="dark"] .dk-icon--green[b-hr7cicc91a]  { background: rgba(30,127,60,0.18);  color: #6fcf8b; }
[data-theme="dark"] .dk-icon--teal[b-hr7cicc91a]   { background: rgba(6,122,114,0.18);  color: #5fcfc6; }
[data-theme="dark"] .dk-icon--orange[b-hr7cicc91a] { background: rgba(208,106,0,0.18);  color: #f0a95c; }
[data-theme="dark"] .dk-icon--red[b-hr7cicc91a]    { background: rgba(194,42,27,0.18);  color: #f08b7f; }
[data-theme="dark"] .dk-callout[b-hr7cicc91a]      { background: rgba(240,173,78,0.08); }
[data-theme="dark"] .dk-card:hover[b-hr7cicc91a]   { box-shadow: 0 8px 22px rgba(0,0,0,0.45); }

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 1100px) {
    .dk-grid--4[b-hr7cicc91a] { grid-template-columns: repeat(2, 1fr); }
    .dk-grid--3[b-hr7cicc91a] { grid-template-columns: repeat(2, 1fr); }
    .dk-demo[b-hr7cicc91a]    { grid-template-columns: 1fr; }
    .dk-shots[b-hr7cicc91a]   { grid-template-columns: repeat(2, 1fr); }
    .dk-panel[b-hr7cicc91a]   { padding: 2.5rem 4.5rem 2.5rem 2rem; }
}

@media (max-width: 768px) {
    /* Twelve locked full-screen panels is worse than a normal page on a phone. */
    .dk-wrap[b-hr7cicc91a]  { height: auto; }
    .dk-deck[b-hr7cicc91a]  { height: auto; overflow: visible; scroll-snap-type: none; }
    .dk-panel[b-hr7cicc91a] { min-height: 0; padding: 2.5rem 1.25rem; display: block; }
    .dk-panel--hero[b-hr7cicc91a] { padding: 3rem 1.25rem 4.5rem; }
    .dk-rail[b-hr7cicc91a]  { display: none; }

    .dk-grid--3[b-hr7cicc91a], .dk-grid--4[b-hr7cicc91a], .dk-vendors[b-hr7cicc91a], .dk-shots[b-hr7cicc91a] { grid-template-columns: 1fr; }
    .dk-cta-row[b-hr7cicc91a] { flex-direction: column; align-items: stretch; }
    .dk-btn[b-hr7cicc91a] { width: 100%; }
    .dk-head[b-hr7cicc91a] { margin-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dk-deck[b-hr7cicc91a] { scroll-behavior: auto; }
    .dk-scroll-hint[b-hr7cicc91a] { animation: none; }
}
/* /Components/Pages/Preview/LandingHub.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Design preview 4 — Bento hub + guided tour

   The grid is the map: one screen-ish mosaic that shows the
   whole product at a glance. The tour is the path: a
   full-viewport chapter stage that opens out of a tile and
   walks the same content in narrative order.

   Grid classes:    .hb-hero, .hb-grid, .hb-tile*
   Tour classes:    .hb-overlay, .hb-stage, .hb-chapter*
   Shared:          .hb-btn*, .hb-card*, .hb-chip*, .hb-shot*
   ══════════════════════════════════════════════════════════ */

.hub-preview[b-jg0np26tcb] {
    background: var(--adf-primary-bg);
    color: var(--adf-text-primary);
}

/* ─── Preview ribbon ────────────────────────────── */
.preview-ribbon[b-jg0np26tcb] {
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.preview-ribbon a[b-jg0np26tcb] {
    color: #7dd3fc;
    text-decoration: none;
    margin-left: 0.85rem;
    border-bottom: 1px dotted currentColor;
}

.preview-ribbon a:hover[b-jg0np26tcb] { color: #bae6fd; }

/* ═══════════════════════════════════════════════════
   1. HERO
   ═══════════════════════════════════════════════════ */
.hb-hero[b-jg0np26tcb] {
    padding: 3.25rem 2rem 2.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 900px 420px at 50% -10%, rgba(0,120,212,0.30), transparent 70%),
        linear-gradient(180deg, #0b1220 0%, #101a2e 100%);
    color: #fff;
}

.hb-hero-inner[b-jg0np26tcb] { max-width: 900px; margin: 0 auto; }

.hb-badge[b-jg0np26tcb] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
    margin-bottom: 1.1rem;
}

.hb-hero h1[b-jg0np26tcb] {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.hb-accent[b-jg0np26tcb] {
    display: block;
    background: linear-gradient(90deg, #4fc3f7, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hb-hero-sub[b-jg0np26tcb] {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
    max-width: 740px;
    margin: 0 auto 1.6rem;
}

.hb-hero-sub strong[b-jg0np26tcb] { color: #fff; }

.hb-cta-row[b-jg0np26tcb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
}

.hb-cta-row--center[b-jg0np26tcb] { justify-content: center; }

.hb-trial[b-jg0np26tcb] {
    margin: 1.1rem auto 0;
    max-width: 580px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.hb-trial-pill[b-jg0np26tcb] {
    display: inline-block;
    background: rgba(76,175,80,0.18);
    border: 1px solid rgba(76,175,80,0.45);
    color: #a5d6a7;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    margin-right: 0.5rem;
    font-weight: 600;
}

.hb-hero-note[b-jg0np26tcb] {
    margin-top: 1rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════════════
   2. BUTTONS (shared by grid and tour)
   ═══════════════════════════════════════════════════ */
.hb-btn[b-jg0np26tcb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
    min-height: 48px;
}

.hb-btn:hover[b-jg0np26tcb] { transform: translateY(-1px); }

.hb-btn--primary[b-jg0np26tcb] {
    background: linear-gradient(135deg, #0078d4, #005fa3);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,120,212,0.35);
}

.hb-btn--primary:hover[b-jg0np26tcb] { color: #fff; }

.hb-btn--lg[b-jg0np26tcb] { padding: 1rem 2.25rem; font-size: 1.02rem; }
.hb-btn--sm[b-jg0np26tcb] { padding: 0.5rem 1rem; font-size: 0.84rem; min-height: 40px; }

.hb-btn--ghost[b-jg0np26tcb] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

.hb-btn--ghost:hover[b-jg0np26tcb] { background: rgba(255,255,255,0.14); color: #fff; }

.hb-btn--bare[b-jg0np26tcb] {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.75);
}

.hb-btn--bare:hover[b-jg0np26tcb] { color: #fff; }

.hb-btn--outline[b-jg0np26tcb] {
    align-self: flex-start;
    background: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-accent);
    margin-top: 0.5rem;
}

.hb-btn--outline:hover[b-jg0np26tcb] { border-color: var(--adf-text-accent); }

/* ═══════════════════════════════════════════════════
   3. BENTO GRID — the map
   ═══════════════════════════════════════════════════ */
.hb-grid-wrap[b-jg0np26tcb] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 3.5rem;
}

.hb-grid-hint[b-jg0np26tcb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    margin-bottom: 1.5rem;
}

.hb-grid-hint p[b-jg0np26tcb] { margin: 0; max-width: 720px; }

/* Reading progress across the whole mosaic. The grid doubles as the map, so the
   count is the only chrome needed to show how much of the story is left. */
.hb-readcount[b-jg0np26tcb] {
    flex: 0 0 auto;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--adf-text-accent);
    white-space: nowrap;
}

.hb-grid[b-jg0np26tcb] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* A regular base row height is what makes a bento read as tidy: rows line up
       even when their content differs in length. */
    grid-auto-rows: minmax(214px, auto);
    gap: 1rem;
}

/* ─── Tile base ─────────────────────────────────── */
.hb-tile[b-jg0np26tcb] {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 16px;
    padding: 1.5rem;
    font: inherit;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

button.hb-tile[b-jg0np26tcb] { cursor: pointer; }

button.hb-tile:hover[b-jg0np26tcb],
button.hb-tile:focus-visible[b-jg0np26tcb] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

button.hb-tile:hover .hb-open[b-jg0np26tcb] { opacity: 1; transform: none; }

/* Read tiles keep a permanent tick, so the mosaic becomes a progress map. */
.hb-tile.is-viewed[b-jg0np26tcb] { border-color: color-mix(in srgb, var(--adf-text-accent) 38%, var(--adf-border-light)); }
.hb-tile.is-viewed .hb-open[b-jg0np26tcb] { opacity: 1; transform: none; color: #1e7f3c; }
.hb-tile.is-viewed .hb-kicker[b-jg0np26tcb] { opacity: 0.7; }

.hb-tile h3[b-jg0np26tcb] {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}

/* Cap topic headings at two lines so the six matched tiles start their lists
   on the same baseline. */
.hb-tile--topic h3[b-jg0np26tcb] {
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hb-tile p[b-jg0np26tcb] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--adf-text-secondary);
    margin: 0;
}

.hb-tile-sub[b-jg0np26tcb] { margin-bottom: 1rem !important; }

.hb-tile-head[b-jg0np26tcb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.hb-kicker[b-jg0np26tcb] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adf-text-accent);
}

.hb-open[b-jg0np26tcb] {
    flex: 0 0 auto;
    color: var(--adf-text-accent);
    opacity: 0.35;
    transform: translate(-2px, 2px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
}

/* The studio tile is a div (its screenshots are their own buttons), so its
   open affordance has to be a real button rather than a decorative span. */
.hb-open--btn[b-jg0np26tcb] {
    background: none;
    border: none;
    padding: 0.25rem 0.35rem;
    cursor: pointer;
    font-size: 1rem;
}

.hb-open--btn:hover[b-jg0np26tcb] { opacity: 1; transform: none; }

.hb-tile-foot[b-jg0np26tcb] {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.82rem !important;
    color: var(--adf-text-secondary);
}

.hb-bignum[b-jg0np26tcb] {
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.35rem;
}

/* ─── Tile spans ────────────────────────────────────
   Strict 12-column rhythm — every row sums to exactly 12, with only two tile
   widths (8 and 4), and the tile order matches the tour chapter order 1:1.

     A  video 8            | integrations 4   (2 rows tall)
     B  problem 4 | how 4  | capabilities 4
     C  studio 8           | docs 4           (2 rows tall)
     D  usecases 4 | trust 4 | who 4                          */
.hb-tile--video[b-jg0np26tcb]        { grid-column: span 8; grid-row: span 2; padding: 0; }
.hb-tile--integrations[b-jg0np26tcb] { grid-column: span 4; grid-row: span 2; }
.hb-tile--studio[b-jg0np26tcb]       { grid-column: span 8; grid-row: span 2; }
.hb-tile--docs[b-jg0np26tcb]         { grid-column: span 4; grid-row: span 2; }
.hb-tile--topic[b-jg0np26tcb]        { grid-column: span 4; }

/* ─── Video tile ────────────────────────────────── */
.hb-video[b-jg0np26tcb] {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.hb-video iframe[b-jg0np26tcb], .hb-video-facade[b-jg0np26tcb] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.hb-video-facade[b-jg0np26tcb] { padding: 0; cursor: pointer; background: #000; }
.hb-video-facade img[b-jg0np26tcb] { width: 100%; height: 100%; object-fit: cover; }

.hb-video-play[b-jg0np26tcb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(220,30,30,0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: transform 0.2s;
}

.hb-video-facade:hover .hb-video-play[b-jg0np26tcb] { transform: translate(-50%, -50%) scale(1.09); }

.hb-tile--video .hb-tile-body[b-jg0np26tcb] { padding: 1.4rem 1.5rem 1.5rem; }

.hb-more[b-jg0np26tcb] {
    align-self: flex-start;
    margin-top: 0.9rem;
    background: none;
    border: none;
    padding: 0.4rem 0;
    color: var(--adf-text-accent);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    min-height: 44px;
}

.hb-more:hover[b-jg0np26tcb] { text-decoration: underline; }

/* ─── Mini lists ────────────────────────────────── */
.hb-minilist[b-jg0np26tcb] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: grid;
    gap: 0.55rem;
}

.hb-minilist li[b-jg0np26tcb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.89rem;
    color: var(--adf-text-secondary);
}

.hb-minilist .bi[b-jg0np26tcb] { color: var(--adf-text-accent); font-size: 0.95rem; flex: 0 0 auto; }

.hb-minilist-more[b-jg0np26tcb] {
    font-style: italic;
    opacity: 0.75;
    padding-left: 1.55rem;
}

.hb-step[b-jg0np26tcb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ─── Chips ─────────────────────────────────────── */
.hb-chips[b-jg0np26tcb] { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hb-chips--preview[b-jg0np26tcb] { margin-top: 0.5rem; }

.hb-chip[b-jg0np26tcb] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.36rem 0.75rem;
    font-size: 0.79rem;
    font-weight: 500;
    white-space: nowrap;
}

.hb-chip--more[b-jg0np26tcb] { color: var(--adf-text-accent); font-weight: 700; }

/* ─── Screenshot strip ──────────────────────────── */
.hb-shots[b-jg0np26tcb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: auto;
}

.hb-shots--wide[b-jg0np26tcb] { margin-top: 0; }

.hb-shot[b-jg0np26tcb] {
    display: block;
    padding: 0;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.hb-shot:hover[b-jg0np26tcb] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.hb-shot img[b-jg0np26tcb] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

.hb-shot-cap[b-jg0np26tcb] {
    display: block;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    color: var(--adf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hb-shot-cap .bi[b-jg0np26tcb] { color: var(--adf-text-accent); }

/* ═══════════════════════════════════════════════════
   4. PAGE CTA
   ═══════════════════════════════════════════════════ */
.hb-cta[b-jg0np26tcb] {
    background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
    padding: 3.25rem 2rem;
    text-align: center;
}

.hb-cta-inner[b-jg0np26tcb] { max-width: 820px; margin: 0 auto; }
.hb-cta h2[b-jg0np26tcb] { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.7rem; }
.hb-cta p[b-jg0np26tcb] { font-size: 1rem; opacity: 0.92; margin-bottom: 1.5rem; line-height: 1.65; }
.hb-cta .hb-articles[b-jg0np26tcb] { margin-top: 1.6rem; font-size: 0.85rem; opacity: 0.85; color: #fff; }
.hb-cta .hb-articles a[b-jg0np26tcb] { color: #fff; text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   5. TOUR OVERLAY — the path
   Full-viewport so the chapter owns the screen; every chapter stays in the DOM
   and is hidden with CSS, keeping the long-form copy server-rendered.
   ═══════════════════════════════════════════════════ */
.hb-overlay[b-jg0np26tcb] {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--adf-primary-bg);
}

.hb-overlay.is-open[b-jg0np26tcb] { display: block; animation: hb-fade-b-jg0np26tcb 0.2s ease; }

@keyframes hb-fade-b-jg0np26tcb {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hb-stage[b-jg0np26tcb] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    outline: none;
}

/* ─── Top bar ───────────────────────────────────── */
.hb-bar[b-jg0np26tcb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.7rem 1.75rem;
    background: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
}

.hb-bar-left[b-jg0np26tcb] { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }

.hb-count[b-jg0np26tcb] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--adf-text-accent);
    font-variant-numeric: tabular-nums;
}

.hb-count-of[b-jg0np26tcb] { font-size: 0.78rem; font-weight: 600; color: var(--adf-text-secondary); margin-left: 0.2rem; }

.hb-bar-label[b-jg0np26tcb] {
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hb-bar-right[b-jg0np26tcb] { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }

.hb-close[b-jg0np26tcb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--adf-border-light);
    background: var(--adf-primary-bg);
    color: var(--adf-text-secondary);
    cursor: pointer;
}

.hb-close:hover[b-jg0np26tcb] { color: var(--adf-text-primary); border-color: var(--adf-text-accent); }

/* ─── Chapter dots (a mini-map of the grid) ─────── */
.hb-dots[b-jg0np26tcb] { display: flex; align-items: center; gap: 0.4rem; }

.hb-dot[b-jg0np26tcb] {
    width: 26px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--adf-border-light);
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
}

.hb-dot:hover[b-jg0np26tcb] { background: var(--adf-text-secondary); }
.hb-dot.is-done[b-jg0np26tcb] { background: color-mix(in srgb, var(--adf-text-accent) 45%, transparent); }
.hb-dot.is-active[b-jg0np26tcb] { width: 46px; background: var(--adf-text-accent); }

/* ─── Progress ──────────────────────────────────── */
.hb-progress[b-jg0np26tcb] { height: 3px; background: var(--adf-border-light); }

.hb-progress span[b-jg0np26tcb] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0078d4, #7c4dff);
    transition: width 0.35s ease;
}

/* ─── Chapters ──────────────────────────────────── */
.hb-chapters[b-jg0np26tcb] { position: relative; min-height: 0; }

.hb-chapter[b-jg0np26tcb] {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 2.25rem 2.5rem;
}

.hb-chapter.is-active[b-jg0np26tcb] { display: block; animation: hb-in-b-jg0np26tcb 0.3s ease; }

@keyframes hb-in-b-jg0np26tcb {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}

.hb-split[b-jg0np26tcb] {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    align-items: start;
}

.hb-lede[b-jg0np26tcb] { position: relative; display: flex; flex-direction: column; }

.hb-lede .hb-kicker[b-jg0np26tcb] { margin-bottom: 0.7rem; }

.hb-lede h2[b-jg0np26tcb] {
    font-size: clamp(1.4rem, 2.2vw, 1.95rem);
    font-weight: 750;
    line-height: 1.25;
    margin: 0 0 0.9rem;
}

.hb-lede > p[b-jg0np26tcb] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
    margin: 0 0 1rem;
}

.hb-lede > p strong[b-jg0np26tcb] { color: var(--adf-text-primary); }

.hb-bignum-inline[b-jg0np26tcb] {
    font-size: 1.35em;
    font-weight: 800;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hb-visual[b-jg0np26tcb] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ─── Cards ─────────────────────────────────────── */
.hb-cards[b-jg0np26tcb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.hb-card[b-jg0np26tcb] {
    display: flex;
    gap: 0.8rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.hb-card h3[b-jg0np26tcb] { font-size: 0.93rem; font-weight: 700; margin: 0 0 0.25rem; }

.hb-card p[b-jg0np26tcb] {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--adf-text-secondary);
    margin: 0;
}

.hb-card-icon[b-jg0np26tcb] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.hb-card-icon--blue[b-jg0np26tcb]   { background: rgba(0,120,212,0.10);  color: #0078d4; }
.hb-card-icon--purple[b-jg0np26tcb] { background: rgba(107,49,201,0.10); color: #6b31c9; }
.hb-card-icon--green[b-jg0np26tcb]  { background: rgba(30,127,60,0.10);  color: #1e7f3c; }
.hb-card-icon--teal[b-jg0np26tcb]   { background: rgba(6,122,114,0.10);  color: #067a72; }
.hb-card-icon--orange[b-jg0np26tcb] { background: rgba(208,106,0,0.10);  color: #d06a00; }
.hb-card-icon--red[b-jg0np26tcb]    { background: rgba(194,42,27,0.10);  color: #c22a1b; }

/* ─── Numbered steps ────────────────────────────── */
.hb-steps[b-jg0np26tcb] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }

.hb-steps li[b-jg0np26tcb] {
    display: flex;
    gap: 0.9rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.hb-step-num[b-jg0np26tcb] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.hb-steps h3[b-jg0np26tcb] { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; }

.hb-steps p[b-jg0np26tcb] {
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
    margin: 0;
}

/* ─── Callout / note ────────────────────────────── */
.hb-callout[b-jg0np26tcb] {
    display: flex;
    gap: 0.7rem;
    background: rgba(240,173,78,0.10);
    border-left: 3px solid #f0ad4e;
    border-radius: 0 10px 10px 0;
    padding: 0.85rem 1rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

.hb-callout .bi[b-jg0np26tcb] { color: #f0ad4e; flex: 0 0 auto; }
.hb-callout strong[b-jg0np26tcb] { color: var(--adf-text-primary); }

.hb-note[b-jg0np26tcb] {
    font-size: 0.82rem !important;
    line-height: 1.55;
    color: var(--adf-text-secondary);
    margin: 0.75rem 0 0 !important;
}

.hb-note .bi[b-jg0np26tcb] { color: var(--adf-text-accent); }
.hb-note strong[b-jg0np26tcb] { color: var(--adf-text-primary); }

/* ─── Vendors ───────────────────────────────────── */
.hb-vendor[b-jg0np26tcb] { margin-bottom: 0.25rem; }

.hb-vendor h3[b-jg0np26tcb] {
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--adf-text-primary);
}

.hb-vendor h3 .bi[b-jg0np26tcb] { color: var(--adf-text-accent); }

/* ─── Final chapter ─────────────────────────────── */
/* The closing chapter stacks its three cards in one column so the CTA under the
   lede stays visible without the chapter scrolling. */
.hb-chapter--final .hb-cards[b-jg0np26tcb] { grid-template-columns: minmax(0, 1fr); }

.hb-final[b-jg0np26tcb] {
    margin-top: 1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 14px;
    padding: 1.15rem 1.35rem;
}

.hb-final h3[b-jg0np26tcb] { font-size: 1.1rem; font-weight: 750; margin: 0 0 0.4rem; }

.hb-final p[b-jg0np26tcb] {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
    margin: 0 0 0.85rem;
}

.hb-articles--tour[b-jg0np26tcb] {
    margin: 0.25rem 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.7;
    color: var(--adf-text-secondary);
}

.hb-articles--tour a[b-jg0np26tcb] { color: var(--adf-text-accent); text-decoration: none; }
.hb-articles--tour a:hover[b-jg0np26tcb] { text-decoration: underline; }

/* ─── Bottom nav ────────────────────────────────── */
.hb-nav[b-jg0np26tcb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.75rem;
    background: var(--adf-secondary-bg);
    border-top: 1px solid var(--adf-border-light);
}

.hb-navbtn[b-jg0np26tcb] {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 52px;
    padding: 0.6rem 1.2rem;
    background: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    color: var(--adf-text-primary);
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.hb-navbtn:hover:not(:disabled)[b-jg0np26tcb] {
    border-color: var(--adf-text-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.hb-navbtn:disabled[b-jg0np26tcb] { opacity: 0.35; cursor: default; }
.hb-navbtn .bi[b-jg0np26tcb] { font-size: 1.05rem; color: var(--adf-text-accent); }
.hb-navbtn--done .bi[b-jg0np26tcb] { color: #1e7f3c; }

.hb-navbtn-text[b-jg0np26tcb] { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; }
.hb-navbtn--next .hb-navbtn-text[b-jg0np26tcb] { text-align: right; }

.hb-navbtn-kicker[b-jg0np26tcb] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adf-text-secondary);
}

.hb-navbtn-label[b-jg0np26tcb] { font-size: 0.95rem; font-weight: 650; }

.hb-backtogrid[b-jg0np26tcb] {
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--adf-text-secondary);
    cursor: pointer;
}

.hb-backtogrid:hover[b-jg0np26tcb] { color: var(--adf-text-accent); border-color: var(--adf-border-light); }

/* ═══════════════════════════════════════════════════
   6. LIGHTBOX
   ═══════════════════════════════════════════════════ */
.hb-lightbox[b-jg0np26tcb] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hb-lightbox-content[b-jg0np26tcb] { position: relative; max-width: 1200px; width: 100%; }

.hb-lightbox-content img[b-jg0np26tcb] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.16);
}

.hb-lightbox-title[b-jg0np26tcb] { color: #fff; font-weight: 600; margin-bottom: 0.6rem; }

.hb-lightbox-close[b-jg0np26tcb] {
    position: absolute;
    top: -2.6rem;
    right: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   7. DARK THEME
   ═══════════════════════════════════════════════════ */
[data-theme="dark"] .hb-card-icon--blue[b-jg0np26tcb]   { background: rgba(0,120,212,0.18);  color: #6cb8f5; }
[data-theme="dark"] .hb-card-icon--purple[b-jg0np26tcb] { background: rgba(107,49,201,0.18); color: #b18cf0; }
[data-theme="dark"] .hb-card-icon--green[b-jg0np26tcb]  { background: rgba(30,127,60,0.18);  color: #6fcf8b; }
[data-theme="dark"] .hb-card-icon--teal[b-jg0np26tcb]   { background: rgba(6,122,114,0.18);  color: #5fcfc6; }
[data-theme="dark"] .hb-card-icon--orange[b-jg0np26tcb] { background: rgba(208,106,0,0.18);  color: #f0a95c; }
[data-theme="dark"] .hb-card-icon--red[b-jg0np26tcb]    { background: rgba(194,42,27,0.18);  color: #f08b7f; }
[data-theme="dark"] .hb-callout[b-jg0np26tcb]           { background: rgba(240,173,78,0.08); }
[data-theme="dark"] button.hb-tile:hover[b-jg0np26tcb]  { box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
[data-theme="dark"] .hb-tile.is-viewed .hb-open[b-jg0np26tcb] { color: #6fcf8b; }
[data-theme="dark"] .hb-navbtn--done .bi[b-jg0np26tcb]        { color: #6fcf8b; }

/* ═══════════════════════════════════════════════════
   8. RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    /* Showcase tiles go full width; the six topic tiles stay 3-across. */
    .hb-tile--video[b-jg0np26tcb],
    .hb-tile--integrations[b-jg0np26tcb],
    .hb-tile--studio[b-jg0np26tcb],
    .hb-tile--docs[b-jg0np26tcb] { grid-column: span 12; grid-row: auto; }
    .hb-tile--docs .hb-bignum[b-jg0np26tcb] { margin-bottom: 0.15rem; }
    .hb-shots[b-jg0np26tcb] { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 1080px) {
    .hb-split[b-jg0np26tcb] { grid-template-columns: 1fr; gap: 1.5rem; }
    .hb-chapter[b-jg0np26tcb] { padding: 1.75rem 1.5rem; }
    .hb-shots--wide[b-jg0np26tcb] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
    .hb-hero[b-jg0np26tcb] { padding: 2.5rem 1.25rem 2rem; }
    .hb-grid-wrap[b-jg0np26tcb] { padding: 1.75rem 1rem 2.5rem; }
    .hb-grid[b-jg0np26tcb] { gap: 0.85rem; grid-auto-rows: minmax(0, auto); }
    .hb-tile[b-jg0np26tcb],
    .hb-tile--topic[b-jg0np26tcb],
    .hb-tile--video[b-jg0np26tcb], .hb-tile--integrations[b-jg0np26tcb],
    .hb-tile--studio[b-jg0np26tcb], .hb-tile--docs[b-jg0np26tcb] { grid-column: span 12; }
    .hb-tile--topic h3[b-jg0np26tcb] { min-height: 0; -webkit-line-clamp: none; }
    .hb-shots[b-jg0np26tcb] { grid-template-columns: repeat(2, 1fr); }
    .hb-cta[b-jg0np26tcb] { padding: 2.5rem 1.25rem; }
    .hb-cta h2[b-jg0np26tcb] { font-size: 1.5rem; }
    .hb-hero .hb-btn[b-jg0np26tcb], .hb-cta .hb-btn[b-jg0np26tcb] { width: 100%; }
    .hb-hero .hb-cta-row[b-jg0np26tcb], .hb-cta .hb-cta-row[b-jg0np26tcb] { flex-direction: column; align-items: stretch; }
}

@media (max-width: 768px) {
    .hb-bar[b-jg0np26tcb] { flex-wrap: wrap; gap: 0.55rem; padding: 0.55rem 0.9rem; }
    .hb-bar-label[b-jg0np26tcb] { display: none; }
    .hb-dots[b-jg0np26tcb] { order: 3; width: 100%; justify-content: space-between; }
    .hb-dot[b-jg0np26tcb] { flex: 1 1 auto; width: auto; }
    .hb-dot.is-active[b-jg0np26tcb] { width: auto; flex: 2 2 auto; }
    .hb-chapter[b-jg0np26tcb] { padding: 1.25rem 1rem; }
    .hb-cards[b-jg0np26tcb] { grid-template-columns: 1fr; }
    .hb-shots--wide[b-jg0np26tcb] { grid-template-columns: repeat(2, 1fr); }
    .hb-nav[b-jg0np26tcb] { padding: 0.6rem 0.85rem; gap: 0.5rem; }
    .hb-backtogrid[b-jg0np26tcb] { display: none; }
    .hb-navbtn[b-jg0np26tcb] { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.8rem; }
    .hb-navbtn--next[b-jg0np26tcb] { justify-content: flex-end; }
    .hb-navbtn-label[b-jg0np26tcb] { font-size: 0.85rem; }
}
/* /Components/Pages/Preview/LandingStory.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Design preview 3 — Guided story (replaces the deck)
   One fixed viewport. The page itself never scrolls; the story
   advances with Prev/Next, numbered steps, or arrow keys.
   No scroll-snap, so nothing hijacks the wheel.
   ══════════════════════════════════════════════════════════ */

.story-preview[b-a8n1879x07] {
    background: var(--adf-primary-bg);
    color: var(--adf-text-primary);
}

/* ─── Preview ribbon ────────────────────────────── */
.preview-ribbon[b-a8n1879x07] {
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.preview-ribbon a[b-a8n1879x07] {
    color: #7dd3fc;
    text-decoration: none;
    margin-left: 0.85rem;
    border-bottom: 1px dotted currentColor;
}

.preview-ribbon a:hover[b-a8n1879x07] { color: #bae6fd; }

/* ─── Stage ─────────────────────────────────────────
   64px landing navbar + 36px preview ribbon. Drop the 36 when
   the ribbon goes. Fixed height, so the page has no scrollbar. */
.sp-stage[b-a8n1879x07] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    outline: none;
    background: var(--adf-primary-bg);
    border-top: 1px solid var(--adf-border-light);
}

/* ─── Top bar ───────────────────────────────────── */
.sp-bar[b-a8n1879x07] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--adf-secondary-bg);
    border-bottom: 1px solid var(--adf-border-light);
}

.sp-bar-left[b-a8n1879x07] { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }

.sp-count[b-a8n1879x07] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--adf-text-accent);
    font-variant-numeric: tabular-nums;
}

.sp-count-of[b-a8n1879x07] { font-size: 0.78rem; font-weight: 600; color: var(--adf-text-secondary); margin-left: 0.2rem; }

.sp-bar-label[b-a8n1879x07] {
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-bar-right[b-a8n1879x07] { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }

/* ─── Step dots ─────────────────────────────────── */
.sp-dots[b-a8n1879x07] { display: flex; align-items: center; gap: 0.4rem; }

.sp-dot[b-a8n1879x07] {
    width: 26px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--adf-border-light);
    cursor: pointer;
    transition: background 0.2s, width 0.2s;
}

.sp-dot:hover[b-a8n1879x07] { background: var(--adf-text-secondary); }
.sp-dot.is-done[b-a8n1879x07] { background: color-mix(in srgb, var(--adf-text-accent) 45%, transparent); }
.sp-dot.is-active[b-a8n1879x07] { width: 46px; background: var(--adf-text-accent); }

/* ─── Progress ──────────────────────────────────── */
.sp-progress[b-a8n1879x07] { height: 3px; background: var(--adf-border-light); }

.sp-progress span[b-a8n1879x07] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0078d4, #7c4dff);
    transition: width 0.35s ease;
}

/* ─── Slides ────────────────────────────────────── */
.sp-slides[b-a8n1879x07] { position: relative; min-height: 0; }

.sp-slide[b-a8n1879x07] {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 2.25rem 2.5rem;
}

.sp-slide.is-active[b-a8n1879x07] { display: block; animation: sp-in-b-a8n1879x07 0.32s ease; }

@keyframes sp-in-b-a8n1879x07 {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}

.sp-split[b-a8n1879x07] {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    align-items: start;
}

.sp-lede[b-a8n1879x07] { position: relative; }

.sp-kicker[b-a8n1879x07] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--adf-text-accent);
    margin-bottom: 0.7rem;
}

.sp-lede h2[b-a8n1879x07] {
    font-size: clamp(1.4rem, 2.2vw, 1.95rem);
    font-weight: 750;
    line-height: 1.25;
    margin: 0 0 0.9rem;
}

.sp-lede > p[b-a8n1879x07] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
    margin: 0 0 1rem;
}

.sp-bignum[b-a8n1879x07] {
    font-size: 1.35em;
    font-weight: 800;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sp-visual[b-a8n1879x07] { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* ─── Cards ─────────────────────────────────────── */
.sp-cards[b-a8n1879x07] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.sp-card[b-a8n1879x07] {
    display: flex;
    gap: 0.8rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.sp-card h3[b-a8n1879x07] { font-size: 0.93rem; font-weight: 700; margin: 0 0 0.25rem; }

.sp-card p[b-a8n1879x07] {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--adf-text-secondary);
    margin: 0;
}

.sp-card-icon[b-a8n1879x07] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.sp-card-icon--blue[b-a8n1879x07]   { background: rgba(0,120,212,0.10);  color: #0078d4; }
.sp-card-icon--purple[b-a8n1879x07] { background: rgba(107,49,201,0.10); color: #6b31c9; }
.sp-card-icon--green[b-a8n1879x07]  { background: rgba(30,127,60,0.10);  color: #1e7f3c; }
.sp-card-icon--teal[b-a8n1879x07]   { background: rgba(6,122,114,0.10);  color: #067a72; }
.sp-card-icon--orange[b-a8n1879x07] { background: rgba(208,106,0,0.10);  color: #d06a00; }
.sp-card-icon--red[b-a8n1879x07]    { background: rgba(194,42,27,0.10);  color: #c22a1b; }

/* ─── Numbered steps ────────────────────────────── */
.sp-steps[b-a8n1879x07] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }

.sp-steps li[b-a8n1879x07] {
    display: flex;
    gap: 0.9rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.sp-step-num[b-a8n1879x07] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.sp-steps h3[b-a8n1879x07] { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; }

.sp-steps p[b-a8n1879x07] {
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
    margin: 0;
}

/* ─── Ticks ─────────────────────────────────────── */
.sp-ticks[b-a8n1879x07] { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.65rem; }

.sp-ticks li[b-a8n1879x07] {
    display: flex;
    gap: 0.6rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

.sp-ticks .bi[b-a8n1879x07] { color: var(--adf-text-accent); flex: 0 0 auto; margin-top: 0.15rem; }
.sp-ticks strong[b-a8n1879x07] { color: var(--adf-text-primary); }

/* ─── Callout / note ────────────────────────────── */
.sp-callout[b-a8n1879x07] {
    display: flex;
    gap: 0.7rem;
    background: rgba(240,173,78,0.10);
    border-left: 3px solid #f0ad4e;
    border-radius: 0 10px 10px 0;
    padding: 0.85rem 1rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

.sp-callout .bi[b-a8n1879x07] { color: #f0ad4e; flex: 0 0 auto; }

.sp-note[b-a8n1879x07] {
    font-size: 0.82rem !important;
    line-height: 1.55;
    color: var(--adf-text-secondary);
    margin: 0.75rem 0 0 !important;
}

.sp-note .bi[b-a8n1879x07] { color: var(--adf-text-accent); }

/* ─── Vendors & chips ───────────────────────────── */
.sp-vendor[b-a8n1879x07] { margin-bottom: 0.25rem; }

.sp-vendor h3[b-a8n1879x07] {
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--adf-text-primary);
}

.sp-vendor h3 .bi[b-a8n1879x07] { color: var(--adf-text-accent); }

.sp-chips[b-a8n1879x07] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.sp-chip[b-a8n1879x07] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ─── Video ─────────────────────────────────────── */
.sp-video[b-a8n1879x07] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--adf-border-light);
    background: #000;
}

.sp-video iframe[b-a8n1879x07] { width: 100%; height: 100%; border: 0; display: block; }

.sp-video-facade[b-a8n1879x07] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.sp-video-facade img[b-a8n1879x07] { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp-video-play[b-a8n1879x07] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(220,0,0,0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: transform 0.2s;
}

.sp-video-facade:hover .sp-video-play[b-a8n1879x07] { transform: scale(1.08); }

/* ─── Screenshots ───────────────────────────────── */
.sp-shots[b-a8n1879x07] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }

.sp-shot[b-a8n1879x07] {
    display: block;
    padding: 0;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.sp-shot:hover[b-a8n1879x07] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.sp-shot img[b-a8n1879x07] { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.sp-shot-cap[b-a8n1879x07] {
    display: block;
    padding: 0.5rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: left;
}

.sp-shot-cap .bi[b-a8n1879x07] { color: var(--adf-text-accent); }

/* ─── Final CTA block ───────────────────────────── */
/* The closing slide stacks its three cards in one column so the CTA that sits
   under the lede stays above the fold without the slide scrolling. */
.sp-slide--final .sp-cards[b-a8n1879x07] { grid-template-columns: minmax(0, 1fr); }

.sp-final[b-a8n1879x07] {
    margin-top: 1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 14px;
    padding: 1.15rem 1.35rem;
}

.sp-final h3[b-a8n1879x07] { font-size: 1.1rem; font-weight: 750; margin: 0 0 0.4rem; }

.sp-final p[b-a8n1879x07] {
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
    margin: 0 0 0.85rem;
}

.sp-articles[b-a8n1879x07] {
    margin: 0.25rem 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.7;
    color: var(--adf-text-secondary);
}

.sp-articles a[b-a8n1879x07] { color: var(--adf-text-accent); text-decoration: none; }
.sp-articles a:hover[b-a8n1879x07] { text-decoration: underline; }

/* ─── Hero slide ────────────────────────────────── */
.sp-slide--hero[b-a8n1879x07] {
    background: linear-gradient(160deg, #0b1220 0%, #111c33 55%, #0d1526 100%);
    color: #fff;
    display: none;
    place-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sp-slide--hero.is-active[b-a8n1879x07] { display: grid; }

.sp-hero-glow[b-a8n1879x07] {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 520px;
    background: radial-gradient(circle, rgba(0,120,212,0.35) 0%, transparent 68%);
    pointer-events: none;
}

.sp-hero-inner[b-a8n1879x07] { position: relative; max-width: 880px; }

.sp-badge[b-a8n1879x07] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
}

.sp-slide--hero h1[b-a8n1879x07] {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.sp-accent[b-a8n1879x07] {
    background: linear-gradient(135deg, #4da3ff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sp-hero-sub[b-a8n1879x07] {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    margin: 0 auto 1.5rem;
    max-width: 760px;
}

.sp-hero-sub strong[b-a8n1879x07] { color: #fff; }

.sp-cta-row[b-a8n1879x07] { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.sp-trial[b-a8n1879x07] {
    margin: 1.1rem auto 0;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.72);
    max-width: 620px;
}

.sp-trial-pill[b-a8n1879x07] {
    display: inline-block;
    background: rgba(45,164,78,0.22);
    border: 1px solid rgba(45,164,78,0.45);
    color: #a7f3c0;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.sp-hero-note[b-a8n1879x07] { margin: 1.1rem 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.6); }

/* ─── Buttons ───────────────────────────────────── */
.sp-btn[b-a8n1879x07] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
}

.sp-btn:hover[b-a8n1879x07] { transform: translateY(-1px); }

.sp-btn--primary[b-a8n1879x07] {
    background: linear-gradient(135deg, #0078d4, #7c4dff);
    color: #fff;
    border: none;
}

.sp-btn--primary:hover[b-a8n1879x07] { color: #fff; }

.sp-btn--lg[b-a8n1879x07] { padding: 0.9rem 1.9rem; font-size: 1rem; }
.sp-btn--sm[b-a8n1879x07] { padding: 0.5rem 0.95rem; font-size: 0.83rem; }

.sp-btn--ghost[b-a8n1879x07] {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

.sp-btn--ghost:hover[b-a8n1879x07] { background: rgba(255,255,255,0.16); color: #fff; }

.sp-btn--bare[b-a8n1879x07] { background: none; color: var(--adf-text-secondary); }
.sp-btn--bare:hover[b-a8n1879x07] { color: var(--adf-text-accent); }

.sp-btn--outline[b-a8n1879x07] {
    align-self: flex-start;
    background: none;
    border-color: var(--adf-border-light);
    color: var(--adf-text-primary);
}

.sp-btn--outline:hover[b-a8n1879x07] { border-color: var(--adf-text-accent); }

.sp-link[b-a8n1879x07] {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--adf-text-accent);
    text-decoration: none;
}

.sp-link:hover[b-a8n1879x07] { text-decoration: underline; }

/* ─── Bottom nav ────────────────────────────────── */
.sp-nav[b-a8n1879x07] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.75rem;
    background: var(--adf-secondary-bg);
    border-top: 1px solid var(--adf-border-light);
}

.sp-navbtn[b-a8n1879x07] {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 52px;
    padding: 0.6rem 1.2rem;
    background: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    color: var(--adf-text-primary);
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.sp-navbtn:hover:not(:disabled)[b-a8n1879x07] {
    border-color: var(--adf-text-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.sp-navbtn:disabled[b-a8n1879x07] { opacity: 0.35; cursor: default; }
.sp-navbtn .bi[b-a8n1879x07] { font-size: 1.05rem; color: var(--adf-text-accent); }

.sp-navbtn-text[b-a8n1879x07] { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; }
.sp-navbtn--next .sp-navbtn-text[b-a8n1879x07] { text-align: right; }

.sp-navbtn-kicker[b-a8n1879x07] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adf-text-secondary);
}

.sp-navbtn-label[b-a8n1879x07] { font-size: 0.95rem; font-weight: 650; }

.sp-hint[b-a8n1879x07] { font-size: 0.76rem; color: var(--adf-text-secondary); }

.sp-hint kbd[b-a8n1879x07] {
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.72rem;
    margin-right: 0.2rem;
}

/* ─── Lightbox ──────────────────────────────────── */
.sp-lightbox[b-a8n1879x07] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.sp-lightbox-content[b-a8n1879x07] { position: relative; max-width: 1200px; width: 100%; }

.sp-lightbox-content img[b-a8n1879x07] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.16);
}

.sp-lightbox-title[b-a8n1879x07] { color: #fff; font-weight: 600; margin-bottom: 0.6rem; }

.sp-lightbox-close[b-a8n1879x07] {
    position: absolute;
    top: -2.6rem;
    right: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* ─── Dark theme ────────────────────────────────── */
[data-theme="dark"] .sp-card-icon--blue[b-a8n1879x07]   { background: rgba(0,120,212,0.18);  color: #6cb8f5; }
[data-theme="dark"] .sp-card-icon--purple[b-a8n1879x07] { background: rgba(107,49,201,0.18); color: #b18cf0; }
[data-theme="dark"] .sp-card-icon--green[b-a8n1879x07]  { background: rgba(30,127,60,0.18);  color: #6fcf8b; }
[data-theme="dark"] .sp-card-icon--teal[b-a8n1879x07]   { background: rgba(6,122,114,0.18);  color: #5fcfc6; }
[data-theme="dark"] .sp-card-icon--orange[b-a8n1879x07] { background: rgba(208,106,0,0.18);  color: #f0a95c; }
[data-theme="dark"] .sp-card-icon--red[b-a8n1879x07]    { background: rgba(194,42,27,0.18);  color: #f08b7f; }
[data-theme="dark"] .sp-callout[b-a8n1879x07]           { background: rgba(240,173,78,0.08); }

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 1080px) {
    .sp-split[b-a8n1879x07] { grid-template-columns: 1fr; gap: 1.5rem; }
    .sp-slide[b-a8n1879x07] { padding: 1.75rem 1.5rem; }
    .sp-shots[b-a8n1879x07] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .sp-stage[b-a8n1879x07] { height: calc(100vh - 92px); height: calc(100dvh - 92px); }
    .sp-bar[b-a8n1879x07] { flex-wrap: wrap; gap: 0.6rem; padding: 0.6rem 1rem; }
    .sp-bar-label[b-a8n1879x07] { display: none; }
    .sp-dots[b-a8n1879x07] { order: 3; width: 100%; justify-content: space-between; }
    .sp-dot[b-a8n1879x07] { flex: 1 1 auto; width: auto; }
    .sp-dot.is-active[b-a8n1879x07] { width: auto; flex: 2 2 auto; }
    .sp-slide[b-a8n1879x07] { padding: 1.25rem 1rem; }
    .sp-cards[b-a8n1879x07] { grid-template-columns: 1fr; }
    .sp-shots[b-a8n1879x07] { grid-template-columns: repeat(2, 1fr); }
    .sp-nav[b-a8n1879x07] { padding: 0.6rem 0.85rem; gap: 0.5rem; }
    .sp-hint[b-a8n1879x07] { display: none; }
    .sp-navbtn[b-a8n1879x07] { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.8rem; }
    .sp-navbtn--next[b-a8n1879x07] { justify-content: flex-end; }
    .sp-navbtn-label[b-a8n1879x07] { font-size: 0.85rem; }
    .sp-btn[b-a8n1879x07] { width: 100%; }
    .sp-bar-right .sp-btn[b-a8n1879x07] { width: auto; }
    .sp-cta-row[b-a8n1879x07] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Preview/LandingTabs.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════
   Design preview 1 — Tabbed console
   Compact hero + sticky segmented tab bar. One panel visible
   at a time, so the page never exceeds ~2 screens.
   ══════════════════════════════════════════════════════════ */

.tabs-preview[b-ft277ak8jo] {
    background: var(--adf-primary-bg);
    color: var(--adf-text-primary);
}

/* ─── Preview ribbon ────────────────────────────── */
.preview-ribbon[b-ft277ak8jo] {
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    text-align: center;
}

.preview-ribbon a[b-ft277ak8jo] {
    color: #7dd3fc;
    text-decoration: none;
    margin-left: 0.85rem;
    border-bottom: 1px dotted currentColor;
}

.preview-ribbon a:hover[b-ft277ak8jo] { color: #bae6fd; }

/* ─── Hero ──────────────────────────────────────── */
.tp-hero[b-ft277ak8jo] {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 2rem 2.5rem;
    text-align: center;
    background: linear-gradient(160deg, #0b1220 0%, #111c33 55%, #0d1526 100%);
    color: #fff;
}

.tp-hero-glow[b-ft277ak8jo] {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 780px;
    height: 520px;
    background: radial-gradient(circle, rgba(0,120,212,0.35) 0%, transparent 68%);
    pointer-events: none;
}

.tp-hero-inner[b-ft277ak8jo] {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

.tp-badge[b-ft277ak8jo] {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.8rem;
    margin-bottom: 1.1rem;
}

.tp-hero h1[b-ft277ak8jo] {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.tp-accent[b-ft277ak8jo] {
    display: block;
    background: linear-gradient(90deg, #4fc3f7, #81d4fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tp-hero-sub[b-ft277ak8jo] {
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    max-width: 720px;
    margin: 0 auto 1.6rem;
}

.tp-hero-sub strong[b-ft277ak8jo] { color: #fff; }

.tp-cta-row[b-ft277ak8jo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
}

.tp-cta-row--center[b-ft277ak8jo] { justify-content: center; }

.tp-trial[b-ft277ak8jo] {
    margin: 1.1rem auto 0;
    max-width: 560px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.tp-trial-pill[b-ft277ak8jo] {
    display: inline-block;
    background: rgba(76,175,80,0.18);
    border: 1px solid rgba(76,175,80,0.45);
    color: #a5d6a7;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    margin-right: 0.5rem;
    font-weight: 600;
}

.tp-hero-note[b-ft277ak8jo] {
    margin-top: 1.1rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.6);
}

/* ─── Buttons ───────────────────────────────────── */
.tp-btn[b-ft277ak8jo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
    min-height: 48px;
}

.tp-btn:hover[b-ft277ak8jo] { transform: translateY(-1px); }

.tp-btn--primary[b-ft277ak8jo] {
    background: linear-gradient(135deg, #0078d4, #005fa3);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,120,212,0.35);
}

.tp-btn--primary:hover[b-ft277ak8jo] { color: #fff; }

.tp-btn--lg[b-ft277ak8jo] { padding: 1rem 2.25rem; font-size: 1.02rem; }

.tp-btn--ghost[b-ft277ak8jo] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

.tp-btn--ghost:hover[b-ft277ak8jo] { background: rgba(255,255,255,0.14); color: #fff; }

.tp-btn--bare[b-ft277ak8jo] {
    background: transparent;
    border-color: transparent;
    color: rgba(255,255,255,0.75);
}

.tp-btn--bare:hover[b-ft277ak8jo] { color: #fff; }

.tp-btn--outline[b-ft277ak8jo] {
    background: var(--adf-secondary-bg);
    border-color: var(--adf-border-light);
    color: var(--adf-text-accent);
    margin-top: 1.5rem;
}

.tp-btn--outline:hover[b-ft277ak8jo] { border-color: var(--adf-text-accent); }

.tp-btn--block[b-ft277ak8jo] { width: 100%; justify-content: center; }

/* Hero → console affordance */
.tp-hero-jump[b-ft277ak8jo] {
    margin-top: 2rem;
    background: none;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    color: rgba(255,255,255,0.8);
    padding: 0.55rem 1.4rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.tp-hero-jump:hover[b-ft277ak8jo] { background: rgba(255,255,255,0.12); color: #fff; }

/* ─── Console: rail + reading pane ──────────────────
   Fixed-height shell. The rail is always on screen and the pane scrolls
   internally, so there is never any need to scroll back up to change section.
   position:sticky is not an option: app.css sets overflow-x:hidden on
   html/body, which forces overflow-y to compute as auto and makes body a
   dead scroll container — sticky elements never activate anywhere on the site. */
.tp-console[b-ft277ak8jo] {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    background: var(--adf-primary-bg);
    border-top: 1px solid var(--adf-border-light);
    border-bottom: 1px solid var(--adf-border-light);
}

.tp-rail[b-ft277ak8jo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.25rem 0.75rem;
    overflow-y: auto;
    background: var(--adf-secondary-bg);
    border-right: 1px solid var(--adf-border-light);
}

.tp-railbtn[b-ft277ak8jo] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.8rem 0.85rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
    color: var(--adf-text-secondary);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.tp-railbtn:hover[b-ft277ak8jo] { background: var(--adf-tertiary-bg); color: var(--adf-text-primary); }

.tp-railbtn.is-active[b-ft277ak8jo] {
    background: var(--adf-tertiary-bg);
    border-left-color: var(--adf-text-accent);
    color: var(--adf-text-primary);
}

.tp-railbtn-icon[b-ft277ak8jo] { font-size: 1.05rem; line-height: 1.4; flex: 0 0 auto; }
.tp-railbtn.is-active .tp-railbtn-icon[b-ft277ak8jo] { color: var(--adf-text-accent); }

.tp-railbtn-text[b-ft277ak8jo] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tp-railbtn-label[b-ft277ak8jo] { font-size: 0.94rem; font-weight: 650; }

.tp-railbtn-blurb[b-ft277ak8jo] {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--adf-text-secondary);
    opacity: 0.85;
}

.tp-rail-foot[b-ft277ak8jo] {
    margin-top: auto;
    padding: 1.25rem 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.tp-rail-docs[b-ft277ak8jo] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--adf-text-secondary);
    text-decoration: none;
}

.tp-rail-docs:hover[b-ft277ak8jo] { color: var(--adf-text-accent); }

.tp-pane[b-ft277ak8jo] { overflow-y: auto; scroll-behavior: auto; }

/* ─── Panels ────────────────────────────────────── */
.tp-panels[b-ft277ak8jo] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.75rem 2.5rem 1rem;
}

/* ─── Pager ─────────────────────────────────────── */
.tp-pager[b-ft277ak8jo] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 2.5rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    border-top: 1px solid var(--adf-border-light);
}

.tp-pager-btn[b-ft277ak8jo] {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 56px;
    padding: 0.75rem 1.35rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    color: var(--adf-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.tp-pager-btn:hover[b-ft277ak8jo] {
    border-color: var(--adf-text-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    color: var(--adf-text-primary);
}

.tp-pager-btn .bi[b-ft277ak8jo] { font-size: 1.1rem; color: var(--adf-text-accent); }

.tp-pager-text[b-ft277ak8jo] { display: flex; flex-direction: column; gap: 0.1rem; }
.tp-pager-btn--next .tp-pager-text[b-ft277ak8jo] { text-align: right; }

.tp-pager-kicker[b-ft277ak8jo] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adf-text-secondary);
}

.tp-pager-label[b-ft277ak8jo] { font-size: 0.98rem; font-weight: 650; }

.tp-panel[b-ft277ak8jo] { animation: tp-fade-b-ft277ak8jo 0.28s ease; }

@keyframes tp-fade-b-ft277ak8jo {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.tp-panel-head[b-ft277ak8jo] { margin-bottom: 2rem; max-width: 820px; }

.tp-panel-head h2[b-ft277ak8jo] {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.tp-panel-head p[b-ft277ak8jo] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--adf-text-secondary);
}

.tp-eyebrow[b-ft277ak8jo] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--adf-text-accent);
    margin-bottom: 0.5rem;
}

.tp-subhead[b-ft277ak8jo] {
    margin: 3.5rem 0 1.75rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--adf-border-light);
    max-width: 820px;
}

.tp-subhead h3[b-ft277ak8jo] {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.tp-subhead p[b-ft277ak8jo] {
    color: var(--adf-text-secondary);
    line-height: 1.7;
}

/* ─── Card grids ────────────────────────────────── */
.tp-grid[b-ft277ak8jo] { display: grid; gap: 1.35rem; }
.tp-grid--3[b-ft277ak8jo] { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tp-grid--4[b-ft277ak8jo] { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.tp-card[b-ft277ak8jo] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.tp-card:hover[b-ft277ak8jo] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
}

.tp-card h3[b-ft277ak8jo] {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
}

.tp-card p[b-ft277ak8jo] {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
    margin: 0;
}

.tp-icon[b-ft277ak8jo] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.tp-icon--blue[b-ft277ak8jo]   { background: #e5f1fb; color: #0067b8; }
.tp-icon--purple[b-ft277ak8jo] { background: #f0e9fb; color: #6b31c9; }
.tp-icon--green[b-ft277ak8jo]  { background: #e6f4ea; color: #1e7f3c; }
.tp-icon--teal[b-ft277ak8jo]   { background: #e0f5f4; color: #067a72; }
.tp-icon--orange[b-ft277ak8jo] { background: #fff0e5; color: #d06a00; }
.tp-icon--red[b-ft277ak8jo]    { background: #fce8e8; color: #c22a1b; }

/* ─── Steps (how it works) ──────────────────────── */
.tp-steps[b-ft277ak8jo] {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    gap: 1.1rem;
    counter-reset: step;
}

.tp-step[b-ft277ak8jo] {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 3px solid var(--adf-text-accent);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
}

.tp-step-num[b-ft277ak8jo] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.tp-step h3[b-ft277ak8jo] { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }

.tp-step p[b-ft277ak8jo] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

/* ─── Demo ──────────────────────────────────────── */
.tp-demo[b-ft277ak8jo] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 2rem;
    align-items: start;
}

.tp-demo-player[b-ft277ak8jo] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--adf-border-light);
}

.tp-demo-frame[b-ft277ak8jo], .tp-demo-facade[b-ft277ak8jo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.tp-demo-facade[b-ft277ak8jo] { padding: 0; cursor: pointer; background: #000; }

.tp-demo-facade img[b-ft277ak8jo] { width: 100%; height: 100%; object-fit: cover; }

.tp-demo-play[b-ft277ak8jo] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(220,30,30,0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    transition: transform 0.2s;
}

.tp-demo-facade:hover .tp-demo-play[b-ft277ak8jo] { transform: translate(-50%, -50%) scale(1.09); }

.tp-demo-side[b-ft277ak8jo] { display: grid; gap: 1rem; }

.tp-stat[b-ft277ak8jo] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
}

.tp-stat-icon[b-ft277ak8jo] { color: var(--adf-text-accent); font-size: 1.15rem; }

.tp-stat strong[b-ft277ak8jo] { display: block; margin: 0.4rem 0 0.35rem; font-size: 0.98rem; }

.tp-stat span:last-child[b-ft277ak8jo] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--adf-text-secondary);
}

.tp-channel[b-ft277ak8jo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--adf-border-light);
    background: var(--adf-secondary-bg);
    color: var(--adf-text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 48px;
}

.tp-channel:hover[b-ft277ak8jo] { color: #c4302b; border-color: #c4302b; }

/* ─── Callouts & notes ──────────────────────────── */
.tp-callout[b-ft277ak8jo] {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    background: var(--adf-tertiary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid #f0ad4e;
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    margin-top: 1.75rem;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--adf-text-secondary);
}

.tp-callout .bi[b-ft277ak8jo] { color: #f0ad4e; font-size: 1.05rem; }
.tp-callout strong[b-ft277ak8jo] { color: var(--adf-text-primary); }

.tp-note[b-ft277ak8jo] {
    margin-top: 1.5rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--adf-text-muted, var(--adf-text-secondary));
}

/* ─── Integrations ──────────────────────────────── */
.tp-vendors[b-ft277ak8jo] { display: grid; gap: 1.75rem; }

.tp-vendor h3[b-ft277ak8jo] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--adf-text-secondary);
}

.tp-chips[b-ft277ak8jo] { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.tp-chip[b-ft277ak8jo] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.86rem;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s;
}

.tp-chip:hover[b-ft277ak8jo] { border-color: var(--adf-text-accent); color: var(--adf-text-accent); }

/* ─── Screenshots ───────────────────────────────── */
.tp-shots[b-ft277ak8jo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.35rem;
}

.tp-shot[b-ft277ak8jo] {
    display: block;
    text-align: left;
    padding: 0;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.tp-shot:hover[b-ft277ak8jo] {
    transform: translateY(-3px);
    border-color: var(--adf-text-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.tp-shot-img[b-ft277ak8jo] { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--adf-tertiary-bg); }

.tp-shot-img img[b-ft277ak8jo] { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

.tp-shot-cap[b-ft277ak8jo] {
    display: block;
    padding: 0.9rem 1.1rem 0.25rem;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--adf-text-primary);
}

.tp-shot-desc[b-ft277ak8jo] {
    display: block;
    padding: 0 1.1rem 1.1rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--adf-text-secondary);
}

/* ─── CTA ───────────────────────────────────────── */
.tp-cta[b-ft277ak8jo] {
    background: linear-gradient(135deg, #0078d4 0%, #005fa3 100%);
    color: #fff;
    padding: 3.5rem 2rem;
    text-align: center;
}

.tp-cta-inner[b-ft277ak8jo] { max-width: 820px; margin: 0 auto; }

.tp-cta h2[b-ft277ak8jo] { font-size: 1.85rem; font-weight: 700; margin-bottom: 0.7rem; }

.tp-cta p[b-ft277ak8jo] { font-size: 1rem; opacity: 0.92; margin-bottom: 1.6rem; line-height: 1.65; }

.tp-articles[b-ft277ak8jo] { margin-top: 1.75rem; font-size: 0.85rem; opacity: 0.85; }

.tp-articles a[b-ft277ak8jo] { color: #fff; text-decoration: underline; }

/* ─── Lightbox ──────────────────────────────────── */
.tp-lightbox[b-ft277ak8jo] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
}

.tp-lightbox-content[b-ft277ak8jo] { position: relative; max-width: 92vw; max-height: 90vh; }

.tp-lightbox-content img[b-ft277ak8jo] {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 8px;
    display: block;
}

.tp-lightbox-title[b-ft277ak8jo] { color: #fff; font-weight: 600; margin-bottom: 0.75rem; }

.tp-lightbox-close[b-ft277ak8jo] {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

/* ─── Dark theme ────────────────────────────────── */
[data-theme="dark"] .tp-icon--blue[b-ft277ak8jo]   { background: rgba(0,120,212,0.18);  color: #6cb8f5; }
[data-theme="dark"] .tp-icon--purple[b-ft277ak8jo] { background: rgba(107,49,201,0.18); color: #b18cf0; }
[data-theme="dark"] .tp-icon--green[b-ft277ak8jo]  { background: rgba(30,127,60,0.18);  color: #6fcf8b; }
[data-theme="dark"] .tp-icon--teal[b-ft277ak8jo]   { background: rgba(6,122,114,0.18);  color: #5fcfc6; }
[data-theme="dark"] .tp-icon--orange[b-ft277ak8jo] { background: rgba(208,106,0,0.18);  color: #f0a95c; }
[data-theme="dark"] .tp-icon--red[b-ft277ak8jo]    { background: rgba(194,42,27,0.18);  color: #f08b7f; }
[data-theme="dark"] .tp-callout[b-ft277ak8jo]      { background: rgba(240,173,78,0.08); }

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 900px) {
    .tp-demo[b-ft277ak8jo] { grid-template-columns: 1fr; }

    /* Rail folds to a horizontal strip above the pane; the pane still scrolls
       internally so the strip stays on screen. */
    .tp-console[b-ft277ak8jo] {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
    }

    .tp-rail[b-ft277ak8jo] {
        flex-direction: row;
        gap: 0.25rem;
        padding: 0 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        border-right: none;
        border-bottom: 1px solid var(--adf-border-light);
    }

    .tp-rail[b-ft277ak8jo]::-webkit-scrollbar { display: none; }

    .tp-railbtn[b-ft277ak8jo] {
        width: auto;
        flex: 0 0 auto;
        align-items: center;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        padding: 0.9rem 0.9rem;
        min-height: 52px;
    }

    .tp-railbtn.is-active[b-ft277ak8jo] { border-left-color: transparent; border-bottom-color: var(--adf-text-accent); }
    .tp-railbtn-blurb[b-ft277ak8jo] { display: none; }
    .tp-rail-foot[b-ft277ak8jo] { display: none; }
}

@media (max-width: 768px) {
    .tp-hero[b-ft277ak8jo] { padding: 2.5rem 1.25rem 2rem; }
    .tp-panels[b-ft277ak8jo] { padding: 2rem 1.25rem 1rem; }
    .tp-pager[b-ft277ak8jo] { padding: 1.25rem 1.25rem 2.5rem; flex-direction: column; }
    .tp-pager-btn[b-ft277ak8jo] { width: 100%; justify-content: space-between; }
    .tp-cta[b-ft277ak8jo] { padding: 2.5rem 1.25rem; }
    .tp-cta h2[b-ft277ak8jo] { font-size: 1.5rem; }
    .tp-btn[b-ft277ak8jo] { width: 100%; }
    .tp-cta-row[b-ft277ak8jo] { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .tp-railbtn-label[b-ft277ak8jo] { font-size: 0.86rem; }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — Privacy Policy Page Styles
   Uses --adf-* design tokens from app.css + Bootstrap
   Extends shared landing classes from Landing.razor.css
   ═══════════════════════════════════════════════════ */

/* ─── Hero (compact variant) ────────────────────── */
.privacy-hero[b-5h9sqc46ax] {
    position: relative;
    overflow: hidden;
    padding: 5rem 2rem 4rem;
    background: linear-gradient(150deg,
        #0d1117 0%,
        #0e2040 40%,
        #003a6e 100%);
    text-align: center;
    color: #fff;
}

.privacy-hero-inner[b-5h9sqc46ax] {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.privacy-effective-date[b-5h9sqc46ax] {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ─── Policy content ────────────────────────────── */
.privacy-content[b-5h9sqc46ax] {
    max-width: 860px;
}

.privacy-section[b-5h9sqc46ax] {
    display: flex;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--adf-border-light);
}

.privacy-section:last-child[b-5h9sqc46ax] {
    border-bottom: none;
}

.privacy-section-number[b-5h9sqc46ax] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.privacy-section-body[b-5h9sqc46ax] {
    flex: 1;
    min-width: 0;
}

.privacy-section-body h2[b-5h9sqc46ax] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 1rem;
}

.privacy-section-body h3[b-5h9sqc46ax] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 1.5rem 0 0.5rem;
}

.privacy-section-body h3:first-of-type[b-5h9sqc46ax] {
    margin-top: 0.5rem;
}

.privacy-section-body p[b-5h9sqc46ax] {
    font-size: 0.92rem;
    color: var(--adf-text-secondary);
    line-height: 1.75;
    margin: 0 0 0.75rem;
}

.privacy-section-body a[b-5h9sqc46ax] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.privacy-section-body a:hover[b-5h9sqc46ax] {
    text-decoration: underline;
}

/* ─── Lists ─────────────────────────────────────── */
.privacy-list[b-5h9sqc46ax] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.privacy-list li[b-5h9sqc46ax] {
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    line-height: 1.7;
    padding: 0.3rem 0 0.3rem 1.5rem;
    position: relative;
}

.privacy-list li[b-5h9sqc46ax]::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--adf-text-accent);
    font-weight: 700;
    font-size: 1rem;
}

.privacy-list li strong[b-5h9sqc46ax] {
    color: var(--adf-text-primary);
}

/* ─── Callout ───────────────────────────────────── */
.privacy-callout[b-5h9sqc46ax] {
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    display: flex;
    align-items: flex-start;
    margin: 1rem 0;
}

.privacy-callout .bi[b-5h9sqc46ax] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.privacy-callout strong[b-5h9sqc46ax] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--adf-text-primary);
}

.privacy-callout--positive[b-5h9sqc46ax] {
    background: #e3f5e1;
    border: 1px solid #b7e0b4;
    color: #1a5c1a;
}

.privacy-callout--positive .bi[b-5h9sqc46ax] {
    color: #107c10;
}

/* ─── Rights grid ───────────────────────────────── */
.privacy-rights-grid[b-5h9sqc46ax] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.privacy-right-card[b-5h9sqc46ax] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.privacy-right-card:hover[b-5h9sqc46ax] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.privacy-right-icon[b-5h9sqc46ax] {
    color: var(--adf-text-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.privacy-right-card strong[b-5h9sqc46ax] {
    display: block;
    font-size: 0.88rem;
    color: var(--adf-text-primary);
    margin-bottom: 0.15rem;
}

.privacy-right-card span[b-5h9sqc46ax] {
    font-size: 0.82rem;
    color: var(--adf-text-secondary);
    line-height: 1.45;
}

/* ─── Contact card ──────────────────────────────── */
.privacy-contact-card[b-5h9sqc46ax] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 0.75rem;
}

.privacy-contact-row[b-5h9sqc46ax] {
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    padding: 0.4rem 0;
    color: var(--adf-text-primary);
}

.privacy-contact-row .bi[b-5h9sqc46ax] {
    color: var(--adf-text-accent);
}

.privacy-contact-row a[b-5h9sqc46ax] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.privacy-contact-row a:hover[b-5h9sqc46ax] {
    text-decoration: underline;
}

/* ─── Dark mode overrides ───────────────────────── */
[data-theme="dark"] .privacy-callout--positive[b-5h9sqc46ax] {
    background: rgba(106,153,85,0.1);
    border-color: rgba(106,153,85,0.2);
    color: #b8e0b8;
}

[data-theme="dark"] .privacy-callout--positive .bi[b-5h9sqc46ax] {
    color: #6a9955;
}

[data-theme="dark"] .privacy-right-card[b-5h9sqc46ax] {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .privacy-contact-card[b-5h9sqc46ax] {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .privacy-section[b-5h9sqc46ax] {
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .privacy-hero[b-5h9sqc46ax] {
        padding: 3.5rem 1.5rem 3rem;
    }

    .privacy-section[b-5h9sqc46ax] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .privacy-section-number[b-5h9sqc46ax] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .privacy-rights-grid[b-5h9sqc46ax] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/RecycleBin/RecycleBin.razor.rz.scp.css */
/* ── Recycle Bin / Recovery screen ── */

.recycle-bin-page[b-nbg0xikmru] {
    color: var(--adf-text-primary);
    padding: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.dashboard-header[b-nbg0xikmru] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-header h2[b-nbg0xikmru] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.dashboard-header h2 i[b-nbg0xikmru] {
    color: var(--adf-text-accent);
}

/* Explainer card */
.explainer-card[b-nbg0xikmru] {
    display: flex;
    gap: 1rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid var(--adf-text-accent);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.explainer-icon[b-nbg0xikmru] {
    font-size: 1.5rem;
    color: var(--adf-text-accent);
    line-height: 1.2;
    flex-shrink: 0;
}

.explainer-body h3[b-nbg0xikmru] {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--adf-text-primary);
}

.explainer-body p[b-nbg0xikmru] {
    margin: 0 0 0.65rem;
    color: var(--adf-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.explainer-limits-title[b-nbg0xikmru] {
    font-weight: 600;
    color: var(--adf-text-primary) !important;
    margin-bottom: 0.35rem !important;
}

.explainer-limits-title i[b-nbg0xikmru] {
    color: var(--adf-warning, #e0a800);
}

.explainer-limits[b-nbg0xikmru] {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--adf-text-secondary);
    font-size: 0.9125rem;
    line-height: 1.5;
}

.explainer-limits li[b-nbg0xikmru] {
    margin-bottom: 0.3rem;
}

/* Just-restored banner */
.recovery-banner[b-nbg0xikmru] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.recovery-open-link[b-nbg0xikmru] {
    font-weight: 600;
    margin-left: 0.25rem;
    text-decoration: none;
    white-space: nowrap;
}

.recovery-open-link:hover[b-nbg0xikmru],
.recovery-open-link:focus[b-nbg0xikmru] {
    text-decoration: underline;
}

/* Loading & empty states */
.loading-container[b-nbg0xikmru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.empty-state[b-nbg0xikmru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    text-align: center;
    color: var(--adf-text-secondary);
    background: var(--adf-secondary-bg);
    border: 1px dashed var(--adf-border-medium);
    border-radius: 8px;
    padding: 2rem;
}

.empty-state .empty-icon[b-nbg0xikmru] {
    font-size: 2.5rem;
    color: var(--adf-text-secondary);
    opacity: 0.6;
    margin-bottom: 0.75rem;
}

.empty-state h4[b-nbg0xikmru] {
    color: var(--adf-text-primary);
    margin-bottom: 0.35rem;
}

.empty-state p[b-nbg0xikmru] {
    margin: 0;
    font-size: 0.9375rem;
}

/* Summary line */
.recycle-summary[b-nbg0xikmru] {
    margin-bottom: 0.6rem;
}

.recycle-count[b-nbg0xikmru] {
    font-size: 0.8125rem;
    color: var(--adf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Table */
.recycle-table-container[b-nbg0xikmru] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    overflow-x: auto;
}

.recycle-table[b-nbg0xikmru] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.recycle-table thead[b-nbg0xikmru] {
    background: var(--adf-primary-bg);
    border-bottom: 2px solid var(--adf-border-light);
}

.recycle-table th[b-nbg0xikmru] {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--adf-text-secondary);
    white-space: nowrap;
}

.recycle-table td[b-nbg0xikmru] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--adf-border-light);
    vertical-align: middle;
}

.recycle-table tbody tr:last-child td[b-nbg0xikmru] {
    border-bottom: none;
}

.recycle-table tbody tr:hover[b-nbg0xikmru] {
    background: var(--adf-hover-bg);
}

.type-cell[b-nbg0xikmru] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.type-icon[b-nbg0xikmru] {
    color: var(--adf-text-accent);
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
}

.type-label[b-nbg0xikmru] {
    color: var(--adf-text-secondary);
    white-space: nowrap;
}

.item-name[b-nbg0xikmru] {
    font-weight: 500;
    color: var(--adf-text-primary);
    word-break: break-word;
}

.actions-col[b-nbg0xikmru] {
    width: 9rem;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .recycle-bin-page[b-nbg0xikmru] {
        padding: 1rem;
    }

    .recycle-table[b-nbg0xikmru] {
        font-size: 0.8125rem;
    }

    .recycle-table th[b-nbg0xikmru],
    .recycle-table td[b-nbg0xikmru] {
        padding: 0.625rem 0.5rem;
    }

    .explainer-card[b-nbg0xikmru] {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }
}
/* /Components/Pages/Settings/OrganisationSettings.razor.rz.scp.css */
.settings-page[b-xz97yjqmpt] {
    padding: 24px 28px;
    max-width: 860px;
}

.settings-header[b-xz97yjqmpt] {
    margin-bottom: 20px;
}

.settings-title[b-xz97yjqmpt] {
    font-size: var(--adf-font-size-xl);
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 4px 0;
}

.settings-subtitle[b-xz97yjqmpt] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    margin: 0;
}

.settings-loading[b-xz97yjqmpt] {
    display: flex;
    align-items: center;
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    padding: 20px 0;
}

.settings-card[b-xz97yjqmpt] {
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    background-color: var(--adf-primary-bg);
    padding: 20px 22px;
}

.settings-card-error[b-xz97yjqmpt] {
    color: var(--adf-text-danger, #b3261e);
}

.settings-card-header[b-xz97yjqmpt] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.settings-card-icon[b-xz97yjqmpt] {
    color: var(--adf-text-accent);
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.settings-card-title[b-xz97yjqmpt] {
    font-size: var(--adf-font-size-md);
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 6px 0;
}

.settings-card-description[b-xz97yjqmpt] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.settings-toggle-row[b-xz97yjqmpt] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0 4px 0;
    border-top: 1px solid var(--adf-border-light);
}

.settings-toggle-text[b-xz97yjqmpt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-toggle-text strong[b-xz97yjqmpt] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-primary);
}

.settings-toggle-text span[b-xz97yjqmpt] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-secondary);
    line-height: 1.6;
}

.settings-card-footnote[b-xz97yjqmpt] {
    font-size: 0.72rem;
    color: var(--adf-text-muted);
    margin: 16px 0 0 0;
}

.settings-card-footnote a[b-xz97yjqmpt] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.settings-card-footnote a:hover[b-xz97yjqmpt] {
    text-decoration: underline;
}

/* ── Switch ────────────────────────────────────────────────────────── */
.settings-switch[b-xz97yjqmpt] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.settings-switch input[b-xz97yjqmpt] {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-slider[b-xz97yjqmpt] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--adf-border-light);
    border-radius: 24px;
    transition: background-color 0.15s ease;
}

.settings-switch-slider[b-xz97yjqmpt]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--adf-primary-bg);
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.settings-switch input:checked + .settings-switch-slider[b-xz97yjqmpt] {
    background-color: var(--adf-text-accent);
}

.settings-switch input:checked + .settings-switch-slider[b-xz97yjqmpt]::before {
    transform: translateX(18px);
}

.settings-switch input:disabled + .settings-switch-slider[b-xz97yjqmpt] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Setup/Setup.razor.rz.scp.css */
/* Setup Page Layout - ADF IDE Style */
.setup-layout[b-4mnrd635ih] {
    display: grid;
    grid-template-columns: var(--adf-nav-width) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "nav-pane editor-pane";
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: var(--adf-primary-bg);
    isolation: isolate; /* Create stacking context without affecting fixed positioning */
    gap: 0; /* Ensure no gap between grid items */
    /* Smooth collapse/expand of the setup nav pane, matching the main sidebar */
    transition: grid-template-columns 0.3s ease;
}

/* When Copilot is pinned, add a third column on the right */
.setup-layout.copilot-pinned[b-4mnrd635ih] {
    grid-template-columns: var(--adf-nav-width) 1fr auto;
    grid-template-areas: "nav-pane editor-pane copilot-pane";
}

/* ── Collapsed nav pane: narrows to icon-strip (desktop only, overridden on mobile) ── */
.setup-layout.setup-nav-collapsed[b-4mnrd635ih] {
    grid-template-columns: var(--adf-nav-width-collapsed) 1fr;
}

.setup-layout.setup-nav-collapsed.copilot-pinned[b-4mnrd635ih] {
    grid-template-columns: var(--adf-nav-width-collapsed) 1fr auto;
}

/* nav-pane overflow hidden when collapsed so content doesn't bleed out */
.nav-pane.nav-pane-collapsed[b-4mnrd635ih] {
    overflow: hidden;
}

.copilot-pane[b-4mnrd635ih] {
    grid-area: copilot-pane;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 1px solid var(--adf-border-light);
    z-index: 100;
}

/* Inline loading state shown while entities are being fetched */
.setup-loading-state[b-4mnrd635ih] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--adf-spacing-md, 12px);
    padding: var(--adf-spacing-xxl, 48px);
    color: var(--adf-text-muted, #6c757d);
}

.setup-loading-text[b-4mnrd635ih] {
    font-size: var(--adf-font-size-base, 14px);
    font-weight: 500;
}

/* Navigation Pane */
.nav-pane[b-4mnrd635ih] {
    grid-area: nav-pane;
    background-color: var(--adf-nav-bg);
    border-right: 1px solid var(--adf-nav-border);
    overflow-y: auto;
    overflow-x: visible; /* Allow dropdowns to extend beyond nav pane */
    display: flex;
    flex-direction: column;
    z-index: 100; /* Higher than editor pane */
    position: relative; /* Ensure dropdowns position correctly */
}

/* Editor Pane */
.editor-pane[b-4mnrd635ih] {
    grid-area: editor-pane;
    background-color: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    overflow: hidden;
    z-index: 150; /* Higher than nav pane (100) so modals inside editor appear above nav */
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: var(--adf-spacing-sm); /* Add left padding to create visual separation from nav pane */
}

/* ── Mobile navigation toggle bar ──────────────────────────────────────── */
.mobile-nav-toggle-bar[b-4mnrd635ih] {
    display: none; /* Hidden on desktop */
}

/* ── Mobile navigation backdrop ────────────────────────────────────────── */
.mobile-nav-backdrop[b-4mnrd635ih] {
    display: none; /* Hidden on desktop */
}

/* Remove any potential conflicting log-pane styles */
.log-pane[b-4mnrd635ih] {
    display: none; /* Hide log pane for now or implement if needed */
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE – Tablet (≤ 1024px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .setup-layout[b-4mnrd635ih] {
        grid-template-columns: 220px 1fr;
    }

    .setup-layout.copilot-pinned[b-4mnrd635ih] {
        grid-template-columns: 220px 1fr auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE – Mobile (≤ 768px)
   Mirrors the Monitor page pattern: nav becomes a slide-over overlay
   toggled by a persistent top bar button.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .setup-layout[b-4mnrd635ih] {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
        grid-template-rows: unset;
        grid-template-areas: unset;
        height: 100vh;
        max-height: 100vh;
        position: relative;
    }

    /* Copilot pinned is not supported on mobile – revert to floating */
    .setup-layout.copilot-pinned[b-4mnrd635ih] {
        grid-template-columns: unset;
        grid-template-areas: unset;
    }

    .copilot-pane[b-4mnrd635ih] {
        display: none;
    }

    /* ── Toggle bar ── */
    .mobile-nav-toggle-bar[b-4mnrd635ih] {
        display: flex;
        align-items: center;
        background-color: var(--adf-secondary-bg);
        border-bottom: 1px solid var(--adf-border-light);
        padding: 0.5rem 0.75rem;
        flex-shrink: 0;
        z-index: 200;
    }

    .mobile-nav-toggle-btn[b-4mnrd635ih] {
        /* Matches main NavMenu .top-row .btn style exactly */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--adf-secondary-bg);
        border: 1px solid var(--adf-border-medium);
        color: var(--adf-text-primary);
        font-size: var(--adf-font-size-sm);
        padding: var(--adf-spacing-xs) var(--adf-spacing-sm);
        border-radius: 4px;
        transition: all 0.2s ease;
        cursor: pointer;
        min-height: 44px; /* WCAG touch target */
        min-width: 44px;
    }

    .mobile-nav-toggle-btn:hover[b-4mnrd635ih],
    .mobile-nav-toggle-btn:active[b-4mnrd635ih] {
        background-color: var(--adf-hover-bg);
        border-color: var(--adf-border-dark);
    }

    .mobile-nav-toggle-btn .expand-icon[b-4mnrd635ih] {
        font-size: 0.75rem;
        font-weight: bold;
    }

    /* ── Backdrop ── */
    .mobile-nav-backdrop[b-4mnrd635ih] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 299;
        animation: fadeIn-b-4mnrd635ih 0.2s ease;
    }

    /* ── Nav pane: slide-over overlay ── */
    .nav-pane[b-4mnrd635ih] {
        position: fixed;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid var(--adf-nav-border);
        box-shadow: var(--adf-shadow-lg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-pane.mobile-open[b-4mnrd635ih] {
        transform: translateX(0);
    }

    /* ── Editor pane fills remaining space ── */
    .editor-pane[b-4mnrd635ih] {
        flex: 1;
        min-height: 0;
        padding-left: 0;
        overflow: hidden;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE – Small mobile (≤ 480px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .nav-pane[b-4mnrd635ih] {
        width: 90vw;
        max-width: none;
    }

    .mobile-nav-toggle-btn[b-4mnrd635ih] {
        padding: var(--adf-spacing-xs);
    }
}

@keyframes fadeIn-b-4mnrd635ih {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — Support Page Styles
   Uses --adf-* design tokens from app.css + Bootstrap
   Extends shared landing classes from Landing.razor.css
   ═══════════════════════════════════════════════════ */

/* ─── Hero (compact variant) ────────────────────── */
.support-hero[b-faa7rcyw2w] {
    position: relative;
    overflow: hidden;
    padding: 5rem 2rem 4rem;
    background: linear-gradient(150deg,
        #0d1117 0%,
        #0e2040 40%,
        #003a6e 100%);
    text-align: center;
    color: #fff;
}

.support-hero-inner[b-faa7rcyw2w] {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

/* ─── Support cards ─────────────────────────────── */
.support-card[b-faa7rcyw2w] {
    display: flex;
    flex-direction: column;
}

.support-link[b-faa7rcyw2w] {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--adf-text-accent);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: color 0.2s;
}

.support-link:hover[b-faa7rcyw2w] {
    color: var(--adf-hover-accent, #005fa3);
    text-decoration: underline;
}

/* ─── FAQ ────────────────────────────────────────── */
.support-faq-list[b-faa7rcyw2w] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.support-faq-item[b-faa7rcyw2w] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.support-faq-item:hover[b-faa7rcyw2w] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.support-faq-item h4[b-faa7rcyw2w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: flex-start;
}

.support-faq-icon[b-faa7rcyw2w] {
    color: var(--adf-text-accent);
    font-size: 0.8rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.support-faq-item p[b-faa7rcyw2w] {
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    line-height: 1.7;
    margin: 0;
    padding-left: 1.5rem;
}

.support-faq-item a[b-faa7rcyw2w] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.support-faq-item a:hover[b-faa7rcyw2w] {
    text-decoration: underline;
}

/* ─── SLA grid ──────────────────────────────────── */
.support-sla-grid[b-faa7rcyw2w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.support-sla-card[b-faa7rcyw2w] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 12px;
    padding: 1.75rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.support-sla-card:hover[b-faa7rcyw2w] {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.support-sla-severity[b-faa7rcyw2w] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.3rem 0.9rem;
    border-radius: 100px;
    margin-bottom: 0.75rem;
}

.support-sla-severity--critical[b-faa7rcyw2w] {
    background: #fce8e8;
    color: #c22a1b;
}

.support-sla-severity--high[b-faa7rcyw2w] {
    background: #fff0e5;
    color: #d06a00;
}

.support-sla-severity--medium[b-faa7rcyw2w] {
    background: #e5f3ff;
    color: #0078d4;
}

.support-sla-severity--low[b-faa7rcyw2w] {
    background: #e3f5e1;
    color: #107c10;
}

.support-sla-time[b-faa7rcyw2w] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--adf-text-primary);
    margin-bottom: 0.5rem;
}

.support-sla-card p[b-faa7rcyw2w] {
    font-size: 0.85rem;
    color: var(--adf-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ─── Dark mode overrides ───────────────────────── */
[data-theme="dark"] .support-faq-item[b-faa7rcyw2w] {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .support-sla-card[b-faa7rcyw2w] {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .support-sla-severity--critical[b-faa7rcyw2w] {
    background: rgba(244,135,113,0.15);
    color: #f48771;
}

[data-theme="dark"] .support-sla-severity--high[b-faa7rcyw2w] {
    background: rgba(255,184,108,0.15);
    color: #ffb86c;
}

[data-theme="dark"] .support-sla-severity--medium[b-faa7rcyw2w] {
    background: rgba(79,195,247,0.15);
    color: #4fc3f7;
}

[data-theme="dark"] .support-sla-severity--low[b-faa7rcyw2w] {
    background: rgba(106,153,85,0.15);
    color: #6a9955;
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .support-hero[b-faa7rcyw2w] {
        padding: 3.5rem 1.5rem 3rem;
    }

    .support-sla-grid[b-faa7rcyw2w] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .support-sla-grid[b-faa7rcyw2w] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   Polysync — Terms of Use Page Styles
   Uses --adf-* design tokens from app.css + Bootstrap
   Extends shared landing classes from Landing.razor.css
   ═══════════════════════════════════════════════════ */

/* ─── Hero (compact variant) ────────────────────── */
.terms-hero[b-vs9wtpkxuy] {
    position: relative;
    overflow: hidden;
    padding: 5rem 2rem 4rem;
    background: linear-gradient(150deg,
        #0d1117 0%,
        #0e2040 40%,
        #003a6e 100%);
    text-align: center;
    color: #fff;
}

.terms-hero-inner[b-vs9wtpkxuy] {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.terms-effective-date[b-vs9wtpkxuy] {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ─── Intro callout ─────────────────────────────── */
.terms-intro-callout[b-vs9wtpkxuy] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-left: 4px solid var(--adf-text-accent);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--adf-text-secondary);
}

.terms-intro-callout .bi[b-vs9wtpkxuy] {
    color: var(--adf-text-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.terms-intro-callout strong[b-vs9wtpkxuy] {
    display: block;
    color: var(--adf-text-primary);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

/* ─── Terms content ─────────────────────────────── */
.terms-content[b-vs9wtpkxuy] {
    max-width: 860px;
}

.terms-section[b-vs9wtpkxuy] {
    display: flex;
    gap: 1.5rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--adf-border-light);
}

.terms-section:last-child[b-vs9wtpkxuy] {
    border-bottom: none;
}

.terms-section-number[b-vs9wtpkxuy] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--adf-text-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.terms-section-body[b-vs9wtpkxuy] {
    flex: 1;
    min-width: 0;
}

.terms-section-body h2[b-vs9wtpkxuy] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 0 0 1rem;
}

.terms-section-body h3[b-vs9wtpkxuy] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--adf-text-primary);
    margin: 1.5rem 0 0.5rem;
}

.terms-section-body h3:first-of-type[b-vs9wtpkxuy] {
    margin-top: 0.5rem;
}

.terms-section-body p[b-vs9wtpkxuy] {
    font-size: 0.92rem;
    color: var(--adf-text-secondary);
    line-height: 1.75;
    margin: 0 0 0.75rem;
}

.terms-section-body a[b-vs9wtpkxuy] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.terms-section-body a:hover[b-vs9wtpkxuy] {
    text-decoration: underline;
}

/* ─── Lists ─────────────────────────────────────── */
.terms-list[b-vs9wtpkxuy] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.terms-list li[b-vs9wtpkxuy] {
    font-size: 0.9rem;
    color: var(--adf-text-secondary);
    line-height: 1.7;
    padding: 0.3rem 0 0.3rem 1.5rem;
    position: relative;
}

.terms-list li[b-vs9wtpkxuy]::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--adf-text-accent);
    font-weight: 700;
    font-size: 1rem;
}

.terms-list li strong[b-vs9wtpkxuy] {
    color: var(--adf-text-primary);
}

/* ─── Callouts ──────────────────────────────────── */
.terms-callout[b-vs9wtpkxuy] {
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    font-size: 0.9rem;
    line-height: 1.65;
    display: flex;
    align-items: flex-start;
    margin: 1rem 0;
}

.terms-callout .bi[b-vs9wtpkxuy] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.terms-callout strong[b-vs9wtpkxuy] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--adf-text-primary);
}

.terms-callout--positive[b-vs9wtpkxuy] {
    background: #e3f5e1;
    border: 1px solid #b7e0b4;
    color: #1a5c1a;
}

.terms-callout--positive .bi[b-vs9wtpkxuy] {
    color: #107c10;
}

.terms-callout--warning[b-vs9wtpkxuy] {
    background: #fff4ce;
    border: 1px solid #f5d56a;
    color: #6b4c00;
}

.terms-callout--warning .bi[b-vs9wtpkxuy] {
    color: #d08700;
}

/* ─── Contact card ──────────────────────────────── */
.terms-contact-card[b-vs9wtpkxuy] {
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 0.75rem;
}

.terms-contact-row[b-vs9wtpkxuy] {
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    padding: 0.4rem 0;
    color: var(--adf-text-primary);
}

.terms-contact-row .bi[b-vs9wtpkxuy] {
    color: var(--adf-text-accent);
}

.terms-contact-row a[b-vs9wtpkxuy] {
    color: var(--adf-text-accent);
    text-decoration: none;
}

.terms-contact-row a:hover[b-vs9wtpkxuy] {
    text-decoration: underline;
}

/* ─── Active footer link ────────────────────────── */
.landing-footer-link--active[b-vs9wtpkxuy] {
    color: var(--adf-text-accent) !important;
    font-weight: 600;
}

/* ─── Dark mode overrides ───────────────────────── */
[data-theme="dark"] .terms-intro-callout[b-vs9wtpkxuy] {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
    border-left-color: var(--adf-text-accent);
}

[data-theme="dark"] .terms-callout--positive[b-vs9wtpkxuy] {
    background: rgba(106,153,85,0.1);
    border-color: rgba(106,153,85,0.2);
    color: #b8e0b8;
}

[data-theme="dark"] .terms-callout--positive .bi[b-vs9wtpkxuy] {
    color: #6a9955;
}

[data-theme="dark"] .terms-callout--warning[b-vs9wtpkxuy] {
    background: rgba(210,160,50,0.1);
    border-color: rgba(210,160,50,0.25);
    color: #f5d56a;
}

[data-theme="dark"] .terms-callout--warning .bi[b-vs9wtpkxuy] {
    color: #d4aa45;
}

[data-theme="dark"] .terms-contact-card[b-vs9wtpkxuy] {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .terms-section[b-vs9wtpkxuy] {
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ─── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .terms-hero[b-vs9wtpkxuy] {
        padding: 3.5rem 1.5rem 3rem;
    }

    .terms-section[b-vs9wtpkxuy] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .terms-section-number[b-vs9wtpkxuy] {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .terms-intro-callout[b-vs9wtpkxuy] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Users/Users.razor.rz.scp.css */
/* ── Users Page Layout ── */

.users-page[b-cjujnqmav0] {
    height: calc(100vh - var(--adf-header-height));
    overflow-y: auto;
    padding: 2rem;
    background: var(--adf-primary-bg);
}
/* /Components/Shared/ConfirmationDialog.razor.rz.scp.css */
/* Confirmation Dialog - ADF IDE Style */
.confirmation-dialog-backdrop[b-0mh76p56or] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--adf-z-modal);
    backdrop-filter: blur(2px);
    animation: fadeIn-b-0mh76p56or 0.2s ease-out;
}

.confirmation-dialog[b-0mh76p56or] {
    background-color: var(--adf-primary-bg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 8px;
    box-shadow: var(--adf-shadow-xl);
    max-width: 480px;
    min-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn-b-0mh76p56or 0.3s ease-out;
    font-family: var(--adf-font-family);
}

.confirmation-dialog-header[b-0mh76p56or] {
    padding: var(--adf-spacing-lg) var(--adf-spacing-xl);
    border-bottom: 1px solid var(--adf-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--adf-secondary-bg);
}

.confirmation-dialog-title[b-0mh76p56or] {
    margin: 0;
    font-size: var(--adf-font-size-lg);
    font-weight: 600;
    color: var(--adf-text-primary);
}

.confirmation-dialog-close[b-0mh76p56or] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--adf-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.confirmation-dialog-close:hover[b-0mh76p56or] {
    background-color: var(--adf-hover-bg);
    color: var(--adf-text-primary);
}

.confirmation-dialog-close:focus[b-0mh76p56or] {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: -2px;
}

.confirmation-dialog-body[b-0mh76p56or] {
    padding: var(--adf-spacing-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--adf-spacing-lg);
}

.confirmation-dialog-icon[b-0mh76p56or] {
    flex-shrink: 0;
    font-size: 2rem;
    margin-top: var(--adf-spacing-xs);
}

.confirmation-dialog-icon .fa[b-0mh76p56or] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation-dialog-message[b-0mh76p56or] {
    flex: 1;
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-base);
    line-height: 1.5;
}

/* Blocked-deletion list: dependent objects rendered as links that open in a new tab. */
.confirmation-dialog-message .deletion-blocker-list[b-0mh76p56or] {
    margin: var(--adf-spacing-md) 0 0;
    padding-left: var(--adf-spacing-lg);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--adf-spacing-xs);
}

.confirmation-dialog-message .deletion-blocker-list li[b-0mh76p56or] {
    word-break: break-word;
}

.confirmation-dialog-message .deletion-blocker-list a[b-0mh76p56or] {
    color: var(--adf-text-accent, #0d6efd);
    text-decoration: none;
}

.confirmation-dialog-message .deletion-blocker-list a:hover[b-0mh76p56or],
.confirmation-dialog-message .deletion-blocker-list a:focus[b-0mh76p56or] {
    text-decoration: underline;
}

.confirmation-dialog-footer[b-0mh76p56or] {
    padding: var(--adf-spacing-lg) var(--adf-spacing-xl);
    border-top: 1px solid var(--adf-border-light);
    display: flex;
    gap: var(--adf-spacing-md);
    justify-content: flex-end;
    background-color: var(--adf-accent-bg);
}

.confirmation-dialog-footer .btn[b-0mh76p56or] {
    min-width: 80px;
    padding: var(--adf-spacing-sm) var(--adf-spacing-lg);
    font-size: var(--adf-font-size-sm);
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--adf-spacing-xs);
}

.confirmation-dialog-footer .btn-primary[b-0mh76p56or] {
    background-color: var(--adf-text-accent);
    border-color: var(--adf-text-accent);
    color: white;
}

.confirmation-dialog-footer .btn-primary:hover[b-0mh76p56or] {
    background-color: var(--adf-hover-accent);
    border-color: var(--adf-hover-accent);
    transform: translateY(-1px);
    box-shadow: var(--adf-shadow-md);
}

.confirmation-dialog-footer .btn-secondary[b-0mh76p56or] {
    background-color: var(--adf-secondary-bg);
    border-color: var(--adf-border-medium);
    color: var(--adf-text-primary);
}

.confirmation-dialog-footer .btn-secondary:hover[b-0mh76p56or] {
    background-color: var(--adf-hover-bg);
    border-color: var(--adf-border-medium);
    color: var(--adf-text-primary);
}

.confirmation-dialog-footer .btn-outline-danger[b-0mh76p56or] {
    background-color: transparent;
    border-color: var(--adf-error);
    color: var(--adf-error);
}

.confirmation-dialog-footer .btn-outline-danger:hover[b-0mh76p56or] {
    background-color: var(--adf-error);
    border-color: var(--adf-error);
    color: white;
}

.confirmation-dialog-footer .btn:focus[b-0mh76p56or] {
    outline: 2px solid var(--adf-focus-border);
    outline-offset: 2px;
}

/* Text color utilities for icons */
.text-warning[b-0mh76p56or] {
    color: var(--adf-warning) !important;
}

.text-info[b-0mh76p56or] {
    color: var(--adf-info) !important;
}

.text-danger[b-0mh76p56or] {
    color: var(--adf-error) !important;
}

.text-primary[b-0mh76p56or] {
    color: var(--adf-text-accent) !important;
}

/* Animations */
@keyframes fadeIn-b-0mh76p56or {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-0mh76p56or {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .confirmation-dialog[b-0mh76p56or] {
        min-width: 280px;
        margin: var(--adf-spacing-md);
    }
    
    .confirmation-dialog-body[b-0mh76p56or] {
        padding: var(--adf-spacing-lg);
        flex-direction: column;
        gap: var(--adf-spacing-md);
    }
    
    .confirmation-dialog-icon[b-0mh76p56or] {
        align-self: center;
        margin-top: 0;
    }
    
    .confirmation-dialog-footer[b-0mh76p56or] {
        flex-direction: column-reverse;
        gap: var(--adf-spacing-sm);
    }
    
    .confirmation-dialog-footer .btn[b-0mh76p56or] {
        width: 100%;
        justify-content: center;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .confirmation-dialog[b-0mh76p56or] {
        border-width: 2px;
    }
    
    .confirmation-dialog-footer .btn[b-0mh76p56or] {
        border-width: 2px;
        font-weight: 600;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .confirmation-dialog-backdrop[b-0mh76p56or],
    .confirmation-dialog[b-0mh76p56or],
    .confirmation-dialog-footer .btn[b-0mh76p56or] {
        animation: none;
        transition: none;
    }
    
    .confirmation-dialog-footer .btn:hover[b-0mh76p56or] {
        transform: none;
    }
}
/* /Components/Shared/EditorDocHint.razor.rz.scp.css */
/* ================================================
   EDITOR DOC HINT — contextual wiki hint strip
   ================================================
   Placed below type dropdowns (General tab) and
   above attribute editors (Settings tab).
   Intentionally subtle: no strong border box,
   just a left-accent strip with muted text.
   ================================================ */

.editor-doc-hint[b-twnvv8usra] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.45rem 0.75rem;
    margin-top: 0.65rem;
    margin-bottom: 0.1rem;
    background-color: var(--bs-info-bg-subtle);
    border-left: 3px solid var(--bs-info-border-subtle);
    border-radius: 0 4px 4px 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Type-level row: icon · summary · link */
.hint-type-row[b-twnvv8usra] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.35rem;
    color: var(--bs-secondary-color);
}

.hint-icon[b-twnvv8usra] {
    color: var(--bs-info-text-emphasis);
    opacity: 0.8;
    flex-shrink: 0;
    font-size: 0.85em;
    align-self: center;
}

.hint-summary[b-twnvv8usra] {
    color: var(--bs-secondary-color);
}

.hint-summary[b-twnvv8usra]::after {
    content: " ·";
    color: var(--bs-border-color);
    margin-right: 0.1rem;
}

.hint-link[b-twnvv8usra] {
    color: var(--bs-info-text-emphasis);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.hint-link:hover[b-twnvv8usra] {
    text-decoration: underline;
}

/* Auth-method row: optional separator when stacked below type row */
.hint-auth-row[b-twnvv8usra] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem 0.3rem;
    padding-top: 0.3rem;
    margin-top: 0.3rem;
    border-top: 1px solid var(--bs-info-border-subtle);
    color: var(--bs-secondary-color);
    font-size: 0.9375em;
}

/* When the auth row is the only content, skip the top border */
.hint-auth-row.no-border[b-twnvv8usra] {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.hint-auth-icon[b-twnvv8usra] {
    color: var(--bs-info-text-emphasis);
    opacity: 0.75;
    flex-shrink: 0;
    font-size: 0.8em;
}

/* Recommended badge */
.hint-recommended-badge[b-twnvv8usra] {
    display: inline-flex;
    align-items: center;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-border-subtle);
    padding: 0.05em 0.45em;
    border-radius: 10px;
    white-space: nowrap;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.ps-empty-state[b-dqd1q6d6ji] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 0.75rem;
}

.ps-empty-state-icon[b-dqd1q6d6ji] {
    font-size: 3rem;
    line-height: 1;
    color: var(--adf-text-muted);
}

.ps-empty-state-title[b-dqd1q6d6ji] {
    margin: 0;
    font-size: var(--adf-font-size-xl);
    font-weight: 600;
    color: var(--adf-text-primary);
}

.ps-empty-state-description[b-dqd1q6d6ji] {
    margin: 0;
    max-width: 36rem;
    color: var(--adf-text-secondary);
}

.ps-empty-state-action[b-dqd1q6d6ji] {
    margin-top: 0.5rem;
}

.ps-empty-state-hints[b-dqd1q6d6ji] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--adf-text-muted);
    font-size: var(--adf-font-size-sm);
}
/* /Components/Shared/HelpButton.razor.rz.scp.css */
.help-button[b-etzj97nr66] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-color: var(--adf-border-color);
    color: var(--adf-text-secondary);
    background-color: transparent;
    transition: all 0.2s ease;
}

.help-button:hover[b-etzj97nr66] {
    background-color: var(--adf-accent-blue);
    border-color: var(--adf-accent-blue);
    color: white;
}

.help-button:focus[b-etzj97nr66] {
    box-shadow: 0 0 0 0.2rem rgba(0, 120, 212, 0.25);
}

.help-button i[b-etzj97nr66] {
    font-size: 1rem;
}

/* Dark mode adjustments */
:global(body.dark-mode) .help-button[b-etzj97nr66] {
    border-color: var(--adf-border-light);
    color: var(--adf-text-tertiary);
}

:global(body.dark-mode) .help-button:hover[b-etzj97nr66] {
    background-color: var(--adf-accent-blue);
    border-color: var(--adf-accent-blue);
    color: white;
}
/* /Components/Shared/IconDropdown.razor.rz.scp.css */
.icon-dropdown-wrapper[b-1vbyu7zp1o] {
    position: relative;
    width: 100%;
}

.icon-dropdown-trigger[b-1vbyu7zp1o] {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    cursor: pointer;
    min-height: 38px;
    position: relative;
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.icon-dropdown-trigger:hover:not(.disabled)[b-1vbyu7zp1o] {
    border-color: var(--adf-text-accent);
}

.icon-dropdown-trigger:focus-within[b-1vbyu7zp1o] {
    border-color: var(--adf-focus-border);
    box-shadow: var(--adf-focus-shadow);
    outline: none;
}

.icon-dropdown-trigger.disabled[b-1vbyu7zp1o] {
    background-color: var(--adf-tertiary-bg);
    opacity: 0.6;
    cursor: not-allowed;
}

.icon-dropdown-trigger .dropdown-placeholder[b-1vbyu7zp1o] {
    color: var(--text-muted);
}

.icon-dropdown-trigger .dropdown-arrow[b-1vbyu7zp1o] {
    position: absolute;
    right: 12px;
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-primary);
}

.icon-dropdown-options[b-1vbyu7zp1o] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-medium);
    border-radius: 4px;
    max-height: 300px;
    z-index: var(--adf-z-dropdown);
    box-shadow: var(--adf-shadow-md);
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.icon-dropdown-search[b-1vbyu7zp1o] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--adf-border-light);
    background-color: var(--adf-secondary-bg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.icon-dropdown-search .search-icon[b-1vbyu7zp1o] {
    color: var(--adf-text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.icon-dropdown-search-input[b-1vbyu7zp1o] {
    flex: 1;
    border: 1px solid var(--adf-border-medium);
    border-radius: 3px;
    padding: 0.375rem 0.5rem;
    background-color: var(--adf-tertiary-bg);
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    outline: none;
    transition: border-color 0.15s ease;
}

.icon-dropdown-search-input:focus[b-1vbyu7zp1o] {
    border-color: var(--adf-text-accent);
    box-shadow: 0 0 0 0.1rem rgba(0, 120, 212, 0.2);
}

.icon-dropdown-search .clear-search-icon[b-1vbyu7zp1o] {
    color: var(--adf-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.icon-dropdown-search .clear-search-icon:hover[b-1vbyu7zp1o] {
    color: var(--adf-error);
}

.icon-dropdown-options-list[b-1vbyu7zp1o] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.icon-dropdown-no-results[b-1vbyu7zp1o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 0.5rem;
}

.icon-dropdown-no-results i[b-1vbyu7zp1o] {
    font-size: 1.5rem;
    opacity: 0.5;
}

.icon-dropdown-option[b-1vbyu7zp1o] {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--adf-text-primary);
    font-size: var(--adf-font-size-sm);
    transition: background-color 0.15s ease-in-out;
}

.icon-dropdown-option:hover[b-1vbyu7zp1o] {
    background-color: var(--adf-hover-bg);
}

.icon-dropdown-option.selected[b-1vbyu7zp1o] {
    background-color: var(--adf-active-bg);
    color: var(--adf-text-accent);
}

.dropdown-icon[b-1vbyu7zp1o] {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

.badge-beta[b-1vbyu7zp1o] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7c4d00;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* /Components/Shared/JsonArrayBuilder.razor.rz.scp.css */
/* JSON Array Builder Component Styles */
.json-array-builder[b-v6vhudwgmt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.json-array-items[b-v6vhudwgmt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.25rem;
}

/* Custom scrollbar for light mode */
.json-array-items[b-v6vhudwgmt]::-webkit-scrollbar {
    width: 8px;
}

.json-array-items[b-v6vhudwgmt]::-webkit-scrollbar-track {
    background: var(--bs-gray-200);
    border-radius: 4px;
}

.json-array-items[b-v6vhudwgmt]::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 4px;
}

.json-array-items[b-v6vhudwgmt]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] .json-array-items[b-v6vhudwgmt]::-webkit-scrollbar-track {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .json-array-items[b-v6vhudwgmt]::-webkit-scrollbar-thumb {
    background: var(--bs-gray-600);
}

[data-bs-theme="dark"] .json-array-items[b-v6vhudwgmt]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

.json-array-item[b-v6vhudwgmt] {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .json-array-item[b-v6vhudwgmt] {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-700);
}

.json-array-item:hover[b-v6vhudwgmt] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.1rem rgba(var(--bs-primary-rgb), 0.15);
}

.json-array-item-content[b-v6vhudwgmt] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.json-array-item-index[b-v6vhudwgmt] {
    flex-shrink: 0;
    padding-top: 0.25rem;
}

    .json-array-item-index .badge[b-v6vhudwgmt] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        min-width: 2rem;
        text-align: center;
    }

.json-array-item-inputs[b-v6vhudwgmt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.json-array-item-row[b-v6vhudwgmt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.json-array-item-field[b-v6vhudwgmt] {
    display: flex;
    flex-direction: column;
}

    .json-array-item-field .form-label-sm[b-v6vhudwgmt] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--bs-secondary);
        margin-bottom: 0.25rem;
    }

    .json-array-item-field .form-control[b-v6vhudwgmt] {
        font-size: 0.875rem;
    }

.json-array-item-inputs .invalid-feedback[b-v6vhudwgmt],
.json-array-item-inputs .valid-feedback[b-v6vhudwgmt] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

    .json-array-item-inputs .valid-feedback[b-v6vhudwgmt] {
        color: var(--bs-success);
    }

    .json-array-item-inputs .invalid-feedback[b-v6vhudwgmt] {
        color: var(--bs-danger);
    }

.json-array-item-actions[b-v6vhudwgmt] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 0.25rem;
}

    .json-array-item-actions .btn[b-v6vhudwgmt] {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }

.json-array-footer[b-v6vhudwgmt] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-gray-300);
}

[data-bs-theme="dark"] .json-array-footer[b-v6vhudwgmt] {
    border-top-color: var(--bs-gray-700);
}

.json-array-preview[b-v6vhudwgmt] {
    background-color: var(--bs-light);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    padding: 0.75rem;
}

[data-bs-theme="dark"] .json-array-preview[b-v6vhudwgmt] {
    background-color: var(--bs-dark);
    border-color: var(--bs-gray-700);
}

.json-array-preview-header[b-v6vhudwgmt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-gray-300);
}

[data-bs-theme="dark"] .json-array-preview-header[b-v6vhudwgmt] {
    border-bottom-color: var(--bs-gray-700);
}

    .json-array-preview-header strong[b-v6vhudwgmt] {
        font-size: 0.875rem;
        color: var(--bs-emphasis-color);
    }

    .json-array-preview-header .btn-link[b-v6vhudwgmt] {
        color: var(--bs-primary);
        text-decoration: none;
        font-size: 0.875rem;
    }

        .json-array-preview-header .btn-link:hover[b-v6vhudwgmt] {
            color: var(--bs-primary);
            text-decoration: underline;
        }

.json-array-preview-content[b-v6vhudwgmt] {
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.25rem;
    padding: 0.75rem;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .json-array-preview-content[b-v6vhudwgmt] {
    background-color: var(--bs-gray-900);
    border-color: var(--bs-gray-800);
}

    .json-array-preview-content code[b-v6vhudwgmt] {
        color: inherit;
        background: transparent;
    }

/* Empty state styling */
.json-array-items .text-center[b-v6vhudwgmt] {
    padding: 1.5rem;
}

    .json-array-items .text-center i[b-v6vhudwgmt] {
        opacity: 0.5;
    }

/* Button styling overrides for consistency */
.json-array-builder .btn-sm[b-v6vhudwgmt] {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
}

.json-array-builder .btn-outline-primary:hover[b-v6vhudwgmt] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.json-array-builder .btn-outline-secondary:hover[b-v6vhudwgmt] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.json-array-builder .btn-outline-danger:hover[b-v6vhudwgmt] {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;
}

.json-array-builder .btn-outline-info:hover[b-v6vhudwgmt] {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

/* Alert styling for copy success */
.json-array-preview .alert-sm[b-v6vhudwgmt] {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .json-array-item-content[b-v6vhudwgmt] {
        flex-direction: column;
    }

    .json-array-item-row[b-v6vhudwgmt] {
        grid-template-columns: 1fr;
    }

    .json-array-item-actions[b-v6vhudwgmt] {
        width: 100%;
        justify-content: flex-end;
    }

    .json-array-footer[b-v6vhudwgmt] {
        flex-direction: column;
    }

    .json-array-footer .d-flex[b-v6vhudwgmt] {
        width: 100%;
    }
}

/* Animation for adding/removing items */
.json-array-item[b-v6vhudwgmt] {
    animation: slideIn-b-v6vhudwgmt 0.2s ease-out;
}

@keyframes slideIn-b-v6vhudwgmt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/NavigationLoadingIndicator.razor.rz.scp.css */
/* ── Slim top progress bar (GitHub / YouTube style) ──────────────── */
.navigation-progress-bar[b-mpy17xkfom] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: var(--adf-z-loading, 9999);
    pointer-events: none;
    overflow: hidden;
    background-color: transparent;
}

.navigation-progress-bar-fill[b-mpy17xkfom] {
    height: 100%;
    background: linear-gradient(90deg, var(--adf-text-accent, #0078d4), var(--adf-hover-accent, #50a0ff));
    animation: progressSlide-b-mpy17xkfom 1.8s ease-in-out infinite;
    box-shadow: 0 0 8px var(--adf-text-accent, #0078d4);
}

@keyframes progressSlide-b-mpy17xkfom {
    0%   { width: 0%;  margin-left: 0;    }
    30%  { width: 50%; margin-left: 0;    }
    70%  { width: 30%; margin-left: 55%;  }
    100% { width: 0%;  margin-left: 100%; }
}

/* ── Compact loading indicator reused in NavMenu ─────────────────── */
.nav-loading-indicator[b-mpy17xkfom] {
    display: inline-flex;
    align-items: center;
    gap: var(--adf-spacing-sm, 6px);
    padding: var(--adf-spacing-xs, 4px) var(--adf-spacing-sm, 8px);
    background-color: var(--adf-active-bg, rgba(0,120,212,.08));
    border-radius: 4px;
    font-size: var(--adf-font-size-xs, 11px);
    color: var(--adf-text-accent, #0078d4);
    font-weight: 500;
    animation: pulse-b-mpy17xkfom 1.5s ease-in-out infinite;
}

.nav-loading-indicator .spinner-border[b-mpy17xkfom] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: var(--adf-text-accent, #0078d4);
}

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

/* ── Accessibility ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .navigation-progress-bar-fill[b-mpy17xkfom],
    .nav-loading-indicator[b-mpy17xkfom] {
        animation: none;
    }

    .navigation-progress-bar-fill[b-mpy17xkfom] {
        width: 100%;
    }
}

/* ── High contrast ───────────────────────────────────────────────── */
@media (prefers-contrast: high) {
    .navigation-progress-bar-fill[b-mpy17xkfom] {
        box-shadow: none;
        height: 4px;
    }
}
/* /Components/Shared/NotificationCenter.razor.rz.scp.css */
/* Notification Center Styles */

/* Notification Bell Button */
.notification-center[b-ak9q3wcpz3] {
    position: relative;
    display: inline-block;
}

.notification-bell-button[b-ak9q3wcpz3] {
    position: relative;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--adf-border-light);
    background: var(--adf-secondary-bg);
    color: var(--adf-text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notification-bell-button:hover[b-ak9q3wcpz3] {
    background: var(--adf-hover-bg);
    border-color: var(--adf-nav-active);
}

.notification-bell-button.active[b-ak9q3wcpz3] {
    background: var(--adf-nav-active);
    color: var(--adf-text-white);
    border-color: var(--adf-nav-active);
}

.notification-bell-button i[b-ak9q3wcpz3] {
    font-size: 1.125rem;
}

/* Notification Badge */
.notification-badge[b-ak9q3wcpz3] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 2px 5px;
    border-radius: 10px;
    background: var(--adf-error);
    color: var(--adf-text-white);
    font-size: var(--adf-font-size-xs);
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: var(--adf-shadow-sm);
    animation: pulse-badge-b-ak9q3wcpz3 2s ease-in-out infinite;
}

@keyframes pulse-badge-b-ak9q3wcpz3 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Notification Panel */
.notification-panel[b-ak9q3wcpz3] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 420px;
    max-height: 600px;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 8px;
    box-shadow: var(--adf-shadow-lg);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: slideDown-b-ak9q3wcpz3 0.2s ease-out;
}

@keyframes slideDown-b-ak9q3wcpz3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel Header */
.notification-panel-header[b-ak9q3wcpz3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--adf-border-light);
    background: var(--adf-tertiary-bg);
    border-radius: 8px 8px 0 0;
}

.notification-panel-header h3[b-ak9q3wcpz3] {
    margin: 0;
    font-size: var(--adf-font-size-lg);
    font-weight: 600;
    color: var(--adf-text-primary);
}

.notification-panel-actions[b-ak9q3wcpz3] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.notification-panel-actions .btn[b-ak9q3wcpz3] {
    padding: 0.25rem 0.5rem;
    color: var(--adf-text-muted);
}

.notification-panel-actions .btn:hover[b-ak9q3wcpz3] {
    color: var(--adf-nav-active);
}

/* Clear Menu */
.clear-menu[b-ak9q3wcpz3] {
    position: absolute;
    top: 60px;
    right: 12px;
    background: var(--adf-secondary-bg);
    border: 1px solid var(--adf-border-light);
    border-radius: 4px;
    box-shadow: var(--adf-shadow-md);
    z-index: 1002;
    min-width: 140px;
    animation: fadeIn-b-ak9q3wcpz3 0.15s ease-out;
}

@keyframes fadeIn-b-ak9q3wcpz3 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.clear-menu-item[b-ak9q3wcpz3] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    background: none;
    color: var(--adf-text-primary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.clear-menu-item:hover[b-ak9q3wcpz3] {
    background: var(--adf-hover-bg);
}

.clear-menu-item:first-child[b-ak9q3wcpz3] {
    border-radius: 4px 4px 0 0;
}

.clear-menu-item:last-child[b-ak9q3wcpz3] {
    border-radius: 0 0 4px 4px;
}

/* Panel Tabs */
.notification-panel-tabs[b-ak9q3wcpz3] {
    display: flex;
    border-bottom: 1px solid var(--adf-border-light);
    background: var(--adf-secondary-bg);
}

.notification-tab[b-ak9q3wcpz3] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    color: var(--adf-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.notification-tab:hover[b-ak9q3wcpz3] {
    color: var(--adf-text-primary);
    background: var(--adf-hover-bg);
}

.notification-tab.active[b-ak9q3wcpz3] {
    color: var(--adf-nav-active);
    border-bottom-color: var(--adf-nav-active);
    background: var(--adf-secondary-bg);
}

/* Panel Content */
.notification-panel-content[b-ak9q3wcpz3] {
    flex: 1;
    overflow-y: auto;
    max-height: 450px;
}

/* Custom scrollbar for notification panel */
.notification-panel-content[b-ak9q3wcpz3]::-webkit-scrollbar {
    width: var(--adf-scrollbar-width);
}

.notification-panel-content[b-ak9q3wcpz3]::-webkit-scrollbar-track {
    background: var(--adf-scrollbar-track);
}

.notification-panel-content[b-ak9q3wcpz3]::-webkit-scrollbar-thumb {
    background: var(--adf-scrollbar-thumb);
    border-radius: 4px;
}

.notification-panel-content[b-ak9q3wcpz3]::-webkit-scrollbar-thumb:hover {
    background: var(--adf-scrollbar-thumb-hover);
}

/* Notification Item */
.notification-item[b-ak9q3wcpz3] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--adf-border-light);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.notification-item:hover[b-ak9q3wcpz3] {
    background: var(--adf-hover-bg);
}

.notification-item.unread[b-ak9q3wcpz3] {
    background: var(--adf-active-bg);
    border-left: 3px solid var(--adf-nav-active);
}

.notification-item.unread:hover[b-ak9q3wcpz3] {
    background: var(--adf-info-light);
}

/* Notification Icon */
.notification-item-icon[b-ak9q3wcpz3] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
}

.notification-success .notification-item-icon[b-ak9q3wcpz3] {
    background: var(--adf-success-light);
    color: var(--adf-success);
}

.notification-error .notification-item-icon[b-ak9q3wcpz3] {
    background: var(--adf-error-light);
    color: var(--adf-error);
}

.notification-warning .notification-item-icon[b-ak9q3wcpz3] {
    background: var(--adf-warning-light);
    color: var(--adf-warning);
}

.notification-info .notification-item-icon[b-ak9q3wcpz3] {
    background: var(--adf-info-light);
    color: var(--adf-info);
}

/* Notification Content */
.notification-item-content[b-ak9q3wcpz3] {
    flex: 1;
    min-width: 0;
}

.notification-item-message[b-ak9q3wcpz3] {
    font-size: var(--adf-font-size-sm);
    color: var(--adf-text-primary);
    line-height: 1.4;
    margin-bottom: 0.25rem;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 4.2em; /* 3 lines * 1.4 line-height */
}

.notification-item-time[b-ak9q3wcpz3] {
    font-size: var(--adf-font-size-xs);
    color: var(--adf-text-muted);
}

.notification-item-action[b-ak9q3wcpz3] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: var(--adf-font-size-sm);
    color: var(--adf-nav-active);
    text-decoration: none;
    font-weight: 500;
}

.notification-item-action:hover[b-ak9q3wcpz3] {
    text-decoration: underline;
}

/* Notification Actions */
.notification-item-actions[b-ak9q3wcpz3] {
    display: flex;
    gap: 0.25rem;
    align-items: flex-start;
}

.btn-notification-action[b-ak9q3wcpz3] {
    padding: 0.25rem 0.5rem;
    border: none;
    background: none;
    color: var(--adf-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.btn-notification-action:hover[b-ak9q3wcpz3] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--adf-text-primary);
}

/* Empty State */
.notification-empty[b-ak9q3wcpz3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    color: var(--adf-text-muted);
}

.notification-empty i[b-ak9q3wcpz3] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.notification-empty p[b-ak9q3wcpz3] {
    margin: 0;
    font-size: var(--adf-font-size-sm);
}

/* Backdrop */
.notification-backdrop[b-ak9q3wcpz3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: transparent;
}

/* Responsive */
@media (max-width: 768px) {
    .notification-panel[b-ak9q3wcpz3] {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 70px);
    }
}

/* Force light mode for consistency with application */
.notification-panel[b-ak9q3wcpz3],
.notification-panel-header[b-ak9q3wcpz3],
.notification-panel-tabs[b-ak9q3wcpz3],
.clear-menu[b-ak9q3wcpz3] {
    color-scheme: light;
}
/* /Components/Shared/SecretInput.razor.rz.scp.css */
/* Secret Input Component Styles */
.secret-input-container[b-xhvf981zx6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.secret-mode-selector[b-xhvf981zx6] {
    margin-bottom: 0.25rem;
}

    .secret-mode-selector .btn-group[b-xhvf981zx6] {
        display: flex;
    }

    .secret-mode-selector .btn[b-xhvf981zx6] {
        flex: 1;
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        margin-bottom: 0 !important;
    }

        .secret-mode-selector .btn i[b-xhvf981zx6] {
            font-size: 0.75rem;
        }

.secret-vault-inputs[b-xhvf981zx6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .secret-vault-inputs .form-select[b-xhvf981zx6],
    .secret-vault-inputs .form-control[b-xhvf981zx6] {
        font-size: 0.875rem;
    }

    .secret-vault-inputs small[b-xhvf981zx6] {
        margin-top: 0.25rem;
        display: block;
    }

        .secret-vault-inputs small i[b-xhvf981zx6] {
            margin-right: 0.25rem;
        }

/* Compact input styling */
.secret-input-container .form-control-sm[b-xhvf981zx6],
.secret-input-container .form-select-sm[b-xhvf981zx6] {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

/* Loading state */
.secret-input-container .spinner-border-sm[b-xhvf981zx6] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Error alert styling */
.secret-input-container .alert-sm[b-xhvf981zx6] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

    .secret-input-container .alert-sm strong[b-xhvf981zx6] {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    .secret-input-container .alert-sm small[b-xhvf981zx6] {
        font-size: 0.8125rem;
        margin-top: 0.125rem;
    }

    .secret-input-container .alert-sm .btn-sm[b-xhvf981zx6] {
        padding: 0.25rem 0.5rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .secret-input-container .alert-sm i.fa-exclamation-triangle[b-xhvf981zx6] {
        font-size: 1rem;
        flex-shrink: 0;
    }

    .secret-input-container .alert-danger[b-xhvf981zx6] {
        background-color: var(--adf-error-light);
        border-color: var(--adf-error);
        color: var(--adf-error);
    }
/* /Components/Shared/TrialBanner.razor.rz.scp.css */
/*
    Trial countdown banner styles. Compact, top-of-pane bar that adapts color
    based on urgency (info / warning / urgent). Designed to read clearly in both
    light and dark mode without competing with the editor content.
*/

.trial-banner[b-fhbk6g3y71] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.2;
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #052c65);
    border-color: rgba(13, 110, 253, 0.25);
}

.trial-banner--info[b-fhbk6g3y71] {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: var(--bs-primary-text-emphasis, #052c65);
    border-color: rgba(13, 110, 253, 0.25);
}

.trial-banner--warning[b-fhbk6g3y71] {
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
    color: var(--bs-warning-text-emphasis, #664d03);
    border-color: rgba(255, 193, 7, 0.45);
}

.trial-banner--urgent[b-fhbk6g3y71] {
    background-color: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #58151c);
    border-color: rgba(220, 53, 69, 0.45);
}

.trial-banner__icon[b-fhbk6g3y71] {
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trial-banner__body[b-fhbk6g3y71] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.trial-banner__label[b-fhbk6g3y71] {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
}

.trial-banner__count[b-fhbk6g3y71] {
    font-weight: 600;
}

.trial-banner__divider[b-fhbk6g3y71] {
    opacity: 0.5;
    font-weight: 700;
    padding: 0 0.1rem;
}

.trial-banner__meta[b-fhbk6g3y71] {
    color: inherit;
    opacity: 0.75;
    font-size: 0.8rem;
}

.trial-banner__cta[b-fhbk6g3y71] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;
    transition: background-color 120ms ease, transform 120ms ease;
    white-space: nowrap;
}

.trial-banner__cta:hover[b-fhbk6g3y71] {
    background-color: rgba(0, 0, 0, 0.16);
    color: inherit;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .trial-banner__meta[b-fhbk6g3y71] { display: none; }
}