@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --void:      #050506;
  --deep:      #08090b;
  --raise:     #0d0e11;

  --shell-bg:   rgba(255,255,255,.035);
  --shell-ring: rgba(255,255,255,.07);
  --core-bg:    rgba(13,14,17,.86);
  --core-ring:  rgba(255,255,255,.055);
  --core-lift:  inset 0 1px 0 rgba(255,255,255,.07);

  --ink:       #f2f3f0;
  --ink-soft:  rgba(242,243,240,.72);
  --muted:     #85888a;
  --faint:     rgba(242,243,240,.34);

  --acid:      #c8f472;
  --acid-deep: #8fbb3c;
  --chrome:    #c9cbd1;
  --steel:     #7fb2d9;
  --red:       #ff7d70;
  --amber:     #f2c66b;

  --line:      rgba(242,243,240,.08);
  --line-soft: rgba(242,243,240,.05);

  --r-shell: 28px;
  --r-core:  21px;
  --r-pill:  999px;
  --bezel:   7px;

  --ease:      cubic-bezier(.32,.72,0,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .32s;
  --t-mid:     .55s;
  --t-slow:    .85s;

  --gutter:  clamp(20px, 5vw, 76px);
  --section: clamp(96px, 13vh, 168px);

  --paper: var(--void);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(255,255,255,.16) transparent;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--void);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 8% -6%,  rgba(255,255,255,.06), transparent 62%),
    radial-gradient(52vw 42vw at 94% 14%, rgba(127,178,217,.06), transparent 60%),
    radial-gradient(64vw 52vw at 46% 108%, rgba(200,200,205,.05), transparent 62%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(242,243,240,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,243,240,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 2; }
main { max-width: 1480px; margin: 0 auto; padding-bottom: 8px; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.hidden, [hidden] { display: none !important; }

::selection { background: rgba(255,255,255,.22); color: var(--void); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); background-clip: content-box; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(48px, 7.4vw, 104px); }
h2 { font-size: clamp(36px, 4.6vw, 68px); }
h3 { font-size: clamp(19px, 2vw, 25px); letter-spacing: -.03em; line-height: 1.15; }

h1 em, h2 em, h3 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(96deg, #ffffff, #d7d9dd 46%, #83868c);
  -webkit-background-clip: text;
  background-clip: text;
}

p { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow > span:first-child {
  color: var(--chrome);
  font-variant-numeric: tabular-nums;
}
.eyebrow > span:first-child::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 9px;
  margin-left: 10px;
  vertical-align: -1px;
  background: var(--shell-ring);
}

.intro, .section-heading > p:last-child {
  max-width: 46ch;
  margin-top: 26px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}

.stat-label, .panel-top, .panel-footer, th, .rank-index, .rank-count,
.job-index, .live-pill, .signal, .access-badge, .sidebar-kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.muted, .privacy-note { color: var(--muted); }
.privacy-note { margin-top: 22px; font-size: 12px; }

.stat-card, .analysis-panel, .staff-card, .punishment-card, .ticket-card,
.job-card, .application-history-card, .server-panel, .session-status-card,
.public-announcement, .appeals-login, .account-panel, .applications-panel,
.rank-panel, .table-wrap, .linked-account, .application-form, .owner-section,
.admin-panel, .overview-grid article, .locked-state, .ticket-message {
  position: relative;
  border: 0;
  border-radius: var(--r-shell);
  background: var(--shell-bg);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  isolation: isolate;
}

.stat-card::before, .analysis-panel::before, .staff-card::before,
.punishment-card::before, .ticket-card::before, .job-card::before,
.application-history-card::before, .server-panel::before,
.session-status-card::before, .public-announcement::before,
.appeals-login::before, .account-panel::before, .applications-panel::before,
.rank-panel::before, .table-wrap::before, .linked-account::before,
.application-form::before, .owner-section::before, .admin-panel::before,
.overview-grid article::before, .locked-state::before, .ticket-message::before {
  content: '';
  position: absolute;
  inset: var(--bezel);
  z-index: -1;
  border-radius: var(--r-core);
  background: var(--core-bg);
  box-shadow: var(--core-lift), inset 0 0 0 1px var(--core-ring);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1320px, calc(100% - 32px));
  margin: 22px auto 0;
  padding: 9px 9px 9px 20px;
  border-radius: var(--r-pill);
  background: rgba(10,11,13,.62);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 60px rgba(0,0,0,.55);
  transition: transform var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.topbar.is-lifted { background: rgba(10,11,13,.82); }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img {
  width: 30px; height: 30px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.9) contrast(1.1);
  transition: transform var(--t-mid) var(--ease), filter var(--t-mid) var(--ease);
}
.brand:hover img { transform: rotate(-6deg) scale(1.06); filter: grayscale(0) brightness(1.4); }
.brand strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.1;
}
.brand strong span { color: var(--acid); }
.brand small {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 7px; font-weight: 500;
  letter-spacing: .26em;
  color: var(--faint);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.topbar nav a {
  position: relative;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.topbar nav a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.topbar nav a.active { color: var(--ink); background: rgba(255,255,255,.075); box-shadow: inset 0 0 0 1px var(--shell-ring); }
.topbar nav a.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--acid);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(200,244,114,.07);
  box-shadow: inset 0 0 0 1px rgba(200,244,114,.16);
  color: var(--acid);
  font-size: 9px;
  white-space: nowrap;
}
.live-pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acid);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,244,114,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(200,244,114,0); }
}

