:root{--primary:#6366f1;--primary-dark:#5568d3;--secondary:#a855f7;--bg-gradient:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);--bg-dark:#0a0a0a;--bg-card:#1a1a1a;--bg-card-hover:#1f1f1f;--border:#2a2a2a;--border-hover:#3a3a3a;--text:#ededed;--text-light:#a0a0a0;--shadow:0 20px 60px #00000080;--radius:16px}.tasks-page{background:var(--bg-dark);min-height:100vh;padding:20px}.gallery-top-header{max-width:900px;margin:0 auto 20px;padding-bottom:16px}.back-button{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:12px;align-items:center;padding:12px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 20px #0000004d}.back-button:hover{background:var(--bg-card-hover);border-color:var(--primary);transform:translate(-4px);box-shadow:0 6px 30px #6366f166}.back-button .mr-2{margin-right:8px;transition:transform .3s}.back-button:hover .mr-2{transform:translate(-4px)}.tasks-top-header{max-width:900px;margin:0 auto;padding-bottom:10px}.tasks-container{max-width:900px;margin:0 auto}.tasks-header{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:20px;padding:30px}.tasks-header h1{color:var(--text);background:linear-gradient(135deg,#fff 0%,#a0a0a0 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:32px;font-weight:700}.badge{color:#a78bfa;background:linear-gradient(135deg,#6366f133 0%,#a855f733 100%);border:1px solid #a855f74d;border-radius:24px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-block}.add-task-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:20px;padding:25px}.add-task-card h2{color:var(--text);margin-bottom:20px;font-size:22px;font-weight:700}.form-group{margin-bottom:15px}.form-group label{color:var(--text);margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group input,.form-group textarea,.form-group select{border:1px solid var(--border);background:var(--bg-card-hover);width:100%;color:var(--text);border-radius:10px;padding:12px;font-family:inherit;font-size:14px;transition:all .3s}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-light)}.form-group textarea{resize:vertical;min-height:80px}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);background:#252525;outline:none;box-shadow:0 0 0 3px #6366f11a}.form-row{grid-template-columns:1fr 1fr 1fr;gap:15px;display:grid}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);border:none;border-radius:12px;width:100%;padding:12px 24px;font-size:14px;font-weight:700;transition:all .3s;box-shadow:0 4px 20px #6366f166}.btn-primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 30px #6366f199}.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.filters-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);align-items:center;gap:15px;margin-bottom:20px;padding:20px;display:flex}.filters-card select{border:1px solid var(--border);background:var(--bg-card-hover);color:var(--text);cursor:pointer;border-radius:10px;flex:1;padding:12px;font-size:14px;transition:all .3s}.filters-card select:hover{border-color:var(--border-hover);background:#252525}.filters-card select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #6366f11a}.btn-secondary{background:var(--bg-card-hover);border:1px solid var(--border);cursor:pointer;color:var(--text);border-radius:12px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .3s}.btn-secondary:hover{border-color:var(--border-hover);background:#252525;transform:translateY(-2px)}.tasks-list-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:25px}.tasks-list-card h2{color:var(--text);margin-bottom:20px;font-size:22px;font-weight:700}.task-card{border:1px solid var(--border);background:var(--bg-card-hover);border-radius:12px;margin-bottom:15px;padding:20px;transition:all .3s;animation:.3s ease-out slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.task-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:0 8px 30px #6366f14d}.task-header{justify-content:space-between;align-items:flex-start;margin-bottom:10px;display:flex}.task-title{color:var(--text);font-size:18px;font-weight:600}.task-actions{gap:8px;display:flex}.btn-small{cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:12px;font-weight:600;transition:all .3s}.btn-small:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.btn-delete{color:#fff;background:#ef4444}.btn-delete:hover{background:#dc2626}.btn-complete{color:#fff;background:#10b981}.btn-complete:hover{background:#059669}.task-description{color:var(--text-light);margin-bottom:10px;line-height:1.5}.task-meta{flex-wrap:wrap;gap:10px;font-size:12px;display:flex}.status-badge{border:1px solid;border-radius:12px;padding:6px 12px;font-weight:600}.status-pending{color:#fbbf24;background:#eab3081a;border-color:#eab3084d}.status-in-progress{color:#60a5fa;background:#3b82f61a;border-color:#3b82f64d}.status-completed{color:#34d399;background:#10b9811a;border-color:#10b9814d}.priority-high{color:#f87171;background:#ef44441a;border-color:#ef44444d}.priority-medium{color:#fbbf24;background:#eab3081a;border-color:#eab3084d}.priority-low{color:#34d399;background:#10b9811a;border-color:#10b9814d}.date-meta{color:var(--text-light)}.empty-state{text-align:center;padding:60px 20px}.empty-state-icon{filter:drop-shadow(0 4px 20px #6366f14d);margin-bottom:16px;font-size:64px}.empty-state h3{color:var(--text);margin-bottom:8px;font-weight:600}.empty-state p{color:var(--text-light)}.loading{text-align:center;padding:40px 20px}.spinner{border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:50px;height:50px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-message{color:#f87171;background:#ef44441a;border:1px solid #ef44444d;border-radius:12px;margin-bottom:20px;padding:14px 24px;animation:.3s ease-out slideIn}@media (max-width:768px){.form-row{grid-template-columns:1fr}.filters-card{flex-direction:column}.filters-card select,.btn-secondary{width:100%}.task-header{flex-direction:column;gap:12px}.task-actions{width:100%}.btn-small{flex:1}}