/* =============================================================================
   Devil Town RP — Landing page
   Black + deep red, cinematic GTA V / FiveM serious-roleplay identity.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* palette */
  --black:        #050505;
  --black-2:      #090909;
  --black-red:    #120000;
  --red-900:      #3d0000;
  --red-800:      #8b0000;
  --red-600:      #c91515;
  --red-500:      #e31b23;
  --white:        #ffffff;
  --grey:         #a1a1a1;

  /* semantic */
  --bg:           var(--black);
  --bg-alt:       var(--black-2);
  --ink:          var(--white);
  --ink-soft:     var(--grey);
  --ink-dim:      #6f6f6f;
  --accent:       var(--red-500);
  --accent-deep:  var(--red-800);

  --line:         rgba(255, 255, 255, .08);
  --line-red:     rgba(227, 27, 35, .28);
  --glass:        rgba(15, 15, 15, .55);
  --glass-strong: rgba(9, 9, 9, .88);

  /* status — repeated across strength meters, verification rows, form messages */
  --success:      #22c55e;
  --success-light:#4ade80;
  --success-soft: #86efac;
  --danger:       #ff5c63;
  --danger-light: #ff6b71;
  --danger-soft:  #ffb3b7;
  --discord:      #5865f2;
  --discord-hover:#4752c4;

  /* shape */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;

  /* type scale — one step per role, so hierarchy is never improvised */
  --fs-meta:    .75rem;   /* labels, indices, eyebrows */
  --fs-body-sm: .92rem;   /* card and secondary copy */
  --fs-body:    1rem;
  --fs-title:   1.05rem;  /* card / step titles */

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .18s;
  --mid:  .32s;
  --slow: .6s;

  /* rhythm */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --nav-h: 76px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--red-800) var(--black-2);
  scrollbar-width: thin;
}

/* Dark themed scrollbar everywhere — the browser default (light track, grey
   thumb) breaks the site's look wherever content overflows. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb {
  background: var(--red-800);
  border-radius: 100px;
  border: 2px solid var(--black-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: 'Inter', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--red-600); color: var(--white); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--red-600);
  color: var(--white);
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Layout primitives ────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--alt {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(139, 0, 0, .12), transparent 62%),
    var(--bg-alt);
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__sub {
  margin-top: 1rem;
  font-size: 1.05rem;
}

/* ── Typography ───────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.h2 {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.h2 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 34px rgba(227, 27, 35, .38);
}

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: #c4c4c4;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  --btn-py: .85rem;
  --btn-px: 1.6rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease),
              box-shadow var(--mid) var(--ease),
              background-color var(--mid) var(--ease),
              border-color var(--mid) var(--ease),
              color var(--mid) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn[hidden] { display: none; }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Loading: the label stays in the layout (no width jump) and a spinner sits
   over it. Set aria-busy="true" while the request is in flight. */
.btn[aria-busy='true'] { color: transparent; pointer-events: none; }
.btn[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1.05em;
  height: 1.05em;
  margin: -.525em 0 0 -.525em;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn--sm  { --btn-py: .55rem; --btn-px: 1.15rem; font-size: .8rem; }
.btn--lg  { --btn-py: 1rem;   --btn-px: 2.1rem; }
.btn--xl  { --btn-py: 1.15rem; --btn-px: 2.9rem; font-size: 1.02rem; }

.btn--primary {
  background: linear-gradient(135deg, var(--red-600), var(--red-800));
  border-color: rgba(227, 27, 35, .55);
  color: var(--white);
  box-shadow: 0 8px 22px -14px rgba(227, 27, 35, .7);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--red-500), var(--red-600));
  box-shadow: 0 12px 28px -14px rgba(227, 27, 35, .85);
  transform: translateY(-1px);
}

.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .16);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(227, 27, 35, .1);
  border-color: var(--line-red);
  color: var(--white);
  transform: translateY(-1px);
}

/* ── Ambient texture layers ───────────────────────────────────────────── */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--mid) var(--ease),
              border-color var(--mid) var(--ease),
              backdrop-filter var(--mid) var(--ease);
}
.nav.is-stuck {
  background: var(--glass-strong);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; gap: .8rem; }
.brand__mark {
  width: auto;
  height: 38px;
  filter: drop-shadow(0 0 14px rgba(227, 27, 35, .4));
  transition: filter var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.brand:hover .brand__mark {
  filter: drop-shadow(0 0 22px rgba(227, 27, 35, .8));
  transform: translateY(-1px);
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .09em;
  color: var(--ink);
}
.brand__text small {
  margin-top: .28rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .45em;
  color: var(--accent);
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__links > a:not(.btn) {
  position: relative;
  padding-block: .35rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease);
}
.nav__links > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.nav__links > a:not(.btn):hover,
.nav__links > a.is-active { color: var(--ink); }
.nav__links > a:not(.btn):hover::after,
.nav__links > a.is-active::after { transform: scaleX(1); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--mid) var(--ease), opacity var(--fast) var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: clamp(7rem, 12vh, 9rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: -6% 0; z-index: -3; will-change: transform; }
/* Sized exactly like the hero, so a scaleX(-1) here mirrors the finished
   composition instead of re-deriving object-fit geometry per aspect ratio. */
.hero__flip { width: 100%; height: 100%; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  filter: saturate(.92) contrast(1.06) brightness(.72) blur(.4px);
}

/* The source banner carries its own artwork lettering on the left. On wide
   viewports the crop is too shallow to lose it, so the plate is scaled from the
   right edge — the artwork stays, the baked-in text falls outside the frame. */
@media (min-width: 861px) {
  .hero__bg img {
    transform: scale(1.62);
    transform-origin: 100% 42%;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .96) 0%, rgba(5, 5, 5, .82) 34%, rgba(5, 5, 5, .34) 66%, rgba(18, 0, 0, .55) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, .85) 0%, transparent 26%, transparent 55%, var(--black) 99%),
    radial-gradient(120% 85% at 50% 50%, transparent 38%, rgba(0, 0, 0, .82) 100%);
}

.hero__glow {
  position: absolute;
  z-index: -1;
  right: -12%;
  top: 12%;
  width: min(62vw, 780px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 21, 21, .3), transparent 62%);
  filter: blur(40px);
  animation: pulse-glow 9s var(--ease) infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.07); }
}

.hero__inner { position: relative; max-width: 46rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1.05rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line-red);
  border-radius: 100px;
  background: rgba(18, 0, 0, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #e8e8e8;
}
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(227, 27, 35, .7);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(227, 27, 35, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(227, 27, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 27, 35, 0); }
}

.hero__title { display: flex; flex-direction: column; }
.hero__title-sm {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.6vw, 1.7rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: #cfcfcf;
}
.hero__title-lg {
  margin-top: .25rem;
  font-family: 'Anton', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(3.1rem, 11vw, 7.4rem);
  line-height: .93;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 18px 60px rgba(0, 0, 0, .75);
}
.hero__title-lg em {
  font-style: normal;
  color: var(--red-500);
  text-shadow: 0 0 46px rgba(227, 27, 35, .5), 0 18px 60px rgba(0, 0, 0, .7);
}

.hero__tagline {
  margin-top: 1.15rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--accent);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: clamp(.9rem, 2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #dcdcdc;
}

.hero__lead {
  max-width: 36rem;
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: #b8b8b8;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.4rem;
}

/* status strip */
.status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 5, 5, .35), rgba(5, 5, 5, .92));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.status__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  padding-block: 1.05rem;
}

.status__state {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d8d8d8;
}
.status__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 12px rgba(34, 197, 94, .8);
}
.status__state[data-state='offline'] .status__dot {
  background: var(--red-600);
  box-shadow: 0 0 12px rgba(201, 21, 21, .8);
}

.status__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-inline-start: auto;
}
.status__stat { display: flex; flex-direction: column; }
.status__stat dt {
  order: 2;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.status__stat dd {
  order: 1;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
}
.status__stat--pending dd { color: var(--ink-dim); }

/* ── About ────────────────────────────────────────────────────────────── */
.section--about::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(90%, 620px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-red), transparent);
}

.about {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about__copy p + p { margin-top: 1.1rem; }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 2rem;
}
.pill-list li {
  padding: .42rem .95rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .03);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: #cbcbcb;
  transition: border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.pill-list li:hover {
  border-color: var(--line-red);
  background: rgba(227, 27, 35, .08);
  color: var(--white);
}

.about__media {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .95);
}
.about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(5, 5, 5, .92) 100%),
    linear-gradient(115deg, rgba(139, 0, 0, .3), transparent 58%);
  pointer-events: none;
}
.about__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: 62% center;
  filter: saturate(.9) brightness(.82);
  transition: transform var(--slow) var(--ease);
}
.about__media:hover img { transform: scale(1.04); }
.about__media figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.15rem 1.35rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: #d0d0d0;
}

