/* ========================================
   📋 MINHAS TAREFAS - TODO APP
   ========================================
   
   ÍNDICE:
   1. Reset & Base Styles
   2. Notifications & Modals
   3. Header & Layout
   4. Timer Pomodoro
   5. Input & Forms
   6. Tasks Display
   7. Buttons & Actions
   8. Animations
   9. Light Mode Theme
   10. Responsive Design
   
======================================== */

/* ========================================
   CSS VARIABLES - Cores e Gradientes
======================================== */
:root {
    /* Gradientes principais - tons mais suaves e refinados */
    --gradient-primary: linear-gradient(145deg, #6366f1 0%, #7c3aed 50%, #8b5cf6 100%);
    --gradient-primary-hover: linear-gradient(145deg, #5558e6 0%, #6d2fd4 50%, #7c4fe0 100%);
    --gradient-success: linear-gradient(145deg, #10b981 0%, #059669 50%, #047857 100%);
    --gradient-success-hover: linear-gradient(145deg, #059669 0%, #047857 50%, #065f46 100%);
    --gradient-danger: linear-gradient(145deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    --gradient-danger-hover: linear-gradient(145deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    --gradient-warning: linear-gradient(145deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    --gradient-info: linear-gradient(145deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    --gradient-pink: linear-gradient(145deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
    --gradient-cyan: linear-gradient(145deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%);

    /* Gradientes de fundo - mais profundos e elegantes */
    --gradient-triple-purple: linear-gradient(145deg, #6366f1 0%, #7c3aed 40%, #8b5cf6 100%);
    --gradient-triple-bg: linear-gradient(145deg, #0c0a1d 0%, #161235 30%, #1e1750 60%, #13102a 100%);

    /* Cores de texto - melhor hierarquia e legibilidade */
    --text-color: #eef0ff;
    --text-secondary: rgba(238, 240, 255, 0.68);
    --text-muted: rgba(238, 240, 255, 0.45);
    --text-dark: #0f172a;
    --text-accent: #a78bfa;

    /* Variáveis para goals dinâmicos */
    --goal-progress-gradient: linear-gradient(145deg, #6366f1 0%, #7c3aed 50%, #8b5cf6 100%);
    --goal-glow-color: rgba(139, 92, 246, 0.25);
    --category-gradient: rgba(139, 92, 246, 0.12);
    --category-text: #a78bfa;
    --category-border: rgba(139, 92, 246, 0.2);

    /* Sombras e profundidade - tom roxo sutil */
    --shadow-small: 0 2px 8px rgba(15, 10, 40, 0.2);
    --shadow-medium: 0 4px 16px rgba(15, 10, 40, 0.25);
    --shadow-large: 0 8px 32px rgba(15, 10, 40, 0.35);
    --shadow-colored: 0 4px 20px rgba(99, 102, 241, 0.15);
    --blur-backdrop: blur(16px);

    /* Bordas e cantos */
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;

    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.08);
}

/* ========================================
   1. RESET & BASE STYLES
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gradient-triple-bg);
    background-attachment: fixed;
    color: var(--text-color);
    min-height: 100vh;
    padding: 20px;
    margin: 0;
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.01em;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ========================================
   2. NOTIFICATIONS & MODALS
======================================== */

/* Notificação Interativa Melhorada */
.notification-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #1a1a1a;
    padding: 36px 48px;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 10000;
    min-width: 360px;
    opacity: 0;
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.notification-toast.success {
    border: 3px solid #10b981;
}

.notification-toast.success .notification-icon-bg {
    background: var(--gradient-success);
}

.notification-toast.delete {
    border: 3px solid #ef4444;
}

.notification-toast.delete .notification-icon-bg {
    background: var(--gradient-danger);
}

.notification-toast.pomodoro-focus {
    border: 3px solid #667eea;
}

.notification-toast.pomodoro-focus .notification-icon-bg {
    background: var(--gradient-primary);
}

.notification-toast.pomodoro-break {
    border: 3px solid #f59e0b;
}

.notification-toast.pomodoro-break .notification-icon-bg {
    background: var(--gradient-warning);
}

.notification-toast.undo {
    border: 3px solid #f59e0b;
}

.notification-toast.undo .notification-icon-bg {
    background: var(--gradient-warning);
}

.notification-toast.edit {
    border: 3px solid #3b82f6;
}

.notification-toast.edit .notification-icon-bg {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.notification-toast.warning {
    border: 3px solid #fbbf24;
}

.notification-toast.warning .notification-icon-bg {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* Modal de notas */
.notification-toast.notes-modal {
    max-width: 500px;
    border: 3px solid #8b5cf6;
}

.notification-toast.notes-modal .notification-icon-bg {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.notes-content {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.95rem;
    line-height: 1.6;
}

.notes-content::-webkit-scrollbar {
    width: 6px;
}

.notes-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.notes-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.5);
    border-radius: 3px;
}

.notes-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.7);
}

/* Modal de subtarefas */
.notification-toast.subtasks-modal {
    max-width: 500px;
    border: 3px solid #10b981;
}

.notification-toast.subtasks-modal .notification-icon-bg {
    background: var(--gradient-success);
}

.subtask-progress {
    margin: 15px 0;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.3s ease;
    border-radius: 10px;
}

.progress-text {
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 600;
}

.subtasks-list {
    max-height: 250px;
    overflow-y: auto;
    margin: 15px 0;
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.subtask-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.subtask-item.completed span {
    text-decoration: line-through;
    opacity: 0.6;
}

.subtask-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #10b981;
}

.subtask-item span {
    flex: 1;
    font-size: 0.9rem;
}

.delete-subtask-btn {
    width: 24px;
    height: 24px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    border-radius: 50%;
    color: #ef4444;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.delete-subtask-btn:hover {
    background: #ef4444;
    color: white;
}

.add-subtask-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.subtask-input {
    flex: 1;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: #1a1a1a !important;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.subtask-input:focus {
    border-color: #10b981;
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a !important;
}

.subtask-input::placeholder {
    color: #666;
}

.add-subtask-btn {
    width: 40px;
    height: 40px;
    background: #10b981;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.add-subtask-btn:hover {
    background: #059669;
    transform: scale(1.05);
}

/* Botão de fechar modal */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.2);
    border: 2px solid #ef4444;
    border-radius: 50%;
    color: #ef4444;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
}

.modal-close-btn:hover {
    background: #ef4444;
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.modal-close-btn:active {
    transform: rotate(90deg) scale(0.95);
}

/* Timer End Modal Styles */
.timer-end-modal {
    min-width: 380px;
    max-width: 450px;
}

.timer-end-modal .notification-title {
    color: #1a1a1a;
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.timer-end-modal .notification-message {
    color: #666;
    font-size: 1rem;
    margin-bottom: 20px;
}

.timer-end-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.timer-action-btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 110px;
    justify-content: center;
}

.timer-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.timer-action-btn:active {
    transform: translateY(0);
}

.timer-action-btn.complete {
    background: var(--gradient-success);
    color: white;
    border-color: #10b981;
}

.timer-action-btn.complete:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.timer-action-btn.extend {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: #3b82f6;
}

.timer-action-btn.extend:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.timer-action-btn.cancel {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-color: #ef4444;
}

.timer-action-btn.cancel:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.notification-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

.notification-icon-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseGlow 2s ease-in-out infinite;
}

.notification-emoji {
    font-size: 3rem;
    animation: bounceEmoji 0.6s ease-out 0.2s;
    display: inline-block;
}

.notification-content {
    text-align: center;
}

.notification-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
    animation: slideInText 0.4s ease-out 0.3s backwards;
}

.notification-message {
    font-size: 0.95rem;
    color: #666;
    animation: slideInText 0.4s ease-out 0.4s backwards;
}

/* Partículas de celebração */
.celebration-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 1.5rem;
    animation: floatParticle 1.5s ease-out forwards;
}

.warning-particle {
    animation: shakeFloat 1.5s ease-out forwards;
}

/* Badge de dicas suaves (validação não invasiva) */
.tip-badge {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    border: none;
    outline: none;
    color: white;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(240, 147, 251, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9998;
    max-width: 350px;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tip-badge.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tip-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

.tip-message {
    font-size: 0.9rem;
    line-height: 1.4;
    flex: 1;
}

.tip-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tip-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ========================================
   8. ANIMATIONS
======================================== */

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes popOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.6);
        transform: scale(1.05);
    }
}

@keyframes bounceEmoji {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(-10deg);
    }

    50% {
        transform: translateY(0) rotate(10deg);
    }

    75% {
        transform: translateY(-8px) rotate(-5deg);
    }
}

@keyframes slideInText {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatParticle {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) scale(0.5) rotate(360deg);
    }
}

@keyframes shakeFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px) translateY(-20px) scale(1.1) rotate(-10deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px) translateY(-40px) scale(1.1) rotate(10deg);
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) scale(0.5) rotate(0deg);
    }
}

/* Overlay escuro suave */
.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 9999;
    opacity: 0;
    animation: fadeInOverlay 0.3s forwards;
}

@keyframes fadeInOverlay {
    to {
        opacity: 1;
    }
}

@keyframes fadeOutOverlay {
    to {
        opacity: 0;
    }
}

/* ========================================
   3. HEADER & LAYOUT
======================================== */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-large);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 40px rgba(10, 8, 30, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    min-height: calc(100vh - 40px);
    transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
}

