:root { --bg:#0f172a; --card:#1e293b; --accent:#38bdf8; --text:#e2e8f0; --muted:#94a3b8; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.app { background:var(--card); padding:2rem; border-radius:16px; width:min(480px, 92vw); box-shadow:0 20px 50px rgba(0,0,0,.4); }
h1 { margin:0 0 1.25rem; font-size:1.5rem; }
form { display:flex; gap:.5rem; }
input[type=text] { flex:1; padding:.75rem 1rem; border-radius:10px; border:1px solid #334155; background:#0f172a; color:var(--text); font-size:1rem; }
input[type=text]:focus { outline:2px solid var(--accent); border-color:transparent; }
form button { padding:.75rem 1.25rem; }
button { border:0; border-radius:10px; background:var(--accent); color:#0f172a; font-weight:600; cursor:pointer; font-size:1rem; }
button:hover { filter:brightness(1.1); }
ul { list-style:none; margin:1.25rem 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
li { display:flex; align-items:center; gap:.75rem; background:#0f172a; padding:.75rem 1rem; border-radius:10px; }
li span { flex:1; word-break:break-word; cursor:text; }
li.done span { text-decoration:line-through; color:var(--muted); }
li button { background:transparent; color:var(--muted); font-size:1rem; padding:.25rem .5rem; }
li button:hover { color:#f87171; filter:none; }
footer { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.875rem; }
footer button { background:transparent; color:var(--muted); font-size:.875rem; }
footer button:hover { color:var(--accent); filter:none; }
.version { color:#64748b; font-size:.75rem; }