:root { font-family: system-ui, sans-serif; color: #3f3a4a; background: #f5f1fb; }
* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; }
.card { max-width: 620px; margin: auto; padding: 28px; background: white; border-radius: 20px; box-shadow: 0 8px 30px #51466b18; }
.eyebrow { color: #8066b3; font-weight: 700; }
h1 { margin-top: 8px; }
h2 { margin-bottom: 4px; }
.moods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.moods button.selected { background: #8066b3; color: white; box-shadow: 0 0 0 3px #ded3f1; }
button { border: 0; border-radius: 12px; padding: 12px 14px; background: #eee7fb; color: inherit; font-size: 1rem; cursor: pointer; }
button:hover { background: #e2d6f6; }
.message, .hint { color: #756f80; }
section { margin-top: 28px; }
.mood-log { padding: 18px; background: #faf7ff; border: 1px solid #e7def5; border-radius: 14px; }
.mood-chart { width: 100%; overflow-x: auto; }
.mood-chart svg { display: block; width: 100%; min-width: 430px; height: auto; }
.chart-grid-line { stroke: #e5dff0; stroke-width: 1; }
.chart-line { fill: none; stroke: #8066b3; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #8066b3; stroke: white; stroke-width: 3; }
.chart-label, .chart-date { fill: #756f80; font-size: 13px; }
.mood-history { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; list-style: none; }
.mood-history li { margin: 0; padding: 6px 10px; border-radius: 999px; background: #eee7fb; font-size: 0.9rem; }
form { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; border: 1px solid #d8d1e2; border-radius: 10px; padding: 12px; font-size: 1rem; }
form button { background: #8066b3; color: white; }
.ogiri { padding: 18px; background: #faf7ff; border: 1px solid #e7def5; border-radius: 14px; }
.ogiri-answer { margin: 12px 0; }
.ogiri-answer[hidden] { display: none; }
.ogiri-answer button { background: #8066b3; color: white; }
.praise { min-height: 1.5em; color: #684d98; font-weight: 700; }
.choice-game { padding: 18px; background: #f4fbf8; border: 1px solid #d7eee4; border-radius: 14px; }
.topic { min-height: 3em; font-size: 1.08rem; font-weight: 700; line-height: 1.6; }
#next-topic { background: #dff2ea; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.choices[hidden] { display: none; }
.choices button { background: #e1f3eb; }
#next-choice { background: #dff2ea; }
.data-move { padding: 18px; background: #fffaf0; border: 1px solid #f0e1bd; border-radius: 14px; }
.data-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.import-label { border-radius: 12px; padding: 12px 14px; background: #eee7fb; cursor: pointer; }
ul { padding-left: 20px; }
li { margin: 12px 0; }
.record-text { display: block; overflow-wrap: anywhere; }
.record-actions { display: flex; gap: 8px; margin-top: 6px; }
.record-actions button { padding: 7px 11px; font-size: 0.9rem; }
.record-actions .delete-button { background: #f9e5e5; color: #8d3d3d; }
@media (max-width: 420px) { .card { padding: 20px; } form { flex-direction: column; } .mood-log { padding: 14px; } }