:root{
  --bg:#FFF7EC;
  --bg-deep:#FFEFD9;
  --card:#FFFFFF;
  --ink:#4A3B2E;
  --ink-soft:#8A7A68;
  --sage:#6FBF73;
  --sage-deep:#4FA85A;
  --sage-soft:#E5F3E4;
  --pot:#D98E6A;
  --soil:#8B5E3C;
  --sun:#FFC93C;
  --blush:#FFB3A7;
  --sky:#A8D8EA;
  --line:#F0E3D0;
  --radius:24px;
  --shadow:0 10px 28px rgba(122,78,45,.14);
  --shadow-soft:0 4px 14px rgba(122,78,45,.10);
  --font:'Nunito','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,201,60,.12), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(168,216,234,.18), transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(255,179,167,.12), transparent 26%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; touch-action:manipulation;}
button:focus-visible{outline:3px solid rgba(79,168,90,.55); outline-offset:2px; border-radius:14px;}
h1,h2,h3,p{margin:0;}

#app{display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:1100px; margin:0 auto; position:relative;}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 16px calc(8px + env(safe-area-inset-top) / 2);
  flex:none;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-icon{width:42px; height:42px; flex:none; filter:drop-shadow(0 3px 5px rgba(122,78,45,.22)); animation:wiggle 5s ease-in-out infinite;}
@keyframes wiggle{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-6deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-3deg)}}
.brand-text h1{font-size:20px; font-weight:900; letter-spacing:.5px; line-height:1.1;}
.brand-text p{font-size:11px; color:var(--ink-soft); margin-top:2px; letter-spacing:.4px;}
.top-stats{display:flex; gap:8px; align-items:center; flex:none;}
.date-chip,.stat-chip{
  background:rgba(255,255,255,.75); border:1.5px solid var(--line);
  padding:6px 12px; border-radius:99px; font-size:12px; color:var(--ink-soft);
  box-shadow:var(--shadow-soft); white-space:nowrap;
}
.stat-chip b{color:var(--sage-deep); font-size:14px;}
.sync-chip{
  display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:99px;
  background:var(--sage-soft); color:var(--sage-deep); font-size:12px; font-weight:900;
  border:1.5px solid rgba(111,191,115,.35); box-shadow:var(--shadow-soft);
  transition:transform .12s ease, background .12s ease; flex:none;
}
.sync-chip svg{width:15px; height:15px;}
.sync-chip:hover{transform:translateY(-1px); background:#D9EED8;}
@media(max-width:520px){
  .brand-text p{display:none;}
  .date-chip{display:none;}
  .brand-text h1{font-size:18px;}
  .topbar{padding:calc(6px + env(safe-area-inset-top)) 12px 6px;}
  .sync-chip{padding:6px 9px;}
}

/* ---------- stage / radial layout ---------- */
.stage-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; min-height:0; padding:0 0 calc(10px + env(safe-area-inset-bottom));
  flex-direction:column;
}
.pet-caption{
  flex:none; text-align:center; padding:6px 12px 2px;
  max-width:94vw; overflow:hidden;
}
.stage{
  position:relative;
  width:min(94vw, calc(100dvh - 200px), 620px);
  aspect-ratio:1;
}
.stage::before{
  content:""; position:absolute; left:50%; top:50%;
  width:86%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:
    radial-gradient(rgba(255,201,60,.55) 0 2.5px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(rgba(143,188,143,.35) 0 2px, transparent 2.5px) 12px 18px / 42px 42px;
  border-radius:50%;
  opacity:.55;
}
.orbit{
  position:absolute; left:50%; top:50%;
  width:82%; aspect-ratio:1; transform:translate(-50%,-50%);
  border:2px dashed rgba(139,94,60,.20);
  border-radius:50%; animation:spin 80s linear infinite;
}
.orbit-inner{
  width:63%; border-style:dotted; border-color:rgba(139,94,60,.15);
  animation:spin 55s linear infinite reverse;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.pet-box{
  position:absolute; left:50%; top:50%;
  width:58%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
}
.pet-box svg{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 12px rgba(122,78,45,.16));}
.pet-box.bounce svg{animation:bounce .6s cubic-bezier(.2,1.6,.4,1);}
@keyframes bounce{0%{transform:translateY(0)}35%{transform:translateY(-14px) scale(1.03)}65%{transform:translateY(3px)}100%{transform:translateY(0)}}

.pet-name{
  text-align:center;
  font-size:clamp(16px,2.3vmin,21px); font-weight:900; letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pet-sub{
  text-align:center;
  font-size:clamp(11px,1.6vmin,13px); color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- radial nav buttons ---------- */
.nav-btn{
  position:absolute; left:50%; top:50%;
  width:calc(var(--nav-size, 60px));
  height:calc(var(--nav-size, 60px));
  transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px)));
  border-radius:50%;
  background:#fff;
  box-shadow:0 6px 18px rgba(122,78,45,.16), inset 0 0 0 1.5px rgba(240,227,208,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  transition:transform .16s ease, box-shadow .16s ease;
  z-index:5;
}
.nav-btn:hover{transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px))) scale(1.08);}
.nav-btn:active{transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px))) scale(.92);}
.nav-ico{display:flex; align-items:center; justify-content:center;}
.nav-ico svg{width:24px; height:24px; color:var(--ink-soft);}
.nav-label{font-size:10px; font-weight:800; color:var(--ink-soft); line-height:1; letter-spacing:.3px;}

