:root{
  --bg:#f6f4ee; --card:#ffffff; --ink:#2c2c2a; --sub:#6b6a63; --line:#e4e0d5;
  --blue:#185FA5; --blue-bg:#E6F1FB; --amber:#854F0B; --amber-bg:#FAEEDA;
  --teal:#0F6E56; --teal-bg:#E1F5EE; --coral:#993C1D; --coral-bg:#FAECE7;
  --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.6; font-size:16px;
}
#app{max-width:640px; margin:0 auto; min-height:100%; padding:20px 16px 40px; display:flex; flex-direction:column;}
header{display:flex; align-items:baseline; justify-content:space-between; padding:8px 4px 16px;}
header .logo{font-size:22px; font-weight:500; letter-spacing:1px;}
header .logo b{color:var(--blue); font-weight:500;}
header .date{color:var(--sub); font-size:14px;}
main{flex:1;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:14px;}
h1{font-size:20px; font-weight:500; line-height:1.5;}
h2{font-size:17px; font-weight:500; margin-bottom:10px;}
.sub{color:var(--sub); font-size:14px;}
.muted{color:var(--sub); font-size:13px;}
.big-btn{
  display:block; width:100%; padding:10px; border:none; border-radius:11px;
  background:var(--blue); color:#fff; font-size:15px; font-weight:500;
  cursor:pointer; font-family:inherit; letter-spacing:1px;
}
.big-btn:hover{filter:brightness(1.06);}
.big-btn.soft{background:var(--blue-bg); color:var(--blue); border:1px solid #B5D4F4;}
.big-btn.warm{background:var(--amber-bg); color:var(--amber); border:1px solid #FAC775;}
.link-btn{background:none; border:none; color:var(--blue); font-size:14px; cursor:pointer; font-family:inherit; padding:6px 2px;}
.row{display:flex; gap:12px;}
.row>*{flex:1;}
.principle{text-align:center; color:var(--sub); font-size:13px; margin:18px 0 6px;}
.chips{display:flex; gap:8px; justify-content:center; margin:14px 0;}
.chip{width:10px; height:10px; border-radius:50%; background:#ddd8cb; border:1px solid #cfc9b8;}
.chip.done{background:var(--blue); border-color:var(--blue);}
.q-prompt{font-size:18px; font-weight:500; margin:10px 0 18px; line-height:1.6;}
.q-prompt small{display:block; color:var(--sub); font-size:13px; font-weight:400; margin-top:6px;}
.opt{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:120px; padding:18px; border-radius:14px; cursor:pointer;
  background:#fbfaf6; border:1.5px solid var(--line);
  font-size:16px; transition:border-color .15s, background .15s;
}
.opt:hover{border-color:#B5D4F4; background:var(--blue-bg);}
.opt img, .opt svg{width:100%; max-width:170px; height:auto; display:block;}
.opt .img-wrap{display:flex; flex-direction:column; gap:6px; align-items:center; width:100%;}
.opt .img-label{font-size:13px; color:var(--sub);}
.opt.color-opt{min-height:150px; flex-direction:column; gap:10px;}
.color-dot{width:76px; height:76px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--line);}
.skip{display:block; margin:18px auto 0; background:none; border:none; color:var(--sub); font-size:13px; cursor:pointer; font-family:inherit; text-decoration:underline;}
.paper-toolbar{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:12px 0;}
.pal{width:26px; height:26px; border-radius:50%; cursor:pointer; border:none; padding:0; transition:transform .15s ease;}
.pal.on{transform:scale(1.45); box-shadow:0 2px 6px rgba(60,55,40,.25);}
.tbtn{border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 12px; cursor:pointer; font-size:13px; font-family:inherit; color:var(--ink);}
.tbtn.on{background:var(--blue-bg); border-color:var(--blue); color:var(--blue);}
.tbtn.danger{color:var(--coral);}
canvas{border:1px solid var(--line); border-radius:12px; background:#fff; width:100%; touch-action:none; display:block;}
.radar-box{display:flex; justify-content:center; padding:6px 0;}
.dim-row{display:flex; align-items:center; gap:10px; margin:8px 0;}
.dim-name{width:64px; font-size:14px; color:var(--ink);}
.dim-bar{flex:1; height:10px; border-radius:6px; background:#eeeae0; overflow:hidden;}
.dim-bar i{display:block; height:100%; background:var(--blue); border-radius:6px;}
.dim-val{width:34px; text-align:right; font-size:13px; color:var(--sub); font-variant-numeric:tabular-nums;}
.trend-card h2{display:flex; justify-content:space-between; align-items:center;}
.band{display:flex; gap:4px; margin:10px 0;}
.band .day{flex:1; height:30px; border-radius:6px; border:1px solid var(--line); background:#faf9f4; position:relative;}
.band .day.fill{border-color:transparent;}
.band .day.empty::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:1.5px; background:#cfc9b8; transform:translate(-50%,-50%) rotate(45deg);}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:10px 0;}
.cal .wd{text-align:center; font-size:12px; color:var(--sub); padding:2px 0;}
.cal .cell{aspect-ratio:1/1; border-radius:8px; border:1px solid var(--line); background:#faf9f4; font-size:12px; color:var(--sub); display:flex; align-items:flex-start; justify-content:flex-end; padding:3px 5px; box-sizing:border-box;}
.cal .cell.fill{border-color:rgba(62,61,58,.18); color:#fff; font-weight:500;}
.cal .cell.gray{color:#6b6a63;}
.cal .cell.future{opacity:.35;}
.cal .cell.click{cursor:pointer;}
.reminder{border:1px solid #F5C4B3; background:var(--coral-bg); border-radius:12px; padding:14px 16px; margin:12px 0; font-size:14px; color:var(--coral);}
.reminder.warm{border-color:#FAC775; background:var(--amber-bg); color:var(--amber);}
.reminder.good{border-color:#9FE1CB; background:var(--teal-bg); color:var(--teal);}
.field{margin:12px 0;}
.field label{display:block; font-size:14px; margin-bottom:6px;}
input[type=time], input[type=text], textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink);
}
.mini-opt{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line);}
.mini-opt:last-child{border-bottom:none;}
.switch{position:relative; width:46px; height:26px; flex:none;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:#d8d2c3; border-radius:26px; cursor:pointer; transition:.2s;}
.slider::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider{background:var(--blue);}
.switch input:checked + .slider::before{transform:translateX(20px);}
.paper-wrap{position:relative;}
.result-img{width:100%; border-radius:12px; border:1px solid var(--line);}
.end-actions{display:flex; gap:10px; margin-top:16px;}
.end-actions .big-btn{flex:1; font-size:15px; letter-spacing:1px;}
.fade{animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.beta{display:inline-block; font-size:11px; color:var(--amber); border:1px solid #FAC775; background:var(--amber-bg); border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:2px;}
.empty{padding:30px 10px; text-align:center; color:var(--sub); font-size:14px;}
.greet{font-size:15px; color:var(--sub); margin:6px 0 16px;}
.stat-line{display:flex; gap:14px; margin:10px 0 2px;}
.stat{flex:1; text-align:center; padding:12px 6px; background:#fbfaf6; border-radius:12px;}
.stat b{display:block; font-size:22px; font-weight:500;}
.stat span{font-size:12px; color:var(--sub);}