:root{
  --bg:#0F172A;--bg2:#111827;--panel:rgba(255,255,255,.03);--panel-strong:rgba(17,24,39,.82);
  --line:rgba(255,255,255,.08);--text:#FFFFFF;--muted:rgba(255,255,255,.75);--primary:#38BDF8;
  --novi-navy:#0B1220;--novi-purple:#7C3AED;--novi-cyan:#67D3FF;--shadow:0 20px 60px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Geist,"Plus Jakarta Sans",sans-serif;
  background:
    radial-gradient(circle at 18% 16%, rgba(56,189,248,.22), transparent 26%),
    radial-gradient(circle at 82% 10%, rgba(103,211,255,.14), transparent 22%),
    radial-gradient(circle at 70% 72%, rgba(167,139,250,.10), transparent 26%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 36%),
    linear-gradient(180deg,#08101F 0%,#0F172A 40%,#111827 100%);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at center, black 58%, transparent 100%);
  opacity:.18;
  z-index:-1
}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,rgba(11,18,32,.92),rgba(17,24,39,.9));
  border-right:1px solid var(--line);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  backdrop-filter:blur(20px) saturate(145%)
}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;color:#fff;letter-spacing:-.02em;font-family:"Plus Jakarta Sans",Inter,sans-serif}
.logo-mark{width:36px;height:36px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 30px rgba(56,189,248,.16)}
.logo-mark img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:2px}
.sidebar nav{display:flex;flex-direction:column;gap:6px}
.sidebar nav a{text-decoration:none;color:#cbd5e1;padding:10px 12px;border-radius:10px;font-weight:600;transition:all .25s ease}
.sidebar nav a.active,.sidebar nav a:hover{background:rgba(56,189,248,.14);color:#fff;transform:translateX(2px)}
.side-card{
  margin-top:auto;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  backdrop-filter:blur(20px)
}
.side-card h4{margin:0 0 6px}.side-card p{margin:0 0 12px;color:var(--muted);font-size:14px}.side-card button{width:100%;border:0;background:linear-gradient(135deg,#38BDF8,#1D4ED8);color:#fff;padding:10px;border-radius:10px;font-weight:800;box-shadow:0 16px 30px rgba(56,189,248,.18)}
.main{padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px 18px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.03);backdrop-filter:blur(20px) saturate(145%)}
.topbar h1{margin:8px 0 0;font-size:clamp(1.9rem,3vw,3rem);letter-spacing:-.04em;font-family:"Plus Jakarta Sans",Inter,sans-serif}
.topbar p{margin:6px 0 0;color:var(--muted)}
.eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.22);color:#BCEBFF;font-weight:800}
.search{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  min-width:320px;
  color:#9aa1af;
  box-shadow:0 10px 24px rgba(0,0,0,.12)
}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  backdrop-filter:blur(20px) saturate(145%)
}
.progress{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(17,24,39,.86));
  color:#fff
}
.progress p{color:#cfd7ff}
.progress .badge{background:rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px}
.progress-head,.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kpi{font-size:64px;font-weight:800;line-height:1;letter-spacing:-.05em}.kpi small{font-size:26px;font-weight:700;margin-left:10px}
.bar{height:10px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin:14px 0}.bar span{display:block;height:100%;background:linear-gradient(90deg,#7d88ff,#67D3FF)}
.bar.slim{height:8px;background:rgba(255,255,255,.06)}.bar.slim span{background:linear-gradient(90deg,#5b5ce2,#7a7cf0)}
.outline{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800;transition:all .25s ease}.outline:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
h2,h3,h4{margin:0 0 8px}
.activities ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.activities li{border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:2px;background:rgba(255,255,255,.02)}
.activities b{font-size:14px}.activities span{font-size:13px;color:var(--muted)}.activities em{font-size:12px;color:#BCEBFF;font-style:normal;font-weight:700}
.section-head button,.reserve-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;padding:7px 10px;color:#fff;font-weight:700;transition:all .25s ease}
.section-head button:hover,.reserve-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.route p{color:var(--muted)} .route small{color:#cbd5e1;font-weight:600}
.learning-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini{border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:4px;background:rgba(255,255,255,.02)}
.mini span{font-size:12px;color:var(--muted)}.mini i{font-style:normal;font-weight:700;color:#67D3FF;font-size:12px}
.reserve{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  background:
    radial-gradient(circle at 15% 25%, rgba(56,189,248,.18), transparent 30%),
    radial-gradient(circle at 85% 50%, rgba(255,193,7,.08), transparent 28%),
    rgba(255,255,255,.03)
}
.reserve-copy p{margin:6px 0 0;color:var(--muted);max-width:58ch}
.reserve-btn{padding:12px 16px;background:linear-gradient(135deg,#38BDF8,#1D4ED8);box-shadow:0 16px 30px rgba(56,189,248,.18)}
.reserve-btn:hover{box-shadow:0 18px 34px rgba(56,189,248,.24)}
@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .grid{grid-template-columns:1fr}
  .learning-grid{grid-template-columns:1fr}
  .search{min-width:0;width:100%}
  .topbar{flex-direction:column;align-items:flex-start}
  .reserve{flex-direction:column;align-items:flex-start}
}