.check-btn{
  width:calc(var(--nav-size, 60px) * 1.45);
  height:calc(var(--nav-size, 60px) * 1.45);
  background:linear-gradient(150deg,#83CF87,#4FA85A);
  box-shadow:0 10px 24px rgba(79,168,90,.42), inset 0 0 0 2px rgba(255,255,255,.35);
  z-index:6;
}
.check-btn .nav-ico svg{width:32px; height:32px; color:#fff;}
.check-btn .nav-label{color:rgba(255,255,255,.92); font-size:11px;}
.check-ring{position:absolute; inset:-7px; border-radius:50%; border:3px solid rgba(79,168,90,.55); opacity:0;}
.check-btn.can-check .check-ring{animation:ringPulse 2s ease-out infinite;}
@keyframes ringPulse{
  0%{transform:scale(.92); opacity:.9;}
  70%{transform:scale(1.18); opacity:0;}
  100%{transform:scale(1.18); opacity:0;}
}
.check-btn.done{
  background:linear-gradient(150deg,#D8D2C8,#BDB5A8);
  box-shadow:0 8px 18px rgba(122,78,45,.18), inset 0 0 0 2px rgba(255,255,255,.4);
}
.check-btn.done .check-ring{display:none;}
.check-btn.done .nav-label{color:#fff;}

/* ---------- pet animations ---------- */
.pet-root{animation:bob 3.4s ease-in-out infinite; transform-origin:50% 85%;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.pet-root.wilt{animation:bob 4.2s ease-in-out infinite;}
.eyes .eye{transform-box:fill-box; transform-origin:center; animation:blink 4.6s ease-in-out infinite;}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.blade{transform-box:fill-box; transform-origin:50% 100%;}
.blade.pop{animation:bladePop .55s cubic-bezier(.2,1.8,.4,1) both;}
@keyframes bladePop{0%{transform:scaleY(.15) rotate(var(--tilt,0deg)); opacity:.3;}100%{transform:scaleY(1) rotate(var(--tilt,0deg)); opacity:1;}}
.flower-crown{transform-box:fill-box; transform-origin:50% 100%; animation:sway 4s ease-in-out infinite;}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.bud{transform-box:fill-box; transform-origin:50% 100%;}
.sparkle{animation:twinkle 1.6s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.7)}50%{opacity:1; transform:scale(1.15)}}
.pet-face .blush{opacity:.9;}

/* ---------- toasts ---------- */
#toastRoot{position:fixed; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; justify-content:center; pointer-events:none; z-index:300;}
.toast{
  background:rgba(74,59,46,.92); color:#fff; padding:10px 18px; border-radius:99px;
  font-size:13px; font-weight:700; box-shadow:var(--shadow);
  animation:toastIn .25s ease both; max-width:86vw; text-align:center;
}
.toast.hide{animation:toastOut .25s ease both;}
@keyframes toastIn{from{opacity:0; transform:translateY(14px) scale(.92)}}
@keyframes toastOut{to{opacity:0; transform:translateY(10px) scale(.95)}}

/* ---------- sheets / modals ---------- */
.sheet{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(74,59,46,.38); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.sheet.open{opacity:1; pointer-events:auto;}
.sheet-card{
  width:100%; max-width:620px; max-height:88dvh; overflow-y:auto;
  background:var(--card); border-radius:26px 26px 0 0;
  padding:18px 20px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(46px); transition:transform .26s cubic-bezier(.2,.9,.3,1.1);
  box-shadow:0 -10px 40px rgba(74,59,46,.18);
}
.sheet.open .sheet-card{transform:none;}
@media(min-width:760px){
  .sheet{align-items:center;}
  .sheet-card{border-radius:28px; max-height:82vh; transform:translateY(20px) scale(.96);}
  .sheet.open .sheet-card{transform:none;}
}
.sheet-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.sheet-head h2{font-size:19px; font-weight:900; flex:1; letter-spacing:.4px;}
.sheet-head .sub{font-size:12px; color:var(--ink-soft); font-weight:600;}
.close-btn{
  width:36px; height:36px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  flex:none; transition:transform .15s ease;
}
.close-btn:hover{transform:rotate(90deg);}
.close-btn svg{width:16px; height:16px;}

/* ---------- buttons & forms ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:99px; font-size:14px; font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:linear-gradient(150deg,#83CF87,#4FA85A); color:#fff; box-shadow:0 8px 18px rgba(79,168,90,.35);}
.btn-ghost{background:var(--sage-soft); color:var(--sage-deep);}
.btn-soft{background:var(--bg); color:var(--ink-soft);}
.btn-danger{background:#FDE9E5; color:#C85C4F;}
.btn-block{width:100%;}
.btn:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:800; color:var(--ink-soft); margin-bottom:6px;}
.input{
  width:100%; padding:12px 14px; border-radius:16px; border:2px solid var(--line);
  background:#FFFDF8; font-family:inherit; font-size:15px; color:var(--ink);
  transition:border-color .15s ease;
}
.input:focus{outline:none; border-color:var(--sage);}
textarea.input{resize:vertical; min-height:64px;}

.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  padding:8px 14px; border-radius:99px; background:var(--bg); border:2px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-soft); transition:all .15s ease;
}
.chip.on{background:var(--sage-soft); border-color:var(--sage); color:var(--sage-deep);}
.chip.sel{background:var(--sage-soft); border-color:var(--sage); color:var(--sage-deep);}

/* ---------- habit cards ---------- */
.habit-card{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:20px; background:var(--bg); border:2px solid transparent;
  margin-bottom:10px; transition:all .16s ease; width:100%; text-align:left;
}
.habit-card:hover{border-color:#E3D5BC;}
.habit-card.active{border-color:var(--sage); background:#fff; box-shadow:var(--shadow-soft);}
.habit-thumb{width:58px; height:58px; flex:none; display:flex; align-items:center; justify-content:center;}
.habit-thumb svg{width:100%; height:100%;}
.habit-info{flex:1; min-width:0;}
.habit-name{font-size:15px; font-weight:900; display:flex; align-items:center; gap:6px;}
.habit-name .em{font-size:15px;}
.habit-badges{display:flex; gap:6px; margin-top:5px; flex-wrap:wrap;}
.badge{font-size:11px; font-weight:800; padding:3px 9px; border-radius:99px; background:#fff; color:var(--ink-soft); border:1.5px solid var(--line);}
.badge.green{background:var(--sage-soft); color:var(--sage-deep); border-color:#CBE8CB;}
.badge.flower{background:#FFF0F4; color:#D96A9A; border-color:#F6D3E0;}
.bar{height:8px; border-radius:99px; background:#EFE6D6; overflow:hidden; margin-top:8px;}
.bar>i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--sage),var(--sage-deep)); transition:width .6s cubic-bezier(.2,.9,.3,1);}
.bar.small{height:6px; margin-top:6px;}

/* ---------- records ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.stat-cell{
  background:var(--bg); border-radius:18px; padding:12px 8px; text-align:center;
}
.stat-cell b{display:block; font-size:22px; font-weight:900; color:var(--sage-deep); line-height:1.15;}
.stat-cell span{font-size:11px; color:var(--ink-soft); font-weight:700;}
.heat-wrap{background:var(--bg); border-radius:18px; padding:14px; margin-bottom:14px;}
.heat-wrap h3{font-size:13px; font-weight:900; margin-bottom:10px;}
.heat{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,12px); gap:3px; overflow-x:auto; padding-bottom:4px;}
.heat i{width:12px; height:12px; border-radius:3.5px; background:#EFE6D6;}
.heat i.l1{background:#CBE8CB;}
.heat i.l2{background:#9BD59E;}
.heat i.l3{background:#6FBF73;}
.heat i.l4{background:#3F9450;}
.heat i.today{outline:2px solid var(--sun); outline-offset:1px;}
.rec-list{display:flex; flex-direction:column;}
.rec-day{
  display:flex; align-items:center; gap:10px; padding:9px 4px;
  border-bottom:1px dashed var(--line); font-size:13px;
}
.rec-day:last-child{border-bottom:none;}
.rec-day .d{font-weight:900; min-width:74px;}
.rec-day .w{color:var(--ink-soft); min-width:34px; font-size:12px;}
.rec-day .t{margin-left:auto; color:var(--ink-soft); font-size:12px;}
.rec-day .n{color:var(--sage-deep); font-weight:900; font-size:12px;}
.empty{text-align:center; color:var(--ink-soft); font-size:13px; padding:26px 8px; line-height:1.8;}
.empty .big{font-size:38px; display:block; margin-bottom:8px;}

/* ---------- garden ---------- */
.garden-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.garden-card{
  background:var(--bg); border-radius:22px; padding:14px 10px 12px; text-align:center;
  transition:transform .16s ease; position:relative;
}
.garden-card:hover{transform:translateY(-3px);}
.garden-card .flower-svg{width:92px; height:92px; margin:4px auto 6px; display:block;}
.garden-card .g-name{font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.garden-card .g-meta{font-size:11px; color:var(--ink-soft); margin-top:3px; font-weight:600;}
.garden-card .g-tag{position:absolute; top:8px; right:8px; font-size:16px;}

/* ---------- settings / help ---------- */
.set-row{display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px dashed var(--line);}
.set-row:last-child{border-bottom:none;}
.set-ico{font-size:20px; width:34px; text-align:center; flex:none;}
.set-main{flex:1;}
.set-main b{font-size:14px; display:block;}
.set-main span{font-size:12px; color:var(--ink-soft); display:block; margin-top:2px;}
.rule-card{display:flex; gap:12px; padding:12px; border-radius:18px; background:var(--bg); margin-bottom:10px;}
.rule-card .em{font-size:24px; flex:none; width:38px; text-align:center;}
.rule-card b{font-size:14px; display:block; margin-bottom:3px;}
.rule-card p{font-size:12.5px; color:var(--ink-soft); line-height:1.65;}

/* ---------- reveal / onboarding ---------- */
.reveal-card{text-align:center; padding:28px 22px 24px;}
.reveal-flower{width:150px; height:150px; margin:4px auto 10px; animation:flowerIn .8s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes flowerIn{0%{transform:scale(0) rotate(-25deg); opacity:0;}100%{transform:scale(1) rotate(0); opacity:1;}}
.reveal-title{font-size:22px; font-weight:900;}
.reveal-name{font-size:30px; font-weight:900; margin:6px 0 2px;}
.reveal-hint{color:var(--ink-soft); font-size:13px; margin-top:6px; line-height:1.7;}
.reveal-badge{display:inline-block; margin-top:10px; padding:6px 14px; border-radius:99px; background:var(--sage-soft); color:var(--sage-deep); font-size:12px; font-weight:900;}

.onboard-illu{width:170px; height:170px; margin:6px auto 12px;}
.onboard-card h2{font-size:24px; font-weight:900; text-align:center;}
.onboard-card .lead{text-align:center; color:var(--ink-soft); font-size:13px; margin:8px 0 18px; line-height:1.7;}
.rule-mini{display:flex; gap:10px; align-items:center; background:var(--bg); border-radius:16px; padding:11px 12px; margin-bottom:9px;}
.rule-mini .em{font-size:22px;}
.rule-mini p{font-size:12.5px; color:var(--ink-soft); line-height:1.55; flex:1;}

/* ---------- confetti ---------- */
.confetti{position:fixed; top:-24px; width:9px; height:14px; border-radius:2px; z-index:400; pointer-events:none; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg); opacity:.1;}}

/* ---------- misc ---------- */
.divider{height:1.5px; background:var(--line); border:none; margin:14px 0;}
.muted{color:var(--ink-soft); font-size:12px;}
.center{text-align:center;}
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.mt8{margin-top:8px;} .mt14{margin-top:14px;} .mt20{margin-top:20px;}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:#E4D5BC; border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ================= 板块切换 ================= */
.view-tabs{
  flex:none; display:flex; justify-content:center; gap:6px;
  padding:0 16px 4px;
}
.tab{
  padding:8px 18px; border-radius:99px; font-size:14px; font-weight:800;
  color:var(--ink-soft); background:rgba(255,255,255,.7); border:1.5px solid var(--line);
  box-shadow:var(--shadow-soft); transition:all .18s ease;
}
.tab:hover{transform:translateY(-1px);}
.tab.on{
  background:linear-gradient(150deg,#83CF87,#4FA85A); color:#fff;
  border-color:transparent; box-shadow:0 6px 16px rgba(79,168,90,.35);
}
.tab .em{font-size:15px;}

.set-row.set-sync{
  background:var(--sage-soft); border:1.5px solid rgba(111,191,115,.32);
  border-radius:16px; padding:11px 12px; margin-bottom:10px;
}

/* ---------- 手机同步 ---------- */
.sync-hero{display:flex; gap:12px; align-items:flex-start; padding:2px 2px 14px;}
.sync-hero-ico{
  font-size:28px; width:50px; height:50px; flex:none; border-radius:16px;
  background:var(--sage-soft); display:flex; align-items:center; justify-content:center;
}
.sync-hero b{font-size:15px; font-weight:900;}
.sync-hero p{font-size:12.5px; line-height:1.65; color:var(--ink-soft); margin-top:4px;}
.sync-site{
  display:flex; align-items:center; gap:10px; background:var(--bg); border-radius:14px;
  padding:10px 12px; border:1.5px dashed var(--line);
}
.sync-site-main{flex:1; min-width:0;}
.sync-site-main span{display:block; font-size:11px; color:var(--ink-soft); font-weight:700;}
.sync-site-main b{
  display:block; font-size:13px; margin-top:3px; color:var(--sage-deep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sync-site .btn{padding:7px 12px; font-size:12px; flex:none;}
.sync-note{font-size:11.5px; line-height:1.65; color:var(--ink-soft); margin-top:8px;}
.sync-block{
  margin-top:14px; padding:13px; border-radius:16px; background:var(--bg);
  border:1.5px solid var(--line);
}
.sync-label{font-size:12px; font-weight:900; color:var(--ink-soft); margin-bottom:9px;}
.sync-code{
  width:100%; margin-top:9px; padding:10px 11px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; line-height:1.55;
  resize:vertical; word-break:break-all;
}
.sync-actions{display:flex; gap:8px; margin-top:8px;}
.sync-actions .btn{flex:1; padding:9px 8px; font-size:12px;}
.sync-meta{text-align:center; font-size:11px; color:var(--ink-soft); margin-top:14px;}

/* ================= 日程看板 ================= */
.schedule-wrap{
  flex:1; min-height:0; width:100%; max-width:1200px; margin:0 auto;
  display:flex; gap:14px; padding:10px 16px 14px;
}
.todo-panel{
  width:300px; flex:none; background:var(--card); border-radius:26px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0;
  padding:16px 14px 12px;
}
.todo-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.todo-head h2{font-size:18px; font-weight:900;}
.todo-count{
  background:var(--sage-soft); color:var(--sage-deep); font-weight:900; font-size:13px;
  padding:3px 11px; border-radius:99px;
}
.todo-add{display:flex; gap:8px; margin-bottom:12px;}
.todo-add .input{flex:1; min-width:0; padding:10px 13px;}
.todo-add .btn{width:44px; height:44px; padding:0; font-size:20px; flex:none;}
.todo-list{
  flex:1; min-height:0; overflow-y:auto; padding:2px 2px 8px; position:relative;
  display:flex; flex-direction:column; gap:8px;
}
.todo-list::-webkit-scrollbar{width:5px;}
.todo-list::-webkit-scrollbar-thumb{background:#DDD0BA; border-radius:99px;}
.todo-list.drop-hover{
  outline:2px dashed var(--sage); outline-offset:-4px; border-radius:16px;
  background:var(--sage-soft);
}
.todo-empty{
  text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.8; padding:26px 8px;
  font-weight:700;
}
.todo-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1.5px dashed var(--line); padding-top:10px;
}
.todo-foot .btn{padding:7px 12px; font-size:12px;}

/* 待办条（标题完整多行显示） */
.todo-item{
  display:flex; align-items:flex-start; gap:8px; padding:10px 11px;
  background:var(--bg); border-radius:14px; cursor:grab;
  touch-action:none; user-select:none; -webkit-user-select:none;
  border:1.5px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.todo-item:active{cursor:grabbing;}
.todo-item:hover{transform:translateY(-1px); box-shadow:var(--shadow-soft);}
.todo-item.dragging{opacity:.35;}
.todo-item.done{opacity:.62;}
.todo-item.done .todo-title{text-decoration:line-through; color:var(--ink-soft);}
.todo-dot{width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px;}
.todo-title{
  flex:1; min-width:0; font-size:13.5px; font-weight:700; line-height:1.5;
  overflow-wrap:anywhere; white-space:normal;
}
.todo-check{
  width:22px; height:22px; border-radius:50%; border:2px solid #CFC4B0; flex:none;
  color:transparent; font-size:12px; font-weight:900; display:flex; align-items:center;
  justify-content:center; transition:all .15s ease; background:#fff; margin-top:1px;
}
.todo-check:hover{border-color:var(--sage); color:var(--sage);}
.todo-item.done .todo-check{background:var(--sage); border-color:var(--sage); color:#fff;}
.todo-del{
  width:24px; height:24px; border-radius:50%; color:var(--ink-soft); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:15px; opacity:0;
  transition:opacity .15s ease, background .15s ease;
}
.todo-item:hover .todo-del{opacity:1;}
.todo-del:hover{background:#FDE9E5; color:#C85C4F;}
.todo-item.drop-hover{outline:2px dashed var(--sage-deep); outline-offset:-2px;}
.todo-item.placing{
  outline:2px dashed var(--sage-deep); outline-offset:-2px;
  background:var(--sage-soft); box-shadow:0 6px 16px rgba(79,168,90,.18);
}

/* 周视图 */
.cal-panel{
  flex:1; min-width:0; background:var(--card); border-radius:26px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0;
  padding:14px 16px 12px;
}
.cal-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.cal-today{
  padding:7px 14px; border-radius:99px; background:var(--sage-soft); color:var(--sage-deep);
  font-size:12px; font-weight:900; transition:transform .12s ease; flex:none;
}
.cal-today:hover{transform:translateY(-1px);}
.cal-nav{
  width:32px; height:32px; border-radius:50%; background:var(--bg); font-size:18px;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease; flex:none;
}
.cal-nav:hover{background:var(--sage-soft); color:var(--sage-deep); transform:scale(1.08);}
.cal-range{
  flex:1; min-width:0; text-align:right; font-size:14px; font-weight:900; letter-spacing:.3px;
  color:var(--ink); padding:6px 10px; border-radius:12px; transition:background .12s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-range:hover{background:var(--bg);}
.place-hint{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--sage-soft); color:var(--sage-deep); border-radius:12px;
  padding:6px 10px; margin-bottom:8px; font-size:12px; font-weight:800;
}
.place-hint span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.place-hint button{
  flex:none; font-size:11px; font-weight:900; color:#C85C4F; background:#fff;
  padding:4px 10px; border-radius:99px;
}

.week-head{
  flex:1; min-width:0; display:grid; grid-template-columns:repeat(7,1fr);
  border-bottom:2px solid var(--line); padding-bottom:6px;
}
.week-day{text-align:center; padding:2px 0;}
.week-day .wd{font-size:11px; font-weight:900; color:var(--ink-soft);}
.week-day .wn{
  display:inline-flex; align-items:center; justify-content:center; margin-top:3px;
  width:26px; height:26px; border-radius:50%; font-size:13px; font-weight:900; color:var(--ink);
}
.week-day.today .wn{
  background:var(--sage); color:#fff; box-shadow:0 3px 8px rgba(79,168,90,.35);
}
.week-day.today .wd{color:var(--sage-deep);}
.week-day.other .wd,.week-day.other .wn{opacity:.45;}

.week-body{flex:1; min-height:0; position:relative; overflow:hidden;}
.week-scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
}
.week-scroll::-webkit-scrollbar{width:6px;}
.week-scroll::-webkit-scrollbar-thumb{background:#DDD0BA; border-radius:99px;}
.week-sticky{position:sticky; top:0; z-index:10; display:flex; background:var(--card);}
.th-gap{width:52px; flex:none; border-right:1px solid var(--line);}
.week-content{display:flex; align-items:flex-start;}
.time-col{
  position:relative; width:52px; flex:none;
  height:calc(var(--rowh) * 24); overflow:visible; background:var(--card);
  border-right:1px solid var(--line);
}
.tick{
  position:absolute; right:6px; font-size:9.5px; font-weight:700; color:var(--ink-soft);
  transform:translateY(-50%); line-height:1;
}
.week-grid{
  flex:1; min-width:0; position:relative;
  --rowh:52px;
  height:calc(var(--rowh) * 24);
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rowh) - 1px),
      #E3D7C3 calc(var(--rowh) - 1px), #E3D7C3 var(--rowh));
}
.week-grid .colline{
  position:absolute; top:0; bottom:0; width:1px; background:#E3D7C3;
}
.week-grid .today-col{
  position:absolute; top:0; bottom:0; background:rgba(111,191,115,.07);
}
.event-card{
  position:absolute; border-radius:10px; padding:4px 5px 4px;
  background:rgba(47,128,237,.12); border:1.5px solid rgba(47,128,237,.38);
  overflow:hidden; cursor:grab; touch-action:none; user-select:none;
  transition:box-shadow .12s ease, opacity .12s ease;
  display:flex; flex-direction:column; gap:2px;
}
.event-card.green{background:rgba(79,168,90,.14); border-color:rgba(79,168,90,.4);}
.event-card.orange{background:rgba(242,182,76,.16); border-color:rgba(242,182,76,.45);}
.event-card.pink{background:rgba(242,155,176,.15); border-color:rgba(242,155,176,.42);}
.event-card.purple{background:rgba(155,127,212,.15); border-color:rgba(155,127,212,.42);}
.event-card.cyan{background:rgba(95,184,176,.15); border-color:rgba(95,184,176,.42);}
.event-card.done{opacity:.55;}
.event-card.done .event-title{text-decoration:line-through;}
.event-card.dragging{
  opacity:.7; transform:rotate(2deg); box-shadow:0 12px 26px rgba(74,59,46,.25); z-index:50;
}
.event-title{
  font-size:11px; font-weight:800; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere; flex:1 1 auto; min-height:0;
}
.event-time{font-size:9.5px; font-weight:800; color:var(--ink-soft); flex:none;}
.event-done{
  position:absolute; top:3px; right:3px; width:15px; height:15px; border-radius:50%;
  border:1.5px solid rgba(47,128,237,.55); background:#fff; color:transparent; font-size:9px;
  display:flex; align-items:center; justify-content:center; transition:all .12s ease;
}
.event-card.done .event-done{background:var(--sage); border-color:var(--sage); color:#fff;}
.event-card.tiny{padding:3px 5px;}
.event-card.tiny .event-title{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  -webkit-line-clamp:unset; font-size:10px; line-height:1.25;
}
.event-card.tiny .event-time{display:none;}
.event-card.short .event-title{
  display:block; overflow:hidden; -webkit-line-clamp:unset;
}
.event-card.short .event-time{display:none;}
.drop-preview{
  position:absolute; border-radius:10px; pointer-events:none; z-index:4;
  background:rgba(111,191,115,.20); border:2px dashed rgba(79,168,90,.65);
}
.event-del{
  position:absolute; bottom:2px; right:4px; font-size:12px; color:var(--ink-soft);
  opacity:0; transition:opacity .12s ease; line-height:1;
}
.event-card:hover .event-del{opacity:1;}
.event-del:hover{color:#C85C4F;}
.now-line{
  position:absolute; left:0; right:0; height:2px; background:#ff4d4f; z-index:20;
  pointer-events:none;
}
.now-line::before{
  content:""; position:absolute; left:var(--dot-x, 50%); top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%; background:#ff4d4f; border:2px solid #fff;
}
.week-grid.drop-hover{
  outline:2px dashed var(--sage); outline-offset:-3px; border-radius:12px;
}
.drag-time-tip{
  position:fixed; z-index:700; pointer-events:none; background:rgba(74,59,46,.92); color:#fff;
  font-size:12px; font-weight:800; padding:5px 11px; border-radius:99px;
  box-shadow:var(--shadow); white-space:nowrap;
}
.jump-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.jump-cell{
  aspect-ratio:1; border-radius:11px; background:var(--bg); font-size:13px; font-weight:800;
  color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:all .12s ease;
}
.jump-cell:hover{background:var(--sage-soft); color:var(--sage-deep); transform:scale(1.05);}
.jump-cell.other{opacity:.35;}
.jump-cell.today{background:var(--sage); color:#fff;}
/* 拖拽 */
.drag-ghost{
  position:fixed; z-index:600; pointer-events:none; opacity:.94;
  background:#fff; border-radius:14px; box-shadow:0 16px 34px rgba(74,59,46,.28);
  padding:9px 12px; font-size:13px; font-weight:800; color:var(--ink);
  transform:rotate(2deg); max-width:240px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
body.drag-active{user-select:none; -webkit-user-select:none;}
.cal-cell.drop-hover .cal-items,.todo-item.drop-hover{
  outline:2px dashed var(--sage-deep); outline-offset:-2px; border-radius:10px;
}

/* 日程看板响应式 */
@media(max-width:820px){
  .schedule-wrap{
    display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:6px 10px calc(14px + env(safe-area-inset-bottom));
  }
  .todo-panel{width:100%; height:auto; max-height:none; flex:none; padding:12px 12px 8px; border-radius:22px;}
  .todo-head{margin-bottom:8px;}
  .todo-head h2{font-size:16px;}
  .todo-add{margin-bottom:8px;}
  .todo-add .input{padding:9px 12px; font-size:14px;}
  .todo-add .btn{width:38px; height:38px; font-size:18px;}
  .todo-list{gap:6px; flex:none; overflow:visible; max-height:none;}
  .todo-item{padding:8px 10px; border-radius:12px;}
  .todo-title{font-size:13px; line-height:1.45;}
  .todo-foot{padding-top:6px;}
  .todo-foot .btn{padding:5px 10px; font-size:11px;}
  .cal-panel{flex:none; height:70vh; min-height:440px; margin-top:8px; padding:8px 6px 10px; border-radius:20px;}
  .cal-head{gap:4px; margin-bottom:6px;}
  .cal-today{padding:6px 10px; font-size:11px;}
  .cal-nav{width:28px; height:28px; font-size:16px;}
  .cal-range{font-size:11.5px; padding:4px 4px; text-align:left;}
  .place-hint{font-size:11px; padding:5px 8px; margin-bottom:6px;}
  .th-gap,.time-col{width:40px;}
  .week-grid{--rowh:46px;}
  .tick{font-size:8.5px; right:4px;}
  .week-day .wd{font-size:10px;}
  .week-day .wn{width:24px; height:24px; font-size:12px;}
  .event-title{font-size:9.5px; -webkit-line-clamp:2;}
  .event-time{font-size:8px;}
  .event-done{display:none;}
  .event-del{opacity:.6;}
  .tab{padding:7px 13px; font-size:13px;}
  .sync-hero p{font-size:12px;}
}
@media(max-width:420px){
  .todo-panel{padding:10px 10px 7px;}
  .cal-head{gap:3px;}
  .cal-range{font-size:11px;}
}
@media(max-width:340px){
  .sync-chip span{display:none;}
  .sync-chip{padding:7px;}
}
[hidden]{display:none !important;}