.subscription-compact-container{max-width:500px;width:100%;margin:var(--spacing-sm) 0}.subscription-sidebar{overflow:hidden}.subscription-compact-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-xxl) var(--spacing-xs) var(--spacing-md);background:var(--gradient-transparency);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-xs)}.subscription-compact-title{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.add-tier-compact-btn{position:absolute;right:var(--spacing-xl);background:var(--gradient-primary);border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all var(--transition-medium);box-shadow:var(--shadow-xs)}.add-tier-compact-btn:hover:not(:disabled){transform:scale(1.1) rotate(90deg);box-shadow:var(--shadow-sm)}.add-tier-compact-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.subscription-loading{display:flex;justify-content:center;padding:var(--spacing-md)}.loading-spinner{width:20px;height:20px;border:2px solid var(--color-surface-light);border-top:2px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tier-badges-container{position:relative}.tier-badges{display:flex;gap:var(--spacing-xs);overflow-x:auto;padding:var(--spacing-xs) 0 var(--spacing-sm) 0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#ff436c82 var(--color-surface-light)}.tier-badges::-webkit-scrollbar{height:6px;display:block}.tier-badges::-webkit-scrollbar-track{background:var(--color-surface-light);border-radius:3px}.tier-badges::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:3px;transition:background .2s ease}.tier-badges::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark, var(--color-primary))}.tier-badge{min-width:100px;justify-content:center;display:flex;align-items:center;overflow:hidden;gap:var(--spacing-xs);background:var(--color-surface);border:1px solid var(--color-surface-light);border-radius:var(--border-radius-md);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;transition:all var(--transition-medium);box-shadow:var(--shadow-xs)}.tier-badge:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--color-primary);background:var(--color-background)}.tier-badge:active{transform:translateY(0)}.tier-badge-content{overflow:hidden;text-overflow:ellipsis;max-width:120px;display:flex;flex-direction:column;gap:1px}.tier-badge-name{font-size:.8rem;font-weight:600;color:var(--color-text);line-height:1.2}.tier-badge-description{width:-webkit-fill-available;color:var(--color-text-secondary);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tier-badge-price{font-size:.65rem;color:var(--color-text-secondary);font-weight:500}.tier-badge-arrow{color:var(--color-text-secondary);opacity:.6;transition:all var(--transition-fast)}.tier-badge:hover .tier-badge-arrow{opacity:1;transform:translate(2px)}.icon-xs{width:12px;height:12px}.icon-small{width:16px;height:16px}.icon-medium{width:20px;height:20px}.tier-detail-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.tier-detail-content{background:var(--color-surface);border-radius:var(--border-radius-xl);min-width:400px;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideUp .2s ease-out}.tier-subscribed-status{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.subscribed-check{width:50px;color:var(--color-success)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.tier-detail-header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--color-surface-light)}.tier-detail-title{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1}.tier-detail-title h3{font-family:var(--font-family-headings);font-size:1.4rem;font-weight:700;color:var(--color-text);margin:0;line-height:1.2}.tier-detail-actions{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.tier-edit-btn,.tier-delete-btn{background:transparent;border:none;padding:var(--spacing-xs);border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary)}.tier-edit-btn:hover{background:#ff436c1a;color:var(--color-primary)}.tier-delete-btn:hover{background:#f443361a;color:var(--color-error)}.tier-detail-close{display:flex;background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--border-radius-xl);transition:all var(--transition-fast);margin:calc(var(--spacing-sm) * -1)}.tier-detail-close:hover{background:var(--color-surface-light);color:var(--color-text)}.tier-detail-body{padding:var(--spacing-lg)}.tier-detail-description{color:var(--color-text-secondary);font-size:.9rem;line-height:1.5;margin:0 0 var(--spacing-lg) 0}.tier-detail-benefits{margin-bottom:var(--spacing-lg)}.tier-detail-benefits h4{font-family:var(--font-family-headings);font-size:1rem;font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-sm) 0}.tier-detail-benefits ul{list-style:none;padding:0;margin:0}.tier-detail-benefits li{display:flex;align-items:flex-start;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-size:.9rem;color:var(--color-text)}.benefit-check{width:16px;height:16px;color:var(--color-primary);flex-shrink:0;margin-top:2px}.tier-detail-pricing h4{font-family:var(--font-family-headings);font-size:1rem;font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-sm) 0}.pricing-options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.pricing-option{gap:var(--spacing-xs);padding:var(--spacing-md);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;background:var(--color-background);border:1px solid var(--color-surface-light);border-radius:var(--border-radius-sm);transition:all var(--transition-fast)}.pricing-option:hover{border-color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.pricing-info{display:flex;gap:var(--spacing-xs)}.price-amount{font-family:var(--font-family-headings);font-size:1.2rem;font-weight:700;color:var(--color-text)}.price-period{font-size:.8rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.subscribe-detail-btn{background:var(--gradient-primary);border:none;color:#fff;padding:var(--spacing-sm) var(--spacing-md);width:100%;border-radius:var(--border-radius-sm);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--transition-medium);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.subscribe-detail-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md);filter:brightness(1.1)}.subscribe-detail-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.tier-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.tier-modal-content{background:var(--color-surface);border-radius:var(--border-radius-lg);width:100%;max-width:600px;min-width:500px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:slideUp .2s ease-out}.tier-modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);border-bottom:1px solid var(--color-surface-light);position:absolute;width:100%;background:var(--color-surface)}.tier-modal-header h3{font-family:var(--font-family-headings);font-size:1.3rem;font-weight:700;color:var(--color-text);margin:0}.tier-modal-close{display:flex;background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--border-radius-xl);transition:all var(--transition-fast)}.tier-modal-close:hover{background:var(--color-surface-light);color:var(--color-text)}.tier-form{margin-top:var(--spacing-xl);padding:var(--spacing-lg)}.tier-form .form-group{margin-bottom:var(--spacing-lg)}.tier-form .form-label{display:block;color:var(--color-text);font-family:var(--font-family-main);font-size:.9rem;font-weight:600;margin-bottom:0}.tier-form .form-input,.tier-form .form-textarea,.tier-form .form-select{width:100%;background:var(--color-background);border:1px solid var(--color-surface-light);border-radius:var(--border-radius-sm);padding:var(--spacing-sm);color:var(--color-text);font-family:var(--font-family-main);font-size:.9rem;transition:all var(--transition-fast);box-sizing:border-box}.tier-form .form-input:focus,.tier-form .form-textarea:focus,.tier-form .form-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #ff436c1a}.tier-form .form-textarea{resize:vertical;min-height:60px;line-height:1.4}.benefit-input-group{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.benefit-input-group .form-input{flex:1}.remove-benefit-btn,.remove-period-btn{background:#f443361a;border:1px solid rgba(244,67,54,.2);color:var(--color-error);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.remove-benefit-btn:hover,.remove-period-btn:hover{background:#f4433633}.add-benefit-btn,.add-period-btn{background:transparent;border:1px dashed var(--color-primary);color:var(--color-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);font-size:.85rem;font-weight:500}.add-benefit-btn:hover,.add-period-btn:hover{background:#ff436c1a}.period-input-group{margin-bottom:var(--spacing-sm)}.period-row{display:grid;grid-template-columns:1fr 120px auto;gap:var(--spacing-sm);align-items:center}.tier-form-actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm);padding-top:var(--spacing-lg);border-top:1px solid var(--color-surface-light)}.tier-form-actions .primary-button,.tier-form-actions .secondary-button{padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--border-radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-medium)}.tier-form-actions .primary-button{background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-sm)}.tier-form-actions .primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md);filter:brightness(1.05)}.tier-form-actions .primary-button:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:none}.tier-form-actions .secondary-button{background:transparent;border:1px solid var(--color-surface-light);color:var(--color-text-secondary)}.tier-form-actions .secondary-button:hover{border-color:var(--color-text-secondary);color:var(--color-text);background:var(--color-surface-light)}@media (max-width: 768px){.subscription-compact-container{max-width:100%}.tier-badges{padding:var(--spacing-xs) var(--spacing-sm)}.tier-detail-content{width:100%;height:100%;border-radius:unset;min-width:unset;max-height:unset}.tier-detail-header,.tier-detail-body{padding:var(--spacing-md)}.tier-modal-content{width:100%;height:100%;min-width:unset;margin:0;max-height:unset}.tier-form{padding:var(--spacing-md)}.period-row{grid-template-columns:1fr;gap:var(--spacing-xs)}.tier-form-actions{flex-direction:column}.tier-form-actions .primary-button,.tier-form-actions .secondary-button{width:100%}.pricing-option{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.subscribe-detail-btn{align-self:center}.add-tier-compact-btn{right:var(--spacing-lg)}}@media (max-width: 480px){.tier-badge{min-width:120px;padding:6px var(--spacing-sm)}.tier-badge-name{font-size:.75rem}.subscription-compact-title{font-size:.7rem}}.tier-badges{scroll-snap-type:x mandatory}.tier-badge{scroll-snap-align:start}.tier-badges-container:before,.tier-badges-container:after{content:"";position:absolute;top:0;bottom:0;width:20px;pointer-events:none;z-index:1}.tier-badges-container:before{left:0;background:linear-gradient(to right,var(--color-background),transparent)}.tier-badges-container:after{right:0;background:linear-gradient(to left,var(--color-background),transparent)}.tier-badges-container:not([data-scrollable]):before,.tier-badges-container:not([data-scrollable]):after{display:none}