:root{
  --bg:#e9e6fb; --bg2:#f6e9f5;
  --card:#f1eefc; --ink:#3b3563; --ink2:#7a74a6; --line:rgba(120,110,190,.18);
  --hi:rgba(255,255,255,.95); --sh:rgba(139,126,200,.38); --shin:rgba(139,126,200,.20);
  --purple:#a99bff; --purple-d:#7d6bf0; --pink:#ff9fc4; --peach:#ffbf94; --mint:#8fe3c3; --sky:#8cd0ff; --yellow:#ffe08a;
  --r:30px; --field:#e6e2f8;
}
:root[data-theme="dark"]{
  --bg:#1d1a33; --bg2:#271d3a;
  --card:#2b2748; --ink:#eeeaff; --ink2:#a39fc9; --line:rgba(190,180,255,.14);
  --hi:rgba(255,255,255,.09); --sh:rgba(8,6,24,.65); --shin:rgba(8,6,24,.45);
  --field:#231f3d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--ink);font-family:'Nunito',system-ui,sans-serif;font-weight:600;
  background:radial-gradient(900px 600px at 10% -10%,#ffd9ec55,transparent 60%),radial-gradient(800px 600px at 100% 10%,#cdeaff55,transparent 60%),linear-gradient(160deg,var(--bg),var(--bg2));
  background-attachment:fixed;transition:background .5s,color .4s;overflow-x:hidden;
}
h1,h2,h3,.fred{font-family:'Fredoka',sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}

/* floating blobs */
.blob{position:fixed;border-radius:50%;filter:blur(2px);opacity:.55;z-index:0;pointer-events:none;animation:float 14s ease-in-out infinite}
.blob.b1{width:220px;height:220px;left:-60px;top:30%;background:radial-gradient(circle at 30% 30%,#fff9,var(--pink));animation-delay:-3s}
.blob.b2{width:160px;height:160px;right:-40px;top:12%;background:radial-gradient(circle at 30% 30%,#fff9,var(--sky))}
.blob.b3{width:260px;height:260px;right:8%;bottom:-120px;background:radial-gradient(circle at 30% 30%,#fff9,var(--purple));animation-delay:-8s}
@keyframes float{50%{transform:translate(18px,-26px) scale(1.06)}}

.wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:28px 22px 60px}

/* CLAY */
.clay{
  background:var(--card);border-radius:var(--r);
  box-shadow:14px 14px 28px var(--sh),-10px -10px 24px var(--hi),inset 8px 8px 14px var(--hi),inset -8px -8px 14px var(--shin);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .4s;
}
.card{padding:22px 22px 24px;animation:rise .7s cubic-bezier(.22,1.2,.36,1) both;animation-delay:calc(var(--i,0)*70ms)}
.card:hover{transform:translateY(-4px)}
@keyframes rise{from{opacity:0;transform:translateY(34px) scale(.94)}to{opacity:1;transform:none}}
.card h2{margin:0 0 14px;font-size:1.2rem;font-weight:600;display:flex;align-items:center;gap:10px;letter-spacing:.2px}
.card h2 .ico{width:36px;height:36px;border-radius:13px;display:grid;place-items:center;font-size:1.05rem;
  box-shadow:4px 4px 8px var(--sh),-3px -3px 7px var(--hi),inset 3px 3px 5px #fff8,inset -3px -3px 5px #0001}
.card h2 .sp{flex:1}
.sub{color:var(--ink2);font-size:.85rem;font-weight:700}

.btn{
  padding:10px 18px;border-radius:18px;font-weight:800;font-size:.9rem;background:var(--card);
  box-shadow:6px 6px 12px var(--sh),-5px -5px 11px var(--hi),inset 3px 3px 6px var(--hi),inset -3px -3px 6px var(--shin);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap
}
.btn:hover{transform:translateY(-2px) scale(1.04)}
.btn:active{transform:scale(.93);box-shadow:2px 2px 5px var(--sh),-2px -2px 5px var(--hi),inset 4px 4px 8px var(--shin),inset -3px -3px 6px var(--hi)}
.btn.primary{background:linear-gradient(145deg,#b9aeff,var(--purple-d));color:#fff;text-shadow:0 1px 2px #0003;
  box-shadow:6px 6px 14px rgba(125,107,240,.45),-4px -4px 10px var(--hi),inset 3px 3px 6px #fff5,inset -4px -4px 8px #4a38b855}
.btn.sm{padding:6px 12px;font-size:.8rem;border-radius:14px}
.icon-btn{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;font-size:1.05rem;padding:0}

input[type=text],input[type=time],input[type=date],textarea,select{
  width:100%;border:0;outline:0;padding:11px 15px;border-radius:17px;background:var(--field);
  box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi);transition:box-shadow .25s
}
input:focus,textarea:focus,select:focus{box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi),0 0 0 3px #a99bff77}
textarea{resize:vertical;min-height:90px;line-height:1.5}
::placeholder{color:var(--ink2);opacity:.65}

/* header */
header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 24px;margin-bottom:26px;animation:rise .7s both}
.avatar{width:74px;height:74px;border-radius:26px;background:linear-gradient(145deg,#d9d2ff,#ffd6ea);display:grid;place-items:center;overflow:hidden;
  box-shadow:6px 6px 12px var(--sh),-4px -4px 10px var(--hi),inset 4px 4px 8px #fff9,inset -5px -5px 9px #8a7ad555;animation:bob 4s ease-in-out infinite}
.avatar img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
@keyframes bob{50%{transform:translateY(-5px) rotate(-3deg)}}
.hello{flex:1;min-width:230px}
.hello h1{margin:0;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700}
.hello h1 span.nm{cursor:pointer;background:linear-gradient(90deg,var(--purple-d),#ff7fb2);-webkit-background-clip:text;background-clip:text;color:transparent}
.hello p{margin:4px 0 0;color:var(--ink2)}
.clock{text-align:right}
.clock .t{font-family:'Fredoka';font-size:2.2rem;font-weight:600;line-height:1}
.clock .d{color:var(--ink2);font-size:.9rem}
.hbtns{display:flex;gap:10px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-bottom:26px}
.kpi{padding:20px;display:flex;align-items:center;gap:16px}
.kpi .badge{width:58px;height:58px;border-radius:22px;display:grid;place-items:center;font-size:1.6rem;flex:none;
  box-shadow:5px 5px 10px var(--sh),-4px -4px 8px var(--hi),inset 4px 4px 7px #fff9,inset -5px -5px 8px #0002;animation:bob 5s ease-in-out infinite}
.kpi .n{font-family:'Fredoka';font-size:2rem;font-weight:600;line-height:1}
.kpi .l{color:var(--ink2);font-size:.85rem;margin-top:3px}

/* columns */
.cols{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:26px;align-items:start}
.col{display:flex;flex-direction:column;gap:26px;min-width:0}
@media(max-width:1150px){.cols{grid-template-columns:1fr 1fr}.col:first-child{grid-column:1/-1}}
@media(max-width:760px){.cols{grid-template-columns:1fr}.clock{text-align:left}.wrap{padding:16px 14px 50px}}

/* progress */
.bar{height:20px;border-radius:12px;background:var(--field);box-shadow:inset 4px 4px 8px var(--shin),inset -4px -4px 8px var(--hi);overflow:hidden;padding:3px}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--mint),var(--sky));
  box-shadow:inset 2px 2px 4px #fff9,inset -2px -2px 4px #0002;transition:width .9s cubic-bezier(.34,1.3,.5,1)}
.barrow{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.88rem}

/* checkbox */
.chk{width:30px;height:30px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--field);
  box-shadow:inset 4px 4px 7px var(--shin),inset -4px -4px 7px var(--hi);transition:all .3s cubic-bezier(.34,1.8,.5,1);color:transparent;font-size:1rem}
.chk.on{background:linear-gradient(145deg,#a8f0d3,var(--mint));color:#fff;transform:scale(1.1) rotate(-6deg);
  box-shadow:4px 4px 9px rgba(60,170,130,.45),-3px -3px 7px var(--hi),inset 3px 3px 5px #fff8,inset -3px -3px 5px #0002}
.chk.on::after{content:'✓';font-weight:900;text-shadow:0 1px 2px #0003}
.chk:hover{transform:scale(1.12)}

.prio{display:flex;align-items:center;gap:12px;margin-bottom:12px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--k,0)*80ms)}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.prio .num{font-family:'Fredoka';width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.9rem;flex:none;color:#fff;
  box-shadow:3px 3px 6px var(--sh),inset 2px 2px 4px #fff7,inset -2px -2px 4px #0003}
.prio input[type=text]{transition:all .3s}
.prio.done input[type=text]{text-decoration:line-through;opacity:.5}

/* tasks */
.addrow{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.addrow input[type=text]{flex:1;min-width:120px}
.addrow input[type=date]{width:150px}
.chips{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.chip{padding:5px 14px;border-radius:14px;font-size:.8rem;font-weight:800;color:var(--ink2);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.chip.on{background:var(--purple);color:#fff;box-shadow:3px 3px 7px var(--sh),inset 2px 2px 4px #fff6,inset -2px -2px 4px #0003;transform:scale(1.06)}
.list{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto;padding:6px 8px 8px 4px;margin:-6px -8px -8px -4px}
.item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;background:var(--card);
  box-shadow:5px 5px 10px var(--sh),-4px -4px 9px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 5px var(--shin);animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;transition:transform .25s}
.item:hover{transform:translateX(4px)}
.item .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.item.done .tx{text-decoration:line-through;opacity:.5}
.tag{font-size:.72rem;padding:3px 10px;border-radius:10px;font-weight:800;background:var(--field);box-shadow:inset 2px 2px 4px var(--shin),inset -2px -2px 4px var(--hi);color:var(--ink2)}
.tag.warn{color:#d4572f}.tag.soon{color:#b88400}
.x{opacity:.45;font-size:1rem;padding:4px 8px;border-radius:10px;transition:all .2s}
.x:hover{opacity:1;transform:scale(1.25) rotate(8deg)}
.empty{text-align:center;color:var(--ink2);padding:18px 6px;font-size:.9rem}

/* timeline */
.tl{position:relative;margin-top:6px;max-height:640px;overflow:auto;padding:4px 10px 4px 0}
.hour{height:60px;display:flex;gap:12px;position:relative}
.hour .hl{width:54px;text-align:right;font-size:.74rem;color:var(--ink2);transform:translateY(-8px);flex:none;font-weight:800}
.hour .ln{flex:1;border-top:2px dashed var(--line)}
.tlbody{position:absolute;left:66px;right:0;top:0}
.blk{position:absolute;left:0;right:0;border-radius:20px;padding:8px 14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:center;
  box-shadow:5px 5px 11px var(--sh),-3px -3px 8px var(--hi),inset 4px 4px 7px #fff8,inset -4px -4px 8px #0002;color:#2c2750;
  animation:slide .6s cubic-bezier(.22,1.3,.4,1) both;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .3s}
@keyframes slide{from{opacity:0;transform:translateX(-30px) scaleY(.7)}to{opacity:1;transform:none}}
.blk:hover{transform:scale(1.015);z-index:3}
.blk b{font-family:'Fredoka';font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk small{font-weight:800;opacity:.65;font-size:.72rem}
.blk.done{filter:saturate(.3) brightness(1.03);opacity:.7}.blk.done b{text-decoration:line-through}
.blk .x{position:absolute;right:8px;top:6px;color:#2c2750}
.blk.deep{background:linear-gradient(145deg,#cfc6ff,var(--purple))}
.blk.meet{background:linear-gradient(145deg,#ffd9bd,var(--peach))}
.blk.brk{background:linear-gradient(145deg,#c4f5e1,var(--mint))}
.blk.pers{background:linear-gradient(145deg,#ffd0e3,var(--pink))}
.blk.oth{background:linear-gradient(145deg,#c9e8ff,var(--sky))}
.slot{position:absolute;left:0;right:0;border-radius:20px;border:2.5px dashed var(--line);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink2);
  font-weight:800;font-size:.8rem;cursor:pointer;transition:all .3s;animation:pop .6s both}
.slot:hover{background:#a99bff22;border-color:var(--purple);color:var(--purple-d);transform:scale(1.02)}
.now{position:absolute;left:-12px;right:0;height:0;border-top:3px solid #ff6b8b;z-index:5;transition:top .6s}
.now::before{content:'';position:absolute;left:-2px;top:-8px;width:13px;height:13px;border-radius:50%;background:#ff6b8b;box-shadow:0 0 0 5px #ff6b8b33;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px #ff6b8b00}}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px;font-size:.75rem}
.legend span::before{content:'';display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px;background:var(--c)}

/* habits */
.habit{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 12px;border-radius:22px;background:var(--card);
  box-shadow:5px 5px 10px var(--sh),-4px -4px 9px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 5px var(--shin);animation:pop .5s both;animation-delay:calc(var(--k,0)*60ms)}
.habit .em{font-size:1.5rem;width:44px;height:44px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--field);
  box-shadow:inset 3px 3px 6px var(--shin),inset -3px -3px 6px var(--hi);transition:all .3s cubic-bezier(.34,1.8,.5,1)}
.habit.on .em{background:linear-gradient(145deg,#ffe9a8,var(--yellow));transform:scale(1.12) rotate(-8deg);box-shadow:4px 4px 8px var(--sh),inset 3px 3px 5px #fff9,inset -3px -3px 5px #0002}
.habit .mid{flex:1;min-width:0}
.habit .nm{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:5px;margin-top:5px}
.dot{width:17px;height:17px;border-radius:50%;background:var(--field);box-shadow:inset 2px 2px 4px var(--shin),inset -2px -2px 4px var(--hi);transition:all .3s cubic-bezier(.34,1.8,.5,1);position:relative}
.dot.on{background:linear-gradient(145deg,#ffb78a,#ff8fb0);box-shadow:2px 2px 4px var(--sh),inset 2px 2px 3px #fff9,inset -2px -2px 3px #0002;transform:scale(1.1)}
.dot.today{outline:2px solid var(--purple);outline-offset:2px}
.dot:hover{transform:scale(1.35)}
.streak{font-family:'Fredoka';font-weight:600;font-size:.9rem;text-align:center;min-width:46px;padding:5px 8px;border-radius:14px;background:var(--field);box-shadow:inset 2px 2px 4px var(--shin),inset -2px -2px 4px var(--hi)}
.streak.hot{color:#ff6a3d}

/* energy */
.scale{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin:4px 0 14px}
.sc{aspect-ratio:1;border-radius:14px;font-family:'Fredoka';font-weight:600;font-size:.95rem;background:var(--card);
  box-shadow:4px 4px 8px var(--sh),-3px -3px 7px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 4px var(--shin);transition:all .25s cubic-bezier(.34,1.8,.5,1)}
.sc:hover{transform:translateY(-4px) scale(1.12)}
.sc.on{color:#fff;transform:translateY(-3px) scale(1.15);text-shadow:0 1px 2px #0004;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:4px 4px 9px var(--sh),inset 3px 3px 5px #fff7,inset -3px -3px 5px #0003}
.charts{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:6px;padding:10px 12px 6px;border-radius:22px;background:var(--field);box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi)}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:.68rem;color:var(--ink2);font-weight:800}
.cbar i{width:100%;max-width:30px;border-radius:10px 10px 7px 7px;background:linear-gradient(180deg,var(--c1,var(--purple)),var(--c2,var(--pink)));min-height:6px;
  box-shadow:inset 2px 2px 4px #fff8,inset -2px -2px 4px #0002;height:0;transition:height .9s cubic-bezier(.34,1.4,.5,1)}
.cbar.today span{color:var(--purple-d)}
.log{font-size:.85rem}
.log .item{padding:8px 12px}
.lv{font-family:'Fredoka';width:30px;height:30px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;font-size:.85rem;background:linear-gradient(145deg,var(--c1),var(--c2))}

/* focus timer */
.timer{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.ring{position:relative;width:150px;height:150px;border-radius:50%;background:var(--field);box-shadow:inset 8px 8px 14px var(--shin),inset -8px -8px 14px var(--hi)}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring .pg{stroke:url(#g);transition:stroke-dashoffset 1s linear;stroke-dasharray:339.3}
.ring .tt{position:absolute;inset:0;display:grid;place-items:center;font-family:'Fredoka';font-size:1.9rem;font-weight:600}
.ring.run{animation:breath 3s ease-in-out infinite}
@keyframes breath{50%{transform:scale(1.04)}}
.tctl{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.presets{display:flex;gap:6px}

/* water / mood */
.glasses{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.gl{aspect-ratio:.8;border-radius:10px 10px 16px 16px;background:var(--field);box-shadow:inset 3px 3px 6px var(--shin),inset -3px -3px 6px var(--hi);position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.34,1.8,.5,1)}
.gl:hover{transform:translateY(-4px) scale(1.1)}
.gl::after{content:'';position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#b6e4ff,var(--sky));transition:height .6s cubic-bezier(.34,1.4,.5,1);box-shadow:inset 2px 2px 4px #fff9}
.gl.on::after{height:88%}
.moods{display:flex;justify-content:space-between;gap:6px}
.mood{font-size:1.7rem;width:50px;height:50px;border-radius:18px;background:var(--card);box-shadow:4px 4px 8px var(--sh),-3px -3px 7px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 4px var(--shin);transition:all .3s cubic-bezier(.34,1.8,.5,1);filter:grayscale(.6)}
.mood:hover{transform:translateY(-5px) scale(1.15)}
.mood.on{filter:none;transform:translateY(-4px) scale(1.25) rotate(-6deg);background:linear-gradient(145deg,#fff3c4,var(--yellow))}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.quote{font-family:'Fredoka';font-size:1.05rem;line-height:1.5;font-weight:500}
.quote small{display:block;margin-top:8px;color:var(--ink2);font-family:'Nunito';font-weight:800}

/* modal */
dialog{border:0;background:transparent;padding:0;max-width:94vw;overflow:visible}
dialog::backdrop{background:rgba(40,30,80,.4);backdrop-filter:blur(6px);animation:fade .3s}
dialog[open] .clay{animation:modal .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes fade{from{opacity:0}}
@keyframes modal{from{opacity:0;transform:scale(.7) translateY(40px)}}
.form{width:380px;max-width:92vw;padding:26px;display:flex;flex-direction:column;gap:12px}
.form label{font-size:.8rem;color:var(--ink2);font-weight:800;display:block;margin:0 0 4px 4px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);padding:12px 22px;border-radius:22px;z-index:99;transition:transform .5s cubic-bezier(.34,1.56,.64,1);font-weight:800}
.toast.show{transform:translate(-50%,0)}
.confetti{position:fixed;width:16px;height:16px;border-radius:50%;z-index:98;pointer-events:none;box-shadow:inset 3px 3px 4px #fff9,inset -3px -3px 4px #0003;animation:conf 1.6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) scale(.4) rotate(540deg);opacity:0}}
.ripple{position:fixed;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;z-index:97;border:3px solid #a99bffaa;animation:rip .55s ease-out forwards}
@keyframes rip{to{transform:scale(4.5);opacity:0}}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--purple);border-radius:10px;border:3px solid var(--card)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== v2: icons, logo, auth, account ===== */
.i{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none;overflow:visible}
.card h2 .ico{background:var(--card);font-size:1.4rem;box-shadow:4px 4px 8px var(--sh),-3px -3px 7px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 4px var(--shin)}
.kpi .badge{background:var(--card);font-size:2rem;box-shadow:5px 5px 10px var(--sh),-4px -4px 8px var(--hi),inset 3px 3px 6px var(--hi),inset -3px -3px 6px var(--shin)}
.btn .i{font-size:1.15em}
.icon-btn{font-size:1.3rem}
.chk.on::after{content:'';width:62%;height:62%;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");filter:drop-shadow(0 1px 1px #0003)}
.x{font-size:.95rem;display:inline-grid;place-items:center}
.habit .em{font-size:1.7rem}
.mood{font-size:2rem;display:grid;place-items:center;padding:0}
.mood .i{transition:transform .3s cubic-bezier(.34,1.8,.5,1)}
.mood.on{background:var(--card);box-shadow:inset 4px 4px 8px var(--shin),inset -4px -4px 8px var(--hi),0 0 0 3px #ffc53288;filter:none}
.mood.on .i{transform:scale(1.2) rotate(-6deg)}
.streak{display:flex;align-items:center;gap:4px;justify-content:center}
.slot .i{font-size:1.1em;color:inherit}
.empty .i{font-size:1.6rem;display:block;margin:0 auto 6px}
.item .pinic{font-size:1.3rem}
.toast{display:flex;align-items:center;gap:10px;white-space:nowrap;max-width:92vw}
.toast .i{font-size:1.3rem}
.hello h1 .wave{display:inline-block;transform-origin:70% 70%;animation:wave 2.4s ease-in-out infinite}
.picker{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.pick{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--card);box-shadow:4px 4px 8px var(--sh),-3px -3px 7px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 4px var(--shin);transition:all .25s cubic-bezier(.34,1.8,.5,1)}
.pick:hover{transform:scale(1.12)}
.pick.on{box-shadow:inset 4px 4px 8px var(--shin),inset -4px -4px 8px var(--hi),0 0 0 3px var(--purple);transform:scale(1.1)}
.savestate{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink2);font-weight:800;padding:4px 12px;border-radius:12px;background:var(--field);box-shadow:inset 2px 2px 4px var(--shin),inset -2px -2px 4px var(--hi);transition:color .3s}
.savestate::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px #8fe3c340;transition:background .3s}
.savestate.saving::before{background:var(--yellow);animation:pulse2 1s infinite}
.savestate.error{color:#d4572f}.savestate.error::before{background:#ff6b8b}
@keyframes pulse2{50%{transform:scale(1.5)}}
.who{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px}
.who .i{font-size:1.6rem}
.who span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.who span{display:none}.who{padding:6px 10px}}

/* logo — "clayday" played with type only */
.logo{font-family:'Baloo 2','Fredoka',sans-serif;display:inline-flex;align-items:flex-end;line-height:1;font-size:var(--ls,2.2rem);user-select:none;letter-spacing:-.03em}
.logo b{display:inline-block;font-weight:800;font-size:calc(1em*var(--sc,1));padding:0 .01em .06em;
  background:linear-gradient(180deg,var(--logo1) 8%,var(--logo2) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(var(--y,0)) rotate(var(--r,0));
  filter:drop-shadow(0 .055em 0 var(--logo3)) drop-shadow(0 .11em 0 var(--logo3)) drop-shadow(0 .2em .12em rgba(90,70,180,.28));
  transition:transform .4s cubic-bezier(.34,1.8,.5,1)}
.logo:hover b{animation:hop .7s cubic-bezier(.34,1.6,.5,1) both;animation-delay:calc(var(--n)*55ms)}
@keyframes hop{40%{transform:translateY(-.22em) rotate(calc(var(--r)*-1.6)) scale(1.1)}}
.logo.big{--ls:4.2rem}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}

/* splash */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:linear-gradient(160deg,var(--bg),var(--bg2));transition:opacity .6s,visibility .6s}
.splash.hide{opacity:0;visibility:hidden}
.splash .logo{--ls:4rem;animation:bob 1.6s ease-in-out infinite}

/* auth page */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;position:relative;z-index:1}
.auth{width:430px;max-width:100%;padding:34px 32px 30px;animation:rise .8s cubic-bezier(.22,1.2,.36,1) both}
.auth .top{text-align:center;margin-bottom:22px}
.auth .avatar{margin:0 auto 12px}
.auth .tag2{color:var(--ink2);margin:8px 0 0;font-weight:700}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:6px;border-radius:22px;background:var(--field);box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi);margin-bottom:20px;position:relative}
.seg::before{content:'';position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);border-radius:17px;background:var(--card);
  box-shadow:4px 4px 9px var(--sh),-3px -3px 7px var(--hi),inset 2px 2px 4px var(--hi),inset -2px -2px 4px var(--shin);transition:transform .5s cubic-bezier(.34,1.5,.5,1)}
.seg[data-m=signup]::before{transform:translateX(100%)}
.seg button{position:relative;padding:11px;font-weight:800;color:var(--ink2);transition:color .3s;font-family:'Fredoka';font-size:1rem}
.seg button.on{color:var(--purple-d)}
.field{margin-bottom:14px;position:relative}
.field label{display:block;font-size:.8rem;color:var(--ink2);font-weight:800;margin:0 0 5px 6px}
.field .in{position:relative}
.field .in>.i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.25rem;pointer-events:none}
.field input{padding-left:46px;height:48px}
.field .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;font-size:1.2rem;border-radius:12px;transition:transform .2s}
.field .eye:hover{transform:translateY(-50%) scale(1.15)}
.name-f{overflow:hidden;max-height:0;opacity:0;margin:0;transition:max-height .5s cubic-bezier(.34,1.2,.5,1),opacity .4s,margin .4s}
.auth[data-m=signup] .name-f{max-height:90px;opacity:1;margin-bottom:14px}
.meter{display:flex;gap:6px;margin:8px 4px 0}
.meter i{flex:1;height:8px;border-radius:6px;background:var(--field);box-shadow:inset 2px 2px 3px var(--shin),inset -2px -2px 3px var(--hi);transition:background .4s}
.meter-l{font-size:.75rem;color:var(--ink2);margin:4px 6px 0;min-height:1em;font-weight:800}
.pw-f{margin-bottom:6px}
.auth .only-signup{display:none}.auth[data-m=signup] .only-signup{display:block}
.auth[data-m=signup] .only-login{display:none}
.err{display:none;margin:4px 0 14px;padding:11px 16px;border-radius:18px;background:#ffe3ea;color:#c4365a;font-weight:800;font-size:.88rem;box-shadow:inset 3px 3px 6px #ff6f9f33,inset -3px -3px 6px #fff}
:root[data-theme=dark] .err{background:#4a2438;color:#ffb2c8;box-shadow:inset 3px 3px 6px #0004,inset -2px -2px 5px #fff1}
.err.show{display:block;animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.go{width:100%;justify-content:center;padding:14px;font-size:1.05rem;font-family:'Fredoka';margin-top:6px}
.go.busy{pointer-events:none;filter:saturate(.7)}
.go.busy::after{content:'';width:16px;height:16px;border-radius:50%;border:3px solid #fff8;border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth .foot{text-align:center;margin-top:18px;color:var(--ink2);font-size:.85rem}
.auth .foot a,.linkbtn{color:var(--purple-d);font-weight:800;cursor:pointer;text-decoration:none}
.theme-fab{position:fixed;top:18px;right:18px;z-index:5}

/* account dialog */
.acct{width:440px}
.acct hr{border:0;border-top:2px dashed var(--line);margin:6px 0;width:100%}
.acct .me{display:flex;align-items:center;gap:14px}
.acct .me .avatar{width:64px;height:64px;border-radius:22px;animation:none}
.acct .me b{font-family:'Fredoka';font-size:1.2rem;display:block}
.acct h3{margin:6px 0 0;font-size:1rem;display:flex;align-items:center;gap:8px}
.acct h3 .i{font-size:1.3rem}
.btn.danger{color:#c4365a}
.msg{font-size:.85rem;font-weight:800;min-height:1.2em}
.msg.ok{color:#1f9a70}.msg.bad{color:#c4365a}
.field .in>[data-i]{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1.3rem;pointer-events:none;display:grid;z-index:1}
input[type=password]{width:100%;border:0;outline:0;padding:11px 15px;border-radius:17px;background:var(--field);box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi);transition:box-shadow .25s}
input[type=password]:focus{box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi),0 0 0 3px #a99bff77}
.field input[type=password]{padding-left:46px;padding-right:48px}
.card h2 .ico{font-size:1.75rem;width:42px;height:42px;border-radius:15px}
.habit .em{font-size:2rem;width:50px;height:50px}
.streak .i{font-size:1.25em}
.mood{font-size:2.2rem}
[hidden]{display:none!important}

.logo{--logo1:#b4a7ff;--logo2:#7d6bf0;--logo3:#5a49c7}
:root[data-theme=dark] .logo{--logo1:#d4ccff;--logo2:#9d8dff;--logo3:#6a58d6}

/* ===== v3: app shell — all sections one click away, nothing to scroll to ===== */
html,body{height:100%}
body{overflow:hidden}
.app{position:relative;z-index:1;height:100dvh;display:grid;grid-template-columns:218px minmax(0,1fr);gap:24px;padding:20px 26px 20px 20px;max-width:1700px;margin:0 auto}
.side{display:flex;flex-direction:column;padding:20px 14px 16px;gap:18px;min-height:0;animation:rise .7s both}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 0 6px}
.brand .avatar{width:64px;height:64px;border-radius:22px}
#nav{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto;padding:6px 8px 8px 4px;margin:-6px -8px -8px -4px}
.nav{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:20px;color:var(--ink2);text-decoration:none;font-family:'Fredoka';font-size:1.02rem;font-weight:500;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .3s,color .3s;position:relative}
.nav .i{font-size:1.65rem}
.nav b{font-weight:500}
.nav:hover{transform:translateX(4px);color:var(--ink)}
.nav.on{color:var(--purple-d);background:var(--card);
  box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi)}
.nav.on .i{animation:bob 3s ease-in-out infinite}
.sidefoot{display:flex;justify-content:center}
.sidefoot .who{width:100%;justify-content:center}

.main{display:flex;flex-direction:column;min-width:0;min-height:0;gap:20px}
.top{display:flex;align-items:center;gap:18px;flex:none;animation:rise .7s both}
.top .hello{flex:1;min-width:0}
.top .hello h1{margin:0;font-size:clamp(1.25rem,2vw,1.7rem)}
.top .hello p{margin:2px 0 0;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .clock{padding:10px 20px;border-radius:22px;text-align:right;background:var(--card);box-shadow:inset 5px 5px 10px var(--shin),inset -5px -5px 10px var(--hi)}
.top .clock .t{font-size:1.5rem}
.top .clock .d{font-size:.74rem;white-space:nowrap}
.hbtns{display:flex;gap:10px}

.views{flex:1;min-height:0;position:relative}
.view{display:none;position:absolute;inset:-8px -30px -34px -10px;padding:8px 30px 34px 10px;overflow-y:auto;overflow-x:hidden;gap:22px;scrollbar-gutter:stable}
.view.on{display:grid;animation:viewin .5s cubic-bezier(.22,1.2,.36,1) both}
@keyframes viewin{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.view.cols3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.view.cols2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.view>.card.full{grid-column:1/-1}
.view:not(#v-home)>.card{display:flex;flex-direction:column;min-height:0;animation:none}
.view:not(#v-home)>.card:hover{transform:none}
.view:not(#v-home) .list{flex:1;max-height:none;min-height:0}
.view .tl{flex:1;max-height:none;min-height:0}

/* home */
#v-home.on{grid-template-rows:auto minmax(0,1fr);align-content:stretch}
#v-home .kpis{margin:0;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:14px 18px;gap:14px}
.kpi .badge{width:52px;height:52px;border-radius:19px;font-size:1.75rem}
.kpi .n{font-size:1.8rem}
.kpi .l{font-size:.78rem;line-height:1.25}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:20px;min-height:0}
.tile{display:flex;flex-direction:column;min-height:0;padding:16px 18px 18px;border-radius:var(--r);color:inherit;text-decoration:none;cursor:pointer;
  animation:rise .7s cubic-bezier(.22,1.2,.36,1) both;animation-delay:calc(var(--i,0)*60ms);overflow:hidden}
.tile:hover{transform:translateY(-6px) scale(1.015)}
.tile:active{transform:scale(.97)}
.tile h2{margin:0 0 10px;font-size:1.02rem}
.tile h2 .ico{width:34px;height:34px;border-radius:12px;font-size:1.4rem}
.tb{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.tb .big{font-family:'Fredoka';font-size:1.25rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb .bignum{font-family:'Fredoka';font-size:2.6rem;font-weight:600;line-height:1}
.tb .sub{font-size:.8rem}
.tb .bar{height:14px;padding:2px;flex:none}
.mini{display:flex;align-items:center;gap:8px;font-size:.84rem;min-width:0}
.mini span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mini.done .t{text-decoration:line-through;opacity:.5}
.mini .chk{width:20px;height:20px;border-radius:8px;transform:none;cursor:inherit}
.mini .chk.on{transform:none}
.mini .chk.on::after{width:70%;height:70%}
.hicons{display:flex;flex-wrap:wrap;gap:8px}
.hic{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:var(--field);box-shadow:inset 3px 3px 6px var(--shin),inset -3px -3px 6px var(--hi);opacity:.55;filter:grayscale(.5);transition:all .3s}
.hic.on{opacity:1;filter:none;background:linear-gradient(145deg,#fff0b8,var(--yellow));box-shadow:3px 3px 7px var(--sh),inset 2px 2px 4px #fff9,inset -2px -2px 4px #0002}
.rowx{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tb.quote{font-size:.92rem;justify-content:center}
.mbars{display:flex;align-items:flex-end;gap:5px;height:48px}
.mbars i{flex:1;border-radius:6px;background:linear-gradient(180deg,var(--mint),var(--sky));min-height:4px;box-shadow:inset 1px 1px 2px #fff8}
.mbars i.today{box-shadow:0 0 0 2px var(--purple)}

/* per-view tweaks */
.habit-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;align-content:start;padding:6px 8px 8px 4px;margin:-6px -8px 0 -4px}
.habit-grid .habit{margin:0}
.habit-grid .empty{grid-column:1/-1}
#v-energy .card:first-child .charts{flex:1;min-height:120px;height:auto}
.charts.grow{flex:1;height:auto;min-height:200px;margin-top:10px}
#notes{flex:1;resize:none;min-height:0}
.view .scale{margin-bottom:18px}
#v-focus .timer{flex:1;flex-direction:column;justify-content:center;gap:18px}
#v-focus .ring{width:min(210px,100%);height:auto;aspect-ratio:1}
#v-focus .ring .tt{font-size:2.5rem}
#v-focus .tbtns{display:flex;gap:10px}
#v-focus .glasses{flex:1;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px;align-content:center;padding:6px}
#v-focus .gl{aspect-ratio:auto;max-height:130px}
#v-focus .moods{flex:1;flex-direction:column;align-items:center;justify-content:space-around}
#v-focus .mood{width:76px;height:64px;font-size:2.4rem}
#v-focus .card:last-child .moods{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px;align-content:center}
#v-focus .card:last-child .mood{width:84px;height:84px;font-size:3rem}
.legend{flex:none}

/* ---- laptops with short screens ---- */
@media(max-height:760px){
  .app{padding:14px 20px 14px 14px;gap:18px}.main{gap:14px}.side{padding:14px 12px}.brand .avatar{width:48px;height:48px;border-radius:17px}
  .nav{padding:8px 12px}.top .clock{padding:6px 14px}
  .kpi{padding:10px 14px}.kpi .badge{width:44px;height:44px;font-size:1.5rem}.kpi .n{font-size:1.5rem}
  .tile{padding:12px 14px}.tile h2{margin-bottom:6px}.tb .bignum{font-size:2.1rem}
  .card{padding:16px 18px 18px}
}
@media(max-width:1180px){
  .app{grid-template-columns:84px minmax(0,1fr)}
  .nav b,.sidefoot .who span:not(.i-wrap){display:none}.nav{justify-content:center;padding:12px 0}
  .brand .logo{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(150px,1fr)}
  #v-home{overflow-y:auto}
  #v-home .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .view.cols3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(380px,1fr)}
}
/* ---- phones: bottom tab bar ---- */
@media(max-width:760px){
  body{overflow:auto}
  .app{display:block;height:auto;padding:12px 12px 96px}
  .side{position:fixed;left:10px;right:10px;bottom:10px;z-index:20;flex-direction:row;padding:8px;border-radius:26px;gap:0}
  .brand,.sidefoot{display:none}
  #nav{flex-direction:row;overflow-x:auto;gap:4px;margin:0;padding:2px}
  .nav{flex:1 0 auto;min-width:50px;padding:10px 8px;border-radius:18px}
  .nav .i{font-size:1.5rem}
  .main{display:block}
  .top{flex-wrap:wrap;gap:10px;margin-bottom:14px}
  .top .clock{display:none}.hbtns{width:100%;justify-content:space-between}
  .views{position:static}
  .view{position:static;inset:auto;margin:0;padding:6px 6px 24px;overflow:visible}
  .view.on{display:grid;grid-template-columns:1fr!important;grid-template-rows:none!important;grid-auto-rows:auto!important}
  #v-home .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:1fr;grid-auto-rows:auto}
  .tile{min-height:140px}
  .view:not(#v-home)>.card{min-height:360px}
  .view .tl{max-height:60vh;flex:none}
  .habit-grid{grid-template-columns:1fr}
  .toast{bottom:92px}
}

.copy{flex:none;text-align:center;font-size:.78rem;font-weight:700;color:var(--ink2);letter-spacing:.2px;opacity:.85}
.main>.copy{margin-top:-6px}
.authwrap{flex-direction:column}
.authwrap .copy{margin-top:22px}
.authwrap{display:flex;align-items:center;justify-content:center}
@media(max-width:760px){.main>.copy{margin:6px 0 0}}
.auth .top{display:block;animation:none}

/* legibility: dialogs must use the theme's ink (UA default is black), brighter muted text in dark mode */
dialog{color:var(--ink)}
.btn{color:var(--ink)}
.btn.primary{color:#fff}
.btn.danger{color:#c4365a}
:root[data-theme="dark"]{--ink:#f4f1ff;--ink2:#bdb8e6}
:root[data-theme="dark"] .btn.danger{color:#ff9db8}
:root[data-theme="dark"] .msg.ok{color:#7ff0c4}
:root[data-theme="dark"] .msg.bad{color:#ff9db8}
:root[data-theme="dark"] .tag.warn{color:#ff9a78}
:root[data-theme="dark"] .tag.soon{color:#ffd262}
:root[data-theme="dark"] .seg button.on,:root[data-theme="dark"] .nav.on,:root[data-theme="dark"] .field a,:root[data-theme="dark"] .linkbtn{color:#cfc6ff}
:root[data-theme="dark"] ::placeholder{opacity:.8}
select,option{color:var(--ink)}
select option{background:var(--card)}

.pd{font-family:'Fredoka';font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-top:-4px}
.pd-h{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.pd-sub{font-family:'Fredoka';font-size:.95rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
@media(max-width:1180px){.pd{display:none}}

.blk.short{flex-direction:row;align-items:center;gap:10px;padding:3px 40px 3px 14px}
.blk.short b{flex:0 1 auto}.blk.short small{white-space:nowrap}
.blk.short{justify-content:flex-start}