/* 365 كورة, the "pro" look. Every rule applies only under html[data-skin="pro"], so the classic look in index.html is
   untouched and the admin switches between the two in a second. The idea: the stadium at night, in the brand's colours.
   The deep navy of the Facebook cards, the magenta-to-orange accent, glass panels with a thin light edge, the logo in the
   header, big display numbers, a bottom tab bar on phones. Light mode keeps the dark header and hero (the brand card)
   on an off-white page. Nothing scrolls sideways, both modes meet AA contrast, focus is visible, motion is minimal. */
:root[data-skin="pro"]{
  --acc1:#D11A60; --acc2:#C84700; --acc-ink:#FFFFFF;                       /* the accent as a background: white text on it (light mode) */
  --grad:linear-gradient(90deg,var(--acc1),var(--acc2));
  --glow1:rgb(229 36 110 / .18); --glow2:rgb(255 122 26 / .14);
  --bg:#F3F4FA; --surface:#FFFFFF; --surface-2:#EEF0F7; --line:#DEE2EE;
  --fg:#0E1424; --muted:#5B6478; --board:#0B0F1F; --board-fg:#F3F5FB;
  --accent:var(--acc1); --accent-ink:#FFFFFF; --turf:#1E2A4A; --turf-2:#0F1426;
  --win:#1B8A4C; --draw:#6F7A94; --loss:#C8323A; --live:#D11A60;
  --zone-a:#2E6FD8; --zone-b:#C86A00; --zone-c:#C8323A;
  --r:16px; --shadow:0 1px 2px rgb(14 20 36 / .05),0 12px 32px rgb(14 20 36 / .07);
  --head:rgb(11 15 31 / .96); --glass:#FFFFFF; --glass-line:#DEE2EE; --num-glow:none;
}
@media (prefers-color-scheme:dark){:root[data-skin="pro"]:not([data-theme="light"]){
  --acc1:#E5246E; --acc2:#FF7A1A; --acc-ink:#0B0E1A;                       /* dark text on the bright accent (dark mode) */
  --bg:#070A14; --surface:#0F1426; --surface-2:#161C33; --line:rgb(255 255 255 / .09);
  --fg:#F3F5FB; --muted:#A3ABC6; --board:#070A14; --board-fg:#F3F5FB;
  --turf:#1E2A4A; --turf-2:#0F1426;
  --win:#2FD27D; --draw:#8C96B3; --loss:#FF6B6B; --live:#FF4D6D;
  --zone-a:#5B8DEF; --zone-b:#FFB020; --zone-c:#FF5C61;
  --shadow:0 1px 2px rgb(0 0 0 / .4),0 16px 40px rgb(0 0 0 / .35);
  --head:rgb(7 10 20 / .78); --glass:rgb(255 255 255 / .045); --glass-line:rgb(255 255 255 / .09); --num-glow:0 0 28px rgb(229 36 110 / .35);
  color-scheme:dark}}
:root[data-skin="pro"][data-theme="dark"]{
  --acc1:#E5246E; --acc2:#FF7A1A; --acc-ink:#0B0E1A;
  --bg:#070A14; --surface:#0F1426; --surface-2:#161C33; --line:rgb(255 255 255 / .09);
  --fg:#F3F5FB; --muted:#A3ABC6; --board:#070A14; --board-fg:#F3F5FB;
  --turf:#1E2A4A; --turf-2:#0F1426;
  --win:#2FD27D; --draw:#8C96B3; --loss:#FF6B6B; --live:#FF4D6D;
  --zone-a:#5B8DEF; --zone-b:#FFB020; --zone-c:#FF5C61;
  --shadow:0 1px 2px rgb(0 0 0 / .4),0 16px 40px rgb(0 0 0 / .35);
  --head:rgb(7 10 20 / .78); --glass:rgb(255 255 255 / .045); --glass-line:rgb(255 255 255 / .09); --num-glow:0 0 28px rgb(229 36 110 / .35);
  color-scheme:dark}

