/* Vùng NÓNG (mặc định): đỏ-cam-vàng rực cho Hôm nay / Tập trung / Thưởng */
:root{--bg1:#fff3e2;--bg2:#ffe6dc;--bg3:#fff6c9;--card:#ffffff;--card2:#fff2e6;--ink:#3f2528;--mute:#8d6a63;--line:#f8d8c4;
--a1:#ff5a36;--a2:#ffb02e;--chip:#ffe1bd;--chipOn:#ffc27a;--soft:#fff1e3;--hero1:#ffe1b8;--hero2:#ffc9c0;
--b1:#ffd36b;--b2:#ff8a3d;--bsh:#d9551d;--btx:#4a1a08;--shadow:0 8px 24px rgba(255,106,61,.2);--ring:#ff5a36;--tip:#fff1d6;--tipb:#ffb02e;--ok:#e1f7e6;--okb:#3fc380;--bar:#ffe6cf}
/* Vùng LẠNH: xanh dương + xanh lá dịu cho Luyện / Cai lướt / Ghi nhanh */
body[data-zone="cool"]{--bg1:#e4f5ff;--bg2:#e2faf1;--bg3:#e9eeff;--card:#ffffff;--card2:#eaf6fb;--ink:#1d3347;--mute:#587489;--line:#cde6f1;
--a1:#2b8cff;--a2:#17b8a0;--chip:#d6ecff;--chipOn:#a9d8ff;--soft:#e8f4fb;--hero1:#c9ecff;--hero2:#cff6e2;
--b1:#9bd8ff;--b2:#35a0ff;--bsh:#1b68c4;--btx:#06284d;--shadow:0 8px 24px rgba(43,140,255,.17);--ring:#17b8a0;--tip:#e0f3ff;--tipb:#35a0ff;--ok:#dcf6e6;--okb:#2fb872;--bar:#d9eef9}
/* Vùng ĐÊM: xanh đậm dịu mắt trước giờ ngủ */
body[data-zone="night"]{--bg1:#0e1a33;--bg2:#13264a;--bg3:#0f1e3d;--card:#1b2d52;--card2:#223764;--ink:#e6efff;--mute:#9db3d9;--line:#2e4577;
--a1:#7fb2ff;--a2:#6fe0c8;--chip:#26406f;--chipOn:#3a5f9f;--soft:#1f3560;--hero1:#1f3a6b;--hero2:#244a6b;
--b1:#8fbaff;--b2:#5b8fee;--bsh:#2f5db5;--btx:#06142e;--shadow:0 8px 24px rgba(0,0,0,.35);--ring:#6fe0c8;--tip:#1f3560;--tipb:#7fb2ff;--ok:#1b4a47;--okb:#6fe0c8;--bar:#26406f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{color:var(--ink);font-family:'Quicksand','Nunito',system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.45;min-height:100dvh;
background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 48%,var(--bg3) 100%);background-attachment:fixed;transition:background .6s}
h1,h2,h3,.disp{font-family:'Comfortaa','Quicksand',sans-serif;margin:0;line-height:1.2;font-weight:700}
.app{max-width:520px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom))}
.hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.hd h1{font-size:21px}
.stats{display:flex;gap:6px}
.st{background:var(--card);border-radius:16px;padding:7px 11px;font:700 15px 'Comfortaa';white-space:nowrap;box-shadow:var(--shadow)}
.gear{background:var(--card);border:0;color:var(--ink);width:42px;height:42px;border-radius:16px;font-size:18px;box-shadow:var(--shadow)}
.card{background:var(--card);border-radius:28px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card h2{font-size:18px;margin-bottom:8px}
small,.sm{color:var(--mute);font-size:14px;font-weight:600}
.btn{border:0;border-radius:20px;padding:14px 20px;font:700 17px 'Comfortaa',sans-serif;color:var(--btx);background:linear-gradient(var(--b1),var(--b2));box-shadow:0 5px 0 var(--bsh);cursor:pointer;min-height:54px;width:100%}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--bsh)}
.btn.mint{background:linear-gradient(#9be8d0,#2fc7a3);color:#06382c;box-shadow:0 5px 0 #17876c}
.btn.mint:active{box-shadow:0 1px 0 #17876c}
.btn.violet{background:linear-gradient(#ffb3d3,#ff7eb6);color:#4d0f33;box-shadow:0 5px 0 #d44f8c}
.btn.violet:active{box-shadow:0 1px 0 #d44f8c}
.btn.ghost{background:var(--soft);color:var(--ink);box-shadow:none;font-size:15px;min-height:48px}
.btn.sm2{width:auto;padding:10px 16px;font-size:15px;min-height:46px}
.btn:disabled{opacity:.45;box-shadow:none;transform:none}
.row{display:flex;gap:10px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{border:2px solid transparent;background:var(--chip);color:var(--ink);border-radius:999px;padding:9px 15px;font:700 15px 'Quicksand';cursor:pointer;min-height:44px}
.chip.on{background:var(--chipOn);border-color:var(--a1)}
input[type=text],input[type=time],input[type=number],input[type=datetime-local],textarea{width:100%;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--ink);font:600 16px 'Quicksand';outline:none;margin:4px 0}
input:focus,textarea:focus{border-color:var(--a1)}
input[type=range]{width:100%;accent-color:var(--a1);height:36px}
textarea{min-height:110px;resize:vertical}
.hero{text-align:center;position:relative;padding-top:10px;background:linear-gradient(160deg,var(--hero1),var(--hero2))}
.bubble{background:var(--card);color:var(--ink);border-radius:22px;padding:12px 16px;font:700 16px 'Quicksand';display:inline-block;max-width:94%;position:relative;margin-bottom:12px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.bubble:after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:var(--card)}
.pet{width:165px;height:auto;animation:bob 2.4s ease-in-out infinite}
.pet.excited{animation-duration:.7s}.pet.sad{animation:none}
.clawL{transform-origin:62px 112px;animation:wl 1.6s ease-in-out infinite}
.clawR{transform-origin:138px 112px;animation:wr 1.6s ease-in-out infinite}
.pet.sad .clawL,.pet.sad .clawR,.pet.sleepy .clawL,.pet.sleepy .clawR{animation:none}
.zz{animation:zz 2s ease-in-out infinite;font:700 22px 'Comfortaa';fill:#8a769f}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wl{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes wr{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
@keyframes zz{0%,100%{opacity:.2}50%{opacity:1}}
.lv{height:12px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden;margin:6px 0 2px}
.lv i{display:block;height:100%;background:linear-gradient(90deg,var(--a2),var(--a1));border-radius:99px;transition:width .5s}
.goal{display:flex;align-items:center;gap:14px}
.ringw{position:relative;width:84px;height:84px;flex:none}
.ringw svg{transform:rotate(-90deg)}
.ringw b{position:absolute;inset:0;display:grid;place-items:center;font:700 21px 'Comfortaa'}
.sec{font:700 16px 'Comfortaa';margin:6px 2px 8px;display:flex;justify-content:space-between;align-items:center}
.q{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:22px;padding:11px 12px;margin-bottom:9px;cursor:pointer;min-height:64px;border:2px solid var(--line);box-shadow:0 3px 10px rgba(0,0,0,.05)}
.q:active{transform:scale(.98)}
.q .ck{width:44px;height:44px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:22px;flex:none}
.q .qt{flex:1}.q .qt b{display:block;font-size:16px}.q .qt small{font-size:13px}
.q.done{border-color:var(--okb);background:var(--ok)}
.q.done .ck{background:var(--okb);color:#06301f;font:700 22px 'Comfortaa'}
.q.done b{text-decoration:line-through;opacity:.65}
.go{color:var(--a1);font:700 14px 'Comfortaa'}
.x{background:none;border:0;color:var(--mute);font-size:20px;width:38px;height:38px}
.cups{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cup{width:calc(25% - 6px);height:48px;border-radius:16px;border:2px solid var(--line);background:var(--soft);font-size:22px;filter:grayscale(1) opacity(.45)}
.cup.on{filter:none;background:#d6ecff;border-color:#2b8cff}
.bar{height:12px;border-radius:99px;background:var(--bar);overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--a2),var(--a1));border-radius:99px;transition:width .5s}
.debt{background:linear-gradient(135deg,var(--hero1),var(--hero2));color:var(--ink);border-radius:28px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.debt .btn{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--line);margin-top:8px}
.pig{display:flex;align-items:center;gap:12px}
.pig .em{font-size:52px;line-height:1;transition:transform .4s;transform-origin:center bottom}
.days{display:flex;gap:6px;justify-content:space-between;margin-top:6px}
.nav{position:fixed;left:0;right:0;bottom:0;background:var(--card);opacity:.97;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;justify-content:center;gap:1px;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);z-index:5}
.nav button{flex:1;max-width:90px;border:0;background:none;color:var(--mute);font:700 11px 'Quicksand';padding:6px 0;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:56px}
.nav button span{font-size:22px;line-height:1.1}
.nav button.on{background:var(--chipOn);color:var(--ink)}
.ov{position:fixed;inset:0;background:rgba(40,25,40,.55);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.ov.hidden{display:none}
.sheet{background:var(--card);color:var(--ink);width:100%;max-width:520px;max-height:92dvh;overflow:auto;border-radius:30px 30px 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom))}
.sheet h2{font-size:22px;margin-bottom:6px}
.big{font-size:60px;text-align:center;margin:6px 0}
.pop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);background:var(--card);color:var(--ink);padding:18px 26px;border-radius:28px;text-align:center;z-index:40;opacity:0;pointer-events:none;box-shadow:0 14px 44px rgba(255,106,61,.4);max-width:86%;border:3px solid var(--a2)}
.pop.show{animation:pop 2.6s ease forwards}
.pop b{font:700 22px 'Comfortaa';display:block}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);background:#2b2230;color:#fff;font-weight:700;padding:10px 16px;border-radius:18px;z-index:50;opacity:0;transition:opacity .25s;max-width:90%;text-align:center}
.toast.show{opacity:1}
#conf{position:fixed;inset:0;pointer-events:none;z-index:60}
.clock{position:relative;width:240px;height:240px;margin:6px auto}
.clock svg{transform:rotate(-90deg)}
.clock b{position:absolute;inset:0;display:grid;place-items:center;font:700 50px 'Comfortaa'}
.breath{width:150px;height:150px;margin:18px auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d6f3ff,#35a0ff);animation:br 10s ease-in-out infinite}
@keyframes br{0%,100%{transform:scale(.7)}40%{transform:scale(1.25)}}
.tiles{display:flex;gap:8px;margin-bottom:12px}
.tile{flex:1;background:var(--card);border-radius:20px;padding:10px;text-align:center;box-shadow:var(--shadow)}
.tile b{display:block;font:700 24px 'Comfortaa'}.tile small{font-size:12px}
.rw{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:22px;padding:12px;margin-bottom:9px;box-shadow:var(--shadow)}
.rw .t{flex:1}.rw .t b{display:block}
.prog{height:8px;border-radius:9px;background:var(--bar);margin-top:5px;overflow:hidden}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--a2),var(--a1))}
.note{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:18px;padding:8px 10px;margin-bottom:8px;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.note .t{flex:1;font-weight:700}.note.d .t{text-decoration:line-through;opacity:.55}
.note .ck{width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 17px 'Comfortaa'}
.note.d .ck{background:var(--okb);border-color:var(--okb);color:#06301f}
.tip{background:var(--tip);border-left:4px solid var(--tipb);border-radius:14px;padding:10px 12px;font-size:15px;margin:10px 0}
.tip.pk{background:var(--tip)}
.sk{display:flex;gap:10px;align-items:flex-start}
.sk .ic{font-size:30px}
.sk h2{margin:0 0 2px}
.emo{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.emo button{width:calc(20% - 7px);min-width:52px;height:54px;border-radius:18px;border:2px solid var(--line);background:var(--card);font-size:26px}
.cd{font:700 84px 'Comfortaa';text-align:center;color:var(--a1);margin:10px 0}
.chk{display:flex;align-items:center;gap:10px;background:var(--card2);border-radius:18px;padding:10px 12px;margin-bottom:8px;border:2px solid transparent;font-weight:700}
.chk.on{background:var(--ok);border-color:var(--okb)}
.chk b{flex:1}
.song{display:flex;align-items:center;gap:10px;background:var(--card2);border-radius:18px;padding:10px 12px;margin-bottom:8px}
.song b{display:block}.song a{margin-left:auto;text-decoration:none;font-weight:700;color:var(--btx);background:linear-gradient(var(--b1),var(--b2));padding:8px 12px;border-radius:14px;white-space:nowrap}
.steps ol{padding-left:20px;margin:6px 0}
.steps li{margin-bottom:6px}
.steps code{font-size:13px;word-break:break-all;background:var(--soft);padding:2px 5px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--a1);outline-offset:2px}