/* The reward action is primary; rules remain a compact adjacent explanation. */
.ui-reward-grid>.ui-reward{display:flex;flex-direction:column;align-items:flex-start}
.ui-reward .df-reward-max{margin-top:10px;margin-bottom:8px}
.ui-reward p{margin-bottom:14px}
.ui-reward .df-reward-unlock{display:flex;align-items:flex-start;gap:7px;color:#9dc6bb;min-height:36px;font-size:11px;line-height:1.7;margin:0 0 20px}
.df-reward-unlock .icon{flex:0 0 14px;width:14px;height:14px;margin-top:2px;color:#72dfd2}
.df-reward-actions{display:flex;align-items:center;gap:16px;width:100%;margin-top:auto}
.df-reward-actions>.btn{flex:1;min-width:0;min-height:42px;font-size:13px}
.df-reward-actions .df-reward-info{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;min-height:36px;color:#9edbd2;font-size:11px;white-space:nowrap}
.df-reward-info .icon{width:15px;height:15px}
.df-reward-info:hover{color:#d3fff7;text-decoration:underline;text-underline-offset:4px}
.df-reward-info:focus-visible{outline:2px solid #8affed;outline-offset:4px;border-radius:3px}
.df-reward-actions .btn:disabled{opacity:.45;cursor:default;animation:none}
.vip-benefit-display{cursor:default}
.campaign-detail .campaign-eligibility{display:flex;gap:8px;align-items:flex-start;color:#9dc6bb;font-size:12px;line-height:1.8;margin-top:12px}
.campaign-eligibility .icon{flex:0 0 15px;width:15px;height:15px;margin-top:3px;color:#72dfd2}
@media(min-width:761px){
 .reward-grid-expanded{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .reward-grid-expanded>.ui-reward{padding:18px 20px}
 .reward-grid-expanded>.ui-reward>.ui-card-icon{width:36px;height:36px;border-radius:10px}
 .reward-grid-expanded>.ui-reward>.ui-card-icon .icon{width:20px;height:20px}
 .reward-grid-expanded>.ui-reward>h3{margin:12px 0 6px}
 .reward-grid-expanded .df-reward-max{margin:6px 0}
 .reward-grid-expanded>.ui-reward>p{line-height:1.65;margin-bottom:10px}
 .reward-grid-expanded>.ui-reward>.df-reward-unlock{min-height:24px;margin-bottom:10px;line-height:1.6}
 .reward-grid-expanded .df-reward-actions{gap:12px}
 .reward-grid-expanded .df-reward-actions>.btn{min-height:40px}
 /* Promotion listings use compact cards without changing activity detail pages. */
 .campaign-grid:has(>.campaign-illustrated){gap:14px}
 .campaign-grid>.campaign-illustrated{display:flex;flex-direction:column;border-radius:10px}
 .campaign-grid>.campaign-illustrated>.campaign-image{aspect-ratio:2.6;max-height:165px;flex-shrink:0}
 .campaign-grid>.campaign-illustrated>.campaign-body{display:flex;flex:1;flex-direction:column;padding:16px}
 .campaign-grid>.campaign-illustrated .campaign-body h2{margin:8px 0 5px;line-height:1.45}
 .campaign-grid>.campaign-illustrated .campaign-body p{font-size:13px;line-height:1.65;margin:0 0 12px}
 .campaign-grid>.campaign-illustrated .card-action{margin-top:auto}
 .vip-rebate-table{width:100%;min-width:940px;table-layout:fixed;font-variant-numeric:tabular-nums}
 .vip-rebate-table thead th,.vip-rebate-table tbody td{text-align:center;padding:15px 8px;white-space:nowrap}
 .vip-rebate-table thead th{font-size:11px;font-weight:650;letter-spacing:.1px}
 .vip-rebate-table th:first-child{width:116px;text-align:left;padding-left:15px}
 .vip-rebate-table tbody th{font-size:12px;font-weight:650;border-bottom:1px solid #424242}
 .vip-rebate-table tbody td{font-size:12px}
 .vip-rebate-table .rebate-pending{color:#6d8580}
 .vip-rebate-wrap:focus-visible{outline:2px solid #74e4d8;outline-offset:4px;border-radius:5px}
 /* Every activity shares one centered desktop frame for its banner and rules. */
 .campaign-detail.campaign-detail-illustrated,.campaign-rules-inline{width:100%;max-width:1100px;margin-inline:auto;box-sizing:border-box}
 .campaign-detail.campaign-detail-illustrated{margin-block:0}
 .campaign-detail-illustrated>.campaign-detail-image{aspect-ratio:3.2;min-height:220px;max-height:340px;overflow:hidden}
 .campaign-detail-illustrated>.campaign-detail-image>img{object-fit:cover;object-position:65% 50%}
 .campaign-detail-illustrated>div:last-child{padding:clamp(24px,2.5vw,32px)}
 .campaign-rules-inline{margin-block:32px;padding:clamp(24px,2.5vw,32px);border:1px solid #41514a;border-radius:12px;background:#232a26}
 .campaign-rules-inline>h2{font-size:21px;line-height:1.5;margin:0 0 22px}
}
@media(min-width:1400px){
 .campaign-grid:has(>.campaign-illustrated){grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media(min-width:1700px){
 .reward-grid-expanded{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
 .reward-grid-expanded>.ui-reward{padding:18px 14px}
 .reward-grid-expanded .df-reward-actions{gap:10px}
 .reward-grid-expanded .df-reward-actions>.btn{font-size:12px;padding-inline:10px}
 .reward-grid-expanded .df-reward-info{font-size:10px;gap:4px}
}