/* ================= Course detail ================= */
.detail-hero{display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:flex-start;}
@media (max-width:920px){.detail-hero{grid-template-columns:1fr;}}
.detail-thumb{height:220px; border-radius:var(--radius-l); margin-bottom:24px;}
.detail-tabs-content{display:grid; gap:16px;}
.accordion-item{border:1px solid var(--border); border-radius:var(--radius-s); overflow:hidden; margin-bottom:10px;}
.accordion-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; cursor:pointer; background:var(--surface-2);
}
.accordion-head .num{font-family:"Space Grotesk",sans-serif; color:var(--violet); font-weight:700; margin-right:10px;}
.accordion-head .chev{transition:transform .25s ease; color:var(--ink-faint);}
.accordion-item.open .chev{transform:rotate(180deg);}
.accordion-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.accordion-body-inner{padding:14px 18px 18px; color:var(--ink-dim); font-size:.92rem;}
.lesson-row{display:flex; justify-content:space-between; padding:8px 0; font-size:.88rem; color:var(--ink-dim); border-top:1px solid var(--border);}
.lesson-row:first-child{border-top:none;}
.outcome-list{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0;}
@media (max-width:600px){.outcome-list{grid-template-columns:1fr;}}
.outcome-item{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--ink-dim);}
.outcome-item .tick{color:var(--mint); flex-shrink:0;}
.sticky-enroll{position:sticky; top:100px; padding:26px;}
.sticky-enroll .price{font-size:1.8rem;}
.review-item{padding:18px 0; border-top:1px solid var(--border);}
.review-item:first-child{border-top:none;}

/* ================= Store / Cart ================= */
.cart-btn{position:relative;}
.cart-count{
  position:absolute; top:-6px; right:-8px; background:var(--mint); color:#04231b;
  font-size:.68rem; font-weight:700; border-radius:999px; padding:1px 6px; min-width:16px; text-align:center;
}
.cart-drawer{
  position:fixed; top:0; right:0; height:100vh; width:380px; max-width:92vw; z-index:200;
  background:var(--surface); border-left:1px solid var(--border-strong);
  transform:translateX(100%); transition:transform .35s ease;
  display:flex; flex-direction:column;
  box-shadow:-20px 0 50px rgba(0,0,0,.4);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid var(--border);}
.cart-items{flex:1; overflow-y:auto; padding:14px 22px;}
.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border);}
.cart-item-thumb{width:52px;height:52px;border-radius:10px;background:var(--grad-brand); flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.cart-item-info{flex:1;}
.cart-item-info .name{font-weight:600; font-size:.9rem;}
.cart-qty-row{display:flex; align-items:center; gap:10px; margin-top:6px;}
.qty-btn{width:24px;height:24px;border-radius:6px;border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); font-size:.85rem; display:flex;align-items:center;justify-content:center;}
.remove-link{color:var(--ink-faint); font-size:.78rem; text-decoration:underline; margin-top:6px; display:inline-block;}
.cart-foot{padding:20px 22px; border-top:1px solid var(--border);}
.cart-overlay{position:fixed; inset:0; background:rgba(5,5,15,.55); z-index:190; opacity:0; visibility:hidden; transition:opacity .3s ease;}
.cart-overlay.open{opacity:1; visibility:visible;}

/* ================= Dashboard ================= */
.dash-shell{display:grid; grid-template-columns:240px 1fr; gap:0; min-height:80vh;}
@media (max-width:860px){.dash-shell{grid-template-columns:1fr;}}
.dash-sidebar{
  border-right:1px solid var(--border); padding:28px 18px; position:sticky; top:73px; align-self:start; height:calc(100vh - 73px);
}
@media (max-width:860px){.dash-sidebar{position:static; height:auto; border-right:none; border-bottom:1px solid var(--border); display:flex; gap:6px; overflow-x:auto; padding:16px;}}
.dash-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:var(--ink-dim);
  font-size:.9rem; font-weight:500; margin-bottom:4px; white-space:nowrap;
}
.dash-nav a.active, .dash-nav a:hover{background:var(--surface-2); color:var(--ink);}
.dash-main{padding:32px 32px 60px;}
@media (max-width:600px){.dash-main{padding:24px 16px 48px;}}
.resume-card{
  border-radius:var(--radius-l); padding:32px; margin-bottom:32px; position:relative; overflow:hidden;
  background:linear-gradient(120deg,rgba(79,70,229,.25),rgba(45,212,168,.14));
  border:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.progress-track{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:10px;}
.progress-fill{height:100%; border-radius:999px; background:var(--grad-brand);}
.dash-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:700px){.dash-grid{grid-template-columns:1fr;}}
.enrolled-row{display:flex; align-items:center; gap:16px; padding:16px; margin-bottom:12px;}
.enrolled-thumb{width:56px;height:56px;border-radius:12px;background:var(--grad-brand); flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:1.4rem;}
.enrolled-info{flex:1; min-width:0;}
.badge-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:600px){.badge-grid{grid-template-columns:repeat(2,1fr);}}
.badge-item{padding:18px 10px; text-align:center;}
.badge-icon{font-size:1.7rem; margin-bottom:6px;}
.badge-item.locked{opacity:.35;}
.streak-flame{font-size:2rem;}
.kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;}
@media (max-width:700px){.kpi-row{grid-template-columns:1fr;}}
.kpi{padding:20px;}
.kpi .num{font-family:"Space Grotesk",sans-serif; font-size:1.6rem; font-weight:700;}

/* ================= Instructors / About ================= */
.instructor-card .card-body{text-align:center; padding-top:0; margin-top:-38px;}
.instructor-avatar{
  width:76px;height:76px;border-radius:50%; margin:0 auto 12px; border:3px solid var(--void);
  background:var(--grad-brand); display:flex;align-items:center;justify-content:center; color:#fff; font-weight:700; font-size:1.4rem;
  font-family:"Space Grotesk",sans-serif;
}
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:800px){.value-grid{grid-template-columns:1fr;}}
.journey-row{display:flex; gap:24px; align-items:center; margin-bottom:28px;}
@media (max-width:640px){.journey-row{flex-direction:column; align-items:flex-start;}}
.journey-num{font-family:"Space Grotesk",sans-serif; font-size:2rem; font-weight:700; color:var(--violet); min-width:60px;}

/* ================= Auth ================= */
.auth-wrap{min-height:78vh; display:flex; align-items:center; justify-content:center; padding:48px 24px; position:relative;}
.auth-card{width:100%; max-width:420px; padding:38px 34px;}
.auth-switch{text-align:center; margin-top:18px; font-size:.9rem; color:var(--ink-dim);}
.auth-switch a{color:var(--violet); font-weight:600;}
.divider-row{display:flex; align-items:center; gap:10px; margin:22px 0; color:var(--ink-faint); font-size:.82rem;}
.divider-row::before, .divider-row::after{content:""; flex:1; height:1px; background:var(--border);}
.form-msg{padding:12px 14px; border-radius:10px; font-size:.85rem; margin-bottom:16px; display:none;}
.form-msg.show{display:block;}
.form-msg.error{background:rgba(239,68,68,.14); color:#fca5a5; border:1px solid rgba(239,68,68,.3);}
.form-msg.success{background:rgba(45,212,168,.14); color:#5eead4; border:1px solid rgba(45,212,168,.3);}

/* toast */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  padding:14px 22px; border-radius:12px; background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-glass); z-index:300; opacity:0; visibility:hidden; transition:all .3s ease;
  font-size:.9rem; display:flex; align-items:center; gap:10px;
}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);}