.admin-link {
  padding: 9px 17px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.admin-link:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.admin-link:active { transform: scale(.97); }
.admin-link.active { background: var(--ink); color: var(--void); }

.nav-toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle i {
  position: absolute;
  left: 50%;
  width: 15px; height: 1.5px;
  margin-left: -7.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-mid) var(--ease), opacity .2s var(--ease);
}
.nav-toggle i:nth-child(1) { top: 15px; }
.nav-toggle i:nth-child(2) { top: 23px; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 120px var(--gutter) 60px;
  background: rgba(5,5,6,.82);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  backdrop-filter: blur(40px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid) var(--ease);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.nav-overlay a::before {
  content: attr(data-index);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--chrome);
}
.nav-overlay a.active { color: var(--ink); }
.nav-overlay.is-open a { opacity: 1; transform: translateY(0); }
.nav-overlay.is-open a:nth-child(1) { transition-delay: .06s; }
.nav-overlay.is-open a:nth-child(2) { transition-delay: .11s; }
.nav-overlay.is-open a:nth-child(3) { transition-delay: .16s; }
.nav-overlay.is-open a:nth-child(4) { transition-delay: .21s; }
.nav-overlay.is-open a:nth-child(5) { transition-delay: .26s; }
.nav-overlay.is-open a:nth-child(6) { transition-delay: .31s; }
.nav-overlay.is-open a:nth-child(7) { transition-delay: .36s; }
body.nav-open { overflow: hidden; }

.button, .admin-button, .appeal-button, .proof-link, .details-button,
.text-link, .filter-button, .application-open, .dialog-close, .ticket-open-link {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.button, .admin-button, .appeal-button, .application-open {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 11px 11px 24px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 13px;
  letter-spacing: -.01em;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  color: var(--ink);
}

.button.primary, .admin-button:not(.secondary), .appeal-button {
  background: var(--ink);
  color: var(--void);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.12);
}

.button > span, .admin-button > span, .appeal-button > span, .text-link > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.09);
  font-size: 13px;
  line-height: 1;
  transition: transform var(--t-mid) var(--ease), background-color var(--t-fast) var(--ease);
}
.button:not(.primary) > span, .admin-button.secondary > span { background: rgba(255,255,255,.09); }

