/* ============================================================
   CryptoTrade Theme · v1.3  (Guaranteed Frost)
   Fake-frost via gradients · backdrop-filter as enhancement
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap');

:root{
  --ct-sf:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --ct-ink:#0a1628;
  --ct-ink2:#4a5667;
  --ct-bg:#f2f2f7;
  --ct-accent:#007AFF;
  --ct-accent-dark:#0064d2;
  --ct-up:#00a86b;
  --ct-down:#e11d48;
  --ct-radius-pill:100px;
  --ct-radius-card:24px;
  --ct-radius-input:14px;
}

html,body{
  font-family:var(--ct-sf);
  color:var(--ct-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--ct-bg);
}

/* ============================================================
   FAKE FROST — paints its own translucent glass look using
   layered gradients. Does NOT depend on backdrop-filter.
   The colored radial gradients inside the card simulate the
   halo bleed-through that real backdrop-filter would show.
   ============================================================ */
.ct-card.ct-card,
.ct-glass.ct-glass,
[class*="liquid-glass"][class*="liquid-glass"],
[class*="-card"]:not(.ct-card-accent):not([class*="-card-accent"]):not(button):not(a):not(input):not(select):not(textarea),
[class*=" card"]:not(.ct-card-accent):not([class*="-card-accent"]):not(button):not(a):not(input):not(select):not(textarea),
[class^="card"]:not(.ct-card-accent):not([class*="-card-accent"]):not(button):not(a):not(input):not(select):not(textarea),
[class*="-panel"],
[class^="panel"],
[class*=" panel"]{
  position:relative;
  background:
    radial-gradient(circle at 18% 0%,rgba(0,122,255,.10),transparent 55%),
    radial-gradient(circle at 82% 0%,rgba(168,85,247,.09),transparent 55%),
    radial-gradient(circle at 50% 100%,rgba(245,158,11,.07),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74)) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  border-radius:var(--ct-radius-card) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 1px 0 rgba(255,255,255,.7),
    0 22px 50px -12px rgba(40,80,160,.18),
    0 6px 20px -8px rgba(40,80,160,.10) !important;
  color:var(--ct-ink);
  /* Backdrop-filter as enhancement — applies if the stacking
     context allows. If not, the gradient above still looks
     frosted on its own. */
  backdrop-filter:blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(40px) saturate(180%) !important;
}

/* Cards alternate the inner halo direction so adjacent cards
   look distinct, mimicking the colored-orb bleed of the
   landing page. Powered by :nth-of-type so it works
   automatically on any card grid. */
.ct-card:nth-of-type(2n),
.ct-glass:nth-of-type(2n),
[class*="liquid-glass"]:nth-of-type(2n),
[class*="-card"]:nth-of-type(2n):not(.ct-card-accent),
[class*=" card"]:nth-of-type(2n):not(.ct-card-accent){
  background:
    radial-gradient(circle at 80% 0%,rgba(168,85,247,.12),transparent 55%),
    radial-gradient(circle at 20% 100%,rgba(16,185,129,.08),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74)) !important;
}
.ct-card:nth-of-type(3n),
.ct-glass:nth-of-type(3n),
[class*="liquid-glass"]:nth-of-type(3n),
[class*="-card"]:nth-of-type(3n):not(.ct-card-accent),
[class*=" card"]:nth-of-type(3n):not(.ct-card-accent){
  background:
    radial-gradient(circle at 30% 0%,rgba(245,158,11,.11),transparent 55%),
    radial-gradient(circle at 70% 100%,rgba(0,122,255,.08),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74)) !important;
}
.ct-card:nth-of-type(4n),
.ct-glass:nth-of-type(4n),
[class*="liquid-glass"]:nth-of-type(4n),
[class*="-card"]:nth-of-type(4n):not(.ct-card-accent),
[class*=" card"]:nth-of-type(4n):not(.ct-card-accent){
  background:
    radial-gradient(circle at 75% 0%,rgba(16,185,129,.12),transparent 55%),
    radial-gradient(circle at 25% 100%,rgba(168,85,247,.07),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74)) !important;
}

/* ============================================================
   ACCENT (BLUE) CARD — Portfolio "Your Balance"
   ============================================================ */
.ct-card-accent.ct-card-accent{
  background:linear-gradient(135deg,var(--ct-accent),var(--ct-accent-dark)) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
  box-shadow:0 18px 50px rgba(0,122,255,.35),inset 0 1px 0 rgba(255,255,255,.3) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-radius:var(--ct-radius-card) !important;
}
.ct-card-accent.ct-card-accent *{color:inherit}

/* ============================================================
   Strip solid white from inner wrappers that hide the frost
   ============================================================ */
