/* CSS RESET & BASE STYLES */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #a0c4ff; /* Outer frame color */
            color: #333;
            min-height: 110vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 3rem;
        }

        /* MAIN LAYOUT */
        .content-body {
            width: 100%;
            max-width: 1300px;
            background-color: #ffffff;
            border-radius: 15px;
            padding: 2rem 3rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1); }
        }

        /* WELCOME BANNER */
        .welcome-banner {
            text-align: center;
            margin-bottom: 2.5rem;
            animation: slideUp 0.6s ease-out;
        }

        .welcome-banner h1 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e3a8a; /* A nice deep blue */
        }

        .welcome-banner p {
            font-size: 1rem;
            color: #6b7280;
        }

        /* NAVIGATION GRID */
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2.5rem;
            animation: slideUp 0.7s ease-out;
        }

        .nav-card {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 15px;
            padding: 1.5rem 1rem;
            text-align: center;
            text-decoration: none;
            color: #334155;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .nav-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(160, 196, 255, 0.7);
        }

        .nav-card .icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .nav-card span {
            font-weight: 600;
        }

        /* DASHBOARD GRID FOR NEW SECTIONS */
        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two equal columns */
            gap: 1.5rem;
            margin-bottom: 2.5rem;
            animation: slideUp 0.8s ease-out;
        }

        .dashboard-card {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 15px;
            padding: 1.5rem;
        }

        .dashboard-card h3 {
            margin-bottom: 1rem;
            color: #1e3a8a;
            border-bottom: 2px solid #eef2ff;
            padding-bottom: 0.5rem;
            text-align: center; /* Centered the heading text */
        }

        /* Today's Focus List */
        #today-focus ul {
            list-style: none;
        }

        #today-focus li {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
            justify-content: space-between; /* To push buttons to the right */
            padding-right: 10px; /* Add some padding for the buttons */
        }

        #today-focus .task-content {
            display: flex;
            align-items: center;
            flex-grow: 1; /* Allow content to take available space */
        }

        #today-focus input[type="checkbox"] {
            margin-right: 0.75rem;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        #today-focus label {
            color: #334155;
            flex-grow: 1;
            cursor: pointer;
        }

        #today-focus input[type="checkbox"]:checked + label {
            text-decoration: line-through;
            color: #94a3b8;
        }

        #today-focus .task-actions {
            display: flex;
            gap: 5px;
        }

        #today-focus .task-actions button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            padding: 5px;
            border-radius: 5px;
            transition: background-color 0.2s ease;
        }

        #today-focus .task-actions button:hover {
            background-color: #e2e8f0;
        }
        
        #today-focus .complete-btn {
            color: #10b981;
        }
        #today-focus .delete-btn {
            color: #ef4444;
        }

        /* Weather Card Styling */
        #weather-card .weather-details {
            display: flex;
            flex-direction: column;
            align-items: center; /* Centered horizontally */
            justify-content: center; /* Centered vertically */
            text-align: center;
            height: 100%; /* Ensure it takes full height of the card */
        }

        #weather-card .location-info {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
            color: #6b7280; /* Adjust color for visibility */
        }

        #weather-card .weather-icon {
            font-size: 3rem; /* Larger icon */
            margin-bottom: 0.5rem;
        }

        #weather-card .temperature {
            font-size: 2rem;
            font-weight: 700;
            color: #a9b4d2;
            margin-bottom: 0.2rem;
        }

        #weather-card .weather-description {
            font-size: 1rem;
            color: #334155;
            text-transform: capitalize;
            margin-bottom: 0.2rem;
        }

        #weather-card .feels-like {
            font-size: 0.9rem;
            color: #6b7280;
        }


        /* Quick Notes Textarea */
        #quick-notes textarea {
            width: 100%;
            height: 150px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 0.75rem;
            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            resize: none; /* Disables resizing */
        }

        /* Make the new grid responsive */
        @media (max-width: 768px) {
            .dashboard-grid {
                grid-template-columns: 1fr; /* Stack on mobile */
            }
        }

        /* MOTIVATIONAL QUOTE CONTAINER */
        .quote-container {
            background-color: #eef2ff; /* Light lavender background */
            border-radius: 15px;
            padding: 1.5rem 2rem;
            text-align: center;
            animation: slideUp 0.8s ease-out;
        }

        .quote-container blockquote p {
            font-size: 1.1rem;
            font-style: italic;
            color: #4338ca;
            margin-bottom: 1rem;
            min-height: 50px; /* Prevents layout shift */
        }

        #next-quote-btn {
            background-color: #4f46e5;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.6rem 1.2rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        
        #next-quote-btn:hover {
            background-color: #3730a3;
        }

        /* THEME TOGGLE */
        .header-top {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1rem;
        }

        .theme-toggle {
            position: relative;
        }

        .theme-btn {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 25px;
            padding: 0.5rem 1rem;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

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

        .theme-btn .moon-icon {
            display: none;
        }

        /* DARK MODE STYLES */
        [data-theme="dark"] {
            background-color: #1e293b;
        }

        [data-theme="dark"] .content-body {
            background-color: #334155;
            color: #e2e8f0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        [data-theme="dark"] .welcome-banner h1 {
            color: #60a5fa;
        }

        [data-theme="dark"] .welcome-banner p {
            color: #94a3b8;
        }

        [data-theme="dark"] .nav-card {
            background-color: #475569;
            border-color: #64748b;
            color: #e2e8f0;
        }

        [data-theme="dark"] .nav-card:hover {
            background-color: #526074;
            box-shadow: 0 8px 20px rgba(96, 165, 250, 0.3);
        }

        [data-theme="dark"] .dashboard-card {
            background-color: #475569;
            border-color: #64748b;
            color: #e2e8f0;
        }

        [data-theme="dark"] .dashboard-card h3 {
            color: #60a5fa;
            border-bottom-color: #475569;
        }

        [data-theme="dark"] #today-focus label {
            color: #cbd5e1;
        }

        [data-theme="dark"] #today-focus input[type="checkbox"]:checked + label {
            color: #64748b;
        }
        [data-theme="dark"] #today-focus .task-actions button:hover {
            background-color: #64748b;
        }


        [data-theme="dark"] #quick-notes textarea {
            background-color: #1e293b;
            border-color: #475569;
            color: #e2e8f0;
        }

        [data-theme="dark"] #quick-notes textarea::placeholder {
            color: #94a3b8;
        }

        [data-theme="dark"] #weather-card .location-info,
        [data-theme="dark"] #weather-card .weather-description,
        [data-theme="dark"] #weather-card .feels-like {
            color: #cbd5e1;
        }

        [data-theme="dark"] #weather-card .temperature {
            color: #60a5fa;
        }


        [data-theme="dark"] .quote-container {
            background-color: #475569;
            border: 1px solid #64748b;
        }

        [data-theme="dark"] .quote-container blockquote p {
            color: #a5b4fc;
        }

        [data-theme="dark"] #next-quote-btn {
            background-color: #3b82f6;
        }

        [data-theme="dark"] #next-quote-btn:hover {
            background-color: #2563eb;
        }

        [data-theme="dark"] .theme-btn {
            background-color: #475569;
            border-color: #64748b;
            color: #e2e8f0;
        }

        [data-theme="dark"] .theme-btn .sun-icon {
            display: none;
        }

        [data-theme="dark"] .theme-btn .moon-icon {
            display: inline;
        }

        /* SMOOTH TRANSITIONS FOR THEME CHANGE */
        *, *::before, *::after {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        .content-body, .nav-card, .dashboard-card, .quote-container, .theme-btn, #quick-notes textarea {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }
            .content-body {
                padding: 1.5rem;
            }
            .welcome-banner h1 {
                font-size: 2rem;
            }
            .nav-grid {
                grid-template-columns: 1fr 1fr; /* 2 cards per row on mobile-ansh */
            }
        }