/* ============= 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); gap: 10px; }
  .welcome-strip h1 { font-size: 24px; }
  .otp-input { width: 40px !important; height: 50px !important; font-size: 20px !important; }
  .otp-box { gap: 6px !important; }
  .modal { padding: 16px !important; }
  .modal-inner { border-radius: 12px !important; }
}

@media (max-width: 400px) {
  .hero-card { padding: 1.5rem 1.2rem; }
  .hero-card h1 { font-size: clamp(22px, 5vw, 28px) !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-stats > div { padding: 10px 4px; }
  .hero-stats .num { font-size: 18px !important; }
  .hero-stats .lbl { font-size: 9px !important; }
  .otp-input { width: 36px !important; height: 48px !important; font-size: 18px !important; }
  .otp-box { gap: 5px !important; }
  .welcome-strip h1 { font-size: 20px; }
  .sec-title { font-size: clamp(18px, 2vw, 22px) !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{
  width:100% !important; display:block !important;
  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 reports — one card per track (DA = blue, AI = violet) ── */
.assess-reports{ display:block; }
.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);
}
/* AI track gets a violet identity so the two universes read as distinct at a glance. */
#assessment-report-ai{ border-top:4px solid #7c5cff; }
#assessment-report-ai .report-eyebrow{ color:#6b4bd6; }
#assessment-report-ai .rt-num{ color:#6b4bd6; }
#assessment-report-ai .report-growth{ background:#f2eeff; border-color:#ddd1ff; }
#assessment-report-ai .rg-chip{ border-color:#ddd1ff; color:#6b4bd6; }
.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; }

/* hero section assessment button — small, responsive, inline */
.lh-btn-hero{ width:auto !important; display:inline-flex !important; flex:0 0 auto; padding:clamp(11px,2vw,14px) clamp(16px,3vw,22px) !important; font-size:clamp(13px,1.6vw,15px) !important; min-height:44px !important; }
@media(max-width:600px){ .lh-btn-hero{ padding:10px 14px !important; font-size:13px !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%; }
  .welcome-cta{ flex-direction:column; gap:10px; width:100%; }
  .welcome-cta a, .welcome-cta button{ width:100% !important; }
  #discord-pill, .lh-logout{ text-align:center; }
}

