/* Exam Lab hub + rewards. Reuses styles.css tokens and primitives. */
.hub-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.hub-side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:#fff;padding:30px 20px;display:flex;flex-direction:column;overflow-y:auto}
.hub-main{display:flex;flex-direction:column;min-width:0}
.hub-back{margin-top:20px}
.hub-level{margin-top:34px;border:1px solid var(--line);border-radius:8px;padding:16px}
.hub-level-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hub-level-head b{font-family:Manrope,var(--font);font-size:16px}
.hub-xp{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.hub-xp b{font-size:32px;font-weight:800;font-variant-numeric:tabular-nums}
.hub-xp span{font-size:12px;color:var(--muted);font-weight:700}
.hub-level .track{margin:10px 0 6px}
.hub-level p{font-size:11.5px}
.hub-streak{margin-top:14px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;background:#f1f5f1;color:var(--muted);font-size:13px;font-weight:600}
.hub-streak b{font-size:17px;color:var(--ink)}
.hub-streak.hot{background:#fdeee9;color:#b3543f}
.hub-streak.hot b{color:#9f3b30}
.hub-side-badges{margin-top:22px}
.badge-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge-chip{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:var(--muted);background:#f1f5f1;opacity:.55}
.badge-chip svg{width:17px;height:17px}
.badge-chip.earned{background:var(--lime);color:var(--ink);opacity:1}
.hub-courses{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.hub-focus .visual-letter{font-size:clamp(34px,4vw,54px);letter-spacing:-2px;line-height:1.05;opacity:.7;white-space:nowrap;overflow:hidden;max-width:180px}
.recent-strip{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.recent-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--paper);font-size:12.5px}
.recent-chip svg{width:14px;height:14px;color:var(--teal)}
.recent-chip b{margin-left:4px;color:var(--good);font-variant-numeric:tabular-nums}

/* Rewards page */
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:26px}
.reward-cell{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:16px;position:relative}
.reward-cell label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.reward-cell b{display:block;font-size:24px;margin:7px 0 2px;font-variant-numeric:tabular-nums}
.reward-cell svg{position:absolute;top:14px;right:14px;width:16px;height:16px;color:var(--teal)}
.badge-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.badge-tile{border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--paper);display:flex;flex-direction:column;gap:6px}
.badge-tile b{font-size:14.5px}
.badge-tile p{font-size:12px;color:var(--muted);line-height:1.5}
.badge-tile small{font-size:11px}
.badge-tile.earned{border-color:#bcd98f;background:#fbfdf4}
.badge-icon{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:#f1f5f1;color:var(--muted);opacity:.6}
.badge-icon.earned{background:var(--lime);color:var(--ink);opacity:1}
.badge-icon svg{width:18px;height:18px}

/* XP toast */
.xp-toast{display:flex;align-items:center;gap:10px;border:1px solid #bcd98f;background:#fbfdf4;box-shadow:0 6px 24px oklch(0 0 0 / 0.12);color:var(--ink)}
.xp-toast b{font-variant-numeric:tabular-nums}
.xp-toast span{font-size:12.5px;color:var(--muted)}

/* micro-specific visual tuning shared by hub cards */
.course-card{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:0;text-decoration:none;color:var(--ink);min-height:196px;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.course-card:hover{border-color:#b9c6bd;box-shadow:0 8px 22px oklch(0 0 0 / 0.07);transform:translateY(-1px)}
.course-card h3{font-size:17px;margin:14px 0 6px}
.course-card p{font-size:12.5px;color:var(--muted);flex:1}
.course-card .chapter-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-top:14px}
.course-card .chapter-foot svg{width:13px;height:13px}
.course-card .track{margin-top:9px}

.tabular-nums{font-variant-numeric:tabular-nums}

/* Hub back-link inside course sidebars */
.hub-link{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:5px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;margin:-4px 0 16px}
.hub-link:hover{background:#f1f5f1;color:var(--ink)}
.hub-link svg{width:15px;height:15px}
.hub-link.mobile-hub{display:none;margin:0;padding:8px;border-radius:6px}

@media(max-width:650px){
  .hub-link{display:none;margin:0}
  .hub-link.mobile-hub{display:flex}
  .topbar .status{gap:10px}
}

@media(max-width:900px){
  .hub-shell{grid-template-columns:1fr}
  .hub-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:16px;align-items:center;padding:18px 20px}
  .hub-side .brand{margin-right:auto}
  .hub-level{margin-top:0;flex:1;min-width:220px;padding:12px 14px}
  .hub-level .hub-xp b{font-size:24px}
  .hub-streak{margin-top:0;padding:10px 12px}
  .hub-side-badges,.hub-side .side-bottom{display:none}
  .hub-back{margin-top:0}
}
@media(max-width:650px){
  .hub-side{padding:14px 16px;gap:10px}
  .hub-main .content{padding:25px 20px 80px}
  .reward-grid{grid-template-columns:repeat(2,1fr)}
  .badge-wall{grid-template-columns:1fr 1fr}
  .hub-focus .visual-letter{display:none}
}
@media print{.hub-side{display:none}}

/* Keep hub cards calm and contained on narrow screens. */
.hub-main .content{min-width:0;overflow-x:hidden}
.hub-courses,.chapters{min-width:0}
.course-card,.chapter{min-width:0;overflow:hidden}
.course-card h3,.chapter h3,.course-card p,.chapter p{overflow-wrap:anywhere}
@media(max-width:650px){
  .hub-main .content{padding-inline:16px}
  .hub-focus .visual-letter{display:none}
  .hub-courses{grid-template-columns:1fr}
}