/* ═══════════════════════════════════════════════════════════════════════════
   Central V — Premium Monochrome UI Pass v5 (Self-Review Patch)
   Amaç: İşleyişe dokunmadan noir / cinematic / GTA RP görünüm katmanı.
   Bu dosya tüm inline CSS'lerden sonra yüklenir.

   v2–v5 değişiklikleri:
   - .modal (admin modalları) ve .em-box (forum) selector'ları eklendi
   - .btn-sm artık 32px min-height alıyor (boyut hiyerarşisi korundu)
   - .hero h1 span için @supports fallback
   - Mobil .btn{100%} kuralı modal action'ları exclude ediyor
   - Form .error / .success / [aria-invalid] state'leri eklendi
   - .page-tab.active alt-çizgi indicator'ı geri geldi (tab affordance)
   - .gallery-item hover scale + lift kombinasyonu
   - .btn-edit, .btn-save tam shimmer aldı
   - body::after mix-blend-mode kaldırıldı (etkisizdi)
   - .stat-icon/.adm-stat-icon watermark olarak korundu; content iconları boxed kaldı
   - Hero badge'ine sweep animation, status-soon chip'ine pulse dot
   - -webkit-mask-image fallback eklendi
   - Print stylesheet eklendi
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cv-bg: #020202;
  --cv-bg-2: #070707;
  --cv-surface: rgba(15,15,15,.72);
  --cv-surface-strong: rgba(20,20,20,.9);
  --cv-surface-soft: rgba(255,255,255,.035);
  --cv-line: rgba(255,255,255,.12);
  --cv-line-strong: rgba(255,255,255,.28);
  --cv-line-hot: rgba(255,255,255,.46);
  --cv-text: rgba(255,255,255,.94);
  --cv-muted: rgba(255,255,255,.58);
  --cv-faint: rgba(255,255,255,.32);
  --cv-glow: rgba(255,255,255,.16);
  --cv-shadow: 0 26px 90px rgba(0,0,0,.78);
  --cv-radius: 22px;
  --cv-radius-sm: 14px;
  --cv-ease: cubic-bezier(.2,.8,.2,1);
}

html { background: var(--cv-bg) !important; }
body {
  background:
    radial-gradient(circle at 12% -10%, rgba(255,255,255,.115), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(255,255,255,.075), transparent 28%),
    radial-gradient(circle at 50% 110%, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(180deg, #030303 0%, #000 52%, #050505 100%) !important;
  color: var(--cv-text) !important;
  letter-spacing: .01em;
}

/* Subtle grid texture, masked to center */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
          mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
}
/* Subtle vertical scanlines overlay (clean, no blend-mode) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .28;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.014) 0 1px,
    transparent 1px 3px
  );
}

::selection { background: #fff; color: #000; }

/* ─── Navbar: glass, premium border, active pill ───────────────────────── */
.navbar {
  padding: 18px clamp(18px, 4vw, 58px) !important;
  background: linear-gradient(180deg, rgba(5,5,5,.84), rgba(5,5,5,.54)) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.48), inset 0 -1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(24px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(130%) !important;
}
.navbar::after {
  content: '';
  position: absolute;
  left: 5%; right: 5%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent);
  opacity: .5;
  pointer-events: none;
}
.navbar.scrolled { padding-top: 12px !important; padding-bottom: 12px !important; }

.logo {
  gap: 12px !important;
  text-shadow: 0 0 24px rgba(255,255,255,.18);
}
.logo img {
  height: 42px !important;
  filter: drop-shadow(0 0 20px rgba(255,255,255,.18));
}
.logo span { opacity: .72 !important; }

.nav-links { gap: 10px !important; }
.nav-links a {
  padding: 10px 14px !important;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255,255,255,.72) !important;
  transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease !important;
}
.nav-links a::after { display: none !important; }
.nav-links a:hover,
.nav-links a.active {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.14) !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 26px rgba(0,0,0,.24);
}

