/*
 * Styles extracted verbatim from index.html <style> (Phase 3: CSS belongs in .css).
 * Loaded at the same cascade position (after the feature stylesheets).
 */
        /* Auth styles live in assets/styles/auth.css (canonical) */

        /* Creator Page */
        .creator-page {
            padding: var(--space-lg);
        }

        .creator-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-lg);
        }

        .creator-header h1 {
            margin: 0;
        }

        .creator-header__actions {
            display: flex;
            gap: var(--space-sm);
        }

        .creator-search {
            margin-bottom: var(--space-md);
        }

        .creator-layout {
            display: grid;
            grid-template-columns: 250px 1fr 300px;
            gap: var(--space-lg);
            min-height: 600px;
        }

        .creator-sidebar {
            position: sticky;
            top: var(--space-lg);
            height: fit-content;
        }

        .creator-main {
            min-height: 400px;
        }

        .creator-tasks-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-md);
        }

        .creator-tasks-header h2 {
            margin: 0;
        }

        .creator-tasks-grid {
            /* Grid set by component */
        }

        /* Dashboard Page */
        .dashboard-page {
            padding: var(--space-lg);
        }

        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-md);
            margin-bottom: var(--space-xl);
        }

        .stat-card {
            background: var(--color-surface);
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }

        .stat-card__icon {
            font-size: 2.5rem;
        }

        .stat-card__value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--color-primary);
        }

        .stat-card__label {
            color: var(--color-text-light);
            font-size: 0.9rem;
        }

        .dashboard-section {
            margin-bottom: var(--space-xl);
        }

        .dashboard-section__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-md);
        }

        .dashboard-section h2 {
            margin: 0 0 var(--space-md) 0;
        }

        /* Admin Page */
        .admin-page {
            padding: var(--space-lg);
        }

        .admin-header {
            margin-bottom: var(--space-lg);
        }

        .admin-header h1 {
            margin: 0;
        }

        .admin-tabs {
            display: flex;
            gap: var(--space-sm);
            margin-bottom: var(--space-lg);
            border-bottom: 2px solid var(--color-border);
        }

        .admin-tab {
            padding: var(--space-md);
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-text-light);
            font-weight: 500;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all var(--transition-fast);
        }

        .admin-tab:hover {
            color: var(--color-text);
        }

        .admin-tab--active {
            color: var(--color-primary);
            border-bottom-color: var(--color-primary);
        }

        .admin-content {
            min-height: 400px;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .creator-layout {
                grid-template-columns: 1fr;
                gap: var(--space-md);
            }

            .creator-sidebar {
                position: static;
            }
        }