/* ======================================================================
   AMF League — Single App Stylesheet (v9 FULL “Ideal”)
   Mobile-first, Champions League inspired, maintainable & predictable.

   Principles (fixed in this version):
   - ONE source of truth for .avatar / .leader-avatar (no duplicates)
   - Leaders use ONLY .leader-avatar (EPL/Instagram cover + blur background)
   - All “final overrides” live in @layer overrides (predictable cascade)
   - No page-level horizontal scroll; only component-level scroll where needed
   ====================================================================== */

@layer reset, tokens, base, utilities, components, pages, overrides;

/* =========================
   RESET
========================= */
@layer reset{
  *{ box-sizing: border-box; }
  html, body{ height:100%; }
  body{ margin:0; }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration:none; }
  button, input, select, textarea{ font: inherit; }
}

/* =========================
   TOKENS
========================= */
@layer tokens{
  :root{
    --radius: 16px;
    --radius-sm: 12px;
    --radius-lg: 22px;

    --trans: 180ms ease;
    --shadow: 0 18px 50px rgba(0,0,0,.45);
    --shadow-sm: 0 10px 30px rgba(0,0,0,.28);

    /* Typography */
    --ff: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans Armenian", sans-serif;
    --ff-title: "Bebas Neue", Inter, system-ui, sans-serif;
    --mono-num: tabular-nums;

    /* Density */
    --pad-card: 14px;
    --pad-item: 12px;
    --ctrl-h: 42px;
    --btn-h: 38px;
    --btn-h-sm: 34px;
    --gap: 12px;

    /* Page top offsets */
    --page-top: 72px;
    --topbar-clear: 0px;
  }

  :root[data-density="compact"]{
    --pad-card: 12px;
    --pad-item: 10px;
    --ctrl-h: 38px;
    --btn-h: 36px;
    --btn-h-sm: 32px;
    --gap: 10px;
  }

  /* Theme tokens */
  :root[data-theme="dark"], body.dark-theme{
    --bg0: #050612;
    --bg1: #0b1230;

    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.08);

    --stroke: rgba(255,255,255,.12);
    --stroke2: rgba(255,255,255,.18);

    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.68);

    --accent: #4da3ff;
    --accent2: #a56eff;

    --danger: #ff4d6d;
    --good: #2bd576;

    color-scheme: dark;
  }

  :root[data-theme="light"]{
    --bg0: #f7f8fd;
    --bg1: #e9ecf8;

    --card: rgba(0,0,0,.04);
    --card2: rgba(0,0,0,.06);

    --stroke: rgba(0,0,0,.10);
    --stroke2: rgba(0,0,0,.16);

    --text: rgba(10,14,24,.92);
    --muted: rgba(10,14,24,.62);

    --accent: #1d64ff;
    --accent2: #7c3aed;

    --danger: #d11a42;
    --good: #0f9b5a;

    color-scheme: light;
  }

  /* Division accents */
  :root[data-division="high"], body[data-division="high"]{
    --accent: #4da3ff;
    --accent2:#a56eff;
  }
  :root[data-division="first"], body[data-division="first"]{
    --accent: #22c55e;
    --accent2:#06b6d4;
  }
  :root[data-division="cup"], body[data-division="cup"]{
    --accent: #f59e0b;
    --accent2:#ef4444;
  }
}

