:root{--em:#047857;--em2:#059669;--bg:#f8fafc;--line:#e2e8f0;--muted:#64748b}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:#0f172a}
a{color:var(--em);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 .25rem}h2{font-size:1.1rem;margin:0 0 .5rem}
.container{max-width:960px;margin:0 auto;padding:1rem 1rem 5rem}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.75rem;background:#fff;border-bottom:1px solid var(--line);padding:.6rem 1rem}
.brand{font-weight:700;color:var(--em)}
.topnav{margin-left:auto;display:none;gap:.25rem}
.topnav a{padding:.5rem .75rem;border-radius:.5rem;color:#475569;font-size:.9rem}
.topnav a.active{background:var(--em);color:#fff}
.user-area{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.uname{color:var(--muted);font-size:.85rem}
@media(min-width:768px){.topnav{display:flex}.user-area{margin-left:0}}
.bottomnav{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);z-index:20}
.bottomnav a{display:flex;flex-direction:column;align-items:center;font-size:.65rem;color:var(--muted);padding:.4rem 0}
.bottomnav a.active{color:var(--em)}.bottomnav span{font-size:1.1rem}
@media(min-width:768px){.bottomnav{display:none}.container{padding-bottom:2rem}}
.card{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.1rem;margin:1rem 0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.card.danger{border-color:#fecaca;background:#fff1f2}
.hero{background:linear-gradient(90deg,var(--em),#0d9488);color:#fff;border-radius:1rem;padding:1.1rem;margin-bottom:1rem}
.hero h1{color:#fff}.muted-light{color:#d1fae5;font-size:.85rem;margin:0}
.progress-wrap{margin-top:.9rem}.small-text{font-size:.85rem;color:#ecfdf5}
.bar{height:10px;background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden;margin-top:.35rem}
.bar.thin{height:7px;background:#e2e8f0}
.bar-fill{height:100%;background:#fff;border-radius:99px;transition:width .2s}
.bar.thin .bar-fill{background:var(--em2)}
.row{display:flex;align-items:center}.row.between{justify-content:space-between}.row.gap{gap:.5rem}.wrap{flex-wrap:wrap}
.grow{flex:1}.center{text-align:center}.muted{color:var(--muted);font-size:.875rem;margin:.15rem 0}
.hidden{display:none!important}
.list{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.6rem}
.list.compact{gap:.45rem;font-size:.9rem}
.item{display:flex;gap:.75rem;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.85rem}
.item.block{display:block}.item.done{background:#ecfdf5;border-color:#a7f3d0}
.item-title{font-weight:600;margin:0}
.item.done .item-title{text-decoration:line-through;color:#047857}
.tick{width:28px;height:28px;flex:none;border-radius:50%;border:2px solid #cbd5e1;background:#fff;color:transparent;cursor:pointer;font-weight:700}
.item.done .tick{background:var(--em);border-color:var(--em);color:#fff}
.item-body{flex:1;min-width:0}
.counter{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.counter button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:.5rem;font-size:1.1rem;cursor:pointer}
.counter span{font-size:.875rem;font-weight:600;min-width:74px;text-align:center}
.link{background:none;border:none;color:var(--em);font-size:.78rem;cursor:pointer;padding:.35rem 0}
.empty{border:1px dashed #cbd5e1;border-radius:1rem;padding:1.5rem;text-align:center;color:var(--muted);background:#fff}
.btn{border:1px solid transparent;border-radius:.55rem;padding:.55rem 1rem;font-weight:600;cursor:pointer;font-size:.9rem;background:#fff}
.btn.primary{background:var(--em);color:#fff}.btn.primary:hover{background:#065f46}
.btn.ghost{border-color:var(--line);color:#475569}
.btn.ghost-light{background:rgba(255,255,255,.18);color:#fff}
.btn.soft{background:#ecfdf5;border-color:#a7f3d0;color:var(--em)}
.btn.danger{background:#e11d48;color:#fff}
.btn.danger-outline{border-color:#fecdd3;color:#e11d48}
.btn.small{padding:.35rem .7rem;font-size:.8rem}
.btn.block{width:100%;display:block;margin-top:.5rem}
label{display:block;font-size:.85rem;font-weight:500;color:#334155;margin-bottom:.7rem}
label.check{display:flex;align-items:center;gap:.45rem;font-weight:400;color:#475569}
label.check.end{align-items:flex-end;padding-bottom:.6rem}
input,select,textarea{width:100%;margin-top:.25rem;padding:.55rem .7rem;border:1px solid #cbd5e1;border-radius:.55rem;font:inherit;background:#fff}
input[type=checkbox]{width:auto;margin:0;accent-color:var(--em)}
input:focus,select:focus{outline:none;border-color:var(--em2)}
.grid2{display:grid;gap:.5rem 1rem;grid-template-columns:1fr}
.grid3{display:grid;gap:.5rem 1rem;grid-template-columns:1fr}
.grid4{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}.span2{grid-column:span 2}}
.auth-card{max-width:420px;margin:2rem auto;background:#fff;border:1px solid #d1fae5;border-radius:1rem;padding:1.75rem}
.auth-head{text-align:center;margin-bottom:1.25rem}.auth-head .logo{font-size:2rem}
.alert{border-radius:.55rem;padding:.6rem .8rem;font-size:.875rem;margin:0 0 .8rem}
.alert.error{background:#fff1f2;color:#be123c}.alert.success{background:#ecfdf5;color:#065f46}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:.5rem 0}
.chip{border:1px solid #cbd5e1;background:#fff;border-radius:.5rem;padding:.35rem .65rem;font-size:.85rem;cursor:pointer}
.chip.on{background:var(--em);border-color:var(--em);color:#fff}
.chip.static{background:#f1f5f9;cursor:default;display:flex;align-items:center;gap:.35rem;border-radius:99px}
.chips.small .chip{padding:.25rem;width:32px;text-align:center}
.mini{border:none;background:none;font-size:.7rem;color:var(--muted);cursor:pointer}.mini.danger{color:#e11d48}
.icon-input{width:56px;text-align:center;margin:0}
.label{font-size:.85rem;font-weight:500;margin:.5rem 0 .25rem}
.tag{background:#e2e8f0;border-radius:.35rem;padding:.05rem .4rem;font-size:.7rem;color:#475569}
.calendar-head,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.calendar-head div{font-size:.72rem;color:var(--muted);font-weight:600;padding:.25rem 0}
.day{aspect-ratio:1;border:none;border-radius:.5rem;background:#f1f5f9;color:#475569;font-size:.85rem;cursor:pointer}
.day.none{background:#f8fafc;color:#94a3b8}.day.zero{background:#fff1f2;color:#be123c}
.day.mid{background:#fef3c7;color:#92400e}.day.high{background:#d1fae5;color:#065f46}
.day.full{background:var(--em);color:#fff}.day.sel{outline:2px solid var(--em2);outline-offset:1px}
.legend{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.72rem;color:var(--muted);margin-top:.75rem}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.2rem}
.sw.full{background:var(--em)}.sw.high{background:#d1fae5}.sw.mid{background:#fef3c7}.sw.none{background:#fff1f2}
.badge{border-radius:99px;padding:.1rem .55rem;font-size:.72rem;background:#e2e8f0;color:#475569}
.badge.ok{background:var(--em);color:#fff}.badge.warn{background:#fde68a;color:#92400e}
.stat{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.85rem}
.stat-value{font-size:1.5rem;font-weight:700;color:var(--em);margin:.1rem 0 0}
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;margin-top:.75rem}
.bar-col{flex:1;background:#10b981cc;border-radius:3px 3px 0 0}
.range{display:flex;gap:.15rem;background:#fff;border:1px solid var(--line);border-radius:.6rem;padding:.2rem}
.range button{border:none;background:none;padding:.35rem .7rem;border-radius:.45rem;cursor:pointer;font-size:.82rem;color:#475569}
.range button.active{background:var(--em);color:#fff}
.month-label{font-weight:600;min-width:140px;text-align:center}
.date-input{width:auto;margin:0;background:rgba(255,255,255,.18);border:none;color:#fff}