.button:hover, .admin-button:not(:disabled):hover, .appeal-button:hover, .application-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 -1px 0 rgba(0,0,0,.12);
}
.button:hover > span, .admin-button:not(:disabled):hover > span, .appeal-button:hover > span {
  transform: translate(3px, -1px) scale(1.06);
  background: rgba(0,0,0,.16);
}
.button:active, .admin-button:not(:disabled):active, .appeal-button:active, .application-open:active {
  transform: scale(.975);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

.admin-button.secondary, .button:not(.primary) {
  background: rgba(255,255,255,.05);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
}
.admin-button.secondary:hover, .button:not(.primary):hover {
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
}

.admin-button:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.admin-button:disabled:hover { transform: none; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.text-link > span {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
}
.text-link:hover { color: var(--ink); }
.text-link:hover > span { transform: translateX(3px); background: rgba(255,255,255,.13); }

.details-button, .proof-link, .ticket-open-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: .02em;
}
.details-button:hover, .proof-link:hover, .ticket-open-link:hover {
  background: rgba(255,255,255,.1);
  color: var(--ink);
  transform: translateY(-1px);
}
.details-button:active, .proof-link:active { transform: scale(.96); }

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
  padding: clamp(80px, 12vh, 150px) var(--gutter) clamp(60px, 9vh, 110px);
  min-height: min(76vh, 760px);
}
.hero h1 { margin-bottom: 4px; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 38px;
}
.hero-features {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 46px;
}
.hero-features span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--muted);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hero-features span:hover { transform: translateY(-2px); color: var(--ink-soft); }
.hero-features i { font-style: normal; color: var(--chrome); }

.hero-orbit {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.orbit {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(242,243,240,.09);
  animation: spin 34s linear infinite;
}
.orbit::after {
  content: '';
  position: absolute;
  top: 50%; left: -4px;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--chrome);
  box-shadow: 0 0 14px 2px rgba(255,255,255,.35);
}
.orbit-b {
  inset: 19%;
  border-style: dashed;
  border-color: rgba(242,243,240,.07);
  animation-duration: 46s;
  animation-direction: reverse;
}
.orbit-b::after { background: var(--steel); box-shadow: 0 0 14px 2px rgba(127,178,217,.45); }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit-core {
  position: relative;
  width: 46%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.09), rgba(8,9,11,.96) 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 2px 1px rgba(255,255,255,.07),
    0 30px 70px rgba(0,0,0,.6);
  animation: float 7s ease-in-out infinite alternate;
}
@keyframes float { to { transform: translateY(-11px); } }
.orbit-core img {
  width: 56%;
  filter: grayscale(1) brightness(2.4);
  opacity: .9;
}

.signal {
  position: absolute;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(10,11,13,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  font-size: 9px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.signal-a { top: 16%; right: -2%; }
.signal-b { bottom: 19%; left: -4%; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 var(--gutter);
}
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.stat-card {
  padding: calc(var(--bezel) + 26px) calc(var(--bezel) + 24px);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.stat-card .stat-label { color: var(--faint); }
.stat-card strong {
  display: block;
  margin: 18px 0 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-card.accent strong {
  color: transparent;
  background: linear-gradient(96deg, var(--acid), #eaffc4);
  -webkit-background-clip: text;
  background-clip: text;
}
.stat-card small { color: var(--muted); font-size: 11.5px; }

.section { padding: var(--section) var(--gutter); }
.section-heading { max-width: 640px; }
.split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
}
.row-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.page-hero {
  padding: clamp(80px, 13vh, 140px) var(--gutter) clamp(20px, 4vh, 48px);
  max-width: 900px;
}
.page-hero.compact { padding-bottom: clamp(12px, 3vh, 32px); }

.analysis-panel { padding: calc(var(--bezel) + 26px); }
.panel-top, .panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--faint);
}
.chart {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.4vw, 14px);
  height: clamp(180px, 26vh, 270px);
  margin: 34px 0 42px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line);
}
.bar {
  position: relative;
  flex: 1;
  min-height: 8px;
  height: var(--height);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(to top, rgba(242,243,240,.05), rgba(242,243,240,.15));
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  transform-origin: bottom;
  animation: barGrow .9s var(--ease) both;
  transition: background-color var(--t-fast) var(--ease);
}
@keyframes barGrow { from { transform: scaleY(0); opacity: 0; } }
.bar:hover { background: linear-gradient(to top, rgba(242,243,240,.09), rgba(242,243,240,.24)); }
.bar.current {
  background: linear-gradient(to top, rgba(200,244,114,.22), rgba(200,244,114,.72));
  box-shadow: inset 0 0 0 1px rgba(200,244,114,.3), 0 0 34px -6px rgba(200,244,114,.4);
}
.bar span {
  position: absolute;
  left: 50%; bottom: -26px;
  transform: translateX(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--faint);
}
.bar.current span { color: var(--acid); }
.legend-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--acid);
}
.panel-footer strong { color: var(--ink-soft); font-size: 9px; }
.large-panel .chart { height: clamp(220px, 38vh, 400px); }

