@import"https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap";@tailwind base;@tailwind components;@tailwind utilities;:root{--primary: #667eea;--primary-dark: #764ba2;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--bg-main: #f8fafc;--bg-card: #ffffff;--text-primary: #1f2937;--text-secondary: #6b7280;--border: #e5e7eb;--shadow: rgba(0, 0, 0, .1)}.dark-mode{--bg-main: #0f172a;--bg-card: #1e293b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border: #334155;--shadow: rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Cairo,sans-serif;background:var(--bg-main);color:var(--text-primary);transition:background .2s ease,color .2s ease}svg{width:20px;height:20px}.app{display:flex;height:100vh;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);position:relative;overflow:hidden}.sidebar{width:340px;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:4px 0 30px var(--shadow);position:relative;z-index:10}.sidebar-header{padding:2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #667eea66}.logo-icon svg{width:28px;height:28px}.logo h1{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--primary-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.theme-toggle{display:flex}.btn-theme{width:40px;height:40px;border-radius:10px;border:none;background:var(--bg-main);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-theme:hover{transform:scale(1.05);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}.btn-new-project{margin:1.5rem;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:14px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 20px #667eea66}.btn-new-project:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea80}.projects-section{flex:1;overflow-y:auto;padding:0 1rem 1rem}.section-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin:1.5rem .5rem .75rem}.projects-list{display:flex;flex-direction:column;gap:.5rem}.empty-projects{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;text-align:center;color:var(--text-secondary)}.empty-projects svg{width:48px;height:48px;margin-bottom:.75rem;opacity:.5}.project-item{display:flex;align-items:center;gap:.875rem;padding:.875rem;border-radius:12px;cursor:pointer;transition:all .2s ease;position:relative;border:2px solid transparent}.project-item:hover{background:var(--bg-main);transform:translate(-2px)}.project-item.active{background:linear-gradient(135deg,#667eea26,#764ba226);border-color:var(--primary);box-shadow:0 4px 16px #667eea33}.project-item.archived{opacity:.6}.project-icon-wrapper{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 12px #00000026}.project-icon-wrapper svg{width:24px;height:24px}.project-info{flex:1;min-width:0}.project-info h4{font-size:1rem;font-weight:700;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-stats-mini{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-secondary)}.archived-badge{font-size:.75rem;padding:.25rem .5rem;background:var(--warning);color:#fff;border-radius:6px;font-weight:600}.project-actions-mini{opacity:0;transition:opacity .2s ease}.project-item:hover .project-actions-mini{opacity:1}.project-actions-mini button{padding:.5rem;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:8px;transition:all .2s ease}.project-actions-mini button:hover{background:var(--bg-main);color:var(--primary)}.main-content{flex:1;display:flex;flex-direction:column;background:var(--bg-card);overflow:hidden;position:relative;z-index:5;border-radius:30px 0 0 30px;box-shadow:-10px 0 40px var(--shadow)}.welcome-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem}.welcome-animation{width:120px;height:120px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:30px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:2rem;box-shadow:0 20px 60px #667eea66}.welcome-animation svg{width:64px;height:64px}.welcome-screen h2{font-size:3rem;font-weight:900;margin-bottom:1rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-screen p{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem}.btn-get-started{display:inline-flex;align-items:center;gap:.75rem;padding:1.25rem 2.5rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:16px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 8px 30px #667eea66}.btn-get-started:hover{transform:translateY(-3px);box-shadow:0 12px 35px #667eea80}.project-header-main{padding:2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,var(--bg-card),transparent)}.project-title-area{display:flex;align-items:center;gap:1.25rem}.project-badge-large{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 30px #0003}.project-badge-large svg{width:40px;height:40px}.project-header-main h2{font-size:2.25rem;font-weight:900;margin-bottom:.5rem}.project-actions-bar{display:flex;gap:.5rem;margin-top:.5rem}.project-actions-bar button{padding:.5rem;background:var(--bg-main);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.project-actions-bar button:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)}.project-actions-bar .btn-danger:hover{background:var(--danger);border-color:var(--danger)}.btn-add-task-main{display:flex;align-items:center;gap:.625rem;padding:1rem 1.75rem;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;border-radius:14px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 20px #667eea66}.btn-add-task-main:hover{transform:translateY(-2px);box-shadow:0 10px 25px #667eea80}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;padding:1.5rem 2rem;background:var(--bg-main)}.stat-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--bg-card);border-radius:16px;border:1px solid var(--border);transition:all .2s ease;cursor:default}.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow)}.stat-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.stat-icon svg{width:28px;height:28px}.stat-content{display:flex;flex-direction:column}.stat-label{font-size:.875rem;color:var(--text-secondary);font-weight:600}.stat-value{font-size:2rem;font-weight:900;color:var(--text-primary)}.filters-bar{display:flex;gap:1rem;padding:1.5rem 2rem;border-bottom:1px solid var(--border);background:var(--bg-card)}.search-box{flex:1;display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--bg-main);border:2px solid var(--border);border-radius:12px;transition:all .2s ease}.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #667eea1a}.search-box input{flex:1;border:none;background:transparent;font-size:1rem;font-family:Cairo,sans-serif;color:var(--text-primary);outline:none}.search-box input::placeholder{color:var(--text-secondary)}.filter-buttons{display:flex;gap:.75rem}.filter-select{padding:.875rem 1.25rem;background:var(--bg-main);border:2px solid var(--border);border-radius:12px;font-size:.95rem;font-family:Cairo,sans-serif;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .2s ease}.filter-select:hover{border-color:var(--primary)}.filter-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #667eea1a}.tasks-container-main{flex:1;overflow-y:auto;padding:2rem}.empty-tasks-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.empty-tasks-state svg{width:96px;height:96px;color:var(--text-secondary);opacity:.5;margin-bottom:1.5rem}.empty-tasks-state h3{font-size:2rem;font-weight:800;margin-bottom:.5rem}.empty-tasks-state p{font-size:1.1rem;color:var(--text-secondary)}.tasks-list-modern{display:flex;flex-direction:column;gap:1rem}.task-card-modern{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:var(--bg-card);border:2px solid var(--border);border-radius:16px;transition:all .2s ease;cursor:move;position:relative;overflow:hidden}.task-card-modern:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary);transition:width .2s ease}.task-card-modern.priority-high:before{background:var(--danger)}.task-card-modern.priority-medium:before{background:var(--warning)}.task-card-modern.priority-low:before{background:var(--success)}.task-card-modern:hover{border-color:var(--primary);box-shadow:0 8px 30px var(--shadow);transform:translateY(-2px)}.task-card-modern.completed{opacity:.7;background:var(--bg-main)}.task-drag-area{color:var(--text-secondary);cursor:grab;padding:.25rem;opacity:0;transition:opacity .2s ease}.task-card-modern:hover .task-drag-area{opacity:1}.task-drag-area:active{cursor:grabbing}.task-check-modern{flex-shrink:0;width:36px;height:36px;border:3px solid var(--border);border-radius:12px;background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.task-check-modern:hover{border-color:var(--primary);transform:scale(1.05)}.task-card-modern.completed .task-check-modern{background:linear-gradient(135deg,var(--success),#059669);border-color:var(--success)}.task-check-modern svg{stroke:#fff}.task-body-modern{flex:1;min-width:0}.task-header-modern{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.task-header-modern h4{font-size:1.15rem;font-weight:700;line-height:1.5;flex:1}.task-card-modern.completed .task-header-modern h4{text-decoration:line-through;opacity:.6}.btn-star{padding:.5rem;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:8px;transition:all .2s ease}.btn-star:hover{background:var(--bg-main);color:var(--warning);transform:scale(1.05)}.btn-star.starred{color:var(--warning)}.task-desc-modern{font-size:.95rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1rem}.task-footer-modern{display:flex;justify-content:space-between;align-items:center;gap:1rem}.task-meta-modern{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.priority-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;border-radius:8px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.priority-badge.priority-high{background:#ef444426;color:var(--danger)}.priority-badge.priority-medium{background:#f59e0b26;color:var(--warning)}.priority-badge.priority-low{background:#10b98126;color:var(--success)}.priority-badge svg{width:14px;height:14px}.task-tags-modern{display:flex;gap:.5rem;flex-wrap:wrap}.tag-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:var(--bg-main);border:1px solid var(--border);border-radius:8px;font-size:.8rem;font-weight:600;color:var(--text-secondary)}.tag-badge svg{width:12px;height:12px}.task-actions-modern{display:flex;gap:.5rem;opacity:0;transition:opacity .2s ease}.task-card-modern:hover .task-actions-modern{opacity:1}.task-actions-modern button{padding:.5rem;background:var(--bg-main);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.task-actions-modern button:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.05)}.task-actions-modern .btn-delete:hover{background:var(--danger);border-color:var(--danger)}.modal-overlay-modern{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.modal-modern{background:var(--bg-card);border-radius:24px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 90px #0006}.modal-large-modern{max-width:680px}.modal-header-modern{display:flex;justify-content:space-between;align-items:center;padding:2rem;border-bottom:1px solid var(--border)}.modal-header-modern h2{font-size:1.75rem;font-weight:900}.btn-close-modal{width:40px;height:40px;border-radius:10px;border:none;background:var(--bg-main);color:var(--text-primary);font-size:1.5rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.btn-close-modal:hover{background:var(--danger);color:#fff}.modal-form{padding:2rem}.form-group-modern{margin-bottom:1.5rem;text-align:right}.form-group-modern label{display:block;font-size:.95rem;font-weight:700;color:var(--text-primary);margin-bottom:.625rem}.input-modern,.textarea-modern,.select-modern{width:100%;padding:1rem;border:2px solid var(--border);border-radius:12px;font-size:1rem;font-family:Cairo,sans-serif;background:var(--bg-main);color:var(--text-primary);transition:all .2s ease}.input-modern:focus,.textarea-modern:focus,.select-modern:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #667eea1a}.textarea-modern{resize:vertical;min-height:100px}.icon-picker{display:flex;gap:.75rem;flex-wrap:wrap}.icon-option{width:56px;height:56px;border-radius:12px;border:2px solid var(--border);background:var(--bg-main);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-option:hover{border-color:var(--primary);background:var(--primary);color:#fff;transform:scale(1.05)}.icon-option.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 4px 16px #667eea66}.icon-option svg{width:28px;height:28px}.color-picker-modern{display:flex;gap:.75rem;flex-wrap:wrap}.color-option-modern{width:52px;height:52px;border-radius:12px;border:3px solid transparent;cursor:pointer;transition:all .2s ease;position:relative}.color-option-modern:hover{transform:scale(1.1)}.color-option-modern.active{border-color:var(--text-primary);box-shadow:0 0 0 3px var(--bg-card),0 6px 20px #0000004d;transform:scale(1.15)}.form-row-modern{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.modal-actions-modern{display:flex;gap:1rem;margin-top:2rem}.btn-secondary-modern,.btn-primary-modern{flex:1;padding:1rem;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;font-family:Cairo,sans-serif;display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-secondary-modern{background:var(--bg-main);color:var(--text-primary);border:2px solid var(--border)}.btn-secondary-modern:hover{background:var(--border)}.btn-primary-modern{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 6px 20px #667eea66}.btn-primary-modern:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea80}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-main);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.sidebar{width:280px}.stats-grid,.form-row-modern{grid-template-columns:1fr}}