/* ─── Buttons: luminous monochrome CTA ─────────────────────────────────── */
.btn,
.btn-submit,
.filter-btn,
.gf-btn,
.cat-btn,
.adm-tab,
.page-tab,
.qa-btn,
.btn-edit,
.btn-save {
  position: relative;
  overflow: hidden;
}
.btn::before,
.btn-submit::before,
.qa-btn::before,
.gf-btn::before,
.filter-btn::before,
.btn-edit::before,
.btn-save::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-115%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: transform .62s ease;
  pointer-events: none;
}
.btn:hover::before,
.btn-submit:hover::before,
.qa-btn:hover::before,
.gf-btn:hover::before,
.filter-btn:hover::before,
.btn-edit:hover::before,
.btn-save:hover::before { transform: translateX(115%) skewX(-18deg); }

.btn {
  border-radius: 999px !important;
  min-height: 42px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 35px rgba(0,0,0,.35);
}
.btn-sm {
  min-height: 32px !important;
  padding: 6px 14px !important;
}
.btn-primary,
.btn-submit,
.btn-save {
  background: linear-gradient(135deg, #fff 0%, #d8d8d8 50%, #fff 100%) !important;
  color: #050505 !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow: 0 14px 42px rgba(255,255,255,.12), inset 0 1px 0 #fff !important;
}
.btn-primary:hover:not(:disabled),
.btn-submit:hover:not(:disabled),
.btn-save:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 58px rgba(255,255,255,.18), inset 0 1px 0 #fff !important;
}
.btn-outline,
.btn-edit,
.filter-btn,
.gf-btn,
.cat-btn {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-outline:hover,
.btn-edit:hover,
.filter-btn:hover,
.filter-btn.active,
.gf-btn:hover,
.gf-btn.active,
.cat-btn:hover,
.cat-btn.active {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #fff !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1) !important;
}

.discord-link,
.btn-discord {
  background: rgba(88,101,242,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 34px rgba(88,101,242,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* ─── Universal premium panels/cards ───────────────────────────────────── */
.card,
.db-card,
.stat-card,
.adm-stat,
.webhook-card,
.app-type-card,
.app-form-card,
.guest-box,
.rule-card,
.warning-box,
.wiki-card,
.wiki-content-panel,
.new-post-form,
.forum-sidebar,
.post-card,
.post-view,
.reply-form,
.gallery-item,
.sec-card,
.modal-box,
.auth-box,
.prof-hero,
.db-hero,
.wl-banner,
.private-box,
.hist-card,
/* admin's .modal — adopts the same premium card surface */
.modal-bg > .modal,
/* forum's edit modal inner wrapper (refactored from inline styles) */
.modal-bg .em-box {
  background:
    linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.026) 42%, rgba(0,0,0,.58)),
    rgba(10,10,10,.74) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--cv-radius) !important;
  box-shadow: var(--cv-shadow), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  position: relative;
}

.card,
.db-card,
.stat-card,
.adm-stat,
.app-type-card,
.rule-card,
.wiki-card,
.post-card,
.gallery-item,
.sec-card,
.auth-box,
.hist-card {
  transition: transform .28s var(--cv-ease),
              border-color .28s ease,
              box-shadow .28s ease,
              background .28s ease !important;
}
.card:hover,
.db-card:hover,
.stat-card:hover,
.adm-stat:hover,
.app-type-card:hover:not(.locked),
.rule-card:hover,
.wiki-card:hover,
.post-card:hover,
.sec-card:hover,
.hist-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 32px 110px rgba(0,0,0,.86),
              0 0 0 1px rgba(255,255,255,.035),
              inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* Gallery: lift + subtle scale (RP medya için zoom hissi korundu) */
.gallery-item:hover {
  transform: translateY(-4px) scale(1.018);
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 32px 110px rgba(0,0,0,.86),
              0 0 0 1px rgba(255,255,255,.035),
              inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.card-title,
.form-title,
.sec-title,
.reply-form-title,
.modal-title,
.page-header h1,
.section-title {
  text-shadow: 0 0 30px rgba(255,255,255,.13);
}
.page-header h1,
.section-title {
  letter-spacing: clamp(2px, .55vw, 7px) !important;
}
.page-header p,
.feat-desc,
.stat-name,
.auth-sub,
.field-hint,
.pc-meta,
.pv-meta,
.prof-meta { color: var(--cv-muted) !important; }

/* Page wrap radial spotlight */
.page-wrap,
.app-wrap,
.db-wrap,
.adm-wrap,
.forum-wrap,
.gallery-wrap,
.rules-wrap,
.wiki-wrap,
.prof-wrap {
  position: relative;
}
.page-wrap::before,
.app-wrap::before,
.db-wrap::before,
.adm-wrap::before,
.forum-wrap::before,
.gallery-wrap::before,
.rules-wrap::before,
.wiki-wrap::before,
.prof-wrap::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 50%;
  width: min(900px, 90vw);
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 64%);
  pointer-events: none;
  z-index: -1;
}

