/* =========================================================
   CODY ACADEMY — DASHBOARD
   Space Edition | RTL | Responsive
   File: css/dashboard.css
========================================================= */

/* 1. THEME VARIABLES */
:root {
  --bg:#080b18;
  --bg-deep:#060814;
  --surface:#101529;
  --surface-raised:#151b33;
  --surface-glass:rgba(17,24,48,.78);
  --border:rgba(177,190,255,.11);
  --border-hover:rgba(110,231,255,.38);
  --cyan:#6be8ff;
  --cyan-strong:#32cfff;
  --purple:#a99aff;
  --pink:#edb2ff;
  --gold:#ffd48a;
  --green:#76e9c0;
  --red:#ff91a9;
  --text:#f4f5ff;
  --muted:#9aa6c4;
  --subtle:#697591;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:25px;
  --radius-xl:32px;
  --sidebar-width:270px;
  --font:"Cairo",sans-serif;
  --shadow-card:0 15px 45px rgba(0,0,0,.18);
  --transition:240ms cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

html[data-theme="light"] {
  --bg:#f3f6fc;
  --bg-deep:#e9eef8;
  --surface:#fff;
  --surface-raised:#f8faff;
  --surface-glass:rgba(255,255,255,.88);
  --border:rgba(49,65,105,.12);
  --border-hover:rgba(28,155,190,.4);
  --cyan:#078cae;
  --cyan-strong:#0ba6ca;
  --purple:#7862cf;
  --pink:#a65cc5;
  --gold:#b47b16;
  --green:#13865e;
  --red:#cf4764;
  --text:#18213a;
  --muted:#586581;
  --subtle:#8490a8;
  color-scheme:light;
}

/* 2. RESET */
*,
*::before,
*::after {
  box-sizing:border-box;
}

html {
  min-height:100%;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#465273 var(--bg);
}

body {
  min-width:320px;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  transition:background-color var(--transition),color var(--transition);
}

button,input,textarea,select {
  font:inherit;
}

button {
  color:inherit;
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

img,svg {
  display:block;
  max-width:100%;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:4px;
}

::selection {
  color:#07111c;
  background:var(--cyan);
}

::-webkit-scrollbar {
  width:7px;
  height:7px;
}

::-webkit-scrollbar-track {
  background:var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background:#384565;
  border-radius:20px;
}

/* 3. BACKGROUND */
body::before {
  position:fixed;
  z-index:-2;
  inset:0;
  content:"";
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 12%,rgba(107,232,255,.055),transparent 30%),
    radial-gradient(circle at 85% 65%,rgba(169,154,255,.055),transparent 32%);
}

.space-app {
  position:relative;
  display:flex;
  min-height:100vh;
  isolation:isolate;
}

.space-app::before {
  position:fixed;
  z-index:-1;
  inset:0;
  content:"";
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%,rgba(255,255,255,.45) 90%,transparent),
    radial-gradient(1px 1px at 40% 10%,var(--cyan) 90%,transparent),
    radial-gradient(2px 2px at 75% 30%,rgba(255,255,255,.3) 90%,transparent),
    radial-gradient(1px 1px at 90% 80%,var(--purple) 90%,transparent);
  background-size:300px 300px;
}

/* 4. SIDEBAR */
.space-sidebar {
  position:fixed;
  z-index:100;
  inset-block:0;
  inset-inline-end:0;
  display:flex;
  flex-direction:column;
  gap:20px;
  width:var(--sidebar-width);
  padding:24px 18px;
  overflow-x:hidden;
  overflow-y:auto;
  background:rgba(9,13,29,.96);
  border-inline-start:1px solid var(--border);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}

html[data-theme="light"] .space-sidebar {
  background:rgba(255,255,255,.96);
}

.space-brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  color:var(--text);
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:-.5px;
}

.brand-mark {
  display:grid;
  flex:0 0 40px;
  place-items:center;
  width:40px;
  height:40px;
  color:var(--cyan);
  background:rgba(107,232,255,.1);
  border:1px solid rgba(107,232,255,.2);
  border-radius:12px;
  font-size:1.4rem;
  box-shadow:0 0 20px rgba(107,232,255,.12);
}