.ct-card.ct-card > *[style*="background:#fff"],
.ct-card.ct-card > *[style*="background: #fff"],
.ct-card.ct-card > *[style*="background:white"],
.ct-card.ct-card > *[style*="background: white"],
[class*="liquid-glass"] > *[style*="background:#fff"],
[class*="liquid-glass"] > *[style*="background: #fff"],
[class*="liquid-glass"] > *[style*="background:white"],
[class*="liquid-glass"] > *[style*="background: white"]{
  background:transparent !important;
}

/* ============================================================
   BUTTONS, NAV, TABBAR, INPUTS, COLORS
   ============================================================ */
.ct-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--ct-radius-pill);font-family:var(--ct-sf);font-size:15px;font-weight:600;background:var(--ct-accent);color:#fff;border:none;cursor:pointer;text-decoration:none;box-shadow:0 8px 24px rgba(0,122,255,.35);transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .3s,background .3s}
.ct-btn-primary:hover{background:var(--ct-accent-dark);transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,122,255,.45)}
.ct-btn-primary:active{transform:translateY(0)}
.ct-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}

.ct-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--ct-radius-pill);font-family:var(--ct-sf);font-size:15px;font-weight:600;background:rgba(255,255,255,.8);color:var(--ct-accent);border:1px solid rgba(255,255,255,.95);cursor:pointer;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 4px 16px rgba(40,80,160,.08);transition:transform .35s cubic-bezier(.32,.72,0,1),background .3s}
.ct-btn-ghost:hover{background:#fff;transform:translateY(-2px)}

.ct-link{color:var(--ct-accent);font-weight:600;text-decoration:none;transition:opacity .2s}
.ct-link:hover{opacity:.75}

.ct-nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 22px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));border:1px solid rgba(255,255,255,.95);border-radius:var(--ct-radius-pill);box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),0 12px 40px rgba(40,80,160,.18);font-family:var(--ct-sf)}
.ct-nav .ct-nav-logo{font-weight:700;font-size:14px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid rgba(0,40,120,.1);color:var(--ct-ink)}
.ct-nav .ct-nav-logo::before{content:'';width:18px;height:18px;border-radius:6px;background:var(--ct-accent);box-shadow:0 0 0 2px rgba(0,122,255,.18),0 6px 16px rgba(0,122,255,.4)}
.ct-nav a{color:var(--ct-ink);text-decoration:none;font-size:13px;font-weight:500;padding:8px 14px;border-radius:var(--ct-radius-pill);opacity:.7;transition:.25s}
.ct-nav a:hover{opacity:1;background:rgba(0,40,120,.05)}
.ct-nav a.ct-nav-signin{color:var(--ct-accent);font-weight:600;opacity:1}
.ct-nav a.ct-nav-cta{background:var(--ct-accent);color:#fff;font-weight:600;opacity:1;box-shadow:0 4px 14px rgba(0,122,255,.35)}
.ct-nav a.ct-nav-cta:hover{background:var(--ct-accent-dark)}
body.ct-has-nav{padding-top:100px}

.ct-tabbar{position:fixed;left:12px;right:12px;bottom:14px;z-index:50;display:flex;justify-content:space-around;align-items:center;padding:10px 8px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));border:1px solid rgba(255,255,255,.95);border-radius:var(--ct-radius-pill);box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),0 12px 40px rgba(40,80,160,.18)}
.ct-tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ct-ink2);text-decoration:none;font-size:11px;font-weight:500;padding:6px 10px;border-radius:14px;transition:.2s}
.ct-tabbar a.active{color:var(--ct-accent);background:rgba(0,122,255,.1)}

.ct-input,.ct-form input[type=text],.ct-form input[type=email],.ct-form input[type=password],.ct-form input[type=number],.ct-form input[type=search],.ct-form input[type=tel],.ct-form select,.ct-form textarea{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);border-radius:var(--ct-radius-input);padding:12px 16px;font-family:var(--ct-sf);font-size:15px;color:var(--ct-ink);transition:border-color .2s,background .2s;outline:none}
.ct-input:focus,.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:var(--ct-accent);background:#fff}

.ct-up{color:var(--ct-up) !important;font-variant-numeric:tabular-nums}
.ct-down{color:var(--ct-down) !important;font-variant-numeric:tabular-nums}

.ct-section-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ct-accent);margin-bottom:12px;font-weight:600}
.ct-section-title{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--ct-ink)}
.ct-section-subtitle{font-size:clamp(16px,2vw,20px);font-weight:400;line-height:1.4;color:var(--ct-ink2);margin-top:8px}

.ct-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Body halo — paints colored glows behind frosted cards.
   Skipped on the landing page which has its own background. */
body:not(.landing-page){
  position:relative;
  isolation:isolate;
}
body:not(.landing-page)::before{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(0,122,255,.20),transparent 45%),
    radial-gradient(circle at 88% 22%,rgba(168,85,247,.18),transparent 45%),
    radial-gradient(circle at 18% 82%,rgba(245,158,11,.16),transparent 45%),
    radial-gradient(circle at 86% 78%,rgba(16,185,129,.18),transparent 45%);
  filter:blur(50px);
}