/* ── 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; }

/* ── report view button ── */
.ra-view-btn{
  background:transparent; border:none; color:#0a96c7; cursor:pointer;
  font-size:16px; padding:6px 10px; border-radius:8px;
  transition:all .25s ease; min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.ra-view-btn:hover{ background:rgba(10,150,199,.2); transform:scale(1.2); }

/* ── report modal ── */
.modal#report-modal{ background:rgba(24,34,47,.55) !important; backdrop-filter:blur(4px); }
.modal#report-modal.active{ display:flex !important; }
.report-modal-inner{
  max-width:740px; width:100%; background:#fff; border-radius:28px;
  box-shadow:0 25px 100px rgba(24,34,47,.2);
  max-height:90vh; overflow-y:auto;
  animation:slideUpNew .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUpNew{
  from{ transform:translateY(50px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.report-modal-content{ padding:0; }

/* Header Section */
.report-header-section{
  padding:28px 32px 16px;
  border-bottom:1px solid rgba(24,34,47,.08);
}
.report-track-badge{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#0a7ba6;
  background:rgba(10,150,199,.1); display:inline-block; padding:6px 12px; border-radius:8px;
  margin-bottom:8px;
}
.report-date-small{ font-size:13px; color:#9aa1b3; }

/* Hero Score Card */
.hero-score-card{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:32px;
  background:linear-gradient(135deg,#fff8e1 0%,#fff4e9 50%,#fff0e0 100%);
  margin:24px 32px; border-radius:20px; border:2px solid rgba(255,210,80,.4);
  box-shadow:0 8px 32px rgba(255,210,80,.15);
}
.hero-score-left{
  display:flex; flex-direction:column; justify-content:center;
}
.hero-score-display{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:64px; font-weight:900;
  color:#18222f; line-height:1; margin:0; letter-spacing:-.02em;
}
.hero-score-total{ font-size:32px; color:#9aa1b3; margin-left:6px; }
.hero-score-percent{
  font-size:20px; font-weight:800; color:#0a96c7; margin-top:8px;
}
.tier-badge-hero{
  font-size:36px; display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:16px; margin-top:12px;
  font-weight:800; text-align:center;
}
.tier-badge-hero.strong{ background:linear-gradient(135deg,#dff5ec,#c3ead8); }
.tier-badge-hero.jobready{ background:linear-gradient(135deg,#e4f4fb,#c8e8f7); }
.tier-badge-hero.building{ background:linear-gradient(135deg,#fdf0d6,#fae5bf); }
.tier-badge-hero.beginner{ background:linear-gradient(135deg,#eef0f3,#e1e5eb); }

.hero-score-right{
  display:flex; flex-direction:column; justify-content:space-between;
}
.rank-card{
  background:#fff; border:2px solid rgba(24,34,47,.12); border-radius:16px;
  padding:16px; text-align:center; margin-bottom:12px;
}
.rank-label{ font-size:12px; font-weight:700; color:#9aa1b3; text-transform:uppercase; letter-spacing:.05em; }
.rank-value{ font-size:24px; font-weight:900; color:#0a96c7; margin-top:6px; }
.motivation-text{
  font-size:14px; font-weight:600; color:#44515f; line-height:1.6;
  background:rgba(10,150,199,.08); padding:14px; border-radius:12px; border-left:4px solid #0a96c7;
}

/* Report Sections */
.report-section{ padding:0 32px 32px; }
.section-head-icon{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:900;
  color:#18222f; margin:0 0 6px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;
}
.section-head{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:900;
  color:#18222f; margin:0 0 6px; letter-spacing:-.01em;
}
.section-note{ font-size:14px; color:#9aa1b3; margin:0 0 18px; }

/* Category Cards Grid */
.categories-cards-grid{ display:grid; gap:12px; }
.cat-card{
  background:#f8fafb; border-radius:14px; padding:16px;
  border:1px solid rgba(24,34,47,.1); transition:all .25s ease;
}
.cat-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(24,34,47,.1); background:#f0f4f8; }
.cat-header{
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
}
.cat-icon{ font-size:28px; min-width:36px; }
.cat-info{ flex:1; }
.cat-name{ font-weight:700; color:#18222f; font-size:14px; }
.cat-message{ font-size:12px; color:#9aa1b3; margin-top:2px; font-weight:500; }
.cat-score-big{ font-size:16px; font-weight:800; min-width:50px; }
.cat-progress-wrap{
  display:flex; align-items:center; gap:10px;
}
.cat-progress-bar{
  flex:1; height:8px; border-radius:99px; overflow:hidden; border:1px solid rgba(24,34,47,.12);
}
.cat-progress-fill{ height:100%; transition:width .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cat-percent{ font-size:12px; font-weight:800; color:#18222f; min-width:32px; }

/* Growth & Strength Sections */
.report-growth, .report-strength{
  background:#fff; border:2px solid rgba(24,34,47,.12); border-radius:16px;
  padding:20px 24px; margin:12px 0;
}
.report-growth{ border-color:rgba(245,166,35,.3); background:rgba(245,166,35,.05); }
.report-strength{ border-color:rgba(24,163,123,.3); background:rgba(24,163,123,.05); }

.growth-header, .strength-header{
  display:flex; gap:14px; margin-bottom:16px; align-items:flex-start;
}
.growth-emoji, .strength-emoji{ font-size:28px; min-width:36px; }
.growth-header > div, .strength-header > div{ flex:1; }

.chips-list{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.chip{
  display:inline-flex; align-items:center;
  background:#fff; border:1.5px solid #ddd; border-radius:99px;
  padding:8px 16px; font-size:13px; font-weight:700; color:#44515f;
  transition:all .2s ease;
}
.chip:hover{ transform:scale(1.05); }
.growth-chip{ border-color:#f5a623; color:#b3760a; background:#fff8f0; }
.strength-chip{ border-color:#18a37b; color:#18a37b; background:#f0fef5; }

.insight-text{
  font-size:12px; color:#9aa1b3; margin-top:12px; padding-top:12px; border-top:1px solid rgba(24,34,47,.08);
  font-style:italic;
}

/* Footer CTA */
.report-footer{
  text-align:center; padding:32px;
  background:linear-gradient(135deg,rgba(10,150,199,.08),rgba(245,166,35,.08));
  border-top:1px solid rgba(24,34,47,.08);
}
.footer-emoji{ font-size:44px; margin-bottom:12px; display:block; }
.report-footer h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:900;
  color:#18222f; margin:0 0 8px; letter-spacing:-.01em;
}
.report-footer p{ font-size:14px; color:#44515f; margin:0; line-height:1.6; }

/* Loading & Error */
.report-loading, .report-error{
  padding:60px 32px; text-align:center;
  font-size:16px; min-height:400px; display:flex; align-items:center; justify-content:center;
}
.report-loading{ color:#0a96c7; font-weight:600; }
.report-error{ color:#e74c3c; font-weight:700; }

/* Mobile */
@media(max-width:680px){
  .report-modal-inner{ margin:20px; border-radius:20px; }
  .hero-score-card{
    grid-template-columns:1fr; gap:20px; padding:24px; margin:16px 24px;
  }
  .report-header-section, .report-section, .report-footer{
    padding-left:24px; padding-right:24px;
  }
  .section-head-icon, .section-head{ font-size:16px; }
  .cat-card{ padding:14px; }
  .cat-header{ gap:10px; }
  .cat-icon{ font-size:24px; }
  .growth-header, .strength-header{ flex-direction:column; gap:8px; }
}

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