/* Khỏe — web client. Token màu = palette dataviz đã validate (doc 11). */
:root{
  color-scheme:light;
  --surface:#FFFFFF;--plane:#FAF8F5;--ink:#1E242B;--ink-2:#5C646D;
  --muted:#8A9098;--grid:#EFECE6;--baseline:#E2DDD5;--border:#E2DDD5;
  --accent:#2D6A4F;--accent-soft:#E8F3ED;--good:#2D6A4F;--good-text:#2D6A4F;
  --apricot:#F4A261;--apricot-soft:#FDF2E9;
  --bubble-ai:#F5F3EF;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;--surface:#20261F;--plane:#151812;--ink:#F2F1EC;--ink-2:#B9BFB4;
  --muted:#8A9384;--grid:#2E3529;--baseline:#3A4234;--border:rgba(255,255,255,.10);
  --accent:#5FA57F;--accent-soft:#28402F;--good:#5FA57F;--good-text:#7FC29B;
  --apricot:#F4A261;--apricot-soft:#4A3423;--bubble-ai:#262C22;}}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Be Vietnam Pro","Plus Jakarta Sans",Inter,system-ui,sans-serif;background:var(--plane);color:var(--ink);line-height:1.45}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:11px 13px;width:100%}
.err{color:#d03b3b;font-size:13px;margin-top:8px;min-height:18px}
.sub{font-size:13px;color:var(--ink-2);margin-bottom:8px}

/* ---------- auth ---------- */
#v-auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:26px}
.auth-brand{font-size:26px;font-weight:800;margin-bottom:16px}
.auth-brand span{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.tabs2{display:flex;gap:6px;margin-bottom:14px}
.tabs2 button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2)}
.tabs2 button.on{background:var(--accent-soft);color:var(--ink);font-weight:600;border-color:var(--accent)}
.auth-box input{margin-bottom:9px}
.cta{display:block;width:100%;background:var(--accent);color:#fff;border:0;border-radius:12px;
  padding:13px;font-size:15px;font-weight:700;margin-top:4px}
.oauth-row{display:flex;gap:8px;margin-top:12px}
.oauth-row button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}

/* ---------- onboarding ---------- */
#v-onboard{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.ob-box{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px}
.ob-step{font-size:12px;color:var(--muted);margin-bottom:6px}
.ob-box h2{font-size:20px;margin-bottom:10px}
.opt{border:1.5px solid var(--border);border-radius:13px;padding:12px 14px;margin-bottom:8px;cursor:pointer;font-size:14px}
.opt small{display:block;color:var(--ink-2);font-weight:400;font-size:12px}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.sports{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.sport{border:1.2px solid var(--border);background:var(--surface);border-radius:18px;padding:7px 12px;font-size:12.5px;cursor:pointer}
.sport.sel{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.grid2 label{font-size:12px;color:var(--ink-2)}
.grid2 input,.grid2 select{margin-top:4px}
.chk{display:flex;gap:10px;align-items:center;padding:9px 0;font-size:14px;border-bottom:1px solid var(--grid);cursor:pointer}
.chk input{width:auto}

/* ---------- app 3 cột ---------- */
.app{display:grid;grid-template-columns:210px 1fr 390px;height:100vh;overflow:hidden}
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:800;font-size:19px;padding:4px 10px 16px}
.brand small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.nav-item{padding:10px 12px;border-radius:8px;color:var(--ink-2);cursor:pointer;font-size:14px}
.nav-item.active{background:var(--accent-soft);color:var(--ink);font-weight:600}
.spacer{flex:1}
.motto{font-size:12px;color:var(--muted);padding:10px;border-top:1px solid var(--border)}
.main{overflow-y:auto;padding:24px 28px}
.greet h1{font-size:21px}.greet p{color:var(--ink-2);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:16px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px}
.label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.hero{font-size:34px;font-weight:800;margin:4px 0 2px}
.hero small{font-size:13px;font-weight:400;color:var(--ink-2)}
.stat-val{font-size:22px;font-weight:700;margin-top:4px}
.stat-val small{font-size:12px;font-weight:400;color:var(--ink-2)}
.delta{font-size:12px;margin-top:4px}.delta.good{color:var(--good-text)}
.meter{height:7px;background:var(--grid);border-radius:4px;margin:8px 0 5px;overflow:hidden}
.meter>i{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .4s}
.meter-cap{font-size:12px;color:var(--ink-2)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px}
.panel h3{font-size:14px;margin-bottom:6px}
.journey-track{position:relative;height:9px;background:var(--grid);border-radius:5px;margin:24px 6px 6px}
.journey-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:5px}
.journey-dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);transform:translate(-50%,-50%)}
.journey-flag{position:absolute;top:-20px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap}
.journey-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px}
.task{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--grid);font-size:13px}
.task:last-child{border-bottom:0}
.task .box{width:20px;height:20px;border-radius:6px;border:2px solid var(--baseline);flex-shrink:0;display:grid;place-items:center;font-size:12px;color:#fff}
.task.done .box{background:var(--good);border-color:var(--good)}
.task.done span{color:var(--muted);text-decoration:line-through}
.task em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted)}
.task .plus{border-style:dashed;color:var(--muted)}
.task .add-t{color:var(--accent)}
.task.add{cursor:pointer}