/* ── Grids / cards ────────────────────────────────────────────────────────
   Features read as one ruled sheet, not six floating boxes: the grid gap is a
   1px hairline drawn by the container background, so every cell shares its
   borders with its neighbours and the section has a single silhouette. */
.grid { display: grid; gap: 1.15rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.grid--sheet {
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--bg-alt);
  transition: background-color var(--mid) var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.card:hover { background-color: #0e0808; }
.card:hover::before { transform: scaleX(1); }

.card__icon {
  grid-row: span 2;
  display: inline-flex;
  padding-top: .15rem;
  color: var(--red-600);
  transition: color var(--mid) var(--ease);
}
.card__icon svg { width: 22px; height: 22px; }
.card:hover .card__icon { color: var(--red-500); }

.card__title,
.role__title,
.step__title {
  margin-bottom: .5rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.card p, .role p, .step p { font-size: var(--fs-body-sm); line-height: 1.65; }

/* ── Roles ────────────────────────────────────────────────────────────────
   Departments are choices, so they get an index and a direction cue instead
   of the feature treatment — the two sections no longer look like copies. */
.grid--roles { gap: 1rem; counter-reset: role; }

.role {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: 1.6rem 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--black-2);
  counter-increment: role;
  overflow: hidden;
  transition: border-color var(--mid) var(--ease),
              background-color var(--mid) var(--ease);
}
.role::before {
  content: counter(role, decimal-leading-zero);
  position: absolute;
  inset-block-start: 1.45rem;
  inset-inline-end: 1.6rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-dim);
  transition: color var(--mid) var(--ease);
}
.role:hover {
  border-color: var(--line-red);
  background-color: #0d0707;
}
.role:hover::before { color: var(--accent); }

.role__icon {
  display: inline-flex;
  margin-bottom: auto;
  padding-bottom: 2rem;
  color: var(--ink-soft);
  transition: color var(--mid) var(--ease);
}
.role__icon svg { width: 30px; height: 30px; }
.role:hover .role__icon { color: var(--red-500); }

.role__line {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.role:hover .role__line { transform: scaleX(1); }

/* ── Steps ────────────────────────────────────────────────────────────────
   A sequence, drawn as one: a rail runs through the numbered markers. */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.steps::before {
  content: '';
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--line-red), var(--line) 80%);
}
[dir='rtl'] .steps::before { background: linear-gradient(270deg, var(--line-red), var(--line) 80%); }

.step { position: relative; }
.step__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.35rem;
  border: 1px solid var(--line-red);
  border-radius: 50%;
  background: var(--bg-alt);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent);
  transition: background-color var(--mid) var(--ease), color var(--mid) var(--ease);
}
.step:hover .step__num { background: var(--accent); color: var(--white); }

.steps__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }

/* ── Rules ────────────────────────────────────────────────────────────── */
.section--rules {
  background:
    radial-gradient(90% 120% at 100% 50%, rgba(139, 0, 0, .16), transparent 60%),
    var(--black-red);
  border-block: 1px solid var(--line);
}
.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.rules__creed {
  margin-top: 1.5rem;
  padding-inline-start: 1.15rem;
  border-inline-start: 2px solid var(--accent);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #dedede;
}

.rules__list { display: grid; gap: .7rem; }
.rule {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .55);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #d4d4d4;
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.rule__dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--accent);
  transform: rotate(45deg);
}
.rule:hover {
  border-color: var(--line-red);
  transform: translateX(5px);
  color: var(--white);
}

/* ── CTA ──────────────────────────────────────────────────────────────── */
.cta {
  position: relative;
  padding-block: clamp(5rem, 11vw, 9rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta__bg { position: absolute; inset: 0; z-index: -3; }
.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 38%;
  filter: saturate(.75) brightness(.5);
  transform: scale(1.62);
  transform-origin: 100% 42%;
}
.cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, var(--black) 0%, rgba(18, 0, 0, .82) 45%, var(--black) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(201, 21, 21, .28), transparent 70%);
}

.cta__title {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 8vw, 5.4rem);
  line-height: .98;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 18px 60px rgba(0, 0, 0, .8);
}
.cta__title em {
  font-style: normal;
  color: var(--red-500);
  text-shadow: 0 0 48px rgba(227, 27, 35, .55);
}
.cta__lead {
  margin: 1.5rem 0 2.5rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: clamp(.95rem, 2vw, 1.15rem);
  font-weight: 500;
  letter-spacing: .24em;
  line-height: 2;
  text-transform: uppercase;
  color: #cdcdcd;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--black);
  border-top: 1px solid var(--line);
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
}
.footer__brand p {
  max-width: 30rem;
  margin-top: 1.2rem;
  font-size: .92rem;
}
.footer h3 {
  margin-bottom: 1.1rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.footer__nav a {
  position: relative;
  font-size: .92rem;
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.footer__nav a:hover { color: var(--white); transform: translateX(4px); }

.socials { display: flex; flex-wrap: wrap; gap: .6rem; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.socials a svg { width: 19px; height: 19px; }
.socials a:hover {
  color: var(--white);
  border-color: var(--line-red);
  background: rgba(227, 27, 35, .12);
  transform: translateY(-3px);
}

.footer__legal {
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-dim);
}

/* ── Scroll reveal ────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease),
              transform var(--slow) var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 70ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* No-JS safety: never hide content if the script fails to run. */
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid--3, .steps { grid-template-columns: repeat(2, 1fr); }
  .about, .rules { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --nav-h: 66px; }

  .burger { display: flex; }

  .nav { background: var(--glass-strong); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--glass-strong);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mid) var(--ease),
                transform var(--mid) var(--ease),
                visibility var(--mid) var(--ease);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__links > a:not(.btn) {
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
  }
  .nav__links > a:not(.btn)::after { display: none; }

  .hero { min-height: 100svh; padding-bottom: clamp(9rem, 26vh, 12rem); text-align: start; }
  .hero__bg img { object-position: 72% center; filter: saturate(.9) contrast(1.05) brightness(.62); }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .55) 32%, rgba(5, 5, 5, .8) 68%, var(--black) 100%),
      radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(0, 0, 0, .8) 100%);
  }
  .hero__actions .btn { flex: 1 1 auto; min-width: 12rem; }

  .status__inner { gap: .9rem 1.6rem; }
  .status__stats { margin-inline-start: 0; width: 100%; gap: .9rem 1.8rem; }
  .status__stat dd { font-size: 1.15rem; }
}

@media (max-width: 620px) {
  .grid--3, .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .role { min-height: 0; }
  .role__icon { padding-bottom: 1.25rem; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .status__stats { gap: .8rem 1.4rem; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero__bg { transform: none !important; }
}

/* =============================================================================
   Language toggle
   ========================================================================== */
.nav__tools { display: flex; align-items: center; gap: .6rem; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.lang svg { width: 16px; height: 16px; flex: none; }
.lang:hover {
  color: var(--white);
  border-color: var(--line-red);
  background: rgba(227, 27, 35, .1);
}

/* =============================================================================
   Rules teaser on the home page
   ========================================================================== */
.rules__note { margin-top: 1.4rem; font-size: .92rem; }
.rules__copy .btn { margin-top: 1.4rem; }

/* =============================================================================
   Page header (rules.html)
   ========================================================================== */
.pagehead {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__bg { position: absolute; inset: 0; z-index: -3; }
.pagehead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 30%;
  filter: saturate(.8) brightness(.42) blur(1px);
}
.pagehead__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .95) 0%, rgba(18, 0, 0, .78) 50%, var(--black) 100%),
    radial-gradient(80% 70% at 30% 40%, rgba(201, 21, 21, .22), transparent 70%);
}
.pagehead__inner { max-width: 48rem; }
.pagehead__title {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
}
.pagehead__title em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 38px rgba(227, 27, 35, .45);
}
.pagehead__lead {
  max-width: 40rem;
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: #bdbdbd;
}

/* =============================================================================
   Rulebook
   ========================================================================== */
.rulebook { padding-top: clamp(2.5rem, 5vw, 4rem); }

.rulebook__grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.rulebook__status {
  padding: 2.5rem 0;
  font-size: .95rem;
  color: var(--ink-dim);
}
.rulebook__status--error { color: var(--red-500); }

.rulebook__source {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--ink-dim);
}

/* -- Table of contents -------------------------------------------------- */
.rulebook__aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }

.toc__title {
  margin-bottom: 1rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.toc__list { display: grid; gap: .15rem; }

.toc__link {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .6rem .8rem;
  border-inline-start: 2px solid transparent;
  border-radius: var(--r-sm);
  font-size: .88rem;
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.toc__num {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color var(--fast) var(--ease);
}
.toc__link:hover,
.toc__link.is-active {
  color: var(--white);
  background: rgba(227, 27, 35, .08);
  border-inline-start-color: var(--accent);
}
.toc__link:hover .toc__num,
.toc__link.is-active .toc__num { color: var(--accent); }

/* -- Rule sections ------------------------------------------------------ */
.rule-section { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.rule-section + .rule-section {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.rule-section__head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: 1.6rem;
}
.rule-section__num {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(227, 27, 35, .7);
}
.rule-section__title {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.rule-group {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 2.2rem 0 1rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.rule-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-red), transparent);
}
.rule-section__head + .rule-group { margin-top: 0; }

/* -- Rule list ---------------------------------------------------------- */
.rule-list { display: grid; gap: .4rem; }

.rule-item {
  display: flex;
  gap: .9rem;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
  font-size: .94rem;
  line-height: 1.65;
  transition: border-color var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.rule-item__num {
  flex: none;
  min-width: 1.6rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .84rem;
  font-weight: 600;
  color: var(--accent);
  opacity: .75;
}
.rule-item:hover {
  border-color: var(--line-red);
  background: rgba(227, 27, 35, .06);
}
.rule-item__text { color: #cfcfcf; }
.rule-item:hover .rule-item__text { color: var(--white); }

.rule-notes { margin-top: 1rem; display: grid; gap: .6rem; }
.rule-note {
  padding: .9rem 1.1rem;
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background: rgba(139, 0, 0, .12);
  font-size: .9rem;
  color: #d2d2d2;
}

/* -- Rule tables (glossary + robbery counts) ---------------------------- */
.rule-table__scroll {
  margin-top: 1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.rule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.rule-table th {
  padding: .8rem 1.1rem;
  background: rgba(139, 0, 0, .2);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: start;
  color: #e0e0e0;
  border-bottom: 1px solid var(--line-red);
}
.rule-table td {
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.rule-table tbody tr:hover { background: rgba(227, 27, 35, .06); }
.rule-table__key { color: var(--white); font-weight: 500; }
.rule-table__val { color: var(--ink-soft); }
.rule-table--counts .rule-table__val {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* -- Slim CTA variant --------------------------------------------------- */
.cta--slim { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.cta__title--sm {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .03em;
}

/* -- Rulebook responsive ------------------------------------------------ */
@media (max-width: 900px) {
  /* minmax(0, …) lets the scrollable tab strip shrink to the screen instead of widening the page */
  .rulebook__grid { grid-template-columns: minmax(0, 1fr); }
  .rulebook__aside {
    position: static;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
  }
  .toc__list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }
  .toc__link {
    border-inline-start: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .toc__link:hover, .toc__link.is-active {
    border-inline-start-color: transparent;
    border-bottom-color: var(--accent);
  }
}

@media (max-width: 620px) {
  .rule-item { padding: .7rem .85rem; gap: .65rem; font-size: .9rem; }
  .rule-section__head { gap: .65rem; }
}

/* =============================================================================
   Arabic / RTL
   ========================================================================== */
[lang='ar'] body,
[lang='ar'] .btn,
[lang='ar'] .lang,
[lang='ar'] .eyebrow,
[lang='ar'] .badge,
[lang='ar'] .rule-group,
[lang='ar'] .rule-table th,
[lang='ar'] .toc__title,
[lang='ar'] .footer h3 {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* Anton carries no Arabic glyphs — display type falls back to Cairo Black. */
[lang='ar'] .hero__title-lg,
[lang='ar'] .cta__title,
[lang='ar'] .h2,
[lang='ar'] .pagehead__title,
[lang='ar'] .rule-section__title,
[lang='ar'] .card__title,
[lang='ar'] .role__title,
[lang='ar'] .step__title,
[lang='ar'] .hero__title-sm,
[lang='ar'] .hero__tagline,
[lang='ar'] .rules__creed,
[lang='ar'] .cta__lead,
[lang='ar'] .status__state,
[lang='ar'] .status__stat dt,
[lang='ar'] .brand__text strong {
  font-family: 'Cairo', 'Oswald', sans-serif;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
}

/* Arabic reads poorly at wide tracking and has no uppercase form. */
[lang='ar'] .hero__title-sm { font-weight: 600; letter-spacing: .12em; }
[lang='ar'] .hero__title-lg { font-size: clamp(2.7rem, 9vw, 6.2rem); line-height: 1.15; }
[lang='ar'] .hero__tagline,
[lang='ar'] .cta__lead,
[lang='ar'] .rules__creed { font-weight: 600; letter-spacing: .04em; line-height: 1.9; }
[lang='ar'] .eyebrow,
[lang='ar'] .toc__title,
[lang='ar'] .footer h3 { letter-spacing: .12em; text-transform: none; }
[lang='ar'] .btn,
[lang='ar'] .lang,
[lang='ar'] .badge,
[lang='ar'] .nav__links > a:not(.btn),
[lang='ar'] .rule,
[lang='ar'] .rule-group,
[lang='ar'] .rule-table th,
[lang='ar'] .status__state,
[lang='ar'] .status__stat dt,
[lang='ar'] .pill-list li { letter-spacing: .02em; text-transform: none; font-weight: 600; }
[lang='ar'] .cta__title { font-size: clamp(2rem, 6.5vw, 4.4rem); line-height: 1.25; }
[lang='ar'] .rule-item__num { font-family: 'Inter', sans-serif; }

/* Mirrored decoration */
[dir='rtl'] .eyebrow::before,
[dir='rtl'] .rule-group::after {
  background: linear-gradient(270deg, var(--accent), transparent);
}
[dir='rtl'] .nav__links > a:not(.btn)::after,
[dir='rtl'] .role__line,
[dir='rtl'] .card::before { transform-origin: right; }
[dir='rtl'] .rule:hover { transform: translateX(-5px); }
[dir='rtl'] .footer__nav a:hover { transform: translateX(-4px); }
[dir='rtl'] .skip-link { left: auto; right: -999px; }
[dir='rtl'] .skip-link:focus { right: 1rem; left: auto; }

/* The banner artwork puts the character on the right, so in RTL — where the
   copy moves to the right — both the plate and its scrim are mirrored. */
[dir='rtl'] .hero__flip { transform: scaleX(-1); }
[dir='rtl'] .hero__scrim {
  background:
    linear-gradient(270deg, rgba(5, 5, 5, .96) 0%, rgba(5, 5, 5, .82) 34%, rgba(5, 5, 5, .34) 66%, rgba(18, 0, 0, .55) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, .85) 0%, transparent 26%, transparent 55%, var(--black) 99%),
    radial-gradient(120% 85% at 50% 50%, transparent 38%, rgba(0, 0, 0, .82) 100%);
}
[dir='rtl'] .hero__glow { right: auto; left: -12%; }

@media (max-width: 860px) {
  [dir='rtl'] .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .55) 32%, rgba(5, 5, 5, .8) 68%, var(--black) 100%),
      radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(0, 0, 0, .8) 100%);
  }
}

/* =============================================================================
   Authentication — split showcase + form
   -----------------------------------------------------------------------------
   Same identity as the rest of the site (black, deep red, condensed display
   type); more considered execution: a real layout instead of a lone card,
   depth from layered surfaces rather than heavy borders, and states on every
   interactive element.
   ========================================================================== */
.page-auth { min-height: 100svh; }

.auth {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100svh;
}

/* ── Showcase side ────────────────────────────────────────────────────── */
.auth__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

.auth__art { position: absolute; inset: 0; z-index: -3; }
.auth__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  filter: saturate(.82) contrast(1.06) brightness(.52);
  transform: scale(1.06);
}
.auth__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 38%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(160deg, rgba(5, 5, 5, .76) 0%, rgba(18, 0, 0, .7) 55%, rgba(5, 5, 5, .95) 100%),
    radial-gradient(80% 60% at 20% 25%, rgba(201, 21, 21, .28), transparent 68%);
}
/* Seam between the two halves, so the form side reads as a raised surface. */
.auth__aside::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-red) 30%, var(--line-red) 70%, transparent);
}

.auth__brand { display: inline-flex; align-items: center; gap: .8rem; width: fit-content; }
.auth__brand img {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 0 18px rgba(227, 27, 35, .5));
}
.auth__brand span { display: flex; flex-direction: column; line-height: 1; }
.auth__brand strong {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .09em;
  color: var(--ink);
}
.auth__brand small {
  margin-top: .3rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .45em;
  color: var(--accent);
}

.auth__pitch { max-width: 26rem; }
.auth__headline {
  font-family: 'Anton', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: .98;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 14px 44px rgba(0, 0, 0, .7);
}
.auth__headline em {
  font-style: normal;
  color: var(--red-500);
  text-shadow: 0 0 40px rgba(227, 27, 35, .5);
}
.auth__sub {
  margin-top: 1.05rem;
  max-width: 30ch;
  font-size: .95rem;
  line-height: 1.65;
  color: #b6b6b6;
}