header h1 {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: var(--gradient-triple-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title-icon {
    background: none;
    -webkit-text-fill-color: initial;
    font-style: normal;
    display: inline-block;
}

/* Saudação ao usuário */
.greeting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
    padding: 16px 32px;
    background: var(--gradient-primary);
    border-radius: 40px;
    box-shadow: var(--shadow-colored), 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: slideDown 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.greeting::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

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

    50% {
        left: 0%;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Novas animações modernas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: var(--shadow-colored);
    }

    50% {
        box-shadow: var(--shadow-colored),
            0 0 30px rgba(168, 85, 247, 0.3);
    }
}

.greeting-emoji {
    font-size: 2rem;
    animation: wave 2.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.greeting-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.01em;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wave {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10%,
    30% {
        transform: rotate(14deg);
    }

    20%,
    40% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(14deg);
    }

    60% {
        transform: rotate(0deg);
    }
}

.header-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.date-display {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    text-transform: capitalize;
}

.weather-display {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-icon {
    font-size: 1.3rem;
}

.weather-temp {
    font-weight: 700;
}

.weather-location {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Frase Motivacional */
.motivational-quote {
    margin: 20px auto;
    max-width: 700px;
    padding: 20px 30px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border-left: 4px solid #818cf8;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    animation: fadeInQuote 1s ease-out;
}

@keyframes fadeInQuote {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quote-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quote-icon {
    font-size: 1.5rem;
}

.quote-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #818cf8;
}

.quote-text {
    color: #c4c8e8;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* Versículo Bíblico */
.bible-verse {
    margin: 20px auto 30px;
    max-width: 700px;
    padding: 20px 30px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(16, 185, 129, 0.08));
    border-left: 4px solid #34d399;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    animation: fadeInQuote 1s ease-out 0.2s backwards;
}

.verse-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.verse-icon {
    font-size: 1.5rem;
}

.verse-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #10b981;
}

.verse-text {
    color: #c4c8e8;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

.verse-reference {
    color: #10b981;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 5px 0 0 0;
}

/* Vista de Hoje - Próximos Compromissos */
.today-view {
    margin: 20px auto 30px;
    max-width: 700px;
    padding: 20px 30px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border-left: 4px solid #6366f1;
    border-radius: 12px;
    animation: fadeInQuote 1s ease-out 0.3s backwards;
}

.today-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.today-icon {
    font-size: 1.5rem;
}

.today-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6366f1;
}

.today-appointments {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.no-appointments {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #888;
    text-align: center;
}

.no-appointments-icon {
    font-size: 1.2rem;
    opacity: 0.7;
}

.no-appointments p {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
}

.appointment-preview {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.appointment-preview:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.appointment-preview.pessoal {
    border-left-color: #ec4899;
}

.appointment-preview.trabalho {
    border-left-color: #3b82f6;
}

.appointment-preview.estudo {
    border-left-color: #f59e0b;
}

.appointment-preview.saude {
    border-left-color: #ef4444;
}

.appointment-preview.outros {
    border-left-color: #6b7280;
}

.appointment-info h4 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.appointment-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 6px;
}

.appointment-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.appointment-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6366f1;
}

.appointment-priority {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.appointment-priority.low {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.appointment-priority.medium {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.appointment-priority.high {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.appointment-priority.urgent {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.next-appointment-countdown {
    margin-top: 15px;
    padding: 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    text-align: center;
    border: 1px dashed #6366f1;
}

.countdown-text {
    font-size: 0.8rem;
    color: #bbb;
    margin-bottom: 4px;
}

.countdown-time {
    font-size: 1.1rem;
    font-weight: 700;
    color: #6366f1;
    font-family: 'Courier New', monospace;
}

/* =========================================
   CALENDÁRIO AVANÇADO
   ========================================= */

/* Controles do Calendário Melhorados */
.calendar-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.calendar-view-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.view-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #ccc;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.view-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.today-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #10b981, #047857);
    border: none;
    color: #fff;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.today-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Legendas do Calendário */
.calendar-legends {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 15px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #ccc;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.work {
    background: #3b82f6;
}

.legend-dot.personal {
    background: #ec4899;
}

.legend-dot.health {
    background: #ef4444;
}

.legend-dot.study {
    background: #f59e0b;
}

/* Vista Semanal */
.week-view {
    width: 100%;
    overflow-x: auto;
    background: var(--card-background);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--border-color);
}

.week-view.hidden {
    display: none;
}

/* Container da timeline semanal */
.week-timeline {
    display: grid;
    grid-template-columns: 60px 1fr;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    height: fit-content;
    max-height: 600px;
    /* Limita a altura máxima */
}

.week-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 1px;
    border-bottom: 2px solid var(--primary-color);
}

.week-day-header {
    background: var(--primary-color);
    color: white;
    padding: 12px 8px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
}

.week-day-header.today {
    background: var(--accent-color);
    animation: todayPulse 2s infinite;
    box-shadow: 0 0 15px var(--accent-color);
}

.week-day-header .day-name {
    font-size: 0.9em;
    margin-bottom: 4px;
}

.week-day-header .day-date {
    font-size: 1.1em;
    font-weight: 700;
}

.week-content {
    display: grid;
    grid-template-columns: 60px 1fr;
    border: 1px solid var(--border-color);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.week-time-labels {
    background: var(--secondary-color);
    border-right: 2px solid var(--border-color);
}

.time-slot {
    height: 60px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8em;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-weight: 500;
}

.week-grid-container {
    position: relative;
    overflow-x: auto;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
}

.week-day-column {
    position: relative;
    border-right: 1px solid var(--border-color);
    min-width: 120px;
    height: fit-content;
    overflow: hidden;
}

.week-hour-slot {
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
}

.week-hour-slot:hover {
    background-color: var(--hover-color);
}

.week-hour-slot:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.week-appointment {
    position: absolute;
    left: 2px;
    right: 2px;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.8em;
    border-left: 4px solid var(--accent-color);
    z-index: 10;
    transition: all 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-appointment:hover {
    transform: translateX(-2px);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.week-appointment.work {
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-left-color: #e74c3c;
}

.week-appointment.personal {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border-left-color: #f39c12;
}

.week-appointment.health {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border-left-color: #3498db;
}

.week-appointment.social {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border-left-color: #2ecc71;
}

.week-appointment .apt-time {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.85em;
}

.week-appointment .apt-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-appointment .apt-location {
    font-size: 0.7em;
    opacity: 0.8;
    margin-top: 2px;
}

/* Linha de tempo atual */
.current-time-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
    z-index: 20;
    box-shadow: 0 0 6px var(--accent-color);
    animation: currentTimePulse 2s infinite;
}

@keyframes currentTimePulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px var(--accent-color);
    }
}

.week-header .day-header {
    background: #2a2a2a;
    padding: 15px 8px;
    text-align: center;
    border: 1px solid #404040;
}

.week-header .day-header.today {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-weight: 600;
}

/* Melhorias nos Dias do Calendário */
.calendar-day {
    position: relative;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #404040;
    background: #2a2a2a;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calendar-day:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
}

.calendar-day.today {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 3px solid #667eea;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4), 0 0 0 4px rgba(102, 126, 234, 0.1);
    animation: todayPulse 2s infinite;
}

.calendar-day.today .day-number {
    font-size: 1.2em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.calendar-day.today::before {
    content: '🔥';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.9rem;
    background: #ff6b6b;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    animation: bounce 1.5s infinite;
    z-index: 1;
}

.calendar-day.today:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5), 0 0 0 6px rgba(102, 126, 234, 0.15);
}

@keyframes todayPulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4), 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    50% {
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6), 0 0 0 8px rgba(102, 126, 234, 0.2);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-3px);
    }

    60% {
        transform: translateY(-1px);
    }
}

.calendar-day.other-month {
    color: #666;
    background: #1a1a1a;
}

.calendar-day .day-number {
    font-weight: 600;
    margin-bottom: 4px;
}

.calendar-day .day-appointments {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-appointment-indicator {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    font-size: 0.7rem;
    overflow: hidden;
}

.day-appointment-indicator.trabalho {
    background: #3b82f6;
}

.day-appointment-indicator.pessoal {
    background: #ec4899;
}

.day-appointment-indicator.saude {
    background: #ef4444;
}

.day-appointment-indicator.estudo {
    background: #f59e0b;
}

.day-appointment-indicator.outros {
    background: #6b7280;
}

.day-more-appointments {
    font-size: 0.65rem;
    color: #888;
    text-align: center;
    margin-top: 2px;
}

/* =========================================
   MODAL APRIMORADO
   ========================================= */

.modal-content.enhanced {
    max-width: 650px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(145deg, #2a2a2a, #333333);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header.gradient-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 20px 25px;
    border-radius: 12px 12px 0 0;
}

.modal-title-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-title-container h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.modal-close.modern {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close.modern:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.modal-body.enhanced-body {
    padding: 25px;
    background: #2a2a2a;
}

.form-section {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #667eea;
}

.form-section:first-child {
    border-left-color: #10b981;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-group.featured label {
    font-size: 1rem;
    font-weight: 600;
    color: #10b981;
}

.modal-input.featured {
    font-size: 1.1rem;
    padding: 15px;
    background: linear-gradient(145deg, #333, #2a2a2a);
    border: 2px solid #404040;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.modal-input.featured:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.input-hint {
    font-size: 0.75rem;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}

.required {
    color: #ef4444;
    font-weight: 700;
}

.input-row.modern {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

.category-select.enhanced,
.date-input.enhanced,
.time-input.enhanced {
    background: linear-gradient(145deg, #333, #2a2a2a);
    border: 2px solid #404040;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.category-select.enhanced:focus,
.date-input.enhanced:focus,
.time-input.enhanced:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-textarea.enhanced {
    background: linear-gradient(145deg, #333, #2a2a2a);
    border: 2px solid #404040;
    border-radius: 8px;
    padding: 15px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 100px;
}

.modal-textarea.enhanced:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.appointment-preview-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
}

.modal-buttons.enhanced {
    padding: 20px 25px;
    background: linear-gradient(145deg, #333, #2a2a2a);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #404040;
}

.modal-btn.modern {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    min-width: 120px;
    justify-content: center;
}

.modal-btn.cancel.modern {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    border: none;
    color: #fff;
}

.modal-btn.cancel.modern:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-1px);
}

.modal-btn.save.modern {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.modal-btn.save.modern:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4190);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-icon {
    font-size: 1rem;
}

header p {
    color: #999;
    font-size: 1.1rem;
}

/* NOVIDADE: Estilos do Cronômetro Pomodoro */
/* ========================================
   4. TIMER POMODORO
======================================== */

.timers-container {
    margin-bottom: 30px;
}

.timer-card {
    background: #2d2d2d;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.timer-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-align: center;
    color: #a78bfa;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.timer-icon {
    font-size: 2rem;
}

.timer-display {
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    font-family: 'Courier New', monospace;
    color: #a78bfa;
    text-shadow: 0 2px 10px rgba(167, 139, 250, 0.4);
}

.timer-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.timer-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

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

.timer-btn.start:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
}

.timer-btn.pause {
    background: var(--gradient-warning);
    color: white;
}

.timer-btn.pause:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
}

.timer-btn.reset {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.timer-btn.reset:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
}

/* Estados ativos dos botões do timer */
.timer-btn.active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.timer-btn.start.active {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.timer-btn.pause.active {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}

.timer-btn.reset.active {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.pomodoro-status {
    text-align: center;
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    width: 100%;
}

/* Estatísticas do Pomodoro */
.pomodoro-stats {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.stat-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.focus-stat {
    border-left: 3px solid #a78bfa;
}

.break-stat {
    border-left: 3px solid #22c55e;
}

.stat-icon {
    font-size: 2rem;
    line-height: 1;
}

.stat-info {
    flex: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.3s ease;
}

.stat-value.updated {
    animation: statUpdate 0.6s ease;
}

@keyframes statUpdate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        color: #fbbf24;
    }

    100% {
        transform: scale(1);
    }
}

.focus-stat .stat-value {
    color: #a78bfa;
}

.break-stat .stat-value {
    color: #22c55e;
}

/* Botão de resetar estatísticas */
.reset-stats-btn {
    margin-top: 15px;
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.reset-stats-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
    transform: translateY(-2px);
}

.reset-stats-btn:active {
    transform: translateY(0);
}

/* Estilos existentes da lista de tarefas */
.input-section {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 28px;
    border-radius: var(--radius-medium);
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(10, 8, 30, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

/* ========================================
   5. INPUT & FORMS
======================================== */

#taskInput {
    width: 100%;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-small);
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 20px;
    outline: none;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: var(--shadow-small);
    line-height: 1.5;
}

#taskInput:focus {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px var(--goal-glow-color),
        var(--shadow-medium);
    border-color: var(--text-accent);
    color: var(--text-color);
    transform: translateY(-2px);
}

#taskInput::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Novos inputs avançados */
.advanced-inputs {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    padding: 24px;
    border-radius: var(--radius-medium);
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-small);
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group.full-width {
    grid-column: 1 / -1;
}

.input-group label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 2px;
}

.category-select,
.goal-select,
.date-input,
.time-input {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-small);
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.category-select:focus,
.goal-select:focus,
.date-input:focus,
.time-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-accent);
    box-shadow: 0 0 0 2px var(--goal-glow-color);
}

.category-select option,
.goal-select option {
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-color);
    padding: 8px;
}

.category-select:focus,
.goal-select:focus,
.date-input:focus,
.time-input:focus {
    border-color: #667eea;
    background: #4a4a4a;
    color: #ffffff !important;
}

.time-input::placeholder {
    color: #999;
}

.notes-input {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-small);
    color: var(--text-color);
    font-size: 0.95rem;
    outline: none;
    resize: vertical;
    min-height: 80px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    line-height: 1.5;
}

.notes-input:focus {
    border-color: var(--text-accent);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    box-shadow: 0 0 0 2px var(--goal-glow-color);
}

.notes-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Estilos para Recorrência */
.recurrence-end {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        max-height: 100px;
        transform: translateY(0);
    }
}

/* Estilos para seleção de prioridade com cores */
#appointmentPriority {
    background: #404040;
}

#appointmentPriority option[value="low"] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

#appointmentPriority option[value="medium"] {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

#appointmentPriority option[value="high"] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

#appointmentPriority option[value="urgent"] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Estilos para detecção de conflitos */
.conflict-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid #ef4444;
    padding: 12px;
    border-radius: 8px;
    margin: 10px 0;
    animation: pulse 0.5s ease-in-out;
}

.conflict-warning .conflict-icon {
    color: #ef4444;
    font-size: 1.2rem;
    margin-right: 8px;
}

.conflict-warning p {
    margin: 0;
    color: #ef4444;
    font-weight: 500;
    font-size: 0.9rem;
}

.conflict-suggestions {
    margin-top: 10px;
    padding: 10px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    border-left: 3px solid #6366f1;
}

.conflict-suggestions h4 {
    margin: 0 0 8px 0;
    color: #6366f1;
    font-size: 0.85rem;
    font-weight: 600;
}

.suggested-times {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.time-suggestion {
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    border: 1px solid #6366f1;
    border-radius: 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.time-suggestion:hover {
    background: #6366f1;
    color: #fff;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.input-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.priority-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #ccc;
}

.priority-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f59e0b;
}

#addBtn {
    background: var(--gradient-primary);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 28px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

#addBtn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: var(--gradient-primary-hover);
    border-color: rgba(255, 255, 255, 0.15);
}

#addBtn:active {
    transform: translateY(-1px) scale(0.98);
}

#addBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

#addBtn:hover::before {
    left: 100%;
}

.tasks-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
}

