/* ============= LEARNER HUB STYLES ============= */
:root {
  --bg-1: #07080d;
  --bg-2: #111319;
  --bg-3: #1a1d28;
  --brand-cyan: #00afff;
  --brand-cyan-soft: rgba(0, 175, 255, 0.15);
  --text-light: #f5f5f7;
  --text-dim: #9aa1b3;
  --gold: #ffd451;
  --green: #2ecc71;
  --red: #ff5252;
}

body { background: var(--bg-1); color: var(--text-light); font-family: 'Segoe UI', system-ui, sans-serif; }
.learn-page { padding: 110px 1rem 4rem; max-width: 1180px; margin: 0 auto; }
@media (max-width: 768px) { .learn-page { padding-top: 90px; } }
.hidden { display: none !important; }

/* ---------- LOGIN / OTP HERO ---------- */
.hero-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 2rem 0; }
.hero-card { max-width: 580px; width: 100%; background: linear-gradient(180deg, #111319, #07080d); border: 1px solid rgba(0,175,255,0.2); border-radius: 22px; padding: 3rem 2.5rem; text-align: center; box-shadow: 0 0 60px rgba(0, 175, 255, 0.1); }
.hero-card.narrow { max-width: 460px; }
.hero-badge { display: inline-block; background: var(--brand-cyan-soft); color: var(--brand-cyan); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 99px; margin-bottom: 1rem; letter-spacing: .5px; border: 1px solid rgba(0,175,255,0.3); }
.hero-card h1 { font-size: 28px; font-weight: 800; color: #fff !important; margin-bottom: .75rem; line-height: 1.3; }
.hero-sub { font-size: 15px; color: var(--text-dim) !important; line-height: 1.6; margin-bottom: 1.5rem; }
.hero-note { font-size: 13px; color: var(--text-dim) !important; margin-top: 1rem; }
.hero-note a { color: var(--brand-cyan) !important; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 1.5rem 0; }
.hero-stats > div { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 6px; }
.hero-stats .num { display: block; font-size: 22px; font-weight: 800; color: var(--brand-cyan); }
.hero-stats .lbl { display: block; font-size: 10px; color: var(--text-dim); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

.lh-label { display: block; text-align: left; font-size: 13px; color: var(--text-dim) !important; font-weight: 600; margin-bottom: 6px; }
.lh-input { width: 100% !important; padding: 14px 16px !important; background: rgba(0,0,0,.5) !important; border: 1.5px solid rgba(0,175,255,0.3) !important; border-radius: 12px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 15px !important; margin-bottom: 14px; font-family: inherit; }
.lh-input:focus { outline: none !important; border-color: var(--brand-cyan) !important; box-shadow: 0 0 0 3px rgba(0,175,255,0.15) !important; }
.lh-input::placeholder { color: #6c7596 !important; }
.lh-input:-webkit-autofill { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,.5) inset !important; }
.lh-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.lh-btn-primary { width: 100%; padding: 14px 20px; background: linear-gradient(135deg, var(--brand-cyan), #0080cc); color: #fff !important; border: none; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 18px rgba(0,175,255,0.3); }
.lh-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,175,255,0.5); }
.lh-btn-primary:disabled { background: #2a2d36; color: #888 !important; cursor: not-allowed; box-shadow: none; }
.lh-btn-ghost { padding: 10px 18px; background: transparent; color: var(--text-light) !important; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.lh-btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: var(--brand-cyan); color: var(--brand-cyan) !important; }
.lh-err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* OTP — bulletproof white text */
.otp-box { display: flex !important; gap: 8px !important; justify-content: center !important; margin: 1.5rem 0 .5rem !important; }
.otp-input,
input.otp-input,
input[type="text"].otp-input {
  width: 50px !important; height: 60px !important;
  text-align: center !important;
  font-size: 26px !important; font-weight: 800 !important;
  background: rgba(0,0,0,.6) !important;
  background-color: rgba(0,0,0,.6) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid rgba(0,175,255,0.3) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  caret-color: var(--brand-cyan) !important;
  appearance: none !important; -webkit-appearance: none !important;
  opacity: 1 !important;
}
.otp-input:focus { outline: none !important; border-color: var(--brand-cyan) !important; box-shadow: 0 0 0 3px rgba(0,175,255,0.25) !important; background: rgba(0,0,0,.75) !important; }
.otp-input:-webkit-autofill,
.otp-input:-webkit-autofill:hover,
.otp-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,.6) inset !important;
  caret-color: var(--brand-cyan) !important;
  transition: background-color 99999s ease-in-out 0s;
}
.otp-status { font-size: 13px; color: var(--text-dim); }

/* ---------- DASHBOARD ---------- */
.welcome-strip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem 0 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 2rem; flex-wrap: wrap; }
.welcome-strip h1 { font-size: 32px; font-weight: 800; color: #fff !important; margin: .25rem 0; }
.welcome-sub { font-size: 14px; color: var(--text-dim) !important; }
.welcome-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-q { display: inline-block; background: var(--brand-cyan-soft); color: var(--brand-cyan) !important; font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 700; letter-spacing: .5px; }

.sec-title { font-size: 22px !important; font-weight: 800 !important; color: #fff !important; margin: 2.5rem 0 .25rem; }
.sec-title.premium-title { color: var(--gold) !important; }
.sec-sub { font-size: 14px; color: var(--text-dim) !important; margin-bottom: 1.5rem; }

/* ---------- SKELETON LOADERS ---------- */
@keyframes sk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card { cursor: default !important; pointer-events: none; opacity: 0.7; }
.skeleton-card:hover { transform: none !important; border-color: rgba(255,255,255,0.06) !important; box-shadow: none !important; }
.skeleton-card::before { background: rgba(255,255,255,0.08) !important; }
.sk {
  background: linear-gradient(90deg,
              rgba(255,255,255,0.04) 0%,
              rgba(255,255,255,0.10) 50%,
              rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.sk-emoji { width: 34px; height: 34px; border-radius: 8px; margin-bottom: 12px; }
.sk-line  { height: 12px; margin-bottom: 8px; }
.w-40 { width: 40%; }
.w-60 { width: 60%; }
.w-90 { width: 90%; }

/* ---------- TOPIC CARDS ---------- */
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 2.5rem; }
.topic-card { background: var(--bg-2); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; position: relative; overflow: hidden; }
.topic-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.topic-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.topic-emoji { font-size: 34px; margin-bottom: 8px; }
.topic-name { font-size: 18px; font-weight: 800; color: #fff !important; margin-bottom: 4px; }
.topic-tag { font-size: 12px; color: var(--accent) !important; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.topic-desc { font-size: 13px; color: var(--text-dim) !important; line-height: 1.55; margin-bottom: 12px; }
.topic-meta { font-size: 12px; color: var(--text-dim) !important; display: flex; gap: 12px; }
.topic-meta b { color: #fff !important; font-weight: 700; }

/* ---------- TOPIC EXPAND PANEL ---------- */
.topic-card.open { grid-column: 1 / -1; cursor: default; transform: none !important; }
.topic-card.open .topic-items { display: block; }
.topic-items { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.1); }
.item-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; margin-bottom: 6px; transition: background .15s; cursor: pointer; }
.item-row:hover { background: rgba(255,255,255,0.04); }
.item-row.locked { opacity: 0.6; cursor: not-allowed; }
.item-row.locked:hover { background: rgba(255, 82, 82, 0.05); }
.item-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #000; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.item-row.locked .item-ico { background: rgba(255,82,82,0.2); color: var(--red); }
.item-info { flex: 1; min-width: 0; }
.item-title { font-size: 14px; color: #fff !important; font-weight: 600; }
.item-meta { font-size: 12px; color: var(--text-dim) !important; margin-top: 2px; }
.item-cta { font-size: 12px; color: var(--accent) !important; font-weight: 700; }
.close-topic { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--text-dim); padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; margin-top: 10px; }
.close-topic:hover { color: #fff; border-color: #fff; }

/* ---------- EXPLORE MORE GRID ---------- */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 2.5rem; }
.explore-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-2); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; cursor: pointer; transition: all .15s; text-decoration: none !important; }
.explore-card:hover { transform: translateY(-2px); border-color: var(--brand-cyan); box-shadow: 0 6px 20px rgba(0,175,255,0.15); }
.explore-card .explore-ico { font-size: 28px; flex-shrink: 0; }
.explore-card .explore-body { flex: 1; min-width: 0; }
.explore-card .explore-title { color: #fff !important; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.explore-card .explore-desc { color: var(--text-dim) !important; font-size: 12px; line-height: 1.4; }

/* Author byline on resource items */
.item-author { font-size: 11px; color: var(--text-dim) !important; margin-left: 6px; opacity: 0.8; }

/* ---------- PREMIUM CARDS ---------- */
.premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 2.5rem; }
.premium-card { background: linear-gradient(180deg, #1a1300, #0d0a02); border: 1px solid rgba(255,212,81,0.3); border-radius: 16px; padding: 22px; position: relative; }
.premium-card.highlight { border-color: var(--gold); box-shadow: 0 0 30px rgba(255,212,81,0.15); }
.premium-card .lock { position: absolute; top: 14px; right: 14px; font-size: 18px; color: var(--gold); }
.premium-card h3 { font-size: 18px !important; color: var(--gold) !important; margin-bottom: 4px; font-weight: 800; }
.premium-card .sub { font-size: 12px !important; color: var(--text-dim) !important; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.premium-card .desc { font-size: 13px; color: var(--text-light) !important; line-height: 1.55; margin-bottom: 14px; }
.premium-card .premium-cta { display: inline-block; padding: 10px 18px; background: linear-gradient(135deg, var(--gold), #f5a623); color: #1a1a1a !important; border-radius: 10px; font-weight: 800; font-size: 14px; text-decoration: none; }

/* ---------- COMMUNITY ---------- */
.community-card { display: flex; gap: 24px; align-items: center; background: linear-gradient(135deg, rgba(88,101,242,0.15), rgba(88,101,242,0.05)); border: 1px solid rgba(88,101,242,0.4); border-radius: 18px; padding: 28px; margin: 2.5rem 0; }
.community-emoji { font-size: 64px; }
.community-body h2 { font-size: 22px !important; color: #fff !important; margin: 0 0 6px !important; font-weight: 800 !important; }
.community-body p { font-size: 14px; color: var(--text-light) !important; line-height: 1.6; margin: 0 0 14px; }
.discord-cta { display: inline-block; background: #5865F2; color: #fff !important; padding: 12px 24px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: background .15s; }
.discord-cta:hover { background: #4752c4; }
@media (max-width: 600px) { .community-card { flex-direction: column; text-align: center; padding: 22px; } .community-emoji { font-size: 48px; } }

/* ---------- FOOTER ---------- */
.learn-foot { text-align: center; color: var(--text-dim) !important; font-size: 12px; padding: 3rem 0 1rem; }
.learn-foot a { color: var(--brand-cyan) !important; }

/* ---------- VIDEO MODAL ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px; }
.modal.active { display: flex; }
.modal-inner { background: var(--bg-2); border-radius: 16px; max-width: 960px; width: 100%; position: relative; overflow: hidden; }
.modal-video { position: relative; padding-top: 56.25%; background: #000; }
.modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.modal-title { padding: 18px 22px; font-weight: 700; color: #fff !important; }
.modal-close { position: absolute; top: 14px; right: 18px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 22px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; z-index: 2; }
.modal-close:hover { background: var(--red); }

@media (max-width: 600px) {
  .hero-card { padding: 2rem 1.5rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .welcome-strip h1 { font-size: 24px; }
  .otp-input { width: 40px !important; height: 50px !important; font-size: 20px !important; }
}

/* ============================================================
   ☀️ WARM LIGHT THEME — matches homepage + quiz design system.
   Uses the same tokens: #fffaf4 cream, #0a96c7 brand, Inter body,
   Plus Jakarta Sans headings. Appended last so it wins.
   ============================================================ */
:root{
  --bg-1:#fffaf4; --bg-2:#ffffff; --bg-3:#f6f9fb;
  --brand-cyan:#0a96c7; --brand-cyan-soft:#e4f4fb;
  --text-light:#18222f; --text-dim:#6c7785;
  --gold:#b3760a; --green:#18a37b; --red:#e74c3c;
}

/* ── base ── */
html,body{ background:#fffaf4 !important; color:#18222f !important; }
body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important; }
h1,h2,h3,h4{ font-family:'Plus Jakarta Sans',sans-serif !important; letter-spacing:-.02em; }

/* ── ambient dot-grid (matches quiz page + homepage hero) ── */
body::before{
  content:""; position:fixed; inset:-30px; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(10,150,199,.10) 1.2px, transparent 1.2px);
  background-size:30px 30px;
  animation:learnGrid 22s linear infinite; opacity:.5;
  will-change:transform;
}
@keyframes learnGrid{ from{ transform:translate(0,0); } to{ transform:translate(30px,30px); } }
.learn-page{ position:relative; z-index:1; }
.fdnav,.fdftr{ position:relative; z-index:10; }

/* ── hero / login gate ── */
.hero-card{
  background:#ffffff !important;
  border:1px solid rgba(24,34,47,.10) !important;
  box-shadow:0 4px 40px rgba(24,34,47,.07), 0 0 0 1px rgba(24,34,47,.05) !important;
}
.hero-card h1{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:clamp(26px,3.4vw,38px) !important;
  font-weight:800 !important; line-height:1.12 !important;
  color:#18222f !important;
}
.hero-sub{ font-size:clamp(15px,1.6vw,17px) !important; color:#44515f !important; line-height:1.6 !important; }
.hero-note{ color:#6c7785 !important; font-size:13px !important; }
.hero-note a{ color:#0a7ba6 !important; }

.hero-badge{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  background:#e4f4fb !important; color:#0a7ba6 !important;
  border:1px solid #bfe6f4 !important; border-radius:99px !important;
  padding:7px 14px !important; margin-bottom:20px !important;
}
.hero-stats > div{
  background:#f6f9fb !important; border:1px solid rgba(24,34,47,.08) !important;
  border-radius:13px !important;
}
.hero-stats .num{ color:#0a7ba6 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-size:24px !important; font-weight:800 !important; }
.hero-stats .lbl{ color:#6c7785 !important; font-size:10.5px !important; letter-spacing:.04em !important; }

/* ── inputs ── */
.lh-label{ color:#44515f !important; }
.lh-input{
  background:#fff !important; background-color:#fff !important;
  color:#18222f !important; -webkit-text-fill-color:#18222f !important;
  border:1.5px solid rgba(24,34,47,.16) !important;
}
.lh-input:focus{ border-color:#0a96c7 !important; box-shadow:0 0 0 3px rgba(10,150,199,.15) !important; }
.lh-input::placeholder{ color:#9aa1a8 !important; }
.lh-input:-webkit-autofill{ -webkit-text-fill-color:#18222f !important; -webkit-box-shadow:0 0 0 30px #fff inset !important; }

/* ── buttons ── */
.lh-btn-primary{
  font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important;
  font-size:15px !important; border-radius:13px !important; min-height:52px !important;
  background:linear-gradient(135deg,#0a96c7,#0a7ba6) !important;
  color:#fff !important;
  box-shadow:0 12px 26px -10px rgba(10,150,199,.55) !important;
  transition:transform .15s, box-shadow .15s !important;
}
.lh-btn-primary:hover{ transform:translateY(-2px) !important; box-shadow:0 18px 34px -10px rgba(10,150,199,.7) !important; }
.lh-btn-primary:disabled{ background:#e7e2d9 !important; color:#9aa1a8 !important; box-shadow:none !important; transform:none !important; }
.lh-btn-ghost{
  font-family:'Inter',sans-serif !important; font-weight:600 !important;
  color:#18222f !important; border:1.5px solid rgba(24,34,47,.18) !important;
  background:#fff !important; border-radius:13px !important;
}
.lh-btn-ghost:hover{ background:#e4f4fb !important; border-color:#0a96c7 !important; color:#0a7ba6 !important; }
.lh-err{ color:#c0392b !important; }

/* ── OTP inputs ── */
.otp-input, input.otp-input, input[type="text"].otp-input{
  background:#fff !important; background-color:#fff !important;
  color:#18222f !important; -webkit-text-fill-color:#18222f !important;
  border:1.5px solid rgba(24,34,47,.18) !important;
  caret-color:#0a96c7 !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
}
.otp-input:focus{ border-color:#0a96c7 !important; box-shadow:0 0 0 3px rgba(10,150,199,.2) !important; background:#fff !important; }
.otp-input:-webkit-autofill{ -webkit-text-fill-color:#18222f !important; -webkit-box-shadow:0 0 0 30px #fff inset !important; }
.otp-status{ color:#6c7785 !important; }

/* OTP gate heading matches hero */
#otp-gate .hero-card h1{
  font-size:clamp(22px,2.8vw,32px) !important;
}

/* ── dashboard welcome strip ── */
.welcome-strip{ border-bottom:1px solid rgba(24,34,47,.10) !important; padding-bottom:1.5rem !important; }
.welcome-strip h1{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:clamp(24px,3vw,34px) !important; font-weight:800 !important;
  color:#18222f !important; letter-spacing:-.02em !important;
}
.welcome-sub{ color:#6c7785 !important; font-size:14px !important; }
.badge-q{
  font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important;
  font-size:11px !important; letter-spacing:.05em !important;
  background:#e4f4fb !important; color:#0a7ba6 !important;
  border-radius:6px !important; padding:4px 10px !important;
}
.lh-logout{ font-size:13px !important; }

/* ── quiz attempts trend (mini bar chart; reused by the assessment report) ── */
.qt-head{ font-size:12px; color:#6c7785; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qt-trend{ font-weight:800; }
.qt-trend.up{ color:#18a37b; }
.qt-trend.down{ color:#e74c3c; }
.qt-trend.flat{ color:#6c7785; }
.qt-bars{ display:flex; align-items:flex-end; gap:8px; height:56px; }
.qt-bar-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:22px; cursor:default; }
.qt-bar{ width:18px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#0a96c7,#0a7ba6); display:block; min-height:8px; transition:height .3s ease; }
.qt-bar-wrap:hover .qt-bar{ background:linear-gradient(180deg,#0aa6dc,#0a8bb8); }
.qt-bar-lbl{ font-size:10px; color:#44515f; font-weight:700; margin-top:4px; }

/* ── assessment report (every attempt + trend + growth areas) ── */
.assess-report{
  background:#fff; border:1px solid rgba(24,34,47,.10); border-radius:18px;
  padding:24px; margin-bottom:2.5rem;
  box-shadow:0 1px 4px rgba(24,34,47,.05);
}
.report-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.report-eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#0a7ba6;
}
.report-title{
  font-family:'Plus Jakarta Sans',sans-serif !important; font-size:clamp(18px,2.2vw,24px) !important;
  font-weight:800 !important; color:#18222f !important; margin:4px 0 0 !important; letter-spacing:-.02em;
}
.report-nudge{ font-size:14px; color:#6c7785; line-height:1.55; margin:8px 0 0; max-width:560px; }
/* override lh-btn-primary's full width so the CTA sits inline; ≥44px touch target via lh min-height */
.report-retake{ width:auto !important; flex:0 0 auto; padding-left:22px !important; padding-right:22px !important; }

/* quick-glance stat tiles */
.report-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:18px; }
.report-tile{
  background:#f6f9fb; border:1px solid rgba(24,34,47,.08); border-radius:13px;
  padding:14px 12px; text-align:center;
}
.rt-num{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:#0a7ba6; }
.rt-lbl{ display:block; font-size:11px; color:#6c7785; margin-top:3px; letter-spacing:.02em; }

/* trend block (wraps the reused .qt-* bars) */
.report-trend{ margin-top:20px; padding-top:16px; border-top:1px dashed rgba(24,34,47,.12); }

/* growth areas */
.report-growth{
  margin-top:18px; padding:14px 16px; border-radius:12px;
  background:#e4f4fb; border:1px solid #bfe6f4;
}
.rg-label{ font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; color:#18222f; }
.rg-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.rg-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; border:1px solid #bfe6f4; border-radius:99px;
  padding:5px 12px; font-size:13px; font-weight:600; color:#0a7ba6;
}
.rg-note{ font-size:13px; color:#44515f; line-height:1.5; margin-top:10px; }

/* all-attempts list */
.report-attempts{ margin-top:20px; }
.ra-label{ font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; color:#18222f; margin-bottom:6px; }
.ra-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 4px; border-bottom:1px dashed rgba(24,34,47,.10);
}
.ra-row:last-child{ border-bottom:none; }
.ra-n{ font-weight:700; color:#18222f; min-width:88px; }
.ra-score{ color:#44515f; } .ra-score b{ color:#18222f; }
.ra-date{ margin-left:auto; font-size:12px; color:#9aa1a8; }
.tier-pill{ font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:99px; white-space:nowrap; }
.tier-strong{   background:#dff5ec; color:#18a37b; }
.tier-jobready{ background:#e4f4fb; color:#0a7ba6; }
.tier-building{ background:#fdf0d6; color:#b3760a; }
.tier-beginner{ background:#eef0f3; color:#6c7785; }

@media (max-width:600px){
  .assess-report{ padding:18px; }
  .report-head{ flex-direction:column; align-items:stretch; }
  .report-retake{ width:100% !important; }
  .ra-date{ margin-left:0; width:100%; }
}

/* ── section headings ── */
.sec-title{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:clamp(20px,2.4vw,26px) !important; font-weight:800 !important;
  color:#18222f !important; letter-spacing:-.02em !important;
}
.sec-title.premium-title{ color:#b3760a !important; }
.sec-sub{ color:#6c7785 !important; font-size:14px !important; }

/* ── skeleton loaders ── */
.skeleton-card{ background:#fff !important; border:1px solid rgba(24,34,47,.08) !important; }
.skeleton-card::before{ background:rgba(24,34,47,.06) !important; }
.sk{
  background:linear-gradient(90deg,rgba(24,34,47,.06) 0%,rgba(24,34,47,.12) 50%,rgba(24,34,47,.06) 100%) !important;
  background-size:200% 100% !important;
}

/* ── topic cards ── */
.topic-card{
  background:#fff !important; border:1px solid rgba(24,34,47,.09) !important;
  border-radius:16px !important;
  box-shadow:0 1px 4px rgba(24,34,47,.04) !important;
  transition:transform .2s, border-color .2s, box-shadow .2s !important;
}
.topic-card:hover{
  transform:translateY(-4px) !important;
  border-color:var(--brand-cyan) !important;
  box-shadow:0 16px 32px -16px rgba(10,150,199,.35) !important;
}
.topic-name{ color:#18222f !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; }
.topic-desc{ color:#6c7785 !important; }
.topic-meta{ color:#6c7785 !important; } .topic-meta b{ color:#18222f !important; }
.topic-items{ border-top:1px dashed rgba(24,34,47,.12) !important; }
.item-row:hover{ background:#f3fafd !important; }
.item-row.locked:hover{ background:#fdecea !important; }
.item-title{ color:#18222f !important; font-weight:600 !important; }
.item-meta,.item-author{ color:#6c7785 !important; }
.close-topic{ color:#6c7785 !important; border:1px solid rgba(24,34,47,.16) !important; background:#fff !important; }
.close-topic:hover{ color:#0a7ba6 !important; border-color:#0a96c7 !important; }

/* ── explore cards ── */
.explore-card{
  background:#fff !important; border:1px solid rgba(24,34,47,.09) !important;
  border-radius:14px !important; box-shadow:0 1px 4px rgba(24,34,47,.04) !important;
  transition:all .15s !important;
}
.explore-card:hover{ border-color:#0a96c7 !important; box-shadow:0 8px 22px -10px rgba(10,150,199,.3) !important; transform:translateY(-2px) !important; }
.explore-title{ color:#18222f !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important; }
.explore-desc{ color:#6c7785 !important; }

/* ── premium cards ── */
.premium-card{ background:linear-gradient(180deg,#fff7ec,#fff0e0) !important; border:1px solid #f3dcae !important; }
.premium-card.highlight{ border-color:#e9b765 !important; box-shadow:0 0 30px rgba(245,166,35,.15) !important; }
.premium-card .lock{ color:#b3760a !important; }
.premium-card h3{ color:#b3760a !important; font-family:'Plus Jakarta Sans',sans-serif !important; }
.premium-card .sub{ color:#6c7785 !important; }
.premium-card .desc{ color:#44515f !important; }
.premium-card .premium-cta{ background:linear-gradient(135deg,#f5a623,#ff7a59) !important; color:#fff !important; font-family:'Plus Jakarta Sans',sans-serif !important; }

/* ── community card ── */
.community-card{ background:linear-gradient(135deg,#eef0ff,#f6f7ff) !important; border:1px solid #d3d8ff !important; }
.community-body h2{ color:#18222f !important; font-family:'Plus Jakarta Sans',sans-serif !important; }
.community-body p{ color:#44515f !important; }

/* ── inner footer ── */
.learn-foot{ color:#6c7785 !important; } .learn-foot a{ color:#0a7ba6 !important; }

/* ── video modal ── */
.modal{ background:rgba(15,42,64,.6) !important; }
.modal-inner{ background:#fff !important; box-shadow:0 30px 60px -20px rgba(15,42,64,.4) !important; }
.modal-title{ color:#18222f !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important; }
.modal-close{ background:rgba(24,34,47,.07) !important; border:1px solid rgba(24,34,47,.12) !important; color:#18222f !important; }
.modal-close:hover{ background:#e74c3c !important; color:#fff !important; }

/* ── reduced motion ── */
@media(prefers-reduced-motion:reduce){
  body::before{ animation:none !important; }
}