.auth__points { display: grid; gap: .75rem; margin-top: 2rem; }
.auth__point {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
  color: #d0d0d0;
}
.auth__point svg { width: 17px; height: 17px; flex: none; color: var(--accent); }

.auth__foot { font-size: .78rem; color: var(--ink-dim); }
.auth__foot a { color: var(--ink-soft); }
.auth__foot a:hover { color: var(--ink); }

/* ── Form side ────────────────────────────────────────────────────────── */
.auth__main {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(139, 0, 0, .1), transparent 60%),
    var(--bg-alt);
}

.auth__panel {
  width: 100%;
  max-width: 25rem;
  animation: auth-enter .5s var(--ease) both;
}
@keyframes auth-enter {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.auth__mobilebrand { display: none; }

.auth__title {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.auth__lead {
  margin-top: .55rem;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.auth__lead strong { color: var(--ink); word-break: break-word; }

.auth__form { margin-top: 1.9rem; display: grid; gap: 1.05rem; }
.auth__form[hidden] { display: none; }

.auth__alt {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--ink-soft);
}
.auth__alt a, .linkbtn {
  color: var(--accent);
  font-weight: 500;
  transition: color var(--fast) var(--ease);
}
.auth__alt a:hover, .linkbtn:hover { color: var(--danger-light); }

.linkbtn {
  padding: 0;
  font: inherit;
  font-weight: 500;
  background: none;
  border: 0;
  cursor: pointer;
}
.linkbtn:disabled { color: var(--ink-dim); cursor: default; }
.linkbtn--danger { color: var(--danger-light); font-size: .82rem; }

/* ── Steps ────────────────────────────────────────────────────────────── */
.steps-rail {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.steps-rail__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.steps-rail__item + .steps-rail__item::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--line);
  flex: none;
}
.steps-rail__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ink-dim);
  transition: all var(--mid) var(--ease);
}
.steps-rail__dot svg { width: 13px; height: 13px; }
.steps-rail__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.steps-rail__item.is-current .steps-rail__dot {
  border-color: var(--accent);
  background: rgba(227, 27, 35, .16);
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(227, 27, 35, .12);
}
.steps-rail__item.is-current .steps-rail__label { color: var(--ink); }
.steps-rail__item.is-done .steps-rail__dot {
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .14);
  color: var(--success-light);
}

/* ── Fields ───────────────────────────────────────────────────────────── */
.field { display: grid; gap: .45rem; }
.field label {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--fast) var(--ease);
}
.field:focus-within label { color: var(--accent); }

/* wrapper carries the visual chrome so the input itself stays plain */
.input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .72);
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background-color var(--fast) var(--ease);
}
.input:hover { border-color: rgba(255, 255, 255, .16); }
.input:focus-within {
  border-color: var(--accent);
  background: rgba(5, 5, 5, .9);
  box-shadow: 0 0 0 3px rgba(227, 27, 35, .14);
}

.input__icon {
  display: grid;
  place-items: center;
  width: 42px;
  flex: none;
  color: var(--ink-dim);
  transition: color var(--fast) var(--ease);
}
.input__icon svg { width: 17px; height: 17px; }
.input:focus-within .input__icon { color: var(--accent); }

.input input {
  flex: 1;
  min-width: 0;
  padding: .85rem .9rem .85rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
}
.input input:focus { outline: none; }
.input input::placeholder { color: #4a4a4a; }
/* Chrome paints its own autofill background; this keeps the dark surface. */
.input input:-webkit-autofill,
.input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 60px #0a0505 inset;
  caret-color: var(--ink);
}

.input__toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 100%;
  flex: none;
  color: var(--ink-dim);
  border-radius: var(--r-md);
  transition: color var(--fast) var(--ease);
}
.input__toggle svg { width: 18px; height: 18px; }
.input__toggle:hover { color: var(--ink); }

.input__state {
  display: grid;
  place-items: center;
  width: 0;
  overflow: hidden;
  flex: none;
  transition: width var(--mid) var(--ease);
}
.input__state svg { width: 17px; height: 17px; }
.field.is-valid .input__state { width: 34px; color: var(--success-light); }

/* states */
.field.has-error .input { border-color: var(--danger); background: rgba(139, 0, 0, .14); }
.field.has-error .input:focus-within { box-shadow: 0 0 0 3px rgba(255, 92, 99, .16); }
.field.has-error label { color: var(--danger-light); }
.field.is-valid .input { border-color: rgba(34, 197, 94, .45); }

.field__hint { font-size: .78rem; color: var(--ink-dim); }
.field__error[hidden] { display: none; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .82rem;
  color: var(--danger-light);
  animation: field-shake .3s var(--ease);
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.field__row a { font-size: .76rem; color: var(--ink-soft); }
.field__row a:hover { color: var(--accent); }

/* ── Password strength ────────────────────────────────────────────────── */
.strength { display: grid; gap: .4rem; }
.strength__bars { display: flex; gap: 4px; }
.strength__bars span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  transition: background-color var(--mid) var(--ease);
}
.strength__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color var(--mid) var(--ease);
}
.strength[data-score='1'] span.is-on { background: #ef4444; }
.strength[data-score='1'] .strength__label { color: #ef4444; }
.strength[data-score='2'] span.is-on { background: #f97316; }
.strength[data-score='2'] .strength__label { color: #f97316; }
.strength[data-score='3'] span.is-on { background: #eab308; }
.strength[data-score='3'] .strength__label { color: #eab308; }
.strength[data-score='4'] span.is-on { background: var(--success); }
.strength[data-score='4'] .strength__label { color: var(--success); }

/* ── OTP ──────────────────────────────────────────────────────────────── */
.otp {
  display: flex;
  gap: clamp(.4rem, 2vw, .6rem);
  justify-content: space-between;
}
.otp input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .72);
  color: var(--ink);
  font-family: 'Oswald', 'Courier New', monospace;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-weight: 600;
  text-align: center;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.otp input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(227, 27, 35, .14);
  transform: translateY(-2px);
}
.otp input:not(:placeholder-shown) { border-color: rgba(227, 27, 35, .4); }
.otp.has-error input { border-color: var(--danger); }
.otp.is-valid input { border-color: rgba(34, 197, 94, .5); }
.otp.is-locked input { opacity: .55; pointer-events: none; }

/* ── Messages ─────────────────────────────────────────────────────────── */
.form__msg[hidden] { display: none; }
.form__msg {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem 1rem;
  border-radius: var(--r-md);
  border-inline-start: 3px solid transparent;
  font-size: .88rem;
  line-height: 1.6;
  animation: auth-enter .3s var(--ease) both;
}
.form__msg.is-error {
  border-inline-start-color: var(--danger);
  background: rgba(139, 0, 0, .22);
  color: var(--danger-soft);
}
.form__msg.is-success {
  border-inline-start-color: var(--success);
  background: rgba(34, 197, 94, .12);
  color: var(--success-soft);
}
.form__msg.is-info {
  border-inline-start-color: var(--accent);
  background: rgba(227, 27, 35, .1);
  color: #e0e0e0;
}
.form__note { font-size: .8rem; color: var(--ink-dim); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn--block { width: 100%; }

/* Loading: label hides, spinner takes its place, width stays put. */
.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn--discord {
  background: var(--discord);
  border-color: var(--discord);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(88, 101, 242, .8);
}
.btn--discord:hover { background: var(--discord-hover); border-color: var(--discord-hover); transform: translateY(-2px); }

.btn--danger {
  background: rgba(139, 0, 0, .3);
  border-color: rgba(227, 27, 35, .45);
  color: var(--danger-soft);
}
.btn--danger:hover { background: rgba(201, 21, 21, .45); color: #fff; }

/* ── Connect / status states ──────────────────────────────────────────── */
.authstate { display: grid; gap: 1.1rem; animation: auth-enter .35s var(--ease) both; }
.authstate[hidden] { display: none; }
.authstate .btn + .btn { margin-top: -.3rem; }

.statusicon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid transparent;
}
.statusicon svg { width: 28px; height: 28px; }
.statusicon--ok {
  border-color: rgba(34, 197, 94, .4);
  background: rgba(34, 197, 94, .12);
  color: var(--success-light);
  animation: pop .4s var(--ease) both;
}
.statusicon--warn {
  border-color: var(--line-red);
  background: rgba(139, 0, 0, .22);
  color: var(--red-500);
}
.statusicon--busy {
  border-color: var(--line-red);
  background: rgba(139, 0, 0, .18);
  color: var(--accent);
}
.statusicon--busy svg { animation: spin 1.1s linear infinite; }
@keyframes pop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* checklist used on the Discord step */
.authcheck { display: grid; gap: .6rem; }
.authcheck li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  font-size: .9rem;
  color: var(--ink-dim);
  transition: all var(--mid) var(--ease);
}
.authcheck li svg { width: 17px; height: 17px; flex: none; }
.authcheck li.is-on {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .08);
  color: #d4d4d4;
}
.authcheck li.is-on svg { color: var(--success-light); }
.authcheck li.is-busy svg { color: var(--accent); animation: spin 1.1s linear infinite; }

/* ── Verification flow (connect page) ─────────────────────────────────────
   One surface, five states. Row status is expressed with data-status so the
   controller never has to build or remove markup.
   ---------------------------------------------------------------------- */
.auth__panel--connect { max-width: 27rem; }

.vflow { display: grid; gap: 1.35rem; }
.vflow[hidden], .vdone[hidden] { display: none; }
.vflow__head { display: grid; gap: .5rem; }
.vflow__head .auth__lead { margin-top: 0; max-width: 34ch; }

.vdone {
  display: grid;
  gap: 1.15rem;
  animation: auth-enter .4s var(--ease) both;
}
.vdone .auth__title { font-size: clamp(1.5rem, 3.2vw, 1.9rem); }

/* ── Status card ──────────────────────────────────────────────────────── */
.vcard {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .012)),
    rgba(5, 5, 5, .5);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .95);
  overflow: hidden;
}

