*{

    transition:
        background .3s,
        color .3s,
        border-color .3s,
        box-shadow .3s;

}
/* =====================================
   RESET
===================================== */

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

/* =====================================
   BODY
===================================== */

body{

    margin:0;

    font-family:"Segoe UI",sans-serif;

    background:linear-gradient(
        135deg,
        #eef4ff,
        #f8fbff,
        #ffffff
    );

    background-size:300% 300%;

    animation:gradientMove 12s ease infinite;

    overflow-x:hidden;

}
@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* =====================================
   CONTAINER
===================================== */

.container{

    width:95%;
    max-width:1400px;
    margin:30px auto;

    background:white;

    border-radius:18px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

/* =====================================
   NAVBAR
===================================== */

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    padding:18px 25px;

    border-radius:18px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.3);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}
.navbar:hover{

    box-shadow:0 15px 35px rgba(37,99,235,.12);

}
.navbar h2{

    font-size:32px;

    font-weight:700;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

    background-clip:text;          /* Standard property */

    -webkit-background-clip:text;  /* Chrome/Safari */

    color:transparent;             /* Standard */

    -webkit-text-fill-color:transparent;

}

.date-time{

    text-align:right;

}

#currentDate{

    font-weight:bold;

    color:#374151;

    margin-bottom:5px;

}

#currentTime{

    color:#6b7280;

    font-size:15px;

}

/* =====================================
   MAIN HEADING
===================================== */

h1{

    color:#2563eb;

    text-align:center;

    margin-bottom:30px;

}

/* =====================================
   CARDS
===================================== */

.focus-card,
.notes-card{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:35px;
    transition: all .35s ease;

transform: translateY(0);

}
/* =====================================
   ALL CARD STYLING
===================================== */

.focus-card,
.notes-card,
.timer-card,
.weather-card,
.streak-card,
.task-card,
.planner-card,
.badges-card,
.insights-card,
.chart-card,
.analytics-card{

    
    transition: all .35s ease;

transform: translateY(0);

}

.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.weather-card:hover,
.streak-card:hover,
.task-card:hover,
.planner-card:hover,
.badges-card:hover,
.insights-card:hover,
.chart-card:hover,
.analytics-card:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 35px rgba(37,99,235,.12);

}
.focus-card,
.notes-card,
.timer-card,
.weather-card,
.streak-card,
.task-card,
.planner-card,
.badges-card,
.insights-card,
.chart-card,
.analytics-card{

    background:rgba(255,255,255,.72);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.25);

    border-radius:18px;

    box-shadow:0 4px 15px rgba(0,0,0,.06);

    transition: all .35s ease;

transform: translateY(0);

}

.focus-card h2,
.notes-card h2{

    color:#1f2937;

}

/* =====================================
   TAGLINE
===================================== */

#tagline{

    font-size:18px;

    color:#4b5563;

}

/* =====================================
   INPUTS
===================================== */

input{

    width:100%;

    box-sizing:border-box;

    padding:14px;

    border:1px solid #d1d5db;

    border-radius:12px;

    font-size:16px;

    outline:none;

    transition:.3s;

    background:white;

}
select{

    width:100%;

    box-sizing:border-box;

}
input:hover,
select:hover{

    border-color:#2563eb;

}

input:focus{

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

    transform:scale(1.01);

}
/* =====================================
   BUTTONS
===================================== */

button{

    padding:14px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

    position:relative;

    overflow:hidden;

    max-width:100%;

}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 18px rgba(37,99,235,.25);
    filter:brightness(1.05);

}

button:active{

    transform:scale(.96);

}

/* =====================================
   NOTES LIST
===================================== */

.notes-card ul{

    list-style:none;

}

/* =====================================
   NOTE ITEM
===================================== */

.note-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f9fafb;

    border:1px solid #e5e7eb;

    padding:14px;

    border-radius:10px;

    margin-bottom:12px;

}

/* =====================================
   ACTION BUTTONS
===================================== */

.actions{

    display:flex;

    gap:10px;

}

.edit-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    padding:0;

    background:#f59e0b;

}

.edit-btn:hover{

    background:#d97706;

}

.delete-btn{

    width:38px;

    height:38px;

    border-radius:50%;

    padding:0;

    background:#ef4444;

}

.delete-btn:hover{

    background:#dc2626;

}

/* =====================================
   EMPTY MESSAGE
===================================== */

.empty-message{

    text-align:center;

    color:#6b7280;

    font-style:italic;

}

/* =====================================
   Greeting Section
===================================== */

.greeting-section{

    text-align:center;

    margin-bottom:30px;

    animation:fadeUp .9s ease;

}

