/* X Profits: "Liquid Glass" skin. Loaded after the normal styles; remove the <link> to go back to the original look.
   Dark is the default. html[data-theme=light] is Day mode (switch in the header). Brand accent stays gold. */

:root{
  --r:20px;
  --glass-top:rgba(255,255,255,.11); --glass-bot:rgba(255,255,255,.04);
  --glass-line:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.32);
  --glass-shadow:0 14px 38px rgba(0,0,0,.38);
  --panel:rgba(22,24,30,.55); --panel-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.12);
  --blur:blur(22px) saturate(170%);
}
html[data-theme=light]{
  color-scheme:light;
  --ink:#e8ecf4; --steel:#4d5566; --chrome:#12161d; --gold:#8f6a1c;
  --glass-top:rgba(255,255,255,.78); --glass-bot:rgba(255,255,255,.42);
  --glass-line:rgba(255,255,255,.9); --glass-hi:rgba(255,255,255,1);
  --glass-shadow:0 12px 34px rgba(40,56,96,.16);
  --panel:rgba(255,255,255,.6); --panel-2:rgba(20,30,60,.06); --line:rgba(20,30,60,.12);
}

/* ---- backdrop: soft colour blobs so the glass has something to refract ---- */
html{background:#07080b}
html[data-theme=light]{background:#e8ecf4}
body{background:transparent!important;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48vmax 42vmax at 8% 2%,rgba(201,164,92,.30),transparent 62%),
    radial-gradient(52vmax 46vmax at 96% 26%,rgba(70,100,190,.28),transparent 62%),
    radial-gradient(46vmax 40vmax at 30% 104%,rgba(120,80,200,.20),transparent 62%),
    radial-gradient(40vmax 34vmax at 80% 96%,rgba(201,164,92,.16),transparent 62%),
    #07080b}
html[data-theme=light] body::before{
  background:
    radial-gradient(48vmax 42vmax at 8% 2%,rgba(255,196,110,.55),transparent 62%),
    radial-gradient(52vmax 46vmax at 96% 26%,rgba(130,170,255,.50),transparent 62%),
    radial-gradient(46vmax 40vmax at 30% 104%,rgba(190,160,255,.40),transparent 62%),
    radial-gradient(40vmax 34vmax at 80% 96%,rgba(255,210,150,.40),transparent 62%),
    #e8ecf4}

/* ---- glass surfaces ---- */
.card,.plan,.guide,.mkt,.plan-opt,.lrow,.earn article,.stat,.note,.meet,.fp,.open-box,.country-pick select,
.steps li,.edu,.tvbox:not(.news),.player,.addr,.qr,.kycpics a,.opencard,.locked,.founder img.ph,.partner,.ptc{
  background:linear-gradient(160deg,var(--glass-top),var(--glass-bot));
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.05),var(--glass-shadow);
}
.card,.plan,.guide,.mkt,.fp,.open-box,.partner,.meet,.note{border-radius:var(--r)}
.plans{background:transparent;border:0;gap:14px;overflow:visible}
.plans>.plan{border-radius:var(--r);border:1px solid var(--glass-line)}
.plan+.plan{border-inline-start:1px solid var(--glass-line)}
.plan.best,.card.gold,.opencard,.fp{border-color:rgba(201,164,92,.55);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(201,164,92,.18),0 16px 44px rgba(201,164,92,.16),var(--glass-shadow)}
.fp{background:radial-gradient(120% 90% at 50% 0%,rgba(201,164,92,.26),transparent 62%),linear-gradient(160deg,var(--glass-top),var(--glass-bot))}
.tvbox:not(.news){background:#000}
.player{background:#000}
.qr,.qr canvas{background:#fff}
/* inner rows stay flat so glass is not stacked on glass */
.card .item,.card .lrow,.tier .card .plan-opt{box-shadow:none}
.lrow{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel-2);border-radius:14px}
.lrow.on{background:rgba(201,164,92,.16)}
.list .item{border-color:var(--line)}

/* ---- header, page bars, app bar ---- */
.top{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;border-bottom:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 8px 28px rgba(0,0,0,.25)}
html[data-theme=light] .top{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.55))!important;box-shadow:0 8px 28px rgba(40,56,96,.12)}
.pagebar,html:not(.standalone) #appNav:not([hidden]){border-top:0}
.pagebar a,html:not(.standalone) #appNav button{border-radius:99px;border:1px solid transparent}
.pagebar a[aria-current=page],html:not(.standalone) #appNav button[aria-current=page]{
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border-color:rgba(201,164,92,.7);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 4px 14px rgba(201,164,92,.18)}
html.standalone #appNav:not([hidden]){left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));inset-inline:12px;border-radius:30px;border:1px solid var(--glass-line);
  padding:7px 8px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 40px rgba(0,0,0,.45)}
html[data-theme=light].standalone #appNav:not([hidden]){background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,0 14px 40px rgba(40,56,96,.22)}
html.standalone body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
html.standalone #appNav button[aria-current=page]{background:rgba(201,164,92,.16);border-radius:22px}

