/* NEXA sign-in gate (X-style) — js/auth-gate.js adds .nxg to #authScreen.
   Grid: 4px. Buttons: 48px tall on touch, 44px with a mouse; full pill. Sheet: 600px modal on desktop,
   full-screen sheet on phones. Every form inside the sheet is the original one, untouched. */

/* ---------------- NEXA brand, sealed ----------------
   The sign-in screen and the opening splash are NEXA's own front door: they always wear the NEXA
   palette and typeface. A shop's skin/accent (themes.js) is set on <html> and is redefined here,
   so a shop's theme never reaches the outer brand or the logo. */
#authScreen.nxg, #nxSplash {
  --bg: #07060c; --bg-2: #0d0a16; --panel: #100d18; --surface-2: #151120; --surface-3: #1b1628;
  --ink: #f6f4fb; --ink-dim: #9d96b2; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .17);
  --accent: #a855f7; --accent-2: #e879f9; --on-accent: #ffffff; --copper: #a855f7; --copper-2: #e879f9;
  --ink-rule: rgba(255, 255, 255, .55); --shadow: rgba(0, 0, 0, .4);
  --r-ctl: 12px; --r-card: 20px; --btn-bg: var(--ink); --btn-color: var(--bg); --btn-border: 0; --btn-shadow: none;
  --btn-tt: none; --btn-ls: 0; --btn-fw: 700; --h-fw: 700; --h-ls: -.02em; --bg-fx: none;
  --font-body: 'NexaAr', 'Inter', system-ui, sans-serif; --font-head: var(--font-body);
  --nx-grid: rgba(255, 255, 255, .045); --nx-a1: rgba(168, 85, 247, .30); --nx-a2: rgba(232, 121, 249, .16); --nx-a3: rgba(56, 189, 248, .10);
  color-scheme: dark;
  font-family: 'NexaAr', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:root[data-theme="light"] #authScreen.nxg, :root[data-theme="light"] #nxSplash {
  --bg: #f7f5fc; --bg-2: #efeaf9; --panel: #ffffff; --surface-2: #faf9fd; --surface-3: #f2eff9;
  --ink: #14101f; --ink-dim: #6b6385; --line: rgba(30, 16, 70, .10); --line-strong: rgba(30, 16, 70, .2);
  --accent: #7c3aed; --accent-2: #c026d3; --copper: #7c3aed; --copper-2: #c026d3; --ink-rule: rgba(10, 10, 10, .85); --shadow: rgba(30, 16, 70, .12);
  --nx-grid: rgba(40, 20, 90, .06); --nx-a1: rgba(124, 58, 237, .18); --nx-a2: rgba(192, 38, 211, .10); --nx-a3: rgba(14, 165, 233, .08);
  color-scheme: light;
}
[dir="ltr"] #authScreen.nxg { font-family: 'Inter', 'NexaAr', system-ui, -apple-system, 'Segoe UI', sans-serif; }

#authScreen.nxg {
  --g-ink: var(--ink);
  --g-dim: var(--ink-dim);
  --g-line: var(--line-strong);
  --g-accent: var(--accent);
  --g-sheet: var(--panel);
  --g-ease: cubic-bezier(.32, .72, 0, 1);
  position: relative; isolation: isolate; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
}
/* signed in: the gate is gone for good (display:flex above used to beat the [hidden] attribute) */
#authScreen[hidden], #authScreen.nxg[hidden] { display: none !important; }

/* background: deep field, aurora light and a fading precision grid (no dots) */
#authScreen.nxg::before, #authScreen.nxg::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#authScreen.nxg::before {
  background:
    radial-gradient(60% 50% at 82% -6%, var(--nx-a1), transparent 70%),
    radial-gradient(45% 40% at 8% 4%, var(--nx-a2), transparent 70%),
    radial-gradient(50% 45% at 50% 112%, var(--nx-a3), transparent 70%),
    var(--bg);
}
#authScreen.nxg::after {
  background:
    linear-gradient(var(--nx-grid) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--nx-grid) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
          mask: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
}
body:has(#authScreen:not([hidden])) .nx-aurora,
body:has(#authScreen:not([hidden])) > .grain { display: none !important; }

/* top bar: same buttons, quieter glass */
#authScreen.nxg .topbar { position: relative; z-index: 2; }
#authScreen.nxg .topbar .pill-btn {
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none; border-radius: 999px;
}
#authScreen.nxg .topbar .pill-btn:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 9%, transparent); }
#authScreen.nxg .topbar .pill-btn svg { fill: currentColor; }
#authScreen.nxg .site-footer { position: relative; z-index: 1; }
#authScreen.nxg .dev-gate { color: var(--ink-dim); border-bottom-color: var(--line); }
#authScreen.nxg .version-badge { color: var(--ink-dim); background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* the old two-column pitch steps aside; the gate is the page */
#authScreen.nxg .pitch { display: none !important; }
#authScreen.nxg .topbar .brand { visibility: hidden; }
#authScreen.nxg #landingInstallBtn { display: none !important; } /* lives in the get-the-app sheet now */
#authScreen.nxg .stage {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; justify-items: center;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 8px 24px 32px; gap: 0;
}