#motivation{

    margin-top:10px;

    color:#6b7280;

    font-size:17px;

    font-style:italic;

}
/* =====================================
   NAV RIGHT
===================================== */

.nav-right{

    display:flex;

    align-items:center;

    gap:20px;

}

/* =====================================
   THEME BUTTON
===================================== */

#themeBtn{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    background:#2563eb;

    color:white;

    transition:.3s;

}

#themeBtn:hover{

    transform:scale(1.08);

}

/* =====================================
   DARK MODE
===================================== */

.dark-mode{

    background:#111827;

    color:white;

}

/* Main Card */

.dark-mode .container{

    background:#1f2937;

}

/* Headings */

.dark-mode h1,
.dark-mode h2{

    color:white;

}

/* Tagline */

.dark-mode #tagline{

    color:#d1d5db;

}

/* Motivation */

.dark-mode #motivation{

    color:#d1d5db;

}

/* Inputs */

.dark-mode input{

    background:#374151;

    color:white;

    border:1px solid #4b5563;

}

.dark-mode input::placeholder{

    color:#cbd5e1;

}

/* Notes */

.dark-mode .note-item{

    background:#374151;

    border-color:#4b5563;

}

/* Date */

.dark-mode #currentDate,
.dark-mode #currentTime{

    color:white;

}

/* Navbar */

.dark-mode .navbar{

    background:rgba(31,41,55,.8);

    border:1px solid rgba(255,255,255,.08);

}
/* =====================================
   POMODORO TIMER
===================================== */

/* =====================================
   POMODORO TIMER
===================================== */

.timer-card {

    margin-top: 30px;

    padding: 25px;

    border-radius: 15px;

    background: #f8fafc;

    text-align: center;

    box-shadow: 0 5px 12px rgba(0,0,0,0.08);

}

.timer-card h2 {

    margin-bottom: 20px;

}

#timerDisplay {

    font-size: 55px;

    color: #2563eb;

    margin-bottom: 25px;

    transition: color 0.3s;

}

.timer-buttons {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

}

.timer-buttons button {
    flex:1;

    min-width: 110px;

}

.dark-mode .timer-card {

    background: #374151;

}

.dark-mode #timerDisplay {

    color: #60a5fa;

}

button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}
/* =====================================
   PRODUCTIVITY DASHBOARD
===================================== */

.dashboard-card{

    margin-top:30px;

    padding:25px;

    border-radius:15px;

    background:#f8fafc;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

}

.dashboard-card h2{

    text-align:center;

    margin-bottom:25px;

}

.stats{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

}

.stat-box{

    flex:1;

    min-width:120px;

    padding:20px;

    border-radius:12px;

    background:white;

    text-align:center;

    transition:0.3s;

    box-shadow:0 3px 8px rgba(0,0,0,0.08);

}

.stat-box:hover{

    transform:translateY(-5px);

}

.stat-box h3{

    font-size:32px;

    color:#2563eb;

    margin-bottom:10px;

}

.stat-box p{

    font-size:16px;

    color:#555;

}


/* =====================================
   DARK MODE
===================================== */

.dark-mode .dashboard-card{

    background:#374151;

}

.dark-mode .stat-box{

    background:#4b5563;

}

.dark-mode .stat-box p{

    color:white;

}

.dark-mode .stat-box h3{

    color:#60a5fa;

}
/* ===============================
   Progress Bar
=============================== */

.progress-section{

    margin-top:30px;

}

.progress-bar{

    width:100%;

    height:20px;

    background:#d1d5db;

    border-radius:20px;

    overflow:hidden;

    margin-top:10px;

}

#progressFill{

    width:0%;

    height:100%;

    background:#22c55e;

    transition:0.5s;

}

#progressText{

    text-align:center;

    margin-top:10px;

    font-weight:bold;

}

.dark-mode .progress-bar{

    background:#6b7280;

}
/* =====================================
   TASK MANAGER
===================================== */

.task-card{

    margin-top:30px;

    padding:25px;

    border-radius:15px;

    background:#f8fafc;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

    max-height:780px;

    overflow-y:auto;

}

.task-card h2{

    text-align:center;

    margin-bottom:20px;

}

.task-card input{

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:16px;

    box-sizing:border-box;

}

.task-card{

    max-height:720px;

    overflow-y:auto;

    scrollbar-width:thin;

    scrollbar-color:#2563eb transparent;

}

.task-card::-webkit-scrollbar{

    width:6px;

}

.task-card::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:20px;

}

.task-card button:hover{

    background:#1d4ed8;

}

#taskList{

    list-style:none;

    padding:0;

}

#taskList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    margin-bottom:10px;

    background:white;

    border-radius:10px;

    box-shadow:0 2px 6px rgba(0,0,0,0.08);

}