.brand-name span {
  color:var(--cyan);
}

.sidebar-caption {
  margin-bottom:-10px;
  padding-inline:12px;
  color:var(--subtle);
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.5px;
}

.space-nav {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.nav-link {
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:47px;
  padding:10px 14px;
  color:var(--muted);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  font-weight:700;
  transition:color var(--transition),background var(--transition),transform var(--transition);
}

.nav-link i {
  flex:0 0 23px;
  font-size:1.2rem;
  text-align:center;
}

.nav-link:hover {
  color:var(--text);
  background:rgba(255,255,255,.045);
  transform:translateX(-2px);
}

.nav-link.active {
  color:var(--cyan);
  background:linear-gradient(90deg,rgba(107,232,255,.12),transparent);
  border-inline-end:3px solid var(--cyan);
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}

.nav-link.active i {
  filter:drop-shadow(0 0 8px rgba(107,232,255,.4));
}

/* Sidebar mission */
.sidebar-mission {
  position:relative;
  margin-top:auto;
  padding:17px 15px 19px;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(107,232,255,.12),transparent 65%),
    linear-gradient(145deg,rgba(21,28,55,.85),rgba(10,14,31,.94));
  border:1px solid rgba(107,232,255,.15);
  border-radius:21px;
}

.mission-visual {
  position:relative;
  display:grid;
  place-items:center;
  height:70px;
  margin-bottom:10px;
}

.mission-orbit {
  position:absolute;
  width:70px;
  height:70px;
  border:1px dashed rgba(107,232,255,.3);
  border-radius:50%;
  animation:cody-spin 10s linear infinite;
}

.mission-planet {
  position:relative;
  z-index:2;
  color:var(--cyan);
  font-size:1.8rem;
  animation:cody-float 3s ease-in-out infinite;
}

.mission-star {
  position:absolute;
  color:var(--gold);
  font-size:.8rem;
}

.star-one {
  top:0;
  right:10px;
  animation:cody-pulse 2s infinite alternate;
}

.star-two {
  bottom:10px;
  left:0;
  animation:cody-pulse 2s infinite alternate 1s;
}

.mission-label {
  color:var(--cyan);
  font-size:.75rem;
  font-weight:800;
}

.sidebar-mission strong {
  display:block;
  margin:4px 0;
  color:var(--text);
  font-size:1rem;
}

.sidebar-mission p {
  margin:0 0 12px;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.6;
}

.mission-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 16px;
  color:#07111c;
  background:var(--cyan);
  border-radius:var(--radius-sm);
  font-size:.8rem;
  font-weight:900;
  transition:transform var(--transition),filter var(--transition);
}

.mission-link:hover {
  filter:brightness(1.08);
  transform:translateY(-2px);
}

/* Logout */
.logout-link {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  color:var(--red);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  font-weight:700;
  transition:background var(--transition);
}

.logout-link:hover {
  background:rgba(255,145,169,.08);
}

.sidebar-version {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--subtle);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.5px;
  direction:ltr;
}

.version-dot {
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  box-shadow:0 0 8px var(--green);
}

/* 5. MAIN CONTENT */
.space-main {
  display:flex;
  flex:1;
  flex-direction:column;
  gap:30px;
  width:calc(100% - var(--sidebar-width));
  min-width:0;
  margin-inline-end:var(--sidebar-width);
  padding:30px clamp(20px,3vw,46px);
}

/* 6. TOPBAR */
.space-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.topbar-title {
  min-width:0;
}

.page-kicker {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}

.online-dot {
  width:8px;
  height:8px;
  background:var(--green);
  border-radius:50%;
  box-shadow:0 0 10px var(--green);
  animation:cody-pulse 2s infinite;
}

.topbar-title h1 {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0;
  color:var(--text);
  font-size:1.65rem;
  font-weight:900;
  line-height:1.5;
}

.js-user-name {
  color:var(--cyan);
  unicode-bidi:plaintext;
}

.wave {
  color:var(--gold);
  font-size:1.2rem;
}

.topbar-title p {
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}

.topbar-actions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:12px;
}

.icon-action {
  display:grid;
  flex:0 0 44px;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:50%;
  font-size:1.2rem;
  transition:color var(--transition),border-color var(--transition),background var(--transition),transform var(--transition);
}

