/* ============ Header / Nav ============ */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--transition),border-color var(--transition),background var(--transition);
}
.site-header.scrolled{background:rgba(255,255,255,.95);border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm)}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--color-primary);font-size:var(--fs-lg)}
.brand__mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.nav__links{display:flex;align-items:center;gap:var(--sp-6)}
.nav__links a{color:var(--color-text);font-weight:500;font-size:var(--fs-sm);position:relative}
.nav__links a:hover{color:var(--color-primary)}
.nav__links a.active{color:var(--color-primary)}
.nav__actions{display:flex;align-items:center;gap:var(--sp-3)}
.nav__toggle{display:none;width:40px;height:40px;border-radius:var(--radius-md);align-items:center;justify-content:center;color:var(--color-text)}
.nav__toggle:hover{background:var(--color-bg)}

@media(max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav.open .nav__links{display:flex;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;background:#fff;padding:var(--sp-6);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);gap:var(--sp-4)}
  .nav.open .nav__links a{padding:var(--sp-2) 0;width:100%}
}

/* ============ Footer ============ */
.site-footer{background:var(--color-primary);color:#e5edf5;margin-top:var(--sp-20)}
.site-footer a{color:#cbd7e5}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-8);padding:var(--sp-16) 0}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:#fff;font-size:var(--fs-base);margin-bottom:var(--sp-4)}
.footer-grid ul{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-sm)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:var(--sp-6) 0;font-size:var(--fs-xs);color:#94a8c1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}

/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;padding:var(--sp-24) 0 var(--sp-20);background:linear-gradient(180deg,#f7f8fa 0%,#fff 100%)}
.hero::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.15),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-160px;left:-160px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(11,58,99,.12),transparent 70%);pointer-events:none}
.hero__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-16);align-items:center}
@media(max-width:900px){.hero__inner{grid-template-columns:1fr;text-align:center}}
.hero h1{font-size:var(--fs-5xl);line-height:1.05;margin-bottom:var(--sp-5)}
.hero h1 .accent{color:var(--color-accent)}
.hero p.lead{font-size:var(--fs-lg);color:var(--color-muted);max-width:560px;margin-bottom:var(--sp-8)}
@media(max-width:900px){.hero p.lead{margin-left:auto;margin-right:auto}}
.hero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}
@media(max-width:900px){.hero__cta{justify-content:center}}
.hero__meta{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:var(--sp-8);color:var(--color-muted);font-size:var(--fs-sm)}
@media(max-width:900px){.hero__meta{justify-content:center}}
.hero__visual{position:relative;aspect-ratio:5/4;background:linear-gradient(135deg,var(--color-primary),#164a7d);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;padding:var(--sp-8);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.hero__visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(245,130,32,.35),transparent 55%)}
.hero__visual .float-card{position:relative;background:rgba(255,255,255,.95);color:var(--color-text);border-radius:var(--radius-lg);padding:var(--sp-4);box-shadow:var(--shadow-md);max-width:280px}

/* ============ Auth pages ============ */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:900px){.auth{grid-template-columns:1fr}}
.auth__panel{background:linear-gradient(135deg,var(--color-primary),#0a2f52);color:#fff;padding:var(--sp-16);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth__panel::after{content:"";position:absolute;bottom:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.28),transparent 70%)}
@media(max-width:900px){.auth__panel{display:none}}
.auth__panel h2{color:#fff;font-size:var(--fs-3xl);margin-bottom:var(--sp-4);position:relative}
.auth__panel p{color:rgba(255,255,255,.8);position:relative}
.auth__form-wrap{padding:var(--sp-16) var(--sp-8);display:flex;align-items:center;justify-content:center;background:#fff}
.auth__form{width:100%;max-width:440px}
.auth__form .brand{margin-bottom:var(--sp-8)}
.auth__form h1{font-size:var(--fs-2xl);margin-bottom:var(--sp-2)}
.auth__form .sub{color:var(--color-muted);margin-bottom:var(--sp-8)}
.auth__form .foot{margin-top:var(--sp-6);text-align:center;font-size:var(--sp-sm);color:var(--color-muted)}

/* ============ App shell (dashboards) ============ */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--color-bg)}
.sidebar{background:#fff;border-right:1px solid var(--color-border);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-6);position:sticky;top:0;height:100vh}
.sidebar .brand{padding:0; margin:0; border-bottom:1px solid var(--color-border)}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar__nav a{display:flex;align-items:center;gap:var(--sp-3);padding:.65rem .85rem;border-radius:var(--radius-md);color:var(--color-text);font-size:var(--fs-sm);font-weight:500;transition:background var(--transition),color var(--transition)}
.sidebar__nav a:hover{background:var(--color-bg)}
.sidebar__nav a.active{background:var(--color-primary-50);color:var(--color-primary)}
.sidebar__nav a.active svg{color:var(--color-primary)}
.sidebar__nav svg{color:var(--color-muted)}
.sidebar__foot{padding-top:var(--sp-4);border-top:1px solid var(--color-border);font-size:var(--fs-xs);color:var(--color-muted)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--color-border);padding:var(--sp-4) var(--sp-8);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4)}
.topbar__search{flex:1;max-width:420px;position:relative}
.topbar__search input{width:100%;padding:.6rem 1rem .6rem 2.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);font-size:var(--fs-sm)}
.topbar__search svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--color-muted)}
.topbar__actions{display:flex;align-items:center;gap:var(--sp-3)}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-sm)}
.icon-btn{width:38px;height:38px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-muted);position:relative;transition:background var(--transition),color var(--transition)}
.icon-btn:hover{background:var(--color-bg);color:var(--color-primary)}
.icon-btn .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;background:var(--color-accent);border-radius:50%;border:2px solid #fff}

