:root { --bg:#eef6ed; --card:#fffdf7; --ink:#3a4a3f; --sub:#7c8b80; --main:#66bb6a; --line:#e3ede2; --r:18px; }
* { box-sizing:border-box; }
html { overflow-x:hidden; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px system-ui,"Microsoft YaHei",sans-serif; }
main { width:min(100%,960px); margin:auto; padding:16px; }
header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:4px 0 14px; }
header b { font-size:22px; line-height:1.25; } header small { display:block; margin-top:5px; color:var(--sub); font-size:13px; line-height:1.45; }
button,input,textarea { font:inherit; } button { border:1px solid var(--line); background:#fff; border-radius:12px; padding:10px 13px; min-height:44px; color:var(--ink); cursor:pointer; }
#historyBtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#historyBtn svg { width:18px; height:18px; flex:0 0 18px; }
.primary { background:var(--main); border-color:var(--main); color:#fff; } .danger { color:#b84b4b; }
.remind,.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:16px; }
.remind p { display:flex; align-items:flex-start; gap:8px; margin:8px 0 0; line-height:1.65; }
.remind-done { display:inline-grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin-top:2px; border-radius:50%; background:#e3f3e2; color:#4d9651; font-size:14px; font-weight:700; }
.modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .modules .card { margin:0; } .full { grid-column:1/-1; }
h2 { font-size:16px; margin:0 0 12px; } textarea,input { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px; color:var(--ink); margin-bottom:10px; } textarea { resize:vertical; }
.chips,.sound-row,.tools,.inline { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .chips button { min-height:40px; padding:7px 10px; } .chips button.on,.sound-row button.on { border-color:var(--main); background:#edf8ec; }
.sound-control { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:110px; }.sound-emoji { font-size:18px; }.sound-action { display:inline-flex; margin-left:2px; color:var(--sub); }.sound-action svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.sound-control.on .sound-action { color:#3f8643; }
.inline input { flex:1; min-width:150px; margin:0; }.breath { height:130px; width:130px; border-radius:50%; margin:8px auto 14px; display:grid; place-items:center; text-align:center; background:#dff0df; color:#3f8643; }
@keyframes breath-in { from { transform:scale(.9); background:#e0f0df; box-shadow:0 4px 12px rgba(73,151,78,.1); } to { transform:scale(1.16); background:#9bd99e; box-shadow:0 12px 28px rgba(73,151,78,.28); } }
@keyframes breath-hold { from,to { transform:scale(1.16); background:#a8dca8; box-shadow:0 12px 28px rgba(73,151,78,.22); } }
@keyframes breath-out { from { transform:scale(1.16); background:#a8dca8; box-shadow:0 12px 28px rgba(73,151,78,.22); } to { transform:scale(.9); background:#e0f0df; box-shadow:0 4px 12px rgba(73,151,78,.1); } }
.breath[data-phase="inhale"] { animation:breath-in 4s cubic-bezier(.4,0,.2,1) forwards; }.breath[data-phase="hold"] { animation:breath-hold 2s linear forwards; }.breath[data-phase="exhale"] { animation:breath-out 4s cubic-bezier(.4,0,.2,1) forwards; }
@media (prefers-reduced-motion:reduce) { .breath[data-phase] { animation-duration:.01ms; } }
ul { padding:0; margin:10px 0 0; list-style:none; max-height:250px; overflow:auto; } li { display:flex; gap:8px; align-items:start; padding:9px; border-top:1px solid var(--line); font-size:14px; } li span { flex:1; }.edit { padding:4px 7px; min-height:32px; }
.muted,footer { color:var(--sub); font-size:13px; }
.save-status { min-height:20px; margin:8px 0 0; color:#4d9651; font-size:13px; }
footer { text-align:center; margin-top:28px; padding:18px 0 8px; border-top:1px solid rgba(227,237,226,.8); }
footer > p:first-child { max-width:300px; margin:0 auto 12px; line-height:1.65; }.tools { justify-content:center; max-width:440px; margin:0 auto 12px; }.tools button { min-width:104px; }.future { display:block; opacity:.62; margin:0 auto 14px; padding:7px 10px; min-height:36px; background:transparent; border-color:transparent; }.copyright { font-size:12px!important; color:#9aa89d!important; margin:0; }
.month { display:flex; align-items:center; justify-content:space-between; }.month h1 { font-size:19px; }.week,.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; gap:4px; }.week { color:var(--sub); font-size:12px; margin:10px 0; }.calendar button { padding:0; min-height:42px; border:0; background:transparent; }.calendar button.has { border-radius:50%; background:var(--mood); }.calendar button.selected { outline:2px solid var(--main); }
#homeBtn,#prevMonth,#nextMonth { background:transparent; border-color:transparent; color:#4d9651; }.month button { width:44px; padding:0; font-size:24px; line-height:1; }
.detail-section { padding:12px 0; border-top:1px dashed var(--line); }.detail-section:first-of-type { border-top:0; padding-top:0; }.detail-section b { color:#4d9651; }.detail-section p { margin:5px 0 0; line-height:1.75; }.empty-detail { color:var(--sub); }
#historyDetails h2 { margin:0 0 18px; color:#4d9651; font-size:18px; }
#historyDetails p { margin:0; line-height:1.85; }
#historyDetails p + p { margin-top:18px; }
#historyDetails p b { display:block; margin-bottom:6px; color:#4d9651; }
#historyDetails p b + br { display:none; }
.history-preview { width:max-content; max-width:100%; margin:0 auto 10px; padding:5px 10px; border-radius:999px; background:#e8f4e6; color:#5a8660; font-size:12px; }
@media(max-width:768px) { main { padding:14px 12px; }.modules { grid-template-columns:minmax(0,1fr); }.chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.chips button { min-width:0; padding:7px 3px; font-size:14px; }.sound-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.sound-row button { padding:8px 4px; font-size:14px; }.sound-row button:last-child { grid-column:1/-1; justify-self:center; width:calc(50% - 4px); }.calendar button { min-height:44px; } header b { font-size:20px; }.tools button { min-width:0; flex:1; } }