/* ---------------- gate ---------------- */
.nx-gate { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.nx-gate-body { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: stretch; text-align: start; }
.nx-gate-logo-sm { display: none; }

/* the mark: logo dead-centre, a fast light orbiting it, a still track ring and a soft core glow.
   Every layer sits in the same grid cell, so they share one exact centre at any size. */
.nx-gate-mark {
  position: relative; display: grid; place-items: center; justify-self: start;
  width: 108px; aspect-ratio: 1; margin: 0 0 28px;
}
.nx-gate-mark > * { grid-area: 1 / 1; }
.nx-gate-core { width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent); filter: blur(10px); animation: nxgBreath 3.2s ease-in-out infinite; }
.nx-gate-track { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nx-gate-orbit {
  width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--accent) 35%, transparent) 78%, var(--accent-2) 96%, #fff 99.4%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: nxgOrbit 2.6s linear infinite; will-change: transform;
}
.nx-gate-orbit--b {
  width: 82%; height: 82%; opacity: .55;
  background: conic-gradient(from 180deg, transparent 0 70%, color-mix(in srgb, var(--accent) 70%, transparent) 100%);
  animation-duration: 4.2s; animation-direction: reverse;
}
/* the N artwork sits up-left inside its own square canvas (its visual centre is at 46%/44.5%),
   so it is nudged by that amount to land on the exact centre of the rings */
.nx-gate-mark img, .nx-splash-logo img {
  translate: 3.7% 5.5%;
}
.nx-gate-mark img {
  position: relative; z-index: 1; width: 58%; height: 58%; object-fit: contain; display: block;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent));
}
@keyframes nxgOrbit { to { transform: rotate(360deg); } }
@keyframes nxgBreath { 50% { opacity: .55; transform: scale(.92); } }

.nx-gate-title {
  margin: 0; font-weight: 800; color: var(--g-ink);
  font-size: clamp(2.5rem, 11vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;
  background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 62%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* gradient text paints only inside the box: room for the dots under ي / ف so they are not cut off */
  padding-block: .12em .32em; margin-block: -.12em -.32em;
}
:root[lang="ar"] .nx-gate-title { letter-spacing: 0; line-height: 1.24; }
.nx-gate-lede { margin: 20px 0 28px; font-size: 1.4rem; font-weight: 700; line-height: 1.3; color: var(--g-ink); }
.nx-gate-actions { display: flex; flex-direction: column; gap: 12px; }

/* buttons */
.nxg-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 0 24px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .98rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, box-shadow .2s ease-out, transform .16s var(--g-ease, ease);
}
.nxg-btn:active { transform: scale(.97); }
.nxg-btn:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 3px; }
.nxg-ico { width: 20px; height: 20px; flex: none; }
.nxg-btn--solid { background: var(--g-ink); color: var(--bg); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 45%, transparent); }
.nxg-btn--solid:hover { background: color-mix(in srgb, var(--g-ink) 90%, var(--bg)); }
.nxg-btn--line { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--g-ink); border-color: var(--line-strong); }
.nxg-btn--line:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
/* "open a new shop": the brand gradient as a hairline, filled on hover */
.nxg-btn--accent {
  color: var(--ink); border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
}
.nxg-btn--accent:hover {
  color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) padding-box, linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}

.nxg-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 0; color: var(--g-dim); font-size: .9rem; line-height: 20px; }
.nxg-or::before, .nxg-or::after { content: ""; height: 1px; background: var(--line); }
.nxg-legal { text-wrap: balance; margin: 2px 0 0; font-size: .78rem; line-height: 1.6; color: var(--g-dim); }
.nxg-legal a, .ticket .legal-note a { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); text-decoration: none; white-space: nowrap; }
.nxg-legal a:hover, .ticket .legal-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nxg-new-lead { margin: 32px 0 6px; font-size: 1.04rem; font-weight: 700; color: var(--g-ink); }

/* desktop: the mark takes one half, the words the other */
@media (min-width: 960px) {
  #authScreen.nxg .stage { padding: 0 40px 24px; }
  .nx-gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: calc(100dvh - 160px); }
  .nx-gate-mark { width: min(34vw, 400px); margin: 0; justify-self: center; }
  .nx-gate-mark img { width: 56%; height: 56%; filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--accent) 35%, transparent)); }
  .nx-gate-orbit { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
  .nx-gate-core { filter: blur(40px); }
  .nx-gate-body { justify-self: start; max-width: 560px; }
  .nx-gate-title { font-size: clamp(3.4rem, 5.2vw, 4.6rem); }
  .nx-gate-lede { margin: 40px 0 28px; font-size: 1.9rem; }
  .nx-gate-actions { width: 320px; }
  .nxg-btn { min-height: 46px; font-size: .94rem; }
}

