@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}:root{--primary: #6366f1;--primary-dark: #818cf8;--danger: #ef4444;--danger-dark: #f87171;--success: #10b981;--success-dark: #34d399;--icon-light: #374151;--icon-dark: #d1d5db;--bg: #f9fafb;--text: #111827;--subtext: #6b7280;--card: #ffffff;--input: #f3f4f6;--accent: #e0e7ff;--tag-bg: #e5e7eb}.link-button{background:none;border:none;color:#007bff;cursor:pointer;text-decoration:underline;font-size:14px;padding:0;margin-left:5px;margin-top:5px}.link-button:hover{color:#0056b3}.toggle-auth{margin-top:20px;font-size:14px;text-align:center}.error-message{color:red;margin:8px 0;font-weight:500}.input-group{position:relative;margin-bottom:16px}.input-group .input-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#888}.input-group input{padding-left:32px;width:100%}.app-container{padding:24px;background:var(--bg);color:var(--text);min-height:100vh;transition:background .4s,color .4s}.app-container.dark{--bg: #1e293b;--card: #273449;--input: #334155;--text: #f1f5f9;--subtext: #cbd5e1;--accent: #3b4c66;--tag-bg: #3b4c66;--primary: #818cf8;--primary-dark: #a5b4fc;--danger: #ef4444;--danger-dark: #f87171;--success: #10b981;--success-dark: #34d399}.header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:24px}.header h2{font-size:2rem;font-weight:600;color:var(--primary)}.app-title{font-size:1.8rem;font-weight:600}.welcome-text{margin-top:-.3rem;font-size:1rem;color:var(--subtext)}@media (max-width: 768px){.header h2{font-size:1.4rem;width:100%;color:var(--primary)}}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:1rem 0;justify-content:center}.toolbar button{display:flex;align-items:center;gap:6px;background:var(--primary);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:.95rem;cursor:pointer;transition:background .3s,transform .2s}.toolbar button:hover{background:var(--primary-dark);transform:translateY(-1px)}.toolbar button.sample{background:var(--success)}.toolbar button.sample:hover{background:var(--success-dark)}.toolbar button.logout{background:var(--danger)}.toolbar button.logout:hover{background:var(--danger-dark)}.toolbar button.toggle{background:#4b5563}.toolbar button.toggle:hover{background:#6b7280}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2rem;background:linear-gradient(135deg,#c3dafe,#f0f9ff,#fdf2f8);background-size:300% 300%;animation:gradientBG 12s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.login-box{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background-color:#ffffff4d;border-radius:16px;padding:40px 30px;width:100%;max-width:420px;box-shadow:0 10px 40px #0000001a;border:1px solid rgba(255,255,255,.4);transition:transform .3s ease}.login-box:hover{transform:translateY(-4px)}.login-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.login-icon{font-size:2rem;color:var(--primary)}.login-box h1{font-size:1.8rem;font-weight:700;color:var(--primary)}.login-box h2{text-align:center;font-size:1.05rem;color:#374151;margin-bottom:24px}.input-group{display:flex;align-items:center;background:var(--input);border-radius:10px;padding:10px 14px;margin-bottom:20px}.input-icon{font-size:1rem;color:#6b7280;margin-right:10px}.login-box input{flex:1;border:none;outline:none;background:transparent;font-size:1rem;color:var(--text)}.login-box input:focus{background:transparent}.login-box button{width:100%;padding:14px;border:none;border-radius:10px;background:var(--primary);color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:background .3s ease,transform .2s ease;display:flex;align-items:center;justify-content:center}.login-box button:hover{background:var(--primary-dark);transform:translateY(-2px)}.modal-overlay{position:fixed;inset:0;background:#00000059;display:flex;justify-content:center;align-items:center;padding:16px;z-index:99}.modal-content{background:var(--card);border-radius:16px;margin:1rem;padding:2rem 1.5rem;width:100%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 16px 40px #0003;animation:fadeIn .3s ease-out;position:relative}@keyframes fadeIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.5rem;color:var(--subtext);cursor:pointer}@media (max-width: 768px){.modal-content{padding:1.25rem;margin:1rem}}@media (max-width: 480px){.modal-content{padding:1rem;margin:.5rem;height:70vh;max-height:70vh}.modal-close{font-size:1.5rem;top:1px;right:15px}}.form-heading{font-size:1.8rem;font-weight:600;color:var(--primary);margin:0 auto 20px;text-align:center}@media (max-width: 768px){.form-heading{font-size:1.4rem}}@media (max-width: 480px){.form-heading{font-size:1.2rem}}.task-form{display:flex;flex-direction:column;gap:20px;margin:0 auto;padding:0 10px;width:100%;max-width:100%}.task-form label{display:flex;flex-direction:column;font-weight:600;font-size:.95rem}.task-form label span{color:var(--danger);margin-left:4px}.task-form input,.task-form select,.task-form textarea{width:100%;padding:14px;border-radius:8px;background:var(--input);border:2px solid transparent;color:var(--text);margin-top:8px;font-size:.95rem;transition:border-color .3s ease}.task-form input:focus,.task-form select:focus,.task-form textarea:focus{border-color:var(--primary);outline:none;background-color:#fff}.task-form textarea{resize:vertical;min-height:100px}.inline-label{display:flex;align-items:center;gap:4px;font-weight:600;margin-bottom:6px}.form-buttons{display:flex;justify-content:flex-end;gap:14px;margin-top:12px;flex-wrap:wrap}.form-buttons button{padding:12px 20px;border:none;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .3s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 6px #00000014}.form-buttons button[type=submit]{background-color:var(--primary);color:#fff}.form-buttons button[type=submit]:hover{background-color:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 10px #6366f133}.form-buttons button[type=button]{background-color:var(--danger);color:#fff}.form-buttons button[type=button]:hover{background-color:var(--danger-dark);transform:translateY(-1px);box-shadow:0 4px 10px #ef444433}@media (max-width: 768px){.form-buttons{flex-direction:column;align-items:stretch}.task-item{flex-direction:column;gap:16px}.toolbar{justify-content:center}.toolbar button{flex:1 1 calc(50% - 12px);padding:10px;font-size:.85rem}}@media (max-width: 500px){.form-buttons{flex-direction:row!important;flex-wrap:nowrap;justify-content:space-between;gap:10px}.form-buttons button{flex:1 1 48%;padding:10px;font-size:.9rem;min-width:0;white-space:nowrap}}.controls{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:nowrap;margin-bottom:24px}.search,.sort{padding:12px;border:none;border-radius:8px;background:var(--input);color:var(--text);flex:1;min-width:200px}@media (max-width: 768px){.controls{flex-direction:column;align-items:stretch}.search,.sort{width:100%;font-size:.95rem}}.tab-filter{display:flex;gap:12px;flex-wrap:nowrap;justify-content:flex-start;margin:0;flex:1}.tab-filter button{padding:10px 16px;border-radius:30px;background:var(--accent);color:var(--primary);border:2px solid transparent;cursor:pointer;font-weight:500;transition:background .3s,box-shadow .3s;white-space:nowrap}.tab-filter button.active{background:var(--primary);color:#fff;border-color:var(--primary-dark);box-shadow:0 0 6px #6366f166}@media (max-width: 768px){.tab-filter{flex-wrap:wrap;justify-content:center;margin-bottom:1rem}.tab-filter button{flex:0 1 auto;font-size:.8rem;padding:8px 12px}}.task-list{display:grid;gap:1.5rem;margin-bottom:1rem}.no-tasks{text-align:center;margin-top:3rem;font-size:1rem;color:var(--subtext)}.with-margin{margin-top:2rem}.task-item{display:flex;justify-content:space-between;align-items:flex-start;background:var(--card);border-left:5px solid transparent;border-radius:12px;padding:20px;box-shadow:0 3px 12px #0000000a;transition:transform .3s ease}.task-item:hover{transform:translateY(-4px)}.task-item.completed{border-left-color:var(--success)}.task-item .info{flex:1;padding-right:12px}.task-item .info h3{font-size:1.2rem;margin-bottom:6px}.task-item .info p{margin-bottom:8px;color:var(--subtext)}.task-item .meta{font-size:.85rem;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}.task-item .meta span{background:var(--tag-bg);padding:4px 10px;border-radius:999px;font-size:.75rem}.task-item .meta .due{background:var(--accent)}.task-item .meta .priority-high{background:#fee2e2;color:#b91c1c}.task-item .meta .priority-medium{background:#fef3c7;color:#92400e}.task-item .meta .priority-low{background:#e0f2fe;color:#0369a1}@media (max-width: 480px){.task-item .actions{flex-direction:row;justify-content:space-between}.task-item .actions button{font-size:.85rem;gap:4px;padding:4px 8px}}.task-item .actions{display:flex;gap:12px;margin-left:12px}.task-item .actions button{display:flex;align-items:center;gap:6px;background:none;border:none;font-size:1rem;color:var(--icon-light);cursor:pointer;transition:color .3s}.app-container.dark .task-item .actions button{color:var(--icon-dark)}.task-item .actions button:hover{color:var(--primary)}@media (max-width: 768px){.task-item{flex-direction:column;gap:16px}.form-buttons{flex-direction:column;align-items:stretch}.toolbar{justify-content:center}.toolbar button{flex:1 1 calc(50% - 12px);padding:10px;font-size:.85rem}}