.subscription-wrapper{max-width:1100px;margin:40px auto;padding:0 var(--spacing-lg);}.subscription-header{text-align:center;margin-bottom:var(--spacing-2xl);}.subscription-header h1{font-size:2.25rem;font-weight:800;color:var(--color-text-primary);letter-spacing:-0.025em;margin-bottom:var(--spacing-sm);}.subscription-header p{font-size:1.1rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto;}.sub-card{background-color:var(--color-surface-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-md);transition:transform 0.2s ease,box-shadow 0.2s ease;}.sub-card:hover{box-shadow:var(--shadow-lg);}.plan-status-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border-primary);padding-bottom:var(--spacing-md);}.plan-status-title{font-size:1.5rem;font-weight:700;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--spacing-sm);}.plan-badge{font-size:0.85rem;font-weight:600;padding:6px 14px;border-radius:50px;text-transform:uppercase;letter-spacing:0.05em;}.badge-trial{background-color:rgba(66,153,225,0.15);color:var(--color-accent-action);border:1px solid rgba(66,153,225,0.3);}.badge-pro{background-color:rgba(72,187,120,0.15);color:var(--color-semantic-positive);border:1px solid rgba(72,187,120,0.3);}.badge-expired{background-color:rgba(245,101,101,0.15);color:var(--color-semantic-negative);border:1px solid rgba(245,101,101,0.3);}.badge-free{background-color:rgba(160,174,192,0.15);color:var(--color-text-secondary);border:1px solid rgba(160,174,192,0.3);}.plan-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);}.detail-item{display:flex;flex-direction:column;}.detail-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs);}.detail-value{font-size:1.1rem;font-weight:600;color:var(--color-text-primary);}.detail-value.active{color:var(--color-semantic-positive);}.detail-value.inactive{color:var(--color-semantic-negative);}.pricing-section-title{text-align:center;font-size:1.75rem;font-weight:700;color:var(--color-text-primary);margin:var(--spacing-2xl) 0 var(--spacing-xl);}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);}@media (max-width:900px){.pricing-grid{grid-template-columns:1fr;}}.pricing-card{background-color:var(--color-surface-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--spacing-xl);display:flex;flex-direction:column;justify-content:space-between;position:relative;box-shadow:var(--shadow-md);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s ease,border-color 0.3s ease;}.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);}.pricing-card.featured{border-color:var(--color-accent-action);background:radial-gradient(circle at top right,rgba(66,153,225,0.05),var(--color-surface-primary) 70%);}.card-ribbon{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background-color:var(--color-accent-action);color:var(--color-text-on-accent);font-size:0.75rem;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:0.05em;}.pricing-card-header{margin-bottom:var(--spacing-lg);}.plan-name{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-xs);}.plan-desc{font-size:0.9rem;color:var(--color-text-secondary);min-height:48px;}.price-container{margin:var(--spacing-lg) 0;display:flex;align-items:baseline;}.price-amount{font-size:2.5rem;font-weight:800;color:var(--color-text-primary);line-height:1;}.price-period{font-size:1rem;color:var(--color-text-secondary);margin-left:var(--spacing-xs);}.features-list{list-style:none;padding:0;margin:0 0 var(--spacing-xl);border-top:1px solid var(--color-border-primary);padding-top:var(--spacing-lg);}.features-list li{display:flex;align-items:center;gap:var(--spacing-sm);font-size:0.9rem;color:var(--color-text-primary);margin-bottom:var(--spacing-sm);}.features-list li i{color:var(--color-semantic-positive);font-size:0.85rem;flex-shrink:0;}.btn-block{width:100%;text-align:center;}.btn-secondary-plan{background-color:transparent;border:1px solid var(--color-border-primary);color:var(--color-text-primary);}.btn-secondary-plan:hover{background-color:var(--color-surface-secondary);border-color:var(--color-text-secondary);}.card-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap;margin-top:var(--spacing-lg);border-top:1px solid var(--color-border-primary);padding-top:var(--spacing-lg);}.card-actions .btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);}.whop-billing-note{margin-top:var(--spacing-md);padding:12px 14px;border-radius:6px;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.2);font-size:0.875rem;line-height:1.5;color:var(--color-text-secondary);word-break:break-word;overflow-wrap:anywhere;}.whop-billing-note strong{color:var(--color-text-primary);font-weight:600;}.whop-billing-note a{word-break:break-all;}.sub-header-unpaid .header-content{display:flex !important;justify-content:space-between !important;align-items:center !important;width:100% !important;}.sub-header-unpaid .user-menu,.sub-header-unpaid .sub-user-menu{display:flex !important;align-items:center !important;margin-left:auto !important;visibility:visible !important;}.sub-header-unpaid .sub-user-menu .btn{padding:0.4rem 0.85rem !important;font-size:0.875rem !important;white-space:nowrap !important;}@media (max-width:768px){.main-content:has(.subscription-wrapper){padding:12px 8px !important;}.subscription-wrapper{margin:16px auto !important;padding:0 !important;width:100% !important;max-width:100% !important;}.subscription-header{margin-bottom:20px !important;}.subscription-header h1{font-size:1.75rem !important;}.subscription-header p{font-size:0.95rem !important;padding:0 8px;}.sub-card{padding:18px 14px !important;margin-bottom:16px !important;border-radius:10px !important;width:100% !important;box-sizing:border-box !important;}.plan-status-header{gap:8px !important;margin-bottom:14px !important;padding-bottom:12px !important;}.plan-status-title{font-size:1.2rem !important;}.plan-details-grid{grid-template-columns:1fr !important;gap:10px !important;margin-bottom:14px !important;}.detail-item{padding:10px 12px;background:rgba(255,255,255,0.02);border:1px solid var(--color-border-primary);border-radius:8px;}.card-actions{margin-top:14px !important;padding-top:14px !important;}.card-actions .btn{width:100% !important;justify-content:center !important;padding:10px 16px !important;font-size:0.95rem !important;}}@media (max-width:480px){.main-content:has(.subscription-wrapper){padding:8px 6px !important;}.subscription-wrapper{margin:8px auto !important;padding:0 !important;}@supports not selector(:has(*)){.subscription-wrapper{margin-left:-8px !important;margin-right:-8px !important;width:calc(100% + 16px) !important;max-width:calc(100% + 16px) !important;}}.subscription-header{margin-bottom:14px !important;}.subscription-header h1{font-size:1.45rem !important;margin-bottom:4px !important;}.subscription-header p{font-size:0.85rem !important;line-height:1.4 !important;}.sub-card{padding:14px 10px !important;border-radius:8px !important;margin-bottom:12px !important;}.plan-status-header{margin-bottom:10px !important;padding-bottom:8px !important;}.plan-status-title{font-size:1.05rem !important;gap:6px !important;}.plan-status-title svg{width:18px !important;height:18px !important;}.plan-badge{font-size:0.72rem !important;padding:3px 8px !important;}.plan-details-grid{gap:8px !important;margin-bottom:10px !important;}.detail-item{padding:8px 10px !important;}.detail-label{font-size:0.72rem !important;margin-bottom:2px !important;}.detail-value{font-size:0.95rem !important;}.current-plan-card .alert{padding:10px 10px !important;font-size:0.82rem !important;line-height:1.4 !important;margin-top:10px !important;}.card-actions{margin-top:10px !important;padding-top:10px !important;}.card-actions .btn{padding:10px 12px !important;font-size:0.9rem !important;}.whop-billing-note{margin-top:10px !important;padding:10px 10px !important;font-size:0.8rem !important;line-height:1.4 !important;}.whop-billing-note ol{margin:0.4rem 0 0.5rem 1rem !important;gap:0.35rem !important;}.pricing-grid{gap:12px !important;}.pricing-card{padding:14px 10px !important;border-radius:8px !important;}}