/* Extracted from the inline <style id="aesthetic-upgrade"> block that was repeated
   byte-identically on 7 pages. Cached once instead of re-downloaded
   with every page. Do not reorder: it is linked at the exact position the
   inline block occupied, because these skins depend on source order. */
/* =========================================================
   CRYPTOMATH ACADEMY — AESTHETIC UPGRADE LAYER
   Pure CSS, loaded last so it refines the existing design.
   ========================================================= */
:root{
  --accent:#C9A24B;
  --accent-2:#E3C77A;
  --accent-secondary:#C9A24B;
  --accent-3:#A9823A;
  --grad-warm:linear-gradient(135deg,#C9A24B 0%,#E3C77A 100%);
  --grad-cool:linear-gradient(135deg,#C9A24B 0%,#A9823A 100%);
  --grad-mix:linear-gradient(120deg,#C9A24B 0%,#A9823A 100%);
  --shadow-soft:0 18px 50px -20px rgba(10,10,10,.35);
  --shadow-glow:0 0 40px -8px rgba(255,77,77,.45);
  --radius:20px;
}
html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--accent);color:#fff;}

/* ---------- Animated colour wash on light sections ---------- */
.topics-section,.features-section,.info-section,.simulator-section,
.concept-section,.progress-section,.stats-grid,.container{position:relative;}
.topics-section::after,.features-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 50% at 12% 0%,rgba(255,77,77,.07),transparent 60%),
    radial-gradient(55% 45% at 92% 18%,rgba(93,93,255,.08),transparent 60%);
}
.topics-section>*,.features-section>*{position:relative;z-index:1;}

