/* CryptoFaucet V152 Theme Master
   Final paint layer for Light / Dark / Ultra Dark plus top navigation width alignment.
   Public UI contains only user-facing copy; this file controls presentation only. */
:root{
  --cf-shell-max-v150: 1480px;
  --cf-shell-pad-v150: clamp(18px, 3vw, 48px);
  --cf-nav-h-v150: 82px;
  --cf-radius-xl-v150: 32px;
  --cf-radius-lg-v150: 24px;
  --cf-cyan-v150:#12e9ff;
  --cf-blue-v150:#5d8cff;
  --cf-violet-v150:#8b6cff;
  --cf-pink-v150:#ff3d84;
  --cf-orange-v150:#ff772f;
  --cf-green-v150:#35f3b8;
  --cf-dark-bg-v150:#050916;
  --cf-ultra-bg-v150:#010207;
  --cf-light-ink-v150:#0d1830;
  --cf-light-muted-v150:#425676;
}

/* One shared width for the page body and the floating WebGL-style topbar. */
.cf-page-grid,
.cf-topnav-inner,
.cf-main-inner,
.cf-page > .db-wrap,
.cf-page > .wd-page,
.cf-page > .w-stage,
.cf-page > .wh-page,
.cf-page > .v76-board,
.cf-page > .ds-page,
.cf-page > .cfx-home,
.cf-page > .sl-page,
.cf-page > .cf-legal,
.cf-page > .vb,
.cf-page > .cf-page,
.cf-page > .ptc-page,
.cf-page > .owm-page,
.cf-page > .portal-page{
  width:min(var(--cf-shell-max-v150), calc(100vw - var(--cf-shell-pad-v150) * 2)) !important;
  max-width:var(--cf-shell-max-v150) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.cf-page-grid{display:block !important;padding-top:calc(var(--cf-nav-h-v150) + 42px) !important;}
.cf-main,.cf-main-inner,.cf-page{max-width:none !important;min-width:0 !important;}
.cf-main-inner{padding-left:0 !important;padding-right:0 !important;}

/* Ultra-premium topbar: a glass/WebGL inspired object, not a plain strip. */
.cf-topnav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:auto !important;
  z-index:1000 !important;
  padding:14px 0 0 !important;
  pointer-events:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.cf-topnav-inner{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:var(--cf-nav-h-v150) !important;
  padding:10px clamp(14px, 1.35vw, 22px) !important;
  border-radius:30px !important;
  pointer-events:auto !important;
  border:1px solid rgba(105,205,255,.30) !important;
  background:
    radial-gradient(540px 180px at var(--cf-nav-x, 50%) var(--cf-nav-y, 50%), rgba(18,233,255,.18), transparent 64%),
    radial-gradient(460px 210px at 86% 10%, rgba(255,61,132,.12), transparent 64%),
    linear-gradient(135deg, rgba(7,18,37,.86), rgba(10,28,51,.76) 48%, rgba(20,16,54,.78)) !important;
  box-shadow:
    0 28px 84px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 1px 0 rgba(255,255,255,.13) inset !important;
  backdrop-filter: blur(24px) saturate(1.48) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.48) !important;
}
.cf-topnav-inner::before,
.cf-topnav-inner::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;}
.cf-topnav-inner::before{
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(255,255,255,.11) 38%, transparent 58% 100%),
    linear-gradient(90deg, rgba(18,233,255,.35), rgba(255,61,132,.26), rgba(255,119,47,.22), rgba(18,233,255,.30));
  opacity:.34;
  transform:translateX(var(--cf-nav-shift, 0));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  padding:1px;
}
.cf-topnav-inner::after{
  inset:-70% -20%;
  background:conic-gradient(from 90deg, transparent, rgba(18,233,255,.16), transparent, rgba(255,61,132,.12), transparent);
  opacity:.30;
  animation:cfTopnavOrbitV150 12s linear infinite;
}
@keyframes cfTopnavOrbitV150{to{transform:rotate(360deg)}}
.cf-topnav-inner > *{position:relative;z-index:1;}
.cf-brand-wordmark{height:50px !important;max-width:330px !important;object-fit:contain !important;}
.cf-topnav-center{flex:1 1 auto !important;justify-content:center !important;gap:12px !important;min-width:220px !important;}
.cf-topnav-right{gap:10px !important;}
.cf-userchip{min-width:clamp(300px, 28vw, 420px) !important;}
.cf-mini-stat,.cf-icon-button,.cf-userchip{
  border-radius:999px !important;
  backdrop-filter:blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35) !important;
}
.cf-user-menu{top:calc(var(--cf-nav-h-v150) + 26px) !important;}

/* Generic readability and surface normalization used by every app page. */
.cf-page,
.cf-page *{text-rendering:geometricPrecision;}
.cf-page :where(h1,h2,h3,h4,h5,h6,.ds-title,.cf-h1,.cf-title,.w-title,.wd-title,.wh-title,.vb-title,.v76-hero h1,.db-card-title,.db-pending-title,.game-title){letter-spacing:-.035em;}
.cf-page :where(.card,.glass-card,.card-premium,.cf-card,.glass-panel,.panel,.widget,.db-kpi,.db-pending,.db-payout,.db-chart-wrap,.mission,.ref-link,.ref-stat,.w-card,.wd-form-card,.wd-elite-card,.wh-table-card,.ptc-card,.ptc-tab-shell,.ptc-empty,.vb-hero-inner,.vb-side-card,.vb-plan,.vb-psych-card,.v76-side-card,.v76-table,.lb-podium>div,.cf-claim-status,.cf-metric,.cf-info,.wheel,.wheel-center){
  border-radius:var(--cf-radius-lg-v150) !important;
}
.cf-page :where(input,select,textarea){font-weight:700;}
.cf-page :where(table){border-collapse:collapse;}
.cf-page :where(th){font-weight:950;letter-spacing:.12em;text-transform:uppercase;}
.cf-page :where(td){font-weight:800;}