.content{padding:var(--sp-8);flex:1}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.page-head h1{font-size:var(--fs-2xl)}
.page-head p{color:var(--color-muted);margin-top:4px;font-size:var(--fs-sm)}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:280px;transform:translateX(-100%);transition:transform var(--transition);z-index:60;height:100vh}
  .sidebar.open{transform:none}
  .content{padding:var(--sp-6)}
  .topbar{padding:var(--sp-4);flex-wrap:wrap;}
  .topbar__search{flex:1 1 100%;order:3;margin-top:var(--sp-2);max-width:none;}
}

/* Chart placeholders */
.chart{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-6);min-height:280px;display:flex;flex-direction:column}
.chart__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-4)}
.chart__head h3{font-size:var(--fs-base)}
.chart__body{flex:1;display:flex;align-items:flex-end;gap:var(--sp-2);padding-top:var(--sp-4)}
.chart__bar{flex:1;background:linear-gradient(180deg,var(--color-accent),var(--color-primary));border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:20px;transition:opacity var(--transition)}
.chart__bar:hover{opacity:.85}

/* Course page */
.course-hero{background:linear-gradient(135deg,var(--color-primary),#0a2f52);color:#fff;padding:var(--sp-16) 0 120px 0}
.course-hero .breadcrumbs{color:rgba(255,255,255,.7)}
.course-hero .breadcrumbs a{color:rgba(255,255,255,.85)}
.course-hero h1{color:#fff;font-size:var(--fs-4xl);margin-bottom:var(--sp-4)}
.course-hero p{color:rgba(255,255,255,.85);max-width:640px}
.course-meta{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-6);color:rgba(255,255,255,.9);font-size:var(--fs-sm)}
.course-meta span{display:flex;align-items:center;gap:6px}
.course-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--sp-8);margin-top:-80px;position:relative;z-index:2}
@media(max-width:900px){.course-layout{grid-template-columns:1fr}}
.buy-card{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}
.buy-card__media{aspect-ratio:16/10;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-primary),var(--color-accent));margin-bottom:var(--sp-4)}
.buy-card__price{font-size:var(--fs-3xl);font-weight:700;color:var(--color-primary)}
.buy-card ul{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--color-muted)}
.buy-card ul li{display:flex;justify-content:space-between}

/* Countdown */
.countdown{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.countdown__cell{flex:1;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-3);text-align:center}
.countdown__num{font-size:var(--fs-2xl);font-weight:700;color:var(--color-primary)}
.countdown__lbl{font-size:var(--fs-xs);color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em}