/* Learn base (independent from Vite /assets bundle) */
:root{
  --bg:#070a12;
  --text:rgba(235,240,248,.92);
  --muted:rgba(235,240,248,.68);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --r:18px;
  --r2:22px;
  --btnBg:rgba(255,255,255,.06);
  --btnBg2:rgba(255,255,255,.10);
  --btnText:rgba(235,240,248,.92);
  --accent1:#7aaaff;
  --accent2:#f2c14e;
  --accent3:#19c37d;
}

html[data-theme="light"]{
  --bg:#ffffff;
  --text:rgba(20,20,24,.88);
  --muted:rgba(20,20,24,.60);
  --card:rgba(0,0,0,.04);
  --card2:rgba(0,0,0,.06);
  --stroke:rgba(0,0,0,.10);
  --stroke2:rgba(0,0,0,.14);
  --shadow:0 18px 50px rgba(0,0,0,.10);
  --btnBg:rgba(0,0,0,.04);
  --btnBg2:rgba(0,0,0,.07);
  --btnText:rgba(20,20,24,.88);
}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* layout helpers used by learn pages */
#app{min-height:100%}

.card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--stroke);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
}

.muted{color:var(--muted)}
.pill,.statusPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.15);
  color:var(--text);
  font-size:12px;
  font-weight:700;
}
html[data-theme="light"] .pill,
html[data-theme="light"] .statusPill{background:rgba(255,255,255,.6)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--btnBg2),var(--btnBg));
  color:var(--btnText);
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btnGhost{
  background:transparent;
  border:1px solid var(--stroke);
}
.btnIcon{width:44px;padding:10px}

/* topbar used by learn pages */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0));
}
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,0));
}

.brand{display:flex;align-items:center;gap:10px}
.logo{height:26px}
.logo-light{display:none}
html[data-theme="light"] .logo-dark{display:none}
html[data-theme="light"] .logo-light{display:block}

.content{padding:18px}