.task-buttons{

    display:flex;

    gap:8px;

}

.complete-btn{

    background:#22c55e;

    color:white;

    border:none;

    padding:6px 10px;

    border-radius:6px;

    cursor:pointer;

}

.delete-btn{

    background:#ef4444;

    color:white;

    border:none;

    padding:6px 10px;

    border-radius:6px;

    cursor:pointer;

}

.completed{

    text-decoration:line-through;

    opacity:0.6;

}

.dark-mode .task-card{

    background:#374151;

}

.dark-mode #taskList li{

    background:#4b5563;

    color:white;

}
/* ===============================
   Task Inputs
=============================== */

.task-card select,
.task-card input[type="date"]{

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:16px;

    box-sizing:border-box;

}

.priority-high{

    color:#dc2626;

    font-weight:bold;

}

.priority-medium{

    color:#f59e0b;

    font-weight:bold;

}

.priority-low{

    color:#16a34a;

    font-weight:bold;

}

.task-info{

    display:flex;

    flex-direction:column;

    gap:5px;

}
/* ===============================
   Task Filters
=============================== */

.filter-buttons{

    display:flex;

    gap:10px;

    margin-bottom:20px;

}

.filter-buttons button{

    flex:1;

    padding:10px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#2563eb;

    color:white;

    transition:0.3s;

}

.filter-buttons button:hover{

    background:#1d4ed8;

}
/* ===============================
   Search Box
=============================== */

#searchTask{

    width:100%;

    padding:12px;

    margin-bottom:20px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:16px;

    box-sizing:border-box;

}

.dark-mode #searchTask{

    background:#4b5563;

    color:white;

    border:1px solid #6b7280;

}
/* ===============================
   Sort Section
=============================== */

.sort-section{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}

.sort-section label{

    font-weight:bold;

}

.sort-section select{

    flex:1;

    padding:10px;

    border-radius:8px;

    border:1px solid #d1d5db;

    font-size:15px;

}

.dark-mode .sort-section select{

    background:#4b5563;

    color:white;

}
/* ===============================
   Task Analytics
=============================== */

.analytics-card{

    margin-top:30px;

    background:#f8fafc;

    padding:25px;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

}

.analytics-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.analytics-box{

    background:white;

    padding:20px;

    border-radius:12px;

    text-align:center;

    box-shadow:0 3px 8px rgba(0,0,0,0.08);

}

.analytics-box h3{

    color:#2563eb;

    font-size:30px;

    margin-bottom:10px;

}

.progress-bar{

    width:100%;

    height:20px;

    background:#d1d5db;

    border-radius:20px;

    overflow:hidden;

    margin-top:25px;

}

#progressFill{

    width:0%;

    height:100%;

    background:#22c55e;

    transition:0.4s;

}

/* ===============================
   Dark Mode
=============================== */

.dark-mode .analytics-card{

    background:#374151;

}

.dark-mode .analytics-box{

    background:#4b5563;

    color:white;

}

.dark-mode .progress-bar{

    background:#6b7280;

}
/* ===============================
   Weather Widget
=============================== */

.weather-card{

    margin-top:30px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

    text-align:center;

}

.weather-info h1{

    font-size:60px;

    margin:15px 0;

    color:#2563eb;

}

.weather-info h3{

    font-size:28px;

    margin-bottom:10px;

}

.weather-info p{

    font-size:18px;

    margin:8px 0;

}

.weather-details{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:20px;

    flex-wrap:wrap;

}

.weather-details p{

    font-size:17px;

    font-weight:600;

}

/* ===============================
   Dark Mode
=============================== */

.dark-mode .weather-card{

    background:#374151;

    color:white;

}

.dark-mode .weather-info h1{

    color:#60a5fa;

}
/* ===============================
   Daily Planner
=============================== */

.planner-card{

    margin-top:30px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

}

.planner-card h2{

    margin-bottom:20px;

}

.planner-card input{

    width:100%;

    padding:12px;

    margin-bottom:15px;

    border:1px solid #d1d5db;

    border-radius:8px;

    font-size:16px;

    box-sizing:border-box;

}

.planner-card button{

    width:100%;

    padding:12px;

    background:#2563eb;

    color:white;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    margin-bottom:20px;

}

.planner-card button:hover{

    background:#1d4ed8;

}

#plannerList{

    list-style:none;

    padding:0;

}

#plannerList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    margin-bottom:10px;

    background:white;

    border-radius:10px;

    box-shadow:0 2px 6px rgba(0,0,0,0.08);

}

#plannerList li.completed{

    opacity:0.6;

    text-decoration:line-through;

}

.planner-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.planner-buttons button{

    width:auto;

    padding:8px 12px;

    margin:0;

}

