@charset "UTF-8";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#f8fafc,#f1f5f9);min-height:100vh;padding:20px;color:#0f172a;line-height:1.6;font-size:16px}.app-container{max-width:720px;margin:0 auto}.header{text-align:center;margin-bottom:32px}.header h1{font-size:36px;font-weight:700;color:#0f172a;margin-bottom:8px;letter-spacing:-.025em}@media (max-width: 640px){.header h1{font-size:28px}}.header p{color:#475569;font-size:18px;margin-bottom:24px}@media (max-width: 640px){.header p{font-size:16px}}.header .stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.header .stats .stat{background:#fff;padding:16px 32px;border-radius:12px;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;border:1px solid #e2e8f0;min-width:120px;transition:all .3s ease}.header .stats .stat:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.header .stats .stat .stat-number{display:block;font-size:28px;font-weight:700;color:#6366f1;line-height:1;margin-bottom:4px}.header .stats .stat .stat-label{display:block;font-size:14px;color:#475569;font-weight:500}.content{background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border:1px solid #e2e8f0;overflow:hidden}.container{padding:32px}.container form{display:flex;gap:12px;margin-bottom:28px;flex-wrap:wrap}.container form input[type=text]{flex:1;min-width:250px;padding:14px 18px;border:2px solid #cbd5e1;border-radius:12px;font-size:16px;background:#fff;color:#0f172a;transition:all .2s ease;font-weight:500}.container form input[type=text]:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 4px #6366f11a;transform:translateY(-1px)}.container form input[type=text]::placeholder{color:#94a3b8;font-weight:400}.container form select{padding:14px 18px;border:2px solid #cbd5e1;border-radius:12px;background:#fff;color:#334155;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:140px}.container form select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 4px #6366f11a}.container form select:hover{border-color:#94a3b8}.container .filters{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap;justify-content:center}.container .filters .filter-btn{padding:10px 20px;border:2px solid #e2e8f0;background:#fff;color:#475569;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.container .filters .filter-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.container .filters .filter-btn.active{background:#6366f1;color:#fff;border-color:#6366f1;box-shadow:0 4px 12px #6366f140}.container ul{list-style:none;display:flex;flex-direction:column;gap:12px}.container ul li{display:flex;align-items:center;padding:20px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;transition:all .2s ease;position:relative;overflow:hidden}.container ul li:hover{border-color:#cbd5e1;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;transform:translate(4px)}.container ul li:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;transition:width .2s ease}.container ul li:hover:before{width:6px}.container ul li.high-priority:before{background:linear-gradient(180deg,#ef4444,#dc2626)}.container ul li.medium-priority:before{background:linear-gradient(180deg,#f59e0b,#d97706)}.container ul li.low-priority:before{background:linear-gradient(180deg,#10b981,#059669)}.container ul li .todo-checkbox{width:24px;height:24px;border:2px solid #cbd5e1;border-radius:6px;margin-right:16px;margin-left:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;position:relative}.container ul li .todo-checkbox:hover{border-color:#6366f1;transform:scale(1.1)}.container ul li .todo-checkbox.checked{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#4f46e5;animation:checkAnimation .3s ease-out}.container ul li .todo-checkbox.checked:after{content:"✓";color:#fff;font-size:14px;font-weight:700;animation:checkmarkAnimation .3s ease-out}.container ul li .todo-content{flex:1}.container ul li .todo-content .todo-text{font-size:16px;color:#0f172a;font-weight:500;margin-bottom:4px;transition:all .2s ease}.container ul li .todo-content .todo-text.completed{text-decoration:line-through;color:#64748b;opacity:.8}.container ul li .todo-content .todo-priority{font-size:13px;color:#64748b;font-weight:500}.container ul li .todo-actions{display:flex;gap:8px;opacity:0;transition:opacity .2s ease}.container ul li .todo-actions button{padding:8px 14px;font-size:13px;border-radius:8px;font-weight:600;transition:all .2s ease}.container ul li .todo-actions button.btn-warning{background:#f59e0b1a;color:#d97706;border:1px solid transparent}.container ul li .todo-actions button.btn-warning:hover{background:#f59e0b;color:#fff;transform:translateY(-1px)}.container ul li .todo-actions button.btn-danger{background:#ef44441a;color:#dc2626;border:1px solid transparent}.container ul li .todo-actions button.btn-danger:hover{background:#ef4444;color:#fff;transform:translateY(-1px)}.container ul li .todo-actions button.btn-success{background:#10b981;color:#fff;border:1px solid transparent}.container ul li .todo-actions button.btn-success:hover{background:#059669;transform:translateY(-1px)}.container ul li .todo-actions button.btn-outline{background:transparent;color:#475569;border:1px solid #cbd5e1}.container ul li .todo-actions button.btn-outline:hover{background:#f8fafc;border-color:#94a3b8}.container ul li:hover .todo-actions{opacity:1}@media (max-width: 640px){.container ul li .todo-actions{opacity:1}}.container ul li.completed{background:#f8fafc;opacity:.9}.container ul li.completed:hover{opacity:1}.container ul li .todo-input{flex:1;padding:10px 14px;border:2px solid #6366f1;border-radius:8px;font-size:15px;font-weight:500;background:#fff}.container ul li .todo-input:focus{outline:none;box-shadow:0 0 0 4px #6366f11a}.container ul li .todo-priority-select{width:100%;padding:8px 12px;border:2px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-size:14px;cursor:pointer;margin-top:8px}.container ul li .todo-priority-select:focus{outline:none;border-color:#6366f1;background:#fff}button{padding:14px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px;background:#f1f5f9;color:#334155;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff80;transform:translate(-50%,-50%);transition:width .6s,height .6s}button:active:before{width:300px;height:300px}button:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}button:focus{outline:none;box-shadow:0 0 0 4px #6366f133}button.add{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 4px 12px #6366f140}button.add:hover{background:linear-gradient(135deg,#4f46e5,#3a30e2);box-shadow:0 6px 20px #6366f159}button.danger{background:#ef44441a;color:#dc2626}button.danger:hover{background:#ef4444;color:#fff}button.primary{background:#f59e0b1a;color:#d97706}button.primary:hover{background:#f59e0b;color:#fff}button.success{background:#10b9811a;color:#059669}button.success:hover{background:#10b981;color:#fff}.empty-state{text-align:center;padding:60px 24px;color:#64748b}.empty-state .empty-icon{font-size:64px;margin-bottom:20px;opacity:.3;animation:float 3s ease-in-out infinite}.empty-state h3{font-size:20px;margin-bottom:12px;color:#334155;font-weight:600}.empty-state p{font-size:15px;color:#64748b;max-width:320px;margin:0 auto;line-height:1.6}.global-actions{display:flex;gap:12px;justify-content:center;margin-top:28px;padding-top:28px;border-top:2px solid #f1f5f9;flex-wrap:wrap}.notification{position:fixed;bottom:24px;right:24px;background:#0f172a;color:#fff;padding:16px 24px;border-radius:12px;font-size:15px;font-weight:500;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transform:translateY(100px);opacity:0;transition:all .3s ease;max-width:320px;z-index:1000}.notification.show{transform:translateY(0);opacity:1}.notification.success{background:linear-gradient(135deg,#10b981,#059669)}.notification.error{background:linear-gradient(135deg,#ef4444,#dc2626)}.empty-filter{text-align:center;padding:40px 20px;color:#64748b;font-style:italic;list-style:none}@media (max-width: 640px){body{padding:12px}.content{border-radius:12px}.container{padding:20px}.container form{gap:10px}.container form input[type=text],.container form select{min-width:100%}.container form button{width:100%}.container .filters{gap:8px}.container .filters .filter-btn{padding:8px 16px;font-size:13px}.container ul li{padding:16px}.container ul li .todo-checkbox{margin-right:12px;margin-left:4px}.container ul li .todo-actions button{padding:6px 10px;font-size:12px}button{font-size:14px;padding:12px 20px}.notification{left:12px;right:12px;bottom:12px}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes checkAnimation{0%{transform:scale(.8)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes checkmarkAnimation{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes slideOut{to{opacity:0;transform:translate(20px);max-height:0;padding-top:0;padding-bottom:0;margin:0}}.container ul li{animation:slideIn .3s ease-out}.removing{animation:slideOut .3s ease-out forwards}input:focus,select:focus,button:focus{position:relative;z-index:1}@media print{.header .stats,.filters,.global-actions,.todo-actions,.notification,form{display:none!important}body{background:#fff}.content{box-shadow:none;border:none}}