.vrow {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  font-size: .9rem;
  transition: background-color var(--mid) var(--ease);
}
.vrow + .vrow { border-top: 1px solid rgba(255, 255, 255, .05); }

.vrow__name {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color var(--mid) var(--ease);
}
.vrow__status {
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-dim);
  text-align: end;
  transition: color var(--mid) var(--ease);
}

/* Icon slot: all four glyphs stack, data-status decides which is visible. */
.vrow__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.vrow__icon > * {
  position: absolute;
  opacity: 0;
  transform: scale(.75);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.vrow__icon svg { width: 17px; height: 17px; }
.vrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a4a4a;
}

.vrow[data-status='pending'] .vrow__dot,
.vrow[data-status='checking'] .vrow__spin,
.vrow[data-status='success'] .vrow__tick,
.vrow[data-status='action'] .vrow__warn,
.vrow[data-status='error'] .vrow__warn { opacity: 1; transform: none; }

.vrow[data-status='checking'] { background: rgba(227, 27, 35, .05); }
.vrow[data-status='checking'] .vrow__spin { color: var(--accent); animation: spin 1.05s linear infinite; }
.vrow[data-status='checking'] .vrow__status { color: #e0e0e0; }
.vrow[data-status='checking'] .vrow__name { color: var(--ink-soft); }

.vrow[data-status='success'] { background: rgba(34, 197, 94, .05); }
.vrow[data-status='success'] .vrow__tick { color: var(--success); }
.vrow[data-status='success'] .vrow__name { color: var(--ink-soft); }
.vrow[data-status='success'] .vrow__status { color: var(--success-soft); }

.vrow[data-status='action'] .vrow__warn { color: #f0a020; }
.vrow[data-status='action'] .vrow__status { color: #f5c06a; }
.vrow[data-status='action'] .vrow__name { color: var(--ink-soft); }

.vrow[data-status='error'] { background: rgba(139, 0, 0, .14); }
.vrow[data-status='error'] .vrow__warn { color: var(--danger); }
.vrow[data-status='error'] .vrow__status { color: var(--danger-soft); }
.vrow[data-status='error'] .vrow__name { color: var(--ink-soft); }

/* ── Actions ──────────────────────────────────────────────────────────── */
.vflow__actions { display: grid; gap: .65rem; }
.vflow__actions .btn { border-radius: 11px; }
.vflow__actions .btn--primary {
  box-shadow: 0 14px 32px -18px rgba(227, 27, 35, .9);
}
.vflow__actions .btn--primary:hover,
.vflow__actions .btn--discord:hover { transform: translateY(-2px); }
.vflow__actions .btn--primary:active,
.vflow__actions .btn--discord:active,
.vflow__actions .btn--ghost:active { transform: translateY(0); }
.vflow__actions .btn[hidden] { display: none; }

/* The connect button, resolved. Same slot, quieter presence. */
.linkedchip {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .95rem;
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 11px;
  background: rgba(34, 197, 94, .07);
  box-shadow: 0 0 22px -12px rgba(34, 197, 94, .7);
  font-size: .88rem;
  color: #d7d7d7;
  animation: chip-settle .38s var(--ease) both;
}
.linkedchip[hidden] { display: none; }
.linkedchip__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  background: rgba(88, 101, 242, .18);
  color: #7c88ff;
}
.linkedchip__text { flex: 1; }
.linkedchip__tick { width: 16px; height: 16px; flex: none; color: var(--success); }
@keyframes chip-settle {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Step rail: the number gives way to a tick once Discord is done. */
.steps-rail__num, .steps-rail__tick { transition: opacity var(--mid) var(--ease); }
.steps-rail__tick { display: none; width: 13px; height: 13px; }
.steps-rail__item.is-done .steps-rail__num { display: none; }
.steps-rail__item.is-done .steps-rail__tick { display: block; }

@media (max-width: 480px) {
  /* Long status text must stay on one line next to its label. */
  .vrow { padding: .8rem .85rem; gap: .65rem; }
  .vrow__name { font-size: .7rem; letter-spacing: .07em; }
  .vrow__status { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vrow__icon > *, .linkedchip, .vdone { animation: none; transition: none; }
}


/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }

  /* The showcase becomes a compact banner above the form. */
  .auth__aside {
    min-height: auto;
    padding: calc(1.5rem + env(safe-area-inset-top)) var(--gutter) 1.75rem;
    gap: 1.25rem;
  }
  .auth__aside::after { display: none; }
  .auth__points, .auth__foot { display: none; }
  .auth__headline { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .auth__sub { font-size: .92rem; }
  .auth__main { padding-top: 2rem; }
}

@media (max-width: 560px) {
  /* Below this the banner costs more than it gives; the form gets the screen. */
  .auth__aside { display: none; }
  .auth__mobilebrand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.6rem;
  }
  .auth__mobilebrand img { height: 34px; width: auto; filter: drop-shadow(0 0 14px rgba(227, 27, 35, .45)); }
  .auth__mobilebrand span { display: flex; flex-direction: column; line-height: 1; }
  .auth__mobilebrand strong {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 700; font-size: .95rem; letter-spacing: .09em; color: var(--ink);
  }
  .auth__mobilebrand small {
    margin-top: .28rem; font-size: .54rem; font-weight: 600; letter-spacing: .45em; color: var(--accent);
  }
  .auth__main {
    place-items: start center;
    padding-top: calc(2rem + env(safe-area-inset-top));
    background:
      radial-gradient(100% 45% at 50% 0%, rgba(139, 0, 0, .16), transparent 60%),
      var(--bg);
  }
  .steps-rail__label { display: none; }
  .steps-rail__item + .steps-rail__item::before { width: 26px; }
}

/* ── Language toggle on auth pages ────────────────────────────────────── */
.lang--corner {
  position: absolute;
  top: 1.1rem;
  inset-inline-end: 1.1rem;
  z-index: 5;
  padding: .35rem .65rem;
  font-size: .7rem;
}
.lang--corner svg { width: 14px; height: 14px; }

/* ── Arabic ───────────────────────────────────────────────────────────── */
[lang='ar'] .vrow__name { letter-spacing: 0; text-transform: none; }
[lang='ar'] .auth__title,
[lang='ar'] .auth__headline,
[lang='ar'] .field label,
[lang='ar'] .steps-rail__label,
[lang='ar'] .strength__label {
  font-family: 'Cairo', 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .02em;
}
[lang='ar'] .auth__headline { font-weight: 900; line-height: 1.25; }
[lang='ar'] .input input { font-family: 'Cairo', 'Inter', sans-serif; }
/* Email, codes and ids stay LTR whatever the page direction. */
[dir='rtl'] .input input[type='email'],
[dir='rtl'] .input input[type='password'] { direction: ltr; text-align: right; }
[dir='rtl'] .otp { direction: ltr; }
[dir='rtl'] .input input { padding: .85rem 0 .85rem .9rem; }


/* =============================================================================
   Dashboard
   ========================================================================== */
.dash { padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem)); padding-bottom: var(--section-y); }
.dash__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.dash__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.panel {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
}
.panel--wide { grid-column: 1 / -1; }

.panel__title {
  margin-bottom: 1.2rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.panel__note { margin-top: 1rem; font-size: .82rem; color: var(--ink-dim); }
.panel__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.panel__actions[hidden] { display: none; }

/* key / value list */
.kv { display: grid; gap: .9rem; }
.kv > div { display: grid; gap: .2rem; }
.kv dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.kv dd { font-size: .95rem; color: var(--ink); word-break: break-all; }
.kv__mono { font-family: 'Courier New', monospace; font-size: .85rem !important; color: #c9c9c9 !important; }

/* verification checklist */
.checklist { display: grid; gap: .8rem; }
.checklist li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .92rem;
  color: var(--ink-dim);
}
.checklist__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: all var(--mid) var(--ease);
}
.checklist__mark::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: background-color var(--mid) var(--ease);
}
.checklist li.is-on { color: var(--ink); }
.checklist li.is-on .checklist__mark {
  border-color: rgba(34, 197, 94, .5);
  background: rgba(34, 197, 94, .14);
}
.checklist li.is-on .checklist__mark::after { background: var(--success-light); }

