/* ============================================================================
   KrakenTheMeta — /all-users  ·  Abyssal Arsenal brand (Cinzel + Sora).
   Community directory. Class names kept intact for users/all-users.js.
   ============================================================================ */
:root {
  --au-ink:#081f33; --au-ink2:#0b2640; --au-abyss:#04101e;
  --au-line:rgba(162,231,238,.12); --au-line2:rgba(162,231,238,.22);
  --au-cyan:#a2e7ee; --au-blue:#4196e0; --au-text:#eaf4fb; --au-dim:#9fb6c9; --au-mut:#6f879b;
  --au-grad:linear-gradient(135deg,#a2e7ee,#4196e0);
}

.all-users-section {
  font-family:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--au-text);
  width:100%; max-width:1180px; min-width:0;
  margin:0 auto; padding:120px 22px 90px;
  display:flex; flex-direction:column; align-items:center;
}

/* ---- header ---- */
.section-header-title { margin:0; text-align:center; }
.section-header-title-h2 {
  font-family:'Cinzel',Georgia,serif; font-weight:700; letter-spacing:.5px; line-height:1.15;
  font-size:clamp(1.7rem,4.5vw,2.5rem); margin:0 0 10px; text-align:center; color:#fff;
}
.emphasis-text {
  background:var(--au-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.sub-copy {
  text-align:center; color:var(--au-dim); font-size:clamp(14px,2.2vw,16px);
  line-height:1.6; margin:0 auto 34px; max-width:640px;
}

/* ---- users grid ---- */
.users-wrapper {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:16px; width:100%; padding:0;
}

.user-card {
  min-width:0; border-radius:16px; padding:22px 18px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%),var(--au-ink);
  border:1px solid var(--au-line);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.user-card:hover {
  transform:translateY(-5px); border-color:var(--au-line2);
  box-shadow:0 18px 44px -22px rgba(162,231,238,.45);
}
.user-card a {
  display:flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit;
}

.profile-image-wrapper {
  flex-shrink:0; width:72px; height:72px; margin-bottom:14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:2px solid rgba(162,231,238,.35);
  box-shadow:0 0 0 4px rgba(65,150,224,.08), 0 6px 18px -6px rgba(0,0,0,.6);
}
.profile-image { width:100%; height:100%; object-fit:cover; }

.user-info { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; width:100%; }
.user-info h3 {
  margin:0; font-family:'Cinzel',Georgia,serif; font-size:1.05rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
  background:var(--au-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

.user-stats { margin-top:12px; display:flex; gap:16px; justify-content:center; font-size:.82rem; color:var(--au-mut); }
.user-stats p { margin:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.user-follower-count, .user-following-count {
  font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:1rem; color:#fff;
  -webkit-text-fill-color:#fff;
}

/* ---- pagination ---- */
.pagination-buttons { display:flex; justify-content:center; gap:12px; margin:36px 0 0; }
.pagination-buttons button {
  padding:11px 26px; border-radius:11px; border:1px solid var(--au-line);
  background:var(--au-ink); color:var(--au-text); font-family:'Sora',sans-serif;
  font-size:.92rem; font-weight:600; cursor:pointer;
  transition:transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.pagination-buttons button:hover:not(:disabled) {
  background:var(--au-ink2); border-color:var(--au-line2); transform:translateY(-2px);
}
.pagination-buttons button:disabled { opacity:.4; cursor:not-allowed; }

@media (max-width:560px) {
  .all-users-section { padding:100px 15px 80px; }
  .users-wrapper { grid-template-columns:1fr 1fr; gap:12px; }
}