.tasks-section {
    border-radius: var(--radius-large);
    padding: 32px;
    min-height: 450px;
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-backdrop);
    -webkit-backdrop-filter: var(--blur-backdrop);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tasks-section.pending {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-colored),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tasks-section.pending::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.tasks-section.completed {
    background: var(--gradient-success);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tasks-section.completed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.section-header h2 {
    margin-bottom: 12px;
    font-weight: 700;
}

.tasks-section h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    margin-bottom: 24px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.01em;
}

/* Cabeçalho da seção com botão de ação */
.section-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.section-header-with-action h2 {
    margin-bottom: 0;
    flex: 1;
}

/* Botão de apagar todas */
.clear-all-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--gradient-danger);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

.clear-all-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: var(--gradient-danger-hover);
    border-color: rgba(255, 255, 255, 0.3);
}

.clear-all-btn:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.clear-all-btn .btn-icon {
    font-size: 1.1rem;
}

.clear-all-btn .btn-text {
    font-size: 0.9rem;
}

/* Esconder texto em telas pequenas */
@media (max-width: 768px) {
    .clear-all-btn .btn-text {
        display: none;
    }

    .clear-all-btn {
        padding: 8px 12px;
    }
}

/* Ocultar botão quando não há tarefas suficientes */
.clear-all-btn.hidden {
    display: none;
}

/* Modal de confirmação de exclusão */
.confirm-modal {
    max-width: 450px;
}

.confirm-modal .modal-header {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    padding: 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.confirm-modal .modal-header .warning-icon {
    font-size: 2rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.confirm-modal .modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.confirm-modal .modal-body {
    padding: 25px;
    text-align: center;
}

.confirm-modal .modal-body p {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    color: #e2e8f0;
}

.confirm-modal .modal-body .warning-text {
    font-size: 0.95rem;
    color: #fca5a5;
    font-weight: 500;
    margin-top: 10px;
}

.modal-btn.delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.modal-btn.delete:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* ========================================
   6. TASKS DISPLAY
======================================== */

.task-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideIn 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.task-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--task-accent-color, linear-gradient(180deg, #6366f1, #8b5cf6));
    transition: width 0.3s ease, box-shadow 0.3s ease;
}

.task-item:hover::before {
    width: 6px;
    box-shadow: 0 0 15px var(--task-glow-color, rgba(99, 102, 241, 0.3));
}

.task-item.priority {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border-color: rgba(251, 191, 36, 0.2);
    --task-accent-color: linear-gradient(180deg, #fbbf24, #f59e0b);
    --task-glow-color: rgba(251, 191, 36, 0.3);
}

.task-item.priority::after {
    content: '⭐';
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    opacity: 0.8;
    animation: star-glow 2s infinite;
}

@keyframes star-glow {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(10deg);
    }
}

.task-item.overdue {
    background: linear-gradient(145deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.08));
    border-color: rgba(255, 107, 107, 0.3);
    --task-accent-color: linear-gradient(180deg, #ff6b6b, #e53e3e);
    --task-glow-color: rgba(255, 107, 107, 0.4);
    animation: pulse-overdue 3s infinite;
}

@keyframes pulse-overdue {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
    }
}

.task-item.due-today {
    background: linear-gradient(145deg, rgba(255, 167, 38, 0.15), rgba(255, 167, 38, 0.08));
    border-color: rgba(255, 167, 38, 0.3);
    --task-accent-color: linear-gradient(180deg, #ffa726, #f57c00);
    --task-glow-color: rgba(255, 167, 38, 0.4);
}

.task-item.completed {
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.12), rgba(76, 175, 80, 0.06));
    border-color: rgba(76, 175, 80, 0.2);
    --task-accent-color: linear-gradient(180deg, #4caf50, #388e3c);
    opacity: 0.8;
}

.task-item:last-child {
    margin-bottom: 0;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-item:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.task-item.priority:hover {
    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.3), 0 0 20px rgba(255, 193, 7, 0.2);
}

.task-item.overdue:hover {
    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.3), 0 0 20px rgba(255, 107, 107, 0.2);
}

.task-item.due-today:hover {
    box-shadow: 0 12px 30px rgba(255, 167, 38, 0.3), 0 0 20px rgba(255, 167, 38, 0.2);
}

/* Animação de celebração para tarefas */
.task-item.celebrating {
    animation: task-celebrate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes task-celebrate {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    25% {
        transform: scale(1.02) rotate(1deg);
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    }

    50% {
        transform: scale(1.05) rotate(-1deg);
        box-shadow: 0 12px 48px rgba(102, 126, 234, 0.4);
    }

    75% {
        transform: scale(1.02) rotate(0.5deg);
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    }

    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
}

/* Estrutura dos cards melhorada */
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.task-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.task-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.task-status-badge {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.task-status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    transition: opacity 0.3s ease;
}

.task-status-badge:hover::before {
    opacity: 0.7;
}

.task-status-badge.normal {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
    color: white;
}

.task-status-badge.priority {
    background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
    color: white;
    animation: badge-pulse 2s infinite;
}

.task-status-badge.urgent {
    background: linear-gradient(135deg, #ff6b6b 0%, #e53e3e 100%);
    color: white;
    animation: badge-urgent 1.5s infinite;
}

.task-status-badge.completed {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
}

@keyframes badge-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes badge-urgent {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.task-quick-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateY(-5px);
}

.task-item:hover .task-quick-actions {
    opacity: 1;
    transform: translateY(0);
}

.task-quick-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-size: 12px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.task-quick-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.task-quick-btn:hover::before {
    left: 100%;
}

.task-quick-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px) scale(1.05);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.task-quick-btn:active {
    transform: translateY(0) scale(1);
    transition: all 0.1s ease;
}

.task-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--category-border);
    background: var(--category-gradient);
    color: var(--category-text);
    transition: all 0.3s ease;
}

.task-category-tag:hover {
    transform: scale(1.05);
}

.task-deadline-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.task-deadline-countdown {
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
}

.task-deadline-countdown.urgent {
    background: linear-gradient(135deg, #ff6b6b, #ff8a80);
    color: white;
    animation: countdown-urgent 1s infinite;
}

.task-deadline-countdown.soon {
    background: linear-gradient(135deg, #ffa726, #ffcc02);
    color: white;
}

.task-deadline-countdown.normal {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

@keyframes countdown-urgent {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.task-actions-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.task-actions-left {
    display: flex;
    gap: 8px;
}

.task-actions-right {
    display: flex;
    gap: 6px;
}

.task-btn-enhanced {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.task-btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.task-btn-enhanced:hover::before {
    left: 100%;
}

.task-btn-enhanced.priority-toggle {
    background: linear-gradient(135deg, #ffc107, #ff8f00);
    color: white;
}

.task-btn-enhanced.duplicate {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.task-btn-enhanced.postpone {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
}

.task-number {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
    align-self: flex-start;
    margin-top: 2px;
}

/* Número roxo para tarefas pendentes */
.tasks-section.pending .task-number {
    background: rgba(255, 255, 255, 0.95);
    color: #a78bfa;
    border: 2px solid #a78bfa;
}

/* Número verde para tarefas concluídas */
.tasks-section.completed .task-number {
    background: rgba(255, 255, 255, 0.95);
    color: #22c55e;
    border: 2px solid #22c55e;
}

/* Container para número e conteúdo da tarefa em linha */
.task-main {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.task-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.task-text {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #ffffff !important;
    font-weight: 600;
}

/* Estilos dos meta badges - padronizados */
.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.task-category,
.task-date,
.task-time,
.task-priority {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid;
    transition: all 0.3s ease;
    color: #ffffff !important;
}

.task-category {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.task-goal {
    background: rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.6);
    color: #a78bfa;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.task-date {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.6);
    color: #60a5fa;
}

.task-time {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
    color: #22c55e;
}

.task-priority {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.6);
    color: #fbbf24;
}

.overdue-badge {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #ef4444 !important;
    border-color: #ef4444 !important;
    font-weight: 700 !important;
    animation: pulseOverdue 1.5s ease-in-out infinite;
}

.today-badge {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
    font-weight: 600 !important;
    animation: pulseToday 2s ease-in-out infinite;
}

@keyframes pulseOverdue {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        box-shadow: 0 0 12px 3px rgba(220, 38, 38, 0.8);
        transform: scale(1.05);
    }
}

@keyframes pulseToday {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }

    50% {
        opacity: 0.85;
        box-shadow: 0 0 8px 2px rgba(255, 107, 107, 0.7);
    }
}

.task-time {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid #10b981;
}

.task-time-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.timer-control-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0ea5e9);
    border: 1.5px solid #0ea5e9;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.65rem;
    padding: 0;
}

.timer-control-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    border-color: #0ea5e9;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.5);
}

.timer-control-btn:active {
    transform: scale(0.95);
}

.task-extra-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.view-notes-btn,
.view-subtasks-btn {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid;
    color: #ffffff !important;
}

.view-notes-btn {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
}

.view-notes-btn:hover {
    background: rgba(139, 92, 246, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.view-subtasks-btn {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

.view-subtasks-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Tarefa atrasada */
.task-item.overdue {
    border-left: 5px solid #dc2626;
    animation: shakeOverdue 3s ease-in-out infinite;
}

@keyframes shakeOverdue {

    0%,
    100% {
        transform: translateX(0);
    }

    2%,
    6% {
        transform: translateX(-2px);
    }

    4%,
    8% {
        transform: translateX(2px);
    }
}

/* Tarefa para hoje */
.task-item.today {
    border-left: 4px solid #ff6b6b;
}

.task-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 8px;
}

.task-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

/* ========================================
   7. BUTTONS & ACTIONS
======================================== */

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

.complete-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.edit-btn {
    background: var(--gradient-primary);
    color: white;
}

.edit-btn:hover {
    background: var(--gradient-primary-hover);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

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

.delete-btn:hover {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
    transform: scale(1.1);
    animation: shakeDelete 1s ease infinite;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
}

.undo-btn {
    background: #f59e0b;
    color: white;
}

.undo-btn:hover {
    background: #d97706;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.empty-state {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 50px;
}

.completed .task-text {
    text-decoration: line-through;
    opacity: 0.8;
    color: #ffffff !important;
}

/* NOVIDADE: Modal de Edição */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.modal-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: #2d2d2d;
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

.modal-header h3 {
    color: #667eea;
    font-size: 1.5rem;
    margin: 0;
}

.edit-icon {
    color: #f59e0b;
    font-style: normal;
    margin-right: 8px;
}

.modal-close {
    background: none;
    border: none;
    color: #999;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}

.modal-close:hover {
    color: #fff;
}

.modal-input {
    width: 100%;
    padding: 15px;
    background: #404040;
    border: 2px solid #555;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    margin-bottom: 20px;
    outline: none;
    transition: all 0.3s ease;
}

.modal-input:focus {
    background: #4a4a4a;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
}

.modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.modal-btn.cancel {
    background: #555;
    color: white;
}

.modal-btn.cancel:hover {
    background: #666;
    transform: translateY(-2px);
}

.modal-btn.save {
    background: var(--gradient-primary);
    color: white;
}

.modal-btn.save:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* NOVIDADE: Animação de Conclusão Melhorada */
@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }

    10% {
        transform: scale(1.15) rotate(-5deg);
    }

    20% {
        transform: scale(1.15) rotate(5deg);
    }

    30% {
        transform: scale(1.15) rotate(-5deg);
    }

    40% {
        transform: scale(1.15) rotate(5deg);
    }

    50% {
        transform: scale(1.2) rotate(0deg);
    }

    60% {
        transform: scale(1.1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes confetti {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)) scale(0);
        opacity: 0;
    }
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    50% {
        box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
    }
}

.task-item.celebrating {
    animation: celebrate 0.8s ease-out;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(52, 211, 153, 0.4)) !important;
    border: 2px solid #10b981 !important;
    position: relative;
    z-index: 10;
}

.task-item.celebrating::before {
    content: '✨';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    animation: sparkle 0.8s ease-out;
    pointer-events: none;
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2) rotate(360deg);
    }
}

.confetti {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    animation: confetti 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 9999;
}

.confetti.square {
    border-radius: 2px;
}

.confetti.triangle {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid;
}

/* Animação de sucesso no botão */
@keyframes buttonSuccess {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        background: #10b981;
    }

    100% {
        transform: scale(1);
    }
}

.complete-btn.success {
    animation: buttonSuccess 0.6s ease-out;
}

/* NOVIDADE: Animação do botão de deletar */
@keyframes buttonDelete {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.2) rotate(-10deg);
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }

    75% {
        transform: scale(1.2) rotate(-10deg);
    }

    100% {
        transform: scale(0) rotate(0deg);
    }
}