.dark-mode .planner-card{

    background:#374151;

    color:white;

}

.dark-mode #plannerList li{

    background:#4b5563;

    color:white;

}
/* ===============================
   Productivity Insights
=============================== */

.insights-card{

    margin-top:30px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

}

.insight-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

    gap:15px;

}

.insight-box{

    background:white;

    border-radius:15px;

    padding:18px;

    transition:.3s;

    box-shadow:0 5px 15px rgba(0,0,0,.06);

}

.insight-box:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(37,99,235,.18);

}

.insight-box h3{

    font-size:28px;

    color:#2563eb;

    font-weight:700;

}

.progress-bar{

    width:100%;

    height:14px;

    background:#e5e7eb;

    border-radius:999px;

    overflow:hidden;

}

#insightProgress{

    height:100%;

    width:0;

    border-radius:999px;

    transition:width .8s ease;

    background:linear-gradient(
        90deg,
        #2563eb,
        #22c55e
    );
    box-shadow:

    0 0 15px rgba(37,99,235,.5);
    transition:width .8s ease;


}

.dark-mode .insights-card{

    background:#374151;

    color:white;

}

.dark-mode .insight-box{

    background:#334155;

    border:1px solid #475569;

}

.dark-mode .progress-bar{

    background:#6b7280;

}
/* ===============================
   Daily Streak
=============================== */

.streak-card{

    min-height:300px;

    margin-top:30px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,0.08);

}

.streak-card h2{

    margin-bottom:20px;

}

.streak-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.streak-box{

    background:white;

    padding:20px;

    border-radius:12px;

    text-align:center;

    box-shadow:0 3px 8px rgba(0,0,0,0.08);

}

.streak-box h3{

    font-size:32px;

    color:#2563eb;

    margin-bottom:10px;

}

.last-opened{

    margin-top:20px;

    text-align:center;

    font-weight:600;

    color:#4b5563;

}

.dark-mode .streak-card{

    background:#374151;

    color:white;

}

.dark-mode .streak-box{

    background:#4b5563;

    color:white;

}

.dark-mode .last-opened{

    color:#d1d5db;

}
/* ===============================
   Achievements
=============================== */

.badges-card{

    min-height:300px;

    margin-top:30px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,.08);

}

.badges-grid{

    display:grid;

    grid-template-columns:repeat(2,lfr);

    gap:12px;

    /*margin-top:20px;*/

}

.badge{

    padding:18px;

    border-radius:12px;

    background:white;

    text-align:center;

    box-shadow:0 3px 8px rgba(0,0,0,.08);

    transition:.3s;

}
.badge:hover{

    transform:translateY(-4px);

}

.badge.locked{

    opacity:.65;
    filter:grayscale(30%);



}

.badge.unlocked{

    background:#dcfce7;

    border:2px solid #22c55e;

     box-shadow:0 5px 12px rgba(34,197,94,.3);

}

.badge h3{

    margin-bottom:10px;

}

.dark-mode .badges-card{

    background:#374151;

}

.dark-mode .badge{

    background:#4b5563;

    color:white;

}

.dark-mode .badge.unlocked{

    background:#166534;

}

/* ===============================
   Weekly Productivity Chart
=============================== */

.chart-card{

    margin-top:30px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,.08);

}

.chart-card h2{

    margin-bottom:20px;

}

#weeklyChart{

    width:100%;

    max-height:320px;

}

.dark-mode .chart-card{

    background:#374151;

}
#downloadPDF{

    width:100%;

    margin-top:25px;

}
/* =====================================
   DASHBOARD GRID
===================================== */



/* =====================================
   DASHBOARD LAYOUT
===================================== */

.dashboard{

    display:grid;

    grid-template-columns:300px 420px minmax(450px,1fr);

    gap:25px;

    align-items:start;

    animation:fadeUp .8s ease;

}

.left-column,
.middle-column,
.right-column{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/* Every card full width */

.left-column > *,
.middle-column > *,
.right-column > *{

    width:100%;

    margin-bottom:25px;

}

/* Responsive */

@media(max-width:1100px){

    .dashboard{

        grid-template-columns:1fr;

    }

}
.right-column{

    position:sticky;

    top:25px;

    align-self:start;

}
.focus-card,
.notes-card,
.timer-card,
.weather-card,
.streak-card,
.task-card,
.planner-card,
.badges-card,
.chart-card,
.insights-card{

    margin:0;
    transition: all .35s ease;

transform: translateY(0);

}
/* =====================================
   TOAST NOTIFICATION
===================================== */

#toast{

    position:fixed;

    top:25px;

    right:25px;

    background:#2563eb;

    color:white;

    padding:16px 22px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    box-shadow:0 8px 25px rgba(0,0,0,.2);

    opacity:0;

    pointer-events:none;

    transform:translateY(-20px);

    transition:.35s;

    z-index:9999;

}