/* ---------------- sheet (the original sign-in card) ---------------- */
html #authScreen.nxg .auth-panel {
  position: fixed; inset: 0; z-index: 80; width: auto; order: 0;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 10, 18, .72);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease-out, visibility 0s linear .2s;
}
html #authScreen.nxg.is-sheet .auth-panel { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease-out; }
html #authScreen.nxg .auth-panel .ticket {
  width: 100%; max-width: 600px; max-height: min(92dvh, 760px); overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box; margin: 0; padding: 0 clamp(20px, 8vw, 80px) 36px;
  border-radius: 20px; border: 1px solid var(--line);
  background: var(--g-sheet) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 24px 80px -20px rgba(0, 0, 0, .55);
  transform: translateY(12px) scale(.98); animation: none;
  transition: transform .32s var(--g-ease);
}
html #authScreen.nxg.is-sheet .auth-panel .ticket { transform: none; }
html #authScreen.nxg .auth-panel .ticket::after,
html #authScreen.nxg .ticket > .nx-glow,
html #authScreen.nxg .ticket .auth-brand,
html #authScreen.nxg .ticket .tabs { display: none !important; }

.nx-sheet-head {
  position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
  height: 56px; margin: 0 calc(-1 * clamp(20px, 8vw, 80px)); padding: 0 12px;
  background: var(--g-sheet);
}
.nx-sheet-x {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--g-ink); cursor: pointer; padding: 0;
  transition: background-color .16s ease-out;
}
.nx-sheet-x:hover { background: color-mix(in srgb, var(--g-ink) 9%, transparent); }
.nx-sheet-x:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.nx-sheet-x[hidden] { display: block !important; visibility: hidden; }
.nx-sheet-x .i-back { display: none; }
.nx-sheet-x.is-back .i-x { display: none; }
.nx-sheet-x.is-back .i-back { display: block; }
:root[dir="rtl"] .nx-sheet-x .i-back { transform: scaleX(-1); }
.nx-sheet-logo { justify-self: center; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; }
.nx-sheet-title { margin: 20px 0 28px; font-size: 1.9rem; font-weight: 700; line-height: 1.2; color: var(--g-ink); text-wrap: balance; }

/* forms inside the sheet: X's rhythm (56px fields, pill actions), same IDs and handlers */
html #authScreen.nxg .ticket .panel-form { gap: 8px; }
html #authScreen.nxg .ticket .panel-form label { margin-top: 8px; font-size: .84rem; color: var(--g-dim); }
html #authScreen.nxg .ticket .panel-form input:not([type=checkbox]):not([type=radio]),
html #authScreen.nxg .ticket .panel-form select { min-height: 52px; border-radius: 10px; font-size: 1rem; }
html #authScreen.nxg .ticket button.primary-btn,
html #authScreen.nxg .ticket .shimmer-btn {
  min-height: 52px; margin-top: 16px; border-radius: 999px; border: 0;
  background: var(--g-ink) !important; color: var(--bg) !important; box-shadow: none !important;
  font-size: 1rem; font-weight: 700;
}
html #authScreen.nxg .ticket button.primary-btn::after { content: none; }
html #authScreen.nxg .ticket button.primary-btn:hover, html #authScreen.nxg .ticket .shimmer-btn:hover { transform: none; background: color-mix(in srgb, var(--g-ink) 88%, var(--bg)) !important; }
html #authScreen.nxg .ticket .google-btn { min-height: 48px; border-radius: 999px; }
html #authScreen.nxg .ticket .ghost-btn { border-radius: 999px; min-height: 44px; }
html #authScreen.nxg .ticket .forgot-link { align-self: flex-start; }
html #authScreen.nxg .ticket .phone-row, html #authScreen.nxg .ticket .phone-field-row { gap: 8px; }

/* the "get the app" sheet */
.nx-app-pane { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.nx-app-pane[hidden] { display: none; }
html #authScreen.nxg .ticket.is-app .panel-form { display: none !important; }
.nx-app-lede { margin: -12px 0 12px; color: var(--g-dim); font-size: 1rem; line-height: 1.6; }
.nx-app-qr { align-self: center; width: 184px; height: 184px; padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.nx-app-qr svg { display: block; width: 100%; height: 100%; }
.nx-app-qr:empty { display: none; }
.nx-app-qr-cap { margin: 0 0 12px; text-align: center; font-size: .82rem; color: var(--g-dim); }
.nx-app-facts { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.nx-app-facts li { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--g-ink); }
.nx-app-facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--g-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-accent) 18%, transparent); }

