*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#faf7f2;--card:#fff;--line:#ece4d8;--ink:#2e2a24;--mut:#9a9184;
  --acc:#6fb07e;--acc2:#8bc79a;
  --ruh:#6fa6ce;--aql:#8bc79a;--qalb:#db8aa8;--tana:#e0a458;--boshqa:#b3aa9c;--aralash:#a98fd6;
  --ok:#6fb07e;--no:#db6f6f;--r:22px;--r-sm:14px;
}
body{font-family:'Nunito','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--bg);color:var(--ink);font-size:15.5px;padding-bottom:80px;
-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:16px 14px 0}

/* ── Сарлавҳа ── */
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.head h1{font-family:'Quicksand',sans-serif;font-size:23px;font-weight:700;color:var(--ink)}
.head .date{font-size:12.5px;color:var(--mut);font-weight:600;margin-top:2px}
.sync{font-size:11px;color:var(--mut);display:flex;align-items:center;gap:5px;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.dot.off{background:var(--no)}
.dot.wait{background:var(--tana)}

/* ── Карточкалар ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
margin-bottom:12px;box-shadow:0 1px 2px rgba(46,42,36,.03)}
.card h2{font-family:'Quicksand',sans-serif;font-size:16px;font-weight:700;
margin-bottom:12px;display:flex;align-items:center;gap:7px;justify-content:space-between}
.card h2 .lft{display:flex;align-items:center;gap:7px}
.ic{display:inline-flex;flex:none}
.ic svg{display:block}

/* ── Progress ── */
.ringrow{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center}
.ring .pct{font-family:'Quicksand',sans-serif;font-size:23px;font-weight:700;line-height:1}
.ring .sub{font-size:10.5px;color:var(--mut);font-weight:600;margin-top:1px}
.spheres{flex:1;display:flex;flex-direction:column;gap:7px}
.sph{display:flex;align-items:center;gap:8px;font-size:12.5px}
.sph .nm{width:58px;color:var(--mut);font-weight:700;flex:none}
.sph .bar{flex:1;height:8px;background:var(--bg);border-radius:5px;overflow:hidden}
.sph .bar i{display:block;height:100%;border-radius:5px;transition:width .3s}
.sph .n{width:38px;text-align:right;font-weight:700;font-size:12px;flex:none}

/* ── Одатлар ── */
.hab{display:flex;align-items:center;gap:11px;padding:11px 2px;border-top:1px solid var(--line);
cursor:pointer;user-select:none}
.hab:first-of-type{border-top:none}
.chk{width:26px;height:26px;border-radius:9px;border:2px solid var(--line);flex:none;
display:flex;align-items:center;justify-content:center;color:#fff;
transition:background .15s,border-color .15s}
.hab.on .chk{background:var(--ok);border-color:var(--ok)}
.hab.on .nm{color:var(--mut);text-decoration:line-through;text-decoration-thickness:1.5px}
.hab .nm{flex:1;font-weight:700;font-size:14.5px;line-height:1.3}
.hab .tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;color:#fff;flex:none}
.hab .st{font-size:11px;color:var(--mut);font-weight:700;flex:none;min-width:34px;text-align:right;
display:flex;align-items:center;gap:2px;justify-content:flex-end}

/* ── Рўйхатлар ── */
.item{display:flex;align-items:flex-start;gap:10px;padding:12px 2px;border-top:1px solid var(--line)}
.item:first-of-type{border-top:none}
.item .txt{flex:1;font-size:14.5px;line-height:1.4;font-weight:600}
.item.done .txt{color:var(--mut);text-decoration:line-through}
.item .meta{font-size:11.5px;color:var(--mut);margin-top:3px;font-weight:600}
.x{border:none;background:none;color:var(--mut);cursor:pointer;padding:3px;flex:none;
display:flex;align-items:center}
.x:hover{color:var(--no)}

/* ── Формалар ── */
input,select,textarea,button{font-family:inherit;font-size:14.5px;color:var(--ink)}
.inp{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
background:var(--bg);outline:none;font-weight:600}
.inp:focus{border-color:var(--acc);background:var(--card)}
textarea.inp{resize:vertical;min-height:78px;line-height:1.5;font-weight:500}
.row{display:flex;gap:8px;align-items:center}
.btn{padding:11px 18px;border:none;border-radius:var(--r-sm);font-weight:700;cursor:pointer;
background:var(--acc);color:#fff;font-size:14.5px;display:inline-flex;align-items:center;gap:6px}
.btn:active{opacity:.85}
.btn.sm{padding:9px 14px;font-size:13px}
.btn.gh{background:var(--bg);color:var(--ink);border:1.5px solid var(--line)}
.btn.dg{background:var(--no)}
.btn.alt{background:var(--qalb)}

/* ── Пастки меню ── */
.nav{position:fixed;bottom:0;left:0;right:0;background:rgba(250,247,242,.94);
backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;
padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:50}
.nav b{flex:1;text-align:center;font-size:10px;font-weight:700;color:var(--mut);
padding:5px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.nav b.on{color:var(--acc)}
.nav b svg{display:block}

/* ── Бошқа ── */
.empty{text-align:center;color:var(--mut);font-size:13.5px;padding:26px 12px;font-weight:600}
.pill{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.seg{display:flex;gap:5px;background:var(--bg);padding:4px;border-radius:16px;margin-bottom:12px;
overflow-x:auto}
.seg b{flex:1;text-align:center;padding:8px 10px;border-radius:12px;font-size:12.5px;
font-weight:700;color:var(--mut);cursor:pointer;white-space:nowrap}
.seg b.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.hide{display:none!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{background:var(--bg);border-radius:16px;padding:12px}
.stat .n{font-family:'Quicksand',sans-serif;font-size:21px;font-weight:700}
.stat .l{font-size:10.5px;color:var(--mut);font-weight:700;margin-top:2px;text-transform:uppercase}
.hm{display:flex;gap:2.5px;flex-wrap:wrap;margin-top:4px}
.hm i{width:11px;height:11px;border-radius:3px;background:var(--line);display:block}
.slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--line);
outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
background:var(--acc);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.emoji-row{display:flex;gap:8px;justify-content:space-between}
.emoji-row button{flex:1;font-size:24px;padding:10px 0;border-radius:14px;border:2px solid var(--line);
background:var(--bg);cursor:pointer}
.emoji-row button.on{border-color:var(--acc);background:#eaf5ec}
@media(max-width:700px){
 .stat{padding:10px 12px}
 .stat .n{font-size:19px}
}