:root{--bg: #F4EFE7;--surface: #FFFFFF;--surface-2: #FBF8F2;--primary: #27846F;--primary-d: #1C6452;--primary-soft: #E1F0EB;--accent: #E79968;--accent-soft: #FBE9DC;--ink: #26342F;--ink-2: #5E6F69;--ink-3: #9AA7A1;--line: #ECE5D9;--ok: #3FA98C;--warn: #E0A75A;--danger: #D9694F;--line-green: #06C755;--radius: 24px;--font-display: "Mitr", system-ui, sans-serif;--font-body: "Anuphan", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}.app{max-width:480px;margin:0 auto;padding:20px 18px 40px;min-height:100vh;display:flex;flex-direction:column}.hero{text-align:center;margin:8px 0 24px}.hero h1{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--primary-d);margin:0 0 4px}.hero p{color:var(--ink-2);font-size:15px;margin:0}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;margin-bottom:16px}.card h2{font-family:var(--font-display);font-weight:500;font-size:17px;margin:0 0 14px;color:var(--ink)}.label{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:10px}.hint{font-size:13px;color:var(--ink-3);margin-top:4px}.mood-row{display:flex;justify-content:space-between;gap:8px}.mood-btn{flex:1;aspect-ratio:1;border:2px solid var(--line);background:var(--surface-2);border-radius:18px;font-size:28px;cursor:pointer;transition:transform .08s ease,border-color .12s ease,background .12s ease}.mood-btn:active{transform:scale(.94)}.mood-btn.selected{border-color:var(--primary);background:var(--primary-soft)}.slider{width:100%;accent-color:var(--accent);height:36px}.craving-value{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--accent);text-align:center}.craving-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}textarea.note{width:100%;min-height:84px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--surface-2);resize:vertical}textarea.note:focus{outline:none;border-color:var(--primary)}.btn-primary{width:100%;padding:16px;border:none;border-radius:18px;background:var(--primary);color:#fff;font-family:var(--font-display);font-weight:500;font-size:17px;cursor:pointer}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-primary:active:not(:disabled){background:var(--primary-d)}.banner{border-radius:18px;padding:18px 16px;text-align:center;font-size:16px;line-height:1.5}.banner.green{background:var(--primary-soft);color:var(--primary-d)}.banner.amber{background:var(--accent-soft);color:#9a5a2e}.banner.red{background:#fbe3dd;color:#a23f2c}.banner.error{background:#fbe3dd;color:var(--danger)}.tabs{display:flex;gap:8px;margin-bottom:16px}.tab{flex:1;padding:12px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink-2);font-family:var(--font-display);font-weight:500;font-size:15px;cursor:pointer}.tab.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-d)}.hidden-input{display:none}.photo-pick-btn{width:100%;padding:40px 16px;margin-top:12px;border:2px dashed var(--line);border-radius:18px;background:var(--surface-2);color:var(--ink-2);font-family:var(--font-display);font-weight:500;font-size:17px;cursor:pointer}.photo-pick-btn:active{border-color:var(--primary);background:var(--primary-soft)}.photo-preview-wrap{margin-top:12px;text-align:center}.photo-preview{width:100%;max-height:320px;object-fit:contain;border-radius:18px;border:1px solid var(--line);background:var(--surface-2)}.btn-secondary{width:100%;margin-top:12px;padding:13px;border:1px solid var(--primary);border-radius:18px;background:var(--surface);color:var(--primary-d);font-family:var(--font-display);font-weight:500;font-size:16px;cursor:pointer}.privacy-note{margin-top:12px;text-align:center}.center{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:15px}.footnote{text-align:center;font-size:12px;color:var(--ink-3);margin-top:auto;padding-top:20px}