/* ---- controls ---- */
.btn,.lang,.tab{border-radius:99px;background:linear-gradient(160deg,var(--glass-top),var(--glass-bot));border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-primary{background:linear-gradient(180deg,#fbfcfe,#b9bfc9)!important;color:#0a0b0d;border-color:transparent;
  box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(0,0,0,.35)}
.tab[aria-selected=true]{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.07));border-color:rgba(201,164,92,.7)}
input,select,textarea{border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
html[data-theme=light] input,html[data-theme=light] select,html[data-theme=light] textarea{background:rgba(255,255,255,.7);box-shadow:inset 0 1px 2px rgba(40,56,96,.12)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,92,.25)}
.badge{border-radius:99px;background:rgba(255,255,255,.06)}
.avatar{box-shadow:0 0 0 2px var(--glass-line)}
img.ph,.meet-ph img,.posters img,.certs img{border-radius:var(--r)}
.hero-art img{filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
/* the chrome logo is silver, so in Day mode it sits on a dark glass tile to stay visible */
html[data-theme=light] .hero-art{background:radial-gradient(120% 100% at 30% 10%,#3a4050,#0b0d12 70%);border-radius:36px;padding:clamp(14px,3vw,30px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 60px rgba(30,40,80,.35);border:1px solid rgba(255,255,255,.5)}
html[data-theme=light] .brand img,html[data-theme=light] .auth-logo{background:#0b0d12;border-radius:50%;box-shadow:0 4px 14px rgba(30,40,80,.3)}
html[data-theme=light] .hero-art img{filter:none}
footer{background:transparent;border-top:1px solid var(--line)}

/* ---- theme switch ---- */
.theme-sw{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:62px;height:34px;padding:0 8px;border-radius:99px;cursor:pointer;
  border:1px solid var(--glass-line);background:linear-gradient(160deg,var(--glass-top),var(--glass-bot));box-shadow:inset 0 1px 0 var(--glass-hi);
  color:var(--steel);-webkit-tap-highlight-color:transparent}
.theme-sw svg{width:16px;height:16px;fill:currentColor;position:relative;z-index:1}
.theme-sw .knob{position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#c9ced8);box-shadow:0 2px 8px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
html[dir=rtl] .theme-sw[aria-pressed=false] .knob{transform:translateX(-28px)}
html[dir=ltr] .theme-sw[aria-pressed=false] .knob{transform:translateX(28px)}
.theme-sw .sun{color:#c58a12}.theme-sw .moon{color:#7f88a0}
.theme-sw[aria-pressed=true] .sun{color:#2a2f3a}.theme-sw[aria-pressed=false] .moon{color:#2a2f3a}
.theme-sw:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- Day mode: colours that the original styles hard-code for dark ---- */
html[data-theme=light] .chrome-text,html[data-theme=light] .price,html[data-theme=light] .sp-word{background:linear-gradient(180deg,#0f1218,#2f3646 55%,#5d667a);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] .two .body,html[data-theme=light] .earn p,html[data-theme=light] .founder p,html[data-theme=light] .meet-tx p,
html[data-theme=light] .doc p,html[data-theme=light] .doc li,html[data-theme=light] .bul,html[data-theme=light] .bd-story,
html[data-theme=light] .fp p,html[data-theme=light] .ideas p,html[data-theme=light] .hero p{color:#2f3644}
html[data-theme=light] .warn{color:#5b4614}
html[data-theme=light] .btn-primary{background:linear-gradient(180deg,#2a2f3a,#0f1218)!important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px rgba(20,30,60,.3)}
html[data-theme=light] .fp-num{background:linear-gradient(180deg,#d2a03c,#8f6a1c 60%,#6d4f10);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] .fp-soon{color:#fff}
html[data-theme=light] .nav a,html[data-theme=light] .pagebar a,html[data-theme=light] #appNav button{color:var(--steel)}
html[data-theme=light] .nav a:hover,html[data-theme=light] .pagebar a[aria-current=page],html[data-theme=light] .pagebar a:hover,
html[data-theme=light] #appNav button[aria-current=page]{color:var(--chrome)}
html[data-theme=light] .ocd span{background:rgba(255,255,255,.6)}
html[data-theme=light] .ocd b{color:var(--chrome)}
html[data-theme=light] .bd-list li,html[data-theme=light] .bd-list{border-color:var(--line)}
html[data-theme=light] .badge{background:rgba(255,255,255,.6)}
html[data-theme=light] .status.ok,html[data-theme=light] .lrow .ok{color:#17803a}
html[data-theme=light] .status.err,html[data-theme=light] .badge.rejected{color:#b3261e}
html[data-theme=light] .stat b,html[data-theme=light] .plan h3{color:var(--chrome)}
html[data-theme=light] hr{border-color:var(--line)}

/* ---- speed: fewer blurred layers on small / weak screens ---- */
@media (max-width:640px){
  :root{--blur:blur(14px) saturate(150%)}
  .btn,.lang,.tab{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-transparency:reduce){
  .card,.plan,.guide,.mkt,.fp,.top,.btn,#appNav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel)!important}
}