V-MAX SHARED DESIGN SYSTEM
   Common tokens + components for Club, Player, ACL pages
   Scoped under .hsp2-arena-root
   ═══════════════════════════════════════════════════════════ */

/* ── Shared Design Tokens ── */
.hsp2-arena-root {
    --hz-bg: var(--bg,#f5f7fb); --hz-card: var(--s,#ffffff); --hz-card-hover: var(--s-high,#f7fafc);
    --hz-text: var(--on-s,#0f172a); --hz-text-muted: var(--on-s-v,#61758a); --hz-border: var(--s-brd,#dbe5ef);
    --hz-primary: var(--pri,#0ea86b); --hz-primary-light: var(--pri-c,rgba(14,168,107,.10));
    --hz-secondary: var(--sec,#d89b2b); --hz-secondary-light: var(--sec-c,#fff3d6);
    --hz-danger: var(--err,#dc2626); --hz-danger-light: var(--err-c,#fee2e2);
    --hz-radius-xl: 20px; --hz-radius-lg: 14px;
    --hz-shadow: 0 8px 26px rgba(15,23,42,.05); --hz-shadow-hover: 0 18px 40px rgba(15,23,42,.12);
    background: var(--hz-bg); color: var(--hz-text);
    font-family: 'Almarai', sans-serif; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 90px; min-height: 100vh;
}
html.dark .hsp2-arena-root,html.dark-mode .hsp2-arena-root,html[data-theme="dark"] .hsp2-arena-root {
    --hz-bg: var(--bg,#0f1724); --hz-card: var(--s,#151f2f); --hz-card-hover: var(--s-high,#1b283a);
    --hz-text: var(--on-s,#e9f0f8); --hz-text-muted: var(--on-s-v,#98a8bc); --hz-border: var(--s-brd,#273246);
    --hz-primary: var(--pri,#19b97a); --hz-primary-light: var(--pri-c,rgba(25,185,122,.12));
    --hz-secondary: var(--sec,#f2b24a); --hz-secondary-light: var(--sec-c,rgba(242,178,74,.14));
    --hz-danger: var(--err,#f87171); --hz-danger-light: var(--err-c,rgba(248,113,113,.12));
    --hz-shadow: 0 14px 36px rgba(2,6,23,.34); --hz-shadow-hover: 0 22px 48px rgba(2,6,23,.46);
}
@media(min-width:768px) { .hsp2-arena-root { padding-bottom: 0; } }
.hsp2-arena-root *, .hsp2-arena-root *::before, .hsp2-arena-root *::after { box-sizing: border-box; }
.hsp2-arena-root a { text-decoration: none; color: inherit; }
.hsp2-arena-root img { max-width: 100%; display: block; object-fit: cover; }
.hsp2-arena-root .fl { font-family: 'Lexend','Almarai',sans-serif; }
.hsp2-arena-root .no-sb::-webkit-scrollbar { display: none; }
.hsp2-arena-root .no-sb { scrollbar-width: none; }

/* ── Shared Container ── */
.hz-vx-wrap { max-width: 1300px; margin: 0 auto; padding: 0 16px; width: 100%; }

/* ── Shared Sections ── */
.hz-vx-sec { margin-bottom: 50px; scroll-margin-top: 80px; }
.hz-vx-sec-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.hz-vx-sec-title { font-size: 22px; font-weight: 900; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--hz-text); }
.hz-vx-sec-title .material-symbols-outlined { color: var(--hz-primary); }
.hz-vx-sec-link { font-size: 14px; font-weight: 800; color: var(--hz-primary); cursor: pointer; transition: 0.2s; }

/* ── Shared Bottom Nav ── */
.hz-vx-bnav { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; background: var(--s-high, #fff); border-top: 1px solid var(--outline, #dbe5ef); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: flex; justify-content: space-around; align-items: center; }
html.dark .hz-vx-bnav, html[data-theme="dark"] .hz-vx-bnav { background: var(--s-high, #151f2f); box-shadow: 0 -4px 16px rgba(0,0,0,0.3); }
@media(min-width:768px) { .hz-vx-bnav { display: none; } }
.hz-vx-bnav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--on-s-v, #64748b); padding: 6px 12px; border-radius: 10px; transition: color 0.2s; font-size: 10px; font-weight: 800; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hz-vx-bnav-item .material-symbols-outlined { font-size: 22px; }
.hz-vx-bnav-item.on { color: var(--pri, #0ea86b); }
.hz-vx-bnav-item.on .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.hz-vx-bnav-item:active { opacity: 0.7; }
/* Pages with bottom nav need padding to avoid content hiding */
.hsp2-arena-root { padding-bottom: 72px; }
@media(min-width:768px) { .hsp2-arena-root { padding-bottom: 0; } }

/* ── Shared News Bento ── */
.hz-vx-news { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media(min-width:640px) { .hz-vx-news { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .hz-vx-news { grid-template-columns: repeat(3,1fr); } }
.hz-vx-nc { position: relative; border-radius: var(--hz-radius-xl); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--hz-shadow); transition: 0.3s; display: block; }
.hz-vx-nc:hover { transform: translateY(-4px); box-shadow: var(--hz-shadow-hover); }
.hz-vx-nc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.hz-vx-nc:hover img { transform: scale(1.05); }
.hz-vx-nc-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 60%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; }
.hz-vx-nc-badge { align-self: flex-start; background: var(--hz-primary); color: #fff; padding: 4px 10px; font-size: 11px; font-weight: 900; border-radius: 8px; margin-bottom: 12px; }
.hz-vx-nc-title { font-size: 15px; font-weight: 800; margin: 0 0 8px; line-height: 1.4; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hz-vx-nc-meta { font-size: 11px; color: #d1d5db; display: flex; align-items: center; gap: 4px; font-weight: 700; }
.hz-vx-nc.is-feat { aspect-ratio: auto; height: 320px; }
@media(min-width:640px) { .hz-vx-nc.is-feat { grid-column: 1/-1; height: 400px; } }
.hz-vx-nc.is-feat .hz-vx-nc-title { font-size: 22px; }
@media(min-width:768px) { .hz-vx-nc.is-feat .hz-vx-nc-title { font-size: 28px; } }
.hz-vx-nc-ph { width: 100%; height: 100%; background: var(--hz-card-hover); display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--hz-text-muted); }

/* ── Shared Table ── */
.hz-vx-tbl-card { background: var(--hz-card); border: 1px solid var(--hz-border); border-radius: var(--hz-radius-xl); overflow: hidden; box-shadow: var(--hz-shadow); }
.hz-vx-tbl-wrap { width: 100%; overflow-x: auto; scrollbar-width: none; }
.hz-vx-tbl-wrap::-webkit-scrollbar { display: none; }
.hz-vx-tbl { width: 100%; border-collapse: collapse; text-align: center; min-width: 500px; }
.hz-vx-tbl th { background: var(--hz-card-hover); color: var(--hz-text-muted); padding: 16px 10px; font-size: 12px; font-weight: 800; border-bottom: 1px solid var(--hz-border); }
.hz-vx-tbl td { padding: 14px 10px; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--hz-border); color: var(--hz-text); }
.hz-vx-tbl tr:last-child td { border-bottom: none; }
.hz-vx-td-team { text-align: right; display: flex; align-items: center; gap: 12px; }
.hz-vx-td-team img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.hz-vx-td-team a,.hz-vx-td-team span { font-weight: 900; white-space: nowrap; }
.hz-vx-td-team a:hover { color: var(--hz-primary); }
.hz-vx-td-rank { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; background: var(--hz-card-hover); margin: 0 auto; font-family: 'Lexend',sans-serif; }
.hz-vx-rank-1 { background: var(--hz-primary); color: #fff; }
.hz-vx-td-pts { font-family: 'Lexend',sans-serif; font-size: 18px; font-weight: 900; color: var(--hz-primary); }
@media(max-width:768px) {
    .hz-vx-hide-mo { display: none !important; }
    .hz-vx-tbl { min-width: 100%; }
    .hz-vx-tbl th,.hz-vx-tbl td { padding: 12px 6px; }
    .hz-vx-td-team { gap: 8px; font-size: 13px; }
    .hz-vx-td-team img { width: 24px; height: 24px; }
    .hz-vx-td-pts { font-size: 16px; }
}

/* ── Shared Empty State ── */
.hz-vx-empty { padding: 32px; border-radius: var(--hz-radius-xl); background: var(--hz-card-hover); border: 1px dashed var(--hz-border); color: var(--hz-text-muted); text-align: center; font-size: 14px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════

/* ═══ PROFILE PAGES (Coach / Stadium) ═══ */
.hz-profile-hero{position:relative;border-radius:var(--r-xl,24px);background:var(--s-high,#fff);border:1px solid var(--outline,#e2e8f0);box-shadow:var(--shadow);margin:20px 0 36px;overflow:hidden}
.hz-profile-hero-bg{height:160px;background:linear-gradient(135deg,var(--pri,#059669) 0%,#0f172a 100%);position:relative}
.hz-profile-hero-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.08) 0%,transparent 50%)}
.hz-stadium-hero .hz-profile-hero-bg{height:200px}
.hz-stadium-hero-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.35}
.hz-profile-hero-content{display:flex;flex-direction:column;align-items:center;padding:0 24px 28px;text-align:center;margin-top:-60px;position:relative;z-index:2}
@media(min-width:768px){.hz-profile-hero-content{flex-direction:row;align-items:flex-end;text-align:right;padding:0 32px 32px;margin-top:-70px}}
.hz-profile-avatar{width:120px;height:120px;border-radius:50%;background:var(--s-high,#fff);border:4px solid var(--s-high,#fff);box-shadow:var(--shadow-lg,0 18px 38px rgba(15,23,42,.10));overflow:hidden;margin-bottom:14px;flex-shrink:0}
@media(min-width:768px){.hz-profile-avatar{width:140px;height:140px;margin-bottom:0;margin-inline-end:20px}}
.hz-profile-avatar img{width:100%;height:100%;object-fit:cover;background:var(--s-cont,#f3f7fb)}
.hz-profile-info{flex:1}
.hz-profile-badge{display:inline-block;padding:5px 14px;border-radius:999px;background:var(--pri-c,rgba(14,168,107,.1));color:var(--pri,#059669);font-size:12px;font-weight:900;margin-bottom:10px}
.hz-profile-name{margin:0 0 8px;font-size:clamp(22px,5vw,32px);font-weight:900;color:var(--on-s,#0f172a);line-height:1.2}
.hz-profile-current{margin:0;font-size:14px;color:var(--on-s-v,#64748b);font-weight:700}
.hz-profile-current strong{color:var(--on-s,#0f172a);font-weight:900}
.hz-profile-current a{color:var(--pri,#059669);font-weight:900}
.hz-profile-meta-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}
@media(min-width:768px){.hz-profile-meta-strip{justify-content:flex-start}}
.hz-profile-meta-pill{display:inline-flex;align-items:center;gap:4px;background:var(--s-cont,#f3f7fb);border:1px solid var(--outline,#e2e8f0);padding:4px 12px;border-radius:10px;font-size:12px;font-weight:800;color:var(--on-s,#0f172a)}
.hz-profile-meta-pill .material-symbols-outlined{font-size:16px;color:var(--pri,#059669)}

/* Bento Info Cards */
.hz-bento-grid-3{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.hz-bento-grid-3{grid-template-columns:repeat(3,1fr)}}
.hz-bento-card{display:flex;align-items:center;gap:12px;padding:16px;background:var(--s-high,#fff);border:1px solid var(--outline,#e2e8f0);border-radius:var(--r,16px);box-shadow:var(--shadow);transition:.2s}
.hz-bento-card:hover{transform:translateY(-2px);border-color:var(--pri-c,rgba(14,168,107,.2));box-shadow:var(--shadow-lg)}
.hz-bento-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:var(--s-cont,#f3f7fb);border-radius:12px;font-size:20px;flex-shrink:0}
.hz-bento-data{display:flex;flex-direction:column;gap:2px}
.hz-bento-label{font-size:11px;color:var(--on-s-v,#64748b);font-weight:700}
.hz-bento-val{font-size:14px;font-weight:900;color:var(--on-s,#0f172a)}

/* Timeline */
.hz-timeline-card{padding:24px;border-radius:var(--r-xl,24px);background:var(--s-high,#fff);border:1px solid var(--outline,#e2e8f0);box-shadow:var(--shadow)}
.hz-timeline{list-style:none;margin:0;padding:0;position:relative}
.hz-timeline::before{content:'';position:absolute;top:0;bottom:0;right:11px;width:2px;background:var(--outline,#e2e8f0)}
.hz-timeline-item{position:relative;padding-inline-start:36px;padding-bottom:24px}
.hz-timeline-item:last-child{padding-bottom:0}
.hz-timeline-marker{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:var(--s-high,#fff);border:3px solid var(--outline,#e2e8f0);z-index:1;transition:.2s}
.hz-timeline-item.is-active .hz-timeline-marker,.hz-timeline-item:hover .hz-timeline-marker{border-color:var(--pri,#059669);background:var(--pri,#059669);box-shadow:0 0 0 4px var(--pri-c,rgba(14,168,107,.12))}
.hz-timeline-content{background:var(--s-cont,#f3f7fb);padding:12px 16px;border-radius:12px;border:1px solid transparent;transition:.2s}
.hz-timeline-item:hover .hz-timeline-content{background:var(--s-high,#fff);border-color:var(--pri-c,rgba(14,168,107,.2));box-shadow:var(--shadow)}
.hz-tl-club{margin:0 0 4px;font-size:15px;font-weight:900;color:var(--on-s,#0f172a)}
.hz-tl-date{font-size:11px;color:var(--on-s-v,#64748b);font-weight:800}

/* Section head for profile pages */
.hz-section-head{margin-bottom:16px}
.hz-section-title{font-size:20px;font-weight:900;display:flex;align-items:center;gap:8px;margin:0;color:var(--on-s,#0f172a)}
.hz-section-title .material-symbols-outlined{color:var(--pri,#059669);font-size:24px}

/* Profile section spacing */
.hz-profile-section{margin-bottom:36px}

/* Layout grid for sidebar pages */
.hz-layout-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:1024px){.hz-layout-grid{grid-template-columns:1fr 300px}}
.hz-content-col{min-width:0}
.hz-sidebar-sticky{position:sticky;top:90px}

/* Empty pad */
.hz-vx-empty-pad{padding:80px 16px;text-align:center}

/* Text content */
.hz-vx-text-content{font-size:14px;line-height:1.9;color:var(--on-s,#0f172a)}
.hz-vx-text-content p{margin:0 0 12px}

/* Card generic */
.hz-card{background:var(--s-high,#fff);border:1px solid var(--outline,#e2e8f0);border-radius:var(--r-xl,24px);box-shadow:var(--shadow)}

/* Link */
.hz-vx-link{color:var(--pri,#059669);font-weight:900;transition:.2s}
.hz-vx-link:hover{opacity:.8}

/* Widget */
.hz-widget{background:var(--s-high,#fff);border:1px solid var(--outline,#e2e8f0);border-radius:var(--r-xl,24px);padding:20px;box-shadow:var(--shadow)}
.hz-widget-title{font-size:16px;font-weight:900;margin:0 0 16px;display:flex;align-items:center;gap:8px;color:var(--on-s,#0f172a)}
.hz-widget-title .material-symbols-outlined{color:var(--pri,#059669);font-size:20px}