#toast.show{

    opacity:1;

    transform:translateY(0);

}
/* =====================================
   PREMIUM UI ANIMATIONS
===================================== */

*{
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .25s ease;
}
/* =====================================
   CARD ANIMATION
===================================== */

.focus-card,
.notes-card,
.timer-card,
.task-card,
.weather-card,
.planner-card,
.streak-card,
.badges-card,
.chart-card,
.insights-card{

    
    transition: all .35s ease;

transform: translateY(0);

}
.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.task-card:hover,
.weather-card:hover,
.planner-card:hover,
.streak-card:hover,
.badges-card:hover,
.chart-card:hover,
.insights-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}
/* =====================================
   PREMIUM CARD EFFECT
===================================== */

.focus-card,
.notes-card,
.timer-card,
.task-card,
.weather-card,
.planner-card,
.streak-card,
.badges-card,
.chart-card,
.insights-card{



    border:1px solid transparent;
    transition: all .35s ease;

transform: translateY(0);transition: all .35s ease;



}

.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.task-card:hover,
.weather-card:hover,
.planner-card:hover,
.streak-card:hover,
.badges-card:hover,
.chart-card:hover,
.insights-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:
        0 18px 35px rgba(37,99,235,.15);

}
.dark-mode .focus-card,
.dark-mode .notes-card,
.dark-mode .timer-card,
.dark-mode .task-card,
.dark-mode .weather-card,
.dark-mode .planner-card,
.dark-mode .streak-card,
.dark-mode .badges-card,
.dark-mode .chart-card,
.dark-mode .insights-card{

    background:#273549;

    border:1px solid #374151;

}
/* =====================================
   FLOATING ANIMATION
===================================== */

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0px);
    }

}

.insight-box{

    animation:floating 4s ease-in-out infinite;

}

.insight-box:nth-child(2){

    animation-delay:.3s;

}

.insight-box:nth-child(3){

    animation-delay:.6s;

}

.insight-box:nth-child(4){

    animation-delay:.9s;

}

.insight-box:nth-child(5){

    animation-delay:1.2s;

}

.insight-box:nth-child(6){

    animation-delay:1.5s;

}
.insight-box{

    transition:.35s;

}

.insight-box:hover{

    transform:translateY(-10px) scale(1.05);

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}
.dashboard{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* =====================================
   FLOATING DASHBOARD CARDS
===================================== */

.focus-card,
.notes-card,
.timer-card,
.task-card,
.weather-card,
.planner-card,
.streak-card,
.badges-card,
.chart-card,
.insights-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;
        transition: all .35s ease;

transform: translateY(0);

}

.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.task-card:hover,
.weather-card:hover,
.planner-card:hover,
.streak-card:hover,
.badges-card:hover,
.chart-card:hover,
.insights-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 18px 35px rgba(37,99,235,.18);

}
.dark-mode .navbar{

    background:rgba(31,41,55,.75);

    border:1px solid rgba(255,255,255,.08);

}
/* =====================================
   DASHBOARD COUNTERS
===================================== */

.insight-box h3{

    font-size:34px;

    color:#2563eb;

    font-weight:700;

    transition:.3s;

}

.insight-box:hover h3{

    transform:scale(1.12);

}
/* =====================================
   Floating Cards Animation
===================================== */

.focus-card,
.notes-card,
.timer-card,
.weather-card,
.task-card,
.planner-card,
.streak-card,
.badges-card,
.chart-card,
.insights-card{

    animation: floatCard 5s ease-in-out infinite;
    transition: all .35s ease;

transform: translateY(0);

}

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}
.focus-card{
    animation-delay:0s;
}

.notes-card{
    animation-delay:.4s;
}

.timer-card{
    animation-delay:.8s;
}

.weather-card{
    animation-delay:1.2s;
}

.task-card{
    animation-delay:1.6s;
    min-height:420px;
}

.planner-card{
    animation-delay:2s;
     min-height:260px;
}

.streak-card{
    animation-delay:2.4s;
}

.badges-card{
    animation-delay:2.8s;
    min-height:370px;
}

.chart-card{
    animation-delay:3.2s;
}

.insights-card{
    animation-delay:3.6s;
}
.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.weather-card:hover,
.task-card:hover,
.planner-card:hover,
.streak-card:hover,
.badges-card:hover,
.chart-card:hover,
.insights-card:hover{

    transform:translateY(-10px) scale(1.02);

    box-shadow:0 18px 35px rgba(37,99,235,.18);

    transition:.35s;

}
.dark-mode
.focus-card,
.dark-mode
.notes-card,
.dark-mode
.timer-card,
.dark-mode
.weather-card,
.dark-mode
.task-card,
.dark-mode
.planner-card,
.dark-mode
.streak-card,
.dark-mode
.badges-card,
.dark-mode
.chart-card,
.dark-mode
.insights-card{

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}
/* =====================================
   PREMIUM GLASS CARDS
===================================== */