/* ─── Forms: focus + error/success states ──────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea,
.filter-input,
.wiki-textarea,
.story-edit textarea,
.dev-form textarea,
.dev-form input,
.new-post-form input,
.new-post-form textarea,
.modal-bg .em-box input,
.modal-bg .em-box select,
.modal-bg .em-box textarea {
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 34px rgba(0,0,0,.22) !important;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.filter-input:focus,
.wiki-textarea:focus,
.story-edit textarea:focus,
.dev-form textarea:focus,
.dev-form input:focus,
.new-post-form input:focus,
.new-post-form textarea:focus,
.modal-bg .em-box input:focus,
.modal-bg .em-box select:focus,
.modal-bg .em-box textarea:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.48) !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.055), 0 18px 44px rgba(0,0,0,.36) !important;
}

/* Validation state rules consolidated in the v5 tail block. */
.form-group label {
  color: rgba(255,255,255,.68) !important;
  letter-spacing: .09em !important;
  font-weight: 600 !important;
}
.inp-wrap { position: relative; }
.inp-wrap input { padding-left: 42px !important; }
.inp-ico { color: rgba(255,255,255,.48) !important; }
/* Show-pw butonu için sağ padding (login/register) */
.inp-wrap input[type="password"] { padding-right: 42px !important; }

/* ─── Auth pages ───────────────────────────────────────────────────────── */
.auth-page {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.12), transparent 30%),
    radial-gradient(circle at 82% 80%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(135deg, #000 0%, #080808 55%, #000 100%) !important;
}
.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .24;
  pointer-events: none;
}
.auth-box {
  width: min(470px, calc(100vw - 28px)) !important;
  padding: clamp(26px, 4vw, 42px) !important;
}
.auth-logo-text {
  letter-spacing: 5px !important;
  text-shadow: 0 0 38px rgba(255,255,255,.18);
}
.btn-full { width: 100% !important; }

/* ─── Dashboard/Admin polish ───────────────────────────────────────────── */
.db-hero,
.prof-hero {
  overflow: hidden;
  position: relative;
}
/* Single shimmer overlay for premium hero panels */
.db-hero::after,
.prof-hero::after,
.auth-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg,
    rgba(255,255,255,.12),
    transparent 28%,
    transparent 70%,
    rgba(255,255,255,.045));
  opacity: .52;
}
.stats-grid,
.adm-stats,
.app-types,
.wiki-grid,
.gallery-grid,
.feat-grid,
.quick-grid {
  gap: clamp(14px, 2vw, 24px) !important;
}

/* Icon glow */
.stat-icon,
.adm-stat-icon,
.atc-icon,
.wiki-main-icon,
.feat-icon {
  filter: drop-shadow(0 0 18px rgba(255,255,255,.15));
}
/* Boxed icon affordance for application/wiki icons — stat/adm icons stay watermark-style */
.atc-icon,
.wiki-main-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 12px;
}