.delete-btn.deleting {
    animation: buttonDelete 0.5s ease-out;
}

/* NOVIDADE: Animação da tarefa sendo deletada */
@keyframes taskDelete {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }

    100% {
        transform: scale(0.8) rotateX(90deg);
        opacity: 0;
    }
}

.task-item.deleting {
    animation: taskDelete 0.5s ease-out forwards;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.3)) !important;
    border: 2px solid #ef4444 !important;
}

/* Partículas de destruição */
.particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #ef4444;
    pointer-events: none;
    animation: particleExplode 0.8s ease-out forwards;
    z-index: 9999;
}

@keyframes particleExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* NOVIDADE: Animação do botão de desfazer */
@keyframes buttonUndo {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.3) rotate(-360deg);
    }

    100% {
        transform: scale(1) rotate(-720deg);
    }
}

.undo-btn.undoing {
    animation: buttonUndo 0.7s ease-out;
}

/* Animação da tarefa sendo desfeita */
@keyframes taskUndo {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.9) rotate(-5deg);
    }

    50% {
        transform: scale(1.1) rotate(5deg);
    }

    75% {
        transform: scale(0.9) rotate(-5deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.task-item.undoing {
    animation: taskUndo 0.7s ease-out;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.3)) !important;
    border: 2px solid #f59e0b !important;
}

/* Efeito de ondas para desfazer */
.wave {
    position: fixed;
    border: 3px solid #f59e0b;
    border-radius: 50%;
    pointer-events: none;
    animation: waveExpand 0.8s ease-out forwards;
    z-index: 9999;
}

@keyframes waveExpand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
    }

    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
}

/* ANIMAÇÃO 1: Shake para botão deletar no hover */
@keyframes shakeDelete {

    0%,
    100% {
        transform: translateX(0) scale(1.1);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-3px) scale(1.1) rotate(-2deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(3px) scale(1.1) rotate(2deg);
    }
}

/* ANIMAÇÃO 2: Rotação contínua para botão desfazer no hover */
@keyframes rotateUndo {
    0% {
        transform: rotate(0deg) scale(1.1);
    }

    50% {
        transform: rotate(-180deg) scale(1.15);
    }

    100% {
        transform: rotate(-360deg) scale(1.1);
    }
}

/* ANIMAÇÃO EXTRA: Pulso para botão deletar ao clicar */
@keyframes pulseDelete {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* ANIMAÇÃO EXTRA: Bounce para botão desfazer ao clicar */
@keyframes bounceUndo {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.8) rotate(-15deg);
    }

    50% {
        transform: scale(1.2) rotate(0deg);
    }

    75% {
        transform: scale(0.95) rotate(15deg);
    }
}

/* Adicionar efeito de pulso ao deletar */
.delete-btn:active {
    animation: pulseDelete 0.6s ease-out;
}

/* Adicionar efeito de bounce ao desfazer */
.undo-btn:active {
    animation: bounceUndo 0.5s ease-out;
}

/* ============================================
           DARK/LIGHT MODE E BARRA DE PROGRESSO
           ============================================ */

/* Botão de alternar tema */
.theme-toggle {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-colored),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.theme-toggle:hover {
    transform: rotate(180deg) scale(1.08);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: var(--gradient-primary-hover);
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-toggle:active {
    transform: rotate(180deg) scale(0.96);
}

/* Botão de Som */
.sound-toggle {
    position: fixed;
    top: 24px;
    right: 96px;
    width: 60px;
    height: 60px;
    background: var(--gradient-success);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
}

.sound-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: var(--gradient-success-hover);
    border-color: rgba(255, 255, 255, 0.3);
}

.sound-toggle:active {
    transform: scale(0.96);
}

.sound-toggle.muted {
    background: var(--gradient-danger);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sound-toggle.muted:hover {
    background: var(--gradient-danger-hover);
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Barra de progresso */
.progress-container {
    margin-top: 25px;
    animation: slideDown 0.5s ease-out;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.progress-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.progress-container.celebrating::before {
    left: 100%;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

.progress-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.progress-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.progress-detail-item {
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-detail-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.progress-detail-value {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
}

.category-progress {
    margin-top: 1.5rem;
}

.category-progress-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.category-progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.category-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin: 0 0.75rem;
    overflow: hidden;
}

.category-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.category-progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-width: 35px;
}

/* ===== Estatísticas Semanais ===== */
.weekly-stats {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.weekly-stats-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 500;
}

.weekly-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    height: 120px;
    padding: 0 4px;
}

.weekly-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}

.weekly-bar-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.weekly-bar {
    width: 100%;
    min-height: 4px;
    border-radius: 6px 6px 4px 4px;
    background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    max-width: 40px;
}

.weekly-bar.today {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}

.weekly-bar.empty {
    background: rgba(255, 255, 255, 0.08);
}

.weekly-bar-day {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 4px;
    text-transform: uppercase;
    font-weight: 500;
}

.weekly-bar-day.today {
    color: #a78bfa;
    font-weight: 700;
}

.weekly-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.weekly-summary strong {
    color: var(--text-color);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    border-radius: 10px;
    transition: width 0.5s ease-in-out, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.6);
    width: 0%;
    position: relative;
    overflow: hidden;
}

/* Cores dinâmicas baseadas no progresso */
.progress-fill.progress-low {
    background: linear-gradient(90deg, #ff6b6b 0%, #ff8e8e 100%);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.6);
}

.progress-fill.progress-medium {
    background: linear-gradient(90deg, #ffa726 0%, #ffcc02 100%);
    box-shadow: 0 0 10px rgba(255, 167, 38, 0.6);
}

.progress-fill.progress-high {
    background: linear-gradient(90deg, #66bb6a 0%, #81c784 100%);
    box-shadow: 0 0 10px rgba(102, 187, 106, 0.6);
}

.progress-fill.progress-complete {
    background: linear-gradient(90deg, #4caf50 0%, #66bb6a 50%, #81c784 100%);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
    animation: progressComplete 0.6s ease-in-out;
}

@keyframes progressComplete {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text {
    text-align: center;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #ccc;
    font-weight: 600;
    transition: color 0.3s ease, transform 0.2s ease;
}

.progress-text.progress-complete {
    color: #4caf50;
    transform: scale(1.05);
}

.progress-details {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.8rem;
    color: #999;
}

.progress-details .detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.progress-celebration {
    animation: celebration 0.6s ease-in-out;
}

@keyframes celebration {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.1) rotate(-2deg);
    }

    50% {
        transform: scale(1.15) rotate(2deg);
    }

    75% {
        transform: scale(1.1) rotate(-1deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Animações para marcos e celebrações */
@keyframes milestone-popup {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }

    80% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-60%) scale(0.8);
    }
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateY(100px) rotate(360deg);
    }
}

/* ========================================
   9. LIGHT MODE THEME
======================================== */

/* MODO CLARO */
body.light-mode {
    background: linear-gradient(145deg, #fefeff 0%, #f5f3ff 25%, #ede9fe 50%, #e8e5f5 100%);
    color: #1e1b4b;
    transition: all 0.5s ease;
}

body.light-mode::before {
    background: radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
}

body.light-mode .container {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.1);
    box-shadow: 0 25px 80px rgba(99, 102, 241, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.5);
    color: #1e1b4b;
}

body.light-mode header h1 {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 30%, #8b5cf6 70%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    font-weight: 800;
}

body.light-mode header p {
    color: #6366f1;
    font-weight: 500;
}

body.light-mode .greeting {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
    color: white;
    border: none;
}

body.light-mode .date-display {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}

body.light-mode .weather-display {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
}

body.light-mode .motivational-quote {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%);
    border-left: 4px solid #818cf8;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.06);
}

body.light-mode .quote-title {
    color: #6366f1;
    font-weight: 700;
}

body.light-mode .quote-text {
    color: #4c4a6e;
    font-weight: 500;
}

body.light-mode .bible-verse {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(52, 211, 153, 0.06));
    border-left-color: #34d399;
}

body.light-mode .verse-title {
    color: #059669;
}

body.light-mode .verse-text {
    color: #4c4a6e;
    font-weight: 500;
}

body.light-mode .verse-reference {
    color: #059669;
    font-weight: 700;
}

/* Vista de Hoje - Light Mode */
body.light-mode .today-view {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-left-color: #6366f1;
}

body.light-mode .today-title {
    color: #4338ca;
}

