:root{--primary:#4f46e5;--primary-hover:#4338ca;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--danger-hover:#dc2626;--bg-color:linear-gradient(135deg, #4f7dd2 40%, #f0f8ff86 110%);--card-bg:#fff;--text-main:#0f172a;--text-muted:#64748b;--border-color:#e2e8f0}*{box-sizing:border-box;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}body{background:var(--bg-color);min-height:100vh;color:var(--text-main);background-attachment:fixed;margin:0;padding:20px;line-height:1.5}.app-container{max-width:1000px;margin:0 auto}.header{justify-content:space-between;align-items:center;margin-bottom:30px;display:flex}.header h1{color:var(--text-main);margin:0;font-size:24px;font-weight:700}.stats-container{flex-wrap:wrap;gap:20px;margin-bottom:30px;display:flex}.card{background:var(--card-bg);text-align:center;border:1px solid var(--border-color);border-radius:12px;flex:1;min-width:180px;padding:24px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.card:hover{transform:translateY(-5px);box-shadow:0 15px 15px -3px #00000025,0 4px 6px -2px #0000000d}.card h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;font-size:14px}.card p{margin:0;font-size:32px;font-weight:800}.filters-container{flex-wrap:wrap;gap:15px;margin-bottom:30px;display:flex}select,input,textarea{border:1px solid var(--border-color);border-radius:8px;outline:none;flex:1;min-width:200px;padding:12px;font-size:14px;transition:border-color .2s,box-shadow .2s}select:focus,input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4f46e526}.list-container{flex-direction:column;gap:16px;display:flex}.task-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;justify-content:space-between;align-items:center;padding:20px 24px;transition:all .2s;display:flex;box-shadow:0 2px 4px #0000000a}.task-card:hover{border-color:#cbd5e1;box-shadow:0 6px 10px #00000014}.is-completed{opacity:.6;background:#f8fafc}.is-completed h3{color:var(--text-muted);text-decoration:line-through}.task-info{flex:1;margin-right:20px}.task-header{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:8px;display:flex}.task-header h3{margin:0;font-size:18px;font-weight:600}.task-desc{color:var(--text-muted);margin:0 0 10px;font-size:15px}.task-buttons{flex-wrap:wrap;gap:8px;display:flex}.tag{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600}.tag-high{color:var(--danger);background:#fee2e2}.tag-medium{color:var(--warning);background:#fef3c7}.tag-low{color:var(--success);background:#d1fae5}.tag-red{background:var(--danger);color:#fff}.text-green{color:var(--success)!important}.text-orange{color:var(--warning)!important}.text-red{color:var(--danger)!important}button{cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s}.btn-blue{background:var(--primary);color:#fff}.btn-blue:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-light{color:var(--text-main);background:#f1f5f9}.btn-light:hover{background:#e2e8f0}.btn-red{color:var(--danger);border:1px solid var(--danger);background:#fff}.btn-red:hover{background:var(--danger);color:#fff}.pagination{justify-content:center;align-items:center;gap:20px;margin-top:30px;padding-bottom:20px;display:flex}.page-indicator{color:var(--text-muted);font-weight:600}button:disabled{opacity:.5;cursor:not-allowed}.modal-bg{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0f172a99;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-box{background:var(--card-bg);background:linear-gradient(135deg,#4f7dd2 40%,#f0f8ff86 110%);border-radius:16px;flex-direction:column;gap:16px;width:100%;max-width:500px;padding:32px;animation:.3s cubic-bezier(.16,1,.3,1) modalIn;display:flex;box-shadow:0 25px 50px -12px #00000040}.modal-box form{flex-direction:column;gap:16px;display:flex}.modal-box textarea{resize:vertical;min-height:100px}@keyframes modalIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.modal-box h2{margin:0 0 10px;font-size:20px}.modal-buttons{justify-content:flex-end;gap:12px;margin-top:16px;display:flex}.error-box{color:var(--danger);background:#fee2e2;border:1px solid #f87171;border-radius:8px;margin-bottom:24px;padding:16px;font-weight:500}.loading-text{text-align:center;color:var(--text-muted);padding:40px 0;font-size:16px;font-weight:500}.no-tasks{text-align:center;color:var(--text-muted);border:1px dashed var(--border-color);background:#fff;border-radius:12px;padding:40px}@media (width<=768px){.stats-container{gap:12px}.card{min-width:calc(50% - 12px);padding:20px}.task-card{flex-direction:column;align-items:flex-start;gap:16px}.task-info{width:100%;margin-right:0}.task-buttons{width:100%;display:flex}.task-buttons button{flex:1}}@media (width<=480px){body{padding:12px}.header{flex-direction:column;align-items:flex-start;gap:16px}.header button{width:100%}.card{min-width:100%}.filters-container{gap:10px}.filters-container select{min-width:100%}.task-buttons{flex-direction:column}.modal-box{border-radius:12px;width:95%;padding:24px}}