*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#edf2e7;color:#294638;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
button,textarea{font:inherit}
button{cursor:pointer}
.page-shell{min-height:100vh;padding:18px;background:linear-gradient(135deg,#edf2e7,#fbf7ed)}
.design-stage{position:relative;width:min(1024px,100%);aspect-ratio:2/3;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 28px 80px rgba(38,65,48,.18);background:#f5f0e3}
.design-image{display:block;width:100%;height:100%;object-fit:cover}
.hotspot{position:absolute;border:0;background:transparent;border-radius:18px;outline:none}
.hotspot:hover,.hotspot:focus-visible{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(132,159,118,.5),0 0 26px rgba(255,255,255,.45)}
.nav-home{left:1.4%;top:23.7%;width:18.2%;height:4.5%}
.nav-draw{left:1.4%;top:28.7%;width:18.2%;height:4.5%}
.nav-journal{left:1.4%;top:33.8%;width:18.2%;height:4.5%}
.nav-mood{left:1.4%;top:38.8%;width:18.2%;height:4.5%}
.nav-insight{left:1.4%;top:43.8%;width:18.2%;height:4.5%}
.nav-growth{left:1.4%;top:48.8%;width:18.2%;height:4.5%}
.nav-prompt{left:1.4%;top:53.8%;width:18.2%;height:4.5%}
.mood-calm{left:29%;top:45.4%;width:6.7%;height:5.7%;border-radius:50%}
.mood-happy{left:38.1%;top:45.4%;width:6.7%;height:5.7%;border-radius:50%}
.mood-normal{left:47.3%;top:45.4%;width:6.7%;height:5.7%;border-radius:50%}
.mood-anxious{left:56.5%;top:45.4%;width:6.7%;height:5.7%;border-radius:50%}
.mood-hard{left:65.7%;top:45.4%;width:6.7%;height:5.7%;border-radius:50%}
.log-mood{left:61%;top:54.7%;width:10.5%;height:4.1%;border-radius:12px}
.daily-card{left:23.2%;top:68.4%;width:22.8%;height:17.3%}
.journal-card{left:47%;top:68.4%;width:22.8%;height:17.3%}
.insight-card{left:70.8%;top:68.4%;width:26.5%;height:17.3%}
.mobile-helper{width:min(1024px,100%);margin:14px auto 0;padding:12px 16px;border-radius:16px;background:rgba(255,255,250,.85);box-shadow:0 10px 30px rgba(42,68,50,.1);display:none;gap:8px;flex-direction:column}
.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(20,42,30,.38);backdrop-filter:blur(8px)}
.modal-backdrop[hidden]{display:none}
.modal-card{width:min(560px,100%);max-height:88vh;overflow:auto;position:relative;padding:30px;border-radius:28px;background:radial-gradient(circle at 90% 0%,rgba(255,255,255,.94),transparent 25%),linear-gradient(145deg,#fffdf5,#eaf1e5);border:1px solid rgba(255,255,255,.92);box-shadow:0 28px 90px rgba(22,48,32,.22)}
.close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:30px;color:#476552}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:#6c8872;margin:0 0 10px}
.modal-card h2{font-family:Georgia,"Noto Serif TC",serif;font-size:34px;margin:0 0 16px}
.modal-card p{line-height:1.8;color:#6a786e}
.modal-card textarea{width:100%;min-height:190px;border:1px solid rgba(57,91,68,.17);border-radius:18px;background:rgba(255,255,255,.72);padding:15px;resize:vertical}
.primary{margin-top:16px;border:0;border-radius:16px;padding:13px 20px;color:#fff;background:linear-gradient(135deg,#789879,#496d57);box-shadow:0 12px 26px rgba(55,86,62,.18)}
.mood-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mood-list button{border:1px solid rgba(57,91,68,.15);border-radius:16px;padding:12px 8px;background:rgba(255,255,255,.68);color:#31513f}
.toast{position:fixed;right:20px;bottom:20px;z-index:60;padding:13px 18px;border-radius:16px;background:#315b45;color:#fff;box-shadow:0 16px 35px rgba(28,54,38,.24)}
.toast[hidden]{display:none}
@media(max-width:760px){.page-shell{padding:0;background:#f2eee2}.design-stage{width:100%;border-radius:0;box-shadow:none}.mobile-helper{display:flex;border-radius:0;margin:0}.mood-list{grid-template-columns:1fr}.modal-card h2{font-size:28px}}