*{
 box-sizing:border-box;
 font-family:Inter,system-ui;
}

body{
 margin:0;
 background:#000;
 color:white;
 display:flex;
 justify-content:center;
 padding:14px;
}

body.light{
 background:#f2f2f2;
 color:#000;
}

.chat-box{
  height:300px;
 width:100vw;
 max-width:1200px;
 min-height:100vh;
 background:#1a1a1a;
 padding:18px;
 border-radius:24px;
 margin:auto;
}

body.light .chat-box{
 background:white;
}

.top-controls{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-bottom:14px;
}

select,input,button{
 padding:8px 12px;
 border-radius:12px;
 border:none;
}

button{
 background:#a855f7;
 color:white;
 cursor:pointer;
}

.kpi-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:12px;
 margin-bottom:14px;
}

.kpi{
 background:#222;
 padding:14px;
 border-radius:14px;
 text-align:center;
}

body.light .kpi{
 background:#e0e0e0;
}

.grid-2{
 display:flex;
 flex-direction:column;
 gap:18px;
 margin-top:18px;
}


canvas{
 background:#111;
 border-radius:14px;
 padding:10px;
 height:260px !important;
}

body.light canvas{
 background:#f0f0f0;
}

.summary{
 background:#2a2a2a;
 padding:12px;
 border-radius:12px;
 margin-bottom:12px;
}

body.light .summary{
 background:#e0e0e0;
}

@media(max-width:900px){
 .grid-2{grid-template-columns:1fr;}
 canvas{height:240px !important;}
}