/* SKELETONS - Loading placeholders */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-line, .skeleton-circle {
    background: linear-gradient(90deg,
        var(--bg-tertiary, #2a2a3e) 25%,
        rgba(255,255,255,0.08) 50%,
        var(--bg-tertiary, #2a2a3e) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-circle {
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}
.skeleton-card {
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    background: var(--bg-card, rgba(255,255,255,0.02));
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.skeleton-card-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.skeleton-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    background: var(--bg-card, rgba(255,255,255,0.02));
}
.skeleton-task-left { flex-shrink: 0; }
.skeleton-task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.skeleton-task-right { flex-shrink: 0; }
.skeleton-project {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.skeleton-note {
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.skeleton-dashboard-widget {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skeleton-widget-header { margin-bottom: 4px; }
.skeleton-widget-value { margin-bottom: 8px; }
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}