/* CleanReset — ADHD cleaning planner styles
   视觉：低刺激浅色（米白底/深青主色/暖橙低电量），大按钮大点击区，圆角 12-16px。
   红线：勾选用样式类切换零位移；print 样式只输出清单；prefers-reduced-motion 兜底。 */
:root{--bg:#FAF8F4;--card:#FFFFFF;--ink:#25333A;--mut:#5E6E75;--acc:#0F766E;--acc-soft:#E4F4F1;--warm:#C2410C;--warm-soft:#FDEEE2;--line:#E7E2D9;--ok:#16A34A;--rad:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand b{color:var(--acc)}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:9px;color:var(--mut);font-size:14px;white-space:nowrap;transition:background-color .15s,color .15s}
.nav-links a:hover{color:var(--ink);background:var(--acc-soft);text-decoration:none}
.nav-links a.on{color:var(--acc);background:var(--acc-soft);font-weight:700}
.nav-links a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:720px){.nav-in{flex-wrap:wrap}.nav-links{margin-left:0;width:100%;justify-content:flex-start}}

/* 布局 */
.wrap{position:relative;max-width:1080px;margin:0 auto;padding:18px 20px 0}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--mut);font-size:13px;padding:8px 0 0}
.crumbs a{color:var(--mut)}
.hero{display:flex;gap:28px;align-items:center;padding:30px 0 8px}
.hero h1{font-size:clamp(32px,5.8vw,60px);line-height:1.06;font-weight:900;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--acc)}
.lead{color:var(--mut);font-size:clamp(15px,2vw,18px);max-width:620px;margin:0 0 20px}
.hero-img{flex:0 0 300px;border-radius:var(--rad)}
@media (max-width:860px){.hero{flex-direction:column;align-items:flex-start}.hero-img{flex:0 0 auto;width:min(300px,78%)}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:800;font-size:16px;padding:13px 26px;border:0;border-radius:999px;cursor:pointer;transition:box-shadow .15s,transform .05s;box-shadow:0 5px 18px rgba(13,148,136,.22)}
.btn:hover{box-shadow:0 8px 26px rgba(13,148,136,.35);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn.ghost{background:#fff;color:var(--acc);border:1.5px solid var(--acc);box-shadow:none}
.btn.ghost:hover{background:var(--acc-soft)}

/* 选择 chips */
.planner{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;margin:22px 0;box-shadow:0 2px 14px rgba(37,51,58,.05)}
.pick{margin:14px 0 4px}
.pick-label{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;border:1.5px solid var(--line);color:var(--ink);font-weight:700;font-size:14.5px;border-radius:999px;padding:10px 18px;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.chip:hover{border-color:var(--acc);color:var(--acc)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.chip[data-energy="low"].on{background:var(--warm);border-color:var(--warm)}

/* 任务清单 */
.plan-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.plan-head h2{margin:0}
.plan-summary{color:var(--mut);font-size:14px;font-weight:700}
.ritual{display:flex;gap:10px;align-items:flex-start;background:var(--warm-soft);border:1px solid #F5D5BC;border-radius:12px;padding:12px 15px;margin:12px 0 6px;max-width:780px}
.ritual .ico{flex:0 0 auto}
.ritual p{margin:0;font-size:14.5px;color:#7A4A25}
.progress{margin:16px 0 10px}
.progress-track{height:12px;background:var(--acc-soft);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--acc),#14B8A6);border-radius:999px;transition:width .35s}
.progress-text{font-size:14px;font-weight:700;color:var(--mut);margin-top:7px}
.task-list{list-style:none;margin:0;padding:0}
.task{margin:9px 0}
.task-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:15px 17px;cursor:pointer;font-size:16px;color:var(--ink);transition:border-color .15s,background-color .15s}
.task-btn:hover{border-color:var(--acc)}
.task-btn:active{transform:scale(.995)}
.task-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.task-btn .tick{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:15px;color:transparent;background:#fff;transition:background-color .15s,border-color .15s,color .15s}
.task-btn .task-body{display:flex;flex-direction:column;gap:2px}
.task-btn .task-min{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.task-btn.done{border-color:var(--acc);background:var(--acc-soft)}
.task-btn.done .tick{background:var(--acc);border-color:var(--acc);color:#fff}
.task-btn.done .task-body b{color:var(--mut);text-decoration:line-through}
@media (prefers-reduced-motion:reduce){.task-btn,.progress-fill{transition:none}}
.plan-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 4px}
.celebrate{animation:pop .5s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.012)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.celebrate{animation:none}}

/* 计时器 */
.timer{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:16px 0;flex-wrap:wrap}
.timer-disp{font-size:40px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:130px;color:var(--ink)}
.timer progress{width:170px;height:10px;accent-color:var(--acc)}
.timer-side{display:flex;flex-direction:column;gap:8px}
.timer-btns{display:flex;gap:8px}
.btn.dual{position:relative;display:inline-grid;overflow:hidden;padding:0}
.btn.dual>span{grid-area:1/1;padding:13px 26px;white-space:nowrap;transition:opacity .18s,transform .18s}
.btn.dual .c2{opacity:0;transform:translateY(6px)}
.btn.dual.on .c1{opacity:0;transform:translateY(-6px)}
.btn.dual.on .c2{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.btn.dual>span{transition:none}}
.timer-state{font-size:13.5px;color:var(--mut);margin:0}

/* 正文 */
main p{max-width:780px}
h2{font-size:clamp(21px,3.2vw,28px);font-weight:800;letter-spacing:-.01em;margin:36px 0 12px}
h3{font-size:18px;font-weight:800;margin:20px 0 8px}
.prose-p{color:#3E4F56;margin:0 0 14px}
.prose-p b{color:var(--ink)}
.faq h3{color:var(--acc)}
.faq p{color:#3E4F56;margin:0 0 18px}

/* 房间页静态清单 */
.room-tasks{list-style:none;margin:14px 0;padding:0}
.room-tasks .task{margin:8px 0}

/* 入口卡 */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin:18px 0 8px}
.entry-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 18px;color:var(--ink);transition:border-color .15s,background-color .15s}
.entry-card:hover{border-color:var(--acc);background:#F4FBF9;text-decoration:none}
.entry-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.entry-card b{display:block;font-size:16px;margin-bottom:5px}
.entry-card span{color:var(--mut);font-size:14px}

/* 双态叠层复制 */
.copy-btn{position:relative;display:inline-grid;border:0;background:var(--acc);color:#fff;font-weight:800;font-size:14px;border-radius:999px;cursor:pointer;padding:0;overflow:hidden}
.copy-btn>span{grid-area:1/1;padding:11px 20px;white-space:nowrap;transition:opacity .18s,transform .18s}
.copy-btn .c2{opacity:0;transform:translateY(6px)}
.copy-btn.done .c1{opacity:0;transform:translateY(-6px)}
.copy-btn.done .c2{opacity:1;transform:none}
.copy-btn:hover{box-shadow:0 4px 14px rgba(13,148,136,.3)}
.copy-btn.ghost{background:#fff;border:1.5px solid var(--acc);color:var(--acc)}
.copy-btn.ghost:hover{background:var(--acc-soft);box-shadow:none}
.copy-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.copy-btn>span{transition:none}}

/* 提示卡 */
.note-card{display:flex;gap:12px;align-items:flex-start;background:var(--acc-soft);border:1px solid #BFE3DC;border-radius:12px;padding:14px 16px;margin:18px 0;max-width:780px}
.note-card .ico{flex:0 0 auto;font-size:18px}
.note-card p{margin:0;color:#1F4E47;font-size:14.5px}
.pn{display:flex;gap:16px;flex-wrap:wrap;margin:30px 0 10px}
.pn a{font-weight:700;font-size:15px}

/* footer */
.footer-note{color:#8A9096;font-size:13px;max-width:780px;margin:40px 0 8px}
.site{border-top:1px solid var(--line);margin-top:14px;padding:34px 0 44px}
.footer-in{max-width:1080px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
.site h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}
.site a{display:block;color:var(--mut);font-size:14px;padding:4px 0}
.site a:hover{color:var(--ink)}
.brand-line{grid-column:1/-1;display:flex;align-items:center;gap:9px;color:var(--mut);font-size:14px}

/* 404 */
.nf{padding:80px 0;text-align:center}
.nf h1{font-size:clamp(60px,14vw,150px);margin:0;color:var(--acc);font-weight:900;line-height:1}
.nf p{color:var(--mut)}

/* print：只打印计划清单 */
@media print{
  .nav,.timer,.plan-actions,.pn,.site,.footer-note,.note-card,.crumbs,.progress,.pick,.ritual,.hero-img,.hero .btn{display:none!important}
  body{background:#fff;color:#000}
  .planner{border:0;box-shadow:none;padding:0}
  .task-btn{border:1px solid #999;break-inside:avoid}
  .hero{padding:0}
  .hero h1{font-size:26pt}
}