.home-server-section, .session-status-section {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  padding: var(--section) var(--gutter);
}
.session-status-section { padding-top: 0; }

.server-panel { padding: calc(var(--bezel) + 28px); }
.server-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.server-icon {
  width: 62px; height: 62px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
}
.server-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 15px; }
.server-identity h3 { margin: 8px 0 6px; }
.server-identity small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}
.online-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acid);
  animation: pulse 2.6s var(--ease) infinite;
}
.server-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.server-metrics > div {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px var(--core-ring);
}
.server-metrics strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.server-metrics span { font-size: 11px; color: var(--muted); }

.session-status-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: calc(var(--bezel) + 26px);
}
.session-status-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
}
.session-status-icon i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.session-status-card strong {
  display: block;
  margin: 10px 0 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.035em;
}
.session-status-card small { color: var(--muted); font-size: 11.5px; }
.session-status-card.online i,
.session-status-card.active i { background: var(--acid); box-shadow: 0 0 20px 3px rgba(200,244,114,.45); }
.session-status-card.offline i,
.session-status-card.closed i { background: var(--red); box-shadow: 0 0 20px 3px rgba(255,125,112,.35); }
.session-status-card.unknown i { background: var(--amber); box-shadow: 0 0 20px 3px rgba(242,198,107,.3); }

.announcement-list {
  display: grid;
  gap: 14px;
  margin-top: 48px;
}
.public-announcement { padding: calc(var(--bezel) + 26px); }
.announcement-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.announcement-meta strong { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; }
.announcement-meta span {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.announcement-meta small { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.announcement-body { color: var(--ink-soft); line-height: 1.75; overflow-wrap: anywhere; }
.announcement-body a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.announcement-body pre, .announcement-body code {
  font-family: ui-monospace, 'SFMono-Regular', monospace;
  font-size: 12.5px;
  background: rgba(0,0,0,.4);
  border-radius: 8px;
}
.announcement-body code { padding: 2px 6px; }
.announcement-body pre { padding: 16px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--core-ring); }
.announcement-body blockquote {
  margin: 12px 0;
  padding-left: 16px;
  border-left: 2px solid rgba(255,255,255,.22);
  color: var(--muted);
}
.announcement-empty, .staff-empty, .empty-state, .empty {
  padding: 46px 24px;
  border-radius: var(--r-shell);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.registry-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.search, select, input, textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.search:focus-within { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.search span { color: var(--faint); font-size: 15px; }
.search input { width: 180px; border: 0; background: transparent; outline: 0; }
.search input::placeholder, textarea::placeholder, input::placeholder { color: var(--faint); }

select {
  height: 44px;
  padding: 0 40px 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2385888a' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 18px center;
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  outline: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
select option { background: var(--raise); color: var(--ink); }

.table-wrap { overflow-x: auto; padding: var(--bezel); }
table { width: 100%; min-width: 680px; border-collapse: collapse; }
th, td { text-align: left; padding: 17px 18px; }
th { color: var(--faint); border-bottom: 1px solid var(--line); }
td { font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
tbody tr { transition: background-color var(--t-fast) var(--ease); }
tbody tr:hover { background: rgba(255,255,255,.028); }
tbody tr:last-child td { border-bottom: 0; }
td .muted { font-size: 10.5px; }
.id { font-family: 'Space Grotesk', sans-serif; font-weight: 500; color: var(--ink); }
.bl-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bl-avatar { flex: none; width: 38px; height: 38px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--shell-ring); color: var(--faint); font: 600 14px 'Space Grotesk', sans-serif; }
.bl-profile { margin-left: 6px; font-size: 11.5px; color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.bl-dialog-head { margin: 6px 0 18px; }
.bl-dialog-head h2 { margin: 0; }
.bl-dialog-head .bl-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }
.bl-dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; }
.registry-count { margin: -6px 0 14px; color: var(--faint); font-size: 12.5px; }

.status, .record-status, .ticket-card-status, .application-status, .access-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(200,244,114,.08);
  box-shadow: inset 0 0 0 1px rgba(200,244,114,.16);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acid);
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status.removed, .application-status.rejected, .record-status.removed {
  background: rgba(255,125,112,.08);
  box-shadow: inset 0 0 0 1px rgba(255,125,112,.18);
  color: var(--red);
}
.application-status.pending {
  background: rgba(242,198,107,.08);
  box-shadow: inset 0 0 0 1px rgba(242,198,107,.18);
  color: var(--amber);
}
td.empty { border-bottom: 0; box-shadow: none; background: transparent; }

.staff-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(36px, 5vw, 84px);
  padding: var(--section) var(--gutter);
}
.staff-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.staff-heading-meta { text-align: right; max-width: 340px; }
.staff-description { color: var(--muted); font-size: 14px; line-height: 1.7; }
.roster-count {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ink-soft);
}

