/* EM REWARDS WORLD - targeted currency icons. No theme overrides. */
.emrw-currency-decor,
.emrw-currency-inline,
.emrw-tidy-currency-icon {
  display:inline-block;
  width:1.18em;
  height:1.18em;
  max-width:100%;
  object-fit:contain;
  vertical-align:-0.23em;
  flex:0 0 auto;
}
.emrw-tidy-currency-icon { margin-right:.32em; }
.emrw-tidy-currency-icon.is-inside-holder { width:1.15em;height:1.15em;margin:0;vertical-align:middle; }
.emrw-currency-decor { margin-right:.18em; }
.emrw-currency-inline { margin-right:.25em; }
/* Dedicated icon slots: use the existing design's spacing and sizing. */
.stat-icon .emrw-tidy-currency-icon,
.emrw-faucet-reward-icon .emrw-tidy-currency-icon,
.emrw-claim-bonus-icon .emrw-tidy-currency-icon,
.emrw-auto-finish-stat-icon .emrw-tidy-currency-icon,
.emrw-auto-finish-credit-icon .emrw-tidy-currency-icon,
.snapshot-ring .emrw-tidy-currency-icon {
  width:78%;height:78%;max-height:36px;object-fit:contain;margin:0;
}
.emrw-faucet-reward-icon:has(> .emrw-tidy-currency-icon),
.emrw-claim-bonus-icon:has(> .emrw-tidy-currency-icon),
.emrw-auto-finish-credit-icon:has(> .emrw-tidy-currency-icon),
.emrw-auto-finish-stat-icon:has(> .emrw-tidy-currency-icon) {
  display:inline-flex;align-items:center;justify-content:center;
}
.header-balance strong .emrw-tidy-currency-icon {vertical-align:-.18em;}
.emrw-auto-widget-metrics strong .emrw-tidy-currency-icon {width:1em;height:1em;vertical-align:-.17em;}
@media(max-width:520px){
 .emrw-tidy-currency-icon {width:1.06em;height:1.06em;margin-right:.24em;}
}


/* 2026-10: prevent legacy-to-v2 layout flashes on Home, Overview, Levels,
   and Earn ACP. This stylesheet is ALREADY in the HTML <head>, so its
   guarded placeholders are painted before the deferred JS starts. */
html { scrollbar-gutter: stable; }
@keyframes emrwLegacyFallback { to { opacity: 1; pointer-events: auto; } }
@keyframes emrwLoadGlow { 0%,100% {opacity:.64} 50% {opacity:1} }

/* Hide the ORIGINAL layout until the replacement's CSS/JS/data is ready.
   4s fallback restores original if a network dependency fails. */
body.app-body .page-content:has(> .stats-grid):has(> .dashboard-grid)
  > :is(.page-intro, .emrw-fuel-panel-dashboard, .stats-grid, .dashboard-grid, .activity-panel),
body.app-body .page-content:has(> .tasks-grid)
  > :is(.page-intro, .notice, .tasks-grid),
body.app-body .page-content:has(> .level-hero)
  > :is(.page-intro, .level-hero, .level-stats, .levels-layout, .level-history-panel, .emrw-fuel-panel-levels) {
  opacity: 0;
  pointer-events: none;
  animation: emrwLegacyFallback 0s linear 4s forwards;
}
/* While waiting, show a dark hero placeholder, not a second old layout. */
body.app-body .page-content:has(> .stats-grid):has(> .dashboard-grid)::before,
body.app-body .page-content:has(> .tasks-grid)::before,
body.app-body .page-content:has(> .level-hero)::before {
  content: "";
  display: block;
  height: clamp(200px,26vw,260px);
  margin-bottom: 22px;
  border: 1px solid rgba(102,218,190,.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 87% 22%,rgba(80,226,177,.18),transparent 37%),
    linear-gradient(90deg,rgba(34,57,77,.6),rgba(45,101,103,.43),rgba(34,57,77,.6));
  background-size: auto, 230% 100%;
  box-shadow: 0 15px 42px rgba(0,5,13,.08);
  animation: emrwLoadGlow 1.7s ease-in-out infinite;
}