/* =========================
   BASE
========================= */
@layer base{
  html, body{ max-width:100%; overflow-x:hidden; }

  body{
    font-family: var(--ff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    color: var(--text);
    background:
      radial-gradient(900px 400px at 50% -10%, rgba(77,163,255,.18), transparent 60%),
      radial-gradient(800px 340px at 20% 10%, rgba(165,110,255,.16), transparent 60%),
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.25) 0, transparent 2px),
      radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,.18) 0, transparent 2px),
      radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.14) 0, transparent 2px),
      linear-gradient(180deg, var(--bg1), var(--bg0));
    min-height:100vh;

    transition: background var(--trans), color var(--trans);
  }

  @media (max-width: 420px){
    body{
      background:
        radial-gradient(700px 320px at 50% -10%, rgba(77,163,255,.14), transparent 62%),
        radial-gradient(640px 280px at 20% 10%, rgba(165,110,255,.12), transparent 62%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
    }
  }

  img, svg, video, canvas{ max-width:100%; height:auto; }

  ::placeholder{ color: rgba(255,255,255,.55); }
  :root[data-theme="light"] ::placeholder{ color: rgba(10,14,24,.45); }

  ::selection{
    background: rgba(77,163,255,.28);
    color: var(--text);
  }
  @supports (background: color-mix(in oklab, white 50%, black)){
    ::selection{ background: color-mix(in oklab, var(--accent) 32%, transparent); }
  }

  @media (pointer:fine){
    *::-webkit-scrollbar{ width: 10px; height: 10px; }
    *::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.18);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: content-box;
    }
    :root[data-theme="light"] *::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); }
    *::-webkit-scrollbar-track{ background: transparent; }
  }

  :focus-visible{
    outline: 3px solid rgba(77,163,255,.45);
    outline-offset: 3px;
    border-radius: 12px;
  }
  @supports (outline-color: color-mix(in oklab, white 50%, black)){
    :focus-visible{ outline-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media (prefers-reduced-transparency: reduce){
    .card, .tabbar, .modal, .top-btn, .top-logo, .hero{
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
  }

  .score, .stat-v, table, .timeline-min{ font-variant-numeric: var(--mono-num); }
}

/* =========================
   UTILITIES
========================= */
@layer utilities{
  .hidden{ display:none !important; }

  .mb-10{ margin-bottom: 10px; }
  .mt-10{ margin-top: 10px; }
  .mt-12{ margin-top: 12px; }
  .mb-12{ margin-bottom: 12px; }

  .center{ display:flex; align-items:center; justify-content:center; }
  .spread{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }

  .w-100{ width:100%; }
  .grow{ flex:1; min-width:0; }

  .muted{ color: var(--muted); }

  .divider{
    height:1px;
    background: rgba(255,255,255,.14);
    margin: 12px 0;
  }
  :root[data-theme="light"] .divider{ background: rgba(0,0,0,.12); }

  .u-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .inline{ display:inline-flex; gap:8px; align-items:center; }
  .stack{ display:grid; gap: 10px; }
  .stack.stack-rows{ gap: 0; }

  .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  @media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

  .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 720px){ .grid-2{ grid-template-columns: 1fr; } }

  /* scroll helpers */
  .scroll-x{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .scroll-x > *{ min-width: max-content; }
}

/* =========================
   COMPONENTS
========================= */
@layer components{
  /* Page container */
  .app .page{
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding: calc(var(--page-top) + var(--topbar-clear)) 0 calc(84px + env(safe-area-inset-bottom));
  }
  @media (max-width: 520px){ :root{ --topbar-clear: 52px; } }
  @media (max-width: 420px){ :root{ --topbar-clear: 64px; } }

  .page-head{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 6px 0 14px;
  }
  .page-head .page-title{ margin: 0; }
  .page-head .toolbar{ justify-content:flex-end; }

  @media (max-width: 720px){
    .page-head{ flex-direction: column; align-items: stretch; }
    .page-head .toolbar{ justify-content: stretch; }
    .page-head .toolbar > *{ flex:1; }
  }

  .page-title{
    font-family: var(--ff-title);
    font-size: 42px;
    letter-spacing: 1px;
    margin: 4px 0 18px;
  }

  .section{ margin: 18px 0 26px; }
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .section-title{
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
  }
  :root[data-theme="light"] .section-title{ color: rgba(10,14,24,.92); }
  @supports (color: color-mix(in oklab, white 50%, black)){
    .section-title{ color: color-mix(in oklab, var(--text) 92%, var(--accent) 8%); }
  }

  /* Inputs */
  .input, .select{ width: 100%; max-width: 420px; }

  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select{
    height: var(--ctrl-h);
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    color: var(--text);
    padding: 0 12px;
    outline: none;
    min-width: 0;
  }
  textarea{ height:auto; padding: 10px 12px; min-height: 96px; border-radius: 16px; }

  input:focus, select:focus, textarea:focus{
    border-color: rgba(77,163,255,.55);
    box-shadow: 0 0 0 3px rgba(77,163,255,.14);
  }
  @supports (border-color: color-mix(in oklab, white 50%, black)){
    input:focus, select:focus, textarea:focus{
      border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke));
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
    }
  }

  :root[data-theme="dark"] select,
  body.dark-theme select{
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
  }
  :root[data-theme="light"] select{
    color: rgba(10,14,24,.92);
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.12);
  }
  select option{ color:#0b1020; background:#ffffff; }
  :root[data-theme="dark"] select option,
  body.dark-theme select option{ color: rgba(255,255,255,.92); background:#0b1020; }

  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    height: var(--btn-h);
    padding: 0 14px;
    border-radius: 999px;

    border: 1px solid var(--stroke2);
    background: rgba(255,255,255,.04);
    color: var(--text);

    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;

    transition: transform var(--trans), background var(--trans), border-color var(--trans), filter var(--trans);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  @supports (border-color: color-mix(in oklab, white 50%, black)){
    .btn{
      border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke) 45%);
      background: color-mix(in oklab, var(--accent) 18%, rgba(255,255,255,.04) 82%);
    }
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(0px); filter: brightness(.98); }
  .btn--h42{ height: var(--ctrl-h); }
  .btn--small{
    height: var(--btn-h-sm);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
  }
  .btn--ghost{ background: transparent !important; border-color: var(--stroke); }
  .btn--primary{
    border-color: rgba(77,163,255,.55);
    background: linear-gradient(135deg, rgba(77,163,255,.18), rgba(255,255,255,.04));
  }
  @supports (border-color: color-mix(in oklab, white 50%, black)){
    .btn--primary{
      border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke));
      background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 20%, transparent), rgba(255,255,255,.04));
    }
  }
  .btn--danger{
    border-color: rgba(255,80,80,.35);
    background: rgba(255,80,80,.12);
  }
  @supports (border-color: color-mix(in oklab, white 50%, black)){
    .btn--danger{
      border-color: color-mix(in oklab, var(--danger) 55%, var(--stroke));
      background: color-mix(in oklab, var(--danger) 10%, rgba(255,255,255,.04));
    }
  }
  .btn--danger:hover{ background: rgba(255,80,80,.18); }

  .btn[disabled], .btn:disabled{
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    filter: none !important;
  }
  .btn.is-loading,
  .btn[aria-busy="true"]{
    position: relative;
    pointer-events: none;
    color: transparent !important;
  }
  .btn.is-loading::after,
  .btn[aria-busy="true"]::after{
    content:"";
    position:absolute;
    width:16px; height:16px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.35);
    border-top-color: rgba(255,255,255,.92);
    animation: amf-spin .8s linear infinite;
  }
  :root[data-theme="light"] .btn.is-loading::after,
  :root[data-theme="light"] .btn[aria-busy="true"]::after{
    border-color: rgba(10,14,24,.25);
    border-top-color: rgba(10,14,24,.85);
  }
  @keyframes amf-spin{ to{ transform: rotate(360deg); } }

  .icon-btn{
    height: var(--btn-h-sm);
    width: var(--btn-h-sm);
    border-radius: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    cursor:pointer;
    transition: transform var(--trans), background var(--trans), border-color var(--trans);
  }
  .icon-btn:active{ transform: translateY(1px); }
  .icon-btn.active{
    border-color: rgba(77,163,255,.55);
    background: rgba(77,163,255,.14);
  }
  @supports (border-color: color-mix(in oklab, white 50%, black)){
    .icon-btn.active{
      border-color: color-mix(in oklab, var(--accent) 55%, var(--stroke));
      background: color-mix(in oklab, var(--accent) 14%, transparent);
    }
  }

  /* Cards */
  .card{
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), transparent),
      var(--card);
    box-shadow: var(--shadow-sm);
    padding: var(--pad-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
    position: relative;
    min-width: 0;
  }
  @supports (border-color: color-mix(in oklab, white 50%, black)){
    .card{
      border-color: color-mix(in oklab, var(--stroke) 82%, transparent);
      background:
        linear-gradient(180deg, color-mix(in oklab, var(--card2) 70%, transparent), transparent),
        var(--card);
    }
  }
  :root[data-theme="light"] .card{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  }
  @media (pointer:fine){
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(77,163,255,.18);
      box-shadow: 0 18px 54px rgba(0,0,0,.34);
    }
    @supports (border-color: color-mix(in oklab, white 50%, black)){
      .card:hover{ border-color: color-mix(in oklab, var(--accent) 18%, var(--stroke2)); }
    }
  }
  @media (max-width: 420px){
    .card{
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
  a.card{ color: inherit; text-decoration:none; }
  .link-card{ cursor:pointer; }
  .link-card:active{ transform: scale(.99); }

  /* Hero */
  .hero{
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background:
      radial-gradient(600px 240px at 20% 0%, rgba(77,163,255,.20), transparent 60%),
      radial-gradient(700px 260px at 90% 10%, rgba(165,110,255,.16), transparent 60%),
      rgba(255,255,255,.04);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.18);
    font-weight: 700;
    font-size: 12px;
  }
  :root[data-theme="light"] .hero-badge{ background: rgba(255,255,255,.62); }
  .hero-title{
    margin: 10px 0 6px;
    font-family: var(--ff-title);
    font-size: 34px;
    letter-spacing: .02em;
  }
  .hero-sub{ margin:0 0 12px; color: var(--muted); }
  .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }

  /* Lists */
  .list{ display:grid; gap: 10px; }
  .list-item{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: var(--pad-item);
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    transition: transform var(--trans), border-color var(--trans), background var(--trans);
    min-width:0;
  }
  :root[data-theme="light"] .list-item{ background: rgba(0,0,0,.03); }
  .list-item:hover{ transform: translateY(-1px); border-color: var(--stroke2); }
  @media (pointer:fine){
    .list-item:hover{ background: rgba(255,255,255,.07); }
    :root[data-theme="light"] .list-item:hover{ background: rgba(0,0,0,.04); }
  }
  .title{ font-weight: 900; }
  .chev{ opacity:.8; font-size: 22px; padding-left: 6px; }

  .list-plain{ margin: 10px 0 0; padding-left: 18px; }
  .list-plain li{ margin: 6px 0; }

  /* Team logos (never crop) */
  .logo-sm,
  .logo,
  .logo-xl{
    display:block;
    object-fit: contain;
    object-position: center;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    padding: 3px;
    border-radius: 999px;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .logo-sm{ width: 26px; height: 26px; }
  .logo{ width: 44px; height: 44px; padding: 4px; }
  .logo-xl{ width: 68px; height: 68px; padding: 6px; }

  /* =========================
     AVATAR — SINGLE SOURCE OF TRUTH
     - default: cover (looks like Instagram in lists)
     - optional: add .avatar--contain to show full image
  ========================= */
  .avatar{
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
  }
  .avatar img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 35%;
  }
  .avatar.avatar--contain img{
    object-fit: contain;
    padding: 6px;
    background: rgba(0,0,0,.10);
  }
  .avatar.placeholder{
    display:grid;
    place-items:center;
    font-weight: 900;
    letter-spacing: .06em;
    color: color-mix(in oklab, var(--text) 88%, white 12%);
  }
  @media (max-width: 520px){
    .avatar{
      width: 44px;
      height: 44px;
      flex-basis: 44px;
    }
  }

  /* Badges + chips */
  .badge{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.16);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .2px;
  }
  :root[data-theme="light"] .badge{ background: rgba(0,0,0,.04); }

  .badge.status{
    border-color: var(--stroke2);
    background: rgba(255,255,255,.06);
  }
  .badge.status::before{
    content:"";
    width: 7px; height: 7px; border-radius: 999px;
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  }
  :root[data-theme="light"] .badge.status::before{
    background: rgba(10,14,24,.55);
    box-shadow: 0 0 0 3px rgba(10,14,24,.10);
  }
  .badge.status.upcoming{
    border-color: rgba(0,255,160,.25);
    background: rgba(0,255,160,.08);
  }
  .badge.status.upcoming::before{
    background: var(--good);
    box-shadow: 0 0 0 3px rgba(0,255,160,.16);
  }
  .badge.status.past{
    border-color: var(--stroke2);
    background: rgba(255,255,255,.05);
  }
  .badge.status.live{
    border-color: rgba(255,60,110,.45);
    background: rgba(255,60,110,.10);
  }
  .badge.status.live::before{
    background: rgba(255,60,110,.92);
    box-shadow: 0 0 0 3px rgba(255,60,110,.16);
    animation: amf-pulse 1.1s ease-in-out infinite;
  }
  @keyframes amf-pulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.35); opacity: .65; }
  }

  .chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
  }
  :root[data-theme="light"] .chip{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }

  /* Empty + error */
  .empty{
    padding: 14px;
    border-radius: var(--radius);
    border: 1px dashed var(--stroke);
    color: var(--muted);
    text-align: center;
  }
  .error{
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,80,80,.35);
    background: rgba(255,80,80,.10);
    color: rgba(255,80,80,.92);
  }

  /* Stats */
  .stats-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }
  @media (max-width: 520px){ .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .stat{
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    text-align:center;
  }
  :root[data-theme="light"] .stat{ background: rgba(0,0,0,.03); }
  .stat-v{ font-weight: 900; font-size: 22px; }
  .stat-k{ margin-top: 2px; font-size: 12px; color: var(--muted); }

  /* Tables */
  .table-wrapper{
    max-width: 100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
  }
  table{ width:100%; border-collapse: collapse; min-width: 620px; }
  th, td{ padding: 12px; text-align: center; border-bottom: 1px solid var(--stroke); }
  th{
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.04);
    position: sticky;
    top: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  :root[data-theme="light"] th{ color: rgba(10,14,24,.78); background: rgba(0,0,0,.03); }

  td:nth-child(2), th:nth-child(2){ text-align: left; }

  td img{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
    margin-right: 8px;
    padding: 2px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    box-sizing: border-box;
  }
  .table-wrapper tbody tr:nth-child(odd){ background: rgba(255,255,255,.03); }
  :root[data-theme="light"] .table-wrapper tbody tr:nth-child(odd){ background: rgba(0,0,0,.02); }
  @media (pointer:fine){
    .table-wrapper tbody tr:hover{ background: rgba(77,163,255,.08); }
  }
  .table-wrapper td{ font-size: 13px; }
  @media (max-width: 520px){
    table{ min-width: 520px; }
    th, td{ padding: 10px; }
  }

  /* Segments */
  .segment, .segmented{
    display:inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    max-width: 100%;
  }
  .segbtn, .segmented .seg{
    height: var(--btn-h-sm);
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
  }
  .segbtn.active, .segmented .seg.active{
    color: var(--text);
    border-color: var(--stroke);
    background: rgba(77,163,255,.12);
  }

  /* Skeletons */
  @keyframes shimmer{ 0%{ background-position: -400px 0; } 100%{ background-position: 400px 0; } }
  .skeleton{
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
    background-size: 800px 100%;
    animation: shimmer 1.2s infinite linear;
  }
  .skeleton-card{ height: 74px; }
  .skeleton-block{ height: 160px; }
  .skeleton-title{ height: 42px; }

  /* Top buttons */
  .top-btn{
    position: fixed;
    top: 12px;
    z-index: 1000;

    height: 38px;
    padding: 0 12px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 8px;

    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.25);

    font-weight: 800;
    letter-spacing: .2px;

    transition: transform var(--trans), border-color var(--trans), background var(--trans);
  }
  :root[data-theme="light"] .top-btn{ background: rgba(255,255,255,.72); }
  .top-btn:hover{ transform: translateY(-1px); border-color: var(--stroke2); }
  .top-left{ left: 12px; }
  .top-right{ right: 12px; }

  /* Center league logo */
  .top-logo{
    --logoSize: clamp(84px, 18vw, 120px);
    position: fixed;
    top: clamp(6px, 1.6vw, 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;

    width: var(--logoSize);
    height: var(--logoSize);

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.25);

    transition: transform var(--trans), border-color var(--trans), background var(--trans);
  }
  .top-logo img{
    width: calc(var(--logoSize) * 0.90);
    height: calc(var(--logoSize) * 0.90);
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  }
  @media (pointer:fine){
    .top-logo:hover{
      transform: translateX(-50%) translateY(-1px) scale(1.01);
      border-color: var(--stroke2);
      background: rgba(0,0,0,.22);
    }
    :root[data-theme="light"] .top-logo:hover{ background: rgba(255,255,255,.78); }
  }
  @media (max-width: 420px){ .top-logo{ --logoSize: 78px; } }

  /* Tabbar */
  .tabbar{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1000;

    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;

    padding: 8px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 50px rgba(0,0,0,.35);
  }
  :root[data-theme="light"] .tabbar{ background: rgba(255,255,255,.72); }

  .tabbar a{
    height: 44px;
    border-radius: 999px;

    display:flex;
    flex-direction: column;
    gap: 2px;
    align-items:center;
    justify-content:center;

    font-weight: 900;
    font-size: 12px;
    color: var(--muted);
    padding-top: 6px;
    line-height: 1.05;

    transition: background var(--trans), color var(--trans), border-color var(--trans);
  }
  .tabbar a::before{
    content:"";
    font-size: 14px;
    opacity: .9;
  }
  .tabbar a[data-tab="home"]::before{ content: "⌂"; }
  .tabbar a[data-tab="tournaments"]::before{ content: "🏆"; }
  .tabbar a[data-tab="matches"]::before{ content: "⚽"; }
  .tabbar a[data-tab="teams"]::before{ content: "👥"; }

  .tabbar a.active{
    color: var(--text);
    background: rgba(77,163,255,.12);
    border: 1px solid rgba(77,163,255,.20);
  }

  /* Modal */
  .modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 18px;
  }
  .modal-backdrop.show{ display:flex; }

  .modal{
    width: min(520px, 96vw);
    border-radius: 18px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px;
    box-shadow: var(--shadow);
  }
  :root[data-theme="light"] .modal{ background: rgba(255,255,255,.85); }

  /* Toast */
  .toast{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 99999;
    display:grid;
    gap: 8px;
    pointer-events: none;
  }
  .toast .toast-item{
    pointer-events: auto;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 10px;
  }
  :root[data-theme="light"] .toast .toast-item{ background: rgba(255,255,255,.80); }
  .toast .toast-title{ font-weight: 900; }
  .toast .toast-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }

  /* Validation helpers */
  .help{ font-size: 12px; color: var(--muted); line-height: 1.25; margin-top: 4px; }
  .help.error{ color: rgba(255,80,80,.92); }
  .help.ok{ color: var(--good); }

  .field.is-invalid input,
  .field.is-invalid select,
  .field.is-invalid textarea,
  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"]{
    border-color: rgba(255,80,80,.45);
    box-shadow: 0 0 0 3px rgba(255,80,80,.12);
  }
  .field.is-valid input,
  .field.is-valid select,
  .field.is-valid textarea{
    border-color: rgba(0,255,160,.35);
    box-shadow: 0 0 0 3px rgba(0,255,160,.10);
  }

  /* Text truncation safety */
  :where(.name, .tname, .sp-name, .cup-team-name, .team-name, .leader-text){
    min-width: 0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mobile: toolbars/segments scroll instead of breaking layout */
  @media (max-width: 600px){
    .toolbar, .filters, .segmented, .tabs{
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .toolbar > *, .filters > *, .segmented > *, .tabs > *{
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }

  /* Input wrap */
  .input-wrap{ position:relative; width:100%; max-width: 420px; }
  .input-clear{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:12px;
    border:1px solid var(--stroke);
    background:var(--card2);
    color:var(--text);
    display:grid; place-items:center;
    cursor:pointer;
  }
  .input-clear:active{ transform:translateY(-50%) scale(.98); }

  /* Social links */
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .social-links{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .social-mini{ display:flex; gap: 6px; flex-wrap: wrap; }
  .social-link{
    height: 30px;
    min-width: 34px;
    padding: 0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration:none;
    transition: transform var(--trans), background var(--trans), border-color var(--trans);
  }
  .social-link svg{ opacity: .92; }
  .social-link:hover{
    transform: translateY(-1px);
    background: rgba(77,163,255,.10);
    border-color: rgba(77,163,255,.35);
  }
  .social-link:focus-visible{
    outline: 2px solid rgba(77,163,255,.55);
    outline-offset: 2px;
  }

  /* Free agents card */
  .agent-card .agent-head{ display:flex; align-items:center; gap: 12px; min-width: 0; }
  .agent-card .agent-meta{ min-width: 0; }
  .agent-card .agent-meta .title{
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .agent-card .agent-badges{
    margin-left:auto;
    display:flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content:flex-end;
  }

  /* Admin image previews */
  .thumb{
    width: 78px;
    height: 78px;
    border-radius: 16px;
    object-fit: contain;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    display:block;
  }
  :root[data-theme="light"] .thumb{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }
}

/* =========================
   PAGES / DOMAIN
========================= */
@layer pages{
  /* Match rows */
  .match-card, .match-row{ position: relative; overflow: hidden; }

  .card.match-card,
  .card.match-row{
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 14px 12px;
    margin: 0;
  }
  :root[data-theme="light"] .card.match-card,
  :root[data-theme="light"] .card.match-row{
    border-bottom-color: rgba(0,0,0,.10);
  }
  .match-card::before, .match-row::before,
  .match-card::after,  .match-row::after{ content: none !important; }

  .match-card .meta, .match-row .meta{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 10px;
    margin: 0 0 10px 0;
    flex-wrap: wrap;
    opacity: .9;
  }

  .match-card .row,
  .match-row .row{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap: 14px;
    min-width:0;
  }

  .team.side{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width:0;
    font-weight: 700;
    letter-spacing: .2px;
  }
  .team.side.right{ justify-content:flex-end; text-align:right; }
  .team .name{ min-width:0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

  .match-card .logo-sm, .match-row .logo-sm{
    width: 28px; height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    object-fit: contain;
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
  }
  :root[data-theme="light"] .match-card .logo-sm,
  :root[data-theme="light"] .match-row .logo-sm{
    border-color: rgba(0,0,0,.16);
    background: rgba(0,0,0,.02);
  }

  .logo-sm.placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
  }

  .score{
    text-align:center;
    font-family: var(--ff-title);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    min-width: 74px;
  }
  :root[data-theme="light"] .score{
    border-color: rgba(0,0,0,.14);
    background: rgba(255,255,255,.65);
  }

  @media (pointer:fine){
    .card.match-card:hover,
    .card.match-row:hover{
      transform: none;
      background: rgba(255,255,255,.03);
      border-bottom-color: rgba(77,163,255,.22);
    }
    :root[data-theme="light"] .card.match-card:hover,
    :root[data-theme="light"] .card.match-row:hover{
      background: rgba(0,0,0,.02);
    }
  }

  .card.match-card.is-upcoming,
  .card.match-row.is-upcoming{ border-bottom-color: rgba(43,213,118,.35); }
  .card.match-card.is-live,
  .card.match-row.is-live{ border-bottom-color: rgba(255,60,110,.55); }

  @media (max-width: 420px){
    .card.match-card, .card.match-row{ padding: 12px 10px; }
    .match-card .row, .match-row .row{ gap: 10px; }
    .score{ font-size: 20px; min-width: 68px; }
    .match-card .logo-sm, .match-row .logo-sm{ width: 26px; height: 26px; }
  }

  /* Two columns */
  .two-col{ display:grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 760px){ .two-col{ grid-template-columns: 1fr 1fr; } }

  /* Lineups */
  .lineup-card .lineup-head{
    display:flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .lineup-title{ font-family: var(--ff-title); font-size: 26px; letter-spacing: .6px; }
  .lineup-list{ display:flex; flex-wrap: wrap; gap: 8px; }

  .pill-btn{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
  }
  .pill-btn:hover{ background: rgba(255,255,255,.06); }

  /* Team hero */
  .team-hero{
    display:flex;
    align-items:center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.16);
    background:
      radial-gradient(520px 240px at 18% 0%, rgba(77,163,255,.18), transparent 60%),
      radial-gradient(520px 240px at 88% 10%, rgba(165,110,255,.14), transparent 60%),
      rgba(255,255,255,.04);
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
    min-width: 0;
  }
  .team-hero-meta{ min-width:0; }
  .team-hero-meta .page-title{ margin:0; }

  /* Player hero + Instagram card */
  .player-hero{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    align-items: start;
    min-width: 0;
  }
  @media (max-width: 420px){
    .player-hero{ grid-template-columns: 140px 1fr; }
  }

  .player-photo-card{
    position: relative;
    width: 180px;
    max-width: 42vw;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
    isolation: isolate;
  }
  @media (max-width: 520px){
    .player-photo-card{ width: 140px; border-radius: 16px; }
  }

  .player-photo-card .avatar-bg{
    position: absolute;
    inset: -18px;
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.1);
    transform: scale(1.08);
    opacity: .55;
    z-index: 0;
  }
  .player-photo-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.10), transparent 55%),
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.40));
    z-index: 1;
    pointer-events: none;
  }
  .player-photo-card > img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    z-index: 2;
  }
  .player-photo-card .avatar-ring{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.10);
    z-index: 3;
    pointer-events: none;
  }
  .player-photo-placeholder{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: .10em;
    color: rgba(255,255,255,.80);
    background:
      radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,.12), transparent 55%),
      rgba(0,0,0,.25);
    z-index: 2;
  }
  .player-badge{
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    z-index: 4;
  }
  :root[data-theme="light"] .player-badge{
    background: rgba(255,255,255,.75);
    color: rgba(10,14,24,.92);
    border-color: rgba(0,0,0,.10);
  }

  /* Info grid */
  .info-grid{
    margin-top: 10px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .info-row{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    min-width: 0;
  }
  :root[data-theme="light"] .info-row{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }
  .info-row .k{ opacity:.75; font-size: 12px; }
  .player-summary-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 10px;
  }
  @media (max-width: 760px){
    .player-summary-grid{ grid-template-columns: 1fr; }
  }
  .summary-panel{ padding: 14px; }
  .summary-title{
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .summary-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
  }
  .mini-metrics-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  .mini-metric{
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
  }
  :root[data-theme="light"] .mini-metric{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }
  .mini-metric-v{ font-weight: 900; font-size: 18px; }
  .mini-metric-k{ font-size: 12px; color: var(--muted); margin-top: 2px; }
  .season-mini-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
    gap: 10px;
    margin-top: 12px;
  }
  .season-mini-card{ padding: 12px; }
  .season-mini-title{ font-weight: 800; margin-bottom: 8px; }
  .season-mini-stats{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
  }
  .form-panel{ padding: 14px; margin-top: 12px; }
  .form-strip{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
    gap: 10px;
  }
  .form-item{
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    min-width: 0;
  }
  :root[data-theme="light"] .form-item{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }
  .form-chip{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    font-weight: 900;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    margin-bottom: 8px;
  }
  .form-chip.win{ background: rgba(16,185,129,.18); color: #c9ffe8; border-color: rgba(16,185,129,.30); }
  .form-chip.draw{ background: rgba(250,204,21,.16); color: #fff0af; border-color: rgba(250,204,21,.28); }
  .form-chip.loss{ background: rgba(239,68,68,.18); color: #ffd3d3; border-color: rgba(239,68,68,.30); }
  .form-opponent{ font-weight: 700; line-height: 1.2; }
  .form-score, .form-extra{ font-size: 12px; margin-top: 4px; }
  .activity-row{ padding: 14px; }
  .activity-top{ display:flex; gap: 12px; align-items:flex-start; }
  .activity-scorebox{ display:flex; flex-direction:column; align-items:center; gap: 8px; min-width: 48px; }
  .activity-score{ font-weight: 900; font-size: 16px; }
  .activity-main{ min-width:0; flex:1; }
  .activity-title{ font-weight: 800; line-height: 1.25; }
  .activity-meta{
    display:flex;
    flex-wrap:wrap;
    gap: 6px;
    align-items:center;
    margin-top: 4px;
    font-size: 12px;
  }
  .activity-feats, .activity-events{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin-top: 10px;
  }
  .player-note{ margin-bottom: 10px; }
  .info-row .v{ font-weight: 900; font-size: 13px; }
  @media (max-width: 420px){ .info-grid{ grid-template-columns: 1fr; } }

  /* Timeline */
  .link-plain{
    color: inherit;
    text-decoration: none;
  }
  .link-plain:hover,
  .event-player-link:hover{ text-decoration: underline; }
  .event-player-link{ color: inherit; }

  .event-summary-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 12px 0;
  }
  @media (min-width: 760px){ .event-summary-grid{ grid-template-columns: 1fr 1fr; } }
  .event-summary-card{ min-width: 0; }
  .event-summary-head{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 900;
  }
  .event-summary-line{
    display:grid;
    grid-template-columns: 84px 1fr;
    gap: 10px;
    align-items:start;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .event-summary-line:first-of-type{ border-top: 0; }
  .event-summary-k{ font-size: 12px; color: var(--muted); }
  .event-summary-v{ min-width: 0; line-height: 1.45; }
  .event-chip-extra{
    display:inline-flex;
    align-items:center;
    margin-left: 6px;
    opacity: .7;
    font-size: 11px;
    font-weight: 900;
  }

  .timeline{ margin: 12px 0; }
  .timeline-wrap{
    position: relative;
    display:grid;
    gap: 10px;
    padding: 10px 0;
  }
  .timeline-wrap::before{
    content:'';
    position:absolute;
    top:0; bottom:0;
    left:50%;
    width:2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, rgba(110,168,255,.0), rgba(110,168,255,.35), rgba(110,168,255,.0));
  }
  .timeline-row{ position: relative; display:flex; align-items: stretch; }
  .timeline-row.left{ justify-content:flex-start; padding-right: 52%; }
  .timeline-row.right{ justify-content:flex-end; padding-left: 52%; }
  .timeline-dot{
    position:absolute;
    left:-6px; top:18px;
    width:12px; height:12px;
    border-radius:999px;
    background: rgba(110,168,255,.95);
    box-shadow: 0 0 0 4px rgba(110,168,255,.18);
  }
  .timeline-card{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    min-height: 44px;
    max-width: min(420px, calc(100vw - 40px));
    overflow: hidden;
    min-width: 0;
  }
  :root[data-theme="light"] .timeline-card{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
  .timeline-card.left{ border-top-right-radius: 22px; }
  .timeline-card.right{ border-top-left-radius: 22px; }
  .timeline-min{ font-weight: 900; font-family: var(--ff-title); letter-spacing:.5px; font-size: 18px; }
  .timeline-ico{ font-size: 16px; }
  .timeline-main{ display:flex; flex-direction: column; line-height: 1.15; min-width:0; }
  .timeline-who{ font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timeline-team{ font-size: 12px; color: var(--muted); }
  @media (max-width: 520px){
    .timeline-row.left{ padding-right: 56%; }
    .timeline-row.right{ padding-left: 56%; }
  }

  /* Goal + Assist (single block) */
  .goal-combo{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    max-width: 100%;
  }
  .goal-combo .sep{ opacity: .7; font-weight: 900; }
  .goal-combo select{ width: 100%; min-width: 0; }
  #ev-assist-wrap[hidden]{ display:none !important; }

  /* =========================================================
     UCL BEST (Leaders) — EPL / Instagram style (FINAL)
     - Uses ONLY .leader-avatar (no conflict with .avatar)
  ========================================================= */
  .ucl-leaders-card{
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--stroke2) 65%, transparent);
    background:
      radial-gradient(900px 420px at 20% 0%, color-mix(in oklab, var(--accent2) 26%, transparent), transparent 60%),
      radial-gradient(900px 520px at 120% 110%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 58%),
      linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      var(--card);
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }

  .ucl-leaders-card .card-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
  }
  .ucl-leaders-card .card-head .section-title{
    margin: 0;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-weight: 900;
  }
  .ucl-leaders-card .head-right{ display:flex; align-items:center; gap: 8px; }
  .ucl-leaders-card .chip-right{
    display:inline-flex;
    align-items:center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: color-mix(in oklab, var(--text) 92%, white 8%);
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: color-mix(in oklab, var(--accent) 14%, rgba(255,255,255,.04));
  }

  .leader-list{
    display:flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 14px 14px;
  }

  .leader-row{
    position: relative;
    display:grid;
    grid-template-columns: 28px 56px 1fr 84px; /* rank | avatar | text | value */
    align-items: center;
    gap: 12px;

    padding: 12px 12px;
    border-radius: 18px;

    border: 1px solid color-mix(in oklab, var(--stroke2) 65%, transparent);
    background:
      radial-gradient(320px 180px at 18% 20%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: 0 10px 26px rgba(0,0,0,.18);

    min-width: 0;
    transform: translateZ(0);
  }
  :root[data-theme="light"] .leader-row{
    background:
      radial-gradient(320px 180px at 18% 20%, rgba(0,0,0,.04), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }
  .leader-row::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width: 10px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent2) 70%, transparent),
      color-mix(in oklab, var(--accent) 70%, transparent)
    );
    opacity: .85;
  }
  @media (pointer:fine){
    .leader-row:hover{
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--accent) 22%, var(--stroke2));
      background:
        radial-gradient(320px 180px at 18% 20%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    }
  }

  .leader-rank{
    text-align: center;
    font-weight: 1000;
    font-variant-numeric: tabular-nums;
    opacity: .95;
    font-size: 14px;
  }

  /* Leader avatar: Instagram/EPL cover + blur background
     IMPORTANT: For blur to work, set inline style:
       style="--avatar-bg:url('PHOTO_URL')"
     If you don't set it, it still looks fine (just no blur image). */
  .leader-avatar{
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    overflow: hidden;

    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: rgba(0,0,0,.25);

    box-shadow:
      0 10px 24px rgba(0,0,0,.28),
      inset 0 0 0 1px rgba(255,255,255,.06);
    flex: 0 0 auto;
  }
  .leader-avatar::before{
    content:"";
    position:absolute;
    inset:-14px;
    background-image: var(--avatar-bg);
    background-size: cover;
    background-position: center;
    filter: blur(14px) saturate(1.1);
    opacity: .55;
    transform: scale(1.1);
    z-index: 0;
  }
  .leader-avatar img{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display:block;
  }
  .leader-avatar.placeholder{
    display:grid;
    place-items:center;
    font-weight: 1000;
    letter-spacing: .6px;
    color: color-mix(in oklab, var(--text) 88%, white 12%);
  }

  .leader-text{
    min-width: 0;
    display:flex;
    flex-direction: column;
    gap: 4px;
  }
  .leader-name{
    font-weight: 1000;
    font-size: 16px;
    line-height: 1.05;
    letter-spacing: .2px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .leader-subline{
    display:flex;
    align-items:center;
    gap: 8px;
    min-width: 0;
    color: var(--muted);
  }
  .team-logo-mini{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: contain;
    object-position: center;
    border: 1px solid color-mix(in oklab, var(--stroke2) 70%, transparent);
    background: rgba(255,255,255,.06);
    padding: 2px;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
  .team-name-mini{
    min-width: 0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    opacity: .95;
  }

  .leader-val{
    text-align: right;
    font-family: var(--ff-title);
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: color-mix(in oklab, var(--text) 92%, white 8%);
    text-shadow: 0 10px 18px rgba(0,0,0,.35);
  }

  @media (max-width: 420px){
    .leader-list{ padding: 0 12px 12px; gap: 8px; }
    .leader-row{
      grid-template-columns: 24px 52px 1fr 72px;
      padding: 10px 10px;
      border-radius: 16px;
    }
    .leader-row::before{ border-radius: 16px 0 0 16px; }
    .leader-avatar{ width: 52px; height: 52px; border-radius: 16px; }
    .leader-name{ font-size: 15px; }
    .leader-val{ font-size: 30px; }
  }
  @media (max-width: 360px){
    .leader-row{ grid-template-columns: 22px 48px 1fr 64px; }
    .leader-avatar{ width: 48px; height: 48px; border-radius: 14px; }
    .leader-val{ font-size: 28px; }
  }

  /* Cup / qualify highlight */
  .ucl-qualify td{ background: rgba(46, 204, 113, .08); }
  :root[data-theme="light"] .ucl-qualify td{ background: rgba(46, 204, 113, .14); }

  /* Explicit team logo class (non-table) */
  .team-logo{
    width: 28px;
    height: 28px;
    display:block;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    object-fit: contain;
    object-position: center;
    padding: 3px;
    box-sizing: border-box;
  }

  /* Table cell with logo + name */
  .table-wrapper td.team-cell{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .table-wrapper td.team-cell .team-name{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Admin forms */
  .form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .field-wide{ grid-column:1 / -1; }
  .label{
    font-size: 12px;
    font-weight: 900;
    letter-spacing:.02em;
    color: rgba(255,255,255,.75);
  }
  :root[data-theme="light"] .label{ color: rgba(10,14,24,.70); }
  @media (max-width: 420px){ .form-grid{ grid-template-columns: 1fr; } }

  /* Accordion */
  .section-box{
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255,255,255,.04);
    margin: 14px 0;
    box-shadow: var(--shadow-sm);
  }
  .section-header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor:pointer;
    user-select:none;
    background: rgba(0,0,0,.12);
  }
  :root[data-theme="light"] .section-header{ background: rgba(255,255,255,.55); }
  .section-content{ display:none; padding: 14px; }
  .section-box.open > .section-content{ display:block; }

  .toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    min-width:0;
  }
  .toolbar.split{ justify-content: space-between; }
  .toolbar.stretch > *{ flex: 1; min-width: 220px; }
  .filters-card{ margin-bottom: 12px; }
  .small-note{ font-size: 12px; color: var(--muted); }
}