body.light-mode .appointment-preview {
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

body.light-mode .appointment-preview:hover {
    background: rgba(15, 23, 42, 0.08);
}

body.light-mode .appointment-info h4 {
    color: #0f172a;
}

body.light-mode .appointment-info p {
    color: #475569;
}

body.light-mode .appointment-time {
    color: #4338ca;
}

body.light-mode .next-appointment-countdown {
    background: rgba(99, 102, 241, 0.08);
    border-color: #a5b4fc;
}

body.light-mode .countdown-text {
    color: #64748b;
}

body.light-mode .countdown-time {
    color: #4338ca;
}

/* Conflitos - Light Mode */
body.light-mode .conflict-warning {
    background: rgba(239, 68, 68, 0.08);
    border-color: #fca5a5;
}

body.light-mode .conflict-warning .conflict-icon,
body.light-mode .conflict-warning p {
    color: #dc2626;
}

body.light-mode .conflict-suggestions {
    background: rgba(99, 102, 241, 0.08);
    border-left-color: #a5b4fc;
}

body.light-mode .conflict-suggestions h4 {
    color: #4338ca;
}

body.light-mode .time-suggestion {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border-color: #a5b4fc;
}

body.light-mode .time-suggestion:hover {
    background: #6366f1;
    color: #fff;
}

/* Calendário - Light Mode */
body.light-mode .view-btn {
    color: #475569;
}

body.light-mode .view-btn.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

body.light-mode .view-btn:hover:not(.active) {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

body.light-mode .today-btn {
    background: linear-gradient(135deg, #10b981, #047857);
}

body.light-mode .calendar-legends {
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

body.light-mode .legend-item {
    color: #475569;
}

body.light-mode .calendar-day {
    background: #fff;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .calendar-day:hover {
    background: rgba(99, 102, 241, 0.05);
    border-color: #a5b4fc;
}

body.light-mode .calendar-day.today {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: 3px solid #6366f1;
    color: #ffffff;
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4), 0 0 0 4px rgba(99, 102, 241, 0.1);
}

body.light-mode .calendar-day.today .day-number {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.light-mode .calendar-day.today::before {
    background: #ef4444;
    border-color: #ffffff;
}

body.light-mode .calendar-day.today:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 35px rgba(99, 102, 241, 0.5), 0 0 0 6px rgba(99, 102, 241, 0.15);
}

body.light-mode .calendar-day.other-month {
    background: #f8fafc;
    color: #94a3b8;
}

/* Fins de semana em vermelho nos cabeçalhos dos dias - modo claro */
body.light-mode .weekday:first-child,
body.light-mode .weekday:last-child {
    color: #dc2626 !important;
    font-weight: 800;
}

/* Modal - Light Mode */
body.light-mode .modal-content.enhanced {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
}

body.light-mode .modal-header.gradient-header {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

body.light-mode .modal-body.enhanced-body {
    background: #fff;
}

body.light-mode .form-section {
    background: rgba(15, 23, 42, 0.02);
    border-left-color: #a5b4fc;
}

body.light-mode .section-title {
    color: #4338ca;
}

body.light-mode .input-group.featured label {
    color: #059669;
}

body.light-mode .modal-input.featured,
body.light-mode .category-select.enhanced,
body.light-mode .date-input.enhanced,
body.light-mode .time-input.enhanced,
body.light-mode .modal-textarea.enhanced {
    background: linear-gradient(145deg, #fff, #f8fafc);
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .modal-input.featured:focus,
body.light-mode .category-select.enhanced:focus,
body.light-mode .date-input.enhanced:focus,
body.light-mode .time-input.enhanced:focus,
body.light-mode .modal-textarea.enhanced:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

body.light-mode .input-hint {
    color: #64748b;
}

body.light-mode .appointment-preview-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

body.light-mode .modal-buttons.enhanced {
    background: linear-gradient(145deg, #f8fafc, #fff);
    border-top-color: #e2e8f0;
}

body.light-mode .input-section,
body.light-mode .timer-card {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.06), 0 1px 3px rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(20px);
}

body.light-mode .timer-card h3 {
    color: #0f172a;
    font-weight: 700;
}

body.light-mode .timer-btn.start {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    border: none;
}

body.light-mode .timer-btn.pause {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
    border: none;
}

body.light-mode .timer-btn.reset {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
    border: none;
}

body.light-mode .stat-item {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

body.light-mode .stat-item:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

body.light-mode .stat-label {
    color: #64748b;
    font-weight: 500;
}

body.light-mode .stat-value {
    color: #0f172a;
    font-weight: 700;
}

body.light-mode .focus-stat .stat-value {
    color: #7c3aed;
    font-weight: 800;
}

body.light-mode .break-stat .stat-value {
    color: #10b981;
    font-weight: 800;
}

body.light-mode .reset-stats-btn {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

body.light-mode .reset-stats-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.5);
    color: #b91c1c;
}

body.light-mode #addBtn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    font-weight: 700;
}

body.light-mode #addBtn:hover {
    background: linear-gradient(135deg, #5558e6, #7c4fe0);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

body.light-mode .priority-checkbox {
    color: #0f172a;
    font-weight: 600;
}

body.light-mode .priority-checkbox input:checked+span {
    color: #b45309;
    font-weight: 700;
}

body.light-mode #taskInput {
    background: white;
    color: #1e1b4b !important;
    border: 2px solid rgba(99, 102, 241, 0.15);
    font-weight: 600;
}

body.light-mode #taskInput:focus {
    background: white;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    color: #1e1b4b !important;
}

body.light-mode #taskInput::placeholder {
    color: #8b8aad;
    font-weight: 500;
}

/* Light mode para inputs avançados */
body.light-mode .advanced-inputs {
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.light-mode .category-select,
body.light-mode .date-input,
body.light-mode .time-input,
body.light-mode .notes-input,
body.light-mode .goal-select {
    background: white;
    color: #0f172a !important;
    border: 2px solid #cbd5e1;
    font-weight: 600;
    font-size: 14px;
}

body.light-mode .category-select:focus,
body.light-mode .date-input:focus,
body.light-mode .time-input:focus,
body.light-mode .notes-input:focus,
body.light-mode .goal-select:focus {
    background: white;
    border-color: #5a67d8;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.2);
    outline: none;
    color: #0f172a !important;
}

body.light-mode .category-select option,
body.light-mode .goal-select option {
    color: #0f172a !important;
    font-weight: 600;
    padding: 8px;
    background: white;
}

body.light-mode .time-input::placeholder,
body.light-mode .notes-input::placeholder {
    color: #64748b !important;
    font-weight: 500;
}

body.light-mode .input-group label {
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.light-mode .task-text {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

body.light-mode .task-item.completed .task-text {
    color: #475569 !important;
    font-weight: 600 !important;
    text-decoration: line-through;
}

body.light-mode .task-category {
    background: rgba(90, 103, 216, 0.15);
    font-weight: 700;
    color: #5a67d8 !important;
    border: 1px solid #5a67d8;
}

body.light-mode .task-date {
    background: rgba(236, 72, 153, 0.15);
    color: #be185d !important;
    border: 1px solid #ec4899;
    font-weight: 700;
}

body.light-mode .task-time {
    background: rgba(5, 150, 105, 0.15);
    color: #047857 !important;
    border: 1px solid #10b981;
    font-weight: 700;
}

body.light-mode .task-priority {
    background: rgba(245, 158, 11, 0.2);
    color: #b45309 !important;
    border: 1px solid #f59e0b;
    font-weight: 700;
}

body.light-mode .view-notes-btn {
    background: rgba(139, 92, 246, 0.12);
    color: #1e293b !important;
    border-color: #8b5cf6;
}

body.light-mode .view-notes-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

body.light-mode .view-subtasks-btn {
    background: rgba(16, 185, 129, 0.12);
    color: #1e293b !important;
    border-color: #10b981;
}

body.light-mode .view-subtasks-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

body.light-mode .timer-control-btn {
    background: linear-gradient(135deg, #334155, #0ea5e9);
    color: #ffffff;
    border-color: #0ea5e9;
}

body.light-mode .timer-control-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.5);
}

body.light-mode .subtask-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

body.light-mode .subtask-input:focus {
    background: rgba(0, 0, 0, 0.08);
    border-color: #10b981;
}

body.light-mode .subtask-item {
    background: rgba(0, 0, 0, 0.03);
}

body.light-mode .subtask-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .notes-content {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

body.light-mode .modal-close-btn {
    background: rgba(239, 68, 68, 0.15);
    border-color: #dc2626;
    color: #dc2626;
}

body.light-mode .modal-close-btn:hover {
    background: #dc2626;
    color: white;
}

body.light-mode .tasks-section {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
    backdrop-filter: blur(10px);
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.light-mode .tasks-section h2 {
    color: #0f172a !important;
    text-shadow: none;
    font-weight: 800;
}

/* Botão de apagar todas no modo light */
body.light-mode .clear-all-btn {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

body.light-mode .clear-all-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

body.light-mode .confirm-modal .modal-body p {
    color: #1e293b;
}

body.light-mode .confirm-modal .modal-body .warning-text {
    color: #dc2626;
}

body.light-mode .tasks-section.pending {
    border-left: 6px solid #5a67d8;
    border-top: 1px solid rgba(90, 103, 216, 0.3);
}

body.light-mode .tasks-section.completed {
    border-left: 6px solid #059669;
    border-top: 1px solid rgba(5, 150, 105, 0.3);
}

body.light-mode .task-item {
    background: white;
    border: 1px solid rgba(99, 102, 241, 0.1);
    color: #1e1b4b;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.06);
}

body.light-mode .task-item:hover {
    background: #faf8ff;
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

body.light-mode .task-number {
    background: white;
    color: #1e1b4b;
    border: 2px solid #a5b4fc;
    font-weight: 800;
}

body.light-mode .tasks-section.pending .task-number {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: #6366f1;
    font-weight: 700;
}

body.light-mode .tasks-section.completed .task-number {
    background: var(--gradient-success);
    color: white;
    border-color: #059669;
    font-weight: 700;
}

body.light-mode .empty-state {
    color: #6366f1;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.04);
    padding: 20px;
    border-radius: 12px;
    border: 2px dashed rgba(99, 102, 241, 0.2);
}

body.light-mode .progress-bar {
    background: #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .progress-text {
    color: #059669;
    font-weight: 700;
}

body.light-mode .progress-details {
    color: #64748b;
}

body.light-mode .progress-text.progress-complete {
    color: #059669;
}

body.light-mode .modal-overlay {
    background: rgba(15, 23, 42, 0.7);
}

body.light-mode .modal-content {
    background: white;
    color: #0f172a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 2px solid #e2e8f0;
}

body.light-mode .modal-input,
body.light-mode .modal-textarea {
    background: #f8fafc;
    color: #0f172a;
    border: 2px solid #cbd5e1;
    font-weight: 500;
}

body.light-mode .modal-input:focus,
body.light-mode .modal-textarea:focus {
    background: white;
    border-color: #5a67d8;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.2);
}

body.light-mode .modal-header h3 {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .edit-icon {
    color: #5a67d8;
}

body.light-mode .timer-display {
    color: #5a67d8;
    font-weight: 800;
}

body.light-mode .pomodoro-status {
    color: #475569;
    font-weight: 700;
    background: rgba(90, 103, 216, 0.1);
}

body.light-mode .theme-toggle {
    background: var(--gradient-primary);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
}

body.light-mode .theme-toggle:hover {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.7);
    background: var(--gradient-primary-hover);
}

body.light-mode .notification-toast {
    background: white;
    color: #0f172a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    border: 2px solid #e2e8f0;
}

body.light-mode .notification-title {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .notification-message {
    color: #475569;
    font-weight: 600;
}

body.light-mode .tip-badge {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 8px 32px rgba(240, 147, 251, 0.4);
}

/* Gamificação e Conquistas no modo claro */
body.light-mode .achievements-section {
    background: white;
    border: 2px solid #e2e8f0;
}

body.light-mode .section-header h2 {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .user-title-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 2px solid rgba(102, 126, 234, 0.3);
}

body.light-mode .title-name {
    color: #5a67d8;
    font-weight: 800;
}

body.light-mode .title-label {
    color: #475569;
    font-weight: 600;
}

body.light-mode .stat-card {
    background: white;
    border: 2px solid #e2e8f0;
}

body.light-mode .stat-card.level {
    background: linear-gradient(135deg, rgba(90, 103, 216, 0.08), rgba(107, 70, 193, 0.08));
    border: 2px solid rgba(90, 103, 216, 0.4);
}

body.light-mode .stat-card.points {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.08), rgba(245, 87, 108, 0.08));
    border: 2px solid rgba(240, 147, 251, 0.4);
}

body.light-mode .stat-card.streak {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.08));
    border: 2px solid rgba(245, 158, 11, 0.4);
}

body.light-mode .stat-card.completed {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08), rgba(16, 185, 129, 0.08));
    border: 2px solid rgba(5, 150, 105, 0.4);
}

body.light-mode .stat-label {
    color: #475569;
    font-weight: 700;
}

body.light-mode .stat-value {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .daily-challenge {
    background: linear-gradient(135deg, rgba(90, 103, 216, 0.08), rgba(107, 70, 193, 0.08));
    border: 2px solid rgba(90, 103, 216, 0.4);
}

body.light-mode .challenge-title-text {
    color: #5a67d8;
    font-weight: 800;
}

body.light-mode .challenge-description {
    color: #334155;
    font-weight: 600;
}

body.light-mode .challenge-progress-text {
    color: #0f172a;
    font-weight: 700;
}

body.light-mode .challenge-reward {
    color: #5a67d8;
    font-weight: 800;
}

body.light-mode .level-info {
    color: #0f172a;
    font-weight: 700;
}

body.light-mode .level-bar {
    background: #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .achievement-item {
    background: white;
    border: 2px solid #e2e8f0;
}

body.light-mode .achievement-item.unlocked {
    border-color: #ec4899;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(240, 147, 251, 0.05));
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

body.light-mode .achievement-name {
    color: #0f172a;
    font-weight: 700;
}

body.light-mode .achievement-description {
    color: #475569;
    font-weight: 500;
}

body.light-mode .achievement-xp {
    color: #5a67d8;
    font-weight: 700;
}

/* Metas no modo claro */
body.light-mode .goals-section {
    background: white;
    border: 2px solid #e2e8f0;
}

body.light-mode .add-goal-btn {
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    border: none;
}

body.light-mode .add-goal-btn:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.4);
}

body.light-mode .goal-card {
    background: white;
    border: 2px solid #e2e8f0;
}

body.light-mode .appointment-card {
    background: white;
    border: 2px solid #fce7f3;
}

body.light-mode .appointment-card.today {
    border-color: #10b981;
    background: #d1fae5;
}

body.light-mode .appointment-title {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .appointment-description {
    background: #f8fafc;
    color: #475569;
}

body.light-mode .day-appointment-item {
    background: #fce7f3;
    border-color: #f9a8d4;
}

body.light-mode .goal-title {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .goal-description {
    color: #475569;
    font-weight: 500;
}

body.light-mode .goal-deadline {
    color: #be185d;
    font-weight: 700;
}

body.light-mode .goal-progress-text {
    color: #0f172a;
    font-weight: 700;
}

/* Calendário no modo claro */
body.light-mode .calendar-section {
    background: white;
    border: 2px solid #e2e8f0;
}

body.light-mode .calendar-month-year {
    color: #0f172a;
    font-weight: 800;
}

body.light-mode .calendar-day {
    background: white;
    border: 2px solid #e2e8f0;
    color: #1e293b;
}

body.light-mode .calendar-day:hover {
    background: #f8fafc;
    border-color: #5a67d8;
}

body.light-mode .calendar-day.today {
    background: linear-gradient(135deg, rgba(90, 103, 216, 0.15), rgba(107, 70, 193, 0.15));
    border-color: #5a67d8;
    font-weight: 800;
}

/* Feriados no modo claro - dourado elegante */
body.light-mode .calendar-day.holiday {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 215, 64, 0.2));
    border-color: #ffa000;
}

body.light-mode .calendar-day.holiday .day-number {
    color: #f57c00;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(245, 124, 0, 0.2);
}

body.light-mode .day-item-badge.appointments {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.5), rgba(164, 113, 247, 0.5));
    color: #9333ea;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

body.light-mode .calendar-day.has-tasks {
    border-color: #ec4899;
}

body.light-mode .day-number {
    color: #0f172a;
    font-weight: 700;
}

body.light-mode .day-task-count {
    background: #5a67d8;
    color: white;
    font-weight: 700;
}

/* ========================================
   10. RESPONSIVE DESIGN
======================================== */

@media (max-width: 768px) {

    /* Layout geral */
    .container {
        padding: 12px;
        max-width: 100%;
    }

    .tasks-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .tasks-section {
        padding: 15px;
    }

    /* Header */
    header h1 {
        font-size: 1.8rem;
        padding-right: 65px;
        padding-left: 10px;
    }

    .greeting {
        padding: 10px 20px;
        margin: 10px 10px;
        max-width: 100%;
    }

    .greeting-emoji {
        font-size: 1.5rem;
    }

    .greeting-text {
        font-size: 0.95rem;
    }

    .header-info {
        flex-direction: column;
        gap: 10px;
    }

    .date-display,
    .weather-display {
        font-size: 0.9rem;
        padding: 6px 15px;
    }

    /* Quotes */
    .motivational-quote,
    .bible-verse {
        padding: 15px 20px;
        margin: 15px 10px;
    }

    .quote-text,
    .verse-text {
        font-size: 0.95rem;
    }

    .quote-icon,
    .verse-icon {
        font-size: 1.5rem;
    }

    .verse-reference {
        font-size: 0.85rem;
    }

    /* Inputs */
    #taskInput {
        padding: 12px 15px;
        font-size: 14px;
    }

    .input-controls {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    #addBtn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    .priority-checkbox {
        justify-content: center;
        padding: 8px;
    }

    .input-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .input-group {
        min-width: 0;
    }

    .category-select,
    .date-input,
    .time-input,
    .notes-input,
    .goal-select {
        font-size: 13px;
        padding: 10px 12px;
    }

    .input-group label {
        font-size: 11px;
    }

    .advanced-inputs {
        padding: 15px;
        gap: 15px;
    }

    /* Vista de Hoje - Responsivo */
    .today-view {
        padding: 15px 20px;
        margin: 15px auto 20px;
    }

    .today-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .today-title {
        font-size: 0.8rem;
    }

    .appointment-preview {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }

    .appointment-info h4 {
        font-size: 0.9rem;
    }

    .appointment-info p {
        font-size: 0.75rem;
    }

    .appointment-status {
        align-items: flex-start;
        width: 100%;
    }

    .appointment-time {
        font-size: 0.8rem;
    }

    .appointment-priority {
        font-size: 0.65rem;
        padding: 1px 6px;
    }

    .next-appointment-countdown {
        padding: 10px;
    }

    .countdown-time {
        font-size: 1rem;
    }

    /* Calendário Responsivo */
    .calendar-controls {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .calendar-view-toggle {
        width: 100%;
        justify-content: center;
    }

    .view-btn {
        flex: 1;
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    .calendar-navigation {
        justify-content: center;
    }

    .today-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .calendar-legends {
        justify-content: center;
        gap: 12px;
    }

    .legend-item {
        font-size: 0.75rem;
    }

    .calendar-day {
        min-height: 60px;
        padding: 6px;
    }

    .day-appointment-indicator {
        height: 3px;
    }

    .day-more-appointments {
        font-size: 0.6rem;
    }

    /* Modal Responsivo */
    .modal-content.enhanced {
        width: 98%;
        max-width: none;
        margin: 10px;
        max-height: 95vh;
    }

    .modal-header.gradient-header {
        padding: 15px 20px;
    }

    .modal-title-container h3 {
        font-size: 1.1rem;
    }

    .modal-body.enhanced-body {
        padding: 20px;
    }

    .form-section {
        margin-bottom: 20px;
        padding: 15px;
    }

    .input-row.modern {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .modal-input.featured {
        font-size: 1rem;
        padding: 12px;
    }

    .category-select.enhanced,
    .date-input.enhanced,
    .time-input.enhanced {
        padding: 10px;
        font-size: 0.9rem;
    }

    .modal-textarea.enhanced {
        padding: 12px;
        font-size: 0.9rem;
    }

    .modal-buttons.enhanced {
        padding: 15px 20px;
        gap: 10px;
    }

    .modal-btn.modern {
        padding: 10px 16px;
        font-size: 0.9rem;
        min-width: 100px;
    }

    .btn-icon {
        font-size: 0.9rem;
    }

    /* Tasks */
    .tasks-section h2 {
        font-size: 1.2rem;
        gap: 8px;
    }

    .tasks-section .icon {
        font-size: 1rem;
    }

    .task-item {
        padding: 12px;
    }

    .task-meta {
        flex-wrap: wrap;
        gap: 6px;
    }

    .task-content h3 {
        font-size: 0.95rem;
    }

    .task-actions {
        gap: 6px;
    }

    .action-btn {
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    .notes-content {
        max-height: 150px;
        font-size: 0.9rem;
    }

    /* Timer */
    .timer-display {
        font-size: 2.5rem;
    }

    /* Theme toggle */
    .theme-toggle {
        width: 45px;
        height: 45px;
        font-size: 1.4rem;
        top: 15px;
        right: 15px;
    }

    /* Notifications */
    .notification-toast {
        min-width: 280px;
        max-width: 90%;
        padding: 25px 30px;
    }

    .notification-toast.notes-modal {
        max-width: 90%;
    }

    .notification-icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .notification-emoji {
        font-size: 2.2rem;
    }

    .notification-title {
        font-size: 1.1rem;
    }

    .notification-message {
        font-size: 0.85rem;
    }

    .celebration-particle {
        font-size: 1.2rem;
    }

    /* Badge de dica responsivo */
    .tip-badge {
        bottom: 20px;
        right: 20px;
        left: 20px;
        max-width: none;
        padding: 14px 20px;
        font-size: 0.85rem;
    }

    .tip-icon {
        font-size: 1.3rem;
    }

    .tip-close {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }
}

/* Ajuste específico para telas de 393x852 e similares */
@media (max-width: 400px) {

    /* Container ainda mais compacto */
    .container {
        padding: 8px;
    }

    header h1 {
        font-size: 1.6rem;
        padding-right: 60px;
        padding-left: 8px;
    }

    /* Inputs menores */
    #taskInput {
        padding: 10px 12px;
        font-size: 13px;
    }

    #addBtn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .category-select,
    .date-input,
    .time-input,
    .notes-input,
    .goal-select {
        font-size: 12px;
        padding: 8px 10px;
    }

    .input-group label {
        font-size: 10px;
    }

    /* Tasks sections menores */
    .tasks-section {
        padding: 12px;
        margin-bottom: 15px;
    }

    .tasks-section h2 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .task-item {
        padding: 10px;
    }

    .task-content h3 {
        font-size: 0.9rem;
    }

    .task-badge {
        font-size: 9px;
        padding: 3px 8px;
    }

    .action-btn {
        padding: 5px 7px;
        font-size: 0.8rem;
    }

    .timer-end-modal {
        min-width: 300px;
        max-width: 90%;
    }

    .timer-end-actions {
        flex-direction: column;
        gap: 8px;
    }

    .timer-action-btn {
        width: 100%;
        min-width: unset;
    }

    .timer-control-btn {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
    }

    /* Cards de estatísticas ainda menores */
    .stat-card {
        padding: 10px 8px;
        gap: 6px;
        flex-direction: column;
        text-align: center;
    }

    .stat-icon {
        font-size: 22px;
    }

    .stat-label {
        font-size: 9px;
        letter-spacing: 0.3px;
    }

    .stat-value {
        font-size: 16px;
    }

    .user-stats {
        gap: 8px;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Conquistas em telas pequenas */
    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }

    .achievement-item {
        padding: 8px;
    }

    .achievement-icon {
        font-size: 24px;
    }

    .achievement-name {
        font-size: 10px;
    }

    /* Greeting e badges */
    .greeting {
        padding: 8px 15px;
        margin: 8px;
    }

    .greeting-text {
        font-size: 0.85rem;
    }

    .date-display,
    .weather-display {
        font-size: 0.8rem;
        padding: 5px 12px;
    }

    /* Citações */
    .motivational-quote,
    .bible-verse {
        padding: 12px 15px;
        margin: 12px 8px;
    }

    .quote-text,
    .verse-text {
        font-size: 0.85rem;
    }
}

/* ========================================
   METAS E OBJETIVOS
======================================== */

.goals-section {
    margin: 30px 0;
}

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

.add-goal-btn {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.add-goal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.goals-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.empty-state-goals {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
}

.goal-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.goal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--goal-progress-gradient);
    transition: height 0.3s ease;
}

.goal-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

.goal-card:hover::before {
    height: 6px;
    box-shadow: 0 0 20px var(--goal-glow-color);
}

.goal-card.completed {
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05));
    border-color: rgba(76, 175, 80, 0.3);
}

.goal-card.overdue {
    background: linear-gradient(145deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.05));
    border-color: rgba(255, 107, 107, 0.3);
    animation: pulse-overdue 2s ease-in-out infinite;
}

@keyframes pulse-overdue {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
    }
}