/* Public Home has a similar conversion from server HTML to Home v2. */
body.public-body:has(> section.hero.public-container):not(.emrw-hm-active) {
  background: #101928;
  color: #eaf4ff;
}
body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
  > :is(section.trust-strip, section.section-how, section.features-section, section.bottom-cta) {
  opacity: 0;
  animation: emrwLegacyFallback 0s linear 4s forwards;
}
body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
  > section.hero.public-container > * {
  opacity: 0;
  animation: emrwLegacyFallback 0s linear 4s forwards;
}
body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
  > section.hero.public-container {position:relative; min-height:570px;}
body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
  > section.hero.public-container::before {
  content:"";position:absolute;inset:48px 0 auto; height:clamp(315px,35vw,475px);
  border:1px solid rgba(116,223,191,.18);border-radius:24px;
  background:radial-gradient(circle at 85% 25%,rgba(70,205,163,.16),transparent 40%),
    linear-gradient(110deg,rgba(28,54,69,.6),rgba(37,83,84,.5),rgba(28,54,69,.6));
  animation:emrwLoadGlow 1.7s ease-in-out infinite;
  pointer-events:none;
}
/* Keep the top login action visible and styled while Home initializes. */
body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
  > .public-nav .nav-login {
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(34,65,78,.46);border:1px solid rgba(107,227,192,.4);
  border-radius:12px;color:#e9fff7;font-weight:800;padding:11px 18px;
}
@media (max-width:620px){
  body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
    > .public-nav nav > a[href="#how-it-works"],
  body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
    > .public-nav nav > a[href="#features"]{display:none!important;}
  body.public-body:has(> section.hero.public-container):not(.emrw-hm-active)
    > .public-nav .nav-login{display:inline-flex!important; padding:7px 11px;}
}
@media (prefers-reduced-motion: reduce){
 body.app-body .page-content:has(> .stats-grid):has(> .dashboard-grid)::before,
 body.app-body .page-content:has(> .tasks-grid)::before,
 body.app-body .page-content:has(> .level-hero)::before,
 body.public-body:has(> section.hero.public-container):not(.emrw-hm-active) > section.hero.public-container::before {
   animation:none;
 }
}


