.task-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;display:grid;grid-template-columns:1fr 2fr 90px auto;gap:10px;align-items:end;margin-bottom:18px}.task-form label{font-size:.75rem}.task-form input,.task-form select{width:100%;padding:10px 11px;font:inherit;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.task-form .primary{margin:0;padding:10px 13px;font-size:.85rem;min-width:100px}.task-card{grid-template-columns:30px 1fr auto auto}.task-complete{border:2px solid #c9c3e3;color:transparent;width:23px;height:23px;border-radius:8px;display:grid;place-items:center;font-size:.8rem;background:#fff;cursor:pointer}.task-card.done .task-complete{background:#38a67c;border-color:#38a67c;color:#fff}.task-remove{border:0;background:#fff0f2;color:#b52b47;border-radius:8px;padding:7px 8px;font:600 .72rem "DM Sans"}.empty-tasks{background:#fff;border:1px dashed #cfc9e9;border-radius:16px;padding:22px;text-align:center;color:var(--muted);font-size:.86rem}.task-note{margin-top:15px}.progress-ring{--progress:0deg;position:relative;border:0;background:conic-gradient(#fff var(--progress),#bdb5ff 0)}.progress-ring:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#7566e4}.progress-ring span{position:relative;z-index:1}@media(max-width:700px){.task-form{grid-template-columns:1fr 1fr}.task-form .task-description{grid-column:span 2}.task-form .primary{grid-column:span 2}.task-card{grid-template-columns:30px 1fr auto}.task-card .task-remove{grid-column:2/4;justify-self:start}}