body{
    background: radial-gradient(1200px 500px at 20% -10%, #214b8e 0%, #0d2748 45%, #081a33 100%);
    color:#fff;
    font-family:Bahnschrift,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }
  *{ color:#fff; }
  a,a:hover{ color:#fff !important; text-decoration:none; }

  .wrap{ max-width:1200px; }
  .panel{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
  }
  .btn-pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:999px;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.06);
    transition:.15s ease;
  }
  .btn-pill:hover{ background:#fff; color:#0d2748 !important; }
  .btn-pill:hover *{ color:#0d2748 !important; }

.ctrl{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.25);
  border-radius:14px;
  color:#000 !important;          
}
.ctrl::placeholder{
  color:rgba(0,0,0,.55);          
}
  .ctrl::placeholder{ color:rgba(255,255,255,.75); }
  .muted{ opacity:.78; font-size:12px; }

  .vblue svg{ color:#3b82f6 !important; }

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

  .cardid{
    border-radius:18px; overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(600px 180px at 10% 0%, rgba(255,255,255,.10), transparent 55%),
      rgba(255,255,255,.05);
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
  }
  .head{ display:flex; gap:12px; align-items:center; padding:12px; border-bottom:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.10); }
  .ava{
  width:48px;              /* ölçünü özün seçə bilərsən */
  aspect-ratio: 3 / 4;     /* əsas fix */
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.ava img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ava .ph svg{
  width:22px;
  height:22px;
}

  .who{ min-width:0; }
  .who .line1{ font-weight:800; font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .who .line2{ font-weight:700; font-size:12px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .coachProfileLink{ display:inline-flex; align-items:center; color:inherit!important; font-weight:800; text-decoration:underline!important; text-decoration-thickness:1px!important; text-underline-offset:3px; }
  .coachProfileLink:hover,.coachProfileLink:focus-visible{ text-decoration-thickness:2px!important; }

  .body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
  .kv{ display:flex; gap:10px; align-items:flex-start; font-size:12px; opacity:.95; }
  .kv .k{ width:165px; opacity:.85; display:flex; gap:8px; align-items:center; }
  .kv .v{ flex:1; font-weight:800; line-height:1.25; }

  .foot{ padding:10px 12px; border-top:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }

  .paginationx{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:14px; flex-wrap:wrap; }
  .pagepill{
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 12px; border-radius:12px;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.06);
    min-width:44px; font-weight:800;
  }
  .pagepill.active{ background:#fff; color:#0d2748 !important; border-color:#fff; }
  .pagepill.active *{ color:#0d2748 !important; }
  .pagepill.dim{ opacity:.7; }