*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#f5f5f5;color:#222}.container{max-width:640px;margin:48px auto;padding:0 16px}h1{font-size:1.8rem;margin-bottom:24px}form{display:flex;gap:8px;margin-bottom:24px}input{flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:1rem}button{padding:10px 18px;background:#2563eb;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem}button:hover{background:#1d4ed8}.notes{display:flex;flex-direction:column;gap:12px}.note{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px;display:flex;justify-content:space-between;align-items:flex-start}.note-title{font-weight:600}.note-time{font-size:.8rem;color:#6b7280;margin-top:4px}.delete-btn{background:none;color:#ef4444;border:none;font-size:1.2rem;cursor:pointer;padding:0 4px}.delete-btn:hover{background:none;color:#b91c1c}.status{text-align:center;color:#6b7280;margin-top:32px;font-size:.85rem}