.home html{
    min-height: 100%;
}


 body{
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: linear-gradient(to bottom, #bde7ff, #eaf8ff);

    color: black;

    align-items: center;
    padding: 20px 40px;
    min-height: 100vh;
    background-attachment: fixed;

    background-color: rgba(255, 255, 255, 0.5);




}

.home,
.register,
.login {
    position:relative;
    overflow-x : hidden;
}

.home .clouds,
.register .clouds,
.login .clouds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: auto 100%;
    z-index: 0;
}

.home .cloud-one,
.register .cloud-one,
.login .cloud-one {
    background-image: url("cloud1.png");
    opacity: 0.35;
    animation: cloudsMove 120s linear infinite;
}

.home .cloud-two,
.register .cloud-two,
.login .cloud-two {
    background-image: url("cloud2.png");
    opacity: 0.2;
    animation: cloudsMoveReverse 180s linear infinite;
}

.home header,
.home main,
.register header,
.register main,
.login header,
.login main{
    position: relative;
    z-index: 1;
}

.register-landscape {
    position: fixed;
    inset: 0;
    background-image: url("landscape.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 600px) {
    .register-landscape {
        background-size: auto 75%;
    }
}

@keyframes cloudsMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 2000px 0;
    }
}

@keyframes cloudsMoveReverse {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -2000px 0;
    }
}

