:root {
                  --color-background-primary: #ffffff;
                  --color-border-tertiary: #e2e8f0;
                  --border-radius-lg: 12px;
                  --color-border-secondary: #cbd5e1;
                  --color-text-primary: #0f172a;
                  --color-text-secondary: #475569;
                  --color-text-tertiary: #64748b;
                  --color-background-secondary: #f1f5f9;
                  --border-radius-md: 6px;
                }
                .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 1rem 0; }
                .tier-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 0.85rem 1rem; cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
                .tier-card:hover { border-color: var(--color-border-secondary); }
                .tier-card.active { border: 2px solid #378ADD; }
                .tier-badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--border-radius-md); display: inline-block; margin-bottom: 6px; }
                .badge-basic { background: #E1F5EE; color: #085041; }
                .badge-advanced { background: #EEEDFE; color: #3C3489; }
                .badge-enterprise { background: #FAEEDA; color: #633806; }
                .tier-price { font-size: 18px; font-weight: 500; color: var(--color-text-primary); margin: 0px 0 6px !important;    line-height: 22px !important; padding: 0 !important; }
                .tier-label { font-size: 11px !important; color: var(--color-text-secondary); margin-bottom: 6px !important; line-height: 16px !important; padding: 0 !important; }
                .tier-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
                .meta-chip { font-size: 10px; background: var(--color-background-secondary); color: var(--color-text-secondary); padding: 3px 8px; border-radius: var(--border-radius-md); }
                .tier-title { font-size: 14px !important; font-weight: 500 !important; color: var(--color-text-primary); margin-bottom: 6px !important; padding: 0 !important;line-height: 16px !important; }
                .tier-tagline { font-size: 12px !important; color: var(--color-text-secondary); margin-bottom: 10px !important;padding: 0 !important; line-height: 16px !important;}
                .features-panel { display: none; margin-top: 8px; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 8px; }
                .features-panel.open { display: block; }
                .feature-item { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--color-text-secondary); margin-bottom: 5px; }
                .feature-item i { color: #1D9E75; font-size: 13px; flex-shrink: 0; margin-top: 1px; }
                .toggle-btn { font-size: 11px; color: #378ADD; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px; }
                .footer-note { font-size: 11px; color: var(--color-text-tertiary); text-align: center; padding-top: 0.25rem; border-top: 0.5px solid var(--color-border-tertiary); margin-top: 0.25rem; }