body{
  background:var(--bg);
  color:var(--fg);
  font: 500 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}
.header{
  max-width:1100px;margin:0 auto;padding:20px 16px;display:flex;align-items:center;justify-content:space-between;
}
.header__title{font-weight:800;letter-spacing:0.2px}
.header__actions{display:flex;gap:8px}
.container{max-width:1100px;margin:0 auto;padding:0 16px 40px;display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}

.form{display:flex;flex-direction:column;gap:12px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form__col{display:flex;flex-direction:column;gap:6px}
.form input, .form select{border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:10px 12px;border-radius:10px}
.form__actions{display:flex;gap:8px}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.toolbar__left{display:flex;gap:8px;flex-wrap:wrap}
.toolbar__right{display:flex;gap:8px}
.search input{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg);min-width:220px}

.counters{color:var(--muted);font-size:14px;margin:6px 0 10px}

.list{display:flex;flex-direction:column;gap:6px}
.task{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.task:focus-visible{outline:var(--focus)}
.task__left{display:flex;align-items:center;gap:10px}
.task__title{font-weight:600}
.task__meta{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.task__actions{display:flex;gap:4px}
.task.done{opacity:.6}

.badge{border-radius:999px;padding:4px 8px;border:1px solid var(--border);background:var(--surface)}
.badge--prio[data-priority='Alta']{background: #fee2e2;border-color:#fecaca;color:#991b1b}
.badge--prio[data-priority='Média']{background: #fef9c3;border-color:#fde68a;color:#92400e}
.badge--prio[data-priority='Baixa']{background: #dcfce7;border-color:#bbf7d0;color:#065f46}

.btn{border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{background:var(--surface)}
.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-600)}
.btn--ghost{background:transparent}
.icon-btn{border:0;background:transparent;padding:6px 8px;cursor:pointer;border-radius:8px}
.icon-btn:hover{background:var(--surface)}

.dialog{border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--bg);color:var(--fg)}
.dialog::backdrop{background:rgba(0,0,0,.4)}
.dialog__actions{display:flex;justify-content:flex-end;margin-top:12px}
.kbd-list{display:grid;gap:6px;margin-top:8px}
.kbd-list kbd{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2px 6px}

:focus-visible{outline:var(--focus);outline-offset:2px}

@media (max-width: 720px){
  .form__row{grid-template-columns: 1fr}
}