:root {
    /* Theme colors - these will be dynamically updated by theme.js */
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #6366f1;
    --secondary: #10b981;
    --accent: #f59e0b;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
    --info: #3b82f6;

    /* Semantic colors for theming */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border: #e5e7eb;
    --border-dark: #d1d5db;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);

    /* Legacy gray scale (kept for backward compatibility) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Legacy shadows (kept for backward compatibility) */
    --shadow-sm: 0 1px 2px 0 var(--shadow);
    --shadow: 0 1px 3px 0 var(--shadow), 0 1px 2px -1px var(--shadow);
    --shadow-md: 0 4px 6px -1px var(--shadow-md), 0 2px 4px -2px var(--shadow-md);
    --shadow-lg: 0 10px 15px -3px var(--shadow-md), 0 4px 6px -4px var(--shadow-md);
}

/* Smooth theme transitions */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-secondary);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Login Page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.login-box {
    background: var(--bg-primary);
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.login-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--shadow);
}

.pin-input {
    width: 100%;
    text-align: center;
    font-size: 32px;
    letter-spacing: 16px;
    padding: 16px;
    font-weight: 600;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    gap: 8px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: white;
    width: 100%;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: #059669;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border-dark);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* Dashboard */
.dashboard {
    background: var(--bg-primary);
    min-height: 100vh;
}

.navbar {
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.navbar-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.stat-card {
    background: var(--bg-primary);
    padding: 24px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border-left: 4px solid #f97316;
}

.stat-card.success {
    border-left-color: #3b82f6;
}

.stat-card.warning {
    border-left-color: #fbbf24;
}

.stat-card.danger {
    border-left-color: var(--danger);
}

.stat-card.earnings {
    border-left-color: #10b981;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Cards */
.card {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Chore Items */
.chore-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chore-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 8px;
    border: 2px solid var(--border);
    transition: all 0.2s;
    background: var(--bg-primary);
}

.chore-item:hover {
    border-color: var(--border-dark);
}

.chore-item.complete {
    background: var(--bg-tertiary);
    border-color: var(--success);
}

.chore-item.pending {
    background: var(--bg-tertiary);
    border-color: var(--warning);
}

.chore-item.incomplete {
    background: var(--bg-primary);
    border-color: var(--border);
}

.chore-info {
    flex: 1;
}

.chore-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.chore-description {
    font-size: 14px;
    color: var(--text-secondary);
}

.chore-pay {
    font-size: 18px;
    font-weight: 700;
    color: var(--success);
    margin: 0 16px;
}

.chore-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.chore-status.complete {
    background: var(--success);
    color: white;
}

.chore-status.pending {
    background: var(--warning);
    color: white;
}

.chore-status.incomplete {
    background: var(--gray-300);
    color: var(--gray-700);
}

/* Alerts */
.alert {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--gray-500);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state-text {
    font-size: 16px;
}

/* Loading Spinner */
.spinner {
    border: 3px solid var(--gray-200);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    text-align: center;
    color: var(--gray-600);
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-content {
        flex-direction: column;
        gap: 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .chore-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .chore-pay {
        margin: 0;
    }
}

/* Utility Classes */
.mt-4 { margin-top: 24px; }
.mb-4 { margin-bottom: 24px; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

body.modal-open {
    overflow: hidden;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px var(--shadow-md), 0 10px 10px -5px var(--shadow);
}

.modal-content.wide {
    max-width: 520px;
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-content form {
    padding: 24px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

/* Wizard Styles */
.wizard-steps {
    display: flex;
    gap: 8px;
    padding: 0 24px 12px;
}

.wizard-step-indicator {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.wizard-step-indicator.active {
    background: var(--primary);
    color: white;
}

.wizard-step-panel {
    display: none;
    padding: 0 24px 24px;
}

.wizard-step-panel.active {
    display: block;
}

.wizard-chore-name {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    font-weight: 600;
}

.wizard-mode-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.wizard-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

.wizard-preview {
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    margin-top: 16px;
}

/* Table Styles */
.table-responsive {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--bg-tertiary);
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border);
    font-size: 14px;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.badge-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* Day of Week Selector */
.day-btn {
    padding: 10px 8px;
    border: 2px solid var(--border);
    background: var(--bg-primary);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.day-btn:hover {
    border-color: var(--primary);
    background: var(--bg-tertiary);
}

.day-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Theme Switcher */
.theme-switcher {
    position: relative;
    display: inline-block;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
}

.theme-toggle-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

.theme-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 1000;
    overflow: hidden;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

.theme-option:hover {
    background: var(--bg-tertiary);
}

.theme-option.active {
    background: var(--bg-tertiary);
    font-weight: 600;
}

.theme-color-indicator {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid var(--border);
}

/* Starfield effect for Midnight theme */
[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        /* Small stars - spread across wider area */
        100px 50px 0 0.5px rgba(255, 255, 255, 0.8),
        300px 150px 0 1px rgba(255, 255, 255, 0.9),
        500px 80px 0 0.5px rgba(255, 255, 255, 0.7),
        700px 200px 0 1px rgba(255, 255, 255, 0.85),
        900px 120px 0 0.5px rgba(255, 255, 255, 0.75),
        1100px 180px 0 1px rgba(255, 255, 255, 0.9),
        1300px 90px 0 0.5px rgba(255, 255, 255, 0.8),
        1500px 140px 0 1px rgba(255, 255, 255, 0.85),
        1700px 110px 0 0.5px rgba(255, 255, 255, 0.75),
        1900px 170px 0 1px rgba(255, 255, 255, 0.9),
        2100px 130px 0 0.5px rgba(255, 255, 255, 0.8),
        200px 250px 0 0.5px rgba(255, 255, 255, 0.7),
        400px 320px 0 1px rgba(255, 255, 255, 0.9),
        600px 280px 0 0.5px rgba(255, 255, 255, 0.75),
        800px 350px 0 1px rgba(255, 255, 255, 0.85),
        1000px 300px 0 0.5px rgba(255, 255, 255, 0.8),
        1200px 380px 0 1px rgba(255, 255, 255, 0.9),
        1400px 330px 0 0.5px rgba(255, 255, 255, 0.7),
        1600px 360px 0 1px rgba(255, 255, 255, 0.85),
        1800px 310px 0 0.5px rgba(255, 255, 255, 0.75),
        2000px 340px 0 1px rgba(255, 255, 255, 0.9),
        150px 450px 0 1px rgba(255, 255, 255, 0.85),
        350px 500px 0 0.5px rgba(255, 255, 255, 0.75),
        550px 470px 0 1px rgba(255, 255, 255, 0.9),
        750px 520px 0 0.5px rgba(255, 255, 255, 0.8),
        950px 490px 0 1px rgba(255, 255, 255, 0.85),
        1150px 540px 0 0.5px rgba(255, 255, 255, 0.7),
        1350px 510px 0 1px rgba(255, 255, 255, 0.9),
        1550px 480px 0 0.5px rgba(255, 255, 255, 0.75),
        1750px 530px 0 1px rgba(255, 255, 255, 0.85),
        1950px 500px 0 0.5px rgba(255, 255, 255, 0.8),
        250px 650px 0 0.5px rgba(255, 255, 255, 0.8),
        450px 700px 0 1px rgba(255, 255, 255, 0.85),
        650px 680px 0 0.5px rgba(255, 255, 255, 0.75),
        850px 720px 0 1px rgba(255, 255, 255, 0.9),
        1050px 690px 0 0.5px rgba(255, 255, 255, 0.8),
        1250px 730px 0 1px rgba(255, 255, 255, 0.85),
        1450px 660px 0 0.5px rgba(255, 255, 255, 0.7),
        1650px 710px 0 1px rgba(255, 255, 255, 0.9),
        1850px 680px 0 0.5px rgba(255, 255, 255, 0.75),
        /* More scattered stars */
        180px 100px 0 0.5px rgba(255, 255, 255, 0.6),
        420px 180px 0 0.5px rgba(255, 255, 255, 0.7),
        680px 140px 0 0.5px rgba(255, 255, 255, 0.65),
        920px 220px 0 0.5px rgba(255, 255, 255, 0.75),
        1180px 160px 0 0.5px rgba(255, 255, 255, 0.7),
        1420px 200px 0 0.5px rgba(255, 255, 255, 0.65),
        1680px 150px 0 0.5px rgba(255, 255, 255, 0.7),
        1920px 210px 0 0.5px rgba(255, 255, 255, 0.75),
        280px 400px 0 0.5px rgba(255, 255, 255, 0.65),
        520px 360px 0 0.5px rgba(255, 255, 255, 0.7),
        760px 420px 0 0.5px rgba(255, 255, 255, 0.75),
        1020px 380px 0 0.5px rgba(255, 255, 255, 0.65),
        1280px 440px 0 0.5px rgba(255, 255, 255, 0.7),
        1520px 410px 0 0.5px rgba(255, 255, 255, 0.75),
        1760px 430px 0 0.5px rgba(255, 255, 255, 0.65),
        380px 600px 0 0.5px rgba(255, 255, 255, 0.75),
        620px 560px 0 0.5px rgba(255, 255, 255, 0.65),
        860px 620px 0 0.5px rgba(255, 255, 255, 0.7),
        1120px 580px 0 0.5px rgba(255, 255, 255, 0.75),
        1380px 610px 0 0.5px rgba(255, 255, 255, 0.65),
        1620px 590px 0 0.5px rgba(255, 255, 255, 0.7);
    animation: stars-twinkle 3s ease-in-out infinite;
}

[data-theme="dark"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        /* Brighter accent stars - spread across screen */
        250px 100px 0 1px rgba(200, 220, 255, 1),
        650px 250px 0 1.5px rgba(220, 230, 255, 1),
        1050px 180px 0 1px rgba(200, 220, 255, 1),
        1450px 220px 0 1.5px rgba(220, 230, 255, 1),
        1850px 150px 0 1px rgba(200, 220, 255, 1),
        450px 400px 0 1.5px rgba(220, 230, 255, 1),
        850px 480px 0 1px rgba(200, 220, 255, 1),
        1250px 420px 0 1.5px rgba(220, 230, 255, 1),
        1650px 460px 0 1px rgba(200, 220, 255, 1),
        350px 620px 0 1.5px rgba(220, 230, 255, 1),
        750px 580px 0 1px rgba(200, 220, 255, 1),
        1150px 650px 0 1.5px rgba(220, 230, 255, 1),
        1550px 600px 0 1px rgba(200, 220, 255, 1),
        1950px 640px 0 1.5px rgba(220, 230, 255, 1);
    animation: bright-stars-twinkle 4s ease-in-out infinite alternate;
}

/* Ensure content stays above stars */
[data-theme="dark"] .container,
[data-theme="dark"] .login-container {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .navbar {
    position: relative;
    z-index: 100;
}

[data-theme="dark"] .theme-switcher {
    position: relative;
    z-index: 101;
}

[data-theme="dark"] .theme-dropdown {
    z-index: 102;
}

@keyframes stars-twinkle {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@keyframes bright-stars-twinkle {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Sun and rays effect for Sunset themes */
[data-theme="sunset"] body::before,
[data-theme="sunset-dark"] body::before {
    content: '';
    position: fixed;
    bottom: -150px;
    left: -100px;
    width: 400px;
    height: 400px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle,
        rgba(251, 146, 60, 0.4) 0%,
        rgba(249, 115, 22, 0.3) 30%,
        rgba(234, 88, 12, 0.2) 50%,
        rgba(234, 88, 12, 0.1) 70%,
        transparent 100%
    );
    border-radius: 50%;
    animation: sun-pulse 4s ease-in-out infinite;
}

[data-theme="sunset"] body::after,
[data-theme="sunset-dark"] body::after {
    content: '';
    position: fixed;
    bottom: 50px;
    left: 100px;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
    box-shadow:
        /* Sun rays radiating outward */
        -50px -50px 80px 8px rgba(251, 146, 60, 0.15),
        -100px 0px 100px 6px rgba(249, 115, 22, 0.12),
        -80px 80px 90px 7px rgba(251, 146, 60, 0.13),
        0px 100px 95px 6px rgba(249, 115, 22, 0.11),
        50px 50px 85px 8px rgba(251, 146, 60, 0.14),
        100px 0px 100px 6px rgba(249, 115, 22, 0.12),
        80px -80px 90px 7px rgba(251, 146, 60, 0.13),
        0px -100px 95px 6px rgba(249, 115, 22, 0.11),
        -120px -40px 75px 5px rgba(245, 158, 11, 0.1),
        -120px 40px 75px 5px rgba(245, 158, 11, 0.1),
        -40px 120px 80px 5px rgba(251, 146, 60, 0.1),
        40px 120px 80px 5px rgba(251, 146, 60, 0.1),
        120px 40px 75px 5px rgba(245, 158, 11, 0.1),
        120px -40px 75px 5px rgba(245, 158, 11, 0.1),
        40px -120px 80px 5px rgba(251, 146, 60, 0.1),
        -40px -120px 80px 5px rgba(251, 146, 60, 0.1);
    animation: rays-shimmer 6s ease-in-out infinite;
}

/* Ensure content stays above sun and rays */
[data-theme="sunset"] .container,
[data-theme="sunset"] .login-container,
[data-theme="sunset-dark"] .container,
[data-theme="sunset-dark"] .login-container {
    position: relative;
    z-index: 1;
}

[data-theme="sunset"] .navbar,
[data-theme="sunset-dark"] .navbar {
    position: relative;
    z-index: 100;
}

[data-theme="sunset"] .theme-switcher,
[data-theme="sunset-dark"] .theme-switcher {
    position: relative;
    z-index: 101;
}

[data-theme="sunset"] .theme-dropdown,
[data-theme="sunset-dark"] .theme-dropdown {
    z-index: 102;
}

@keyframes sun-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes rays-shimmer {
    0%, 100% {
        opacity: 0.5;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: rotate(5deg);
    }
}