body { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; margin: 0; background: #f5f7fb; color: #222; }
.container { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.narrow { max-width: 420px; }
.card { background: white; border-radius: 12px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
label { display: block; margin: 10px 0 6px; font-weight: 600; }
input, textarea, select, button { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid #d5dae5; }
textarea { min-height: 100px; }
button { background: #2a68ff; color: white; border: none; cursor: pointer; margin-top: 12px; }
button:hover { opacity: .9; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.row { display: flex; gap: 8px; }
.row select, .row button { width: auto; }
.muted { color: #666; font-size: 14px; }
.alert { background: #ffe6e6; color: #b10000; padding: 10px; border-radius: 8px; margin-bottom: 12px; }
.thumb { width: 100%; max-width: 380px; border-radius: 8px; border: 1px solid #ddd; margin: 8px 0; }
pre { white-space: pre-wrap; background: #f3f6ff; border-radius: 8px; padding: 10px; }
.math-answer { white-space: normal; background: #f3f6ff; border-radius: 8px; padding: 14px; line-height: 1.7; overflow-x: auto; font-size: 15px; }
.final-answer { display: inline-block; margin-top: 10px; padding: 6px 10px; background: #e8f1ff; border: 1px solid #b6d0ff; border-radius: 8px; font-weight: 700; }