.icon-action:hover {
  color:var(--cyan);
  border-color:var(--border-hover);
  transform:translateY(-2px);
}

.theme-toggle {
  cursor:pointer;
}

.theme-toggle i {
  font-size:1.2rem;
}

.topbar-avatar {
  position:relative;
  display:grid;
  flex:0 0 50px;
  place-items:center;
  width:50px;
  height:50px;
  overflow:hidden;
  background:var(--surface);
  border:2px solid var(--purple);
  border-radius:50%;
  box-shadow:0 0 18px rgba(169,154,255,.18);
  transition:transform var(--transition);
}

.topbar-avatar:hover {
  transform:scale(1.05);
}

.dashboard-avatar-art {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  overflow:hidden;
}

.avatar-status {
  position:absolute;
  right:0;
  bottom:0;
  width:12px;
  height:12px;
  background:var(--green);
  border:2px solid var(--bg);
  border-radius:50%;
}

/* 7. DASHBOARD MENU */
.dashboard-menu {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.dashboard-menu-button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:50%;
  font-size:1.25rem;
  transition:all var(--transition);
}

.dashboard-menu-button:hover,
.dashboard-menu-button[aria-expanded="true"] {
  color:var(--cyan);
  border-color:var(--border-hover);
  background:rgba(107,232,255,.07);
}

.dashboard-menu-panel {
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-end:0;
  z-index:1200;
  display:flex;
  flex-direction:column;
  gap:5px;
  width:205px;
  padding:8px;
  background:var(--surface-raised);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
}

.dashboard-menu-panel[hidden] {
  display:none !important;
}

.dashboard-menu-panel a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 11px;
  color:var(--muted);
  border-radius:10px;
  font-size:.86rem;
  font-weight:700;
  transition:color var(--transition),background var(--transition);
}

.dashboard-menu-panel a:hover {
  color:var(--cyan);
  background:rgba(107,232,255,.08);
}

.dashboard-menu-panel a i {
  font-size:1.1rem;
}

/* 8. WELCOME NOTE */
.dashboard-welcome-note {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  background:var(--surface-glass);
  border:1px solid var(--border);
  border-radius:18px;
}

.dashboard-welcome-note .note-icon {
  display:grid;
  flex:0 0 42px;
  place-items:center;
  width:42px;
  height:42px;
  color:var(--gold);
  background:rgba(255,212,138,.1);
  border-radius:14px;
  font-size:1.3rem;
}

.dashboard-welcome-note strong {
  display:block;
  color:var(--text);
  font-size:.9rem;
}

.dashboard-welcome-note p {
  margin:2px 0 0;
  color:var(--muted);
  font-size:.78rem;
}

/* 9. WALLET */
.wallet-row {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.wallet-card {
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
  padding:20px;
  overflow:hidden;
  background:var(--surface-glass);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:all var(--transition);
}

.wallet-card:hover {
  transform:translateY(-3px);
  border-color:var(--border-hover);
  box-shadow:var(--shadow-card);
}

.wallet-icon {
  display:grid;
  flex:0 0 50px;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:var(--radius-sm);
  font-size:1.4rem;
}

.wallet-coins .wallet-icon {
  color:var(--gold);
  background:rgba(255,212,138,.1);
}

.wallet-xp .wallet-icon {
  color:var(--cyan);
  background:rgba(107,232,255,.1);
}

.wallet-copy {
  position:relative;
  z-index:1;
  min-width:0;
}

.wallet-copy small {
  display:block;
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}

.wallet-copy strong {
  display:block;
  color:var(--text);
  font-size:1.6rem;
  font-weight:900;
  line-height:1.35;
}

.wallet-unit {
  color:var(--muted);
  font-size:.8rem;
}

.wallet-caption {
  display:block;
  margin-top:4px;
  color:var(--subtle);
  font-size:.75rem;
}

.wallet-decoration {
  position:absolute;
  top:-10px;
  left:-10px;
  pointer-events:none;
  opacity:.07;
  font-size:4rem;
}

.wallet-decoration-gold { color:var(--gold); }
.wallet-decoration-cyan { color:var(--cyan); }

/* 10. HERO */
.space-hero {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:370px;
  padding:clamp(28px,5vw,50px);
  overflow:hidden;
  background:linear-gradient(135deg,rgba(16,21,41,.96),rgba(8,11,24,.97));
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
}

html[data-theme="light"] .space-hero {
  background:linear-gradient(135deg,#fff,#eaf4fc);
}

.hero-grid-pattern {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(circle at center,black,transparent 80%);
}

.hero-nebula {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,rgba(169,154,255,.15),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(107,232,255,.1),transparent 40%);
}

.hero-content {
  position:relative;
  z-index:2;
  max-width:510px;
}

.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:20px;
  padding:6px 14px;
  color:var(--cyan);
  background:rgba(107,232,255,.1);
  border:1px solid rgba(107,232,255,.2);
  border-radius:100px;
  font-size:.8rem;
  font-weight:800;
}

