* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Times New Roman', Georgia, serif; max-width: 800px; margin: 0 auto; padding: 20px; background: #e8e6dc; color: #141413; }
.container { background: #f0efe6; padding: 28px; border-radius: 4px; margin-bottom: 16px; border: 1px solid rgba(20, 20, 19, 0.1); }
h1 { margin-bottom: 8px; font-size: 1.8em; font-weight: 400; letter-spacing: -0.01em; }
h2 { margin-bottom: 12px; font-size: 1.2em; font-weight: 400; }
p { margin-bottom: 12px; color: #30302e; font-family: system-ui, sans-serif; font-size: 0.95em; }
input, button, select { font-family: system-ui, sans-serif; font-size: 15px; padding: 8px 12px; border: 1px solid rgba(20, 20, 19, 0.25); border-radius: 3px; background: #faf9f5; color: #141413; }
input[type="email"], input[type="number"] { width: 100%; margin-bottom: 12px; }
input:focus { outline: none; border-color: #d97757; }
button { background: #d97757; color: white; border: none; cursor: pointer; padding: 10px 20px; font-weight: 500; border-radius: 3px; transition: background 0.15s ease; }
button:hover { background: #c4654a; }
.success { color: #5a8a5e; }
.error { color: #c44; }
label { display: block; margin-bottom: 4px; font-weight: 500; font-family: system-ui, sans-serif; font-size: 0.9em; }
.cause-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cause-row .name { width: 220px; flex-shrink: 0; font-size: 14px; font-family: system-ui, sans-serif; }
.cause-row .value { width: 45px; text-align: right; font-size: 14px; font-family: system-ui, sans-serif; }
.stepper { display: flex; align-items: center; gap: 4px; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type="number"] { width: 50px; text-align: center; margin: 0; padding: 6px 4px; }
.step-btn { background: #ddd9ce; color: #30302e; border: 1px solid rgba(20, 20, 19, 0.2); padding: 6px 8px; font-size: 13px; cursor: pointer; min-width: 36px; font-weight: 500; }
.step-btn:hover { background: #cec9bd; }
.step-btn:active { background: #c0bbb0; }
.section { margin-bottom: 20px; }
.toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-family: system-ui, sans-serif; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(20, 20, 19, 0.1); font-size: 14px; }
th { font-weight: 600; color: #30302e; }
.bar { height: 14px; border-radius: 2px; display: inline-block; vertical-align: middle; }
.bar-planned { background: #d97757; }
.bar-my-ideal { background: #eda100; }
.bar-ideal { background: #8b7355; }
.legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 13px; font-family: system-ui, sans-serif; }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend .swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
#logout-btn { background: #30302e; font-size: 13px; padding: 6px 12px; float: right; }
#logout-btn:hover { background: #141413; }