:root{
  --bg:#faf9f7; --panel:#fff; --ink:#2b2b2b; --muted:#6b6b6b; --line:#e5e2dc;
  --accent:#4a7c3f; --warn:#b7791f; --danger:#c5221f; --chip:#f0ede6;
  --radius:8px; --gutter:16px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1a1917; --panel:#242220; --ink:#e8e5df; --muted:#9a948a; --line:#37342f;
    --accent:#7fb069; --warn:#d9a441; --danger:#e57373; --chip:#2e2b27;
  }
}
:root[data-theme="dark"]{
  --bg:#1a1917; --panel:#242220; --ink:#e8e5df; --muted:#9a948a; --line:#37342f;
  --accent:#7fb069; --warn:#d9a441; --danger:#e57373; --chip:#2e2b27;
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
/* [hidden] 的默认 display:none 会被 #id{display:grid} 这类更高优先级的规则盖掉，
   所以必须显式加 !important —— 否则 el.hidden = true 看着生效、实际没生效。 */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.65 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  padding-bottom:72px}

#topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-block:12px;padding-left:var(--gutter);padding-right:var(--gutter);
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.brand{font-weight:700}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.controls label{font-size:13px;color:var(--muted);display:flex;gap:4px;align-items:center}
select,button{font:inherit;font-size:13px;color:var(--ink);background:var(--chip);
  border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer}

#tabs{display:flex;gap:6px;padding:10px var(--gutter) 0;max-width:1100px;margin:0 auto}
#tabs .tab{padding:8px 18px;font-weight:600;border-bottom:2px solid transparent;border-radius:6px 6px 0 0}
#tabs .tab.on{background:var(--panel);border-color:var(--accent);color:var(--accent)}

#moneyPanel{max-width:1100px;margin:0 auto;padding:20px var(--gutter);min-width:0}
.money-intro{background:var(--chip);border-radius:var(--radius);padding:12px 14px;
  margin-bottom:16px;font-size:13px;line-height:1.7}
.money-intro b{color:var(--accent)}
.money-group{margin-bottom:20px}
.money-group h3{font-size:14px;margin:0 0 10px;color:var(--accent)}
.money-row{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;
  margin-bottom:8px;background:var(--panel)}
.money-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.money-name{font-weight:600;flex:1 1 auto;min-width:0}
.money-num{font-size:13px;white-space:nowrap}
.money-pay{font-weight:700;color:var(--accent);white-space:nowrap}
.money-pay.none{color:var(--muted);font-weight:400}
.money-out{font-size:12.5px;color:var(--muted);margin-top:4px}
.money-row details{margin-top:5px}
.money-row summary{cursor:pointer;font-size:12px;color:var(--muted)}
.money-row details p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.65}

