*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;font-family:Arial,Helvetica,sans-serif;background:#f5f7fb;color:#1f2937}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.6}a{color:inherit;text-decoration:none}#root{min-height:100vh}.app-layout{display:flex;min-height:100vh;background:#f5f7fb}.sidebar{position:fixed;top:0;left:0;width:250px;min-height:100vh;padding:28px 20px;display:flex;flex-direction:column;background:#111827;color:#fff;border-right:1px solid #1f2937;z-index:100}.sidebar-logo{padding:0 12px 28px;border-bottom:1px solid #374151}.sidebar-logo h2{margin:0;font-size:26px;color:#fff}.sidebar-logo p{margin-top:6px;color:#9ca3af;font-size:13px}.sidebar-menu{display:flex;flex-direction:column;gap:8px;margin-top:25px}.sidebar-link{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:9px;color:#d1d5db;font-size:15px;transition:background .2s,color .2s}.sidebar-link:hover{background:#1f2937;color:#fff}.sidebar-link.active{background:#4f46e5;color:#fff}.sidebar-icon{width:22px;text-align:center;font-size:19px}.logout-btn{width:100%;margin-top:auto;padding:13px 15px;display:flex;align-items:center;gap:13px;border:none;border-radius:9px;background:transparent;color:#d1d5db;font-size:15px;text-align:left;transition:background .2s,color .2s}.logout-btn:hover{background:#dc2626;color:#fff}.logo{margin-bottom:40px;font-size:24px;font-weight:700}.nav-links{display:flex;flex-direction:column;gap:8px}.nav-links a{padding:13px 15px;border-radius:9px;color:#d1d5db;font-size:15px}.nav-links a:hover{background:#1f2937;color:#fff}.nav-links a.active{background:#4f46e5;color:#fff;font-weight:600}.sidebar-bottom{margin-top:auto}.sidebar-bottom button{width:100%;padding:13px 15px;border:none;border-radius:9px;background:transparent;color:#fca5a5;font-size:15px;text-align:left}.sidebar-bottom button:hover{background:#dc2626;color:#fff}.main-content{width:calc(100% - 250px);min-height:100vh;margin-left:250px;padding:35px}.dashboard,.tasks-page,.trash-page,.profile-page{width:100%}.error-message{padding:12px 15px;margin-bottom:20px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;color:#dc2626;font-size:14px}.success-message{padding:12px 15px;margin-bottom:20px;border:1px solid #bbf7d0;border-radius:8px;background:#f0fdf4;color:#15803d;font-size:14px}.dashboard{width:100%}.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;padding:30px;border-radius:18px;background:linear-gradient(120deg,#111827,#312e81,#4f46e5);color:#fff;box-shadow:0 12px 30px #4f46e52e}.dashboard-label{display:inline-block;margin-bottom:10px;padding:6px 10px;border-radius:20px;background:#ffffff24;font-size:12px;font-weight:600}.dashboard-hero h1{margin-bottom:8px;font-size:34px}.dashboard-hero p{color:#d1d5db}.dashboard-add-task{flex-shrink:0;padding:12px 18px;border-radius:10px;background:#fff;color:#4f46e5;font-weight:700;transition:transform .2s,background .2s}.dashboard-add-task:hover{transform:translateY(-2px);background:#eef2ff}.dashboard-stats{margin-bottom:24px}.stat-card{position:relative;overflow:hidden;padding:22px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 7px 20px #1118270a;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #11182714}.stat-card:after{content:"";position:absolute;top:0;right:0;width:70px;height:70px;border-radius:0 0 0 70px;background:#4f46e50f}.stat-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.stat-icon{width:42px;height:42px;display:flex;justify-content:center;align-items:center;border-radius:11px;background:#eef2ff;color:#4f46e5;font-size:20px;font-weight:700}.stat-badge{padding:5px 9px;border-radius:20px;background:#f3f4f6;color:#6b7280;font-size:11px;font-weight:600}.stat-card p{margin-bottom:8px;color:#6b7280}.stat-card h2{margin-bottom:8px;font-size:34px;color:#111827}.stat-card small{color:#9ca3af;line-height:1.4}.stat-completed .stat-icon{background:#dcfce7;color:#16a34a}.stat-pending .stat-icon{background:#fef3c7;color:#d97706}.stat-overdue .stat-icon{background:#fee2e2;color:#dc2626}.dashboard-bottom-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;margin-bottom:24px}.dashboard-progress-card,.dashboard-quick-card,.recent-tasks-section{padding:24px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 7px 20px #1118270a}.dashboard-section-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.dashboard-section-header h2{margin-bottom:5px;font-size:20px}.dashboard-section-header p{color:#6b7280;font-size:13px}.dashboard-section-header>strong{color:#4f46e5;font-size:28px}.progress-track{width:100%;height:12px;overflow:hidden;border-radius:20px;background:#e5e7eb}.progress-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#4f46e5,#7c3aed);transition:width .4s ease}.progress-details{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.progress-details div{padding:14px;border:1px solid #e5e7eb;border-radius:11px;background:#f9fafb}.progress-details span{display:block;margin-bottom:6px;color:#6b7280;font-size:12px}.progress-details strong{font-size:20px}.dashboard-quick-links{display:flex;flex-direction:column;gap:11px}.dashboard-quick-links a{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #e5e7eb;border-radius:11px;transition:transform .2s,background .2s,border-color .2s}.dashboard-quick-links a:hover{transform:translate(4px);background:#f9fafb;border-color:#c7d2fe}.dashboard-quick-links a>span{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:10px;background:#eef2ff;color:#4f46e5;font-size:18px}.dashboard-quick-links strong{display:block;margin-bottom:3px;font-size:14px}.dashboard-quick-links small{color:#6b7280;font-size:11px}.view-all-link{color:#4f46e5;font-size:13px;font-weight:600}.recent-task-list{display:flex;flex-direction:column;gap:12px}.recent-task-item{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb}.recent-task-main{display:flex;align-items:center;gap:13px;min-width:0}.recent-task-icon{width:42px;height:42px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:11px;background:#eef2ff;color:#4f46e5;font-weight:700}.recent-task-main h3{margin-bottom:4px;font-size:15px}.recent-task-main p{max-width:500px;overflow:hidden;color:#6b7280;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.recent-task-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}.priority-pill,.status-pill{padding:6px 10px;border-radius:20px;font-size:11px;font-weight:600}.priority-pill{background:#eef2ff;color:#4f46e5}.status-pill{background:#f3f4f6;color:#4b5563}@media(max-width:1050px){.dashboard-bottom-grid{grid-template-columns:1fr}}@media(max-width:768px){.dashboard-hero{align-items:flex-start;flex-direction:column;padding:24px}.dashboard-add-task{width:100%;text-align:center}.progress-details{grid-template-columns:1fr}.recent-task-item{align-items:flex-start;flex-direction:column}.recent-task-meta{width:100%}}@media(max-width:500px){.dashboard-hero h1{font-size:28px}.dashboard-progress-card,.dashboard-quick-card,.recent-tasks-section{padding:19px}.dashboard-section-header{align-items:flex-start;flex-direction:column}.recent-task-meta{flex-wrap:wrap}}.task-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.task-header h1{font-size:32px}.add-btn{padding:12px 18px;border:none;border-radius:10px;background:#4f46e5;color:#fff;font-size:15px;font-weight:600;transition:background .2s}.add-btn:hover{background:#4338ca}.filters{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:25px}.filters input,.filters select{padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1f2937;font-size:14px}.filters input{flex:1;min-width:250px}.filters input:focus,.filters select:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}.task-card{padding:20px;background:#fff;border:1px solid #e5e7eb;border-radius:15px;box-shadow:0 2px 8px #00000008;transition:transform .2s,box-shadow .2s}.task-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000000f}.task-card h3{margin-bottom:10px;font-size:19px}.task-card p{margin-bottom:12px;color:#6b7280;line-height:1.5}.task-card.completed{opacity:.75}.task-card.completed h3{text-decoration:line-through}.task-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.task-buttons button{padding:8px 13px;border:none;border-radius:8px;font-size:13px;font-weight:600}.complete-btn{background:#22c55e;color:#fff}.complete-btn:hover{background:#16a34a}.edit-btn{background:#f59e0b;color:#fff}.edit-btn:hover{background:#d97706}.delete-btn{background:#ef4444;color:#fff}.delete-btn:hover{background:#dc2626}.task-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.task-badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#f3f4f6;color:#4b5563;font-size:12px;font-weight:600}.priority-low{background:#dcfce7;color:#15803d}.priority-medium{background:#fef3c7;color:#b45309}.priority-high{background:#fee2e2;color:#dc2626}.empty-state{padding:45px 25px;background:#fff;border:1px solid #e5e7eb;border-radius:15px;text-align:center}.empty-state h2,.empty-state h3{margin-bottom:8px}.empty-state p{color:#6b7280}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;justify-content:center;align-items:center;padding:20px;background:#1118278c}.modal{width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:30px;background:#fff;border-radius:15px;box-shadow:0 20px 50px #0000002e}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-header h2{margin:0}.modal-close-btn{padding:0;border:none;background:transparent;color:#6b7280;font-size:28px;line-height:1}.modal-close-btn:hover{color:#111827}.modal form{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column;gap:7px}.form-group label{color:#374151;font-size:14px;font-weight:600}.modal input,.modal textarea,.modal select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#1f2937;font-size:15px}.modal textarea{min-height:100px;resize:vertical}.modal input:focus,.modal textarea:focus,.modal select:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:5px}.modal-buttons button{padding:10px 18px;border:none;border-radius:8px;font-weight:600}.cancel-btn{background:#e5e7eb;color:#1f2937}.cancel-btn:hover{background:#d1d5db}.save-btn{background:#4f46e5;color:#fff}.save-btn:hover{background:#4338ca}.trash-header{margin-bottom:25px}.trash-header h1{margin-bottom:8px;font-size:32px}.trash-header p{color:#6b7280}.restore-btn{margin-top:15px;padding:10px 15px;border:none;border-radius:8px;background:#22c55e;color:#fff;font-weight:600}.restore-btn:hover{background:#16a34a}.profile-page{width:100%}.profile-page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.profile-page-header h1{margin-bottom:7px;font-size:32px}.profile-page-header p{color:#6b7280;line-height:1.5}.profile-status{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #bbf7d0;border-radius:30px;background:#f0fdf4;color:#15803d;font-size:13px;font-weight:600}.profile-status:before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e}.profile-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);gap:24px;align-items:start}.profile-main-card{overflow:hidden;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 8px 25px #1118270d}.profile-banner{height:115px;background:linear-gradient(120deg,#4f46e5,#7c3aed,#2563eb)}.profile-user-section{display:flex;align-items:center;gap:20px;padding:0 30px 25px}.profile-avatar{width:100px;height:100px;margin-top:-48px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border:5px solid white;border-radius:50%;background:#111827;color:#fff;box-shadow:0 8px 22px #11182733;font-size:34px;font-weight:700}.profile-user-info{padding-top:18px}.profile-user-info h2{margin-bottom:6px;font-size:25px}.profile-user-info p{margin-bottom:10px;color:#6b7280}.profile-role{display:inline-block;padding:6px 11px;border-radius:20px;background:#eef2ff;color:#4f46e5;font-size:12px;font-weight:600}.profile-divider{height:1px;margin:0 30px;background:#e5e7eb}.profile-details{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:28px 30px 32px}.profile-detail-item{display:flex;align-items:center;gap:13px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb}.profile-detail-icon{width:42px;height:42px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:11px;background:#eef2ff;color:#4f46e5;font-size:18px}.profile-detail-item div:last-child{min-width:0}.profile-detail-item span{display:block;margin-bottom:4px;color:#6b7280;font-size:12px}.profile-detail-item strong{display:block;overflow:hidden;color:#1f2937;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.profile-side-column{display:flex;flex-direction:column;gap:24px}.profile-stats-card,.profile-actions-card{padding:24px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 8px 25px #1118270d}.profile-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.profile-section-heading h3{font-size:18px}.profile-section-heading>span{color:#9ca3af;font-size:12px}.profile-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.profile-stat-box{padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb}.profile-stat-box span{display:block;margin-bottom:9px;color:#6b7280;font-size:12px}.profile-stat-box strong{font-size:25px;color:#4f46e5}.profile-action-links{display:flex;flex-direction:column;gap:10px}.profile-action-link{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid #e5e7eb;border-radius:11px;transition:transform .2s,border-color .2s,background .2s}.profile-action-link:hover{transform:translate(4px);border-color:#c7d2fe;background:#f9fafb}.profile-action-link>span{width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:10px;background:#eef2ff;color:#4f46e5;font-size:18px}.profile-action-link strong{display:block;margin-bottom:3px;font-size:14px}.profile-action-link small{display:block;color:#6b7280;font-size:11px}.profile-action-link b{color:#9ca3af}.profile-logout-button{width:100%;margin-top:18px;padding:12px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#dc2626;font-weight:600;transition:background .2s,color .2s}.profile-logout-button:hover{background:#dc2626;color:#fff}@media(max-width:1050px){.profile-layout{grid-template-columns:1fr}.profile-side-column{display:grid;grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.profile-page-header{align-items:flex-start;flex-direction:column}.profile-user-section{align-items:flex-start;flex-direction:column;padding:0 22px 22px}.profile-user-info{padding-top:0}.profile-details{grid-template-columns:1fr;padding:22px}.profile-divider{margin:0 22px}.profile-side-column{display:flex}}@media(max-width:500px){.profile-banner{height:95px}.profile-avatar{width:85px;height:85px;margin-top:-42px;font-size:29px}.profile-page-header h1{font-size:27px}.profile-stats-grid{grid-template-columns:1fr}.profile-stats-card,.profile-actions-card{padding:19px}}.auth-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;background:#f5f7fb}.auth-form{width:100%;max-width:400px;padding:35px;display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid #e5e7eb;border-radius:15px;box-shadow:0 10px 35px #0000000f}.auth-form h1{text-align:center;font-size:29px}.auth-form>p{color:#6b7280;text-align:center}.auth-form input{width:100%;padding:13px;border:1px solid #d1d5db;border-radius:8px;color:#1f2937;font-size:15px}.auth-form input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}.auth-form button{width:100%;padding:13px;border:none;border-radius:8px;background:#4f46e5;color:#fff;font-size:16px;font-weight:600;transition:background .2s}.auth-form button:hover:not(:disabled){background:#4338ca}.auth-form a{color:#4f46e5;font-weight:600}.auth-form a:hover{text-decoration:underline}.auth-form .error-message{margin-bottom:0;color:#dc2626;text-align:left}.loading-container{min-height:250px;display:flex;justify-content:center;align-items:center}.spinner{width:42px;height:42px;border:5px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.main-content{padding:28px}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.sidebar{width:75px;padding:24px 12px}.sidebar-logo{padding:0 0 22px}.sidebar-logo h2{font-size:17px;text-align:center}.sidebar-logo p{display:none}.sidebar-link,.logout-btn{justify-content:center;padding:13px}.sidebar-link span:last-child,.logout-btn span:last-child{display:none}.sidebar-icon{width:auto}.logo{font-size:15px;text-align:center}.nav-links a,.sidebar-bottom button{padding:13px 8px;text-align:center;font-size:12px}.main-content{width:calc(100% - 75px);margin-left:75px;padding:22px}.task-header{align-items:flex-start;flex-direction:column}.add-btn{width:100%}.filters{flex-direction:column}.filters input,.filters select{width:100%;min-width:0}.profile-card{padding:22px}}@media(max-width:500px){.main-content{padding:18px}.dashboard-header h1,.task-header h1,.trash-header h1,.profile-page h1{font-size:26px}.stats-grid,.task-grid{grid-template-columns:1fr}.task-buttons{flex-direction:column}.task-buttons button{width:100%}.modal{padding:22px}.modal-buttons{flex-direction:column-reverse}.modal-buttons button{width:100%}.auth-form{padding:28px 22px}.auth-form h1{font-size:25px}.empty-state{padding:35px 18px}}