:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --border:#2a3142;
  --text:#e6edf3; --muted:#8b949e; --accent:#3fb950; --accent2:#58a6ff;
  --danger:#f85149; --warn:#d29922; --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; padding:24px;
}
.app{max-width:720px; margin:0 auto}
.hero{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.logo{font-size:32px; color:var(--accent); line-height:1}
h1{font-size:22px; font-weight:600}
.sub{font-size:12px; color:var(--muted)}
.stats{display:flex; gap:8px; flex-wrap:wrap}
.stat{background:var(--panel); border:1px solid var(--border); padding:6px 12px; border-radius:999px; font-size:13px}
.stat.done{color:var(--accent)}
.stat.pend{color:var(--warn)}

.form-card{display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; background:var(--panel); border:1px solid var(--border); padding:16px; border-radius:var(--radius); margin-bottom:16px}
input,select{background:var(--panel2); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:8px; font-size:14px; outline:none}
input:focus,select:focus{border-color:var(--accent2)}
.btn-add{background:var(--accent); color:#0d1117; border:none; padding:10px 20px; border-radius:8px; font-weight:600; cursor:pointer; font-size:14px}
.btn-add:hover{filter:brightness(1.1)}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.filters{display:flex; gap:6px}
.filter{background:transparent; border:1px solid var(--border); color:var(--muted); padding:6px 14px; border-radius:999px; cursor:pointer; font-size:13px}
.filter.active{background:var(--accent2); color:#0d1117; border-color:var(--accent2)}
.btn-clear{background:transparent; border:1px solid var(--danger); color:var(--danger); padding:6px 14px; border-radius:999px; cursor:pointer; font-size:13px}
.btn-clear:hover{background:var(--danger); color:#0d1117}

.todo-list{list-style:none; display:flex; flex-direction:column; gap:8px}
.todo-item{display:flex; align-items:flex-start; gap:12px; background:var(--panel); border:1px solid var(--border); padding:14px 16px; border-radius:var(--radius); transition:border-color .15s}
.todo-item:hover{border-color:var(--accent2)}
.todo-item.completed{opacity:.55}
.todo-item.completed .title{text-decoration:line-through}
.checkbox{width:20px; height:20px; border:2px solid var(--border); border-radius:6px; cursor:pointer; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; background:var(--panel2)}
.checkbox.checked{background:var(--accent); border-color:var(--accent); color:#0d1117}
.checkbox.checked::after{content:"✓"; font-size:14px; font-weight:bold}
.body{flex:1; min-width:0}
.title{font-weight:500; font-size:15px; word-break:break-word}
.desc{font-size:13px; color:var(--muted); margin-top:3px; word-break:break-word}
.meta{display:flex; gap:8px; align-items:center; margin-top:6px; font-size:11px; color:var(--muted)}
.badge{padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600}
.badge.high{background:rgba(248,81,73,.15); color:var(--danger)}
.badge.medium{background:rgba(210,153,34,.15); color:var(--warn)}
.badge.low{background:rgba(63,185,80,.15); color:var(--accent)}
.actions{display:flex; gap:6px; flex-shrink:0}
.icon-btn{background:transparent; border:none; color:var(--muted); cursor:pointer; padding:4px 6px; font-size:14px; border-radius:6px}
.icon-btn:hover{background:var(--panel2); color:var(--text)}
.icon-btn.del:hover{color:var(--danger)}

.empty{text-align:center; color:var(--muted); padding:40px 0; font-size:14px}

@media(max-width:560px){
  .form-card{grid-template-columns:1fr 1fr}
  .btn-add{grid-column:span 2}
}