:root{
  --cream:#F6F0E6;--card:#FFFBF5;--ink:#3A332D;--ink-2:#7A6F64;--ink-3:#AFA395;--line:#E9DFD1;
  --terra:#C8683F;--terra-soft:#F6E1D6;--sage:#7E9A78;--sage-soft:#E3EBDD;--red:#A33A2A;--red-soft:#F6D9D2;
  --f-ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --f-voice:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --field:#fff;--seg:#EDE4D7;--off:#F1EADF;--dot:#E8DDCF;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.app{max-width:440px;margin:0 auto;min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.boot{display:flex;height:100vh;align-items:center;justify-content:center;font:600 20px var(--f-voice);color:var(--ink-2)}
.pad{padding:0 16px}
.stack{display:flex;flex-direction:column;gap:12px}
h1{font:600 24px/1.3 var(--f-voice);margin:0}
h2{font-size:16px;font-weight:600;margin:0}
.muted{color:var(--ink-2)}.faint{color:var(--ink-3)}.small{font-size:12px}
.card{background:var(--card);border-radius:20px;padding:14px 16px;box-shadow:0 1px 0 var(--line)}
.rid{display:inline-block;font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:0 5px;margin-left:6px;vertical-align:1px;font-variant-numeric:tabular-nums}
.btn{appearance:none;border:0;border-radius:14px;height:48px;padding:0 18px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;width:100%}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.btn.terra{background:var(--terra)}
.btn.sm{height:38px;font-size:13.5px;width:auto;border-radius:12px;padding:0 14px}
.btn:disabled{opacity:.5}
.link{appearance:none;border:0;background:none;color:var(--terra);font-size:13px;padding:6px 0}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}
input.tin,select.tin{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--field);color:var(--ink);outline:0;font-size:16px}
input.tin:focus{border-color:#D9C6AE}
label.f{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2)}
.err{color:var(--red);font-size:13px;min-height:18px}

