:root{
  --bg:#fff7ee;--card:#ffffff;--text:#3b3355;--muted:#6f668a;--line:#efe4f3;--track:#f0e8f7;
  --lav:#d9c9ff;--lav-d:#7a5cd1;--pink:#ffc8dc;--pink-d:#d9467f;--on:#fff;--shadow:0 8px 24px rgba(122,92,209,.12);
  --head:'Fredoka','Nunito',ui-rounded,system-ui,sans-serif;--body:'Nunito',ui-rounded,system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#1c1830;--card:#2a2444;--text:#f3eeff;--muted:#b3a9d1;--line:#3a3358;--track:#3a3358;
  --lav:#4a3d7a;--lav-d:#b9a1ff;--pink:#5b3450;--pink-d:#ff8fb8;--on:#1c1830;--shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--body);transition:background .3s,color .3s}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink-d);outline-offset:2px}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.5rem;background:var(--card);border-right:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;font:600 1.5rem var(--head);padding:0 .5rem}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--pink);font-size:1.4rem}
nav{display:flex;flex-direction:column;gap:.35rem}
.nav{display:flex;align-items:center;gap:.75rem;border:0;background:none;padding:.7rem 1rem;border-radius:16px;cursor:pointer;font-weight:600;color:var(--muted);transition:background .2s,transform .15s}
.nav:hover{background:var(--track)}
.nav.active{background:var(--lav);color:var(--text)}
.theme{margin-top:auto;display:flex;gap:.6rem;justify-content:center}
main{padding:2rem clamp(1rem,4vw,3rem) 3rem;max-width:1000px;width:100%}
.view{display:none}
.view.active{display:block;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font:600 clamp(1.8rem,5vw,2.6rem)/1.15 var(--head);margin:0 0 .25rem}
h2{font:600 1.25rem var(--head);margin:0 0 .9rem}
.sub{margin:0 0 1.5rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-bottom:1.25rem}
.card{background:var(--card);border-radius:28px;padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.25rem;transition:transform .2s,background .3s}
.grid .card{margin:0}
.card:hover{transform:translateY(-2px)}
.btn{border:2px solid var(--line);background:var(--card);padding:.6rem 1.2rem;border-radius:999px;cursor:pointer;font-weight:800;transition:transform .12s,background .2s}
.btn:hover{background:var(--track)}
.btn:active{transform:scale(.95)}
.btn.primary{background:var(--lav-d);border-color:var(--lav-d);color:var(--on)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--pink-d)}
.btn.ghost{margin-top:1rem;background:none}
input{background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:.7rem 1rem;width:100%;transition:border-color .2s}
input:focus{outline:none;border-color:var(--lav-d)}
.timer{text-align:center;grid-column:1/-1}
.modes{display:inline-flex;gap:.25rem;background:var(--track);padding:.3rem;border-radius:999px}
.modes button{border:0;background:none;padding:.45rem 1rem;border-radius:999px;cursor:pointer;font-weight:800;color:var(--muted)}
.modes button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.ring{position:relative;width:min(260px,70vw);margin:1.25rem auto}
.ring svg{display:block;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.track{stroke:var(--track)}
.arc{stroke:var(--lav-d);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:0;transition:stroke-dashoffset .3s linear,stroke .3s}
.timer[data-mode="short"] .arc,.timer[data-mode="long"] .arc{stroke:var(--pink-d)}
.time{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(2.4rem,9vw,3.4rem) var(--head);font-variant-numeric:tabular-nums}
.ctrls{display:flex;justify-content:center;align-items:center;gap:.75rem}
.ctrls.wrap{flex-wrap:wrap;margin-top:1rem}
.count{color:var(--muted);font-weight:800;min-width:4.5rem;text-align:center}
.settings{margin-top:1.25rem;text-align:left}
.settings summary{cursor:pointer;font-weight:800;color:var(--muted);text-align:center}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin-top:1rem}
.setgrid label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;text-align:center;margin-bottom:1rem}
.mini b,.stat b{display:block;font:600 2rem/1.1 var(--head);color:var(--lav-d)}
.mini span,.stat span{font-size:.85rem;color:var(--muted)}
.goalTx{margin:0 0 .5rem;color:var(--muted);font-weight:600}
.bar{height:14px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--lav-d),var(--pink-d));transition:width .6s ease}
.up{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.up li{padding:.6rem .9rem;border-radius:14px;background:var(--bg)}
.empty{color:var(--muted);padding:.5rem 0}
.row{display:flex;gap:.75rem;margin-bottom:1.25rem}
.list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.list li{display:flex;align-items:center;gap:.8rem;background:var(--card);padding:.8rem 1rem;border-radius:20px;box-shadow:var(--shadow);animation:in .25s ease}
.list input[type=checkbox]{width:22px;height:22px;accent-color:var(--lav-d);flex:none;padding:0}
.list .txt{flex:1;overflow-wrap:anywhere}
.list li.done .txt{text-decoration:line-through;color:var(--muted)}
.list .edit{padding:.4rem .8rem}
.ib{border:0;background:var(--track);width:36px;height:36px;border-radius:50%;cursor:pointer;flex:none}
.ib:hover{background:var(--pink)}
.fcWrap{margin-bottom:1.5rem}
.fcard{position:relative;height:240px;max-width:520px;margin:0 auto;perspective:1000px;cursor:pointer;transform-style:preserve-3d;transition:transform .6s;border-radius:28px}
.fcard.flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;text-align:center;border-radius:28px;backface-visibility:hidden;font:600 1.4rem/1.35 var(--head);box-shadow:var(--shadow);overflow:auto}
.front{background:var(--lav)}
.back{background:var(--pink);transform:rotateY(180deg)}
.front,.back{color:var(--text)}
.form{display:grid;gap:.75rem;max-width:520px;margin-inline:auto}
.form h2{margin:0}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{text-align:center}
.bars{display:flex;align-items:flex-end;gap:.6rem;height:180px}
.col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);font-weight:600}
.col i{display:block;width:100%;max-width:44px;min-height:6px;border-radius:12px 12px 6px 6px;background:var(--lav);transition:height .6s}
.col.today i{background:var(--pink-d)}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--text);color:var(--bg);padding:.7rem 1.2rem;border-radius:999px;font-weight:800;opacity:0;pointer-events:none;transition:.3s;z-index:9}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){
  .app{display:block}
  .side{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px));border-right:0;border-top:2px solid var(--line);z-index:5}
  .brand,.theme span:last-child{display:none}
  nav{flex-direction:row;flex:1;justify-content:space-around}
  .nav{flex-direction:column;gap:0;padding:.4rem .6rem;font-size:.72rem}
  .theme{margin:0;padding:.5rem .8rem}
  main{padding-bottom:6rem}
  .row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}