.login-landscape{
    position: fixed;
    inset: 0;
    background-image: url("landscape.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 600px) {
    .login-landscape{
        background-size: auto 75%;
    }
}



.profile header,
.profile main {
    position: relative;
    z-index: 1;
}

.profile-landscape {
    position:fixed;
    inset: 0;
    background-image:url("landscape.png");
    background-repeat:no-repeat;
    background-position: center bottom;
    background-size:100% auto;
    pointer-events:none;
    z-index: 0;
}

@media (max-width: 600px) {
    .profile-landscape{
        background-size: auto 75%;
    }
}



.hero h2{
    color: #2d5cff
}

.home nav h1{
    color: #2d5cff
}

.home nav h1:hover,
.register nav h1:hover,
.dashboardb nav h1:hover,
.progress nav h1:hover,
.profile nav h1:hover,
.notifications nav h1:hover
{
    color: black;
}



.home nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.home nav a{

    text-decoration: none;
    color: #2d5cff;
    font-weight:bold;
}

.home nav a:hover{
    color:black;
}
.hero{
    text-align: center;
    padding: 100px 20px;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

}

.hero-actions a{
    text-decoration:none;
    color:#2d5cff;
    font-weight:bold;

}

.categories{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 40px
}

.categories h2{
    flex-basis: 100%;
    text-align: center;
    margin: 0 0 12px;
    color: #2d5cff;
    font-weight:bold;

}

.how-to-work{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px 40px;
}

.how-to-work h2{
    flex-basis: 100%;
    text-align: center;
    margin: 0 0 12px;
    color: #2d5cff;
    font-weight:bold;
}

.steps{
    text-align: center;
    width:160px;
    min-height: 120px;
    background: white;
    box-sizing: border-box;
    padding:14px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    width: calc(33.33% - 20px);
    text-decoration:none;
    color: inherit;
}

.card{
    background: white;
    box-sizing: border-box;
    padding: 20px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    text-align:center;
    transition:transform 0.3s ease;
    width: calc(33.33% - 20px);
    text-decoration:none;
    color: inherit;

}

.card h2{
    color: #2d5cff;
    text-decoration:none;
}

.card h2 a{
    text-decoration: none;
    color: #2d5cff;
  }

  .card h2 a:hover,
  .card h2 a:visited{
    text-decoration: none;
    color: #2d5cff;
  }

.card:hover{
    transform: translateY(-5px); /* moves card slightly up when hovered */
    box-shadow:0 5px 10px rgb(0,0,0, 0.2);
}

.features{
    padding: 90px 40px

}

.feature-box{
    margin-bottom: 30px;
}

.feature-title{
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-box h3{
    margin: 0;
    color: #2d5cff;
    font-weight:bold;
    text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 rgba(255, 255, 255, 0.7);

}

.feature-box p{
    margin-bottom: 0;
}


.btn:hover{
    color: #2d5cff


}

.d-cards{

    box-sizing: border-box;
    padding: 40px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    text-align:left;
    transition:transform 0.3s ease;
}

.d-cards h2{
    color: #2d5cff;
    text-decoration:none;
    text-align: left;
}

.d-cards h3{
    text-align: center;
    color: #2d5cff;
    font-size: 25px;
    font-weight: bold;
}

.controls{
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.category-filter-help,
.active-category-label,
.empty-goals-message{
    margin: 0 0 16px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

.dashboard-select,
.add-goal-form input,
.add-goal-form button{
    width: 100%;
    box-sizing: border-box;
}

.dashboard-select,
.add-goal-form input{
    padding: 12px 14px;
    border: 1px solid #cfe0ff;
    border-radius: 12px;
    font-size: 1rem;
    color: #1e293b;
    background: #ffffff;
}

.dashboard-select{
    max-width: 320px;
    cursor: pointer;
}

.dashboard-select:focus,
.add-goal-form input:focus{
    outline: none;
    border-color: #2d5cff;
    box-shadow: 0 0 0 3px rgba(45, 92, 255, 0.15);
}

.add-goal-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-goal-form button{
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: #2d5cff;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.add-goal-form button:hover{
    background: #1e4ad9;
    transform: translateY(-1px);
}

#goals-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.goal-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e6eefc;
}

.goal-item:last-child{
    border-bottom: none;
}

.goal-label{
    flex: 1;
    font-size: 1rem;
    color: #1e293b;
}

.category-badge{
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.category-academics{
    color: #1d4ed8;
    background: #eaf2ff;
}

.category-fitness{
    color: #15803d;
    background: #ecfdf3;
}

.category-nutrition{
    color: #b45309;
    background: #fff7ed;
}

.goal-delete-btn{
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
}

.goal-delete-btn:hover{
    color: #dc2626;
    background: #fef2f2;
}

@media (max-width: 768px){
    .controls{
        grid-template-columns: 1fr;
    }

    .dashboard-select{
        max-width: none;
    }

    .goal-item{
        flex-wrap: wrap;
    }

    .category-badge{
        margin-left: 28px;
    }
}

.quick-stats-layout{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.quick-stats-column p{
    margin: 0;
}

.quick-stats-column:last-child p{
    text-align: right;
}

.stat-item{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.stat-item i{
    width: 18px;
    height: 18px;
    color: #2d5cff;
    flex-shrink: 0;
}

.stat-item-right{
    justify-content: flex-end;
}

.quick-stats-chart{
    width: 180px;
    height: 180px;
}

.dashboardb nav ul,
.register nav ul,
.login nav ul,
.profile nav ul,
.notifications nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight: bold;
}

.dashboardb nav a,
.register nav a,
.login nav a,
.profile nav a,
.notifications nav a{
    text-decoration: none;
    color: #2d5cff;
    font-weight:bold;
}

.dashboardb nav a:hover,
.register nav a:hover,
.login nav a:hover,
.profile nav a:hover,
.notifications nav a:hover{
    color:black;
    text-decoration: none;
}

/* Make the same behavior work reliably for visited links + keyboard focus */
body.login header nav a:visited,
body.login header nav a:focus-visible{
    color:#2d5cff;
}

body.login header nav a:hover,
body.login header nav a:focus-visible{
    color:black;
    text-decoration: none;
}

.register nav h1,
.dashboardb nav h1{
    color: #2d5cff;
}

.progress nav h1,
.profile nav h1,
.notifications nav h1{
    color: #2d5cff;
}

.stat-item p{
    font-size: 20px;
    font-weight:bold;
}

.register-container
{
    max-width: 400px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 5px 10px rgb(0,0,0, 0.1);
    background: white;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;

}

.register-container form{
    display:flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    font-weight: bold;
}

.register-container form input{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;
    font-size: 16px;
    font-weight: bold;
    color: #2d5cff;
    background: white;
}

.register-container .form-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.register-container .form-group label,
.register-container .form-group input{
    width: 100%;
}

.register-container h2{
    color: #2d5cff;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.register-container .form-group input:focus{
    outline: none;
    border-color: #2d5cff;
    box-shadow: 0 0 5px rgba(45, 92, 255, 0.5);
}


.register-footer a{
    color: #2d5cff;
    text-decoration: none;
    font-weight: bold;
}

.register-footer a:hover{
    color:black;
}

.register-submit{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: #2d5cff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.register-submit:hover{
    background-color: black;
    transform: translateY(-1px);
}


.hidden{
    display: none;

}

.register-container{
    position: relative;
    overflow: hidden;

}

.register-success{
    text-align: center;
    animation: successFadeIn 0.5s ease forwards;
}

.register-success h2{
    color:#2d5cff;
    font-size: 50px;
    margin-bottom: 10px;
}

.success-message{
    color: #334155;
    line-height: 1.5;
    margin-bottom: 24px;
}

.success-details{
    background: #eaf8ff;
    border: 1px solid #cfe0ff;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 24px;
    text-align: left;
}

.success-details p{
    margin: 10px 0;
    font-weight: bold;
}

.success-dashboard-link{
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius:12px;
    background-color: #2d5cff;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition:background-color 0.2s ease, transform 0.2s ease;


}


.success-dashboard-link:hover{
    background-color: black;
    transform: translateY(-1px);
}

.unicorn{
    position: absolute;
    top:20px;
    left: -80px;
    font-size: 42px;
    animation: unicornFly 2.2s ease-in-out forwards;

}

@keyframes unicornFly{
    0%{
        left: -80px;
        transform:translateY(20px) rotate(-10deg);
        opacity: 0;
    }

    20%{
        opacity:1;

    }

    50%{
        transform: translateY(-10px) rotate(8deg);
    }

    100%{
        left: calc(100% + 88px);
        transform: translate(10px) rotate(12deg);
        opacity:0;
    }
}

@keyframes successFadeIn {
    from{opacity:0;
    transform: translateY(12px);

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

}


.login-container
{
    max-width: 400px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 25px;
    box-shadow: 0 5px 10px rgb(0,0,0, 0.1);
    background: white;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;

}

.login-submit{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: #2d5cff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.login-container h2{
    color: #2d5cff;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
}

.login-container .form-group input:focus{
    outline: none;
    border-color: #2d5cff;
    box-shadow: 0 0 5px rgba(45, 92, 255, 0.5);
}

/* Keep login form styling consistent with register */
.login-container form{
    display:flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    font-weight: bold;
}

.login-container form input{
    padding: 10px;
    border-radius: 5px;
    border: 1px solid black;
    font-size: 16px;
    font-weight: bold;
    color: #2d5cff;
    background: white;
}

.login-container .form-group{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.login-container .form-group label,
.login-container .form-group input{
    width: 100%;
}

.progress nav ul{
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.progress nav a{

    text-decoration: none;
    color: #2d5cff;
    font-weight:bold;
}

.progress nav a:hover{
    color:black;
}



.progress-summary{

    box-sizing: border-box;
    padding: 40px;
    border-radius:25px;
    box-shadow:0 5px 10px rgb(0,0,0, 0.1);
    text-align:left;
    transition:transform 0.3s ease;
}

.progress-summary h2{
    color: #2d5cff;
    text-decoration:none;
    text-align: left;
}

.progress-summary h3{
    text-align: center;
    color: #2d5cff;
    font-size: 25px;
    font-weight: bold;
}

.progress-design{
    max-width: 1100px;
    margin:0 auto;
    padding: 20px 20px 90px}

.progress-hero{
    text-align: center;
    margin-bottom: 50px;
    }

.progress-hero h2{
    font-size: 3.0em;
}

.progress-hero p{
    font-size: 1.45em;
}

.progress-summary{
    display: flex;
    gap:135px;
    flex-wrap:wrap;
    margin-bottom: 35px;
}

.summary-card{
    flex: 1 1 240px;
    min-width: 220px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.summary-number{
    margin: 10px 0 8px;
    font-size: 2rem;
    font-weight: bold;
    color: #2d5cff;
}

.summary-notif{
    margin: 0;
    color: #2c3e50;
    line-height: 1.45;
}

.activities{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.activities h3{
    margin-top: 0;
    margin-bottom: 16px;
    color: #2d5cff;
}

.activities table{
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.activities th,
.activities td{
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e6eefc;
}

.activities th{
    background: #f4f8ff;
    color: #2d5cff;
    font-weight: 700;
}

.activities tbody tr:hover{
    background: #f9fbff;
}

.status-completed{
    color: #15803d;
    font-weight: bold;
}

.status-in-progress{
    color: #b45309;
    font-weight: bold;
}

.status-not-started{
    color: #6b7280;
    font-weight: bold;
}

.category-progress{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-progress h2{
    margin-top: 0;
    margin-bottom: 20px;
    color: #2d5cff;
    text-transform: capitalize;
}

.progress-items{
    margin-bottom: 18px;
}

.progress-items:last-child{
    margin-bottom: 0;
}

.progress-label{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.progress-bars{
    height: 12px;
    background: #e6eefc;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill{
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.fitness-fill{
    background: #2d5cff;
}

.nutrition-fill{
    background: #15803d;
}

.academics-fill{
    background: #b45309;
}

.progress-update{
    margin-bottom: 24px;
}

.progress-update label{
    font-weight: 600;
    margin-right: 10px;
    color: #2c3e50;
}

.progress-update select{
    padding: 8px 12px;
    border: 1px solid #cfe0ff;
    border-radius: 8px;
    background: #ffffff;
    color: #2c3e50;
}

@media (max-width: 768px){
    .progress-design{
        padding: 20px 12px 60px;
    }

    .progress-summary{
        gap: 16px;
    }

    .progress-hero h2{
        font-size: 2.1em;
    }

    .progress-hero p{
        font-size: 1.05em;
    }

    .activities{
        overflow-x: auto;
    }


}

.profile-container{
    max-width:1100px;
    margin:0 auto;
    padding: 50px 20px 90px;
}

.profile-hero{
    text-align: center;
    margin-bottom:50px;

}

.profile-hero h2{
    color: #2d5cff;
    font-size: 3.0rem;
    margin-bottom:10px;

}

.profile-hero p{
    font-size: 1.45rem;
    color:#64748b;
}

.profile-structure{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.profile-card{
    background: white;
    border-radius: 24px;
    padding:30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.profile-card:last-child{
    grid-column: 1 / -1;
}

.profile-card h3{
    color:#2d5cff;
    margin-bottom:25px;
}

.profile-card label:not(.checkbox-row){
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
}

.profile-card input:not([type="checkbox"]),
.profile-card select{
    width:100%;
    box-sizing: border-box;
    padding:10px 12px;
    margin-bottom:20px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    font-size:1rem;
}

.profile-card select{
    max-width: 320px;
}

.profile-card button{
    background: #2d5cff;
    color:white;
    border:none;
    border-radius:12px;
    padding: 12px 20px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 8px;
}

.profile-card button:hover{
    background: #1e4ad9;
}

.checkbox-row{
    display: flex;
    align-items: center;
    gap:12px;
    margin-bottom: 16px;
    cursor: pointer;
    font-size: 1rem;
    color: #334155;
}

.checkbox-row input[type="checkbox"]{
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    accent-color: #2d5cff;
}

.notifications-container{
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px 90px;
}

.notification-hero{
    text-align: center;
    margin-bottom: 50px;
}

.notification-hero h2{
    font-size: 50px;
    color:#2d5cff;
    margin-bottom: 10px;
}

.notification-hero p{
    font-size: 1.45rem;
    color:#64748b;
}

.notif-filters{
    display: flex;
    justify-content: center;
    gap:18px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.notif-filters button{
    border: none;
    background: white;
    color:#2d5cff;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.notif-filters button:hover{
    background: #2d5cff;
    color: white;
    transform: translateY(-2px);
}

.notif-filters button.active{
    background: #2d5cff;
    color: white;
}

.notification-empty{
    text-align: center;
    padding: 40px 24px;
    background: white;
    border-radius: 24px;
    color: #64748b;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.notification-list{
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.notification-card{
    display: flex;
    gap:24px;
    align-items: flex-start;
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-left: 8px solid #2d5cff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.notification-icon{
    width:64px;
    height: 64px;
    border-radius: 18px;
    background:#eef6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.notification-card h3{
    color: #1e293b;
    font-size: 28px;
    margin: 0 0 14px;
}

.notification-card p{
    margin: 0 0 14px;
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.5;
}

.notification-card span{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
}

.notification-card.upcoming{
    border-left-color: #2d5cff;
}

.notification-card.upcoming span{
    color: #2d5cff;
    background:#eaf2ff;
}

.notification-card.overdue{
    border-left-color: #f97316;
}

.notification-card.overdue .notification-icon{
    background: #fff3e8;
}

.notification-card.overdue span{
    background:#fff3e8;
    color:#f97316;
}

.notification-card.positive{
    border-left-color: #15803d;
}

.notification-card.positive .notification-icon{
    background: #ecfdf3;
}

.notification-card.positive span{
    background: #ecfdf3;
    color:#15803d;
}

@media (max-width: 768px){
    .notification-hero h2{
        font-size:32px;
    }

    .notification-card{
        flex-direction: column;
    }
}

@media (max-width: 768px){
    .profile-structure{
        grid-template-columns: 1fr;
    }

    .profile-card:last-child{
        grid-column: auto;
    }
}

/* Phone layout: keep the desktop design, but stack wide content on small screens. */
@media (max-width: 600px){
    body{
        padding: 12px;
    }

    header nav h1{
        margin: 8px 0 14px;
        text-align: center;
    }

    .home nav ul,
    .dashboardb nav ul,
    .register nav ul,
    .login nav ul,
    .progress nav ul,
    .profile nav ul,
    .notifications nav ul{
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    header nav a{
        display: inline-block;
        padding: 6px 2px;
    }

    .hero{
        padding: 60px 12px;
    }

    .hero h2{
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .categories,
    .how-to-work,
    .features{
        padding: 30px 8px;
    }

    .card,
    .steps{
        width: 100%;
    }

    .d-cards,
    .progress-summary,
    .activities,
    .category-progress,
    .profile-card,
    .notification-card{
        padding: 20px;
    }

    .controls{
        gap: 16px;
    }

    .goal-item{
        align-items: flex-start;
    }

    .category-badge{
        margin-left: 0;
    }

    .quick-stats-layout{
        grid-template-columns: 1fr;
    }

    .quick-stats-chart{
        margin: 4px auto 18px;
    }

    .quick-stats-column:last-child p{
        text-align: left;
    }

    .stat-item-right{
        justify-content: flex-start;
    }

    .register-container,
    .login-container{
        box-sizing: border-box;
        width: 100%;
        padding: 24px 18px;
        margin-top: 45px;
        margin-bottom: 45px;
    }

    .progress-design,
    .profile-container,
    .notifications-container{
        padding: 24px 4px 60px;
    }

    .progress-hero,
    .profile-hero,
    .notification-hero{
        margin-bottom: 30px;
    }

    .progress-hero h2,
    .profile-hero h2,
    .notification-hero h2{
        font-size: 2rem;
        line-height: 1.2;
    }

    .progress-hero p,
    .profile-hero p,
    .notification-hero p{
        font-size: 1rem;
        line-height: 1.5;
    }

    .progress-summary{
        gap: 14px;
    }

    .summary-card{
        min-width: 0;
        flex-basis: 100%;
    }

    .activities{
        overflow-x: auto;
    }

    .activities table{
        min-width: 560px;
    }

    .profile-card select{
        max-width: none;
    }

    .notif-filters{
        gap: 10px;
        margin-bottom: 24px;
    }

    .notif-filters button{
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .notification-list{
        gap: 18px;
    }

    .notification-card{
        gap: 16px;
        border-left-width: 5px;
    }

    .notification-icon{
        width: 52px;
        height: 52px;
        font-size: 28px;
    }

    .notification-card h3{
        font-size: 1.35rem;
    }

    .notification-card p{
        font-size: 1rem;
    }

    .notification-card span{
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}