.table-wrap {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.34) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.48) !important;
}
thead th { background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.68) !important; }
tbody tr:hover td { background: rgba(255,255,255,.05) !important; }

/* ─── Tabs / Filters ───────────────────────────────────────────────────── */
.page-tabs,
.adm-tab-bar,
.gallery-filters,
.filter-row,
.cat-list {
  border-color: rgba(255,255,255,.1) !important;
}
.page-tab,
.adm-tab,
.gf-btn,
.filter-btn,
.cat-btn {
  border-radius: 999px !important;
}
.page-tab,
.adm-tab { position: relative; }
.page-tab.active,
.adm-tab.active {
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: #fff !important;
}
/* Active indicator — sharp white underline below pill */
.page-tab.active::after,
.adm-tab.active::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 14px rgba(255,255,255,.5);
  pointer-events: none;
}

/* ─── Index / landing page ─────────────────────────────────────────────── */
.hero {
  min-height: 100vh; /* fallback */
  min-height: 100svh !important;
  isolation: isolate;
  background: #000;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.13), transparent 23%),
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.9), transparent 28%, transparent 72%, rgba(0,0,0,.92)),
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.18) 42%, #000 100%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 7vh;
  width: min(860px, 88vw); height: 1px;
  transform: translateX(-50%);
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent);
  box-shadow: 0 0 34px rgba(255,255,255,.28);
}
.hero-bg::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.18) 48%, rgba(0,0,0,.96) 100%),
    linear-gradient(120deg, rgba(0,0,0,.94), rgba(0,0,0,.38) 44%, rgba(0,0,0,.78)) !important;
}
.hero-bg img {
  filter: grayscale(1) contrast(1.18) brightness(.72) !important;
}
.hero-content {
  max-width: 1050px !important;
  z-index: 3 !important;
}

/* Hero badge: shimmer sweep */
.hero-badge {
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative;
  overflow: hidden;
}
.hero-badge::before {
  content: '';
  position: absolute;
  left: -120%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: cv-badge-sweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cv-badge-sweep {
  0%, 35% { transform: translateX(0); }
  60% { transform: translateX(380%); }
  100% { transform: translateX(380%); }
}

.hero h1 {
  font-size: clamp(3.4rem, 10vw, 8.8rem) !important;
  letter-spacing: clamp(4px, 1.4vw, 18px) !important;
  text-shadow: 0 0 18px rgba(255,255,255,.2), 0 22px 60px rgba(0,0,0,.9) !important;
}
/* Outlined V — modern: stroke; legacy fallback: faded white */
.hero h1 span {
  opacity: .88 !important;
  color: rgba(255,255,255,.55);
}
@supports (-webkit-text-stroke: 1px white) {
  .hero h1 span {
    -webkit-text-stroke: 1px rgba(255,255,255,.68);
    color: transparent;
  }
}
.hero p {
  max-width: 690px !important;
  color: rgba(255,255,255,.76) !important;
  font-size: clamp(1rem, 2vw, 1.28rem) !important;
}
.hero-btns { gap: 16px !important; }
.ip-box,
.cd-box {
  background: rgba(0,0,0,.46) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
}
.ip-box:hover,
.cd-box:hover {
  border-color: rgba(255,255,255,.38) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.62), 0 0 42px rgba(255,255,255,.08) !important;
}
.cd-num { text-shadow: 0 0 24px rgba(255,255,255,.18); }

.stats-section {
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent),
    rgba(255,255,255,.012) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.stats-row > div {
  min-width: 190px;
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 42px rgba(0,0,0,.28);
}

