
  :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); }

  * { 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:900px; margin:0 auto; }
  .topbar { display:flex; align-items:center;
            justify-content:space-between; margin-bottom:14px; }
  .back { display:inline-block; color:var(--accent); text-decoration:none;
          font-size:14px; }
  .back:hover { text-decoration:underline; }
  .lang { background:var(--card); color:var(--muted); border:1px solid var(--line);
          padding:6px 14px; border-radius:8px; font-size:13px;
          text-decoration:none; font-family:inherit; }
  .lang:hover { background:var(--card2); color:var(--text); }
  .club-head { display:flex; align-items:center; gap:16px;
               background:var(--card); border-radius:12px;
               padding:20px; margin-bottom:8px; }
  .club-head img { width:64px; height:64px; object-fit:contain; flex:0 0 auto; }
  /* الاسم الطويل: سطران كحد أقصى ثم «…»؛ «متابعة»+الجرس (.hdract) لا ينكسران ولا ينزلان تحت الاسم (13 أكتوبر) */
  .club-head > div:not(.hdract) { min-width:0; flex:1 1 0; }
  .club-head h1 { font-size:24px; line-height:1.3; overflow-wrap:anywhere;
                  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  @media (max-width:480px) {
    .club-head { gap:10px; padding:14px; }
    .club-head img { width:48px; height:48px; }
    .club-head h1 { font-size:17px; }
    .hdract { gap:6px; }
    .fclubbtn { padding:0 12px; font-size:13px; }
  }
  .club-head .sub { color:var(--muted); font-size:13px; margin-top:2px; }
  /* رأس النادي (13 أكتوبر): «متابعة» + جرس تنبيهات الأهداف جنباً لجنب بطرف الرأس (مكان واحد بدل صف التنبيهات القديم).
     الجرس مخفي حتى يكشفه السكربت (?push=1 / التطبيق المثبَّت / PUSH_PUBLIC)؛ رسالته القصيرة تظهر تحت الرأس عند الحاجة فقط. */
  .hdract { margin-inline-start:auto; flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .fclubbtn { flex:0 0 auto; min-height:44px; padding:0 16px;
              border-radius:22px; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
              background:var(--accent); color:#fff; border:1px solid var(--accent); white-space:nowrap; }
  .fclubbtn.on { background:transparent; color:var(--muted); border-color:var(--line); }
  h2 { font-size:17px; margin:28px 0 12px; padding-inline-start:10px;
       border-inline-start:3px solid var(--accent); }
  h3 { font-size:14px; color:var(--muted); margin:18px 0 8px;
       font-weight:normal; }
  .summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .stat { background:var(--card); border-radius:9px; padding:10px 14px;
          text-align:center; min-width:64px; flex:1; }
  .stat .n { font-size:19px; font-weight:700; }
  .stat .l { font-size:11px; color:var(--muted); }
  .stat.hi .n { color:var(--accent); }
  .stat.click { cursor:pointer; transition:.15s; }
  .stat.click:hover { background:var(--card2); }
  .stat.act { background:var(--accent); }
  .stat.act .n, .stat.act .l { color:var(--bg); }
  .match { background:var(--card); border-radius:10px; padding:12px 10px;
           margin-bottom:7px; display:grid;
           grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
           align-items:center; gap:7px 7px; }
  .match.filt { display:none; }
  .side { display:flex; align-items:center; gap:8px;
          font-size:clamp(13px,3.7vw,14px); min-width:0; }
  .side.away { justify-content:flex-end; }
  a.side { text-decoration:none; color:var(--text); }
  a.side:hover span { color:var(--accent); }
  .side img { width:24px; height:24px; object-fit:contain; flex:0 0 24px; }
  /* أسماء طويلة: سطران كحد أقصى ثم «…»، والشعار ثابت (نفس قاعدة الرئيسية بـmake_site3) */
  .side span { min-width:0; overflow:hidden; line-height:1.25; overflow-wrap:break-word;
               display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .side.away span { text-align:end; }
  .score { font-size:17px; font-weight:700; padding:4px 11px;
           background:var(--deep); border-radius:6px; white-space:nowrap; }
  .score.pst { font-size:13px; padding:4px 8px; color:var(--muted); }
  .date { grid-column:1/-1; text-align:center; color:var(--muted);
          font-size:11px; margin-top:4px; }
  .date a { color:var(--muted); text-decoration:none; }
  .date a:hover { color:var(--accent); }
  .rw { border-inline-start:3px solid var(--green); }
  .rd { border-inline-start:3px solid var(--muted); }
  .rl { border-inline-start:3px solid var(--red); }
  .rn { border-inline-start:3px solid var(--accent); }
  ol { list-style:none; background:var(--card); border-radius:10px; padding:6px; }
  ol li { display:flex; align-items:center; gap:12px; padding:9px 12px;
          border-bottom:1px solid var(--line); font-size:14px; }
  ol li:last-child { border-bottom:none; }
  ol li.hidden { display:none; }
  .num { color:var(--muted); width:20px; }
  .pname { flex:1; min-width:0; overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap; }
  .pname a { color:var(--text); text-decoration:none; }
  .pname a:hover { color:var(--accent); }
  .pgoals { font-weight:700; color:var(--accent); min-width:22px;
            text-align:end; }
  .more { display:block; width:100%; margin:6px 0 14px;
          background:var(--card); color:var(--accent); border:1px solid var(--line);
          padding:11px; border-radius:9px; cursor:pointer;
          font-family:inherit; font-size:14px; }
  .more:hover { background:var(--card2); }
  .hidden { display:none; }
  /* ⚠️ **قائمة المواسم صارت منسدلة** (26 أغسطس) — كانت صفّ
     أزرار يحتل ارتفاعاً كبيراً بخمسة مواسم أو أكثر، ويدفع
     المحتوى الفعلي تحت الطيّة. الآن زر واحد بمستوى "رجوع". */
  .seasonbox { position:relative; }
  .seasonbtn { background:var(--green); color:var(--bg); border:none;
               border-radius:8px; padding:8px 14px; font-size:13px;
               font-weight:600; cursor:pointer; font-family:inherit;
               display:flex; align-items:center; gap:7px; min-height:44px; }
  .seasonbtn .cv { width:7px; height:7px; border-inline-end:2px solid;
                   border-bottom:2px solid; transform:rotate(45deg);
                   margin-top:-3px; transition:transform .18s; }
  .seasonbox.on .seasonbtn .cv { transform:rotate(-135deg);
                                 margin-top:2px; }
  .seasonlist { position:absolute; inset-inline-end:0; top:calc(100% + 6px);
                background:var(--card); border:1px solid var(--line);
                border-radius:10px; padding:6px; min-width:210px;
                display:none; z-index:400;
                box-shadow:0 8px 24px rgba(0,0,0,.4); }
  .seasonbox.on .seasonlist { display:block; }
  /* تبويبان داخل الموسم: مباريات | جدول */
  .itabs { display:flex; gap:0; margin:18px 0 6px;
           border-bottom:1px solid var(--line); }
  .itab { background:none; border:none; color:var(--muted);
          font-family:inherit; font-size:14px; font-weight:600;
          padding:10px 18px; cursor:pointer; min-height:44px;
          border-bottom:2px solid transparent; margin-bottom:-1px; }
  .itab:hover { color:var(--text); }
  .itab.on { color:var(--accent); border-bottom-color:var(--accent); }
  .iview { display:none; }
  .iview.on { display:block; }

  /* جدول الترتيب داخل صفحة النادي */
  .tbl { width:100%; border-collapse:collapse; font-size:13px;
         margin-top:6px; }
  .tbl th { color:var(--muted); font-weight:600; font-size:11px;
            padding:8px 4px; text-align:center; }
  .tbl th.team, .tbl td.team { text-align:start; }
  .tbl td { padding:9px 4px; text-align:center;
            border-top:1px solid var(--line); }
  .tbl td.team { display:flex; align-items:center; gap:8px; }
  .tbl td.team img { width:20px; height:20px; object-fit:contain; }
  .tbl td.team a { color:var(--text); text-decoration:none; }
  .tbl td.team a:hover { color:var(--accent); }
  .tbl td.pts { font-weight:700; }
  .tbl tr.me { background:var(--card2); }
  .tbl tr.me td { font-weight:600; }

  /* الرابط الغامر على بطاقة المباراة */
  .match { position:relative; }
  .match .open { position:absolute; inset:0; z-index:1;
                 border-radius:10px; }
  .match .side, .match .date { position:relative; z-index:2; }
  .match .side { width:max-content; max-width:100%; }
  .match .side.away { margin-inline-start:auto; }

  .stabs { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 4px; }
  .stab { background:var(--card); color:var(--muted); border:1px solid var(--line);
          padding:8px 16px; border-radius:8px; cursor:pointer;
          font-family:inherit; font-size:14px; }
  .stab:hover { background:var(--card2); color:var(--text); }
  .stab.active { background:var(--green); color:var(--bg); border-color:var(--green); }
  /* داخل القائمة المنسدلة: صف كامل العرض لا شارة */
  .seasonlist .stab { display:block; width:100%; text-align:start;
                      border:none; background:none; border-radius:7px;
                      padding:10px 12px; margin:0; }
  .seasonlist .stab:hover { background:var(--card2); }
  .seasonlist .stab.active { background:var(--green); color:var(--bg); }
  .spanel { display:none; }
  .spanel.on { display:block; }
  footer { text-align:center; color:var(--muted); font-size:12px;
           margin-top:36px; line-height:1.9; }

  /* جرس التنبيهات + رابط «تعديل» تحته + الورقة السفلية بأنواع التنبيه (13 أكتوبر، 3E) */
  .bellbtn { flex:0 0 auto; width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer;
             display:inline-flex; align-items:center; justify-content:center;
             background:transparent; color:var(--muted); border:1px solid var(--line); }
  .bellbtn[hidden] { display:none; }
  .bellbtn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8;
                 stroke-linecap:round; stroke-linejoin:round; }
  .bellbtn[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
  .bellbtn[aria-pressed="true"] svg { fill:currentColor; }
  .bellbtn:disabled { opacity:.55; cursor:default; }
  .pushmsg { color:var(--muted); font-size:13px; margin:0 0 14px; padding-inline:4px; }
  .pushmsg[hidden] { display:none; }
  /* ⚠️ (14 أكتوبر) الغلاف بحجم الجرس الثابت 44×44 و«تعديل» مطلق تحته: ظهوره/اختفاؤه لا يغيّر مكان الجرس أبداً (كان بالتدفق
     العادي فيكبر الغلاف ويرتفع الجرس عن النجمة والترس). الغلاف بلا جرس ظاهر (غير مدعوم) يختفي كي لا يحجز فراغاً. */
  .pbwrap { position:relative; display:inline-flex; align-items:center; justify-content:center;
            width:44px; height:44px; flex:0 0 44px; }
  .pbwrap:not(:has(.bellbtn:not([hidden]), .mact:not([hidden]))) { display:none; }
  .pbedit { position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:3;
            white-space:nowrap; background:none; border:none; padding:0 4px; margin-top:1px; color:var(--accent); font:inherit;
            font-size:11px; line-height:1.2; cursor:pointer; text-decoration:underline; }
  .pbedit[hidden] { display:none; }
  /* الصفوف تحجز مكان «تعديل» تحت الجرس دائماً (لا قفزة عند التفعيل) */
  .appbar:has(.pbwrap), .hdract:has(.pbwrap) { padding-bottom:14px; }
  .psheet { position:fixed; inset:0; z-index:960; display:none; align-items:flex-end; justify-content:center;
            background:rgba(0,0,0,.55); }
  .psheet.on { display:flex; }
  .pbox { background:var(--card); color:var(--text); width:100%; max-width:480px; border-radius:16px 16px 0 0;
          padding:18px 16px 22px; border:1px solid var(--line); border-bottom:none; max-height:80vh; overflow:auto; }
  .pbox h3 { font-size:16px; margin:0 0 4px; }
  .pbox .psub { color:var(--muted); font-size:13px; margin-bottom:10px; }
  .prow { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px;
          border-bottom:1px solid var(--line); font-size:15px; cursor:pointer; }
  .prow:last-of-type { border-bottom:none; }
  .prow input { width:22px; height:22px; accent-color:var(--accent); flex:0 0 auto; }
  .pdone { margin-top:14px; width:100%; min-height:44px; border-radius:12px; border:none; background:var(--accent); color:#fff;
           font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