.focus-card,
.notes-card,
.timer-card,
.weather-card,
.task-card,
.planner-card,
.streak-card,
.badges-card,
.insights-card,
.chart-card{

    position:relative;

    overflow:auto;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.45);

    transition:.35s;
    transition: all .35s ease;

transform: translateY(0);

}
.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.weather-card:hover,
.task-card:hover,
.planner-card:hover,
.streak-card:hover,
.badges-card:hover,
.insights-card:hover,
.chart-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(37,99,235,.18);

}
.focus-card::before,
.notes-card::before,
.timer-card::before,
.weather-card::before,
.task-card::before,
.planner-card::before,
.streak-card::before,
.badges-card::before,
.insights-card::before,
.chart-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transition:.8s;

}
.focus-card:hover::before,
.notes-card:hover::before,
.timer-card:hover::before,
.weather-card:hover::before,
.task-card:hover::before,
.planner-card:hover::before,
.streak-card:hover::before,
.badges-card:hover::before,
.insights-card:hover::before,
.chart-card:hover::before{

    left:150%;

}
.dark-mode .focus-card,
.dark-mode .notes-card,
.dark-mode .timer-card,
.dark-mode .weather-card,
.dark-mode .task-card,
.dark-mode .planner-card,
.dark-mode .streak-card,
.dark-mode .badges-card,
.dark-mode .insights-card,
.dark-mode .chart-card{

    background:rgba(31,41,55,.75);

    border:1px solid rgba(255,255,255,.08);

}
/* =====================================
   FLOATING BLOBS
===================================== */

.blob{

    position:fixed;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

    z-index:-1;

}
.blob1{

    width:300px;

    height:300px;

    background:#3b82f6;

    top:-80px;

    left:-60px;

    animation:blobMove1 15s infinite alternate;

}
.blob2{

    width:260px;

    height:260px;

    background:#8b5cf6;

    right:-60px;

    top:220px;

    animation:blobMove2 18s infinite alternate;

}
.blob3{

    width:220px;

    height:220px;

    background:#06b6d4;

    bottom:-70px;

    left:40%;

    animation:blobMove3 16s infinite alternate;

}
@keyframes blobMove1{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(120px,80px);

    }

}

@keyframes blobMove2{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-120px,100px);

    }

}

@keyframes blobMove3{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-60px,-120px);

    }

}
.dark-mode{

    background:linear-gradient(
        135deg,
        #0f172a,
        #111827,
        #1e293b
    );

    background-size:300% 300%;

}
/* =====================================
   LOGIN SCREEN
===================================== */

.login-screen{

    position:fixed;

    inset:0;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6,
        #60a5fa
    );

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

}
.login-card{

    width:380px;

    background:white;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

    animation:loginPop .6s ease;

}
.login-card h1{

    color:#2563eb;

    margin-bottom:10px;

}

.login-card p{

    color:#6b7280;

    margin-bottom:25px;

}
.login-card input[type=text]{

    width:100%;

    margin-bottom:18px;

    box-sizing:border-box;

}
.remember-box{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:15px;

    color:#4b5563;

}
#continueBtn,
#guestBtn{

    width:100%;

    margin-top:10px;

}
.divider{

    margin:20px 0;

    color:#9ca3af;

    font-weight:600;

}
@keyframes loginPop{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
.dark-mode .login-card{

    background:#1f2937;

}

.dark-mode .login-card p{

    color:#d1d5db;

}
.logout-btn{

    background:#ef4444;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:50px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.logout-btn:hover{

    background:#dc2626;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(239,68,68,.35);

}
/* =====================================
   ANALYTICS DASHBOARD
===================================== */

.analytics-card{

    margin-top:35px;

    padding:30px;

    background:#f8fafc;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.analytics-card h2{

    font-size:22px;

    font-weight:700;

    margin-bottom:22px;

    color:#1e3a8a;

    text-align:center;

    letter-spacing:.4px;

}

.analytics-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

}

.analytics-box{

    background:white;

    border-radius:14px;

    padding:22px 15px;

    text-align:center;

    transition:.3s;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.analytics-box:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 28px rgba(37,99,235,.18);

}

.analytics-box h3{

    font-size:30px;

    color:#2563eb;

    margin-bottom:8px;

}

.analytics-box p{

    font-size:13px;

    color:#6b7280;

}

.dark-mode .analytics-card{

    background:#374151;

}

