*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#111827;color:#f9fafb;line-height:1.5;-webkit-font-smoothing:antialiased}.wrap{max-width:560px;margin:0 auto;padding:2.5rem 1.25rem 5rem}.site-header{margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between}.site-header h1{font-size:.8125rem;font-weight:500;color:#6c63ff;letter-spacing:.18em;text-transform:uppercase;font-family:ui-monospace,monospace}.header-nav{display:flex;gap:1rem;align-items:center}.username{font-size:.75rem;color:#6b7280;font-family:ui-monospace,monospace}.logout-btn{font-size:.75rem;font-family:ui-monospace,monospace;color:#4b5563;background:none;border:none;cursor:pointer;padding:0}.logout-btn:hover{color:#9ca3af}.login-box{margin-top:4rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.btn-login{display:inline-flex;align-items:center;gap:.5rem;background:#6c63ff;color:#fff;border:none;border-radius:8px;padding:.75rem 1.75rem;font-size:.9375rem;font-family:inherit;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s}.btn-login:hover{background:#5a52e0}.btn-login:disabled{opacity:.5;cursor:not-allowed}.compose{margin-bottom:1.25rem}.compose-row{display:flex;gap:.5rem}.compose-row input[type=text]{flex:1;background:#1f2937;border:1px solid #374151;color:#f9fafb;border-radius:8px;padding:.625rem .875rem;font-size:.9375rem;font-family:inherit;outline:none;transition:border-color .15s}.compose-row input[type=text]:focus{border-color:#6c63ff}.compose-row input[type=text]::placeholder{color:#4b5563}.compose-row button[type=submit]{background:#6c63ff;color:#fff;border:none;border-radius:8px;padding:.625rem 1.125rem;font-size:.875rem;font-family:inherit;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s}.compose-row button[type=submit]:hover{background:#5a52e0}.compose-row button[type=submit]:disabled{opacity:.5;cursor:not-allowed}.filters{display:flex;gap:.25rem;margin-bottom:1rem;border-bottom:1px solid #1f2937;padding-bottom:.5rem}.filters a{font-size:.8125rem;color:#6b7280;text-decoration:none;padding:.25rem .625rem;border-radius:4px;transition:color .15s}.filters a:hover{color:#d1d5db}.filters a.active{color:#6c63ff;background:#6c63ff1f}.todo-list{list-style:none;display:flex;flex-direction:column;gap:.125rem}.todo-item{display:flex;align-items:center;gap:.75rem;padding:.75rem .5rem;border-radius:6px;transition:background .1s}.todo-item:hover{background:#1f2937}.toggle-form,.delete-form{display:contents}.checkbox{flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;color:inherit}.todo-title{flex:1;font-size:.9375rem;color:#e5e7eb;word-break:break-word}.todo-item.done .todo-title{color:#4b5563;text-decoration:line-through}.delete-btn{flex-shrink:0;background:none;border:none;color:#374151;cursor:pointer;font-size:1.125rem;padding:0 .25rem;line-height:1;opacity:0;transition:color .15s,opacity .15s}.todo-item:hover .delete-btn{opacity:1}.delete-btn:hover{color:#f87171}.todo-footer{margin-top:1rem;font-size:.75rem;color:#4b5563;font-family:ui-monospace,monospace;padding-left:.5rem}.empty{color:#374151;font-size:.875rem;padding:2.5rem 0;text-align:center;list-style:none}.error-msg{font-size:.8125rem;color:#f87171;margin-top:.5rem}.auth-box{max-width:360px}.auth-box h2{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.auth-box p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem;line-height:1.6}.field-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.field-group input{background:#1f2937;border:1px solid #374151;color:#f9fafb;border-radius:8px;padding:.625rem .875rem;font-size:.9375rem;font-family:inherit;outline:none;transition:border-color .15s}.field-group input:focus{border-color:#6c63ff}.field-group input::placeholder{color:#4b5563}.btn{display:inline-block;background:#6c63ff;color:#fff;border:none;border-radius:8px;padding:.625rem 1.375rem;font-size:.9375rem;font-family:inherit;font-weight:500;cursor:pointer;transition:background .15s}.btn:hover{background:#5a52e0}.btn:disabled{opacity:.5;cursor:not-allowed}