.nx-sheet-switch { margin: 28px 0 0; font-size: .92rem; color: var(--g-dim); }
.nx-sheet-switch[hidden] { display: none; }
.nx-sheet-switch .link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: color-mix(in srgb, var(--g-accent) 78%, var(--g-ink)); cursor: pointer; }
.nx-sheet-switch .link-btn:hover { text-decoration: underline; }
html #authScreen.nxg .ticket .form-error { margin-top: 12px; }

/* footer of each form: Google as an outline button (the solid one is the main action), then one
   centred block of notes, the legal line kept whole, and the sign-in / sign-up switch under a hairline */
html #authScreen.nxg .ticket .auth-divider { margin: 20px 0 12px; }
html #authScreen.nxg .ticket .google-btn {
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; font-weight: 700;
}
html #authScreen.nxg .ticket .google-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
html #authScreen.nxg .ticket .form-note { text-align: center; margin: 14px 0 0; font-size: .8rem; line-height: 1.7; color: var(--ink-dim); text-wrap: pretty; }
html #authScreen.nxg .ticket .form-note + .legal-note { margin-top: 4px; }
html #authScreen.nxg .ticket .legal-note { font-size: .78rem; }
html #authScreen.nxg .ticket .nx-sheet-switch { text-align: center; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }

html.nxg-lock, html.nxg-lock body { overflow: hidden; }

/* phones: the sheet is a full screen that slides up, like a native screen */
@media (max-width: 700px) {
  html #authScreen.nxg .auth-panel { padding: 0; align-items: stretch; background: transparent; transition: visibility 0s linear .42s; }
  html #authScreen.nxg.is-sheet .auth-panel { transition: none; }
  html #authScreen.nxg .auth-panel .ticket {
    max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; box-shadow: none;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .42s var(--g-ease);
  }
  html #authScreen.nxg .auth-panel { opacity: 1; }
  .nx-sheet-head { margin: 0 -20px; padding: 0 8px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
  .nx-sheet-title { font-size: 1.6rem; margin: 12px 0 24px; }
  .nx-app-qr, .nx-app-qr-cap { display: none; }
}

/* the Android app is the app: no "get the app" button inside it */
html.is-native-app #authScreen.nxg .nxg-play,
html.is-native-app #authScreen.nxg .nxg-or { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .nx-gate-orbit, .nx-gate-core { animation: none; }
  html #authScreen.nxg .auth-panel .ticket, html #authScreen.nxg .auth-panel { transition-duration: 0s !important; }
  .nxg-btn:active { transform: none; }
}

/* ---------------- footer (X-style link rows) ---------------- */
#authScreen.nxg .site-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
.nxg-foot { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 560px; margin: 0 auto 2px; text-align: center; }
.nxg-foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; row-gap: 4px; font-size: .7rem; line-height: 1.6; }
.nxg-foot-row > * {
  display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
  color: color-mix(in srgb, var(--g-dim) 85%, transparent); text-decoration: none; white-space: nowrap;
}
.nxg-foot-row > *:hover { color: var(--g-ink); }
.nxg-foot-row > *:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; border-radius: 4px; }
.nxg-foot-row > *::after { content: ""; width: 2px; height: 2px; border-radius: 50%; margin: 0 6px; background: color-mix(in srgb, var(--g-dim) 55%, transparent); }
.nxg-foot-row > *:last-child::after, .nxg-foot-row > .eol::after { display: none; }
.nxg-foot-copy { margin: 2px 0 0; font-size: .68rem; color: color-mix(in srgb, var(--g-dim) 75%, transparent); }
#authScreen.nxg .site-footer .dev-gate { font-size: .66rem; opacity: .7; }
#authScreen.nxg .site-footer .version-badge { font-size: .62rem; padding: 2px 7px; }

/* about / help sheets */
.nx-info-pane { display: flex; flex-direction: column; gap: 12px; color: var(--g-ink); font-size: .98rem; line-height: 1.7; }
.nx-info-pane[hidden] { display: none; }
.nx-info-pane p { margin: 0; }
.nx-info-pane p:first-child { margin-top: -12px; color: var(--g-dim); }
.nx-info-pane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nx-info-pane li { display: flex; align-items: center; gap: 12px; }
.nx-info-pane li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--g-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-accent) 18%, transparent); }
.nx-help-del { align-self: center; margin-top: 8px; font-size: .84rem; color: var(--danger, #e5484d); text-decoration: none; }
.nx-help-del:hover { text-decoration: underline; }

/* footer: links, copyright and the developer credit, one centred column */
#authScreen.nxg .site-footer { flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; text-align: center; position: static; }
.nxg-credit { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nxg-credit .version-badge { margin: 0; }