#goalPanel{max-width:1100px;margin:0 auto;padding:20px var(--gutter);min-width:0}
.goal-sec{margin-bottom:24px}
.goal-sec > h3{font-size:15px;margin:0 0 4px;color:var(--accent)}
.goal-when{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.candles{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.candle{font-size:12px;padding:4px 10px;border-radius:14px;background:var(--chip);color:var(--muted)}
.candle.hit{background:var(--accent);color:#fff}
.pt-group{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;
  background:var(--panel)}
.pt-group h4{font-size:13px;margin:0 0 6px;display:flex;justify-content:space-between}
.pt-group h4 span{color:var(--muted);font-weight:400}
.pt-item{font-size:13px;padding:3px 0;display:flex;gap:8px;align-items:baseline}
.pt-item .pt{flex:0 0 auto;font-size:11px;color:var(--muted);background:var(--chip);
  border-radius:9px;padding:1px 7px}
.pt-item.cc{color:var(--muted);text-decoration:line-through}
.pt-item .cc-tag{font-size:11px;color:var(--danger);text-decoration:none}
.bar{height:8px;border-radius:4px;background:var(--chip);overflow:hidden;margin:3px 0 0}
.bar > i{display:block;height:100%;background:var(--accent)}
.pf-row{font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.pf-row:last-child{border-bottom:0}
.pf-head{display:flex;gap:10px;align-items:baseline}
.pf-head b{flex:1 1 auto;font-weight:600}
.pf-head span{flex:0 0 auto;color:var(--muted);font-size:12px;white-space:nowrap}
.pf-note{font-size:12.5px;color:var(--warn);margin-top:3px;line-height:1.6}
.track{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;
  background:var(--panel)}
.track b{font-size:14px}
.track .gate{font-size:12.5px;color:var(--muted);margin-top:4px}
.track .why{font-size:12.5px;margin-top:5px;line-height:1.65}
.loop{counter-reset:s}
.loop li{list-style:none;font-size:13px;padding:5px 0 5px 26px;position:relative;
  border-bottom:1px dashed var(--line)}
.loop li:last-child{border-bottom:0}
.loop li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:6px;
  width:18px;height:18px;border-radius:50%;background:var(--chip);color:var(--muted);
  font-size:11px;display:flex;align-items:center;justify-content:center}

#layout{display:grid;grid-template-columns:220px 1fr;gap:20px;
  padding-block:20px;padding-left:var(--gutter);padding-right:var(--gutter);
  max-width:1100px;margin:0 auto}
/* grid item 默认 min-width:auto，内容撑得下就会顶破轨道 —— 必须显式压成 0，
   否则日历那排 28 格会把整页撑出横向滚动条。 */
#calendar{align-self:start;position:sticky;top:76px;min-width:0}
#daycard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;min-height:300px;min-width:0;overflow-wrap:anywhere}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{padding:0;aspect-ratio:1;min-height:30px;display:flex;align-items:center;
  justify-content:center;font-size:13px;background:var(--panel);position:relative}
.cal-day.is-view{outline:2px solid var(--accent);outline-offset:-2px}
.cal-day.is-current{background:var(--accent);color:#fff;border-color:transparent}
.cal-day.has-fest::after{content:'';position:absolute;bottom:3px;width:4px;height:4px;
  border-radius:50%;background:var(--warn)}
.cal-day.is-current.has-fest::after{background:#fff}
.cal-nav{display:flex;gap:4px;align-items:center;margin-bottom:8px}
.cal-nav select{flex:1 1 auto;min-width:0;padding:5px 4px;font-size:12px}
.cal-nav button{padding:5px 8px;font-size:12px;flex:0 0 auto}

#bottombar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:12px;background:var(--panel);border-top:1px solid var(--line);
  padding:10px var(--gutter);padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:10}
#bottombar button{min-height:44px;padding:0 16px;font-weight:600;font-size:14px}
#nextDay{background:var(--accent);color:#fff;border-color:transparent}
#dayLabel{font-weight:600;font-size:14px;text-align:center;flex:1}

.day-title{font-size:17px;margin:0 0 10px}
.muted{color:var(--muted)}
.weather{display:flex;gap:8px;margin-bottom:12px;color:var(--muted);font-size:13px;align-items:center}
.weather button.on{background:var(--accent);color:#fff;border-color:transparent}
.event{background:var(--chip);border-left:3px solid var(--warn);padding:8px 12px;
  border-radius:0 var(--radius) var(--radius) 0;margin-bottom:12px;font-size:13px}
.event b{font-size:14px}
.event .fest-warn{margin-top:5px;color:var(--warn)}
.shops{font-size:12.5px;color:var(--muted);background:var(--chip);
  border-radius:var(--radius);padding:8px 12px;margin-bottom:12px}
.shops div{margin:2px 0}
.cal-day.has-cart::before{content:'';position:absolute;top:3px;right:3px;width:4px;height:4px;
  border-radius:50%;background:var(--accent)}
.cal-day.is-current.has-cart::before{background:#fff}

.season-end{border:1px solid var(--warn);background:var(--chip);
  border-radius:var(--radius);padding:10px 12px;margin-bottom:14px;font-size:13px}
.season-end p{margin:2px 0}
.season-end p:first-child{font-weight:700;color:var(--warn)}
.planting{border:1px solid var(--accent);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:14px}
.planting h3{font-size:13px;margin:0 0 8px;color:var(--accent)}
.planting .lead{margin:0 0 6px;font-weight:600;font-size:14.5px;line-height:1.55}
.planting.nocrops{border-color:var(--muted)}
.planting.nocrops h3{color:var(--muted)}
.planting .buy{margin:0 0 6px;font-size:13px}
.planting .est{margin:0 0 6px;font-size:13px;color:var(--accent);font-weight:600}
.planting .alt,.planting .later{margin:3px 0;font-size:12.5px;color:var(--muted)}
.planting .later{color:var(--warn)}

.goal{background:var(--chip);padding:10px 12px;border-radius:var(--radius);margin:0 0 14px;font-weight:600}

.lanes{display:grid;grid-template-columns:repeat(var(--lane-count,2),minmax(0,1fr));gap:14px}
.both,.lane,.shared,.checklist{border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;min-width:0}
.both h3,.lane h3,.shared h3,.checklist h3{font-size:13px;margin:0 0 10px;color:var(--muted)}
.shared,.checklist,.setup{margin-top:14px}
.both{margin-bottom:14px;border-color:var(--accent)}
.both h3{color:var(--accent)}
.item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;
  padding:8px 0;border-bottom:1px dashed var(--line)}
.item:last-of-type{border-bottom:0}
.item .tier{font-size:12px;line-height:1.7}
.item .body{min-width:0}
.item .txt{line-height:1.6}
.item .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.chip{font-size:11px;color:var(--muted);background:var(--chip);border-radius:10px;padding:1px 7px;
  white-space:nowrap}
.chip.rel-看手法,.chip.rel-看运气{color:var(--warn)}
.why summary,.setup summary{cursor:pointer;font-size:12px;color:var(--muted)}
.why p,.setup p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.checklist.has-red{border-color:var(--danger)}
.ck{margin:4px 0;font-size:13px}
.ck-red{color:var(--danger)}
.ck-yellow{color:var(--warn)}
.ck-done{color:var(--accent);font-weight:600}

@media (max-width:768px){
  #layout{grid-template-columns:1fr;gap:14px}
  #calendar{position:static}
  .brand{width:100%}
  .lanes{grid-template-columns:1fr}
  .cal-grid{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;
    -webkit-overflow-scrolling:touch}
  .cal-day{flex:0 0 40px;aspect-ratio:auto;height:40px}
  #dayLabel{font-size:13px}
  #bottombar button{padding:0 12px;font-size:13px}
}