.dark-mode .analytics-box{

    background:#1f2937;

}

.dark-mode .analytics-box p{

    color:#d1d5db;

}
.dark-mode .analytics-card h2{

    color:#60a5fa;

}
/* =====================================
   RESPONSIVE DESIGN
===================================== */

/* Tablet */

@media (max-width:1024px){

.dashboard{

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.right-column{

    grid-column:1 / span 2;

}

}

/* Mobile */

@media (max-width:768px){

.container{

    padding:15px;

}

.dashboard{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.left-column,
.middle-column,
.right-column{

    width:100%;

}

.navbar{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}

.nav-right{

    width:100%;

    justify-content:space-between;

}

.greeting-section h1{

    font-size:28px;

}

.focus-card,
.notes-card,
.task-card,
.timer-card,
.weather-card,
.planner-card,
.streak-card,
.insights-card,
.badges-card,
.chart-card{

    width:100%;

    margin-bottom:20px;
    transition: all .35s ease;

transform: translateY(0);

}

}
/* =====================================
   HAMBURGER MENU
===================================== */

.menu-btn{

    display:none;

    background:none;

    border:none;

    font-size:30px;

    cursor:pointer;

}

@media (max-width:768px){

    .navbar{

        display:flex;

        justify-content:space-between;

        align-items:center;

        flex-direction:row;

        padding:15px;

    }

    .menu-btn{

        display:block !important;

        font-size:32px;

        color:#2563eb;

        background:none;

        border:none;

        cursor:pointer;

        margin-right:10px;

    }

    .nav-right{

        display:none;

        width:100%;

    }

    .nav-right.show{

        display:flex;

        flex-direction:column;

        gap:10px;

        margin-top:15px;

    }

}
/* =====================================
   CARD HOVER EFFECT
===================================== */

.focus-card:hover,
.notes-card:hover,
.timer-card:hover,
.task-card:hover,
.planner-card:hover,
.weather-card:hover,
.streak-card:hover,
.insights-card:hover,
.badges-card:hover,
.chart-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(37,99,235,.18);

}
/* =====================================
   CUSTOM SCROLLBAR
===================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef4ff;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#1d4ed8;

}
@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@keyframes clickPop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(.95);

    }

    100%{

        transform:scale(1);

    }

}

.button-click{

    animation:clickPop .25s ease;

}
.left-column>*{

    animation:fadeUp .6s ease;

}

.middle-column>*{

    animation:fadeUp .8s ease;

}

.right-column>*{

    animation:fadeUp 1s ease;

}
/* =====================================
   AI COACH
===================================== */

.ai-card{

    margin-top:25px;

    padding:25px;

    border-radius:20px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.3);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.ai-card h2{

    margin-bottom:15px;

}

#aiTip{

    line-height:1.8;

    color:#374151;

    margin-bottom:20px;

    font-size:15px;

}
/* =====================================
   AI SMART SCHEDULE
===================================== */

.schedule-card{

    margin-top:25px;

    padding:25px;

    border-radius:20px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

#aiSchedule{

    margin-top:15px;

    line-height:1.8;

}

.schedule-item{

    padding:15px;

    margin:14px 0;

    border-radius:12px;

    background:#f8fafc;

    border-left:6px solid #d1d5db;

    transition:.3s;

}

.schedule-item:hover{

    transform:translateX(5px);

}

.dark-mode .schedule-item{

    background:#374151;

}

/* ===============================
   HEATMAP
=============================== */

.heatmap-card{

    margin-top:30px;

    padding:25px;

    border-radius:18px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(15px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

#heatmapGrid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

    margin-top:20px;

}

.day-box{

    aspect-ratio:1;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    font-weight:600;

    background:#e5e7eb;

    transition:.25s;

    cursor:pointer;

}
.day-box:hover{

    transform:scale(1.15);

}

.day1{

    background:#bbf7d0;

}

.day2{

    background:#4ade80;

}

.day3{

    background:#16a34a;

}

.day4{

    background:#166534;

}
/* ===============================
   HEATMAP DAYS
=============================== */

.heatmap-days{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    margin-top:18px;

    margin-bottom:10px;

    text-align:center;

    font-size:13px;

    font-weight:600;

    color:#6b7280;

}
.today-box{

    border:3px solid #2563eb;

    box-shadow:0 0 12px rgba(37,99,235,.35);

}
.chart-card{
    margin-top:25px;
    padding:20px;
    border-radius:18px;
    background:#ffffff;
    backdrop-filter: blur(15px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);

    height:350px;   /* add this */
}


#weeklyTrendChart{
    width:100% !important;
    height:100% !important;
}

.chart-container{

    position:relative;

    height:320px;

}
/* ===============================
   Last 7 Days Cards
=============================== */

