/* ======================================================================
   FIGHTS NETWORK — DARK NAVY + ORANGE GLOW UI
   ====================================================================== */

:root{
  --bg: #080f1d;
  --bg-2: #0f1a33;
  --text: #e8edf7;
  --muted: #9aa6c1;
  --bd: rgba(255,255,255,.08);
  --accent: #ff7a18;
  --accent-2: #ffa94d;
  --shadow: 0 0 24px rgba(255,122,24,.35), 0 0 2px rgba(255,122,24,.8) inset;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,122,24,.06), transparent 60%),
    radial-gradient(800px 400px at -20% 0%, rgba(255,122,24,.04), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ======================================================================
   GLOBAL LAYOUT
   ====================================================================== */

.site{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.center-wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:40px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ======================================================================
   HEADER + LOGO
   ====================================================================== */

.header{
  border-bottom:1px solid var(--bd);
  background:linear-gradient(180deg, rgba(255,122,24,.05), rgba(255,122,24,0) 80%);
  padding-top:20px;
}

.logo-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding-bottom:10px;
}

.logo-box img{
  height:200px;
  width:auto;
  filter:drop-shadow(0 0 18px rgba(255,122,24,.55));
  user-select:none;
}

.site-title{
  margin-top:10px;
  text-align:center;
  font-size:28px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.6px;
}

/* ======================================================================
   MAIN + AUTH FORM LAYOUTS
   ====================================================================== */

main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.auth-wrap{
  width:100%;
  min-height:calc(100vh - 260px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:12px;
}

.auth-card{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid var(--bd);
  border-radius:16px;
  padding:26px 22px;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}

.auth-card h1{
  margin:0 0 18px;
  font-size:28px;
  font-weight:700;
  text-align:center;
}

/* ======================================================================
   CARDS
   ====================================================================== */

.card{
  width:min(100%, 1100px);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--bd);
  border-radius:16px;
  padding:20px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  margin-bottom:20px;
}

/* ======================================================================
   FORM ELEMENTS
   ====================================================================== */

label{
  display:block;
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 4px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="file"]{
  width:100%;
  padding:.75rem .85rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0d172b;
  color:var(--text);
  font-size:.95rem;
  transition:0.2s ease;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.6),
    inset 0 0 0 0 rgba(255,122,24,0);
}
input::placeholder{
  color:#607094;
}

input:focus{
  border-color:rgba(255,122,24,.8);
  outline:none;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.6),
    0 0 6px rgba(255,122,24,.6),
    0 0 14px rgba(255,122,24,.4);
  background:#0f1f38;
}

/* ======================================================================
   BUTTONS
   ====================================================================== */

.btn{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:10px;
  border:1px solid var(--bd);
  text-decoration:none;
  color:var(--text);
  background:#111b2f;
  cursor:pointer;
  text-align:center;
  font-size:.95rem;
}

.btn:hover{
  border-color:rgba(255,255,255,.18);
}

.btn-primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#1b0d00;
  font-weight:600;
  border:none;
  box-shadow:var(--shadow);
  margin-top:6px;
  padding:.75rem 1.2rem;
  font-size:1rem;
  border-radius:12px;
}
.btn-primary:hover{
  filter:brightness(1.07);
}

/* ======================================================================
   GRID — VIDEO LISTING
   ====================================================================== */

.grid{
  width:min(100%,1000px);
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
}

.thumb{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  background:#0f1a33;
  border:1px solid var(--bd);
}

/* ======================================================================
   CHIPS / BADGES
   ====================================================================== */

.chip{
  display:inline-block;
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--bd);
  color:var(--muted);
  background:#0f1a33;
}

