.mood-checkin-modal {
  max-width: 760px; overflow: hidden; border-color: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-radius: 26px; box-shadow: 0 32px 90px color-mix(in srgb, var(--color-fg) 24%, transparent);
}
.mood-checkin-modal .modal__head {
  padding: 26px 30px 22px; background: radial-gradient(circle at 88% -45%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 48%), var(--color-surface);
}
.mood-checkin-modal .modal__icon { width: 44px; height: 44px; border-radius: 14px; }
.mood-checkin-modal .modal__title { letter-spacing: -.025em; }
.mood-checkin-modal .modal__subtitle { margin-left: 56px; }
.mood-checkin-modal .modal__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.mood-intro { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-primary-soft), color-mix(in srgb, var(--color-primary-soft) 28%, var(--color-surface))); }
.mood-intro__eyebrow { display: block; margin-bottom: 5px; color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.mood-intro p { margin: 0; max-width: 62ch; color: var(--color-fg-muted); font-size: var(--text-sm); line-height: 1.5; }
.mood-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.mood-opt {
  position: relative; display: flex; min-width: 0; min-height: 142px; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2); border: 1px solid var(--color-border); border-radius: 20px;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2)); cursor: pointer;
  transition: transform 0.15s var(--ease-out), border-color 0.15s var(--ease-out), background-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.mood-opt:hover { border-color: color-mix(in srgb, var(--mood-c) 60%, var(--color-border)); background: var(--mood-s); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mood-opt:active { transform: translateY(0) scale(0.97); }
.mood-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.mood-opt.is-active { border-color: var(--mood-c); background: linear-gradient(180deg, var(--mood-s), var(--color-surface)); box-shadow: 0 0 0 3px var(--mood-s), var(--shadow-md); transform: translateY(-3px); }
.mood-opt.is-active .mood-emoji { transform: scale(1.08); }
.mood-opt__check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--mood-c); color: #fff; font-size: 11px; font-weight: var(--font-bold); opacity: 0; scale: .7; transition: opacity var(--dur-fast), scale var(--dur-fast); }
.mood-opt.is-active .mood-opt__check { opacity: 1; scale: 1; }
.mood-emoji {
  display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid color-mix(in srgb, var(--mood-c) 15%, var(--color-border));
  border-radius: 18px; background: var(--color-surface); box-shadow: var(--shadow-xs); transition: transform 0.2s var(--ease-out);
}
.mood-emoji > span { font-size: 2rem; line-height: 1; }
.mood-label { min-height: 34px; display: grid; place-items: center; color: var(--color-fg-muted); font-size: var(--text-sm); line-height: 1.25; text-align: center; font-weight: var(--font-semibold); overflow-wrap: anywhere; }
.mood-opt.is-active .mood-label { color: var(--mood-c); }

.mood-note-field {
  display: block; max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height 0.25s var(--ease-out), opacity 0.2s var(--ease-out), margin 0.25s var(--ease-out);
}
.mood-note-field.is-visible { max-height: 11rem; opacity: 1; margin-bottom: var(--space-4); }
.mood-note-field > span { display: block; margin-bottom: var(--space-2); }
.mood-note-field textarea { min-height: 92px; padding-block: 12px; border-radius: var(--radius-lg); background: var(--color-surface-2); line-height: 1.45; }

.mood-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.mood-skip-btn {
  color: var(--color-fg-muted); font-size: var(--text-sm); cursor: pointer;
}
.mood-skip-btn:hover { color: var(--color-fg); }
.mood-submit-btn { min-width: 245px; }

@media (max-width: 600px) {
  .mood-checkin-modal { max-height: calc(100vh - var(--space-4)); max-height: calc(100dvh - var(--space-4)); border-radius: 22px; }
  .mood-checkin-modal .modal__head { padding: var(--space-5); }
  .mood-checkin-modal .modal__subtitle { margin-left: 0; }
  .mood-checkin-modal .modal__body { padding: var(--space-4); overflow-y: auto; }
  .mood-intro { margin-bottom: var(--space-4); padding: var(--space-3); }
  .mood-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
  .mood-opt { grid-column: span 2; min-height: 112px; padding: var(--space-3) var(--space-1); border-radius: 16px; }
  .mood-opt:nth-child(4), .mood-opt:nth-child(5) { grid-column: span 3; }
  .mood-emoji { width: 46px; height: 46px; border-radius: 14px; }
  .mood-emoji > span { font-size: 1.6rem; }
  .mood-label { min-height: auto; font-size: 11px; }
  .mood-actions { align-items: stretch; flex-direction: column-reverse; }
  .mood-actions .btn { width: 100%; min-width: 0; }
}

.mood-spark { width: 100%; height: 56px; display: block; }
.mood-neg-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mood-neg-item { padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.mood-neg-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mood-neg-name { font-weight: var(--font-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mood-neg-emoji { font-size: 1rem; flex-shrink: 0; }
.mood-neg-date { font-size: var(--text-xs); color: var(--color-fg-muted); flex-shrink: 0; margin-left: auto; }
.mood-neg-note {
  margin: var(--space-1) 0 0 calc(28px + var(--space-2)); color: var(--color-fg-muted); font-size: var(--text-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mood-view-report {
  display: block; margin-top: var(--space-3); text-align: right; font-size: var(--text-sm);
  font-weight: var(--font-medium); color: var(--color-primary); text-decoration: none;
}
.mood-view-report:hover { text-decoration: underline; }