.todo-view{align-items:stretch}
.todo{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:6px}
.todo-tabs{max-width:100%;overflow-x:auto}
.badge{font-size:.72rem;font-weight:500;padding:1px 7px;border-radius:999px;background:rgba(233,228,255,.12);color:var(--mist)}
.seg button.on .badge{background:rgba(13,11,36,.18);color:var(--night)}
.todo-card{width:100%;display:flex;flex-direction:column;gap:14px}
.period{display:flex;align-items:center;gap:8px}
.period-title{flex:1;text-align:center;min-width:0}
.period-title h2{font-size:clamp(1.3rem,4vw,1.7rem);font-weight:700;line-height:1.2}
.period-title p{margin-top:4px;font-size:.9rem;font-weight:300}
.chip.now{background:var(--gold);color:var(--night);border-color:var(--gold)}
.hint{text-align:center;font-size:.92rem;font-weight:300;margin-top:-6px}
.progress{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--mist-dim)}
.progress .bar{flex:1;height:8px;border-radius:99px;background:rgba(233,228,255,.12);overflow:hidden}
.progress .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--ember));transition:width .35s ease}
.progress span{min-width:7.5em;text-align:right}
.progress span.all{color:var(--gold);font-weight:500}
.add{display:flex;gap:10px}
.add .field{flex:1;font-size:1.02rem}
.todo-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.todo-tools-r{display:flex;gap:8px}
.todo-filters{display:inline-flex;gap:4px}
.todo-filters button{background:transparent;border:1px solid transparent;border-radius:999px;padding:4px 12px;cursor:pointer;color:var(--mist-dim);font-size:.9rem;transition:.2s}
.todo-filters button:hover{color:var(--mist)}
.todo-filters button.on{border-color:var(--line-strong);color:var(--mist)}
.btn.small{padding:5px 12px;font-size:.88rem;border-radius:999px}
.goals{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.goal{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(233,228,255,.04);transition:border-color .2s,background .2s,opacity .2s}
.goal:hover{border-color:var(--line-strong);background:rgba(233,228,255,.07)}
.goal.dragging{opacity:.4}
.goal.over{border-color:var(--gold)}
.goal .check{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(233,228,255,.35);background:transparent;cursor:pointer;color:transparent;padding:0;transition:.2s}
.goal .check:hover{border-color:var(--gold)}
.goal.done .check{background:var(--gold);border-color:var(--gold);color:var(--night)}
.goal-text{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.4;cursor:text}
.goal.done .goal-text{text-decoration:line-through;color:var(--mist-dim)}
.goal-edit{flex:1;padding:6px 10px}
.goal-actions{display:flex;opacity:0;transition:opacity .2s}
.goal:hover .goal-actions,.goal:focus-within .goal-actions{opacity:1}
@media (hover:none){.goal-actions{opacity:1}}
.empty{text-align:center;color:var(--mist-dim);font-weight:300;padding:22px 8px}
@media (max-width:520px){.progress span{min-width:0}}