.hero-content h2 {
  margin:0 0 16px;
  color:var(--text);
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:900;
  line-height:1.35;
}

.hero-content h2 span {
  color:var(--cyan);
}

.hero-content p {
  margin:0 0 28px;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.9;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.button-primary,
.button-ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:12px 22px;
  border-radius:var(--radius-md);
  font-size:.9rem;
  font-weight:900;
  transition:all var(--transition);
}

.button-primary {
  color:#07111c;
  background:var(--cyan);
}

.button-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(107,232,255,.25);
  filter:brightness(1.08);
}

.button-ghost {
  color:var(--text);
  background:transparent;
  border:1px solid var(--border);
}

.button-ghost:hover {
  background:rgba(255,255,255,.04);
  border-color:var(--border-hover);
}

.hero-trust {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:700;
}

.trust-icon {
  color:var(--purple);
  font-size:1.1rem;
}

.trust-separator {
  width:4px;
  height:4px;
  background:var(--subtle);
  border-radius:50%;
}

/* Hero universe */
.hero-universe {
  position:relative;
  display:grid;
  flex:0 0 300px;
  place-items:center;
  width:300px;
  height:300px;
}

.universe-glow {
  position:absolute;
  width:150px;
  height:150px;
  background:var(--cyan);
  filter:blur(80px);
  opacity:.3;
}

.orbit {
  position:absolute;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:50%;
}

.orbit-one {
  width:180px;
  height:180px;
  animation:cody-spin 15s linear infinite;
}

.orbit-two {
  width:250px;
  height:250px;
  animation:cody-spin 25s linear infinite reverse;
}

.orbit-three {
  width:300px;
  height:120px;
  border-color:rgba(169,154,255,.3);
  transform:rotate(-20deg);
}

.planet-main {
  position:relative;
  z-index:2;
  width:100px;
  height:100px;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  border-radius:50%;
  box-shadow:inset -15px -15px 30px rgba(0,0,0,.4),0 0 30px rgba(107,232,255,.3);
  animation:cody-float 5s ease-in-out infinite;
}

.planet-surface {
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:linear-gradient(140deg,rgba(255,255,255,.25),transparent 65%);
}

.planet-ring {
  position:absolute;
  top:50%;
  left:50%;
  width:160px;
  height:40px;
  border:4px solid rgba(255,255,255,.2);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-20deg);
}

.planet-small {
  position:absolute;
  z-index:1;
  border-radius:50%;
}

.planet-purple {
  top:20%;
  left:10%;
  width:25px;
  height:25px;
  background:var(--purple);
  box-shadow:0 0 15px var(--purple);
}

.planet-gold {
  right:15%;
  bottom:15%;
  width:15px;
  height:15px;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
}

.planet-blue {
  top:10%;
  right:20%;
  width:35px;
  height:35px;
  background:#4a90e2;
  box-shadow:0 0 20px #4a90e2;
}

.universe-star {
  position:absolute;
  color:var(--text);
  opacity:.7;
  animation:cody-pulse 3s infinite alternate;
}

.universe-star-one {
  top:30%;
  right:10%;
  font-size:1.2rem;
}

.universe-star-two {
  bottom:20%;
  left:20%;
  font-size:1rem;
}

.universe-star-three {
  top:15%;
  left:30%;
  font-size:1.5rem;
}