/* Hide old PTC campaign UI while the new PTC v2 arrives; fallback after 5s. */
body.app-body .page-content:has(> .ptc-layout) > :is(.page-intro,.notice,.ptc-layout){
  opacity:0;pointer-events:none;animation:emrwLegacyFallback 0s linear 5s forwards;
}
body.app-body .page-content:has(> .ptc-layout)::before {
  content:"";display:block;height:clamp(210px,27vw,270px);margin-bottom:24px;
  border:1px solid rgba(89,226,178,.23);border-radius:22px;
  background:radial-gradient(circle at 80% 18%,rgba(66,212,169,.21),transparent 42%),linear-gradient(115deg,#1b3442,#214852,#1b3442);
  background-size: auto,220% 100%;animation:emrwLoadGlow 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){body.app-body .page-content:has(> .ptc-layout)::before{animation:none}}

/* ========================================================================
   EM REWARDS WORLD / UNIFIED ACCOUNT PAGES — 2026-10-15
   Drop-in CSS only. No PHP templates, balances, payment flows or JS changed.
   This CSS already loads in the <head> of the current EMRW site.
   ======================================================================== */

/* One coherent look for Withdrawals, Referrals and Activity history. */
body.app-body .page-content:has(> .withdraw-layout),
body.app-body .page-content:has(> .referral-hero),
body.app-body .page-content:has(> .history-panel){
  --emrw-up-mint:#71e9c2;
  --emrw-up-border:rgba(128,190,198,.22);
  --emrw-up-ink:#eff9ff;
  --emrw-up-sub:#b1c8d1;
  --emrw-up-surface:#172a3d;
}

/* Shared banner geometry (matches Overview, Earn ACP and faucet). */
body.app-body .page-content:has(> .withdraw-layout) > .page-intro,
body.app-body .page-content:has(> .referral-hero) > .page-intro,
body.app-body .page-content:has(> .history-panel) > .page-intro{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:186px;padding:28px 32px;margin-bottom:21px;
  border-radius:23px;border:1px solid rgba(103,223,191,.27);
  background:radial-gradient(ellipse at 92% 12%,rgba(36,176,147,.22),transparent 45%),linear-gradient(117deg,#182c40,#182639 60%,#1b3c43);
  box-shadow:0 18px 44px rgba(4,10,22,.16);
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro::before,
body.app-body .page-content:has(> .referral-hero) > .page-intro::before,
body.app-body .page-content:has(> .history-panel) > .page-intro::before{
  content:"";position:absolute;right:-95px;top:-148px;z-index:-1;
  width:330px;height:330px;border:1px solid rgba(106,225,193,.17);
  box-shadow:0 0 0 54px rgba(106,225,193,.035),0 0 0 115px rgba(106,225,193,.025);
  border-radius:50%;pointer-events:none;
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro > div:first-child,
body.app-body .page-content:has(> .referral-hero) > .page-intro > div:first-child,
body.app-body .page-content:has(> .history-panel) > .page-intro > div:first-child{
  min-width:0;position:relative;z-index:1;max-width:700px;
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro .eyebrow,
body.app-body .page-content:has(> .referral-hero) > .page-intro .eyebrow,
body.app-body .page-content:has(> .history-panel) > .page-intro .eyebrow{
  color:#81f0ce;font-size:10px;font-weight:800;letter-spacing:.15em;
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro h1,
body.app-body .page-content:has(> .referral-hero) > .page-intro h1,
body.app-body .page-content:has(> .history-panel) > .page-intro h1{
  font:800 clamp(29px,3vw,41px)/1.14 'Space Grotesk',sans-serif;
  letter-spacing:-.045em;color:var(--emrw-up-ink);margin:10px 0 8px;
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro .orange-dot,
body.app-body .page-content:has(> .referral-hero) > .page-intro .orange-dot,
body.app-body .page-content:has(> .history-panel) > .page-intro .orange-dot{color:var(--emrw-up-mint)}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro p,
body.app-body .page-content:has(> .referral-hero) > .page-intro p,
body.app-body .page-content:has(> .history-panel) > .page-intro p{
  font-size:12px;line-height:1.7;color:var(--emrw-up-sub);max-width:575px;margin:0;
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro .header-balance{
  position:relative;z-index:1;flex:0 0 auto;min-width:160px;
  padding:13px 16px;border-radius:14px;
  background:rgba(9,28,42,.54);border:1px solid rgba(118,224,197,.28);
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro .header-balance > span{
  color:#9fc9c5;font-size:10px;letter-spacing:.11em;font-weight:800;
}
body.app-body .page-content:has(> .withdraw-layout) > .page-intro .header-balance strong{
  color:#eafff7;font-size:clamp(20px,2.4vw,27px);font-variant-numeric:tabular-nums;
}

/* Shared glass cards for existing page elements: keep all form and table markup. */
body.app-body .page-content:has(> .withdraw-layout) :is(.withdraw-form-panel,.withdraw-steps,.activity-panel),
body.app-body .page-content:has(> .referral-hero) :is(.referral-hero,.referral-rules,.stat-card),
body.app-body .page-content:has(> .history-panel) > .history-panel{
  color:#eaf6fe;border:1px solid var(--emrw-up-border);border-radius:21px;
  background:radial-gradient(circle at 100% 0%,rgba(43,158,141,.10),transparent 38%),linear-gradient(152deg,rgba(28,45,64,.96),rgba(21,33,50,.99));
  box-shadow:0 14px 35px rgba(5,12,26,.14);
}
body.app-body .page-content:has(> .withdraw-layout) .panel-heading,
body.app-body .page-content:has(> .referral-hero) .panel-heading,
body.app-body .page-content:has(> .history-panel) .panel-heading{
  gap:12px;min-width:0;
}
body.app-body .page-content:has(> .withdraw-layout) .panel-heading h2,
body.app-body .page-content:has(> .referral-hero) .panel-heading h2,
body.app-body .page-content:has(> .history-panel) .panel-heading h2{
  color:#f1f9ff;font:800 clamp(17px,2vw,20px)/1.25 'Space Grotesk',sans-serif;letter-spacing:-.025em;
}
body.app-body .page-content:has(> .withdraw-layout) .panel-heading p,
body.app-body .page-content:has(> .referral-hero) .panel-heading p,
body.app-body .page-content:has(> .history-panel) .panel-heading p{
  font-size:12px;line-height:1.55;color:#acc2cf;
}

/* Withdrawals: two balanced cards, teal control surfaces, accessible statuses. */
body.app-body .page-content:has(> .withdraw-layout) > .notice{
  border-radius:16px;border:1px solid rgba(222,183,108,.26);
  background:linear-gradient(120deg,rgba(83,70,49,.35),rgba(28,44,59,.92));
  color:#f8edd8;margin-bottom:20px;
}
body.app-body .page-content:has(> .withdraw-layout) > .notice p{color:#d2c8ba;line-height:1.6}
body.app-body .page-content > .withdraw-layout{
  display:grid;grid-template-columns:minmax(0,1.16fr) minmax(255px,.76fr);
  gap:17px;align-items:stretch;margin-bottom:21px;
}
body.app-body .page-content > .withdraw-layout > *{min-width:0}
body.app-body .page-content .withdraw-form-panel{padding:24px 25px 25px}
body.app-body .page-content .withdraw-form-panel .form-stack{gap:17px}
body.app-body .page-content .withdraw-form-panel .form-stack label{
  display:flex;flex-direction:column;gap:8px;font-size:12px;color:#c9dce3;font-weight:750;
}
body.app-body .page-content .withdraw-form-panel :is(input,select){
  min-width:0;width:100%;box-sizing:border-box;min-height:46px;
  background:rgba(8,25,39,.67);color:#f3fbff;
  border:1px solid rgba(120,179,191,.27);border-radius:12px;
  padding:10px 13px;outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
body.app-body .page-content .withdraw-form-panel :is(input,select):focus-visible{
  border-color:#76e7c2;box-shadow:0 0 0 3px rgba(91,224,179,.14);
}
body.app-body .page-content .withdraw-form-panel label small{font-size:11px;font-weight:500;color:#9cb8c5;line-height:1.5}
body.app-body .page-content .withdraw-form-panel .btn-primary{
  min-height:50px;border-radius:12px;
  background:linear-gradient(100deg,#2bc8a2,#76e5b4);
  border:1px solid rgba(127,242,204,.5);color:#08372d;
  box-shadow:0 10px 25px rgba(23,176,138,.17);font-weight:850;
}
body.app-body .page-content .withdraw-form-panel .btn-primary:hover:not(:disabled){filter:brightness(1.08)}
body.app-body .page-content .withdraw-form-panel .btn-primary:disabled{opacity:.57;box-shadow:none}
body.app-body .page-content .withdraw-steps{padding:24px 23px}
body.app-body .page-content .withdraw-steps h2{color:#edf8ff;font-weight:800;margin-bottom:17px}
body.app-body .page-content .withdraw-step{position:relative;display:flex;gap:13px;padding:16px 0}
body.app-body .page-content .withdraw-step + .withdraw-step{border-top:1px solid rgba(130,186,204,.15)}
body.app-body .page-content .withdraw-step > span{
  flex:0 0 35px;display:grid;place-items:center;width:35px;height:35px;
  border-radius:11px;color:#7fecca;background:rgba(57,176,147,.15);font-weight:800;
}
body.app-body .page-content .withdraw-step strong{display:block;color:#eef8ff;font-size:13px;margin-bottom:4px}
body.app-body .page-content .withdraw-step p{font-size:11px;line-height:1.65;color:#a5bcc8}

/* Referrals: invite banner, KPI row, and instructional cards in one system. */
body.app-body .page-content > .referral-hero{
  display:grid;grid-template-columns:minmax(170px,.54fr) minmax(0,1.46fr);
  align-items:center;gap:16px;overflow:hidden;padding:24px 27px;
  border-color:rgba(110,227,197,.27);
}
body.app-body .page-content .referral-hero .referral-art{
  position:relative;min-width:0;min-height:160px;
  border-radius:18px;background:radial-gradient(circle at 50% 40%,rgba(76,214,168,.18),rgba(20,52,67,.06) 63%,transparent 75%);
}
body.app-body .page-content .referral-hero .referral-copy{min-width:0}
body.app-body .page-content .referral-hero .eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:#7feaca}
body.app-body .page-content .referral-hero h2{color:#f0fafc;font:800 clamp(22px,2.2vw,29px)/1.25 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:9px 0}
body.app-body .page-content .referral-hero h2 .orange-dot{color:var(--emrw-up-mint)}
body.app-body .page-content .referral-hero p{font-size:12px;line-height:1.7;color:#b4c6d2;margin-bottom:17px}
body.app-body .page-content .copy-link-row{display:flex;gap:9px;min-width:0;align-items:stretch}
body.app-body .page-content .copy-link-row input{
  min-width:0;flex:1 1 auto;color:#e9fff7;background:rgba(8,24,38,.7);
  border:1px solid rgba(119,188,191,.28);border-radius:12px;
  padding:11px 13px;font-size:12px;
}
body.app-body .page-content .copy-link-row .btn-primary{
  flex:0 0 auto;min-height:46px;color:#093b30;border-radius:12px;font-weight:850;
  background:linear-gradient(100deg,#2bc8a2,#76e5b4);
  border:1px solid rgba(127,242,204,.5);
}
body.app-body .page-content > .referral-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0;
}
body.app-body .page-content > .referral-stats .stat-card{
  min-width:0;padding:20px 21px;transition:transform .22s ease,border-color .22s ease;
}
body.app-body .page-content > .referral-stats .stat-card:hover{transform:translateY(-2px);border-color:rgba(117,232,207,.39)}
body.app-body .page-content > .referral-stats .stat-top > span:first-child{font-size:10px;font-weight:800;letter-spacing:.11em;color:#b0cbd1}
body.app-body .page-content > .referral-stats .stat-value{color:#f1fcff;font:800 clamp(23px,2.5vw,31px)/1.22 'Space Grotesk',sans-serif;overflow-wrap:anywhere}
body.app-body .page-content > .referral-stats .stat-bottom{color:#adc6d0;font-size:11px}
body.app-body .page-content > .referral-rules{padding:24px 26px}
body.app-body .page-content > .referral-rules .ref-rule-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;
}
body.app-body .page-content > .referral-rules .ref-rule-grid > div{
  min-width:0;min-height:132px;padding:18px 16px;border-radius:15px;
  background:rgba(11,33,47,.54);border:1px solid rgba(125,178,194,.17);
}
body.app-body .page-content > .referral-rules .ref-rule-grid > div > span{
  color:#76e7c2;font-weight:850;font-size:12px;
}
body.app-body .page-content > .referral-rules .ref-rule-grid strong{display:block;color:#ecf8ff;margin:10px 0 7px;font-size:13px}
body.app-body .page-content > .referral-rules .ref-rule-grid p{font-size:11px;line-height:1.65;color:#a7c0ca}

/* Activity history: promote existing real server data without changing data. */
body.app-body .page-content > .history-panel,
body.app-body .page-content:has(> .withdraw-layout) > .activity-panel:has(.data-table){
  overflow:hidden;padding:24px 24px 17px;
}
body.app-body .page-content:has(> .history-panel) > .history-panel{min-height:320px}
body.app-body .page-content .history-panel .panel-heading{margin-bottom:19px}
body.app-body .page-content:has(> .withdraw-layout) .table-wrap,
body.app-body .page-content:has(> .history-panel) .table-wrap{overflow-x:auto;max-width:100%;border-radius:13px}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table{
  width:100%;border-collapse:separate;border-spacing:0;min-width:620px;
}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table thead,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table thead{
  background:rgba(8,29,43,.66);
}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table thead th,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table thead th{
  padding:14px 15px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#9fb9c5;border-bottom:1px solid rgba(134,184,197,.18);
}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table tbody td,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table tbody td{
  padding:16px 15px;border-bottom:1px solid rgba(122,172,189,.12);
  color:#d8e9f0;font-size:12px;vertical-align:middle;
}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table tbody tr:last-child td,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table tbody tr:last-child td{border-bottom:0}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table tbody tr:hover,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table tbody tr:hover{background:rgba(70,160,151,.075)}
body.app-body .page-content:has(> .history-panel) .history-panel .data-table .table-primary,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .data-table .table-primary{color:#f0f8ff;font-weight:750}
body.app-body .page-content .history-panel .table-symbol{
  display:inline-flex;align-items:center;justify-content:center;
  width:29px;height:29px;margin-right:9px;border-radius:10px;
  background:rgba(61,182,149,.15);color:#73e8c5;
}
body.app-body .page-content .history-panel .type-chip,
body.app-body .page-content:has(> .withdraw-layout) .activity-panel .status-chip{
  display:inline-flex;align-items:center;min-height:27px;
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(114,190,193,.24);
  background:rgba(45,106,107,.20);color:#c2efe5;font-size:10px;font-weight:750;
  white-space:nowrap;
}
body.app-body .page-content .history-panel .amount-cell.positive{color:#82edc7;font-weight:850;font-variant-numeric:tabular-nums}
body.app-body .page-content .history-panel .amount-cell.negative{color:#ffb2a8;font-weight:850;font-variant-numeric:tabular-nums}
body.app-body .page-content .history-panel .date-cell{color:#a8c0cd;white-space:nowrap}
body.app-body .page-content:has(> .withdraw-layout) .empty-state,
body.app-body .page-content:has(> .history-panel) .empty-state{padding:38px 20px}
body.app-body .page-content:has(> .withdraw-layout) .empty-state strong,
body.app-body .page-content:has(> .history-panel) .empty-state strong{color:#eaf9ff}

/* Actual Faucet and Auto Faucet artwork: exactly the same display geometry.
   Both already use the same image file; normalize their frame dimensions,
   parent column widths, panel padding and mobile aspect ratio. */
@media(min-width:1021px){
 body.app-body .page-content > .faucet-layout,
 body.app-body .page-content > .auto-layout{
   grid-template-columns:minmax(0,1.12fr) minmax(260px,.75fr)!important;
 }
}
body.app-body .page-content .faucet-layout > .faucet-card,
body.app-body .page-content .auto-layout > .auto-main{padding:24px 25px 25px}
body.app-body .page-content .faucet-layout .faucet-card > .emrw-faucet-hero,
body.app-body .page-content .auto-layout .auto-main > .emrw-auto-hero{
  box-sizing:border-box!important;
  display:block!important;
  flex:0 0 auto!important;
  align-self:center!important;
  width:88%!important;max-width:88%!important;
  height:auto!important;
  min-height:0!important;max-height:none!important;
  aspect-ratio:16 / 9!important;
  margin:4px auto 22px!important;
  padding:0!important;
  border-radius:17px!important;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
body.app-body .page-content .auto-layout .auto-main > .emrw-auto-hero .emrw-auto-hero-image{
  background-size:cover;background-position:center;
}

@media(max-width:1020px){
  body.app-body .page-content > .withdraw-layout{
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:700px){
 body.app-body .page-content:has(> .withdraw-layout) > .page-intro,
 body.app-body .page-content:has(> .referral-hero) > .page-intro,
 body.app-body .page-content:has(> .history-panel) > .page-intro{
   min-height:0;padding:22px 19px;flex-direction:column;align-items:stretch;gap:16px;border-radius:18px;
 }
 body.app-body .page-content:has(> .withdraw-layout) > .page-intro .header-balance{align-self:flex-start;min-width:0}
 body.app-body .page-content > .referral-hero{grid-template-columns:minmax(0,1fr);padding:18px 17px}
 body.app-body .page-content > .referral-hero .referral-art{min-height:116px}
 body.app-body .page-content > .referral-stats{grid-template-columns:minmax(0,1fr);gap:11px}
 body.app-body .page-content > .referral-rules .ref-rule-grid{grid-template-columns:minmax(0,1fr)}
 body.app-body .page-content > .referral-rules .ref-rule-grid > div{min-height:0}
 body.app-body .page-content .withdraw-form-panel,
 body.app-body .page-content .withdraw-steps,
 body.app-body .page-content > .referral-rules,
 body.app-body .page-content > .history-panel,
 body.app-body .page-content:has(> .withdraw-layout) > .activity-panel:has(.data-table){padding:18px 15px}
 body.app-body .page-content .copy-link-row{flex-wrap:wrap}
 body.app-body .page-content .copy-link-row .btn-primary{width:100%}
 body.app-body .page-content .faucet-layout > .faucet-card,
 body.app-body .page-content .auto-layout > .auto-main{padding:18px 14px 23px}
 body.app-body .page-content .faucet-layout .faucet-card > .emrw-faucet-hero,
 body.app-body .page-content .auto-layout .auto-main > .emrw-auto-hero{
   width:94%!important;max-width:94%!important;
   min-height:0!important;max-height:none!important;
   height:auto!important;aspect-ratio:16 / 9!important;
 }
}
@media(prefers-reduced-motion:reduce){
 body.app-body .page-content > .referral-stats .stat-card{transition:none}
}