body{
scroll-behavior:smooth;
font-family:system-ui;
margin:0;
}

/* ================= CARDS ================= */
.card{
background:white;
padding:30px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
}

.case{
background:white;
padding:40px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.input{
width:100%;
padding:15px;
border-radius:10px;
border:1px solid #ddd;
}

/* ================= SMOOTH HEADER SHADOW ================= */
header{
transition:.3s;
}

/* ================= TOGGLE SWITCH ================= */
#themeToggle{
display:none;
}

/* bolinha do switch já animada via JS, mas reforço aqui */
#toggleBall{
transition:transform .3s ease;
}

/* ================= LIGHT MODE ================= */
body.light{
background:#f5f7fb !important;
color:#111 !important;
}

/* cards no modo claro */
body.light .card,
body.light .case{
background:#ffffff;
color:#111;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* chat / painel transparente vira branco */
body.light .bg-white\/10{
background:#ffffff !important;
color:#111 !important;
backdrop-filter:none;
}

/* textos secundários */
body.light .text-gray-300,
body.light .text-gray-400{
color:#555 !important;
}

/* botões escuros no modo claro */
body.light .bg-blue-600{
background:#2563eb !important;
}

body.light .hover\:bg-blue-700:hover{
background:#1d4ed8 !important;
}

/* bordas claras */
body.light .border-white\/30{
border-color:#ccc !important;
}

/* sombra leve no modo claro */
body.light .shadow-xl{
box-shadow:0 10px 25px rgba(0,0,0,.1) !important;
}