*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}#root{max-width:1200px;margin:0 auto}.connect-page{background:#fff;border-radius:12px;padding:40px;box-shadow:0 20px 60px #0000004d}.page-header{text-align:center;margin-bottom:40px}.page-title{font-size:2.5rem;color:#333;margin-bottom:10px}.page-subtitle{color:#666;font-size:1.1rem;line-height:1.6}.comparison-table{margin-bottom:40px;overflow-x:auto}.comparison-table table{width:100%;border-collapse:collapse;margin-bottom:20px}.comparison-table th,.comparison-table td{padding:12px 16px;text-align:left;border:1px solid #ddd}.comparison-table th{background:#f8f9fa;font-weight:600}.comparison-table .highlight{background:#e3f2fd;font-weight:600;color:#1976d2}.recommendation{background:#fff3cd;padding:15px;border-radius:8px;border-left:4px solid #ffc107;margin-top:15px}.bookmarklet-section,.copy-paste-section{background:#f8f9fa;padding:30px;border-radius:8px;margin-bottom:40px}.section-title{color:#333;margin-bottom:10px}.subtitle{color:#666;font-size:.9rem;margin-bottom:20px}.bookmarklet-button-container{text-align:center;margin:20px 0}.bookmarklet-button{display:inline-block;padding:15px 30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1.1rem;cursor:grab;transition:transform .2s,box-shadow .2s}.bookmarklet-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.instruction{text-align:center;color:#666;margin-bottom:20px}.extract-button,.connect-button,.copy-button{padding:12px 24px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-right:10px;margin-bottom:10px}.extract-button{background:#4caf50;color:#fff}.extract-button:hover{background:#45a049}.connect-button{background:#2196f3;color:#fff}.connect-button:hover:not(:disabled){background:#1976d2}.connect-button:disabled{background:#ccc;cursor:not-allowed}.connect-button.loading{opacity:.7}.copy-button{background:#ff9800;color:#fff}.copy-button:hover{background:#f57c00}.session-textarea{width:100%;height:200px;padding:15px;border:2px solid #ddd;border-radius:6px;font-family:Courier New,monospace;font-size:.9rem;resize:vertical;margin-bottom:10px}.session-textarea:focus{outline:none;border-color:#2196f3}.code-display{width:100%;height:150px;padding:15px;background:#1e1e1e;color:#d4d4d4;border-radius:6px;font-family:Courier New,monospace;font-size:.85rem;resize:vertical}.steps{margin-bottom:30px}.step{display:flex;align-items:flex-start;margin-bottom:20px;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.step-number{flex-shrink:0;width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-right:15px}.step-content h3{margin-bottom:8px;color:#333}.step-content p{color:#666;line-height:1.6}.hint{color:#999;font-size:.9rem;margin-top:5px}.divider{text-align:center;margin:30px 0;position:relative}.divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#ddd}.divider span{background:#fff;padding:0 20px;font-weight:600;color:#666;position:relative;z-index:1}.success-message{color:#4caf50;font-weight:600;margin-top:10px}.error-message{background:#ffebee;color:#c62828;padding:15px;border-radius:8px;border-left:4px solid #f44336;margin:20px 0}.copied-badge{background:#4caf50;color:#fff;padding:5px 10px;border-radius:4px;font-size:.85rem;margin-left:10px}.faq-section{margin-top:40px;padding-top:40px;border-top:2px solid #ddd}.faq-title{text-align:center;margin-bottom:30px;color:#333}.faq-item{background:#f8f9fa;padding:20px;border-radius:8px;margin-bottom:15px}.faq-question{color:#333;margin-bottom:10px;font-size:1.1rem}.faq-answer{color:#666;line-height:1.6}.troubleshooting-section{margin-top:40px;padding-top:40px;border-top:2px solid #ddd}.troubleshooting-title{text-align:center;margin-bottom:30px;color:#333}.troubleshoot-item{background:#fff3cd;padding:20px;border-radius:8px;margin-bottom:15px;border-left:4px solid #ffc107}.troubleshoot-question{color:#856404;margin-bottom:10px;font-weight:600}.troubleshoot-answer{color:#856404;line-height:1.6}.info-box{background:#e3f2fd;padding:20px;border-radius:8px;border-left:4px solid #2196f3;margin:20px 0}.info-box h4{color:#1976d2;margin-bottom:10px}.info-box ul{margin-left:20px;margin-top:10px}.info-box li{margin-bottom:5px;color:#666}.manual-extraction{margin-top:20px;padding:20px;background:#f5f5f5;border-radius:8px}.code-block{background:#1e1e1e;color:#d4d4d4;padding:15px;border-radius:6px;overflow-x:auto;font-size:.85rem;margin:10px 0}.page-footer{text-align:center;margin-top:40px;padding-top:20px;border-top:2px solid #ddd}.footer-text{color:#666;margin-bottom:10px}.support-link{color:#2196f3;text-decoration:none}.support-link:hover{text-decoration:underline}.success-page{background:#fff;border-radius:12px;padding:60px 40px;text-align:center;box-shadow:0 20px 60px #0000004d}.success-content{max-width:600px;margin:0 auto}.success-icon{font-size:5rem;margin-bottom:20px}.success-title{font-size:2.5rem;color:#4caf50;margin-bottom:20px}.success-message{color:#666;font-size:1.2rem;line-height:1.6}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:30px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){body{padding:10px}.connect-page,.success-page{padding:20px}.page-title{font-size:2rem}.comparison-table{font-size:.9rem}.bookmarklet-button,.extract-button,.connect-button{width:100%;margin-right:0}.step{flex-direction:column}.step-number{margin-right:0;margin-bottom:10px}}.external-link{color:#2196f3;text-decoration:none;font-weight:500}.external-link:hover{text-decoration:underline}.download-link{display:inline-block;padding:10px 20px;background:#607d8b;color:#fff;text-decoration:none;border-radius:6px;margin-top:10px}.download-link:hover{background:#455a64}.instructions{background:#f8f9fa;padding:20px;border-radius:8px;margin-bottom:20px}.instructions h3{color:#333;margin-bottom:15px}.instructions ol{margin-left:20px;line-height:1.8}.instructions li{margin-bottom:10px}.dashboard-page{background:#fff;border-radius:12px;padding:40px;box-shadow:0 20px 60px #0000004d}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.dashboard-header h1{margin:0;color:#333}.back-button{color:#2196f3;text-decoration:none;font-weight:600;transition:color .2s}.back-button:hover{color:#1976d2}.loading-state,.error-state,.empty-state{text-align:center;padding:60px 20px}.error-icon{font-size:4rem;margin-bottom:15px}.retry-button{padding:12px 30px;background:#2196f3;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;margin-top:20px;transition:background .2s}.retry-button:hover{background:#1976d2}.empty-icon{font-size:4rem;margin-bottom:15px}.connect-button{display:inline-block;padding:15px 30px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;font-size:1.1rem;margin-top:20px;transition:transform .2s,box-shadow .2s}.connect-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.accounts-list{margin-top:20px}.accounts-list h2{color:#333;margin-bottom:20px}.account-card{background:#f8f9fa;border-radius:8px;padding:20px;margin-bottom:15px;border-left:4px solid #2196f3;transition:box-shadow .2s}.account-card:hover{box-shadow:0 4px 12px #0000001a}.account-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e0e0e0}.account-username{margin:0;color:#333;font-size:1.5rem;font-weight:700}.account-status{padding:6px 12px;border-radius:4px;font-size:.85rem;font-weight:600;text-transform:uppercase}.account-status.status-green{background:#d4edda;color:#155724}.account-status.status-red{background:#f8d7da;color:#721c24}.account-status.status-yellow{background:#fff3cd;color:#856404}.account-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.detail-item{display:flex;flex-direction:column;gap:5px}.detail-label{font-size:.85rem;color:#999;font-weight:600}.detail-value{font-size:1rem;color:#333;font-weight:600}.detail-value.days-critical{color:#dc3545}.detail-value.days-normal{color:#4caf50}.warning-banner{background:#fff3cd;color:#856404;padding:15px;border-radius:6px;border-left:4px solid #ffc107;margin-bottom:20px}.warning-banner strong{font-weight:600}.account-actions{display:flex;gap:10px}.action-button{padding:10px 20px;border:none;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.action-button.refresh{background:#2196f3;color:#fff}.action-button.refresh:hover{background:#1976d2}.action-button.delete{background:#dc3545;color:#fff}.action-button.delete:hover{background:#c82333}.action-buttons{display:flex;gap:15px;justify-content:center;margin-top:30px}.button{padding:15px 30px;text-decoration:none;border-radius:8px;font-weight:600;font-size:1.1rem;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.button.secondary{background:#6c757d;color:#fff}.security-note{background:#e7f3ff;padding:20px;border-radius:8px;margin:20px 0;border-left:4px solid #9c27b0}.security-note h3{color:#7c3aed;margin-bottom:10px}.security-note p{color:#666;line-height:1.6;margin:0}.help-section{background:#fff3cd;padding:20px;border-radius:8px;margin-top:20px;border-left:4px solid #ffc107}.help-section h3{color:#856404;margin-bottom:10px}.help-section p{color:#666;line-height:1.6;margin:0}.help-section a{color:#856404;font-weight:600}.help-section a:hover{text-decoration:underline}.copy-section{background:#f8f9fa;padding:30px;border-radius:8px;margin-bottom:40px}.copy-section h4{color:#333;margin-bottom:15px}.generator-section{background:#e7f3ff;padding:20px;border-radius:8px;margin-top:20px}.generator-section h4{color:#7c3aed;margin-bottom:10px}.copy-paste-section{background:#f8f9fa;padding:30px;border-radius:8px;margin-bottom:40px}