/* =========================
   OVERRIDES (last)
========================= */
@layer overrides{
  /* Optional: admin compact shortcut */
  body.admin-compact,
  .admin-compact{
    --pad-card: 12px;
    --pad-item: 10px;
    --ctrl-h: 38px;
    --btn-h: 36px;
    --btn-h-sm: 32px;
    --gap: 10px;
  }

  /* Hardening: never allow page overflow from long text */
  :where(.page-title, .title, .subtitle){ overflow-wrap:anywhere; }
  :where(.card, .row, .list-item, .toolbar, .tabs, .filters, .player-hero, .team-hero, .timeline, .timeline-wrap){ max-width:100%; }
  :where(.flex, .row, .list-item, .card, .toolbar, .filters, .tabs, .segmented) > *{ min-width:0; }

  /* Mobile clamp for long names (avoid layout break) */
  @media (max-width: 600px){
    .match-team .name,
    .team-name,
    .leader-name,
    .team-name-mini{
      white-space: normal;
      overflow: hidden;
      text-overflow: clip;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow-wrap: anywhere;
    }
  }
}
/* ===== PATCH: top-logo no-overlap with first hero (paste at VERY END) ===== */
@layer overrides{
  /* 1) One source of truth for center logo size */
  :root{
    --top-logo-size: clamp(84px, 18vw, 120px);
    /* reserve space: half of logo + safe gap */
    --page-top: calc((var(--top-logo-size) / 2) + 40px);
  }

  /* tighter on small screens (still no overlap) */
  @media (max-width: 520px){
    :root{
      --top-logo-size: 92px;
      --page-top: calc((var(--top-logo-size) / 2) + 44px);
    }
  }
  @media (max-width: 420px){
    :root{
      --top-logo-size: 78px;
      --page-top: calc((var(--top-logo-size) / 2) + 46px);
    }
  }

  /* 2) Apply token to the actual logo */
  .top-logo{
    --logoSize: var(--top-logo-size);
    top: 10px;                 /* keep it visually on top */
  }

  /* 3) Optional: add a little breathing room before the very first hero/header */
  .page > .team-hero,
  .page > .hero,
  .page > .card:first-child{
    margin-top: 6px;
  }
}
/* ===== PATCH: UCL League match cards + Form dots ===== */
@layer overrides{

  /* --- League match cards (structure page) --- */
  .ucl-matches{ display:grid; gap: 14px; }
  .ucl-round-section{ display:grid; gap: 10px; }
  .ucl-round-title{
    margin: 8px 2px 0;
    font-family: var(--ff-title);
    letter-spacing: .5px;
  }
  .ucl-match-list{ display:grid; gap: 10px; }

  .card.ucl-match-card{
    text-decoration:none;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
  }
  :root[data-theme="light"] .card.ucl-match-card{
    border-color: rgba(0,0,0,.10);
    background: rgba(0,0,0,.02);
  }

  .ucl-match-top{
    display:flex;
    justify-content:space-between;
    gap: 10px;
    font-size: 12px;
    opacity: .85;
    margin-bottom: 8px;
  }

  .ucl-match-row{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap: 12px;
  }

  .ucl-side{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
    font-weight: 800;
  }
  .ucl-side.right{ justify-content:flex-end; text-align:right; }
  .ucl-team-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .ucl-score{
    font-family: var(--ff-title);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    min-width: 74px;
    text-align:center;
  }
  :root[data-theme="light"] .ucl-score{
    border-color: rgba(0,0,0,.14);
    background: rgba(255,255,255,.65);
  }

  .ucl-match-card .team-logo{
    width: 26px;
    height: 26px;
    border-radius: 999px;
    object-fit: contain;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    padding: 2px;
    box-sizing:border-box;
    flex: 0 0 auto;
  }

  @media (max-width: 600px){
    .ucl-team-name{
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    .ucl-score{ font-size: 18px; min-width: 64px; }
  }

/* =========================
   Team page — Form dots (как на скрине)
   Works with:
   <div id="team-form" class="form-dots">
     <a class="form-dot win">W</a> ...
   </div>
   ========================= */

.form-dots{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 7px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.form-dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;

  text-decoration: none;
  user-select: none;

  color: rgba(255,255,255,.96);
  border: 0;
  background: rgba(255,255,255,.10);

  box-shadow:
    0 6px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18);

  transition: transform .12s ease, filter .12s ease;
}

.form-dot:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.form-dot:active{
  transform: translateY(0px);
}

.form-dot.win{  background: rgba(46, 204, 113, .95); }
.form-dot.loss{ background: rgba(231, 76, 60, .95); }

.form-dot.draw{
  background: rgba(180, 190, 210, .92);
  color: rgba(10,14,30,.9);
  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
}

:root[data-theme="light"] .form-dot{
  box-shadow:
    0 6px 14px rgba(10,14,30,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
}
:root[data-theme="light"] .form-dot.draw{
  color: rgba(10,14,30,.9);
}

@media (max-width: 420px){
  .form-dot{ width: 21px; height: 21px; font-size: 10.5px; }
  .form-dots{ gap: 6px; }
}

/* Если хочешь ТОЛЬКО точки без букв — добавь класс form-dots--dots на контейнер */
.form-dots.form-dots--dots .form-dot{ font-size: 0; }}
/* =========================
   Form dots (как на скрине)
   ========================= */

.form-pills{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 7px;            /* как на скрине */
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Базовый "пил" */
.form-pill{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  color: rgba(255,255,255,.96);

  border: 0;           /* на скрине без видимой рамки */
  background: rgba(255,255,255,.10);

  /* лёгкий объём как в UI на скрине */
  box-shadow:
    0 6px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Состояния */
.form-pill.win{
  background: rgba(46, 204, 113, .95);
}
.form-pill.draw{
  background: rgba(180, 190, 210, .92);
  color: rgba(10,14,30,.9); /* на сером лучше тёмная буква */
  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.form-pill.loss{
  background: rgba(231, 76, 60, .95);
}

/* Light theme — тени мягче, текст на draw темный оставляем */
:root[data-theme="light"] .form-pill{
  box-shadow:
    0 6px 14px rgba(10,14,30,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
}
:root[data-theme="light"] .form-pill.draw{
  color: rgba(10,14,30,.9);
}

/* Мобильная компактность (если нужно ещё плотнее) */
@media (max-width: 420px){
  .form-pill{
    width: 21px;
    height: 21px;
    font-size: 10.5px;
  }
  .form-pills{ gap: 6px; }
}

/* Если хочешь ТОЛЬКО точки без букв:
   добавь class="form-pills form-pills--dots" */
.form-pills.form-pills--dots .form-pill{
  font-size: 0;
}
/* =========================
   TEAM PAGE — Leaders/Filters/Matches/Roster/Transfers
   Paste into app.css (@layer pages or overrides)
========================= */

@layer pages{
  /* ---------- Layout helpers (safe) ---------- */
  #team-header{ margin-bottom: 12px; }
  #team-stats{ margin: 12px 0; }
  #team-leaders{ margin: 12px 0; }
  #team-match-filters{ margin: 10px 0 12px; }
  #team-matches{ margin-top: 6px; }

  /* ---------- Team hero ---------- */
  .team-hero{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius: var(--radius, 16px);
    background: var(--card, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.10));
  }
  .team-hero .logo-xl{
    width:64px;
    height:64px;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(0,0,0,.18);
    border: 1px solid var(--border, rgba(255,255,255,.10));
    padding:8px;
    flex: 0 0 auto;
  }
  .team-hero .logo-xl.placeholder{
    display:grid;
    place-items:center;
    color: rgba(255,255,255,.75);
    font-weight: 800;
    letter-spacing:.08em;
  }
  .team-hero-meta{ min-width:0; }
  .team-hero .page-title{
    margin:0;
    font-size: 20px;
    line-height: 1.15;
  }

  
  /* ---------- Segmented filters ---------- */
  #team-match-filters{
    display:flex;
    gap:8px;
    overflow:auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  #team-match-filters::-webkit-scrollbar{ height: 8px; }
  #team-match-filters::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    border-radius: 999px;
  }
  .segbtn{
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(255,255,255,.12));
    background: rgba(255,255,255,.06);
    color: inherit;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform .08s ease, background .12s ease, border-color .12s ease;
  }
  .segbtn:active{ transform: scale(.98); }
  .segbtn.active{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.25);
  }

  /* ---------- Leaders ---------- */
  #team-leaders-msg{
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,.18);
    opacity: .8;
  }

  #team-leaders{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  @media (min-width: 720px){
    #team-leaders{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .leaders-card{
    padding: 12px;
    border-radius: var(--radius, 16px);
    background: var(--card, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.10));
  }
  .leaders-title{
    font-weight: 900;
    letter-spacing: .04em;
    font-size: 12px;
    opacity: .85;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
  .leaders-list{
    display:flex;
    flex-direction: column;
    gap: 8px;
  }
  .leaders-item{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.12);
    text-decoration: none;
    color: inherit;
  }
  .leaders-item:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(0,0,0,.18);
  }
  .leaders-name{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
  }
  .leaders-count{
    flex: 0 0 auto;
    display:inline-grid;
    place-items:center;
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    font-weight: 900;
  }

  
  /* ---------- Match rows ---------- */
  .match-row{
    padding: 12px;
    border-radius: var(--radius, 16px);
    background: var(--card, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.10));
    text-decoration: none;
    color: inherit;
    display:block;
  }
  .match-row:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
  }

  .match-row .meta{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items:center;
    margin-bottom: 10px;
    font-size: 12px;
    opacity: .85;
  }

  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    font-weight: 800;
  }
  .badge.status.upcoming{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.24); }
  .badge.status.past{ background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.22); }

  .match-row .row{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items:center;
  }
  .match-row .team{
    display:flex;
    align-items:center;
    gap:10px;
    min-width: 0;
  }
  .match-row .team.right{
    justify-content: flex-end;
  }
  .match-row .name{
    min-width:0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750;
  }
  .logo-sm{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.12);
    padding: 4px;
    flex: 0 0 auto;
  }
  .logo-sm.placeholder{
    display:grid;
    place-items:center;
    font-weight: 900;
    opacity: .75;
    padding: 0;
  }

  .match-row .score{
    font-weight: 950;
    letter-spacing: .05em;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.16);
    min-width: 60px;
    text-align:center;
  }

  /* highlight your team row sides */
  .match-row .team.side.highlight .name{
    text-shadow: 0 0 18px rgba(255,255,255,.10);
  }

  /* ---------- Roster list (players) ---------- */
  .list{
    display:flex;
    flex-direction: column;
    gap: 8px;
  }
  .list-item{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--card, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.10));
    text-decoration:none;
    color: inherit;
  }
  .list-item:hover{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
  }
  .avatar{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.12);
    flex: 0 0 auto;
  }
  .avatar.placeholder{
    display:grid;
    place-items:center;
    font-weight: 900;
    opacity: .75;
  }
  .grow{ flex: 1 1 auto; min-width: 0; }
  .title{
    font-weight: 800;
    min-width:0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chev{ opacity: .6; font-size: 18px; }

  /* ---------- Transfers ---------- */
  .transfer-row{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
  }
  .tr-main{ min-width:0; }
  .tr-title{
    font-weight: 850;
    min-width:0;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tr-sub{
    margin-top: 6px;
    font-size: 12px;
    opacity: .8;
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items:center;
  }
  .tr-badge{
    flex: 0 0 auto;
    font-weight: 950;
    border-radius: 999px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    letter-spacing:.06em;
    min-width: 44px;
    text-align:center;
  }

  /* ---------- Chips / muted / empty / skeleton (safe minimal) ---------- */
  .chip{
    display:inline-flex;
    align-items:center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    font-size: 11px;
    font-weight: 800;
  }
  .chip-soft{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
  }
  .chip-warn{
    background: rgba(234,179,8,.14);
    border-color: rgba(234,179,8,.22);
  }
  .muted{ opacity: .75; }

  .empty-state{
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
  }
  .empty-ico{ font-size: 20px; opacity: .9; }
  .empty-title{ font-weight: 900; margin-top: 6px; }
  .empty-sub{ margin-top: 6px; opacity: .75; }

  .skeleton{
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
    background-size: 200% 100%;
    animation: sk 1.2s ease-in-out infinite;
    border: 1px solid rgba(255,255,255,.08);
  }
  .skeleton-line{ height: 14px; }
  .skeleton-title{ height: 26px; width: 60%; }
  .skeleton-block{ height: 90px; }
  @keyframes sk{
    0%{ background-position: 200% 0; }
    100%{ background-position: -200% 0; }
  }
}

/* =========================
   OPTIONAL: Light theme tweaks (if you use [data-theme="light"])
========================= */
@layer overrides{
  [data-theme="light"] .team-hero,
  [data-theme="light"] .stat,
  [data-theme="light"] .leaders-card,
  [data-theme="light"] .match-row,
  [data-theme="light"] .list-item{
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.08);
  }
  [data-theme="light"] .leaders-item,
  [data-theme="light"] .match-row .score{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.08);
  }
  [data-theme="light"] .badge,
  [data-theme="light"] .segbtn,
  [data-theme="light"] .chip{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }
}

