/* =============================================================
   main.css — كل تنسيقات صَوْب
   RTL افتراضي · Dark Theme
   يُستدعى من: index.html
   ============================================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #0b0c10;
      --surface: #1a1a2e;
      --card:    rgba(255,255,255,0.04);
      --border:  rgba(255,255,255,0.08);
      --green:   #00e676;
      --gold:    #d4af37;
      --gold2:   #ffdf70;
      --text:    #e8e8e8;
      --muted:   #7a7a9a;
      --radius:  14px;
    }

    html, body { height: 100%; background: var(--bg); color: var(--text);
      font-family: 'Cairo','Tajawal','Segoe UI',Arial,sans-serif; overflow: hidden; }

    /* ── Shell ── */
    .shell { display:flex; flex-direction:column; height:100vh; padding:14px; gap:14px; }

    /* ── Header ── */
    header { display:flex; align-items:center; gap:18px; background:var(--surface);
      border:1px solid var(--border); border-radius:var(--radius); padding:12px 22px; flex-shrink:0; }
    .logo { display:flex; align-items:center; gap:10px; white-space:nowrap; }
    .logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--gold),var(--gold2));
      border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px;
      box-shadow:0 0 14px rgba(212,175,55,.5); }
    .logo-text { font-size:20px; font-weight:800; letter-spacing:1px; }
    .logo-text span { color:var(--gold); }
    .search-wrap { flex:1; position:relative; }
    .search-wrap input { width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border);
      border-radius:30px; padding:10px 46px 10px 18px; color:var(--text); font-size:14px;
      font-family:inherit; outline:none; transition:border-color .25s,box-shadow .25s; direction:rtl; }
    .search-wrap input::placeholder { color:var(--muted); }
    .search-wrap input:focus { border-color:var(--green); box-shadow:0 0 10px rgba(0,230,118,.2); }
    .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%);
      color:var(--muted); font-size:15px; pointer-events:none; }
    .header-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .badge { font-size:12px; padding:4px 12px; border-radius:20px; font-weight:700; }
    .badge-green { background:rgba(0,230,118,.15); color:var(--green); border:1px solid rgba(0,230,118,.3); }
    .badge-gold  { background:rgba(212,175,55,.15); color:var(--gold);  border:1px solid rgba(212,175,55,.3); }

    /* ── Body Row ── */
    .body-row { display:flex; gap:14px; flex:1; min-height:0; }

    /* ── Sidebar ── */
    .sidebar { width:30%; flex-shrink:0; background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); padding:22px 18px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
    .sidebar-title { font-size:15px; font-weight:700; color:var(--muted); letter-spacing:.5px;
      border-bottom:1px solid var(--border); padding-bottom:10px; }
    .sidebar-title span { color:var(--text); }
    .filter-btn { width:100%; padding:14px 18px; border-radius:var(--radius); border:none; cursor:pointer;
      font-family:inherit; font-size:15px; font-weight:700; display:flex; align-items:center; gap:10px;
      transition:transform .2s,box-shadow .2s; position:relative; overflow:hidden; }
    .filter-btn:hover { transform:translateY(-2px); }
    .filter-btn:active { transform:translateY(0); }
    .btn-rowad { background:linear-gradient(135deg,var(--gold) 0%,#aa7c11 100%); color:#000;
      box-shadow:0 4px 20px rgba(212,175,55,.35); }
    .btn-rowad:hover { box-shadow:0 6px 28px rgba(212,175,55,.6); }
    .btn-rowad.is-active { outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 32px rgba(212,175,55,.9); }
    .btn-rowad .glow-ring { position:absolute; inset:0; border-radius:inherit;
      box-shadow:inset 0 0 20px rgba(255,223,112,.3); pointer-events:none; }
    .btn-research { background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(59,130,246,.1));
      color:#60a5fa; border:2px solid rgba(59,130,246,.6);
      box-shadow:0 0 12px rgba(59,130,246,.15); }
    .btn-research:hover { background:rgba(59,130,246,.35); color:#fff; box-shadow:0 0 24px rgba(59,130,246,.5); }
    .btn-research.is-active { background:rgba(59,130,246,.5); color:#fff;
      box-shadow:0 0 32px rgba(59,130,246,.8); outline:3px solid #fff; outline-offset:2px; }
    .btn-emdad { background:transparent; color:var(--green); border:2px solid var(--green);
      box-shadow:0 0 12px rgba(0,230,118,.15); }
    .btn-emdad:hover { background:var(--green); color:#000; box-shadow:0 0 24px rgba(0,230,118,.5); }
    .btn-emdad.is-active { background:var(--green); color:#000;
      box-shadow:0 0 32px rgba(0,230,118,.8); outline:3px solid #fff; outline-offset:2px; }
    .divider { border:none; border-top:1px solid var(--border); }
    .filter-group { display:flex; flex-direction:column; gap:8px; }
    .filter-label { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:2px; }
    .chip-row { display:flex; flex-wrap:wrap; gap:7px; }
    .chip { padding:5px 13px; border-radius:20px; font-size:12px; font-weight:600;
      border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; transition:all .2s; }
    .chip:hover,.chip.active { border-color:var(--green); color:var(--green); background:rgba(0,230,118,.08); }
    .ielts-slider { display:flex; flex-direction:column; gap:6px; }
    .slider-row { display:flex; align-items:center; justify-content:space-between; }
    .slider-val { font-size:13px; font-weight:700; color:var(--green); }
    input[type="range"] { -webkit-appearance:none; width:100%; height:4px;
      background:linear-gradient(to left,var(--green) 60%,var(--border) 60%);
      border-radius:4px; outline:none; cursor:pointer; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px;
      border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(0,230,118,.7); }
    .stats-row { display:flex; gap:10px; }
    .stat-box { flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center; }
    .stat-num { font-size:22px; font-weight:800; }
    .stat-lbl { font-size:11px; color:var(--muted); margin-top:2px; }
    .stat-green .stat-num { color:var(--green); }
    .stat-gold  .stat-num { color:var(--gold); }

    /* ── Saudi Button ── */
    .btn-saudi {
      width:100%; padding:14px 18px; border-radius:var(--radius); border:2px solid rgba(0,150,60,.5);
      background:linear-gradient(135deg,rgba(0,150,60,.15),rgba(0,100,40,.08));
      color:#4ade80; font-family:inherit; font-size:15px; font-weight:700;
      display:flex; align-items:center; gap:10px; cursor:pointer;
      transition:all .22s; position:relative; overflow:hidden;
    }
    .btn-saudi:hover { border-color:rgba(0,200,80,.8); box-shadow:0 0 18px rgba(0,180,60,.25); transform:translateY(-1px); }
    .btn-private { border-color:rgba(59,130,246,.5) !important; color:#60a5fa !important; background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05)) !important; }
    .btn-private:hover { border-color:rgba(59,130,246,.8) !important; box-shadow:0 0 18px rgba(59,130,246,.25) !important; }
    .btn-private.is-active { background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(59,130,246,.1)) !important; border-color:#60a5fa !important; box-shadow:0 0 24px rgba(59,130,246,.35) !important; color:#fff !important; }
    .btn-partner { border-color:rgba(212,175,55,.5) !important; color:var(--gold) !important; background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05)) !important; }
    .btn-partner:hover { border-color:rgba(212,175,55,.8) !important; box-shadow:0 0 18px rgba(212,175,55,.25) !important; }
    .btn-partner.is-active { background:linear-gradient(135deg,rgba(212,175,55,.3),rgba(212,175,55,.1)) !important; border-color:var(--gold) !important; box-shadow:0 0 24px rgba(212,175,55,.35) !important; color:#fff !important; }
    .btn-saudi.is-active {
      background:linear-gradient(135deg,rgba(0,180,60,.3),rgba(0,130,50,.15));
      border-color:#4ade80; box-shadow:0 0 24px rgba(0,230,118,.35);
      color:#fff; outline:2px solid rgba(0,230,118,.4); outline-offset:2px;
    }

    /* ── Saudi Cards ── */
    .sa-card { border-color:rgba(0,150,60,.25); }
    .sa-card:hover { border-color:rgba(0,200,80,.5); box-shadow:0 0 20px rgba(0,180,60,.15); }
    .sa-glow { background:radial-gradient(circle at 20% 50%, rgba(0,180,60,.08) 0%, transparent 70%); }
    .cpb-saudi { background:rgba(0,150,60,.2); color:#4ade80; border:1px solid rgba(0,180,60,.35); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; margin:3px 0 6px; }
    .cpb-kaust  { background:rgba(99,102,241,.2); color:#818cf8; border:1px solid rgba(99,102,241,.4); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; margin:3px 0 6px; }
    .sa-stats { display:flex; gap:8px; margin-top:4px; }
    .sa-stat { flex:1; text-align:center; }
    .sa-stat-val { font-size:12px; font-weight:800; line-height:1.2; }
    .sa-stat-key { font-size:10px; color:var(--muted); margin-top:2px; }
    .card-rank-badge { font-size:10px; color:var(--muted); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* ── Specializations Nav Button ── */
    .specs-nav-btn {
      display:flex; align-items:center; gap:10px;
      background:linear-gradient(135deg,rgba(0,230,118,.10),rgba(0,230,118,.03));
      border:1px solid rgba(0,230,118,.3); border-radius:12px;
      padding:12px 14px; text-decoration:none; cursor:pointer;
      transition:background .2s, border-color .2s, transform .15s, box-shadow .2s;
    }
    .specs-nav-btn:hover {
      background:linear-gradient(135deg,rgba(0,230,118,.18),rgba(0,230,118,.06));
      border-color:rgba(0,230,118,.6);
      box-shadow:0 0 16px rgba(0,230,118,.2);
      transform:translateY(-1px);
    }
    .specs-nav-icon { font-size:22px; flex-shrink:0; }
    .specs-nav-text { flex:1; }
    .specs-nav-title { font-size:13px; font-weight:800; color:var(--green); }
    .specs-nav-sub { font-size:11px; color:var(--muted); margin-top:2px; }
    .specs-nav-arrow { font-size:16px; color:var(--green); opacity:.7; flex-shrink:0; }

    /* ── Layout: 3 أعمدة (sidebar | map | cards) ── */
    /* في RTL: sidebar يمين · map وسط · cards يسار */
    .map-area { flex:1; background:#0d0f18; border:1px solid var(--border);
      border-radius:var(--radius); position:relative; overflow:hidden; min-width:0; }

    /* ── عمود الكروت (يسار، رأسي) ── */
    .cards-col {
      width:272px; flex-shrink:0;
      overflow-y:auto; overflow-x:hidden;
      display:flex; flex-direction:column; gap:8px;
      padding-left:2px;
    }
    .cards-col::-webkit-scrollbar { width:4px; }
    .cards-col::-webkit-scrollbar-track { background:transparent; }
    .cards-col::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    .map-grid { position:absolute; inset:0;
      background-image:linear-gradient(rgba(0,230,118,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,230,118,.04) 1px,transparent 1px);
      background-size:40px 40px; }
    .pulse-dot { position:absolute; width:12px; height:12px; border-radius:50%; }
    .pulse-dot::before { content:''; position:absolute; inset:0; border-radius:50%; animation:pulse-ring 2s ease-out infinite; border:2px solid currentColor; }
    .pulse-dot.green { background:var(--green); box-shadow:0 0 10px var(--green); color:var(--green); }
    .pulse-dot.gold  { background:var(--gold);  box-shadow:0 0 10px var(--gold);  color:var(--gold); }
    @keyframes pulse-ring { 0%{transform:scale(1);opacity:.8} 100%{transform:scale(3.5);opacity:0} }
    .dot-label { position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:10px;
      font-weight:700; white-space:nowrap; background:rgba(11,12,16,.9); padding:2px 7px;
      border-radius:5px; opacity:0; transition:opacity .2s; pointer-events:none; }
    .pulse-dot:hover .dot-label { opacity:1; }
    .map-overlay-text { position:absolute; bottom:18px; right:20px; font-size:11px; color:var(--muted); }
    .map-overlay-text strong { color:var(--green); }
    /* zoom controls */
    .map-zoom-btn { width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
      background:rgba(13,15,24,.85); color:var(--green); font-size:16px; font-weight:700;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition:background .15s, border-color .15s; backdrop-filter:blur(6px); }
    .map-zoom-btn:hover { background:rgba(0,230,118,.12); border-color:var(--green); }
    /* ── Region bar — شريط الدول الأفقي (أسفل الخريطة) ── */
    .region-bar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 14px 10px;
      overflow-x: auto;
      overflow-y: hidden;
      background: linear-gradient(to top, rgba(11,12,16,.92) 70%, transparent 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      scrollbar-width: none;
    }
    .region-bar::-webkit-scrollbar { display: none; }
    .map-region-btn {
      flex-shrink: 0;
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(26,26,46,.75);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      font-family: 'Cairo','Tajawal',sans-serif;
      cursor: pointer;
      white-space: nowrap;
      transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .15s;
      letter-spacing: .3px;
    }
    .map-region-btn:hover {
      background: rgba(0,230,118,.15);
      color: var(--green);
      border-color: rgba(0,230,118,.5);
      box-shadow: 0 0 10px rgba(0,230,118,.25);
      transform: translateY(-1px);
    }
    .map-region-btn:active { transform: translateY(0); }

    /* ══════════════════════════════════════════════════════════
       بطاقة الجامعة V2 — شعار يسار + شبكة إحصائيات
    ══════════════════════════════════════════════════════════ */
    .uni-card {
      background:var(--card); border:1px solid var(--border);
      border-radius:var(--radius); padding:13px 13px 11px;
      cursor:pointer; position:relative; overflow:hidden;
      transition:border-color .22s, box-shadow .22s, background .22s;
      display:flex; gap:11px; align-items:flex-start; flex-shrink:0;
    }
    .uni-card::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.025),transparent);
      pointer-events:none;
    }
    .uni-card:hover {
      border-color:rgba(212,175,55,.45);
      background:rgba(255,255,255,.055);
      box-shadow:0 4px 22px rgba(212,175,55,.18);
    }
    .uni-card:hover .card-glow { opacity:1; }
    .card-glow {
      position:absolute; top:-30px; right:50%; transform:translateX(50%);
      width:90%; height:70px;
      background:radial-gradient(ellipse,rgba(212,175,55,.14),transparent 70%);
      opacity:0; transition:opacity .3s; pointer-events:none;
    }

    /* ── يسار الكارت: شعار + علم ── */
    .card-left {
      display:flex; flex-direction:column; align-items:center;
      gap:5px; flex-shrink:0;
    }
    .card-left .logo-img {
      width:54px; height:54px; border-radius:12px;
      background:rgba(255,255,255,.92); padding:4px;
      object-fit:contain;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 2px 10px rgba(0,0,0,.5);
    }
    .card-left .flag-img  { width:22px; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.4); }
    .card-left .flag-emoji-fb { font-size:18px; }
    .card-logo-placeholder {
      width:54px; height:54px; border-radius:12px;
      background:rgba(255,255,255,.06); border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:22px;
    }

    /* ── يمين الكارت: اسم + بادج + إحصائيات ── */
    .card-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }

    .card-top-row { display:flex; justify-content:space-between; align-items:flex-start; gap:4px; }
    .card-uni-name { font-size:13px; font-weight:700; line-height:1.35; flex:1; }

    .card-path-badge {
      display:inline-block; font-size:10px; font-weight:700;
      padding:2px 8px; border-radius:8px; width:fit-content;
    }
    .cpb-rowad    { background:rgba(212,175,55,.15); color:var(--gold);  border:1px solid rgba(212,175,55,.28); }
    .cpb-research { background:rgba(59,130,246,.13); color:#60a5fa;      border:1px solid rgba(59,130,246,.28); }
    .cpb-emdad    { background:rgba(0,230,118,.12);  color:var(--green); border:1px solid rgba(0,230,118,.28); }

    /* ── شبكة الإحصائيات 2×2 ── */
    .card-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
    .cstat {
      background:rgba(255,255,255,.038); border:1px solid rgba(255,255,255,.055);
      border-radius:8px; padding:5px 8px;
      display:flex; flex-direction:column; gap:0;
    }
    .cstat-icon { font-size:9px; color:var(--muted); margin-bottom:1px; }
    .cstat-val  { font-size:12px; font-weight:800; line-height:1.25; color:var(--text); }
    .cstat-lbl  { font-size:9px; color:var(--muted); line-height:1.3; }
    .cstat.cstat-ielts  .cstat-val { color:var(--green); }
    .cstat.cstat-rank   .cstat-val { color:#a78bfa; }

    .card-footer { font-size:10px; color:var(--muted); margin-top:1px; }

    /* الـ tag القديمة — محتاجتها في أماكن ثانية */
    .tag-rowad    { background:rgba(212,175,55,.15); color:var(--gold);  border:1px solid rgba(212,175,55,.3); }
    .tag-emdad    { background:rgba(0,230,118,.12);  color:var(--green); border:1px solid rgba(0,230,118,.3); }
    .tag-research { background:rgba(59,130,246,.15); color:#60a5fa; border:1px solid rgba(59,130,246,.3); }
    .ripple { position:absolute; border-radius:50%; width:60px; height:60px;
      background:rgba(212,175,55,.4); transform:scale(0); animation:ripple-anim .5s linear; pointer-events:none; }
    @keyframes ripple-anim { to{transform:scale(6);opacity:0} }

    /* ── Toast ── */
    #toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(80px);
      background:rgba(20,20,40,.97); border:1px solid var(--gold); border-radius:30px; padding:10px 26px;
      font-size:13px; font-weight:600; color:var(--gold); box-shadow:0 4px 24px rgba(212,175,55,.3);
      transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s; opacity:0; z-index:9200; white-space:nowrap; }
    #toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

    /* ════════════════════════════════════════════════════════════
       MODAL - دليل الجامعة
    ════════════════════════════════════════════════════════════ */
    #modalOverlay {
      position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:9000;
      display:none; align-items:center; justify-content:center;
      backdrop-filter:blur(6px);
      animation:fadeIn .25s ease;
    }
    #modalOverlay.open { display:flex; }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }

    .modal {
      background:#13141f;
      border:1px solid rgba(255,255,255,.1);
      border-radius:20px;
      width:min(820px, 94vw);
      max-height:88vh;
      overflow-y:auto;
      position:relative;
      animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);
      box-shadow:0 24px 80px rgba(0,0,0,.7);
    }
    @keyframes slideUp { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }

    .modal::-webkit-scrollbar { width:5px; }
    .modal::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    /* رأس الموديل */
    .modal-hero {
      padding:28px 28px 20px;
      border-bottom:1px solid var(--border);
      position:relative;
    }
    .modal-hero-bg {
      position:absolute; inset:0; border-radius:20px 20px 0 0;
      background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(0,230,118,.04));
      pointer-events:none;
    }
    .modal-close {
      position:absolute; top:14px; left:16px;
      background:rgba(255,255,255,.07); border:1px solid var(--border);
      border-radius:50%; width:32px; height:32px; cursor:pointer;
      color:var(--muted); font-size:15px; display:flex; align-items:center; justify-content:center;
      transition:all .2s; z-index:2;
    }
    .modal-close:hover { background:rgba(255,255,255,.15); color:#fff; }

    /* ── صف العنوان: شعار + معلومات ── */
    .modal-hero-top {
      display:flex;
      align-items:flex-start;
      gap:18px;
      margin-bottom:14px;
    }

    /* شعار الجامعة — مربع ثابت بجانب المعلومات */
    .modal-logo-slot {
      flex-shrink:0;
      width:72px; height:72px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .modal-logo-slot .logo-img {
      width:60px; height:60px;
      object-fit:contain;
      border-radius:10px;
      padding:4px;
      background:rgba(255,255,255,.9);
    }
    /* إذا ما في شعار — placeholder */
    .modal-logo-slot:empty::before {
      content:'🎓';
      font-size:32px;
    }

    /* عمود المعلومات بجانب الشعار */
    .modal-hero-info {
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:5px;
    }

    /* علم الدولة */
    .modal-flag {
      display:flex; align-items:center; gap:8px;
      margin-bottom:2px;
    }
    .modal-flag .flag-img       { width:28px; height:auto; border-radius:4px; }
    .modal-flag .flag-emoji-fb  { font-size:24px; }
    .flag-emoji                 { font-size:24px; line-height:1; }

    .modal-uni-name { font-size:22px; font-weight:800; line-height:1.25; }
    .modal-subtitle { color:var(--muted); font-size:13px; display:flex; gap:12px; flex-wrap:wrap; margin-top:2px; }
    .modal-subtitle span { display:flex; align-items:center; gap:4px; }

    .modal-badges { display:flex; gap:8px; flex-wrap:wrap; }
    .mbadge { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; }
    .mbadge-gold  { background:rgba(212,175,55,.2); color:var(--gold);  border:1px solid rgba(212,175,55,.4); }
    .mbadge-green { background:rgba(0,230,118,.15); color:var(--green); border:1px solid rgba(0,230,118,.35); }
    .mbadge-purple{ background:rgba(120,80,255,.2); color:#a78bfa; border:1px solid rgba(120,80,255,.4); }
    .mbadge-blue  { background:rgba(59,130,246,.15); color:#60a5fa; border:1px solid rgba(59,130,246,.3); }

    /* محتوى الموديل */
    .modal-body { padding:28px 32px; display:flex; flex-direction:column; gap:24px; }

    .section-title {
      font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase;
      letter-spacing:.8px; margin-bottom:12px;
      display:flex; align-items:center; gap:8px;
    }
    .section-title::after { content:''; flex:1; height:1px; background:var(--border); }

    /* شبكة المعلومات */
    .info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
    .info-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }
    .info-box-label { font-size:11px; color:var(--muted); margin-bottom:5px; }
    .info-box-val { font-size:16px; font-weight:700; }
    .info-box-val.green { color:var(--green); }
    .info-box-val.gold  { color:var(--gold); }
    .info-box-val.purple{ color:#a78bfa; }

    /* التخصصات */
    .spec-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .spec-tag { background:rgba(255,255,255,.05); border:1px solid var(--border);
      border-radius:8px; padding:7px 14px; font-size:13px; color:var(--text); }
    .spec-tag:hover { border-color:var(--green); color:var(--green); cursor:default; }
    a.spec-tag { text-decoration:none; transition:border-color .2s,color .2s,background .2s; }
    a.spec-tag:hover { border-color:var(--gold); color:var(--gold); background:rgba(212,175,55,.1); cursor:pointer; }
    .spec-clickable { cursor:pointer; transition:border-color .2s,color .2s,background .2s; }
    .spec-clickable:hover { border-color:var(--green); color:var(--green); background:rgba(0,230,118,.08); }
    .spec-clickable:hover::after { content:" ←"; font-size:11px; opacity:.7; }

    /* الجدول الزمني */
    .timeline { display:flex; flex-direction:column; gap:0; }
    .tl-item { display:flex; gap:16px; align-items:flex-start; padding:10px 0; position:relative; }
    .tl-item:not(:last-child)::after {
      content:''; position:absolute; right:11px; top:30px; bottom:-10px;
      width:2px; background:var(--border);
    }
    .tl-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; margin-top:1px;
      display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
    .tl-dot.gold  { background:rgba(212,175,55,.2); color:var(--gold);  border:2px solid var(--gold); }
    .tl-dot.green { background:rgba(0,230,118,.15); color:var(--green); border:2px solid var(--green); }
    .tl-dot.gray  { background:rgba(255,255,255,.05); color:var(--muted); border:2px solid var(--border); }
    .tl-content .tl-date { font-size:12px; color:var(--muted); }
    .tl-content .tl-label { font-size:14px; font-weight:600; margin-top:2px; }

    /* مقياس القبول */
    .accept-bar-wrap { display:flex; flex-direction:column; gap:8px; }
    .accept-row { display:flex; align-items:center; gap:12px; }
    .accept-label { width:120px; font-size:12px; color:var(--muted); text-align:right; flex-shrink:0; }
    .accept-track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
    .accept-fill { height:100%; border-radius:4px; transition:width .6s ease; }
    .accept-pct { width:36px; font-size:12px; font-weight:700; color:var(--text); flex-shrink:0; }

    /* ملاحظات */
    .notes-box { background:rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.2);
      border-radius:12px; padding:16px 18px; font-size:13px; line-height:1.9; color:var(--text); }
    .notes-box strong { color:var(--gold); }

    /* أزرار الموقع */
    .modal-footer { padding:0 32px 28px; display:flex; gap:14px; flex-wrap:wrap; }
    .btn-visit { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--gold),#aa7c11);
      color:#000; font-weight:700; font-size:14px; font-family:inherit; padding:12px 28px; border-radius:12px;
      text-decoration:none; border:none; cursor:pointer; transition:box-shadow .25s,transform .2s; }
    .btn-visit:hover { box-shadow:0 0 24px rgba(212,175,55,.5); transform:translateY(-2px); }
    .btn-apply { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#00e676,#00a854);
      color:#000; font-weight:700; font-size:14px; font-family:inherit; padding:12px 28px; border-radius:12px;
      text-decoration:none; border:none; cursor:pointer; transition:box-shadow .25s,transform .2s; }
    .btn-apply:hover { box-shadow:0 0 24px rgba(0,230,118,.5); transform:translateY(-2px); }

    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    /* ══ New: Admission Tabs ══════════════════════════════════ */
    .admission-tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
    .adm-tab { padding:7px 18px; border-radius:20px; border:1px solid var(--border);
      background:transparent; color:var(--muted); font-family:inherit; font-size:13px;
      font-weight:600; cursor:pointer; transition:all .2s; }
    .adm-tab:hover { border-color:var(--gold); color:var(--gold); }
    .adm-tab.active { background:rgba(212,175,55,.15); border-color:var(--gold); color:var(--gold); }
    .adm-panel { display:none; background:rgba(255,255,255,.03); border:1px solid var(--border);
      border-radius:12px; padding:16px 18px; font-size:13px; line-height:1.9;
      color:var(--text); white-space:pre-line; }
    .adm-panel.active { display:block; }

    /* ══ New: Language Requirements ══════════════════════════ */
    .lang-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    @media(max-width:540px){.lang-grid{grid-template-columns:1fr;}}
    .lang-box { background:rgba(0,230,118,.06); border:1px solid rgba(0,230,118,.2);
      border-radius:12px; padding:14px 16px; }
    .lang-box-label { font-size:11px; color:var(--muted); margin-bottom:6px; font-weight:600; }
    .lang-box-val { font-size:13px; font-weight:700; color:var(--green); }

    /* ══ New: Technical Specializations ══════════════════════ */
    .tech-tag { background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.35);
      color:#93c5fd; cursor:default; }
    .tech-tag:hover { background:rgba(59,130,246,.22); border-color:#60a5fa; color:#fff; }

    /* ══ Safety Box ══════════════════════════════════════════ */
    .safety-box { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
    .safety-score { display:flex; align-items:center; gap:10px; }
    .safety-icon { font-size:20px; }
    .safety-num { font-size:22px; font-weight:900; }
    .safety-label { font-size:13px; font-weight:700; }
    .safety-note { font-size:11px; color:var(--muted); line-height:1.6; }
    .safety-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }

    /* ══ Financial Compare Block ═════════════════════════════ */
    .fin-compare { display:flex; gap:12px; }
    .fin-box {
      flex:1; border-radius:12px; padding:14px 16px;
      display:flex; flex-direction:column; gap:5px;
    }
    .fin-green {
      background:linear-gradient(135deg,rgba(0,230,118,.10),rgba(0,230,118,.03));
      border:1px solid rgba(0,230,118,.3);
    }
    .fin-gold {
      background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.03));
      border:1px solid rgba(212,175,55,.3);
    }
    .fin-top { display:flex; align-items:center; gap:7px; }
    .fin-icon { font-size:18px; }
    .fin-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
    .fin-green .fin-title { color:var(--green); }
    .fin-gold  .fin-title { color:var(--gold); }
    .fin-amount { font-size:13px; font-weight:800; line-height:1.4; }
    .fin-green .fin-amount { color:var(--green); }
    .fin-gold  .fin-amount { color:var(--gold); }
    .fin-sub { font-size:11px; color:var(--muted); line-height:1.55; margin-top:2px; }

    /* ══ Admission Accordion ════════════════════════════════ */
    .adm-accordion { display:flex; flex-direction:column; gap:6px; }
    .adm-acc-item { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
    .adm-acc-header {
      width:100%; padding:12px 16px; background:rgba(255,255,255,.03);
      color:var(--text); font-family:inherit; font-size:14px; font-weight:700;
      border:none; cursor:pointer; text-align:right;
      display:flex; align-items:center; justify-content:space-between;
      transition:background .15s, color .15s;
    }
    .adm-acc-header:hover { background:rgba(255,255,255,.06); }
    .adm-acc-item.open .adm-acc-header { background:rgba(0,230,118,.08); color:var(--green); }
    .adm-acc-arrow { transition:transform .25s; font-size:11px; opacity:.55; }
    .adm-acc-item.open .adm-acc-arrow { transform:rotate(180deg); color:var(--green); opacity:1; }
    .adm-acc-body {
      max-height:0; overflow:hidden;
      transition:max-height .32s ease, padding .28s ease;
      padding:0 16px;
      font-size:13px; line-height:1.85; color:var(--muted);
    }
    .adm-acc-item.open .adm-acc-body { max-height:600px; padding:12px 16px 14px; }

    /* ══ New: Stipend Box (legacy — kept for safety) ════════ */
    .stipend-box { background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));
      border:1px solid rgba(212,175,55,.35); border-radius:12px; padding:14px 18px;
      display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700; color:var(--gold); }
    .stipend-box .stipend-icon { font-size:26px; flex-shrink:0; }

    /* ══════════════════════════════════════════════════════════
       COMPARE — شريط المقارنة + مودال + أزرار الكارت
    ══════════════════════════════════════════════════════════ */

    /* ── كارت: زر المقارنة ── */
    .card-footer { color:var(--muted); font-size:11px; margin-top:10px; }
    .card-footer strong { color:var(--text); }
    /* زر المقارنة — في رأس الكارت بجانب العلم */
    .card-header-side { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
    .card-compare-btn {
      width:22px; height:22px; border-radius:50%; flex-shrink:0;
      background:rgba(255,255,255,.06); border:1px solid var(--border);
      color:var(--muted); font-size:13px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:all .2s; line-height:1;
    }
    .card-compare-btn:hover {
      background:rgba(212,175,55,.18); border-color:var(--gold);
      color:var(--gold); transform:scale(1.2);
    }
    .card-compare-btn.in-compare {
      background:rgba(212,175,55,.28); border-color:var(--gold);
      color:var(--gold); box-shadow:0 0 10px rgba(212,175,55,.45);
    }

    /* ── شريط المقارنة (fixed bottom) ── */
    .compare-bar {
      position:fixed; bottom:0; left:0; right:0; z-index:900;
      background:rgba(13,14,22,.97); border-top:1px solid rgba(212,175,55,.5);
      padding:10px 20px;
      font-family:'Segoe UI','Cairo','Tajawal',Arial,sans-serif;
      transform:translateY(100%);
      transition:transform .4s cubic-bezier(.34,1.56,.64,1);
      backdrop-filter:blur(14px);
      box-shadow:0 -6px 30px rgba(212,175,55,.18);
    }
    .compare-bar.visible { transform:translateY(0); }
    .compare-bar-inner {
      display:flex; align-items:center; gap:14px;
      max-width:1300px; margin:0 auto;
    }
    .compare-bar-title {
      font-size:13px; font-weight:800; color:var(--gold); flex-shrink:0;
    }
    .compare-slots { display:flex; gap:10px; flex:1; }
    .cmp-slot {
      flex:1; max-width:300px; border-radius:10px; padding:7px 12px;
      display:flex; align-items:center; gap:8px; font-size:12px; min-width:0;
    }
    .cmp-slot.filled {
      background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.4); color:var(--text);
    }
    .cmp-slot.empty {
      background:rgba(255,255,255,.03); border:1px dashed var(--border);
      color:var(--muted); justify-content:center;
    }
    .cmp-slot-flag  { font-size:18px; flex-shrink:0; }
    .cmp-slot-name  { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
    .cmp-slot-remove {
      background:none; border:none; color:var(--muted); cursor:pointer;
      font-size:12px; padding:0 2px; flex-shrink:0; transition:color .2s;
    }
    .cmp-slot-remove:hover { color:#f87171; }
    .compare-bar-actions { display:flex; gap:9px; flex-shrink:0; }
    .btn-cmp-now {
      background:linear-gradient(135deg,var(--gold),#aa7c11); color:#000;
      font-weight:800; font-size:13px; font-family:inherit;
      border:none; border-radius:10px; padding:9px 20px; cursor:pointer;
      transition:box-shadow .2s, opacity .2s;
    }
    .btn-cmp-now:disabled { opacity:.35; cursor:not-allowed; }
    .btn-cmp-now:not(:disabled):hover { box-shadow:0 0 22px rgba(212,175,55,.6); }
    .btn-cmp-clear {
      background:transparent; color:var(--muted); font-family:inherit;
      font-size:13px; border:1px solid var(--border); border-radius:10px;
      padding:9px 15px; cursor:pointer; transition:all .2s;
    }
    .btn-cmp-clear:hover { color:#f87171; border-color:#f87171; }

    /* ── مودال المقارنة ── */
    .cmp-modal-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:9100;
      display:none; align-items:center; justify-content:center;
      backdrop-filter:blur(8px);
    }
    .cmp-modal-overlay.open { display:flex; animation:fadeIn .25s ease; }
    .cmp-modal {
      background:#13141f; border:1px solid rgba(212,175,55,.3);
      border-radius:20px; width:min(1120px,96vw); max-height:90vh;
      display:flex; flex-direction:column; overflow:hidden;
      animation:slideUp .3s cubic-bezier(.34,1.56,.64,1);
      box-shadow:0 24px 80px rgba(0,0,0,.75), 0 0 60px rgba(212,175,55,.1);
      font-family:'Segoe UI','Cairo','Tajawal',Arial,sans-serif;
    }
    .cmp-modal-header {
      padding:18px 28px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; justify-content:space-between;
      flex-shrink:0;
      background:linear-gradient(135deg,rgba(212,175,55,.08),transparent);
    }
    .cmp-modal-title { font-size:18px; font-weight:800; color:var(--gold); font-family:inherit; }
    .cmp-modal-body  { overflow:auto; flex:1; font-family:inherit; }
    .cmp-modal-body::-webkit-scrollbar { width:5px; height:5px; }
    .cmp-modal-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    /* ══ جدول المقارنة v2 ══════════════════════════════════════ */

    .cmp2-wrap { padding:24px; min-width:fit-content; }
    .cmp2-table { width:100%; border-collapse:collapse; }
    .cmp2-table, .cmp2-table th, .cmp2-table td,
    .cmp-modal, .cmp-modal-title, .cmp-modal-body,
    .compare-bar, .cmp-slot, .btn-cmp-now, .btn-cmp-clear, .compare-bar-title {
      font-family:'Cairo','Tajawal','Segoe UI',Arial,sans-serif !important;
    }

    /* عمود التسميات — ثابت على اليمين (RTL) */
    .cmp2-th-empty, .cmp2-label {
      position:sticky; right:0; z-index:2; background:#13141f;
    }

    /* ─ رأس الجامعة ─ */
    .cmp2-th-empty { width:170px; }
    .cmp2-th-uni {
      min-width:230px; padding:20px 18px 24px;
      text-align:center; vertical-align:top;
      border-bottom:3px solid transparent;
    }
    .cmp2-th-uni.cp-rowad    { background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(212,175,55,.04)); border-color:rgba(212,175,55,.7); }
    .cmp2-th-uni.cp-research { background:linear-gradient(180deg,rgba(59,130,246,.14),rgba(59,130,246,.03)); border-color:rgba(59,130,246,.6); }
    .cmp2-th-uni.cp-emdad    { background:linear-gradient(180deg,rgba(0,230,118,.12),rgba(0,230,118,.02)); border-color:rgba(0,230,118,.55); }

    .cmp2-rank  { font-size:11px; font-weight:700; color:var(--muted); margin-bottom:10px; letter-spacing:.5px; font-family:inherit; }
    .cmp2-flag  { font-size:44px; line-height:1; margin-bottom:10px; }
    .cmp2-uname { font-size:15px; font-weight:800; line-height:1.4; margin-bottom:5px; color:var(--text); font-family:inherit; }
    .cmp2-uloc  { font-size:12px; color:var(--muted); margin-bottom:12px; font-family:inherit; }
    .cmp2-pbadge {
      display:inline-block; font-size:12px; font-weight:700;
      padding:4px 14px; border-radius:14px; font-family:inherit;
    }
    .cmp2-pbadge.cp-rowad    { background:rgba(212,175,55,.2);  color:var(--gold);  }
    .cmp2-pbadge.cp-research { background:rgba(59,130,246,.2);  color:#60a5fa;      }
    .cmp2-pbadge.cp-emdad    { background:rgba(0,230,118,.15);  color:var(--green); }

    /* ─ صف عنوان القسم ─ */
    .cmp2-sec-row { }
    .cmp2-sec-title {
      padding:10px 18px 9px;
      font-size:11px; font-weight:800; color:var(--muted);
      letter-spacing:.7px; text-transform:uppercase;
      background:rgba(255,255,255,.03);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      font-family:inherit;
    }

    /* ─ عمود التسميات ─ */
    .cmp2-label {
      font-size:12px; color:var(--muted); font-weight:600;
      padding:13px 10px 13px 22px; white-space:nowrap;
      border-left:2px solid rgba(255,255,255,.06);
      font-family:inherit;
    }

    /* ─ خلايا البيانات ─ */
    .cmp2-cell { text-align:center; padding:10px 16px; vertical-align:middle; font-family:inherit; }
    .cmp2-val  { font-size:13px; font-weight:700; color:var(--text); font-family:inherit; }

    .cmp2-alt .cmp2-cell,
    .cmp2-alt .cmp2-label { background:rgba(255,255,255,.022); }
    .cmp2-alt .cmp2-label { background:#14152a; }

    /* أفضل قيمة */
    .cmp2-best              { background:rgba(0,230,118,.09)   !important; }
    .cmp2-best  .cmp2-val   { color:var(--green); font-weight:800; }
    /* أسوأ قيمة */
    .cmp2-worst             { background:rgba(248,113,113,.08) !important; }
    .cmp2-worst .cmp2-val   { color:#f87171; }

    /* ─ شريط التقدم ─ */
    .cmp2-bar {
      width:75%; max-width:110px; margin:6px auto 0;
      height:5px; background:rgba(255,255,255,.08);
      border-radius:3px; overflow:hidden;
    }
    .cmp2-bar-fill { height:100%; border-radius:3px; transition:width .7s ease; }

    /* ══════════════════════════════════════════════════════════
       صور العلم والشعار — مشتركة بين الكارت والمودال والمقارنة
    ══════════════════════════════════════════════════════════ */

    /* ── صورة علم الدولة ── */
    .flag-img {
      display:inline-block; vertical-align:middle;
      border-radius:3px;
      box-shadow:0 1px 4px rgba(0,0,0,.45);
      object-fit:cover;
    }
    .flag-emoji-fb { font-size:20px; line-height:1; }

    /* ── شعار الجامعة (Clearbit) ── */
    .logo-img {
      display:inline-block; vertical-align:middle;
      border-radius:8px;
      background:rgba(255,255,255,.92);
      padding:3px;
      object-fit:contain;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 2px 8px rgba(0,0,0,.5);
    }

    /* ── كارت: علم + شعار ── */
    .card-media {
      display:flex; align-items:center; gap:5px;
      justify-content:flex-end;
      flex-wrap:wrap;
      max-width:72px;
    }
    .card-media .logo-img { border-radius:6px; }

    /* ── مودال: علم (صف صورة + إيموجي) ── */
    /* (modal-logo-slot styles moved to modal-hero section above) */

    /* ══════════════════════════════════════════════════════════
       💬 MENTOR — Auth + قائمة المرشدين + شات
    ══════════════════════════════════════════════════════════ */

    .mentor-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,.8);
      backdrop-filter: blur(8px);
      z-index: 9500;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .mentor-modal {
      background: #13141f;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 20px;
      padding: 32px;
      width: 100%;
      max-width: 420px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      animation: slideUp .25s ease;
    }
    .mentor-modal-wide { max-width: 560px; }
    .mentor-modal-chat { max-width: 500px; padding: 0; display: flex; flex-direction: column; height: 580px; }

    .mentor-modal-close {
      position: absolute; top: 14px; left: 16px;
      background: rgba(255,255,255,.07); border: 1px solid var(--border);
      border-radius: 50%; width: 32px; height: 32px;
      color: var(--muted); font-size: 15px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .2s;
    }
    .mentor-modal-close:hover { background: rgba(255,255,255,.15); color: #fff; }

    .mentor-modal-title {
      font-size: 20px; font-weight: 800;
      margin-bottom: 6px; padding-left: 44px;
    }
    .mentor-modal-subtitle {
      font-size: 13px; color: var(--muted); margin-bottom: 20px;
    }

    /* ── Auth tabs ── */
    .auth-tabs {
      display: flex; gap: 8px; margin-bottom: 20px;
      border-bottom: 1px solid var(--border); padding-bottom: 12px;
    }
    .auth-tab {
      background: none; border: 1px solid var(--border);
      border-radius: 20px; padding: 6px 18px;
      color: var(--muted); font-size: 13px; cursor: pointer;
      font-family: inherit; transition: all .2s;
    }
    .auth-tab.active {
      background: rgba(212,175,55,.15);
      border-color: var(--gold); color: var(--gold);
    }
    .auth-panel { display: none; flex-direction: column; gap: 12px; }
    .auth-panel.active { display: flex; }

    .mentor-input {
      width: 100%; padding: 12px 16px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border); border-radius: 10px;
      color: #fff; font-size: 14px; font-family: inherit;
      outline: none; transition: border .2s;
      box-sizing: border-box;
    }
    .mentor-input:focus { border-color: var(--gold); }
    .mentor-input::placeholder { color: var(--muted); }

    .mentor-btn-primary {
      width: 100%; padding: 13px;
      background: linear-gradient(135deg, rgba(212,175,55,.3), rgba(212,175,55,.15));
      border: 1px solid rgba(212,175,55,.5);
      border-radius: 12px; color: var(--gold);
      font-size: 15px; font-weight: 700;
      font-family: inherit; cursor: pointer;
      transition: all .2s;
    }
    .mentor-btn-primary:hover { background: rgba(212,175,55,.35); }

    .auth-error { font-size: 12px; color: #f87171; min-height: 16px; }

    /* ── زر تواصل في modal الجامعة ── */
    .btn-mentor {
      padding: 10px 20px;
      background: linear-gradient(135deg, rgba(0,230,118,.2), rgba(0,230,118,.1));
      border: 1px solid rgba(0,230,118,.4);
      border-radius: 10px; color: var(--green);
      font-size: 13px; font-weight: 700;
      font-family: inherit; cursor: pointer;
      transition: all .2s;
    }
    .btn-mentor:hover { background: rgba(0,230,118,.3); box-shadow: 0 0 14px rgba(0,230,118,.25); }

    /* ── قائمة المرشدين ── */
    .mentors-list { display: flex; flex-direction: column; gap: 12px; }
    .mentor-loading, .mentor-empty {
      text-align: center; color: var(--muted);
      padding: 32px; font-size: 14px;
    }

    .mentor-card {
      display: flex; align-items: center; gap: 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border); border-radius: 14px;
      padding: 14px; transition: all .2s;
    }
    .mentor-card:hover { border-color: rgba(0,230,118,.4); background: rgba(0,230,118,.04); }
    .mentor-card.unavailable { opacity: .5; }

    .mentor-avatar {
      width: 48px; height: 48px; flex-shrink: 0;
      background: linear-gradient(135deg, var(--gold), #a06000);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 800; color: #0a0b0e;
    }
    .mentor-info { flex: 1; min-width: 0; }
    .mentor-name  { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
    .mentor-major { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
    .mentor-bio   { font-size: 12px; color: #888; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mentor-rating { font-size: 11px; color: var(--muted); }

    .mentor-chat-btn {
      padding: 8px 16px; flex-shrink: 0;
      background: rgba(0,230,118,.15);
      border: 1px solid rgba(0,230,118,.35);
      border-radius: 20px; color: var(--green);
      font-size: 12px; font-weight: 700;
      font-family: inherit; cursor: pointer;
      transition: all .2s;
    }
    .mentor-chat-btn:hover:not(:disabled) { background: rgba(0,230,118,.3); }
    .mentor-chat-btn:disabled { opacity: .5; cursor: default; border-color: #f87171; color: #f87171; background: rgba(248,113,113,.1); }

    /* ── شات ── */
    .chat-header {
      display: flex; align-items: center; gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: 20px 20px 0 0;
      position: relative;
    }
    .chat-header-info { flex: 1; }
    .chat-mentor-name { font-size: 15px; font-weight: 700; }
    .chat-mentor-uni  { font-size: 12px; color: var(--muted); }

    .chat-timer {
      font-size: 18px; font-weight: 800;
      color: var(--green); font-variant-numeric: tabular-nums;
      background: rgba(0,230,118,.1);
      border: 1px solid rgba(0,230,118,.3);
      border-radius: 10px; padding: 4px 12px;
      transition: color .3s;
    }

    .chat-messages {
      flex: 1; overflow-y: auto; padding: 16px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .chat-messages::-webkit-scrollbar { width: 4px; }
    .chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    .chat-welcome {
      text-align: center; color: var(--muted);
      font-size: 13px; padding: 8px;
      background: rgba(255,255,255,.04);
      border-radius: 10px;
    }

    .chat-msg { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
    .chat-msg-me     { align-self: flex-start; background: rgba(212,175,55,.2); border: 1px solid rgba(212,175,55,.3); border-radius: 14px 14px 0 14px; }
    .chat-msg-mentor { align-self: flex-end;   background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.3); border-radius: 14px 14px 14px 0; }
    .chat-msg-system { align-self: center; background: rgba(255,255,255,.06); border: 1px solid var(--border); font-size: 12px; color: var(--muted); border-radius: 20px; padding: 6px 14px; }

    .chat-input-row {
      display: flex; gap: 8px; padding: 12px 16px;
      border-top: 1px solid var(--border);
      background: rgba(255,255,255,.02);
      border-radius: 0 0 20px 20px;
    }
    .chat-input {
      flex: 1; padding: 10px 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--border); border-radius: 10px;
      color: #fff; font-size: 14px; font-family: inherit;
      outline: none; transition: border .2s;
    }
    .chat-input:focus { border-color: var(--gold); }
    .chat-input::placeholder { color: var(--muted); }
    .chat-input:disabled { opacity: .5; }

    .chat-send-btn {
      padding: 10px 18px;
      background: rgba(212,175,55,.2);
      border: 1px solid rgba(212,175,55,.4);
      border-radius: 10px; color: var(--gold);
      font-size: 13px; font-weight: 700;
      font-family: inherit; cursor: pointer;
      transition: all .2s;
    }
    .chat-send-btn:hover:not(:disabled) { background: rgba(212,175,55,.35); }
    .chat-send-btn:disabled { opacity: .4; cursor: default; }

    /* ── مودال المقارنة: علم + شعار في رأس العمود ── */
    .cmp2-media-row {
      display:flex; align-items:center; justify-content:center;
      gap:8px; margin-bottom:10px; flex-wrap:wrap;
    }
    .cmp2-media-row .flag-img { width:26px; border-radius:3px; }
    .cmp2-media-row .logo-img {
      width:36px; height:36px;
      border-radius:8px;
      background:rgba(255,255,255,.92);
      padding:3px;
      object-fit:contain;
      border:1px solid rgba(255,255,255,.2);
      box-shadow:0 2px 10px rgba(0,0,0,.45);
    }

    /* ══════════════════════════════════════════════════════════
       🪐 Space Overlay — تأثيرات الكوكب (CSS فقط)
    ══════════════════════════════════════════════════════════ */

    /* Container الكامل */
    .space-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;           /* تحت MapLibre (z-index:1) */
      overflow: hidden;
    }

    /* ── نجوم CSS (تُكمّل نجوم WebGL) ── */
    .css-stars {
      position: absolute;
      inset: 0;
      background-repeat: repeat;
      background-size: 300px 300px;
      opacity: 0;           /* تظهر تدريجياً بـ JS (أو تبقى خفية) */
      animation: stars-fade-in 2.5s ease forwards;
    }
    .css-stars.s1 {
      background-image:
        radial-gradient(1px 1px at  8% 12%, rgba(255,255,255,.85) 0%,transparent 100%),
        radial-gradient(1px 1px at 22% 35%, rgba(255,255,255,.60) 0%,transparent 100%),
        radial-gradient(1px 1px at 45%  5%, rgba(255,255,255,.90) 0%,transparent 100%),
        radial-gradient(1px 1px at 67% 18%, rgba(255,255,255,.75) 0%,transparent 100%),
        radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.55) 0%,transparent 100%),
        radial-gradient(2px 2px at 15% 72%, rgba(255,255,255,.70) 0%,transparent 100%),
        radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,.80) 0%,transparent 100%),
        radial-gradient(2px 2px at 78% 65%, rgba(255,255,255,.65) 0%,transparent 100%),
        radial-gradient(1px 1px at 33% 55%, rgba(255,255,255,.50) 0%,transparent 100%),
        radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,.75) 0%,transparent 100%);
      animation-delay: 0s;
    }
    .css-stars.s2 {
      background-size: 400px 400px;
      background-image:
        radial-gradient(1px 1px at 12% 25%, rgba(180,210,255,.70) 0%,transparent 100%),
        radial-gradient(1px 1px at 38% 60%, rgba(255,255,255,.55) 0%,transparent 100%),
        radial-gradient(2px 2px at 62% 30%, rgba(180,210,255,.80) 0%,transparent 100%),
        radial-gradient(1px 1px at 85% 10%, rgba(255,255,255,.65) 0%,transparent 100%),
        radial-gradient(1px 1px at 72% 78%, rgba(180,210,255,.60) 0%,transparent 100%),
        radial-gradient(2px 2px at 25% 85%, rgba(255,255,255,.75) 0%,transparent 100%),
        radial-gradient(1px 1px at 50% 50%, rgba(180,210,255,.50) 0%,transparent 100%),
        radial-gradient(1px 1px at  5% 90%, rgba(255,255,255,.60) 0%,transparent 100%);
      animation-delay: .4s;
      animation: stars-fade-in 3.5s ease forwards, stars-twinkle 7s ease-in-out 3s infinite alternate;
    }
    .css-stars.s3 {
      background-size: 500px 500px;
      background-image:
        radial-gradient(2px 2px at 18%  8%, rgba(255,240,200,.90) 0%,transparent 100%),
        radial-gradient(1px 1px at 42% 42%, rgba(255,255,255,.60) 0%,transparent 100%),
        radial-gradient(2px 2px at 75% 22%, rgba(255,240,200,.80) 0%,transparent 100%),
        radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,.55) 0%,transparent 100%),
        radial-gradient(1px 1px at 60% 92%, rgba(255,240,200,.70) 0%,transparent 100%),
        radial-gradient(2px 2px at  3% 60%, rgba(255,255,255,.65) 0%,transparent 100%),
        radial-gradient(1px 1px at 30% 75%, rgba(255,240,200,.50) 0%,transparent 100%);
      animation-delay: .8s;
      animation: stars-fade-in 4s ease forwards, stars-twinkle 9s ease-in-out 4s infinite alternate-reverse;
    }

    @keyframes stars-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes stars-twinkle {
      0%   { opacity: .60; }
      40%  { opacity: 1;   }
      70%  { opacity: .75; }
      100% { opacity: .90; }
    }

    /* ── هالة الغلاف الجوي للكوكب ── */
    .planet-halo {
      position: absolute;
      /* مركز الكوكب = وسط الـ container تقريباً */
      top: 50%; left: 50%;
      width: 58cqmin; height: 58cqmin;
      /* fallback للمتصفحات التي لا تدعم cqmin */
      width: clamp(260px, 58cqmin, 600px);
      height: clamp(260px, 58cqmin, 600px);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: transparent;
      box-shadow:
        0 0  30px 10px rgba(80, 140, 255, .14),
        0 0  60px 20px rgba(60, 110, 240, .09),
        0 0 100px 35px rgba(40,  80, 200, .06),
        0 0 160px 55px rgba(20,  50, 160, .04);
      animation: halo-pulse 6s ease-in-out infinite alternate;
      pointer-events: none;
    }

    /* ── حلقة كورونا (خط ضوئي حول الكوكب) ── */
    .planet-corona {
      position: absolute;
      top: 50%; left: 50%;
      width: clamp(266px, 59cqmin, 610px);
      height: clamp(266px, 59cqmin, 610px);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1.5px solid rgba(100, 160, 255, .13);
      box-shadow:
        inset 0 0 20px rgba(80, 140, 255, .08),
              0 0 20px rgba(80, 140, 255, .10);
      animation: corona-spin 40s linear infinite, halo-pulse 6s ease-in-out infinite alternate-reverse;
      pointer-events: none;
    }
    /* نقطتا بريق على حلقة الكورونا */
    .planet-corona::before,
    .planet-corona::after {
      content: '';
      position: absolute;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(180, 210, 255, .85);
      box-shadow: 0 0 8px 3px rgba(140, 190, 255, .6);
      top: -3px; left: 50%;
      transform: translateX(-50%);
    }
    .planet-corona::after {
      top: auto; bottom: -3px; left: 35%;
      width: 3px; height: 3px;
      background: rgba(255, 230, 150, .80);
      box-shadow: 0 0 6px 2px rgba(255, 210, 100, .5);
    }

    @keyframes halo-pulse {
      0%   { opacity: .55; transform: translate(-50%,-50%) scale(.98); }
      100% { opacity: 1;   transform: translate(-50%,-50%) scale(1.01); }
    }
    @keyframes corona-spin {
      from { transform: translate(-50%,-50%) rotate(0deg); }
      to   { transform: translate(-50%,-50%) rotate(360deg); }
    }

    /* Vignette خارجي يُبرز الكوكب ويُعمّق الفضاء */
    #mapArea::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(
        ellipse at 50% 50%,
        transparent 38%,
        rgba(6,7,14,.18) 55%,
        rgba(6,7,14,.55) 75%,
        rgba(6,7,14,.85) 92%,
        rgba(6,7,14,.97) 100%
      );
      pointer-events: none;
      z-index: 2;
    }

    /* ══════════════════════════════════════════════════════════
       MapLibre GL JS — تخصيص الخريطة
    ══════════════════════════════════════════════════════════ */

    /* تأكد أن الـ canvas يملأ الـ container */
    #globeViz canvas { display:block; }

    /* Attribution صغير في الزاوية */
    .maplibregl-ctrl-attrib {
      background: rgba(9,10,18,.75) !important;
      font-size: 9px !important;
      color: rgba(255,255,255,.3) !important;
    }
    .maplibregl-ctrl-attrib a { color: rgba(255,255,255,.4) !important; }
    .maplibregl-ctrl-logo { display: none !important; }

    /* ── Tooltip اسم الجامعة عند التمرير ── */
    .map-hover-tip {
      position: absolute;
      pointer-events: none;
      z-index: 1100;
      background: rgba(11,12,16,.92);
      border: 1px solid var(--gold);
      border-radius: 8px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 700;
      color: var(--gold);
      font-family: 'Cairo','Tajawal',Arial,sans-serif;
      box-shadow: 0 4px 16px rgba(0,0,0,.5);
      white-space: nowrap;
      direction: rtl;
      opacity: 0;
      transition: opacity .15s;
    }

    /* ── Popup يظهر فوق الكورة عند النقر ── */
    .globe-popup {
      display: none;
      position: absolute;
      z-index: 2000;
      background: rgba(13,14,22,.97);
      border: 1px solid rgba(212,175,55,.4);
      border-radius: 14px;
      padding: 16px 18px 14px;
      min-width: 190px;
      max-width: 220px;
      box-shadow: 0 10px 40px rgba(0,0,0,.75);
      font-family: 'Cairo','Tajawal',Arial,sans-serif;
      direction: rtl;
      animation: popup-in .18s ease;
    }
    @keyframes popup-in {
      from { opacity:0; transform:scale(.92) translateY(6px); }
      to   { opacity:1; transform:scale(1)   translateY(0);   }
    }

    /* زر الإغلاق */
    .gp-close {
      position: absolute; top: 10px; left: 12px;
      background: rgba(255,255,255,.07);
      border: 1px solid var(--border);
      border-radius: 50%; width: 24px; height: 24px;
      color: var(--muted); font-size: 12px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .18s;
    }
    .gp-close:hover { background: rgba(255,255,255,.18); color: #fff; }

    /* محتوى الـ popup */
    .sp-flag  { font-size: 30px; line-height: 1; margin-bottom: 6px; }
    .sp-name  { font-size: 14px; font-weight: 800; color: #e8e8e8; margin-bottom: 4px; line-height: 1.35; }
    .sp-loc   { font-size: 11px; color: #7a7a9a; margin-bottom: 3px; }
    .sp-rank  { font-size: 11px; color: #a78bfa; margin-bottom: 2px; font-weight: 700; }
    .sp-path  { font-size: 11px; color: #7a7a9a; margin-bottom: 12px; }

    .sp-open-btn {
      width: 100%; padding: 8px 0;
      background: linear-gradient(135deg,rgba(212,175,55,.22),rgba(212,175,55,.1));
      border: 1px solid rgba(212,175,55,.45);
      border-radius: 10px;
      color: var(--gold); font-size: 12px; font-weight: 700;
      font-family: inherit; cursor: pointer; transition: all .2s;
    }
    .sp-open-btn:hover {
      background: rgba(212,175,55,.3);
      box-shadow: 0 0 14px rgba(212,175,55,.3);
    }

    /* ════════════════════════════════════════════════════════
       RESPONSIVE — Mobile & Tablet
    ════════════════════════════════════════════════════════ */

    /* زر الجوال — مخفي على الـ desktop */
    .mobile-menu-btn {
      display: none;
      background: rgba(255,255,255,.08); border: 1px solid var(--border);
      color: var(--text); font-size: 18px; width: 36px; height: 36px;
      border-radius: 8px; cursor: pointer; flex-shrink: 0;
      transition: background .2s;
    }
    .mobile-menu-btn:hover { background: rgba(255,255,255,.15); }

    .mobile-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.6); z-index: 1100;
      backdrop-filter: blur(3px);
    }
    .mobile-overlay.open { display: block; }

    @media (max-width: 768px) {

      /* ── HTML/Body ── */
      html, body { overflow: hidden; height: 100%; }

      /* ── Header ── */
      header { padding: 8px 14px; gap: 10px; }
      .logo-text { display: none; }
      .header-meta { display: none; }
      .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
      .search-wrap input { font-size: 13px; padding: 8px 36px 8px 12px; }

      /* ── Shell ── */
      .shell { padding: 8px; gap: 8px; }

      /* ── Body Row — تكديس عمودي ── */
      .body-row {
        flex-direction: column;
        gap: 0;
        overflow: hidden;
        position: relative;
      }

      /* ── Sidebar — drawer من اليمين ── */
      .sidebar {
        position: fixed;
        top: 0; right: -100%;
        width: min(85vw, 320px);
        height: 100vh;
        z-index: 1200;
        border-radius: 0;
        border-left: 1px solid var(--border);
        transition: right .3s ease;
        overflow-y: auto;
        padding-top: 60px;
      }
      .sidebar.open { right: 0; }

      /* ── Map — ارتفاع مضغوط ── */
      .map-area {
        height: 240px;
        min-height: 240px;
        flex-shrink: 0;
        border-radius: 12px;
      }

      /* ── شريط الدول — أصغر ── */
      .map-region-btn { font-size: 11px; padding: 5px 10px; }

      /* ── Cards Column — تحت الخريطة ── */
      .cards-col {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 10px;
      }

      /* ── كرت الجامعة — عرض كامل ── */
      .uni-card { width: 100%; }

      /* ── أزرار الزوم ── */
      #btnZoomIn, #btnZoomOut, #btnReset { display: none; }

      /* ── Modal — عرض كامل ── */
      #modalOverlay .modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        border-radius: 0;
        margin: 0;
      }
      .modal-hero { padding: 14px; }
      .modal-body { padding: 14px; }
      .info-grid { grid-template-columns: repeat(2, 1fr); }
      .fin-compare { flex-direction: column; }
      .lang-grid { grid-template-columns: 1fr; }

      /* ── Compare Bar ── */
      .compare-bar { padding: 8px 12px; }
      .compare-bar-title { display: none; }

      /* ── Stats row ── */
      .stats-row { display: none; }

    }

    /* Tablet */
    @media (min-width: 769px) and (max-width: 1100px) {
      .sidebar { width: 25%; }
      .cards-col { width: 220px; }
    }