@import"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e0e11;--surface: #17171c;--border: #2a2a33;--accent: #c8f060;--accent-dim: rgba(200,240,96,.12);--text: #f0f0ee;--muted: #7a7a85;--danger: #ff6b6b;--radius: 16px}body{background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 40% at 70% 10%,rgba(200,240,96,.06),transparent 70%),radial-gradient(ellipse 50% 50% at 10% 90%,rgba(100,80,200,.06),transparent 70%);pointer-events:none;z-index:0}.app{width:100%;max-width:520px;position:relative;z-index:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:36px 32px 28px;box-shadow:0 32px 80px #00000080;position:relative;z-index:1;transition:all .3s ease}header{margin-bottom:28px}.logo{font-size:20px;color:var(--accent);margin-bottom:8px;display:inline-block;animation:spin 8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}h1{font-family:Fraunces,serif;font-size:2.4rem;font-weight:300;letter-spacing:-.02em;margin-bottom:6px}.subtitle{color:var(--muted);font-size:.85rem}.add-form{display:flex;gap:10px;margin-bottom:20px}.add-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 16px;color:var(--text);outline:none}.add-input:focus{border-color:var(--accent)}.add-btn{width:44px;height:44px;border-radius:12px;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.filter-bar{display:flex;gap:6px;margin-bottom:20px}.filter-btn{padding:6px 14px;border-radius:99px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:.2s}.filter-btn:hover{border-color:var(--accent);color:var(--text)}.filter-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.todo-list{display:flex;flex-direction:column;gap:6px}.todo-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);background:var(--bg);transition:transform .2s ease,border .2s ease}.todo-item:hover{transform:translate(4px)}.todo-item.done .todo-title{text-decoration:line-through;color:var(--muted)}.loading,.empty{text-align:center;padding:32px;color:var(--muted)}.error-banner{color:var(--danger);margin-bottom:10px}.clear-btn{margin-top:20px;width:100%;padding:10px;background:transparent;border:1px dashed var(--border);border-radius:12px;color:var(--muted);cursor:pointer;transition:.2s}.clear-btn:hover{border-color:var(--danger);color:var(--danger)}.auth-card{text-align:center;position:relative;overflow:hidden;z-index:2}.auth-card:before{content:"";position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background:radial-gradient(circle,rgba(200,240,96,.15),transparent 60%);animation:floatGlow 6s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes floatGlow{0%,to{transform:translate(0)}50%{transform:translate(10px,-10px)}}.signin-btn{margin-top:20px;padding:12px 20px;border-radius:12px;border:1px solid var(--border);background:var(--accent);color:#0e0e11;font-weight:500;cursor:pointer;position:relative;z-index:5;transition:all .2s ease}.signin-btn:hover{transform:translateY(-2px);opacity:.9}button{transition:all .2s ease}button:hover{transform:scale(1.03)}@media (max-width: 480px){.card{padding:28px 20px;border-radius:20px}h1{font-size:2rem}}