/* ---------- page ---------- */
[data-skin="pro"] body{background:radial-gradient(1100px 520px at 100% -8%,var(--glow1),transparent 62%),radial-gradient(900px 480px at 0% 104%,var(--glow2),transparent 60%),var(--bg);background-attachment:fixed;font-size:15px}
[data-skin="pro"] body::before{background:var(--head)}
[data-skin="pro"] :focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:8px}
[data-skin="pro"] .num{font-weight:800}
[data-skin="pro"] h2.sec{font-size:21px;font-weight:800;letter-spacing:-.01em;gap:12px}
[data-skin="pro"] h2.sec::before{content:"";width:5px;height:22px;border-radius:3px;background:var(--grad);flex:0 0 auto}

/* ---------- header: the brand logo, glass, an accent line on top ---------- */
[data-skin="pro"] .top{background:var(--head);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgb(255 255 255 / .08)}
[data-skin="pro"] .top::before{content:"";display:block;height:3px;background:var(--grad)}
[data-skin="pro"] .top .wrap{padding-block:10px;gap:14px}
[data-skin="pro"] .brand{gap:12px;font-size:23px}
[data-skin="pro"] .brand svg{display:none}
[data-skin="pro"] .brand::before{content:"";width:40px;height:40px;border-radius:50%;flex:0 0 auto;background:url(/brand/logo.jpg) center/cover,var(--grad);box-shadow:0 0 0 2px rgb(255 255 255 / .14),0 6px 18px rgb(229 36 110 / .35)}
[data-skin="pro"] .brand .num{background:linear-gradient(90deg,#E5246E,#FF7A1A);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.25em}
[data-skin="pro"] .brand small{opacity:.55;letter-spacing:.14em}
[data-skin="pro"] .demo{background:var(--grad);color:#fff;border-radius:999px;padding:4px 11px;font-weight:700;letter-spacing:.01em}
[data-skin="pro"] .icon-btn{border-radius:999px;background:rgb(255 255 255 / .06);border-color:rgb(255 255 255 / .12)}
[data-skin="pro"] nav.tabs{gap:2px}
[data-skin="pro"] nav.tabs button{padding:9px 14px;border-radius:999px;border-bottom:0;opacity:.75;font-weight:600;position:relative}
[data-skin="pro"] nav.tabs button:hover{opacity:1;background:rgb(255 255 255 / .06)}
[data-skin="pro"] nav.tabs button[aria-selected="true"]{opacity:1;background:rgb(255 255 255 / .08);border-radius:999px}
[data-skin="pro"] nav.tabs button[aria-selected="true"]::after{content:"";position:absolute;inset-inline:16px;bottom:3px;height:3px;border-radius:2px;background:var(--grad)}

/* ---------- live strip ---------- */
[data-skin="pro"] .ribbon{background:transparent;border-top:0;color:var(--fg)}
[data-skin="pro"] .ribbon .wrap{padding-block:14px 4px}
[data-skin="pro"] .chip-live{background:var(--glass);border:1px solid var(--glass-line);border-radius:14px;box-shadow:var(--shadow);color:var(--fg)}
[data-skin="pro"] .chip-live:hover{border-color:var(--acc1);background:var(--glass)}
[data-skin="pro"] .chip-live .lg{opacity:.7;font-size:11.5px}
[data-skin="pro"] .chip-live .s{font-size:24px;font-weight:900}
[data-skin="pro"] .more-live{border-radius:999px;border-color:var(--line);color:var(--fg)}
[data-skin="pro"] .min{color:var(--live);font-weight:700}

/* ---------- panels, buttons, filters ---------- */
[data-skin="pro"] .panel{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[data-skin="pro"] .comp-h{background:rgb(255 255 255 / .03);border-bottom-color:var(--glass-line);font-weight:700;padding:11px 16px}
[data-skin="pro"] .btn{border-radius:999px;border-color:var(--line);background:var(--surface-2);font-weight:600;padding:8px 16px}
[data-skin="pro"] .btn.primary{background:var(--grad);border-color:transparent;color:var(--acc-ink);font-weight:800}
[data-skin="pro"] .filters button,[data-skin="pro"] .seg button{border-radius:999px;padding:7px 14px;background:var(--glass);border-color:var(--glass-line)}
[data-skin="pro"] .filters button[aria-pressed="true"]{background:var(--grad);color:var(--acc-ink);border-color:transparent;font-weight:700}
[data-skin="pro"] .datebar button{border-radius:12px;background:var(--glass);border-color:var(--glass-line)}
[data-skin="pro"] .datebar button[aria-pressed="true"]{border-color:var(--acc1);box-shadow:inset 0 -3px 0 var(--acc1)}
[data-skin="pro"] .searchbar input{border-radius:12px;background:var(--glass);border-color:var(--glass-line);padding:11px 16px}
[data-skin="pro"] .notice{background:var(--glass);border-color:var(--acc2)}
[data-skin="pro"] .announce{border-inline-start:4px solid var(--acc1)}

/* ---------- featured match: the brand card ---------- */
[data-skin="pro"] .feature{border:1px solid rgb(255 255 255 / .1)}
[data-skin="pro"] .feature .head{background:linear-gradient(135deg,#171D3A,#0A0E1E);padding:22px 22px 26px}
[data-skin="pro"] .feature .head::after{background:radial-gradient(420px 220px at 92% -10%,rgb(229 36 110 / .4),transparent 62%),radial-gradient(420px 220px at 8% 110%,rgb(255 122 26 / .32),transparent 62%)}
[data-skin="pro"] .feature .meta{font-weight:600;opacity:.8}
[data-skin="pro"] .feature .side{font-size:17px;font-weight:800}
[data-skin="pro"] .feature .big{font-size:76px;text-shadow:var(--num-glow);font-weight:900}
[data-skin="pro"] .feature .big .dash{opacity:.35}
[data-skin="pro"] .feature .min{background:var(--grad);color:#fff;border-radius:999px;padding:3px 12px;font-weight:800}
[data-skin="pro"] .feature .min::before{background:#fff}
[data-skin="pro"] .feature .foot{padding:14px 18px;gap:10px}
[data-skin="pro"] .feature .foot .btn{background:var(--glass);border-color:var(--glass-line)}
[data-skin="pro"] .feature .foot .btn.primary{background:var(--grad);border-color:transparent}
[data-skin="pro"] .slider .sbtn{background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .22)}
[data-skin="pro"] .slider .dots button[aria-current="true"]{background:var(--grad)}

/* ---------- fixtures ---------- */
[data-skin="pro"] .row{padding:12px 16px;border-top-color:var(--glass-line)}
[data-skin="pro"] .row:hover{background:rgb(255 255 255 / .04)}
[data-skin="pro"] .row .tm{font-weight:600}
[data-skin="pro"] .row .sc{border-radius:10px;background:rgb(0 0 0 / .18);font-size:21px;font-weight:900;padding:3px 0}
[data-skin="pro"] .row.is-live .sc{background:var(--grad);color:var(--acc-ink)}
[data-skin="pro"] .row .sc.pre{background:transparent;color:var(--muted);font-weight:600;font-size:14px} /* the kickoff time is not a score: at the score's 21px "١٠:٣٠ م" overflowed its column (and broke onto two lines on phones) */
[data-skin="pro"] .row .chev{opacity:.6}
[data-skin="pro"] .logo{filter:drop-shadow(0 2px 3px rgb(0 0 0 / .35))}

/* ---------- table ---------- */
[data-skin="pro"] table.std th{font-weight:600;letter-spacing:.02em;border-bottom-color:var(--glass-line)}
[data-skin="pro"] table.std td{border-bottom-color:var(--glass-line);padding:10px 6px}
[data-skin="pro"] table.std tr:nth-child(even) td{background:rgb(255 255 255 / .02)}
[data-skin="pro"] table.std td.pos::before{width:4px;inset-block:5px;border-radius:3px}
[data-skin="pro"] .tmore{background:var(--glass);border-top-color:var(--glass-line)}
[data-skin="pro"] table.std td.pts{font-family:var(--f-score);font-size:18px;font-weight:900;color:var(--acc2)}
[data-skin="pro"] .legend{border-top-color:var(--glass-line)}
[data-skin="pro"] .form i{border-radius:5px;width:20px;height:20px}

/* ---------- competitions ---------- */
[data-skin="pro"] .ccard{border-color:var(--glass-line);padding:18px}
[data-skin="pro"] .ccard:hover{border-color:var(--acc1);box-shadow:0 0 0 1px var(--acc1),var(--shadow)}
[data-skin="pro"] .ccard .ct b{font-size:17px}
[data-skin="pro"] .ccard .kv{border-top:1px solid var(--glass-line)}
[data-skin="pro"] .badge,[data-skin="pro"] .ccard .badge{border-radius:12px;background:var(--surface-2)}

/* ---------- match dialog ---------- */
[data-skin="pro"] dialog{border-radius:22px;border:1px solid rgb(255 255 255 / .1);background:var(--surface)}
[data-skin="pro"] dialog::backdrop{background:rgb(4 6 14 / .72);backdrop-filter:blur(6px)}
[data-skin="pro"] .m-head{background:linear-gradient(135deg,#171D3A,#0A0E1E);padding:18px 22px 22px;position:relative;overflow:hidden}
[data-skin="pro"] .m-head::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(380px 200px at 90% -10%,rgb(229 36 110 / .35),transparent 62%),radial-gradient(380px 200px at 10% 110%,rgb(255 122 26 / .28),transparent 62%)}
[data-skin="pro"] .m-head > *{position:relative;z-index:1}
[data-skin="pro"] .m-head .big{font-size:60px;font-weight:900;text-shadow:var(--num-glow)}
[data-skin="pro"] .m-head .close{border-radius:999px}
[data-skin="pro"] .m-tabs{border-bottom-color:var(--glass-line);gap:2px}
[data-skin="pro"] .m-tabs button{font-weight:600;border-bottom-width:3px}
[data-skin="pro"] .m-tabs button[aria-selected="true"]{color:var(--fg);border-image:var(--grad) 1;border-bottom-color:var(--acc1)}
[data-skin="pro"] .ev-row .mn{background:var(--surface-2);border-color:var(--glass-line);font-weight:700}
[data-skin="pro"] .tl::before{background:var(--glass-line)}
[data-skin="pro"] .bar{height:9px;border-radius:5px;background:var(--surface-2)}
[data-skin="pro"] .bar i{background:var(--acc1)}
[data-skin="pro"] .bar i + i{background:var(--acc2)}
[data-skin="pro"] .pitch{background:repeating-linear-gradient(0deg,#1C6B3E 0 9.5%,#17603A 9.5% 19%);border:1px solid rgb(255 255 255 / .08)}
[data-skin="pro"] .face-wrap{box-shadow:0 3px 8px rgb(0 0 0 / .45)}
[data-skin="pro"] .h2hsum div{background:var(--surface-2);border-radius:12px}
[data-skin="pro"] .h2hsum b{font-family:var(--f-score);font-weight:900}
[data-skin="pro"] .motm{background:var(--surface-2);border-radius:12px;border:1px solid var(--glass-line)}
[data-skin="pro"] .rt.best{background:var(--acc1);box-shadow:0 0 0 2px #fff}

/* ---------- team and player ---------- */
[data-skin="pro"] .team-hero{padding:24px;background:linear-gradient(135deg,var(--glass),transparent);position:relative;overflow:hidden}
[data-skin="pro"] .team-hero::after{content:"";position:absolute;inset:auto -60px -80px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--glow1),transparent 70%);pointer-events:none}
[data-skin="pro"] .team-hero h1{font-size:30px;font-weight:800}
[data-skin="pro"] .kv-row{border-bottom-color:var(--glass-line)}
[data-skin="pro"] .kv-row b{font-family:var(--f-score);font-weight:900;font-size:22px}
[data-skin="pro"] .sq{border-radius:14px}
[data-skin="pro"] .sq:hover{border-color:var(--acc1)}
[data-skin="pro"] .sq-n{color:var(--acc2);font-weight:900}
[data-skin="pro"] .avatar.ph{background:var(--grad);color:#fff}

/* ---------- news ---------- */
[data-skin="pro"] .ncard{border-radius:var(--r)}
[data-skin="pro"] .ncard:hover{border-color:var(--acc1);box-shadow:0 0 0 1px var(--acc1),var(--shadow)}
[data-skin="pro"] .ncard .nt b{font-size:15.5px}
[data-skin="pro"] .ncat{background:var(--grad);color:#fff}
[data-skin="pro"] .nmini{border-bottom-color:var(--glass-line)}
[data-skin="pro"] .nmini img{border-radius:10px;width:84px;height:56px}
[data-skin="pro"] .n-art .hero{border-radius:16px}
[data-skin="pro"] .n-art h1{font-size:26px;font-weight:800}
[data-skin="pro"] .n-art .lead{border-inline-start:4px solid var(--acc1);padding-inline-start:12px;color:var(--fg)}
[data-skin="pro"] .n-art .src{border-top-color:var(--glass-line)}
[data-skin="pro"] .credits h3{color:var(--acc2)}

/* ---------- footer, toast, small bits ---------- */
[data-skin="pro"] .foot-note{opacity:.9}
[data-skin="pro"] .toast{background:var(--surface);color:var(--fg);border:1px solid var(--glass-line);border-inline-start:4px solid var(--acc1);border-radius:14px}
[data-skin="pro"] .skeleton{border-radius:12px;background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));background-size:200% 100%}
[data-skin="pro"] .empty{color:var(--muted)}
[data-skin="pro"] .lg-logo{border-radius:7px}

/* ---------- phones: the tabs become a bottom bar, thumbs reach it ---------- */
@media (max-width:720px){
  /* no backdrop blur on the header here: a blur makes the header the containing block of the fixed tab bar, which then
     sticks to the header's bottom instead of the screen's */
  [data-skin="pro"] .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--board)}
  [data-skin="pro"] nav.tabs{position:fixed;bottom:0;inset-inline:0;z-index:30;order:0;flex-basis:auto;margin:0;justify-content:space-around;gap:0;background:var(--head);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgb(255 255 255 / .1);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  [data-skin="pro"] nav.tabs button{flex:1 1 0;padding:9px 4px;font-size:12.5px;border-radius:12px;color:var(--board-fg)}
  [data-skin="pro"] nav.tabs button[aria-selected="true"]{background:rgb(255 255 255 / .1)}
  [data-skin="pro"] nav.tabs button[aria-selected="true"]::after{inset-inline:22px;bottom:4px;height:3px}
  [data-skin="pro"] #themeBtn{margin-inline-start:auto}
  [data-skin="pro"] main{padding-bottom:12px}
  [data-skin="pro"] .foot-note{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  [data-skin="pro"] .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  [data-skin="pro"] .feature .big{font-size:60px}
  [data-skin="pro"] .top .wrap{padding-block:9px}
  [data-skin="pro"] .brand{font-size:21px}
  [data-skin="pro"] .brand::before{width:36px;height:36px}
  [data-skin="pro"] dialog{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0;margin:0}
}
@media (prefers-reduced-motion:reduce){[data-skin="pro"] *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}