.mood { display:grid; place-items:center; padding:40px 16px; }
.mood-card { width:100%; max-width:540px; background:#fff; border-radius:20px; box-shadow:0 12px 30px rgba(0,0,0,.08); overflow:hidden; }
.mood-head { background:#b33832; color:#fff; font-weight:700; padding:16px 20px; }
.mood-title { margin:16px 20px 8px; font-size:clamp(20px,3.8vw,28px); line-height:1.2; }
.mood-options { padding:0 20px 16px; display:grid; gap:10px; }
.mood-btn { text-align:left; background:#f1f2f4; color:#111; border:0; border-radius:12px; padding:12px 14px; font-weight:600; cursor:pointer; }
.mood-btn:focus{outline:2px solid #b33832;}
.mood-results { list-style:none; padding:0 20px 16px; margin:0; display:grid; gap:10px; }
.mood-results li { position:relative; background:#f1f2f4; border-radius:12px; padding:12px 14px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; font-weight:600; }
.mood-results li i { position:absolute; inset:0; background:#b33832; opacity:.95; transform-origin:left; transform:scaleX(0); transition:transform .35s ease; border-radius:12px; }
.mood-results li span, .mood-results li b { position:relative; z-index:1; }
.mood-results li.active { color:#fff; }
.mood-foot { padding:0 20px 22px; color:#2e7d32; font-size:13px; }

/* modal */
.mood-modal { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:1000; }
.mood-modal-content { width:100%; max-width:420px; background:#fff; border-radius:16px; padding:20px; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.mood-close { border:0; background:transparent; font-size:18px; float:right; cursor:pointer; }
.mood-submit { background:#b33832; color:#fff; border:0; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer; }
.mood-submit[disabled]{opacity:.6; cursor:not-allowed;}
.mood-status { min-height:18px; font-size:13px; }

.hidden { display: none !important; }
.mood-results li i { transform-origin: left; transform: scaleX(0); transition: transform .35s ease; }