.staff-grid { display: grid; gap: 14px; }

.rank-panel { padding: calc(var(--bezel) + 22px); }
.rank-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.rank-index { display: block; margin-bottom: 9px; color: var(--chrome); }
.rank-count {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  color: var(--muted);
  white-space: nowrap;
}
.rank-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
}

.staff-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(var(--bezel) + 8px);
  border-radius: 20px;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.staff-card::before { border-radius: 13px; }
.staff-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.staff-card img {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--shell-ring);
  filter: grayscale(1);
  transition: filter var(--t-mid) var(--ease);
}
.staff-card:hover img { filter: grayscale(0); }
.staff-card > div { min-width: 0; }
.staff-card strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-card small { display: block; font-size: 10.5px; color: var(--faint); }
.staff-card .staff-rank { color: var(--chrome); letter-spacing: .04em; }
.staff-card .staff-also { opacity: .72; font-size: .92em; line-height: 1.35; }

.owner-section {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: 0 var(--gutter) var(--section);
  padding: calc(var(--bezel) + 40px);
}
.owner-avatar {
  width: 104px; height: 104px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
}
.owner-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.owner-copy h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 12px; }
.owner-copy p { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-family: 'Space Grotesk', sans-serif; }
.owner-copy p strong { color: var(--ink); }
.owner-copy small { display: block; margin-top: 10px; color: var(--faint); font-size: 12px; }
.owner-mark {
  padding: 20px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px var(--core-ring);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: right;
  white-space: nowrap;
}
.owner-mark span { font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 34px var(--gutter) 46px;
  border-top: 1px solid var(--line);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.footer-brand img { width: 26px; height: 26px; }
footer a { color: var(--ink-soft); transition: color var(--t-fast) var(--ease); }
footer a:hover { color: var(--ink); }

.appeals-shell, .applications-shell {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 4vh, 44px) var(--gutter) var(--section);
}

.appeals-login {
  padding: calc(var(--bezel) + clamp(30px, 5vw, 58px));
  max-width: 720px;
}
.appeals-login h2 { margin-bottom: 16px; font-size: clamp(30px, 3.6vw, 46px); }
.appeals-login p { max-width: 48ch; color: var(--muted); margin-bottom: 30px; }
.admin-panel-mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  color: var(--ink);
  font-size: 17px;
}