.mascot-card {
  position:absolute;
  z-index:3;
  right:-15px;
  top:50%;
  display:grid;
  place-items:center;
  width:110px;
  min-height:110px;
  padding:12px;
  background:var(--surface-raised);
  border:1px solid var(--border-hover);
  border-radius:22px;
  box-shadow:var(--shadow-card);
  transform:translateY(-50%);
}

.mascot-card img,
.mascot-card svg {
  width:100%;
  height:100%;
  object-fit:contain;
}

/* 11. SECTION HEADINGS */
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}

.section-heading h2 {
  margin:0;
  color:var(--text);
  font-size:1.3rem;
  font-weight:900;
}

.section-heading p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:.85rem;
}

.section-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--cyan);
  font-size:.82rem;
  font-weight:800;
  transition:gap var(--transition);
}

.section-link:hover {
  gap:11px;
}

/* 12. STATISTICS */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.stat-card {
  position:relative;
  min-width:0;
  padding:19px;
  overflow:hidden;
  background:var(--surface-glass);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:transform var(--transition),border-color var(--transition);
}

.stat-card:hover {
  transform:translateY(-4px);
  border-color:var(--border-hover);
}

.stat-card::after {
  position:absolute;
  inset-inline-end:-25px;
  bottom:-35px;
  width:100px;
  height:100px;
  content:"";
  background:var(--cyan);
  border-radius:50%;
  opacity:.045;
  filter:blur(8px);
}

.stat-icon {
  display:grid;
  place-items:center;
  width: 43px;
  height: 43px;
  margin-bottom: 13px;
  color: var(--cyan);
  background: rgba(107, 232, 255, .1);
  border-radius: 13px;
  font-size: 1.25rem;
}

.stat-card:nth-child(2) .stat-icon {
  color: var(--purple);
  background: rgba(169, 154, 255, .1);
}

.stat-card:nth-child(3) .stat-icon {
  color: var(--gold);
  background: rgba(255, 212, 138, .1);
}

.stat-card:nth-child(4) .stat-icon {
  color: var(--green);
  background: rgba(118, 233, 192, .1);
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}

.stat-number {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.4;
}

.stat-foot {
  display: block;
  margin-top: 5px;
  color: var(--subtle);
  font-size: .72rem;
}

.stat-bottom-line {
  width: 100%;
  height: 4px;
  margin-top: 13px;
  overflow: hidden;
  background: var(--border);
  border-radius: 10px;
}

.stat-bottom-line span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: inherit;
}

/* =========================
   13. COURSES
========================= */

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.course-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card);
}

.course-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 165px;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(107, 232, 255, .13), transparent 65%),
    linear-gradient(145deg, rgba(21, 28, 55, .9), rgba(10, 14, 31, .96));
}

.course-python .course-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(55, 150, 220, .2), transparent 65%),
    linear-gradient(145deg, rgba(18, 34, 58, .95), rgba(10, 14, 31, .96));
}

.course-javascript .course-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 212, 80, .16), transparent 65%),
    linear-gradient(145deg, rgba(48, 39, 19, .8), rgba(10, 14, 31, .96));
}

.course-cpp .course-art {
  background:
    radial-gradient(circle at 50% 50%, rgba(80, 150, 255, .2), transparent 65%),
    linear-gradient(145deg, rgba(18, 30, 58, .95), rgba(10, 14, 31, .96));
}

.course-art-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 25%, rgba(255,255,255,.7) 90%, transparent),
    radial-gradient(1px 1px at 75% 20%, rgba(255,255,255,.6) 90%, transparent),
    radial-gradient(2px 2px at 80% 75%, rgba(255,255,255,.5) 90%, transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.5) 90%, transparent);
}

.course-orbit {
  position: absolute;
  width: 145px;
  height: 70px;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 50%;
  transform: rotate(-25deg);
}

.course-planet-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 105px;
  height: 105px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  box-shadow: 0 12px 35px rgba(0,0,0,.25);
}

.course-planet-visual svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.course-javascript .course-planet-visual {
  width: 105px;
  height: 105px;
  padding: 17px;
  background: #f4d34f;
  border: 0;
  border-radius: 24px;
}