/* device list */
.devices { display: grid; gap: .6rem; }
.devices__empty { padding: 1rem 0; font-size: .88rem; color: var(--ink-dim); }

.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .5);
}
.device.is-current { border-color: var(--line-red); background: rgba(139, 0, 0, .14); }
.device__info { min-width: 0; }
.device__name {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .92rem;
  color: var(--ink);
}
.device__badge {
  padding: .15rem .5rem;
  border: 1px solid var(--line-red);
  border-radius: 100px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.device__meta { margin-top: .2rem; font-size: .78rem; color: var(--ink-dim); }

@media (max-width: 760px) {
  .dash__grid { grid-template-columns: 1fr; }
  .device { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ── Arabic ───────────────────────────────────────────────────────────── */
[lang='ar'] .panel__title,
[lang='ar'] .kv dt,
[lang='ar'] .device__badge {
  font-family: 'Cairo', 'Oswald', sans-serif;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 700;
}
[dir='rtl'] .kv__mono, [dir='rtl'] #kvUserId, [dir='rtl'] #kvDiscord { direction: ltr; text-align: right; }



/* ── Dashboard danger zone ────────────────────────────────────────────── */
.panel--danger {
  border-color: rgba(227, 27, 35, .32);
  background: linear-gradient(165deg, rgba(139, 0, 0, .16), rgba(9, 9, 9, .6));
}
.panel__title--danger { color: var(--danger-light); }
.deleteform { margin-top: 1.4rem; max-width: 24rem; }


/* =============================================================================
   Admin Dashboard
   -----------------------------------------------------------------------------
   Arabic-first and RTL: every panel here renders content authored in Arabic by
   the administration, so the page commits to that direction rather than
   swapping with the site-wide language toggle.
   ========================================================================== */

.page-admin { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }

.adm__gate[hidden] { display: none; }
.adm__gate {
  display: grid;
  place-items: center;
  gap: 1.25rem;
  min-height: 40vh;
  text-align: center;
}
.adm__gateText { font-size: 1rem; color: var(--ink-soft); max-width: 34rem; }

.adm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.adm__rank { margin-top: .35rem; font-size: .9rem; color: var(--accent); }
.adm__avatar {
  border-radius: 50%;
  border: 1px solid var(--line-red);
  object-fit: cover;
}

/* ── Layout: section rail + body ────────────────────────────────────────── */
.adm__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.adm__nav {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
  display: grid;
  gap: 1.1rem;
  padding: .75rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(9, 9, 9, .6);
}

/* ── Grouped rail ────────────────────────────────────────────────────────
   Eight entries in one column read as an undifferentiated list. A quiet
   heading over each run separates where-you-stand from the reference
   material from the tools that act on the server. */
.adm__navGroup { display: grid; gap: .3rem; }
/* The server labels every section and group in Arabic whatever the interface
   language is, so this heading is always Arabic text. Arabic is a connected
   script: the tracked, uppercased treatment the Latin eyebrows use would only
   pull its letters apart, so it gets Cairo at its natural spacing. */
.adm__navGroupTitle {
  padding: 0 .9rem .15rem;
  font-family: 'Cairo', 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-dim);
}
.adm__navList { display: grid; gap: .2rem; }

.adm__navItem {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .62rem .9rem .62rem 1.05rem;
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 600;
  text-align: start;
  color: var(--ink-soft);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
[dir="rtl"] .adm__navItem { padding: .62rem 1.05rem .62rem .9rem; }

.adm__navIcon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--ink-dim);
  transition: color var(--fast) var(--ease);
}
.adm__navLabel { min-width: 0; overflow-wrap: anywhere; }

.adm__navItem:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.adm__navItem:hover .adm__navIcon { color: var(--ink-soft); }

.adm__navItem.is-active {
  background: rgba(227, 27, 35, .22);
  color: var(--white);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.adm__navItem.is-active:hover { background: rgba(227, 27, 35, .28); }
.adm__navItem.is-active .adm__navIcon { color: var(--accent); }
.adm__navItem.is-active::before {
  content: "";
  position: absolute;
  inset-block: .3rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.adm__body { display: grid; gap: 1.15rem; min-width: 0; }
.adm__section { display: grid; gap: 1.15rem; }
.adm__section[hidden] { display: none; }

/* ── Standalone form controls ───────────────────────────────────────────────
   Elsewhere .input is a wrapper around the field; in the admin forms it is the
   control itself, so it carries the chrome directly. */
.adm input.input,
.adm select.input,
.adm textarea.input,
.modal input.input {
  display: block;
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .72);
  color: var(--ink);
  font: inherit;
  font-size: .93rem;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.adm textarea.input { resize: vertical; line-height: 1.8; }
.adm input.input:hover,
.adm select.input:hover,
.adm textarea.input:hover,
.modal input.input:hover { border-color: rgba(255, 255, 255, .16); }
.adm input.input:focus,
.adm select.input:focus,
.adm textarea.input:focus,
.modal input.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(227, 27, 35, .14);
}
.adm select.input option { background: #0b0b0b; color: var(--ink); }

/* A native <select> keeps the OS chrome by default (light dropdown button on
   Windows) — flatten it and draw our own chevron so it matches the rest of
   the dark UI instead of looking like a foreign control. */
.adm select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px;
}
[dir='rtl'] .adm select.input,
[lang='ar'] .adm select.input {
  padding-inline-end: .95rem;
  padding-inline-start: 2.4rem;
  background-position: left .85rem center;
}
.adm select.input:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.adm__form { display: grid; gap: 1rem; }
.adm__form .field { margin-bottom: 0; }

.adm__check {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.adm__check input { accent-color: var(--accent); width: 16px; height: 16px; }

.adm__warn { color: #ffb4b8 !important; }

/* ── Stat / ladder tables ───────────────────────────────────────────────── */
.adm__stats { display: grid; gap: .1rem; }
.adm__stats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.adm__stats li:last-child { border-bottom: 0; }
.adm__statLabel { color: var(--ink-soft); }
.adm__statValue {
  flex: none;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Long values (e.g. clothing item names) wrap instead of squeezing the label. */
.adm__statValue--wide {
  flex: 1 1 60%;
  text-align: end;
  font-weight: 500;
  font-size: .84rem;
  direction: ltr;
}

/* Stacked Arabic + English name inside an accordion header. */
.adm__systemHeading { display: grid; gap: .3rem; text-align: start; min-width: 0; }
.adm__systemName {
  font-family: 'Cairo', 'Inter', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.adm__systemEn {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Admin systems ────────────────────────────────────────────────────── */

/* Switcher — one card per system, the active one carries the accent. */
.adm__sysTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .7rem;
}
.adm__sysTab {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .25));
  color: var(--ink-soft);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease),
              transform var(--fast) var(--ease), color var(--fast) var(--ease);
}
.adm__sysTab:hover { border-color: rgba(255, 255, 255, .16); color: var(--ink); transform: translateY(-2px); }
.adm__sysTab.is-active {
  border-color: var(--line-red);
  background: linear-gradient(160deg, rgba(227, 27, 35, .16), rgba(61, 0, 0, .22));
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.adm__sysTabIcon {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-dim);
}
.adm__sysTab.is-active .adm__sysTabIcon { background: rgba(227, 27, 35, .18); color: var(--accent); }
.adm__sysTabText { display: grid; gap: .2rem; min-width: 0; }
.adm__sysTabName { font-family: 'Cairo', 'Inter', sans-serif; font-size: .98rem; font-weight: 700; }
.adm__sysTabEn {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.adm__sysStage { margin-top: 1.15rem; }
.adm__sys { display: grid; gap: 1.2rem; }

.adm__sysHead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.adm__sysHeadIcon {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 11px;
  border: 1px solid var(--line-red);
  border-radius: var(--r-lg);
  background: rgba(227, 27, 35, .1);
  color: var(--accent);
}
.adm__sysTitle {
  margin: 0;
  font-family: 'Cairo', 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
}

.adm__sysGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  align-items: start;
}
.adm__sysCard {
  display: grid;
  gap: .8rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(5, 5, 5, .5);
}
.adm__sysCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}

/* Points — label on one side, the reward as a badge on the other. */
.adm__pointList { display: grid; gap: .35rem; }
.adm__pointList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .7rem;
  border-radius: var(--r-md);
  font-size: .88rem;
  color: var(--ink-soft);
  transition: background-color var(--fast) var(--ease);
}
.adm__pointList li:hover { background: rgba(255, 255, 255, .035); color: var(--ink); }
.adm__pointValue {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  min-width: 3rem;
  justify-content: center;
  padding: .2rem .6rem;
  border: 1px solid rgba(34, 197, 94, .35);
  border-radius: 999px;
  background: rgba(34, 197, 94, .1);
  color: var(--success-light);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.adm__pointValue small { font-size: .68rem; font-weight: 600; color: var(--ink-soft); }

/* Promotions — a ladder where the bar length shows how far each rank sits. */
.adm__ladder { display: grid; gap: .3rem; }
.adm__ladder li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .5rem .6rem;
  border-radius: var(--r-md);
}
.adm__ladder li:hover { background: rgba(255, 255, 255, .035); }
.adm__ladderLevel {
  display: grid;
  place-items: center;
  height: 2rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-dim);
  font-size: .76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.adm__ladderInfo { display: grid; gap: .35rem; min-width: 0; }
.adm__ladderName { font-size: .86rem; color: var(--ink); overflow-wrap: anywhere; }
.adm__ladderBar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.adm__ladderBar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red-800), var(--accent));
}
.adm__ladderPoints {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Duties — numbered entries. */
.adm__dutyList { display: grid; gap: .55rem; }
.adm__dutyList li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  transition: border-color var(--fast) var(--ease);
}
.adm__dutyList li:hover { border-color: var(--line-red); }
.adm__dutyNum {
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.5;
}
.adm__dutyList strong { display: block; font-size: .9rem; color: var(--ink); }
.adm__dutyList p { margin: .2rem 0 0; font-size: .84rem; line-height: 1.8; color: var(--ink-soft); }

