.msai-rewards { position: relative; }
.msai-rewards,.msai-rewards *,.msai-rewards *::before,.msai-rewards *::after,.msai-reward-unlock,.msai-reward-unlock *,.msai-reward-unlock *::before,.msai-reward-unlock *::after { box-sizing:border-box; }
.msai-rewards__trigger { --reward-progress:0%; position:relative; display:flex; align-items:center; gap:8px; min-width:126px; height:42px; padding:6px 12px; border:0; border-radius:14px; background:#EAF3FF; color:#102A43; font:inherit; cursor:pointer; transition:background-color .18s ease,transform .18s ease; }
.msai-rewards__trigger:hover { background:#F1F7FF; }
.msai-rewards__trigger:active { transform:scale(.98); }
.msai-rewards__trigger:focus-visible { outline:3px solid rgba(74,144,226,.28); outline-offset:2px; }
.msai-rewards__trigger > svg { width:20px; height:20px; fill:none; stroke:#4A90E2; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.msai-rewards__trigger > span { display:grid; text-align:left; line-height:1.05; }
.msai-rewards__trigger strong { font-size:12px; font-weight:750; }
.msai-rewards__trigger small { margin-top:3px; color:#60758F; font-size:11px; font-variant-numeric:tabular-nums; }
.msai-rewards__trigger > i { position:absolute; right:12px; bottom:4px; left:12px; height:2px; border-radius:8px; background:linear-gradient(90deg,#4A90E2 var(--reward-progress),#D8E6F7 var(--reward-progress)); }
.msai-rewards__panel { position:absolute; z-index:10020; top:calc(100% + 12px); right:0; width:min(390px,calc(100vw - 24px)); max-height:min(680px,calc(100vh - 86px)); padding:20px; overflow:auto; overscroll-behavior:contain; border-radius:16px; background:#FFFFFF; color:#102A43; box-shadow:0 18px 36px rgba(0,51,102,.09); transform-origin:top right; animation:msai-reward-in .22s cubic-bezier(.2,.8,.2,1); }
.msai-rewards__panel header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.msai-rewards__panel h2 { margin:0; color:#003366; font-size:19px; line-height:1.2; }
.msai-rewards__panel header p { max-width:250px; margin:6px 0 0; color:#60758F; font-size:12px; line-height:1.45; }
.msai-rewards__panel header > strong { padding:6px 8px; border-radius:8px; background:#EAF3FF; color:#003366; font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.msai-rewards__progress { height:5px; margin:16px 0 8px; overflow:hidden; border-radius:8px; background:#D8E6F7; }
.msai-rewards__progress i { display:block; height:100%; border-radius:inherit; background:#4A90E2; }
.msai-rewards__panel ul { margin:0; padding:0; list-style:none; }
.msai-rewards__panel li { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #D8E6F7; }
.msai-rewards__task-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:14px; background:#EAF3FF; color:#003366; }
.msai-rewards__task-icon svg,.msai-rewards__reward svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.msai-rewards__panel li strong { display:block; font-size:13px; line-height:1.25; }
.msai-rewards__panel li p { margin:3px 0 0; color:#60758F; font-size:12px; line-height:1.4; }
.msai-rewards__panel li small { display:block; margin-top:4px; color:#003366; font-size:11px; font-variant-numeric:tabular-nums; }
.msai-rewards__panel li > button,.msai-rewards__reward-action { min-width:0; min-height:34px; max-width:100%; padding:8px 10px; border:0; border-radius:14px; background:#EAF3FF; color:#003366; font-size:11px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; white-space:normal; cursor:pointer; }
.msai-rewards__panel li > button:focus-visible,.msai-rewards__reward-action:focus-visible { outline:3px solid rgba(74,144,226,.28); outline-offset:2px; }
.msai-rewards__panel li.is-complete { opacity:.72; }
.msai-rewards__panel li.is-complete .msai-rewards__task-icon { background:#F1F7FF; color:#17895D; }
.msai-rewards__reward { display:flex; align-items:flex-start; gap:12px; margin-top:16px; padding:15px; border-radius:16px; background:#F7FBFF; }
.msai-rewards__reward > span { display:grid; flex:none; width:38px; height:38px; place-items:center; border-radius:14px; background:#FFFFFF; color:#60758F; }
.msai-rewards__reward small { display:block; color:#7B93AD; font-size:11px; font-weight:800; letter-spacing:.09em; }
.msai-rewards__reward strong { display:block; margin-top:3px; font-size:14px; }
.msai-rewards__reward p { margin:4px 0 0; color:#60758F; font-size:12px; line-height:1.45; }
.msai-rewards__reward em { display:inline-block; margin-top:7px; color:#003366; font-size:11px; font-style:normal; font-weight:750; }
.msai-rewards__reward.is-unlocked { background:#EAF3FF; }
.msai-rewards__reward.is-unlocked > span,.msai-rewards__reward.is-unlocked small { color:#003366; }
.msai-rewards__reward-action { display:block; margin-top:10px; border:0 !important; background:var(--msai-primary,#3157D5) !important; color:#FFFFFF !important; }
.msai-rewards__reward-action:hover { background:var(--msai-primary-hover,#2748B7) !important; color:#FFFFFF !important; }
.msai-rewards--mounted { display:block; min-height:570px; padding:18px; border-radius:18px; background:#F7FBFF; }
.msai-rewards--mounted .msai-rewards__trigger { margin-left:auto; }
.msai-rewards--mounted .msai-rewards__panel { position:relative; top:12px; right:auto; width:100%; max-height:500px; }
.msai-reward-unlock { position:fixed; z-index:10080; inset:0; display:grid; place-items:center; padding:20px; }
.msai-reward-unlock__backdrop { position:absolute; inset:0; background:rgba(16,42,67,.52); backdrop-filter:blur(4px); }
.msai-reward-unlock > article { position:relative; width:min(540px,100%); max-height:calc(100dvh - 32px); padding:42px; overflow:auto; border:1px solid #D8E6F7; border-radius:24px; background:#FFFFFF; color:#102A43; text-align:center; box-shadow:0 28px 70px rgba(0,51,102,.22); animation:msai-reward-unlock-in .28s cubic-bezier(.2,.8,.2,1); }
.msai-reward-unlock__close { position:absolute; top:14px; right:14px; display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:14px; background:#F1F7FF; color:#003366; cursor:pointer; }
.msai-reward-unlock__close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.msai-reward-unlock__icon-wrap { position:relative; display:grid; width:68px; height:68px; margin:0 auto 18px; place-items:center; }
.msai-reward-unlock__icon-ring { position:absolute; inset:0; border-radius:50%; border:1.5px solid #3157D5; opacity:0; animation:msai-reward-ring 1.8s cubic-bezier(.3,.6,.4,1) .3s 2; }
.msai-reward-unlock__icon-ring--2 { animation-delay:.65s; }
.msai-reward-unlock__icon { position:relative; display:grid; width:68px; height:68px; place-items:center; border-radius:24px; background:#EAF3FF; color:#003366; animation:msai-reward-icon-pop .45s cubic-bezier(.16,1,.3,1) both; }
.msai-reward-unlock__icon svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce) { .msai-reward-unlock__icon-ring { animation:none; display:none; } .msai-reward-unlock__icon { animation:none; } }
.msai-reward-unlock article > small { color:#4A90E2; font-size:11px; font-weight:800; letter-spacing:.12em; }
.msai-reward-unlock h2 { margin:9px 0 0; color:#003366; font:750 clamp(26px,4vw,36px)/1.12 "Space Grotesk","Segoe UI",sans-serif; letter-spacing:-.025em; }
.msai-reward-unlock article > strong { display:block; margin-top:14px; color:#17895D; font-size:18px; }
.msai-reward-unlock article > p { max-width:46ch; margin:14px auto 0; color:#60758F; font-size:14px; line-height:1.6; }
/* !important throughout (2026-10-07): dashboard2.js auto-decorates every
   button on this page with .msai-d2-btn/.msai-d2-button variants of its
   own, whose rules are also !important - without matching priority here,
   that decorator silently won on this exact button (dark text swapped in
   over this same dark background, and its own hover color on top of it),
   making the celebratory reward CTA unreadable. This button is a
   deliberate, self-contained design - it must never be reskinned by the
   generic dashboard button decorator. */
.msai-reward-unlock__cta { min-height:48px; margin-top:24px; padding:0 24px; border:0 !important; border-radius:14px !important; background:#3157D5 !important; color:#FFFFFF !important; font-size:14px; font-weight:750; cursor:pointer; transition:transform .15s ease; }
.msai-reward-unlock__cta:hover { background:#2748B7 !important; color:#FFFFFF !important; }
.msai-reward-unlock__cta:active { transform:scale(.97); }
.msai-reward-unlock__cta:focus-visible,.msai-reward-unlock__close:focus-visible { outline:3px solid rgba(74,144,226,.3); outline-offset:2px; }
.msai-reward-unlock article > em { display:block; max-width:46ch; margin:14px auto 0; color:#7B93AD; font-size:11px; font-style:normal; line-height:1.5; }
.msai-reward-unlock--loyalty > article { width:min(640px,100%); background:linear-gradient(180deg,#fff 0%,#f7fbff 100%); }
.msai-reward-unlock--loyalty article > strong { color:#1669c7; font-size:14px; letter-spacing:.08em; }
.msai-loyalty-savings { margin:22px 0 2px; padding:18px 16px; border-radius:18px; background:linear-gradient(135deg,#3157D5 0%,#1E3F9E 100%); color:#fff; animation:msai-reward-in .4s cubic-bezier(.2,.8,.2,1) .15s both; }
.msai-loyalty-savings > small { color:rgba(255,255,255,.78); font-size:10px; font-weight:800; letter-spacing:.1em; }
.msai-loyalty-savings > strong { display:block; margin-top:6px; font:750 clamp(26px,5vw,34px)/1.1 "Space Grotesk","Segoe UI",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.msai-loyalty-savings > span { display:block; margin-top:4px; color:rgba(255,255,255,.85); font-size:12px; }
.msai-loyalty-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:18px 0 0; padding:0; list-style:none; }
.msai-loyalty-steps small { display:block; color:#7b93ad; font-size:10px; font-weight:800; letter-spacing:.08em; }
.msai-loyalty-steps li { position:relative; padding:12px 10px; border-radius:14px; background:#eaf3ff; text-align:left; opacity:0; animation:msai-reward-step-in .4s cubic-bezier(.2,.8,.2,1) both; }
.msai-loyalty-steps li:not(:last-child)::after { content:""; position:absolute; top:50%; right:-10px; width:11px; height:11px; border-top:2px solid #003366; border-right:2px solid #003366; transform:translateY(-50%) rotate(45deg); }
.msai-loyalty-steps strong { display:block; margin-top:5px; color:#003366; font-size:15px; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) { .msai-loyalty-steps li { opacity:1; animation:none; } }
.msai-reward-unlock article > .msai-loyalty-floor { max-width:none; margin-top:16px; padding:12px 14px; border-radius:14px; background:#fff; color:#60758f; font-size:12px; text-align:left; }
@keyframes msai-reward-in { from { opacity:0; transform:translateY(-7px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes msai-reward-unlock-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes msai-reward-icon-pop { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes msai-reward-ring { 0% { opacity:.55; transform:scale(.85); } 100% { opacity:0; transform:scale(1.55); } }
@keyframes msai-reward-step-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (max-width:720px) { .msai-rewards__trigger { width:42px; min-width:42px; padding:7px; justify-content:center; } .msai-rewards__trigger > span { display:none; } .msai-rewards__trigger > i { right:7px; left:7px; } .msai-rewards__panel { position:fixed; top:64px; right:8px; left:8px; width:auto; max-width:none; max-height:calc(100dvh - 76px); padding:16px; } .msai-rewards__panel li { grid-template-columns:34px minmax(0,1fr); gap:8px 10px; min-width:0; } .msai-rewards__panel li > div { min-width:0; } .msai-rewards__panel li > button { grid-column:2; justify-self:start; width:auto; max-width:100%; } .msai-rewards--mounted { min-height:620px; padding:12px; } .msai-rewards--mounted .msai-rewards__panel { position:relative; top:12px; right:auto; left:auto; width:100%; max-height:530px; } .msai-reward-unlock { padding:12px; } .msai-reward-unlock > article { padding:36px 22px 28px; border-radius:20px; } .msai-loyalty-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .msai-loyalty-steps li:nth-child(2n)::after { display:none; } }
@media (max-width:390px) { .msai-rewards__panel { right:6px; left:6px; padding:14px; } .msai-rewards__panel header { gap:10px; } .msai-rewards__panel header > strong { flex:none; } }
@media (prefers-reduced-motion:reduce) { .msai-rewards__panel,.msai-reward-unlock > article { animation:none; } .msai-rewards__trigger { transition:none; } }

/* Premium "Upgrade" topbar CTA - same 42px/14px grid as the Rewards trigger
   it sits beside, elegant gold/premium treatment (not gaudy: one flat
   gradient, no glow/flash animation). See funnel-account-rewards.js. */
.msai-upgrade { display:flex; align-items:center; gap:7px; height:42px; margin-right:8px; padding:0 14px; border:1px solid #E7C77A; border-radius:14px; background:linear-gradient(135deg,#F7E7C1 0%,#EAC873 100%); color:#5B3E0A; font:inherit; font-size:12px; font-weight:750; letter-spacing:.01em; white-space:nowrap; cursor:pointer; box-shadow:0 2px 6px rgba(158,116,15,.18); transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; }
.msai-upgrade[hidden] { display:none !important; }
.msai-upgrade:hover { filter:brightness(1.04); box-shadow:0 4px 12px rgba(158,116,15,.26); }
.msai-upgrade:active { transform:scale(.97); }
.msai-upgrade:focus-visible { outline:3px solid rgba(184,134,11,.32); outline-offset:2px; }
.msai-upgrade > svg { width:17px; height:17px; flex:none; fill:none; stroke:#8A5A00; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:720px) { .msai-upgrade { width:42px; min-width:42px; height:42px; padding:0; margin-right:6px; justify-content:center; } .msai-upgrade > span { display:none; } }
@media (prefers-reduced-motion:reduce) { .msai-upgrade { transition:none; } }