*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background:#f5f7fb;color:#172033}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}img{max-width:100%;display:block}.app-layout{display:flex;min-height:100vh}.main-area{flex:1;min-width:0}.sidebar{width:250px;min-height:100vh;background:#111827;color:#fff;padding:25px 15px;display:flex;flex-direction:column;transition:width .3s ease;flex-shrink:0}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px;padding:0 5px}.sidebar-logo{font-size:30px;margin:0}.sidebar-toggle{width:38px;height:38px;border:none;border-radius:8px;background:#1f2937;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}.sidebar-toggle:hover{background:#2563eb}.sidebar-nav{display:flex;flex-direction:column;gap:8px}.sidebar-nav a{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:10px;color:#cbd5e1;transition:.2s;white-space:nowrap}.sidebar-nav a:hover{background:#1e293b;color:#fff}.sidebar-nav a.active{background:#2563eb;color:#fff}.nav-icon{width:25px;min-width:25px;text-align:center;font-size:19px}.logout{margin-top:auto;width:100%;padding:13px 12px;border:none;border-radius:10px;background:#f1f1f1;color:#000;cursor:pointer;display:flex;align-items:center;gap:14px;font-size:16px;transition:.2s}.logout:hover{background:#fee2e2;color:#b91c1c}.sidebar.collapsed{width:80px}.sidebar.collapsed .sidebar-header{justify-content:center}.sidebar.collapsed .sidebar-logo{display:none}.sidebar.collapsed .sidebar-toggle{margin:0}.sidebar.collapsed .nav-text{display:none}.sidebar.collapsed .sidebar-nav a{justify-content:center;padding:13px 8px}.sidebar.collapsed .logout{justify-content:center}.sidebar.collapsed .logout .nav-text{display:none}.navbar{height:72px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.navbar h2{font-size:20px}.profile{display:flex;align-items:center;gap:10px;font-weight:500;white-space:nowrap}.profile-image{width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;min-height:40px!important;max-height:40px!important;border-radius:50%;object-fit:cover;border:2px solid #2563eb;display:block}.profile-placeholder{width:40px;height:40px;min-width:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e5e7eb;font-size:20px}.page{padding:30px}.page-heading{margin-bottom:25px}.page-heading h1{font-size:30px;margin-bottom:8px}.page-heading p{color:#64748b}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:35px}.overall-progress{background:#fff;padding:24px;border-radius:14px;margin-bottom:35px;box-shadow:0 3px 15px #0000000d}.overall-progress-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.overall-progress-header h2{margin:0 0 6px;font-size:20px}.overall-progress-header p{margin:0;color:#64748b;font-size:14px}.overall-progress-header strong{font-size:24px;color:#2563eb}.overall-progress-bar{width:100%;height:12px;background:#e2e8f0;border-radius:20px;overflow:hidden}.overall-progress-bar div{height:100%;background:#2563eb;border-radius:20px;transition:width .4s ease}.stat-card{background:#fff;padding:22px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 3px 15px #0000000d}.stat-card p{color:#64748b;margin-bottom:8px}.stat-card h2,.stat-icon{font-size:28px}.section-title{margin-bottom:18px}.task-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.task-card{background:#fff;border-radius:16px;padding:22px;border:1px solid #e2e8f0;box-shadow:0 4px 16px #0000000f;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.task-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px #0000001a;border-color:#cbd5e1}.task-card-top{display:flex;justify-content:space-between;margin-bottom:18px}.task-card h3{margin-bottom:10px}.task-card>p{color:#64748b;line-height:1.5}.task-meta{display:flex;flex-direction:column;gap:7px;margin:18px 0;color:#475569;font-size:14px}.status,.priority{display:inline-block;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:600}.status{background:#e0f2fe;color:#0369a1}.status.pending{background:#fef3c7;color:#92400e}.status.in-progress{background:#dbeafe;color:#1d4ed8}.status.completed{background:#dcfce7;color:#166534}.priority{background:#f1f5f9;color:#475569}.high{background:#fee2e2;color:#b91c1c}.medium{background:#fef3c7;color:#92400e}.low{background:#dcfce7;color:#166534}.progress-header{display:flex;justify-content:space-between;margin-bottom:7px;font-size:14px}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:10px;overflow:hidden}.progress-bar div{height:100%;background:#2563eb;transition:width .3s}.view-task{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;padding:10px 16px;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease}.view-task:hover{background:#2563eb;color:#fff;transform:translate(3px)}.filters{display:flex;gap:15px;margin-bottom:25px}.filters input,.filters select{padding:12px;border:1px solid #d1d5db;border-radius:8px;background:#fff}.filters input{flex:1}.task-form{max-width:700px;background:#fff;border-radius:14px;padding:22px;box-shadow:0 3px 15px #0000000d;display:flex;flex-direction:column;gap:15px}.task-form input,.task-form textarea,.task-form select{width:100%;padding:13px;border:1px solid #d1d5db;border-radius:8px;outline:none}.task-form input:focus,.task-form textarea:focus,.task-form select:focus{border-color:#2563eb}.task-form textarea{min-height:120px;resize:vertical}.task-form button,.login-box button{padding:13px;border:none;border-radius:8px;background:#2563eb;color:#fff;cursor:pointer;transition:.2s}.task-form button:hover,.login-box button:hover{background:#1d4ed8}.details-card{max-width:800px;margin-top:25px;background:#fff;border-radius:14px;padding:25px;box-shadow:0 3px 15px #0000000d}.details-card h1{margin:18px 0 12px}.details-card>p{color:#64748b;margin-bottom:25px;line-height:1.6}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:25px}.login-page{min-height:100vh;display:grid;place-items:center;background:#f1f5f9}.login-box{width:min(400px,90%);background:#fff;padding:35px;border-radius:16px;box-shadow:0 5px 25px #00000014}.login-box h1{margin-bottom:8px}.login-box p{color:#64748b;margin-bottom:25px}.login-box input{width:100%;padding:13px;margin-bottom:15px;border:1px solid #d1d5db;border-radius:8px;outline:none}.login-box input:focus{border-color:#2563eb}.login-box button{width:100%}.settings-page{max-width:1000px}.settings-card{background:#fff;border-radius:14px;padding:25px;margin-bottom:22px;box-shadow:0 3px 15px #0000000d}.settings-card-header{display:flex;justify-content:space-between;margin-bottom:22px}.settings-card-header h2{margin-bottom:6px}.settings-card-header p{color:#64748b}.settings-message{padding:13px 16px;margin-bottom:20px;border-radius:8px;background:#dcfce7;color:#166534;font-weight:500}.settings-form{display:flex;flex-direction:column;gap:18px}.form-group{display:flex;flex-direction:column;gap:7px}.form-group label{font-weight:600;color:#374151}.form-group input,.form-group select{width:100%;padding:12px 13px;border:1px solid #d1d5db;border-radius:8px;outline:none;background:#fff}.form-group input:focus,.form-group select:focus{border-color:#2563eb}.settings-profile{display:flex;align-items:center;gap:20px;margin-bottom:10px}.settings-profile-image{width:85px!important;height:85px!important;min-width:85px!important;max-width:85px!important;min-height:85px!important;max-height:85px!important;border-radius:50%;object-fit:cover;border:3px solid #2563eb;display:block}.settings-profile-placeholder{width:85px;height:85px;min-width:85px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e5e7eb;font-size:35px}.photo-button{padding:10px 15px;border:1px solid #2563eb;border-radius:8px;color:#2563eb;cursor:pointer;font-weight:600;display:inline-block}.photo-button:hover{background:#eff6ff}.photo-button input{display:none}.primary-button{width:fit-content;padding:11px 20px;border:none;border-radius:8px;background:#2563eb;color:#fff;cursor:pointer;font-weight:600}.primary-button:hover{background:#1d4ed8}.danger-button{margin-top:25px;padding:11px 20px;border:none;border-radius:8px;background:#fee2e2;color:#b91c1c;cursor:pointer;font-weight:600}.danger-button:hover{background:#fecaca}.settings-options{display:flex;flex-direction:column}.setting-option{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #e5e7eb;cursor:pointer}.setting-option:last-child{border-bottom:none}.setting-option strong{display:block;margin-bottom:4px}.setting-option span{color:#64748b;font-size:14px}.setting-option input{width:20px;height:20px;cursor:pointer}.theme-options{display:flex;gap:12px}.theme-button{padding:12px 20px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;transition:.2s}.theme-button:hover{border-color:#2563eb}.theme-button.active{background:#2563eb;color:#fff;border-color:#2563eb}.about-content h3{margin-bottom:10px}.about-content p{color:#64748b;margin-bottom:10px;line-height:1.5}.technology-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.technology-list span{padding:6px 10px;background:#eff6ff;color:#1d4ed8;border-radius:20px;font-size:13px;font-weight:600}.copyright{margin-top:20px}body.dark-mode{background:#0f172a;color:#e2e8f0}body.dark-mode .navbar{background:#1e293b;border-color:#334155}body.dark-mode .settings-card,body.dark-mode .stat-card,body.dark-mode .task-card,body.dark-mode .details-card,body.dark-mode .task-form{background:#1e293b;color:#e2e8f0}body.dark-mode .settings-card-header p,body.dark-mode .form-group label,body.dark-mode .setting-option span,body.dark-mode .about-content p,body.dark-mode .page-heading p{color:#94a3b8}body.dark-mode .form-group input,body.dark-mode .form-group select,body.dark-mode .theme-button{background:#0f172a;color:#e2e8f0;border-color:#475569}body.dark-mode .setting-option{border-color:#334155}body.dark-mode .technology-list span{background:#172554;color:#93c5fd}@media(max-width:1000px){.stats-grid,.task-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.overall-progress{padding:18px}.overall-progress-header{align-items:flex-start}.overall-progress-header strong{font-size:20px}.task-card{padding:18px}.view-task{width:100%}.sidebar{width:80px;padding:20px 10px}.sidebar-logo{display:none}.sidebar-header{justify-content:center}.sidebar-nav a{justify-content:center;padding:13px 8px}.sidebar-nav .nav-text{display:none}.logout{justify-content:center}.logout .nav-text{display:none}.main-area{width:calc(100% - 80px)}.navbar{padding:0 15px}.navbar h2{font-size:16px}.profile{gap:6px}.profile span{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page{padding:20px 15px}.stats-grid,.task-grid,.details-grid{grid-template-columns:1fr}.filters{flex-direction:column}.settings-card{padding:18px}.settings-profile{flex-direction:column;align-items:flex-start}.theme-options{flex-direction:column}.theme-button{width:100%}.setting-option{align-items:flex-start}}@media(max-width:450px){.sidebar{width:65px;padding:15px 7px}.main-area{width:calc(100% - 65px)}.sidebar-toggle{width:34px;height:34px;font-size:17px}.nav-icon{font-size:17px;width:22px;min-width:22px}.navbar{height:65px;padding:0 10px}.navbar h2{font-size:14px}.profile-image,.profile-placeholder{width:35px!important;height:35px!important;min-width:35px!important;max-width:35px!important}.page{padding:15px 10px}.page-heading h1{font-size:24px}.settings-card{padding:15px}}.empty-tasks{background:#fff;border-radius:14px;padding:60px 30px;text-align:center;box-shadow:0 3px 15px #0000000d;max-width:700px}.empty-task-icon{font-size:50px;margin-bottom:15px}.empty-tasks h3{font-size:22px;margin-bottom:8px}.empty-tasks p{color:#64748b;margin-bottom:25px}.empty-tasks .primary-button{margin:0 auto}.auth-page{min-height:100vh;display:flex;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a,#1e1b4b)}.auth-shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35;pointer-events:none;animation:floatingShape 8s ease-in-out infinite}.shape-one{width:300px;height:300px;background:#2563eb;top:-100px;left:-80px}.shape-two{width:250px;height:250px;background:#7c3aed;bottom:-80px;right:20%;animation-delay:2s}.shape-three{width:180px;height:180px;background:#06b6d4;top:20%;right:5%;animation-delay:4s}@keyframes floatingShape{0%{transform:translateY(0)}50%{transform:translateY(-25px)}to{transform:translateY(0)}}.auth-brand{width:50%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:50px;color:#fff;position:relative;z-index:2}.brand-content{max-width:500px;animation:brandEntrance .8s ease}@keyframes brandEntrance{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}.brand-logo,.mobile-logo{width:65px;height:65px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:24px;font-weight:800;box-shadow:0 10px 30px #2563eb66}.brand-content h1{margin-top:30px;font-size:clamp(40px,5vw,65px);line-height:1.05}.brand-content>p{margin-top:25px;max-width:430px;color:#cbd5e1;font-size:18px;line-height:1.7}.brand-features{margin-top:35px;display:flex;flex-direction:column;gap:15px}.brand-features div{display:flex;align-items:center;gap:12px;color:#e2e8f0;font-size:16px}.brand-features span{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#2563eb4d;color:#60a5fa}.auth-container{width:50%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;position:relative;z-index:5}.auth-card{width:min(460px,100%);background:#fffffff7;border-radius:24px;padding:38px;box-shadow:0 25px 70px #00000040;animation:cardEntrance .7s ease;transition:transform .4s ease,height .4s ease}@keyframes cardEntrance{0%{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.auth-header{text-align:center;margin-bottom:28px}.auth-header h2{margin-top:18px;font-size:28px;color:#172033}.auth-header p{margin-top:8px;color:#64748b;line-height:1.5}.mobile-logo{display:none;margin:0 auto}.auth-error,.auth-success{padding:12px 14px;border-radius:9px;margin-bottom:18px;font-size:14px}.auth-error{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}.auth-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.auth-form{display:flex;flex-direction:column;gap:17px}.auth-input-group{display:flex;flex-direction:column;gap:7px}.auth-input-group label{font-size:14px;font-weight:600;color:#374151}.auth-input-wrapper{display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #d1d5db;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}.auth-input-wrapper:focus-within{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1a;transform:translateY(-1px)}.auth-input-wrapper span{font-size:18px}.auth-input-wrapper input{width:100%;padding:13px 0;border:none;outline:none;background:transparent;color:#172033}.profile-upload-area{display:flex;align-items:center;gap:15px;padding:12px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc}.register-photo-preview,.register-photo-placeholder{width:60px!important;height:60px!important;min-width:60px!important;max-width:60px!important;min-height:60px!important;max-height:60px!important;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center}.register-photo-preview{border:2px solid #2563eb}.register-photo-placeholder{background:#e2e8f0;font-size:25px}.choose-photo-button{padding:9px 13px;border-radius:8px;background:#eff6ff;color:#2563eb;cursor:pointer;font-size:13px;font-weight:600}.choose-photo-button input{display:none}.auth-submit{width:100%;padding:14px;margin-top:5px;border:none;border-radius:10px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px #2563eb40;transition:transform .2s,box-shadow .2s}.auth-submit:hover{transform:translateY(-2px);box-shadow:0 12px 25px #2563eb59}.auth-submit:active{transform:translateY(0)}.auth-switch{margin-top:25px;text-align:center;color:#64748b;font-size:14px}.auth-switch button{border:none;background:none;color:#2563eb;font-weight:700;cursor:pointer;margin-left:5px}.auth-switch button:hover{color:#7c3aed;text-decoration:underline}@media(max-width:800px){.auth-page{min-height:100vh;display:block;background:linear-gradient(135deg,#0f172a,#1e1b4b);overflow-y:auto}.auth-brand{display:none}.auth-container{width:100%;min-height:100vh;padding:25px 15px}.auth-card{width:100%;max-width:460px;padding:28px 22px;border-radius:20px}.mobile-logo{display:flex}.auth-header h2{font-size:24px}.auth-shape{opacity:.2}}@media(max-width:400px){.auth-container{padding:15px 10px}.auth-card{padding:25px 18px}.auth-header h2{font-size:22px}.profile-upload-area{flex-direction:column;align-items:flex-start}}.task-actions{display:flex;gap:12px;margin-top:25px;flex-wrap:wrap}.edit-button{border:none;background:#2563eb;color:#fff;padding:10px 18px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.edit-button:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 5px 12px #2563eb40}.edit-button:active{transform:translateY(0)}.delete-button{border:none;background:#ef4444;color:#fff;padding:10px 18px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.delete-button:hover{background:#dc2626;transform:translateY(-2px);box-shadow:0 5px 12px #ef444440}.delete-button:active{transform:translateY(0)}@media(max-width:600px){.task-actions{flex-direction:column;width:100%}.edit-button,.delete-button{width:100%;text-align:center}}.success-message{display:flex;align-items:center;gap:10px;padding:14px 18px;margin-bottom:20px;background:#dcfce7;color:#166534;border:1px solid #86efac;border-radius:10px;font-size:15px;font-weight:600;box-shadow:0 4px 12px #16653414;animation:successSlideIn .3s ease}@keyframes successSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}body.dark-mode .success-message{background:#14532d;color:#bbf7d0;border-color:#166534}@media(max-width:600px){.success-message{padding:12px 14px;font-size:14px}}.deadline{font-weight:600}.deadline.on-track{color:#15803d}.deadline.due-soon{color:#c2410c}.deadline.overdue{color:#dc2626}.deadline.no-deadline{color:#64748b}.deadline-status{display:inline-block;margin-top:5px;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:600}.deadline-normal{background:#dcfce7;color:#166534}.deadline-soon{background:#fef3c7;color:#92400e}.deadline-today{background:#fed7aa;color:#c2410c}.deadline-overdue{background:#fee2e2;color:#b91c1c}.deadline-completed{background:#dcfce7;color:#166534}.deadline-none{background:#f1f5f9;color:#475569}.password-input-container{position:relative;width:100%}.password-input-container input{width:100%;padding-right:45px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:transparent;cursor:pointer;font-size:18px;padding:5px}.auth-secondary-button{width:100%;padding:14px;margin-top:5px;border:none;border-radius:10px;background:#f1f5f9;color:#2563eb;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px #2563eb26;transition:transform .2s,box-shadow .2s}