:root {
  --bg: #0b0d12;
  --card: #131722;
  --text: #e6e8ef;
  --muted: #9aa4b2;
  --accent: #38bdf8;
  --accent-2: #22c55e;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.brand {
  display: flex; gap: 12px; align-items: center;
  font-weight: 800; font-size: 20px;
}
.brand img { width: 50px; height: 50px; border-radius: 10px; }

.menu { display: flex; gap: 16px; }
.menu a { padding: 8px 12px; border-radius: 10px; }
.menu a.active, .menu a:hover { background: var(--card); }

/* Generic hero (still used on other pages) */
.hero {
  background: linear-gradient(180deg, rgba(56,189,248,0.1), transparent);
  border: 1px solid #1f2430;
  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}

.card {
  background: var(--card);
  border: 1px solid #1f2430;
  padding: 20px;
  border-radius: 18px;
}

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid #243046;
  font-size: 12px;
  color: var(--muted);
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  background: var(--accent);
  color: #001018;
  border-radius: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn.secondary { background: var(--accent-2); }
.small { font-size: 12px; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid #222633; text-align: left; }
.table th { color: var(--muted); font-weight: 600; }

.status-dot { display:inline-block; width:10px; height:10px; border-radius:999px; margin-right:6px; background:#ef4444; }
.status-dot.online { background:#22c55e; }

footer { margin-top: 40px; color: var(--muted); }

input, textarea, select {
  width: 100%; padding: 10px; border-radius: 12px; background: #0f1420; border: 1px solid #243046; color: var(--text);
}
label { display:block; margin: 8px 0 4px; font-size: 14px; color: var(--muted);}

/* legacy staff-photo (kept for backward compatibility) */
.card .staff-photo { margin-top: 10px; display: flex; justify-content: center; }
.card .staff-photo img {
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* ===== extra utility bits ===== */
.h1{margin:0;font-size:28px}
.hero-compact{margin-bottom:16px}
.muted{color:var(--muted);margin:6px 0 0 0}

/* =========================================
   Arma 3 Life — Home page themed elements
   ========================================= */
.a3-hero{
  position: relative;
  background:
    radial-gradient(1200px 400px at 0% 0%, rgba(56,189,248,.08), transparent 60%),
    linear-gradient(180deg, rgba(56,189,248,0.10), transparent);
  border: 1px solid #1f2430;
  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  overflow: hidden;
}
.a3-title{ margin:12px 0 8px 0; font-size: 34px; letter-spacing:.3px; }
.a3-accent{ color: var(--accent); text-shadow: 0 0 16px rgba(56,189,248,.25);}
.a3-sub{ color: var(--muted); margin:0; }
.a3-cta{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

.a3-servers{ margin-top:16px; padding-top:10px; border-top:1px dashed #1f2430;}
.a3-serverline{ display:flex; align-items:center; gap:10px; padding:6px 0;}
.a3-dot{ width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.6); }
.a3-servername{ font-weight:700;}
.a3-serveraddr{ margin-left:auto; opacity:.9;}

.a3-hud{ position: relative; overflow:hidden; }
.a3-hudlist{ list-style: none; padding:0; margin:0; display:grid; gap:8px; }
.a3-hudlist li{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid #1f2430;
}
.a3-hudlist li span{ color: var(--muted); }
.a3-scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.8) 0px,
    rgba(255,255,255,.8) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
}

/* Faction cards */
.a3-card{ position:relative; overflow:hidden; }
.a3-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.a3-card-title{ margin:0; }
.a3-pill{
  font-size:12px; padding:4px 10px; border-radius:999px;
  border:1px solid #243046; background:#0f172a; color:var(--muted);
}
.faction-cop   { border-color:#1f2c46; box-shadow: inset 0 0 0 1px rgba(96,165,250,.12);}
.faction-medic { border-color:#1f2c46; box-shadow: inset 0 0 0 1px rgba(52,211,153,.12);}
.faction-rebel { border-color:#1f2c46; box-shadow: inset 0 0 0 1px rgba(244,114,182,.12);}

.a3-link{ color: var(--accent); font-weight:600; }
.a3-link:hover{ text-decoration: underline; }

/* Strip underline accent */
.a3-strip .card{ position:relative; }
.a3-strip .card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, rgba(56,189,248,.0), rgba(56,189,248,.35), rgba(56,189,248,.0));
  opacity:.5;
}

/* =========================================
   Staff page polish (grouped by role)
   ========================================= */
.role-section { margin-bottom: 20px; }
.role-head { display:flex; align-items:center; gap:10px; margin:0 0 10px 2px; }
.role-title { margin:0; font-size:16px; font-weight:800; letter-spacing:.2px; }
.role-dot {
  width:10px; height:10px; border-radius:999px;
  background: var(--role-color, var(--accent));
  box-shadow:0 0 12px var(--role-color, var(--accent));
}

/* same-role row: wraps on small screens; scrolls horizontally on overflow */
.role-row {
  display:flex; gap:14px; align-items:stretch;
  overflow-x:auto; padding-bottom:4px;
  scroll-snap-type:x proximity;
}
.role-row::-webkit-scrollbar { height:6px; }
.role-row::-webkit-scrollbar-thumb { background: rgba(148,163,184,.25); border-radius:20px; }

/* compact glass cards */
.staff-mini {
  min-width: 220px; max-width: 260px;
  text-align: center; padding: 16px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid #1f2430;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  scroll-snap-align: start;
}
.staff-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
  border-color: color-mix(in srgb, var(--accent) 25%, #1f2430);
}

/* perfect circular avatar with neon ring keyed to role color */
.avatar-circle {
  width:120px; height:120px; margin:6px auto 10px; position:relative;
  border-radius:999px; display:grid; place-items:center; isolation:isolate;
  background: radial-gradient(80px 80px at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 26px rgba(0,0,0,.25);
}
.avatar-circle::before {
  content:""; position:absolute; inset:-3px; border-radius:inherit;
  background: conic-gradient(from 220deg, var(--role-color, var(--accent)), #a78bfa, var(--role-color, var(--accent)));
  filter: blur(8px); opacity:.55; z-index:0;
}
.avatar-circle img,
.avatar-fallback {
  position:relative; z-index:1;
  width:112px; height:112px;
  border-radius:999px; object-fit:cover; background:#0f1420;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}

/* initials fallback only if image fails */
.avatar-fallback {
  display:none; align-items:center; justify-content:center;
  font-weight:800; font-size:34px; letter-spacing:.5px; color:#cbd5e1;
}

/* name, bio, and link chips */
.mini-name { margin:6px 0 2px; font-size:16px; font-weight:800; }
.mini-bio  { margin:0 0 10px; font-size:13px; color:var(--muted); line-height:1.35; }
.mini-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:12px; border-radius:999px; text-decoration:none;
  color:var(--text); border:1px solid #243046; background: rgba(148,163,184,.08);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.chip:hover { background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.35); transform: translateY(-1px); }

/* Responsive tweaks */
@media (max-width: 900px){
  .hero, .a3-hero{ grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .staff-mini { min-width: 200px; }
  .avatar-circle { width:110px; height:110px; }
  .avatar-circle img, .avatar-fallback { width:102px; height:102px; }
}