/* hero */
.hero{position:relative;height:clamp(200px,34vh,280px);overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(160deg,#F5D9BF,#EFC9A9)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .hd{position:absolute;left:16px;right:16px;top:calc(12px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink)}
.hero .hd b{font-weight:600}
.hero .pillx{background:rgba(255,251,245,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px 10px;border-radius:12px}

/* mode */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--seg);border-radius:12px;padding:3px}
.seg button{appearance:none;border:0;background:transparent;border-radius:9px;padding:9px 0;font-size:13px;font-weight:500;color:var(--ink-2)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(80,50,30,.12)}

/* voice */
.voice .who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);margin-bottom:6px}
.voice .dot{width:8px;height:8px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px var(--terra-soft)}
.voice p{margin:0;font:400 18px/1.65 var(--f-voice)}
.redcard{background:var(--red-soft);color:#6E2418;border-radius:20px;padding:14px 16px}
.redcard b{display:block;margin-bottom:4px}
.redcard p{margin:0;font-size:14px;line-height:1.6}

/* task */
.lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin-bottom:10px}
.opt{appearance:none;width:100%;text-align:left;border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:14px;padding:12px 14px;margin-bottom:8px;display:block}
.opt b{font-weight:500;font-size:15px}
.opt small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.opt em{float:right;font-style:normal;font-size:11px;color:var(--terra);background:var(--terra-soft);border-radius:8px;padding:2px 7px}
.chosen{display:flex;gap:10px;align-items:flex-start;background:var(--sage-soft);border-radius:14px;padding:12px 14px;font-size:14px}
.ck{width:22px;height:22px;flex:none;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.moves{margin:6px 0 10px;padding-left:18px;font-size:14px}
.moves li{margin:3px 0}
.note{font-size:12.5px;color:var(--terra);background:var(--terra-soft);border-radius:10px;padding:8px 10px;margin-bottom:10px}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--card);border-radius:18px;padding:12px 14px;box-shadow:0 1px 0 var(--line);display:flex;flex-direction:column;gap:6px;min-height:118px}
.tile .top{display:flex;justify-content:space-between;font-size:13px;font-weight:500}
.tile .top span{font-weight:400;color:var(--ink-2);font-size:12px}
.tile .big{font:600 26px/1 -apple-system,"SF Pro Rounded",var(--f-ui);font-variant-numeric:tabular-nums}
.tile .big small{font-size:13px;color:var(--ink-2);font-weight:400}
.dots{display:flex;gap:4px;flex-wrap:wrap}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.dots i.on{background:#7FB0C9}
.meals{display:flex;gap:6px}
.meals button{flex:1;appearance:none;border:1px solid var(--line);background:var(--field);border-radius:10px;padding:7px 0;font-size:13px;color:var(--ink-2)}
.meals button.on{background:var(--sage);border-color:var(--sage);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{appearance:none;border:1px solid var(--line);background:var(--field);border-radius:12px;padding:8px 12px;font-size:13.5px;color:var(--ink-2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.soft.on{background:var(--terra-soft);border-color:transparent;color:var(--terra)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:11px;color:var(--ink-2)}
.week i{display:block;width:26px;height:26px;margin:4px auto 0;border-radius:50%;background:var(--seg)}
.week i.any{background:#E3D5C3}.week i.tr{background:var(--sage)}
.week .today{color:var(--ink);font-weight:600}

/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav div{max-width:440px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;font-size:12px;color:var(--ink-3);text-decoration:none}
.nav a.on{color:var(--ink);font-weight:600}
.nav a i{width:22px;height:4px;border-radius:2px;background:transparent}
.nav a.on i{background:var(--terra)}

/* onboarding */
.prog{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:6px 0 4px}
.prog i{display:block;height:100%;background:var(--terra);transition:width .4s var(--ease)}
.q .qt{font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.q .qt span{font-size:11px;color:var(--ink-3);font-weight:400;white-space:nowrap}
.q .why{font-size:12px;color:var(--ink-2);margin:3px 0 10px;line-height:1.5}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.yn{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px dashed var(--line);font-size:14px;line-height:1.5}
.yn:first-of-type{border-top:0}
.yn .seg{width:112px}
.warn{font-size:12.5px;line-height:1.55;color:var(--terra);background:var(--terra-soft);border-radius:12px;padding:9px 11px;margin-top:10px}
.warn.red{color:var(--red);background:var(--red-soft)}

/* plan */
.pl li{list-style:none;padding:10px 0;border-top:1px dashed var(--line);font-size:14px;line-height:1.55}
.pl{margin:0;padding:0}
.pl li:first-child{border-top:0}
.pl li small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.wk div{border-radius:10px;padding:7px 0;text-align:center;background:var(--sage-soft);font-size:11px}
.wk div.off{background:var(--off);color:var(--ink-3)}
.wk b{display:block;font-weight:500;color:var(--ink-2)}

/* photo */
.ph{display:flex;gap:12px;align-items:center}
.ph img{width:68px;height:68px;border-radius:14px;object-fit:cover;flex:none;background:#EADBC8}
.kc{display:flex;align-items:baseline;gap:6px;margin:12px 0 6px}
.kc b{font:600 30px/1 -apple-system,var(--f-ui);font-variant-numeric:tabular-nums}
.kc em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink-2);background:var(--off);padding:4px 8px;border-radius:8px}
.mac{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:11.5px;color:var(--ink-2)}
.mac b{display:block;font-size:14px;color:var(--ink)}
.items{margin:8px 0 0;padding:0}
.items li{list-style:none;display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:13px}
.items li em{font-style:normal;color:var(--ink-3)}

/* sheet + toast */
.sheet-wrap{position:fixed;inset:0;z-index:40;background:rgba(40,28,18,.35);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-wrap.on{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:var(--cream);border-radius:24px 24px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(30px);transition:transform .35s var(--ease)}
.sheet-wrap.on .sheet{transform:none}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);background:var(--ink);color:#fff;padding:10px 14px;border-radius:14px;font-size:13.5px;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:50;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--terra);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-3px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== home + butler ===== */
.room{position:relative;height:min(60vh,480px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:linear-gradient(160deg,#F5D9BF,#EFC9A9);border-radius:0 0 28px 28px}
.room::-webkit-scrollbar{display:none}
.room-in{position:relative;height:100%;min-width:100%}
.room-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.grade{position:absolute;inset:0;pointer-events:none;transition:background 1s}
.room.morning .grade{background:linear-gradient(180deg,rgba(255,236,210,.18),rgba(255,220,190,.05));mix-blend-mode:screen}
.room.day .grade{background:rgba(255,255,255,.06);mix-blend-mode:screen}
.room.evening .grade{background:linear-gradient(180deg,rgba(255,150,80,.18),rgba(200,90,60,.12));mix-blend-mode:multiply}
.room.night .grade{background:linear-gradient(180deg,rgba(18,22,60,.62),rgba(30,26,60,.48));mix-blend-mode:multiply}
.lamp{position:absolute;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity 1.2s;background:radial-gradient(rgba(255,196,120,.55),rgba(255,170,90,.18) 40%,transparent 70%);mix-blend-mode:screen}
.room.night .lamp{opacity:1}
.room.evening .lamp{opacity:.45}
.bloom{position:absolute;width:3.2%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none;opacity:0;transition:all .9s var(--ease);background:radial-gradient(circle at 50% 50%,#fff 0 18%,#F7B7C4 20% 48%,rgba(247,183,196,0) 70%);filter:drop-shadow(0 0 6px rgba(255,190,200,.9))}
.bloom.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.room-wrap{position:relative}
.room-top{position:absolute;left:0;right:0;top:0;height:100%;z-index:3;pointer-events:none}
.room-top .pillx{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));font-size:12.5px;background:rgba(255,251,245,.78);color:#3A332D;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px 10px;border-radius:12px;white-space:nowrap}
.room-top .pl{left:14px}.room-top .pr{right:14px}
.spot{position:absolute;transform:translate(-50%,-50%);appearance:none;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2}
.spot i{position:relative;width:22px;height:22px;border-radius:50%;background:rgba(255,251,245,.35);border:2px solid rgba(255,251,245,.95);box-shadow:0 2px 10px rgba(60,30,10,.25)}
.spot span{font-size:11.5px;font-weight:600;color:#3A332D;background:rgba(255,251,245,.9);padding:3px 8px;border-radius:9px;white-space:nowrap;box-shadow:0 2px 8px rgba(60,30,10,.15)}
.spot.focus i{background:rgba(200,104,63,.45);animation:pulse 2s ease-out infinite}
.spot.done i{background:rgba(126,154,120,.9)}
.spot.done span{color:#4F6A4A}
.spot.off{opacity:.75}
.spot.ask i{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,251,245,.85)}100%{box-shadow:0 0 0 16px rgba(255,251,245,0)}}
.drop{position:absolute;left:50%;top:0;width:10px;height:14px;margin-left:-5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7FB0C9;animation:drop .9s var(--ease) forwards}
@keyframes drop{0%{transform:translateY(-36px);opacity:0}30%{opacity:1}100%{transform:translateY(4px);opacity:0}}
.orb{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border:0;padding:0;background:none;z-index:2;animation:bob 5s ease-in-out infinite}
.orb i,.orb-mini{display:block;border-radius:50%;background:radial-gradient(circle at 38% 35%,#FFF6E6 0 18%,#FFD9A8 40%,rgba(255,180,110,.55) 64%,rgba(255,170,100,0) 72%)}
.orb i{width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(255,200,140,.95))}
.orb.red i,.orb-mini.red{background:radial-gradient(circle at 38% 35%,#FFF0EC 0 18%,#F4A08C 42%,rgba(214,90,70,.5) 64%,rgba(214,90,70,0) 72%)}
.orb.red i{filter:drop-shadow(0 0 16px rgba(230,110,90,.95))}
.room.night .orb:not(.red) i{background:radial-gradient(circle at 38% 35%,#F4FAFF 0 18%,#C9E2F5 42%,rgba(150,195,235,.55) 64%,rgba(150,195,235,0) 72%);filter:drop-shadow(0 0 16px rgba(170,210,245,.95))}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-8px}}
.talk{position:relative;z-index:4;margin:-46px 12px 0;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;padding:14px 16px 16px;box-shadow:0 10px 30px rgba(80,45,20,.16)}
.talk.red{background:var(--red-soft)}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.who b{font-weight:600;color:var(--ink)}
.who .link{margin-left:auto;padding:0}
.orb-mini{width:18px;height:18px;flex:none}
.say{margin:8px 0 12px;font:400 18px/1.65 var(--f-voice);color:var(--ink)}
.talk.red .say{font-size:16px;color:#6E2418}
.acts{display:flex;gap:8px}
.acts .btn{flex:1}
.btn.redbtn{background:var(--red)}
@media (prefers-color-scheme:dark){
  :root{--cream:#1C1815;--card:#28221E;--ink:#F1E9DF;--ink-2:#BDAF9F;--ink-3:#8A7D70;--line:#3A322C;--terra-soft:#4A2E22;--sage-soft:#2E3A2B;--red-soft:#4A2620;--field:#221D19;--seg:#332B25;--off:#2C2621;--dot:#3A322C}
  .btn{background:#F1E9DF;color:#1C1815}.btn.ghost{background:transparent;color:var(--ink-2)}.btn.terra{background:var(--terra);color:#fff}.btn.redbtn{background:#E06A55;color:#fff}
  .chip.on{background:#F1E9DF;border-color:#F1E9DF;color:#1C1815}
  .redcard{color:#F6D9D2}.talk.red .say{color:#F6D9D2}
  .room{background:#2A221C}
}

.room-top .hint{position:absolute;left:50%;transform:translateX(-50%);bottom:58px;font-size:12px;color:#3A332D;background:rgba(255,251,245,.8);padding:5px 12px;border-radius:12px;white-space:nowrap;transition:opacity .6s;pointer-events:none}
.room-top .hint.gone{opacity:0}

/* ===== chat ===== */
.onchat{display:flex;flex-direction:column;height:100vh;height:100dvh}
.onchat .chat{flex:1;min-height:0}
.orb-mini.big{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(255,200,140,.9))}
.topics{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.tp{font-size:11.5px;padding:3px 9px;border-radius:9px;background:var(--seg);color:var(--ink-3)}
.tp.ok{background:var(--sage-soft);color:var(--sage)}
.chat{display:flex;flex-direction:column;gap:8px}
.sheet .chat{height:min(52vh,460px)}
.msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 16px 8px}
.sheet .msgs{padding:4px 2px}
.msg{display:flex;gap:8px;align-items:flex-start;max-width:88%}
.msg .orb-mini{margin-top:6px}
.msg p{margin:0;padding:9px 12px;border-radius:16px;font-size:15px;line-height:1.55;background:var(--card);box-shadow:0 1px 0 var(--line);white-space:pre-wrap}
.msg.user{align-self:flex-end}
.msg.user p{background:var(--ink);color:var(--cream)}
.got{display:inline-block;margin:5px 6px 0 0;font-size:11.5px;color:var(--sage);background:var(--sage-soft);padding:2px 8px;border-radius:8px}
.typing{display:flex;gap:4px;align-items:center;height:38px}
.typing b{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:ty 1.2s infinite}
.typing b:nth-child(2){animation-delay:.2s}.typing b:nth-child(3){animation-delay:.4s}
@keyframes ty{0%,60%,100%{opacity:.3}30%{opacity:1}}
.say-bar{display:flex;gap:8px;padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.sheet .say-bar{padding:6px 0 0}
.say-bar .tin{flex:1;min-width:0}
.wslot{position:absolute;transform:translate(-50%,-50%);appearance:none;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:2}
.wslot i{width:30px;height:30px;border-radius:50%;background:radial-gradient(rgba(255,240,215,.95),rgba(255,214,160,.45) 45%,rgba(255,200,140,0) 70%);animation:glow 3s ease-in-out infinite}
.wslot span{font-size:11px;color:#3A332D;background:rgba(255,251,245,.85);padding:2px 7px;border-radius:8px;white-space:nowrap}
@keyframes glow{50%{transform:scale(1.18);opacity:.75}}
.wobj{position:absolute;transform:translate(-50%,-70%);width:9%;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(60,30,10,.25))}

.room.night.drawn .grade{background:none}