.auth-form-container{background-color:#fff;padding:2rem;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px;margin:auto}.login-form{display:flex;flex-direction:column;gap:1rem}.login-form label{font-weight:600;color:#555}.login-form input{padding:.8rem;border:1px solid #ddd;border-radius:5px;font-size:1rem;width:100%;box-sizing:border-box}.login-form input:focus{outline:none;border-color:#667eea}.password-container{position:relative;display:flex;align-items:center}.password-container input{padding-right:2.5rem}.toggle-password{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);cursor:pointer;color:#555;font-size:1.1rem}.login-form button{padding:.8rem;background-color:#667eea;color:#fff;border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s;margin-top:1rem}.login-form button:hover{background-color:#5a6fd1}.link-btn{background:none;border:none;color:#667eea;text-decoration:underline;cursor:pointer;font-size:.9rem;padding:.2rem;text-align:left}.link-btn:hover{color:#5a6fd1}.login-logo{width:100px;margin:0 auto 20px;display:block}.role-buttons{display:flex;flex-direction:column;gap:10px;margin-top:20px}.role-buttons button{padding:10px;font-size:16px;cursor:pointer}.auth-form-container{background-color:#fff;padding:2rem;border-radius:10px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px}.auth-form-container h2{margin-bottom:1.5rem;color:#333;text-align:center}.signup-form{display:flex;flex-direction:column;gap:1rem}.signup-form label{font-weight:600;color:#555}.signup-form input{padding:.8rem;border:1px solid #ddd;border-radius:5px;font-size:1rem}.signup-form input:focus{outline:none;border-color:#764ba2}.signup-form button{padding:.8rem;background-color:#764ba2;color:#fff;border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s;margin-top:1rem}.signup-form button:hover{background-color:#5d3a7e}.link-container{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}.link-btn{background:none;border:none;color:#764ba2;text-decoration:underline;cursor:pointer;font-size:.9rem;padding:.2rem;text-align:left}.link-btn:hover{color:#5d3a7e}.MuiDrawer-paper{width:60px;overflow-x:hidden;transition:width .3s ease,margin-left .3s ease;background-color:#1976d2!important;color:#fff;margin-top:64px}.MuiDrawer-paper:hover{width:240px}.MuiListItemIcon-root{min-width:40px}.MuiListItemText-root{display:none}.MuiDrawer-paper:hover .MuiListItemText-root{display:block;color:#fff;padding-left:10px}.content{transition:margin-left .3s ease;margin-left:60px}.MuiDrawer-paper:hover~.content{margin-left:240px}.subscription-container{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;max-width:1200px;margin:0 auto;padding:2rem;background-color:#f8f9fa}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:2.5rem;color:#2c3e50;margin-bottom:1rem}.header p{font-size:1.2rem;color:#7f8c8d}.duration-selector{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-bottom:3rem}.duration-btn{padding:.8rem 1.5rem;border-radius:30px;border:1px solid #ddd;background-color:#fff;cursor:pointer;font-weight:600;transition:all .3s ease}.duration-btn:hover{background-color:#f1f1f1}.duration-btn.active{background-color:#3498db;color:#fff;border-color:#3498db}.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:4rem}.plan-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:600px;background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px #0000001a;transition:transform .3s ease}.plan-card.popular{border:2px solid #ffffff;position:relative;min-height:650px}.plan-card:hover{transform:translateY(-10px)}.popular-badge{background-color:#3498db;color:#fff;text-align:center;padding:.5rem;font-weight:700}.plan-header{padding:2rem;text-align:center}.plan-title{font-size:1.8rem;color:#2c3e50;margin-bottom:1rem}.plan-price{font-size:2.5rem;font-weight:700;color:#3498db;margin-bottom:.5rem}.plan-duration{color:#7f8c8d;font-size:.9rem}.plan-features{padding:0 2rem 2rem}.features-title{font-weight:700;color:#2c3e50;margin-bottom:1rem;text-align:center}.feature-list{list-style:none;padding:0}.feature-item{display:flex;align-items:center;margin-bottom:.8rem;color:#34495e}.feature-icon{margin-right:.5rem;color:#2ecc71}.plan-footer{padding:1.5rem 2rem;background-color:#f8f9fa;text-align:center;margin-top:auto}.select-btn{padding:.8rem 2rem;border:none;border-radius:5px;font-weight:700;cursor:pointer;transition:background-color .3s ease;width:100%}.basic-btn{background-color:#fff;color:#3498db;border:1px solid #3498db}.basic-btn:hover{background-color:#eaf2f8}.standard-btn,.premium-btn{background-color:#3498db;color:#fff}.standard-btn:hover,.premium-btn:hover{background-color:#2980b9}.comparison-section{margin-top:4rem}.comparison-title{text-align:center;font-size:2rem;color:#2c3e50;margin-bottom:2rem}.comparison-table{width:100%;border-collapse:collapse;background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px #0000001a}.comparison-table th,.comparison-table td{padding:1.2rem;text-align:left;border-bottom:1px solid #eee}.comparison-table th{background-color:#f8f9fa;font-weight:700;color:#7f8c8d;text-transform:uppercase;font-size:.8rem}.comparison-table td.feature-name{font-weight:700;color:#2c3e50}.comparison-table .center{text-align:center}.check-icon{color:#2ecc71}.x-icon{color:#e74c3c}.faq-section{margin-top:4rem}.faq-title{text-align:center;font-size:2rem;color:#2c3e50;margin-bottom:2rem}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.faq-item{background-color:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 5px 15px #0000001a}.faq-question{font-weight:700;color:#2c3e50;margin-bottom:.8rem;font-size:1.1rem}.faq-answer{color:#7f8c8d;line-height:1.5}.discount-badge{background:#ff5722;color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700;margin-top:5px;display:inline-block;position:relative}.original-price{text-decoration:line-through;color:#999;font-size:14px;margin-top:2px}.animate-bounce{animation:bounce 1s infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.discount-hint{display:block;font-size:10px;color:#ff5722;margin-top:2px}.duration-btn.has-discount{position:relative}.duration-btn.has-discount:after{content:"";position:absolute;top:-5px;right:-5px;width:10px;height:10px;background:#ff5722;border-radius:50%}.duration-btn.active.has-discount{border:2px solid #ff5722;box-shadow:0 0 10px #ff572280}.price-cell{position:relative}.discount-indicator{font-size:11px;color:#ff5722;font-weight:700;margin-top:3px}.navbar{display:flex;justify-content:space-between;align-items:center;padding:5px;background-color:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 1px 6px #0000001a;width:100%}.navbar-left{display:flex;align-items:center}.logo{height:40px}.brand-name{font-weight:700;font-size:1.2rem;margin-left:10px}.nav-links{display:flex;gap:20px;margin-left:30px}.nav-links a{text-decoration:none;color:#333;font-weight:650}.navbar-right{display:flex;align-items:center;gap:10px}.desktop-buttons{display:flex;gap:10px}.mobile-menu{display:none}.nav-btn{text-transform:none}.login-btn{border-color:#007fff;color:#007fff}.register-btn{background-color:#f2633b;color:#fff}@media (max-width: 768px){.nav-links,.desktop-buttons{display:none}.mobile-menu{display:block}}.footer{background-color:#fff;padding:40px 60px;margin-top:60px}.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap}.footer-logo{flex:1}.footer-logo-img{height:40px}.brand-name{font-size:1.4rem;font-weight:700;margin-left:10px;vertical-align:middle}.social-icons i{margin-right:15px;font-size:1.2rem;cursor:pointer}.footer-links{display:flex;flex:3;justify-content:space-between;flex-wrap:wrap}.footer-links ul{list-style:none;padding:0}.footer-links li{margin-bottom:10px;color:#444;cursor:pointer}.footer-bottom{text-align:center;margin-top:20px;font-size:.9rem;color:#666}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}