.app-loading{display:flex;justify-content:center;align-items:center;min-height:100vh;color:#fff}.loading-spinner{font-size:1.5rem}.loading{text-align:center;padding:2rem;color:#666}.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2rem}.login-container{background:#fff;border-radius:12px;padding:3rem;box-shadow:0 10px 40px #0000001a;max-width:400px;width:100%;text-align:center}.login-container h1{color:#333;margin-bottom:.5rem;font-size:2rem}.login-container p{color:#666;margin-bottom:2rem}.telegram-login-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.telegram-login-hint{color:#666;font-size:.9rem;margin-top:1rem}.telegram-login-button{display:flex;align-items:center;gap:.5rem;background:#08c;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background .2s}.telegram-login-button:hover{background:#0077b3}.error-message{background:#fee;color:#c33;padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.9rem}.dashboard{min-height:100vh;background:#f5f5f5}.dashboard-header{background:#fff;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a}.checkout-message{padding:1rem 2rem;margin:0;font-weight:500;text-align:center;animation:slideDown .3s ease-out}.checkout-message-success{background:#d4edda;color:#155724;border-bottom:2px solid #28a745}.checkout-message-info{background:#d1ecf1;color:#0c5460;border-bottom:2px solid #17a2b8}.checkout-message-error{background:#f8d7da;color:#721c24;border-bottom:2px solid #dc3545}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dashboard-header h1{color:#333;font-size:1.5rem}.logout-button{background:#dc3545;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s}.logout-button:hover{background:#c82333}.dashboard-nav{background:#fff;padding:0 2rem;display:flex;gap:1rem;border-bottom:1px solid #e0e0e0}.dashboard-nav button{background:none;border:none;padding:1rem 1.5rem;cursor:pointer;font-size:1rem;color:#666;border-bottom:2px solid transparent;transition:all .2s}.dashboard-nav button:hover{color:#333}.dashboard-nav button.active{color:#667eea;border-bottom-color:#667eea}.dashboard-content{max-width:1200px;margin:0 auto;padding:2rem}.profile-container{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}.profile-container h2{color:#333;margin-bottom:1.5rem;font-size:1.5rem}.profile-info{display:flex;gap:2rem;flex-wrap:wrap}.profile-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #667eea}.profile-details{flex:1;min-width:250px}.profile-field{display:flex;padding:.75rem 0;border-bottom:1px solid #f0f0f0}.profile-field:last-child{border-bottom:none}.profile-field label{font-weight:600;color:#666;min-width:120px}.profile-field span{color:#333}.user-id{font-family:monospace;font-size:.85rem;word-break:break-all}.error{color:#dc3545;padding:1rem;background:#fee;border-radius:6px;margin:1rem 0}.subscription-plans-container{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}.subscription-plans-container h2{color:#333;margin-bottom:.5rem;font-size:1.5rem}.subscription-plans-description{color:#666;margin-bottom:2rem;font-size:1rem}.subscription-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}.subscription-plan-card{border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;transition:all .3s;background:#fff}.subscription-plan-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.plan-header{margin-bottom:1rem}.plan-name{color:#333;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.plan-price{display:flex;align-items:baseline;gap:.25rem}.plan-amount{color:#667eea;font-size:2rem;font-weight:700}.plan-period{color:#666;font-size:1rem}.plan-description{color:#666;font-size:.9rem;margin-bottom:1.5rem;flex-grow:1}.subscribe-button{background:#667eea;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s;width:100%}.subscribe-button:hover:not(:disabled){background:#5568d3}.subscribe-button:disabled{background:#ccc;cursor:not-allowed}.subscription-status-container{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}.subscription-status-container h2{color:#333;margin-bottom:1.5rem;font-size:1.5rem}.no-subscription{text-align:center;padding:3rem 2rem;color:#666}.no-subscription-hint{margin-top:.5rem;font-size:.9rem;color:#999}.subscriptions-list{display:flex;flex-direction:column;gap:1.5rem}.subscription-status-card{border:2px solid #e0e0e0;border-radius:12px;padding:2rem;background:#fff;transition:box-shadow .2s}.subscription-status-card:hover{box-shadow:0 4px 12px #0000001a}.status-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #f0f0f0}.status-header .plan-name{margin-bottom:.5rem}.plan-price-large{text-align:right;color:#667eea;font-size:2rem;font-weight:700;display:flex;align-items:baseline;gap:.25rem}.plan-price-large .plan-period{font-size:1rem;font-weight:400;color:#666}.status-badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:600;text-transform:uppercase}.status-badge.active{background:#d4edda;color:#155724}.status-badge.canceled{background:#f8d7da;color:#721c24}.status-badge.past-due{background:#fff3cd;color:#856404}.status-badge.trialing{background:#d1ecf1;color:#0c5460}.status-badge.unpaid{background:#f8d7da;color:#721c24}.status-badge.expired{background:#e2e3e5;color:#383d41}.subscription-details{display:flex;flex-direction:column;gap:1rem}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f5f5f5}.detail-row:last-child{border-bottom:none}.detail-row.warning{background:#fff3cd;padding:.75rem 1rem;border-radius:6px;border-bottom:none;margin-top:.5rem}.detail-label{font-weight:600;color:#666;flex:1}.detail-value{color:#333;text-align:right;flex:1}@media (max-width: 768px){.login-container{padding:2rem 1.5rem}.dashboard-header{padding:1rem;flex-direction:column;gap:1rem;align-items:flex-start}.dashboard-nav{padding:0 1rem;overflow-x:auto}.dashboard-content{padding:1rem}.profile-info{flex-direction:column}.profile-field{flex-direction:column;gap:.25rem}.profile-field label{min-width:auto}.subscription-plans-grid{grid-template-columns:1fr}.status-header{flex-direction:column;gap:1rem}.plan-price-large{text-align:left}.detail-row{flex-direction:column;align-items:flex-start;gap:.25rem}.detail-value{text-align:left}}*{margin:0;padding:0;box-sizing:border-box}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}#root{min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}