/* =====================================================
   DIETETIC.ART
   GOAL DASHBOARD 2026
===================================================== */



.goal-container{

max-width:1140px;

margin:50px auto;

padding:20px;

}




/* =====================================================
   HERO
===================================================== */


.goal-hero{


padding:50px 30px;

border-radius:26px;

margin-bottom:35px;


background:
linear-gradient(
135deg,
rgba(14,165,233,.18),
rgba(30,58,138,.18)
);


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


box-shadow:
0 20px 50px rgba(0,0,0,.35);


animation:
fadeUp .7s ease;



}


.goal-hero h1{
display:flex;
align-items:center;
gap:12px;
}


.goal-hero h1 span:not(.emoji-title){

background:linear-gradient(
90deg,
#38bdf8,
#60a5fa
);

-webkit-background-clip:text;
color:transparent;

}


.emoji-title{

background:none!important;
-webkit-background-clip:initial!important;
color:initial!important;

}






/* =====================================================
   GRID
===================================================== */


.goal-grid{


display:grid;

grid-template-columns:

repeat(2,1fr);


gap:25px;

margin-bottom:30px;


}






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


.glass{


background:

rgba(15,27,45,.72);


backdrop-filter:

blur(18px);


border:

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



border-radius:22px;


box-shadow:

0 20px 45px rgba(0,0,0,.35);


}





.goal-card{


padding:30px;


animation:
fadeUp .8s ease;


}



.card-title{


font-size:22px;

font-weight:800;

margin-bottom:25px;


color:#38bdf8;


}






/* =====================================================
   STATS
===================================================== */


.stat-row{


display:flex;

justify-content:space-between;

align-items:center;


padding:14px 0;


border-bottom:

1px solid rgba(255,255,255,.06);


color:#cbd5e1;


}



.stat-row strong{


font-size:20px;

color:white;


}







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


.goal-card label{


display:block;

margin-top:15px;

margin-bottom:7px;

color:#94a3b8;

font-size:14px;


}



.goal-card input{


width:100%;


padding:14px;


border-radius:14px;


border:

1px solid rgba(255,255,255,.12);


background:

rgba(255,255,255,.04);


color:white;


font-size:16px;


outline:none;


transition:.25s;



}



.goal-card input:focus{


border-color:#38bdf8;


box-shadow:

0 0 20px rgba(56,189,248,.25);


}







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


.goal-btn{


display:inline-flex;


align-items:center;

justify-content:center;


margin-top:25px;


padding:14px 25px;


border-radius:14px;


border:none;


background:

linear-gradient(
135deg,
#0ea5e9,
#3b82f6
);


color:white;


font-weight:800;


cursor:pointer;


text-decoration:none;


transition:.25s;


box-shadow:

0 10px 30px rgba(14,165,233,.25);


}



.goal-btn:hover{


transform:

translateY(-3px);


filter:

brightness(1.1);


}








/* =====================================================
 RESULT
===================================================== */


.result-panel{


padding:35px;

text-align:center;


margin-bottom:30px;


animation:
fadeUp 1s ease;


}



.result-panel h2{


font-size:28px;

margin-bottom:25px;


}





.big-result span{


font-size:80px;


font-weight:900;


background:

linear-gradient(
90deg,
#38bdf8,
#22c55e
);


-webkit-background-clip:text;

color:transparent;


}





.big-result p{


font-size:18px;

color:#94a3b8;


}






.goal-date{


margin-top:20px;

font-size:17px;


}



.goal-date strong{


color:#38bdf8;


}









/* =====================================================
 PROGRESS
===================================================== */


.progress-box{


margin-top:35px;


}



.progress-line{


height:16px;


background:

rgba(255,255,255,.08);


border-radius:50px;


overflow:hidden;


}



#progressFill{


height:100%;


width:0;


border-radius:50px;


background:

linear-gradient(
90deg,
#0ea5e9,
#22c55e
);


transition:

width 1.5s ease;


box-shadow:

0 0 20px rgba(34,197,94,.5);



}



.progress-label{


display:flex;

justify-content:space-between;


margin-top:10px;


color:#94a3b8;


}










/* =====================================================
 TIMELINE
===================================================== */


.timeline-card{


padding:35px;


margin-bottom:30px;


}



.timeline{


display:flex;

align-items:center;


margin-top:35px;


}



.point{


display:flex;


flex-direction:column;


align-items:center;


gap:10px;


min-width:100px;


}



.point span{


color:#94a3b8;


font-size:14px;


}



.point strong{


font-size:22px;


}



.point::before{


content:"";


width:24px;

height:24px;


border-radius:50%;


background:#334155;


border:

4px solid #0b1220;


box-shadow:

0 0 0 2px #38bdf8;


}




.point.active::before{


background:#38bdf8;


box-shadow:

0 0 25px #38bdf8;


}



.point.target::before{


background:#22c55e;


box-shadow:

0 0 25px #22c55e;


}




.line{


height:3px;


flex:1;


background:

linear-gradient(
90deg,
#38bdf8,
#22c55e
);


}








/* =====================================================
 CHART
===================================================== */


.chart-card{


padding:35px;

margin-bottom:30px;


}




.chart-card h2{


margin-bottom:25px;


}






#goalChart{


max-height:350px;


}










/* =====================================================
 DIET CTA
===================================================== */


.diet-offer{


padding:45px;


text-align:center;


margin-bottom:50px;


background:

linear-gradient(
135deg,
rgba(14,165,233,.12),
rgba(34,197,94,.12)
);


}



.diet-offer h2{


font-size:30px;

margin-bottom:15px;


}



.diet-offer p{


color:#94a3b8;

margin-bottom:20px;


}








/* =====================================================
 ANIMATION
===================================================== */


@keyframes fadeUp{


from{


opacity:0;

transform:

translateY(30px);


}



to{


opacity:1;

transform:

translateY(0);


}


}








/* =====================================================
 MOBILE
===================================================== */


@media(max-width:800px){



.goal-container{

padding:12px;

margin-top:25px;

}



.goal-grid{


grid-template-columns:1fr;


}



.goal-hero h1{


font-size:32px;


}



.big-result span{


font-size:60px;


}



.timeline-card{

padding:25px 15px;

}



.timeline{

display:flex;

justify-content:center;

align-items:center;

width:100%;

overflow:hidden;

margin-top:25px;

padding:35px;

margin-bottom:25px;
}



.point{


min-width:70px;

flex:1;

max-width:90px;

text-align:center;


}



.point span{

font-size:12px;

}



.point strong{

font-size:18px;

}




.point::before{


width:20px;

height:20px;


}



.line{


flex:1;

min-width:20px;

height:2px;


}



}