.goal-card.celebrating {
    animation: goal-celebration 0.6s ease-in-out;
}

@keyframes goal-celebration {

    0%,
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    25% {
        transform: translateY(-3px) scale(1.05) rotate(1deg);
    }

    75% {
        transform: translateY(-3px) scale(1.05) rotate(-1deg);
    }
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.goal-header-left {
    flex: 1;
}

.goal-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.goal-status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.goal-status-badge.in-progress {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.goal-status-badge.completed {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    color: white;
    animation: pulse-completed 2s ease-in-out infinite;
}

.goal-status-badge.overdue {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8a80 100%);
    color: white;
}

@keyframes pulse-completed {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.goal-quick-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.goal-card:hover .goal-quick-actions {
    opacity: 1;
}

.goal-quick-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 12px;
}

.goal-quick-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.goal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--text-color), rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    transition: all 0.3s ease;
}

.goal-card:hover .goal-title {
    transform: translateX(2px);
}

.goal-category {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 16px;
    background: var(--category-gradient);
    color: var(--category-text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    border: 1px solid var(--category-border);
}

.goal-category:hover {
    transform: scale(1.05);
}

.goal-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
    opacity: 0.9;
}

.goal-progress {
    margin: 20px 0;
    position: relative;
}

.goal-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.goal-progress-percentage {
    font-size: 24px;
    font-weight: 700;
    background: var(--goal-progress-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.goal-progress-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.goal-progress-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.goal-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    animation: progress-shimmer 2s infinite;
}

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

    100% {
        transform: translateX(100%);
    }
}

.goal-progress-fill {
    height: 100%;
    background: var(--goal-progress-gradient);
    border-radius: 12px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px var(--goal-glow-color);
}

.goal-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: progress-flow 1.5s infinite;
}

