:root {
    --bg:     #0f1419;
    --card:   #161b22;
    --card2:  #1c2128;
    --deep:   #0d1117;
    --text:   #e8eaed;
    --muted:  #7d8590;
    --line:   #21262d;
    --accent: #2f81f7;
    --green:  #3fb950;
    --red:    #f85149;
  }
  [data-theme="light"] {
    --bg:     #ffffff;
    --card:   #f6f8fa;
    --card2:  #eaeef2;
    --deep:   #eaeef2;
    --text:   #1f2328;
    --muted:  #59636e;
    --line:   #d1d9e0;
    --accent: #0969da;
    --green:  #1a7f37;
    --red:    #cf222e;
  }
  html { background: var(--bg); }
  .themebtn {
    background: var(--card); color: var(--muted);
    border: 1px solid var(--line); padding: 6px 12px;
    border-radius: 8px; font-size: 15px; cursor: pointer;
    font-family: inherit; line-height: 1;
  }
  .themebtn:hover { background: var(--card2); color: var(--text); }
  .backbtn { background: var(--card); color: var(--muted);
             border: 1px solid var(--line); padding: 6px 14px;
             border-radius: 8px; font-size: 13px; cursor: pointer;
             font-family: inherit; }
  .backbtn { min-height: 44px; min-width: 44px; }
  .backbtn:hover { background: var(--card2); color: var(--text); }

  /* جدول المسيرة */
  .career { width:100%; border-collapse:collapse; font-size:13.5px;
            margin-top:6px; }
  .career th { color:var(--muted); font-weight:600; font-size:12px;
               padding:8px 6px; text-align:start; }
  .career th:last-child, .career td.cg { text-align:end; }
  .career td { padding:11px 6px; border-top:1px solid var(--line); }
  .career td.cs { color:var(--muted); font-size:12.5px;
                  white-space:nowrap; }
  .career td.cc { display:flex; align-items:center; gap:8px; }
  .career td.cc img { width:22px; height:22px; object-fit:contain; }
  .career td.cc a { color:var(--text); text-decoration:none; }
  .career td.cc a:hover { color:var(--accent); }
  .career td.cg { font-weight:700; }
  .career tr.ct td { border-top:2px solid var(--line);
                     color:var(--muted); font-size:12.5px; }
  .career tr.ct td.cg { color:var(--accent); font-size:14px; }
  .cwarn { color:var(--muted); font-size:12px; margin-top:8px;
           line-height:1.6; }

  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:"Segoe UI",Tahoma,sans-serif; background:var(--bg);
         color:var(--text); padding:24px 16px; line-height:1.6; }
  .wrap { max-width:820px; margin:0 auto; }
  .topbar { display:flex; align-items:center;
            justify-content:space-between; margin-bottom:14px; }
  .lang { background:var(--card); color:var(--muted);
          border:1px solid var(--line); padding:6px 14px;
          border-radius:8px; font-size:13px; text-decoration:none; }
  .lang:hover { background:var(--card2); color:var(--text); }

  header { text-align:center; margin-bottom:22px; }
  h1 { font-size:26px; line-height:1.3; }
  /* زر متابعة اللاعب (جزء أ، 22 سبتمبر) — نجمة مفرَّغة/معبَّأة،
     نفس أيقونة "المتابَعة" بالشريط السفلي (IC_FOLLOWING) لتناسق
     بصري كامل. بجانب الاسم مباشرة داخل h1 نفسها فتتمركز معه. */
  .followbtn { background:none; border:none; cursor:pointer;
               padding:11px; margin-block:-11px; color:var(--muted);
               vertical-align:middle; margin-inline-start:8px;
               display:inline-flex; }
  .followbtn svg { width:22px; height:22px; display:block;
                    fill:none; stroke:currentColor; stroke-width:1.7;
                    stroke-linecap:round; stroke-linejoin:round;
                    transition:fill .15s, color .15s; }
  .followbtn:hover { color:var(--accent); }
  .followbtn.on { color:var(--accent); }
  .followbtn.on svg { fill:currentColor; }
  .sub { color:var(--muted); font-size:14px; margin-top:6px;
         display:flex; align-items:center; justify-content:center;
         gap:7px; flex-wrap:wrap; }
  .sub img { width:20px; height:20px; object-fit:contain; }
  .sub a { color:var(--muted); text-decoration:none; }
  .sub a:hover { color:var(--accent); }

  .cards { display:flex; flex-wrap:wrap; gap:9px;
           justify-content:center; margin-bottom:22px; }
  .card { background:var(--card); border:1px solid var(--line);
          border-radius:11px; padding:11px 16px; text-align:center;
          min-width:82px; }
  .card .v { font-size:21px; font-weight:700; }
  .card .k { color:var(--muted); font-size:12px; margin-top:2px; }
  .card.hi .v { color:var(--accent); }

  h2 { font-size:16px; margin:24px 0 10px; padding-inline-start:10px;
       border-inline-start:3px solid var(--accent); }
  h3 { font-size:13px; color:var(--muted); margin:16px 0 7px; }

  .grow { background:var(--card); border:1px solid var(--line);
          border-radius:11px; overflow:hidden; }
  .g { display:flex; align-items:center; gap:10px; padding:9px 13px;
       border-bottom:1px solid var(--line); font-size:14px;
       text-decoration:none; color:var(--text); }
  .g:last-child { border-bottom:none; }
  .g:hover { background:var(--card2); }
  .g .min { background:var(--deep); color:var(--accent);
            border-radius:6px; padding:2px 8px; font-size:12px;
            min-width:42px; text-align:center; font-weight:600; }
  .g .vs { flex:1; min-width:0; overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap; }
  .g .dt { color:var(--muted); font-size:12px; white-space:nowrap; }
  .g .tag { background:var(--card2); color:var(--muted);
            border-radius:5px; padding:1px 6px; font-size:12px; }

  .stw { overflow-x:auto; -webkit-overflow-scrolling:touch;
         border:1px solid var(--line); border-radius:11px;
         background:var(--card); }
  .stt { width:100%; border-collapse:collapse; font-size:13px;
         white-space:nowrap; }
  .stt th { background:var(--deep); color:var(--muted);
            font-size:12px; font-weight:600; padding:9px 10px;
            text-align:center; border-bottom:1px solid var(--line); }
  .stt td { padding:9px 10px; text-align:center;
            border-bottom:1px solid var(--line); }
  .stt tbody tr:last-child td { border-bottom:none; }
  .stt tbody tr:hover { background:var(--card2); }
  .stt .sn { text-align:start; font-weight:600;
             position:sticky; inset-inline-start:0;
             background:var(--card); }
  .stt thead .sn { background:var(--deep); }
  .stt .yr { color:var(--muted); font-weight:400; font-size:12px; }

  .seas { margin-bottom:10px; }
  .shead { width:100%; display:flex; align-items:center; gap:9px;
           background:var(--card); border:1px solid var(--line);
           border-radius:11px; padding:11px 14px; cursor:pointer;
           font-family:inherit; color:var(--text); font-size:13px;
           text-align:start; min-height:44px; }
  .shead:hover { background:var(--card2); }
  .sarrow { color:var(--muted); font-size:12px;
            transition:transform .18s; display:inline-block; }
  .seas.open .sarrow { transform:rotate(180deg); }
  .stitle { flex:1; min-width:0; overflow:hidden;
            text-overflow:ellipsis; white-space:nowrap;
            font-weight:600; }
  .scount { color:var(--muted); font-size:12px; white-space:nowrap; }
  .sbody { margin-top:7px; }
  .sbody.hidden { display:none; }
  .g.hidden { display:none; }
  .gmore { display:block; width:100%; margin-top:7px;
           background:var(--card); color:var(--accent);
           border:1px solid var(--line); border-radius:9px;
           padding:8px; font-size:13px; cursor:pointer;
           font-family:inherit; }
  .gmore:hover { background:var(--card2); }

  .note { background:var(--card); border:1px solid var(--line);
          border-radius:10px; padding:13px; color:var(--muted);
          font-size:13px; line-height:1.8; }
  footer { text-align:center; color:var(--muted); font-size:12px;
           margin-top:34px; line-height:1.9; }
  footer a { color:var(--accent); text-decoration:none; }