:root{--ink:#1d2433;--brand:#0f766e;--brand2:#14b8a6;--bg:#f2f6f5}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(160deg,#0f766e,#134e4a)}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:32px 26px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.btn-brand{background:var(--brand);color:#fff;border:0;border-radius:12px;padding:11px;font-weight:600}
.btn-brand:hover{background:#115e59;color:#fff}
.form-control{border-radius:12px;padding:11px 14px}
.topbar{background:linear-gradient(135deg,#0f766e,#134e4a);color:#fff;padding:22px 0 60px}
.main{margin-top:-40px}
.nav-pills .nav-link{color:var(--ink);border-radius:12px;font-weight:600}
.nav-pills .nav-link.active{background:var(--brand)}
.box{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 12px rgba(15,60,55,.08)}
.task{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eef2f1}
.task:last-child{border:0}
.task.done span{text-decoration:line-through;color:#98a2a0}
.task span{flex:1;word-break:break-word}
.task input{width:20px;height:20px;accent-color:var(--brand)}
.x{border:0;background:none;color:#c0463d;font-size:18px;line-height:1}
.progress{height:8px;border-radius:8px}.progress-bar{background:var(--brand2)}
.empty{text-align:center;color:#7b8785;padding:26px 0}

.cd{background:rgba(255,255,255,.12);border-radius:14px;padding:10px 14px;margin-top:14px}
.cd .big{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.cd .form-control{border-radius:10px;padding:7px 10px}
.pt{font-size:4.2rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.dots span{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--brand2);margin:0 3px}

/* ---- responsive ---- */
.off{display:none!important}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.12)}
body{padding-bottom:84px}
.x{padding:4px 10px}
.task input{width:22px;height:22px}
.box h6{word-break:break-word}
.pt{font-size:clamp(3rem,14vw,4.5rem)}
@media(max-width:575.98px){
 input.form-control,input.form-control-sm{font-size:16px}
 .topbar{padding:16px 0 56px}
 .box{padding:14px}
 .cd .form-control,.cd form button{width:100%}
}
@media(min-width:992px){
 .off{display:block!important}
 body{padding-bottom:0}
 .topbar{padding:28px 0 72px}
 .side{position:sticky;top:16px}
 #tasks{max-height:300px;overflow:auto}
 .cd form .form-control{flex:1}
}
/* ---- nav + task meta ---- */
.appnav{padding:10px 0}
.appnav-in{max-width:1140px;margin:0 auto;padding:0 12px;display:flex;align-items:center;justify-content:space-between}
.brand{color:#fff;font-weight:700;font-size:1.2rem;text-decoration:none}
.links a{color:rgba(255,255,255,.8);text-decoration:none;padding:8px 16px;border-radius:12px;font-weight:600;margin:0 2px}
.links a.active,.links a:hover{background:rgba(255,255,255,.18);color:#fff}
.links i{margin-right:6px}
.out{color:#fff;opacity:.85;text-decoration:none;font-size:.9rem}
.tt{flex:1;min-width:0;display:flex;flex-direction:column}
.tt small{color:#7b8785;font-size:.75rem}.tt small.od{color:#c0463d}.tt small.pj{color:var(--brand);font-weight:600}
@media(max-width:991.98px){
 .links{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;padding:6px 8px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.12)}
 .links a{flex:1;text-align:center;color:#5b6b69;font-size:.75rem;padding:6px 4px;margin:0 2px}
 .links a i{display:block;font-size:1.3rem;margin:0}
 .links a.active,.links a:hover{background:#e6f4f1;color:var(--brand)}
}