body, html {
    margin:0; padding:0;
    font-family: 'Poppins', sans-serif;
    background-color: #f0f4f8;
    color: #333;
}

.container {
    max-width: 480px;
    margin: 30px auto;
    padding: 20px;
}

h1 { text-align:center; margin-bottom:20px; font-weight:600; }

.card {
    background-color:#fff;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    padding:20px;
    margin-bottom:20px;
}

.quote-card { background: linear-gradient(135deg, #111617, #66a6ff); color:#fff; text-align:center; }
.mood-options { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.mood-options label { display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:10px; background:#f0f4f8; cursor:pointer; transition:0.3s; }
.mood-options input { display:none; }
.mood-options label:hover { background:#d6e6f2; }
.mood-options input:checked + span { font-weight:600; color:#1b73e8; }
.notes-card textarea { width:100%; height:60px; border-radius:10px; border:1px solid #ccc; padding:10px; margin-top:10px; resize:none; }
button { padding:10px 20px; margin-top:10px; border-radius:10px; border:none; cursor:pointer; background-color:#000d97; color:white; font-weight:600; transition:0.3s; }
button:hover { background-color:#001837; }

.reset-btn { width:100%; background-color:#0f0092; }
.reset-btn:hover { background-color:#334655; }

.chart-card canvas { margin-top:10px; }
@media(max-width:480px){
    .mood-options label{ font-size:14px; padding:8px 12px; }
}