/* ═══════════════════════════════════
   LEARN / ROADMAP SIDEBAR
═══════════════════════════════════ */
#screen-learn{padding-top:62px;background:var(--bg)}
.learn-layout{display:grid;grid-template-columns:272px 1fr}
@media(max-width:760px){
  .learn-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .learn-welcome{display:none}
}

.sidebar{
  background:var(--bg2);border-left:1px solid var(--border);
  padding:22px 14px;position:sticky;top:62px;
  height:calc(100vh - 62px);overflow-y:auto;
}
.sb-profile{
  display:flex;align-items:center;gap:11px;
  padding:13px;background:var(--card2);border:1px solid var(--border);
  border-radius:14px;margin-bottom:18px;
}
.sb-avatar{
  width:48px;height:48px;border-radius:13px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.sb-avatar svg{width:38px;height:38px}
.sb-name{font-size:13px;font-weight:800}
.sb-level{font-size:11px;color:var(--muted);margin-top:1px}
.xp-bar-wrap{margin-top:7px}
.xp-bar-label{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-bottom:3px}
.xp-bar-track{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.xp-bar-fill{height:100%;border-radius:3px;background:var(--grad);transition:width .7s ease}

.sb-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px}
.sb-stat{
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:9px 8px;text-align:center;
}
.sb-stat-v{font-size:16px;font-weight:900}
.sb-stat-l{font-size:9.5px;color:var(--muted);margin-top:1px}
.sb-stat.s{color:var(--amber)}
.sb-stat.c .sb-stat-v{color:var(--green)}

.sb-sec{font-size:10px;font-weight:800;color:var(--dim);letter-spacing:1.4px;margin-bottom:9px;padding-right:2px}
.rm-mini{display:flex;flex-direction:column;gap:0}
.rm-row{
  display:flex;align-items:center;gap:9px;
  padding:9px 9px;border-radius:10px;cursor:pointer;
  transition:all .18s;position:relative;
}
.rm-row:hover,.rm-row.cur{background:var(--card2)}
.rm-row.cur{border-right:3px solid var(--blue)}
.rm-row.lck{opacity:.32;cursor:not-allowed}
.rm-dot{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.rm-dot.done{background:rgba(34,197,94,.13)}
.rm-dot.open{background:rgba(59,130,246,.16);animation:glow 2.2s ease-in-out infinite}
.rm-dot.lock{background:var(--card)}
.rm-dot svg{width:16px;height:16px}
.rm-text{font-size:11.5px;font-weight:700;flex:1}
.rm-stars{font-size:9px}
.rm-connector{width:2px;height:10px;background:var(--border);margin:0 auto 0 20px}

.learn-main{padding:26px 22px 120px}
.road-title{font-size:18px;font-weight:900;margin-bottom:18px}

/* ── Learn welcome banner ── */
.learn-welcome{
  display:flex;align-items:flex-end;gap:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:12px 16px;margin-bottom:20px;
}
.lw-char{
  flex-shrink:0;width:80px;height:80px;
  filter:drop-shadow(0 4px 16px rgba(99,102,241,.3));
}
.lw-char svg{overflow:visible;}
.lw-bubble{
  flex:1;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.18);
  border-radius:14px 14px 14px 4px;padding:10px 14px;
  font-size:13px;line-height:1.7;color:var(--text);
}
.lea-wrap{padding-bottom:100px;}

.level-node{
  display:flex;align-items:center;gap:18px;
  margin-bottom:28px;animation:fadeUp .45s ease both;
}
.level-node:nth-child(even){flex-direction:row-reverse}
.level-node:nth-child(even) .node-info{text-align:left}

.node-btn{
  width:68px;height:68px;border-radius:50%;flex-shrink:0;
  border:3.5px solid var(--border);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .28s;position:relative;z-index:2;
}
.node-btn svg{width:30px;height:30px}
.node-btn.open{
  border-color:var(--blue);background:rgba(59,130,246,.09);
  box-shadow:0 0 0 5px rgba(59,130,246,.09),0 7px 22px rgba(59,130,246,.28);
}
.node-btn.open:hover{transform:scale(1.12);box-shadow:0 0 0 7px rgba(99,102,241,.13),0 11px 30px rgba(99,102,241,.38)}
.node-btn.done{border-color:var(--green);background:rgba(34,197,94,.07)}
.node-btn.lock{opacity:.3;cursor:not-allowed}
.node-info{flex:1}
.node-title{font-size:15px;font-weight:900;margin-bottom:3px}
.node-sub{font-size:11.5px;color:var(--muted);margin-bottom:7px}
.node-stars{font-size:13px;margin-bottom:6px}
.node-bar{height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;max-width:220px}
.node-bar-fill{height:100%;border-radius:3px;background:var(--grad);transition:width .8s ease}
.node-badge{
  display:inline-flex;align-items:center;gap:4px;margin-top:5px;
  padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;
}
.nb-lock{background:rgba(255,255,255,.05);color:var(--muted)}
.nb-open{background:rgba(59,130,246,.11);color:#93C5FD}
.nb-done{background:rgba(34,197,94,.1);color:#4ade80}

.node-connector{width:3px;height:26px;border-radius:2px;margin:0 auto 0 calc(50% - 1.5px);background:var(--grad)}

/* ══════════════════════════════════════════════════
   WEAKNESS CARD — نقاط الضعف
   ══════════════════════════════════════════════════ */
#weakness-card { margin-bottom: 20px; }

.wk-card {
  border-radius: 20px;
  overflow: hidden;
  font-family: var(--font);
}

/* ── Pending (not enough data) ── */
.wk-pending {
  background: rgba(99,102,241,.07);
  border: 1.5px solid rgba(99,102,241,.18);
  padding: 16px 18px;
}
.wk-pending-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.wk-big-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.wk-title { font-size: 14px; font-weight: 900; color: var(--text); }
.wk-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.wk-sub b { color: var(--text); }
.wk-track {
  height: 7px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: visible;
  position: relative;
}
.wk-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  transition: width .6s ease;
  box-shadow: 0 0 8px rgba(99,102,241,.5);
}
.wk-track-lbl {
  position: absolute;
  left: 0; top: 12px;
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
}

/* ── Perfect (no weak spots) ── */
.wk-perfect {
  background: rgba(16,185,129,.07);
  border: 1.5px solid rgba(16,185,129,.2);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Active (weak spots found) ── */
.wk-active {
  background: var(--card);
  border: 1.5px solid rgba(239,68,68,.25);
  padding: 18px;
  box-shadow: 0 0 24px rgba(239,68,68,.08);
}
.wk-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wk-card-top-left {
  display: flex;
  align-items: center;
  gap: 11px;
}
.wk-badge-alert {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(239,68,68,.35);
}

/* ── Category rows ── */
.wk-cats-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.wk-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wk-cat-icon { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; }
.wk-cat-body { flex: 1; min-width: 0; }
.wk-cat-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.wk-cat-name  { font-size: 13px; font-weight: 800; color: var(--text); }
.wk-cat-stat  { font-size: 11px; font-weight: 800; }
.wk-cat-bar {
  height: 6px;
  background: rgba(255,255,255,.07);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 3px;
}
.wk-cat-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 6px currentColor;
}
.wk-cat-counts { font-size: 9.5px; color: var(--muted); }

/* ── Action button ── */
.wk-btn {
  width: 100%;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 13px;
  border-radius: 14px;
  border: none;
  box-shadow: 0 6px 20px rgba(239,68,68,.35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.wk-btn:active { transform: translateY(2px); box-shadow: 0 3px 10px rgba(239,68,68,.3); }

/* ── Light mode ── */
body.light .wk-pending  { background: rgba(99,102,241,.06);  border-color: rgba(99,102,241,.2); }
body.light .wk-perfect  { background: rgba(16,185,129,.06);  border-color: rgba(16,185,129,.2); }
body.light .wk-active   { background: #fff; border-color: rgba(239,68,68,.2); box-shadow: 0 4px 20px rgba(239,68,68,.06); }
body.light .wk-track    { background: rgba(0,0,0,.08); }
body.light .wk-cat-bar  { background: rgba(0,0,0,.08); }