/* Thirty levels share one compact, horizontally navigable progression. */
.vip30-panel{padding:18px;margin-top:0;margin-bottom:18px}
.vip30-panel .vip-progress-summary{gap:16px;margin-bottom:12px}
.vip-target-code{display:inline-block;margin-left:6px;font-size:11px;line-height:1.6;color:#a6bfb3;font-weight:550;vertical-align:middle}
.vip30-panel .vip-progress-copy h3{margin-bottom:5px;font-size:22px}
.vip30-panel .vip-progress-numbers strong{font-size:22px}
.vip30-panel .vip-progress-numbers strong small{font-size:11px;color:#adc1b7}
.vip30-panel .vip-progress-labels{margin-top:6px}
.vip-tier-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 12px}
.vip-tier-choice{display:flex;align-items:center;gap:9px;min-width:0;min-height:56px;padding:7px 10px;border:1px solid #405047;border-radius:8px;background:#223029;text-align:left;color:var(--vip-metal);transition:border-color .2s,background .2s}
.vip-tier-choice>.vip-emblem{width:30px;height:34px;flex:0 0 30px;margin:0}
.vip-tier-choice>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.vip-tier-choice strong{font-size:12px;font-weight:650;white-space:nowrap}
.vip-tier-choice small{font-size:10px;color:#94a99c;white-space:nowrap}
.vip-tier-choice.is-selected{background:#2c3d31;border-color:var(--vip-metal);box-shadow:inset 0 0 0 1px #ffffff0a}
.vip-tier-choice:focus-visible{outline:2px solid var(--vip-metal);outline-offset:2px}
.vip30-panel .vip-levels-heading{gap:10px;margin:0 0 5px}
.vip30-panel .vip-levels-heading h3{font-size:14px}
.vip-level-controls{display:flex;align-items:center;gap:5px;min-width:0}
.vip-level-controls>span{font-size:10px;color:#94a99c;margin-right:4px}
.vip-level-controls>button{display:grid;place-items:center;width:28px;height:28px;border:1px solid #43584a;border-radius:6px;background:#2b3a30;color:#b9d8c5;font-size:22px;line-height:1}
.vip30-panel .vip-levels-rail{display:flex;grid-template-columns:none;gap:7px;padding:5px 2px 10px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#587b63 transparent;scroll-padding-inline:2px;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.vip30-panel .vip-level-stop{flex:0 0 86px;width:86px;min-height:106px;padding:8px 4px;gap:5px;border-radius:8px;scroll-margin-inline:2px}
.vip30-panel .vip-level-stop>.vip-emblem{width:34px;height:38px;flex:0 0 38px}
.vip30-panel .vip-level-stop>strong{font-size:11px;line-height:1.4}
.vip30-panel .vip-level-stop>.vip-code{font-size:9px;line-height:1.3;color:var(--vip-metal);font-weight:650}
.vip30-panel .vip-level-stop>.vip-threshold{font-size:8.5px;line-height:1.4;color:#9aafa1;font-weight:450}
.vip-target-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;border-top:1px solid #3b5143;margin-top:8px;padding-top:13px}
.vip-level-metric{min-width:0;padding:4px 8px;border-left:1px solid #425547}
.vip-level-metric:first-child{border-left:0;padding-left:0}
.vip-level-metric>span{display:block;font-size:10px;line-height:1.4;color:#9fb3a6;margin-bottom:5px}
.vip-level-metric>strong{font-size:19px;line-height:1.35;color:#dbede1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vip-level-metric strong small{font-size:10px;color:#94b5a0;margin-left:3px;font-weight:500}
.vip-level-bonus>strong{color:#99f3bf}
.member-vip-summary{display:flex;align-items:center;gap:9px;min-width:0;margin-top:9px;color:var(--vip-metal);text-align:left}
.member-vip-summary>.vip-emblem{width:33px;height:37px;flex:0 0 33px;margin:0;border:0;background:none;padding:0}
.member-vip-summary>span:last-of-type{display:flex;flex-direction:column;gap:4px;min-width:0}
.member-vip-summary strong{font-size:12px;line-height:1.35;font-weight:650}
.member-vip-summary strong small{font-size:10px;font-weight:450;color:#a2b7a9;margin-left:5px}
.member-vip-summary>span>span{font-size:10px;line-height:1.5;color:#acbbb1;overflow-wrap:anywhere}
.member-vip-summary>b{font-size:20px;margin-left:3px;font-weight:400}
.member-vip-track{display:block;width:100%;min-width:100px;max-width:210px;height:4px;border-radius:3px;background:#35453a;overflow:hidden}
.member-vip-track>i{display:block;height:100%;border-radius:inherit;background:var(--vip-metal)}
.vip30-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
.vip-threshold-table{min-width:660px;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.vip-threshold-table th,.vip-threshold-table td{padding:8px 12px;border-bottom:1px solid #3b4840;font-size:12px;line-height:1.5;white-space:nowrap}
.vip-threshold-table tbody th{font-weight:500;text-align:left}
.vip-threshold-table td{text-align:right}
.vip-threshold-table thead th{font-size:11px;text-align:right}
.vip-threshold-table thead th:first-child{text-align:left}
.vip-threshold-table td:last-child{color:#9bdfb6}
.vip-table-level{display:flex;align-items:center;gap:8px;min-width:118px;color:var(--vip-metal)}
.vip-table-level>.vip-emblem{width:24px;height:27px;flex:0 0 24px;background:none;border:0;margin:0;padding:0}
.vip-table-level>span:last-child{display:flex;flex-direction:column;gap:2px}
.vip-table-level strong{font-size:12px;font-weight:550}
.vip-table-level small{font-size:9px;color:#92a99b;font-weight:450}
.vip-benefit-tier>.vip-emblem{width:28px;height:31px;margin:0;border:0;padding:0;background:none}
.vip-benefit-tier>small{font-size:9px;font-weight:450;color:#9bafa3}
.vip-rebate-table th:first-child{min-width:120px}
.vip-rebate-table tbody th{line-height:1.4;padding-block:9px}
.vip-rebate-table tbody td{padding-block:9px}
.vip-rebate-table tbody th small{display:block;font-size:9px;color:#94aa9c;font-weight:450}
@media(hover:hover) and (pointer:fine){
 .vip-tier-choice:hover{border-color:var(--vip-metal);background:#2b3b30}
 .vip30-panel .vip-level-stop:hover{transform:translateY(-2px)}
 .member-vip-summary:hover strong{color:#ddffe8}
}

/* Trim larger shared gaps once more without shrinking controls or copy. */
#home-view>.section{margin-block:20px}
.page-bar{margin-bottom:16px}
.page-heading,.service-page .page-heading{margin-bottom:16px}
.ui-panel{padding:18px;margin-bottom:14px}
.ui-panel-heading{margin-bottom:12px}
.ui-setting-row{padding-block:13px}
.ui-form{gap:10px}
.catalog-grid{row-gap:12px}
.site-document section{margin-block:14px}
.campaign-rules-inline{margin-block:20px;padding:20px}
.bonus-condition-section{margin-block:16px}
.bonus-condition-table th,.bonus-condition-table td{padding-block:9px}
.bonus-conditions .bonus-promotion-table{width:100%;min-width:0;table-layout:fixed}
.bonus-conditions .bonus-promotion-table th:first-child{width:66%}
.bonus-conditions .bonus-promotion-table th{white-space:normal;overflow-wrap:normal}
.bonus-promotion-step{max-width:300px}
.vip-benefits-grid>.ui-feature-card{padding:14px 16px;min-height:0}
.vip-benefits-grid>.ui-feature-card h3{margin-block:9px 6px;font-size:15px}
.vip-benefits-grid .ui-card-icon{width:32px;height:32px}
.vip-benefits-grid .ui-card-icon .icon{width:18px;height:18px}

@media(max-width:760px), (max-width:1024px) and (max-height:500px) and (orientation:landscape){
 .vip30-panel{padding:14px;margin-bottom:16px}
 .vip30-panel .vip-progress-summary{gap:10px;margin-bottom:12px}
 .vip30-panel .vip-progress-copy h3{font-size:19px;line-height:1.4}
 .vip-target-code{font-size:10px;margin-left:3px}
 .vip30-panel .vip-progress-numbers strong{font-size:20px}
 .vip-tier-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-block:13px 12px}
 .vip-tier-choice{min-height:52px;gap:7px;padding:6px 8px}
 .vip-tier-choice strong{font-size:11px}
 .vip-tier-choice small{font-size:9px}
 .vip30-panel .vip-levels-heading{align-items:center;flex-wrap:wrap;gap:4px}
 .vip30-panel .vip-levels-heading h3{font-size:13px}
 .vip-level-controls{margin-left:auto}
 .vip-level-controls>span{font-size:9px;max-width:120px;line-height:1.5;text-align:right}
 .vip-level-controls>button{width:36px;height:36px;font-size:24px}
 .vip30-panel .vip-level-stop{flex-basis:80px;width:80px;min-height:104px}
 .vip-target-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 4px;margin-top:6px;padding-top:10px}
 .vip-level-metric{padding:4px 6px}
 .vip-level-metric:nth-child(4){border-left:0;padding-left:0}
 .vip-level-metric>strong{font-size:17px}
 .vip-level-metric>span{font-size:10px}
 .vip-level-bonus strong small{display:block;margin:2px 0 0;font-size:9px}
 .member-vip-summary{gap:7px}
 .member-vip-summary>span>span{font-size:10px}
 .ui-panel{padding:16px}
 .ui-setting-row{padding-block:12px}
 .ui-form{gap:12px}
 .vip-benefits-grid>.ui-feature-card{padding:13px 12px}
 .vip-benefits-grid>.ui-feature-card h3{font-size:14px}
 .vip-threshold-table th,.vip-threshold-table td{padding:8px 10px}
 .campaign-rules-inline{padding:16px 14px;margin-block:18px}
 .bonus-promotion-step{width:100%;max-width:260px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.vip-tier-choice,.vip-level-stop{transition:none}.vip30-panel .vip-levels-rail{scroll-behavior:auto}}