.history-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

    margin-top:20px;

}

.history-card{

    background:#fff;

    border-radius:16px;

    padding:18px;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    transition:.3s;

}

.history-card:hover{

    transform:translateY(-5px);

}

.history-card h3{

    margin-bottom:10px;

    color:#2563eb;

}

.history-card p{

    margin:5px 0;

    color:#555;

    font-size:14px;

}

.score{

    font-size:22px;

    font-weight:bold;

    color:#16a34a;

}
.rating-stars{

    margin-top:10px;

    font-size:22px;

    color:#f59e0b;

    letter-spacing:3px;

    font-weight:bold;

}

#bestDayScore{

    display:block;

    margin-top:8px;

    font-size:15px;

    color:#6b7280;

    font-weight:600;

}
.progress-bar{

    width:100%;

    height:18px;

    background:#e5e7eb;

    border-radius:30px;

    overflow:hidden;

    margin-top:15px;

}

#completionBar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #22c55e,
        #16a34a
    );

    border-radius:30px;

    transition:.6s;

}

#completionPercent{

    text-align:center;

    font-size:30px;

    color:#22c55e;

    margin-top:10px;

}
.day1{

    background:#86efac;

}

.day2{

    background:#3b82f6;

}

.day3{

    background:#7c3aed;

}
.history-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:20px;

}

.history-card{

    background:#f8fafc;

    border-radius:16px;

    padding:20px;

    text-align:center;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.history-card h3{

    color:#2563eb;

    font-size:28px;

    margin-bottom:8px;

}

.history-card p{

    color:#6b7280;

    font-weight:600;

}

/* ===============================
   Last 7 Days Summary
================================*/

.history-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:20px;

}

.history-card{

    background:#fff;

    border-radius:18px;

    padding:22px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

    border:2px solid transparent;

}

.history-card:hover{

    transform:translateY(-6px);

    border-color:#2563eb;

    box-shadow:0 18px 35px rgba(37,99,235,.20);

}

.history-card h3{

    font-size:30px;

    color:#2563eb;

    margin-bottom:8px;

}

.history-card p{

    color:#64748b;

    font-size:15px;

    font-weight:600;

}
.dark-mode .history-card{

    background:#1e293b;

}

.dark-mode .history-card p{

    color:#cbd5e1;

}

.dark-mode .history-card h3{

    color:#60a5fa;

}
/* ===============================
   Achievement Timeline
================================*/

.achievement-timeline{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:20px;

}

.achievement-item{

    flex:1;

    min-width:180px;

    background:#fff;

    border-radius:15px;

    padding:18px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.achievement-item:hover{

    transform:translateY(-5px);

}

.achievement-item.locked{

    opacity:.45;

}

.achievement-item h3{

    font-size:28px;

    margin-bottom:10px;

}

.dark-mode .achievement-item{

    background:#1e293b;

}
/* ===============================
   Monthly Report
================================*/

.report-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:20px;

}

.report-card{

    background:#fff;

    padding:22px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.report-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(37,99,235,.18);

}

.report-card h3{

    font-size:30px;

    color:#2563eb;

    margin-bottom:8px;

}

.report-card p{

    color:#64748b;

    font-weight:600;

}

.dark-mode .report-card{

    background:#1e293b;

}

.dark-mode .report-card p{

    color:#cbd5e1;

}
/* ===============================
   Overall Score
================================*/

.score-card{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:white;

    padding:35px;

    border-radius:22px;

    text-align:center;

    margin-bottom:25px;

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

.score-circle{

    width:150px;

    height:150px;

    border-radius:50%;

    background:white;

    color:#2563eb;

    margin:25px auto;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    font-weight:bold;

}

/* ===============================
   Backup Buttons
=============================== */

.backup-buttons{

    display:flex;

    gap:15px;

    justify-content:center;

    margin:20px 0;

    flex-wrap:wrap;

}

.backup-buttons button{

    padding:12px 22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}

#backupBtn{

    background:#2563eb;

    color:white;

}

#restoreBtn{

    background:#22c55e;

    color:white;

}

.backup-buttons button:hover{

    transform:translateY(-2px);

}

/* ===============================
   Settings
=============================== */

.settings-card{

    margin-top:20px;

    background:#fff;

    padding:20px;

    border-radius:16px;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.setting-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:18px 0;

}

.setting-item label{

    font-weight:600;

}

.setting-item input{

    width:90px;

    padding:8px;

    border:1px solid #ddd;

    border-radius:8px;

    text-align:center;

    font-size:15px;

}

#saveSettings{

    width:100%;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

#saveSettings:hover{

    transform:translateY(-2px);

    background:#1d4ed8;

}