/* Callouts — explanation and warning blocks. */
.adm__callout {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-inline-start-width: 3px;
  border-radius: var(--r-md);
  font-size: .88rem;
  line-height: 1.9;
}
.adm__callout p { margin: 0; }
.adm__calloutIcon { flex: none; width: 20px; height: 20px; margin-top: .25rem; }
.adm__callout--info { border-inline-start-color: #5b8def; background: rgba(91, 141, 239, .07); color: var(--ink-soft); }
.adm__callout--info .adm__calloutIcon { color: #7aa5f5; }
.adm__callout--warn { border-color: rgba(227, 27, 35, .3); border-inline-start-color: var(--accent); background: rgba(139, 0, 0, .14); color: #ffc9cc; }
.adm__callout--warn .adm__calloutIcon { color: var(--accent); }

.adm__groupTitle {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
}

@media (max-width: 560px) {
  .adm__sysGrid { grid-template-columns: 1fr; }
  .adm__ladder li { grid-template-columns: 2rem minmax(0, 1fr); }
  .adm__ladderPoints { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .adm__sysTab, .adm__pointList li, .adm__dutyList li { transition: none !important; }
  .adm__sysTab:hover { transform: none; }
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.adm__progressText { font-size: .95rem; color: var(--ink); }
.adm__bar {
  margin: .9rem 0 .3rem;
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.adm__bar span {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--red-800), var(--red-500));
  transition: width var(--slow) var(--ease);
}

/* ── Teams ──────────────────────────────────────────────────────────────── */
.adm__teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .7rem;
  margin-top: 1.1rem;
}
.adm__team {
  display: grid;
  gap: .2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .5);
  text-align: start;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.adm__team:not(:disabled):hover { border-color: var(--line-red); transform: translateY(-2px); }
.adm__team:disabled { opacity: .55; cursor: not-allowed; }
.adm__teamName { font-size: .95rem; font-weight: 700; color: var(--ink); }
.adm__teamEn { font-size: .74rem; letter-spacing: .08em; color: var(--ink-dim); direction: ltr; }
.adm__teamBadge { margin-top: .4rem; font-size: .7rem; color: var(--accent); }

/* ── Control: tabs, roster, actions ─────────────────────────────────────── */
.adm__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(9, 9, 9, .6);
}
.adm__tab {
  padding: .6rem 1.1rem;
  border-radius: var(--r-md);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.adm__tab.is-active { background: rgba(139, 0, 0, .28); color: var(--white); }
.adm__tabPanel { display: grid; gap: 1.15rem; margin-top: 1.15rem; }
.adm__tabPanel[hidden] { display: none; }

.adm__roster {
  display: grid;
  gap: .4rem;
  max-height: 26rem;
  overflow-y: auto;
  margin-top: 1rem;
  padding-inline-end: .3rem;
}
.adm__rosterItem {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .5);
  text-align: start;
  transition: border-color var(--fast) var(--ease);
}
.adm__rosterItem:hover { border-color: var(--line-red); }
.adm__rosterInfo { display: grid; gap: .15rem; min-width: 0; }
.adm__rosterName { font-size: .92rem; font-weight: 700; color: var(--ink); }
.adm__rosterMeta { font-size: .76rem; color: var(--ink-dim); }

.adm__kv { margin-bottom: 1.6rem; }

.adm__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.adm__act {
  display: grid;
  gap: .85rem;
  align-content: start;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .45);
}
.adm__act--danger { border-color: rgba(227, 27, 35, .3); background: rgba(139, 0, 0, .12); }
.adm__actTitle { font-size: .9rem; font-weight: 700; color: var(--ink); }
.adm__actTitle--danger { color: var(--danger-light); }
.adm__act .panel__actions { margin-top: .3rem; }

/* ── Audit ──────────────────────────────────────────────────────────────── */
.adm__auditList { display: grid; gap: .45rem; }
.adm__auditRow {
  display: grid;
  gap: .15rem;
  padding: .7rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .5);
}
.adm__auditRow .device__badge { justify-self: start; margin-top: .3rem; }

/* ── Circulars ──────────────────────────────────────────────────────────── */
.adm__circular {
  padding: 1.1rem;
  margin-top: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .5);
}
.adm__circularHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.adm__circularDate { font-size: .76rem; color: var(--ink-dim); }
.adm__circularBody { white-space: pre-wrap; font-size: .92rem; color: var(--ink); }
.adm__circularMeta { margin-top: .6rem; font-size: .76rem; color: var(--ink-dim); }

/* ── Supervision gallery ────────────────────────────────────────────────── */
.adm__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .7rem;
  margin-top: 1.1rem;
}
.adm__gallery img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ── Admin motion: section swap, tab swap, nav/list micro-interactions ───── */
.adm__section.reveal {
  transition: opacity var(--mid) var(--ease),
              transform var(--mid) var(--ease),
              filter var(--mid) var(--ease);
}
.adm__navItem { transform: translateX(0); }
.adm__navItem:hover { transform: translateX(3px); }
[dir="rtl"] .adm__navItem:hover { transform: translateX(-3px); }
.adm__navItem.is-active { transform: translateX(0); }

.adm__tab {
  transition: background-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.adm__tab:hover { transform: translateY(-1px); }
.adm__tabPanel {
  animation: adm-tab-in var(--mid) var(--ease);
}
@keyframes adm-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.adm__rosterItem, .adm__circular, .adm__team {
  transition: transform var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              opacity var(--slow) var(--ease),
              filter var(--slow) var(--ease);
}
.adm__rosterItem:hover, .adm__circular:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .adm__section.reveal,
  .adm__navItem,
  .adm__tab,
  .adm__tabPanel,
  .adm__rosterItem, .adm__circular, .adm__team {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .adm__layout { grid-template-columns: 1fr; }

  /* The rail becomes one horizontal run above the content. The groups keep
     their headings, which turn into inline dividers between the runs, so the
     structure survives the change of axis instead of flattening back into an
     undifferentiated row. */
  .adm__nav {
    position: static;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem;
    overflow-x: auto;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .adm__navGroup,
  .adm__navList { display: contents; }

  .adm__navGroupTitle {
    flex: none;
    padding: 0 .6rem 0 .35rem;
    border-inline-start: 1px solid var(--line);
    white-space: nowrap;
  }
  .adm__navGroup:first-child .adm__navGroupTitle {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .adm__navItem { flex: none; white-space: nowrap; }
  .adm__navLabel { overflow-wrap: normal; }
  /* The inset rule reads as a stray tick when the items sit side by side. */
  .adm__navItem.is-active::before { display: none; }
}

/* ── Confirm modal ─────────────────────────────────────────────────────────
   Replaces window.confirm() everywhere in the dashboard with something that
   matches the site instead of a native browser dialog. */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: modalFade var(--mid) var(--ease);
}

.modal__box {
  position: relative;
  width: min(420px, 100%);
  padding: 1.6rem;
  border: 1px solid var(--line-red);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(139, 0, 0, .22), transparent 62%),
    var(--black-2);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85);
  animation: modalPop var(--mid) var(--ease);
}

.modal__title {
  margin-bottom: .6rem;
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
[lang='ar'] .modal__title { font-family: 'Cairo', 'Oswald', sans-serif; }

.modal__body { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); white-space: pre-line; }
.modal__actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.4rem; }

