/* V2: graphite, sculpted tariff glass and a quiet metallic control layer. */
body[data-theme] {
  --page-a: #101113; --page-b: #101113; --shell: #131416;
  --glass-soft: #1b1c20; --glass: #222328; --glass-strong: #28292f;
  --text: #f5f4f7; --muted: #b0afb9; --line: #37373e; --line-strong: #62616f;
  --gold: #e1c68e; --primary: #c7b5f5; --primary-strong: #7050b6;
  --tier-ink: #d8c8ff; --tier-surface: #362b4c;
  --balance-a: #6540a0; --balance-b: #241d35; --balance-c: #ceb3ff;
  --surface-light: #ffffff0b; --edge-light: #ffffff22; --control-ink: #262331;
  --raised-shadow: inset 0 1px 0 var(--edge-light), inset 0 -1px 0 #00000060, 0 4px 10px #00000030;
  background: var(--page-a);
}
body[data-plan='lite'] { --balance-a: #326c55; --balance-b: #182f28; --balance-c: #b7e7c9; --tier-surface: #233e32; --tier-ink: #b3e8c9; }
body[data-plan='pro'] { --balance-a: #85465e; --balance-b: #341e2b; --balance-c: #f5bdd0; --tier-surface: #422b37; --tier-ink: #f6c6d6; }
body[data-theme='light'] {
  --page-a: #e7e8ec; --page-b: #e7e8ec; --shell: #f4f4f7;
  --glass-soft: #f7f7fa; --glass: #ffffff; --glass-strong: #ffffff;
  --text: #24252b; --muted: #62626e; --line: #d3d4dc; --line-strong: #94939f;
  --primary: #63429c; --primary-strong: #6c46ad; --gold: #825b23;
  --tier-ink: #633f96; --tier-surface: #ece4f7;
  --surface-light: #ffffffa8; --edge-light: #ffffff;
  --raised-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c7c5ce, 0 4px 12px #27223010;
}
body[data-theme='light'][data-plan='lite'] { --tier-ink: #2b674c; --tier-surface: #e0eee5; --balance-a: #326c55; --balance-b: #182f28; --balance-c: #b7e7c9; }
body[data-theme='light'][data-plan='pro'] { --tier-ink: #883b59; --tier-surface: #f3e2e8; --balance-a: #85465e; --balance-b: #341e2b; --balance-c: #f5bdd0; }
body .content { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body .topbar { margin-bottom: 20px; }
body .hello-top { margin-bottom: 20px; }
body .brand b { font-size: 18px; font-weight: 700; }
body .brand-mark { width: 36px; height: 36px; min-width: 36px; font-size: 28px; filter: drop-shadow(0 2px 5px #e1c68e26); }
body .hello-title h1 { font-size: 22px; line-height: 1.4; font-weight: 600; }
body .hello-title .pills { margin-top: 12px; }
body .pill { min-height: 32px; padding: 6px 10px; }
body .icon-btn { border-radius: 50%; border-color: var(--line); background: linear-gradient(155deg, var(--surface-light), transparent), var(--glass-soft); box-shadow: var(--raised-shadow); }
body button.users-pill { border-color: transparent; padding-left: 2px; }
body[data-theme] .pill.plan { background: linear-gradient(160deg, var(--surface-light), transparent), var(--tier-surface); border: 1px solid color-mix(in srgb, var(--tier-ink) 25%, transparent); box-shadow: inset 0 1px 0 var(--surface-light); }

body .balance-card {
  isolation: isolate; position: relative; overflow: hidden; padding: 20px; min-height: 198px; gap: 12px;
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--balance-c) 48%, var(--balance-b));
  background: linear-gradient(125deg, #ffffff15, transparent 46%), linear-gradient(125deg, var(--balance-a), var(--balance-b) 84%);
  box-shadow: inset 0 1px 0 #ffffff55, inset 0 -2px 0 #00000038, 0 12px 26px #00000025;
}
body .balance-card > :not(.lunar-relief) { position: relative; z-index: 2; }
body .balance-card .row-between { align-items: center; }
body .balance-label { color: #ebe4f6; font-size: 13px; font-weight: 500; }
body[data-theme] .balance-card .pill.plan { color: #fff; background: #ffffff12; border-color: #ffffff40; backdrop-filter: blur(12px); }
body .balance-value { color: #fff; font-size: 48px; line-height: 1.12; font-weight: 600; text-shadow: 0 2px 1px #ffffff18, 0 4px 16px #00000025; }
body .balance-meta { color: #e6deef; font-size: 12px; margin-top: auto; }
body .balance-meta .days-highlight { color: #fff; font-size: 14px; }
/* A carved crescent belongs to the balance surface, never behind dense copy. */
body .lunar-relief { position: absolute; z-index: 0; right: -55px; top: -44px; width: 200px; height: 200px; border-radius: 50%; transform: rotate(-32deg); box-shadow: inset 9px 1px 8px -4px #f1e5ff, inset 24px 0 22px -8px var(--balance-c), -2px 0 1px #ffffff65, -12px 3px 20px #00000024; opacity: .75; pointer-events: none; }
body .lunar-relief::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; border-left: 1px solid #ffffff65; opacity: .7; }
body .balance-card::before { display: block; content: ''; position: absolute; z-index: 0; left: 20px; right: 20px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #dfc992a0, transparent); }
body #panel-home > .grid-2 { gap: 14px; }
body[data-theme] #panel-home > .grid-2 .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 8px 0 12px; min-height: 132px; gap: 9px; }
body #panel-home > .grid-2 .card + .card { border-left: 1px solid var(--line); padding-left: 18px; }
body #activeDevices, body #connectionLabel { font-size: 24px; font-weight: 600; }
body .device-slots { display: flex; align-items: center; gap: 5px; height: 10px; }
body .device-slots i { width: 17px; height: 8px; border-radius: 3px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: inset 0 1px 2px #00000025; }
body .device-slots i.filled { background: linear-gradient(var(--balance-c), color-mix(in srgb, var(--balance-c) 65%, #555)); border-color: var(--balance-c); box-shadow: inset 0 1px 0 #fff8; }
body .connection-meter { height: 8px; border-radius: 3px; background: var(--glass-strong); box-shadow: inset 0 1px 2px #00000025; overflow: hidden; }
body .connection-meter span { background: linear-gradient(#b4e7cd, #66b092); border-radius: 3px; box-shadow: inset 0 1px 0 #fff6; }
body .card #dailyBurnInline, body .card #connectionScore { font-size: 11px; }

body .btn, body .primary-btn, body .topup-cta, body .referral-contest-actions .btn, body .daily-gift-open-btn {
  background: linear-gradient(175deg, #f5f1ff, #c6bed7); color: #292332; border: 1px solid #f7f2ff;
  border-radius: 999px; box-shadow: inset 0 2px 0 #ffffff, inset 0 -2px 0 #a9a0b9, 0 5px 12px #00000030; font-weight: 800;
}
body[data-theme='light'] :is(.btn, .primary-btn, .topup-cta, .daily-gift-open-btn) { background: linear-gradient(175deg, #835fc0, #57338d); color: #fff; border-color: #997bc6; box-shadow: inset 0 1px 0 #ffffff50, inset 0 -2px 0 #422467, 0 4px 12px #4b30642b; }
body .secondary, body .ghost-btn, body .referral-contest-details-btn, body .daily-gift-prizes-btn { border-radius: 999px; background: linear-gradient(160deg, var(--surface-light), transparent), var(--glass-soft); box-shadow: var(--raised-shadow); }
body .action-card, body .more-card { background: linear-gradient(145deg, var(--surface-light), transparent 60%), var(--glass-soft); border-radius: 16px; border-color: var(--line); box-shadow: var(--raised-shadow); padding: 16px; min-height: 98px; }
body .action-card.full { min-height: 80px; }
body #btnQuickConnectHome { color: #292332; background: linear-gradient(160deg, #f5f1ff, #c8bedc); border-color: #faf7ff; border-radius: 24px; box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 #a79bbf, 0 7px 18px #00000030; }
body #btnQuickConnectHome span span { color: #51485e; }
body[data-theme] .action-card b, body[data-theme] .more-card b { color: var(--text); }
body[data-theme] #btnQuickConnectHome b { color: #292332; }
body .quick-token, body .action-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, var(--surface-light), transparent), var(--glass); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--edge-light), 0 3px 6px #00000020; font-size: 21px; }
body .action-card b, body .more-card b { font-size: 14px; }
body .section-title { margin-top: 14px; }
body .referral-contest-card { background: #0e0f12; border-color: #454047; border-radius: 20px; box-shadow: inset 0 1px 0 #ffffff18; padding: 18px; }
body .referral-contest-phone { mix-blend-mode: lighten; }
body .referral-contest-own { background: #1d1c21; border-color: #38343f; }
body .referral-contest-details-btn { color: #e4dce9; background: linear-gradient(150deg, #ffffff0c, transparent), #1e1d23; border-color: #44404c; }
body .home-offer-viewport { border-radius: 20px; }
body .daily-gift-card, body .daily-gift-card.is-premium-unlocked { background: linear-gradient(125deg, #39332b, #1b1b20 65%); border-color: #6c5a3b; border-radius: 20px; box-shadow: inset 0 1px 0 #d7bd7540; }
body .daily-gift-card .daily-gift-card-copy h2 { color: #f6f1e8; }
body .daily-gift-card .daily-gift-card-copy p, body .daily-gift-card .daily-gift-countdown, body .daily-gift-card .daily-gift-pass-number { color: #c2bbac; }
body .daily-gift-card .daily-gift-kicker { color: #e1c68e; }
body .daily-gift-pass-stub { border-color: #b09a6955; }

body[data-theme] .device-card, body[data-theme] .tariff-card, body[data-theme] .plan-card, body[data-theme] .topup-tariff-card {
  background: linear-gradient(140deg, var(--surface-light), transparent 65%), var(--glass-soft); box-shadow: var(--raised-shadow);
}
body .device-card { border-radius: 20px; padding: 18px; }
body .device-actions { padding-top: 6px; }
body .qr-device-btn, body .delete-device-btn { border-radius: 50%; }
body[data-theme] .tariff-current { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 0 22px; box-shadow: none; }
body[data-theme] .plan-card.active, body[data-theme] .topup-tariff-card.active { background: linear-gradient(140deg, var(--surface-light), transparent), var(--tier-surface); box-shadow: inset 0 0 0 1px var(--tier-ink), inset 0 2px 0 #fff2, 0 4px 12px #0002; }
body .tariff-card { border-radius: 18px; }
body input, body textarea, body[data-theme] .promo-row input { box-shadow: inset 0 2px 5px #00000018; }
body[data-theme] dialog.quick-modal { border-radius: 26px; border-color: var(--line-strong); background: linear-gradient(160deg, var(--surface-light), transparent 160px), var(--shell); box-shadow: inset 0 1px 0 var(--edge-light), 0 30px 90px #00000080; }
body dialog::backdrop { backdrop-filter: blur(8px); background: #07070c9c; }

body .bottom-nav {
  left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; padding: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0; border-radius: 28px; border: 1px solid #ffffff30;
  background: linear-gradient(175deg, #ffffff12, #ffffff02), #202025e8; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 #ffffff40, inset 0 -1px 0 #0008, 0 8px 30px #00000060;
  isolation: isolate;
}
body .bottom-nav::before {
  content: ''; position: absolute; left: 7px; top: 7px; bottom: 7px; width: calc((100% - 14px) / 4); border-radius: 21px;
  background: linear-gradient(160deg, #dfd2ff35, #aa8de719); border: 1px solid #e5d8ff50;
  box-shadow: inset 0 1px 0 #ffffff45, inset 0 -1px 0 #00000055, 0 2px 7px #0003;
  transform: translateX(calc(var(--nav-index, 0) * 100%)); transition: transform 320ms cubic-bezier(.2,.8,.2,1); z-index: -1; pointer-events: none;
}
body .nav-btn, body .nav-btn.active { display: flex; align-items: center; justify-content: center; grid-template-columns: none; }
body .nav-btn { position: relative; min-width: 0; min-height: 54px; border-radius: 21px; gap: 5px; padding: 6px 1px; flex-direction: column; color: #bcb7c7; font-size: 10px; background: transparent; }
body .nav-btn.active { background: transparent; color: #f3eaff; box-shadow: none; flex-direction: column; }
body .nav-btn.active svg { filter: drop-shadow(0 1px 4px #cfb2ff45); }
body[data-theme='light'] .bottom-nav { background: linear-gradient(#fff9, #fff2), #edeaf2e8; border-color: #ffffff; box-shadow: inset 0 1px 0 #fff, 0 8px 25px #29203326; }
body[data-theme='light'] .bottom-nav::before { background: linear-gradient(150deg, #fff, #e1d5f1); border-color: #c3b0df; }
body[data-theme='light'] .nav-btn { color: #68616f; }
body[data-theme='light'] .nav-btn.active { color: #503578; }
body .referral-contest-kicker { color: #e1c68e; }
body button { transition: transform 160ms ease, box-shadow 160ms ease, background-color 180ms ease, border-color 180ms ease; }
body button:not(:disabled):active { transform: translateY(2px); }
body .nav-btn:active { transform: scale(.96); }
@media (hover: hover) { body :is(.action-card, .more-card):not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--edge-light), 0 7px 18px #0003; } }
@media (max-width: 350px) {
  body .balance-card { padding: 17px; }
  body .balance-value { font-size: 42px; }
  body .lunar-relief { right: -80px; }
  body .hello-title h1 { font-size: 19px; }
  body #activeDevices, body #connectionLabel { font-size: 21px; }
  body .action-card, body .more-card { padding: 12px; gap: 8px; }
  body .quick-token { width: 30px; min-width: 30px; height: 34px; }
  body .action-card b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) { body .bottom-nav { background: var(--shell); backdrop-filter: none; } body dialog::backdrop { backdrop-filter: none; background: #07070ce8; } }

/* Shared component regressions found in the full modal/state review. */
body[data-theme] .quick-modal .panel-head { display: flex; align-items: flex-start; gap: 12px; }
body[data-theme] .quick-modal .panel-head > :first-child { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
body[data-theme] .quick-modal .panel-head > button { flex: 0 0 auto; width: auto; max-width: 104px; align-self: flex-start; }
body[data-theme] .quick-modal .panel-head > .icon-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; }
body[data-theme] .quick-modal .panel-head > .ghost-btn { min-height: 44px; padding: 10px 14px; }
body[data-theme] button.users-pill { padding: 7px 12px; min-height: 34px; line-height: 1.5; border-color: var(--line); }
body[data-theme] .nav-btn, body[data-theme] .nav-btn:not(:disabled):hover { border-color: transparent; background: transparent; box-shadow: none; filter: none; }
body[data-theme] .nav-btn:focus-visible, body[data-theme] .quick-modal .panel-head > button:focus-visible { outline-offset: -4px; }
body[data-input='pointer'] button:focus-visible { outline: none; }

body[data-theme] dialog.daily-gift-modal { height: auto; min-height: 0; max-height: calc(100dvh - 24px); }
body[data-theme] .daily-gift-modal .daily-gift-modal-body { height: auto; min-height: 0; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 24px; padding: 24px 20px; overflow-y: auto; }
body[data-theme] .daily-gift-modal .panel-head { margin: 0; flex-shrink: 0; }
body[data-theme] .daily-gift-modal .daily-gift-stage { padding: 0; gap: 0; flex-shrink: 0; }
body[data-theme] .daily-gift-modal .daily-gift-ticket-shell { padding: 18px 0 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body[data-theme] .daily-gift-modal .daily-gift-ticket-meta { display: none; }
body[data-theme] .daily-gift-modal .daily-gift-pointer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-top-color: var(--tier-ink); filter: none; }
body[data-theme] .daily-gift-modal .daily-gift-reel-window { min-height: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--glass-soft); box-shadow: inset 0 1px 0 var(--edge-light); mask-image: none; -webkit-mask-image: none; }
body[data-theme] .daily-gift-modal .daily-gift-reel-window::before { content: none; }
body[data-theme] .daily-gift-modal .daily-gift-reel-window::after { inset: auto auto 0 50%; width: 40px; height: 3px; border: 0; border-radius: 3px; background: var(--tier-ink); box-shadow: none; z-index: 3; }
body[data-theme] .daily-gift-modal .daily-gift-reel { gap: 12px; padding: 12px 18px 20px; }
body[data-theme] .daily-gift-modal .daily-gift-prize:not(:last-child)::after { content: ''; position: absolute; right: -6px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent); pointer-events: none; }
body[data-theme] .daily-gift-modal .daily-gift-prize,
body[data-theme] .daily-gift-modal .daily-gift-prize.is-legendary { flex: 0 0 164px; min-width: 164px; height: 224px; padding: 10px 8px; grid-template-rows: 128px 42px 20px; gap: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); }
body[data-theme] .daily-gift-modal .daily-gift-prize-icon { width: 128px; height: 128px; display: grid; place-items: center; font-size: 62px; background-color: transparent; filter: drop-shadow(0 6px 5px #00000015); }
body[data-theme] .daily-gift-modal .daily-gift-prize b { align-self: center; color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
body[data-theme] .daily-gift-modal .daily-gift-prize small { color: var(--muted); font-size: 11px; line-height: 1.4; }
body[data-theme] .daily-gift-modal .daily-gift-prize.is-legendary small { color: var(--gold); }
body[data-theme] .daily-gift-modal .daily-gift-prize-legendary { display: none; }
body[data-theme] .daily-gift-modal .daily-gift-stage-status { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
body[data-theme] .daily-gift-modal .daily-gift-stage-status:empty,
body[data-theme] .daily-gift-modal .daily-gift-stage-status.is-idle-hint { display: none; }
body[data-theme] .daily-gift-modal .daily-gift-done { margin: 0; flex-shrink: 0; min-height: 52px; }
body[data-theme] .daily-gift-modal .daily-gift-result,
body[data-theme] .daily-gift-modal .daily-gift-result.is-legendary { height: auto; min-height: 260px; padding: 8px 12px 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
body[data-theme] .daily-gift-modal .daily-gift-result-icon { width: 148px; height: 148px; max-width: 100%; background-color: transparent; filter: drop-shadow(0 6px 6px #00000015); }
body[data-theme] .daily-gift-modal .daily-gift-result-icon:not(.daily-gift-product-art) { display: grid; place-items: center; border: 0; background: none; box-shadow: none; font-size: 76px; }
@media (max-width: 359px), (max-height: 600px) {
  body[data-theme] .daily-gift-modal .daily-gift-modal-body { gap: 18px; padding: 18px 14px; }
  body[data-theme] .daily-gift-modal .daily-gift-prize,
  body[data-theme] .daily-gift-modal .daily-gift-prize.is-legendary { flex-basis: 144px; min-width: 144px; height: 212px; grid-template-rows: 116px 42px 20px; }
  body[data-theme] .daily-gift-modal .daily-gift-prize-icon { width: 116px; height: 116px; }
}
body[data-theme] .daily-gift-catalog-modal .quick-modal-body { display: flex; flex-direction: column; height: min(760px, calc(100dvh - 34px)); overflow: hidden; }
body .daily-gift-catalog-modal .panel-head, body .daily-gift-catalog-lock, body .daily-gift-catalog-note { flex: 0 0 auto; }
body .daily-gift-catalog-list { flex: 1 1 auto; min-height: 0; max-height: none; padding: 2px 4px 6px 2px; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
body[data-theme] .daily-gift-catalog-item, body[data-theme] .daily-gift-catalog-item.is-legendary, body[data-theme] .daily-gift-catalog-item.is-super { grid-template-rows: auto minmax(58px, auto); padding: 10px; gap: 12px; }
body .daily-gift-catalog-icon { width: min(100%, 128px); height: auto; aspect-ratio: 1; align-self: start; filter: none; }
body .daily-gift-catalog-icon:not(.daily-gift-product-art) { background: var(--tier-surface); font-size: 46px; box-shadow: inset 0 1px 0 var(--edge-light); }
body[data-theme] .daily-gift-catalog-note { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Full-width account header, distinct from the balance card below it. */
body .topbar { --header-gutter: 18px; width: calc(100% + 2 * var(--header-gutter)); max-width: none; margin: -16px calc(-1 * var(--header-gutter)) 18px; padding: 20px var(--header-gutter) 18px; border-bottom: 1px solid color-mix(in srgb, var(--tier-ink) 24%, var(--line)); background: linear-gradient(125deg, color-mix(in srgb, var(--tier-surface) 58%, var(--shell)), var(--shell) 90%); box-shadow: inset 0 -1px 0 var(--surface-light); }
@media (max-width: 359px) { body .topbar { --header-gutter: 12px; } }
body .hello-top { margin-bottom: 14px; }
body .hello-title .pills { margin-top: 9px; }
body .brand-mark { width: 40px; height: 40px; min-width: 40px; display: grid; place-items: center; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--tier-ink) 42%, var(--line)); background: linear-gradient(145deg, #ffffff44, transparent 65%), var(--tier-surface); box-shadow: inset 0 1px 0 #ffffff66, inset 0 -2px 1px #0003, 0 4px 10px #0002; filter: none; }

/* Daily case: a compact reward surface instead of a perforated ticket. */
body[data-theme] #dailyGiftHero {
  padding: 18px; gap: 16px; border-radius: 22px;
  background: linear-gradient(135deg, #ffffff09, transparent 60%), #17181d;
  border: 1px solid #514856; box-shadow: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #0008, 0 8px 18px #0002;
}
body #dailyGiftHero .daily-gift-pass { min-height: 146px; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
body #dailyGiftHero .daily-gift-card-copy { padding: 0; align-content: center; gap: 9px; }
body #dailyGiftHero .daily-gift-kicker { font-size: 10px; font-weight: 700; color: #e1c68e; }
body #dailyGiftHero .daily-gift-card-copy h2 { font-size: 22px; font-weight: 600; line-height: 1.2; color: #f5f2fa; }
body #dailyGiftHero .daily-gift-card-copy p { font-size: 12px; line-height: 1.5; color: #bfb9ca; max-width: none; }
body #dailyGiftHero .daily-gift-rhythm, body #dailyGiftHero .daily-gift-pass-number { display: none; }
body #dailyGiftHero .daily-gift-pass-stub { border: 0; background: none; isolation: auto; }
body #dailyGiftHero .case-object { width: 128px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: lighten; }
body #dailyGiftHero #dailyGiftCardArtwork, body #dailyGiftHero .case-object-open,
body #dailyGiftHero.is-claimed .case-object:not(.case-object-open) { display: none; }
body #dailyGiftHero.is-claimed .case-object-open { display: block; }
body #dailyGiftHero .daily-gift-card-actions { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 10px; }
body #dailyGiftHero #btnOpenDailyGift { grid-column: 1; grid-row: auto; width: 100%; min-height: 50px; }
body #dailyGiftHero.is-claimed #btnOpenDailyGift { background: linear-gradient(175deg, #d8f3e7, #9dccb9); color: #16372a; border: 1px solid #e6fff3; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #77a690, 0 4px 12px #0003; }
body #dailyGiftHero #dailyGiftCountdown { grid-column: 1; grid-row: auto; padding: 0; font-size: 12px; color: #beb7ca; text-align: center; font-variant-numeric: tabular-nums; }
body #dailyGiftHero #btnDailyGiftCatalog { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; min-height: 44px; padding: 12px 0 0; margin: 0; border: 0; border-top: 1px solid #ffffff1a; border-radius: 0; background: none; box-shadow: none; color: #d5c9ec; font-size: 12px; text-align: left; }
body #dailyGiftHero .daily-gift-premium-lock { padding: 12px 0 0; border-top: 1px solid #ffffff1a; }
body #dailyGiftHero .daily-gift-premium-lock-copy b { color: #e9e1f2; }
body #dailyGiftHero .daily-gift-premium-lock-copy small { color: #bfb9ca; }
body #dailyGiftHero .case-object { transform-origin: 50% 76%; }
body #dailyGiftHero .case-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body #dailyGiftHero .case-light { position: absolute; left: 13%; right: 13%; top: 3%; height: 47%; opacity: 0; background: linear-gradient(0deg, #ffdc91bb, #ffd27b22 50%, transparent); clip-path: polygon(0 0, 100% 0, 62% 100%, 36% 100%); transform-origin: 50% 100%; mix-blend-mode: screen; }
body #dailyGiftHero .case-confetti { position: absolute; left: 50%; top: 46%; width: 3px; height: 6px; border-radius: 1px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  body #dailyGiftHero.is-teasing .case-object { animation: case-rattle 2400ms ease-in-out both; }
  body #dailyGiftHero.is-teasing .case-light { animation: case-escape-light 2400ms ease-out both; }
  body #dailyGiftHero.is-teasing .case-confetti { animation: case-confetti-pop 2200ms var(--delay) cubic-bezier(.2,.6,.3,1) both; }
}
@keyframes case-rattle {
  0%, 12%, 32%, 100% { transform: translateY(0) rotate(0); filter: brightness(1); }
  16%, 24% { transform: translateY(-2px) rotate(-5deg); }
  20%, 28% { transform: translateY(-2px) rotate(5deg); }
  40% { transform: translateY(-8px) rotate(-3deg); filter: brightness(1.22); }
  49% { transform: translateY(-3px) rotate(3deg); }
  58% { transform: translateY(1px) rotate(-1deg); filter: brightness(1.08); }
  70% { transform: translateY(0) rotate(0); filter: brightness(1); }
}
@keyframes case-escape-light {
  0%, 22%, 100% { opacity: 0; transform: scaleX(.65) scaleY(.7); }
  32% { opacity: .35; }
  42% { opacity: .85; transform: scaleX(1) scaleY(1); }
  62% { opacity: .25; }
  82% { opacity: 0; transform: scaleX(1.1) scaleY(1.1); }
}
@keyframes case-confetti-pop {
  0%, 35% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); }
  45% { opacity: 1; }
  60% { opacity: 1; transform: translate(var(--dx), var(--rise)) rotate(var(--spin)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), 52px) rotate(calc(var(--spin) * 2)) scale(.75); }
}
@media (max-width: 359px) {
  body[data-theme] #dailyGiftHero { padding: 14px; }
  body #dailyGiftHero .daily-gift-pass { grid-template-columns: minmax(0, 1fr) 90px; min-height: 140px; }
  body #dailyGiftHero .daily-gift-card-copy h2 { font-size: 19px; }
  body #dailyGiftHero .daily-gift-card-copy p { font-size: 11px; }
  body #dailyGiftHero.is-claimed #dailyGiftCardArtwork { width: 86px; height: 86px; }
}

/* Modal colors are independent of the always-dark promotional banner. */
body[data-theme] .referral-contest-modal .referral-contest-kicker { color: var(--gold); }
body[data-theme] .referral-contest-modal .referral-contest-modal-countdown,
body[data-theme] .referral-contest-modal .referral-contest-rank-count,
body[data-theme] .referral-contest-modal .referral-contest-rank-row small,
body[data-theme] .referral-contest-modal .referral-contest-empty { color: var(--muted); }
body[data-theme] .referral-contest-modal .referral-contest-rank-row,
body[data-theme] .referral-contest-modal .referral-contest-rank-row b { color: var(--text); }
body[data-theme] .referral-contest-modal .referral-contest-rank { color: var(--gold); }
body[data-theme] .referral-contest-modal .referral-contest-current-row { border-color: var(--line); background: var(--tier-surface); }
body[data-theme] .referral-contest-prize-slide { display: flex; flex-direction: column; height: auto; min-height: 0; border-color: var(--line); background: var(--glass-soft); }
body[data-theme] .referral-contest-prize-visual { position: relative; flex: 0 0 auto; height: 230px; min-height: 0; padding: 0; background: #000; }
body[data-theme] .referral-contest-prize-visual img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); min-width: 0; min-height: 0; max-width: none; max-height: none; object-fit: contain; display: block; }
body[data-theme='light'] .referral-contest-prize-visual { background: #fff; }
body[data-theme='light'] .referral-contest-prize-visual img.prize-photo-inset { inset: 28px auto auto 50%; width: 174px; height: 174px; transform: translateX(-50%); border-radius: 16px; }
body[data-theme] .referral-contest-prize-copy { position: static; flex: 1 0 auto; padding: 14px 16px 16px; background: var(--glass-soft); border-top: 1px solid var(--line); }
body[data-theme] .referral-contest-prize-copy strong { color: var(--text); }
body[data-theme] .referral-contest-prize-copy small { color: var(--muted); }
body[data-theme] .referral-contest-prize-copy span { color: var(--gold); }
body .bottom-nav::before { box-sizing: border-box; left: 0; top: 0; bottom: auto; width: var(--nav-width, 0px); height: var(--nav-height, 54px); transform: translate(var(--nav-x, 7px), var(--nav-y, 7px)); }
@media (max-height: 700px) { body[data-theme] .referral-contest-prize-visual { height: 180px; } body[data-theme='light'] .referral-contest-prize-visual img.prize-photo-inset { top: 16px; width: 148px; height: 148px; } }