@layer overrides{
  .home-hero{
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(560px 220px at 0% 0%, rgba(66,198,255,.22), transparent 62%),
      radial-gradient(560px 240px at 100% 0%, rgba(165,110,255,.20), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: 0 26px 70px rgba(0,0,0,.28);
  }

  .home-hero::after{
    content:"";
    position:absolute;
    inset:auto -10% -42% auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(77,163,255,.18), transparent 68%);
    pointer-events:none;
  }

  .home-hero .hero-title{
    font-size: clamp(40px, 6vw, 72px);
    line-height: .92;
    margin-bottom: 10px;
  }

  .home-hero .hero-sub{
    max-width: 760px;
    font-size: 15px;
    line-height: 1.55;
  }

  .home-hero-strip{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .home-quick-card{
    position: relative;
    display:grid;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,14,34,.52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform var(--trans), border-color var(--trans), background var(--trans);
  }

  .home-quick-card:hover{
    transform: translateY(-2px);
    border-color: rgba(77,163,255,.28);
    background: rgba(10,18,44,.72);
  }

  .home-quick-kicker{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
  }

  .home-quick-card strong{
    font-size: 18px;
    line-height: 1.05;
  }

  .home-quick-sub{
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
  }

  .home-match-card{
    margin-bottom: 10px;
  }

  .home-division-badge{
    font-weight: 900;
    letter-spacing: .04em;
  }

  .home-division-badge.is-ucl{
    background: rgba(77,163,255,.14);
    border-color: rgba(77,163,255,.25);
  }

  .home-division-badge.is-high{
    background: rgba(77,163,255,.12);
    border-color: rgba(77,163,255,.20);
  }

  .home-division-badge.is-first{
    background: rgba(43,213,118,.12);
    border-color: rgba(43,213,118,.24);
  }

  .home-division-badge.is-cup{
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.24);
  }

  :root[data-theme="light"] .home-hero{
    background:
      radial-gradient(560px 220px at 0% 0%, rgba(66,198,255,.12), transparent 62%),
      radial-gradient(560px 240px at 100% 0%, rgba(165,110,255,.10), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 18px 44px rgba(11,18,48,.08);
  }

  :root[data-theme="light"] .home-quick-card{
    background: rgba(255,255,255,.72);
    border-color: rgba(0,0,0,.08);
  }

  :root[data-theme="light"] .home-quick-card:hover{
    background: rgba(255,255,255,.94);
    border-color: rgba(29,100,255,.18);
  }

  @media (max-width: 920px){
    .home-hero-strip{
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }

  @media (max-width: 560px){
    .home-hero{
      padding: 18px;
      border-radius: 20px;
    }

    .home-hero-strip{
      grid-template-columns: 1fr;
    }

    .home-hero .hero-actions{
      display:grid;
      grid-template-columns: 1fr 1fr;
    }

    .home-hero .hero-actions > *{
      justify-content: center;
    }
  }
}


/* =========================
   SECOND PASS UX PATCHES
========================= */
@layer overrides{
  .page-hero.page-hero-compact{
    padding: 18px;
    margin-bottom: 16px;
  }

  .page-hero.page-hero-compact .hero-title{
    font-size: clamp(34px, 7vw, 56px);
    margin-bottom: 6px;
  }

  .page-hero.page-hero-compact .hero-sub{
    max-width: 720px;
  }

  .page-title.page-title-sub{
    font-size: clamp(28px, 5vw, 38px);
    margin: 0;
  }

  .filters-card{
    position: relative;
    overflow: clip;
  }

  .filters-card::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77,163,255,.55), transparent);
    pointer-events: none;
  }

  .team-card,
  .agent-card{
    min-height: 112px;
  }

  .team-card .team-card-head,
  .agent-card .agent-head{
    align-items: center;
  }

  @media (max-width: 720px){
    .page-hero.page-hero-compact{
      padding: 16px;
      border-radius: 18px;
    }
  }
}


