*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6}.container{max-width:600px;margin:20px auto;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden}header{background:#2563eb;color:#fff;padding:20px}header h1{font-size:24px;margin-bottom:10px}.status{display:flex;gap:15px;font-size:14px;opacity:.9}.status span{padding:4px 8px;border-radius:4px;background:#fff3}.status-success{background:#10b981!important}.status-warning{background:#f59e0b!important}.status-error{background:#ef4444!important}.input-section{padding:20px;border-bottom:1px solid #e5e7eb;display:flex;gap:10px}.input-section input{flex:1;padding:12px;border:1px solid #d1d5db;border-radius:6px;font-size:16px}.input-section input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.input-section button{padding:12px 24px;background:#2563eb;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background-color .2s}.input-section button:hover:not(:disabled){background:#1d4ed8}.input-section button:disabled{background:#9ca3af;cursor:not-allowed}.todos-section{min-height:200px;max-height:400px;overflow-y:auto;border-bottom:1px solid #e5e7eb}.todos-section ul{list-style:none;padding:0}.todo-item{padding:15px 20px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:12px;transition:background-color .2s,opacity .2s}.todo-item:last-child{border-bottom:none}.todo-item:hover{background:#f9fafb}.todo-item.completed{background:#f0f9ff;opacity:.7}.todo-item.completed .todo-content{text-decoration:line-through;color:#6b7280}.todo-checkbox{width:18px;height:18px;cursor:pointer;accent-color:#2563eb}.todo-content-container{flex:1;display:flex;justify-content:space-between;align-items:center}.todo-content{flex:1;word-break:break-word;font-size:16px}.todo-time{color:#6b7280;font-size:14px;margin-left:10px;white-space:nowrap}.no-todos{padding:40px 20px;text-align:center;color:#6b7280;font-style:italic}.actions{padding:20px;border-bottom:1px solid #e5e7eb;display:flex;gap:10px;flex-wrap:wrap}.clear-completed-btn{padding:10px 20px;background:#f59e0b;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s;font-size:14px}.clear-completed-btn:hover:not(:disabled){background:#d97706}.clear-completed-btn:disabled{background:#9ca3af;cursor:not-allowed}.clear-all-btn{padding:10px 20px;background:#ef4444;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s;font-size:14px}.clear-all-btn:hover:not(:disabled){background:#dc2626}.clear-all-btn:disabled{background:#9ca3af;cursor:not-allowed}.debug{background:#f8fafc;border-top:1px solid #e5e7eb}.debug h3{padding:15px 20px 10px;font-size:16px;color:#374151;border-bottom:1px solid #e5e7eb}#debug-log{padding:10px 20px 20px;max-height:200px;overflow-y:auto;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;line-height:1.4}.debug-entry{padding:2px 0;color:#4b5563}.debug-entry:hover{background:#f1f5f9}@media (max-width: 640px){.container{margin:10px;border-radius:0}.input-section{flex-direction:column}.todo-item{flex-direction:row;align-items:center;gap:8px}.todo-content-container{flex-direction:column;align-items:flex-start;gap:5px}.todo-time{margin-left:0}.actions{flex-direction:column;gap:8px}}