/* ---------- chat ---------- */
.chatpane{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;height:100vh}
.chat-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700}
.chat-head b{font-size:14px}.chat-head small{display:block;color:var(--good-text);font-size:11px}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px}
.msg{max-width:86%;padding:9px 13px;border-radius:15px;font-size:13.5px;white-space:pre-wrap}
.msg.ai{background:var(--bubble-ai);border-bottom-left-radius:5px;align-self:flex-start}
.msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.typing{color:var(--muted);font-style:italic}
.meal-card{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;max-width:93%;font-size:12.5px}
.meal-card b{font-size:13.5px}
.range{display:flex;align-items:center;gap:6px;margin:8px 0 4px;font-size:11.5px;color:var(--ink-2)}
.range .bar{flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--accent-soft),var(--accent),var(--accent-soft))}
.range b{color:var(--ink);font-size:14px}
.btn-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.btn{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:9px;padding:7px 12px;font-size:12.5px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chips{display:flex;gap:7px;padding:0 14px 8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:6px 12px;font-size:12px;color:var(--ink-2);cursor:pointer}
.chip:hover{background:var(--accent-soft);color:var(--ink)}
.chat-input{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--border)}
.chat-input input{flex:1;border-radius:18px}
.send{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:15px}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:16px;padding:20px;width:100%;max-width:360px}
.modal h3{margin-bottom:10px}.modal input,.modal select{margin-bottom:9px}

/* ---------- mobile ---------- */
.tabbar{display:none}
@media (max-width:980px){
  .app{grid-template-columns:1fr;height:100dvh}
  .sidebar{display:none}
  .main{padding:16px 14px 90px}
  .chatpane{position:fixed;inset:0;bottom:64px;height:auto;z-index:5;transform:translateX(100%);transition:transform .22s;border-left:0}
  .chatpane.open{transform:none}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--surface);border-top:1px solid var(--border);z-index:10}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;color:var(--muted);cursor:pointer}
  .tab.active{color:var(--accent);font-weight:600}
  .tab .ico{font-size:20px}
}

/* Ke hoach tuan */
.wday{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--grid);font-size:13px}
.wday:last-child{border-bottom:0}
.wday .d{width:34px;flex-shrink:0;font-weight:700;color:var(--muted);font-size:12px;padding-top:2px}
.wday.today{background:var(--accent-soft);border-radius:10px;padding:8px 10px;margin:0 -10px}
.wday.today .d{color:var(--accent)}
.wday .t b{display:block}
.wday .t small{color:var(--ink-2)}
.wday .adapt{color:#b45309;font-size:11.5px;margin-top:2px}
.mp-opt{border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:8px;font-size:13px}
.mp-opt b{font-size:13.5px}
.mp-opt .src{color:var(--muted);font-size:11px;margin-top:4px}
.mp-note{color:var(--good-text);font-size:12px;margin-top:3px}

/* DNA: tram dung chan + nuoc + cam xuc */
.stations{display:flex;align-items:center;gap:4px;margin:12px 4px 4px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.station{display:flex;align-items:center;gap:4px}
.station .dot{width:12px;height:12px;border-radius:50%;background:var(--grid);border:2px solid var(--baseline)}
.station.done .dot{background:var(--accent);border-color:var(--accent)}
.station.next .dot{background:var(--apricot);border-color:var(--apricot);box-shadow:0 0 0 3px var(--apricot-soft)}
.station .lbl{font-weight:600}
.station.next .lbl{color:var(--apricot)}
.station-line{flex:1;height:2px;background:var(--grid);min-width:14px}
.water-row{display:flex;gap:6px;margin-top:8px;align-items:center}
.water-cup{font-size:19px;cursor:pointer;filter:grayscale(1);opacity:.45;transition:all .15s}
.water-cup.full{filter:none;opacity:1}
.mood-row{display:flex;gap:8px;margin:10px 0 4px}
.mood{border:1px solid var(--border);background:var(--surface);border-radius:9999px;padding:7px 14px;font-size:13px;cursor:pointer}
.mood:hover{background:var(--accent-soft)}
.protein-eq{font-size:11.5px;color:var(--apricot);font-weight:600}