@keyframes progress-flow {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.goal-progress-text {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goal-progress-increment {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.goal-increment-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-increment-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.goal-deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-deadline-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.goal-days-left {
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
}

.goal-days-left.urgent {
    background: linear-gradient(135deg, #ff6b6b, #ff8a80);
    color: white;
    animation: pulse-urgent 1.5s infinite;
}

.goal-days-left.soon {
    background: linear-gradient(135deg, #ffa726, #ffcc02);
    color: white;
}

.goal-days-left.normal {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

@keyframes pulse-urgent {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.goal-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.goal-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.goal-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.goal-btn:hover::before {
    left: 100%;
}

.goal-btn.edit {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}

.goal-btn.delete {
    background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.goal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.goal-btn:active {
    transform: translateY(0);
}

/* Modal de Meta */
.modal-goal {
    max-width: 600px;
}

.modal-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    resize: vertical;
    transition: all 0.3s ease;
}

.modal-textarea:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   SEÇÃO: COMPROMISSOS E AGENDAMENTOS
   ============================================ */

/* Botões de ação */
.goals-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.add-appointment-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
    position: relative;
    overflow: hidden;
}

.add-appointment-btn::before {
    content: '📅';
    position: absolute;
    left: -30px;
    transition: all 0.3s ease;
}

.add-appointment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
    animation: pulse-appointment 1.5s infinite;
}

.add-appointment-btn:hover::before {
    animation: slide-calendar 0.6s ease-in-out;
}

@keyframes pulse-appointment {

    0%,
    100% {
        box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
    }

    50% {
        box-shadow: 0 8px 25px rgba(240, 147, 251, 0.6);
    }
}

@keyframes slide-calendar {
    0% {
        left: -30px;
        opacity: 0;
    }

    50% {
        left: 50%;
        transform: translateX(-50%) scale(1.5) rotate(15deg);
        opacity: 1;
    }

    100% {
        left: calc(100% + 30px);
        opacity: 0;
    }
}

/* Modal de Compromisso */
.modal-appointment {
    max-width: 600px;
}

.appointment-icon {
    font-size: 24px;
    margin-right: 10px;
}

.time-input {
    padding: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
}

.time-input:focus {
    outline: none;
    border-color: #f093fb;
    background: rgba(255, 255, 255, 0.08);
}

/* Lista de Compromissos */
.appointments-list {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.empty-state-appointments {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(240, 147, 251, 0.05);
    border: 2px dashed rgba(240, 147, 251, 0.2);
    border-radius: 15px;
}

/* Card de Compromisso */
.appointment-card {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%);
    border: 2px solid rgba(240, 147, 251, 0.2);
    border-radius: 15px;
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.appointment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(240, 147, 251, 0.3);
    border-color: rgba(240, 147, 251, 0.5);
}

.appointment-card.today {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
}

.appointment-card.past {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.appointment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.appointment-title-section {
    flex: 1;
}

.appointment-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.appointment-category {
    display: inline-block;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(240, 147, 251, 0.2);
    color: #f093fb;
}

.appointment-actions {
    display: flex;
    gap: 8px;
}

.appointment-edit-btn,
.appointment-delete-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.appointment-edit-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.appointment-delete-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
}

.appointment-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 12px;
}

.appointment-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.detail-icon {
    font-size: 16px;
}

.detail-text {
    color: var(--text-color);
}

.appointment-description {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 10px;
}

.appointment-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.today-badge {
    background: #10b981;
    color: white;
}

.past-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
}

/* Notificação de Compromisso */
.appointment-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    min-width: 300px;
    max-width: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transform: translateX(500px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.appointment-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.appointment-notification.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.appointment-notification.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.appointment-notification-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.appointment-notification-message {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.appointment-notification-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.appointment-notification-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Calendário - Badges de Items */
.calendar-day .day-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    width: 100%;
    max-width: 100%;
}

.day-item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-item-badge.tasks {
    background: rgba(102, 126, 234, 0.3);
    color: #667eea;
}

.day-item-badge.appointments {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.4), rgba(164, 113, 247, 0.4));
    color: #f093fb;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.day-item-badge.appointments .badge-icon {
    font-size: 14px;
}

.day-item-badge.appointments .badge-text {
    font-size: 10px;
    text-transform: lowercase;
}

.calendar-day.has-items {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Modal do Dia - Seções */
.day-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.day-section-title:first-child {
    margin-top: 0;
}

.day-appointment-item {
    background: rgba(240, 147, 251, 0.1);
    border: 1px solid rgba(240, 147, 251, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
}

.day-appointment-time {
    font-size: 14px;
    color: #f093fb;
    font-weight: 600;
    margin-bottom: 6px;
}

.day-appointment-title {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 6px;
}

.day-appointment-location {
    font-size: 13px;
    color: var(--text-secondary);
}

.day-appointment-hint {
    font-size: 11px;
    color: #f093fb;
    margin-top: 8px;
    font-style: italic;
    text-align: center;
    opacity: 0.7;
}

.day-appointment-item.clickable:hover {
    background: rgba(240, 147, 251, 0.2);
    transform: scale(1.02);
    transition: all 0.3s ease;
}

/* Modal de Detalhes do Compromisso */
.appointment-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.appointment-detail-modal.show {
    opacity: 1;
    visibility: visible;
}

.appointment-detail-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(240, 147, 251, 0.3);
    border-radius: 20px;
    padding: 0;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUpModal 0.3s ease-out;
}

@keyframes slideUpModal {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.appointment-detail-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.appointment-detail-header h3 {
    margin: 0;
    font-size: 20px;
    color: white;
}

.appointment-detail-header .modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.appointment-detail-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.appointment-detail-body {
    padding: 25px;
    max-height: 50vh;
    overflow-y: auto;
}

.appointment-detail-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.appointment-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(240, 147, 251, 0.2);
}

.appointment-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.appointment-detail-item.description {
    flex-direction: column;
    align-items: flex-start;
}

.detail-label {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 100px;
}

.detail-value {
    font-size: 15px;
    color: var(--text-color);
    font-weight: 500;
}

.detail-value-block {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 8px;
}

.appointment-detail-actions {
    display: flex;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.appointment-detail-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.appointment-detail-btn.edit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.appointment-detail-btn.edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
}

.appointment-detail-btn.delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.appointment-detail-btn.delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
}

/* Modal de Confirmação de Exclusão */
.delete-confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.delete-confirmation-modal.show {
    opacity: 1;
    visibility: visible;
}

.delete-confirmation-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(239, 68, 68, 0.5);
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(239, 68, 68, 0.3);
    animation: shake 0.5s ease-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.delete-confirmation-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
    }

    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.8));
    }
}

.delete-confirmation-content h3 {
    font-size: 28px;
    color: #ef4444;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.delete-confirmation-content p {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.delete-confirmation-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.delete-confirm-btn {
    padding: 14px 30px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.delete-confirm-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
}

.delete-confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.delete-confirm-btn.delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.delete-confirm-btn.delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
    animation: shake-btn 0.5s ease-in-out;
}

@keyframes shake-btn {

    0%,
    100% {
        transform: translateY(-2px) rotate(0deg);
    }

    25% {
        transform: translateY(-2px) rotate(-3deg);
    }

    75% {
        transform: translateY(-2px) rotate(3deg);
    }
}

/* ========================================
   CALENDÁRIO DE TAREFAS
======================================== */

.calendar-section {
    margin: 40px 0;
}

.calendar-section .section-header h2 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.calendar-nav-btn {
    background: rgba(102, 126, 234, 0.2);
    border: 2px solid rgba(102, 126, 234, 0.4);
    color: var(--text-color);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.calendar-nav-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

.calendar-month-year {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    min-width: 200px;
    text-align: center;
}

.calendar-container {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    max-width: 100%;
    overflow: hidden;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.weekday {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fins de semana em vermelho nos cabeçalhos dos dias */
.weekday:first-child,
.weekday:last-child {
    color: #ff6b6b !important;
    font-weight: 800;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    width: 100%;
}

.calendar-day {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 90px;
    overflow: hidden;
}

.calendar-day:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.calendar-day.other-month {
    opacity: 0.3;
    pointer-events: none;
}

.calendar-day.today {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.4);
}

/* Estilo para feriados - tons de dourado/amarelo elegante */
.calendar-day.holiday {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 215, 64, 0.15));
    border-color: rgba(255, 193, 7, 0.5);
}

.calendar-day.holiday .day-number {
    color: #ffc107;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.day-item-badge.holiday-label {
    background: transparent;
    color: #ffffff;
    font-size: 8px;
    padding: 1px 0;
    border-radius: 0;
    font-weight: 800;
    box-shadow: none;
    text-align: center;
    justify-content: center;
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    opacity: 0.95;
}

.day-item-badge.holiday-badge {
    background: linear-gradient(135deg, #ffc107, #ffd740);
    color: #1a1a2e;
    font-size: 8px;
    padding: 3px 5px;
    border-radius: 4px;
    font-weight: 800;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4);
    animation: pulse-holiday 2s ease-in-out infinite;
    text-align: center;
    justify-content: center;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
    letter-spacing: 0.3px;
}

.day-item-badge.holiday-badge .badge-icon {
    font-size: 11px;
    flex-shrink: 0;
}

.day-item-badge.holiday-badge .badge-text {
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.2px;
}

@keyframes pulse-holiday {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(255, 107, 107, 0.5);
    }
}

.calendar-day.has-tasks {
    border-color: rgba(255, 215, 0, 0.6);
}

.calendar-day.has-tasks::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 8px #FFD700;
}

.day-number {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0;
}

.day-task-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(102, 126, 234, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.calendar-day.has-tasks .day-task-count {
    background: rgba(255, 215, 0, 0.3);
    color: #FFD700;
}

/* Modal de Tarefas do Dia */
.day-tasks-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.day-tasks-modal.show {
    display: flex;
}

.day-tasks-content {
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.98) 0%, rgba(24, 24, 38, 0.98) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.day-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.day-tasks-header h3 {
    font-size: 22px;
    color: var(--text-color);
    margin: 0;
}

.day-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.day-task-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
}

.day-task-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.4);
    transform: translateX(5px);
}

.day-task-item.completed {
    opacity: 0.7;
    border-color: rgba(46, 213, 115, 0.4);
}

.day-task-text {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 8px;
}

.day-task-item.completed .day-task-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.day-task-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

.day-task-badge {
    background: rgba(102, 126, 234, 0.3);
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 11px;
}

/* ========================================
   CONQUISTAS E GAMIFICAÇÃO
======================================== */

.achievements-section {
    margin: 40px 0;
}

/* Card de Título do Usuário */
.user-title-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.15) 100%);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

.user-title-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.title-icon {
    font-size: 48px;
    animation: titleFloat 3s ease-in-out infinite;
}

@keyframes titleFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

.title-content {
    flex: 1;
}

.title-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.title-name {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    min-width: 0;
    /* Permite que o conteúdo encolha */
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.stat-card.level {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    border-color: rgba(102, 126, 234, 0.5);
}

.stat-card.points {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(245, 87, 108, 0.15) 100%);
    border-color: rgba(240, 147, 251, 0.5);
}

.stat-card.streak {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.15) 100%);
    border-color: rgba(245, 158, 11, 0.5);
}

.stat-card.completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.15) 100%);
    border-color: rgba(16, 185, 129, 0.5);
}

.stat-icon {
    font-size: 28px;
    flex-shrink: 0;
    /* Evita que o ícone encolha */
}

.stat-info {
    flex: 1;
    min-width: 0;
    /* Permite que o texto quebre */
}

.stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

/* Desafio Diário */
.daily-challenge {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 2px solid rgba(102, 126, 234, 0.4);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.daily-challenge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.challenge-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.challenge-icon {
    font-size: 32px;
    animation: challengeBounce 2s ease-in-out infinite;
}

@keyframes challengeBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.challenge-title-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.challenge-description {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    padding-left: 44px;
}

.challenge-progress-bar {
    width: 100%;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.challenge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.challenge-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

.challenge-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-secondary);
    padding-left: 44px;
}

.challenge-reward {
    font-weight: 700;
    color: #FFD700;
    font-size: 14px;
}

/* Barra de Progresso de Nível */
.level-progress {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
}

.level-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-color);
    font-weight: 600;
}