/* Tournament summary cards */
.tour-summary{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tour-summary-line{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.tour-card .tour-name{
  margin-bottom: 4px;
}

@layer overrides{
  .directory-strip{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
  }

  .dir-stat{
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,14,34,.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }

  .dir-stat-k{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
  }

  .dir-stat-v{
    margin-top: 6px;
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 900;
    line-height: 1;
  }

  .filter-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top: 12px;
  }

  .filter-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--trans), border-color var(--trans), background var(--trans);
  }

  .filter-chip:hover{
    transform: translateY(-1px);
    border-color: rgba(77,163,255,.25);
    background: rgba(77,163,255,.10);
  }

  .filter-chip.active{
    border-color: rgba(77,163,255,.34);
    background: rgba(77,163,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  .filter-chip-count{
    min-width: 22px;
    text-align:center;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 11px;
  }

  .results-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin: 10px 0 12px;
  }

  .directory-subline{
    margin-top: 4px;
    line-height: 1.4;
  }

  .team-card-foot{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:10px;
    margin-top: 12px;
    align-items:center;
  }

  .team-card-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .team-card-social{
    margin-inline-start:auto;
  }

  .team-card .team-card-meta,
  .agent-card .agent-meta{
    min-width:0;
  }

  .team-card .title,
  .agent-card .title{
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :root[data-theme="light"] .dir-stat{
    background: rgba(255,255,255,.82);
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 10px 26px rgba(11,18,48,.06);
  }

  :root[data-theme="light"] .filter-chip{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
  }

  :root[data-theme="light"] .filter-chip.active{
    background: rgba(29,100,255,.08);
    border-color: rgba(29,100,255,.20);
  }

  @media (max-width: 760px){
    .directory-strip{
      grid-template-columns: 1fr;
    }

    .results-line{
      align-items:flex-start;
      justify-content:flex-start;
    }
  }
}


@layer overrides{
  .section-link{
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .section-link:hover{
    color: var(--text);
  }

  .home-snapshot{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 16px;
  }

  .home-snap-card{
    display:grid;
    gap: 4px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,14,34,.44);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform var(--trans), border-color var(--trans), background var(--trans);
  }

  .home-snap-card:hover{
    transform: translateY(-2px);
    border-color: rgba(77,163,255,.24);
    background: rgba(10,18,44,.66);
  }

  .home-snap-kicker{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
  }

  .home-snap-value{
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    line-height: 1;
  }

  .home-snap-sub{
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
  }

  .matches-context{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin: 0 0 12px;
  }

  .matches-context .chip,
  .matches-context .chip-soft{
    min-height: 30px;
  }

  :root[data-theme="light"] .home-snap-card{
    background: rgba(255,255,255,.74);
    border-color: rgba(0,0,0,.08);
  }

  :root[data-theme="light"] .home-snap-card:hover{
    background: rgba(255,255,255,.92);
    border-color: rgba(29,100,255,.18);
  }

  @media (max-width: 920px){
    .home-snapshot{
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
  }

  @media (max-width: 560px){
    .home-snapshot{
      grid-template-columns: 1fr;
    }

    .section-head{
      align-items: center;
    }
  }
}

@layer overrides{
  .context-actions{
    display:grid;
    gap:10px;
    margin: 14px 0 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,14,34,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }

  .context-actions-kicker{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
  }

  .context-actions-list{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
  }

  .action-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    transition: transform var(--trans), border-color var(--trans), background var(--trans);
  }

  .action-link:hover{
    transform: translateY(-1px);
    border-color: rgba(77,163,255,.24);
    background: rgba(10,18,44,.66);
  }

  .team-cell-link{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    color: inherit;
  }

  .team-cell-link:hover .team-name,
  .team-inline-link:hover{
    color: var(--accent);
  }

  .team-inline-link{
    cursor:pointer;
    transition: color var(--trans);
  }

  .tour-actions{
    margin-top: 10px;
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
  }

  .tour-actions .badge{
    min-height: 28px;
  }

  :root[data-theme="light"] .context-actions{
    background: rgba(255,255,255,.82);
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 10px 26px rgba(11,18,48,.06);
  }

  :root[data-theme="light"] .action-link{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.08);
  }

  :root[data-theme="light"] .action-link:hover{
    background: rgba(29,100,255,.08);
    border-color: rgba(29,100,255,.16);
  }

  @media (max-width: 640px){
    .context-actions{
      padding: 12px 13px;
      border-radius: 16px;
    }

    .action-link{
      min-height: 32px;
      padding: 7px 10px;
      font-size: 11px;
    }
  }
}
@layer overrides{
  .structure-ref-bracket{
    display:grid;
    gap:24px;
  }

  .structure-ref-bracket .ucl-bracket-section{
    display:grid;
    gap:12px;
  }

  .structure-ref-bracket .ucl-col-head{
    display:grid;
    gap:2px;
    align-content:start;
    min-height:42px;
  }

  .structure-ref-bracket .ucl-col-head.compact{
    min-height:auto;
  }

  .structure-ref-bracket .ucl-col-title{
    font-size:12px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#6c7a89;
  }

  .structure-ref-bracket .ucl-col-sub{
    font-size:10px;
    line-height:1.2;
    color:#94a0ad;
  }

  .structure-ref-bracket .ucl-playin-board{
    display:grid;
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap:18px;
    align-items:start;
  }

  .structure-ref-bracket .ucl-main-board{
    position:relative;
    display:grid;
    grid-template-rows:auto auto;
    gap:18px 34px;
    align-items:start;
    width:max-content;
    min-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 8px 10px 0;
    -webkit-overflow-scrolling:touch;
  }

  .structure-ref-bracket .ucl-board-svg{
    position:absolute;
    inset:0 auto 0 0;
    pointer-events:none;
    z-index:0;
    overflow:visible;
  }

  .structure-ref-bracket .ucl-stage,
  .structure-ref-bracket .stage-final{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
    min-width:190px;
  }

  .structure-ref-bracket .ucl-stage.no-stage-head .ucl-stage-list{
    margin-top:42px;
  }

  .structure-ref-bracket .stage-final{
    grid-template-rows:auto 1fr auto;
    min-width:220px;
  }

  .structure-ref-bracket .ucl-stage-list{
    display:grid;
    gap:12px;
    align-content:start;
  }

  .structure-ref-bracket .stage-r16.rail-top .ucl-stage-list,
  .structure-ref-bracket .stage-r16.rail-bottom .ucl-stage-list,
  .structure-ref-bracket .stage-playin .ucl-stage-list{
    gap:10px;
  }

  .structure-ref-bracket .stage-qf.rail-top .ucl-stage-list,
  .structure-ref-bracket .stage-qf.rail-bottom .ucl-stage-list{
    padding-top:34px;
    gap:72px;
  }

  .structure-ref-bracket .stage-sf.rail-top .ucl-stage-list,
  .structure-ref-bracket .stage-sf.rail-bottom .ucl-stage-list{
    padding-top:108px;
    gap:0;
  }

  .structure-ref-bracket .stage-final .ucl-stage-list.final-list{
    padding-top:0;
    align-content:start;
  }

  .structure-ref-bracket .ucl-final-visual{
    display:grid;
    align-content:center;
    justify-items:center;
    min-height:260px;
  }

  .structure-ref-bracket .ucl-trophy-wrap{
    display:grid;
    place-items:center;
    width:100%;
    min-height:220px;
  }

  .structure-ref-bracket .ucl-trophy-emoji{
    font-size:112px;
    line-height:1;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.16));
    opacity:.9;
  }

  .structure-ref-bracket .ucl-bracket-match{
    position:relative;
    display:grid;
    gap:8px;
    min-height:60px;
    padding:10px 12px;
    border-radius:6px;
    border:1px solid #e6eaef;
    background:#f7f8fa;
    box-shadow:0 1px 0 rgba(16,24,40,.03);
    color:#263442;
  }

  .structure-ref-bracket .ucl-bracket-match.is-link{
    cursor:pointer;
  }

  .structure-ref-bracket .ucl-bracket-match.is-link:hover{
    transform:none;
    border-color:#d9e0e7;
    background:#ffffff;
  }

  .structure-ref-bracket .ucl-match-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }

  .structure-ref-bracket .ucl-meta-stack{
    display:grid;
    gap:1px;
    min-width:0;
  }

  .structure-ref-bracket .ucl-meta-top{
    font-size:10px;
    line-height:1.2;
    color:#7d8997;
    font-weight:600;
  }

  .structure-ref-bracket .ucl-meta-sub{
    font-size:9px;
    line-height:1.15;
    color:#98a3af;
  }

  .structure-ref-bracket .ucl-info-dot{
    width:14px;
    height:14px;
    border-radius:999px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    font-size:9px;
    font-weight:800;
    color:#fff;
    background:#2d61ff;
  }

  .structure-ref-bracket .ucl-match-body{
    display:grid;
    gap:6px;
  }

  .structure-ref-bracket .ucl-team-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:18px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    transition:none;
  }

  .structure-ref-bracket .ucl-team-line:hover{
    transform:none;
    background:transparent;
    border:none;
  }

  .structure-ref-bracket .ucl-team-line.placeholder{
    cursor:default;
  }

  .structure-ref-bracket .ucl-team-line.winner .ucl-team-name,
  .structure-ref-bracket .ucl-team-line.winner .ucl-team-score{
    font-weight:800;
    color:#1f2c38;
  }

  .structure-ref-bracket .ucl-team-line.loser .ucl-team-name,
  .structure-ref-bracket .ucl-team-line.loser .ucl-team-score{
    color:#526170;
  }

  .structure-ref-bracket .ucl-team-main{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
  }

  .structure-ref-bracket .ucl-team-main .team-logo{
    width:13px;
    height:13px;
    padding:0;
    border:none;
    border-radius:999px;
    background:transparent;
    object-fit:contain;
    object-position:center;
    flex:0 0 auto;
  }

  .structure-ref-bracket .ucl-team-bullet{
    width:13px;
    height:13px;
    display:grid;
    place-items:center;
    font-size:10px;
    line-height:1;
    color:#b5bfc8;
    flex:0 0 auto;
  }

  .structure-ref-bracket .ucl-team-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    line-height:1.2;
    font-weight:700;
    color:#2e3b47;
  }

  .structure-ref-bracket .ucl-team-score{
    flex:0 0 auto;
    min-width:14px;
    text-align:right;
    font-size:11px;
    line-height:1;
    font-weight:700;
    color:#2e3b47;
  }

  .structure-ref-bracket .ucl-stage-empty{
    min-height:60px;
    border-radius:6px;
    border:1px dashed #d9dfe6;
    background:#f7f8fa;
    color:#8e99a5;
  }

  @media (max-width:1180px){
    .structure-ref-bracket .ucl-main-board{
      gap:18px 28px;
    }
  }

  @media (max-width:980px){
    .structure-ref-bracket .ucl-playin-board{
      grid-template-columns:1fr;
    }
  }

  @media (max-width:640px){
    .structure-ref-bracket .ucl-stage.no-stage-head .ucl-stage-list{
      margin-top:0;
    }

    .structure-ref-bracket .stage-qf.rail-top .ucl-stage-list,
    .structure-ref-bracket .stage-qf.rail-bottom .ucl-stage-list,
    .structure-ref-bracket .stage-sf.rail-top .ucl-stage-list,
    .structure-ref-bracket .stage-sf.rail-bottom .ucl-stage-list{
      padding-top:0;
      gap:12px;
    }

    .structure-ref-bracket .ucl-main-board{
      grid-template-rows:none;
      gap:18px;
    }

    .structure-ref-bracket .ucl-stage,
    .structure-ref-bracket .stage-final{
      min-width:200px;
    }

    .structure-ref-bracket .ucl-final-visual{
      min-height:180px;
    }

    .structure-ref-bracket .ucl-trophy-wrap{
      min-height:140px;
    }

    .structure-ref-bracket .ucl-trophy-emoji{
      font-size:88px;
    }
  }
}

/* === seventeenth pass: admin dashboard and navigation === */
.admin-summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 14px}
.admin-summary-card{border:1px solid var(--stroke);border-radius:var(--radius);padding:12px 14px;background:rgba(255,255,255,.04);box-shadow:var(--shadow)}
.admin-summary-value{font-size:1.35rem;font-weight:800;line-height:1}
.admin-summary-label{margin-top:6px;color:var(--muted);font-size:.9rem}
.section-box.is-active{outline:1px solid rgba(66,198,255,.35);box-shadow:0 0 0 1px rgba(66,198,255,.08),var(--shadow)}
.admin-list-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
@media (max-width:720px){.admin-list-row{align-items:flex-start}.admin-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Performance pass */
@supports (content-visibility: auto){
  .match-card,
  .match-row,
  .team-card,
  .agent-card,
  .admin-summary-card,
  .home-quick-card,
  .home-match-card{
    content-visibility: auto;
    contain-intrinsic-size: 160px;
  }
}

img[loading="lazy"]{
  content-visibility: auto;
}