.portal-page{padding:var(--space-8) 0 var(--space-16);background:var(--color-bg-alt);min-height:calc(100vh - 200px)}.loading-state{text-align:center;padding:var(--space-16)}.spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-4)}@keyframes spin{to{transform:rotate(360deg)}}.page-header{margin-bottom:var(--space-8)}.btn-back{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-surface);color:var(--color-primary);border:2px solid var(--color-primary);border-radius:var(--radius-lg);font-weight:var(--font-semibold);text-decoration:none;font-size:var(--text-sm);margin-bottom:var(--space-4);transition:all var(--transition-fast)}.btn-back:hover{background:var(--color-primary);color:#fff}.page-header h1{font-size:var(--text-3xl);color:var(--color-text);margin-bottom:var(--space-2)}.page-header p{color:var(--color-text-secondary)}.billing-section{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm)}.billing-section h2{font-size:var(--text-lg);color:var(--color-text);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}.plan-card{display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media(min-width:768px){.plan-card{grid-template-columns:auto 1fr auto;align-items:center}}.plan-info{text-align:center;padding:var(--space-5);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;border-radius:var(--radius-lg)}@media(min-width:768px){.plan-info{min-width:180px}}.plan-icon{width:64px;height:64px;background:#fff3;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3)}.plan-info.spotlight .plan-icon{background:linear-gradient(135deg,#c9a227,#e8d48a);color:#1a1a2e}.plan-info.featured .plan-icon{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}.plan-info.enhanced .plan-icon{background:#ffffff4d}.plan-name{font-size:var(--text-2xl);font-weight:var(--font-bold);margin-bottom:var(--space-1)}.plan-price{font-size:var(--text-lg);opacity:.9}.plan-status{display:inline-block;margin-top:var(--space-3);padding:var(--space-1) var(--space-3);background:#fff3;border-radius:var(--radius-full);font-size:var(--text-sm)}.plan-status.active{background:#22c55e}.plan-status.expired{background:#ef4444}.plan-status.payment-failed{background:#f59e0b}.plan-status.cancelled{background:#6b7280}.plan-details h3{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.5px}.features-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.feature-tag{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-medium)}.feature-tag.enabled{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#166534;border:1px solid #86efac}.feature-tag.enabled svg{color:#22c55e}.feature-tag.disabled{background:linear-gradient(135deg,#fef2f2,#fee2e2);color:#991b1b;border:1px solid #fca5a5}.feature-tag.disabled svg{color:#ef4444}.feature-tag.add-btn{background:linear-gradient(135deg,#c67f4b,#a86639);color:#fff;border:none;cursor:pointer;transition:all var(--transition-fast)}.feature-tag.add-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #c67f4b66}.plan-expiry{margin-top:var(--space-4);color:var(--color-text-secondary);font-size:var(--text-sm)}.plan-actions{text-align:center}.subscription-card{display:flex;flex-direction:column;gap:var(--space-6)}@media(min-width:768px){.subscription-card{flex-direction:row;justify-content:space-between;align-items:flex-start}}.subscription-info{display:grid;gap:var(--space-3)}.info-row{display:flex;gap:var(--space-4)}.info-row .label{color:var(--color-text-secondary);min-width:140px}.info-row .value{font-weight:var(--font-medium)}.subscription-actions{display:flex;flex-direction:column;gap:var(--space-3)}.payment-card{display:flex;flex-direction:column;gap:var(--space-4)}@media(min-width:640px){.payment-card{flex-direction:row;justify-content:space-between;align-items:center}}.card-info{display:flex;align-items:center;gap:var(--space-4)}.card-icon{width:60px;height:40px;background:var(--color-bg-alt);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.card-details{display:flex;flex-direction:column}.card-brand{font-weight:var(--font-semibold)}.card-last4{color:var(--color-text-secondary);font-family:monospace}.card-expiry{color:var(--color-text-muted);font-size:var(--text-sm)}.payment-history{display:flex;flex-direction:column;gap:var(--space-3)}.payment-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--space-4);padding:var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-lg);align-items:center}.payment-date{color:var(--color-text-secondary);font-size:var(--text-sm)}.payment-desc{font-weight:var(--font-medium)}.payment-amount{font-weight:var(--font-semibold);color:var(--color-primary)}.payment-status{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-medium)}.payment-status.completed{background:#dcfce7;color:#16a34a}.payment-status.failed{background:#fee2e2;color:#dc2626}.payment-status.pending{background:#fef3c7;color:#d97706}.invoice-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-lg);margin-bottom:var(--space-2)}.invoice-info{display:flex;flex-direction:column;gap:var(--space-1)}.invoice-number{font-weight:var(--font-medium)}.invoice-date{color:var(--color-text-secondary);font-size:var(--text-sm)}.invoice-amount{font-weight:var(--font-semibold);margin-right:var(--space-4)}.no-payments,.no-invoices{text-align:center;padding:var(--space-8);color:var(--color-text-secondary);background:var(--color-bg-alt);border-radius:var(--radius-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-fast);border:2px solid transparent;text-decoration:none}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-danger{background:transparent;color:#dc2626;border-color:#dc2626}.btn-danger:hover{background:#dc2626;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.modal{background:var(--color-surface);border-radius:var(--radius-xl);max-width:500px;width:100%;max-height:90vh;overflow-y:auto}.modal-header{padding:var(--space-6);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:var(--text-xl);margin:0}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--color-text-secondary)}.modal-body{padding:var(--space-6)}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-3)}.cancel-warning{text-align:center}.cancel-warning svg{color:#f59e0b;margin-bottom:var(--space-4)}.cancel-warning h4{font-size:var(--text-xl);color:var(--color-text);margin-bottom:var(--space-2)}.cancel-warning p{color:var(--color-text-secondary);margin-bottom:var(--space-4)}.cancel-warning ul{text-align:left;color:var(--color-text-secondary);padding-left:var(--space-6);margin:0}.cancel-warning li{margin-bottom:var(--space-2)}.cancelled-notice{background:linear-gradient(135deg,#1e3a5f,#152a45);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-6);text-align:center;color:#fff;position:relative;overflow:hidden}.cancelled-notice:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.cancelled-notice>*{position:relative;z-index:1}.cancelled-notice h3{color:#fbbf24;font-size:var(--text-xl);margin-bottom:var(--space-2)}.cancelled-notice p{color:#fffc;margin-bottom:var(--space-4)}.cancelled-notice .expiry-info{display:inline-block;background:#ffffff1a;padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-size:var(--text-lg);font-weight:var(--font-bold);color:#fff;margin-bottom:var(--space-6);border:1px solid rgba(255,255,255,.2)}.discount-offer{background:linear-gradient(135deg,#c67f4b33,#c67f4b1a);border:2px solid #C67F4B;border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-4)}.discount-offer h4{color:#c67f4b;font-size:var(--text-lg);margin-bottom:var(--space-2)}.discount-offer p{color:#ffffffb3;margin-bottom:var(--space-4)}.discount-badge{display:inline-block;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-bold);margin-bottom:var(--space-4)}.btn-reactivate{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);background:linear-gradient(135deg,#c67f4b,#a86639);color:#fff;padding:var(--space-4) var(--space-8);border:none;border-radius:var(--radius-lg);font-size:var(--text-lg);font-weight:var(--font-bold);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 15px #c67f4b66;width:100%;max-width:350px}.btn-reactivate:hover{transform:translateY(-3px);box-shadow:0 8px 25px #c67f4b80}.subscription-disabled{opacity:.5;pointer-events:none}.reactivate-modal{border:2px solid #22c55e}.reactivate-header{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-bottom:none}.reactivate-header h3,.reactivate-header .modal-close{color:#fff}.reactivate-content{text-align:center;padding:var(--space-4) 0}.reactivate-icon{width:100px;height:100px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-5);color:#16a34a}.reactivate-content h4{font-size:var(--text-xl);color:var(--color-text);margin-bottom:var(--space-2)}.reactivate-content>p{color:var(--color-text-secondary);margin-bottom:var(--space-5)}.remaining-time{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #86efac;border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);display:inline-flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-5)}.remaining-time .label{font-size:var(--text-sm);color:var(--color-text-secondary)}.remaining-time .value{font-size:var(--text-lg);font-weight:var(--font-bold);color:#16a34a}.no-charge-notice{display:flex;align-items:center;justify-content:center;gap:var(--space-2);background:#fef3c7;color:#92400e;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium)}.no-charge-notice svg{color:#f59e0b;flex-shrink:0}.reactivate-footer{background:var(--color-bg-alt)}.btn-reactivate-confirm{display:inline-flex;align-items:center;gap:var(--space-2);background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-lg);font-weight:var(--font-bold);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 12px #22c55e4d}.btn-reactivate-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 16px #22c55e66}.btn-reactivate-confirm:disabled{opacity:.7;cursor:not-allowed;transform:none}