.landing-demo-container{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--spacing-2xl);width:100%;max-width:800px}.landing-demo-left{display:flex;flex-direction:column}.demo-cards-container{display:flex;flex-direction:column;gap:var(--spacing-md);max-height:500px;overflow-y:auto;padding:var(--spacing-sm)}.demo-cards-container::-webkit-scrollbar{width:6px}.demo-cards-container::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.demo-cards-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.demo-cards-container::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.demo-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-fast)}.demo-card.playing{border-color:#6366f1;background:#6366f114;box-shadow:0 0 0 3px #6366f126}.demo-card.editing{border-color:#8b5cf6cc}.demo-card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:#ffffff14;border-bottom:1px solid rgba(255,255,255,.15);gap:var(--spacing-md)}.demo-card-title{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:#fff;flex:1}.demo-edit-btn{background:none;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-sm);color:#ffffffe6;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;min-width:36px;height:36px}.demo-edit-btn:hover:not(:disabled){background:#6366f133;border-color:#6366f180;color:#fff}.demo-edit-btn:disabled{opacity:.5;cursor:not-allowed}.demo-card-details{padding:var(--spacing-md);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.demo-detail-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.demo-label{font-size:var(--text-xs);color:#fff9;font-weight:var(--font-weight-medium)}.demo-value{font-size:var(--text-base);color:#fff;font-weight:var(--font-weight-semibold)}.demo-card-edit{padding:var(--spacing-lg);background:#ffffff08;border-top:1px solid rgba(255,255,255,.15)}.demo-edit-group{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.demo-edit-group:last-child{margin-bottom:0}.demo-edit-group label{color:#fffc;font-size:var(--text-sm);font-weight:var(--font-weight-medium)}.demo-edit-group input,.demo-edit-group select{padding:var(--spacing-md);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-sm);font-size:var(--text-sm);background:#ffffff0d;color:#fff}.demo-edit-group input:focus,.demo-edit-group select:focus{outline:none;border-color:#6366f1cc;background:#ffffff14}.demo-edit-group input:disabled,.demo-edit-group select:disabled{opacity:.5;cursor:not-allowed}.demo-time-sig-group{display:flex;align-items:center;gap:var(--spacing-sm)}.demo-time-sig-group input,.demo-time-sig-group select{flex:1;padding:var(--spacing-md);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-sm);font-size:var(--text-sm);background:#ffffff0d;color:#fff}.demo-time-sig-group select option{background:#1e1b4b;color:#fff}.demo-time-sig-group span{color:#ffffffb3;font-weight:var(--font-weight-bold);font-size:var(--text-base)}.landing-demo-right{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-2xl);padding:var(--spacing-xl)}.demo-beats-display{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap;min-height:60px;align-items:center}.demo-beat-indicator{width:50px;height:50px;border-radius:50%;background:#ffffff14;border:3px solid rgba(255,255,255,.25);transition:all .1s ease}.demo-beat-indicator.active{background:#6366f1cc;border-color:#6366f1;box-shadow:0 0 20px #6366f199;transform:scale(1.15)}.demo-beat-indicator.accent{border-width:3px}.demo-beat-indicator.accent.active{background:#8b5cf6cc;border-color:#8b5cf6;box-shadow:0 0 25px #8b5cf699}.demo-play-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:#6366f133;border:2px solid rgba(99,102,241,.5);border-radius:var(--radius-lg);color:#fff;font-size:var(--text-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast)}.demo-play-btn:hover{background:#6366f14d;border-color:#6366f1b3;transform:translateY(-2px);box-shadow:0 8px 20px #6366f14d}.demo-play-btn.playing{background:#ef444433;border-color:#ef444480}.demo-play-btn.playing:hover{background:#ef44444d;border-color:#ef4444b3;box-shadow:0 8px 20px #ef44444d}@media (max-width: 768px){.landing-demo-container{grid-template-columns:1fr;gap:var(--spacing-lg)}.demo-cards-container{max-height:300px}.landing-demo-right{padding:var(--spacing-md)}.demo-beat-indicator{width:35px;height:35px}}.contact-support-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.contact-support-modal-content{background:var(--lighter);border:1px solid var(--border-dark);border-radius:12px;padding:40px;max-width:550px;width:100%;position:relative;box-shadow:0 20px 60px #00000080;animation:modalSlideIn .3s ease-out;max-height:90vh;overflow-y:auto}.contact-support-modal-close{position:absolute;top:15px;right:15px;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:5px;opacity:.7;transition:opacity .2s}.contact-support-modal-close:hover{opacity:1}.contact-support-modal-header{margin-bottom:30px}.contact-support-modal-header h2{color:var(--text-primary);font-size:1.75rem;margin:0 0 8px;font-weight:600}.contact-support-modal-subtitle{color:var(--text-secondary);font-size:.95rem;margin:0}.contact-support-form{display:flex;flex-direction:column;gap:20px}.contact-form-group{display:flex;flex-direction:column;gap:8px}.contact-form-group label{color:var(--text-primary);font-weight:500;font-size:.95rem}.contact-form-input,.contact-form-textarea{padding:12px;background:var(--darker);border:1px solid var(--border-dark);border-radius:8px;color:var(--text-primary);font-size:1rem;font-family:inherit;transition:border-color .2s ease}.contact-form-input:focus,.contact-form-textarea:focus{outline:none;border-color:var(--accent)}.contact-form-input:disabled{opacity:.6;cursor:not-allowed}.contact-form-textarea{resize:vertical;min-height:120px}.contact-status-message{padding:12px 16px;border-radius:8px;font-size:.9rem;font-weight:500;animation:fadeIn .3s ease-out}.contact-status-message.success{background-color:#4caf5026;color:#4caf50;border:1px solid rgba(76,175,80,.3)}.contact-status-message.error{background-color:#f4433626;color:#f44336;border:1px solid rgba(244,67,54,.3)}.contact-form-actions{display:flex;justify-content:flex-end;margin-top:10px}.contact-submit-button{padding:12px 32px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.contact-submit-button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.contact-submit-button:disabled{background:#ccc;cursor:not-allowed;opacity:.6;transform:none}.contact-support-info{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-dark);text-align:center}.contact-support-info p{color:var(--text-secondary);margin:0 0 8px;font-size:.9rem}.contact-support-email{color:var(--accent);text-decoration:none;font-weight:500;font-size:1rem;transition:color .2s ease}.contact-support-email:hover{color:var(--accent-hover);text-decoration:underline}@media (max-width: 768px){.contact-support-modal-content{padding:30px 20px;max-height:85vh}.contact-support-modal-header h2{font-size:1.5rem}.contact-form-textarea{min-height:100px}.contact-submit-button{width:100%}}.landing-page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:var(--text-primary);line-height:1.6}.hero{background:linear-gradient(135deg,#1e1b4b,#312e81,#4c1d95);color:#fff;padding:6rem var(--spacing-2xl)}.hero-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center}.hero-left{text-align:left}.hero-right{display:flex;justify-content:center;align-items:center;width:100%}.hero-title-container{display:inline-block;margin-bottom:var(--spacing-lg)}.hero-title{font-size:3.5rem;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm);line-height:1.2}.title-underline{width:60%;height:4px;background:linear-gradient(90deg,#ffffffe6,#ffffff4d);border-radius:2px;animation:expandUnderline .8s ease-out}@keyframes expandUnderline{0%{width:0;opacity:0}to{width:60%;opacity:1}}.hero-subtitle{font-size:var(--text-xl);margin-bottom:var(--spacing-2xl);opacity:.95}.hero-buttons{display:flex;gap:var(--spacing-lg);justify-content:flex-start;flex-wrap:wrap}.hero-buttons .btn{display:flex;align-items:center;gap:var(--spacing-sm)}.arrow-icon{transition:transform var(--transition-base)}.btn:hover .arrow-icon{transform:translate(4px)}.btn-large{padding:var(--spacing-lg) 3rem;font-size:var(--text-lg)}.features{padding:var(--spacing-4xl) var(--spacing-2xl);background-color:var(--white)}.features-container{max-width:1200px;margin:0 auto}.features-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center}.features-left{display:flex;justify-content:center}.features-right{display:flex;flex-direction:column;justify-content:center}.features-right h2{font-size:2.5rem;margin-bottom:var(--spacing-md);color:var(--text-primary)}.features-subtitle{font-size:var(--text-lg);margin-bottom:0;color:var(--text-secondary);opacity:.95}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-lg);max-width:600px}.feature-card{background:var(--white);padding:var(--spacing-2xl);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.feature-icon{font-size:3rem;margin-bottom:var(--spacing-lg)}.feature-card h3{font-size:var(--text-xl);margin-bottom:var(--spacing-sm);color:var(--text-primary)}.feature-card p{color:var(--text-secondary);font-size:var(--text-sm)}.faq{padding:var(--spacing-4xl) var(--spacing-2xl);background-color:var(--white)}.faq-container{max-width:800px;margin:0 auto}.faq-container h2{font-size:2.5rem;text-align:center;margin-bottom:var(--spacing-3xl);color:var(--text-primary)}.faq-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.faq-item{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.faq-question{width:100%;padding:var(--spacing-xl);background-color:var(--light);border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--text-primary);transition:all var(--transition-base)}.faq-question:hover{background-color:var(--lighter)}.faq-question.active{background-color:#6366f11a;color:var(--primary)}.faq-toggle{font-size:1.5rem;font-weight:var(--font-weight-bold)}.faq-answer{padding:var(--spacing-xl);background-color:var(--white);color:var(--text-secondary);border-top:1px solid var(--border);animation:slideDown .3s ease}.pricing-section{background-color:var(--white);padding:var(--spacing-4xl) var(--spacing-2xl)}.pricing-header{text-align:center;margin-bottom:var(--spacing-3xl);background-color:var(--white);padding:var(--spacing-2xl) 0}.pricing-header h2{font-size:2.5rem;margin-bottom:var(--spacing-lg);color:var(--text-primary)}.pricing-header p{font-size:var(--text-lg);color:var(--text-secondary);opacity:.95}.pricing-cards{max-width:1200px;margin:0 auto}.cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-2xl)}.pricing-card{background:var(--light);border:2px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-2xl);position:relative;transition:all var(--transition-base)}.pricing-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background-color:var(--primary);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-weight-bold)}.pricing-card h3{font-size:var(--text-2xl);margin-bottom:var(--spacing-lg);color:var(--text-primary)}.price{display:flex;align-items:baseline;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.price .currency{font-size:var(--text-xl);color:var(--primary);font-weight:var(--font-weight-bold)}.price .amount{font-size:2.5rem;font-weight:var(--font-weight-bold);color:var(--text-primary)}.price .period{color:var(--text-secondary);font-size:var(--text-sm)}.pricing-card .description{color:var(--text-secondary);margin-bottom:var(--spacing-xl);font-size:var(--text-sm)}.cta-button{width:100%;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base);margin-bottom:var(--spacing-xl)}.cta-button.primary{background:var(--primary);color:#fff}.cta-button.primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.cta-button.secondary{background:var(--lighter);color:var(--primary);border:2px solid var(--border)}.cta-button.secondary:hover{background:var(--light);border-color:var(--primary);transform:translateY(-2px)}.cta{background:linear-gradient(135deg,#1e1b4b,#312e81,#4c1d95);color:#fff;padding:var(--spacing-4xl) var(--spacing-2xl);text-align:center}.cta-content{max-width:600px;margin:0 auto}.cta-content h2{font-size:2rem;margin-bottom:var(--spacing-lg)}.cta-content p{font-size:var(--text-lg);margin-bottom:var(--spacing-2xl);opacity:.95}.footer{background-color:var(--darker, #0a0a14);color:var(--text-secondary);padding:var(--spacing-2xl) var(--spacing-xl);border-top:1px solid var(--border)}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-lg)}.footer-content p{margin:0;font-size:var(--text-sm)}.footer-links{display:flex;gap:var(--spacing-xl);flex-wrap:wrap;align-items:center}.footer-links a,.footer-contact-btn{color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);transition:color var(--transition-fast)}.footer-contact-btn{background:none;border:none;cursor:pointer;padding:0;font-family:inherit}.footer-links a:hover,.footer-contact-btn:hover{color:var(--primary)}@media (max-width: 768px){.navbar{flex-direction:column;gap:1rem;padding:1rem}.nav-links{width:100%;justify-content:center}.hero-content{grid-template-columns:1fr;gap:var(--spacing-2xl)}.hero-left{text-align:center}.hero-buttons{justify-content:center}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.features-content{grid-template-columns:1fr;gap:var(--spacing-2xl)}.features-right{text-align:center;order:-1}.features-grid{grid-template-columns:1fr;max-width:100%}.features-right h2,.faq-container h2{font-size:1.8rem}.features-grid{grid-template-columns:1fr}.hero-buttons{flex-direction:column}.btn{width:100%}.footer-links{flex-direction:column;gap:.5rem}.cards-container{grid-template-columns:1fr}.pricing-card.highlighted{transform:scale(1)}}@media (max-width: 480px){.pricing-header h2{font-size:1.8rem}.price .amount{font-size:2rem}.hero-title,.features-container h2,.faq-container h2,.cta-content h2{font-size:1.5rem}}.share-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.share-modal-content{background:var(--lighter);border:1px solid var(--border-dark);border-radius:12px;padding:40px;max-width:500px;width:100%;position:relative;box-shadow:0 20px 60px #00000080;animation:modalSlideIn .3s ease-out}.share-modal-close{position:absolute;top:15px;right:15px;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:5px;opacity:.7;transition:opacity .2s}.share-modal-close:hover{opacity:1}.share-modal-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border)}.share-modal-header h2{color:var(--primary);font-size:28px;font-weight:700;margin:0 0 10px}.share-modal-subtitle{color:var(--text-secondary);font-size:16px;margin:0}.share-modal-body{color:var(--text-primary)}.share-section{margin-bottom:25px}.share-section label{display:block;font-weight:600;margin-bottom:8px;color:var(--text-primary);font-size:14px}.share-input-group{display:flex;gap:8px}.share-code-input,.share-url-input{flex:1;padding:12px;border:1px solid var(--border-dark);border-radius:6px;font-size:14px;font-family:monospace;background:var(--darker);color:var(--text-primary)}.share-copy-btn{padding:12px 20px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.share-copy-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.share-help-text{display:block;margin-top:6px;color:var(--text-secondary);font-size:12px}.share-modal-actions{display:flex;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border)}.share-revoke-btn,.share-done-btn{flex:1;padding:12px 24px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.share-revoke-btn{background:var(--danger);color:#fff;border:none}.share-revoke-btn:hover{background:#d93333;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.share-done-btn{background:var(--primary);color:#fff}.share-done-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}@media (max-width: 600px){.share-modal-content{padding:30px 20px}.share-modal-header h2{font-size:24px}.share-input-group,.share-modal-actions{flex-direction:column}}.upgrade-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.upgrade-modal-content{background:linear-gradient(135deg,#1e1b4b,#312e81,#4c1d95);border-radius:12px;padding:40px;max-width:500px;width:100%;position:relative;box-shadow:0 20px 60px #00000080;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.upgrade-modal-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#fff;cursor:pointer;padding:5px;opacity:.7;transition:opacity .2s}.upgrade-modal-close:hover{opacity:1}.upgrade-modal-header{text-align:center;margin-bottom:30px}.upgrade-modal-header h2{color:#fff;font-size:32px;font-weight:700;margin:0 0 10px}.upgrade-modal-subtitle{color:#fffc;font-size:16px;margin:0}.upgrade-modal-body{color:#fff}.upgrade-limit-message{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:15px;margin-bottom:25px;text-align:center}.upgrade-limit-message p{margin:0;font-size:14px;color:#ffffffe6}.upgrade-features{margin-bottom:30px}.upgrade-features h3{font-size:18px;font-weight:600;margin:0 0 15px;color:#fff}.upgrade-features ul{list-style:none;padding:0;margin:0}.upgrade-features li{display:flex;align-items:center;padding:10px 0;font-size:15px;color:#ffffffe6}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#22c55e33;border-radius:50%;color:#22c55e;font-weight:700;margin-right:12px;flex-shrink:0}.upgrade-modal-actions{display:flex;flex-direction:column;gap:12px}.upgrade-modal-btn{padding:14px 28px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;text-decoration:none;border:none;width:100%}.upgrade-modal-btn-primary{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 12px #22c55e4d}.upgrade-modal-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #22c55e66}.upgrade-modal-btn-secondary{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.upgrade-modal-btn-secondary:hover{background:#ffffff26}@media (max-width: 600px){.upgrade-modal-content{padding:30px 20px}.upgrade-modal-header h2{font-size:26px}.upgrade-modal-subtitle{font-size:14px}.upgrade-features h3{font-size:16px}.upgrade-features li{font-size:14px}}.saved-routines-container{display:flex;flex-direction:column;height:100%}.saved-routines-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl);border-bottom:1px solid var(--border);flex-shrink:0}.saved-routines-header h2{margin:0;font-size:1.6rem;color:var(--text-primary)}.upgrade-banner{margin:var(--spacing-lg) var(--spacing-lg) 0;background:linear-gradient(135deg,#667eea26,#764ba226);border:2px solid rgba(102,126,234,.3);border-radius:var(--radius-md);padding:var(--spacing-lg);animation:slideIn var(--transition-fast) ease-out}.upgrade-banner-content{display:flex;align-items:center;gap:var(--spacing-lg)}.upgrade-banner-icon{flex-shrink:0;width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff}.upgrade-banner-text{flex:1}.upgrade-banner-text h3{margin:0 0 var(--spacing-xs) 0;font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--text-primary)}.upgrade-banner-text p{margin:0;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.upgrade-banner-btn{flex-shrink:0;padding:var(--spacing-md) var(--spacing-xl);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.upgrade-banner-btn:hover{background:linear-gradient(135deg,#5568d3,#653a91);transform:translateY(-2px);box-shadow:0 6px 16px #667eea59}.routines-message{padding:var(--spacing-md);border-radius:var(--radius-sm);margin:var(--spacing-lg);font-weight:var(--font-weight-medium);animation:slideIn var(--transition-fast) ease-out}.routines-message-success{background:#22c55e1a;color:#86efac;border:1px solid rgba(34,197,94,.3)}.routines-message-error{background:#ef44441a;color:#fca5a5;border:1px solid rgba(239,68,68,.3)}.routines-loading,.routines-empty{text-align:center;padding:var(--spacing-2xl) var(--spacing-xl);color:var(--text-secondary);font-size:var(--text-lg)}.routines-empty{background:var(--darker, #0a0a14);border-radius:var(--radius-md);border:2px dashed var(--border-dark)}.load-shared-section{padding:var(--spacing-lg) var(--spacing-xl);background:var(--darker);border-bottom:1px solid var(--border-dark);border-top:1px solid var(--border-dark)}.load-shared-section h3{margin:0 0 var(--spacing-md) 0;font-size:var(--text-md);color:var(--text-primary)}.share-code-input-group{display:flex;gap:var(--spacing-sm)}.share-code-input-field{flex:1;padding:var(--spacing-md);border:1px solid var(--border-dark);border-radius:var(--radius-sm);background:var(--lighter);color:var(--text-primary);font-size:var(--text-sm);font-family:monospace;text-transform:uppercase}.share-code-input-field::placeholder{text-transform:none;opacity:.6}.load-shared-btn{padding:var(--spacing-md) var(--spacing-xl);background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.load-shared-btn:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.load-shared-btn:disabled{opacity:.5;cursor:not-allowed}.routines-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--spacing-lg);padding:var(--spacing-xl);flex:1;overflow-y:auto}.routine-card{background:var(--lighter);border:1px solid var(--border-dark);border-radius:var(--radius-md);padding:var(--spacing-lg);transition:all var(--transition-fast);display:flex;flex-direction:column}.routine-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);background:#1e2340}.routine-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);gap:var(--spacing-sm)}.routine-card-header h3{margin:0;color:var(--primary);font-size:1.2rem;word-break:break-word;flex:1}.routine-name-edit{display:flex;gap:var(--spacing-sm);width:100%}.routine-name-edit input{flex:1;padding:var(--spacing-sm);border:1px solid var(--primary);border-radius:var(--radius-sm);font-size:var(--text-sm)}.save-edit-btn,.cancel-edit-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:var(--font-weight-medium);font-size:var(--text-sm);transition:all var(--transition-fast)}.save-edit-btn{background:var(--primary);color:#fff}.save-edit-btn:hover{background:var(--primary-dark)}.cancel-edit-btn{background:var(--lighter);color:var(--text-primary);border:1px solid var(--border)}.cancel-edit-btn:hover{background:#1a1f2e;border-color:var(--text-secondary)}.edit-name-btn{background:none;border:none;cursor:pointer;font-size:1rem;padding:var(--spacing-sm);transition:transform var(--transition-fast)}.edit-name-btn:hover{transform:scale(1.2)}.routine-info{margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:#0f0f23;border-radius:var(--radius-sm)}.routine-info p{margin:var(--spacing-xs) 0;color:var(--text-secondary);font-size:var(--text-sm)}.routine-date{font-size:var(--text-xs);color:var(--text-light)}.routine-segments,.routine-countin{color:var(--primary);font-weight:var(--font-weight-medium)}.routine-segments-preview{margin-bottom:var(--spacing-md);padding:var(--spacing-md);background:#0f0f23;border-radius:var(--radius-sm);border-left:4px solid var(--primary)}.routine-segments-preview h4{margin:0 0 var(--spacing-sm) 0;color:var(--text-primary);font-size:var(--text-sm)}.routine-segments-preview ul{list-style:none;padding:0;margin:0}.routine-segments-preview li{padding:var(--spacing-xs) 0;color:var(--text-secondary);font-size:var(--text-xs);border-bottom:1px solid var(--border)}.routine-segments-preview li:last-child{border-bottom:none}.more-items{color:var(--primary);font-style:italic}.routine-actions{display:flex;gap:var(--spacing-sm);margin-top:auto}.load-btn,.share-btn,.delete-btn{flex:1;padding:var(--spacing-md);border:none;border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;gap:6px}.load-btn{background:var(--primary);color:#fff}.load-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.load-btn.disabled{background:#4b5563;color:#9ca3af;cursor:not-allowed;opacity:.6}.load-btn.disabled:hover{background:#4b5563;transform:none;box-shadow:none}.load-btn .lock-icon{margin-right:4px}.share-btn{background:#22c55e;color:#fff;border:none}.share-btn:hover{background:#16a34a;transform:translateY(-2px);box-shadow:0 4px 12px #22c55e4d}.share-btn.shared{background:#16a34a}.delete-btn{background:var(--danger);color:#fff;border:none}.delete-btn:hover{background:#d93333;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}@media (max-width: 768px){.saved-routines-container{padding:var(--spacing-lg)}.routines-list{grid-template-columns:1fr}.routine-card-header{flex-direction:column;align-items:flex-start}.routine-actions{flex-direction:column}.upgrade-banner-content{flex-direction:column;text-align:center}.upgrade-banner-icon{margin:0 auto}.upgrade-banner-btn{width:100%}}.feedback-widget{position:fixed;bottom:20px;right:20px;z-index:9999;transition:all .3s ease}.feedback-toggle{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;border:none;border-radius:12px 12px 0 0;padding:12px 20px;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px #0000004d;transition:all .2s ease;width:100%}.feedback-widget.collapsed .feedback-toggle{border-radius:12px}.feedback-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0006}.feedback-toggle svg{flex-shrink:0}.feedback-content{background:var(--lighter);border:1px solid var(--border-dark);border-top:none;border-radius:0 0 12px 12px;padding:20px;width:320px;box-shadow:0 8px 24px #0000004d;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.feedback-content h3{color:var(--text-primary);font-size:1.1rem;margin:0 0 12px;font-weight:600}.feedback-content form{display:flex;flex-direction:column;gap:12px}.feedback-textarea{width:100%;padding:12px;background:var(--darker);border:1px solid var(--border-dark);border-radius:8px;color:var(--text-primary);font-size:.95rem;font-family:inherit;resize:vertical;min-height:100px;transition:border-color .2s ease}.feedback-textarea:focus{outline:none;border-color:var(--primary)}.feedback-textarea:disabled{opacity:.6;cursor:not-allowed}.feedback-textarea::placeholder{color:var(--text-secondary);opacity:.6}.feedback-status{padding:10px 12px;border-radius:6px;font-size:.85rem;font-weight:500;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.feedback-status.success{background-color:#4caf5026;color:#4caf50;border:1px solid rgba(76,175,80,.3)}.feedback-status.error{background-color:#f4433626;color:#f44336;border:1px solid rgba(244,67,54,.3)}.feedback-submit{padding:10px 20px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.feedback-submit:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.feedback-submit:disabled{background:#ccc;cursor:not-allowed;opacity:.6;transform:none}.satisfaction-section{margin-bottom:16px}.satisfaction-label{display:block;color:var(--text-primary);font-size:.9rem;font-weight:500;margin-bottom:12px}.satisfaction-scale{display:flex;gap:6px;margin-bottom:8px}.satisfaction-btn{flex:1;padding:8px 4px;background:var(--darker);color:var(--text-primary);border:1px solid var(--border-dark);border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.satisfaction-btn:hover:not(:disabled){background:var(--lighter);border-color:var(--primary);transform:translateY(-2px)}.satisfaction-btn.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.satisfaction-btn:disabled{opacity:.6;cursor:not-allowed}.satisfaction-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-secondary);padding:0 4px}@media (max-width: 768px){.feedback-widget{bottom:10px;right:10px}.feedback-content{width:280px;padding:16px}.satisfaction-btn{padding:6px 2px;font-size:.85rem}.feedback-textarea{min-height:80px}}.authenticated-layout{display:flex;flex-direction:column;min-height:100vh;background-color:var(--white)}.authenticated-header{background-color:var(--light);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.authenticated-navbar{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-2xl);max-width:none;margin:0 auto;width:100%}.navbar-logo{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--primary);max-width:50px;height:auto;display:block}.navbar-user{display:flex;align-items:center;gap:var(--spacing-lg)}.user-greeting-link{color:var(--text-secondary);font-weight:var(--font-weight-medium);font-size:var(--text-base);text-decoration:none;transition:color var(--transition-fast)}.user-greeting-link:hover{color:var(--primary)}.authenticated-main{display:flex;flex:1;gap:0}.authenticated-sidebar{width:250px;background-color:var(--light);border-right:1px solid var(--border);padding:var(--spacing-2xl) var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-lg);overflow-y:auto;position:sticky;top:68px;height:calc(100vh - 68px);max-height:calc(100vh - 68px)}.sidebar-nav{display:flex;flex-direction:column;gap:var(--spacing-sm);flex:1}.sidebar-nav-btn{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:none;background-color:transparent;color:var(--text-primary);font-size:var(--text-base);font-weight:var(--font-weight-medium);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);text-align:left;display:flex;align-items:center;gap:var(--spacing-sm)}.sidebar-nav-btn:hover{background-color:var(--lighter);color:var(--primary);padding-left:var(--spacing-xl)}.sidebar-nav-btn.active{background-color:#6366f126;color:var(--primary);border-left:3px solid var(--primary);padding-left:calc(var(--spacing-lg) - 3px)}.sidebar-nav-btn.upgrade-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md);box-shadow:0 4px 12px #667eea40;justify-content:center}.sidebar-nav-btn.upgrade-btn:hover{background:linear-gradient(135deg,#5568d3,#653a91);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #667eea59}.sidebar-nav-btn.upgrade-btn.active{background:linear-gradient(135deg,#5568d3,#653a91);color:#fff;border-left:none}.sidebar-logout-btn{width:100%;padding:var(--spacing-md) var(--spacing-lg);border:none;background-color:var(--danger);color:#fff;font-size:var(--text-base);font-weight:var(--font-weight-medium);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);text-align:left;display:flex;align-items:center;gap:var(--spacing-sm);margin-top:auto}.sidebar-logout-btn:hover{background-color:#d93333;color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.authenticated-content{flex:1;padding:var(--spacing-2xl);overflow-y:auto;overflow-x:hidden;background-color:var(--white);display:flex;flex-direction:column;min-height:0}@media (max-width: 768px){.authenticated-sidebar{width:200px;padding:var(--spacing-lg)}.authenticated-content{padding:var(--spacing-lg)}.sidebar-nav-btn{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--text-sm)}.sidebar-nav-btn:hover{padding-left:var(--spacing-lg)}.sidebar-nav-btn.active{padding-left:calc(var(--spacing-md) - 3px)}}@media (max-width: 600px){.authenticated-main{flex-direction:column}.authenticated-sidebar{width:100%;height:auto;max-height:none;padding:var(--spacing-lg);border-right:none;border-bottom:1px solid var(--border);position:relative;top:0}.sidebar-nav{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-sm)}.sidebar-nav-btn{flex:1;min-width:150px}.sidebar-logout-btn{flex:1;min-width:150px;margin-top:0}.authenticated-navbar{flex-direction:column;gap:var(--spacing-lg)}.navbar-user{flex-direction:column;width:100%}}.purchase-page{width:100%;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;color:var(--text-primary)}.purchase-page-loading{display:flex;align-items:center;justify-content:center;min-height:60vh;font-size:var(--text-lg);color:var(--text-secondary)}.purchase-content{flex:1;padding:var(--spacing-4xl) var(--spacing-2xl);background:linear-gradient(to bottom,var(--lighter) 0%,var(--white) 100%)}.purchase-container{max-width:1200px;margin:0 auto}.purchase-header{text-align:center;margin-bottom:var(--spacing-3xl)}.purchase-header h1{font-size:2.5rem;margin-bottom:var(--spacing-md);color:var(--text-primary);font-weight:var(--font-weight-bold)}.purchase-header p{font-size:var(--text-lg);color:var(--text-secondary)}.error-banner{background:#fee;border:1px solid #fcc;border-radius:8px;padding:1rem;margin-bottom:2rem;text-align:center}.error-banner p{color:#c33;margin:0;font-weight:500}.purchase-grid{display:grid;grid-template-columns:1fr 450px;gap:var(--spacing-3xl);align-items:start}.plan-selection-section h2{font-size:var(--text-2xl);margin-bottom:var(--spacing-xl);color:var(--text-primary)}.plan-options{display:flex;flex-direction:column;gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl)}.plan-option{background:var(--white);border:2px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-xl);cursor:pointer;transition:all var(--transition-base);position:relative}.plan-option:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}.plan-option.selected{border-color:var(--primary);background:#6366f105;box-shadow:var(--shadow-primary)}.plan-badge{position:absolute;top:-12px;right:var(--spacing-lg);background:linear-gradient(135deg,var(--primary) 0%,#7c3aed 100%);color:#fff;padding:var(--spacing-xs) var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-weight-bold);box-shadow:var(--shadow-sm)}.plan-option-header{display:flex;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-md)}.radio-indicator{width:24px;height:24px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-base)}.plan-option.selected .radio-indicator{border-color:var(--primary)}.radio-dot{width:12px;height:12px;background:var(--primary);border-radius:50%;animation:scaleIn .2s ease-out}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.plan-option-title h3{font-size:var(--text-xl);margin:0 0 var(--spacing-xs) 0;color:var(--text-primary)}.plan-option-description{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}.plan-option-price{display:flex;align-items:baseline;gap:var(--spacing-xs)}.plan-option-price .currency{font-size:var(--text-lg);color:var(--primary);font-weight:var(--font-weight-bold)}.plan-option-price .amount{font-size:2rem;font-weight:var(--font-weight-bold);color:var(--text-primary)}.plan-option-price .period{color:var(--text-secondary);font-size:var(--text-base)}.savings-badge{margin-top:var(--spacing-md);display:inline-block;background:#22c55e1a;color:#22c55e;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.selected-plan-features{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.selected-plan-features h3{font-size:var(--text-lg);margin-bottom:var(--spacing-lg);color:var(--text-primary)}.features-list{list-style:none;padding:0;margin:0}.features-list li{padding:var(--spacing-md) 0;color:var(--text-secondary);border-bottom:1px solid var(--lighter);display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--text-sm)}.features-list li:last-child{border-bottom:none}.order-summary-section{position:sticky;top:var(--spacing-2xl)}.order-summary-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg)}.order-summary-card h2{font-size:var(--text-xl);margin-bottom:var(--spacing-xl);color:var(--text-primary)}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;font-size:var(--text-base)}.summary-label{color:var(--text-secondary)}.summary-value{color:var(--text-primary);font-weight:var(--font-weight-medium)}.summary-divider{height:1px;background:var(--border);margin:var(--spacing-lg) 0}.summary-item.total{font-size:var(--text-lg);font-weight:var(--font-weight-bold);padding-top:var(--spacing-lg)}.summary-item.total .summary-value{color:var(--primary);font-size:var(--text-2xl)}.payment-form{margin-top:var(--spacing-2xl)}.form-group{margin-bottom:var(--spacing-lg)}.form-group label{display:block;margin-bottom:var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--text-primary)}.form-group input{width:100%;padding:var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-base);transition:all var(--transition-base);background:var(--white);color:var(--text-primary)}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.submit-button{width:100%;padding:var(--spacing-lg);background:var(--primary);color:#fff;border:none;border-radius:var(--radius-lg);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base);margin-top:var(--spacing-lg)}.submit-button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.submit-button:disabled{opacity:.6;cursor:not-allowed}.security-note{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding:var(--spacing-md);background:var(--lighter);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--text-secondary)}.security-note svg{flex-shrink:0;color:var(--primary)}.guarantee{margin-top:var(--spacing-2xl);padding-top:var(--spacing-2xl);border-top:1px solid var(--border)}.guarantee h4{font-size:var(--text-base);margin-bottom:var(--spacing-sm);color:var(--text-primary)}.guarantee p{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6;margin:0}@media (max-width: 968px){.purchase-grid{grid-template-columns:1fr;gap:var(--spacing-2xl)}.order-summary-section{position:static}.purchase-header h1{font-size:2rem}}@media (max-width: 640px){.purchase-content{padding:var(--spacing-2xl) var(--spacing-lg)}.purchase-header h1{font-size:1.75rem}.order-summary-card,.selected-plan-features{padding:var(--spacing-lg)}.form-row{grid-template-columns:1fr}.plan-option{padding:var(--spacing-lg)}.plan-option-price .amount{font-size:1.5rem}}.purchase-success-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.success-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.success-container{max-width:600px;width:100%;background:#fff;border-radius:16px;padding:3rem;box-shadow:0 20px 60px #0000004d}.verifying-section{text-align:center}.spinner{width:48px;height:48px;border:4px solid #f3f3f3;border-top:4px solid #4C8DF5;border-radius:50%;margin:0 auto 2rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.verifying-section h1{font-size:1.75rem;color:#1a1a1a;margin-bottom:.5rem}.verifying-section p{color:#666;font-size:1rem}.error-section{text-align:center}.error-icon{margin:0 auto 2rem;animation:fadeIn .5s ease-out}.error-section h1{font-size:1.75rem;color:#1a1a1a;margin-bottom:1rem}.error-message{font-size:1.125rem;color:#c33;margin-bottom:2rem;line-height:1.6}.success-section{text-align:center}.success-icon{margin:0 auto 2rem;animation:scaleIn .5s ease-out}@keyframes scaleIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.success-section h1{font-size:2rem;color:#1a1a1a;margin-bottom:1rem}.success-message{font-size:1.125rem;color:#666;margin-bottom:2rem;line-height:1.6}.success-actions{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.primary-button,.secondary-button{padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s ease;border:none;cursor:pointer}.next-steps{background:#f8f9fa;border-radius:12px;padding:1.5rem;margin-bottom:2rem;text-align:left}.next-steps h3{font-size:1.25rem;color:#1a1a1a;margin-bottom:1rem}.next-steps ul{list-style:none;padding:0;margin:0}.next-steps li{color:#666;position:relative;padding:.5rem 0 .5rem 1.5rem}.next-steps li:before{content:"✓";position:absolute;left:0;color:#4caf50;font-weight:700}.confirmation-note{padding-top:1.5rem;border-top:1px solid #e0e0e0}.confirmation-note p{color:#666;font-size:.875rem;margin:0}@media (max-width: 768px){.success-container{padding:2rem 1.5rem}.success-section h1{font-size:1.5rem}.success-actions{gap:.75rem}}.purchase-cancel-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.cancel-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.cancel-container{max-width:700px;width:100%;background:#fff;border-radius:16px;padding:3rem;box-shadow:0 20px 60px #0000004d}.cancel-icon{margin:0 auto 2rem;text-align:center;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.cancel-container h1{font-size:2rem;color:#1a1a1a;margin-bottom:1rem;text-align:center}.cancel-message{font-size:1.125rem;color:#666;margin-bottom:2rem;line-height:1.6;text-align:center}.cancel-actions{display:flex;gap:1rem;margin-bottom:2.5rem}.primary-button,.secondary-button{flex:1;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s ease;border:none;cursor:pointer;text-align:center}.primary-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.secondary-button{background:transparent;color:#4c8df5;border:2px solid #4C8DF5}.secondary-button:hover{background:#4c8df5;color:#fff}.cancel-info{background:#f8f9fa;border-radius:12px;padding:1.5rem;margin-bottom:2rem}.cancel-info h3{font-size:1.125rem;color:#1a1a1a;margin-bottom:1rem}.cancel-info ul{list-style:none;padding:0;margin:0}.cancel-info li{color:#666;position:relative;padding:.5rem 0 .5rem 1.5rem;font-size:.95rem}.cancel-info li:before{content:"•";position:absolute;left:0;color:#4c8df5;font-weight:700;font-size:1.2rem}.help-section{background:#fff9e6;border-left:4px solid #ffc107;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.help-section h3{font-size:1.125rem;color:#1a1a1a;margin-bottom:.5rem}.help-section p{color:#666;margin-bottom:1rem;font-size:.95rem}.help-options{display:flex;gap:1rem;flex-wrap:wrap}.help-link{display:inline-block;padding:.5rem 1rem;background:#fff;color:#4c8df5;text-decoration:none;border-radius:6px;font-weight:500;font-size:.9rem;border:1px solid #4C8DF5;transition:all .2s ease;cursor:pointer;font-family:inherit}.help-link:hover{background:#4c8df5;color:#fff}.reassurance{padding-top:2rem;border-top:1px solid #e0e0e0}.reassurance-item{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-start}.reassurance-item:last-child{margin-bottom:0}.reassurance-item svg{flex-shrink:0;margin-top:.25rem}.reassurance-item h4{font-size:1rem;color:#1a1a1a;margin:0 0 .25rem}.reassurance-item p{font-size:.875rem;color:#666;margin:0;line-height:1.4}@media (max-width: 768px){.cancel-container{padding:2rem 1.5rem}.cancel-container h1{font-size:1.5rem}.cancel-actions,.help-options{flex-direction:column}.help-link{text-align:center}.reassurance-item{flex-direction:column;text-align:center;align-items:center}.reassurance-item svg{margin-top:0}}.metronome-container{display:flex;flex-direction:column;height:100%;width:100%;gap:var(--spacing-2xl);min-height:0}.metronome-container h2{color:var(--text-primary);margin:0;font-size:1.8rem;padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border)}.metronome-layout{display:grid!important;grid-template-columns:minmax(300px,400px) 1fr!important;gap:var(--spacing-2xl);flex:1;background:var(--white);border-radius:12px;box-shadow:var(--shadow-md);padding:var(--spacing-2xl);min-height:0;overflow:hidden}.metronome-left{display:flex;flex-direction:column;gap:var(--spacing-xl);justify-content:flex-start;overflow-y:auto;padding-right:var(--spacing-lg);min-height:0;max-width:400px}.metronome-left h2{color:var(--text-primary);margin:0;font-size:1.8rem;padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border)}.metronome-right{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:100%}.metronome-visual{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;gap:var(--spacing-2xl);padding:var(--spacing-2xl)}.beat-indicator{width:50px;height:50px;border-radius:50%;background-color:var(--lighter);border:2px solid var(--border);transition:all var(--transition-fast);flex-shrink:0}.metronome-controls{display:flex;flex-direction:column;gap:var(--spacing-xl);flex:1}.control-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.control-group label{font-weight:var(--font-weight-semibold);color:var(--text-primary);font-size:var(--text-sm)}.tempo-input-group{display:flex;align-items:center;gap:var(--spacing-lg)}.tempo-input-group input{flex:1;height:8px;cursor:pointer;border-radius:var(--radius-sm)}.tempo-input-group input[type=range]{flex:1;-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border);outline:none;cursor:pointer;padding:0;margin:0}.tempo-input-group input[type=range]:disabled{cursor:not-allowed;opacity:.6}.tempo-input-group input[type=range]::-webkit-slider-runnable-track{background:var(--border);height:6px;border-radius:3px;border:none}.tempo-input-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--lighter);box-shadow:0 2px 4px #0006;margin-top:-7px}.tempo-input-group input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.tempo-input-group input[type=range]::-moz-range-track{background:var(--border);height:6px;border-radius:3px;border:none}.tempo-input-group input[type=range]::-moz-range-progress{background:var(--primary);height:6px;border-radius:3px}.tempo-input-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.tempo-input-group input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}.tempo-input-group input[type=number]{width:80px;height:36px;padding:var(--spacing-sm);border:2px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-weight-bold);color:var(--primary);text-align:center;cursor:pointer;background-color:var(--lighter)}.tempo-input-group input[type=number]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 4px #6366f14d}.tempo-input-group input[type=number]:disabled{opacity:.6;cursor:not-allowed;background-color:#0a0a14}.tempo-input-group input:disabled{opacity:.6;cursor:not-allowed}select{padding:.7rem;border:2px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-base);color:var(--text-primary);background-color:var(--lighter);cursor:pointer;transition:border-color var(--transition-base)}select:hover:not(:disabled){border-color:var(--primary)}select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 4px #6366f14d}select:disabled{opacity:.6;cursor:not-allowed;background-color:var(--lighter)}.time-signature-input-group{display:flex;align-items:center;gap:var(--spacing-sm);justify-content:center}.time-sig-numerator{width:70px;padding:.7rem;border:2px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-weight-bold);text-align:center;color:var(--primary);background-color:var(--lighter)}.time-sig-numerator:focus{outline:none;border-color:var(--primary);box-shadow:0 0 4px #6366f14d}.time-sig-numerator:disabled{opacity:.6;cursor:not-allowed;background-color:#0a0a14}.time-sig-slash{font-size:1.5rem;font-weight:var(--font-weight-bold);color:var(--text-primary)}.time-sig-denominator{width:80px;padding:.7rem;border:2px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-weight-bold);text-align:center;color:var(--text-primary);background-color:var(--lighter)}.accent-toggle{flex-direction:row;align-items:center;justify-content:space-between}.accent-toggle label{margin:0}.accent-toggle input[type=checkbox]{width:20px;height:20px;cursor:pointer}.play-button{padding:var(--spacing-lg) var(--spacing-2xl);font-size:1.1rem;font-weight:var(--font-weight-semibold);color:#fff;background-color:var(--primary);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);margin-top:auto;width:100%}.play-button:hover:not(:disabled){background-color:var(--primary-dark);box-shadow:0 4px 12px #6366f166;transform:translateY(-2px)}.play-button:active:not(:disabled){transform:translateY(0)}.play-button.playing:hover{background-color:#dc2626;box-shadow:0 4px 12px #ef444466}.play-button:disabled{opacity:.6;cursor:not-allowed}.tap-tempo-btn{width:100%;padding:.8rem var(--spacing-xl);font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:#fff;background-color:var(--secondary);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);margin-top:var(--spacing-sm)}.tap-tempo-btn:hover:not(:disabled){background-color:#7c3aed;box-shadow:0 4px 12px #8b5cf666;transform:translateY(-2px)}.tap-tempo-btn:active:not(:disabled){transform:translateY(0)}.tap-tempo-btn:disabled{opacity:.6;cursor:not-allowed}.tap-tempo-btn.active{background-color:var(--primary);box-shadow:0 0 20px #8b5cf6cc;transform:scale(1.05)}.tap-help-text{text-align:center;font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--spacing-sm);margin-bottom:0}.tap-help-text kbd{background-color:var(--lighter);border:1px solid var(--border);border-radius:3px;padding:.2rem .4rem;font-family:monospace;font-size:.9rem;color:var(--text-primary)}.metronome-animation{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;height:auto;padding:var(--spacing-lg) 0;min-height:200px}.pendulum-container{position:relative;width:100%;height:180px;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--spacing-lg);overflow:visible}.pendulum{position:relative;width:4px;height:120px;background:var(--primary);border-radius:2px;transform-origin:bottom center;display:flex;align-items:flex-start;justify-content:center}.pendulum-bob{width:24px;height:24px;border-radius:50%;background:var(--primary);box-shadow:0 0 16px #6366f199,0 4px 8px #0000004d;margin-top:-12px}@keyframes swing{0%{transform:rotate(-25deg)}50%{transform:rotate(25deg)}to{transform:rotate(-25deg)}}.metronome-page-content-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2xl);height:100%;padding:0;width:100%;min-height:0}.metronome-section{display:flex;flex-direction:column;flex:1;width:100%;min-height:0}.programming-btn{padding:var(--spacing-md) var(--spacing-xl);background-color:var(--secondary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base);width:100%;max-width:500px}.programming-btn:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.stats-section,.recent-sessions{display:none}.upgrade-section{background:linear-gradient(135deg,var(--warning) 0%,var(--secondary) 100%);color:#fff;padding:var(--spacing-2xl);border-radius:var(--radius-lg);text-align:center;margin:0 var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl)}.upgrade-btn{display:inline-block;background-color:#fff;color:var(--warning);padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);text-decoration:none;transition:all var(--transition-base);cursor:pointer;border:none}.upgrade-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0000004d}.upgrade-section h2{font-size:var(--text-2xl);margin-bottom:var(--spacing-sm)}.upgrade-section p{margin-bottom:var(--spacing-xl);font-size:var(--text-base)}.upgrade-btn{display:inline-block;background-color:#fff;color:var(--warning);padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);text-decoration:none;transition:all var(--transition-base)}.upgrade-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.metronome-page-footer{background-color:var(--dark);color:#fff;padding:var(--spacing-2xl);text-align:center;margin-top:auto}.metronome-page-footer .footer-content{max-width:1200px;margin:0 auto}.metronome-page-footer .footer-links{display:flex;justify-content:center;gap:var(--spacing-2xl);margin-top:var(--spacing-lg)}.metronome-page-footer .footer-links a{color:var(--text-light);text-decoration:none;transition:color var(--transition-base)}.metronome-page-footer .footer-links a:hover{color:#fff}@media (max-width: 1024px){.metronome-page-container{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;position:relative;top:auto}}@media (max-width: 768px){.metronome-page-navbar{flex-direction:column;gap:1rem;padding:1rem}.nav-actions{width:100%;justify-content:space-between}.metronome-page-main{padding:1rem}.stats-section{grid-template-columns:1fr 1fr}.session-item{flex-direction:column;align-items:flex-start;gap:.5rem}.session-time{width:100%}.sidebar{grid-template-columns:1fr}.metronome-page-footer .footer-links{flex-direction:column;gap:.5rem}}@media (max-width: 480px){.welcome-section h1{font-size:1.5rem}.stats-section{grid-template-columns:1fr}.stat-card h3{font-size:.8rem}.recent-sessions h2{font-size:1.25rem}.upgrade-section{padding:1.5rem}.upgrade-section h2{font-size:1.25rem}}.programming-page-container{display:flex;flex-direction:column;gap:var(--spacing-xl)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;padding:var(--spacing-lg);animation:fadeIn .2s ease-out}.modal-content{background:var(--light);border-radius:12px;border:1px solid var(--border);max-height:90vh;width:100%;max-width:1000px;overflow-y:auto;animation:slideUp .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.programming-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--spacing-lg)}.programming-modal{background:var(--light);border-radius:16px;border:1px solid var(--border);max-width:600px;max-height:90vh;width:100%;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;overflow-y:auto}.programming-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xl);border-bottom:1px solid var(--border);flex-shrink:0}.programming-header h2{margin:0;font-size:1.6rem;color:var(--text-primary)}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.close-button:hover{background-color:var(--lighter);color:var(--text-primary)}.programming-content{padding:var(--spacing-xl);flex:1;overflow-y:auto}.programming-section{margin-bottom:var(--spacing-2xl);padding:var(--spacing-md);background:var(--lighter);border-radius:var(--radius-lg);border:1px solid var(--border)}.programming-section h3{margin:0 0 var(--spacing-md) 0;font-size:1.1rem;color:var(--text-primary)}.programming-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.column-left{display:flex;flex-direction:column;gap:var(--spacing-xl);min-height:0}.column-left .programming-section{margin-bottom:0}.column-middle{min-height:400px}.column-middle-right-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xl);grid-column:span 2;min-height:600px}.visualization-row{display:flex;flex:1;min-height:0;width:100%}.column-middle,.column-right{flex:1;display:flex;flex-direction:column;min-height:0}.column-middle .programming-section{flex:1;display:flex;flex-direction:column;min-height:0;margin-bottom:0}.count-in-control{display:flex;flex-direction:column;gap:var(--spacing-sm)}.count-in-control label{font-weight:var(--font-weight-medium);color:var(--text-secondary);font-size:var(--text-sm)}.count-in-control input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);background-color:var(--lighter);color:var(--text-primary)}.count-in-control input:disabled{background-color:#0a0a14;cursor:not-allowed;opacity:.5}.save-routine-form{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-lg);background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border-radius:var(--radius-md);border:2px solid var(--primary)}.form-help-text{display:block;font-size:var(--text-xs);color:var(--text-light);margin-top:4px}.form-actions{display:flex;gap:var(--spacing-md)}.save-button,.load-button{flex:1;padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-base)}.save-button{background:var(--primary);color:#fff}.save-button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.save-button:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.load-button{background:var(--lighter);color:var(--primary);border:1px solid var(--border-dark)}.load-button:hover:not(:disabled){background:#1e1f2e;border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #6366f133}.load-button:disabled{opacity:.6;cursor:not-allowed}.form-group-with-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.form-group-with-actions label{margin:0;font-weight:var(--font-weight-medium);color:var(--text-primary);font-size:var(--text-base);flex-shrink:0}.form-actions-inline{display:flex;gap:var(--spacing-sm);flex-shrink:0}.save-button-small,.load-button-small{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-sm);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-sm);white-space:nowrap}.save-button-small{background:var(--primary);color:#fff}.save-button-small:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 12px #6366f14d}.save-button-small:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.load-button-small{background:var(--lighter);color:var(--primary);border:1px solid var(--border-dark)}.load-button-small:hover:not(:disabled){background:#1e1f2e;border-color:var(--primary);color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #6366f133}.load-button-small:disabled{opacity:.6;cursor:not-allowed}.save-message{padding:var(--spacing-md);border-radius:var(--radius-sm);font-weight:var(--font-weight-medium);text-align:center;animation:slideIn var(--transition-fast) ease-out}.save-message-success{background:#22c55e1a;color:#86efac;border:1px solid rgba(34,197,94,.3)}.save-message-error{background:#ef44441a;color:#fca5a5;border:1px solid rgba(239,68,68,.3)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.add-segment-form{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-lg);background:var(--lighter);border-radius:var(--radius-md);border:2px dashed var(--border-dark)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{font-weight:var(--font-weight-medium);color:var(--text-secondary);font-size:var(--text-sm)}.form-group input,.form-group select{padding:var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);background-color:var(--lighter);color:var(--text-primary)}.form-group input:disabled,.form-group select:disabled{background-color:#0a0a14;cursor:not-allowed;opacity:.5}.time-sig-group{display:flex;gap:var(--spacing-sm);align-items:center}.time-sig-group input,.time-sig-group select{flex:1;padding:var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);background-color:var(--lighter);color:var(--text-primary)}.time-sig-group span{font-weight:var(--font-weight-bold);color:var(--text-secondary)}.add-segment-btn{padding:var(--spacing-md);background:var(--primary);color:var(--white);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-medium);transition:background-color var(--transition-fast);margin-top:var(--spacing-sm)}.add-segment-btn:hover:not(:disabled){background-color:var(--primary-dark)}.add-segment-btn:disabled{background-color:var(--border);cursor:not-allowed;opacity:.5}.segments-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.empty-segments{padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;background:var(--lighter);border-radius:var(--radius-md);border:2px dashed var(--border-dark)}.empty-segments p{margin:0;color:var(--text-light);font-size:var(--text-sm)}.segments-cards-container{display:flex;flex-direction:column;gap:var(--spacing-lg);height:600px;overflow-y:auto;padding:var(--spacing-lg);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--lighter)}.segments-cards-container::-webkit-scrollbar{width:8px}.segments-cards-container::-webkit-scrollbar-track{background:transparent}.segments-cards-container::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:4px;transition:background var(--transition-fast)}.segments-cards-container::-webkit-scrollbar-thumb:hover{background:var(--border)}.segment-card{background:var(--lighter);border:2px solid var(--border-dark);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);flex-shrink:0}.segment-card.playing{border-color:var(--primary);background:#6366f10d;box-shadow:0 0 0 3px #6366f11a}.segment-card.default-segment{border:2px solid var(--primary);opacity:.7}.segment-card.add-segment-placeholder{border:2px dashed var(--border-dark);display:flex;align-items:center;justify-content:center;height:120px;cursor:pointer;flex-shrink:0}.segment-card.add-segment-placeholder:hover{border-color:var(--primary);background:#6366f10d}.add-segment-btn{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);padding:var(--spacing-lg)}.add-segment-btn:hover:not(:disabled){color:var(--primary)}.add-segment-btn:disabled{opacity:.5;cursor:not-allowed}.placeholder-icon{font-size:2rem;font-weight:700}.placeholder-text{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}.segment-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--border);border-bottom:1px solid var(--border-dark);gap:var(--spacing-md)}.segment-title{font-weight:var(--font-weight-semibold);color:var(--text-primary);flex:1;cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-fast)}.segment-title:hover{background-color:var(--border)}.segment-title-input{font-weight:var(--font-weight-semibold);color:var(--text-primary);flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--primary);border-radius:var(--radius-sm);background:var(--light);font-size:inherit;font-family:inherit;outline:none}.edit-segment-btn,.remove-segment-btn{background:none;border:1px solid var(--border-dark);color:var(--text-secondary);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;font-size:var(--text-sm);white-space:nowrap}.edit-segment-btn:hover:not(:disabled),.remove-segment-btn:hover:not(:disabled){color:var(--primary);background:#6366f11a}.edit-segment-btn:disabled,.remove-segment-btn:disabled{opacity:.5;cursor:not-allowed}.segment-details{padding:var(--spacing-md);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.detail-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.detail-item .label{font-size:var(--text-xs);color:var(--text-secondary);font-weight:var(--font-weight-medium)}.detail-item .value{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.segment-name{font-weight:var(--font-weight-semibold);color:var(--text-primary);flex:1}.segment-name-input{flex:1;padding:var(--spacing-sm);border:2px solid var(--primary);border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:var(--font-weight-semibold);background-color:var(--lighter);color:var(--text-primary)}.segment-name-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f133}.segment-actions{display:flex;gap:var(--spacing-sm)}.edit-segment-btn{background:none;border:none;cursor:pointer;font-size:var(--text-base);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-fast);color:var(--primary)}.edit-segment-btn:hover{background-color:#6366f11a}.edit-segment-btn:disabled{opacity:.5;cursor:not-allowed}.remove-segment-btn{background:none;border:none;cursor:pointer;font-size:var(--text-base);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color var(--transition-fast);color:#ff6b6b}.remove-segment-btn:hover{background-color:#ff6b6b1a}.remove-segment-btn:disabled{opacity:.5;cursor:not-allowed}.segment-content{padding:var(--spacing-lg)}.segment-edit{padding:var(--spacing-lg);background:var(--lighter);border-top:1px solid var(--border)}.edit-group{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.edit-group:last-child{margin-bottom:0}.edit-group label{font-size:var(--text-xs);color:var(--text-secondary);font-weight:var(--font-weight-medium)}.edit-group input,.edit-group select{padding:var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);transition:border-color var(--transition-fast);background-color:var(--lighter);color:var(--text-primary)}.edit-group input:focus,.edit-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f133}.edit-group input:disabled,.edit-group select:disabled{background-color:#0a0a14;cursor:not-allowed;opacity:.5}.segment-info{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.info-item .label{font-size:var(--text-xs);color:var(--text-light);font-weight:var(--font-weight-medium)}.info-item .value{font-size:1.1rem;color:var(--text-primary);font-weight:var(--font-weight-semibold)}.current-bar-display{background:#6366f11a;border:2px solid var(--primary)}.bar-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:var(--lighter);border-radius:var(--radius-md)}.bar-counter{display:flex;flex-direction:column;gap:var(--spacing-xs)}.bar-counter .label{font-size:var(--text-xs);color:var(--text-light);font-weight:var(--font-weight-medium)}.bar-counter .value{font-size:1.3rem;color:var(--primary);font-weight:var(--font-weight-bold)}.bar-stats{display:flex;gap:var(--spacing-lg)}.stat{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.stat .label{font-size:var(--text-xs);color:#999;font-weight:var(--font-weight-medium)}.stat .value{font-size:1.1rem;color:#333;font-weight:var(--font-weight-semibold)}.beats-display-programming{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.beats-display-programming .beat-indicator{width:36px;height:36px;border-radius:50%;background:var(--border);transition:all var(--transition-fast);border:2px solid var(--border)}.beats-display-programming .beat-indicator.accent{border-color:var(--warning);background:#f59e0b1a}.beats-display-programming .beat-indicator.active{background:var(--primary);border-color:var(--primary-dark);transform:scale(1.15);box-shadow:0 0 10px #6366f180}.beats-display-programming .beat-indicator.active.accent{background:var(--warning);border-color:var(--warning);box-shadow:0 0 10px #f59e0b80}.playback-controls{width:100%;display:flex;gap:var(--spacing-lg)}.play-btn{flex:1;padding:var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);background:#27ae60;color:#fff;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.play-btn:hover:not(:disabled){background:#229954}.play-btn.playing{background:var(--danger)}.play-btn.playing:hover:not(:disabled){background:#c0392b}.play-btn:disabled{background:#ccc;cursor:not-allowed}.skip-countin-btn{background:var(--warning);color:#fff}.skip-countin-btn:hover:not(:disabled){background:#d68910}.skip-countin-btn:disabled{background:var(--border);cursor:not-allowed;opacity:.5}.routine-summary{padding:var(--spacing-lg);background:var(--lighter);border-radius:var(--radius-md);font-size:var(--text-sm)}.routine-summary p{margin:var(--spacing-sm) 0;color:var(--text-secondary)}.routine-summary p:first-child{margin-top:0}.routine-summary p:last-child{margin-bottom:0}.routine-summary strong{color:var(--text-primary)}.count-in-simple{background:#f59e0b1a;border-color:var(--warning);text-align:center}.count-in-simple p{margin:0;color:var(--warning);font-weight:var(--font-weight-medium);font-size:var(--text-base)}@media (max-width: 600px){.programming-modal{max-width:100%;border-radius:12px;max-height:100vh}.bar-config-display{grid-template-columns:1fr}.bar-info{flex-direction:column;align-items:flex-start;gap:1rem}.bar-stats{width:100%;justify-content:flex-start}.count-in-input-group,.playback-controls{flex-direction:column}.play-btn,.skip-countin-btn{min-width:auto}}.confirmation-dialog{min-width:400px;padding:var(--spacing-lg);text-align:center;background:var(--white);border:2px solid var(--primary)}.confirmation-dialog h3{margin-top:0;margin-bottom:var(--spacing-md);color:var(--primary);font-size:var(--text-lg);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.confirmation-dialog h3:before{content:"⚠";font-size:1.5em}.confirmation-dialog p{margin-bottom:var(--spacing-lg);color:var(--text-secondary);line-height:1.5}.confirmation-dialog strong{color:var(--primary);font-weight:600}.confirmation-actions{display:flex;gap:var(--spacing-md);justify-content:center}.confirm-button,.cancel-button{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:6px;background:#fff;color:var(--text-primary);cursor:pointer;font-size:var(--text-sm);font-weight:600;transition:all .2s ease}.confirm-button{background:var(--primary);color:#fff;border:1px solid var(--primary)}.confirm-button:hover:not(:disabled){opacity:.9;box-shadow:0 2px 8px rgba(var(--primary-rgb),.3)}.cancel-button{background:var(--background);color:var(--text-primary);border:1px solid var(--border)}.cancel-button:hover:not(:disabled){background:var(--surface);border-color:var(--border-dark)}.confirm-button:disabled,.cancel-button:disabled{opacity:.6;cursor:not-allowed}.metronome-visualization{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;flex:1;gap:var(--spacing-2xl);padding:var(--spacing-2xl)}.metronome-info-display{display:flex;align-items:center;gap:var(--spacing-2xl);padding:var(--spacing-lg) var(--spacing-2xl);background:var(--lighter);border-radius:12px;border:2px solid var(--border)}.info-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.info-value{font-size:2.5rem;font-weight:var(--font-weight-bold);color:var(--primary);line-height:1}.info-label{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.info-divider{width:2px;height:50px;background:var(--border);border-radius:1px}.beats-display{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:nowrap;align-content:center;width:100%}.beat-indicator{width:60px;height:60px;border-radius:50%;background-color:var(--lighter);border:3px solid var(--border);transition:all var(--transition-fast);flex-shrink:0}.beat-indicator.active{background-color:var(--primary);border-color:var(--primary);box-shadow:0 0 16px #6366f199;transform:scale(1.3)}.beat-indicator.accent{border-color:#f59e0b}.beat-indicator.accent.active{background-color:#f59e0b;border-color:#f59e0b;box-shadow:0 0 16px #f59e0b99}.metronome-animation{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1;padding:var(--spacing-lg) 0;min-height:200px}.pendulum-container{position:relative;width:100%;height:280px;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--spacing-lg);overflow:visible}.pendulum{position:relative;width:6px;height:200px;background:var(--primary);border-radius:3px;transform-origin:bottom center;display:flex;align-items:flex-start;justify-content:center;transition:transform .05s linear}.pendulum-bob{width:36px;height:36px;border-radius:50%;background:var(--primary);box-shadow:0 0 20px #6366f199,0 4px 12px #0000004d;margin-top:-18px}.metronome-base{width:120px;height:30px;background:linear-gradient(to right,var(--primary) 0%,var(--secondary) 50%,var(--primary) 100%);border-radius:50% 50% 15px 15px;margin-top:-8px;box-shadow:0 4px 12px #0000004d;position:relative}.metronome-base:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:100%;height:8px;background:linear-gradient(to right,transparent 20%,rgba(0,0,0,.2) 50%,transparent 80%);border-radius:50%}@media (max-width: 768px){.metronome-visualization{padding:var(--spacing-lg)}.beat-indicator{width:40px;height:40px}.pendulum-container{height:150px}.pendulum{height:100px}}:root{--primary: #6366f1;--primary-dark: #4f46e5;--secondary: #8b5cf6;--danger: #ef4444;--warning: #f59e0b;--success: #10b981;--light: #1a1a2e;--lighter: #16213e;--border: #2a2a3e;--border-dark: #404060;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--text-light: #707080;--white: #0f0f23;--dark: #1a1a2e}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.5rem;--spacing-2xl: 2rem;--spacing-3xl: 3rem;--spacing-4xl: 4rem}:root{--text-xs: .75rem;--text-sm: .95rem;--text-base: 1rem;--text-lg: 1.1rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.8rem;--text-4xl: 2.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: bold}:root{--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 20px}:root{--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 24px rgba(0, 0, 0, .5);--shadow-primary: 0 8px 24px rgba(99, 102, 241, .3)}:root{--transition-fast: .2s ease;--transition-base: .3s ease;--transition-slow: .5s ease}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f0f23;color:#e0e0e0}.btn,.cta-button,.logout-btn,.programming-btn,.play-button,.tap-tempo-btn,.edit-segment-btn,.delete-segment-btn,.add-segment-btn,.action-button,.nav-link.login-link{border:none;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base);padding:var(--spacing-md) var(--spacing-lg);display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-primary,.cta-button.primary,.play-button,.programming-btn,.edit-segment-btn,.add-segment-btn,.nav-link.login-link{background-color:var(--primary);color:var(--white)}.btn-primary:hover,.cta-button.primary:hover,.play-button:hover,.programming-btn:hover,.edit-segment-btn:hover,.add-segment-btn:hover,.nav-link.login-link:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:active,.cta-button.primary:active{transform:translateY(0)}.btn-secondary,.cta-button.secondary{background-color:var(--secondary);color:var(--white);border:none;box-shadow:var(--shadow-sm)}.btn-secondary:hover,.cta-button.secondary:hover{background-color:#7c3aed;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-danger,.logout-btn,.delete-segment-btn{background-color:var(--danger);color:var(--white)}.btn-danger:hover,.logout-btn:hover,.delete-segment-btn:hover{opacity:.9;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary-purple,.tap-tempo-btn{background-color:var(--secondary);color:var(--white)}.btn-secondary-purple:hover,.tap-tempo-btn:hover{opacity:.9;transform:scale(1.05);box-shadow:var(--shadow-md)}.btn-full{width:100%}.play-button.playing{background-color:var(--danger)}.play-button.playing:hover{background-color:#dc2626}.card,.stat-card,.segment-card,.feature-card,.pricing-card,.faq-item{background:var(--light);border-radius:var(--radius-lg);padding:var(--spacing-2xl);transition:all var(--transition-base);border:1px solid var(--border)}.card:hover,.stat-card:hover,.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.pricing-card{border:2px solid var(--border-dark);padding:var(--spacing-2xl)}.pricing-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--border)}.pricing-card.highlighted{border-color:var(--primary);box-shadow:var(--shadow-primary);transform:scale(1.05)}.segment-card{border:1px solid var(--border);padding:var(--spacing-lg)}.faq-item{background-color:var(--light);border-radius:var(--radius-md);padding:var(--spacing-xl);border:1px solid var(--border)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.form-label{font-weight:var(--font-weight-semibold);color:var(--text-primary);font-size:var(--text-sm)}input,select,textarea{padding:var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-base);font-family:inherit;transition:all var(--transition-base);background-color:var(--lighter);color:var(--text-primary)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 4px #6366f14d;background-color:#1e1e38}input:disabled,select:disabled{background-color:#0a0a14;color:var(--text-secondary);cursor:not-allowed;opacity:.5}.beat-indicator{width:40px;height:40px;border-radius:50%;background-color:var(--lighter);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-semibold);color:var(--text-primary);font-size:var(--text-sm);transition:all var(--transition-fast)}.beat-indicator.active{background-color:var(--primary);color:var(--white);border-color:var(--primary);box-shadow:0 0 8px #6366f166}.beat-indicator.accent{border-color:var(--warning);background-color:var(--warning);color:var(--white)}.header{background-color:var(--light);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;width:100%}.navbar{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) var(--spacing-2xl);max-width:1200px;margin:0 auto}.logo{font-size:var(--text-2xl);font-weight:var(--font-weight-bold);color:var(--primary);text-decoration:none;cursor:pointer;max-width:50px;height:auto;display:block}.logo-container{display:flex;align-items:center;gap:var(--spacing-md);text-decoration:none;color:var(--primary);cursor:pointer}.logo-container span{font-size:var(--text-lg);font-weight:var(--font-weight-bold)}.logo-text{color:#fff}.nav-links{display:flex;gap:var(--spacing-2xl);align-items:center}.nav-link{text-decoration:none;color:var(--text-primary);font-weight:var(--font-weight-medium);transition:color var(--transition-base)}.nav-link:hover{color:var(--primary)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-2rem)}.flex{display:flex}.flex-column{flex-direction:column}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-center{display:flex;justify-content:center;align-items:center}.grid{display:grid}.grid-auto{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.gap-2xl{gap:var(--spacing-2xl)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-light{color:var(--text-light)}.text-primary-color{color:var(--primary)}.font-weight-medium{font-weight:var(--font-weight-medium)}.font-weight-semibold{font-weight:var(--font-weight-semibold)}.font-weight-bold{font-weight:var(--font-weight-bold)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.p-lg{padding:var(--spacing-lg)}.p-2xl{padding:var(--spacing-2xl)}.bg-light{background-color:var(--light)}.bg-lighter{background-color:var(--lighter)}.bg-primary-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%)}.bg-dark{background-color:var(--dark);color:var(--white)}@media (max-width: 768px){.navbar{flex-direction:column;gap:var(--spacing-lg)}.nav-links{width:100%;justify-content:center;gap:var(--spacing-lg)}.grid-auto{grid-template-columns:1fr}.hide-mobile{display:none}}@media (max-width: 480px){.navbar{padding:var(--spacing-lg)}.btn,.cta-button{width:100%;padding:var(--spacing-md) var(--spacing-md)}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}}.user-profile-container{display:flex;flex-direction:column;gap:var(--spacing-2xl);padding:var(--spacing-2xl)}.user-profile-container h1{font-size:var(--text-3xl);color:var(--text-primary);margin-bottom:var(--spacing-lg)}.profile-content{display:grid;grid-template-columns:250px 1fr;gap:var(--spacing-2xl);align-items:start}.profile-left-column{display:flex;flex-direction:column;gap:var(--spacing-lg)}.profile-picture-section{display:flex;justify-content:flex-start;align-items:flex-start}.profile-middle-column{display:flex;flex-direction:column;gap:var(--spacing-2xl)}.profile-section{background-color:var(--light);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-2xl)}.profile-section h2{font-size:var(--text-xl);color:var(--text-primary);margin-bottom:var(--spacing-lg);border-bottom:2px solid var(--border);padding-bottom:var(--spacing-lg)}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.profile-item{display:flex;flex-direction:column;gap:var(--spacing-sm)}.profile-actions{display:flex;gap:var(--spacing-md);padding-top:var(--spacing-lg);border-top:1px solid var(--border)}.profile-item label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.5px}.profile-value{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--font-weight-medium);word-break:break-all;display:flex;align-items:center;gap:var(--spacing-sm)}.manage-subscription-btn{padding:.4rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:var(--font-weight-semibold);cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #667eea4d;margin-left:1rem}.manage-subscription-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.manage-subscription-btn:active{transform:translateY(0)}.profile-picture{width:200px;height:200px;border-radius:50%;border:3px solid var(--primary);object-fit:cover}.profile-picture-placeholder{width:200px;height:200px;border-radius:50%;border:3px solid var(--border);background-color:var(--light);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--text-sm)}@media (max-width: 768px){.user-profile-container{gap:var(--spacing-lg);padding:var(--spacing-lg)}.profile-content{grid-template-columns:1fr;gap:var(--spacing-xl)}.profile-picture,.profile-picture-placeholder{width:150px;height:150px}.profile-section{padding:var(--spacing-lg)}.profile-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}}