/* ============================================================
   Starship Simulator — Core Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Rajdhani:wght@400;500;600;700&family=Barlow:wght@300;400;500;600&display=swap');

/* Eurostile Extended Black is reserved for big bold card headings (h1, h2)
   to match the in-game logo. UI body text uses Rajdhani — better scaling at
   small sizes. Regular Eurostile face is preserved for future use. */
@font-face {
  font-family: 'Eurostile';
  src: url('/assets/fonts/Eurostile.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eurostile Ext';
  src: url('/assets/fonts/EurostileExtendedBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Variables ---- */
:root {
  --bg:       #060a14;
  --bg2:      #0b0f1a;
  --surface:  #0f1726;
  --surface2: #121e30;
  --text:     #dbe7ff;
  --muted:    #8aa0c8;
  --line:     #1e2d4a;
  --accent:   #6ba8ff;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p { color: var(--muted); }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8f0ff;
}
/* Michroma is the free stand-in for Eurostile Bold Extended (the game's logo
   font). Used for big white display headings only — UI faces stay on Rajdhani. */
h1, h2 {
  font-family: 'Eurostile Ext', 'Michroma', 'Rajdhani', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.15;
}
h3, h4 {
  font-family: 'Rajdhani', system-ui, sans-serif;
}
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
.muted { color: var(--muted); }

/* ---- Layout ---- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* Ambient page background — static SVG fractal-noise tinted accent blue,
   gently drifted with a CSS transform. The noise itself is computed once;
   only compositing happens per frame, so this is nearly free at runtime. */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.15;
}
.bg-noise svg {
  position: absolute;
  /* Oversized so translate up to ~10% never reveals the SVG edge. */
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  animation: bg-noise-drift 45s ease-in-out infinite;
  will-change: transform;
}
@keyframes bg-noise-drift {
  0%   { transform: translate3d(0,   0,   0); }
  33%  { transform: translate3d(-7%, -4%, 0); }
  66%  { transform: translate3d(-3%, -8%, 0); }
  100% { transform: translate3d(0,   0,   0); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-noise svg { animation: none; }
}

/* ---- Pixel-bug swarm — bug tracker pages only ----
   Each bug is a tiny SVG composed of <rect> "pixels" in two-tone accent blue.
   They drift across the viewport with simple translate animations. The swarm
   sits above the noise (z-index 0) but below content (which gets z-index 1
   via .topbar / .unos-banner / .page-content / footer through default
   stacking). Pointer events disabled so they can never block clicks. */
.bug-swarm {
  position: fixed;
  inset: 0;
  z-index: -1;        /* behind cards, alongside noise; noise is in DOM first so swarm paints on top of it */
  pointer-events: none;
  overflow: hidden;
}
.bug-swarm template { display: none; }
.bug {
  position: absolute;
  display: block;
  filter: drop-shadow(0 0 3px rgba(107,168,255,0.20));
}
.bug svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

/* Two beetle species, four instances, ~2x previous size. */
.bug--round  { width: 72px; height: 64px; }
.bug--scarab { width: 64px; height: 72px; }

.bug--1 {
  top: 14%;
  animation: bug-march-right 130s linear infinite;
}
.bug--2 {
  left: 8%;
  animation: bug-drift-down 110s linear infinite;
  animation-delay: -30s;
}
.bug--3 {
  top: 58%;
  animation: bug-march-left 145s linear infinite;
  animation-delay: -50s;
}
.bug--4 {
  bottom: 11%;
  animation: bug-march-right 165s linear infinite;
  animation-delay: -70s;
}

@keyframes bug-march-right {
  0%   { transform: translateX(-60px)              rotate(95deg); }
  50%  { transform: translateX(50vw)               rotate(85deg); }
  100% { transform: translateX(calc(100vw + 60px)) rotate(95deg); }
}
@keyframes bug-march-left {
  0%   { transform: translateX(calc(100vw + 60px)) rotate(-95deg); }
  50%  { transform: translateX(50vw)               rotate(-85deg); }
  100% { transform: translateX(-60px)              rotate(-95deg); }
}
@keyframes bug-drift-down {
  0%   { transform: translateY(-50px)              rotate(170deg); }
  100% { transform: translateY(calc(100vh + 50px)) rotate(190deg); }
}
@keyframes bug-scuttle {
  0%   { transform: translateX(-80px)              rotate(0deg); }
  50%  { transform: translateX(50vw)               rotate(2deg); }
  100% { transform: translateX(calc(100vw + 80px)) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bug-swarm { display: none; }
}

/* ============================================================
   TOP NAV
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 10, 20, 0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.brand { margin-right: auto; line-height: 0; }
.brand img { height: 34px; }

.nav-links { display: flex; align-items: center; }
.nav-links a {
  color: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(107,168,255,0.07); text-decoration: none; }
.nav-links a.active {
  color: #e9f1ff;
  background: rgba(107,168,255,0.1);
  border-color: rgba(107,168,255,0.22);
}
/* Personal-notification glow — currently only fired by unseen ticket
   updates, but designed as a general-purpose flag (modmail etc. can
   OR into the same $dashboardAlert in header.php). Uses the same gold
   as the upvote chevrons and the "UPDATED" pill on the dashboard. */
.nav-links a.nav-alert,
.nav-links a.nav-alert.active {
  color: #ffd24d;
  border-color: rgba(255,210,77,0.35);
  text-shadow: 0 0 6px rgba(255,210,77,0.55);
  animation: nav-alert-pulse 2.4s ease-in-out infinite;
}
.nav-links a.nav-alert:hover {
  color: #ffe07a;
  background: rgba(255,210,77,0.08);
  border-color: rgba(255,210,77,0.55);
  text-shadow: 0 0 10px rgba(255,210,77,0.75);
}
@keyframes nav-alert-pulse {
  0%, 100% { text-shadow: 0 0 4px  rgba(255,210,77,0.40); }
  50%      { text-shadow: 0 0 10px rgba(255,210,77,0.75); }
}

.nav-divider { width: 1px; height: 22px; background: var(--line); margin: 0 0.6rem; flex-shrink: 0; }

.nav-social { display: flex; align-items: center; gap: 0.1rem; }
.nav-social a {
  color: var(--muted);
  padding: 0.45rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color 0.18s, background 0.18s;
  line-height: 0;
}
.nav-social a:hover { color: var(--accent); background: rgba(107,168,255,0.08); }
.nav-social svg { width: 17px; height: 17px; fill: currentColor; }

.btn-nav {
  color: var(--accent) !important;
  border: 1px solid rgba(107,168,255,0.35) !important;
  padding: 0.38rem 0.9rem !important;
}
.btn-nav:hover {
  background: rgba(107,168,255,0.1) !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #031226;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1.7rem;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
  white-space: nowrap;
}
.btn-primary:hover { background: #8dc0ff; transform: translateY(-1px); text-decoration: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--accent);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(107,168,255,0.4);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--accent); background: rgba(107,168,255,0.08); text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #04080f;
  overflow: hidden;
  margin-top: -64px; /* sit beneath the sticky 64px topbar */
}
.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Lock the iframe to viewport height; let width follow the 16:9 ratio.
   On ultrawide monitors this leaves blank space at the sides — preferred to
   over-cropping the top/bottom of the footage. */
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100vh;
  width: 177.78vh; /* 16:9 of viewport height */
  transform: translate(-50%, -50%);
  border: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(4,8,16,0.25) 0%, rgba(4,8,16,0.7) 80%),
    linear-gradient(180deg, rgba(4,8,16,0.55) 0%, rgba(4,8,16,0.35) 45%, rgba(6,10,20,0.98) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 1.5rem;
  max-width: 720px;
}
.hero-logo { height: 96px; margin: 0 auto 1.75rem; }
.hero p { font-size: 1.1rem; margin: 0 auto 2rem; max-width: 560px; color: #cfddf5; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-chevron {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(107,168,255,0.35);
  color: rgba(219,231,255,0.85);
  background: rgba(6,10,20,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  animation: chevron-bounce 2.4s ease-in-out infinite;
}
.hero-chevron:hover { color: var(--accent); border-color: var(--accent); background: rgba(107,168,255,0.12); text-decoration: none; }
.hero-chevron svg { width: 22px; height: 22px; }
@keyframes chevron-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chevron { animation: none; transform: translateX(-50%); }
}

/* ============================================================
   FEATURE SECTIONS
   ============================================================ */
.feature-section {
  padding: 6rem 0;
}
.feature-section.alt { background: var(--bg2); }

/* Glowing thin divider between sections. Linear gradient on a 1px strip
   reads as a hairline that brightens toward the centre, matching the look
   of the line above the footer. */
.section-divider {
  position: relative;
}
.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0)    0%,
    rgba(107,168,255,0.55) 50%,
    rgba(107,168,255,0)    100%);
  pointer-events: none;
}
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { color: #fff; margin-bottom: 0.6rem; }
.section-header p { max-width: 580px; margin: 0 auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.feature-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 1;
}
.feature-card:hover { border-color: rgba(107,168,255,0.35); transform: translateY(-3px); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.feature-card-body { padding: 1.2rem 1.4rem 1.5rem; }
.feature-card h3 { color: #dceeff; margin-bottom: 0.4rem; font-size: 1.05rem; }
.feature-card p { font-size: 0.9rem; line-height: 1.55; }

/* ============================================================
   ROLES SECTION
   ============================================================ */
.roles-section {
  padding: 6rem 0;
  background: var(--bg);
}
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  counter-reset: role;
}
.role-card {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem 1.25rem 1.25rem;
  counter-increment: role;
  transition: border-color 0.2s, transform 0.2s;
}
.role-card::before {
  content: counter(role, decimal-leading-zero);
  display: block;
  font-family: 'Michroma', 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 0.55rem;
}
.role-card:hover { border-color: rgba(107,168,255,0.35); transform: translateY(-2px); }
.role-card h3 { color: #e8f0ff; font-size: 0.95rem; margin-bottom: 0.4rem; letter-spacing: 0.05em; }
.role-card p { font-size: 0.85rem; line-height: 1.5; }

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero {
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 0.6rem; }
.page-hero p { max-width: 580px; margin: 0 auto; }

.page-content { max-width: min(75vw, 1500px); margin: 0 auto; padding: 3rem 1.5rem 4rem; }
@media (max-width: 900px) { .page-content { max-width: 100%; } }

/* Banner-inner inherits .container's 1100px cap; widen it to match page-content
   so the heading and the panels below sit on the same vertical lines. */
.unos-banner .container,
.unos-banner__inner { max-width: min(75vw, 1500px); }
@media (max-width: 900px) {
  .unos-banner .container,
  .unos-banner__inner { max-width: 100%; }
}

/* Multi-column panel layout. Pages can wrap two unos-panels in a div with this
   class to place them side-by-side; collapses to a single column on narrow
   viewports. Inner panels' bottom margin is suppressed because the grid gap
   handles spacing. */
.unos-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.unos-cols-2 > .unos-panel {
  margin-bottom: 0;
  /* Make the inner body fill the row height so the dark background extends
     to match the tallest sibling instead of stopping at content. */
  display: flex;
  flex-direction: column;
}
.unos-cols-2 > .unos-panel > .unos-panel__body { flex: 1; }
@media (max-width: 900px) {
  .unos-cols-2 { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-category { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; font-weight: 700; margin: 2.5rem 0 0.6rem; }
.faq-category:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { color: #d4e4ff; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 0.975rem; letter-spacing: 0; text-transform: none; margin-bottom: 0.5rem; }
.faq-item p { font-size: 0.925rem; }
.faq-item a { color: var(--accent); }
.faq-item ul { margin: 0.5rem 0 0 1.2rem; }
.faq-item li { color: var(--muted); font-size: 0.925rem; margin-bottom: 0.25rem; }

/* ============================================================
   FUNDING
   ============================================================ */
.funding-intro { font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; }
.stats-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.stat-box {
  flex: 1;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.stat-number { font-family: 'Rajdhani', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.3rem; }
.stat-label { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.05em; }
.funding-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.platform-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.platform-card h3 { color: #ddeeff; font-size: 1rem; margin: 0; }
.platform-card p { font-size: 0.875rem; margin: 0; }
.platform-card .btn-primary, .platform-card .btn-secondary { margin-top: 0.5rem; }
.content-block { margin-bottom: 2.5rem; }
.content-block h2 { margin-bottom: 0.75rem; font-size: 1.5rem; }
.content-block p { margin-bottom: 0.75rem; }
.content-block p:last-child { margin-bottom: 0; }

/* ============================================================
   PRESS
   ============================================================ */
.info-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.info-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; }
.info-table td:first-child { color: var(--muted); width: 150px; padding-right: 1rem; }
.info-table td:last-child { color: var(--text); }
.info-table tr:last-child td { border-bottom: none; }

.features-list { list-style: none; margin-top: 0.75rem; }
.features-list li { border-bottom: 1px solid var(--line); padding: 0.7rem 0 0.7rem 1.4rem; color: var(--muted); font-size: 0.925rem; position: relative; }
.features-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
.features-list li:last-child { border-bottom: none; }

.logo-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.logo-item {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.logo-item .logo-preview { padding: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 90px; }
.logo-item .logo-preview.dark-bg { background: #111; }
.logo-item .logo-preview.light-bg { background: #dde6f5; }
.logo-item img { max-height: 50px; max-width: 160px; object-fit: contain; }
.logo-item .logo-meta { padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.logo-item .logo-meta span { color: var(--muted); font-size: 0.8rem; }

.screenshots-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.screenshot-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.screenshot-item:hover { border-color: rgba(107,168,255,0.3); }
.screenshot-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.screenshot-meta { padding: 0.7rem 0.9rem; display: flex; justify-content: space-between; align-items: center; }
.screenshot-meta span { color: var(--muted); font-size: 0.8rem; }

/* ============================================================
   FORMS (account / register)
   ============================================================ */
.form-wrap { max-width: 560px; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2rem 2rem 2.25rem;
}
.form-card h1 { margin-bottom: 0.4rem; font-size: 1.8rem; }
.form-card > .muted { display: block; margin-bottom: 1.75rem; font-size: 0.9rem; }
label { display: block; margin: 0.9rem 0 0.35rem; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.02em; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid #2a3d60;
  background: #080f1e;
  color: #e7efff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.18s;
}
/* Native select needs a custom chevron since we strip its OS chrome. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236ba8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
select option { background: #0c1426; color: #e7efff; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.input-wrap { position: relative; }
.input-wrap input { padding-right: 2.8rem; }
.pw-toggle {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; font-size: 1rem; padding: 0.25rem 0.4rem; line-height: 1;
}
.pw-toggle:hover { color: var(--text); }
.form-submit { margin-top: 1.25rem; width: 100%; justify-content: center; font-size: 1rem; padding: 0.8rem; }
.form-footer { margin-top: 1.25rem; font-size: 0.875rem; }
.ok  { color: #7ef0a8; }
.bad { color: #ff9a9a; }
.alert { padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error { background: rgba(255,100,100,0.1); border: 1px solid rgba(255,100,100,0.25); color: #ffaaaa; }
.alert-success { background: rgba(100,220,140,0.1); border: 1px solid rgba(100,220,140,0.25); color: #8ef0b0; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.dashboard-card h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.dashboard-list { list-style: none; }
.dashboard-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; display: flex; gap: 0.75rem; }
.dashboard-list li:last-child { border-bottom: none; }
.dashboard-list .dl-key { color: var(--muted); width: 100px; flex-shrink: 0; }
.dashboard-list .dl-val { color: var(--text); }
/* Telemetry rows: wider keys to fit "Total distance travelled" on one line,
   plus a dimmer numeric tone so the X/Y/Z and "ly" labels stand out. */
.dashboard-list--telemetry .dl-key { width: 200px; }
.dashboard-list .dl-num            { color: #a8bce0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--bg2);
  padding: 3.5rem 1.5rem 2rem;
  margin-top: auto;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0)    0%,
    rgba(107,168,255,0.55) 50%,
    rgba(107,168,255,0)    100%);
  pointer-events: none;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand img { height: 28px; margin-bottom: 0.9rem; }
.footer-brand p { font-size: 0.85rem; line-height: 1.65; max-width: 280px; }
.footer-col h4 {
  color: #b4c8e8;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.footer-col a, .footer-col span {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 0.45rem;
  transition: color 0.18s;
  text-decoration: none;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bottom p { color: var(--muted); font-size: 0.8rem; }
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a { color: var(--muted); line-height: 0; padding: 0.3rem; transition: color 0.18s; }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ============================================================
   UNOS COMPONENTS
   In-universe panel system used on the Dashboard. Concentric rounded boxes
   with pill-style headers, data rows, and status pills — language ported
   from the in-game UNOS without the skeuomorphic bevels.
   ============================================================ */

.unos-banner {
  position: relative;
  background: linear-gradient(180deg, #0e1a30 0%, #0a1426 100%);
  padding: 2.4rem 0 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
.unos-banner::before,
.unos-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0)    0%,
    rgba(107,168,255,0.55) 50%,
    rgba(107,168,255,0)    100%);
  pointer-events: none;
}
.unos-banner::before { top: 0; }
.unos-banner::after  { bottom: 0; }
.unos-banner__inner { position: relative; }
.unos-banner__stamp {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 0.6rem;
}
.unos-banner h1 {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
  color: #fff;
}
.unos-banner__sub {
  color: var(--muted);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.unos-banner__sub strong { color: #dbe7ff; font-weight: 600; }

/* ---- Panel ----
   In-game UNOS trick: outer card is the lighter slate at full size, inner
   dark "data box" sits on top with a few px of padding so the lighter colour
   shows through as a thin frame on all four sides, including under the
   header. Both layers share the same corner radius. */
.unos-panel {
  background: linear-gradient(180deg, #243551 0%, #19243d 100%);
  border: 1px solid rgba(107,168,255,0.32);
  border-radius: 14px;
  padding: 2px;
  margin-bottom: 1.5rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 24px rgba(0,0,0,0.28);
}
/* Header sits transparently on top of the lighter outer — no separate pill */
.unos-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.3rem 0.85rem;
  background: transparent;
}
.unos-panel__header h2 {
  font-family: 'Eurostile Ext', 'Michroma', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: #e8f0ff;
  margin: 0;
  text-transform: uppercase;
}
.unos-panel__tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(207,225,255,0.7);
  text-transform: uppercase;
}
/* The "data box" — darker, rounded on all four sides, inset by the panel's
   own 4px padding. Top corners now read against the lighter outer. */
.unos-panel__body {
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
}
.unos-panel__body > p:first-child {
  margin-top: 0.1rem;
}
.unos-panel__body > * + p,
.unos-panel__body > * + form,
.unos-panel__body > * + .unos-list,
.unos-panel__body > * + .my-tickets { margin-top: 1rem; }

/* ---- Sub-panel — used for nested groups inside a panel ---- */
.unos-subpanel {
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.12);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-top: 1rem;
}
.unos-subpanel__title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  opacity: 0.85;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* ---- Data rows: label · dotted leader · value ---- */
.unos-data { list-style: none; padding: 0; margin: 0; }
.unos-data__row {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(107,168,255,0.1);
  font-size: 0.92rem;
}
.unos-data__row:last-child { border-bottom: 0; }
.unos-data__key {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.unos-data__val {
  font-family: 'Rajdhani', sans-serif;
  color: #e0ecff;
  text-align: right;
  letter-spacing: 0.02em;
}
.unos-data__val--mono { font-variant-numeric: tabular-nums; }
/* Hairline between key/value to give the dossier feel */
.unos-data__sep {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,168,255,0.05),
    rgba(107,168,255,0.18),
    rgba(107,168,255,0.05));
  align-self: center;
}

/* ---- Item rows: a wider stack used for devices, vessels, rewards ----
   No top margin on the list itself — body padding handles the gap when the
   list is the first child, and the .unos-panel__body sibling rule above
   adds 1rem when a description paragraph precedes it. */
.unos-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.unos-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  background: #111d34;
  transition: background 0.15s, border-color 0.15s;
}
.unos-list__item:hover {
  background: #182748;
  border-color: rgba(107,168,255,0.45);
}
.unos-list__title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #e8f0ff;
  text-transform: uppercase;
  min-width: 180px;
}
.unos-list__meta {
  flex: 1;
  min-width: 220px;
  font-size: 0.82rem;
  color: var(--muted);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.02em;
}
.unos-list__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* League-table extras: leading rank chip + right-aligned metric value */
.unos-rank {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.85;
  min-width: 2.2rem;
  text-align: left;
}
.unos-list__metric {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  color: #e6f0ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.unos-list__metric small {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35rem;
  font-weight: normal;
}

/* ---- Status pills ---- */
.unos-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Rajdhani caps sit high in the line box — extra top, trim bottom to optically centre */
  padding: 0.3rem 0.6rem 0.14rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
  white-space: nowrap;
}
.unos-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  /* Line-box centre sits below the cap midline in Rajdhani; lift the dot to match */
  transform: translateY(-1px);
}
.unos-status--ok    { color: #7ef0a8; }
.unos-status--warn  { color: #ffce6a; }
.unos-status--fault { color: #ff8a8a; }
.unos-status--idle  { color: #8aa0c8; }

/* ---- UNOS button — flatter, glowing, ditches the bevel ---- */
.unos-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(107,168,255,0.4);
  background: rgba(107,168,255,0.06);
  color: #cfe1ff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.unos-btn:hover {
  border-color: var(--accent);
  background: rgba(107,168,255,0.14);
  color: #fff;
  text-decoration: none;
}
.unos-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #031226;
}
.unos-btn--primary:hover { background: #8dc0ff; color: #031226; }
.unos-btn--danger {
  border-color: rgba(255,138,138,0.45);
  color: #ffb8b8;
  background: rgba(255,138,138,0.06);
}
.unos-btn--danger:hover {
  border-color: #ff8a8a;
  color: #fff;
  background: rgba(255,138,138,0.16);
}

/* ---- UNOS form fields ---- */
.unos-form label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0.85rem 0 0.4rem;
}
.unos-form input[type=password],
.unos-form input[type=text],
.unos-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(107,168,255,0.18);
  background: #060d1c;
  color: #e7efff;
  font-size: 0.95rem;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.02em;
  transition: border-color 0.18s;
}
.unos-form textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.45;
}
.unos-form input:focus,
.unos-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .funding-platforms { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  .hero { min-height: 520px; }
  .hero-logo { height: 64px; }
  .hero p { font-size: 1rem; }
  .screenshots-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .nav-links a { padding: 0.35rem 0.5rem; font-size: 0.78rem; }
}
@media (max-width: 520px) {
  .roles-grid { grid-template-columns: 1fr; }
  .logo-grid { flex-direction: column; }
}

/* ---- Bug tracker list ---- */
.bug-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.bug-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  /* Soft left-edge tint that fades into the row body — colour comes from
     the per-severity --bug-row-tint variable below. Mirrors the in-game
     "Long Range Output" star-list flash. Status still drives the pill
     colour inside the row; the row's tint surfaces severity so a wall
     of tickets shows the worst offenders at a glance. */
  --bug-row-tint: transparent;
  background:
    linear-gradient(to right, var(--bug-row-tint), transparent 140px),
    #111d34;
  transition: background 0.15s, border-color 0.15s;
}
.bug-row:hover {
  background:
    linear-gradient(to right, var(--bug-row-tint), transparent 140px),
    #182748;
  border-color: rgba(107,168,255,0.45);
}
/* Tint palette matches the .bug-severity-- pill colours at the same
   alpha (0.22) the previous per-status tints used — keeps the visual
   weight consistent on the dark row background. */
.bug-row[data-severity="trivial"]  { --bug-row-tint: rgba(138, 160, 200, 0.22); }
.bug-row[data-severity="minor"]    { --bug-row-tint: rgba(214, 177, 106, 0.22); }
.bug-row[data-severity="major"]    { --bug-row-tint: rgba(232, 138,  61, 0.22); }
.bug-row[data-severity="critical"] { --bug-row-tint: rgba(227,  84,  61, 0.22); }
.bug-row[data-severity="blocker"]  { --bug-row-tint: rgba(255,  77, 106, 0.22); }
.bug-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
}
.bug-row__main:hover { text-decoration: none; }
.bug-row__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.bug-row__id {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.85;
}
.bug-row__title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0.92;
  text-transform: uppercase;
}
.bug-row:hover .bug-row__title { opacity: 1; }
.bug-row__meta {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.bug-row__sep { opacity: 0.55; }
.bug-row__metric {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  color: #e6f0ff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
  align-self: center;
}
.bug-row__metric small {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.35rem;
  font-weight: normal;
}

/* Status pill colours: red (New) → green (Resolved) */
.bug-status {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Same optical centring trick as .unos-status */
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.bug-status--new             { color: #ff6363; background: rgba(255, 99,  99, 0.10); }
.bug-status--confirmed       { color: #ff9a3d; background: rgba(255,154,  61, 0.10); }
.bug-status--assigned        { color: #ffd24d; background: rgba(255,210,  77, 0.10); }
.bug-status--cannotreproduce { color: #9aa6bd; background: rgba(154,166, 189, 0.10); }
.bug-status--resolved        { color: #5edc7a; background: rgba( 94,220, 122, 0.12); }
.bug-status--closed          { color: #6b7d99; background: rgba(107,125, 153, 0.10); }

/* Severity pills — warm-only ramp, slightly heavier fill so they sit alongside
   status pills as a distinct visual category rather than competing with them. */
.bug-severity {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.bug-severity--trivial  { color: #8aa0c8; background: rgba(138,160,200,0.14); }
.bug-severity--minor    { color: #d6b16a; background: rgba(214,177,106,0.14); }
.bug-severity--major    { color: #e88a3d; background: rgba(232,138, 61,0.16); }
.bug-severity--critical { color: #e3543d; background: rgba(227, 84, 61,0.18); }
.bug-severity--blocker  { color: #ff4d6a; background: rgba(255, 77,106,0.20); }

/* Role pills — identity badges shown on the dashboard, distinct hues so each
   capability reads at a glance. Same shape language as bug-status/severity. */
.role-pills { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; vertical-align: middle; }
.role-pill {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
}
.role-pill--admin     { color: #ffb648; background: rgba(255,182, 72,0.14); }
.role-pill--moderator { color: #b58cff; background: rgba(181,140,255,0.14); }
.role-pill--developer { color: #6bd0ff; background: rgba(107,208,255,0.14); }
.role-pill--qa        { color: #5edc7a; background: rgba( 94,220,122,0.14); }
.role-pill--wiki      { color: #cfd8e8; background: rgba(207,216,232,0.10); }

/* Backer rank pill — uses same shape as role pills, single neutral colour. */
.backer-pill {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem 0.08rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  line-height: 1;
  color: #f0c674;
  background: rgba(240,198,116,0.10);
}

/* ---- Admin user list ---- */
.admin-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.55rem; }
.admin-row {
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  background: #111d34;
  transition: border-color 0.15s, background 0.15s;
}
.admin-row:hover { border-color: rgba(107,168,255,0.45); }
.admin-row > details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 1rem;
}
.admin-row > details > summary::-webkit-details-marker { display: none; }

.admin-row__summary {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(140px, 1.1fr) 2.2fr auto auto;
  align-items: center;
  gap: 0.9rem;
}
.admin-row__name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.admin-row__you {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-left: 0.4rem;
}
.admin-row__display {
  font-family: 'Barlow', sans-serif;
  color: #d6e1f5;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-row__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.admin-row__when {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.admin-row__chev {
  font-size: 0.9rem;
  color: var(--muted);
  transition: transform 0.18s;
}
.admin-row > details[open] .admin-row__chev { transform: rotate(180deg); }

.admin-row__body {
  border-top: 1px solid rgba(107,168,255,0.12);
  padding: 1rem 1rem 1.1rem;
  background: #0c1628;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 700px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-row__summary { grid-template-columns: 1fr auto; }
  .admin-row__display, .admin-row__when, .admin-row__pills { grid-column: 1 / -1; }
}
.admin-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(107,168,255,0.14);
  border-radius: 8px;
  background: #060d1c;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem;
  color: #d6e1f5;
}
.admin-flags__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.5rem;
}
.admin-flags label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  margin: 0;        /* override .unos-form label margin */
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  color: #d6e1f5;
  cursor: pointer;
}
.admin-row__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.admin-row__delete {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(107,168,255,0.14);
}

.unos-form select {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(107,168,255,0.18);
  background: #060d1c;
  color: #e7efff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem;
}
.admin-row .unos-form select { width: 100%; }

/* Bug ticket page — description body and comment timeline */
.bug-body {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #d6e1f5;
  white-space: normal;
}
.bug-comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.bug-comment {
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 10px;
  background: #111d34;
  padding: 0.7rem 1rem;
}
.bug-comment--internal {
  border-color: rgba(255,210,77,0.35);
  background: rgba(255,210,77,0.06);
}
.bug-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.bug-comment__author {
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.bug-comment__tag {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd24d;
  border: 1px solid #ffd24d;
  border-radius: 999px;
  padding: 0.16rem 0.5rem 0.06rem;
  line-height: 1;
}
.bug-comment__body {
  font-family: 'Barlow', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #d6e1f5;
}

/* Bug ticket inline editor — staff toggle between read-only spans
   (.bug-edit__view) and form inputs (.bug-edit__input) by adding
   .bug-editing on <body>. The shared form lives in the page; banner
   title and details inputs reach it via the form="bug-edit-form" attr. */
.bug-edit__input          { display: none; }
.bug-edit__save-btn       { display: none; }
body.bug-editing .bug-edit__view  { display: none; }
body.bug-editing .bug-edit__input { display: revert; }
body.bug-editing #bug-edit-start  { display: none; }
body.bug-editing .bug-edit__save-btn { display: inline-flex; }

.bug-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
/* Upvote sits on the right; spacing absorbs all the slack between it and
   the staff edit buttons so it stays right-justified at any width. */
.bug-upvote-form {
  margin: 0 0 0 auto;
  display: flex;
}
.bug-upvote-btn--voted {
  background: rgba(107,168,255,0.18);
  border-color: var(--accent);
  color: #e7efff;
}
.bug-upvote-chevrons {
  width: 14px;
  height: 12px;
  display: block;
}

/* Delete button + confirm modal — destructive red, matched to the in-game
   "Confirm Delete?" popup (red 2px border, red uppercase text, transparent
   fill). The modal sits over the page with a dark backdrop. */
.bug-delete-btn {
  color: #ff3b3b;
  border-color: rgba(255,59,59,0.6);
}
.bug-delete-btn:hover {
  background: rgba(255,59,59,0.12);
  border-color: #ff3b3b;
  color: #ff3b3b;
}
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__dialog {
  background: #0a1322;
  border: 2px solid #ff3b3b;
  padding: 1.25rem 2rem 1.4rem;
  min-width: 280px;
  max-width: 90vw;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 0 24px rgba(255,59,59,0.18);
}
.confirm-modal__title {
  color: #ff3b3b;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.confirm-modal__buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}
.confirm-modal__btn {
  color: #ff3b3b;
  background: transparent;
  border: 2px solid #ff3b3b;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.confirm-modal__btn:hover {
  background: rgba(255,59,59,0.16);
}
.confirm-modal__btn:focus {
  outline: none;
  background: rgba(255,59,59,0.22);
}

/* Dashboard "My Tickets" widget — bug rows you reported or own, with a
   visible alert when a row has been touched since you last viewed it. */
/* Dashboard "My Tickets" reuses .bug-row from the Reports list. Extras
 * unique to this widget — gold alert state, "Hide Closed" toggle — ride
 * on top as modifiers. */
.my-tickets__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.my-tickets__toggle input { accent-color: var(--accent); cursor: pointer; }
.bug-list--hide-closed > li[data-status="closed"] { display: none; }
/* The .bug-row[data-severity] rules above are 0,2,0 specificity — match
   that here with .bug-row.bug-row--alert so the gold alert tint wins
   over the per-severity tint when both apply. */
.bug-row.bug-row--alert {
  border-color: #ffd24d;
  background: rgba(255,210,77,0.16);
}
.bug-row.bug-row--alert:hover { border-color: #ffd24d; background: rgba(255,210,77,0.24); }
.bug-row__alert {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd24d;
  border: 1px solid #ffd24d;
  border-radius: 999px;
  padding: 0.16rem 0.5rem 0.06rem;
  line-height: 1;
  font-weight: 600;
}
/* Small gold dot in the panel tag when there are unseen updates. */
.my-tickets__update-pip {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #ffd24d;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* Reports panel pagination — sits in .unos-panel__header on the right. */
.bug-pager {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bug-pager__count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: rgba(207,225,255,0.7);
  text-transform: uppercase;
}
.bug-pager__nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.bug-pager__step,
.bug-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.45rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  border-radius: 6px;
  border: 1px solid rgba(107,168,255,0.22);
  background: rgba(107,168,255,0.04);
  color: #cfe1ff;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bug-pager__step:hover,
.bug-pager__page:hover {
  border-color: var(--accent);
  background: rgba(107,168,255,0.14);
  color: #fff;
  text-decoration: none;
}
.bug-pager__page--current {
  background: var(--accent);
  border-color: var(--accent);
  color: #031226;
  cursor: default;
}
.bug-pager__page--current:hover {
  background: var(--accent);
  color: #031226;
}
.bug-pager__step--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bug-pager__step--disabled:hover {
  border-color: rgba(107,168,255,0.22);
  background: rgba(107,168,255,0.04);
}
.bug-pager__chevrons {
  width: 12px;
  height: 14px;
  display: block;
}

.bug-edit__title-input {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.28);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.4rem;
}
.bug-edit__desc-input {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #d6e1f5;
  background: #060d1c;
  border: 1px solid rgba(107,168,255,0.18);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  resize: vertical;
}

/* Inline inputs/selects inside the Details rows. The val column is grid
   auto-sized so the input takes its intrinsic width; min-width keeps
   short fields like a status select from collapsing. */
.unos-data__val .bug-edit__input {
  min-width: 14rem;
  max-width: 100%;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(107,168,255,0.22);
  background: #060d1c;
  color: #e7efff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
}
.unos-data__val select.bug-edit__input { padding-right: 1.5rem; }
.bug-edit__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(107,168,255,0.18);
}

@media (max-width: 640px) {
  .bug-row__head { gap: 0.5rem; }
  .bug-row__title { font-size: 0.9rem; }
  .bug-row__meta { font-size: 0.75rem; }
}