/* The prompt field — shown only when the dialog is asking for a value. */
.modal__field { display: grid; gap: .4rem; margin-top: 1.1rem; }
.modal__field[hidden] { display: none; }
.modal__field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.modal__field input[aria-invalid='true'] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 92, 99, .16); }

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__box { animation: none !important; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   404 — page not found
   ═══════════════════════════════════════════════════════════════════════════ */
.nf {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--black-red) 0%, transparent 60%),
    var(--bg);
}
.nf__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: .9rem;
  padding: clamp(2rem, 6vw, 3rem);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
}
.nf__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
  color: var(--ink);
}
.nf__brand strong {
  display: block;
  font-family: Anton, Oswald, sans-serif;
  font-size: 1rem;
  letter-spacing: .06em;
}
.nf__brand small {
  display: block;
  font-size: .62rem;
  letter-spacing: .34em;
  color: var(--ink-dim);
}
.nf__code {
  font-family: Anton, Oswald, sans-serif;
  font-size: clamp(3.6rem, 14vw, 5.5rem);
  line-height: 1;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-red);
}
.nf__title { font-size: clamp(1.25rem, 4vw, 1.6rem); font-weight: 700; color: var(--ink); }
.nf__lead  { font-size: .92rem; line-height: 1.7; color: var(--ink-soft); max-width: 38ch; }
.nf__path {
  max-width: 100%;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  color: var(--ink-dim);
  direction: ltr;
  overflow-wrap: anywhere;
}
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Toasts
   ─────────────────────────────────────────────────────────────────────────
   Anchored to the bottom inline-end corner so the stack never covers the
   navigation or the primary action of a panel, and grows upward so a new
   message never displaces the one being read.
   ═══════════════════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed;
  z-index: 200;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(24rem, calc(100vw - 2rem));
  /* The region spans a corner but must not swallow clicks meant for the page
     behind it; each toast re-enables pointer events for itself. */
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .7rem;
  padding: .85rem .95rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-dim);
  border-radius: var(--r-md);
  background: var(--glass-strong);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }

.toast__icon { width: 18px; height: 18px; margin-top: .1rem; color: var(--ink-dim); }
.toast__text {
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.toast__close {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.toast__close:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }

.toast--success { border-inline-start-color: var(--success); }
.toast--success .toast__icon { color: var(--success-light); }
.toast--error   { border-inline-start-color: var(--danger); }
.toast--error   .toast__icon { color: var(--danger-light); }
.toast--warning { border-inline-start-color: #f0b429; }
.toast--warning .toast__icon { color: #f6c85f; }
.toast--info    { border-inline-start-color: var(--accent); }
.toast--info    .toast__icon { color: var(--accent); }

@media (max-width: 560px) {
  .toasts {
    inset-inline: .75rem;
    width: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Button states
   ═══════════════════════════════════════════════════════════════════════════ */

/* A disabled control looked identical to a live one, so a guarded action read
   as "nothing happened". It is now visibly out of reach and stops lifting. */
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(.5);
}
.btn:disabled:hover,
.btn[aria-disabled='true']:hover { transform: none; box-shadow: none; }
.btn:disabled:active { transform: none; }

/* is-busy already hides the label behind a spinner; it must not also read as
   disabled-and-forgotten, so it keeps full contrast. */
.btn.is-busy { opacity: 1; filter: none; cursor: progress; }

/* Danger buttons lifted on hover everywhere except here — the odd one out. */
.btn--danger:hover { transform: translateY(-2px); border-color: rgba(227, 27, 35, .7); }

/* ═══════════════════════════════════════════════════════════════════════════
   Skeletons
   ─────────────────────────────────────────────────────────────────────────
   A shared shimmer for content that is on its way. Sized by the caller, so a
   skeleton can stand in for a row, a card or a block of text.
   ═══════════════════════════════════════════════════════════════════════════ */
.skel {
  --skel-h: 1rem;
  height: var(--skel-h);
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .04) 25%,
    rgba(255, 255, 255, .09) 37%,
    rgba(255, 255, 255, .04) 63%
  );
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease infinite;
}
.skel--row   { --skel-h: 2.6rem; }
.skel--card  { --skel-h: 7rem; border-radius: var(--r-md); }
.skel--title { --skel-h: 1.15rem; width: 40%; }

.skelstack { display: grid; gap: .6rem; }

/* Announced to assistive technology, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: rgba(255, 255, 255, .06); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Records, pills, chips — applications and site control
   ═══════════════════════════════════════════════════════════════════════════ */

/* One row of a list that is more than a label and a value: an opening, an
   application, an account. Card and row at once, so it stays readable on a
   phone without a table's horizontal scroll. */
.adm__record {
  display: grid;
  gap: .6rem;
  padding: 1rem 1.1rem;
  margin-bottom: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .45);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.adm__record:hover { border-color: rgba(255, 255, 255, .16); }

.adm__recordHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.adm__recordTitle { display: grid; gap: .2rem; min-width: 0; }
.adm__recordTitle strong { font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }
.adm__recordMeta { font-size: .78rem; color: var(--ink-dim); overflow-wrap: anywhere; }

/* State pill — the one place colour carries meaning on its own, so each tone
   also has a distinct label next to it rather than colour alone. */
.adm__pill {
  flex: none;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.adm__pill--ok   { border-color: rgba(34, 197, 94, .4);  color: var(--success-light); background: rgba(34, 197, 94, .1); }
.adm__pill--warn { border-color: rgba(240, 180, 41, .4); color: #f6c85f;              background: rgba(240, 180, 41, .1); }
.adm__pill--bad  { border-color: rgba(255, 92, 99, .4);  color: var(--danger-light);  background: rgba(255, 92, 99, .1); }
.adm__pill--off  { color: var(--ink-dim); background: rgba(255, 255, 255, .03); }

/* Filter chips */
.adm__filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0; }
.adm__chip {
  padding: .38rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.adm__chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .18); }
.adm__chip.is-active {
  background: rgba(227, 27, 35, .18);
  border-color: var(--line-red);
  color: var(--white);
}

/* A row of the form-field builder. Collapses to a stack on narrow screens
   rather than forcing the panel to scroll sideways. */
.adm__fieldRow {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) auto auto;
  gap: .5rem;
  align-items: center;
  padding: .6rem;
  margin-bottom: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, .28);
}
.adm__fieldRow [data-role="options"] { grid-column: 1 / -1; }
.adm__fieldRow [data-role="options"][hidden] { display: none; }

@media (max-width: 780px) {
  .adm__fieldRow { grid-template-columns: 1fr; }
  .adm__fieldRow [data-role="options"] { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .adm__record, .adm__chip { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Control — stores and permissions
   ═══════════════════════════════════════════════════════════════════════════ */

/* Panel title with its main action on the opposite side. */
.adm__panelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.adm__panelHead .panel__title { margin-bottom: .35rem; }
.adm__panelHead > .btn { flex: none; }

/* Stores */
.adm__storeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
}
.adm__storeItem {
  display: grid;
  align-content: start;
  gap: .65rem;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(5, 5, 5, .45);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.adm__storeItem:hover { border-color: var(--line-red); transform: translateY(-2px); }
.adm__storeItem .panel__actions { margin-top: .1rem; }
.adm__storeHead { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.adm__storeEmoji {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  font-size: 1.2rem;
}
.adm__storeFacts { display: flex; flex-wrap: wrap; gap: .35rem; }
.adm__storeDesc {
  margin: 0;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.adm__storeForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm__storeForm .field[hidden] { display: none; }
.adm__storeWide { grid-column: 1 / -1; }

/* Permissions */
.adm__permGroup {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(5, 5, 5, .45);
}
.adm__permGroupTitle {
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
}
.adm__permRow {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: center;
  padding: .75rem 0;
  border-top: 1px solid var(--line);
}
.adm__permGroupTitle + .adm__permRow { border-top: 0; }
.adm__permLabel { display: grid; gap: .2rem; min-width: 0; }
.adm__permLabel strong { font-size: .88rem; color: var(--ink); }
.adm__permKey { font-size: .68rem; color: var(--ink-dim); direction: ltr; justify-self: start; }
.adm__permChips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.adm__roleChip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .35rem .25rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  font-size: .78rem;
  color: var(--ink);
}
.adm__roleChip.is-locked { padding-inline-end: .7rem; border-style: dashed; color: var(--ink-soft); }
.adm__roleDot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.adm__roleRemove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--ink-soft);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.adm__roleRemove:hover { background: var(--accent); color: var(--white); }
.adm select.input.adm__permPicker { width: auto; min-width: 150px; padding-block: .3rem; font-size: .78rem; }

@media (max-width: 780px) {
  .adm__storeForm { grid-template-columns: 1fr; }
  .adm__permRow { grid-template-columns: 1fr; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .adm__storeItem { transition: none !important; }
  .adm__storeItem:hover { transform: none; }
}