*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:#f5f5f5;justify-content:center;padding:2rem 1rem;font-family:system-ui,sans-serif;display:flex}.todo-card{background:#fff;border:.5px solid #00000026;border-left:4px solid #d1d5db;border-radius:16px;flex-direction:column;gap:14px;width:100%;max-width:420px;padding:1.25rem 1.5rem;transition:border-left-color .2s;display:flex;position:relative;box-shadow:0 1px 4px #0000000f}.todo-card.priority-high{border-left-color:#a32d2d}.todo-card.priority-medium{border-left-color:#854f0b}.todo-card.priority-low{border-left-color:#3b6d11}.todo-card.state-done{opacity:.75}.todo-card.state-overdue{background:#fffaf9}.todo-card.state-in-progress{border-left-color:#185fa5}.todo-priority-indicator{border-radius:50%;width:10px;height:10px;position:absolute;top:1.25rem;right:1.5rem}.todo-priority-indicator.priority-high{background:#a32d2d}.todo-priority-indicator.priority-medium{background:#854f0b}.todo-priority-indicator.priority-low{background:#3b6d11}.todo-card-header{align-items:flex-start;gap:12px;display:flex}.todo-checkbox-wrap{flex-shrink:0;padding-top:3px}.todo-checkbox{accent-color:#534ab7;cursor:pointer;width:18px;height:18px}.todo-checkbox:focus-visible{outline-offset:2px;border-radius:3px;outline:3px solid #534ab766}.todo-header-content{flex:1;min-width:0;padding-right:20px}.todo-title{color:#111;font-size:15px;font-weight:500;line-height:1.45;transition:color .2s,-webkit-text-decoration .2s,text-decoration .2s}.todo-title.is-done{color:#999;text-decoration:line-through}.todo-description{color:#666;font-size:13px;line-height:1.6}.todo-expand-btn{color:#534ab7;cursor:pointer;background:0 0;border:none;margin-top:4px;padding:2px 0;font-size:12px;font-weight:500;display:block}.todo-expand-btn:hover{text-decoration:underline}.todo-expand-btn:focus-visible{outline-offset:2px;border-radius:3px;outline:3px solid #534ab766}.todo-meta-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.todo-badge{border-radius:99px;align-items:center;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.4;display:inline-flex}.priority-high{color:#a32d2d;background:#fcebeb}.priority-medium{color:#854f0b;background:#faeeda}.priority-low{color:#3b6d11;background:#eaf3de}.status-pending{color:#185fa5;background:#e6f1fb}.status-done{color:#3b6d11;background:#eaf3de}.status-in-progress{color:#534ab7;background:#f0eafe}.todo-status-control-row{align-items:center;gap:10px;display:flex}.todo-status-select{color:#111;cursor:pointer;background:#fff;border:.5px solid #0003;border-radius:8px;flex:1;padding:4px 8px;font-size:13px}.todo-status-select:focus-visible{outline-offset:2px;outline:3px solid #534ab766}.todo-divider{border:none;border-top:.5px solid #0000001a;margin:0}.todo-dates-row{flex-direction:column;gap:6px;display:flex}.todo-date-line{color:#555;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.todo-date-label{color:#999;text-transform:uppercase;letter-spacing:.04em;min-width:62px;font-size:11px;font-weight:500}.todo-time-remaining{font-weight:500}.time-overdue{color:#a32d2d}.time-soon{color:#854f0b}.time-ok{color:#185fa5}.todo-overdue-indicator{color:#a32d2d;background:#fcebeb;border:.5px solid #f7c1c1;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500}.todo-tags-row{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.todo-tag{color:#555;background:#f4f4f4;border:.5px solid #0000001a;border-radius:6px;padding:3px 10px;font-size:12px}.todo-actions-row{justify-content:flex-end;gap:8px;display:flex}.todo-btn{cursor:pointer;background:0 0;border:.5px solid #0000002e;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:500;line-height:1.4;transition:background .15s,transform .1s}.todo-btn:focus-visible{outline-offset:2px;outline:3px solid #534ab766}.todo-btn:active{transform:scale(.97)}.todo-btn-edit{color:#185fa5;border-color:#b5d4f4}.todo-btn-edit:hover{background:#e6f1fb}.todo-btn-delete{color:#a32d2d;border-color:#f7c1c1}.todo-btn-delete:hover{background:#fcebeb}.todo-btn-save{color:#3b6d11;border-color:#c0dd97}.todo-btn-save:hover{background:#eaf3de}.todo-edit-form{z-index:10;background:#fff;border-radius:16px;flex-direction:column;gap:12px;padding:1.25rem 1.5rem;display:flex;position:absolute;inset:0;overflow-y:auto}.todo-edit-heading{color:#111;font-size:15px;font-weight:500}.todo-field{flex-direction:column;gap:4px;display:flex}.todo-field-label{color:#999;text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:500}.todo-field-input{color:#111;background:#fff;border:.5px solid #0003;border-radius:8px;width:100%;padding:7px 10px;font-family:inherit;font-size:13px}.todo-field-input:focus{outline-offset:2px;outline:3px solid #534ab766}.todo-field-textarea{resize:vertical;min-height:80px}.todo-edit-actions{justify-content:flex-end;gap:8px;margin-top:auto;padding-top:4px;display:flex}@media (prefers-color-scheme:dark){body{background:#000}.todo-card{box-shadow:none;background:#1c1c1e;border-color:#ffffff1a}.todo-card.state-overdue{background:#2a1a1a}.todo-title{color:#f2f2f7}.todo-title.is-done{color:#636366}.todo-description,.todo-date-line{color:#aeaeb2}.todo-tag{color:#aeaeb2;background:#2c2c2e;border-color:#ffffff14}.todo-btn{color:#f2f2f7;border-color:#ffffff26}.todo-btn-edit{color:#85b7eb;border-color:#85b7eb59}.todo-btn-edit:hover{background:#85b7eb1f}.todo-btn-delete{color:#f09595;border-color:#f0959559}.todo-btn-delete:hover{background:#f095951f}.todo-btn-save{color:#97c459;border-color:#97c45959}.todo-btn-save:hover{background:#97c4591f}.todo-divider{border-top-color:#ffffff14}.todo-status-select,.todo-field-input{color:#f2f2f7;background:#2c2c2e;border-color:#ffffff26}.todo-edit-form{background:#1c1c1e}.todo-edit-heading{color:#f2f2f7}.todo-overdue-indicator{background:#2a1a1a;border-color:#f095954d}}@media (width<=480px){.todo-card{border-radius:12px;padding:1rem}.todo-edit-form{padding:1rem}.todo-actions-row{flex-wrap:wrap}.todo-btn{flex:1;justify-content:center}}@media (width>=768px){.todo-meta-row{flex-wrap:nowrap}.todo-status-control-row{flex-direction:row}}