:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f2933;background:#f6f7f9}*{box-sizing:border-box}body{margin:0;min-height:100vh}.todo-page{width:min(100% - 32px,720px);margin:48px auto 0}.todo-frame{color:#1f2933}.todo-header{margin-bottom:24px}.todo-header h1{margin:0 0 8px;font-size:32px;line-height:1.15;letter-spacing:0}.summary{margin:0;color:#697586;font-size:15px}.todo-panel{background:#fff;border:1px solid #d8dee8;border-radius:8px;box-shadow:0 12px 28px #1f293314;overflow:hidden}.todo-form{display:grid;grid-template-columns:1fr auto;gap:12px;padding:20px;border-bottom:1px solid #d8dee8}.todo-form input{min-width:0;height:44px;border:1px solid #d8dee8;border-radius:6px;padding:0 14px;font:inherit;color:inherit}.todo-form input:focus-visible{outline:2px solid #1d4ed8;outline-offset:1px}.add-button{height:44px;border:0;border-radius:6px;padding:0 16px;background:#2563eb;color:#fff;font:inherit;font-weight:650;cursor:pointer}.todo-validation{margin:0;padding:0 20px 14px;color:#dc2626;font-size:14px}.todo-filters{display:flex;gap:8px;padding:14px 20px;border-bottom:1px solid #d8dee8}.filter-button{height:34px;border:1px solid #d8dee8;border-radius:6px;padding:0 12px;background:#fff;color:#1f2933;font-size:14px;cursor:pointer}.filter-button.is-active{border-color:#2563eb;background:#2563eb;color:#fff}.todo-list{list-style:none;margin:0;padding:0}.todo-row{min-height:58px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid #d8dee8}.todo-row.is-editing{grid-template-columns:auto minmax(0,1fr) auto auto;padding-top:12px;padding-bottom:12px;row-gap:8px;align-items:start}.todo-row:last-child{border-bottom:0}.todo-check{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:22px;height:22px;border:2px solid #d8dee8;border-radius:50%;flex-shrink:0;background:transparent;padding:0;cursor:pointer}.todo-row.is-complete .todo-check{border-color:#059669;background:#059669}.todo-title{color:#1f2933;min-width:0;overflow-wrap:anywhere}.todo-row.is-complete .todo-title{color:#697586;text-decoration:line-through}.todo-delete{width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:#dc2626;font:inherit;cursor:pointer}.todo-action{height:34px;padding:0 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#334155;font:inherit;font-size:13px;cursor:pointer}.todo-action:hover{border-color:#d8dee8;background:#f1f5f9}.todo-edit-form{display:contents}.todo-edit-input{min-width:0;height:36px;padding:0 12px;border:1px solid #d8dee8;border-radius:6px;font:inherit;color:inherit}.todo-edit-save,.todo-edit-cancel{height:34px;border-radius:6px;padding:0 10px;border:1px solid #d8dee8;background:#fff;color:#1f2933;font:inherit;font-size:13px;cursor:pointer}.todo-edit-save{background:#2563eb;border-color:#2563eb;color:#fff}.edit-validation{grid-column:1 / -1;margin:0;color:#dc2626;font-size:13px}.todo-empty{padding:48px 20px;text-align:center;color:#697586}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 520px){.todo-page{width:calc(100% - 24px);margin:24px auto 0}.todo-header h1{font-size:26px}.todo-form{grid-template-columns:1fr;padding:16px}.todo-filters{padding:12px 16px}.todo-row{padding:0 16px}.todo-row.is-editing{grid-template-columns:auto minmax(0,1fr) auto auto}.todo-empty{padding:40px 16px}}