/* Feature cards: gradient border via mask-composite */
.feat-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  padding: 34px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.028) 45%, rgba(0,0,0,.72)),
    #080808 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: transform .3s var(--cv-ease), box-shadow .3s ease;
}
.feat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.34), transparent 35%, rgba(255,255,255,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 100px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.feat-icon {
  width: 54px; height: 54px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: 18px !important;
}

.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.11), transparent 34%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.035), transparent) !important;
}
footer {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ─── Hero chips (Whitelist RP / Sosyal Rol / Los Santos / live status) ── */
.hero-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: -16px 0 28px;
}
.hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
.hero-chips span:hover {
  border-color: rgba(255,255,255,.32);
  color: #fff;
  transform: translateY(-2px);
}
.hero-chips i { color: #fff; opacity: .82; }
/* Status chip variant — pulsing dot */
.hero-chips span.status-soon {
  border-color: rgba(255,255,255,.32);
  color: rgba(255,255,255,.92);
}
.hero-chips span.status-soon::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.58);
  animation: cv-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes cv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.48); }
  70%  { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ─── Badges / notices ─────────────────────────────────────────────────── */
.badge,
.user-role,
.wl-badge,
.badge-role,
.badge-private {
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.notice {
  border-radius: 16px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* ─── Gallery / modal polish ───────────────────────────────────────────── */
.gallery-item img,
.lightbox-img,
.pv-images img {
  filter: grayscale(.16) contrast(1.08);
}
.gallery-overlay {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.86)) !important;
}
.lightbox {
  background: rgba(0,0,0,.88) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
/* Modal backdrops — frosted. Keep admin inner .modal as a panel, not a backdrop. */
.modal-bg,
.modal.open {
  background: rgba(0,0,0,.74) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ─── Mobile nav polish ────────────────────────────────────────────────── */
.mobile-nav {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.12), transparent 34%),
    rgba(0,0,0,.96) !important;
}
.mob-links a {
  border: 1px solid transparent;
  border-radius: 14px !important;
}
.mob-links a:hover,
.mob-links a.active {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08) !important;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-buttons .discord-link { display: none !important; }
}
@media (max-width: 768px) {
  body::before { background-size: 48px 48px; opacity: .16; }
  .hero-content { padding-inline: 16px !important; }
  .hero h1 { letter-spacing: 4px !important; }
  .stats-row > div { width: 100%; }
  .feat-card { padding: 26px !important; }
  .card,
  .db-card,
  .stat-card,
  .adm-stat,
  .app-type-card,
  .app-form-card,
  .rule-card,
  .wiki-card,
  .post-card,
  .sec-card,
  .auth-box,
  .hist-card,
  .modal-bg > .modal,
  .modal-bg .em-box { border-radius: 18px !important; }

  /* Tab indicator: closer to pill on mobile */
  .page-tab.active::after,
  .adm-tab.active::after { bottom: -8px; }
}
@media (max-width: 480px) {
  .btn { width: 100%; }
  .hero-btns { width: 100%; }
  .ip-box { width: 100%; justify-content: center; padding-inline: 14px !important; }
  .countdown { gap: 6px !important; }
  .cd-sep { display: none; }
  .cd-box { flex: 1 1 calc(50% - 8px); min-width: 0 !important; }
  .nav-buttons .btn-outline { display: none !important; }

  /* Hero chips: 2-column grid for tighter mobile UX */
  .hero-chips { margin-top: -8px; gap: 6px; }
  .hero-chips span {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    font-size: .7rem;
    padding: 7px 10px;
  }
  /* Status chip stays full-width to highlight live state */
  .hero-chips span.status-soon { flex: 1 1 100%; }
}
/* Mobile button width safety: never break grouped action rows */
@media (max-width: 480px) {
  .navbar .btn,
  .nav-buttons .btn,
  .mobile-nav .btn,
  .user-dropdown .btn,
  .modal-actions .btn,
  .modal-box .btn,
  .modal .modal-actions .btn,
  .em-actions .btn,
  .hc-head .btn,
  .pv-actions .btn,
  .pc-actions .btn { width: auto !important; }
  /* btn-sm in any context stays compact */
  .btn-sm { width: auto !important; }
}

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