.course-javascript .course-planet-visual svg {
  width: 100%;
  height: 100%;
}

.course-cpp .course-planet-visual {
  width: 105px;
  height: 105px;
  padding: 15px;
  background: #155b9b;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
}

.course-tag {
  position: absolute;
  top: 13px;
  inset-inline-start: 13px;
  z-index: 2;
  padding: 5px 10px;
  color: var(--cyan);
  background: rgba(8, 11, 24, .72);
  border: 1px solid rgba(107, 232, 255, .2);
  border-radius: 30px;
  font-size: .68rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.course-art-index {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 14px;
  color: rgba(255,255,255,.35);
  font-size: .72rem;
  font-weight: 900;
  direction: ltr;
}

.course-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 19px;
}

.course-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-title-row h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 900;
}

.course-subtitle {
  margin: 6px 0 15px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.7;
}

.course-language-icon {
  display: grid;
  flex: 0 0 35px;
  place-items: center;
  width: 35px;
  height: 35px;
  color: var(--cyan);
  background: rgba(107, 232, 255, .09);
  border-radius: 11px;
  font-size: 1rem;
}

.javascript-icon {
  color: #f4d34f;
  background: rgba(244, 211, 79, .1);
}

.cpp-icon {
  color: #69b9ff;
  background: rgba(105, 185, 255, .1);
}

.course-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
}

.course-progress-info strong {
  color: var(--cyan);
  font-size: .78rem;
  direction: ltr;
}

.course-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  background: var(--border);
  border-radius: 20px;
}

.course-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border-radius: inherit;
  transition: width .5s ease;
}

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.course-footer span {
  color: var(--muted);
  font-size: .75rem;
}

.course-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
  font-size: .8rem;
  font-weight: 900;
  transition: gap var(--transition);
}

.course-footer a:hover {
  gap: 10px;
}

/* =========================
   14. ACTIVITIES
========================= */

.activities-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.activity-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  background: var(--surface-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.activity-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  background: var(--surface-raised);
}

.activity-icon {
  display: grid;
  flex: 0 0 43px;
  place-items: center;
  width: 43px;
  height: 43px;
  color: var(--cyan);
  background: rgba(107, 232, 255, .1);
  border-radius: 13px;
  font-size: 1.2rem;
}

.activity-card:nth-child(2) .activity-icon {
  color: var(--purple);
  background: rgba(169, 154, 255, .1);
}

.activity-card:nth-child(3) .activity-icon {
  color: var(--gold);
  background: rgba(255, 212, 138, .1);
}

.activity-card:nth-child(4) .activity-icon {
  color: var(--green);
  background: rgba(118, 233, 192, .1);
}

.activity-copy {
  min-width: 0;
}

.activity-copy strong {
  display: block;
  color: var(--text);
  font-size: .85rem;
  font-weight: 900;
}

.activity-copy span,
.activity-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}

/* =========================
   15. FINAL DASHBOARD CARD
========================= */

.dashboard-final-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 50%, rgba(169,154,255,.14), transparent 40%),
    linear-gradient(120deg, rgba(21,28,55,.95), rgba(10,14,31,.96));
  border: 1px solid rgba(169,154,255,.2);
  border-radius: var(--radius-lg);
}

html[data-theme="light"] .dashboard-final-card {
  background:
    radial-gradient(circle at 10% 50%, rgba(169,154,255,.12), transparent 40%),
    linear-gradient(120deg, #fff, #f0edff);
}

.dashboard-final-card h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 900;
}

.dashboard-final-card p {
  margin: 0;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.8;
}

.final-card-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 19px;
  color: #07111c;
  background: var(--cyan);
  border-radius: 13px;
  font-size: .83rem;
  font-weight: 900;
  transition: transform var(--transition), filter var(--transition);
}

.final-card-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

/* =========================
   16. FOOTER
========================= */

.dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 5px;
  border-top: 1px solid var(--border);
  color: var(--subtle);
  font-size: .72rem;
}

.dashboard-footer a {
  color: var(--muted);
  transition: color var(--transition);
}

.dashboard-footer a:hover {
  color: var(--cyan);
}

.dashboard-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* =========================
   17. ANIMATIONS
========================= */

