/* /Components/GifCreator/FrameSelectorStep.razor.rz.scp.css */
/* FrameSelectorStep component styles */

/* Selection Summary */
.selection-summary[b-vzlxhqkx67] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    background: var(--bg);
    border: 2px solid var(--border-primary);
    margin-bottom: 16px;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.summary-item[b-vzlxhqkx67] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.summary-label[b-vzlxhqkx67] {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.summary-value[b-vzlxhqkx67] {
    color: var(--text);
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.summary-value.highlight[b-vzlxhqkx67] {
    color: var(--accent);
}

.summary-frame[b-vzlxhqkx67] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.summary-arrow[b-vzlxhqkx67] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.summary-divider[b-vzlxhqkx67] {
    color: var(--border-strong);
    margin: 0 4px;
}

/* Transport Controls */
.transport-controls[b-vzlxhqkx67] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--surface-primary);
    border: 2px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
}

.transport-group[b-vzlxhqkx67] {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--border-primary);
}

.transport-group.range-group[b-vzlxhqkx67] {
    background: var(--tint-cyan-08);
    border-color: rgba(0, 172, 193, 0.3);
}

/* Speed selector group */
.transport-group.speed-group[b-vzlxhqkx67] {
    background: var(--tint-orange-08, rgba(255, 152, 0, 0.08));
    border-color: rgba(255, 152, 0, 0.3);
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
}

.transport-btn[b-vzlxhqkx67] {
    padding: 4px;
    min-width: 40px;
    height: 40px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all var(--transition-fast);
    box-shadow: none;
    text-shadow: none;
}

.transport-btn:hover:not(:disabled)[b-vzlxhqkx67] {
    background: var(--surface-secondary);
    border-color: var(--border-strong);
}

.transport-btn:active:not(:disabled)[b-vzlxhqkx67] {
    background: var(--surface-tertiary);
    transform: translateY(1px);
}

.transport-btn:focus-visible[b-vzlxhqkx67] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.transport-btn:disabled[b-vzlxhqkx67] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Range buttons use accent color */
.transport-btn.range-btn:hover:not(:disabled)[b-vzlxhqkx67] {
    background: var(--tint-cyan-12);
    border-color: var(--accent-cyan);
}

.speed-label[b-vzlxhqkx67] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-right: 4px;
}

.speed-btn[b-vzlxhqkx67] {
    padding: 4px 8px;
    min-width: unset;
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: none;
    text-shadow: none;
}

