/* ===== v13 redesign: bright, premium, energetic (light only) ===== */
:root{color-scheme:light;--bg:#f4f6fb;--card:#fff;--ink:#0f172a;--mute:#526075;--line:#0f172a12;
--shadow:0 1px 2px #0f172a0a,0 8px 24px -6px #1e3a8a1f;--shadow2:0 2px 4px #0f172a0d,0 18px 40px -12px #3730a340;
--brand:linear-gradient(135deg,#0b5f78 0%,#2563eb 52%,#6d28d9 100%);
--move:#f9480f;--move2:#ff9f1c;--fuel:#16a34a;--fuel2:#a3e635;--water:#0284c7;--water2:#38bdf8;--sleep:#7c3aed;--sleep2:#c084fc;--core:#db2777;--core2:#fb7185;--mood:#d97706;--mood2:#fcd34d;
--pink:#1d4ed8;--purple:#2563eb;--sage:#eef4ff;--butter:#fff4e8;--lav:#f3efff;--peach:#fff0ea;--sky:#e8f4fe}
html,body{background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
h1,h2,h3,.disp,.logo,.num,.tv,.r13v{font-family:'Plus Jakarta Sans',Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.018em;word-spacing:.08em}
.blob{display:none}
body::before{content:'';position:fixed;inset:0 0 auto 0;height:420px;z-index:-1;pointer-events:none;
 background:radial-gradient(60% 70% at 85% 0%,#c7d2fe99,transparent 70%),radial-gradient(50% 60% at 0% 10%,#a5f3fc80,transparent 70%)}
header{padding:14px 18px 4px}
.logo{font-size:21px;font-weight:800;display:flex;align-items:center;color:var(--ink);word-spacing:0}
.logo::before{content:'';width:26px;height:26px;border-radius:9px;background:var(--brand);box-shadow:0 4px 12px -2px #2563eb80;margin-right:9px;
 -webkit-mask:none;flex:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16l5-6 4 4 7-8'/%3E%3C/svg%3E"),var(--brand);background-size:16px,cover;background-position:center;background-repeat:no-repeat}
.logo span{color:#2563eb;background:none}
.pill{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--shadow);border:1px solid var(--line)}
.card,.tile{border:1px solid #0f172a0d;border-radius:24px;box-shadow:var(--shadow);background:#fff}
.btn{border-radius:14px;font-weight:700;transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,filter .2s}
.btn:active{transform:scale(.94)}
.btn.pri,.btn.pink{background:var(--brand);color:#fff;box-shadow:0 6px 16px -6px #2563ebaa}
.btn.alt{background:#f1f4fa;border:1px solid #0f172a0f;color:var(--ink)}
.btn.on,.btn.lime{background:linear-gradient(135deg,#059669,#16a34a);color:#fff}
.btn.ghost{background:none;color:var(--mute)}
.tag{background:#eef2ff;color:#3730a3;font-weight:800;letter-spacing:.06em}
.seg{background:#e8ecf5;border-radius:16px}.seg button{font-weight:700;color:#475569}.seg button.act{background:#fff;color:#1e3a8a;box-shadow:0 2px 8px -2px #1e3a8a33}
input,select,textarea{border:1px solid #0f172a1a;border-radius:14px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px #2563eb22}
.bar{height:9px;background:#eef1f7;border-radius:99px}.bar i{background:linear-gradient(90deg,var(--a2,#38bdf8),var(--a1,#2563eb));border-radius:99px;transition:width .8s cubic-bezier(.2,.9,.2,1)}
.note{background:#eef4ff}.nudge{background:#fff;border:1px solid #f59e0b40;box-shadow:var(--shadow);position:relative;padding-left:46px}
.nudge::before{content:'';position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#f59e0b,#f97316) center/14px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"),linear-gradient(135deg,#f59e0b,#f97316)}
.toast{background:#0f172a;box-shadow:0 10px 30px -8px #0f172a80}
a{color:#1d4ed8}
.sw.on{background:linear-gradient(135deg,#2563eb,#7c3aed)}

/* page headers */
.greet{padding:12px 4px 6px;position:relative}
.greet h1{font-size:34px;font-weight:800;letter-spacing:-.035em}
.ph13{display:flex;align-items:center;gap:12px}
.ph13 .phi{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,var(--a2),var(--a1));box-shadow:0 8px 18px -6px var(--a1)}
.greet .ph13+div{margin-top:6px}

/* Today hero */
.hero13{position:relative;overflow:hidden;border-radius:30px;padding:20px 20px 18px;margin:6px 0 14px;color:#fff;background:var(--brand);box-shadow:0 22px 44px -18px #3b2fbf99,0 4px 10px -4px #1e3a8a55}
.hero13::before{content:'';position:absolute;width:260px;height:260px;right:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,#ffffff38,transparent 65%)}
.hero13::after{content:'';position:absolute;width:220px;height:220px;left:-80px;bottom:-130px;border-radius:50%;background:radial-gradient(circle,#22d3ee55,transparent 65%)}
.hero13 .mute,.hero13 .mute2,.hero13 .sm{color:#fff!important;opacity:1}
.hero13 .hk{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.hero13 h1{color:#fff;font-size:44px;line-height:1;margin:6px 0 2px}
.hero13 h1 .mute2{font-size:22px;font-weight:600;color:#fff!important}
.hgrid{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin-top:14px;position:relative;z-index:1}
.r13{width:150px;height:150px;display:block}
.r13 circle{fill:none;stroke-linecap:round}
.r13 .tr{stroke:#ffffff26}
.r13 .fg{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.9,.2,1)}
.leg{display:flex;flex-direction:column;gap:8px}
.leg button{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:12px;background:#0b1b4d2e;transition:background .2s,transform .15s}
.leg button:active{transform:scale(.96)}
.leg i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 3px #ffffff30}
.leg b{font:800 17px 'Plus Jakarta Sans',Inter,system-ui;letter-spacing:-.02em;display:block;line-height:1.1}
.leg em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;display:block}
.leg small{font-size:11.5px;color:#fff;font-weight:600;display:block}
.wins{display:flex;align-items:center;gap:10px;margin-top:14px;position:relative;z-index:1;font-weight:700;font-size:14px}
.wins .dots{display:flex;gap:5px}.wins .dots span{width:22px;height:7px;border-radius:9px;background:#ffffff40}.wins .dots span.on{background:#fff;box-shadow:0 0 10px #fff}
.hero13.perfect{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 22px 50px -14px #7c3aedcc,0 0 0 4px #ffffff55}}

/* category tiles */
.tile{position:relative;overflow:hidden;padding:18px}
.tile[data-c]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--a2),var(--a1))}
.tile[data-c] .ic{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--a2),var(--a1))!important;color:#fff;box-shadow:0 8px 16px -6px var(--a1)}
.tile[data-c] .tv{font-size:30px;font-weight:800}
.tile .tt{font-weight:800;font-size:17px;font-family:'Plus Jakarta Sans',Inter,system-ui}
.tile.goal .ic{animation:pop .6s cubic-bezier(.3,1.8,.5,1)}
.tile.goal::after{content:'Goal hit';position:absolute;top:12px;right:14px;font:800 10px Inter,system-ui;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--a2),var(--a1));padding:3px 8px;border-radius:99px}
.tile.goal .tv{margin-top:14px}
[data-c=move]{--a1:#c2410c;--a2:#ff9f1c}[data-c=fuel]{--a1:#15803d;--a2:#65c728}[data-c=water]{--a1:#0369a1;--a2:#38bdf8}[data-c=sleep]{--a1:#6d28d9;--a2:#c084fc}[data-c=core]{--a1:#be185d;--a2:#fb7185}[data-c=mood]{--a1:#b45309;--a2:#fbbf24}[data-c=ready]{--a1:#0e7490;--a2:#22d3ee}
.tile[data-c] .btn.pri{background:linear-gradient(135deg,var(--a1),color-mix(in srgb,var(--a1) 70%,#000));box-shadow:0 6px 14px -6px var(--a1)}
.weekline{background:#fff;border:1px solid #0f172a0d;box-shadow:var(--shadow);font-weight:500}
.weekline.sup{background:linear-gradient(135deg,#f3efff,#fdf2f8)}

/* nav */
nav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:26px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid #0f172a12;box-shadow:0 14px 34px -10px #1e3a8a40}
nav button{position:relative;color:#526075;font:700 10.5px Inter,system-ui;min-height:56px;border-radius:20px;gap:3px;transition:color .2s}
nav button svg{transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
nav button.act{color:#1e40af;background:linear-gradient(180deg,#eef2ff,#e0e7ff)}
nav button.act svg{transform:translateY(-1px) scale(1.08);stroke-width:2.2}
nav button.act::after{content:'';position:absolute;bottom:4px;width:16px;height:3px;border-radius:9px;background:var(--brand)}
nav button:active svg{transform:scale(.85)}
body{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.disc{padding-bottom:10px}

/* empty states */
.empty13{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#f5f8ff,#f8f5ff);border-radius:18px;padding:12px 14px;margin:8px 0}
.empty13 svg{flex:none}
.empty13 p{margin:0}

/* lock card */
.lock{background:linear-gradient(160deg,#fff,#f5f3ff)!important}
.lock .pad{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:24px;background:var(--brand);color:#fff;font-size:34px;box-shadow:0 14px 28px -10px #4f46e5}

/* motion */
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.anim13 #app>*{animation:up .45s cubic-bezier(.2,.9,.2,1) both}
.anim13 #app>*:nth-child(2){animation-delay:.04s}.anim13 #app>*:nth-child(3){animation-delay:.08s}.anim13 #app>*:nth-child(4){animation-delay:.12s}.anim13 #app>*:nth-child(5){animation-delay:.16s}.anim13 #app>*:nth-child(n+6){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.r13wrap{position:relative;width:150px;height:150px}
.r13c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.r13c b{font:800 14px 'Plus Jakarta Sans',Inter,system-ui;line-height:1;display:block}.r13c small{font-size:10px;font-weight:700;letter-spacing:.1em;color:#e0e7ff;text-transform:uppercase}
.r13 .tr{stroke:#0b1b4d40}
/* Fuel hero */
.card.fuel13{background:linear-gradient(135deg,#047857 0%,#0f766e 55%,#0e7490 100%);color:#fff;border:none;box-shadow:0 20px 40px -18px #047857aa;position:relative;overflow:hidden}
.card.fuel13::before{content:'';position:absolute;width:220px;height:220px;right:-80px;top:-100px;border-radius:50%;background:radial-gradient(circle,#ffffff30,transparent 65%)}
.card.fuel13 h3,.card.fuel13 b,.card.fuel13 p,.card.fuel13 .mute,.card.fuel13 .sm{color:#fff!important}
.card.fuel13 .tag{background:#00000026;color:#fff}
.card.fuel13 .ring small{color:#ecfdf5}
.card.fuel13 .ring b{font:800 18px 'Plus Jakarta Sans',Inter,system-ui}
.card.fuel13 .ring circle:first-child{stroke:#ffffff2e}
.card.fuel13 .ring:nth-child(1) circle+circle{stroke:#fff}.card.fuel13 .ring:nth-child(2) circle+circle{stroke:#fde68a}.card.fuel13 .ring:nth-child(3) circle+circle{stroke:#a7f3d0}.card.fuel13 .ring:nth-child(4) circle+circle{stroke:#bae6fd}
/* Progress level hero */
.card.lvl13{background:linear-gradient(135deg,#6d28d9 0%,#9333ea 50%,#c026d3 100%);color:#fff;border:none;box-shadow:0 20px 40px -18px #7e22ceaa;position:relative;overflow:hidden}
.card.lvl13::after{content:'';position:absolute;width:200px;height:200px;right:-70px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,#ffffff35,transparent 65%)}
.card.lvl13 .mute,.card.lvl13 h3,.card.lvl13 .num,.card.lvl13 p,.card.lvl13 small{color:#fff!important}
.card.lvl13 h3{font-size:26px}.card.lvl13 .num{font-size:36px!important}
.card.lvl13 .bar{background:#ffffff30;height:11px}.card.lvl13 .bar i{background:linear-gradient(90deg,#fde68a,#fff)!important;box-shadow:0 0 12px #fff8}
.badge.got{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-color:#6366f122}
.badge.got span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#2563eb);color:#fff!important}
.phase.cur{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--brand) border-box}
.yn button.act{background:#dbeafe;color:#1e3a8a;border-color:#2563eb}