.account-panel, .applications-panel { padding: calc(var(--bezel) + clamp(24px, 3.6vw, 44px)); }
.account-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.account-header img {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--shell-ring);
}
.account-header > div { min-width: 0; flex: 1; }
.account-header h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 10px 0 6px; }
.account-header p { color: var(--muted); font-size: 13px; }
.account-header small { display: block; margin-top: 4px; font-size: 11px; color: var(--faint); }

.linked-account { margin: 22px 0 4px; padding: calc(var(--bezel) + 18px); }
.linked-account strong {
  display: block;
  margin-top: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.linked-account small { color: var(--faint); font-size: 11.5px; }

.record-heading { margin: 52px 0 22px; }
.record-heading h2 { font-size: clamp(24px, 2.8vw, 36px); }

.punishment-list, .ticket-list, .application-history { display: grid; gap: 12px; }

.punishment-card { padding: calc(var(--bezel) + 24px); }
.punishment-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.record-id {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--faint);
}
.punishment-card h3 { margin-bottom: 10px; }
.punishment-card p { color: var(--muted); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.punishment-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.punishment-meta span {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--core-ring);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--faint);
}
.punishment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.appeal-button { padding: 9px 20px; font-size: 12px; }
.appeal-result {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(127,178,217,.09);
  box-shadow: inset 0 0 0 1px rgba(127,178,217,.2);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  color: var(--steel);
}
.not-appealable { color: var(--faint); font-size: 11.5px; }

.ticket-card { padding: calc(var(--bezel) + 22px); }
.ticket-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ticket-card-header a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--ease);
}
.ticket-card-header a:hover { color: var(--ink); }

.job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.job-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: calc(var(--bezel) + 30px);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.job-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.job-index {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chrome);
}
.job-card p { flex: 1; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.job-card .admin-button { margin-top: 8px; }
.application-closed:disabled { opacity: .38; }

.application-history-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: calc(var(--bezel) + 20px);
}
.application-history-card strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.application-history-card small { margin-left: auto; font-size: 11px; color: var(--faint); }

.application-form { display: grid; gap: 18px; padding: calc(var(--bezel) + clamp(24px, 3.6vw, 40px)); }
.application-form h2 { margin-bottom: 8px; }
label {
  display: grid;
  gap: 9px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), textarea {
  width: 100%;
  padding: 14px 17px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  color: var(--ink);
  outline: 0;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus, textarea:focus {
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
input[type="checkbox"], input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--acid);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
input[type="file"] { font-size: 12px; color: var(--muted); }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
input[type="file"]::file-selector-button:hover { background: rgba(255,255,255,.11); }
.application-form .admin-button { justify-self: start; margin-top: 6px; }
.back-to-jobs { justify-self: start; margin-bottom: 6px; }

.form-message:empty { display: none; }
.form-message {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,125,112,.08);
  box-shadow: inset 0 0 0 1px rgba(255,125,112,.2);
  color: var(--red);
  font-size: 12.5px;
}

.application-notice {
  position: fixed;
  left: 50%; bottom: 32px;
  z-index: 80;
  transform: translateX(-50%);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: rgba(12,13,16,.9);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px var(--shell-ring), 0 22px 60px rgba(0,0,0,.6);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: var(--ink);
  animation: toastIn .5s var(--ease) both;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 18px); } }
.application-notice.closed { color: var(--red); }
.application-notice.pending { color: var(--amber); }

