*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-gradient:linear-gradient(135deg, #0f2027, #203a43, #2c5364);--primary:#4f46e5;--primary-hover:#4338ca;--success:#22c55e;--danger:#ef4444;--text-dark:#111827;--text-light:#fff;--card-bg:#fffffff2;--radius:12px;--shadow:0 10px 25px #0003}body{background:var(--bg-gradient);justify-content:center;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}.todo-container{flex-direction:column;gap:20px;width:100%;max-width:600px;padding:24px 16px;display:flex}header{text-align:center;color:var(--text-light)}header h1{font-size:2.2rem;font-weight:700}.date-time{opacity:.8;margin-top:6px;font-size:.95rem}.form{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}form{justify-content:center;gap:10px;display:flex}form input{border-radius:var(--radius);border:1px solid #e5e7eb;outline:none;flex:1;padding:12px;font-size:1rem}form button{border-radius:var(--radius);background:var(--primary);color:#fff;cursor:pointer;white-space:nowrap;border:none;padding:12px 16px}.myUnOrdList ul{flex-direction:column;gap:12px;list-style:none;display:flex}.todo-item{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;display:flex}.todo-item span{color:var(--text-dark);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.95rem;overflow:hidden}.check-btn,.delete-btn{cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.check-btn{background:var(--success);color:#fff}.delete-btn{background:var(--danger);color:#fff}.checkList{opacity:.6;text-decoration:line-through}.clear-btn{background:var(--danger);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;margin:20px auto;padding:10px 20px;display:block}@media (width<=768px){header h1{font-size:1.8rem}}@media (width<=480px){form{flex-direction:column}form button{width:100%}.todo-item{flex-direction:row}}