@keyframes cody-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes cody-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes cody-pulse {
  from {
    opacity: .55;
    transform: scale(.95);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* =========================
   18. RESPONSIVE — TABLETS
========================= */

@media (max-width: 1100px) {
  :root {
    --sidebar-width: 235px;
  }

  .space-main {
    padding-inline: 24px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .courses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .activities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-universe {
    flex-basis: 240px;
    width: 240px;
    height: 240px;
    transform: scale(.85);
  }
}

/* =========================
   19. RESPONSIVE — MOBILE
========================= */

@media (max-width: 820px) {
  :root {
    --sidebar-width: 0px;
  }

  .space-sidebar {
    width: min(290px, 85vw);
    transform: translateX(110%);
    transition: transform var(--transition);
  }

  .space-sidebar.open {
    transform: translateX(0);
  }

  .space-main {
    width: 100%;
    margin-inline-end: 0;
    padding: 22px;
  }

  .space-hero {
    min-height: 320px;
  }

  .hero-universe {
    flex-basis: 190px;
    width: 190px;
    height: 190px;
    transform: scale(.72);
  }
}

/* =========================
   20. SMALL MOBILE
========================= */

@media (max-width: 600px) {
  .space-main {
    gap: 22px;
    padding: 17px 14px 25px;
  }

  .space-topbar {
    align-items: flex-start;
    gap: 10px;
  }

  .topbar-title h1 {
    font-size: 1.25rem;
  }

  .topbar-title p {
    font-size: .78rem;
  }

  .topbar-actions {
    gap: 7px;
  }

  .icon-action,
  .dashboard-menu-button {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    font-size: 1rem;
  }

  .topbar-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .dashboard-welcome-note {
    align-items: flex-start;
    padding: 13px;
  }

  .wallet-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .wallet-card {
    gap: 9px;
    padding: 13px 10px;
  }

  .wallet-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 1.05rem;
  }

  .wallet-copy strong {
    font-size: 1.25rem;
  }

  .wallet-copy small {
    font-size: .7rem;
  }

  .wallet-caption {
    font-size: .65rem;
  }

  .space-hero {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 25px 19px;
  }

  .hero-content {
    max-width: none;
  }

  .hero-content h2 {
    font-size: 1.85rem;
  }

  .hero-content p {
    font-size: .85rem;
  }

  .hero-universe {
    align-self: center;
    flex-basis: 180px;
    width: 180px;
    height: 180px;
    margin-top: -5px;
    transform: scale(.7);
  }

  .mascot-card {
    right: 0;
    width: 85px;
    min-height: 85px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-number {
    font-size: 1.45rem;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .course-art {
    min-height: 145px;
  }

  .course-content {
    padding: 16px;
  }

  .activities-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .activity-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
  }

  .activity-copy strong {
    font-size: .78rem;
  }

  .activity-copy span,
  .activity-copy small {
    font-size: .67rem;
  }

  .dashboard-final-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
  }

  .final-card-button {
    width: 100%;
  }

  .dashboard-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================
   21. EXTRA SMALL MOBILE
========================= */

@media (max-width: 380px) {
  .space-main {
    padding-inline: 11px;
  }

  .topbar-title h1 {
    font-size: 1.08rem;
  }

  .topbar-actions {
    gap: 5px;
  }

  .icon-action,
  .dashboard-menu-button {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
  }

  .topbar-avatar {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }

  .wallet-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .activities-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button-primary,
  .button-ghost {
    width: 100%;
  }
}

/* =========================
   22. ACCESSIBILITY
========================= */

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

/* =========================
   23. LIGHT THEME ADJUSTMENTS
========================= */

html[data-theme="light"] .course-art {
  background-color: #edf3fc;
}

html[data-theme="light"] .course-tag {
  color: #17677c;
  background: rgba(255,255,255,.88);
}

html[data-theme="light"] .dashboard-menu-panel {
  box-shadow: 0 12px 35px rgba(30, 45, 80, .12);
}

html[data-theme="light"] .activity-card:hover {
  background: #f7faff;
}

html[data-theme="light"] .sidebar-mission {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(7,140,174,.1), transparent 65%),
    linear-gradient(145deg, #fff, #eef5fc);
}