.ticket-page { display: grid; }
.ticket-messages { display: grid; gap: 12px; margin: 26px 0 32px; }
.ticket-message {
  padding: calc(var(--bezel) + 18px);
  border-left: 2px solid transparent;
  overflow-wrap: anywhere;
}
.ticket-message strong {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.ticket-message strong small { font-size: 10px; font-weight: 400; color: var(--faint); }
.ticket-message > span { display: block; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }
.discord-embed {
  display: block;
  margin-top: 14px;
  padding: 16px 18px;
  border-left: 3px solid var(--steel);
  border-radius: 4px 14px 14px 4px;
  background: rgba(0,0,0,.34);
}
.discord-embed strong { font-size: 13px; margin-bottom: 6px; }
.discord-embed p { color: var(--muted); font-size: 13px; }
.discord-embed b { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ticket-image { max-width: min(360px, 100%); margin-top: 12px; border-radius: 14px; }
.ticket-file {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  font-size: 12px;
}
.ticket-reply { display: grid; gap: 14px; }
.ticket-reply .admin-button { justify-self: start; }

dialog {
  width: min(560px, calc(100% - 32px));
  padding: var(--bezel);
  border: 0;
  border-radius: var(--r-shell);
  background: rgba(16,17,20,.96);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  box-shadow: inset 0 0 0 1px var(--shell-ring), 0 40px 110px rgba(0,0,0,.7);
  color: var(--ink);
}
dialog::backdrop {
  background: rgba(4,4,5,.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
dialog[open] { animation: dialogIn .45s var(--ease) both; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
dialog form {
  position: relative;
  padding: clamp(26px, 4vw, 38px);
  border-radius: var(--r-core);
  background: var(--core-bg);
  box-shadow: var(--core-lift), inset 0 0 0 1px var(--core-ring);
}
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.dialog-header h2 { font-size: clamp(24px, 3vw, 32px); }
dialog h2 { margin-bottom: 20px; }
.dialog-close {
  position: absolute;
  top: 18px; right: 18px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--shell-ring);
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.dialog-header .dialog-close { position: static; }
.dialog-close:hover { background: rgba(255,125,112,.16); transform: rotate(90deg); }
.appeal-fields { display: grid; gap: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.record-detail-grid { display: grid; gap: 22px; margin-top: 8px; }
.record-detail-grid b {
  display: block;
  margin-bottom: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.record-detail-grid p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.record-detail-grid a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }

[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(6px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    filter var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-orbit { width: min(100%, 320px); margin-top: 12px; }
  .split, .staff-section, .home-server-section, .session-status-section { grid-template-columns: 1fr; }
  .owner-section { grid-template-columns: auto 1fr; }
  .owner-mark { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 900px) {
  .topbar nav { display: none; }
  .nav-toggle { display: block; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --r-shell: 24px; --r-core: 18px; --bezel: 6px; --gutter: 18px; }
  .topbar { width: calc(100% - 20px); margin-top: 12px; padding-left: 16px; }
  .live-pill span, .admin-link { display: none; }
  .header-actions .live-pill { padding: 8px; }
  .live-pill i { margin: 0; }
  .hero { padding-top: 60px; min-height: 0; }
  .hero-orbit { width: min(100%, 268px); }
  .signal-a { right: -8px; }
  .signal-b { left: -8px; }
  .stats-grid, .analytics-summary, .job-grid, .rank-members { grid-template-columns: 1fr; }
  .owner-section { grid-template-columns: 1fr; text-align: left; }
  .staff-heading-meta { text-align: left; }
  .row-heading, .staff-heading { align-items: flex-start; }
  .registry-tools { width: 100%; }
  .search { flex: 1; }
  .search input { width: 100%; }
  select { width: 100%; }
  .announcement-meta small { margin-left: 0; width: 100%; }
  .application-history-card small { margin-left: 0; width: 100%; }
  footer { justify-content: flex-start; }
  .nav-overlay { padding-top: 96px; }
}

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

.s95-motion .hero-copy,
.s95-motion .hero-orbit,
.s95-motion .page-hero,
.s95-motion .section-heading,
.s95-motion .staff-heading,
.s95-motion .row-heading,
.s95-motion .stat-card,
.s95-motion .analysis-panel,
.s95-motion .server-intro,
.s95-motion .server-panel,
.s95-motion .session-status-section > div,
.s95-motion .table-wrap,
.s95-motion .owner-section,
.s95-motion .appeals-login,
.s95-motion .account-panel,
.s95-motion .applications-panel {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.s95-motion .is-in {
  opacity: 1;
  transform: none;
}

.staff-card, .public-announcement, .punishment-card, .ticket-card,
.application-history-card, .rank-panel, .job-card {
  animation: cardIn .7s var(--ease-out) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(22px); } }
.rank-members .staff-card:nth-child(2) { animation-delay: .05s; }
.rank-members .staff-card:nth-child(3) { animation-delay: .1s; }
.rank-members .staff-card:nth-child(4) { animation-delay: .15s; }
.rank-members .staff-card:nth-child(5) { animation-delay: .2s; }
.rank-members .staff-card:nth-child(n+6) { animation-delay: .25s; }
.staff-grid .rank-panel:nth-child(2) { animation-delay: .08s; }
.staff-grid .rank-panel:nth-child(3) { animation-delay: .16s; }
.staff-grid .rank-panel:nth-child(n+4) { animation-delay: .24s; }
.punishment-list .punishment-card:nth-child(2),
.ticket-list .ticket-card:nth-child(2),
.announcement-list .public-announcement:nth-child(2) { animation-delay: .07s; }
.punishment-list .punishment-card:nth-child(3),
.ticket-list .ticket-card:nth-child(3),
.announcement-list .public-announcement:nth-child(3) { animation-delay: .14s; }
.punishment-list .punishment-card:nth-child(n+4),
.ticket-list .ticket-card:nth-child(n+4),
.announcement-list .public-announcement:nth-child(n+4) { animation-delay: .21s; }
.job-grid .job-card:nth-child(2) { animation-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
  .s95-motion .hero-copy,
  .s95-motion .hero-orbit,
  .s95-motion .page-hero,
  .s95-motion .section-heading,
  .s95-motion .staff-heading,
  .s95-motion .row-heading,
  .s95-motion .stat-card,
  .s95-motion .analysis-panel,
  .s95-motion .server-intro,
  .s95-motion .server-panel,
  .s95-motion .session-status-section > div,
  .s95-motion .table-wrap,
  .s95-motion .owner-section,
  .s95-motion .appeals-login,
  .s95-motion .account-panel,
  .s95-motion .applications-panel { opacity: 1; transform: none; }
}

.server-intro > p,
.session-status-section > div > p,
.appeals-login > p,
.job-card > p {
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.72;
}
.server-intro > p, .session-status-section > div > p { margin-top: 24px; }
.server-intro .text-link { margin-top: 30px; }

.button.primary > span,
.admin-button:not(.secondary) > span,
.appeal-button > span {
  background: rgba(5,5,6,.1);
  color: var(--void);
}
.button.primary:hover > span,
.admin-button:not(.secondary):hover > span,
.appeal-button:hover > span { background: rgba(5,5,6,.18); }

.search svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--faint); }
.search:focus-within svg { color: var(--ink); }

.admin-button[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
.admin-button[aria-disabled="true"]:hover { transform: none; box-shadow: inset 0 0 0 1px var(--shell-ring); }
.admin-button[aria-disabled="true"]:hover > span { transform: none; }
.application-notice.sent { color: var(--acid); }
.standalone-blacklist .registry-tools { max-width: 640px; }
.standalone-blacklist .registry-tools .search { flex: 1 1 100%; }
.standalone-blacklist .registry-tools > .dd, .standalone-blacklist .registry-tools > select { flex: 1 1 140px; width: auto; min-width: 0; }
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.legal-toc { position: sticky; top: 100px; display: grid; gap: 6px; font-size: 12.5px; }
.legal-toc a { color: var(--faint); text-decoration: none; padding: 4px 0; }
.legal-toc a:hover { color: var(--ink); }
.legal-body { max-width: 760px; }
.legal-body h2 { margin: 42px 0 12px; font-size: 22px; scroll-margin-top: 100px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin: 22px 0 8px; font-size: 15px; color: var(--ink); }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.75; }
.legal-body ul { margin: 8px 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.legal-body a { color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.legal-note { margin-top: 32px; font-size: 13px; color: var(--faint); }
footer a[href="/privacy"] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; gap: 20px; } .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 14px; } }