.chip.ok{color:#9be7a0; border-color:rgba(155,231,160,.4);}
.chip.bad{color:#ff9aa2; border-color:rgba(255,154,162,.4);}
.chip.warn{color:#ffd07a; border-color:rgba(255,208,122,.4);}

/* ======================================================================
   FOOTER
   ====================================================================== */

footer{
  margin-top:auto;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  padding:22px 0 30px;
  border-top:1px solid var(--bd);
}

/* ======================================================================
   BASICS
   ====================================================================== */

hr{
  border:none;
  border-top:1px solid var(--bd);
  margin:22px 0;
}

.muted{color:var(--muted);}
.center{text-align:center;}
.stack{display:grid; gap:14px;}
video{width:100%; border-radius:12px; background:#0f1a33;}

/* --- Orange links --- */
a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:0.2s;
}

a:hover{
  color:var(--accent-2);
  text-shadow:0 0 6px rgba(255,122,24,.5);
}
/* ===== Icons in inputs (left) ========================================= */
.field{ position:relative; }
.field .i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.9; pointer-events:none;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(255,122,24,.35));
}
.field input{ padding-left:42px !important; }

/* Icon glyphs (tiny inline SVGs using currentColor) */
.i::before{ content:""; display:block; width:100%; height:100%;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background: currentColor;
}
.i-user::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-5 0-9 2.5-9 5.5A1.5 1.5 0 0 0 4.5 21h15A1.5 1.5 0 0 0 21 19.5C21 16.5 17 14 12 14Z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-5 0-9 2.5-9 5.5A1.5 1.5 0 0 0 4.5 21h15A1.5 1.5 0 0 0 21 19.5C21 16.5 17 14 12 14Z"/></svg>'); }
.i-mail::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>'); }
.i-lock::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2ZM9 7a3 3 0 0 1 6 0v2H9Zm3 10a2 2 0 1 1 2-2 2 2 0 0 1-2 2Z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2ZM9 7a3 3 0 0 1 6 0v2H9Zm3 10a2 2 0 1 1 2-2 2 2 0 0 1-2 2Z"/></svg>'); }

/* ===== Glass card + neon pulse ======================================== */
.auth-card{
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  animation: glowPulse 3.2s ease-in-out infinite;
}
@keyframes glowPulse{
  0%   { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 rgba(255,122,24,0); }
  50%  { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 22px rgba(255,122,24,.25); }
  100% { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 rgba(255,122,24,0); }
}

/* ===== Shake effect (apply to error chip) ============================== */
.shake{ animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}

/* ===== Password strength meter ======================================== */
.pw-wrap{ margin-top:6px; }
.pw-meter{
  height:8px; border-radius:999px; overflow:hidden;
  background:#0d172b; border:1px solid rgba(255,255,255,.12);
}
.pw-meter > div{
  height:100%; width:0%; transition: width .25s ease, background .2s ease, box-shadow .2s ease;
  background:#444;
}
.pw-hint{ font-size:.85rem; color:var(--muted); margin-top:6px; }

/* Colors by level */
.pw-1{ background:#d9534f; box-shadow:0 0 10px rgba(217,83,79,.35);}
.pw-2{ background:#f0ad4e; box-shadow:0 0 10px rgba(240,173,78,.35);}
.pw-3{ background:#ffd166; box-shadow:0 0 10px rgba(255,209,102,.35);}
.pw-4{ background:#8bc34a; box-shadow:0 0 10px rgba(139,195,74,.35);}
.pw-5{ background:var(--accent); box-shadow:0 0 14px rgba(255,122,24,.5);}
/* ===== Admin / Moderation polish ===================================== */
./* Center the admin card perfectly + nicer depth */
.admin-shell{
  width:100%;
  display:flex;
  justify-content:center;   /* centers the card */
}
.admin-card{
  width:min(100%, 1040px);
  margin: 0 auto;           /* keep centered on huge screens */
  border-radius:22px;
  padding:26px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
 box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Title & toolbar spacing */
.admin-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.admin-title{ margin:0; font-size:30px; font-weight:800; letter-spacing:.3px; }

/* Segmented filters with counts */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0 18px; }
.segment{ display:flex; gap:6px; background:#0d172b; border:1px solid var(--bd); padding:6px; border-radius:999px; }
.segment a{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.14);
  background:#0f1a33; color:var(--text);
  padding:.38rem .75rem; border-radius:999px; text-decoration:none; font-size:.9rem;
}
.segment .count{ font-size:.78rem; padding:.05rem .45rem; border-radius:999px; background:#0d172b; border:1px solid var(--bd); color:#ccd6f0; }
.segment a.active{ background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#1b0d00; border:none; box-shadow:var(--shadow); }
.segment a.active .count{ background:rgba(0,0,0,.18); border-color:rgba(0,0,0,.25); color:#1b0d00; }

/* Table polish */
.table-wrap{ width:100%; overflow:auto; border:1px solid var(--bd); border-radius:16px; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--bd); }
.table th{ text-align:left; font-weight:700; color:#cdd6ea; position:sticky; top:0; background:rgba(8,15,29,.92); backdrop-filter:blur(6px); }
.table tr:hover td{ background:rgba(255,255,255,.02); }
.table td:first-child{ color:#9aa6c1; }

/* Badges + actions */
.badge{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.8rem; border:1px solid var(--bd); }
.badge.pending{ color:#ffd07a; border-color:rgba(255,208,122,.35); background:#201a08; }
.badge.approved{ color:#9be7a0; border-color:rgba(155,231,160,.35); background:#0f2012; }
.badge.rejected{ color:#ff9aa2; border-color:rgba(255,154,162,.35); background:#201014; }

.row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-ghost{ background:#0f1a33; }
.btn-danger{ background:#c62828; border:none; color:#fff; }
.btn-danger:hover{ filter:brightness(1.06); }

/* Title links */
.title-link{ color:var(--accent); text-decoration:none; }
.title-link:hover{ color:var(--accent-2); text-shadow:0 0 6px rgba(255,122,24,.35); }
/* Moderation thumbs */
.col-thumb { width: 140px; }
/* Hover preview: layering + visibility */
.thumb-wrap{ width:120px; height:68px; position:relative; overflow:hidden; border-radius:12px; }
.thumb-sm{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:12px; transition:opacity .18s; z-index:1; }
.thumb-sm.fade{ opacity:0; }
.thumb-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:12px; display:none; z-index:2; background:#0d1324; }
.thumb-loading{ position:absolute; inset:auto 6px 6px auto; z-index:3; font-size:10px; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.12); display:none; }
/* Card thumbnail (16:9, no layout shift) */
/* 16:9 uniform thumbnail container */
.card-thumb-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0f1a33;
    border: 1px solid var(--bd);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

@supports not (aspect-ratio: 16/9){
  .card-thumb-box::before{content:"";display:block;padding-top:56.25%;}
}
/* Thumbnail image inside */
.card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* <— THIS forces uniform fill */
    object-position: center;  /* Keep center focus */
    display: block;
}
/* Simple top menu buttons */
.top-nav{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 14px;
}
.nav-spacer{ margin-left:auto; }
.nav-btn{
  display:inline-block;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:#111b2f;
  color:#e8edf7;
  text-decoration:none;
  font-weight:600;
  transition:.18s ease;
}
.nav-btn:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 10px rgba(255,122,24,.35);
  color:#ffa94d;
}
.nav-btn.danger{
  background:#2a0f12;
  border-color:rgba(255,0,0,.25);
  color:#ff8b8b;
}
.nav-btn.danger:hover{
  background:#3a1418;
  box-shadow:0 0 10px rgba(255,0,0,.35);
}
.nav-user{
  font-weight:600;
  color:#ffa34d;
  padding-right:10px;
}
.nav-btn.discord{
  background:#7289da;
  box-shadow:0 0 10px rgba(129, 32, 82, 0.8);
}
textarea,
input[type="text"],
input[type="file"],
input[type="password"] {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: 12px;
  border: 1px solid #1e273a;
  background: #0b1324;
  color: #fff;
  font-size: 15px;
  resize: vertical;
  box-sizing: border-box;
  transition: border .2s, box-shadow .2s, background .2s;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid #ff7a18;
  box-shadow: 0 0 8px rgba(255, 122, 24, 0.6);
  outline: none;
  background: #0f1a33;
}

/* Hint/placeholder */
textarea::placeholder,
input::placeholder {
  color: #7f8ea6;
}

/* Label spacing */
form label {
  font-weight:600;
  margin-bottom: 6px;
  display:block;
  color:#cbd6ff;
}
/* ====== Base responsive tweaks ====== */
:root{
  --space: 16px;
}

.page-body{ padding: 0 var(--space) 80px; }

/* Cards & containers */
.`card{ border-radius: 16px; }

/* Video player always fits width */
video{ width:100%; height:auto; display:block; }

/* Simple responsive grid for home/videos */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Nav: wrap nicely and keep buttons tappable */
.top-nav{
  flex-wrap: wrap;
  row-gap: 10px;
}
.nav-btn{ min-height:44px; line-height:1; }

/* Tables: allow horizontal scroll on small screens */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }

/* Forms: inputs full width & comfy tap targets */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
textarea,
select{
  width:100%;
  min-height:44px;
  padding:.65rem .75rem;
  border-radius:12px;
  border:1px solid var(--bd);
  background:#0f1a33;
  color:var(--text);
}

/* Buttons expand when it helps */
.btn.full{ width:100%; }

/* Thumbs: uniform 16:9 everywhere */
.card-thumb-box{
  width:100%;
  aspect-ratio:16/9;
  background:#0f1a33;
  border:1px solid var(--bd);
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.card-thumb{ width:100%; height:100%; object-fit:cover; }

/* ====== Breakpoints ====== */

/* <= 900px: tighten paddings & headings */
@media (max-width: 900px){
  .site-header{ padding: 16px 0; }
  .logo-img{ height:80px; }
  .admin-title, h1, h2{ font-size: clamp(20px, 3.2vw, 26px); }
  .card{ padding: 14px; }
  .table th, .table td{ padding:10px 12px; }
}

/* <= 640px: stack nav, smaller gaps, one-column layouts where sensible */
@media (max-width: 640px){
  .center-wrap, .page-body{ padding-left:12px; padding-right:12px; }

  /* Nav buttons go edge-to-edge nicely */
  .top-nav{ gap:8px; }
  .nav-spacer{ flex-basis:100%; height:0; } /* forces right side onto next line */
  .nav-user{ order: 2; font-size:.9rem; }
  .nav-btn{ padding:10px 12px; border-radius:10px; }

  /* Make action rows wrap */
  .row-actions{ gap:6px; }

  /* Table: smaller cells */
  .table th, .table td{ padding:8px 10px; font-size:.95rem; }

  /* Forms: compact labels */
  label{ font-size:.95rem; }

  /* Comments list fits better */
  .table td:first-child{ width:140px; }
}

/* <= 420px: really small screens */
@media (max-width: 420px){
  .logo-img{ height:64px; }
  .nav-user{ display:none; } /* hide "Logged in as" to save space */
  .btn, .nav-btn{ font-size:.95rem; padding:8px 10px; }
  .chip{ font-size:.85rem; }
}
/* ===== Admin Users styling ===== */
.admin-users {
  margin: 24px 0 60px;
}

.admin-users .page-head {
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.admin-users .page-head h2 {
  font-size: clamp(22px, 3.2vw, 28px);
  margin:0;
}
.admin-users .page-head .seg {
  display:flex; gap:8px; flex-wrap:wrap;
}
.admin-users .seg .btn {
  padding:8px 12px; border-radius:10px;
}

/* search box */
.user-search {
  display:flex; gap:10px; align-items:center;
  background: rgba(255,255,255,.03);
  border:1px solid var(--bd, #20293d);
  border-radius:14px; padding:10px 12px; max-width:560px;
}
.user-search input[type="text"]{
  flex:1 1 auto; background:transparent; border:0; outline:none; color:var(--text, #e6ecff);
  min-height:28px;
}
.user-search .btn { white-space:nowrap; }

/* table card */
.users-card {
  background: rgba(10,17,34,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
.users-card table {
  width:100%; border-collapse:collapse;
}
.users-card thead th{
  text-align:left; font-weight:700; padding:14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size: .95rem; letter-spacing:.2px;
}
.users-card tbody td{
  padding:14px 16px; border-top:1px dashed rgba(255,255,255,.06);
  vertical-align:middle;
}
.users-card tbody tr:hover{
  background: rgba(255,140,0,.06);
}

/* username handle look */
.user-handle { font-weight:700; color:#e9f0ff; }
.user-handle::before { content:'@'; opacity:.7; margin-right:1px; }

/* status pills */
.pills { display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:.85rem; line-height:1;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);
}
.pill svg{ width:14px; height:14px; opacity:.9; }

.pill--verified   { color:#9be7a5; border-color:#2a5c3b; background:rgba(35, 160, 90,.15); }
.pill--unverified { color:#ffd27a; border-color:#5a470e; background:rgba(255,193,7,.15); }
.pill--active     { color:#a5d8ff; border-color:#1e4d7a; background:rgba(49,132,255,.12); }
.pill--banned     { color:#ff9aa2; border-color:#7a1e1e; background:rgba(220, 38, 38,.18); }
.pill--admin      { color:#ffb86b; border-color:#7a4a1e; background:rgba(255,140,0,.18);
  box-shadow:0 0 14px rgba(255,140,0,.25) inset;
}

/* counts cell */
.counts { color:#cbd5e1; font-size:.95rem; }
.counts b{ color:#fff; }

/* view action */
.action-view .btn{
  padding:7px 12px; border-radius:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.action-view .btn:hover{
  border-color:#ff8c00; box-shadow:0 0 0 3px rgba(255,140,0,.15);
}

/* “Reason” note beneath status */
.reason-note{
  margin-top:6px; font-size:.88rem; color:#b6c2e2; opacity:.85;
}

/* fine-tune top nav buttons beside logo */
.top-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* responsive: table scroll + stacked cells on phones */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 680px){
  .user-search { max-width:100%; }
  .users-card thead { display:none; }
  .users-card tbody tr{ display:grid; grid-template-columns: 1fr auto; gap:6px; padding:10px 0; }
  .users-card tbody td{ border:none; padding:8px 14px; }
  .users-card tbody td[data-label]::before{
    content: attr(data-label);
    display:block; font-size:.78rem; opacity:.7; margin-bottom:2px;
  }
  .action-view { grid-column: 1 / -1; }
}
/* Eye icon inside input */
.input-with-icon { position: relative; }
.input-with-icon .input { padding-right: 42px; }
.eye-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#95a3c8; cursor:pointer; padding:0; line-height:0;
}
.eye-btn:hover{ color:#ff9b2f; }

/* Strength meter */
.pw-wrap{ margin:8px 0 12px; }
.pw-track{
  width:100%; height:8px; border-radius:6px;
  background:#0b1530; overflow:hidden; border:1px solid rgba(255,255,255,.08);
}
.pw-bar{
  height:100%; width:0%;
  background:#ff3b3b;
  transition: width .25s ease, background .25s ease;
  box-shadow: 0 0 10px rgba(255,60,60,.35);
}
.chip.muted {
    background: rgba(255,255,255,0.06);
    color: #b7c4de;
    border: 1px solid rgba(255,255,255,0.12);
}
/* Turnstile visibility fixes */
.ts-wrap { 
  position: relative; 
  z-index: 5; 
  display: block; 
  padding: 6px 0; 
  min-height: 70px;            /* reserve space */
}
.ts-wrap .cf-turnstile,
.ts-wrap iframe {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  max-width: 100%;
  min-height: 65px;            /* typical height */
}

/* If a parent is clipping it, unclip here (adjust if needed) */
.card, .stack { overflow: visible !important; }

/* If absolutely positioned elements (like eye buttons) overlap, keep them under */
.input-with-icon { position: relative; }
.input-with-icon .input { padding-right: 42px; }
.eye-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#95a3c8; cursor:pointer; padding:0; line-height:0;
}
.eye-btn:hover{ color:#ff9b2f; }
.grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Force 5 columns only when space allows without squish */
@media (min-width: 1500px) {
    .grid {
        grid-template-columns: repeat(5, minmax(260px, 1fr));
    }
}

/* Slightly smaller on mid screens */
@media (min-width: 1200px) and (max-width: 1499px) {
    .grid {
        grid-template-columns: repeat(4, minmax(260px, 1fr));
    }
}
.card {
    padding: 14px;
    align-content: center;
}
.card-thumb-box img {
    border-radius: 12px;
}
.card {
    padding: 14px;
}
.card-thumb-box img {
    border-radius: 12px;
}
/* Wider container for the home feed */
.feed-card{
  width: 100%;
  max-width: 1420px;   /* big enough for 5 columns with breathing room */
  margin: 0 auto;      /* center it */
}

/* If your site uses a global wrapper, let it expand too */
.center-wrap{
  max-width: 1600px;   /* bump from whatever it was (e.g., 1100/1280) */
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* Grid from earlier (keep or adjust) */
.grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Guarantee 5 columns on very wide screens without squish */
@media (min-width: 1500px){
  .grid{ grid-template-columns: repeat(5, minmax(260px, 1fr)); }
}