.speed-btn:hover:not(:disabled)[b-vzlxhqkx67] {
    background: var(--tint-orange-12, rgba(255, 152, 0, 0.12));
    border-color: var(--accent-orange, #ff9800);
    color: var(--text);
}

.speed-btn.active[b-vzlxhqkx67] {
    background: var(--accent-orange, #ff9800);
    border-color: var(--accent-orange, #ff9800);
    color: var(--text-on-primary, #000);
}

.speed-btn.active:hover:not(:disabled)[b-vzlxhqkx67] {
    background: var(--accent-orange-hover, #ffa726);
}

.speed-btn:disabled[b-vzlxhqkx67] {
    opacity: 0.4;
    cursor: not-allowed;
}

svg.transport-icon[b-vzlxhqkx67] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-label[b-vzlxhqkx67] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1;
}

.transport-btn:hover:not(:disabled) .btn-label[b-vzlxhqkx67] {
    color: var(--text);
}

.transport-divider[b-vzlxhqkx67] {
    width: 1px;
    height: 28px;
    background: var(--border-primary);
    margin: 0 6px;
}

.transport-spacer[b-vzlxhqkx67] {
    flex: 1;
}

.range-badge[b-vzlxhqkx67] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-cyan);
    padding: 4px 8px;
    background: var(--tint-cyan-08);
    border: 1px solid rgba(0, 172, 193, 0.3);
}

/* Fine-tune Section */
.fine-tune[b-vzlxhqkx67] {
    margin-top: 12px;
}

.fine-tune-row[b-vzlxhqkx67] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fine-tune-field[b-vzlxhqkx67] {
    flex: 1 1 140px;
    min-width: 140px;
    max-width: 200px;
}

.fine-tune-field input[b-vzlxhqkx67] {
    width: 100%;
    padding: 10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.field-hint[b-vzlxhqkx67] {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Step Footer */
.step-footer[b-vzlxhqkx67] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 2px solid var(--border-primary);
}

.footer-info[b-vzlxhqkx67] {
    flex: 1;
}

.footer-hint[b-vzlxhqkx67] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.footer-hint.warning[b-vzlxhqkx67] {
    color: var(--accent-yellow);
}

/* Dimmed frames outside selection */
.thumb.dimmed[b-vzlxhqkx67] {
    opacity: 0.4;
}

.thumb.dimmed:hover:not(:disabled)[b-vzlxhqkx67] {
    opacity: 0.7;
}

/* Handle icons */
.handle-icon[b-vzlxhqkx67] {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .selection-summary[b-vzlxhqkx67] {
        padding: 10px 12px;
        gap: 6px 12px;
    }

    .summary-arrow[b-vzlxhqkx67],
    .summary-divider[b-vzlxhqkx67] {
        display: none;
    }

    .summary-item[b-vzlxhqkx67] {
        flex-basis: 100%;
    }

    .transport-controls[b-vzlxhqkx67] {
        flex-wrap: wrap;
    }

    .transport-spacer[b-vzlxhqkx67] {
        flex-basis: 100%;
        height: 0;
    }

    .step-footer[b-vzlxhqkx67] {
        flex-direction: column;
        align-items: stretch;
    }

    .step-footer button[b-vzlxhqkx67] {
        width: 100%;
    }
}
/* /Components/GifCreator/JobQueuePanel.razor.rz.scp.css */


.job-panel[b-4nl89nljm8] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    background: var(--surface-primary, #22303B);
    border: 3px solid var(--border-strong, #5A6A78);
    box-shadow: var(--shadow-lg, 6px 6px 0px #0A1015), 
                0 0 30px rgba(0, 0, 0, 0.4),
                0 0 60px rgba(0, 172, 193, 0.1);
    z-index: 1000;
    overflow: hidden;
    animation: slideUp-b-4nl89nljm8 0.3s ease-out;
}

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

.job-panel.minimized[b-4nl89nljm8] {
    width: auto;
    min-width: 200px;
}


.job-panel-header[b-4nl89nljm8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    background: var(--surface-secondary, #2D3A45);
    border-bottom: 3px solid var(--border-primary, #45525C);
    user-select: none;
    transition: background 0.15s ease;
}

.job-panel-header:hover[b-4nl89nljm8] {
    background: var(--surface-tertiary, #354652);
}

.job-panel-title[b-4nl89nljm8] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary, #F9F5EC);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(249, 245, 236, 0.2);
}

.connection-dot[b-4nl89nljm8] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid var(--surface-primary, #22303B);
}

.connection-dot.connected[b-4nl89nljm8] {
    background: var(--accent-green, #43A047);
    box-shadow: 0 0 8px rgba(67, 160, 71, 0.8), 
                0 0 16px rgba(67, 160, 71, 0.5), 
                0 0 24px rgba(67, 160, 71, 0.3);
}

.connection-dot.disconnected[b-4nl89nljm8] {
    background: var(--accent-yellow, #FDD835);
    animation: pulse-warning-b-4nl89nljm8 1.5s ease-in-out infinite;
}

@keyframes pulse-warning-b-4nl89nljm8 {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 8px rgba(253, 216, 53, 0.8), 
                    0 0 16px rgba(253, 216, 53, 0.5), 
                    0 0 24px rgba(253, 216, 53, 0.3); 
    }
    50% { 
        opacity: 0.7; 
        box-shadow: 0 0 4px rgba(253, 216, 53, 0.5), 
                    0 0 8px rgba(253, 216, 53, 0.3); 
    }
}

.job-panel-actions[b-4nl89nljm8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-action-btn[b-4nl89nljm8] {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-tertiary, #354652);
    border: 2px solid var(--border-primary, #45525C);
    color: var(--text-secondary, #ABB3BB);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    box-shadow: 2px 2px 0px var(--shadow-elevation1, rgba(0,0,0,0.5));
}

.job-action-btn:hover[b-4nl89nljm8] {
    background: var(--action-primary, #FB8C00);
    border-color: var(--action-primary, #FB8C00);
    color: var(--text-on-primary, #FFFFFF);
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--shadow-elevation1, rgba(0,0,0,0.5));
}

.job-action-btn:active[b-4nl89nljm8] {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.job-action-btn.toggle i[b-4nl89nljm8] {
    transition: transform 0.2s ease;
}


.job-panel-content[b-4nl89nljm8] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--surface-primary, #22303B);
}


.job-toast[b-4nl89nljm8] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    padding-left: 20px;
    background: var(--surface-secondary, #2D3A45);
    border: 2px solid var(--border-primary, #45525C);
    position: relative;
    animation: toastIn-b-4nl89nljm8 0.25s ease-out;
    transition: border-color 0.15s ease;
    box-shadow: var(--shadow-md, 4px 4px 0px #0A1015);
}


.job-toast:hover[b-4nl89nljm8] {
    border-color: var(--border-strong, #5A6A78);
}

@keyframes toastIn-b-4nl89nljm8 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.job-toast[b-4nl89nljm8]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--border-primary, #45525C);
}

.job-toast.processing[b-4nl89nljm8] {
    border-color: var(--accent-blue, #1E88E5);
}
.job-toast.processing[b-4nl89nljm8]::before {
    background: var(--accent-blue, #1E88E5);
}

.job-toast.queued[b-4nl89nljm8]::before {
    background: var(--text-muted, #5F676F);
}

.job-toast.completed[b-4nl89nljm8] {
    border-color: var(--accent-green, #43A047);
}
.job-toast.completed[b-4nl89nljm8]::before {
    background: var(--accent-green, #43A047);
}

.job-toast.failed[b-4nl89nljm8] {
    border-color: var(--accent-red, #E53935);
}
.job-toast.failed[b-4nl89nljm8]::before {
    background: var(--accent-red, #E53935);
}

.job-toast.cancelled[b-4nl89nljm8]::before {
    background: var(--text-disabled, #45525C);
}


.job-toast-icon[b-4nl89nljm8] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
    border: 2px solid var(--border-primary, #45525C);
    background: var(--surface-tertiary, #354652);
}

.job-toast.processing .job-toast-icon[b-4nl89nljm8] {
    background: var(--tint-blue-12, #152040);
    border-color: var(--accent-blue, #1E88E5);
    color: var(--accent-blue, #1E88E5);
}

.job-toast.queued .job-toast-icon[b-4nl89nljm8] {
    background: var(--surface-tertiary, #354652);
    border-color: var(--border-primary, #45525C);
    color: var(--text-muted, #5F676F);
}

.job-toast.completed .job-toast-icon[b-4nl89nljm8] {
    background: var(--tint-green-12, #1A3A20);
    border-color: var(--accent-green, #43A047);
    color: var(--accent-green, #43A047);
}

.job-toast.failed .job-toast-icon[b-4nl89nljm8] {
    background: var(--tint-red-12, #3A1A1A);
    border-color: var(--accent-red, #E53935);
    color: var(--accent-red, #E53935);
}


.job-spinner-ring[b-4nl89nljm8] {
    width: 20px;
    height: 20px;
    border: 3px solid var(--tint-blue-08, #101A2A);
    border-top-color: var(--accent-blue, #1E88E5);
    animation: spin-b-4nl89nljm8 0.8s linear infinite;
}

@keyframes spin-b-4nl89nljm8 {
    to { transform: rotate(360deg); }
}


.job-toast-body[b-4nl89nljm8] {
    flex: 1;
    min-width: 0;
}

.job-toast-title[b-4nl89nljm8] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary, #F9F5EC);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.job-toast-status[b-4nl89nljm8] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #ABB3BB);
    margin-top: 4px;
    line-height: 1.4;
    font-weight: 500;
}

.job-toast.completed .job-toast-status[b-4nl89nljm8] {
    color: var(--accent-green, #43A047);
}

.job-toast.failed .job-toast-status[b-4nl89nljm8] {
    color: var(--accent-red, #E53935);
}


.job-progress[b-4nl89nljm8] {
    margin-top: 12px;
    height: 8px;
    background: var(--surface-tertiary, #354652);
    overflow: hidden;
    border: 2px solid var(--border-primary, #45525C);
}

.job-progress-bar[b-4nl89nljm8] {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--accent-blue, #1E88E5), var(--accent-cyan, #00ACC1), var(--accent-blue, #1E88E5));
    background-size: 200% 100%;
    animation: progress-shimmer-b-4nl89nljm8 1.5s ease-in-out infinite;
}

@keyframes progress-shimmer-b-4nl89nljm8 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}


.job-toast-action[b-4nl89nljm8] {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-on-primary, #FFFFFF);
    background: var(--action-primary, #FB8C00);
    border: 2px solid var(--action-primary, #FB8C00);
    text-decoration: none;
    transition: all 0.15s ease;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 3px 3px 0px var(--shadow-elevation1, rgba(0,0,0,0.5));
}

.job-toast-action:hover[b-4nl89nljm8] {
    background: var(--action-primary-hover, #F57C00);
    border-color: var(--action-primary-hover, #F57C00);
    text-decoration: none;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--shadow-elevation1, rgba(0,0,0,0.5));
}

.job-toast-action:active[b-4nl89nljm8] {
    transform: translate(3px, 3px);
    box-shadow: none;
}


.job-toast-dismiss[b-4nl89nljm8] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-tertiary, #354652);
    border: 2px solid var(--border-primary, #45525C);
    color: var(--text-muted, #5F676F);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    font-size: 0.875rem;
}

.job-toast:hover .job-toast-dismiss[b-4nl89nljm8] {
    opacity: 1;
}

.job-toast-dismiss:hover[b-4nl89nljm8] {
    background: var(--accent-red, #E53935);
    border-color: var(--accent-red, #E53935);
    color: var(--text-on-primary, #FFFFFF);
}


.job-panel-content[b-4nl89nljm8]::-webkit-scrollbar {
    width: 10px;
}

.job-panel-content[b-4nl89nljm8]::-webkit-scrollbar-track {
    background: var(--surface-tertiary, #354652);
}

.job-panel-content[b-4nl89nljm8]::-webkit-scrollbar-thumb {
    background: var(--border-strong, #5A6A78);
}

.job-panel-content[b-4nl89nljm8]::-webkit-scrollbar-thumb:hover {
    background: var(--action-primary, #FB8C00);
}


@media (max-width: 480px) {
    .job-panel[b-4nl89nljm8] {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }
    
    .job-toast-dismiss[b-4nl89nljm8] {
        opacity: 1;
    }
    
    .job-toast-action[b-4nl89nljm8] {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}


html.theme-light .job-panel[b-4nl89nljm8] {
    background: var(--surface-primary, #F8F9FA);
    border-color: var(--border-strong, #A0A0A0);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.18);
}

html.theme-light .job-panel-header[b-4nl89nljm8] {
    background: var(--surface-secondary, #FFFFFF);
    border-bottom-color: var(--border-primary, #C0C0C0);
}

html.theme-light .job-panel-header:hover[b-4nl89nljm8] {
    background: var(--surface-tertiary, #E8E4DB);
}

html.theme-light .job-panel-title[b-4nl89nljm8] {
    color: var(--text-primary, #131921);
}

html.theme-light .connection-dot[b-4nl89nljm8] {
    border-color: var(--surface-primary, #F8F9FA);
}

html.theme-light .job-action-btn[b-4nl89nljm8] {
    background: var(--surface-tertiary, #E8E4DB);
    border-color: var(--border-primary, #C0C0C0);
    color: var(--text-secondary, #5F676F);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.12);
}

html.theme-light .job-panel-content[b-4nl89nljm8] {
    background: var(--surface-primary, #F8F9FA);
}

html.theme-light .job-toast[b-4nl89nljm8] {
    background: var(--bg-primary, #F9F5EC);
    border-color: var(--border-primary, #C0C0C0);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
}

html.theme-light .job-toast:hover[b-4nl89nljm8] {
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.12);
}

html.theme-light .job-toast.processing .job-toast-icon[b-4nl89nljm8] {
    background: var(--tint-blue-12, #BBDEFB);
}

html.theme-light .job-toast.queued .job-toast-icon[b-4nl89nljm8] {
    background: var(--surface-tertiary, #E8E4DB);
}

html.theme-light .job-toast.completed .job-toast-icon[b-4nl89nljm8] {
    background: var(--tint-green-12, #C8E6C9);
}

html.theme-light .job-toast.failed .job-toast-icon[b-4nl89nljm8] {
    background: var(--tint-red-12, #FFCDD2);
}

html.theme-light .job-spinner-ring[b-4nl89nljm8] {
    border-color: var(--tint-blue-08, #E3F2FD);
}

html.theme-light .job-toast-title[b-4nl89nljm8] {
    color: var(--text-primary, #131921);
}

html.theme-light .job-toast-status[b-4nl89nljm8] {
    color: var(--text-secondary, #5F676F);
}

html.theme-light .job-progress[b-4nl89nljm8] {
    background: var(--surface-tertiary, #E8E4DB);
    border-color: var(--border-primary, #C0C0C0);
}

html.theme-light .job-toast-dismiss[b-4nl89nljm8] {
    background: var(--surface-tertiary, #E8E4DB);
    border-color: var(--border-primary, #C0C0C0);
    color: var(--text-muted, #7A8087);
}

html.theme-light .job-toast-action[b-4nl89nljm8] {
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
}

html.theme-light .job-toast-action:hover[b-4nl89nljm8] {
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.12);
}

html.theme-light .job-panel_content[b-4nl89nljm8]::-webkit-scrollbar-track {
    background: var(--surface-tertiary, #E8E4DB);
}

html.theme-light .job-panel_content[b-4nl89nljm8]::-webkit-scrollbar-thumb {
    background: var(--border-strong, #A0A0A0);
}

/* /Components/GifCreator/PreviewStep.razor.rz.scp.css */
/* PreviewStep component styles */

.preview-step[b-kc3ow3ibha] {
    /* Empty for now, inherits from .card */
}

/* Two-column layout */
.preview-layout[b-kc3ow3ibha] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 16px;
}

/* Left: Preview area */
.preview-area[b-kc3ow3ibha] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 400px;
}

.preview-image[b-kc3ow3ibha] {
    max-width: 100%;
    max-height: 600px;
    height: auto;
    border: 3px solid var(--border-strong);
    background: var(--bg);
    display: block;
    box-shadow: var(--shadow-md);
}

.save-confirmation[b-kc3ow3ibha] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--tint-green-12);
    border: 2px solid var(--accent-green);
    color: var(--text);
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.success-icon[b-kc3ow3ibha] {
    width: 20px;
    height: 20px;
    color: var(--accent-green);
    flex-shrink: 0;
}

/* Right: Export panel */
.export-panel[b-kc3ow3ibha] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: var(--surface-primary);
    border: 2px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.panel-title[b-kc3ow3ibha] {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin: 0;
}

/* Detail list */
.detail-list[b-kc3ow3ibha] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item[b-kc3ow3ibha] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-primary);
}

.detail-item:last-child[b-kc3ow3ibha] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label[b-kc3ow3ibha] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-value[b-kc3ow3ibha] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Primary CTA button */
.btn-primary[b-kc3ow3ibha] {
    padding: 14px 24px;
    border: 3px solid var(--action-primary);
    background: var(--accent);
    color: var(--text-on-primary);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: var(--shadow-md), 0 0 15px var(--glow-color);
    width: 100%;
}

.btn-primary:hover:not(:disabled)[b-kc3ow3ibha] {
    background: var(--accent-hover);
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-offset-hover), 0 0 25px var(--glow-color-strong);
}

.btn-primary:active:not(:disabled)[b-kc3ow3ibha] {
    transform: translate(4px, 4px);
    box-shadow: 0 0 20px var(--glow-color-strong);
}

.btn-primary:disabled[b-kc3ow3ibha] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-icon[b-kc3ow3ibha] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-icon-sm[b-kc3ow3ibha] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.spinner.small[b-kc3ow3ibha] {
    width: 16px;
    height: 16px;
}

/* Secondary actions */
.secondary-actions[b-kc3ow3ibha] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

.btn-link[b-kc3ow3ibha] {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    text-shadow: none;
    justify-content: flex-start;
}

.btn-link:hover:not(:disabled)[b-kc3ow3ibha] {
    color: var(--accent);
    background: var(--accent-soft);
    transform: none;
    box-shadow: none;
}

.btn-link:disabled[b-kc3ow3ibha] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-destructive[b-kc3ow3ibha] {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    text-shadow: none;
    justify-content: flex-start;
}

.btn-destructive:hover:not(:disabled)[b-kc3ow3ibha] {
    color: var(--accent-red);
    background: var(--danger-soft);
    transform: none;
    box-shadow: none;
}

.btn-destructive:disabled[b-kc3ow3ibha] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .preview-layout[b-kc3ow3ibha] {
        grid-template-columns: 1fr;
    }

    .export-panel[b-kc3ow3ibha] {
        order: -1; /* Move panel above preview on mobile */
    }
}

@media (max-width: 600px) {
    .preview-area[b-kc3ow3ibha] {
        min-height: 300px;
    }

    .export-panel[b-kc3ow3ibha] {
        padding: 16px;
    }
}
/* /Components/GifCreator/SourceExtractStep.razor.rz.scp.css */
.source-row[b-y48m3qt23l] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
}

.url-field[b-y48m3qt23l] {
    flex: 1 1 auto;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.url-label-row[b-y48m3qt23l] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.url-label-row label[b-y48m3qt23l] {
    margin-bottom: 0;
}

.video-info[b-y48m3qt23l] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.video-info.fetching[b-y48m3qt23l] {
    color: var(--accent);
}

.video-info.error[b-y48m3qt23l] {
    color: #ef4444;
}

.url-field input[b-y48m3qt23l] {
    padding: 8px 10px;
    border: 2px solid var(--border-primary);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    height: 38px;
    box-sizing: border-box;
}

.clip-field[b-y48m3qt23l] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 120px;
}

.clip-field.start-time[b-y48m3qt23l] {
    width: auto;
}

.clip-field input[type="text"][b-y48m3qt23l],
.clip-field input[type="number"][b-y48m3qt23l] {
    padding: 8px 10px;
    border: 2px solid var(--border-primary);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
}

.time-inputs[b-y48m3qt23l] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.time-inputs input[type="number"][b-y48m3qt23l] {
    width: 56px;
    text-align: center;
}

.time-separator[b-y48m3qt23l] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
}

.clip-actions[b-y48m3qt23l] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

.clip-actions button[b-y48m3qt23l] {
    height: 38px;
    padding: 0 18px;
    box-sizing: border-box;
}

.clip-actions button[disabled][b-y48m3qt23l] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 880px) {
    .source-row[b-y48m3qt23l] {
        flex-wrap: wrap;
    }

    .url-field[b-y48m3qt23l] {
        flex: 1 1 100%;
    }

    .clip-actions[b-y48m3qt23l] {
        margin-left: auto;
    }
}

/* /Components/GifCreator/TimeRangeSlider.razor.rz.scp.css */

.time-range-slider[b-ih08xursrk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.time-range-slider-labels[b-ih08xursrk] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0 4px;
}

.time-range-slider-track[b-ih08xursrk] {
    position: relative;
    height: 38px; 
    background: var(--bg); 
    border: 2px solid var(--border-primary); 
    border-radius: 4px;
    box-sizing: border-box;
    overflow: visible; 
}

.time-range-slider-fill[b-ih08xursrk] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(0,0,0,0.05) 100%);
    border-radius: 3px;
    z-index: 1;
}

.time-range-slider-handle[b-ih08xursrk] {
    position: absolute;
    
    top: -12px;
    bottom: -12px;
    width: 10px; 
    background: var(--accent-cyan); 
    border: 1px solid var(--bg); 
    border-radius: 4px;
    cursor: ew-resize;
    box-sizing: border-box;
    transform: translateX(-50%);
    z-index: 4; 
    
    box-shadow: 0 0 10px rgba(0, 172, 193, 0.32), 0 0 22px rgba(0, 172, 193, 0.12);
}

.time-range-slider-handle.dragging[b-ih08xursrk] {
    
    box-shadow: 0 0 12px rgba(0, 172, 193, 0.36), 0 0 26px rgba(0, 172, 193, 0.16);
}

/* /Pages/Stats.razor.rz.scp.css */
.stats-loading[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--muted);
}

.spinner[b-b53q976x4x] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-right-color: #00d4ff;
    border-radius: 50%;
    animation: spinGradient-b-b53q976x4x 1s linear infinite;
}

@keyframes spinGradient-b-b53q976x4x {
    to { transform: rotate(360deg); }
}

.stats-container[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
    position: relative;
    z-index: 1;
}


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

.stat-card[b-b53q976x4x] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stat-card[b-b53q976x4x]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(var(--accent-rgb, 59, 130, 246), 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.stat-card:hover[b-b53q976x4x]::after {
    width: 300px;
    height: 300px;
}

.stat-card:hover[b-b53q976x4x] {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.stat-icon[b-b53q976x4x] {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
    display: inline-block;
    animation: float-b-b53q976x4x 3s ease-in-out infinite;
}

@keyframes float-b-b53q976x4x {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.stat-card:hover .stat-icon[b-b53q976x4x] {
    animation: spin-b-b53q976x4x 0.8s ease-in-out;
}

@keyframes spin-b-b53q976x4x {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

.stat-value[b-b53q976x4x] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

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

.stat-subtitle[b-b53q976x4x] {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* Activity Cards */
.activity-cards[b-b53q976x4x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

.activity-period[b-b53q976x4x] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.activity-label[b-b53q976x4x] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Top Channels */
.top-channels[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.channel-rank[b-b53q976x4x] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-info[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.channel-name[b-b53q976x4x] {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9375rem;
}

.channel-count[b-b53q976x4x] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.channel-bar[b-b53q976x4x] {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

.rank-icon[b-b53q976x4x] {
    font-size: 1.25rem;
}

.rank-icon.gold[b-b53q976x4x] {
    color: #ffd700;
}

.rank-icon.silver[b-b53q976x4x] {
    color: #c0c0c0;
}

.rank-icon.bronze[b-b53q976x4x] {
    color: #cd7f32;
}

.rank-number[b-b53q976x4x] {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.875rem;
}

/* Streak Badges */
.streak-badges[b-b53q976x4x] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.streak-badge[b-b53q976x4x] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.streak-badge.active[b-b53q976x4x] {
    background: var(--tint-orange-12);
    color: var(--accent);
}

.streak-badge.record[b-b53q976x4x] {
    background: var(--tint-yellow-12);
    color: var(--accent-yellow);
}

/* Heatmap */
.heatmap-container[b-b53q976x4x] {
    display: flex;
    gap: 0.5rem;
    padding: 1.5rem;
    padding-bottom: 0.5rem;
}

.heatmap-weekdays[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.6875rem;
    color: var(--muted);
    padding-top: 1.25rem;
    flex-shrink: 0;
}

.heatmap-weekdays span[b-b53q976x4x] {
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    min-width: 28px;
}

.heatmap-scroll[b-b53q976x4x] {
    flex: 1;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.heatmap-months[b-b53q976x4x] {
    display: flex;
    gap: 4px;
    width: 100%;
}

.heatmap-month[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.heatmap-month-label[b-b53q976x4x] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    padding-left: 2px;
    height: 1rem;
    text-align: center;
}

.heatmap-grid[b-b53q976x4x] {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.heatmap-week[b-b53q976x4x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.heatmap-cell[b-b53q976x4x] {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
    cursor: default;
    position: relative;
}

.heatmap-cell.empty[b-b53q976x4x] {
    visibility: hidden;
}

.heatmap-cell:not(.empty):hover[b-b53q976x4x] {
    transform: scale(1.4);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.heatmap-cell.level-0[b-b53q976x4x] {
    background: var(--surface-primary);
    border: 1px solid var(--border);
}

.heatmap-cell.level-1[b-b53q976x4x] {
    background: color-mix(in srgb, var(--accent) 25%, var(--surface-primary));
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.heatmap-cell.level-2[b-b53q976x4x] {
    background: color-mix(in srgb, var(--accent) 50%, var(--surface-primary));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.heatmap-cell.level-3[b-b53q976x4x] {
    background: color-mix(in srgb, var(--accent) 75%, var(--surface-primary));
    border-color: color-mix(in srgb, var(--accent) 80%, var(--border));
}

.heatmap-cell.level-4[b-b53q976x4x] {
    background: var(--accent);
    border-color: var(--accent);
}

.heatmap-count[b-b53q976x4x] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-on-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.heatmap-cell:hover .heatmap-count[b-b53q976x4x] {
    opacity: 1;
}

.heatmap-legend[b-b53q976x4x] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: flex-end;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border);
}

.heatmap-legend .heatmap-cell[b-b53q976x4x] {
    width: 12px;
    height: 12px;
}

.heatmap-legend .heatmap-cell:hover[b-b53q976x4x] {
    transform: none;
}

.legend-label[b-b53q976x4x] {
    font-size: 0.6875rem;
    color: var(--muted);
}

/* Activity Insights */
.activity-insights[b-b53q976x4x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

/* Fun Facts Section */
.fun-facts[b-b53q976x4x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.fun-fact[b-b53q976x4x] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--card) 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.fun-fact[b-b53q976x4x]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #00d4ff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-out;
}

.fun-fact:hover[b-b53q976x4x] {
    border-color: var(--accent);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fun-fact:hover[b-b53q976x4x]::before {
    transform: scaleX(1);
}

.fun-fact-icon[b-b53q976x4x] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(135deg, var(--accent) 0%, #00d4ff 100%);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    position: relative;
    animation: iconPulse-b-b53q976x4x 2s ease-in-out infinite;
}

.fun-fact-icon i[b-b53q976x4x] {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes iconPulse-b-b53q976x4x {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.fun-fact:hover .fun-fact-icon[b-b53q976x4x] {
    animation: iconBounce-b-b53q976x4x 0.6s ease;
}

@keyframes iconBounce-b-b53q976x4x {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
    75% { transform: scale(0.95); }
}

.fun-fact-content[b-b53q976x4x] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.fun-fact-title[b-b53q976x4x] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
}

.fun-fact-value[b-b53q976x4x] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fun-fact-subtitle[b-b53q976x4x] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Channel Item Enhancement */
.channel-item[b-b53q976x4x] {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.channel-item[b-b53q976x4x]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent), #00d4ff);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.channel-item:hover[b-b53q976x4x]::before {
    transform: scaleY(1);
}

.channel-item:hover[b-b53q976x4x] {
    border-color: var(--accent);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.channel-bar-fill[b-b53q976x4x] {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #00d4ff 100%);
    border-radius: 2px;
    transition: width 0.8s ease-out;
    position: relative;
    overflow: hidden;
}

.channel-bar-fill[b-b53q976x4x]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer-b-b53q976x4x 2s infinite;
}

@keyframes shimmer-b-b53q976x4x {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Activity Cards Enhancement */
.activity-card[b-b53q976x4x] {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.activity-card[b-b53q976x4x]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--accent) 30deg, transparent 60deg);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rotate-b-b53q976x4x 4s linear infinite;
}

@keyframes rotate-b-b53q976x4x {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.activity-card:hover[b-b53q976x4x]::before {
    opacity: 0.05;
}

.activity-card:hover[b-b53q976x4x] {
    border-color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.activity-count[b-b53q976x4x] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Insight Card Enhancement */
.insight-card[b-b53q976x4x] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.insight-card[b-b53q976x4x]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #00d4ff, var(--accent));
    background-size: 200% 100%;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.insight-card:hover[b-b53q976x4x]::after {
    transform: scaleX(1);
    animation: gradientSlide-b-b53q976x4x 2s linear infinite;
}

@keyframes gradientSlide-b-b53q976x4x {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.insight-card:hover[b-b53q976x4x] {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.insight-icon[b-b53q976x4x] {
    font-size: 1.75rem;
    color: var(--accent);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.insight-content[b-b53q976x4x] {
    flex: 1;
    min-width: 0;
}

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

.insight-label[b-b53q976x4x] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.insight-subtitle[b-b53q976x4x] {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* Progress Ring */
.insight-ring[b-b53q976x4x] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.insight-ring svg[b-b53q976x4x] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-bg[b-b53q976x4x] {
    fill: none;
    stroke: var(--border);
    stroke-width: 3;
}

.ring-fill[b-b53q976x4x] {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease-out;
}


.empty-stats[b-b53q976x4x] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-stats-icon[b-b53q976x4x] {
    font-size: 4rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.empty-stats h3[b-b53q976x4x] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.empty-stats p[b-b53q976x4x] {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.btn[b-b53q976x4x] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary[b-b53q976x4x] {
    background: var(--accent);
    color: white;
}

.btn-primary:hover[b-b53q976x4x] {
    background: var(--accent-hover);
    transform: translateY(-1px);
}


.stats-error[b-b53q976x4x] {
    text-align: center;
    padding: 2rem;
}

.stats-error p[b-b53q976x4x] {
    color: var(--muted);
    margin-bottom: 1rem;
}

.stats-error button[b-b53q976x4x] {
    margin-top: 1rem;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-grid[b-b53q976x4x] {
        grid-template-columns: 1fr;
    }
    
    .stat-value[b-b53q976x4x] {
        font-size: 1.75rem;
    }
    
    .chart-bars[b-b53q976x4x] {
        height: 140px;
        gap: 2px;
    }
    
    .chart-bar-date[b-b53q976x4x] {
        font-size: 0.5625rem;
    }
    
    .activity-cards[b-b53q976x4x] {
        grid-template-columns: 1fr;
    }
    
    .fun-facts[b-b53q976x4x] {
        grid-template-columns: 1fr;
    }
    
    .channel-item[b-b53q976x4x] {
        grid-template-columns: 40px 1fr;
    }
    
    .fun-message-banner[b-b53q976x4x] {
        padding: 1rem;
    }
    
    .fun-message-icon[b-b53q976x4x] {
        font-size: 1.5rem;
    }
    
    .fun-message-text[b-b53q976x4x] {
        font-size: 0.875rem;
    }
}

/* Fun Message Banner */
.fun-message-banner[b-b53q976x4x] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--accent) 0%, #00d4ff 100%);
    border-radius: var(--radius-lg);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-b53q976x4x 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.fun-message-banner[b-b53q976x4x]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmerBanner-b-b53q976x4x 3s infinite;
    pointer-events: none;
}

@keyframes shimmerBanner-b-b53q976x4x {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

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

.fun-message-icon[b-b53q976x4x] {
    font-size: 2rem;
    animation: twinkle-b-b53q976x4x 2s ease-in-out infinite;
}

@keyframes twinkle-b-b53q976x4x {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.2) rotate(180deg); 
        filter: brightness(1.5);
    }
}

.fun-message-text[b-b53q976x4x] {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}

/* year-select styles */
.heatmap-controls[b-b53q976x4x] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.year-select[b-b53q976x4x] {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-primary);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.year-select:hover[b-b53q976x4x] {
    border-color: var(--accent);
}

.year-select:focus[b-b53q976x4x] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* /Shared/ThemeToggle.razor.rz.scp.css */

.theme-toggle[b-ntkefvehd1] {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary, #2D3A45);
    border: 2px solid var(--accent-blue, #1E88E5);
    color: var(--accent-blue, #1E88E5);
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
    font-size: 1.125rem;
    box-shadow: 3px 3px 0px var(--shadow-elevation1, rgba(0,0,0,0.5)), 
                0 0 15px rgba(30, 136, 229, 0.3),
                0 0 30px rgba(30, 136, 229, 0.15);
}

.theme-toggle:hover[b-ntkefvehd1] {
    background: var(--accent-yellow, #FDD835);
    border-color: var(--accent-yellow, #FDD835);
    color: var(--bg-primary, #121A22);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--shadow-elevation1, rgba(0,0,0,0.5)), 
                0 0 25px rgba(253, 216, 53, 0.5),
                0 0 50px rgba(253, 216, 53, 0.25);
}

.theme-toggle:active[b-ntkefvehd1] {
    transform: translate(3px, 3px);
    box-shadow: 0 0 20px rgba(253, 216, 53, 0.6);
}


.theme-toggle .bi-sun-fill[b-ntkefvehd1] {
    color: var(--accent-yellow, #FDD835);
    filter: drop-shadow(0 0 6px rgba(253, 216, 53, 0.7)) drop-shadow(0 0 12px rgba(253, 216, 53, 0.4));
}

.theme-toggle:hover .bi-sun-fill[b-ntkefvehd1] {
    color: var(--bg-primary, #121A22);
    filter: none;
}


.theme-toggle .bi-moon-fill[b-ntkefvehd1] {
    color: var(--accent-blue, #1E88E5);
    filter: drop-shadow(0 0 6px rgba(30, 136, 229, 0.7)) drop-shadow(0 0 12px rgba(30, 136, 229, 0.4));
}

.theme-toggle:hover .bi-moon-fill[b-ntkefvehd1] {
    color: var(--bg-primary, #121A22);
    filter: none;
}


:global(html.theme-light) .theme-toggle[b-ntkefvehd1] {
    background: var(--surface-secondary, #FFFFFF);
    border-color: var(--accent-orange, #FB8C00);
    color: var(--accent-orange, #FB8C00);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15), 
                0 0 12px rgba(251, 140, 0, 0.25),
                0 0 25px rgba(251, 140, 0, 0.1);
}

:global(html.theme-light) .theme-toggle:hover[b-ntkefvehd1] {
    background: var(--accent-blue, #1E88E5);
    border-color: var(--accent-blue, #1E88E5);
    color: var(--text-on-primary, #FFFFFF);
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.12), 
                0 0 20px rgba(30, 136, 229, 0.4),
                0 0 40px rgba(30, 136, 229, 0.2);
}

:global(html.theme-light) .theme-toggle .bi-moon-fill[b-ntkefvehd1] {
    color: var(--accent-blue, #1E88E5);
    filter: drop-shadow(0 0 5px rgba(30, 136, 229, 0.6)) drop-shadow(0 0 10px rgba(30, 136, 229, 0.3));
}

:global(html.theme-light) .theme-toggle:hover .bi-moon-fill[b-ntkefvehd1] {
    color: var(--text-on-primary, #FFFFFF);
    filter: none;
}