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


body {

    font-family:
    Inter,
    Arial,
    sans-serif;

    background:
    radial-gradient(circle at top,#182c55,#050914);

    color:white;

}



.app {

    display:flex;

    min-height:100vh;

}



/* SIDEBAR */


.sidebar {

    width:280px;

    padding:30px;

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

    backdrop-filter:blur(20px);

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

}



.logo {

    display:flex;

    align-items:center;

    gap:15px;

    font-size:25px;

    font-weight:700;

    margin-bottom:50px;

}



.logo-circle {

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;


    background:
    linear-gradient(
    135deg,
    #00eaff,
    #5264ff
    );


    box-shadow:
    0 0 30px
    rgba(0,220,255,.5);

}




nav {

    display:flex;

    flex-direction:column;

    gap:15px;

}



nav a {

    padding:15px;

    border-radius:15px;

    color:#cbd8ff;

    text-decoration:none;

    cursor:pointer;

}



nav a:hover,
nav .active {

    background:
    rgba(0,200,255,.15);

    color:white;

}





/* CONTENT */


.content {

    flex:1;

    padding:50px;

}



header h1 {

    font-size:42px;

}



header p {

    color:#9faed8;

    margin-top:10px;

}




/* GRID */


.grid {

    margin-top:40px;

    display:grid;

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

    gap:25px;

}




.panel {


    padding:30px;

    border-radius:25px;


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


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


    backdrop-filter:
    blur(20px);


}



.panel h2 {

    margin-bottom:20px;

}




.input {

    margin-top:20px;

    padding:20px;


    border-radius:15px;


    background:
    rgba(0,0,0,.25);


    color:#aebce5;

}



button {

    margin-top:20px;

    padding:15px 10px;


    border:none;

    border-radius:15px;


    color:white;


    background:
    linear-gradient(
    135deg,
    #00c6ff,
    #0066ff
    );


    cursor:pointer;

}





.stat {

    font-size:30px;

    font-weight:bold;

}



.chart {

    height:120px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:
    linear-gradient(
    135deg,
    rgba(0,200,255,.2),
    rgba(100,100,255,.2)
    );

}





/* AI RECOMMENDATIONS */


.assistant {

    margin-top:40px;

}



.message {

    padding:20px;

    margin-top:15px;


    border-radius:18px;


    background:
    rgba(0,220,150,.15);

}



.warning {

    background:
    rgba(255,180,0,.15);

}






@media(max-width:900px){


.app {

    flex-direction:column;

}


.sidebar {

    width:100%;

}


.content {

    padding:25px;

}


}



.chat-window {

    height:300px;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-bottom:20px;

}



.chat-message {

    padding:15px 20px;

    border-radius:18px;

    max-width:85%;

    line-height:1.5;

}



.ai-message {

    background:
    rgba(0,220,255,.15);

    align-self:flex-start;

}



.user-message {

    background:
    rgba(80,100,255,.25);

    align-self:flex-end;

}



.chat-input {

    display:flex;

    gap:10px;

}



.chat-input input {

    flex:1;

    padding:15px;

    border-radius:15px;

    border:none;

    outline:none;

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

    color:white;

}



.chat-input button {

    margin-top:0;

}