.subscription-page{padding:40px 20px;min-height:80vh;background:var(--bg-primary);max-width:1000px;margin:0 auto}.subscription-header{margin-bottom:32px}.subscription-header h1{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.subscription-header p{font-size:15px;color:var(--text-secondary)}.subscription-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;margin-bottom:24px;overflow:hidden}.subscription-card-header{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary)}.subscription-card-header svg{color:#10b981;width:22px;height:22px}.subscription-card-header h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.subscription-card-body{padding:24px}.current-plan-details{display:flex;flex-direction:column;gap:16px}@media (min-width:640px){.current-plan-details{flex-direction:row;justify-content:space-between}}.current-plan-info{display:flex;flex-direction:column;gap:12px}.subscription-plan-badge{display:inline-flex;padding:8px 16px;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:.3px;width:-moz-fit-content;width:fit-content}.subscription-plan-badge.free{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.subscription-plan-badge.investor{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(37,99,235,.15));color:#3b82f6;border:1px solid rgba(59,130,246,.3)}.subscription-plan-badge.pro{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.15));color:#10b981;border:1px solid rgba(16,185,129,.3)}.subscription-plan-badge.premium{background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(139,92,246,.15));color:#a855f7;border:1px solid rgba(168,85,247,.3)}.plan-detail-item{display:flex;align-items:center;gap:8px;font-size:14px}.plan-detail-item .detail-label{color:var(--text-tertiary)}.plan-detail-item .detail-value{color:var(--text-primary);font-weight:500}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600;text-transform:capitalize}.status-badge.active{background:rgba(16,185,129,.15);color:#10b981}.status-badge.trialing{background:rgba(59,130,246,.15);color:#3b82f6}.status-badge.past_due{background:rgba(245,158,11,.15);color:#f59e0b}.status-badge.canceled,.status-badge.unpaid{background:rgba(239,68,68,.15);color:#ef4444}.status-badge.paused{background:rgba(156,163,175,.15);color:#9ca3af}.cancel-warning{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:8px;margin-top:12px}.cancel-warning svg{color:#f59e0b;flex-shrink:0}.cancel-warning p{font-size:13px;color:var(--text-primary);margin:0}.plan-actions{display:flex;flex-direction:column;gap:12px;min-width:200px}@media (min-width:640px){.plan-actions{align-items:flex-end}}.subscription-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.subscription-btn:disabled{opacity:.6;cursor:not-allowed}.subscription-btn.primary{background:linear-gradient(135deg,#10b981,#059669);border:none;color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.25)}.subscription-btn.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,.35)}.subscription-btn.secondary{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary)}.subscription-btn.secondary:hover:not(:disabled){background:var(--bg-secondary);border-color:var(--text-tertiary)}.subscription-btn.danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ef4444}.subscription-btn.danger:hover:not(:disabled){background:rgba(239,68,68,.2)}.subscription-btn .spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:currentcolor;border-radius:50%;animation:spin .8s linear infinite}.history-list{list-style:none;padding:0;margin:0}.history-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-color);gap:12px}.history-item:last-child{border-bottom:none}.history-plan{font-size:14px;font-weight:500;color:var(--text-primary)}.history-status{font-size:12px;padding:4px 10px;border-radius:9999px}.history-date{font-size:13px;color:var(--text-tertiary)}.payment-table{width:100%;border-collapse:collapse}.payment-table th{text-align:left;padding:12px 16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-tertiary);background:var(--bg-tertiary)}.payment-table td,.payment-table th{border-bottom:1px solid var(--border-color)}.payment-table td{padding:16px;font-size:14px;color:var(--text-primary)}.payment-table tr:last-child td{border-bottom:none}.payment-table .status-paid{color:#10b981;font-weight:500}.payment-table .status-open{color:#f59e0b;font-weight:500}.payment-table .status-void{color:#ef4444;font-weight:500}.invoice-link{display:inline-flex;align-items:center;gap:4px;color:#10b981;text-decoration:none;font-size:13px;transition:color .2s ease}.invoice-link:hover{color:#059669;text-decoration:underline}.no-data-message{text-align:center;padding:32px 20px;color:var(--text-tertiary);font-size:14px}.subscription-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:32px 20px}.subscription-loading .spinner{width:20px;height:20px;border:2px solid var(--border-color);border-top:2px solid #10b981;border-radius:50%;animation:spin .8s linear infinite}.subscription-loading p{font-size:14px;color:var(--text-secondary)}.no-plan-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;text-align:center;padding:40px 20px}.no-plan-icon{width:64px;height:64px;color:var(--text-tertiary);margin-bottom:24px}.no-plan-container h2{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.no-plan-container p{font-size:15px;color:var(--text-secondary);margin-bottom:24px;max-width:400px}.subscription-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.subscription-modal{background:var(--bg-primary);border-radius:16px;max-width:400px;width:100%;padding:24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.subscription-modal .modal-icon{width:48px;height:48px;margin-bottom:16px}.subscription-modal .modal-icon.danger{color:#ef4444}.subscription-modal .modal-icon.success{color:#10b981}.subscription-modal h3{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.subscription-modal p{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px}.subscription-modal-actions{display:flex;gap:12px}.subscription-modal-actions button{flex:1}.success-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center;padding:40px 20px}.success-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;padding:48px 40px;max-width:520px;width:100%;animation:cardSlideUp .5s ease-out}@keyframes cardSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.success-icon-wrapper{width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:iconPop .5s ease-out .2s both}@keyframes iconPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.success-icon-wrapper .success-icon{width:40px;height:40px;color:#fff;margin:0}.success-icon{width:72px;height:72px;color:#10b981;margin-bottom:24px}.success-card h2{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.success-subtitle{font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px!important}.plan-details-card{background:var(--bg-tertiary);border-radius:12px;padding:20px;margin-bottom:24px;text-align:center}.plan-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.plan-icon{font-size:28px}.plan-name{font-size:20px;font-weight:700;color:var(--text-primary)}.next-billing{font-size:13px;color:var(--text-tertiary);margin:0}.benefits-section{text-align:left;padding:20px;background:var(--bg-tertiary);border-radius:12px;margin-bottom:28px}.benefits-title{font-size:13px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin:0 0 16px}.benefits-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.benefit-item{gap:10px;font-size:14px;color:var(--text-primary)}.benefit-check,.benefit-item{display:flex;align-items:center}.benefit-check{justify-content:center;width:20px;height:20px;background:#10b981;color:#fff;border-radius:50%;font-size:12px;flex-shrink:0}.benefit-text{color:var(--text-secondary)}.receipt-info{margin-top:20px;font-size:13px;color:var(--text-tertiary)}.success-actions{display:flex;flex-direction:column;gap:12px}@media (min-width:480px){.success-actions{flex-direction:row;justify-content:center}}.cancel-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center;padding:40px 20px}.cancel-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:20px;padding:48px 40px;max-width:480px}.cancel-icon{width:72px;height:72px;color:#f59e0b;margin-bottom:24px}.cancel-card h2{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.cancel-card p{font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:32px}@media (max-width:640px){.subscription-page{padding:24px 16px}.subscription-card-body,.subscription-card-header{padding:16px}.payment-table{display:block;overflow-x:auto}}.upgrade-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}.upgrade-modal{position:relative;background:var(--bg-primary);border-radius:20px;max-width:440px;width:100%;padding:32px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}.upgrade-modal .close-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px;border-radius:6px;transition:all .2s ease}.upgrade-modal .close-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.upgrade-modal .lock-icon{width:56px;height:56px;color:#f59e0b;margin-bottom:20px}.upgrade-modal h2{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.upgrade-modal p{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px}.toast-container,.upgrade-modal-actions{display:flex;flex-direction:column;gap:12px}.toast-container{position:fixed;top:20px;right:20px;z-index:10000;max-width:400px}.toast{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:0 10px 40px rgba(0,0,0,.15);animation:toast-slide-in .3s ease-out}@keyframes toast-slide-in{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.toast-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;flex-shrink:0}.toast-success .toast-icon{background:rgba(16,185,129,.15);color:#10b981}.toast-error .toast-icon{background:rgba(239,68,68,.15);color:#ef4444}.toast-info .toast-icon{background:rgba(59,130,246,.15);color:#3b82f6}.toast-message{flex:1;font-size:14px;font-weight:500;color:var(--text-primary);line-height:1.4}.toast-dismiss{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;border-radius:6px;transition:all .2s ease;flex-shrink:0}.toast-dismiss:hover{background:var(--bg-secondary);color:var(--text-primary)}@media (max-width:480px){.toast-container{left:12px;right:12px;max-width:none}}