/* ---------- Hero glow ---------- */
.hero::after,.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 30%,rgba(255,77,77,.18),transparent 70%),
    radial-gradient(45% 45% at 82% 70%,rgba(93,93,255,.18),transparent 70%);
  mix-blend-mode:screen;animation:heroGlow 12s ease-in-out infinite alternate;
}
@keyframes heroGlow{0%{opacity:.65;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
.hero-content,.page-hero>*{position:relative;z-index:3;}
.hero h1 .accent{
  background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- Navbar: floating glass pill ---------- */
.navbar{
  top:14px;left:50%;right:auto;transform:translateX(-50%);
  width:min(1180px,calc(100% - 28px));
  padding:.85rem 1.6rem;border-radius:999px;
  background:rgba(16,16,20,.55)!important;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 40px -16px rgba(0,0,0,.6);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.navbar.scrolled{background:rgba(10,10,12,.82)!important;}
.nav-links a{transition:color .25s ease,opacity .25s ease;}
.nav-links a:hover{color:#fff;}
.nav-links a::after{height:2px;border-radius:2px;background:var(--grad-warm);}

/* ---------- Buttons everywhere ---------- */
.btn,.submit-btn,.login-btn,.btn-logout,.controls button,.reset,
.card-answer button,.demo-input-group button,.answer-form button{
  border-radius:999px!important;
  font-weight:700;letter-spacing:.06em;
  transition:transform .3s cubic-bezier(.16,.84,.44,1),box-shadow .3s ease,filter .3s ease;
  position:relative;overflow:hidden;border:none;cursor:pointer;
}
.btn-primary,.submit-btn,.login-btn,.card-answer button,
.demo-input-group button,.answer-form button,.controls button:first-child{
  background:var(--grad-warm)!important;color:#fff!important;
  box-shadow:0 10px 26px -10px rgba(255,77,77,.7);
}
.btn-primary:hover,.submit-btn:hover,.login-btn:hover,.card-answer button:hover,
.demo-input-group button:hover,.answer-form button:hover{
  transform:translateY(-3px);filter:brightness(1.06);
  box-shadow:0 16px 34px -10px rgba(255,77,77,.8);
}
.btn-outline{
  border:1px solid rgba(255,255,255,0.05)!important;border-radius:999px!important;
  background:rgba(255,255,255,0.04)!important;color:#fff!important;
}
.btn-outline:hover{
  background:#1A1714!important;color:#0a0a0a!important;transform:translateY(-3px);
  box-shadow:0 14px 30px -12px rgba(255,255,255,0.05);
}
.btn-logout,.reset{background:rgba(255,77,77,.12)!important;color:var(--accent)!important;border:1px solid rgba(255,77,77,.35)!important;}
.btn-logout:hover,.reset:hover{background:var(--accent)!important;color:#fff!important;transform:translateY(-2px);}
/* subtle shine sweep */
.btn::before,.submit-btn::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.05),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn:hover::before,.submit-btn:hover::before{left:130%;}

/* ---------- Generic card polish ---------- */
.topic-card,.feature-card,.challenge-card,.stat-card,.concept-section,
.interactive-demo,.block,.daily-challenge,.profile-header,.progress-section{
  border-radius:var(--radius)!important;
}
.topics-grid{background:transparent!important;gap:24px!important;}
.topic-card{
  background:#1A1714!important;box-shadow:var(--shadow-soft);
  border:1px solid rgba(10,10,10,.06);
  transition:transform .45s cubic-bezier(.16,.84,.44,1),box-shadow .45s ease;
}
.topic-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -22px rgba(10,10,10,.5);}
.topic-card::before{border-radius:var(--radius);background:linear-gradient(160deg,#141414,#0a0a0a);}
.topic-number{font-weight:700;}

.feature-card{
  border:1px solid rgba(10,10,10,.07);box-shadow:var(--shadow-soft);
  transition:transform .4s ease,box-shadow .4s ease;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -22px rgba(10,10,10,.45);}

/* ---------- Challenge cards ---------- */
.challenge-card{
  background:#1A1714!important;border:1px solid rgba(10,10,10,.07)!important;
  box-shadow:var(--shadow-soft);
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.challenge-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-mix);opacity:0;transition:opacity .4s ease;
  border-radius:var(--radius) var(--radius) 0 0;
}
.challenge-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -24px rgba(10,10,10,.5);border-color:rgba(255,77,77,.25)!important;}
.challenge-card:hover::after{opacity:1;}
.card-xp{
  background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-weight:700;
}

/* ---------- Daily challenge hero card ---------- */
.daily-challenge{
  position:relative;
  background:linear-gradient(160deg,#15151b 0%,#0b0b10 100%)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);overflow:hidden;
}
.daily-challenge::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--grad-mix);opacity:.5;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.daily-challenge::after{
  content:"";position:absolute;top:-50%;left:-30%;width:60%;height:200%;
  background:radial-gradient(closest-side,rgba(255,77,77,.18),transparent);
  animation:sheen 9s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes sheen{0%{transform:translateX(0)}100%{transform:translateX(220%)}}
.daily-challenge>*{position:relative;z-index:1;}
.challenge-badge{background:var(--grad-warm)!important;color:#fff!important;border:none!important;box-shadow:0 8px 20px -8px rgba(255,77,77,.7);}
.challenge-timer{font-family:'Space Mono',monospace;color:#cfcfe0!important;}
.formula-display,.formula-box,.card-formula{
  font-family:'Space Mono',monospace!important;
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  border-left:3px solid var(--accent)!important;border-radius:12px!important;
}
.card-formula{background:rgba(10,10,10,.04)!important;border:1px solid rgba(10,10,10,.08)!important;border-left:3px solid var(--accent)!important;color:#0a0a0a;}

/* ---------- Inputs ---------- */
input[type="number"],input[type="text"],.answer-input,.demo-input{
  border-radius:12px!important;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
input[type="number"]:focus,input[type="text"]:focus,.answer-input:focus,.demo-input:focus{
  outline:none;border-color:var(--accent)!important;
  box-shadow:0 0 0 4px rgba(255,77,77,.16)!important;
}
.challenge-result.correct,.card-result.correct,.demo-result.correct{
  border-radius:12px;
}

/* ---------- Profile ---------- */
.profile-avatar{background:var(--grad-mix)!important;box-shadow:0 16px 40px -14px rgba(157,77,255,.6);}
.stat-card{background:#1A1714!important;border:1px solid rgba(10,10,10,.07)!important;box-shadow:var(--shadow-soft);transition:transform .35s ease,box-shadow .35s ease;}
.stat-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -22px rgba(10,10,10,.45);}
.progress-bar{border-radius:999px!important;overflow:hidden;background:rgba(10,10,10,.08)!important;}
.progress-fill,.xp-bar>*{background:var(--grad-mix)!important;border-radius:999px!important;}

/* ---------- Blockchain blocks ---------- */
.block{
  background:#1A1714!important;border:1px solid rgba(10,10,10,.08)!important;
  box-shadow:var(--shadow-soft);transition:transform .35s ease,box-shadow .35s ease;
}
.block:hover{transform:translateY(-5px);box-shadow:0 26px 54px -24px rgba(10,10,10,.5);}
.hash{font-family:'Space Mono',monospace!important;color:var(--accent-secondary);word-break:break-all;}

/* ---------- Concepts ---------- */
.concept-section{background:#1A1714!important;border:1px solid rgba(10,10,10,.07)!important;box-shadow:var(--shadow-soft);}
.concept-number{color:var(--accent);font-weight:700;}
.interactive-demo{background:linear-gradient(160deg,#15151b,#0b0b10)!important;border:1px solid rgba(255,255,255,0.1)!important;color:#fff;}
.demo-result{border-radius:12px!important;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1);}
.reveal.active{opacity:1;transform:none;}

/* ---------- Footer ---------- */
footer{border-top:1px solid rgba(255,255,255,0.08);}
footer a{color:var(--accent);text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* ---------- Scrollbar ---------- */
*::-webkit-scrollbar{width:11px;height:11px;}
*::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),var(--accent-3));border-radius:999px;border:3px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}

/* ---------- Mobile niceties ---------- */
@media(max-width:768px){
  .navbar{top:8px;width:calc(100% - 16px);padding:.7rem 1rem;}
  .topics-grid{gap:16px!important;}
}