/* DARK MODE */
html[data-theme="dark"] body,
html:not([data-theme]) body{
  color:#f5f9ff !important;
  background:
    radial-gradient(1160px 760px at 7% 18%, rgba(18,233,255,.16), transparent 58%),
    radial-gradient(1000px 720px at 93% 12%, rgba(139,108,255,.18), transparent 56%),
    radial-gradient(860px 620px at 70% 96%, rgba(255,119,47,.12), transparent 58%),
    linear-gradient(180deg,#030714 0%,#071120 48%,#040715 100%) !important;
}
html[data-theme="dark"] .cf-page :where(h1,h2,h3,h4,h5,h6,.ds-title,.cf-h1,.cf-card-title,.db-card-title,.w-title,.wd-hero h2,.wh-hero h1,.vb-title,.v76-side-title,.v76-hero h1),
html:not([data-theme]) .cf-page :where(h1,h2,h3,h4,h5,h6,.ds-title,.cf-h1,.cf-card-title,.db-card-title,.w-title,.wd-hero h2,.wh-hero h1,.vb-title,.v76-side-title,.v76-hero h1){color:#f8fbff !important;}
html[data-theme="dark"] .cf-page :where(p,.ds-muted,.cf-sub,.db-sub,.db-card-sub,.db-pending-sub,.wd-muted,.wd-subtitle,.w-sub,.game-sub,.cf-card-sub,.vb-sub,.vb-note,.v76-side-copy,.v76-note span,.v76-flow-step span),
html:not([data-theme]) .cf-page :where(p,.ds-muted,.cf-sub,.db-sub,.db-card-sub,.db-pending-sub,.wd-muted,.wd-subtitle,.w-sub,.game-sub,.cf-card-sub,.vb-sub,.vb-note,.v76-side-copy,.v76-note span,.v76-flow-step span){color:rgba(222,235,255,.77) !important;}

/* LIGHT MODE — high contrast, no washed-out text. */
html[data-theme="light"] body{
  color:var(--cf-light-ink-v150) !important;
  background:
    radial-gradient(1200px 780px at 7% 18%, rgba(18,233,255,.14), transparent 56%),
    radial-gradient(1040px 760px at 92% 14%, rgba(139,108,255,.16), transparent 54%),
    radial-gradient(820px 620px at 68% 96%, rgba(255,119,47,.11), transparent 56%),
    linear-gradient(180deg,#edf5ff 0%,#fbfdff 44%,#eef4ff 100%) !important;
}
html[data-theme="light"] body::before{opacity:.20 !important;mask-image:none !important;}
html[data-theme="light"] #cf-netflow{opacity:.16 !important;filter:saturate(1.18) brightness(1.20) contrast(.96) !important;}
html[data-theme="light"] #cf-vignette{opacity:.06 !important;}
html[data-theme="light"] .cf-topnav-inner{
  border-color:rgba(68,102,173,.18) !important;
  background:
    radial-gradient(520px 180px at var(--cf-nav-x, 50%) var(--cf-nav-y, 50%), rgba(18,185,220,.13), transparent 64%),
    radial-gradient(460px 210px at 86% 10%, rgba(255,61,132,.08), transparent 64%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(248,251,255,.84) 50%, rgba(240,246,255,.88)) !important;
  box-shadow:0 24px 72px rgba(63,91,150,.13),0 0 0 1px rgba(255,255,255,.62) inset,0 1px 0 rgba(255,255,255,.90) inset !important;
}
html[data-theme="light"] .cf-topnav-inner::before{opacity:.28;}
html[data-theme="light"] .cf-topnav-inner::after{opacity:.18;}
html[data-theme="light"] .cf-mini-stat,
html[data-theme="light"] .cf-icon-button,
html[data-theme="light"] .cf-userchip{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(65,93,158,.16) !important;
  box-shadow:0 10px 30px rgba(65,93,158,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-theme="light"] .cf-brand-wordmark{filter:drop-shadow(0 10px 20px rgba(45,86,170,.14)) !important;}
html[data-theme="light"] .cf-mini-stat-label,
html[data-theme="light"] .cf-userchip-sub,
html[data-theme="light"] .cf-userchip-balance-label{color:rgba(24,42,74,.62) !important;}
html[data-theme="light"] .cf-mini-stat-value,
html[data-theme="light"] .cf-userchip-name,
html[data-theme="light"] .cf-userchip-balance-value{color:#10203a !important;}

html[data-theme="light"] .cf-page,
html[data-theme="light"] .cf-page :where(h1,h2,h3,h4,h5,h6,.ds-title,.cf-h1,.cf-title,.cf-card-title,.db-card-title,.db-pending-title,.db-chart-title,.game-title,.w-title,.wd-hero h2,.wh-hero h1,.vb-title,.vb-side-title,.vb-plan-name,.vb-section-head h2,.v76-hero h1,.v76-side-title,.wheel-center-title,.cf-metric-v,.db-kpi-value,.db-ach-stat-v,.v76-metric-value,.cf-card-v,.db-ach-empty-title){color:#10203a !important;}
html[data-theme="light"] .cf-page :where(p,.ds-muted,.cf-sub,.cf-card-sub,.db-sub,.db-card-sub,.db-pending-sub,.db-chart-meta,.db-kpi-sub,.db-ach-sub,.db-ach-empty-copy,.wd-muted,.wd-subtitle,.w-sub,.game-sub,.cf-info-body,.vb-sub,.vb-note,.vb-proof-text,.vb-plan-desc,.v76-side-copy,.v76-note span,.v76-flow-step span,.cf-metric-s,.cf-status-tip .ds-muted,.wheel-center-sub,.cf-help,.ref-hint,.db-mission-desc,.db-pending-empty){color:var(--cf-light-muted-v150) !important;}
html[data-theme="light"] .cf-page :where(.ds-kicker,.cf-kicker,.cf-eyebrow,.cf-card-k,.db-kpi-label,.db-ach-stat-k,.v76-side-kicker,.v76-metric-label,.wd-stat-label,.w-kicker,.vb-kicker,.cf-metric-k){color:#2278de !important;}

html[data-theme="light"] .cf-page :where(.glass-card,.card,.card-premium,.cf-card,.panel,.widget,.w-hero,.w-card,.wd-hero,.wd-elite-card,.wd-form-card,.wh-hero,.wh-table-card,.cf-claim-hero,.ptc-tab-shell,.ptc-card,.ptc-empty,.sl-hero,.sl-list,.cf-legal,.v76-hero,.v76-table,.lb-podium>div,.v76-side-card,.vb-hero-inner,.vb-side-card,.vb-plan,.vb-psych-card,.cf-hero,.wheel,.wheel-center){
  color:#10203a !important;
  background:
    radial-gradient(920px 380px at 10% 0%, rgba(18,185,220,.08), transparent 62%),
    radial-gradient(840px 340px at 100% 8%, rgba(255,61,132,.06), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(247,250,255,.90)) !important;
  border-color:rgba(72,98,156,.15) !important;
  box-shadow:0 24px 70px rgba(64,91,146,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(20px) saturate(1.25) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.25) !important;
}
html[data-theme="light"] .cf-page :where(.db-kpi,.db-pending,.db-payout,.db-chart-wrap,.db-side-by-side>*,.mission,.ref-link,.ref-stat,.db-mission,.db-ach,.db-ach-stat,.cf-metric,.cf-status-tip,.cf-claim-status,.glass-panel,.cf-info,.wheel-legend .lg,.v76-metric,.v76-flow-step,.v76-note,.vb-proof-card,.vb-pill,.cf-range-pill,.badge-soft,.chip,.badge,.pill,.ds-pill){
  color:#10203a !important;
  background:linear-gradient(145deg, rgba(255,255,255,.90), rgba(248,251,255,.82)) !important;
  border-color:rgba(72,98,156,.15) !important;
  box-shadow:0 14px 38px rgba(64,91,146,.08) !important;
}
html[data-theme="light"] .cf-page :where(input,select,textarea){
  background:rgba(255,255,255,.94) !important;
  color:#0f1b2d !important;
  border-color:rgba(72,98,156,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86), 0 10px 24px rgba(64,91,146,.06) !important;
}
html[data-theme="light"] .cf-page :where(label,.cf-field label){color:#172848 !important;}
html[data-theme="light"] .cf-page :where(th){color:#2b70d6 !important;background:rgba(37,82,192,.055) !important;}
html[data-theme="light"] .cf-page :where(td){color:#14233c !important;border-color:rgba(79,104,160,.12) !important;}
html[data-theme="light"] .cf-page :where(.earn,.w-amt,.wd-stat-value,.db-kpi:first-child .db-kpi-value){color:#078ea5 !important;}
html[data-theme="light"] .cf-page :where(.rank){color:#fff !important;}
html[data-theme="light"] .cf-page :where(.btn,.cf-btn,.ptc-btn,.w-btn,.auth-btn,.vb-btn,.vb-plan-btn,button:not(.cf-userchip):not(.cf-icon-button)){
  color:#16315b !important;
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(72,98,156,.16) !important;
  box-shadow:0 12px 24px rgba(64,91,146,.08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
html[data-theme="light"] .cf-page :where(.btn.primary,.cf-btn--primary,.ptc-btn,.w-btn--primary,.auth-btn.primary,.db-cta,.wd-form button[type="submit"],.vb-btn--primary,.vb-plan-btn--primary,.cf-claim-submit){
  color:#061020 !important;
  background:linear-gradient(135deg,#ff7a2e 0%,#ff4d88 42%,#14eaff 100%) !important;
  border-color:transparent !important;
  box-shadow:0 16px 42px rgba(14,174,194,.16),0 12px 32px rgba(255,122,46,.12) !important;
}
html[data-theme="light"] .wheel-label{background:rgba(255,255,255,.74) !important;color:#153158 !important;border-color:rgba(72,98,156,.16) !important;}
html[data-theme="light"] .wheel-pointer{border-bottom-color:#344765 !important;}
html[data-theme="light"] .cf-user-menu,
html[data-theme="light"] .cf-mobile-menu,
html[data-theme="light"] .cf-modal-host [role="dialog"]{background:rgba(255,255,255,.94) !important;color:#10203a !important;border-color:rgba(72,98,156,.15) !important;}
html[data-theme="light"] .cf-user-menu *{color:inherit;}
html[data-theme="light"] .cf-user-menu-item-sub,
html[data-theme="light"] .cf-user-menu-title{color:rgba(24,42,74,.62) !important;}

/* ULTRA DARK MODE — deeper black while keeping text readable. */
html[data-theme="ultra"] body{
  color:#f7fbff !important;
  background:
    radial-gradient(1200px 780px at 7% 18%, rgba(18,233,255,.12), transparent 54%),
    radial-gradient(980px 740px at 92% 12%, rgba(139,108,255,.14), transparent 52%),
    radial-gradient(820px 620px at 68% 95%, rgba(255,119,47,.10), transparent 56%),
    linear-gradient(180deg,#010207 0%,#04070e 45%,#010207 100%) !important;
}
html[data-theme="ultra"] body::before{opacity:.44 !important;}
html[data-theme="ultra"] #cf-netflow{opacity:.50 !important;filter:saturate(1.35) contrast(1.1) !important;}
html[data-theme="ultra"] .cf-topnav-inner{
  border-color:rgba(85,175,255,.18) !important;
  background:
    radial-gradient(540px 180px at var(--cf-nav-x, 50%) var(--cf-nav-y, 50%), rgba(18,233,255,.14), transparent 64%),
    radial-gradient(460px 210px at 86% 10%, rgba(255,61,132,.10), transparent 64%),
    linear-gradient(135deg, rgba(2,7,14,.94), rgba(4,10,21,.91) 48%, rgba(8,9,20,.92)) !important;
  box-shadow:0 30px 88px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.04) inset,0 1px 0 rgba(255,255,255,.07) inset !important;
}
html[data-theme="ultra"] .cf-page :where(.glass-card,.card,.card-premium,.cf-card,.panel,.widget,.w-hero,.w-card,.wd-hero,.wd-elite-card,.wd-form-card,.wh-hero,.wh-table-card,.cf-claim-hero,.ptc-tab-shell,.ptc-card,.ptc-empty,.sl-hero,.sl-list,.cf-legal,.v76-hero,.v76-table,.lb-podium>div,.v76-side-card,.vb-hero-inner,.vb-side-card,.vb-plan,.vb-psych-card,.cf-hero,.wheel,.wheel-center){
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(18,233,255,.10), transparent 62%),
    radial-gradient(820px 340px at 100% 8%, rgba(255,61,132,.06), transparent 58%),
    linear-gradient(145deg, rgba(3,8,16,.95), rgba(5,10,20,.91)) !important;
  border-color:rgba(85,145,255,.14) !important;
  box-shadow:0 30px 88px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html[data-theme="ultra"] .cf-page :where(h1,h2,h3,h4,h5,h6,.ds-title,.cf-h1,.cf-card-title,.db-card-title,.w-title,.wd-hero h2,.wh-hero h1,.vb-title,.v76-side-title,.v76-hero h1){color:#fbfdff !important;}
html[data-theme="ultra"] .cf-page :where(p,.ds-muted,.cf-sub,.db-sub,.db-card-sub,.db-pending-sub,.wd-muted,.wd-subtitle,.w-sub,.game-sub,.cf-card-sub,.vb-sub,.vb-note,.v76-side-copy,.v76-note span,.v76-flow-step span){color:rgba(226,239,255,.76) !important;}
html[data-theme="ultra"] .cf-page :where(.db-kpi,.db-pending,.db-payout,.db-chart-wrap,.db-side-by-side>*,.mission,.ref-link,.ref-stat,.db-mission,.db-ach,.db-ach-stat,.cf-metric,.cf-status-tip,.cf-claim-status,.glass-panel,.cf-info,.wheel-legend .lg,.v76-metric,.v76-flow-step,.vb-proof-card,.cf-range-pill,.badge-soft,.chip,.badge,.pill,.ds-pill){
  background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.022)) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.34) !important;
}
html[data-theme="ultra"] .cf-mini-stat,
html[data-theme="ultra"] .cf-icon-button,
html[data-theme="ultra"] .cf-userchip{background:rgba(255,255,255,.045) !important;border-color:rgba(255,255,255,.10) !important;}

/* Responsive topbar cleanup */
@media(max-width:1100px){
  .cf-topnav-inner{min-height:auto !important;border-radius:24px !important;}
  .cf-topnav-center{display:none !important;}
  .cf-userchip{min-width:0 !important;max-width:52vw !important;}
  .cf-userchip-main{display:none !important;}
  .cf-userchip-balance{border-left:0 !important;padding-left:0 !important;}
}
@media(max-width:720px){
  :root{--cf-shell-pad-v150:14px;--cf-nav-h-v150:70px;}
  .cf-topnav{padding-top:10px !important;}
  .cf-topnav-inner{border-radius:22px !important;padding:8px 10px !important;}
  .cf-brand-wordmark{height:40px !important;max-width:190px !important;}
  .cf-userchip-balance{display:none !important;}
  .cf-page-grid{padding-top:calc(var(--cf-nav-h-v150) + 34px) !important;}
}
@media (prefers-reduced-motion: reduce){.cf-topnav-inner::after{animation:none !important;}}


/* CryptoFaucet V152 Topbar / User Menu / Static Background Refinement
   Keeps the WebGL-glass topbar, makes it match the page canvas, and prevents the dropdown from being clipped. */
:root{
  --cf-shell-max-v150: 1500px;
  --cf-shell-pad-v150: clamp(22px, 7.4vw, 124px);
  --cf-nav-h-v150: 88px;
}

.cf-page-grid,
.cf-topnav-inner,
.cf-main-inner,
.cf-page > .db-wrap,
.cf-page > .wd-page,
.cf-page > .w-stage,
.cf-page > .wh-page,
.cf-page > .v76-board,
.cf-page > .ds-page,
.cf-page > .cfx-home,
.cf-page > .cf-legal,
.cf-page > .vb,
.cf-page > .cf-page,
.cf-page > .ptc-page,
.cf-page > .owm-page,
.cf-page > .portal-page{
  width:min(var(--cf-shell-max-v150), calc(100vw - var(--cf-shell-pad-v150) * 2)) !important;
  max-width:var(--cf-shell-max-v150) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.cf-page-grid{padding-top:calc(var(--cf-nav-h-v150) + 48px) !important;}
.cf-topnav{z-index:10000 !important;padding-top:18px !important;}
.cf-topnav-inner{
  min-height:var(--cf-nav-h-v150) !important;
  overflow:visible !important;
  isolation:auto !important;
  border-radius:34px !important;
  padding:12px clamp(18px, 1.55vw, 26px) !important;
  gap:clamp(14px, 1.6vw, 24px) !important;
  background:
    radial-gradient(680px 210px at var(--cf-nav-x, 50%) var(--cf-nav-y, 50%), rgba(18,233,255,.20), transparent 65%),
    radial-gradient(580px 230px at 84% 4%, rgba(255,61,132,.13), transparent 66%),
    radial-gradient(420px 180px at 16% 92%, rgba(255,119,47,.10), transparent 62%),
    linear-gradient(135deg, rgba(7,18,37,.88), rgba(10,28,51,.78) 46%, rgba(20,16,54,.80)) !important;
  box-shadow:
    0 30px 92px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 1px 0 rgba(255,255,255,.15) inset !important;
}
.cf-topnav-inner::before,
.cf-topnav-inner::after{
  border-radius:inherit !important;
  pointer-events:none !important;
  z-index:0 !important;
  overflow:hidden !important;
}
.cf-topnav-inner > *{position:relative !important;z-index:2 !important;}
.cf-topnav-left{min-width:clamp(260px, 25vw, 390px) !important;}
.cf-brand-wordmark{height:54px !important;max-width:360px !important;}
.cf-topnav-center{min-width:240px !important;}
.cf-mini-stat{padding:11px 18px !important;}
.cf-topnav-right{min-width:clamp(390px, 34vw, 560px) !important;}
.cf-userchip{
  min-width:clamp(390px, 31vw, 500px) !important;
  padding:9px 14px !important;
}
.cf-userchip-avatar{width:48px !important;height:48px !important;border-radius:18px !important;}
.cf-userchip-name{font-size:14px !important;}
.cf-userchip-sub{max-width:210px !important;}
.cf-userchip-balance-value{font-size:15px !important;}

/* The V150 issue was caused by the menu living inside a nav object with hidden overflow.
   In V151 the dropdown is a viewport-level glass panel, so it cannot be clipped. */
.cf-user-menu{
  position:fixed !important;
  top:calc(18px + var(--cf-nav-h-v150) + 18px) !important;
  right:max(22px, calc((100vw - min(var(--cf-shell-max-v150), calc(100vw - var(--cf-shell-pad-v150) * 2))) / 2)) !important;
  width:clamp(390px, 31vw, 520px) !important;
  max-height:calc(100vh - var(--cf-nav-h-v150) - 58px) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  border-radius:28px !important;
  padding:16px !important;
  z-index:10020 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(0,-10px,0) scale(.985) !important;
  transform-origin:top right !important;
  border:1px solid rgba(105,205,255,.28) !important;
  background:
    radial-gradient(580px 240px at 12% 0%, rgba(18,233,255,.16), transparent 62%),
    radial-gradient(500px 220px at 100% 16%, rgba(255,61,132,.12), transparent 62%),
    linear-gradient(145deg, rgba(7,16,32,.94), rgba(11,19,42,.91)) !important;
  box-shadow:0 32px 92px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(26px) saturate(1.50) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.50) !important;
  transition:opacity .18s ease, visibility .18s ease, transform .22s cubic-bezier(.2,.8,.2,1) !important;
}
.cf-user-menu[data-open="true"],
.cf-user-menu.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate3d(0,0,0) scale(1) !important;
}
.cf-user-menu::-webkit-scrollbar{width:8px;}
.cf-user-menu::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(180deg, rgba(18,233,255,.45), rgba(255,61,132,.35));}
.cf-user-menu-scrim{
  position:fixed !important;
  inset:0 !important;
  z-index:10010 !important;
  background:transparent !important;
}
.cf-user-menu-scrim[hidden]{display:none !important;}
.cf-um-head,
.cf-user-menu-header{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:14px !important;
  align-items:center !important;
  padding:14px !important;
  border-radius:22px !important;
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.cf-um-balancecard{grid-column:1 / -1 !important;margin-top:2px !important;}
.cf-um-quick{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;margin:12px 0 !important;}
.cf-user-menu-item,
.cf-um-quick-btn{
  border-radius:18px !important;
  padding:12px 14px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.09) !important;
}
.cf-user-menu-item:hover,
.cf-um-quick-btn:hover{background:rgba(18,233,255,.09) !important;border-color:rgba(18,233,255,.22) !important;}

html[data-theme="light"] .cf-user-menu{
  color:#10203a !important;
  border-color:rgba(72,98,156,.18) !important;
  background:
    radial-gradient(580px 240px at 12% 0%, rgba(18,185,220,.12), transparent 62%),
    radial-gradient(500px 220px at 100% 16%, rgba(255,61,132,.08), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,250,255,.92)) !important;
  box-shadow:0 28px 80px rgba(65,91,146,.16), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-theme="light"] .cf-user-menu *{color:inherit;}
html[data-theme="light"] .cf-user-menu-item,
html[data-theme="light"] .cf-um-quick-btn,
html[data-theme="light"] .cf-um-head,
html[data-theme="light"] .cf-user-menu-header{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(72,98,156,.14) !important;
}
html[data-theme="light"] .cf-user-menu-title,
html[data-theme="light"] .cf-user-menu-item-sub,
html[data-theme="light"] .cf-um-mail,
html[data-theme="light"] .cf-um-balancecard-label{color:rgba(24,42,74,.62) !important;}

html[data-theme="ultra"] .cf-user-menu{
  border-color:rgba(85,175,255,.18) !important;
  background:
    radial-gradient(580px 240px at 12% 0%, rgba(18,233,255,.13), transparent 62%),
    radial-gradient(500px 220px at 100% 16%, rgba(255,61,132,.08), transparent 62%),
    linear-gradient(145deg, rgba(2,7,14,.97), rgba(5,10,20,.94)) !important;
  box-shadow:0 34px 96px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

@media (max-width:1180px){
  :root{--cf-shell-pad-v150:clamp(18px, 4vw, 42px);}
  .cf-topnav-left{min-width:0 !important;}
  .cf-topnav-center{display:none !important;}
  .cf-topnav-right{min-width:0 !important;}
  .cf-userchip{min-width:clamp(300px, 52vw, 430px) !important;}
}
@media (max-width:760px){
  :root{--cf-nav-h-v150:74px;--cf-shell-pad-v150:12px;}
  .cf-topnav{padding-top:10px !important;}
  .cf-topnav-inner{border-radius:24px !important;padding:8px 10px !important;gap:8px !important;}
  .cf-brand-wordmark{height:42px !important;max-width:210px !important;}
  .cf-userchip{min-width:0 !important;max-width:56vw !important;padding:7px 9px !important;}
  .cf-userchip-main,.cf-userchip-balance{display:none !important;}
  .cf-userchip-avatar{width:42px !important;height:42px !important;}
  .cf-user-menu{top:92px !important;right:12px !important;left:12px !important;width:auto !important;max-height:calc(100vh - 110px) !important;}
}


/* ===== CryptoFaucet V152 final refinement =====
   - Topbar is in the normal page flow, so it no longer covers page content.
   - Rotating / spilling nav animation is removed.
   - Buttons and claim CTA use a calmer premium pill system.
   - The animated netflow canvas is disabled; the site keeps a static luxury background. */
:root{
  --cf-shell-max-v150: 1500px;
  --cf-shell-pad-v150: clamp(18px, 7.2vw, 122px);
  --cf-nav-h-v150: 78px;
  --cf-btn-radius-v152: 18px;
}

/* Remove the moving page background canvas requested by the user. */
#cf-netflow{display:none !important;visibility:hidden !important;opacity:0 !important;}
#cf-vignette{opacity:.42 !important;}
html[data-theme="light"] #cf-vignette{opacity:.08 !important;}
html[data-theme="ultra"] #cf-vignette{opacity:.54 !important;}

/* Topbar: normal flow + same canvas width, no overlap. */
.cf-topnav{
  position:sticky !important;
  top:0 !important;
  z-index:10000 !important;
  padding:16px 0 12px !important;
  margin:0 !important;
  height:auto !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(3,7,16,.76), rgba(3,7,16,0)) !important;
  border:0 !important;
  box-shadow:none !important;
}
html[data-theme="light"] .cf-topnav{background:linear-gradient(180deg, rgba(237,245,255,.84), rgba(237,245,255,0)) !important;}
html[data-theme="ultra"] .cf-topnav{background:linear-gradient(180deg, rgba(1,2,7,.86), rgba(1,2,7,0)) !important;}
.cf-page-grid{
  padding-top:18px !important;
}
.cf-topnav-inner{
  min-height:78px !important;
  height:auto !important;
  overflow:visible !important;
  isolation:isolate !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:clamp(12px,1.45vw,22px) !important;
  border-radius:30px !important;
  padding:10px clamp(16px,1.5vw,24px) !important;
  transform:none !important;
}
/* Kill the old spinning conic layer and keep only a contained glass sheen. */
.cf-topnav-inner::after{display:none !important;animation:none !important;content:none !important;}
.cf-topnav-inner::before{
  inset:0 !important;
  border-radius:inherit !important;
  opacity:.22 !important;
  transform:none !important;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(255,255,255,.10) 42%, transparent 62% 100%),
    linear-gradient(90deg, rgba(18,233,255,.24), rgba(255,61,132,.16), rgba(255,119,47,.12), rgba(18,233,255,.20)) !important;
  mask:none !important;
  -webkit-mask:none !important;
  padding:0 !important;
}
.cf-topnav-inner > *{position:relative !important;z-index:2 !important;}
.cf-topnav-left{flex:0 0 auto !important;min-width:clamp(250px,23vw,360px) !important;display:flex !important;align-items:center !important;gap:12px !important;}
.cf-brand-wordmark{height:48px !important;max-width:320px !important;}
.cf-topnav-center{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:10px !important;min-width:0 !important;flex:1 1 auto !important;}
.cf-topnav-right{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:10px !important;min-width:clamp(350px,33vw,520px) !important;flex:0 1 auto !important;}
.cf-mini-stat{
  height:42px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  border-radius:999px !important;
}
.cf-mini-stat-label{font-size:11px !important;letter-spacing:.15em !important;white-space:nowrap !important;}
.cf-mini-stat-value{font-size:13px !important;white-space:nowrap !important;}
.cf-icon-button{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:15px !important;
}
.cf-userchip{
  min-width:clamp(345px,29vw,460px) !important;
  height:54px !important;
  padding:7px 12px !important;
  border-radius:24px !important;
}
.cf-userchip-avatar{width:44px !important;height:44px !important;border-radius:16px !important;}
.cf-userchip-main{min-width:0 !important;}
.cf-userchip-name{font-size:13px !important;line-height:1.1 !important;}
.cf-userchip-sub{font-size:11px !important;max-width:190px !important;}
.cf-userchip-balance{padding-left:12px !important;}
.cf-userchip-balance-label{font-size:10px !important;letter-spacing:.18em !important;}
.cf-userchip-balance-value{font-size:14px !important;}

/* User menu remains viewport-level and functional. */
.cf-user-menu{top:calc(16px + 78px + 12px) !important;}

/* Premium button system: less bulky, more polished. */
.cf-page :where(.btn,.cf-btn,.ptc-btn,.w-btn,.auth-btn,.vb-btn,.vb-plan-btn,button:not(.cf-icon-button):not(.cf-userchip):not(.cf-topnav-burger):not(#cfThemeToggle)){
  min-height:42px !important;
  border-radius:var(--cf-btn-radius-v152) !important;
  padding:11px 17px !important;
  line-height:1.1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  border:1px solid rgba(172,214,255,.16) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.040)) !important;
  color:#f6fbff !important;
  box-shadow:0 12px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.cf-page :where(.btn,.cf-btn,.ptc-btn,.w-btn,.auth-btn,.vb-btn,.vb-plan-btn,button:not(.cf-icon-button):not(.cf-userchip):not(.cf-topnav-burger):not(#cfThemeToggle)):hover){
  transform:translateY(-1px) !important;
  border-color:rgba(18,233,255,.28) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.20), 0 0 24px rgba(18,233,255,.08), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.cf-page :where(.btn.primary,.btn-primary,.cf-btn--primary,.ptc-btn,.w-btn--primary,.auth-btn.primary,.db-cta,.vb-btn--primary,.vb-plan-btn--primary,.wd-form button[type="submit"]){
  color:#061020 !important;
  border-color:rgba(255,255,255,.18) !important;
  background:linear-gradient(135deg,#48cfff 0%, #7b7cff 46%, #ff4d97 100%) !important;
  box-shadow:0 14px 34px rgba(72,207,255,.16),0 10px 28px rgba(255,77,151,.13), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.cf-page :where(.btn.small,.cf-btn.small,.ptc-btn.small,.w-btn.small){
  min-height:38px !important;
  padding:9px 14px !important;
  border-radius:15px !important;
  font-size:13px !important;
}
html[data-theme="light"] .cf-page :where(.btn,.cf-btn,.ptc-btn,.w-btn,.auth-btn,.vb-btn,.vb-plan-btn,button:not(.cf-icon-button):not(.cf-userchip):not(.cf-topnav-burger):not(#cfThemeToggle)){
  color:#16315b !important;
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(246,250,255,.84)) !important;
  border-color:rgba(72,98,156,.16) !important;
  box-shadow:0 12px 28px rgba(65,91,146,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-theme="light"] .cf-page :where(.btn.primary,.btn-primary,.cf-btn--primary,.ptc-btn,.w-btn--primary,.auth-btn.primary,.db-cta,.vb-btn--primary,.vb-plan-btn--primary,.wd-form button[type="submit"]){
  color:#061020 !important;
  background:linear-gradient(135deg,#42c7ff 0%, #7878ff 46%, #ff5799 100%) !important;
  border-color:rgba(255,255,255,.54) !important;
}

/* Claim page: the CTA should never stretch across the whole column. */
#claimForm.cf-claim-form{align-items:flex-start !important;}
#claimBtn.cf-claim-submit,
.cf-page #claimBtn.cf-claim-submit,
.cf-page .cf-claim-submit{
  width:auto !important;
  min-width:178px !important;
  max-width:235px !important;
  flex:0 0 auto !important;
  align-self:flex-start !important;
  display:inline-flex !important;
  min-height:44px !important;
  padding:13px 22px !important;
  border-radius:17px !important;
  font-size:14px !important;
  letter-spacing:.01em !important;
  box-shadow:0 14px 34px rgba(72,207,255,.16),0 10px 26px rgba(255,77,151,.12) !important;
}
#claimBtn.cf-claim-submit.btn-glow::before{border-radius:19px !important;inset:-1px !important;opacity:.35 !important;}

/* Keep content safely below sticky topbar across all pages. */
.cf-page-shell{margin-top:0 !important;}
.cf-main-inner{padding-top:0 !important;}
.cf-flash-stack{margin-top:0 !important;}

@media(max-width:1180px){
  .cf-topnav-left{min-width:0 !important;}
  .cf-topnav-center{display:none !important;}
  .cf-topnav-right{min-width:0 !important;}
  .cf-userchip{min-width:clamp(260px,52vw,410px) !important;}
}
@media(max-width:760px){
  :root{--cf-shell-pad-v150:12px;--cf-nav-h-v150:66px;}
  .cf-topnav{padding:10px 0 8px !important;}
  .cf-topnav-inner{min-height:66px !important;border-radius:22px !important;padding:8px 10px !important;}
  .cf-brand-wordmark{height:40px !important;max-width:190px !important;}
  .cf-userchip{height:46px !important;min-width:0 !important;max-width:56vw !important;padding:7px 9px !important;}
  .cf-userchip-main,.cf-userchip-balance{display:none !important;}
  .cf-userchip-avatar{width:38px !important;height:38px !important;border-radius:14px !important;}
  .cf-page-grid{padding-top:14px !important;}
  .cf-user-menu{top:86px !important;right:12px !important;left:12px !important;width:auto !important;max-height:calc(100vh - 104px) !important;}
  #claimBtn.cf-claim-submit{width:100% !important;max-width:220px !important;}
}


/* ===== CryptoFaucet V153: centered topbar + luxury account drawer =====
   Final override layer. Keeps the topbar in normal flow, precisely centered with the main canvas,
   and upgrades the account menu buttons to a polished WebGL/glass style. */
:root{
  --cf-shell-max-v153: 1420px;
  --cf-shell-pad-v153: clamp(24px, 8vw, 132px);
  --cf-topbar-h-v153: 92px;
  --cf-menu-right-v153: max(24px, calc((100vw - var(--cf-shell-max-v153)) / 2 + 10px));
  --cf-menu-top-v153: 116px;
}

/* Keep the same visual canvas across the topbar and page body. */
.cf-page-grid,
.cf-main-inner,
.cf-page > .db-wrap,
.cf-page > .wd-page,
.cf-page > .w-stage,
.cf-page > .wh-page,
.cf-page > .v76-board,
.cf-page > .ds-page,
.cf-page > .cfx-home,
.cf-page > .cf-legal,
.cf-page > .vb,
.cf-page > .cf-page,
.cf-page > .ptc-page,
.cf-page > .owm-page,
.cf-page > .portal-page{
  width:min(var(--cf-shell-max-v153), calc(100vw - var(--cf-shell-pad-v153) * 2)) !important;
  max-width:var(--cf-shell-max-v153) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* The topbar itself: centered, never glued to the left edge. */
.cf-topnav{
  position:sticky !important;
  top:0 !important;
  z-index:100000 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:none !important;
  padding:16px 0 14px !important;
  margin:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(3,7,16,.80), rgba(3,7,16,0)) !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.cf-topnav-inner{
  box-sizing:border-box !important;
  width:min(var(--cf-shell-max-v153), calc(100vw - var(--cf-shell-pad-v153) * 2)) !important;
  max-width:var(--cf-shell-max-v153) !important;
  min-width:0 !important;
  margin:0 auto !important;
  min-height:var(--cf-topbar-h-v153) !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:clamp(14px, 1.25vw, 22px) !important;
  padding:12px clamp(18px, 1.55vw, 28px) !important;
  border-radius:34px !important;
  pointer-events:auto !important;
  overflow:visible !important;
  isolation:isolate !important;
  transform:none !important;
  border:1px solid rgba(99,203,255,.30) !important;
  background:
    radial-gradient(520px 180px at var(--cf-nav-x, 50%) var(--cf-nav-y, 50%), rgba(18,233,255,.17), transparent 66%),
    radial-gradient(560px 220px at 84% 6%, rgba(255,61,132,.12), transparent 68%),
    linear-gradient(135deg, rgba(6,17,35,.90), rgba(9,25,48,.80) 48%, rgba(22,17,56,.82)) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.050) inset,
    0 1px 0 rgba(255,255,255,.13) inset !important;
  backdrop-filter:blur(24px) saturate(1.44) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.44) !important;
}
.cf-topnav-inner::after{display:none !important;content:none !important;animation:none !important;}
.cf-topnav-inner::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  opacity:.24 !important;
  z-index:0 !important;
  background:
    linear-gradient(115deg, transparent 0 24%, rgba(255,255,255,.12) 43%, transparent 64% 100%),
    linear-gradient(90deg, rgba(18,233,255,.22), rgba(255,61,132,.16), rgba(255,119,47,.11), rgba(18,233,255,.18)) !important;
  mask:none !important;
  -webkit-mask:none !important;
  padding:0 !important;
}
.cf-topnav-inner > *{position:relative !important;z-index:2 !important;}

.cf-topnav-left{
  flex:0 0 clamp(255px, 22vw, 330px) !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.cf-brand-wordmark{height:50px !important;max-width:306px !important;object-fit:contain !important;}
.cf-topnav-center{
  flex:1 1 auto !important;
  min-width:230px !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}
.cf-topnav-right{
  flex:0 1 clamp(455px, 36vw, 565px) !important;
  min-width:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
.cf-mini-stat{
  height:42px !important;
  min-width:auto !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  border-radius:999px !important;
}
.cf-mini-stat-label{font-size:11px !important;letter-spacing:.15em !important;line-height:1 !important;}
.cf-mini-stat-value{font-size:13px !important;line-height:1 !important;}
.cf-icon-button{width:42px !important;height:42px !important;min-width:42px !important;border-radius:16px !important;}
.cf-userchip{
  height:54px !important;
  min-width:0 !important;
  width:clamp(350px, 30vw, 455px) !important;
  max-width:455px !important;
  padding:7px 12px !important;
  border-radius:24px !important;
}
.cf-userchip-avatar{width:44px !important;height:44px !important;border-radius:16px !important;}
.cf-userchip-main{min-width:0 !important;max-width:190px !important;}
.cf-userchip-name{font-size:13px !important;line-height:1.05 !important;}
.cf-userchip-sub{font-size:11px !important;max-width:180px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
.cf-userchip-balance{padding-left:12px !important;min-width:138px !important;}
.cf-userchip-balance-label{font-size:10px !important;letter-spacing:.18em !important;}
.cf-userchip-balance-value{font-size:14px !important;white-space:nowrap !important;}

/* Enough breathing room below the sticky header without causing overlap. */
.cf-page-grid{padding-top:20px !important;}
.cf-page-shell{margin-top:0 !important;}

/* Luxury account menu. Uses JS-provided geometry so it aligns with the topbar right edge. */
.cf-user-menu{
  position:fixed !important;
  top:var(--cf-menu-top-v153) !important;
  right:var(--cf-menu-right-v153) !important;
  left:auto !important;
  width:clamp(410px, 28vw, 500px) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100vh - var(--cf-menu-top-v153) - 18px) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  z-index:100050 !important;
  padding:16px !important;
  border-radius:30px !important;
  border:1px solid rgba(99,203,255,.30) !important;
  background:
    radial-gradient(520px 220px at 14% 0%, rgba(18,233,255,.17), transparent 64%),
    radial-gradient(420px 240px at 100% 12%, rgba(255,61,132,.13), transparent 66%),
    linear-gradient(150deg, rgba(7,17,35,.96), rgba(10,18,40,.93) 54%, rgba(21,15,49,.94)) !important;
  box-shadow:
    0 34px 94px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.055) inset,
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(30px) saturate(1.58) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.58) !important;
}
.cf-user-menu::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.22;
  background:linear-gradient(115deg, transparent 0 26%, rgba(255,255,255,.12) 46%, transparent 68% 100%);
}
.cf-user-menu > *{position:relative;z-index:1;}
.cf-user-menu::-webkit-scrollbar{width:7px;}
.cf-user-menu::-webkit-scrollbar-track{background:transparent;}
.cf-user-menu::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(180deg, rgba(18,233,255,.70), rgba(255,61,132,.55));}

.cf-um-head,
.cf-user-menu-header{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:14px !important;
  align-items:center !important;
  padding:16px !important;
  border-radius:24px !important;
  background:
    radial-gradient(260px 160px at 0% 0%, rgba(18,233,255,.11), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.20) !important;
}
.cf-um-avatar,
.cf-user-menu-avatar{
  width:48px !important;
  height:48px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,#42c7ff 0%, #7b7cff 46%, #ff5799 100%) !important;
  color:#061020 !important;
  font-weight:950 !important;
  box-shadow:0 12px 34px rgba(18,233,255,.18) !important;
}
.cf-um-name,.cf-user-menu-name{font-size:17px !important;font-weight:950 !important;color:#f9fcff !important;line-height:1.1 !important;}
.cf-um-mail,.cf-user-menu-mail{font-size:12px !important;color:rgba(219,236,255,.72) !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.cf-um-balancecard{
  grid-column:1 / -1 !important;
  margin-top:4px !important;
  padding:13px 14px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(5,12,25,.72), rgba(14,21,45,.62)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.cf-um-balancecard-label{font-size:11px !important;letter-spacing:.15em !important;text-transform:uppercase !important;color:#98b5d7 !important;}
.cf-um-balancecard-value{font-size:17px !important;font-weight:950 !important;color:#fff !important;}

.cf-um-quick{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;margin:12px 0 16px !important;}
.cf-um-quick-btn,
.cf-user-menu-item{
  position:relative !important;
  min-height:52px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  padding:12px 14px !important;
  border-radius:20px !important;
  text-decoration:none !important;
  color:#f7fbff !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.105) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 10px 30px rgba(0,0,0,.12) !important;
  overflow:hidden !important;
  transform:translateZ(0) !important;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.cf-user-menu-item::before,
.cf-um-quick-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(220px 90px at 18% 0%, rgba(18,233,255,.18), transparent 65%),
    linear-gradient(90deg, rgba(18,233,255,.12), rgba(255,61,132,.10));
  transition:opacity .16s ease !important;
}
.cf-user-menu-item:hover,
.cf-um-quick-btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(18,233,255,.30) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.20),0 0 32px rgba(18,233,255,.10),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.cf-user-menu-item:hover::before,
.cf-um-quick-btn:hover::before{opacity:1;}
.cf-user-menu-ico,
.cf-um-quick-ico{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:14px !important;
  display:inline-grid !important;
  place-items:center !important;
  background:linear-gradient(135deg, rgba(18,233,255,.16), rgba(255,61,132,.14)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.cf-user-menu-item-main{display:flex !important;align-items:center !important;gap:12px !important;min-width:0 !important;font-weight:950 !important;}
.cf-user-menu-item-sub{margin-left:auto !important;max-width:150px !important;text-align:right !important;color:rgba(219,236,255,.58) !important;font-size:11px !important;line-height:1.25 !important;}
.cf-user-menu-section{padding-top:14px !important;margin-top:14px !important;border-top:1px solid rgba(255,255,255,.10) !important;}
.cf-user-menu-title{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 10px 6px !important;
  color:#9ef4ff !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  font-weight:950 !important;
}
.cf-user-menu-title::after{content:"";height:2px;flex:1;border-radius:999px;background:linear-gradient(90deg,rgba(18,233,255,.55),transparent);}
.cf-user-menu-section--footer .cf-btn{width:100% !important;border-radius:20px !important;}
.cf-user-menu-scrim{position:fixed !important;inset:0 !important;z-index:100040 !important;background:rgba(0,0,0,.10) !important;backdrop-filter:blur(1px) !important;}
.cf-user-menu-scrim[hidden]{display:none !important;}

html[data-theme="light"] .cf-topnav{background:linear-gradient(180deg,rgba(237,245,255,.90),rgba(237,245,255,0)) !important;}
html[data-theme="light"] .cf-topnav-inner{
  background:
    radial-gradient(520px 180px at var(--cf-nav-x, 50%) var(--cf-nav-y, 50%), rgba(18,185,220,.13), transparent 66%),
    radial-gradient(560px 220px at 84% 6%, rgba(255,61,132,.08), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,251,255,.86) 48%, rgba(240,246,255,.89)) !important;
  border-color:rgba(68,102,173,.19) !important;
  box-shadow:0 24px 68px rgba(63,91,150,.13),0 0 0 1px rgba(255,255,255,.65) inset,0 1px 0 rgba(255,255,255,.90) inset !important;
}
html[data-theme="light"] .cf-user-menu{
  color:#10203a !important;
  border-color:rgba(72,98,156,.18) !important;
  background:
    radial-gradient(520px 220px at 14% 0%, rgba(18,185,220,.12), transparent 64%),
    radial-gradient(420px 240px at 100% 12%, rgba(255,61,132,.08), transparent 66%),
    linear-gradient(150deg, rgba(255,255,255,.97), rgba(247,250,255,.94)) !important;
  box-shadow:0 30px 84px rgba(65,91,146,.18),inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-theme="light"] .cf-um-name,
html[data-theme="light"] .cf-user-menu-name,
html[data-theme="light"] .cf-user-menu-item,
html[data-theme="light"] .cf-um-quick-btn{color:#10203a !important;}
html[data-theme="light"] .cf-um-mail,
html[data-theme="light"] .cf-user-menu-mail,
html[data-theme="light"] .cf-user-menu-item-sub,
html[data-theme="light"] .cf-um-balancecard-label{color:rgba(24,42,74,.62) !important;}
html[data-theme="light"] .cf-um-head,
html[data-theme="light"] .cf-user-menu-header,
html[data-theme="light"] .cf-um-quick-btn,
html[data-theme="light"] .cf-user-menu-item,
html[data-theme="light"] .cf-um-balancecard{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(246,250,255,.76)) !important;
  border-color:rgba(72,98,156,.14) !important;
  box-shadow:0 12px 28px rgba(65,91,146,.08),inset 0 1px 0 rgba(255,255,255,.88) !important;
}
html[data-theme="light"] .cf-um-balancecard-value{color:#10203a !important;}
html[data-theme="light"] .cf-user-menu-title{color:#2278de !important;}

html[data-theme="ultra"] .cf-topnav{background:linear-gradient(180deg,rgba(1,2,7,.92),rgba(1,2,7,0)) !important;}
html[data-theme="ultra"] .cf-topnav-inner,
html[data-theme="ultra"] .cf-user-menu{
  background:
    radial-gradient(520px 220px at 14% 0%, rgba(18,233,255,.12), transparent 64%),
    radial-gradient(420px 240px at 100% 12%, rgba(255,61,132,.08), transparent 66%),
    linear-gradient(150deg, rgba(2,7,14,.98), rgba(5,10,20,.95)) !important;
  border-color:rgba(85,175,255,.18) !important;
  box-shadow:0 34px 96px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

@media(max-width:1280px){
  :root{--cf-shell-pad-v153:clamp(18px,4vw,48px);}
  .cf-topnav-left{flex-basis:clamp(220px,25vw,300px) !important;}
  .cf-brand-wordmark{height:44px !important;max-width:250px !important;}
  .cf-topnav-center{display:none !important;}
  .cf-topnav-right{flex:1 1 auto !important;}
  .cf-userchip{width:clamp(310px,42vw,430px) !important;}
}
@media(max-width:760px){
  :root{--cf-shell-pad-v153:12px;--cf-topbar-h-v153:68px;--cf-menu-top-v153:88px;--cf-menu-right-v153:12px;}
  .cf-topnav{padding:10px 0 8px !important;}
  .cf-topnav-inner{width:calc(100vw - 24px) !important;min-height:68px !important;border-radius:23px !important;padding:8px 10px !important;gap:8px !important;}
  .cf-brand-wordmark{height:38px !important;max-width:184px !important;}
  .cf-topnav-left{flex:1 1 auto !important;}
  .cf-topnav-right{flex:0 0 auto !important;gap:7px !important;}
  .cf-topnav-quick{display:none !important;}
  .cf-userchip{width:auto !important;min-width:0 !important;max-width:none !important;height:44px !important;padding:6px 8px !important;}
  .cf-userchip-main,.cf-userchip-balance{display:none !important;}
  .cf-userchip-avatar{width:36px !important;height:36px !important;border-radius:14px !important;}
  .cf-user-menu{top:var(--cf-menu-top-v153) !important;right:12px !important;left:12px !important;width:auto !important;max-width:none !important;max-height:calc(100vh - 104px) !important;border-radius:26px !important;padding:14px !important;}
  .cf-user-menu-item-sub{display:none !important;}
}