.level-bar {
    width: 100%;
    height: 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.level-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 15px;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

.level-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Grid de Conquistas */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.achievement-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.achievement-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.achievement-item.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-item.unlocked {
    border-color: #f093fb;
    box-shadow: 0 0 20px rgba(240, 147, 251, 0.5);
}

.achievement-badge {
    font-size: 48px;
    margin-bottom: 10px;
    animation: bounce 0.5s ease;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.achievement-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.achievement-description {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.achievement-xp {
    font-size: 12px;
    color: #FFD700;
    font-weight: 700;
    margin-top: 5px;
}

/* Notificação de Conquista */
.achievement-notification {
    position: fixed;
    top: -200px;
    right: 20px;
    background: var(--gradient-primary);
    border: 3px solid #FFD700;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.achievement-notification.show {
    top: 20px;
    animation: achievementPulse 0.5s ease;
}

@keyframes achievementPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.achievement-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.achievement-notification .achievement-badge {
    font-size: 48px;
    animation: rotateBadge 1s ease;
}

@keyframes rotateBadge {
    0% {
        transform: rotate(0deg) scale(0);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.achievement-info {
    color: white;
}

.achievement-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.achievement-notification .achievement-name {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
}

.achievement-notification .achievement-xp {
    font-size: 14px;
    color: #FFD700;
    font-weight: 700;
}

/* Tier badge nas conquistas */
.achievement-tier {
    font-size: 10px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: 0.5px;
}

.achievement-item[data-tier="bronze"] {
    border-color: #cd7f32;
}

.achievement-item[data-tier="prata"] {
    border-color: #c0c0c0;
}

.achievement-item[data-tier="ouro"] {
    border-color: #ffd700;
}

.achievement-item[data-tier="diamante"] {
    border-color: #b9f2ff;
}

.achievement-item[data-tier="lendario"] {
    border-color: #ff1493;
}

.achievement-item[data-tier="especial"] {
    border-color: #9370db;
}

/* Notificação de Título */
.title-notification {
    position: fixed;
    top: -200px;
    right: 20px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: 3px solid #FFF;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10001;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.title-notification.show {
    top: 100px;
    animation: titlePulse 0.5s ease;
}

@keyframes titlePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.title-notification-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.title-badge {
    font-size: 48px;
    animation: rotateBadge 1s ease;
}

.title-info {
    color: white;
}

.title-message {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.title-name {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

/* Notificação de Desafio */
.challenge-notification {
    position: fixed;
    top: -200px;
    right: 20px;
    background: var(--gradient-primary);
    border: 3px solid #a78bfa;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    max-width: 350px;
}

.challenge-notification.show {
    top: 190px;
    animation: challengePulse 0.5s ease;
}

@keyframes challengePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.challenge-notification-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.challenge-badge {
    font-size: 48px;
    animation: rotateBadge 1s ease;
}

.challenge-info {
    color: white;
}

.challenge-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
}

.challenge-description {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.challenge-reward {
    font-size: 16px;
    color: #FFD700;
    font-weight: 700;
}

/* Notificação de Meta */
.goal-notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    min-width: 300px;
    max-width: 500px;
}

.goal-notification.show {
    top: 20px;
}

.goal-notification.success {
    border-left: 5px solid #4caf50;
}

.goal-notification.error {
    border-left: 5px solid #f44336;
}

.goal-notification-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    gap: 15px;
}

.goal-notification-message {
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.goal-notification-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.goal-notification-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Modal de Confirmação */
.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.confirmation-modal.show {
    opacity: 1;
}

.confirmation-content {
    background: white;
    border-radius: 20px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.7);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.confirmation-modal.show .confirmation-content {
    transform: scale(1);
}

.confirmation-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.confirmation-icon {
    font-size: 48px;
}

.confirmation-header h3 {
    color: #333;
    font-size: 24px;
    margin: 0;
}

.confirmation-message {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.confirmation-message strong {
    color: #667eea;
    font-weight: 700;
}

.confirmation-warning {
    color: #f44336;
    font-size: 13px;
    font-style: italic;
    margin-bottom: 25px;
}

.confirmation-buttons {
    display: flex;
    gap: 15px;
}

.confirmation-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirmation-btn.cancel {
    background: #e0e0e0;
    color: #333;
}

.confirmation-btn.cancel:hover {
    background: #d0d0d0;
    transform: translateY(-2px);
}

.confirmation-btn.confirm {
    background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
    color: white;
}

.confirmation-btn.confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

/* Responsividade para Metas e Conquistas */
@media (max-width: 768px) {
    .goals-list {
        grid-template-columns: 1fr;
    }

    .user-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .achievement-notification {
        right: 10px;
        left: 10px;
        padding: 15px;
    }

    .goal-notification {
        min-width: auto;
        width: calc(100% - 40px);
    }

    .confirmation-content {
        padding: 20px;
    }

    /* Calendário Responsivo */
    .calendar-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .calendar-month-year {
        width: 100%;
        order: -1;
        margin-bottom: 10px;
    }

    .calendar-container {
        padding: 10px;
    }

    .weekday {
        font-size: 12px;
        padding: 5px;
    }

    .calendar-grid {
        gap: 5px;
    }

    .calendar-day {
        padding: 5px;
    }

    .day-number {
        font-size: 14px;
    }

    .day-task-count {
        font-size: 9px;
        padding: 1px 5px;
    }

    .day-tasks-content {
        width: 95%;
        padding: 20px;
        max-height: 90vh;
    }

    .day-tasks-header h3 {
        font-size: 18px;
    }
}

/* Melhorias adicionais dos Cards de Tarefa */

/* Notas preview */
.task-notes-preview {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
}

/* Modal de Notas melhorado */
.notes-modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: var(--backdrop-filter);
    -webkit-backdrop-filter: var(--backdrop-filter);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.notes-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.notes-modal-header h3 {
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.close-modal-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

.close-modal-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.task-preview {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--glass-border);
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.notes-content {
    padding: 24px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Toast Notifications melhorados */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 400px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: var(--backdrop-filter);
    -webkit-backdrop-filter: var(--backdrop-filter);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transform: translateX(calc(100% + 20px));
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.toast.show {
    transform: translateX(0);
}

.toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.toast-message {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}

.toast.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast.toast-error {
    border-left: 4px solid var(--error-color);
}

.toast.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast.toast-info {
    border-left: 4px solid var(--info-color);
}

/* Melhorias nos botões de ação das tarefas */
.task-btn {
    padding: 8px 14px;
    border: 1px solid;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.task-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.task-btn:hover::before {
    left: 100%;
}

.task-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Animações de celebração */
.task-item.celebrating {
    animation: celebrate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes celebrate {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.05) rotate(2deg);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    }

    50% {
        transform: scale(1.08) rotate(-2deg);
        box-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
    }

    75% {
        transform: scale(1.03) rotate(1deg);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    }

    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
}

/* Responsividade para cards de tarefa */
@media (max-width: 768px) {
    .task-header {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .task-header-right {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .task-actions-enhanced {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .task-actions-left,
    .task-actions-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .task-quick-actions {
        opacity: 1;
    }

    .toast {
        left: 20px;
        right: 20px;
        max-width: none;
        min-width: auto;
        transform: translateY(-100%);
    }

    .toast.show {
        transform: translateY(0);
    }
}

/* CSS específico para as melhorias dos cards de tarefa */

/* Modal de notas melhorado */
.notes-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 70vh !important;
    z-index: 1001 !important;
    animation: slideInUp 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.notes-modal-content {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.notes-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
}

.notes-modal-header h3 {
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.close-modal-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    backdrop-filter: blur(10px);
}

.close-modal-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) rotate(90deg);
}

.task-preview {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
}

.notes-content {
    padding: 24px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    font-size: 14px;
}

/* Toast notifications melhoradas */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.toast.show {
    transform: translateX(0);
}

.toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.toast-message {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
}

.toast.toast-success {
    border-left: 4px solid #4caf50;
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
}

.toast.toast-error {
    border-left: 4px solid #f44336;
    background: linear-gradient(145deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
}

.toast.toast-warning {
    border-left: 4px solid #ff9800;
    background: linear-gradient(145deg, rgba(255, 152, 0, 0.2), rgba(255, 152, 0, 0.1));
}

.toast.toast-info {
    border-left: 4px solid #2196f3;
    background: linear-gradient(145deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.1));
}

/* Animações melhoradas */
@keyframes slideInUp {
    from {
        transform: translate(-50%, 20px);
        opacity: 0;
        scale: 0.95;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
        scale: 1;
    }
}

/* Melhorias específicas dos botões de tarefa */
.task-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    white-space: nowrap;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.task-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.task-btn:hover::before {
    left: 100%;
}

.task-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.task-btn.complete-btn {
    border-color: rgba(76, 175, 80, 0.5);
    color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.task-btn.complete-btn:hover {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border-color: #4caf50;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
}

.task-btn.edit-btn {
    border-color: rgba(102, 126, 234, 0.5);
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.task-btn.edit-btn:hover {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.task-btn.undo-btn {
    border-color: rgba(255, 152, 0, 0.5);
    color: #ff9800;
    background: rgba(255, 152, 0, 0.1);
}

.task-btn.undo-btn:hover {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    border-color: #ff9800;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4);
}

.task-btn.delete-btn {
    border-color: rgba(244, 67, 54, 0.5);
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

.task-btn.delete-btn:hover {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border-color: #f44336;
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4);
}

/* Melhorias específicas para task-btn-enhanced */
.task-btn-enhanced {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    white-space: nowrap;
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.task-btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.task-btn-enhanced:hover::before {
    left: 100%;
}

.task-btn-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.task-btn-enhanced.priority-toggle {
    border-color: rgba(255, 193, 7, 0.5);
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}

.task-btn-enhanced.priority-toggle:hover {
    background: linear-gradient(135deg, #ffc107, #ff8f00);
    color: white;
    border-color: #ffc107;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.4);
}

.task-btn-enhanced.view-notes {
    border-color: rgba(33, 150, 243, 0.5);
    color: #2196f3;
    background: rgba(33, 150, 243, 0.1);
}

/* Ajustes para botões apenas com ícones */

/* Botões de modal - versão completa e funcional */
.modal-btn {
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 16px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.modal-btn.cancel {
    background: #555;
    color: white;
}

.modal-btn.cancel:hover {
    background: #666;
    transform: translateY(-2px);
}

.modal-btn.save {
    background: var(--gradient-primary);
    color: white;
}

.modal-btn.save:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

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

.modal-btn.delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
}

/* Botão adicionar tarefa */
#addBtn {
    padding: 12px 20px;
    font-size: 18px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botões de timer */
.timer-btn {
    padding: 10px 16px;
    font-size: 16px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botões clear-all apenas com ícone */
.clear-all-btn {
    padding: 8px 12px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-all-btn .btn-text {
    display: none;
}

/* Botões das tarefas */
.task-btn {
    padding: 8px 12px;
    min-width: 36px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-btn-enhanced {
    padding: 8px 12px;
    min-width: 36px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botões das metas */
.goal-btn {
    padding: 8px 12px;
    min-width: 36px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Botões de confirmação */
.confirmation-btn {
    padding: 8px 12px;
    min-width: 36px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-action-btn {
    padding: 8px 12px;
    min-width: 36px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsividade para ícones */
@media (max-width: 768px) {
    .modal-btn {
        padding: 10px 12px;
        font-size: 14px;
        min-width: 40px;
    }

    #addBtn {
        padding: 10px 16px;
        font-size: 16px;
        min-width: 50px;
    }

    .timer-btn {
        padding: 8px 12px;
        font-size: 14px;
        min-width: 40px;
    }

    .task-btn,
    .task-btn-enhanced,
    .goal-btn,
    .confirmation-btn,
    .timer-action-btn {
        padding: 6px 10px;
        min-width: 32px;
        font-size: 12px;
    }
}

.task-btn-enhanced.view-notes:hover {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
    border-color: #2196f3;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4);
}

/* ========================================
   MELHORIAS ADICIONAIS E RESPONSIVIDADE
======================================== */

/* Tema claro aprimorado */
body.light-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #475569;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

body.light-mode .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
    transform: scale(1.1) rotate(-180deg);
}

body.light-mode .task-item .task-text {
    color: #1e293b !important;
    font-weight: 600;
}

body.light-mode .task-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #475569;
}

body.light-mode .task-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    color: #1e293b;
}

/* Animações de transição suaves */
.theme-toggle {
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(180deg);
}

/* Melhorias responsivas adicionais */
@media (max-width: 600px) {
    body {
        padding: 8px;
    }

    .container {
        padding: 12px;
        border-radius: 16px;
        min-height: calc(100vh - 16px);
    }

    .theme-toggle {
        width: 40px;
        height: 40px;
        font-size: 16px;
        top: 15px;
        right: 15px;
    }

    header h1 {
        font-size: 1.6rem;
        margin-bottom: 16px;
    }

    .motivational-quote {
        padding: 16px;
        margin-bottom: 20px;
    }

    .task-item,
    .goal-card {
        padding: 16px;
        margin-bottom: 12px;
    }
}

@media (max-width: 400px) {
    body {
        padding: 6px;
    }

    .container {
        padding: 10px;
        min-height: calc(100vh - 12px);
    }

    header h1 {
        font-size: 1.4rem;
    }
}

/* ========================================
   MELHORIAS ESPECÍFICAS DO TEMA CLARO
======================================== */

/* Task items aprimorados */
body.light-mode .task-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
    backdrop-filter: blur(20px);
}

body.light-mode .task-item:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    transform: translateY(-2px);
}

/* Goal cards aprimorados */
body.light-mode .goal-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
}

body.light-mode .goal-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Botões aprimorados */
body.light-mode #addBtn {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25) !important;
}

body.light-mode #addBtn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35) !important;
}

/* Inputs aprimorados */
body.light-mode input[type="text"],
body.light-mode input[type="date"],
body.light-mode select,
body.light-mode textarea {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid rgba(148, 163, 184, 0.3) !important;
    color: #0f172a !important;
    backdrop-filter: blur(10px);
}

body.light-mode input[type="text"]:focus,
body.light-mode input[type="date"]:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    border-color: #6366f1 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 2px 8px rgba(15, 23, 42, 0.05) !important;
    outline: none;
}

/* Progress bars aprimoradas */
body.light-mode .progress-fill {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

body.light-mode .goal-progress-fill {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

/* Categorias aprimoradas */
body.light-mode .task-category,
body.light-mode .task-date,
body.light-mode .task-time,
body.light-mode .task-priority {
    background: rgba(99, 102, 241, 0.08) !important;
    color: #4338ca !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    font-weight: 600;
}

body.light-mode .task-category:hover,
body.light-mode .task-date:hover,
body.light-mode .task-time:hover,
body.light-mode .task-priority:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Modal aprimorado */
body.light-mode .modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 25px 80px rgba(15, 23, 42, 0.15) !important;
    backdrop-filter: blur(20px);
}

/* Toast notifications aprimoradas */
body.light-mode .toast {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
}