:root { --ink:#17211e; --muted:#6e7874; --bg:#f5f7f2; --card:#fff; --green:#20795a; --soft:#e4f1e9; --line:#e5e9e4; --gold:#eca947; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Microsoft YaHei", system-ui, sans-serif; }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { max-width:620px; min-height:100vh; margin:auto; padding:calc(22px + env(safe-area-inset-top)) 20px 108px; }
.hero { color:#f6fff9; padding:24px 22px 22px; border-radius:25px; background:linear-gradient(145deg,#18382e,#276c51); box-shadow:0 13px 28px #18382e28; }
.hero-top,.section-heading,.dialog-heading { display:flex; justify-content:space-between; align-items:center; }.brand { letter-spacing:.08em; font-size:14px; font-weight:800; }.date,.eyebrow { margin:0; color:#95bdab; font-size:12px; letter-spacing:.06em; }.hero h1 { margin:15px 0 7px; font-size:28px; line-height:1.2; }.hero p:not(.date) { margin:0; color:#d3e8dc; font-size:14px; }.icon-button { width:34px; height:34px; color:inherit; border:0; background:#ffffff18; border-radius:50%; font-size:19px; }.progress-row { display:flex; align-items:center; gap:13px; margin-top:22px; font-size:13px; }.progress-track { overflow:hidden; height:8px; flex:1; background:#ffffff2e; border-radius:10px; }.progress-fill { width:0; height:100%; border-radius:inherit; background:#efc46b; transition:width .25s; }
.streak-card,.coach-card { display:flex; gap:15px; margin:16px 0 27px; padding:17px 18px; border-radius:18px; background:#fff7e8; }.streak-card div { min-width:83px; }.streak-card .eyebrow { color:#9b8055; display:block; }.streak-card strong { display:block; font-size:21px; }.streak-card p { margin:2px 0; color:#735f43; font-size:13px; line-height:1.55; }.section-block { margin-top:25px; }.section-heading h2,.settings-panel h2 { margin:0; font-size:18px; }.text-button { padding:0; color:var(--green); border:0; background:transparent; font-size:13px; }.task-list { display:grid; gap:11px; margin-top:14px; }.task { display:flex; align-items:center; gap:14px; min-height:88px; padding:15px; border:1px solid var(--line); border-radius:18px; background:var(--card); transition:.2s; }.task.done { color:#789087; background:#f8fbf8; }.task.done .task-name { text-decoration:line-through; }.check { flex:0 0 27px; width:27px; height:27px; border:2px solid #b8c8c0; border-radius:50%; background:white; color:white; font-weight:bold; }.done .check { border-color:var(--green); background:var(--green); }.task-content { flex:1; }.task-meta { margin-bottom:5px; color:var(--green); font-size:12px; font-weight:700; }.task-name { font-size:15px; font-weight:700; }.task-detail { margin-top:4px; color:var(--muted); font-size:12px; }.task-icon { width:36px; font-size:25px; text-align:center; }.habit-list { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }.habit { padding:13px 6px 11px; color:var(--muted); border:1px solid var(--line); border-radius:15px; background:var(--card); text-align:center; font-size:12px; }.habit span { display:block; margin-bottom:6px; font-size:19px; }.habit.active { color:#175d45; border-color:#92c8ae; background:var(--soft); font-weight:700; }.muted { color:var(--muted); font-size:13px; }.coach-card { align-items:flex-start; margin-bottom:0; background:#e8f2ec; }.coach-icon { color:var(--green); font-size:21px; }.coach-card p { margin:4px 0 0; color:#3d574c; font-size:14px; line-height:1.55; }.bottom-action { position:fixed; right:0; bottom:0; left:0; padding:13px 20px calc(13px + env(safe-area-inset-bottom)); background:#f5f7f2e8; backdrop-filter:blur(9px); }.bottom-action button { display:block; width:min(580px,100%); margin:auto; }.primary-button { padding:14px 19px; color:white; border:0; border-radius:14px; background:var(--green); font-weight:800; box-shadow:0 8px 18px #20795a35; }.primary-button.enabled { background:#54635d; box-shadow:none; }
dialog { width:min(440px,calc(100% - 32px)); padding:0; border:0; border-radius:22px; box-shadow:0 20px 55px #0004; } dialog::backdrop { background:#10251a77; }.settings-panel { display:grid; gap:17px; padding:23px; }.settings-panel label { display:grid; gap:7px; color:#43574e; font-size:13px; font-weight:700; }.settings-panel input { padding:12px; border:1px solid #d6ded9; border-radius:10px; color:var(--ink); background:#fbfcfb; }.form-note { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.settings-panel .eyebrow { color:var(--green); }
@media (min-width:700px) { .app-shell { padding-top:38px; } }