/* ─── Print: clean monochrome fallback ─────────────────────────────────── */
@media print {
  body::before, body::after, .hero::before, .hero::after { display: none !important; }
  * { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}


/* ═══ v4 regression fix: safe stacking, watermark icons, semantic form states ═══ */
/* Keep background texture behind content without changing component positioning. */
body {
  position: relative;
  isolation: isolate;
}
body::before {
  z-index: -1 !important;
  opacity: .18 !important;
}
body::after {
  z-index: -1 !important;
  opacity: .22 !important;
}

/* Preserve original positioning semantics after the v3 stacking regression. */
.navbar { position: fixed !important; z-index: 1000 !important; }
.mobile-nav { position: fixed !important; z-index: 1001 !important; }
.toast { position: fixed !important; z-index: 10000 !important; }
.modal-bg { position: fixed !important; z-index: 9998 !important; }
.lightbox { position: fixed !important; z-index: 9998 !important; }
.user-dropdown { position: absolute !important; z-index: 1002 !important; }
.hero,
.main-content,
.page-wrap,
.auth-page,
.stats-section,
.features,
.cta,
footer {
  position: relative;
  z-index: 1;
}

/* Forum/admin modal open state moved out of inline HTML */
.modal-bg.open { display: flex !important; }
.modal-user-detail { max-width: 560px !important; }

/* Strict monochrome correction for hero status chip */
.hero-chips span.status-soon {
  border-color: rgba(255,255,255,.34) !important;
  color: rgba(255,255,255,.94) !important;
  background: rgba(255,255,255,.055) !important;
}
.hero-chips span.status-soon::before {
  background: #fff !important;
  box-shadow: 0 0 0 0 rgba(255,255,255,.58) !important;
}

/* Dashboard/admin stat icons are decorative watermarks; keep them quiet, not boxed. */
.stat-icon,
.adm-stat-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  opacity: .18 !important;
  color: rgba(255,255,255,.72) !important;
}

/* Box actual content icons consistently. */
.atc-icon,
.wiki-main-icon {
  opacity: 1 !important;
  color: rgba(255,255,255,.74) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.28) !important;
}
.wiki-main-icon {
  margin-inline: auto !important;
  margin-bottom: 16px !important;
}

/* Semantic validation states: keep functional red/green; avoid aria-invalid=false false positives. */
.form-group input.error,
.form-group textarea.error,
.form-group select.error,
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group select[aria-invalid="true"] {
  border-color: rgba(230,57,70,.72) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,.16), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.form-group input.error:focus,
.form-group textarea.error:focus,
.form-group select.error:focus,
.form-group input[aria-invalid="true"]:focus,
.form-group textarea[aria-invalid="true"]:focus,
.form-group select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(230,57,70,.22), 0 18px 44px rgba(0,0,0,.36) !important;
}
.form-group input.success,
.form-group textarea.success,
.form-group select.success {
  border-color: rgba(46,213,115,.62) !important;
  box-shadow: 0 0 0 3px rgba(46,213,115,.14), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.form-group input.success:focus,
.form-group textarea.success:focus,
.form-group select.success:focus {
  box-shadow: 0 0 0 4px rgba(46,213,115,.18), 0 18px 44px rgba(0,0,0,.36) !important;
}

@media print {
  body::before,
  body::after { display: none !important; }
}


/* ═══ v5 self-review fixes: modal panel surface, strict hero monochrome, cleanup guards ═══ */
/* The generic .modal backdrop rule no longer paints admin inner panels; explicitly restore premium surface. */
.modal-bg > .modal {
  background:
    linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.026) 42%, rgba(0,0,0,.58)),
    rgba(10,10,10,.74) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--cv-shadow), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Keep hero decorative icons monochrome even if inline icon styles are removed or future scripts inject icons. */
.hero-badge i,
.ip-box > i {
  color: rgba(255,255,255,.82) !important;
}

/* Keep profile overlay above the fixed navbar without touching admin/forum modal panels. */
.modal.open {
  z-index: 9998 !important;
}

/* If an old .modal rule survives cache/cascade, never let it flatten admin panel geometry. */
.modal-bg > .modal.modal-user-detail,
.modal-bg > .modal {
  position: relative !important;
}