*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#3c7af6;--primary-dark:#0a50db;--primary-light:#b6cdfc;--secondary:#af57db;--accent:#f5c73d;--success:#3c3;--warning:#f5993d;--error:#e05252;--info:#3db8f5;--bg-primary:#101318;--bg-secondary:#1a1d23;--bg-tertiary:#25272d;--bg-card:#272c35;--bg-hover:#2b303b;--text-primary:#f2f2f2;--text-secondary:#ccc;--text-muted:#a6a6a6;--border:#363d49;--border-light:#414958;--shadow:0 8px 32px #0000004d;--shadow-lg:0 20px 40px #0006;--radius:16px;--radius-sm:8px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1);--gradient-primary:linear-gradient(135deg,var(--primary),var(--secondary));--gradient-bg:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%);--gradient-card:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-secondary) 100%)}body{background:linear-gradient(135deg,#101318,#1a1d23 50%,#25272d);background:var(--gradient-bg);color:#f2f2f2;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow-x:hidden}#root,body{min-height:100vh}.container{margin:0 auto;max-width:1400px;padding:0 24px}.header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0000004d;border-bottom:1px solid var(--border);padding:1rem 0;position:fixed;top:0;width:100%;z-index:1000}.nav{justify-content:space-between}.logo,.nav{align-items:center;display:flex}.logo{-webkit-text-fill-color:#0000;background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;font-size:1.75rem;font-weight:800;gap:.5rem}.logo:before{-webkit-text-fill-color:initial;background:none;content:"🚀"}.nav-buttons{display:flex;gap:1rem}.btn,.nav-buttons{align-items:center}.btn{border:none;border-radius:var(--radius);cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:600;gap:.5rem;overflow:hidden;padding:.75rem 1.5rem;position:relative;text-decoration:none;transition:var(--transition)}.btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.btn:hover:before{left:100%}.btn-primary{background:var(--gradient-primary);color:#fff}.btn-primary:hover{box-shadow:0 12px 40px #3b82f666;transform:translateY(-2px)}.btn-outline{background:#0000;border:2px solid var(--primary);color:var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}.btn-success{background:var(--success);color:#fff}.btn-secondary{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover);transform:translateY(-2px)}.main-content{margin-top:80px;min-height:calc(100vh - 80px)}.section{animation:fadeIn .5s ease-out;display:block;padding:2rem 0}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero{background:var(--gradient-bg);padding:6rem 0;position:relative;text-align:center}.hero:before{background:radial-gradient(circle at 50% 50%,#3b82f61a 0,#0000 50%);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.hero-content{position:relative;z-index:1}.hero h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary),var(--secondary),var(--accent));background-clip:text;-webkit-background-clip:text;font-size:4rem;font-weight:900;line-height:1.1;margin-bottom:1.5rem}.hero p{color:var(--text-secondary);font-size:1.25rem;margin-bottom:3rem;margin-left:auto;margin-right:auto;max-width:700px}.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:3rem}.hero-features{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:4rem}.feature-card{background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center;transition:var(--transition)}.feature-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.skills-header{margin-bottom:3rem;text-align:center}.skills-header h2{-webkit-text-fill-color:#0000;background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;font-size:3rem;font-weight:800;margin-bottom:1rem}.skills-filter{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2rem}.filter-btn{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:25px;color:var(--text-secondary);cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:var(--transition)}.filter-btn.active,.filter-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.skills-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-top:2rem}.skill-card{background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;overflow:hidden;padding:2rem;position:relative;transition:var(--transition)}.skill-card:before{background:var(--gradient-primary);content:"";height:4px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transition:transform .3s ease}.skill-card:hover:before{transform:scaleX(1)}.skill-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-8px)}.skill-header{gap:1rem;margin-bottom:1rem}.skill-header,.skill-icon{align-items:center;display:flex}.skill-icon{background:var(--gradient-primary);border-radius:var(--radius-sm);color:#fff;font-size:1.5rem;height:60px;justify-content:center;width:60px}.skill-info h3{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.skill-level{align-items:center;display:inline-flex;font-size:.75rem;gap:.5rem}.level-badge{border-radius:20px;font-size:.675rem;font-weight:600;letter-spacing:.05em;padding:.25rem .75rem;text-transform:uppercase}.level-beginner{background:var(--success);color:#fff}.level-intermediate{background:var(--warning);color:#fff}.level-advanced{background:var(--error);color:#fff}.skill-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin:1rem 0}.skill-stats{align-items:center;border-top:1px solid var(--border);display:flex;justify-content:space-between;margin-top:1.5rem;padding-top:1rem}.skill-duration{color:var(--text-muted);font-size:.8rem}.skill-popularity{align-items:center;color:var(--accent);display:flex;font-size:.8rem;gap:.25rem}.roadmap-header{margin-bottom:3rem;text-align:center}.roadmap-tabs{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:3rem}.tab-btn{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);cursor:pointer;padding:.75rem 1.5rem;transition:var(--transition)}.tab-btn.active,.tab-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.roadmap-content{margin:0 auto;max-width:1000px}.flowchart{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);display:none;margin-bottom:2rem;padding:2rem;position:relative}.flowchart.active{display:block}.flowchart-container{align-items:center;display:flex;flex-direction:column;gap:2rem}.flow-level{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.flow-node{background:var(--gradient-card);border:2px solid var(--border);border-radius:var(--radius);min-width:200px;padding:1.5rem;position:relative;text-align:center;transition:var(--transition)}.flow-node:hover{border-color:var(--primary);transform:scale(1.05)}.flow-node.completed{background:linear-gradient(135deg,var(--success),#22c55e33);border-color:var(--success)}.flow-node:after{bottom:-30px;color:var(--primary);content:"↓";font-size:1.5rem;left:50%;position:absolute;transform:translateX(-50%)}.flow-level:last-child .flow-node:after{display:none}.roadmap-steps{display:none;padding-left:2rem;position:relative}.roadmap-steps.active{display:block}.roadmap-steps:before{background:var(--gradient-primary);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.roadmap-step{background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:2rem;margin-left:2rem;padding:2rem;position:relative;transition:var(--transition)}.roadmap-step:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateX(10px)}.roadmap-step:before{background:var(--primary);border:4px solid var(--bg-primary);border-radius:50%;content:"";height:16px;left:-3rem;position:absolute;top:2rem;width:16px}.roadmap-step.completed:before{background:var(--success)}.step-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:1rem}.step-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.step-duration{color:var(--text-muted)}.step-duration,.step-progress{background:var(--bg-tertiary);border-radius:20px;font-size:.8rem;font-weight:600;padding:.5rem 1rem}.step-progress{color:var(--text-primary)}.step-description{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.step-checklist{background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-bottom:1.5rem;padding:1.5rem}.checklist-title{color:var(--text-primary);font-weight:600;margin-bottom:1rem}.checklist-item{align-items:flex-start;cursor:pointer;display:flex;gap:.75rem;margin-bottom:.75rem}.checklist-item:last-child{margin-bottom:0}.checkbox{align-items:center;border:2px solid var(--border);border-radius:4px;display:flex;flex-shrink:0;height:20px;justify-content:center;margin-top:2px;transition:var(--transition);width:20px}.checkbox.checked{background:var(--success);border-color:var(--success);color:#fff}.checkbox.checked:after{content:"✓";font-size:.8rem;font-weight:700}.checklist-text{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.checklist-item.completed .checklist-text{opacity:.6;text-decoration:line-through}.resources{display:flex;flex-wrap:wrap;gap:1rem}.resource-link{align-items:center;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:25px;color:var(--primary);display:flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.75rem 1.25rem;text-decoration:none;transition:var(--transition)}.resource-link:hover{background:var(--primary);box-shadow:0 8px 20px #3b82f64d;color:#fff;transform:translateY(-2px)}.progress-overview{background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:2rem;padding:2rem}.progress-overview.clickable{cursor:pointer}.progress-overview.clickable:hover{border-color:var(--primary);transform:translateY(-2px)}.progress-stats{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2rem}.stat-card{background:var(--bg-tertiary);border-radius:var(--radius-sm);padding:1.5rem;text-align:center}.stat-number{color:var(--primary);font-size:2rem;font-weight:800;margin-bottom:.5rem}.stat-label{color:var(--text-muted);font-size:.875rem;letter-spacing:.05em;text-transform:uppercase}.progress-bar-container{margin-bottom:1rem}.progress-label{display:flex;font-size:.875rem;justify-content:space-between;margin-bottom:.5rem}.progress-bar{background:var(--bg-tertiary);border-radius:6px;height:12px;overflow:hidden;position:relative;width:100%}.progress-fill{background:var(--gradient-primary);height:100%;position:relative;transition:width .8s ease}.progress-fill:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#ffffff4d,#0000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.modal{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:2000}.modal-content{animation:modalSlideIn .4s ease-out;background:var(--gradient-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:500px;padding:3rem;width:90%}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{margin-bottom:2rem;text-align:center}.modal-title{font-size:1.75rem;font-weight:700;margin-bottom:.5rem}.modal-subtitle{color:var(--text-secondary);font-size:.9rem}.form-group{margin-bottom:1.5rem}.form-label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.5rem}.form-input,.form-label{color:var(--text-primary)}.form-input{background:var(--bg-tertiary);border:2px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;padding:1rem;transition:var(--transition);width:100%}.form-input:focus{background:var(--bg-secondary);border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a;outline:none}.form-actions{display:flex;gap:1rem;margin-top:2rem}.form-actions .btn{flex:1 1}.user-info{align-items:center;display:none;gap:1rem}.user-info.logged-in{display:flex}.user-avatar{align-items:center;background:var(--gradient-primary);border-radius:50%;color:#fff;display:flex;font-weight:600;height:40px;justify-content:center;width:40px}.welcome-text{color:var(--text-primary);font-weight:500}.logout-btn{background:var(--error);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-size:.8rem;font-weight:500;padding:.5rem 1rem;transition:var(--transition)}.logout-btn:hover{background:#d92626;transform:translateY(-1px)}.auth-buttons{display:flex;gap:1rem}.back-btn{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);margin-bottom:2rem}.back-btn:hover{background:var(--bg-hover);border-color:var(--primary)}.achievement-badge{align-items:center;background:linear-gradient(135deg,var(--warning),var(--accent));border-radius:20px;color:#fff;display:inline-flex;font-size:.8rem;font-weight:600;gap:.5rem;margin:.25rem;padding:.5rem 1rem}.login-prompt{padding:4rem 0;text-align:center}.login-prompt h2{margin-bottom:1rem}.login-prompt p{color:var(--text-secondary);margin-bottom:2rem}.empty-state{background:var(--bg-secondary);border-radius:var(--radius);margin-top:2rem;padding:2rem;text-align:center}.empty-state h3{margin-bottom:1rem}.empty-state p{color:var(--text-secondary);margin-bottom:1.5rem}.resources-tab{padding:2rem}.resource-category{margin-bottom:2rem}.resource-category h3{color:var(--primary);margin-bottom:1rem}.success-message{background:var(--success);border-radius:var(--radius);box-shadow:var(--shadow);color:#fff;padding:1rem 1.5rem;position:fixed;right:20px;top:100px;transform:translateX(400px);transition:transform .3s ease;z-index:1001}.success-message.show{transform:translateX(0)}@media (max-width:1024px){.skills-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.hero h1{font-size:3rem}}@media (max-width:768px){.hero h1{font-size:2.5rem}.skills-grid{grid-template-columns:1fr}.nav-buttons{gap:.5rem}.btn{font-size:.8rem;padding:.6rem 1rem}.flow-level{align-items:center;flex-direction:column}.flow-node:after{bottom:auto;content:"→";left:auto;right:-30px;top:50%;transform:translateY(-50%)}.flow-level:last-child .flow-node:after{display:none}.modal-content{padding:2rem}.roadmap-step{margin-left:1rem}.roadmap-step:before{left:-2rem}.step-header{flex-direction:column;gap:1rem}}@media (max-width:480px){.hero h1{font-size:2rem}.container{padding:0 16px}.hero{padding:4rem 0}.skills-filter{gap:.5rem}.filter-btn,.tab-btn{font-size:.8rem;padding:.5rem .75rem}.hero-actions{align-items:center}.form-actions,.hero-actions{flex-direction:column}}
/*# sourceMappingURL=main.72377130.css.map*/