:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#7c5cff;
  --accent-2:#00d4ff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.04);
  --success: #3ee6b0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,0.08), transparent 8%),
              radial-gradient(900px 400px at 90% 90%, rgba(0,212,255,0.06), transparent 8%),
              var(--bg);
  color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; align-items:center; justify-content:center; padding:48px;
}
.app{position:relative; width:100%; max-width:920px}
.bg-blob{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(circle at 20% 30%, rgba(124,92,255,0.12), transparent 8%),
              radial-gradient(circle at 80% 70%, rgba(0,212,255,0.10), transparent 8%);
  mix-blend-mode: screen; animation: floaty 12s linear infinite;
}
@keyframes floaty{ 0%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.03)}100%{transform:translateY(0) scale(1)} }
.app-header{position:relative; z-index:2; text-align:center; margin-bottom:18px}
.logo{font-weight:700; letter-spacing:-0.02em; margin:0; font-size:28px}
.logo span{color:var(--accent); margin-left:6px}
.tag{color:var(--muted); margin-top:6px}
.todo-card{position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:14px; padding:20px; box-shadow: 0 10px 30px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.03); backdrop-filter: blur(8px); z-index:2}
.todo-form{display:flex; gap:12px; align-items:center}
.todo-input{flex:1; background:var(--glass); border-radius:10px; border:1px solid rgba(255,255,255,0.03); padding:12px 14px; color:inherit; outline:none; transition: box-shadow .18s, transform .18s}
.todo-input:focus{box-shadow:0 6px 24px rgba(124,92,255,0.12); transform:translateY(-2px)}
.add-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none; padding:10px 14px; border-radius:10px; color:#041023; font-weight:600; cursor:pointer; box-shadow: 0 6px 18px rgba(124,92,255,0.18); transform-origin:center; transition:transform .14s ease, box-shadow .14s}
.add-btn:active{transform:scale(.98)}
.controls{display:flex; justify-content:space-between; align-items:center; margin-top:14px}
.filters{display:flex; gap:8px}
.filter{background:transparent; border:none; color:var(--muted); padding:6px 10px; border-radius:8px; cursor:pointer; transition:background .18s, transform .18s}
.filter.active{background:rgba(255,255,255,0.03); color:var(--accent); transform:translateY(-2px)}
.todo-list{list-style:none; margin:16px 0 8px; padding:0; display:flex; flex-direction:column; gap:10px; min-height:120px}
.todo-item{display:flex; gap:12px; align-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); transform-origin:left; animation: item-entrance .6s cubic-bezier(.2,.9,.25,1) both}
@keyframes item-entrance{ from{opacity:0; transform:translateX(-18px) scale(.98)} to{opacity:1; transform:none} }
.todo-item.completed{opacity:.6; text-decoration:line-through; color:var(--muted)}
.todo-item .check{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); transition:background .18s, transform .14s}
.check svg{width:18px; height:18px; opacity:0; transform:scale(.8); transition:opacity .18s, transform .18s}
.todo-item.completed .check{background:linear-gradient(90deg,var(--success),#2be0a6); border:none; transform:rotate(-6deg)}
.todo-item.completed .check svg{opacity:1; transform:scale(1)}
.content{flex:1}
.item-meta{display:flex; gap:8px; align-items:center}
.delete{background:transparent; border:none; color:var(--muted); cursor:pointer; padding:8px; border-radius:8px; transition:color .12s}
.delete:hover{color:#ff8a8a}
.footer-actions{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
.ghost{background:transparent; color:var(--muted); border:1px dashed rgba(255,255,255,0.02); padding:8px 12px; border-radius:10px; cursor:pointer}
.hint{color:var(--muted)}
.credit{margin-top:14px; text-align:center; color:var(--muted)}
/* floating accent particle animation */
.todo-item::before{content:''; position:absolute; left:-12px; width:8px; height:8px; border-radius:50%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:0.06; filter:blur(6px); transform-origin:center; animation: pulse 3s infinite}
@keyframes pulse{0%{transform:scale(1); opacity:.08}50%{transform:scale(1.6); opacity:.02}100%{transform:scale(1); opacity:.08}}
/* delete animation */
.todo-item.removing{animation: item-remove .5s forwards}
@keyframes item-remove{to{opacity:0; transform:translateX(30px) scale(.98); height:0; margin:0; padding:0}}
/* responsive */
@media (max-width:600px){
  .app{padding:18px}
  .logo{font-size:22px}
  .todo-card{padding:14px}
}
/* subtle continuous shimmer on header */
.app-header::after{content:''; position:absolute; left:0; right:0; top:0; bottom:-8px; background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04), rgba(255,255,255,0.02)); mix-blend-mode:overlay; z-index:-1; animation: slide 6s linear infinite}
@keyframes slide{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}

/* small utility */
.visually-hidden{position:absolute!important; height:1px;width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}